@anyknown/ui 0.1.0

package/dist/components/voice-indicator/VoiceIndicator.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useState } from "react";
+import { usePrefersReducedMotion } from "../../lib/motion.js";
+import { useAnimationFrame } from "../../lib/useAnimationFrame.js";
+import { voicePath } from "../../lib/voice.js";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    voice: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        fontFamily: font.body,
+    },
+    viz: { width: "3rem", height: "1.5rem", flex: "none", overflow: "visible" },
+    fibre: { fill: "none", stroke: color.textFaint, strokeWidth: 1.6, strokeLinecap: "round" },
+    fibreActive: { stroke: color.accent },
+    label: { fontSize: text.sm, color: color.textMuted },
+    labelStrong: { fontWeight: 500, color: color.text },
+    motionLabel: {
+        display: { default: "none", [REDUCED]: "inline" },
+        fontFamily: font.mono,
+        fontSize: "0.62rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        color: color.accent,
+    },
+});
+const STATE_TEXT = {
+    idle: { strong: "閒置", rest: "" },
+    listening: { strong: "聆聽中", rest: "…說完就送" },
+    thinking: { strong: "思考中", rest: "" },
+    speaking: { strong: "說話中", rest: "…插話會打斷" },
+};
+export function VoiceIndicator({ state, level = 0.4, statusLabel }) {
+    const reduced = usePrefersReducedMotion();
+    const [t, setT] = useState(1.2);
+    useAnimationFrame(!reduced && state !== "idle", (elapsed) => setT(elapsed / 1000));
+    const copy = STATE_TEXT[state];
+    return (_jsxs("div", { ...stylex.props(styles.voice), children: [_jsx("svg", { viewBox: "0 0 48 24", "aria-hidden": "true", ...stylex.props(styles.viz), children: _jsx("path", { d: voicePath(state, reduced ? 1.2 : t, level), ...stylex.props(styles.fibre, state !== "idle" && styles.fibreActive) }) }), _jsxs("span", { role: "status", ...stylex.props(styles.label), children: [state === "idle" && "通話待命 · ", _jsx("b", { ...stylex.props(styles.labelStrong), children: statusLabel ?? copy.strong }), copy.rest] }), state !== "idle" && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.motionLabel), children: statusLabel ?? copy.strong }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+export { Button } from "./components/button/Button.js";
+export { Card } from "./components/card/Card.js";
+export { Text } from "./components/text/Text.js";
+export { Input, type InputProps } from "./components/input/Input.js";
+export { Textarea, type TextareaProps } from "./components/textarea/Textarea.js";
+export { Label, type LabelProps } from "./components/label/Label.js";
+export { Field, type FieldProps } from "./components/label/Field.js";
+export { Checkbox, type CheckboxProps } from "./components/checkbox/Checkbox.js";
+export { Radio, type RadioProps } from "./components/radio/Radio.js";
+export { RadioGroup, type RadioGroupProps } from "./components/radio/RadioGroup.js";
+export { Switch, type SwitchProps } from "./components/switch/Switch.js";
+export { Select, SelectGroup, SelectItem, type SelectProps, type SelectGroupProps, type SelectItemProps, } from "./components/select/Select.js";
+export { DropdownMenu, DropdownItem, DropdownCheckboxItem, DropdownGroup, DropdownSeparator, DropdownSub, type DropdownMenuProps, type DropdownItemProps, type DropdownCheckboxItemProps, type DropdownGroupProps, type DropdownSubProps, } from "./components/dropdown/DropdownMenu.js";
+export { Dialog, DialogTrigger, DialogContent, DialogActions, DialogClose, ConfirmDialog, } from "./components/dialog/Dialog.js";
+export type { DialogProps, DialogContentProps, ConfirmDialogProps } from "./components/dialog/Dialog.js";
+export { Toaster, toast, useToast, toastManager } from "./components/toast/Toast.js";
+export type { ToasterProps, ToastOptions } from "./components/toast/Toast.js";
+export { Tooltip, TooltipProvider, type TooltipProps } from "./components/tooltip/Tooltip.js";
+export { Popover, PopoverTrigger, PopoverContent, PopoverTitle, PopoverDescription, PopoverClose, } from "./components/popover/Popover.js";
+export type { PopoverProps, PopoverContentProps } from "./components/popover/Popover.js";
+export { Tabs, TabsList, TabsTab, TabsPanel } from "./components/tabs/Tabs.js";
+export type { TabsProps, TabsListProps, TabsTabProps, TabsPanelProps } from "./components/tabs/Tabs.js";
+export { Badge, Chip, type BadgeProps, type ChipProps } from "./components/badge/Badge.js";
+export { Kbd, KbdGroup, KbdToneContext, type KbdProps, type KbdGroupProps } from "./components/kbd/Kbd.js";
+export { Skeleton, SkeletonGroup, ThreadSkeleton } from "./components/skeleton/Skeleton.js";
+export type { SkeletonProps, SkeletonGroupProps, ThreadSkeletonProps } from "./components/skeleton/Skeleton.js";
+export { Spinner, Progress, ProgressBall, ProgressRing } from "./components/progress/Progress.js";
+export type { SpinnerProps, ProgressProps, ProgressBallProps, ProgressRingProps, } from "./components/progress/Progress.js";
+export { EmptyState, type EmptyStateProps } from "./components/empty-state/EmptyState.js";
+export { Thread, UserMessage, AssistantMessage, TextPart, useMessageBody } from "./components/message/Message.js";
+export type { ThreadProps, UserMessageProps, AssistantMessageProps, TextPartProps, } from "./components/message/Message.js";
+export { ToolCard, ToolInput, ToolOutput, ToolError, SubagentLine, SubagentSummary, SubagentThread, SubagentText, } from "./components/tool-card/ToolCard.js";
+export type { ToolCardProps, ToolState, ToolRetry, ToolErrorProps, SubagentLineProps, } from "./components/tool-card/ToolCard.js";
+export { ReasoningFold, type ReasoningFoldProps } from "./components/reasoning-fold/ReasoningFold.js";
+export { ActionBar } from "./components/action-bar/ActionBar.js";
+export type { ActionBarProps, ActionBarButtonProps, CopyActionProps, RegenerateActionProps, } from "./components/action-bar/ActionBar.js";
+export { CodeBlock, InlineCode, type CodeBlockProps } from "./components/code-block/CodeBlock.js";
+export { PermissionCard, DecisionCard } from "./components/interaction-card/InteractionCard.js";
+export type { PermissionCardProps, PermissionReply, PermissionReceipt, DecisionCardProps, DecisionBlock, DecisionOption, DecisionAnswer, } from "./components/interaction-card/InteractionCard.js";
+export { HandoffReceipt } from "./components/handoff-receipt/HandoffReceipt.js";
+export type { HandoffReceiptProps, HandoffReason } from "./components/handoff-receipt/HandoffReceipt.js";
+export { Composer } from "./components/composer/Composer.js";
+export type { ComposerProps, SourceRef, SlashCommand } from "./components/composer/Composer.js";
+export { VoiceIndicator, type VoiceIndicatorProps } from "./components/voice-indicator/VoiceIndicator.js";
+export type { VoiceState } from "./lib/voice.js";
+export { PasswordInput, defaultScorer } from "./components/password-input/PasswordInput.js";
+export type { PasswordInputProps } from "./components/password-input/PasswordInput.js";
+export { RecoveryKey, type RecoveryKeyProps } from "./components/recovery-key/RecoveryKey.js";
+export { Dropzone, UploadList } from "./components/dropzone/Dropzone.js";
+export type { DropzoneProps, UploadListProps, UploadJob, Rejection } from "./components/dropzone/Dropzone.js";
+export { FileRow, FileList } from "./components/file-row/FileRow.js";
+export type { FileRowProps, FileListProps, FileItem, FileRowAction } from "./components/file-row/FileRow.js";
+export { DiffViewer, type DiffViewerProps, type DiffFile } from "./components/diff-viewer/DiffViewer.js";
+export { DataTable } from "./components/data-table/DataTable.js";
+export type { DataTableProps, DataTableColumn, SortState } from "./components/data-table/DataTable.js";

package/dist/index.js

@@ -0,0 +1,38 @@
+export { Button } from "./components/button/Button.js";
+export { Card } from "./components/card/Card.js";
+export { Text } from "./components/text/Text.js";
+export { Input } from "./components/input/Input.js";
+export { Textarea } from "./components/textarea/Textarea.js";
+export { Label } from "./components/label/Label.js";
+export { Field } from "./components/label/Field.js";
+export { Checkbox } from "./components/checkbox/Checkbox.js";
+export { Radio } from "./components/radio/Radio.js";
+export { RadioGroup } from "./components/radio/RadioGroup.js";
+export { Switch } from "./components/switch/Switch.js";
+export { Select, SelectGroup, SelectItem, } from "./components/select/Select.js";
+export { DropdownMenu, DropdownItem, DropdownCheckboxItem, DropdownGroup, DropdownSeparator, DropdownSub, } from "./components/dropdown/DropdownMenu.js";
+export { Dialog, DialogTrigger, DialogContent, DialogActions, DialogClose, ConfirmDialog, } from "./components/dialog/Dialog.js";
+export { Toaster, toast, useToast, toastManager } from "./components/toast/Toast.js";
+export { Tooltip, TooltipProvider } from "./components/tooltip/Tooltip.js";
+export { Popover, PopoverTrigger, PopoverContent, PopoverTitle, PopoverDescription, PopoverClose, } from "./components/popover/Popover.js";
+export { Tabs, TabsList, TabsTab, TabsPanel } from "./components/tabs/Tabs.js";
+export { Badge, Chip } from "./components/badge/Badge.js";
+export { Kbd, KbdGroup, KbdToneContext } from "./components/kbd/Kbd.js";
+export { Skeleton, SkeletonGroup, ThreadSkeleton } from "./components/skeleton/Skeleton.js";
+export { Spinner, Progress, ProgressBall, ProgressRing } from "./components/progress/Progress.js";
+export { EmptyState } from "./components/empty-state/EmptyState.js";
+export { Thread, UserMessage, AssistantMessage, TextPart, useMessageBody } from "./components/message/Message.js";
+export { ToolCard, ToolInput, ToolOutput, ToolError, SubagentLine, SubagentSummary, SubagentThread, SubagentText, } from "./components/tool-card/ToolCard.js";
+export { ReasoningFold } from "./components/reasoning-fold/ReasoningFold.js";
+export { ActionBar } from "./components/action-bar/ActionBar.js";
+export { CodeBlock, InlineCode } from "./components/code-block/CodeBlock.js";
+export { PermissionCard, DecisionCard } from "./components/interaction-card/InteractionCard.js";
+export { HandoffReceipt } from "./components/handoff-receipt/HandoffReceipt.js";
+export { Composer } from "./components/composer/Composer.js";
+export { VoiceIndicator } from "./components/voice-indicator/VoiceIndicator.js";
+export { PasswordInput, defaultScorer } from "./components/password-input/PasswordInput.js";
+export { RecoveryKey } from "./components/recovery-key/RecoveryKey.js";
+export { Dropzone, UploadList } from "./components/dropzone/Dropzone.js";
+export { FileRow, FileList } from "./components/file-row/FileRow.js";
+export { DiffViewer } from "./components/diff-viewer/DiffViewer.js";
+export { DataTable } from "./components/data-table/DataTable.js";

package/dist/lib/diff.d.ts

@@ -0,0 +1,28 @@
+export type DiffSegment = {
+    text: string;
+    marked: boolean;
+};
+export type DiffRow = {
+    type: "context" | "add" | "del";
+    beforeNo?: number;
+    afterNo?: number;
+    segments: DiffSegment[];
+};
+export type DiffBlock = {
+    kind: "lines";
+    rows: DiffRow[];
+} | {
+    kind: "fold";
+    rows: DiffRow[];
+};
+export type DiffKind = "modified" | "added" | "deleted";
+export declare function diffKind(before: string | undefined, after: string | undefined): DiffKind;
+export declare function buildDiffRows(before: string, after: string, { wordDiff }?: {
+    wordDiff?: boolean;
+}): DiffRow[];
+/** Collapses runs of untouched lines longer than 2 × context into fold blocks. */
+export declare function collapseRows(rows: DiffRow[], rawContext: number): DiffBlock[];
+export declare function countChanges(rows: DiffRow[]): {
+    added: number;
+    removed: number;
+};

package/dist/lib/diff.js

@@ -0,0 +1,133 @@
+import { diffLines, diffWordsWithSpace } from "diff";
+export function diffKind(before, after) {
+    if (before == null)
+        return "added";
+    if (after == null)
+        return "deleted";
+    return "modified";
+}
+const MAX_CHANGE_RATIO = 0.6;
+function splitLines(value) {
+    const lines = value.split("\n");
+    if (lines.at(-1) === "")
+        lines.pop();
+    return lines;
+}
+function plain(text) {
+    return [{ text, marked: false }];
+}
+/** Word-level highlight for a paired removed/added line, skipped when almost everything changed. */
+function pairSegments(removed, added) {
+    const parts = diffWordsWithSpace(removed, added);
+    const changed = parts.reduce((total, part) => (part.added || part.removed ? total + part.value.length : total), 0);
+    if (changed > (removed.length + added.length) * MAX_CHANGE_RATIO) {
+        return [plain(removed), plain(added)];
+    }
+    const before = [];
+    const after = [];
+    for (const part of parts) {
+        if (part.added)
+            after.push({ text: part.value, marked: true });
+        else if (part.removed)
+            before.push({ text: part.value, marked: true });
+        else {
+            before.push({ text: part.value, marked: false });
+            after.push({ text: part.value, marked: false });
+        }
+    }
+    return [before, after];
+}
+export function buildDiffRows(before, after, { wordDiff = true } = {}) {
+    const rows = [];
+    let beforeNo = 0;
+    let afterNo = 0;
+    const parts = diffLines(before, after);
+    for (let index = 0; index < parts.length; index += 1) {
+        const part = parts[index];
+        const lines = splitLines(part.value);
+        if (!part.added && !part.removed) {
+            for (const line of lines) {
+                beforeNo += 1;
+                afterNo += 1;
+                rows.push({ type: "context", beforeNo, afterNo, segments: plain(line) });
+            }
+            continue;
+        }
+        if (part.removed) {
+            const next = parts[index + 1];
+            const addedLines = wordDiff && next?.added ? splitLines(next.value) : [];
+            for (const [offset, line] of lines.entries()) {
+                beforeNo += 1;
+                const partner = addedLines[offset];
+                const segments = partner != null ? pairSegments(line, partner)[0] : plain(line);
+                rows.push({ type: "del", beforeNo, segments });
+            }
+            if (addedLines.length > 0) {
+                for (const [offset, line] of addedLines.entries()) {
+                    afterNo += 1;
+                    const partner = lines[offset];
+                    const segments = partner != null ? pairSegments(partner, line)[1] : plain(line);
+                    rows.push({ type: "add", afterNo, segments });
+                }
+                index += 1;
+            }
+            continue;
+        }
+        for (const line of lines) {
+            afterNo += 1;
+            rows.push({ type: "add", afterNo, segments: plain(line) });
+        }
+    }
+    return rows;
+}
+/** Collapses runs of untouched lines longer than 2 × context into fold blocks. */
+export function collapseRows(rows, rawContext) {
+    if (!Number.isFinite(rawContext))
+        return rows.length > 0 ? [{ kind: "lines", rows }] : [];
+    const context = Math.max(0, rawContext);
+    const blocks = [];
+    let index = 0;
+    const push = (kind, slice) => {
+        if (slice.length === 0)
+            return;
+        const last = blocks.at(-1);
+        if (last?.kind === kind && kind === "lines")
+            last.rows.push(...slice);
+        else
+            blocks.push({ kind, rows: slice });
+    };
+    while (index < rows.length) {
+        if (rows[index].type !== "context") {
+            const start = index;
+            while (index < rows.length && rows[index].type !== "context")
+                index += 1;
+            push("lines", rows.slice(start, index));
+            continue;
+        }
+        const start = index;
+        while (index < rows.length && rows[index].type === "context")
+            index += 1;
+        const run = rows.slice(start, index);
+        if (run.length <= context * 2) {
+            push("lines", run);
+            continue;
+        }
+        const leading = start === 0 ? 0 : context;
+        const trailing = index === rows.length ? 0 : context;
+        push("lines", run.slice(0, leading));
+        push("fold", run.slice(leading, run.length - trailing));
+        push("lines", trailing === 0 ? [] : run.slice(run.length - trailing));
+    }
+    return blocks;
+}
+export function countChanges(rows) {
+    let added = 0;
+    let removed = 0;
+    for (const row of rows) {
+        if (row.type === "add")
+            added += 1;
+        else if (row.type === "del")
+            removed += 1;
+    }
+    return { added, removed };
+}

package/dist/lib/format.d.ts

@@ -0,0 +1,2 @@
+export declare function formatBytes(bytes: number): string;
+export declare function formatDuration(ms: number): string;

package/dist/lib/format.js

@@ -0,0 +1,24 @@
+const UNITS = ["B", "KB", "MB", "GB", "TB"];
+export function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes <= 0)
+        return "0 B";
+    let unit = Math.min(Math.max(0, Math.floor(Math.log(bytes) / Math.log(1024))), UNITS.length - 1);
+    let value = bytes / 1024 ** unit;
+    // Pick the unit after rounding, or 1048575 renders as "1024 KB".
+    if (value >= 1023.5 && unit < UNITS.length - 1) {
+        unit += 1;
+        value /= 1024;
+    }
+    return `${unit === 0 ? Math.round(value) : value.toFixed(value < 10 ? 1 : 0)} ${UNITS[unit]}`;
+}
+export function formatDuration(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return "0ms";
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    // Round to whole seconds first, or 119500 renders as "1m 60s".
+    const seconds = Math.round(ms / 1000);
+    if (seconds < 60)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}

package/dist/lib/format.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/format.test.js

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vitest";
+import { formatBytes, formatDuration } from "./format.js";
+describe("formatBytes", () => {
+    test("formats each unit", () => {
+        expect(formatBytes(512)).toBe("512 B");
+        expect(formatBytes(2400)).toBe("2.3 KB");
+        expect(formatBytes(2_400_000)).toBe("2.3 MB");
+        expect(formatBytes(40_000_000)).toBe("38 MB");
+    });
+    test("picks the unit after rounding, not before", () => {
+        expect(formatBytes(1_048_575)).toBe("1.0 MB");
+        expect(formatBytes(1_073_741_823)).toBe("1.0 GB");
+    });
+    test("survives degenerate input", () => {
+        expect(formatBytes(0)).toBe("0 B");
+        expect(formatBytes(0.5)).toBe("1 B");
+        expect(formatBytes(-1)).toBe("0 B");
+        expect(formatBytes(Number.NaN)).toBe("0 B");
+    });
+});
+describe("formatDuration", () => {
+    test("formats milliseconds, seconds and minutes", () => {
+        expect(formatDuration(300)).toBe("300ms");
+        expect(formatDuration(8100)).toBe("8.1s");
+        expect(formatDuration(125_000)).toBe("2m 5s");
+    });
+    test("never puts 60 in the seconds slot", () => {
+        expect(formatDuration(119_500)).toBe("2m 0s");
+        expect(formatDuration(3_599_999)).toBe("60m 0s");
+        expect(formatDuration(59_950)).toBe("1m 0s");
+    });
+    test("survives degenerate input", () => {
+        expect(formatDuration(0)).toBe("0ms");
+        expect(formatDuration(-1)).toBe("0ms");
+        expect(formatDuration(Number.NaN)).toBe("0ms");
+    });
+});

package/dist/lib/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from "react";
+export declare function assignRef<T>(ref: Ref<T> | undefined, value: T | null): void;

package/dist/lib/mergeRefs.js

@@ -0,0 +1,8 @@
+export function assignRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    if (ref && typeof ref === "object")
+        ref.current = value;
+}

