@anyknown/ui 0.6.1 → 0.8.0

package/dist/components/slider/Slider.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useRef, useState } from "react";
+import { color, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const ARROW_FRACTION = 0.05;
+const styles = stylex.create({
+    root: { display: "flex", flexDirection: "column", gap: space.xs, fontFamily: font.body },
+    label: { fontSize: text.sm, fontWeight: 500, color: color.text },
+    control: {
+        position: "relative",
+        height: "1.5rem",
+        borderRadius: radius.full,
+        backgroundColor: color.layer4,
+        cursor: "pointer",
+        touchAction: "none",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    disabled: { cursor: "not-allowed", opacity: 0.5 },
+    fill: {
+        position: "absolute",
+        insetInlineStart: 0,
+        insetBlock: 0,
+        borderRadius: radius.full,
+        backgroundColor: color.borderStrong,
+    },
+    thumb: {
+        position: "absolute",
+        insetBlock: "0.2rem",
+        width: "1.6rem",
+        borderRadius: radius.md,
+        backgroundColor: color.surfaceRaised,
+        boxShadow: shadow.raised,
+        transitionProperty: "inset-inline-start",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionTimingFunction: motion.easeOut,
+    },
+    still: { transitionDuration: { default: "0s", [REDUCED]: "0s" } },
+    grown: (ratio) => ({ width: `calc(1.6rem + (100% - 1.6rem) * ${ratio})` }),
+    slid: (ratio) => ({ insetInlineStart: `calc((100% - 1.6rem) * ${ratio})` }),
+});
+function snap(raw, min, max, step) {
+    const clamped = Math.min(max, Math.max(min, raw));
+    if (step <= 0)
+        return clamped;
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    const stepped = min + Math.round((clamped - min) / step) * step;
+    return Number(Math.min(max, Math.max(min, stepped)).toFixed(decimals));
+}
+export function Slider({ value, onChange, min = 0, max = 1, step = 0.01, label, valueText, disabled = false, sx, "aria-label": ariaLabel, }) {
+    const labelId = useId();
+    const control = useRef(null);
+    const thumb = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const current = snap(value, min, max, step);
+    const ratio = max === min ? 0 : (current - min) / (max - min);
+    function emit(raw) {
+        const next = snap(raw, min, max, step);
+        if (next !== current)
+            onChange(next);
+    }
+    function ratioAt(clientX) {
+        const track = control.current;
+        const knob = thumb.current;
+        if (track == null || knob == null)
+            return ratio;
+        const rect = track.getBoundingClientRect();
+        const span = rect.width - knob.offsetWidth;
+        if (span <= 0)
+            return ratio;
+        return (clientX - rect.left - knob.offsetWidth / 2) / span;
+    }
+    function drag(event) {
+        emit(min + ratioAt(event.clientX) * (max - min));
+    }
+    return (_jsxs("div", { ...stylex.props(styles.root, sx), children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.label), children: label })), _jsxs("div", { ref: control, role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": valueText?.(current), "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-label": ariaLabel, onPointerDown: (event) => {
+                    if (disabled)
+                        return;
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    event.currentTarget.focus();
+                    setDragging(true);
+                    drag(event);
+                }, onPointerMove: (event) => {
+                    if (dragging)
+                        drag(event);
+                }, onPointerUp: () => setDragging(false), onPointerCancel: () => setDragging(false), onKeyDown: (event) => {
+                    if (disabled)
+                        return;
+                    const nudge = (max - min) * ARROW_FRACTION;
+                    if (event.key === "ArrowRight" || event.key === "ArrowUp")
+                        emit(current + nudge);
+                    else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+                        emit(current - nudge);
+                    else if (event.key === "Home")
+                        emit(min);
+                    else if (event.key === "End")
+                        emit(max);
+                    else
+                        return;
+                    event.preventDefault();
+                }, ...stylex.props(styles.control, disabled && styles.disabled), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.fill, styles.grown(ratio)) }), _jsx("span", { ref: thumb, "aria-hidden": "true", ...stylex.props(styles.thumb, dragging && styles.still, styles.slid(ratio)) })] })] }));
+}

package/dist/components/spin/Spin.d.ts

@@ -0,0 +1,5 @@
+import * as stylex from "@stylexjs/stylex";
+export declare function Spin({ small, sx }: {
+    small?: boolean;
+    sx?: stylex.StyleXStyles;
+}): import("react").JSX.Element;

