@christianirack/brainllm-runtime 0.0.0-stage → 0.1.0

package/themes/contrast.cssbrain

@@ -0,0 +1,39 @@
+/* BRAINLLM theme — high contrast (AAA text). Written by `brain theme contrast`; tokens are the only source of color and spacing. */
+:root {
+  color-scheme: light;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
+  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
+  /* AA text pairs (>= 4.5:1, verified by runtime/test/themes.test.js): fg|muted|accent|ok|bad on bg or surface;
+     on-accent on accent|ok|bad. --line is for borders only, never for text. --scrim is the backdrop of modals. */
+  --fg: #000000; --muted: #333333; --bg: #ffffff; --surface: #ffffff; --line: #000000;
+  --scrim: rgb(0 0 0 / .7);
+  --accent: #0033a0; --ok: #00552b; --bad: #8b0000; --on-accent: #ffffff;
+  --font: "Geist", "SF Pro Text", ui-sans-serif, sans-serif;
+  --glass: #ffffff; --glass-edge: #000000;
+  --shadow: none;
+}
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; font-family: var(--font); color: var(--fg); line-height: 1.5;
+    -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
+    background:
+      radial-gradient(1100px 600px at 12% -10%, #ffffff, transparent 60%),
+      radial-gradient(900px 600px at 110% 10%, rgba(0, 0, 0, 0), transparent 60%),
+      var(--bg);
+    background-attachment: fixed;
+  }
+  h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; }
+  a { color: var(--accent); }
+  button, input, textarea, select { font: inherit; color: inherit; }
+  button {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4); cursor: pointer;
+  }
+  input, textarea, select {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+  }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  @media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:active { transform: scale(.98); } }
+}

package/themes/dark.cssbrain

@@ -0,0 +1,39 @@
+/* BRAINLLM theme — dark glass. Written by `brain theme dark`; tokens are the only source of color and spacing. */
+:root {
+  color-scheme: dark;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
+  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
+  /* AA text pairs (>= 4.5:1, verified by runtime/test/themes.test.js): fg|muted|accent|ok|bad on bg or surface;
+     on-accent on accent|ok|bad. --line is for borders only, never for text. --scrim is the backdrop of modals. */
+  --fg: #f2f2f7; --muted: #a1a1aa; --bg: #0f1115; --surface: #1b1e24; --line: #3a3f48;
+  --scrim: rgb(0 0 0 / .6);
+  --accent: #5aa9ff; --ok: #4cc38a; --bad: #ff7a6b; --on-accent: #0b0d10;
+  --font: "Geist", "SF Pro Text", ui-sans-serif, sans-serif;
+  --glass: rgba(30, 33, 40, .72); --glass-edge: rgba(255, 255, 255, .08);
+  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
+}
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; font-family: var(--font); color: var(--fg); line-height: 1.5;
+    -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
+    background:
+      radial-gradient(1100px 600px at 12% -10%, #1d2230, transparent 60%),
+      radial-gradient(900px 600px at 110% 10%, rgba(90, 169, 255, .06), transparent 60%),
+      var(--bg);
+    background-attachment: fixed;
+  }
+  h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; }
+  a { color: var(--accent); }
+  button, input, textarea, select { font: inherit; color: inherit; }
+  button {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4); cursor: pointer;
+  }
+  input, textarea, select {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+  }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  @media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:active { transform: scale(.98); } }
+}

package/themes/glass.cssbrain

@@ -0,0 +1,39 @@
+/* BRAINLLM theme — white glass (the starter theme). Written by `brain theme glass`; tokens are the only source of color and spacing. */
+:root {
+  color-scheme: light;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
+  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
+  /* AA text pairs (>= 4.5:1, verified by runtime/test/themes.test.js): fg|muted|accent|ok|bad on bg or surface;
+     on-accent on accent|ok|bad. --line is for borders only, never for text. --scrim is the backdrop of modals. */
+  --fg: #1d1d1f; --muted: #55595e; --bg: #f5f5f7; --surface: #ffffff; --line: #d2d2d7;
+  --scrim: rgb(15 23 42 / .45);
+  --accent: #0062c4; --ok: #16794a; --bad: #c42b1c; --on-accent: #ffffff;
+  --font: "Geist", "SF Pro Text", ui-sans-serif, sans-serif;
+  --glass: rgba(255, 255, 255, .72); --glass-edge: rgba(255, 255, 255, .9);
+  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 0, 0, .14);
+}
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; font-family: var(--font); color: var(--fg); line-height: 1.5;
+    -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
+    background:
+      radial-gradient(1100px 600px at 12% -10%, #ffffff, transparent 60%),
+      radial-gradient(900px 600px at 110% 10%, rgba(0, 0, 0, .035), transparent 60%),
+      var(--bg);
+    background-attachment: fixed;
+  }
+  h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; }
+  a { color: var(--accent); }
+  button, input, textarea, select { font: inherit; color: inherit; }
+  button {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4); cursor: pointer;
+  }
+  input, textarea, select {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+  }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  @media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:active { transform: scale(.98); } }
+}