package/dist/lib/motion.d.ts

@@ -0,0 +1 @@
+export declare function usePrefersReducedMotion(): boolean;

package/dist/lib/motion.js

@@ -0,0 +1,10 @@
+import { useSyncExternalStore } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+    const mq = window.matchMedia(QUERY);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+}
+export function usePrefersReducedMotion() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(QUERY).matches, () => false);
+}

package/dist/lib/paths.d.ts

@@ -0,0 +1,3 @@
+export declare const UNWEAVE_PATH: string;
+export declare const KNOT_LEAD = "M1 7h13";
+export declare const KNOT_LOOP = "M1 8 C3 3 8.5 2 10 5.5 C11.5 9 6.5 11 5 7.5 C3.8 4.7 8 2.5 14 7.5";

package/dist/lib/paths.js

@@ -0,0 +1,11 @@
+export const UNWEAVE_PATH = buildUnweave();
+function buildUnweave(width = 320, amplitude = 1.4, period = 34, mid = 3, step = 10) {
+    let d = "";
+    for (let x = 0; x <= width; x += step) {
+        d += `${d ? "L" : "M"}${x},${(mid + amplitude * Math.sin(x / period)).toFixed(1)}`;
+    }
+    return d;
+}
+// Handoff receipt — two loose ends knotted together when the row opens.
+export const KNOT_LEAD = "M1 7h13";
+export const KNOT_LOOP = "M1 8 C3 3 8.5 2 10 5.5 C11.5 9 6.5 11 5 7.5 C3.8 4.7 8 2.5 14 7.5";

