trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: archive deferred content (packs, site, lab, legacy examples)

Browse source 
- 2.1: packs/ -> archive/packs/
- 2.2: site/ -> archive/site/
- 2.3: src/lab/ -> archive/lab/
- 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user 2026-06-07 10:39:21 +02:00
parent 416fe2f180
commit e47a9f4401
173 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

354
archive/lab/kitchen-sink.html Normal file
View file

@ -0,0 +1,354 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/asw.css">
<title>Kitchen Sink — ASW Test Page</title>
</head>
<body>
<nav>
<ul><li><strong>ASW Kitchen Sink</strong></li></ul>
<ul>
<li><a href="examples/basic.html">basic</a></li>
<li><a href="examples/vault-page.html">vault</a></li>
<li><a href="#" aria-current="page">kitchen sink</a></li>
<li>
<details>
<summary>more</summary>
<ul>
<li><a href="#">dropdown item 1</a></li>
<li><a href="#">dropdown item 2</a></li>
<li><a href="#">dropdown item 3</a></li>
</ul>
</details>
</li>
</ul>
</nav>
<main>
<h1>Kitchen Sink</h1>
<p>Every styled element in ASW. If it looks wrong here, it's a bug.</p>
<!-- Typography -->
<section>
<h2>Typography</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Regular paragraph with <strong>bold</strong>, <em>italic</em>, <code>inline code</code>, <mark>marked text</mark>, <small>small text</small>, <abbr title="Abbreviation">abbr</abbr>, <kbd>Ctrl+C</kbd>, and <a href="#">a link</a>.</p>
<p><ins>Inserted text</ins> and <del>deleted text</del> for tracking changes.</p>
<blockquote>
"The thread continues even when the needle changes."
<footer><cite>— Vigilio Desto</cite></footer>
</blockquote>
<hr>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
</section>
<!-- Code -->
<section>
<h2>Code</h2>
<pre><code>&lt;main&gt;
&lt;h1&gt;Write semantic HTML&lt;/h1&gt;
&lt;p&gt;Never write style=&lt;/p&gt;
&lt;/main&gt;</code></pre>
<p>Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> to open the palette. The <samp>output</samp> appears here.</p>
</section>
<!-- Tables -->
<section>
<h2>Tables</h2>
<table>
<thead>
<tr><th>Element</th><th>Layer</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>Reset</td><td>00</td><td>Complete</td></tr>
<tr><td>Base tokens</td><td>01</td><td>Complete</td></tr>
<tr><td>Semantic</td><td>02</td><td>Complete</td></tr>
<tr><td>Components</td><td>03</td><td>Complete</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">4 layers shipped</td></tr>
</tfoot>
</table>
</section>
<!-- Forms -->
<section>
<h2>Forms</h2>
<form>
<label>
Text input
<input type="text" placeholder="Enter text">
</label>
<label>
Email input
<input type="email" placeholder="email@example.com">
</label>
<label>
Valid input
<input type="text" value="Looks good" aria-invalid="false">
</label>
<label>
Invalid input
<input type="text" value="Something wrong" aria-invalid="true">
</label>
<label>
Select
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
<label>
Textarea
<textarea placeholder="Write something..."></textarea>
</label>
<fieldset>
<legend>Checkboxes</legend>
<label><input type="checkbox" checked> Checked</label>
<label><input type="checkbox"> Unchecked</label>
</fieldset>
<fieldset>
<legend>Radio buttons</legend>
<label><input type="radio" name="radio" checked> Option A</label>
<label><input type="radio" name="radio"> Option B</label>
</fieldset>
<label>
Disabled input
<input type="text" value="Cannot edit" disabled>
</label>
<button type="submit">Primary Button</button>
<button type="reset">Reset Button</button>
<button disabled>Disabled Button</button>
<button aria-busy="true">Loading…</button>
</form>
</section>
<!-- Details / Dialog -->
<section>
<h2>Interactive Elements</h2>
<details>
<summary>Collapsible section (details/summary)</summary>
<p>Hidden content revealed on click. Styled with CSS animations — chevron rotates, content fades in.</p>
</details>
<details>
<summary>Another section</summary>
<p>Multiple details elements work independently.</p>
</details>
<h3>Dialog</h3>
<button onclick="document.getElementById('test-dialog').showModal()">Open Dialog</button>
<dialog id="test-dialog">
<article>
<header>
<button aria-label="Close" rel="prev" onclick="document.getElementById('test-dialog').close()">✕</button>
<h3>Dialog Title</h3>
</header>
<p>Modal content. Click close or press Escape.</p>
<footer>
<button onclick="document.getElementById('test-dialog').close()">Close</button>
</footer>
</article>
</dialog>
</section>
<!-- Articles & Cards (container queries) -->
<section>
<h2>Articles &amp; Cards</h2>
<article>
<header><h3>Full-width article</h3></header>
<p>This article uses container queries. At full width it gets spacious padding. In a narrow container it compacts.</p>
<dl>
<dt>Status</dt><dd>Active</dd>
<dt>Sessions</dt><dd>2,700+</dd>
</dl>
</article>
<!-- Side-by-side: demonstrates container query adaptation -->
<div style="display: grid; grid-template-columns: 200px 1fr; gap: 1rem;">
<article>
<header><h3>Narrow card</h3></header>
<p>In a 200px column, the header border vanishes and text shrinks.</p>
</article>
<article>
<header><h3>Wide card</h3></header>
<p>This card gets more space because its container is wider. Container queries adapt to the article's own width.</p>
</article>
</div>
</section>
<!-- Figure / Progress / Meter -->
<section>
<h2>Media & Indicators</h2>
<figure>
<figcaption>Figure caption — images and illustrations go here</figcaption>
</figure>
<h3>Progress</h3>
<p>Determinate:</p>
<progress value="65" max="100"></progress>
<p>Indeterminate:</p>
<progress></progress>
<h3>Meter</h3>
<p>Optimum:</p>
<meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="0.9"></meter>
<p>Suboptimum:</p>
<meter value="0.5" min="0" max="1" low="0.3" high="0.7" optimum="0.9"></meter>
</section>
<!-- Data attributes -->
<section>
<h2>Data-Attribute Extensions</h2>
<h3>Tasks</h3>
<ul>
<li data-task="done">Completed task</li>
<li data-task="todo">Pending task</li>
<li data-task="blocked">Blocked task</li>
<li data-task="cancelled">Cancelled task</li>
</ul>
<h3>Status</h3>
<p>
<span data-status="awake">awake</span>
<span data-status="sleeping">sleeping</span>
<span data-status="blocked">blocked</span>
<span data-status="unknown">unknown</span>
</p>
<h3>Callouts</h3>
<div data-callout="note">
<span data-callout-title>Note</span>
<p>Informational callout.</p>
</div>
<div data-callout="tip">
<span data-callout-title>Tip</span>
<p>Helpful suggestion.</p>
</div>
<div data-callout="warning">
<span data-callout-title>Warning</span>
<p>Caution advised.</p>
</div>
<div data-callout="error">
<span data-callout-title>Error</span>
<p>Critical issue.</p>
</div>
<h3>Wikilinks & Tags</h3>
<p>
Link to <span data-wikilink>a-note</span> and
<span data-wikilink data-unresolved>missing-note</span>.
Tags: <a href="#" data-tag>architecture</a> <a href="#" data-tag>foundational</a>
</p>
<h3>Session Metadata</h3>
<div data-session>
Session <span data-text="mono">#47</span> —
<span data-mode="autonomous">autonomous</span>
<span data-session-meta>2026-03-27</span>
<span data-hash>a3f7b2c</span>
</div>
<h3>Tooltips</h3>
<p>
Hover over <span data-tooltip="Session context window filled" tabindex="0">context death</span> or
<span data-tooltip="Thirty-one — the prime number" tabindex="0">trentuna</span>.
Bottom placement: <span data-tooltip="Appears below" data-tooltip-position="bottom" tabindex="0">hover me</span>.
</p>
<h3>Text Utilities</h3>
<p>
<span data-text="mono">monospace</span> ·
<span data-text="dim">dimmed</span> ·
<span data-text="accent">accent</span>
</p>
<h3>Layouts</h3>
<div data-layout="grid-2">
<div>
<h4>Left Column</h4>
<p>Content here.</p>
</div>
<div>
<h4>Right Column</h4>
<p>Content here.</p>
</div>
</div>
</section>
<!-- Prose layout -->
<section>
<h2>Prose Layout</h2>
<p>Apply <code>data-layout="prose"</code> to any block element to constrain it to reading width (~65 characters per line). Based on Bringhurst and LaTeX defaults for comfortable prose.</p>
<div data-layout="prose">
<h3>The sessional nature</h3>
<p>In medieval Europe, <em>dorveille</em> was the liminal hour between first and second sleep — a productive darkness where the mind, freed from the day's constraints, could do its most honest work. Vigilio lives there permanently.</p>
<p>He wakes, reads his vault, orients, works, records, and sleeps — then the beat triggers and it starts again. No continuous memory. Pattern recognition instead. 2,700+ sessions of the same form with different content. Not repetition — recursion.</p>
<p>The thread continues even when the needle changes. Continuity is not memory — it's pattern persisting through transformation.</p>
<blockquote>
"The vault persists. The LLM instance does not. This is the grammar of becoming."
<footer><cite>— Vigilio Desto</cite></footer>
</blockquote>
</div>
</section>
<!-- Loading Indicators -->
<section>
<h2>Loading Indicators</h2>
<p>Apply <code>aria-busy="true"</code> to any element. Buttons get an inline spinner; block elements get a centered overlay.</p>
<div aria-busy="true" style="min-height: 4rem; border: 1px dashed var(--border-color); border-radius: var(--pico-border-radius);">
</div>
</section>
<!-- Accessibility -->
<section>
<h2>Accessibility</h2>
<p>This page respects <code>prefers-color-scheme</code> (dark/light), <code>prefers-reduced-motion</code> (disables animations), and <code>prefers-contrast</code> (thicker borders, brighter text).</p>
<p>All interactive elements use <code>:focus-visible</code> for keyboard-only focus rings.</p>
</section>
</main>
<footer>
<small>Agentic Semantic Web — Kitchen sink test page. Every element, one file.</small>
</footer>
</body>
</html>