@agent-native/core 0.42.0 → 0.43.0

package/dist/client/blocks/library/wireframe-kit.js

@@ -0,0 +1,920 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore, } from "react";
+import rough from "roughjs";
+const STYLE_STORAGE_KEY = "plan-wireframe-style";
+const styleListeners = new Set();
+function readStoredStyle() {
+    if (typeof localStorage === "undefined")
+        return "sketchy";
+    try {
+        return localStorage.getItem(STYLE_STORAGE_KEY) === "clean"
+            ? "clean"
+            : "sketchy";
+    }
+    catch {
+        return "sketchy";
+    }
+}
+let currentStyle = readStoredStyle();
+export function setWireframeStyle(style) {
+    if (style === currentStyle)
+        return;
+    currentStyle = style;
+    try {
+        localStorage.setItem(STYLE_STORAGE_KEY, style);
+    }
+    catch {
+        // ignore (private mode / disabled storage)
+    }
+    for (const listener of styleListeners)
+        listener();
+}
+export function toggleWireframeStyle() {
+    setWireframeStyle(currentStyle === "sketchy" ? "clean" : "sketchy");
+}
+function subscribeStyle(callback) {
+    styleListeners.add(callback);
+    const onStorage = (event) => {
+        if (event.key === STYLE_STORAGE_KEY) {
+            currentStyle = readStoredStyle();
+            callback();
+        }
+    };
+    if (typeof window !== "undefined") {
+        window.addEventListener("storage", onStorage);
+    }
+    return () => {
+        styleListeners.delete(callback);
+        if (typeof window !== "undefined") {
+            window.removeEventListener("storage", onStorage);
+        }
+    };
+}
+export function useWireframeStyle() {
+    return useSyncExternalStore(subscribeStyle, () => currentStyle, () => "sketchy");
+}
+/** Read the live dark-mode flag from the document root (next-themes-free). */
+export function useIsDark() {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const root = document.documentElement;
+        const read = () => setIsDark(root.classList.contains("dark"));
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+}
+/* ========================================================================== */
+/* Primitives (ported from kit/primitives.tsx)                                */
+/* ========================================================================== */
+/**
+ * Frame-level config threaded to every Screen so skeleton / theme / sketch-vs-
+ * clean reach the kit no matter which path renders the root Screen.
+ */
+export const KitConfigContext = createContext({});
+const V = {
+    ink: "var(--ink)",
+    soft: "var(--ink-soft)",
+    line: "var(--line)",
+    paper: "var(--paper)",
+    card: "var(--card)",
+    accent: "var(--accent)",
+    accentSoft: "var(--accent-soft)",
+    warn: "var(--warn)",
+    warnSoft: "var(--warn-soft)",
+    ok: "var(--ok)",
+    okSoft: "var(--ok-soft)",
+    stroke: "var(--stroke)",
+    radius: "var(--radius)",
+    gap: "var(--gap)",
+    pad: "var(--pad)",
+    fs: "var(--fs)",
+    hand: "var(--font-hand)",
+    script: "var(--font-script)",
+};
+function toneColors(tone = "default") {
+    switch (tone) {
+        case "accent":
+            return { fg: V.accent, bg: V.accentSoft, bd: V.accent };
+        case "warn":
+            return { fg: V.warn, bg: V.warnSoft, bd: V.warn };
+        case "ok":
+            return { fg: V.ok, bg: V.okSoft, bd: V.ok };
+        case "muted":
+            return { fg: V.soft, bg: "transparent", bd: V.soft };
+        default:
+            return { fg: V.ink, bg: "transparent", bd: V.ink };
+    }
+}
+function toneInk(tone) {
+    return toneColors(tone).fg;
+}
+function fontWeight(weight) {
+    if (weight === "bold")
+        return 700;
+    if (weight === "medium")
+        return 600;
+    return 400;
+}
+export function Screen({ children, pad = 0, sketch, density, theme, skeleton = false, style = {}, }) {
+    const cfg = useContext(KitConfigContext);
+    const isSkeleton = skeleton || Boolean(cfg.skeleton);
+    const wfStyle = cfg.style ?? "sketchy";
+    const wfTheme = theme ?? cfg.theme ?? "light";
+    void sketch;
+    return (_jsx("div", { className: "plan-wf", "data-density": density ?? "regular", "data-theme": wfTheme, "data-skeleton": isSkeleton ? "true" : undefined, "data-style": wfStyle, style: {
+            position: "relative",
+            width: "100%",
+            // `minHeight` (not a fixed `height: 100%`) so the screen fills an
+            // auto-height artboard's floor yet grows with its content instead of
+            // clipping. The frame shell (`ArtboardFrame`) owns the height policy; a
+            // caller can still override via `style.height` for a fixed canvas.
+            minHeight: "100%",
+            background: V.paper,
+            color: V.ink,
+            fontFamily: V.hand,
+            fontSize: V.fs,
+            lineHeight: 1.25,
+            display: "flex",
+            flexDirection: "column",
+            padding: pad,
+            boxSizing: "border-box",
+            overflow: "hidden",
+            ...style,
+        }, children: children }));
+}
+export function Hand({ children, size, weight = 400, color = V.ink, script = false, style = {}, }) {
+    return (_jsx("span", { style: {
+            fontFamily: script ? V.script : V.hand,
+            fontSize: size ?? V.fs,
+            fontWeight: weight,
+            color,
+            minWidth: 0,
+            overflowWrap: "break-word",
+            ...style,
+        }, children: children }));
+}
+export function Bar({ w = 80, h, color = V.line, r = 4, style = {}, }) {
+    return (_jsx("div", { style: {
+            width: w,
+            height: h ?? "calc(var(--fs) * 0.72)",
+            background: color,
+            borderRadius: r,
+            flex: "0 0 auto",
+            ...style,
+        } }));
+}
+export function Lines({ n = 2, gap = 6, widths, color = V.line, style = {}, }) {
+    const ws = widths ??
+        Array.from({ length: n }, (_, i) => (i === n - 1 ? "55%" : "100%"));
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, children: ws.map((w, i) => (_jsx(Bar, { w: typeof w === "number" ? `${w}%` : w, color: color }, i))) }));
+}
+export function Box({ children, pad = V.pad, fill = V.card, dashed = false, style = {}, }) {
+    return (_jsx("div", { "data-rough": "rect", style: {
+            ["--rough-stroke"]: V.ink,
+            border: `${V.stroke} ${dashed ? "dashed" : "solid"} ${V.ink}`,
+            borderRadius: V.radius,
+            background: fill,
+            padding: pad,
+            boxSizing: "border-box",
+            minWidth: 0,
+            ...style,
+        }, children: children }));
+}
+export function Check({ done = false, shape = "square", size = 18, }) {
+    const r = shape === "circle" ? "50%" : "calc(var(--radius) * 0.5)";
+    return (_jsx("div", { "data-rough": shape === "circle" ? "ellipse" : "rect", style: {
+            ["--rough-stroke"]: done ? V.accent : V.ink,
+            width: size,
+            height: size,
+            flex: "0 0 auto",
+            borderRadius: r,
+            border: `${V.stroke} solid ${done ? V.accent : V.ink}`,
+            background: done ? V.accent : "transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }, children: done && (_jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 12 12", fill: "none", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M2 6.5l2.5 2.5L10 3" }) })) }));
+}
+export function Pill({ children, tone = "default", style = {}, }) {
+    const c = toneColors(tone);
+    return (_jsx("span", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            border: `${V.stroke} solid ${c.bd}`,
+            background: c.bg,
+            color: c.fg,
+            borderRadius: 999,
+            padding: "2px 9px",
+            fontSize: "calc(var(--fs) * 0.82)",
+            fontFamily: V.hand,
+            maxWidth: "100%",
+            minWidth: 0,
+            whiteSpace: "normal",
+            overflowWrap: "anywhere",
+            lineHeight: 1.3,
+            ...style,
+        }, children: children }));
+}
+export function Prio({ level = 2, label }) {
+    const fill = level === 1 ? V.warn : level === 2 ? V.soft : "transparent";
+    const bd = level === 3 ? V.soft : "transparent";
+    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5 }, children: [_jsx("span", { style: {
+                    width: 9,
+                    height: 9,
+                    borderRadius: "50%",
+                    background: fill,
+                    border: `${V.stroke} solid ${bd}`,
+                    flex: "0 0 auto",
+                } }), label && (_jsx(Hand, { size: "calc(var(--fs) * 0.82)", color: V.soft, children: label }))] }));
+}
+export function Btn({ children, solid = false, full = false, size = "md", tone = "default", style = {}, }) {
+    const pad = size === "sm" ? "4px 10px" : size === "lg" ? "10px 18px" : "7px 14px";
+    const c = toneColors(tone === "default" ? "accent" : tone);
+    return (_jsx("div", { "data-rough": "rect", style: {
+            ["--rough-stroke"]: solid ? c.bd : V.ink,
+            display: full ? "flex" : "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6,
+            border: `${V.stroke} solid ${solid ? c.bd : V.ink}`,
+            background: solid ? c.bd : "transparent",
+            color: solid ? "#fff" : V.ink,
+            borderRadius: V.radius,
+            padding: pad,
+            fontFamily: V.hand,
+            fontSize: V.fs,
+            fontWeight: 700,
+            width: full ? "100%" : "auto",
+            maxWidth: "100%",
+            minWidth: 0,
+            boxSizing: "border-box",
+            whiteSpace: "normal",
+            overflowWrap: "anywhere",
+            textAlign: "center",
+            ...style,
+        }, children: children }));
+}
+export function Chip({ children, active = false, style = {}, }) {
+    return (_jsx("span", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            border: `${V.stroke} solid ${active ? V.accent : V.ink}`,
+            background: active ? V.accentSoft : "transparent",
+            color: active ? V.accent : V.ink,
+            borderRadius: 999,
+            padding: "4px 12px",
+            fontSize: "calc(var(--fs) * 0.88)",
+            fontFamily: V.hand,
+            fontWeight: active ? 700 : 400,
+            maxWidth: "100%",
+            minWidth: 0,
+            whiteSpace: "normal",
+            overflowWrap: "anywhere",
+            ...style,
+        }, children: children }));
+}
+export function Field({ label, value, placeholder, h, area = false, right, style = {}, }) {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 5, ...style }, children: [label && (_jsx(Hand, { size: "calc(var(--fs) * 0.86)", color: V.soft, weight: 700, children: label })), _jsxs("div", { "data-rough": "rect", style: {
+                    ["--rough-stroke"]: V.ink,
+                    border: `${V.stroke} solid ${V.ink}`,
+                    borderRadius: V.radius,
+                    background: V.card,
+                    padding: "calc(var(--pad) * 0.8)",
+                    minHeight: h ?? (area ? 64 : "auto"),
+                    display: "flex",
+                    alignItems: area ? "flex-start" : "center",
+                    justifyContent: "space-between",
+                    minWidth: 0,
+                    gap: 8,
+                }, children: [value ? (_jsx(Hand, { style: { minWidth: 0, overflowWrap: "anywhere" }, children: value })) : area ? (_jsx(Lines, { n: 2, widths: ["85%", "60%"] })) : (_jsx(Bar, { w: placeholder ?? 110 })), right] })] }));
+}
+export function StatusBar() {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "9px 18px 2px",
+            flex: "0 0 auto",
+        }, children: [_jsx(Hand, { size: "calc(var(--fs) * 0.82)", weight: 700, children: "9:41" }), _jsxs("div", { style: { display: "flex", gap: 5, alignItems: "center" }, children: [_jsx(Bar, { w: 16, h: 8, color: V.soft, r: 2 }), _jsx(Bar, { w: 12, h: 8, color: V.soft, r: 2 }), _jsx(Bar, { w: 20, h: 9, color: V.soft, r: 2 })] })] }));
+}
+export function Fab({ icon = "+" }) {
+    return (_jsx("div", { "data-rough": "ellipse", style: {
+            ["--rough-stroke"]: V.accent,
+            position: "absolute",
+            right: 18,
+            bottom: 22,
+            width: 52,
+            height: 52,
+            borderRadius: "50%",
+            border: `${V.stroke} solid ${V.accent}`,
+            background: V.accent,
+            color: "#fff",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: V.hand,
+            fontSize: 28,
+            fontWeight: 700,
+            lineHeight: 1,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.16)",
+            zIndex: 4,
+        }, children: icon }));
+}
+export function BrowserBar({ title = "todo", children, }) {
+    return (_jsxs("div", { "data-rough": "line:bottom", style: {
+            ["--rough-stroke"]: V.ink,
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "9px 14px",
+            borderBottom: `${V.stroke} solid ${V.ink}`,
+            flex: "0 0 auto",
+            background: V.card,
+        }, children: [_jsx("div", { style: { display: "flex", gap: 6 }, children: [0, 1, 2].map((i) => (_jsx("span", { "data-rough": "ellipse", style: {
+                        ["--rough-stroke"]: V.ink,
+                        width: 11,
+                        height: 11,
+                        borderRadius: "50%",
+                        border: `${V.stroke} solid ${V.ink}`,
+                    } }, i))) }), _jsxs("div", { style: {
+                    flex: 1,
+                    border: `${V.stroke} solid ${V.soft}`,
+                    borderRadius: 999,
+                    padding: "3px 12px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                }, children: [_jsx(Bar, { w: 12, h: 10, color: V.soft, r: 3 }), _jsxs(Hand, { size: "calc(var(--fs) * 0.82)", color: V.soft, children: [title, ".app"] })] }), children] }));
+}
+export function SectionLabel({ children, right, tone = "muted", }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "baseline",
+            justifyContent: "space-between",
+            minWidth: 0,
+            gap: 8,
+        }, children: [_jsx(Hand, { size: "calc(var(--fs) * 0.9)", weight: 700, color: toneInk(tone), style: {
+                    letterSpacing: 0.3,
+                    minWidth: 0,
+                    overflowWrap: "anywhere",
+                }, children: children }), right] }));
+}
+export function Avatar({ size = 26 }) {
+    return (_jsx("div", { "data-rough": "ellipse", style: {
+            ["--rough-stroke"]: V.ink,
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            border: `${V.stroke} solid ${V.ink}`,
+            background: V.accentSoft,
+            flex: "0 0 auto",
+        } }));
+}
+export function IconSquare({ size = 18, active = false, }) {
+    return (_jsx("div", { "data-rough": "rect", style: {
+            ["--rough-stroke"]: active ? V.accent : V.soft,
+            width: size,
+            height: size,
+            flex: "0 0 auto",
+            borderRadius: "calc(var(--radius) * 0.5)",
+            border: `${V.stroke} solid ${active ? V.accent : V.soft}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }, children: _jsx("div", { style: {
+                width: "55%",
+                height: "55%",
+                borderRadius: 2,
+                background: active ? V.accent : V.line,
+            } }) }));
+}
+export function NavItem({ label, count, active = false, dot = false, tone = "accent", }) {
+    const dotColor = toneInk(tone);
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 9,
+            padding: "5px 8px",
+            borderRadius: V.radius,
+            background: active ? V.accentSoft : "transparent",
+            minWidth: 0,
+        }, children: [dot ? (_jsx("span", { style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    border: `${V.stroke} solid ${dotColor}`,
+                    background: dotColor,
+                    flex: "0 0 auto",
+                } })) : (_jsx(IconSquare, { size: 15, active: active })), _jsx(Hand, { color: active ? V.accent : V.ink, weight: active ? 700 : 400, style: { flex: 1, minWidth: 0 }, children: label }), count != null && (_jsx(Hand, { size: "calc(var(--fs) * 0.82)", color: V.soft, children: count }))] }));
+}
+export function Sidebar({ children, width = 196, style = {}, }) {
+    return (_jsx("div", { "data-rough": "line:right", style: {
+            ["--rough-stroke"]: V.ink,
+            width,
+            flex: "0 0 auto",
+            borderRight: `${V.stroke} solid ${V.ink}`,
+            background: V.card,
+            padding: V.pad,
+            display: "flex",
+            flexDirection: "column",
+            gap: V.gap,
+            minHeight: 0,
+            minWidth: 0,
+            alignSelf: "stretch",
+            overflow: "hidden",
+            ...style,
+        }, children: children }));
+}
+export function Main({ children, style = {}, }) {
+    return (_jsx("div", { style: {
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
+            padding: "18px 24px",
+            display: "flex",
+            flexDirection: "column",
+            gap: V.gap,
+            overflow: "hidden",
+            ...style,
+        }, children: children }));
+}
+export function Row({ children, full = false, style = {}, }) {
+    return (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "stretch",
+            gap: V.gap,
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: "100%",
+            flex: full ? 1 : undefined,
+            ...style,
+        }, children: children }));
+}
+export function Col({ children, full = false, style = {}, }) {
+    return (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: V.gap,
+            minWidth: 0,
+            minHeight: 0,
+            flex: full ? 1 : undefined,
+            ...style,
+        }, children: children }));
+}
+export function TaskRow({ title, note, due, dueTone = "default", prio, done = false, }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: V.gap,
+            padding: "calc(var(--pad) * 0.55) 0",
+            minWidth: 0,
+        }, children: [_jsx("div", { style: { marginTop: 1 }, children: _jsx(Check, { done: done }) }), _jsxs("div", { style: {
+                    flex: 1,
+                    minWidth: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 4,
+                }, children: [_jsx(Hand, { color: done ? V.soft : V.ink, style: done ? { textDecoration: "line-through" } : undefined, children: title }), note && (_jsx(Hand, { size: "calc(var(--fs) * 0.85)", color: V.soft, children: note }))] }), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    flexWrap: "wrap",
+                    justifyContent: "flex-end",
+                    gap: 8,
+                    flex: "0 0 auto",
+                }, children: [due && _jsx(Pill, { tone: dueTone, children: due }), prio ? _jsx(Prio, { level: prio }) : null] })] }));
+}
+export function Card({ children, style = {}, }) {
+    return (_jsx(Box, { pad: "calc(var(--pad) * 0.9)", style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            background: V.card,
+            minWidth: 0,
+            maxWidth: "100%",
+            ...style,
+        }, children: children }));
+}
+export function Column({ title, count, tone = "muted", width = 232, children, }) {
+    return (_jsxs("div", { style: {
+            width,
+            flex: "0 0 auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: V.gap,
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                            width: 9,
+                            height: 9,
+                            borderRadius: "50%",
+                            background: toneInk(tone),
+                            flex: "0 0 auto",
+                        } }), _jsx(Hand, { weight: 700, style: { whiteSpace: "nowrap" }, children: title }), count != null && (_jsx(Hand, { size: "calc(var(--fs) * 0.82)", color: V.soft, children: count })), _jsx("div", { style: { flex: 1 } }), _jsx(Hand, { color: V.soft, weight: 700, children: "+" })] }), children] }));
+}
+export function Toolbar({ children, style = {}, }) {
+    return (_jsx("div", { "data-rough": "line:bottom", style: {
+            ["--rough-stroke"]: V.ink,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: V.gap,
+            padding: "12px 22px",
+            borderBottom: `${V.stroke} solid ${V.ink}`,
+            background: V.card,
+            flex: "0 0 auto",
+            minWidth: 0,
+            flexWrap: "wrap",
+            ...style,
+        }, children: children }));
+}
+export function Tabs({ items = [], }) {
+    return (_jsx("div", { style: { display: "flex", gap: 7, flexWrap: "wrap" }, children: items.map((item, i) => (_jsx(Chip, { active: item.active, children: item.label }, i))) }));
+}
+export function KV({ rows = [] }) {
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((row, i) => (_jsxs("div", { style: {
+                display: "flex",
+                alignItems: "baseline",
+                justifyContent: "space-between",
+                gap: 12,
+            }, children: [_jsx(Hand, { size: "calc(var(--fs) * 0.88)", color: V.soft, children: row.k }), _jsx(Hand, { style: { textAlign: "right", minWidth: 0, wordBreak: "break-word" }, children: row.v })] }, i))) }));
+}
+export function SearchBar({ placeholder = "Search", }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            border: `${V.stroke} solid ${V.soft}`,
+            borderRadius: 999,
+            padding: "5px 11px",
+            background: V.card,
+        }, children: [_jsx(Bar, { w: 11, h: 11, color: V.soft, r: 3 }), _jsx(Hand, { size: "calc(var(--fs) * 0.85)", color: V.soft, children: placeholder })] }));
+}
+export function Divider({ style = {} }) {
+    return (_jsx("div", { style: {
+            height: V.stroke,
+            background: V.line,
+            flex: "0 0 auto",
+            margin: "3px 0",
+            ...style,
+        } }));
+}
+export function Title({ text, script = false, size = "calc(var(--fs) * 2)", color = V.ink, }) {
+    return (_jsx(Hand, { script: script, size: size, weight: 700, color: color, children: text }));
+}
+export function Text({ value, color, weight, script = false, }) {
+    return (_jsx(Hand, { color: toneInk(color), weight: fontWeight(weight), script: script, children: value }));
+}
+const REGISTRY = {
+    // --- Frame / structure -------------------------------------------------
+    screen: (n) => {
+        const kids = n.children ?? [];
+        const lead = kids[0]?.el;
+        if (lead === "browserBar") {
+            return (_jsxs(Screen, { pad: 0, children: [renderNode(kids[0], kids[0].id ?? "browserbar"), renderScreenBodyNodes(kids.slice(1))] }));
+        }
+        if (lead === "statusBar") {
+            return (_jsxs(Screen, { pad: 0, children: [renderNode(kids[0], kids[0].id ?? "statusbar"), _jsx("div", { style: {
+                            flex: 1,
+                            minHeight: 0,
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "var(--gap)",
+                            padding: "calc(var(--pad) * 1.1)",
+                        }, children: renderScreenBodyNodes(kids.slice(1)) })] }));
+        }
+        return (_jsx(Screen, { pad: "calc(var(--pad) * 1.35)", children: renderScreenBodyNodes(kids) }));
+    },
+    browserBar: (n, children) => (_jsx(BrowserBar, { title: n.title ?? n.text, children: children })),
+    statusBar: () => _jsx(StatusBar, {}),
+    toolbar: (_n, children) => _jsx(Toolbar, { children: children }),
+    row: (n, children) => _jsx(Row, { full: n.full, children: children }),
+    col: (n, children) => _jsx(Col, { full: n.full, children: children }),
+    sidebar: (_n, children) => _jsx(Sidebar, { children: children }),
+    main: (_n, children) => _jsx(Main, { children: children }),
+    box: (n, children) => _jsx(Box, { dashed: n.dashed, children: children }),
+    card: (_n, children) => _jsx(Card, { children: children }),
+    column: (n, children) => (_jsx(Column, { title: n.title ?? n.text, count: n.count, tone: n.tone, children: children })),
+    divider: () => _jsx(Divider, {}),
+    // --- Text --------------------------------------------------------------
+    title: (n) => _jsx(Title, { text: n.text, script: n.script }),
+    text: (n) => (_jsx(Text, { value: n.value ?? n.text, color: n.color, weight: n.weight, script: n.script })),
+    lines: (n) => _jsx(Lines, { n: n.n, widths: n.widths }),
+    section: (n) => (_jsx(SectionLabel, { tone: n.tone, children: n.label ?? n.text })),
+    // --- List / task -------------------------------------------------------
+    navItem: (n) => (_jsx(NavItem, { label: n.label ?? n.text, count: n.count, active: n.active, dot: n.dot, tone: n.tone })),
+    taskRow: (n) => (_jsx(TaskRow, { title: n.title ?? n.text, note: n.note, due: n.due, dueTone: n.dueTone, prio: n.prio, done: n.done })),
+    // --- Controls ----------------------------------------------------------
+    chips: (n) => _jsx(Tabs, { items: n.items ?? [] }),
+    chip: (n) => _jsx(Chip, { active: n.active, children: n.label ?? n.text }),
+    pill: (n) => _jsx(Pill, { tone: n.tone, children: n.label ?? n.text }),
+    check: (n) => _jsx(Check, { done: n.done, shape: n.shape }),
+    field: (n) => (_jsx(Field, { label: n.label, value: n.value, placeholder: n.placeholder, area: n.area })),
+    btn: (n) => (_jsx(Btn, { solid: n.solid, full: n.full, tone: n.tone, children: n.label ?? n.text })),
+    fab: (n) => _jsx(Fab, { icon: n.icon }),
+    searchBar: (n) => _jsx(SearchBar, { placeholder: n.placeholder }),
+    // --- Atoms -------------------------------------------------------------
+    avatar: () => _jsx(Avatar, {}),
+    iconSquare: (n) => _jsx(IconSquare, { active: n.active }),
+    kv: (n) => _jsx(KV, { rows: n.rows ?? [] }),
+};
+function renderScreenBodyNode(node, key) {
+    const shouldFill = node.full !== false &&
+        (node.el === "row" || node.el === "col" || node.el === "main");
+    return renderNode(shouldFill ? { ...node, full: true } : node, key);
+}
+function renderScreenBodyNodes(nodes) {
+    return nodes.map((node, i) => renderScreenBodyNode(node, node.id ?? `screen-body-${i}`));
+}
+/** Render a single kit-tree node (and its children, recursively). */
+export function renderNode(node, key) {
+    const renderer = REGISTRY[node.el];
+    const children = node.children?.length ? renderNodes(node.children) : null;
+    if (!renderer) {
+        return children ? _jsx("div", { children: children }, key) : null;
+    }
+    const rendered = renderer(node, children);
+    return _jsx(KeyedNode, { children: rendered }, key ?? node.id);
+}
+/** Render an array of nodes. */
+export function renderNodes(nodes) {
+    return nodes.map((node, i) => renderNode(node, node.id ?? i));
+}
+/** Lightweight keyed wrapper that does not introduce extra DOM. */
+function KeyedNode({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+/** Whether an `el` name has a registered renderer. */
+export function hasRenderer(el) {
+    return el in REGISTRY;
+}
+export { REGISTRY as NODE_REGISTRY, V as WFV, toneColors, toneInk, fontWeight };
+/* ========================================================================== */
+/* Rough overlay (ported from kit/rough.tsx)                                  */
+/* ========================================================================== */
+const gen = rough.generator();
+/** The default selector used for HTML mockups: bordered/box-like elements. */
+export const HTML_ROUGH_SELECTOR = "[data-rough],button,input,textarea,select,.wf-card,.wf-box,hr,.wf-frame-target";
+/** Stable per-element seed so a frame doesn't re-wobble on every measure. */
+function seedFrom(...parts) {
+    const value = parts.join(":");
+    let hash = 2166136261;
+    for (let i = 0; i < value.length; i++) {
+        hash ^= value.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return ((hash >>> 0) % 2147483646) + 1;
+}
+/** Map the 0–100 sketch slider to a rough.js roughness (calm + legible). */
+export function sketchRoughness(sketch) {
+    const s = Math.max(0, Math.min(100, Number.isFinite(sketch) ? sketch : 0));
+    return Number((0.32 + (s / 100) * 1.15).toFixed(2));
+}
+function sketchBowing(sketch) {
+    const s = Math.max(0, Math.min(100, Number.isFinite(sketch) ? sketch : 0));
+    return Number((0.4 + (s / 100) * 0.5).toFixed(2));
+}
+function readVar(el, name) {
+    return getComputedStyle(el).getPropertyValue(name).trim();
+}
+/** Normalize a CSS color (hex or rgb[a]) to "r,g,b" for equality comparison. */
+function toRgbKey(color) {
+    const c = color.trim();
+    const hex = c.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        const h = hex[1];
+        const full = h.length === 3
+            ? h
+                .split("")
+                .map((d) => d + d)
+                .join("")
+            : h;
+        const n = parseInt(full, 16);
+        return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
+    }
+    const rgb = c.match(/rgba?\(([^)]+)\)/i);
+    if (rgb) {
+        const [r, g, b] = rgb[1].split(",").map((v) => parseInt(v.trim(), 10));
+        return `${r},${g},${b}`;
+    }
+    return null;
+}
+/** True when two CSS colors resolve to the same RGB (hex vs rgb tolerant). */
+function sameColor(a, b) {
+    const ka = toRgbKey(a);
+    const kb = toRgbKey(b);
+    return ka !== null && ka === kb;
+}
+/** A rounded-rect SVG path (so the frame stroke follows the artboard radius). */
+function roundedRectPath(x, y, w, h, r) {
+    const rad = Math.max(0, Math.min(r, w / 2, h / 2));
+    return [
+        `M${x + rad},${y}`,
+        `H${x + w - rad}`,
+        `A${rad},${rad} 0 0 1 ${x + w},${y + rad}`,
+        `V${y + h - rad}`,
+        `A${rad},${rad} 0 0 1 ${x + w - rad},${y + h}`,
+        `H${x + rad}`,
+        `A${rad},${rad} 0 0 1 ${x},${y + h - rad}`,
+        `V${y + rad}`,
+        `A${rad},${rad} 0 0 1 ${x + rad},${y}`,
+        "Z",
+    ].join(" ");
+}
+function elementStroke(node, fallback) {
+    const explicit = readVar(node, "--rough-stroke");
+    if (explicit)
+        return explicit;
+    const cs = getComputedStyle(node);
+    for (const side of [
+        "borderTopColor",
+        "borderLeftColor",
+        "borderBottomColor",
+        "borderRightColor",
+    ]) {
+        const width = parseFloat(cs.getPropertyValue(side.replace("Color", "Width")));
+        const color = cs[side];
+        if (width > 0 && color && color !== "rgba(0, 0, 0, 0)")
+            return color;
+    }
+    return fallback;
+}
+function build(scope, opts) {
+    const base = scope.getBoundingClientRect();
+    const layoutW = scope.offsetWidth;
+    const layoutH = scope.offsetHeight;
+    if (!layoutW || !layoutH)
+        return { paths: [], w: 0, h: 0 };
+    const zoom = base.width / layoutW || 1;
+    const themed = (scope.matches(".plan-wf, .plan-html-frame, .plan-diagram-frame")
+        ? scope
+        : scope.querySelector(".plan-wf, .plan-html-frame, .plan-diagram-frame")) ?? scope;
+    const ink = readVar(themed, "--ink") || readVar(themed, "--wf-ink") || "#34322e";
+    const sketch = readVar(themed, "--wf-sketch") || ink;
+    const line = readVar(themed, "--wf-line") || readVar(themed, "--line") || "";
+    const paths = [];
+    let index = 0;
+    const push = (drawable, stroke, sw) => {
+        for (const p of gen.toPaths(drawable)) {
+            paths.push({
+                d: p.d,
+                stroke: p.stroke && p.stroke !== "none" ? p.stroke : stroke,
+                strokeWidth: p.strokeWidth || sw,
+            });
+        }
+    };
+    const makeOpts = (stroke, sw, seed) => ({
+        seed,
+        roughness: opts.roughness,
+        bowing: opts.bowing,
+        stroke,
+        strokeWidth: sw,
+        preserveVertices: true,
+    });
+    if (opts.drawFrame) {
+        const sw = 2;
+        push(gen.path(roundedRectPath(2, 2, layoutW - 4, layoutH - 4, opts.frameRadius), {
+            ...makeOpts(sketch, sw, seedFrom("frame", layoutW, layoutH)),
+            roughness: opts.roughness + 0.35,
+            bowing: opts.bowing + 0.18,
+        }), sketch, sw);
+    }
+    scope.querySelectorAll(opts.selector).forEach((node) => {
+        const r = node.getBoundingClientRect();
+        const x = (r.left - base.left) / zoom;
+        const y = (r.top - base.top) / zoom;
+        const w = r.width / zoom;
+        const h = r.height / zoom;
+        if (w < 2 || h < 2)
+            return;
+        const kind = node.getAttribute("data-rough") || "rect";
+        const rawStroke = elementStroke(node, sketch);
+        const stroke = sameColor(rawStroke, ink) || (line !== "" && sameColor(rawStroke, line))
+            ? sketch
+            : rawStroke;
+        const sw = Number(readVar(node, "--rough-w")) || 1.4;
+        const seed = seedFrom(kind, Math.round(x), Math.round(y), Math.round(w), Math.round(h), index++);
+        const o = makeOpts(stroke, sw, seed);
+        let drawable;
+        if (kind === "ellipse") {
+            drawable = gen.ellipse(x + w / 2, y + h / 2, w, h, o);
+        }
+        else if (kind === "line:right") {
+            drawable = gen.line(x + w, y, x + w, y + h, o);
+        }
+        else if (kind === "line:bottom") {
+            drawable = gen.line(x, y + h, x + w, y + h, o);
+        }
+        else if (kind === "line:top" || node.tagName === "HR") {
+            drawable = gen.line(x, y + h / 2, x + w, y + h / 2, o);
+        }
+        else {
+            const cr = parseFloat(getComputedStyle(node).borderTopLeftRadius) || 0;
+            const radius = Math.min(cr / zoom, w / 2, h / 2);
+            drawable =
+                radius > 1
+                    ? gen.path(roundedRectPath(x + 1, y + 1, w - 2, h - 2, radius), o)
+                    : gen.rectangle(x + 1, y + 1, w - 2, h - 2, o);
+        }
+        push(drawable, stroke, sw);
+    });
+    return { paths, w: layoutW, h: layoutH };
+}
+/**
+ * Renders the rough overlay for a frame. `scopeRef` points at the frame root.
+ * When `enabled` is false (skeleton / clean register) it renders nothing and the
+ * crisp CSS borders stay visible.
+ */
+export function RoughOverlay({ scopeRef, sketch = 52, enabled = true, drawFrame = true, frameRadius = 14, selector = "[data-rough]", }) {
+    const [state, setState] = useState({ paths: [], w: 0, h: 0 });
+    const rafRef = useRef(0);
+    useEffect(() => {
+        const el = scopeRef.current;
+        if (!el || !enabled) {
+            el?.removeAttribute("data-rough-ready");
+            el?.querySelector(".plan-wf, .plan-html-frame, .plan-diagram-frame")?.removeAttribute("data-rough-ready");
+            setState({ paths: [], w: 0, h: 0 });
+            return;
+        }
+        const roughness = sketchRoughness(sketch);
+        const bowing = sketchBowing(sketch);
+        const measure = () => {
+            clearTimeout(rafRef.current);
+            rafRef.current = window.setTimeout(() => {
+                const next = build(el, {
+                    roughness,
+                    bowing,
+                    frameRadius,
+                    drawFrame,
+                    selector,
+                });
+                if (next.w && next.h) {
+                    el.setAttribute("data-rough-ready", "true");
+                    (el.querySelector(".plan-wf, .plan-html-frame, .plan-diagram-frame") ?? el).setAttribute("data-rough-ready", "true");
+                    setState(next);
+                }
+            }, 0);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        el.querySelectorAll(selector).forEach((node) => ro.observe(node));
+        const mo = new MutationObserver((mutations) => {
+            if (mutations.every(isRoughOverlayMutation))
+                return;
+            measure();
+        });
+        mo.observe(el, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        el.addEventListener("plan-prototype-runtime:rendered", measure);
+        let cancelled = false;
+        if (typeof document !== "undefined" && "fonts" in document) {
+            void document.fonts.ready.then(() => {
+                if (!cancelled)
+                    measure();
+            });
+        }
+        return () => {
+            cancelled = true;
+            ro.disconnect();
+            mo.disconnect();
+            el.removeEventListener("plan-prototype-runtime:rendered", measure);
+            clearTimeout(rafRef.current);
+            el.removeAttribute("data-rough-ready");
+            el.querySelector(".plan-wf, .plan-html-frame, .plan-diagram-frame")?.removeAttribute("data-rough-ready");
+        };
+    }, [scopeRef, sketch, enabled, drawFrame, frameRadius, selector]);
+    if (!enabled || !state.paths.length)
+        return null;
+    return (_jsx("svg", { "aria-hidden": true, className: "plan-rough-overlay", width: "100%", height: "100%", viewBox: `0 0 ${state.w} ${state.h}`, preserveAspectRatio: "none", style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            overflow: "hidden",
+            zIndex: 3,
+        }, children: state.paths.map((p, i) => (_jsx("path", { d: p.d, fill: "none", stroke: p.stroke, strokeWidth: p.strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }, i))) }));
+}
+function isRoughOverlayMutation(mutation) {
+    if (nodeIsRoughOverlay(mutation.target))
+        return true;
+    const changedNodes = [
+        ...Array.from(mutation.addedNodes),
+        ...Array.from(mutation.removedNodes),
+    ];
+    return changedNodes.length > 0 && changedNodes.every(nodeIsRoughOverlay);
+}
+function nodeIsRoughOverlay(node) {
+    const element = node instanceof Element ? node : node.parentElement;
+    return Boolean(element?.classList.contains("plan-rough-overlay") ||
+        element?.closest(".plan-rough-overlay"));
+}
+//# sourceMappingURL=wireframe-kit.js.map