package/dist/lib/popup.d.ts

@@ -0,0 +1,29 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const growIn: string;
+export declare const popupStyles: Readonly<{
+    readonly surface: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly transformOrigin: stylex.StyleXClassNameFor<"transformOrigin", "var(--transform-origin)">;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "140ms">;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "ease-out">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none" | `2px solid ${stylex.StyleXVar<string>}`>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -2>;
+    }>;
+    readonly anchorWidth: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "var(--anchor-width)">;
+    }>;
+    readonly availableHeight: Readonly<{
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
+    }>;
+    readonly positioner: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 40>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    }>;
+}>;

package/dist/lib/popup.js

@@ -0,0 +1,27 @@
+import * as stylex from "@stylexjs/stylex";
+import { color, radius, shadow } from "../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+export const growIn = stylex.keyframes({
+    from: { opacity: 0, scale: "1 0.97" },
+    to: { opacity: 1, scale: "1 1" },
+});
+export const popupStyles = stylex.create({
+    surface: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        boxShadow: shadow.popover,
+        overflow: "hidden",
+        transformOrigin: "var(--transform-origin)",
+        animationName: { default: growIn, [REDUCED]: "none" },
+        animationDuration: "140ms",
+        animationTimingFunction: "ease-out",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    anchorWidth: { width: "var(--anchor-width)" },
+    availableHeight: { maxHeight: "var(--available-height)" },
+    positioner: { zIndex: 40, outline: "none" },
+});