package/themes/paper.cssbrain

@@ -0,0 +1,39 @@
+/* BRAINLLM theme — warm paper. Written by `brain theme paper`; tokens are the only source of color and spacing. */
+:root {
+  color-scheme: light;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
+  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
+  /* AA text pairs (>= 4.5:1, verified by runtime/test/themes.test.js): fg|muted|accent|ok|bad on bg or surface;
+     on-accent on accent|ok|bad. --line is for borders only, never for text. --scrim is the backdrop of modals. */
+  --fg: #24211c; --muted: #5c564c; --bg: #f6f3ee; --surface: #fffdf9; --line: #ddd6ca;
+  --scrim: rgb(36 33 28 / .45);
+  --accent: #8a4b0f; --ok: #2f6b2f; --bad: #a3271b; --on-accent: #ffffff;
+  --font: "Geist", "SF Pro Text", ui-sans-serif, sans-serif;
+  --glass: rgba(255, 253, 249, .78); --glass-edge: rgba(255, 255, 255, .9);
+  --shadow: 0 1px 2px rgba(36, 33, 28, .05), 0 12px 32px -12px rgba(36, 33, 28, .16);
+}
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; font-family: var(--font); color: var(--fg); line-height: 1.5;
+    -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
+    background:
+      radial-gradient(1100px 600px at 12% -10%, #fffdf9, transparent 60%),
+      radial-gradient(900px 600px at 110% 10%, rgba(138, 75, 15, .04), transparent 60%),
+      var(--bg);
+    background-attachment: fixed;
+  }
+  h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; }
+  a { color: var(--accent); }
+  button, input, textarea, select { font: inherit; color: inherit; }
+  button {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4); cursor: pointer;
+  }
+  input, textarea, select {
+    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+  }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  @media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:active { transform: scale(.98); } }
+}

package/ui/button.brain

