@christianirack/brainllm-runtime 0.0.0-stage → 0.1.0

package/ui/table.brain

@@ -0,0 +1,73 @@
+<meta props="rows:list columns:list caption:str rowKey:str='id' sortable:bool=true loading:bool=false error:str? empty:str='No data yet.' rowHeight:num=40 height:num=480">
+<script>
+  // columns: [{ key: 'name', label: 'Name', sort?: false }] · more than 200 rows → only the visible window is rendered
+  const VIRTUAL_FROM = 200
+  const OVERSCAN = 10
+  let sortKey = sig('')
+  let dir = sig(1)
+  let top = sig(0)
+  const sorted = drv(() => {
+    if (!sortKey) return rows
+    const k = sortKey
+    const d = dir
+    return [...rows].sort((a, b) => (a[k] > b[k] ? d : a[k] < b[k] ? -d : 0))
+  })
+  const virtual = drv(() => sorted.length > VIRTUAL_FROM)
+  const first = drv(() => (virtual ? Math.max(0, Math.floor(top / rowHeight) - OVERSCAN) : 0))
+  const last = drv(() => (virtual ? Math.min(sorted.length, first + Math.ceil(height / rowHeight) + 2 * OVERSCAN) : sorted.length))
+  const visible = drv(() => sorted.slice(first, last))
+  const sortBy = (k) => {
+    if (sortKey === k) dir = -dir
+    else { sortKey = k; dir = 1 }
+  }
+  const ariaSort = (k) => (sortKey === k ? (dir === 1 ? 'ascending' : 'descending') : 'none')
+  const arrow = (k) => (sortKey === k ? (dir === 1 ? '▲' : '▼') : '')
+  const onScroll = (e) => { top = e.target.scrollTop }
+</script>
+<div class="wrap" class:virtual={virtual} style:max-height={virtual ? height + 'px' : null} on:scroll={onScroll}>
+  <table aria-busy={loading ? 'true' : null} aria-rowcount={sorted.length + 1}>
+    <caption>{caption}</caption>
+    <thead>
+      <tr>
+        {#each columns as c (c.key)}
+          <th scope="col" aria-sort={ariaSort(c.key)}>
+            {#if sortable && c.sort !== false}
+              <button type="button" on:click={sortBy(c.key)}>{c.label} <span aria-hidden="true">{arrow(c.key)}</span></button>
+            {:else}
+              {c.label}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if error}
+        <tr><td class="msg bad" colspan={columns.length} role="alert">{error}</td></tr>
+      {:else if loading}
+        <tr><td class="msg" colspan={columns.length}>Loading…</td></tr>
+      {:else}
+        {#if first > 0}<tr class="pad" aria-hidden="true" style:height={first * rowHeight + 'px'}></tr>{/if}
+        {#each visible as r (r[rowKey])}
+          <tr style:height={rowHeight + 'px'}>
+            {#each columns as c (c.key)}<td>{r[c.key]}</td>{/each}
+          </tr>
+        {:empty}
+          <tr><td class="msg" colspan={columns.length}>{empty}</td></tr>
+        {/each}
+        {#if last < sorted.length}<tr class="pad" aria-hidden="true" style:height={(sorted.length - last) * rowHeight + 'px'}></tr>{/if}
+      {/if}
+    </tbody>
+  </table>
+</div>
+<style>
+  .wrap { overflow: auto; border: 1px solid var(--glass-edge); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow); }
+  table { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--font); color: var(--fg); font-variant-numeric: tabular-nums; }
+  caption { text-align: left; font-weight: 650; padding: var(--space-3) var(--space-3) var(--space-2); }
+  th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
+  thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; color: var(--muted); }
+  th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
+  th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .msg { text-align: center; color: var(--muted); padding: var(--space-5); }
+  .msg.bad { color: var(--bad); }
+  .pad td { padding: 0; border: 0; }
+</style>

package/ui/tabs.brain

@@ -0,0 +1,33 @@
+<meta props="tabs:list value:str~ label:str">
+<script>
+  // tabs: [{ id: 'a', label: 'Overview' }] · the parent renders the panel of `value` in the slot
+  let list = ref()
+  const current = drv(() => tabs.find((t) => t.id === value) || tabs[0])
+  const keys = (e) => {
+    const i = tabs.findIndex((t) => t.id === value)
+    let j = -1
+    if (e.key === 'ArrowRight') j = (i + 1) % tabs.length
+    else if (e.key === 'ArrowLeft') j = (i - 1 + tabs.length) % tabs.length
+    else if (e.key === 'Home') j = 0
+    else if (e.key === 'End') j = tabs.length - 1
+    if (j < 0) return
+    e.preventDefault()
+    value = tabs[j].id
+    list.querySelectorAll('[role=tab]')[j].focus()
+  }
+</script>
+<div class="tabs">
+  <div class="list" role="tablist" aria-label={label} bind:ref={list} on:keydown={keys}>
+    {#each tabs as t (t.id)}
+      <button type="button" role="tab" aria-selected={t.id === value ? 'true' : 'false'} tabindex={t.id === value ? 0 : -1} on:click={value = t.id}>{t.label}</button>
+    {/each}
+  </div>
+  <div class="panel" role="tabpanel" aria-label={current ? current.label : label} tabindex="0"><slot /></div>
+</div>
+<style>
+  .list { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); width: fit-content; }
+  [role=tab] { font: 600 14px/1.2 var(--font); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
+  [role=tab][aria-selected='true'] { color: var(--fg); background: var(--surface); box-shadow: var(--shadow); }
+  [role=tab]:focus-visible, .panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .panel { padding: var(--space-4) 0; }
+</style>

package/ui/toast.brain

@@ -0,0 +1,45 @@
+<meta props="from:obj ms:num=3000 max:num=3 dismissLabel:str='Dismiss'">
+<script>
+  // from: a bus from channels/ (`export default bus('toast')`); send a string or { text, kind: 'ok' | 'error' }
+  let items = sig([])
+  let next = 0
+  const dismiss = (id) => { items = items.filter((x) => x.id !== id) }
+  fx(() => {
+    let timers = []
+    const off = from.on((m) => {
+      const t = typeof m === 'object' && m ? m : { text: String(m) }
+      next = next + 1
+      const id = next
+      items = [...items, { id, text: t.text, kind: t.kind || 'info' }].slice(-max)
+      const h = setTimeout(() => {
+        timers = timers.filter((x) => x !== h)
+        dismiss(id)
+      }, ms)
+      timers = [...timers, h]
+    })
+    return () => {
+      off()
+      for (const h of timers) clearTimeout(h)
+    }
+  })
+</script>
+<div class="toasts" role="status" aria-live="polite">
+  {#each items as t (t.id)}
+    <div class="toast" class:ok={t.kind === 'ok'} class:bad={t.kind === 'error'}>
+      <span>{t.text}</span>
+      <button type="button" aria-label={dismissLabel} on:click={dismiss(t.id)}>×</button>
+    </div>
+  {/each}
+</div>
+<style>
+  .toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: var(--space-2); z-index: 1000; }
+  .toast {
+    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-width: 240px;
+    font: 14px/1.4 var(--font); color: var(--fg); background: var(--glass); border: 1px solid var(--glass-edge);
+    border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(1.4);
+  }
+  .toast.ok { border-color: var(--ok); }
+  .toast.bad { border-color: var(--bad); }
+  .toast span { flex: 1; }
+  button { font-size: 18px; line-height: 1; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
+</style>