package/dist/lib/progress.d.ts

@@ -0,0 +1,2 @@
+export declare const BALL_STRANDS: string[];
+export declare function ballDashOffset(percent: number, index: number): number;

package/dist/lib/progress.js

@@ -0,0 +1,28 @@
+// yarn determinate — how a ball of yarn is actually wound: a bundle of parallel
+// great-circle arcs in one direction, then the next bundle turned, and an
+// outline circle to finish.
+export const BALL_STRANDS = (() => {
+    const radius = 9.3;
+    const centre = 12;
+    const families = [25, 70, 115, 160].map((deg) => (deg * Math.PI) / 180);
+    const offsets = [-6.6, -3.4, -0.8, 1.8, 4.4, 7];
+    const strands = [];
+    for (const theta of families) {
+        const normal = [Math.cos(theta), Math.sin(theta)];
+        const along = [-Math.sin(theta), Math.cos(theta)];
+        for (const offset of offsets) {
+            const half = Math.sqrt(radius * radius - offset * offset);
+            const mx = centre + normal[0] * offset;
+            const my = centre + normal[1] * offset;
+            const bulge = offset * 0.62;
+            const cx = mx + normal[0] * bulge;
+            const cy = my + normal[1] * bulge;
+            strands.push(`M${(mx - along[0] * half).toFixed(2)},${(my - along[1] * half).toFixed(2)} Q${cx.toFixed(2)},${cy.toFixed(2)} ${(mx + along[0] * half).toFixed(2)},${(my + along[1] * half).toFixed(2)}`);
+        }
+    }
+    strands.push(`M${centre},${centre - radius} A${radius},${radius} 0 1 1 ${centre - 0.01},${centre - radius}`);
+    return strands;
+})();
+export function ballDashOffset(percent, index) {
+    return 100 - Math.max(0, Math.min(100, percent * BALL_STRANDS.length - index * 100));
+}

