table — frame-width laws, token paint, composition recipes

<script lang="ts">
  // single-column sort state: one key, one direction, three presses
  let sortKey = $state<string | null>(null);
  let sortDir = $state<'asc' | 'desc'>('asc');
  function toggleSort(key) {
    if (sortKey !== key) { sortKey = key; sortDir = 'asc'; return; }
    if (sortDir === 'asc') { sortDir = 'desc'; return; }
    sortKey = null; // third press clears → DOM order
  }
  const rows = $derived(sortKey === null
    ? tasks
    : [...tasks].sort((a, b) => (sortDir === 'asc' ? 1 : -1)
        * String(a[sortKey]).localeCompare(String(b[sortKey]))));
</script>

<Table caption="tasks" stack={false}>
  <thead>
    <tr>
      <th scope="col" aria-sort={sortKey === 'title'
        ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}>
        <PressButton variant="ghost" ariaLabel="sort by title" onclick={() => toggleSort('title')}>
          title <span aria-hidden="true">{sortKey === 'title' ? (sortDir === 'asc' ? '▲' : '▼') : '↕'}</span>
        </PressButton>
      </th>
      <!-- …one aria-sort per table, on the sorted column only -->
    </tr>
  </thead>
  <tbody>{#each rows as row (row.id)}<tr><td>{row.title}</td></tr>{/each}</tbody>
</Table>

<script lang="ts">
  let titleFilter = $state('');
  let statusFacets = $state([]); // toggle-group multiple → string[]
  const rows = $derived(tasks.filter((row) =>
    (titleFilter === '' || row.title.toLowerCase().includes(titleFilter.toLowerCase())) &&
    (statusFacets.length === 0 || statusFacets.includes(row.status))));
</script>

<Table caption="tasks" stack={false}>
  <thead>
    <tr><!-- …the label row… --></tr>
    <tr><!-- the FILTER row: a control per filterable column -->
      <th scope="col"><Input type="search" bind:value={titleFilter} aria-label="filter by title" placeholder="contains…" /></th>
      <th scope="col">
        <ToggleGroup name="status-facets" type="multiple" label="filter by status" bind:value={statusFacets}>
          {#each statuses as status (status)}<ToggleGroupItem value={status}>{status}</ToggleGroupItem>{/each}
        </ToggleGroup>
      </th>
    </tr>
  </thead>
  <tbody>{#each rows as row (row.id)}<tr><td>{row.title}</td><td>{row.status}</td></tr>{/each}</tbody>
</Table>

<script lang="ts">
  import { pageRange } from '@ui/pagination/index';
  let pageIndex = $state(0);            // zero-based
  let pageSize = $state('5');           // the select commits strings
  const pageCount = $derived(Math.max(1, Math.ceil(rows.length / Number(pageSize))));
  const pageRows = $derived(rows.slice(pageIndex * Number(pageSize), (pageIndex + 1) * Number(pageSize)));
</script>

<Table caption="tasks" stack={false}><!-- …pageRows… --></Table>
<div class="flex items-center justify-between gap-3">
  <span class="text-xs text-muted-foreground">{pageRows.length} of {rows.length} tasks</span>
  <div class="flex items-center gap-3">
    <Select options={[5, 8, 12].map((n) => ({ value: String(n), label: n + ' rows' }))}
            bind:value={pageSize} aria-label="rows per page" />
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious onclick={() => (pageIndex = Math.max(0, pageIndex - 1))} />
        </PaginationItem>
        {#each pageRange({ current: pageIndex + 1, total: pageCount }) as item (item)}
          {#if item === 'ellipsis-start' || item === 'ellipsis-end'}
            <PaginationItem><PaginationEllipsis /></PaginationItem>
          {:else}
            <PaginationItem>
              <PaginationLink page={item} isActive={item === pageIndex + 1}
                onclick={() => (pageIndex = item - 1)} />
            </PaginationItem>
          {/if}
        {/each}
        <PaginationItem>
          <PaginationNext onclick={() => (pageIndex = Math.min(pageCount - 1, pageIndex + 1))} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  </div>
</div>

<script lang="ts">
  let selected = $state(new Set());
  const pageIds = $derived(pageRows.map((row) => row.id));
  const all = $derived(pageIds.length > 0 && pageIds.every((id) => selected.has(id)));
  const some = $derived(pageIds.some((id) => selected.has(id)) && !all);
  function toggleRow(id) {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    selected = next;
  }
  function toggleAll() {
    const next = new Set(selected);
    if (all) pageIds.forEach((id) => next.delete(id));
    else pageIds.forEach((id) => next.add(id));
    selected = next;
  }
</script>

<Table caption="tasks" stack={false}>
  <thead>
    <tr>
      <th scope="col">
        <!-- the law: indeterminate is an IDL property — the Checkbox prop drives it -->
        <Checkbox checked={all} indeterminate={some} aria-label="select all rows on this page"
                  onchange={toggleAll} />
      </th>
      <!-- … -->
    </tr>
  </thead>
  <tbody>
    {#each pageRows as row (row.id)}
      <tr>
        <td><Checkbox checked={selected.has(row.id)} aria-label={'select ' + row.id}
                      onchange={() => toggleRow(row.id)} /></td>
        <!-- … -->
      </tr>
    {/each}
  </tbody>
</Table>
<p aria-live="polite">{selected.size} of {rows.length} selected</p>

<script lang="ts">
  let visible = $state({ priority: true, assignee: true });
  let echo = $state('—');
</script>

<!-- the toolbar: column visibility behind a popover of checkboxes -->
<Popover id="tasks-columns" triggerLabel="columns">
  <Checkbox label="priority" checked={visible.priority} onchange={() => (visible = { ...visible, priority: !visible.priority })} />
  <Checkbox label="assignee" checked={visible.assignee} onchange={() => (visible = { ...visible, assignee: !visible.assignee })} />
</Popover>

<Table caption="tasks" stack={false}>
  <thead>
    <tr>
      <th scope="col">title</th>
      {#if visible.priority}<th scope="col">priority</th>{/if}
      <th scope="col"><span class="sr-only">actions</span></th>
    </tr>
  </thead>
  <tbody>
    {#each rows as row (row.id)}
      <tr>
        <td>{row.title}</td>
        {#if visible.priority}<td>{row.priority}</td>{/if}
        <td>
          <DropdownMenu id={'task-menu-' + row.id} placement="bottom-end">
            {#snippet trigger()}
              <button type="button" popovertarget={'task-menu-' + row.id}
                      aria-label={'actions for ' + row.id} class="…">⋯</button>
            {/snippet}
            <DropdownMenuItem onclick={() => (echo = 'copy id · ' + row.id)}>Copy id</DropdownMenuItem>
            <DropdownMenuItem onclick={() => (echo = 'duplicate · ' + row.id)}>Duplicate</DropdownMenuItem>
            <hr />
            <DropdownMenuItem destructive onclick={() => (echo = 'delete · ' + row.id)}>Delete</DropdownMenuItem>
          </DropdownMenu>
        </td>
      </tr>
    {/each}
  </tbody>
</Table>

<!-- the consumer owns the vertical scrollport: clamp the FRAME
     (the figure) and stick the head to it — the cells already paint an
     opaque --jx-table-surface, so pinned heads mask scrolled rows.
     Recorded followup: table ships no built-in sticky-header law yet. -->
<Table class="sticky-scroll" caption="event log" stack={false}>
  <thead><!-- … --></thead>
  <tbody><!-- …enough rows to scroll… --></tbody>
</Table>

<style>
  :global(.sticky-scroll) { max-block-size: 16rem; overflow-y: auto; }
  :global(.sticky-scroll thead th) { position: sticky; top: 0; z-index: 1; }
</style>

<script lang="ts">
  // ONE state machine feeds every layer: filter → sort → slice → select
  let filter = $state('');                 // toolbar search
  let facets = $state([]);                 // toolbar status facets
  let visible = $state({ priority: true, assignee: true }); // column visibility
  let selected = $state(new Set());        // row selection
  let pageIndex = $state(0);               // pagination
  let pageSize = $state('5');
  let sortKey = $state(null); let sortDir = $state('asc');

  const filtered = $derived(tasks
    .filter((row) => (filter === '' || row.title.includes(filter))
      && (facets.length === 0 || facets.includes(row.status)))
    .toSorted((a, b) => sortKey === null ? 0
      : (sortDir === 'asc' ? 1 : -1) * String(a[sortKey]).localeCompare(String(b[sortKey]))));
  const pageCount = $derived(Math.max(1, Math.ceil(filtered.length / Number(pageSize))));
  const page = $derived(filtered.slice(pageIndex * Number(pageSize), (pageIndex + 1) * Number(pageSize)));
  const pageIds = $derived(page.map((row) => row.id));
  const all = $derived(pageIds.length > 0 && pageIds.every((id) => selected.has(id)));
  const some = $derived(pageIds.some((id) => selected.has(id)) && !all);
</script>

<!-- the toolbar: search + facets + column visibility -->
<div class="flex flex-wrap items-center gap-3">
  <Input type="search" bind:value={filter} aria-label="filter tasks by title" placeholder="filter tasks…" />
  <ToggleGroup name="tasks-status" type="multiple" label="filter by status" bind:value={facets}>
    {#each statuses as status (status)}<ToggleGroupItem value={status}>{status}</ToggleGroupItem>{/each}
  </ToggleGroup>
  <Popover id="tasks-columns" triggerLabel="columns">
    <Checkbox label="priority" checked={visible.priority}
      onchange={() => (visible = { ...visible, priority: !visible.priority })} />
    <Checkbox label="assignee" checked={visible.assignee}
      onchange={() => (visible = { ...visible, assignee: !visible.assignee })} />
  </Popover>
</div>

<Table caption="tasks — the composed surface" stack={false}>
  <thead>
    <tr>
      <th scope="col"><Checkbox checked={all} indeterminate={some}
        aria-label="select all rows on this page" onchange={toggleAll} /></th>
      <th scope="col" aria-sort={sortKey === 'title'
        ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}>
        <PressButton variant="ghost" ariaLabel="sort by title" onclick={() => toggleSort('title')}>
          title <span aria-hidden="true">{sortKey === 'title' ? (sortDir === 'asc' ? '▲' : '▼') : '↕'}</span>
        </PressButton>
      </th>
      <!-- …status / priority (visible.priority) / assignee (visible.assignee)… -->
      <th scope="col"><span class="sr-only">actions</span></th>
    </tr>
  </thead>
  <tbody>
    {#each page as row (row.id)}
      <tr>
        <td><Checkbox checked={selected.has(row.id)} aria-label={'select ' + row.id}
          onchange={() => toggleRow(row.id)} /></td>
        <td>{row.title}</td>
        {#if visible.priority}<td>{row.priority}</td>{/if}
        <td>
          <DropdownMenu id={'tasks-menu-' + row.id} placement="bottom-end">
            {#snippet trigger()}
              <button type="button" popovertarget={'tasks-menu-' + row.id}
                aria-label={'actions for ' + row.id}>⋯</button>
            {/snippet}
            <DropdownMenuItem onclick={() => act('copy id', row.id)}>Copy id</DropdownMenuItem>
            <DropdownMenuItem destructive onclick={() => act('archive', row.id)}>Archive</DropdownMenuItem>
          </DropdownMenu>
        </td>
      </tr>
    {/each}
  </tbody>
</Table>

<!-- the footer: selection readout + page-size + windowed pagination -->
<div class="flex items-center justify-between gap-3">
  <span aria-live="polite">{selected.size} of {tasks.length} selected</span>
  <Select options={[5, 8, 12].map((n) => ({ value: String(n), label: n + ' rows' }))}
    bind:value={pageSize} aria-label="rows per page" />
  <Pagination><!-- …pageRange window, Previous/Next buttons… --></Pagination>
</div>

<!--
  jixoai table (registry/files/ui/table/table.svelte).

  2026-08-22 · responsive deepening (original request: 参考
  codepen.io/viki-code/pen/JjxGgmm 改进 table 组件；配色上需要有一定的
  自由度). The CodePen's container-query law lands here, translated onto
  the jixoai token sheet — the frame reads ITS OWN width, so the same
  table adapts inside any layout column, never the viewport's.

  Orthogonal intents:
  1. frame — the <figure> owns the hairline frame, the radius law
     (var(--radius): 0, bevel upgrade where supported) and BOTH responsive
     engines via `container: jx-table / inline-size` + native overflow-x.
  2. scroll law (frame ≥ 30rem) — table keeps min-width: fit-content so
     columns never compress; the frame scrolls natively. Consumer cells
     opt into pinned columns with data-sticky="start" | "end" on the th
     AND its td's: they stick to the frame scrollport behind a hairline
     fold mark. All pinning geometry is LOGICAL (inset-inline-*, border-
     inline-*) so RTL mirrors for free. Requires border-collapse:
     separate (collapsed borders tear under sticky in some engines) —
     rendering is identical here because the language carries only
     horizontal hairlines.
  3. stack law (frame < 30rem, the CodePen card mode) — thead folds
     away, each row becomes a card: td[data-label] renders a muted
     label ::before with the value flushed right; the first cell takes
     the head surface as the card head. stack={false} pins the table
     to the scroll law at every width (data-stack="off").
  4. color freedom — every paint routes through the --jx-table-* local
     token surface (arbitrary-property utilities below, theme-token
     defaults); hover already carries the --brand-hue flow (one number
     recolors it). Override per instance: <Table style="--jx-table-hover: …">.
  5. semantics — thead/tbody/tfoot/th/td/caption stay real elements
     authored by the consumer as the children snippet; rows are never
     wrapped, and numeric alignment stays a consumer class.

  Zero dependencies. td/th paint an opaque --jx-table-surface so sticky
  cells mask the content scrolling under them (transparent cells would
  leak it). Dense mode survives both laws.

  tw4 (2026-08-24): the frame paint, the local token surface, the
  container declaration and the table/caption statics ride utilities in
  the markup; EVERYTHING that reaches the consumer-authored descendants
  (:global surface), the @container engines and the state machines
  stays in table.css — D1-exempt residue.
-->
<script lang="ts">
  import type { Snippet } from 'svelte';
  import { getDensityContext, provideDensity, resolveDensity } from '$lib/density.svelte';
  import {
    densityRungOf,
    provideQueryAnchor,
    provideUniversalLanes,
    stampCarriersForLanes,
    type ColorLane,
    type DensityLane,
    type ElevationLane,
    type MotionLane,
    type QueryResult,
    type RadiusLane,
    type ShapeLane,
    type SizeLane,
    type ThemeLane,
  } from '$lib/defaults.svelte';
  import { TableDefaults } from './table-defaults.svelte';
  import { tableStyles } from './table.stylex';
  import './table.css';

  // the payload's own join (the separator serialize law): every
  // stylex.create member is an OBJECT in dev and the joined string in
  // shipped payloads — composition goes through THIS joiner (all
  // string values except $$css, space-joined).
  const cx = (
    ...styles: ({ readonly [key: string]: string | object } | undefined | string)[]
  ): string =>
    styles
      .filter(Boolean)
      .map((style) =>
        typeof style === 'string'
          ? style
          : Object.entries(style ?? {}).flatMap(([key, value]) =>
              key !== '$$css' && typeof value === 'string' ? [value] : [],
            ).join(' '),
      )
      .join(' ');

  interface Props {
    /** Density policy root: the universal §4 lane (named rungs + the
     *  documented small/medium/large aliases · auto · a coefficient
     *  number · query()) — explicit ?? inherited ?? sm. */
    density?: DensityLane | QueryResult<DensityLane>;
    /** Native caption element — renders as the table title. */
    caption?: string;
    /** Compact row height (0.4rem vertical padding instead of 0.75rem). */
    dense?: boolean;
    /**
     * Fold into card rows when the frame is narrower than 30rem
     * (default). false = keep the scroll law at every width.
     */
    stack?: boolean;
    /** Native thead/tbody/tfoot markup. */
    children: Snippet;
    /** universal size axis (§1): root font-size — named steps · auto
     *  (inherit) · a px number · query() */
    size?: SizeLane | QueryResult<SizeLane>;
    /** universal shape axis (§2): corner geometry; auto = inherit */
    shape?: ShapeLane | QueryResult<ShapeLane>;
    /** universal radius axis (§3): corner size; auto = the concentric
     *  broadcast (the frame is the family's concentric anchor) */
    radius?: RadiusLane | QueryResult<RadiusLane>;
    /** universal color axis (§5): the hue axis of the oklch system */
    color?: ColorLane | QueryResult<ColorLane>;
    /** universal theme axis (§6): light/dark/system; auto = tree
     *  inheritance (the .dark class bridge) */
    theme?: ThemeLane | QueryResult<ThemeLane>;
    /** universal elevation axis (§7): official M3 levels · dp ·
     *  query() */
    elevation?: ElevationLane | QueryResult<ElevationLane>;
    /** universal motion axis (§8): intensity — reduced…expressive ·
     *  a coefficient · query() */
    motion?: MotionLane | QueryResult<MotionLane>;
    class?: string;
    /**
     * Style passthrough landing on the frame — the color-freedom seam:
     * <Table style="--jx-table-hover: …"> retunes one var per instance.
     */
    style?: string;
  }

  let {
    density,
    caption = '',
    dense = false,
    stack = true,
    children,
    size,
    shape,
    radius,
    color,
    theme,
    elevation,
    motion,
    class: className = '',
    style: styleAttribute = '',
  }: Props = $props();

  // ---- the density lane: inherit-then-provide, boundary-legal ------
  // The CAPTURE is load-bearing and EAGER (r11 first contract,
  // context-defaults-economy 3.3 — the TODO-5 bare read this replaces):
  // getDensityContext() rides the $derived.by ARGUMENT subtree, which
  // evaluates at this statement — BEFORE provideDensity writes the key —
  // so it captures the PARENT's context object; a lazily-evaluated read
  // would resolve the key to the table's OWN write and self-reference
  // through the very getter it feeds (derived_references_self). The
  // family own 'sm' lives in TableDefaults (the design-frozen local
  // fallback migration — resolveDensity's third argument is retired).
  // The W3 universal lane narrows at the legacy edge (the input-group
  // law): 'auto'/number/query lanes carry no legacy rung — the rung
  // stays ambient (§4), the coefficient rides the carriers on the root
  const legacyDensityLane = $derived(
    typeof density === 'string' && density !== 'auto' ? density : undefined,
  );
  const resolvedDensity = $derived.by(
    ((inherited) => () => resolveDensity(legacyDensityLane, inherited))(getDensityContext()),
  );
  provideDensity(() => resolvedDensity);

  // THE DEFAULTS READ POINT (context-defaults-economy 3.3 + W3-D3),
  // riding ON TOP of the provider lane as the family's single audited
  // read point: the density slot's ambient read resolves the key to
  // the table's own write, whose getter is the captured-parent
  // resolution above, so the chain TERMINATES; the slot's own 'sm' is
  // the floor (explicit → inherited → 'sm', exactly the retired inline
  // fallback); the seven sibling axes ride the same record (the frame
  // is the family's own DOM root — the a11y semantics of the
  // consumer-authored thead/tbody stay untouched). PROVIDER-SNAPSHOT
  // KERNEL LAW: density does NOT ride the provideUniversalLanes
  // literal — the reactive bridged write above carries the universal
  // density supply; the literal carries the other seven axes
  const d = $derived(TableDefaults.resolve({ density, size, shape, radius, color, theme, elevation, motion }));
  const carriers = $derived(stampCarriersForLanes(d));
  provideUniversalLanes({ size, shape, radius, color, theme, elevation, motion });
  let uniRoot = $state<HTMLElement>();
  provideQueryAnchor(() => uniRoot ?? null);
  // §3/§14 radius consumption — the frame's dialect: an explicit lane
  // lands flat on the corner (effective × factor); auto stamps NOTHING
  // so the atom's var fallback keeps the frame's own site-radius
  // default (unlike the sheet's 0px invariants, this surface owns a
  // nonzero resting corner — the concentric inset form belongs to
  // nested surfaces, and the frame IS the border bearer)
  const radiusConsumed = $derived(
    d.radius !== undefined && d.radius !== 'auto'
      ? '--jx-radius-consumed: calc(var(--jx-radius-effective, 0px) * var(--jx-radius-factor-effective, 1))'
      : undefined,
  );
  const rootStyle = $derived(
    [carriers, radiusConsumed, styleAttribute].filter(Boolean).join('; ') || undefined,
  );
</script>

<figure
  bind:this={uniRoot}
  class={cx(
    'jx-table',
    tableStyles.frame,
    className,
  )}
  style={rootStyle}
  data-density={densityRungOf(d.density)}
  class:dark={d.theme === 'dark'}
>
  <table
    data-density={densityRungOf(d.density)}
    class={cx(tableStyles.table, dense && 'dense')}
    data-stack={stack ? undefined : 'off'}
  >
    {#if caption}
      <caption class={cx(tableStyles.caption)}>{caption}</caption>
    {/if}
    {@render children()}
  </table>
</figure>