@@ -0,0 +1,31 @@
+<meta props="variant:str='primary' type:str='button' busy:bool=false disabled:bool=false label:str?" emits="click">
+<button
+  type={type}
+  class:ghost={variant === 'ghost'}
+  class:danger={variant === 'danger'}
+  disabled={disabled || busy}
+  aria-busy={busy ? 'true' : null}
+  aria-label={label}
+  on:click={emit('click')}
+>
+  {#if busy}<span class="spin" aria-hidden="true"></span>{/if}
+  <slot />
+</button>
+<style>
+  button {
+    display: inline-flex; align-items: center; gap: var(--space-2);
+    padding: var(--space-2) var(--space-4); min-height: 40px;
+    font: 600 15px/1.2 var(--font); border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent);
+    box-shadow: var(--shadow);
+  }
+  button.ghost { color: var(--fg); background: var(--glass); border-color: var(--glass-edge); }
+  button.danger { color: var(--on-accent); background: var(--bad); border-color: var(--bad); }
+  button:disabled { cursor: not-allowed; filter: grayscale(.4); }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
+  @media (prefers-reduced-motion: no-preference) {
+    .spin { animation: spin .7s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  }
+</style>

package/ui/center.brain

@@ -0,0 +1,11 @@
+<meta props="max:str='60ch' gutter:str='4' text:bool=false">
+<script>
+  // a centered column with a maximum width and side gutters (a token step); text: also center the text
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+</script>
+<div class="center" class:text={text} style:max-width={max} style:padding-inline={sp(gutter)}><slot /></div>
+<style>
+  .center { box-sizing: content-box; margin-inline: auto; }
+  .center.text { text-align: center; }
+</style>

package/ui/checkbox.brain

@@ -0,0 +1,13 @@
+<meta props="label:str checked:bool~ name:str? disabled:bool=false error:str?">
+<div class="check">
+  <label>
+    <input type="checkbox" name={name} disabled={disabled} aria-invalid={error ? 'true' : null} bind:checked={checked}>
+    <span>{label}</span>
+  </label>
+  {#if error}<p class="error" role="alert">{error}</p>{/if}
+</div>
+<style>
+  label { display: inline-flex; align-items: center; gap: var(--space-2); font: 15px/1.4 var(--font); color: var(--fg); cursor: pointer; }
+  input { width: 18px; height: 18px; accent-color: var(--accent); }
+  .error { font-size: 13px; color: var(--bad); margin: var(--space-1) 0 0; }
+</style>

package/ui/container.brain

@@ -0,0 +1,11 @@
+<meta props="size:str='lg' gutter:str='4'">
+<script>
+  // the page's content width: sm 40rem · md 56rem · lg 72rem · xl 90rem · full; gutters are a token step
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+  const W = { sm: '40rem', md: '56rem', lg: '72rem', xl: '90rem', full: 'none' }
+</script>
+<div class="container" style:max-width={W[size] || W.lg} style:padding-inline={sp(gutter)}><slot /></div>
+<style>
+  .container { width: 100%; box-sizing: border-box; margin-inline: auto; }
+</style>

package/ui/dialog.brain

@@ -0,0 +1,29 @@
+<meta props="title:str closeLabel:str='Close'" emits="close" expose="open close">
+<script>
+  let dlg = ref()
+  // native modal <dialog>: focus moves inside, the rest of the page is inert, Escape closes
+  const open = () => { if (!dlg.open) dlg.showModal() }
+  const close = () => { if (dlg.open) dlg.close() }
+</script>
+<dialog bind:ref={dlg} aria-labelledby="dlg-title" on:close={emit('close')}>
+  <header>
+    <h2 id="dlg-title">{title}</h2>
+    <button type="button" class="x" aria-label={closeLabel} on:click={close}>×</button>
+  </header>
+  <div class="body"><slot /></div>
+  <footer><slot name="footer" /></footer>
+</dialog>
+<style>
+  dialog {
+    width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--glass-edge);
+    border-radius: var(--radius-lg); color: var(--fg); background: var(--glass); box-shadow: var(--shadow);
+    backdrop-filter: blur(24px) saturate(1.4);
+  }
+  dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
+  header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) 0; }
+  h2 { font: 650 18px/1.3 var(--font); margin: 0; }
+  .x { font-size: 22px; line-height: 1; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); cursor: pointer; }
+  .body { padding: var(--space-4); }
+  footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
+  footer:empty { display: none; }
+</style>

package/ui/error-state.brain