package/dist/components/spin/Spin.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+/** `.spin`: 12px ring, the one thing on a button that moves while it waits. */
+const turn = stylex.keyframes({ to: { transform: "rotate(360deg)" } });
+const styles = stylex.create({
+    root: {
+        animationDuration: "0.7s",
+        animationIterationCount: "infinite",
+        animationName: { default: turn, "@media (prefers-reduced-motion: reduce)": "none" },
+        animationTimingFunction: "linear",
+        borderColor: "color-mix(in srgb, currentColor 28%, transparent)",
+        borderRadius: "50%",
+        borderStyle: "solid",
+        borderTopColor: "currentColor",
+        borderWidth: 2,
+        boxSizing: "border-box",
+        flex: "none",
+        height: 12,
+        width: 12,
+    },
+    small: { borderWidth: 1.5, height: 9, width: 9 },
+});
+export function Spin({ small = false, sx }) {
+    return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.root, small && styles.small, sx) });
+}

package/dist/components/status-chip/StatusChip.d.ts

@@ -0,0 +1,18 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+export type StatusChipProps = {
+    variant: "r" | "w" | "d" | "n" | "a" | "f" | "plain";
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+export declare function StatusChip({ variant, children, sx }: StatusChipProps): import("react").JSX.Element;
+export type PillProps = {
+    /** A dot in front, coloured by what the thing is doing. */
+    status?: "live" | "paused" | "done";
+    /** The sub thread's name: body face, text colour, truncates. */
+    title?: boolean;
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+/** `.pill-s`: the 22px mono pills a fold's first line is made of. */
+export declare function Pill({ status, title, children, sx }: PillProps): import("react").JSX.Element;

package/dist/components/status-chip/StatusChip.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, font, space, tone, type } from "../../tokens.stylex.js";
+import { Spin } from "../spin/Spin.js";
+/**
+ * `.tchip` / `.achip`: a mono word in a 16px pill. `r` read-only (outline), `w` writes (layer),
+ * `d` destructive (warning fill), `n` unmarked (faint outline), `a` active (accent, spinning),
+ * `f` failed (warning outline + dot), `plain` the catalogue's auth chip.
+ */
+const styles = stylex.create({
+    root: {
+        alignItems: "center",
+        borderRadius: "1rem",
+        display: "inline-flex",
+        flex: "none",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.xxs,
+        lineHeight: "16px",
+        paddingInline: 6,
+        whiteSpace: "nowrap",
+    },
+    r: { boxShadow: `inset 0 0 0 1px ${color.border}`, color: color.textMuted },
+    w: { backgroundColor: color.layer4, color: color.text },
+    d: { backgroundColor: color.warning, color: color.bg },
+    n: { boxShadow: `inset 0 0 0 1px ${color.border}`, color: tone.faint },
+    a: { backgroundColor: color.accentSubtle, color: color.text },
+    f: {
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color.warning} 55%, transparent)`,
+        color: color.warning,
+    },
+    plain: { backgroundColor: color.layer3, color: color.textMuted, textAlign: "center" },
+    dot: { backgroundColor: color.warning, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    pill: {
+        alignItems: "center",
+        backgroundColor: color.layer3,
+        borderRadius: 11,
+        color: color.textMuted,
+        display: "inline-flex",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.xxs,
+        height: 22,
+        paddingInline: space.xs,
+        whiteSpace: "nowrap",
+    },
+    status: { paddingInlineStart: 6 },
+    live: { backgroundColor: color.accent, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    paused: { backgroundColor: color.warning },
+    done: { backgroundColor: tone.faint },
+    title: {
+        color: color.text,
+        display: "inline-block",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        lineHeight: "20px",
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+});
+export function StatusChip({ variant, children, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.root, styles[variant], sx), children: [variant === "a" && _jsx(Spin, { small: true }), variant === "f" && _jsx("i", { ...stylex.props(styles.dot), "aria-hidden": "true" }), children] }));
+}
+/** `.pill-s`: the 22px mono pills a fold's first line is made of. */
+export function Pill({ status, title = false, children, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.pill, status !== undefined && styles.status, title && styles.title, sx), children: [status !== undefined && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.live, status === "paused" && styles.paused, status === "done" && styles.done) })), children] }));
+}

package/dist/components/switch/Switch.js

@@ -2,15 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { useId } from "react";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
 import { useControllableState } from "../../lib/useControllableState.js";
-import { buildWeave, weaveRand } from "../../lib/weave.js";
-import { color, font, motion, radius, space, text, yarn } from "../../tokens.stylex.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
 import { useFieldControl } from "../label/fieldContext.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-const DARK = "@media (prefers-color-scheme: dark)";
-// 藥丸 42×20(1:1 CSS px),module scope 織一次(固定種子 → 恆定;純幾何,SSR 安全)
-const CLOTH = buildWeave({ w: 42, h: 20, ox: 1, oy: 1 }, weaveRand());
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -24,75 +19,37 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "2.75rem", height: "1.4rem", margin: 0 },
     track: {
         flex: "none",
+        position: "relative",
+        boxSizing: "border-box",
         width: "2.75rem",
         height: "1.4rem",
         marginTop: "0.1rem",
         borderRadius: radius.full,
+        backgroundColor: color.borderStrong,
+        transitionProperty: "background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 3,
     },
-    svg: { width: "100%", height: "100%", display: "block", overflow: "visible" },
-    guide: { stroke: color.borderStrong, strokeWidth: 1.5, strokeLinecap: "round", fill: "none" },
-    // 開:布從左織進來(wipe clip 的 width 推進,紗本身不動 — 同一塊布被逐漸織出);
-    // 關:整塊布 scale 到 0 收掉,width/opacity 等 scale 跑完才歸零。
-    // 藥丸形狀是另一支固定 clip:左圓角從第一幀就完整,前緣是織布機的直線 fell。
-    cloth: {
-        opacity: 0,
-        scale: "0",
-        transformBox: "fill-box",
-        transformOrigin: "center",
-        transitionProperty: "scale, opacity",
-        transitionDuration: { default: "200ms, 0s", [REDUCED]: "0s" },
-        transitionTimingFunction: "ease-in",
-        transitionDelay: { default: "0s, 200ms", [REDUCED]: "0s" },
-        filter: {
-            default: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.30))",
-            [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-        },
-    },
-    clothOn: {
-        opacity: 1,
-        scale: "1",
-        transitionDuration: { default: "0s, 0s", [REDUCED]: "0s" },
-        transitionDelay: "0s",
-    },
-    pillclip: {
-        width: 0,
-        transitionProperty: "width",
-        transitionDuration: { default: "0s", [REDUCED]: "0s" },
-        transitionDelay: { default: "200ms", [REDUCED]: "0s" },
-    },
-    pillclipOn: {
-        width: 42,
-        transitionDuration: { default: "240ms", [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
-        transitionDelay: "0s",
-    },
-    yarns: { fill: "none", strokeLinecap: "round" },
-    un: { stroke: yarn.un },
-    sh: { stroke: yarn.sh, opacity: 0.5 },
-    y0: { stroke: yarn.y0 },
-    y1: { stroke: yarn.y1 },
-    y2: { stroke: yarn.y2 },
-    y3: { stroke: yarn.y3 },
-    y4: { stroke: yarn.y4 },
-    hi: { stroke: yarn.hi, opacity: 0.45 },
+    trackOn: { backgroundColor: color.accent },
     thumb: {
-        fill: color.bg,
-        stroke: color.borderStrong,
-        strokeWidth: 1.6,
+        position: "absolute",
+        insetBlockStart: 2,
+        insetInlineStart: 2,
+        width: "calc(1.4rem - 4px)",
+        height: "calc(1.4rem - 4px)",
+        borderRadius: radius.full,
+        backgroundColor: "#FFFFFF",
         translate: "0 0",
-        transitionProperty: "translate, stroke, fill",
-        transitionDuration: { default: `240ms, ${motion.normal}, ${motion.normal}`, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+        transitionProperty: "translate, background-color",
+        transitionDuration: { default: "180ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    thumbOn: { translate: "22px 0", fill: color.surface, stroke: color.accent },
+    thumbOn: { translate: "1.35rem 0", backgroundColor: color.accentText },
     labelText: { display: "block", fontWeight: 500, fontSize: text.sm, color: color.text },
     description: { display: "block", fontSize: text.xs, color: color.textMuted },
 });
-const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
 export function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, sx, ...props }) {
-    const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -101,8 +58,8 @@ export function Switch({ label, description, onCheckedChange, checked, defaultCh
         .filter(Boolean)
         .join(" ");
     const [isOn, setOn] = useControllableState(checked, defaultChecked ?? false, onCheckedChange);
-    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [(label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] })), _jsxs("span", { ...stylex.props(styles.track), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [(label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] })), _jsxs("span", { ...stylex.props(styles.track, isOn && styles.trackOn), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
                             setOn(event.currentTarget.checked);
                             onChange?.(event);
-                        }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 44 22", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("path", { d: "M11,11 H33", ...stylex.props(styles.guide) }), _jsxs("g", { ...stylex.props(styles.cloth, isOn && styles.clothOn), children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `${clipId}p`, children: _jsx("rect", { x: "1", y: "1", width: "42", height: "20", rx: "10" }) }), _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: "1", y: "-3", height: "28", ...stylex.props(styles.pillclip, isOn && styles.pillclipOn) }) })] }), _jsx("g", { clipPath: `url(#${clipId}p)`, children: _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.yarns), children: [_jsx("g", { ...stylex.props(styles.un), children: CLOTH.under.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), _jsx("g", { ...stylex.props(styles.sh), children: CLOTH.seams.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), CLOTH.face.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw, ...stylex.props(BUCKETS[t.bucket]) }, i))), _jsx("g", { ...stylex.props(styles.hi), children: CLOTH.hi.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) })] }) })] }), _jsx("circle", { cx: "11", cy: "11", r: "8.4", ...stylex.props(styles.thumb, isOn && styles.thumbOn) })] })] })] }));
+                        }, ...styled(props, styles.input) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.thumb, isOn && styles.thumbOn) })] })] }));
 }

