@anyknown/ui 0.7.0 → 0.8.1

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 {};

package/dist/components/table/TableCells.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, ink, motion, space, tone, type } from "../../tokens.stylex.js";
+import { Chevron } from "../icon/Chevron.js";
+import { icon } from "../icon/icon.js";
+/** The cells a `Tr` is made of; each says where it lands once the row wraps on a phone. */
+const PHONE = "@media (max-width: 45rem)";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    cell: { minWidth: 0 },
+    mono: {
+        fontFamily: font.mono,
+        fontSize: type.t2,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    num: {
+        fontFamily: font.mono,
+        textAlign: { default: "end", [PHONE]: "start" },
+        whiteSpace: "nowrap",
+    },
+    faint: { color: color.textMuted, fontFamily: font.mono, fontSize: type.t1, whiteSpace: "nowrap" },
+    status: {
+        alignItems: "center",
+        color: color.textMuted,
+        display: "inline-flex",
+        fontFamily: font.mono,
+        gap: space.xs,
+    },
+    warn: { color: color.warning },
+    dot: { backgroundColor: color.warning, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    order: (order) => ({ order: { default: 0, [PHONE]: order } }),
+    prefixed: { "::before": { content: { default: "none", [PHONE]: '"· "' } } },
+    pushed: { marginInlineStart: { default: 0, [PHONE]: "auto" } },
+    grow: { flex: { default: "none", [PHONE]: "1 1 auto" } },
+    brk: { display: { default: "none", [PHONE]: "block" }, flex: "0 0 100%", height: 0 },
+    hidden: { display: { default: "block", [PHONE]: "none" } },
+    toggle: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": ink.n8 },
+        borderRadius: corner.xs,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: tone.faint, ":hover": color.text },
+        cursor: "pointer",
+        display: "inline-grid",
+        height: 24,
+        justifySelf: "end",
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        padding: 0,
+        placeItems: "center",
+        width: 24,
+    },
+    toggleIcon: {
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionProperty: "rotate",
+        transitionTimingFunction: motion.easeOut,
+    },
+    turned: { rotate: "180deg" },
+    subject: {
+        backgroundColor: { default: "transparent", ":hover": color.layer3 },
+        borderRadius: corner.xs,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: color.text,
+        cursor: "pointer",
+        fontFamily: font.mono,
+        fontSize: type.t2,
+        justifySelf: "start",
+        lineHeight: "inherit",
+        margin: 0,
+        marginInlineStart: -4,
+        maxWidth: "100%",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        overflow: "hidden",
+        paddingBlock: 0,
+        paddingInline: 4,
+        textAlign: "start",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+});
+export function Cell({ children, mono, num, faint, order, prefixed, pushed, grow, hidden, sx }) {
+    return (_jsx("span", { ...stylex.props(styles.cell, mono === true && styles.mono, num === true && styles.num, faint === true && styles.faint, order !== undefined && styles.order(order), prefixed === true && styles.prefixed, pushed === true && styles.pushed, grow === true && styles.grow, hidden === true && styles.hidden, sx), children: children }));
+}
+/** The state column: nothing when fine, a warning dot and a mono code when not. */
+export function StatusCell({ children, warn = false, order, pushed, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.status, warn && styles.warn, order !== undefined && styles.order(order), pushed === true && styles.pushed, sx), children: [warn && _jsx("span", { ...stylex.props(styles.dot), "aria-hidden": "true" }), children] }));
+}
+/** The line break a phone row wraps at; nothing on a desk. */
+export function Break({ order }) {
+    return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.brk, order !== undefined && styles.order(order)) });
+}
+/** `.rowtog`: the chevron at the end of a row that has a detail under it. */
+export function Toggle({ open, onPress, label, controls, order, sx }) {
+    return (_jsx("button", { type: "button", "aria-expanded": open, "aria-label": label, ...(controls ? { "aria-controls": controls } : {}), onClick: onPress, ...stylex.props(styles.toggle, order !== undefined && styles.order(order), sx), children: _jsx(Chevron, { direction: "down", ...stylex.props(icon.sm, styles.toggleIcon, open && styles.turned), "aria-hidden": "true" }) }));
+}
+/** `.subj`: a mono identifier that is also the way to filter by it. */
+export function Subject({ children, onPress, title, order, grow, sx }) {
+    return (_jsx("button", { type: "button", onClick: onPress, ...(title ? { title } : {}), ...stylex.props(styles.subject, order !== undefined && styles.order(order), grow === true && styles.grow, sx), children: children }));
+}