@@ -0,0 +1,53 @@
+<meta props="error:any retry:fn? login:str='/login'">
+<script>
+  // One message and one action per error kind (INTERNALS §40.2), for {:catch e} and failed resources. Offline and
+  // network errors retry by themselves when the connection comes back; 429 retries after its Retry-After. A cancelled
+  // request (kind 'aborted') shows nothing.
+  const text = (e) => {
+    if (!e) return ''
+    if (e.kind === 'offline') return 'You are offline.'
+    if (e.kind === 'network') return 'The connection was lost.'
+    if (e.kind === 'timeout') return 'The server took too long to answer.'
+    if (e.kind === 'schema') return 'The server sent something unexpected.'
+    if (e.status === 401) return 'Sign in to continue.'
+    if (e.status === 403) return e.message && e.message !== 'Forbidden' ? 'You do not have permission: ' + e.message : 'You do not have permission to see this.'
+    if (e.status === 404) return 'Not found.'
+    if (e.status === 422) return 'Check the highlighted fields.'
+    if (e.status === 429) return 'Too many requests. Trying again in ' + (e.retryAfter || 30) + ' seconds.'
+    return 'Something went wrong on our side.'
+  }
+  const canRetry = (e) => !!retry && !!e && (e.kind !== 'http' || e.status >= 500)
+  const signIn = () => login + (globalThis.location ? '?next=' + encodeURIComponent(location.pathname + location.search) : '')
+  fx(() => {
+    if (!retry || !error || (error.kind !== 'offline' && error.kind !== 'network') || !globalThis.addEventListener) return // no window events while the server renders
+    const again = () => retry()
+    globalThis.addEventListener('online', again)
+    return () => globalThis.removeEventListener('online', again)
+  })
+  fx(() => {
+    if (!retry || !error || error.status !== 429) return
+    const t = setTimeout(() => retry(), (error.retryAfter || 30) * 1000)
+    return () => clearTimeout(t)
+  })
+</script>
+{#if error && error.kind !== 'aborted'}
+<div class="error-state" role="alert">
+  <p>{text(error)}</p>
+  {#if error && error.status === 401}<a href={signIn()}>Sign in</a>{/if}
+  {#if canRetry(error)}<button type="button" on:click={retry()}>Retry</button>{/if}
+  {#if error && error.id && error.status >= 500}<small>Reference: {error.id}</small>{/if}
+</div>
+{/if}
+<style>
+  .error-state {
+    display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); font: 14px/1.5 var(--font);
+    color: var(--fg); background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius);
+  }
+  p { margin: 0; }
+  a { color: var(--accent); }
+  button {
+    font: inherit; padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
+    color: var(--fg); background: var(--surface); cursor: pointer;
+  }
+  small { color: var(--muted); }
+</style>

package/ui/field.brain

@@ -0,0 +1,34 @@
+<meta props="label:str error:str? help:str?">
+<script>
+  let box = ref()
+  let hint = ref()
+  let err = ref()
+  // links the slotted control to its help and error text (aria-describedby / aria-invalid)
+  fx(() => {
+    if (!box || !hint || !err) return
+    const c = box.querySelector('input, select, textarea')
+    if (!c) return
+    const ids = []
+    if (help) ids.push(hint.id)
+    if (error) ids.push(err.id)
+    if (ids.length) c.setAttribute('aria-describedby', ids.join(' '))
+    else c.removeAttribute('aria-describedby')
+    if (error) c.setAttribute('aria-invalid', 'true')
+    else c.removeAttribute('aria-invalid')
+  })
+</script>
+<div class="field" bind:ref={box}>
+  <label>
+    <span class="label">{label}</span>
+    <slot />
+  </label>
+  <p id="hint" class="help" bind:ref={hint} hidden={!help}>{help}</p>
+  <p id="err" class="error" role="alert" bind:ref={err} hidden={!error}>{error}</p>
+</div>
+<style>
+  .field { display: grid; gap: var(--space-1); }
+  label { display: grid; gap: var(--space-1); }
+  .label { font: 600 14px/1.3 var(--font); color: var(--fg); }
+  .help { font-size: 13px; color: var(--muted); margin: 0; }
+  .error { font-size: 13px; color: var(--bad); margin: 0; }
+</style>

package/ui/grid.brain

@@ -0,0 +1,11 @@
+<meta props="gap:str='4' cols:num? min:str='16rem'">
+<script>
+  // equal columns: `cols` fixed, else as many as fit with a minimum width (auto-fit, one column on phones)
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+  const tpl = (c, m) => (c ? 'repeat(' + c + ', minmax(0, 1fr))' : 'repeat(auto-fit, minmax(min(' + m + ', 100%), 1fr))')
+</script>
+<div class="grid" style:gap={sp(gap)} style:grid-template-columns={tpl(cols, min)}><slot /></div>
+<style>
+  .grid { display: grid; min-width: 0; }
+</style>

package/ui/input.brain

@@ -0,0 +1,23 @@
+<meta props="label:str value:str~ type:str='text' name:str? placeholder:str? autocomplete:str? required:bool=false disabled:bool=false error:str? help:str?">
+<Field label={label} error={error} help={help}>
+  <input
+    type={type}
+    name={name}
+    placeholder={placeholder}
+    autocomplete={autocomplete}
+    required={required}
+    disabled={disabled}
+    aria-label={label}
+    bind:value={value}
+  >
+</Field>
+<style>
+  input {
+    width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3);
+    font: 15px/1.4 var(--font); color: var(--fg); background: var(--surface);
+    border: 1px solid var(--line); border-radius: var(--radius-sm);
+  }
+  input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+  input[aria-invalid='true'] { border-color: var(--bad); }
+  input:disabled { color: var(--muted); }
+</style>

package/ui/lang-switch.brain

@@ -0,0 +1,38 @@
+<meta props="label:str='Language'">
+<script>
+  // links to this same page in every language of the site (none with a single language); each name in itself
+  const langs = alternates()
+  // the browser prefers another language the site has: offered once, never an automatic redirect. A ui/ component has
+  // no state (B0116): closing hides the hint's own element and remembers the answer.
+  const hint = suggest()
+  const close = (e) => {
+    dismiss()
+    e.target.parentNode.setAttribute('hidden', '')
+  }
+</script>
+{#if langs.length}
+  <nav class="lang" aria-label={label}>
+    <ul>
+      {#each langs as l (l.locale)}
+        <li><a href={l.href} hreflang={l.locale} lang={l.locale} aria-current={l.current ? 'page' : null}>{l.name}</a></li>
+      {/each}
+    </ul>
+    {#if hint}
+      <p class="hint" lang={hint.locale}>
+        <a href={hint.href} hreflang={hint.locale} on:click={dismiss()}>{hint.name}</a>
+        <button type="button" aria-label="Dismiss" on:click={close}>×</button>
+      </p>
+    {/if}
+  </nav>
+{/if}
+<style>
+  .lang { display: flex; align-items: center; gap: var(--space-3); font: 14px/1.3 var(--font); }
+  ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
+  a { color: var(--muted); text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
+  a[aria-current='page'] { color: var(--fg); background: var(--surface); }
+  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .hint { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); background: var(--glass); }
+  .hint a { color: var(--accent); }
+  .hint[hidden] { display: none; } /* closed: display:flex above would otherwise win over [hidden] */
+  button { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
+</style>

package/ui/menu.brain

@@ -0,0 +1,64 @@
+<meta props="label:str items:list" emits="select:obj">
+<script>
+  // items: [{ id: 'edit', label: 'Edit', disabled?: true }]
+  let open = sig(false)
+  let pop = ref()
+  let btn = ref()
+  const enabled = () => [...pop.querySelectorAll('[role=menuitem]:not([disabled])')]
+  const choose = (it) => {
+    open = false
+    btn.focus()
+    emit('select', it)
+  }
+  const keys = (e) => {
+    const all = enabled()
+    const i = all.indexOf(e.target)
+    if (e.key === 'Escape') {
+      open = false
+      btn.focus()
+    } else if (e.key === 'ArrowDown' && all.length) {
+      e.preventDefault()
+      all[(i + 1) % all.length].focus()
+    } else if (e.key === 'ArrowUp' && all.length) {
+      e.preventDefault()
+      all[(i - 1 + all.length) % all.length].focus()
+    }
+  }
+  fx(() => {
+    if (!open || !pop) return
+    // next frame: the popup is visible (hidden removed) only after this update is painted
+    const h = requestAnimationFrame(() => {
+      const all = enabled()
+      if (all.length) all[0].focus()
+    })
+    const out = (e) => {
+      if (!pop.contains(e.target) && !btn.contains(e.target)) open = false
+    }
+    pop.ownerDocument.addEventListener('pointerdown', out)
+    return () => {
+      cancelAnimationFrame(h)
+      pop.ownerDocument.removeEventListener('pointerdown', out)
+    }
+  })
+</script>
+<div class="menu">
+  <button type="button" bind:ref={btn} aria-haspopup="menu" aria-expanded={open ? 'true' : 'false'} on:click={open = !open}>{label}</button>
+  <div class="pop" role="menu" aria-label={label} bind:ref={pop} hidden={!open} on:keydown={keys}>
+    {#each items as it (it.id)}
+      <button type="button" role="menuitem" tabindex="-1" disabled={it.disabled} on:click={choose(it)}>{it.label}</button>
+    {/each}
+  </div>
+</div>
+<style>
+  .menu { position: relative; display: inline-block; }
+  .menu > button { font: 600 14px/1.2 var(--font); padding: var(--space-2) var(--space-3); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); color: var(--fg); background: var(--glass); cursor: pointer; }
+  .pop {
+    position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; display: grid; padding: var(--space-1); z-index: 50;
+    border: 1px solid var(--glass-edge); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(1.4);
+  }
+  .pop[hidden] { display: none; }
+  [role=menuitem] { text-align: left; font: 14px/1.3 var(--font); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); color: var(--fg); background: transparent; cursor: pointer; }
+  [role=menuitem]:hover, [role=menuitem]:focus-visible { background: var(--surface); outline: none; }
+  [role=menuitem]:disabled { color: var(--muted); cursor: not-allowed; }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+</style>

package/ui/row.brain

@@ -0,0 +1,12 @@
+<meta props="gap:str='3' align:str='center' justify:str='start' wrap:bool=true">
+<script>
+  // a horizontal flow that wraps on narrow screens; justify: start | center | end | between
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+  const jc = (j) => (j === 'between' ? 'space-between' : j === 'start' || j === 'end' ? 'flex-' + j : j)
+</script>
+<div class="row" class:nowrap={!wrap} style:gap={sp(gap)} style:align-items={align} style:justify-content={jc(justify)}><slot /></div>
+<style>
+  .row { display: flex; flex-wrap: wrap; min-width: 0; }
+  .row.nowrap { flex-wrap: nowrap; }
+</style>

package/ui/select.brain

@@ -0,0 +1,29 @@
+<meta props="label:str value:str~ options:list placeholder:str? name:str? required:bool=false disabled:bool=false error:str? help:str?">
+<script>
+  // options: ['a', 'b'] or [{ value: 'a', label: 'A' }]
+  const items = drv(() => options.map((o) => (typeof o === 'object' ? o : { value: String(o), label: String(o) })))
+  let sel = ref()
+  // a <select> value only sticks once its options exist: re-apply it after they render
+  fx(() => {
+    const n = items.length
+    if (!sel || !n) return
+    sel.value = value || ''
+  })
+</script>
+<Field label={label} error={error} help={help}>
+  <select bind:ref={sel} name={name} required={required} disabled={disabled} aria-label={label} bind:value={value}>
+    {#if placeholder}<option value="" disabled>{placeholder}</option>{/if}
+    {#each items as o (o.value)}
+      <option value={o.value}>{o.label}</option>
+    {/each}
+  </select>
+</Field>
+<style>
+  select {
+    width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3);
+    font: 15px/1.4 var(--font); color: var(--fg); background: var(--surface);
+    border: 1px solid var(--line); border-radius: var(--radius-sm);
+  }
+  select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+  select[aria-invalid='true'] { border-color: var(--bad); }
+</style>

package/ui/sidebar.brain

@@ -0,0 +1,17 @@
+<meta props="side:str='left' width:str='16rem' gap:str='4' min:str='50%'">
+<script>
+  // a sidebar next to the main content that stacks above it when the main column would get narrower than `min`
+  // (no media query). Content goes in <div slot="side"> and the default slot.
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+</script>
+<div class="sidebar" class:right={side === 'right'} style:gap={sp(gap)}>
+  <div class="side" style:flex-basis={width}><slot name="side" /></div>
+  <div class="main" style:min-width={min}><slot /></div>
+</div>
+<style>
+  .sidebar { display: flex; flex-wrap: wrap; }
+  .sidebar.right { flex-direction: row-reverse; }
+  .side { flex-grow: 1; }
+  .main { flex-basis: 0; flex-grow: 999; }
+</style>

package/ui/spacer.brain

@@ -0,0 +1,12 @@
+<meta props="size:str?">
+<script>
+  // inside a Stack or Row: with no size it takes the remaining space (pushes the next items to the end); with a
+  // token step it is a fixed gap of that size
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+</script>
+<span class="spacer" class:grow={!size} style:flex-basis={sp(size)} aria-hidden="true"></span>
+<style>
+  .spacer { display: block; flex-shrink: 0; }
+  .spacer.grow { flex-grow: 1; }
+</style>

package/ui/stack.brain

@@ -0,0 +1,10 @@
+<meta props="gap:str='3' align:str='stretch'">
+<script>
+  // a vertical flow: children one under the other with a token gap; align: start | center | end | stretch
+  // spacing props take a token step from tokens.cssbrain (0–6 → --space-N), never raw CSS
+  const sp = (n) => (n == null || n === '' ? null : String(n) === '0' ? '0' : 'var(--space-' + n + ')')
+</script>
+<div class="stack" style:gap={sp(gap)} style:align-items={align}><slot /></div>
+<style>
+  .stack { display: flex; flex-direction: column; min-width: 0; }
+</style>