package/dist/components/table/Table.d.ts

@@ -0,0 +1,39 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export type TableProps = {
+    children: ReactNode;
+} & Sx;
+export declare function Table({ children, sx }: TableProps): import("react").JSX.Element;
+export type HeadProps = {
+    columns: string;
+    children: ReactNode;
+    sticky?: boolean;
+} & Sx;
+/** The one mono line above the rows; `columns` is the grid template every row shares. */
+export declare function Head({ columns, children, sticky, sx }: HeadProps): import("react").JSX.Element;
+export type TrProps = {
+    columns: string;
+    children: ReactNode;
+    hover?: boolean;
+} & Sx;
+export declare function Tr({ columns, children, hover, sx }: TrProps): import("react").JSX.Element;
+export declare function Detail({ id, children, sx }: {
+    id?: string;
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.moreRow`: the last line of a ledger that has more, 40px, centred. */
+export declare function MoreRow({ children, onPress, sx }: {
+    children: ReactNode;
+    onPress: () => void;
+} & Sx): import("react").JSX.Element;
+/**
+ * `.listscroll`: a ledger that scrolls on its own to the bottom of the window, the head stuck to
+ * its top.
+ */
+export declare function ListScroll({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export {};

package/dist/components/table/Table.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, motion, space, type } from "../../tokens.stylex.js";
+/**
+ * `.tbl`: a ledger. The head is one mono line, every row is 34px, identifiers and numbers are
+ * mono and numbers sit on the right. On a phone the head goes and each row wraps to two lines,
+ * in the order the caller gives each cell.
+ */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    table: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        minWidth: 0,
+    },
+    cols: (columns) => ({ gridTemplateColumns: columns }),
+    head: {
+        alignItems: "center",
+        borderRadius: `${corner.card} ${corner.card} 0 0`,
+        color: color.textMuted,
+        display: { default: "grid", [PHONE]: "none" },
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.sm,
+        height: 28,
+        paddingInline: space.sm,
+    },
+    sticky: { backgroundColor: color.surface, position: "sticky", top: 0, zIndex: 1 },
+    row: {
+        alignItems: "center",
+        borderRadius: { default: 0, ":last-child": `0 0 ${corner.card} ${corner.card}` },
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        columnGap: { default: space.sm, [PHONE]: space.xs },
+        display: { default: "grid", [PHONE]: "flex" },
+        flexWrap: "wrap",
+        fontSize: type.t2,
+        height: { default: 34, [PHONE]: "auto" },
+        lineHeight: { default: type.body, [PHONE]: "1.4" },
+        minHeight: { default: 34, [PHONE]: 52 },
+        paddingBlock: { default: 0, [PHONE]: space.xs },
+        paddingInline: space.sm,
+        rowGap: 0,
+    },
+    hover: { backgroundColor: { default: "transparent", ":hover": color.layer3 } },
+    detail: {
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        paddingBlock: `0 ${space.xs}`,
+        paddingInline: space.sm,
+    },
+    more: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": color.layer3 },
+        borderRadius: `0 0 ${corner.card} ${corner.card}`,
+        borderStyle: "none",
+        borderWidth: 0,
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        display: "flex",
+        fontFamily: "inherit",
+        fontSize: type.t2,
+        height: 40,
+        justifyContent: "center",
+        lineHeight: type.body,
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: -2,
+        padding: 0,
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        width: "100%",
+    },
+    scroll: {
+        borderRadius: corner.card,
+        maxHeight: "calc(100dvh - var(--akn-off, 22rem))",
+        minHeight: "12rem",
+        overflow: "auto",
+        overscrollBehavior: "contain",
+        scrollbarColor: {
+            default: "transparent transparent",
+            ":hover": `color-mix(in srgb, ${color.text} 24%, transparent) transparent`,
+        },
+        scrollbarWidth: "thin",
+    },
+});
+export function Table({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.table, sx), children: children });
+}
+/** The one mono line above the rows; `columns` is the grid template every row shares. */
+export function Head({ columns, children, sticky = false, sx }) {
+    return (_jsx("div", { ...stylex.props(styles.head, styles.cols(columns), sticky && styles.sticky, sx), children: children }));
+}
+export function Tr({ columns, children, hover = false, sx }) {
+    return _jsx("div", { ...stylex.props(styles.row, styles.cols(columns), hover && styles.hover, sx), children: children });
+}
+export function Detail({ id, children, sx }) {
+    return (_jsx("div", { ...(id ? { id } : {}), ...stylex.props(styles.detail, sx), children: children }));
+}
+/** `.moreRow`: the last line of a ledger that has more, 40px, centred. */
+export function MoreRow({ children, onPress, sx }) {
+    return (_jsx("button", { type: "button", onClick: onPress, ...stylex.props(styles.more, sx), children: children }));
+}
+/** Reads where the list starts and leaves 24px under it, again whenever the window changes. */
+function fit(node) {
+    if (node === null)
+        return;
+    const measure = () => {
+        node.style.setProperty("--akn-off", `${Math.round(node.getBoundingClientRect().top + 24)}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+}
+/**
+ * `.listscroll`: a ledger that scrolls on its own to the bottom of the window, the head stuck to
+ * its top.
+ */
+export function ListScroll({ children, sx }) {
+    return (_jsx("div", { ref: fit, ...stylex.props(styles.scroll, sx), children: children }));
+}

package/dist/components/table/TableCells.d.ts

@@ -0,0 +1,52 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export type CellProps = {
+    children?: ReactNode;
+    mono?: boolean;
+    num?: boolean;
+    faint?: boolean;
+    /** Where the cell lands once the row wraps on a phone. */
+    order?: number;
+    /** On a phone the cell opens with `· `, the way the prototype joins the second line. */
+    prefixed?: boolean;
+    /** On a phone the cell goes to the end of its line. */
+    pushed?: boolean;
+    grow?: boolean;
+    /** Not drawn on a phone. */
+    hidden?: boolean;
+} & Sx;
+export declare function Cell({ children, mono, num, faint, order, prefixed, pushed, grow, hidden, sx }: CellProps): import("react").JSX.Element;
+export type StatusCellProps = {
+    children?: ReactNode;
+    warn?: boolean;
+    order?: number;
+    pushed?: boolean;
+} & Sx;
+/** The state column: nothing when fine, a warning dot and a mono code when not. */
+export declare function StatusCell({ children, warn, order, pushed, sx }: StatusCellProps): import("react").JSX.Element;
+/** The line break a phone row wraps at; nothing on a desk. */
+export declare function Break({ order }: {
+    order?: number;
+}): import("react").JSX.Element;
+export type ToggleProps = {
+    open: boolean;
+    onPress: () => void;
+    label: string;
+    controls?: string;
+    order?: number;
+} & Sx;
+/** `.rowtog`: the chevron at the end of a row that has a detail under it. */
+export declare function Toggle({ open, onPress, label, controls, order, sx }: ToggleProps): import("react").JSX.Element;
+export type SubjectProps = {
+    children: ReactNode;
+    onPress: () => void;
+    title?: string;
+    order?: number;
+    grow?: boolean;
+} & Sx;
+/** `.subj`: a mono identifier that is also the way to filter by it. */
+export declare function Subject({ children, onPress, title, order, grow, sx }: SubjectProps): import("react").JSX.Element;
+export {};