package/dist/components/tabs/Tabs.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import * as stylex from "@stylexjs/stylex";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { createContext, useContext } from "react";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
-import { buildWeave, weaveRand } from "../../lib/weave.js";
-import { color, font, motion, radius, space, text, yarnSubtle } from "../../tokens.stylex.js";
+import { color, font, ink, motion, radius, space, text } from "../../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
 const VariantContext = createContext("underline");
 const styles = stylex.create({
@@ -29,7 +27,7 @@ const styles = stylex.create({
         gap: "0.15rem",
     },
     tab: {
-        backgroundColor: "transparent",
+        backgroundColor: { default: "transparent", ":hover": ink.n6 },
         borderWidth: 0,
         fontFamily: font.body,
         fontSize: text.sm,
@@ -47,7 +45,7 @@ const styles = stylex.create({
     },
     tabDisabled: { opacity: 0.4, cursor: "not-allowed", color: color.textFaint },
     tabSelectedUnderline: { color: color.accent },
-    tabSelectedPills: { color: color.accent },
+    tabSelectedPills: { color: color.text, backgroundColor: "transparent" },
     pillTab: { zIndex: 1 },
     indicator: {
         position: "absolute",
@@ -61,30 +59,22 @@ const styles = stylex.create({
         transitionDuration: { default: "240ms", [REDUCED]: "0s" },
         transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
     },
-    // pills:布織滿整條 tablist,選取的高亮是一個取景窗(clip rect)滑到選中的 tab —
-    // 窗動、布不動,透出的織紋是連續的同一塊布(TEXTURE-GUIDE §3、tabs/NOTES.md)。
-    // Indicator 只當 --active-tab-* 的載體,鋪滿整條 list、自己不動。
-    pillLayer: { position: "absolute", inset: 0, pointerEvents: "none" },
-    pillSvg: { display: "block", width: "100%", height: "100%" },
-    pillWindow: {
-        x: "var(--active-tab-left)",
-        y: "var(--active-tab-top)",
+    // Indicator 本來就把 --active-tab-* 寫成 inline style,pills 直接拿它當滑動的藥丸。
+    pillIndicator: {
+        position: "absolute",
+        insetBlockStart: 0,
+        insetInlineStart: 0,
         width: "var(--active-tab-width)",
         height: "var(--active-tab-height)",
-        rx: radius.sm,
-        transitionProperty: "x, width",
+        translate: "var(--active-tab-left) var(--active-tab-top)",
+        borderRadius: radius.sm,
+        backgroundColor: color.surfaceRaised,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        pointerEvents: "none",
+        transitionProperty: "translate, width",
         transitionDuration: { default: "240ms", [REDUCED]: "0s" },
         transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
     },
-    cloth: { fill: "none", strokeLinecap: "round" },
-    un: { stroke: yarnSubtle.un },
-    sh: { stroke: yarnSubtle.sh, opacity: 0.5 },
-    y0: { stroke: yarnSubtle.y0 },
-    y1: { stroke: yarnSubtle.y1 },
-    y2: { stroke: yarnSubtle.y2 },
-    y3: { stroke: yarnSubtle.y3 },
-    y4: { stroke: yarnSubtle.y4 },
-    hi: { stroke: yarnSubtle.hi, opacity: 0.45 },
     panel: {
         fontFamily: font.body,
         fontSize: text.sm,
@@ -98,31 +88,9 @@ const styles = stylex.create({
 export function Tabs({ variant = "underline", children, ...props }) {
     return (_jsx(VariantContext, { value: variant, children: _jsx(BaseTabs.Root, { ...props, ...styled(props, styles.root), children: children }) }));
 }
-const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
-function PillCloth({ w, h }) {
-    const clipId = useSvgId("ak-pill");
-    const cloth = useMemo(() => buildWeave({ w, h }, weaveRand()), [w, h]);
-    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, "aria-hidden": "true", ...stylex.props(styles.pillSvg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { ...stylex.props(styles.pillWindow) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.cloth), 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))) })] })] }));
-}
 export function TabsList({ children, ...rest }) {
     const variant = useContext(VariantContext);
-    const [size, setSize] = useState(null);
-    // 要織滿 tablist 就得先量它:ref callback + ResizeObserver(不用 effect,SSR 上零副作用)。
-    // 同尺寸 early return,resize 才重織。
-    const measure = useCallback((node) => {
-        if (!node)
-            return;
-        const read = () => setSize((current) => {
-            const w = node.clientWidth;
-            const h = node.clientHeight;
-            return current != null && current.w === w && current.h === h ? current : { w, h };
-        });
-        read();
-        const ro = new ResizeObserver(read);
-        ro.observe(node);
-        return () => ro.disconnect();
-    }, []);
-    return (_jsxs(BaseTabs.List, { ...rest, ref: variant === "pills" ? measure : undefined, ...styled(rest, styles.list, variant === "underline" ? styles.underlineList : styles.pillsList), children: [children, variant === "underline" && _jsx(BaseTabs.Indicator, { ...stylex.props(styles.indicator) }), variant === "pills" && size != null && size.w > 0 && (_jsx(BaseTabs.Indicator, { ...stylex.props(styles.pillLayer), children: _jsx(PillCloth, { w: size.w, h: size.h }) }))] }));
+    return (_jsxs(BaseTabs.List, { ...rest, ...styled(rest, styles.list, variant === "underline" ? styles.underlineList : styles.pillsList), children: [children, _jsx(BaseTabs.Indicator, { ...stylex.props(variant === "underline" ? styles.indicator : styles.pillIndicator) })] }));
 }
 export function TabsTab({ children, ...rest }) {
     const variant = useContext(VariantContext);

package/dist/components/text/Text.js

@@ -12,14 +12,14 @@ const styles = stylex.create({
     display: {
         fontFamily: font.display,
         fontSize: text.display,
-        fontWeight: 500,
+        fontWeight: 600,
         lineHeight: text.leadingTight,
         letterSpacing: "-0.01em",
     },
     title: {
         fontFamily: font.display,
         fontSize: text.xl,
-        fontWeight: 500,
+        fontWeight: 600,
         lineHeight: text.leadingTight,
     },
     body: { fontSize: text.base },

package/dist/components/toast/Toast.js

@@ -4,16 +4,15 @@ import * as stylex from "@stylexjs/stylex";
 import { createContext, useContext, useState } from "react";
 import { reset } from "../../lib/styled.js";
 import { usePrefersReducedMotion } from "../../lib/motion.js";
-import { UNWEAVE_PATH } from "../../lib/paths.js";
 import { layerStyles } from "../../lib/popup.js";
-import { color, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
+import { color, corner, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
 const DEFAULT_TIMEOUT = 5000;
 const slideIn = stylex.keyframes({
     from: { opacity: 0, translate: "1rem 0" },
     to: { opacity: 1, translate: "0 0" },
 });
-const unweave = stylex.keyframes({
+const drain = stylex.keyframes({
     from: { strokeDashoffset: 0 },
     to: { strokeDashoffset: -100 },
 });
@@ -36,12 +35,12 @@ const styles = stylex.create({
         display: "flex",
         alignItems: "center",
         gap: space.xs,
-        backgroundColor: color.surface,
+        backgroundColor: color.surfaceRaised,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: color.border,
-        borderRadius: radius.lg,
-        boxShadow: shadow.popover,
+        borderRadius: corner.md,
+        boxShadow: shadow.pop,
         paddingBlock: space.xs,
         paddingInline: space.xs,
         fontFamily: font.body,
@@ -58,7 +57,7 @@ const styles = stylex.create({
         strokeWidth: 1.5,
         strokeLinecap: "round",
         strokeDasharray: 100,
-        animationName: unweave,
+        animationName: drain,
         animationTimingFunction: "linear",
         animationFillMode: "forwards",
     },
@@ -171,5 +170,5 @@ function ToastItem({ toast: item, fallbackTimeout, paused }) {
     const reduced = usePrefersReducedMotion();
     const tone = TONE[item.type in TONE ? item.type : "default"];
     const duration = item.timeout ?? fallbackTimeout;
-    return (_jsxs(BaseToast.Root, { toast: item, ...stylex.props(styles.toast), children: [!reduced && duration > 0 && (_jsx("svg", { viewBox: "0 0 320 6", preserveAspectRatio: "none", "aria-hidden": "true", ...stylex.props(styles.countdown), children: _jsx("path", { d: UNWEAVE_PATH, pathLength: "100", ...stylex.props(styles.countLine, tone.line, styles.running(duration, paused)) }) })), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, tone.dot) }), _jsxs(BaseToast.Content, { ...stylex.props(styles.content), children: [tone.word !== "" && _jsx("span", { ...stylex.props(styles.srOnly), children: tone.word }), _jsx(BaseToast.Title, { ...stylex.props(styles.title) }), item.description != null && _jsx(BaseToast.Description, { ...stylex.props(styles.description) })] }), item.actionProps != null && _jsx(BaseToast.Action, { ...stylex.props(reset.control, styles.action) })] }));
+    return (_jsxs(BaseToast.Root, { toast: item, ...stylex.props(styles.toast), children: [!reduced && duration > 0 && (_jsx("svg", { viewBox: "0 0 320 6", preserveAspectRatio: "none", "aria-hidden": "true", ...stylex.props(styles.countdown), children: _jsx("path", { d: "M0 3H320", pathLength: "100", ...stylex.props(styles.countLine, tone.line, styles.running(duration, paused)) }) })), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, tone.dot) }), _jsxs(BaseToast.Content, { ...stylex.props(styles.content), children: [tone.word !== "" && _jsx("span", { ...stylex.props(styles.srOnly), children: tone.word }), _jsx(BaseToast.Title, { ...stylex.props(styles.title) }), item.description != null && _jsx(BaseToast.Description, { ...stylex.props(styles.description) })] }), item.actionProps != null && _jsx(BaseToast.Action, { ...stylex.props(reset.control, styles.action) })] }));
 }

package/dist/index.d.ts

@@ -58,3 +58,14 @@ export { DataTable } from "./components/data-table/DataTable.js";
 export type { DataTableProps, DataTableColumn, SortState } from "./components/data-table/DataTable.js";
 export { Markdown, type MarkdownProps, type MarkdownBlock } from "./components/markdown/Markdown.js";
 export { Formula, type FormulaProps } from "./components/markdown/Formula.js";
+export { Ghost, GhostLink, type GhostProps, type GhostLinkProps } from "./components/ghost/Ghost.js";
+export { IconButton, type IconButtonProps } from "./components/icon-button/IconButton.js";
+export { ICON_STROKE, icon } from "./components/icon/icon.js";
+export { Segmented, type SegmentedProps } from "./components/segmented/Segmented.js";
+export { Spin } from "./components/spin/Spin.js";
+export { Pill, StatusChip, type PillProps, type StatusChipProps } from "./components/status-chip/StatusChip.js";
+export { Acts, Empty, Expand, Group, Item, Mark, Note, Row, Sep, Status, Tag, type ExpandProps, type MarkProps, type RowProps, type StatusProps, } from "./components/group/Group.js";
+export { B, Bars, Faint, FootNote, Hint, PageHead, Panel, SectionLabel, Snippet, StatBar, StatLine, Sub, type BarsProps, type PageHeadProps, type SectionLabelProps, } from "./components/page/Page.js";
+export { Dot, Help, SettingsRow, SettingsRows, Value, type SettingsRowProps, } from "./components/settings-rows/SettingsRows.js";
+export { Detail, Head, ListScroll, MoreRow, Table, Tr, type TableProps } from "./components/table/Table.js";
+export { Break, Cell, StatusCell, Subject, Toggle, type CellProps } from "./components/table/TableCells.js";

package/dist/index.js

@@ -41,3 +41,14 @@ export { DiffViewer } from "./components/diff-viewer/DiffViewer.js";
 export { DataTable } from "./components/data-table/DataTable.js";
 export { Markdown } from "./components/markdown/Markdown.js";
 export { Formula } from "./components/markdown/Formula.js";
+export { Ghost, GhostLink } from "./components/ghost/Ghost.js";
+export { IconButton } from "./components/icon-button/IconButton.js";
+export { ICON_STROKE, icon } from "./components/icon/icon.js";
+export { Segmented } from "./components/segmented/Segmented.js";
+export { Spin } from "./components/spin/Spin.js";
+export { Pill, StatusChip } from "./components/status-chip/StatusChip.js";
+export { Acts, Empty, Expand, Group, Item, Mark, Note, Row, Sep, Status, Tag, } from "./components/group/Group.js";
+export { B, Bars, Faint, FootNote, Hint, PageHead, Panel, SectionLabel, Snippet, StatBar, StatLine, Sub, } from "./components/page/Page.js";
+export { Dot, Help, SettingsRow, SettingsRows, Value, } from "./components/settings-rows/SettingsRows.js";
+export { Detail, Head, ListScroll, MoreRow, Table, Tr } from "./components/table/Table.js";
+export { Break, Cell, StatusCell, Subject, Toggle } from "./components/table/TableCells.js";