@anyknown/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Senlima Sun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# @anyknown/ui
+
+AnyKnown 全產品線共用的 design system,以 [StyleX](https://stylexjs.com) 實作。
+
+## 結構
+
+- `src/tokens.stylex.ts` — semantic tokens(color / font / text / space / radius / motion / shadow)。light 為預設,dark 跟隨 OS。**唯一真相**。
+- `src/tokens.css` — 同一組值的純 CSS variables(`--ak-*`),給非 StyleX 的使用端(desktop 的 Tailwind v4 `@theme` 直接引用)。import 路徑:`@anyknown/ui/tokens.css`。
+- `src/themes.stylex.ts` — `light` / `dark` theme,給有手動切換主題的 app(套在 root element)。
+- `src/scrollbar.css` — 客製捲軸(全域套用)。StyleX 做不了 `::-webkit-scrollbar` 偽元素,所以獨立成 css 檔。
+- `src/components/` — 34 個元件,每個一個 folder(`<Name>.tsx` + `<Name>.test.tsx` + `prototype.html` + `NOTES.md`)。清單與共同決策見 [components/README.md](./src/components/README.md)。
+- `src/lib/` — 共用 hooks 與生成邏輯(reduced-motion、controllable state、clipboard、weave/yarn/loom 的 SVG path 生成、diff)。
+- `playground/` — demo app,**不進發佈產物**。
+- `site/` — 文檔網站(全部示範 + 每個元件的 NOTES + 指南),部署到 Cloudflare Workers,**不進發佈產物**。
+
+## 開發
+
+```bash
+pnpm test         # vitest(jsdom + testing-library)
+pnpm check        # turbo run typecheck lint fmt:check(平行 + 快取)
+pnpm build        # dist:ESM + d.ts + tokens.css + scrollbar.css
+pnpm verify:pack  # build 後打包,從套件外部解析 exports map 每個入口
+pnpm playground   # http://localhost:5199,用打包後的 dist 渲染全部元件
+pnpm site         # http://localhost:5200,文檔網站(示範 + NOTES 文檔)
+pnpm site:test    # 文檔網站的 jsdom 冒煙測試
+pnpm site:deploy  # build 後 wrangler deploy 到 Cloudflare Workers(需先 wrangler login)
+```
+
+playground 的 section id 與 `prototypes.html` 一致,可以並排對照實作與原型。
+
+`check` / `test` / `build` 等都由 [turborepo](https://turborepo.dev) 驅動(single-package 模式,設定在 `turbo.json`),快取推到自架的 remote cache `https://turbo.anyknown.com`(team `anyknown`)。要吃到遠端快取就 export token:
+
+```bash
+export TURBO_TOKEN=<token>   # 見 turbo-cache-worker/GITHUB-SECRETS.md
+```
+
+沒設也不會壞,只是退回本機快取。`turbo.json` 裡 `build` / `lint` / `typecheck` / `test` 的 inputs 刻意排除了 `*.md` 與 `*.html`,所以改 NOTES 或 prototype 不會讓這些 task 重跑;`site:build` / `site:test` 用預設 inputs,因為文檔網站確實會讀 NOTES。
+
+## 發佈
+
+發佈的是 ESM + d.ts,**StyleX 呼叫保留在產物中**,由使用端的 bundler compile(StyleX library 標準做法)。
+
+版本由 **git tag 決定**。推一個 `v*` tag 上去,`.github/workflows/release.yml` 跑完整條 gate 再 publish;tag 與 `package.json` 的 `version` 對不上會直接失敗,不會發出去。
+
+```bash
+# 1. 改 package.json 的 version(semver;元件 API 有 breaking change 時同步更新該元件的 NOTES.md)
+# 2. commit + 打 tag + 推
+git commit -am "release: v0.2.0"
+git tag v0.2.0
+git push origin main --tags
+```
+
+CI 跑的是 `typecheck / lint / fmt:check / test / site:test` → `verify:pack` → `npm publish`。前五項走 turbo remote cache,PR 上跑過的多半直接命中;`verify:pack` 不快取,它就是要每次重打一次 tarball、從套件外部解析 exports map。
+
+publish 目前用 `NPM_TOKEN` secret 認證。npm 的 trusted publisher 只能綁在**已存在的套件**上,而 @anyknown/ui 的第一版就是這條 workflow 發的,所以 OIDC 要等套件上了 registry 才啟用得了 —— 綁好之後把 `release.yml` publish step 的 `env` 兩行拿掉就自動走回 OIDC(`id-token: write` 已經留著)。CI 用的是 `npm publish` 而不是 `pnpm publish` — pnpm 的 OIDC 支援還沒好([pnpm#9812](https://github.com/pnpm/pnpm/issues/9812))。
+
+CI 驗不了的只剩視覺:發之前 `pnpm playground` 開一輪,對照 `prototypes.html` 看視覺與動效沒跑掉,順手開 macOS 的「減少動態效果」再看一次。
+
+### 一次性設定
+
+repo 已經在 <https://github.com/anyknown-com/ui>(public),`NPM_TOKEN` secret 也設好了,v0.1.0 由 `release.yml` 發出。剩下兩件還沒做:
+
+1. **在 npmjs.com 綁 trusted publisher**:package 頁 → Settings → Trusted publisher,填 organization `anyknown-com`、repository `ui`、workflow filename `release.yml`。綁完把 `release.yml` publish step 的 `env:` 兩行刪掉,認證就從 token 換回 OIDC,`NPM_TOKEN` secret 也可以移除。
+
+2. **設 `TURBO_TOKEN` secret**(repo → Settings → Secrets and variables → Actions)。`.env` 裡的 `TURBO_API_KEY` 對 `turbo.anyknown.com` 回 401(`anyknown` 與 `anyknown-ui` 兩個 slug 都試過),要先確認 cache worker 那邊認的是哪一把。沒設也不會壞,只是 CI 每次都跑冷的。`apiUrl` 與 `teamSlug` 已經寫死在 `turbo.json`,不用另外設 variable。
+
+## 在各 app 使用(Vite)
+
+```bash
+pnpm add @anyknown/ui @stylexjs/stylex
+pnpm add -D @stylexjs/babel-plugin @stylexjs/postcss-plugin postcss
+```
+
+StyleX 需要兩層:babel 把 `stylex.create` 轉成 class name,postcss 產生 stylesheet。兩邊的 `unstable_moduleResolution.rootDir` 必須一致,`dist/**/*.js` 也要進 postcss 的 `include`,否則元件的樣式不會被收進去。
+
+```js
+// postcss.config.mjs
+import stylexBabelPlugin from "@stylexjs/babel-plugin"
+import stylexPostcss from "@stylexjs/postcss-plugin"
+
+export default {
+	plugins: [
+		stylexPostcss({
+			include: ["src/**/*.tsx", "node_modules/@anyknown/ui/dist/**/*.js"],
+			babelConfig: {
+				babelrc: false,
+				configFile: false,
+				parserOpts: { plugins: ["typescript", "jsx"] },
+				plugins: [
+					[stylexBabelPlugin, { unstable_moduleResolution: { type: "commonJS", rootDir: process.cwd() } }],
+				],
+			},
+		}),
+	],
+}
+```
+
+app 的 entry CSS 需含 StyleX 注入點(這個 postcss plugin 認的是**不帶參數**的 `@stylex;`):
+
+```css
+@stylex;
+@import "@anyknown/ui/tokens.css";
+@import "@anyknown/ui/scrollbar.css";
+```
+
+```tsx
+import { Button, Card, Text } from "@anyknown/ui"
+import { color, space } from "@anyknown/ui/tokens.stylex"
+```
+
+app 自己的樣式一律引用 tokens,不寫死色值。`playground/` 就是照這套設定跑的,可以當範本。
+
+## 視覺方向:Ledger
+
+暖紙面(#FAFAF6)、墨色文字、青碧色 accent(#23705A)。標題用 Newsreader,內文 Geist,時間軸/數據用 Geist Mono。使用端需安裝字體:
+
+```bash
+pnpm add @fontsource-variable/newsreader @fontsource-variable/geist @fontsource-variable/geist-mono
+```
+
+Texture(線/織的品牌語言)只用在等待、過渡、儀式時刻,精確區不加花 —— 準則見 [components/ROADMAP.md](./src/components/ROADMAP.md)。

package/dist/components/action-bar/ActionBar.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps, ReactNode } from "react";
+export type ActionBarProps = {
+    label?: string;
+    visible?: boolean;
+    children: ReactNode;
+};
+export declare function ActionBar({ label, visible, children }: ActionBarProps): import("react").JSX.Element;
+export declare namespace ActionBar {
+    var Copy: typeof CopyAction;
+    var Regenerate: typeof RegenerateAction;
+    var Button: typeof ActionBarButton;
+}
+export type ActionBarButtonProps = ComponentProps<"button"> & {
+    icon?: ReactNode;
+};
+declare function ActionBarButton({ icon, children, ...props }: ActionBarButtonProps): import("react").JSX.Element;
+export type CopyActionProps = {
+    text?: string;
+    label?: string;
+    copiedLabel?: string;
+};
+declare function CopyAction({ text: value, label, copiedLabel }: CopyActionProps): import("react").JSX.Element;
+export type RegenerateActionProps = {
+    onRegenerate: () => void;
+    label?: string;
+};
+declare function RegenerateAction({ onRegenerate, label }: RegenerateActionProps): import("react").JSX.Element;
+export {};

package/dist/components/action-bar/ActionBar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { reset, styled } from "../../lib/styled.js";
+import { useCopy } from "../../lib/useCopy.js";
+import { color, motion, radius, space, text } from "../../tokens.stylex.js";
+import { useMessageBody } from "../message/Message.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    bar: {
+        position: "absolute",
+        insetInlineStart: 0,
+        bottom: 0,
+        height: space.xl,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.15rem",
+        opacity: { default: "var(--ak-action-bar-opacity, 0)", ":focus-within": 1 },
+        transitionProperty: "opacity",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+    },
+    button: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        fontSize: text.xs,
+        lineHeight: text.leadingSnug,
+        color: { default: color.textMuted, ":hover": color.text },
+        backgroundColor: {
+            default: "transparent",
+            ":hover": `color-mix(in srgb, ${color.border} 40%, ${color.surface})`,
+        },
+        paddingBlock: space.xxs,
+        paddingInline: space.xxs,
+        borderRadius: radius.sm,
+        cursor: "pointer",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    done: { color: color.accent },
+    icon: { flex: "none" },
+});
+const hoverStyles = stylex.create({
+    reveal: { opacity: 1 },
+});
+function CopyIcon() {
+    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.icon), children: [_jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }), _jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })] }));
+}
+function RegenerateIcon() {
+    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.icon), children: [_jsx("path", { d: "M3 12a9 9 0 1 1 2.6 6.3" }), _jsx("path", { d: "M3 22v-6h6" })] }));
+}
+export function ActionBar({ label = "訊息動作", visible = false, children }) {
+    return (_jsx("div", { role: "toolbar", "aria-label": label, ...stylex.props(styles.bar, visible && hoverStyles.reveal), children: children }));
+}
+function ActionBarButton({ icon, children, ...props }) {
+    return (_jsxs("button", { type: "button", ...props, ...styled(props, reset.control, styles.button), children: [icon, children] }));
+}
+function CopyAction({ text: value, label = "複製", copiedLabel = "已複製 ✓" }) {
+    const body = useMessageBody();
+    const { copied, copy } = useCopy();
+    // The turn also holds a hidden author label, the reasoning fold and this bar
+    // itself, so copy only the text parts.
+    function messageText() {
+        const parts = body?.current?.querySelectorAll("[data-ak-message-text]") ?? [];
+        return Array.from(parts, (part) => part.textContent ?? "").join("\n\n");
+    }
+    return (_jsxs("button", { type: "button", onClick: () => copy(value ?? messageText()), ...stylex.props(reset.control, styles.button, copied && styles.done), children: [!copied && _jsx(CopyIcon, {}), copied ? copiedLabel : label] }));
+}
+function RegenerateAction({ onRegenerate, label = "重新生成" }) {
+    return (_jsx(ActionBarButton, { icon: _jsx(RegenerateIcon, {}), onClick: onRegenerate, children: label }));
+}
+ActionBar.Copy = CopyAction;
+ActionBar.Regenerate = RegenerateAction;
+ActionBar.Button = ActionBarButton;

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,28 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ComponentProps } from "react";
+declare const DOT_TONES: {
+    readonly accent: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly faint: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly danger: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly warning: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+};
+export type BadgeProps = Omit<ComponentProps<"span">, "color"> & {
+    variant?: "neutral" | "accent" | "success" | "danger" | "outline" | "mono";
+    dot?: keyof typeof DOT_TONES;
+    count?: number;
+};
+export declare function Badge({ variant, dot, count, children, ...props }: BadgeProps): import("react").JSX.Element;
+export type ChipProps = BadgeProps & {
+    onRemove?: () => void;
+    removeLabel: string;
+};
+export declare function Chip({ onRemove, removeLabel, variant, children, ...props }: ChipProps): import("react").JSX.Element;
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { reset, styled } from "../../lib/styled.js";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        fontWeight: 500,
+        lineHeight: 1,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "transparent",
+    },
+    neutral: { backgroundColor: color.surface, borderColor: color.border, color: color.textMuted },
+    accent: { backgroundColor: color.accentSubtle, color: color.accent },
+    success: { backgroundColor: color.success, color: color.bg },
+    danger: { backgroundColor: color.dangerSubtle, color: color.danger },
+    outline: { borderColor: color.borderStrong, color: color.text },
+    mono: {
+        fontFamily: font.mono,
+        backgroundColor: color.surface,
+        borderColor: color.border,
+        color: color.textMuted,
+        letterSpacing: "0.02em",
+    },
+    dot: {
+        width: "0.4rem",
+        height: "0.4rem",
+        borderRadius: radius.full,
+        backgroundColor: "currentColor",
+        flex: "none",
+    },
+    dotAccent: { color: color.accent },
+    dotFaint: { color: color.textFaint },
+    dotDanger: { color: color.danger },
+    dotWarning: { color: color.warning },
+    count: { fontFamily: font.mono, fontSize: "0.7rem", fontWeight: 600, lineHeight: 1 },
+    remove: {
+        position: "relative",
+        display: "grid",
+        placeItems: "center",
+        width: "1rem",
+        height: "1rem",
+        // 圓鈕比字高:負的 block margin 讓它不撐高 chip(跟其他 badge 等高)
+        marginBlock: "-0.2rem",
+        marginInlineEnd: "-0.2rem",
+        borderRadius: radius.full,
+        cursor: "pointer",
+        color: "inherit",
+        opacity: { default: 0.7, ":hover": 1, ":focus-visible": 1 },
+        backgroundColor: {
+            default: "transparent",
+            ":hover": "color-mix(in srgb, currentColor 14%, transparent)",
+        },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+        // 看起來 16px、可點 24px(WCAG 2.2 target size),不影響版面
+        "::after": { content: '""', position: "absolute", inset: "-0.25rem" },
+    },
+});
+const DOT_TONES = {
+    accent: styles.dotAccent,
+    faint: styles.dotFaint,
+    danger: styles.dotDanger,
+    warning: styles.dotWarning,
+};
+export function Badge({ variant = "neutral", dot, count, children, ...props }) {
+    return (_jsxs("span", { ...props, ...styled(props, styles.base, styles[variant]), children: [dot != null && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, DOT_TONES[dot]) }), children, count != null && _jsx("span", { ...stylex.props(styles.count), children: count })] }));
+}
+export function Chip({ onRemove, removeLabel, variant = "outline", children, ...props }) {
+    return (_jsxs(Badge, { variant: variant, ...props, children: [children, onRemove != null && (_jsx("button", { type: "button", "aria-label": removeLabel, onClick: onRemove, ...stylex.props(reset.control, styles.remove), children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m1 1 6 6M7 1 1 7" }) }) }))] }));
+}

package/dist/components/button/Button.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from "react";
+type ButtonProps = ComponentProps<"button"> & {
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
+    size?: "sm" | "md";
+};
+export declare function Button({ variant, size, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useCallback } from "react";
+import { assignRef } from "../../lib/mergeRefs.js";
+import { SilkBody } from "../../lib/silk.js";
+import { styled } from "../../lib/styled.js";
+import { color, font, motion, space, text, yarn, yarnDanger, yarnGhost, yarnSecondary, } from "../../tokens.stylex.js";
+// 織成的實心(TEXTURE-GUIDE):沒有 background,實心由紗織成;
+// 動態全由觸點決定 — 帶動 + 窩 + 掃光(press 全套),幾何在 client 端由
+// SilkBody 以固定種子現織(同尺寸恆定)。reduced-motion 時靜態織紋。
+const styles = stylex.create({
+    base: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: space.xs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        fontWeight: 500,
+        lineHeight: text.leadingTight,
+        borderRadius: 8, // = radius.md;織線 clip 的 rx 同步寫死在 RADIUS
+        borderWidth: 0,
+        backgroundColor: "transparent",
+        cursor: { default: "pointer", ":disabled": "not-allowed" },
+        opacity: { default: 1, ":disabled": 0.5 },
+        transitionProperty: "color",
+        transitionDuration: { default: motion.fast, "@media (prefers-reduced-motion: reduce)": "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 3,
+    },
+    md: {
+        paddingBlock: space.xs,
+        paddingInline: space.md,
+        minHeight: "2.25rem",
+    },
+    sm: {
+        paddingBlock: space.xxs,
+        paddingInline: space.sm,
+        minHeight: "1.75rem",
+        fontSize: text.xs,
+    },
+    // filter = 整塊布的落影(§3.3);ghost 是疏織,不落影
+    primary: { color: color.accentText, filter: yarn.shadow },
+    secondary: { color: color.text, filter: yarnSecondary.shadow },
+    ghost: { color: color.textMuted, filter: yarnGhost.shadow },
+    danger: { color: color.accentText, filter: yarnDanger.shadow },
+    // 「白底紅字」的織體版:份量走 ghost 疏織(不與 primary 打架),
+    // 語意走 danger token(和 interaction-card 收據列 rejected 的 ✓ 同一個 token)
+    dangerGhost: { color: color.danger, filter: yarnGhost.shadow },
+    silk: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        pointerEvents: "none",
+    },
+    label: { position: "relative", display: "inline-flex", alignItems: "center", gap: space.xs },
+});
+const RADIUS = 8;
+function palette(vars) {
+    return vars;
+}
+const SILK = {
+    primary: { palette: palette(yarn), bandMax: 0.75 },
+    secondary: { palette: palette(yarnSecondary), bandMax: 0.5 },
+    ghost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
+    danger: { palette: palette(yarnDanger), bandMax: 0.75 },
+    dangerGhost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
+};
+export function Button({ variant = "primary", size = "md", children, ref, ...props }) {
+    // ref callback + cleanup(React 19)管生命週期,不用 effect;
+    // useCallback 鎖 identity,只有 variant 變了才重建織體
+    const silk = useCallback((node) => {
+        if (!node)
+            return;
+        const body = new SilkBody(node.parentElement, node, {
+            ...SILK[variant],
+            mode: "press",
+            radius: RADIUS,
+        });
+        return () => body.destroy();
+    }, [variant]);
+    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], styles[variant]), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
+}

package/dist/components/card/Card.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "react";
+export declare function Card(props: ComponentProps<"div">): import("react").JSX.Element;

package/dist/components/card/Card.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { color, radius, space } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    base: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        padding: space.lg,
+    },
+});
+export function Card(props) {
+    return _jsx("div", { ...props, ...styled(props, styles.base) });
+}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type CheckboxProps = Omit<ComponentProps<"input">, "type" | "children"> & {
+    indeterminate?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+};
+export declare function Checkbox({ indeterminate, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useCallback, useId } from "react";
+import { assignRef } from "../../lib/mergeRefs.js";
+import { styled } from "../../lib/styled.js";
+import { useSvgId } from "../../lib/svgId.js";
+import { useControllableState } from "../../lib/useControllableState.js";
+import { buildThread, buildWeave, weaveRand } from "../../lib/weave.js";
+import { color, font, motion, radius, space, text, yarn } from "../../tokens.stylex.js";
+import { useFieldControl } from "../label/fieldContext.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+// 布與縫線在 module scope 織一次(固定種子、固定尺寸 → 恆定;純幾何,SSR 安全)。
+// 格子顯示 14.8 CSS px(1.05rem − 2px border),viewBox 24 → s = 24/14.8,
+// 螢幕上紗的粗細行距與 button 等粗。勾/橫線 = 縫在布上的線,與布共用同一支 rand 序列。
+const rand = weaveRand();
+const CLOTH = buildWeave({ w: 14.8, h: 14.8, s: 24 / 14.8 }, rand);
+const CHECK_D = buildThread([
+    [5.83, 12.33],
+    [10.05, 16.55],
+    [18.18, 7.13],
+], rand);
+const DASH_D = buildThread([
+    [6.48, 12],
+    [17.53, 12],
+], rand);
+const styles = stylex.create({
+    root: {
+        display: "flex",
+        gap: space.xs,
+        alignItems: "flex-start",
+        cursor: { default: "pointer", ":has(:disabled)": "not-allowed" },
+        opacity: { default: 1, ":has(:disabled)": 0.5 },
+        fontFamily: font.body,
+    },
+    input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
+    box: {
+        flex: "none",
+        width: "1.05rem",
+        height: "1.05rem",
+        marginTop: "0.16rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.borderStrong,
+        borderRadius: radius.sm,
+        backgroundColor: color.surface,
+        overflow: "hidden",
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    boxOn: { borderColor: color.accent },
+    svg: { display: "block", width: "100%", height: "100%" },
+    // 勾選 = 布織進格子:clip rect 的 width 從左往右推進,紗本身不動;
+    // 縫線掛同一個 clip — 前緣推到哪,布和勾一起被織出來
+    weave: {
+        width: 0,
+        height: 24,
+        transitionProperty: "width",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
+    },
+    weaveOn: { width: 24 },
+    cloth: { 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 },
+    mark: { fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
+    threadShadow: { stroke: "rgba(9, 20, 16, 0.32)" },
+    threadCore: { stroke: 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 Checkbox({ indeterminate = false, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, ...props }) {
+    const clipId = useSvgId("ak-weave");
+    const base = useId();
+    const labelId = `${base}label`;
+    const descriptionId = `${base}description`;
+    const { invalid, ...field } = useFieldControl(props);
+    const [isChecked, setChecked] = useControllableState(checked, defaultChecked ?? false, onCheckedChange);
+    // ref callback 管 indeterminate(不用 effect):indeterminate 變了 identity 變,
+    // React 重跑 callback 就把新值寫回原生 input
+    const setNode = useCallback((element) => {
+        if (element)
+            element.indeterminate = indeterminate;
+        assignRef(ref, element);
+    }, [ref, indeterminate]);
+    const filled = isChecked || indeterminate;
+    const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("label", { ...stylex.props(styles.root), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
+                            setChecked(event.currentTarget.checked);
+                            onChange?.(event);
+                        }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { rx: "3", ...stylex.props(styles.weave, filled && styles.weaveOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsxs("g", { ...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))) })] }), _jsxs("g", { ...stylex.props(styles.mark), children: [_jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "2.1", transform: "translate(0.35 0.5)", ...stylex.props(styles.threadShadow) }), _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "1.95", ...stylex.props(styles.threadCore) })] })] })] })] }), (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 }))] }))] }));
+}

package/dist/components/code-block/CodeBlock.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+export type CodeBlockProps = {
+    lang?: string;
+    code: string;
+    streaming?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+};
+export declare function CodeBlock({ lang, code, streaming, copyLabel, copiedLabel, }: CodeBlockProps): import("react").JSX.Element;
+export declare function InlineCode(props: ComponentProps<"code">): import("react").JSX.Element;