package/dist/lib/silk.d.ts

@@ -0,0 +1,66 @@
+export interface SilkPalette {
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}
+export interface SilkOptions {
+    palette: SilkPalette;
+    /** "press" = 全套(帶動+窩+掃光);"hover" = 僅展示面(帶動+光澤帶) */
+    mode: "press" | "hover";
+    /** 疏織(ghost):無底紗無縫隙紗,面紗行距 2.1、粗 0.6–1.0 */
+    ghost?: boolean;
+    /** 光澤帶亮度上限(primary/danger 0.75,secondary/ghost 與卡面 0.5) */
+    bandMax?: number;
+    /** 面紗行距(大面積依 guide 降密度) */
+    pitch?: number;
+    hiCount?: number;
+    hiSpan?: number;
+    /** 圓角 clip(px);省略 = 不 clip(交給 host 的 overflow) */
+    radius?: number;
+    /** 織一塊固定高度的長布(host 高度變化不重織,只有寬度變了才重織);
+     * 動態每幀只更新可視高度內的紗 */
+    fixedHeight?: number;
+}
+export declare class SilkBody {
+    private host;
+    private svg;
+    private opts;
+    private reduced;
+    private id;
+    private w;
+    private h;
+    private built;
+    private live;
+    private sheen;
+    private bandG;
+    private sheenG;
+    private pointer;
+    private pressed;
+    private gx;
+    private gy;
+    private tension;
+    private tenV;
+    private pressX;
+    private pressY;
+    private bx;
+    private bandOp;
+    private sweep;
+    private raf;
+    private ro;
+    private rebuild;
+    private removers;
+    constructor(host: HTMLElement, svg: SVGSVGElement, options: SilkOptions);
+    destroy(): void;
+    private disabled;
+    private build;
+    private liveD;
+    private track;
+    private release;
+    private tick;
+    private wake;
+}