@joplo-app/plugin-ui 0.0.0-stage → 0.3.0

package/dist/runtime.js

@@ -0,0 +1,1447 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence } from 'motion/react';
+import { motion } from '@joplo-app/kit/renderer';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { defineRuntime } from '@joplo-app/kit/plugin';
+import { useCtx, useI18n as useHostI18n, useR, useRoot, useRootAttrs, useStroke, useLook, RenderNode, RendererContextProvider, Rough, RoughPath, roundRectPath, rectOf, nodeLabel, resolveProps, resolveValue, isSelfVisible, walkNodes, atWidth, childWidth, choicesOf, layoutRegions, styleOf } from '@joplo-app/kit/renderer';
+import { ACCENT, BG, DANGER, onFill, DIMMED, FONT, INFO, INK, INK2, LINE, LINE_STRONG, MONO, OK, SOFT, SPACING, SUBTLE, SURFACE, TITLE_SIZE, WARN, color, dim, fontSize, light, radius, space, spaceNum, tint } from '@joplo-app/kit/renderer-style';
+import { changeFor, dataRows, displayData, stateFlowItems } from "./story-data.js";
+const useI18n = () => useHostI18n();
+const flexVal = (v, d) => typeof v === 'string' && v ? v : d;
+const cn = (...args) => twMerge(clsx(...args));
+const VIEWPORT_SIZE = { mobile: { width: 390, height: 844 } };
+export const PHONE_LANDSCAPE = { width: 772, height: 358 };
+function appShellLayout(node, state, width) {
+    const r = layoutRegions(node, state, width);
+    return { header: r.header ?? null, footer: r.footer ?? null, navbar: r.navbar ?? null, aside: r.aside ?? null, padding: node.props?.padding, mobile: { navbar: !!r.navbar?.mobile, aside: !!r.aside?.mobile } };
+}
+/** Tabs / Radio.Group / SegmentedControl 的当前值。 */
+const ValueContext = createContext(null);
+/** Accordion：展开的项。 */
+const AccordionContext = createContext(null);
+const AccordionItemContext = createContext(null);
+/** Timeline / Stepper：子项序号与当前进度。 */
+const ItemProgressContext = createContext(null);
+/** AppShell：各区域的尺寸与收起状态。 */
+const ShellContext = createContext(null);
+const str = (v, fallback = '') => (v === undefined || v === null ? fallback : typeof v === 'string' ? v : typeof v === 'number' || typeof v === 'boolean' ? String(v) : JSON.stringify(v));
+const arr = (v) => (Array.isArray(v) ? v : []);
+/** 可输入组件的显示值：动画预览 > 状态 inputs[id] > 绑定的 value > checked > defaultValue。 */
+function useInputValue(node, p) {
+    const { state, preview } = useCtx();
+    if (preview && preview.nodeId === node.id)
+        return preview.text;
+    if (state.inputs[node.id] !== undefined)
+        return state.inputs[node.id];
+    if (p.value !== undefined)
+        return p.value;
+    if (p.checked !== undefined)
+        return p.checked;
+    return p.defaultValue ?? p.defaultChecked;
+}
+function textOf(node, state) {
+    if (node.type === '#text')
+        return str(resolveValue(node.props?.text, state));
+    return (node.children ?? []).map((c) => textOf(c, state)).join('');
+}
+/** 手绘描边 + 线框边框共用的盒子。 */
+function boxStyle(stroke, fill) {
+    return { ...(stroke ? { borderColor: stroke } : {}), ...(fill ? { background: fill } : {}) };
+}
+// ============ 文本与 HTML ============
+const HTML_TAGS = ['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'main', 'section', 'header', 'footer', 'nav', 'aside', 'ul', 'ol', 'li', 'strong', 'em', 'small', 'code'];
+function htmlImpl(tag) {
+    return function Html({ node, p, children }) {
+        const root = useRoot(node, p, { className: `jh-${tag}` });
+        const Tag = tag;
+        return _jsx(Tag, { ...root, children: children });
+    };
+}
+function Title({ node, p, children }) {
+    const order = Math.min(6, Math.max(1, Number(p.order ?? 1) || 1));
+    const size = fontSize(p.size) ?? `${TITLE_SIZE[order - 1]}px`;
+    const root = useRoot(node, p, { className: 'jt-title', style: { fontSize: size, fontWeight: order <= 2 ? 700 : 650, lineHeight: 1.3 } });
+    const Tag = `h${order}`;
+    return _jsx(Tag, { ...root, children: children });
+}
+function Text({ node, p, children }) {
+    const r = useR(p);
+    const clamp = typeof p.lineClamp === 'number' ? p.lineClamp : null;
+    const style = {
+        fontSize: p.inherit ? undefined : (fontSize(r('size')) ?? `${FONT.md - 1}px`),
+        whiteSpace: p.truncate ? 'nowrap' : 'pre-line',
+        lineHeight: 1.55,
+        ...(p.truncate ? { overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
+        ...(clamp ? { display: '-webkit-box', WebkitLineClamp: clamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } : {}),
+        ...(p.c === undefined && p.color !== undefined ? { color: color(p.color) } : {}),
+        ...(p.gradient ? { fontWeight: 700 } : {}),
+    };
+    const root = useRoot(node, p, { style });
+    const inline = p.span === true || p.component === 'span' || p.inline === true;
+    return inline ? _jsx("span", { ...root, children: children }) : _jsx("p", { ...root, children: children });
+}
+function Code({ node, p, children }) {
+    const bg = color(p.color);
+    const block = p.block === true;
+    const root = useRoot(node, p, {
+        style: {
+            fontFamily: MONO,
+            fontSize: block ? 13 : '0.88em',
+            background: bg ? light(bg) : SUBTLE,
+            borderRadius: 4,
+            padding: block ? '10px 12px' : '1px 5px',
+            whiteSpace: block ? 'pre-wrap' : 'pre-wrap',
+            display: block ? 'block' : 'inline',
+            wordBreak: 'break-word',
+        },
+    });
+    return block ? _jsx("pre", { ...root, children: children }) : _jsx("code", { ...root, children: children });
+}
+function Kbd({ node, p, children }) {
+    const root = useRoot(node, p, { className: 'jbox', style: { display: 'inline-block', fontFamily: MONO, fontSize: 12, padding: '0 6px', borderBottomWidth: 3, borderColor: LINE_STRONG, borderRadius: 4, background: SUBTLE } });
+    return (_jsx("kbd", { ...root, "data-soft": "", children: children }));
+}
+function Blockquote({ node, p, children }) {
+    const c = color(p.color) ?? INFO;
+    const root = useRoot(node, p, { style: { borderLeft: `4px solid ${c}`, background: light(c), padding: '12px 16px', borderRadius: 4 } });
+    return (_jsxs("blockquote", { ...root, children: [_jsx("div", { style: { whiteSpace: 'pre-line' }, children: children }), p.cite ? _jsxs("cite", { style: { display: 'block', marginTop: 6, fontSize: 13, color: DIMMED, fontStyle: 'normal' }, children: ["\u2014 ", str(p.cite)] }) : null] }));
+}
+function List({ node, p, children }) {
+    const ordered = p.type === 'ordered';
+    const root = useRoot(node, p, { style: { listStyle: ordered ? 'decimal' : 'disc', paddingLeft: 22, display: 'flex', flexDirection: 'column', gap: space(p.spacing) ?? '4px', fontSize: fontSize(p.size) } });
+    return ordered ? _jsx("ol", { ...root, children: children }) : _jsx("ul", { ...root, children: children });
+}
+function ListItem({ node, p, children }) {
+    const root = useRoot(node, p, { style: { whiteSpace: 'pre-line' } });
+    return _jsx("li", { ...root, children: children });
+}
+function Anchor({ node, p, disabled, children }) {
+    const c = color(p.c) ?? INFO;
+    const root = useRoot(node, p, { disabled, className: 'cursor-pointer', style: { color: disabled ? DIMMED : c, textDecoration: p.underline === 'never' ? 'none' : 'underline', textUnderlineOffset: 4, fontSize: fontSize(p.size) } });
+    return (_jsx("a", { ...root, role: "link", tabIndex: 0, children: children }));
+}
+// ============ 布局 ============
+function Box({ node, p, children }) {
+    const root = useRoot(node, p);
+    return _jsx("div", { ...root, children: children });
+}
+function Space({ node, p }) {
+    const r = useR(p);
+    const root = useRoot(node, p, { style: { height: space(r('h')), width: space(r('w')), flexShrink: 0 } });
+    return _jsx("div", { ...root, "aria-hidden": true });
+}
+function Stack({ node, p, children }) {
+    const r = useR(p);
+    const root = useRoot(node, p, {
+        style: { display: 'flex', flexDirection: 'column', gap: space(r('gap')) ?? `${SPACING.md}px`, alignItems: flexVal(r('align'), 'stretch'), justifyContent: flexVal(r('justify'), 'flex-start') },
+    });
+    return _jsx("div", { ...root, children: children });
+}
+function Group({ node, p, children }) {
+    const r = useR(p);
+    const root = useRoot(node, p, {
+        className: r('grow') ? 'jgrow' : undefined,
+        style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: space(r('gap')) ?? `${SPACING.md}px`,
+            alignItems: flexVal(r('align'), 'center'),
+            justifyContent: flexVal(r('justify'), 'flex-start'),
+            flexWrap: flexVal(r('wrap'), 'wrap') ?? 'wrap',
+        },
+    });
+    return _jsx("div", { ...root, children: children });
+}
+function Flex({ node, p, children }) {
+    const r = useR(p);
+    const root = useRoot(node, p, {
+        style: {
+            display: p.inline ? 'inline-flex' : 'flex',
+            flexDirection: flexVal(r('direction'), 'row') ?? 'row',
+            flexWrap: flexVal(r('wrap'), 'nowrap') ?? 'nowrap',
+            gap: space(r('gap')),
+            rowGap: space(r('rowGap')),
+            columnGap: space(r('columnGap')),
+            alignItems: flexVal(r('align')),
+            justifyContent: flexVal(r('justify')),
+        },
+    });
+    return _jsx("div", { ...root, children: children });
+}
+function SimpleGrid({ node, p, children }) {
+    const r = useR(p);
+    const cols = Math.max(1, Number(r('cols') ?? 1) || 1);
+    const gap = space(r('spacing')) ?? `${SPACING.md}px`;
+    const root = useRoot(node, p, { style: { display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, columnGap: gap, rowGap: space(r('verticalSpacing')) ?? gap } });
+    return (_jsx("div", { ...root, "data-cols": cols, children: children }));
+}
+const GridContext = createContext({ columns: 12, gutter: 16, grow: false });
+function Grid({ node, p, children }) {
+    const r = useR(p);
+    const columns = Math.max(1, Number(r('columns') ?? 12) || 12);
+    const gutter = spaceNum(r('gutter'), SPACING.md);
+    const root = useRoot(node, p, { style: { display: 'flex', flexWrap: 'wrap', gap: gutter, alignItems: flexVal(r('align'), 'stretch'), justifyContent: flexVal(r('justify'), 'flex-start') } });
+    return (_jsx(GridContext.Provider, { value: { columns, gutter, grow: p.grow === true }, children: _jsx("div", { ...root, children: children }) }));
+}
+function GridCol({ node, p, children }) {
+    const r = useR(p);
+    const g = useContext(GridContext);
+    const span = r('span') ?? 12;
+    const offset = Number(r('offset') ?? 0) || 0;
+    const frac = (n) => `calc((100% + ${g.gutter}px) * ${n / g.columns} - ${g.gutter}px)`;
+    const style = span === 'auto' ? { flex: '1 1 0', minWidth: 0 } : span === 'content' ? { flex: '0 0 auto' } : { flex: g.grow ? `1 0 ${frac(Number(span) || 12)}` : `0 0 ${frac(Number(span) || 12)}`, maxWidth: g.grow ? undefined : frac(Number(span) || 12), minWidth: 0 };
+    if (offset)
+        style.marginLeft = `calc((100% + ${g.gutter}px) * ${offset / g.columns})`;
+    const root = useRoot(node, p, { style });
+    return _jsx("div", { ...root, children: children });
+}
+const CONTAINER = { xs: 540, sm: 720, md: 960, lg: 1140, xl: 1320 };
+function Container({ node, p, children }) {
+    const r = useR(p);
+    const size = r('size');
+    const max = p.fluid ? '100%' : typeof size === 'number' ? `${size}px` : `${CONTAINER[str(size, 'md')] ?? 960}px`;
+    const root = useRoot(node, p, { style: { maxWidth: max, marginLeft: 'auto', marginRight: 'auto', paddingLeft: SPACING.md, paddingRight: SPACING.md, width: '100%' } });
+    return _jsx("div", { ...root, children: children });
+}
+function Center({ node, p, children }) {
+    const root = useRoot(node, p, { style: { display: p.inline ? 'inline-flex' : 'flex', alignItems: 'center', justifyContent: 'center' } });
+    return _jsx("div", { ...root, children: children });
+}
+function Paper({ node, p, children }) {
+    const mode = useStroke();
+    const border = p.withBorder === true;
+    const shadow = typeof p.shadow === 'string' && p.shadow !== 'none';
+    const root = useRoot(node, p, {
+        className: border ? 'jbox' : undefined,
+        style: { background: SURFACE, borderRadius: p.radius !== undefined ? radius(p.radius) : 'var(--jp-radius)', ...(shadow ? { boxShadow: 'var(--jp-shadow)' } : {}), position: 'relative' },
+    });
+    return (_jsxs("div", { ...root, "data-soft": "", children: [border ? _jsx(Rough, { seedKey: node.id, stroke: SOFT }) : null, children] }));
+}
+function Card({ node, p, children }) {
+    const r = useR(p);
+    const pad = spaceNum(r('padding'), SPACING.md);
+    const border = p.withBorder === true;
+    const root = useRoot(node, p, {
+        className: 'jbox jcard [.jstage[data-stroke=clean]_&]:rounded-lg',
+        style: { display: 'flex', flexDirection: 'column', background: SURFACE, padding: pad, ['--jcard-p']: `${pad}px` },
+    });
+    return (_jsxs("div", { ...root, "data-soft": border ? undefined : '', children: [_jsx(Rough, { seedKey: node.id, stroke: border ? INK : SOFT }), children] }));
+}
+function CardSection({ node, p, children }) {
+    const border = p.withBorder === true;
+    const root = useRoot(node, p, {
+        className: 'jcard-sec',
+        style: { marginLeft: 'calc(-1 * var(--jcard-p, 16px))', marginRight: 'calc(-1 * var(--jcard-p, 16px))', ...(p.inheritPadding ? { paddingLeft: 'var(--jcard-p, 16px)', paddingRight: 'var(--jcard-p, 16px)' } : {}), ...(border ? { borderTop: '1px solid #dee2e6', borderBottom: '1px solid #dee2e6' } : {}) },
+    });
+    return _jsx("div", { ...root, children: children });
+}
+function Divider({ node, p }) {
+    const vertical = p.orientation === 'vertical';
+    const label = p.label !== undefined ? str(p.label) : '';
+    const pos = str(p.labelPosition, 'left');
+    const c = color(p.color) ?? LINE;
+    const root = useRoot(node, p, { style: vertical ? { alignSelf: 'stretch', width: 1, background: c, flexShrink: 0 } : { display: 'flex', alignItems: 'center', gap: 8, width: '100%', color: DIMMED, fontSize: 13 } });
+    if (vertical)
+        return _jsx("div", { ...root, role: "separator", "aria-orientation": "vertical" });
+    const line = _jsx("span", { style: { flex: 1, height: 1, background: c } });
+    return (_jsxs("div", { ...root, role: "separator", children: [label && pos !== 'left' ? line : null, label ? _jsx("span", { children: label }) : null, !label || pos !== 'right' ? line : null] }));
+}
+function ScrollArea({ node, p, children }) {
+    const root = useRoot(node, p, { style: { position: 'relative', overflow: 'auto' } });
+    return _jsx("div", { ...root, children: children });
+}
+// ============ AppShell ============
+function AppShell({ node, p, children }) {
+    const { state, width } = useCtx();
+    const layout = appShellLayout(node, state, width);
+    let hasBurger = false;
+    walkNodes(node, (n) => {
+        if (n.type === 'ui:Burger')
+            hasBurger = true;
+    });
+    const navW = layout.navbar && !layout.navbar.collapsed && !layout.mobile.navbar ? layout.navbar.size : 0;
+    const asideW = layout.aside && !layout.aside.collapsed && !layout.mobile.aside ? layout.aside.size : 0;
+    const headH = layout.header && !layout.header.collapsed ? layout.header.size : 0;
+    const footH = layout.footer && !layout.footer.collapsed ? layout.footer.size : 0;
+    const root = useRoot(node, p, {
+        style: {
+            display: 'grid',
+            height: '100%',
+            gridTemplateColumns: `${navW}px minmax(0, 1fr) ${asideW}px`,
+            gridTemplateRows: `${headH}px minmax(0, 1fr) ${footH}px`,
+            gridTemplateAreas: '"h h h" "n m a" "f f f"',
+            position: 'relative',
+        },
+    });
+    return (_jsx(ShellContext.Provider, { value: { layout, autoBurger: !hasBurger && (layout.mobile.navbar || false) && !!layout.navbar }, children: _jsx("div", { ...root, "data-shell-mobile": layout.mobile.navbar ? '' : undefined, children: children }) }));
+}
+function ShellHeader({ node, p, children }) {
+    const shell = useContext(ShellContext);
+    const root = useRoot(node, p, { style: { gridArea: 'h', borderBottom: `1px solid ${LINE}`, background: SURFACE, minWidth: 0, position: 'relative', zIndex: 2 } });
+    if (shell?.layout.header?.collapsed)
+        return null;
+    return (_jsxs("header", { ...root, children: [shell?.autoBurger ? (_jsx("span", { "aria-hidden": true, "data-jauto-burger": "", style: { position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }, children: _jsx(BurgerIcon, { opened: false, size: 18 }) })) : null, _jsx("div", { style: { height: '100%', paddingLeft: shell?.autoBurger ? 40 : 0 }, children: children })] }));
+}
+function ShellSide({ node, p, children }) {
+    const shell = useContext(ShellContext);
+    const nav = node.type === 'ui:AppShell.Navbar';
+    const region = nav ? shell?.layout.navbar : shell?.layout.aside;
+    const mobile = nav ? shell?.layout.mobile.navbar : shell?.layout.mobile.aside;
+    const overlay = !!mobile && region && !region.collapsed;
+    const root = useRoot(node, p, {
+        style: overlay
+            ? { position: 'absolute', left: 0, right: 0, top: shell.layout.header?.size ?? 0, bottom: 0, zIndex: 5, background: SURFACE, overflow: 'auto', display: 'flex', flexDirection: 'column' }
+            : { gridArea: nav ? 'n' : 'a', background: SUBTLE, minHeight: 0, overflow: 'auto', display: 'flex', flexDirection: 'column', [nav ? 'borderRight' : 'borderLeft']: `1px solid ${LINE}` },
+    });
+    if (region?.collapsed)
+        return null;
+    return _jsx("nav", { ...root, children: children });
+}
+function ShellMain({ node, p, children }) {
+    const shell = useContext(ShellContext);
+    const { width, state } = useCtx();
+    const pad = space(atWidth(resolveValue(shell?.layout.padding, state), width)) ?? '0px';
+    const root = useRoot(node, p, { style: { gridArea: 'm', minHeight: 0, minWidth: 0, overflow: 'auto', padding: pad } });
+    return _jsx("main", { ...root, children: children });
+}
+function ShellFooter({ node, p, children }) {
+    const shell = useContext(ShellContext);
+    const root = useRoot(node, p, { style: { gridArea: 'f', borderTop: `1px solid ${LINE}`, background: SURFACE, minWidth: 0 } });
+    if (shell?.layout.footer?.collapsed)
+        return null;
+    return _jsx("footer", { ...root, children: children });
+}
+function BurgerIcon({ opened, size = 18 }) {
+    const bar = (extra) => ({ position: 'absolute', left: 0, width: size, height: 2, background: INK, borderRadius: 1, transition: 'transform .2s', ...extra });
+    return (_jsxs("span", { style: { position: 'relative', display: 'inline-block', width: size, height: size * 0.75 }, children: [_jsx("span", { style: bar(opened ? { top: '50%', transform: 'rotate(45deg)' } : { top: 0 }) }), opened ? null : _jsx("span", { style: bar({ top: '50%', marginTop: -1 }) }), _jsx("span", { style: bar(opened ? { top: '50%', transform: 'rotate(-45deg)' } : { bottom: 0 }) })] }));
+}
+function Burger({ node, p, disabled }) {
+    const { t: i18n } = useI18n();
+    const root = useRoot(node, p, { disabled, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, flexShrink: 0 } });
+    return (_jsx("button", { ...root, type: "button", "aria-label": str(p['aria-label'], i18n.stage.navigation), "aria-expanded": p.opened === true, children: _jsx(BurgerIcon, { opened: p.opened === true, size: p.size === 'sm' ? 16 : p.size === 'lg' ? 22 : 18 }) }));
+}
+// ============ 展示 ============
+const BADGE_H = { xs: 16, sm: 18, md: 20, lg: 26, xl: 32 };
+function Badge({ node, p, children }) {
+    const mode = useStroke();
+    const variant = str(p.variant, 'filled');
+    const base = color(p.color) ?? INK;
+    const t = variant === 'outline' ? { stroke: base, text: base }
+        : variant === 'light' ? { stroke: light(base), fill: light(base), text: base }
+            : variant === 'dot' || variant === 'default' ? { stroke: LINE_STRONG, text: INK }
+                : variant === 'transparent' ? { stroke: 'transparent', text: base }
+                    : variant === 'white' ? { stroke: SURFACE, fill: SURFACE, text: base }
+                        : { stroke: base, fill: base, text: onFill(base) };
+    const h = BADGE_H[str(p.size, 'md')] ?? 20;
+    const root = useRoot(node, p, {
+        className: 'jbox',
+        style: { display: 'inline-flex', alignItems: 'center', gap: 4, height: h + 4, padding: '0 10px', borderRadius: 999, fontSize: Math.max(11, h - 7), color: t.text, ...(mode === 'clean' ? boxStyle(t.stroke, t.fill) : {}), whiteSpace: 'nowrap', width: p.fullWidth ? '100%' : 'fit-content', justifyContent: 'center' },
+    });
+    return (_jsxs("span", { ...root, children: [_jsx(Rough, { seedKey: node.id, shape: "ellipse", stroke: t.stroke, fill: t.fill, fillStyle: "solid", strokeWidth: 1, inset: 1 }), variant === 'dot' ? _jsx("span", { style: { width: 6, height: 6, borderRadius: 3, background: base } }) : null, _jsx("span", { className: "jtrunc", "data-jtext": "", children: children })] }));
+}
+const AVATAR = { xs: 16, sm: 26, md: 38, lg: 56, xl: 84 };
+function initials(name) {
+    const t = name.trim();
+    if (!t)
+        return '?';
+    if (/^[\x00-\x7f]+$/.test(t))
+        return t.split(/\s+/).slice(0, 2).map((w) => w[0].toUpperCase()).join('');
+    return t.slice(0, 1);
+}
+function Avatar({ node, p, children }) {
+    const { state } = useCtx();
+    const size = typeof p.size === 'number' ? p.size : (AVATAR[str(p.size, 'md')] ?? 38);
+    const c = color(p.color) ?? INK2;
+    const name = str(p.name ?? p.alt) || textOf(node, state);
+    const root = useRoot(node, p, { className: 'jbox', style: { width: size, height: size, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: Math.max(10, size * 0.4), color: c, background: light(c), flexShrink: 0, fontWeight: 600 } });
+    return (_jsxs("span", { ...root, "data-jround": "", children: [_jsx(Rough, { seedKey: node.id, shape: "ellipse", stroke: c, strokeWidth: 1.1 }), _jsx("span", { children: p.name || p.alt || !children ? initials(name) : children })] }));
+}
+/** 内嵌的图片（asset() 生成的 data:image/… URI）才真正画出来；网址、路径不去加载（编译期会提示），仍画占位。 */
+export const embeddedImage = (src) => (typeof src === 'string' && src.startsWith('data:image/') ? src : null);
+function ImageBox({ node, p }) {
+    const { t: i18n } = useI18n();
+    const r = useR(p);
+    const src = embeddedImage(p.src);
+    if (src) {
+        const h = dim(r('h'));
+        const fit = p.fit === 'contain' ? 'contain' : 'cover';
+        const root = useRoot(node, p, { style: { display: 'block', position: 'relative', overflow: 'hidden', width: dim(r('w')) ?? '100%', height: h ?? 'auto', borderRadius: radius(p.radius) } });
+        return (_jsx("div", { ...root, role: "img", "aria-label": str(p.alt, i18n.stage.image), "data-jimage": "", children: _jsx("img", { src: src, alt: "", draggable: false, style: { display: 'block', width: '100%', height: h ? '100%' : 'auto', objectFit: fit, objectPosition: str(p.position, 'center') } }) }));
+    }
+    const root = useRoot(node, p, { className: 'jbox', style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: dim(r('w')) ?? '100%', height: dim(r('h')) ?? 160, background: SUBTLE, color: DIMMED, fontSize: 13, borderRadius: radius(p.radius) } });
+    return (_jsxs("div", { ...root, role: "img", "aria-label": str(p.alt, i18n.stage.image), "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT, fill: LINE, fillStyle: "cross-hatch" }), _jsxs("span", { style: { background: 'rgba(255,255,255,.9)', padding: '0 8px', borderRadius: 4 }, children: ["\uD83D\uDDBC ", str(p.alt, i18n.stage.image)] })] }));
+}
+function ThemeIcon({ node, p, children }) {
+    const size = typeof p.size === 'number' ? p.size : (AVATAR[str(p.size, 'md')] ?? 28) * 0.8;
+    const c = color(p.color) ?? INK;
+    const filled = str(p.variant, 'filled') === 'filled';
+    const root = useRoot(node, p, { className: 'jbox', style: { width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: radius(p.radius ?? 'sm'), background: filled ? c : light(c), color: filled ? onFill(c) : c, flexShrink: 0, fontSize: size * 0.55 } });
+    return (_jsx("span", { ...root, children: _jsx("span", { children: children }) }));
+}
+function Indicator({ node, p, disabled, children }) {
+    const c = color(p.color) ?? DANGER;
+    const label = p.label !== undefined ? str(p.label) : '';
+    const root = useRoot(node, p, { style: { position: 'relative', display: p.inline ? 'inline-block' : 'block', width: 'fit-content' } });
+    return (_jsxs("div", { ...root, children: [children, disabled ? null : (_jsx("span", { "data-jindicator": "", style: { position: 'absolute', top: -4, right: -4, minWidth: label ? 18 : 10, height: label ? 18 : 10, padding: label ? '0 5px' : 0, borderRadius: 999, background: c, color: '#fff', fontSize: 11, lineHeight: '18px', textAlign: 'center', border: '2px solid #fff', zIndex: 2 }, children: label }))] }));
+}
+function Timeline({ node, p, children }) {
+    const active = Number(resolveValue(p.active, useCtx().state) ?? -1);
+    const ids = (node.children ?? []).filter((c) => c.type === 'ui:Timeline.Item').map((c) => c.id);
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column' } });
+    return (_jsx(ItemProgressContext.Provider, { value: { ids, active: Number.isFinite(active) ? active : -1, content: null }, children: _jsx("div", { ...root, children: children }) }));
+}
+function TimelineItem({ node, p, children }) {
+    const seq = useContext(ItemProgressContext);
+    const i = seq ? seq.ids.indexOf(node.id) : 0;
+    const done = !!seq && i <= seq.active;
+    const last = !!seq && i === seq.ids.length - 1;
+    const c = color(p.color) ?? INK;
+    const root = useRoot(node, p, { style: { position: 'relative', paddingLeft: 30, paddingBottom: last ? 0 : 18 } });
+    return (_jsxs("div", { ...root, "data-active": done ? '' : undefined, children: [last ? null : _jsx("span", { "aria-hidden": true, style: { position: 'absolute', left: 9, top: 20, bottom: 0, width: 2, background: done && seq && i < seq.active ? c : LINE } }), _jsx("span", { "aria-hidden": true, style: { position: 'absolute', left: 0, top: 2, width: 20, height: 20, borderRadius: 10, border: `2px solid ${done ? c : LINE_STRONG}`, background: done ? c : SURFACE, color: '#fff', fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: p.bullet !== undefined ? str(p.bullet) : null }), p.title !== undefined ? _jsx("div", { style: { fontWeight: 600, lineHeight: 1.5 }, children: str(p.title) }) : null, _jsx("div", { style: { color: INK2, fontSize: 14, whiteSpace: 'pre-line' }, children: children })] }));
+}
+// ============ Table / DataTable ============
+const cellPad = '8px 12px';
+function TableShell({ node, p, children }) {
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { width: '100%', background: SURFACE, overflowX: 'auto' } });
+    return (_jsxs("div", { ...root, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: INK2, strokeWidth: 1.1 }), children] }));
+}
+function Table({ node, p, children }) {
+    const data = p.data && typeof p.data === 'object' && !Array.isArray(p.data) ? p.data : null;
+    const striped = p.striped === true;
+    return (_jsx(TableShell, { node: node, p: p, disabled: false, children: _jsx("table", { className: cn('jtable w-full border-collapse text-[14px]', striped && 'jtable-striped'), children: data ? (_jsxs(_Fragment, { children: [data.caption ? _jsx("caption", { style: { captionSide: 'bottom', color: DIMMED, fontSize: 13, padding: 6 }, children: str(data.caption) }) : null, Array.isArray(data.head) ? (_jsx("thead", { children: _jsx("tr", { children: data.head.map((h, i) => (_jsx("th", { children: str(h) }, i))) }) })) : null, _jsx("tbody", { children: arr(data.body).map((row, i) => (_jsx("tr", { children: arr(row).map((c, j) => (_jsx("td", { children: str(c) }, j))) }, i))) })] })) : (children) }) }));
+}
+const tablePart = (Tag) => function TablePart({ node, p, children }) {
+    const root = useRoot(node, p);
+    return _jsx(Tag, { ...root, children: children });
+};
+function getPath(o, path) {
+    let cur = o;
+    for (const k of path.split('.')) {
+        if (cur === null || typeof cur !== 'object')
+            return undefined;
+        cur = cur[k];
+    }
+    return cur;
+}
+const humanize = (s) => s.replace(/[_.-]+/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase());
+/** 选中的行：selectedRecords 里的 id（或带 idAccessor 的记录）。 */
+export function selectedIds(selected, idAccessor) {
+    return new Set(arr(selected).map((x) => (x && typeof x === 'object' ? str(getPath(x, idAccessor)) : str(x))).filter(Boolean));
+}
+/**
+ * DataTable（mantine-datatable）：records（可绑定）+ columns [{ accessor, title, textAlign, width, sortable, badge, avatar }] + noRecordsText。
+ * D68：sortStatus（表头箭头，只是显示，排好序的 records 由步骤 set 进去）、selectedRecords + idAccessor（勾选列、选中行底色）、
+ * fetching（加载遮罩）。单元格仍然只是文字，badge / avatar 让最常见的两种单元格不必改写成 Table.*。
+ */
+function DataTable({ node, p }) {
+    const { t: i18n } = useI18n();
+    const cols = arr(p.columns)
+        .filter((c) => !!c && typeof c === 'object' && c.hidden !== true)
+        .map((c, i) => {
+        const accessor = str(c.accessor ?? c.accessorKey ?? `col${i}`);
+        const badge = c.badge === true ? true : c.badge && typeof c.badge === 'object' && !Array.isArray(c.badge) ? c.badge : null;
+        return { accessor, title: c.title !== undefined ? str(c.title) : c.header !== undefined ? str(c.header) : humanize(accessor), align: str(c.textAlign, 'left'), width: dim(c.width), sortable: c.sortable === true, badge, avatar: c.avatar === true };
+    });
+    const rows = arr(p.records ?? p.data);
+    const sort = p.sortStatus && typeof p.sortStatus === 'object' ? p.sortStatus : null;
+    const sortCol = sort ? str(sort.columnAccessor) : null;
+    const sortDir = sort && str(sort.direction) === 'desc' ? 'desc' : 'asc';
+    const idAccessor = str(p.idAccessor, 'id');
+    const selectable = p.selectedRecords !== undefined;
+    const selected = selectedIds(p.selectedRecords, idAccessor);
+    const allOn = selectable && rows.length > 0 && rows.every((r) => selected.has(r && typeof r === 'object' ? str(getPath(r, idAccessor)) : str(r)));
+    const someOn = selectable && !allOn && selected.size > 0;
+    const fetching = p.fetching === true;
+    // 勾选框不用 jbox（手绘描边会把边框交给 Rough），未勾选时也要看得见
+    const box = (on, mixed = false) => (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center justify-center", style: { width: 16, height: 16, borderRadius: 3, border: `1.5px solid ${on || mixed ? INK : INK2}`, background: on || mixed ? INK : SURFACE, color: BG, fontSize: 11, lineHeight: 1, boxSizing: 'border-box' }, "data-jcheck": on ? 'on' : mixed ? 'mixed' : 'off', children: on ? '✓' : mixed ? '−' : '' }));
+    const cell = (c, r) => {
+        const v = r && typeof r === 'object' ? str(getPath(r, c.accessor)) : str(r);
+        if (c.badge && v) {
+            const tone = c.badge === true ? undefined : color(c.badge[v]);
+            const base = tone ?? INK2;
+            return _jsx("span", { style: { display: 'inline-flex', alignItems: 'center', height: 22, padding: '0 9px', borderRadius: 999, fontSize: 12, color: base, background: light(base), whiteSpace: 'nowrap' }, "data-jbadge": v, children: v });
+        }
+        if (c.avatar && v)
+            return (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { "aria-hidden": true, style: { width: 26, height: 26, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, color: INK2, background: light(INK2), flexShrink: 0 }, children: initials(v) }), _jsx("span", { children: v })] }));
+        return v;
+    };
+    return (_jsx(TableShell, { node: node, p: p, disabled: false, children: _jsxs("div", { style: { position: 'relative' }, "data-jfetching": fetching ? '' : undefined, children: [_jsxs("table", { className: cn('jtable w-full border-collapse text-[14px]', p.striped === true && 'jtable-striped'), children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable ? _jsx("th", { style: { width: 36 }, children: box(allOn, someOn) }) : null, cols.map((c) => {
+                                        const sorted = sortCol === c.accessor;
+                                        return (_jsxs("th", { style: { textAlign: c.align, width: c.width }, "aria-sort": sorted ? (sortDir === 'desc' ? 'descending' : 'ascending') : undefined, "data-jsort": sorted ? sortDir : undefined, children: [c.title, sorted ? _jsx("span", { "aria-hidden": true, style: { marginLeft: 4 }, children: sortDir === 'desc' ? '▼' : '▲' }) : c.sortable ? _jsx("span", { "aria-hidden": true, style: { marginLeft: 4, color: SOFT }, children: "\u21C5" }) : null] }, c.accessor));
+                                    })] }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(cols.length + (selectable ? 1 : 0), 1), style: { padding: '18px 12px', textAlign: 'center', color: DIMMED }, "data-jempty": "", children: str(p.noRecordsText ?? p.empty, i18n.stage.noRecords) }) })) : (rows.map((r, i) => {
+                                const on = selectable && selected.has(r && typeof r === 'object' ? str(getPath(r, idAccessor)) : str(r));
+                                return (_jsxs("tr", { "data-jrow-index": i, "data-jselected-row": on ? '' : undefined, "aria-selected": selectable ? on : undefined, children: [selectable ? _jsx("td", { children: box(on) }) : null, cols.map((c) => (_jsx("td", { style: { textAlign: c.align }, children: cell(c, r) }, c.accessor)))] }, i));
+                            })) })] }), fetching ? (_jsx("div", { style: { position: 'absolute', inset: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in srgb, var(--jp-surface) 65%, transparent)' }, role: "status", children: _jsx(Spinner, { size: 24, c: INK }) })) : null] }) }));
+}
+// ============ Accordion ============
+function Accordion({ node, p, children }) {
+    const v = useInputValue(node, p);
+    const open = new Set(Array.isArray(v) ? v.map(String) : v !== undefined && v !== null && v !== '' ? [str(v)] : []);
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { display: 'flex', flexDirection: 'column', background: SURFACE } });
+    return (_jsx(AccordionContext.Provider, { value: { owner: node.id, open }, children: _jsxs("div", { ...root, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT }), children] }) }));
+}
+function AccordionItem({ node, p, children }) {
+    const acc = useContext(AccordionContext);
+    const value = str(p.value);
+    const root = useRoot(node, p, { className: 'jacc-item', style: { borderBottom: `1px solid ${LINE}` } });
+    return (_jsx(AccordionItemContext.Provider, { value: { value, open: !!acc?.open.has(value) }, children: _jsx("div", { ...root, children: children }) }));
+}
+function AccordionControl({ node, p, disabled, children }) {
+    const item = useContext(AccordionItemContext);
+    const owner = useContext(AccordionContext);
+    const ctx = useCtx();
+    const root = useRoot(node, p, { disabled, style: { display: 'flex', alignItems: 'center', width: '100%', padding: '10px 14px', gap: 8, fontWeight: 500, textAlign: 'left', color: disabled ? DIMMED : undefined } });
+    return (_jsxs("button", { ...root, type: "button", "aria-expanded": !!item?.open, onClick: ctx.interactive ? e => { e.stopPropagation(); if (!disabled && owner && item)
+            ctx.act?.(node.id, { type: 'click' }, { type: 'select', target: owner.owner, value: item.value }); } : undefined, children: [_jsx("span", { className: "jtrunc", style: { flex: 1 }, "data-jtext": "", children: children }), _jsx("span", { "aria-hidden": true, style: { transform: item?.open ? 'rotate(180deg)' : undefined, color: DIMMED }, children: "\u25BE" })] }));
+}
+function AccordionPanel({ node, p, children }) {
+    const item = useContext(AccordionItemContext);
+    const root = useRoot(node, p, { style: { padding: '0 14px 12px', whiteSpace: 'pre-line', fontSize: 14, color: INK2 } });
+    if (item && !item.open)
+        return null;
+    return _jsx("div", { ...root, children: children });
+}
+// ============ Alert / Notification / Loader / Progress ============
+function Alert({ node, p, children }) {
+    const mode = useStroke();
+    const c = color(p.color) ?? INFO;
+    const variant = str(p.variant, 'light');
+    const filled = variant === 'filled';
+    const danger = p.color === 'red';
+    const root = useRoot(node, p, {
+        className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md',
+        style: { display: 'flex', alignItems: 'flex-start', gap: 10, width: '100%', padding: '12px 16px', background: filled ? c : variant === 'outline' || variant === 'white' ? SURFACE : light(c), color: filled ? onFill(c) : INK, ...(mode === 'clean' ? { borderColor: c } : {}) },
+    });
+    return (_jsxs("div", { ...root, role: danger ? 'alert' : 'status', children: [_jsx(Rough, { seedKey: node.id, stroke: c, fill: filled ? c : undefined, fillStyle: "solid" }), _jsx("span", { "aria-hidden": true, style: { width: 20, height: 20, borderRadius: 10, flexShrink: 0, marginTop: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: filled ? '#fff' : c, color: filled ? c : '#fff' }, children: p.icon !== undefined ? str(p.icon) : danger ? '!' : 'i' }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0, flex: 1 }, children: [p.title !== undefined ? _jsx("div", { style: { fontWeight: 700, color: filled ? onFill(c) : c, lineHeight: 1.4 }, children: str(p.title) }) : null, _jsx("div", { style: { fontSize: 14, lineHeight: 1.5, whiteSpace: 'pre-line' }, children: children })] }), p.withCloseButton ? (_jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: "\u00D7" })) : null] }));
+}
+/** Notification 的浮动位置（D68）：没写 position 时内联；写了时浮在当前页面（弹窗层）的那个角或那条边上。 */
+export const NOTIFICATION_POSITIONS = ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
+export function notificationPlacement(position) {
+    if (typeof position !== 'string' || !NOTIFICATION_POSITIONS.includes(position))
+        return null;
+    const [v, hpos] = position.split('-');
+    return { position: 'absolute', [v]: 16, ...(hpos ? { [hpos]: 16 } : { left: '50%', transform: 'translateX(-50%)' }), width: 'min(380px, calc(100% - 32px))', zIndex: 6 };
+}
+function Notification({ node, p, children }) {
+    const { dialogLayer, animate } = useCtx();
+    const c = color(p.color) ?? INFO;
+    const place = notificationPlacement(p.position);
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 16px 12px 20px', background: SURFACE, boxShadow: place ? 'var(--jp-shadow)' : '3px 3px 0 rgba(30,30,30,.1)', position: 'relative' } });
+    const body = (_jsxs("div", { ...root, role: "status", "data-soft": "", "data-jfloating": place ? str(p.position) : undefined, children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT }), _jsx("span", { "aria-hidden": true, style: { position: 'absolute', left: 6, top: 10, bottom: 10, width: 4, borderRadius: 2, background: c } }), p.loading ? _jsx(Spinner, { size: 18, c: c }) : p.icon !== undefined ? _jsx("span", { "aria-hidden": true, style: { fontSize: 18, lineHeight: '22px' }, children: str(p.icon) }) : null, _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [p.title !== undefined ? _jsx("div", { style: { fontWeight: 600 }, children: str(p.title) }) : null, _jsx("div", { style: { fontSize: 14, color: INK2, whiteSpace: 'pre-line' }, children: children })] }), p.withCloseButton === false ? null : (_jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: "\u00D7" }))] }));
+    if (!place)
+        return body;
+    const float = (_jsx("div", { style: place, children: _jsx(motion.div, { initial: animate ? { opacity: 0, y: place.top !== undefined ? -12 : 12 } : false, animate: { opacity: 1, y: 0 }, transition: { duration: 0.22 }, children: body }) }));
+    // 浮到弹窗层（跟着镜头），没有弹窗层（服务端渲染）时相对最近的定位祖先
+    return dialogLayer ? createPortal(float, dialogLayer) : float;
+}
+function Spinner({ size = 18, c = INK, kind = 'oval' }) {
+    const { animate } = useCtx();
+    if (kind === 'dots')
+        return (_jsx("span", { "aria-hidden": true, style: { display: 'inline-flex', gap: size / 6 }, children: [0, 1, 2].map((i) => (_jsx(motion.span, { style: { width: size / 4, height: size / 4, borderRadius: 99, background: c }, animate: animate ? { opacity: [0.3, 1, 0.3] } : undefined, transition: animate ? { repeat: Infinity, duration: 0.9, delay: i * 0.15 } : undefined }, i))) }));
+    return (_jsx(motion.span, { "aria-hidden": true, style: { display: 'inline-block', width: size, height: size, flexShrink: 0, borderRadius: 999, border: `2px solid ${c}`, borderTopColor: 'transparent' }, animate: animate ? { rotate: 360 } : undefined, transition: animate ? { repeat: Infinity, ease: 'linear', duration: 0.9 } : undefined }));
+}
+const LOADER = { xs: 14, sm: 18, md: 24, lg: 32, xl: 40 };
+function Loader({ node, p, children }) {
+    const size = typeof p.size === 'number' ? p.size : (LOADER[str(p.size, 'md')] ?? 24);
+    const root = useRoot(node, p, { style: { display: 'inline-flex', alignItems: 'center', gap: 8, color: INK2 } });
+    return (_jsxs("div", { ...root, role: "status", children: [_jsx(Spinner, { size: size, c: color(p.color) ?? INK, kind: str(p.type, 'oval') }), children ? _jsx("span", { children: children }) : null] }));
+}
+const PROGRESS_H = { xs: 3, sm: 5, md: 8, lg: 12, xl: 16 };
+function Progress({ node, p }) {
+    const v = Math.max(0, Math.min(100, Number(p.value ?? 0) || 0));
+    const h = typeof p.size === 'number' ? p.size : (PROGRESS_H[str(p.size, 'md')] ?? 8);
+    const c = color(p.color) ?? INK;
+    const root = useRoot(node, p, { className: 'jbox', style: { width: '100%', height: h + 4, background: SUBTLE, borderRadius: 999, overflow: 'hidden' } });
+    return (_jsxs("div", { ...root, role: "progressbar", "aria-valuenow": v, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT, strokeWidth: 1 }), _jsx("div", { style: { width: `${v}%`, height: '100%', background: c, backgroundImage: p.striped ? 'repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px)' : undefined } })] }));
+}
+function RingProgress({ node, p }) {
+    const size = typeof p.size === 'number' ? p.size : 120;
+    const th = typeof p.thickness === 'number' ? p.thickness : size / 10;
+    const rr = (size - th) / 2;
+    const L = 2 * Math.PI * rr;
+    let acc = 0;
+    const sections = arr(p.sections).filter((s) => !!s && typeof s === 'object');
+    const root = useRoot(node, p, { style: { position: 'relative', width: size, height: size, flexShrink: 0 } });
+    return (_jsxs("div", { ...root, role: "img", children: [_jsxs("svg", { width: size, height: size, style: { transform: 'rotate(-90deg)' }, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: rr, fill: "none", style: { stroke: LINE }, strokeWidth: th }), sections.map((s, i) => {
+                        const v = Math.max(0, Math.min(100, Number(s.value) || 0));
+                        const el = _jsx("circle", { cx: size / 2, cy: size / 2, r: rr, fill: "none", stroke: color(s.color) ?? INK, strokeWidth: th, strokeDasharray: `${(L * v) / 100} ${L}`, strokeDashoffset: (-L * acc) / 100 }, i);
+                        acc += v;
+                        return el;
+                    })] }), p.label !== undefined ? _jsx("span", { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 600 }, children: str(p.label) }) : null] }));
+}
+function Skeleton({ node, p, children }) {
+    const { animate } = useCtx();
+    const r = useR(p);
+    const h = dim(r('height') ?? r('h')) ?? (p.circle ? '40px' : '16px');
+    const root = useRoot(node, p, { style: { width: p.circle ? h : (dim(r('width') ?? r('w')) ?? '100%'), height: h, borderRadius: p.circle ? 999 : (radius(p.radius) ?? '4px'), background: LINE } });
+    if (p.visible === false)
+        return _jsx(_Fragment, { children: children });
+    // D68：加载中轻轻呼吸（截图、导出与 animate=false 时静止）
+    const pulse = animate && p.animate !== false;
+    return _jsx(motion.div, { ...root, "aria-hidden": true, "data-jpulse": pulse ? '' : undefined, animate: pulse ? { opacity: [1, 0.45, 1] } : undefined, transition: pulse ? { repeat: Infinity, duration: 1.4, ease: 'easeInOut' } : undefined });
+}
+// ============ Modal / Drawer ============
+const OVERLAY_SIZE = { xs: 320, sm: 380, md: 440, lg: 620, xl: 780 };
+function sizeOf(v, d) {
+    if (typeof v === 'number')
+        return `${v}px`;
+    if (typeof v === 'string' && v)
+        return v in OVERLAY_SIZE ? `${OVERLAY_SIZE[v]}px` : v;
+    return `${d}px`;
+}
+/** Modal / Drawer：渲染到舞台内的弹窗层（不 portal 到 body），带遮罩。门控（opened）已由 isSelfVisible 判断。 */
+function Overlay({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const { dialogLayer, animate } = useCtx();
+    const drawer = node.type === 'ui:Drawer';
+    const position = str(p.position, 'left');
+    const full = p.fullScreen === true;
+    const horizontal = drawer && (position === 'left' || position === 'right');
+    const title = p.title !== undefined ? str(p.title) : '';
+    const panelStyle = drawer
+        ? horizontal
+            ? { height: '100%', width: sizeOf(p.size, 440), maxWidth: '90%' }
+            : { width: '100%', height: sizeOf(p.size, 320), maxHeight: '90%' }
+        : full
+            ? { width: '100%', height: '100%' }
+            : { width: sizeOf(p.size, 440), maxWidth: '92%', maxHeight: '90%', ...(p.centered ? {} : { marginTop: '6%' }) };
+    const root = useRoot(node, p, {
+        className: cn('jbox relative z-10 flex flex-col bg-[var(--jp-surface)] shadow-[var(--jp-shadow)] [.jstage[data-stroke=clean]_&]:shadow-xl', !drawer && !full && '[.jstage[data-stroke=clean]_&]:rounded-lg'),
+        style: { ...panelStyle, overflow: 'auto' },
+    });
+    if (!dialogLayer)
+        return null;
+    const align = drawer
+        ? { alignItems: position === 'bottom' ? 'flex-end' : 'flex-start', justifyContent: position === 'right' ? 'flex-end' : 'flex-start', flexDirection: horizontal ? 'row' : 'column' }
+        : { alignItems: p.centered || full ? 'center' : 'flex-start', justifyContent: 'center' };
+    const initial = drawer ? { opacity: 0, x: position === 'left' ? -40 : position === 'right' ? 40 : 0, y: position === 'top' ? -40 : position === 'bottom' ? 40 : 0 } : { opacity: 0, y: 12, scale: 0.98 };
+    return createPortal(_jsxs("div", { className: "absolute inset-0 z-20 flex", style: align, "data-joverlay-root": node.id, children: [p.withOverlay === false ? null : (_jsx(motion.div, { "data-jbackdrop": "", className: "absolute inset-0 bg-[rgba(30,30,30,0.38)]", initial: animate ? { opacity: 0 } : false, animate: { opacity: 1 }, transition: { duration: 0.18 } })), _jsxs(motion.div, { ...root, role: "dialog", "aria-modal": "true", "aria-label": title || i18n.stage.modal, initial: animate ? initial : false, animate: { opacity: 1, x: 0, y: 0, scale: 1 }, transition: { duration: 0.22 }, children: [_jsx(Rough, { seedKey: node.id, strokeWidth: 1.8 }), title || p.withCloseButton !== false ? (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px 8px' }, children: [_jsx("div", { style: { flex: 1, fontSize: 19, fontWeight: 700, lineHeight: 1.35 }, children: title }), p.withCloseButton === false ? null : (_jsx("span", { "aria-hidden": true, style: { color: DIMMED, fontSize: 20, lineHeight: 1 }, children: "\u00D7" }))] })) : null, _jsx("div", { style: { padding: '8px 20px 20px', display: 'flex', flexDirection: 'column', gap: 12 }, children: children })] })] }), dialogLayer);
+}
+// ============ 按钮 ============
+const BTN_H = { xs: 30, sm: 36, md: 40, lg: 48, xl: 56, 'compact-xs': 22, 'compact-sm': 26, 'compact-md': 30, 'compact-lg': 34, 'compact-xl': 40 };
+function buttonTone(variant, c) {
+    const base = c ?? INK;
+    switch (variant) {
+        case 'light':
+            return { stroke: light(base), fill: light(base), text: base };
+        case 'outline':
+            return { stroke: base, text: base };
+        case 'subtle':
+        case 'transparent':
+            return { stroke: 'transparent', text: base };
+        case 'white':
+            return { stroke: LINE, fill: SURFACE, text: base };
+        case 'default':
+            return { stroke: LINE_STRONG, fill: SURFACE, text: INK };
+        default:
+            return { stroke: base, fill: base, text: onFill(base) };
+    }
+}
+function Button({ node, p, disabled, children }) {
+    const mode = useStroke();
+    const variant = str(p.variant, 'filled');
+    const t = buttonTone(variant, color(p.color));
+    const h = BTN_H[str(p.size, 'md')] ?? 40;
+    const loading = p.loading === true;
+    const stroke = disabled ? SOFT : t.stroke;
+    const fill = disabled ? (t.fill && t.fill !== SURFACE ? LINE_STRONG : undefined) : t.fill;
+    const text = disabled ? (t.fill && t.fill !== SURFACE ? INK2 : DIMMED) : t.text;
+    const root = useRoot(node, p, {
+        disabled,
+        className: cn('jbox', mode === 'clean' && 'rounded-md', disabled && 'cursor-not-allowed'),
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 6,
+            height: h,
+            padding: `0 ${Math.round(h * 0.45)}px`,
+            fontSize: h <= 30 ? 13 : 15,
+            fontWeight: 600,
+            color: text,
+            maxWidth: '100%',
+            width: p.fullWidth ? '100%' : undefined,
+            flexShrink: 0,
+            ...(mode === 'clean' ? { ...boxStyle(stroke, fill), ...(disabled ? { borderStyle: 'dashed' } : {}) } : {}),
+        },
+    });
+    return (_jsxs("button", { ...root, type: "button", "data-dashed": disabled ? '' : undefined, children: [variant === 'subtle' || variant === 'transparent' ? null : _jsx(Rough, { seedKey: node.id, stroke: stroke, fill: fill, fillStyle: fill ? 'solid' : undefined, dashed: disabled, strokeWidth: 1.4 }), loading ? _jsx(Spinner, { size: 16, c: text }) : null, p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.leftSection) }) : null, _jsx("span", { className: "jtrunc", "data-jtext": "", children: children }), p.rightSection !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.rightSection) }) : null] }));
+}
+const ICON_SIZE = { xs: 18, sm: 22, md: 28, lg: 34, xl: 44 };
+function ActionIcon({ node, p, disabled, children }) {
+    const mode = useStroke();
+    const t = buttonTone(str(p.variant, 'filled'), color(p.color));
+    const size = typeof p.size === 'number' ? p.size : (ICON_SIZE[str(p.size, 'md')] ?? 28);
+    const round = p.radius === 'xl' || p.radius === 999;
+    const fill = disabled ? LINE_STRONG : t.fill;
+    const root = useRoot(node, p, {
+        disabled,
+        className: cn('jbox', disabled && 'cursor-not-allowed'),
+        style: { width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: disabled ? INK2 : t.text, fontSize: size * 0.5, fontWeight: 700, borderRadius: round ? 999 : (radius(p.radius) ?? 6), ...(mode === 'clean' ? boxStyle(disabled ? SOFT : t.stroke, fill) : {}) },
+    });
+    return (_jsxs("button", { ...root, type: "button", "aria-label": str(p['aria-label'], nodeLabel(node)), children: [_jsx(Rough, { seedKey: node.id, shape: round ? 'ellipse' : 'rect', stroke: disabled ? SOFT : t.stroke, fill: fill, fillStyle: fill ? 'solid' : undefined, strokeWidth: 1.3, inset: 1 }), _jsx("span", { "data-jtext": "", children: children })] }));
+}
+function CloseButton({ node, p, disabled }) {
+    const { t: i18n } = useI18n();
+    const root = useRoot(node, p, { disabled, style: { width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: DIMMED, fontSize: 20, lineHeight: 1, flexShrink: 0 } });
+    return (_jsx("button", { ...root, type: "button", "aria-label": str(p['aria-label'], i18n.stage.close), children: "\u00D7" }));
+}
+function NavLink({ node, p, disabled, children }) {
+    const { scene } = useCtx();
+    const active = p.active === true || (p.active === undefined && typeof p.href === 'string' && p.href === scene.route);
+    const c = color(p.color) ?? INK;
+    const opened = p.opened === true || p.defaultOpened === true;
+    const root = useRoot(node, p, { disabled, style: { display: 'flex', flexDirection: 'column' } });
+    return (_jsxs("div", { ...root, "aria-current": active ? 'page' : undefined, children: [_jsxs("a", { role: "link", tabIndex: 0, className: cn('jbox flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-[15px] [.jstage[data-stroke=clean]_&]:rounded-md', !active && 'hover:bg-black/[0.03]'), style: { background: active ? light(c === INK ? INK2 : c) : undefined, fontWeight: active ? 650 : 400, color: disabled ? DIMMED : active && c !== INK ? c : undefined }, "data-noborder": active ? undefined : '', "data-soft": "", "data-jcontrol": node.id, children: [active ? _jsx(Rough, { seedKey: node.id, stroke: SOFT, fill: LINE, fillStyle: "solid", strokeWidth: 1 }) : null, p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.leftSection) }) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "jtrunc", "data-jtext": "", children: str(p.label) || null }), p.description !== undefined ? _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: str(p.description) }) : null] }), p.rightSection !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.rightSection) }) : (node.children ?? []).length ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: opened ? '▾' : '▸' }) : null] }), opened && (node.children ?? []).length ? _jsx("div", { style: { paddingLeft: 16 }, children: children }) : null] }));
+}
+// ============ 输入 ============
+/** Mantine 输入组件的外壳：label（withAsterisk）/ description / 控件 / error。根节点包含全部，控件带 data-jcontrol。 */
+function Field({ node, p, disabled, control, inline = false }) {
+    const root = useRoot(node, p, { disabled, style: inline ? { display: 'flex', alignItems: 'flex-start', gap: 10 } : { display: 'flex', flexDirection: 'column', gap: 4, width: '100%' } });
+    const ctx = useCtx();
+    const toggle = node.traits?.native?.action === 'toggle';
+    if (ctx.interactive && toggle) {
+        const activate = () => { if (!disabled)
+            ctx.act?.(node.id, { type: 'click' }, { type: 'toggle', target: node.id, value: !Boolean(ctx.state.inputs[node.id] ?? p.checked ?? p.defaultChecked) }); };
+        Object.assign(root, { onClick: (e) => { e.stopPropagation(); activate(); }, onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+                activate();
+            } } });
+    }
+    const label = p.label !== undefined && p.label !== '' ? str(p.label) : '';
+    const desc = p.description !== undefined ? str(p.description) : '';
+    const error = typeof p.error === 'string' && p.error ? p.error : '';
+    const star = p.withAsterisk === true || p.required === true;
+    const head = label ? (_jsxs("span", { style: { fontSize: 14, fontWeight: 500, lineHeight: 1.4 }, children: [label, star ? _jsx("span", { style: { color: DANGER }, children: " *" }) : null] })) : null;
+    if (inline)
+        return (_jsxs("div", { ...root, children: [control, label || desc ? (_jsxs("span", { style: { display: 'flex', flexDirection: 'column' }, children: [head, desc ? _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: desc }) : null] })) : null] }));
+    return (_jsxs("div", { ...root, children: [head, desc ? _jsx("span", { style: { fontSize: 12, color: DIMMED, marginTop: -2 }, children: desc }) : null, control, error ? _jsx("span", { style: { fontSize: 12, color: DANGER }, children: error }) : null] }));
+}
+/** 输入框外观：手绘描边 / 线框边框；error 时描红。 */
+function InputBox({ node, p, disabled, children, minH = 40, open }) {
+    const err = typeof p.error === 'string' && p.error !== '';
+    return (_jsxs("div", { className: "jbox flex w-full items-center gap-2 px-3 [.jstage[data-stroke=clean]_&]:rounded-md", style: { minHeight: minH, background: disabled ? SUBTLE : SURFACE, ...(err ? { borderColor: DANGER } : {}) }, "data-jcontrol": node.id, role: open !== undefined ? 'combobox' : undefined, "aria-label": open !== undefined ? nodeLabel(node) : undefined, "aria-expanded": open, tabIndex: 0, children: [_jsx(Rough, { seedKey: node.id, stroke: err ? DANGER : disabled ? SOFT : INK }), p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: str(p.leftSection) }) : null, children, p.rightSection !== undefined ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: str(p.rightSection) }) : null] }));
+}
+const FIELD_CLASS = 'min-w-0 flex-1 cursor-[inherit] resize-none border-none bg-transparent p-0 text-[15px] text-inherit outline-none placeholder:text-[var(--jp-faint)]';
+/** 只读的原生输入框：值来自状态，用户不能直接编辑（输入由步骤驱动）。 */
+function NativeInput({ node, disabled, label, value, placeholder, mask = false }) {
+    const ctx = useCtx();
+    return _jsx("input", { readOnly: !ctx.interactive || disabled, tabIndex: ctx.interactive && !disabled ? 0 : -1, onChange: e => ctx.act?.(node.id, { type: 'type', value: e.currentTarget.value }), onClick: ctx.interactive ? e => e.stopPropagation() : undefined, "aria-label": label, type: mask ? 'password' : 'text', value: str(value), placeholder: str(placeholder), className: cn(FIELD_CLASS, 'h-9'), style: { font: 'inherit', fontSize: 15 } });
+}
+function TextInput({ node, p, disabled }) {
+    const v = useInputValue(node, p);
+    const mask = node.type === 'ui:PasswordInput' || p.type === 'password';
+    const prefix = p.prefix !== undefined ? str(p.prefix) : '';
+    const suffix = p.suffix !== undefined ? str(p.suffix) : '';
+    const has = v !== undefined && v !== null && v !== '';
+    const value = has && (prefix || suffix) ? `${prefix}${str(v)}${suffix}` : v;
+    return (_jsx(Field, { node: node, p: p, disabled: disabled, control: _jsxs(InputBox, { node: node, p: p, disabled: disabled, children: [_jsx(NativeInput, { node: node, disabled: disabled, label: nodeLabel(node), value: value, placeholder: p.placeholder, mask: mask }), node.type === 'ui:PasswordInput' ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED, fontSize: 13 }, children: "\uD83D\uDC41" }) : null, node.type === 'ui:NumberInput' ? _jsxs("span", { "aria-hidden": true, style: { color: DIMMED, fontSize: 10, lineHeight: 1 }, children: ["\u25B4", _jsx("br", {}), "\u25BE"] }) : null, node.type === 'ui:FileInput' && !has ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED, fontSize: 13 }, children: "\uD83D\uDCCE" }) : null] }) }));
+}
+function Textarea({ node, p, disabled }) {
+    const ctx = useCtx();
+    const v = useInputValue(node, p);
+    const rows = typeof p.minRows === 'number' ? p.minRows : typeof p.rows === 'number' ? p.rows : 3;
+    return (_jsx(Field, { node: node, p: p, disabled: disabled, control: _jsx(InputBox, { node: node, p: p, disabled: disabled, minH: rows * 22 + 16, children: _jsx("textarea", { readOnly: !ctx.interactive || disabled, tabIndex: ctx.interactive && !disabled ? 0 : -1, onChange: e => ctx.act?.(node.id, { type: 'type', value: e.currentTarget.value }), onClick: ctx.interactive ? e => e.stopPropagation() : undefined, "aria-label": nodeLabel(node), value: str(v), placeholder: str(p.placeholder), rows: rows, className: cn(FIELD_CLASS, 'self-stretch py-2'), style: { font: 'inherit', fontSize: 15, lineHeight: '22px' } }) }) }));
+}
+/** Select / MultiSelect：选项来自 data；显示 inputs[id]；选择动画期间展开下拉。 */
+function Select({ node, p, disabled }) {
+    const { t: i18n } = useI18n();
+    const ctx = useCtx();
+    const { state, preview } = ctx;
+    const [localOpen, setLocalOpen] = useState(false);
+    useLayoutEffect(() => setLocalOpen(false), [ctx.resetKey]);
+    const v = useInputValue(node, p);
+    const choices = choicesOf(node, state) ?? [];
+    const multi = node.type === 'ui:MultiSelect';
+    const values = multi ? (Array.isArray(v) ? v.map(String) : []) : v !== undefined && v !== null && v !== '' ? [str(v)] : [];
+    const labelOf = (x) => choices.find((c) => c.value === x)?.label ?? x;
+    const pv = preview && preview.nodeId === node.id ? preview.text : null;
+    const open = pv !== null || !!ctx.interactive && localOpen;
+    const previewChoice = pv !== null ? (choices.find((c) => c.value === pv || c.label === pv)?.value ?? null) : null;
+    return (_jsx(Field, { node: node, p: p, disabled: disabled, control: _jsxs("div", { className: "relative w-full", onClick: ctx.interactive ? e => { e.stopPropagation(); if (!disabled) {
+                setLocalOpen(v => !v);
+                ctx.act?.(node.id, { type: 'click' });
+            } } : undefined, onKeyDown: ctx.interactive ? e => {
+                if (disabled)
+                    return;
+                if (e.key === 'Escape') {
+                    e.stopPropagation();
+                    setLocalOpen(false);
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLocalOpen(v => !v);
+                }
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLocalOpen(true);
+                    const index = choices.findIndex(c => c.value === values[0]);
+                    const next = choices[(index + (e.key === 'ArrowDown' ? 1 : choices.length - 1) + choices.length) % choices.length];
+                    if (next)
+                        ctx.act?.(node.id, { type: 'select', value: next.value });
+                }
+            } : undefined, children: [_jsxs(InputBox, { node: node, p: p, disabled: disabled, open: open, children: [multi && values.length ? (_jsx("span", { className: "flex min-w-0 flex-1 flex-wrap gap-1 py-1.5", children: values.map((x) => (_jsxs("span", { style: { background: SUBTLE, borderRadius: 4, padding: '0 6px', fontSize: 13 }, children: [labelOf(x), " \u00D7"] }, x))) })) : (_jsx("span", { className: cn('jtrunc min-w-0 flex-1', values.length ? '' : 'text-[var(--jp-faint)]'), "data-jtext": "", children: values.length ? labelOf(values[0]) : str(p.placeholder, i18n.stage.selectAnOption) })), _jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: "\u25BE" })] }), open && choices.length ? (_jsxs("div", { className: "jbox absolute inset-x-0 top-[calc(100%+4px)] z-30 flex flex-col bg-[var(--jp-surface)] py-1 shadow-[var(--jp-shadow)] [.jstage[data-stroke=clean]_&]:rounded-md", role: "listbox", "data-jdropdown": "", children: [_jsx(Rough, { seedKey: `${node.id}:list`, stroke: INK2, strokeWidth: 1.1 }), choices.map((c) => {
+                            const on = c.value === previewChoice || values.includes(c.value);
+                            return (_jsxs("div", { role: "option", tabIndex: ctx.interactive ? 0 : undefined, onClick: ctx.interactive ? e => { e.stopPropagation(); ctx.act?.(node.id, { type: 'select', value: c.value }); if (!multi)
+                                    setLocalOpen(false); } : undefined, onKeyDown: ctx.interactive ? e => { if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    ctx.act?.(node.id, { type: 'select', value: c.value });
+                                    if (!multi)
+                                        setLocalOpen(false);
+                                } } : undefined, "aria-selected": on, className: cn('px-3 py-1.5 text-[15px]', on && 'bg-[var(--jp-subtle)] font-semibold'), children: [multi && values.includes(c.value) ? '✓ ' : '', c.label] }, c.value));
+                        })] })) : null] }) }));
+}
+function SegmentedControl({ node, p, disabled }) {
+    const ctx = useCtx();
+    const { state, preview } = ctx;
+    const v = useInputValue(node, p);
+    const choices = choicesOf(node, state) ?? [];
+    const pv = preview && preview.nodeId === node.id ? preview.text : null;
+    const cur = pv !== null ? (choices.find((c) => c.value === pv || c.label === pv)?.value ?? null) : v !== undefined && v !== null && v !== '' ? str(v) : (choices[0]?.value ?? null);
+    const root = useRoot(node, p, {
+        disabled,
+        className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md',
+        style: { display: p.fullWidth ? 'flex' : 'inline-flex', width: p.fullWidth ? '100%' : 'fit-content', padding: 4, gap: 2, background: SUBTLE },
+    });
+    return (_jsxs("div", { ...root, role: "radiogroup", "data-soft": "", "data-jcontrol": node.id, children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT, strokeWidth: 1 }), choices.map((c) => {
+                const on = c.value === cur;
+                return (_jsxs("span", { role: "radio", tabIndex: ctx.interactive && !disabled ? 0 : undefined, onClick: ctx.interactive ? e => { e.stopPropagation(); if (!disabled)
+                        ctx.act?.(node.id, { type: 'click' }, { type: 'select', target: node.id, value: c.value }); } : undefined, onKeyDown: ctx.interactive ? e => { if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!disabled)
+                            ctx.act?.(node.id, { type: 'select', value: c.value });
+                    } } : undefined, "aria-checked": on, className: cn('relative px-3 py-1 text-[14px] [.jstage[data-stroke=clean]_&]:rounded', on ? 'bg-[var(--jp-surface)] font-semibold shadow-sm' : 'text-[var(--jp-muted)]'), style: { flex: p.fullWidth ? 1 : undefined, textAlign: 'center' }, children: [on ? _jsx(Rough, { seedKey: `${node.id}:${c.value}`, stroke: INK, strokeWidth: 1.1 }) : null, _jsx("span", { className: "relative", children: c.label })] }, c.value));
+            })] }));
+}
+function Checkbox({ node, p, disabled }) {
+    const checked = useInputValue(node, p) === true;
+    return (_jsx(Field, { node: node, p: p, disabled: disabled, inline: true, control: _jsxs("span", { className: "jbox inline-flex shrink-0 items-center justify-center rounded-[3px]", style: { width: 20, height: 20, marginTop: 1, background: checked ? INK : SURFACE, color: BG, fontSize: 13, lineHeight: 1 }, "data-jcontrol": node.id, role: "checkbox", "aria-label": nodeLabel(node), "aria-checked": checked, tabIndex: 0, children: [_jsx(Rough, { seedKey: node.id, inset: 1, stroke: disabled ? SOFT : INK, fill: checked ? INK : undefined, fillStyle: "solid" }), checked ? _jsx("span", { children: "\u2713" }) : null] }) }));
+}
+function Switch({ node, p, disabled }) {
+    const on = useInputValue(node, p) === true;
+    const ctx = useCtx();
+    const scripted = useRef({ value: on, changedLocally: false });
+    const changedLocally = !!ctx.playground && on !== scripted.current.value;
+    const instant = changedLocally || scripted.current.changedLocally;
+    if (!ctx.playground)
+        scripted.current = { value: on, changedLocally: false };
+    else if (changedLocally)
+        scripted.current.changedLocally = true;
+    const c = color(p.color) ?? INK;
+    return (_jsx(Field, { node: node, p: p, disabled: disabled, inline: true, control: _jsx("span", { className: "relative inline-flex shrink-0 items-center rounded-full", style: { width: 38, height: 22, background: on ? c : LINE, transition: instant ? 'none' : 'background .2s', marginTop: 1 }, "data-jcontrol": node.id, role: "switch", "aria-label": nodeLabel(node), "aria-checked": on, tabIndex: 0, children: _jsx("span", { style: { position: 'absolute', left: on ? 18 : 2, width: 18, height: 18, borderRadius: 9, background: SURFACE, boxShadow: '0 1px 2px rgba(0,0,0,.25)', transition: instant ? 'none' : 'left .2s' } }) }) }));
+}
+function RadioGroup({ node, p, disabled, children }) {
+    const v = useInputValue(node, p);
+    const label = p.label !== undefined ? str(p.label) : '';
+    const root = useRoot(node, p, { disabled, style: { display: 'flex', flexDirection: 'column', gap: 8 } });
+    return (_jsx(ValueContext.Provider, { value: { owner: node.id, value: v === undefined || v === null ? null : str(v), disabled }, children: _jsxs("div", { ...root, role: "radiogroup", children: [label ? _jsx("span", { style: { fontSize: 14, fontWeight: 500 }, children: label }) : null, p.description !== undefined ? _jsx("span", { style: { fontSize: 12, color: DIMMED, marginTop: -4 }, children: str(p.description) }) : null, _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, "data-jcontrol": node.id, children: children })] }) }));
+}
+function Radio({ node, p, disabled }) {
+    const host = useCtx();
+    const ctx = useContext(ValueContext);
+    const standalone = useInputValue(node, p) === true;
+    const on = ctx ? ctx.value !== null && ctx.value === str(p.value) : standalone;
+    const root = useRoot(node, p, { style: { display: 'inline-flex', alignItems: 'center', gap: 8 } });
+    return (_jsxs("span", { ...root, role: "radio", tabIndex: host.interactive ? 0 : undefined, onClick: host.interactive ? e => { e.stopPropagation(); if (!disabled && !ctx?.disabled)
+            host.act?.(node.id, { type: 'click' }, ctx ? { type: 'select', target: ctx.owner, value: str(p.value) } : { type: 'toggle', target: node.id, value: !on }); } : undefined, onKeyDown: host.interactive ? e => { if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            e.currentTarget.click();
+        } } : undefined, "aria-checked": on, children: [_jsxs("span", { className: "jbox inline-flex shrink-0 items-center justify-center rounded-full", style: { width: 20, height: 20 }, children: [_jsx(Rough, { seedKey: node.id, shape: "ellipse", inset: 1 }), on ? _jsx("span", { style: { width: 9, height: 9, borderRadius: 5, background: INK } }) : null] }), p.label !== undefined ? _jsx("span", { style: { fontSize: 14 }, children: str(p.label) }) : null] }));
+}
+// ============ Tabs / Breadcrumbs / Pagination / Stepper ============
+function Tabs({ node, p, disabled, children }) {
+    const { state } = useCtx();
+    const v = useInputValue(node, p);
+    const first = choicesOf(node, state)?.[0]?.value ?? null;
+    const value = v !== undefined && v !== null && v !== '' ? str(v) : first;
+    const root = useRoot(node, p, { disabled, style: { display: 'flex', flexDirection: 'column', gap: 12 } });
+    return (_jsx(ValueContext.Provider, { value: { owner: node.id, value, disabled }, children: _jsx("div", { ...root, children: children }) }));
+}
+function TabsList({ node, p, children }) {
+    const root = useRoot(node, p, { className: p.grow ? 'jgrow' : undefined, style: { display: 'flex', gap: 2, borderBottom: `2px solid ${LINE}`, justifyContent: p.grow ? 'stretch' : flexVal(p.justify, 'flex-start') } });
+    return (_jsx("div", { ...root, role: "tablist", children: children }));
+}
+function TabsTab({ node, p, disabled, children }) {
+    const host = useCtx();
+    const ctx = useContext(ValueContext);
+    const dis = disabled || !!ctx?.disabled;
+    const active = ctx?.value !== null && ctx?.value === str(p.value);
+    const root = useRoot(node, p, { disabled: dis, style: { position: 'relative', padding: '8px 14px', marginBottom: -2, fontSize: 14, borderBottom: `2px solid ${active ? INK : 'transparent'}`, fontWeight: active ? 650 : 400, color: dis ? SOFT : active ? INK : DIMMED, display: 'inline-flex', gap: 6, alignItems: 'center' } });
+    return (_jsxs("button", { ...root, type: "button", role: "tab", "aria-selected": active, onClick: host.interactive ? e => { e.stopPropagation(); if (!dis && ctx)
+            host.act?.(node.id, { type: 'click' }, { type: 'select', target: ctx.owner, value: str(p.value) }); } : undefined, children: [p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.leftSection) }) : null, _jsx("span", { className: "jtrunc", "data-jtext": "", children: children }), p.rightSection !== undefined && p.rightSection !== null && p.rightSection !== '' ? (_jsx("span", { style: { minWidth: 18, height: 18, padding: '0 6px', borderRadius: 999, background: active ? INK : SUBTLE, color: active ? BG : DIMMED, fontSize: 11, lineHeight: '18px', textAlign: 'center', fontWeight: 600 }, children: str(p.rightSection) })) : null] }));
+}
+function TabsPanel({ node, p, children }) {
+    const ctx = useContext(ValueContext);
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column', gap: 12 } });
+    if (ctx && ctx.value !== str(p.value))
+        return null;
+    return (_jsx("div", { ...root, role: "tabpanel", children: children }));
+}
+function Breadcrumbs({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const sep = p.separator !== undefined ? str(p.separator) : '/';
+    const items = (Array.isArray(children) ? children : [children]).filter(Boolean);
+    const root = useRoot(node, p, { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, fontSize: 14 } });
+    return (_jsx("nav", { ...root, "aria-label": i18n.stage.breadcrumbs, children: items.map((c, i) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 8 }, children: [i > 0 ? (_jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: sep })) : null, c] }, i))) }));
+}
+function Pagination({ node, p, disabled }) {
+    const total = Math.max(1, Number(p.total ?? 1) || 1);
+    const v = Number(useInputValue(node, p) ?? 1) || 1;
+    const pages = [];
+    for (let i = 1; i <= total; i++)
+        if (i === 1 || i === total || Math.abs(i - v) <= 1)
+            pages.push(i);
+        else if (pages[pages.length - 1] !== '…')
+            pages.push('…');
+    const cell = (label, on = false, key) => (_jsxs("span", { className: "jbox inline-flex items-center justify-center [.jstage[data-stroke=clean]_&]:rounded", style: { minWidth: 32, height: 32, padding: '0 6px', fontSize: 14, background: on ? INK : SURFACE, color: on ? BG : INK }, "data-soft": on ? undefined : '', children: [_jsx(Rough, { seedKey: `${node.id}:${key ?? label}`, stroke: on ? INK : SOFT, fill: on ? INK : undefined, fillStyle: "solid", strokeWidth: 1 }), _jsx("span", { children: label })] }, key ?? label));
+    const root = useRoot(node, p, { disabled, style: { display: 'inline-flex', gap: 6, alignItems: 'center' } });
+    return (_jsxs("div", { ...root, role: "navigation", "data-jcontrol": node.id, children: [cell('‹', false, 'prev'), pages.map((x, i) => (x === '…' ? _jsx("span", { children: "\u2026" }, `e${i}`) : cell(String(x), x === v, x))), cell('›', false, 'next')] }));
+}
+function Stepper({ node, p, children }) {
+    const { state } = useCtx();
+    const active = Number(resolveValue(p.active, state) ?? 0);
+    const ids = (node.children ?? []).filter((c) => c.type === 'ui:Stepper.Step').map((c) => c.id);
+    const [content, setContent] = useState(null);
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column', gap: 16 } });
+    return (_jsx(ItemProgressContext.Provider, { value: { ids, active: Number.isFinite(active) ? active : 0, content }, children: _jsxs("div", { ...root, children: [_jsx("div", { style: { display: 'flex', alignItems: 'flex-start', gap: 8 }, children: children }), _jsx("div", { ref: setContent })] }) }));
+}
+function StepperStep({ node, p, children }) {
+    const seq = useContext(ItemProgressContext);
+    const i = seq ? seq.ids.indexOf(node.id) : 0;
+    const done = !!seq && i < seq.active;
+    const cur = !!seq && i === seq.active;
+    const last = !!seq && i === seq.ids.length - 1;
+    const root = useRoot(node, p, { style: { display: 'flex', alignItems: 'flex-start', gap: 8, flex: last ? '0 0 auto' : '1 1 0', minWidth: 0 } });
+    return (_jsxs("div", { ...root, "data-active": cur ? '' : undefined, children: [_jsxs("span", { "aria-hidden": true, className: "jbox inline-flex shrink-0 items-center justify-center rounded-full", style: { width: 30, height: 30, background: done ? INK : SURFACE, color: done ? BG : INK, fontSize: 13, fontWeight: 700, borderColor: cur || done ? INK : LINE_STRONG }, children: [_jsx(Rough, { seedKey: node.id, shape: "ellipse", stroke: cur || done ? INK : SOFT, fill: done ? INK : undefined, fillStyle: "solid", inset: 1 }), _jsx("span", { children: done ? '✓' : i + 1 })] }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', minWidth: 0 }, children: [p.label !== undefined ? _jsx("span", { style: { fontWeight: cur ? 700 : 500, fontSize: 14 }, children: str(p.label) }) : null, p.description !== undefined ? _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: str(p.description) }) : null] }), last ? null : _jsx("span", { "aria-hidden": true, style: { flex: 1, height: 2, background: done ? INK : LINE, marginTop: 14, minWidth: 12 } }), cur && seq?.content ? createPortal(_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: children }), seq.content) : null] }));
+}
+// ============ AI 交互 ============
+function ChatMessage({ node, p, children }) {
+    const user = p.from === 'user';
+    const root = useRoot(node, p, { style: { display: 'flex', width: '100%', justifyContent: user ? 'flex-end' : 'flex-start' } });
+    return (_jsx("div", { ...root, "data-from": user ? 'user' : 'assistant', children: _jsxs("div", { className: cn('flex max-w-[82%] flex-col gap-2', user && 'jbox px-4 py-2.5 [.jstage[data-stroke=clean]_&]:rounded-lg'), style: { whiteSpace: 'pre-wrap', lineHeight: 1.6, ...(user ? { background: SUBTLE } : { width: '100%' }) }, "data-soft": "", children: [user ? _jsx(Rough, { seedKey: node.id, stroke: SOFT, fill: SUBTLE, fillStyle: "solid" }) : null, p.name !== undefined ? _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: str(p.name) }) : null, children] }) }));
+}
+const TOOL_STATE = (i18n) => ({
+    running: { text: i18n.stage.running, c: INFO },
+    done: { text: i18n.stage.done, c: OK },
+    error: { text: i18n.stage.error, c: DANGER },
+    'input-streaming': { text: i18n.stage.preparing, c: DIMMED },
+    'input-available': { text: i18n.stage.running, c: INFO },
+    'output-available': { text: i18n.stage.done, c: OK },
+    'output-error': { text: i18n.stage.error, c: DANGER },
+});
+function ToolCall({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const s = TOOL_STATE(i18n)[str(p.state, 'done')] ?? TOOL_STATE(i18n).done;
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { display: 'flex', flexDirection: 'column', gap: 4, width: '100%', background: SUBTLE, padding: '8px 12px', fontFamily: MONO, fontSize: 13 } });
+    return (_jsxs("div", { ...root, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: 8 }, children: [_jsxs("span", { className: "jtrunc", children: ["\u2699 ", str(p.title, i18n.stage.toolCall)] }), _jsx("span", { style: { color: s.c, flexShrink: 0 }, children: s.text })] }), _jsx("div", { style: { whiteSpace: 'pre-wrap', color: INK2 }, children: children })] }));
+}
+/**
+ * 思考过程（D56）：标题是此刻在想什么；active 时标题闪动、前面转圈；结束后显示“思考了 {duration}”。
+ * opened 时展开子节点（过程），左侧一条细线。
+ */
+function Thinking({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const active = p.active === true;
+    const opened = p.opened === true;
+    const title = str(p.title);
+    const duration = str(p.duration);
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column', gap: 8, width: '100%', fontSize: 14, color: DIMMED } });
+    return (_jsxs("div", { ...root, "data-active": active ? '' : undefined, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }, children: [active ? _jsx(Spinner, { size: 14, c: DIMMED }) : _jsx("span", { "aria-hidden": true, style: { width: 14, textAlign: 'center', flexShrink: 0 }, children: "\u2726" }), _jsx("span", { className: cn('jtrunc', active && 'jshimmer'), style: { color: active ? undefined : INK2, fontWeight: 500 }, children: title || (active ? i18n.stage.thinkingActive : i18n.stage.thinking) }), !active && duration ? _jsx("span", { style: { flexShrink: 0, color: DIMMED }, children: i18n.stage.thoughtFor(duration) }) : null, children ? _jsx("span", { "aria-hidden": true, style: { flexShrink: 0, fontSize: 11 }, children: opened ? '▲' : '▼' }) : null] }), opened && children ? (_jsx("div", { style: { marginLeft: 6, paddingLeft: 14, borderLeft: `2px solid ${LINE}`, display: 'flex', flexDirection: 'column', gap: 6, whiteSpace: 'pre-wrap', lineHeight: 1.6 }, children: children })) : null] }));
+}
+/** 简单外部邮件：自身不可操作，正文里的按钮仍走普通步骤。 */
+function Email({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const root = useRoot(node, p, { className: 'jbox', style: { background: SURFACE, padding: 16, display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 } });
+    const from = str(p.from, i18n.stage.sender);
+    return _jsxs("article", { ...root, children: [_jsx(Rough, { seedKey: node.id }), _jsxs("div", { style: { display: 'flex', gap: 10, alignItems: 'flex-start' }, children: [_jsx("span", { "aria-hidden": true, style: { width: 34, height: 34, flexShrink: 0, display: 'grid', placeItems: 'center', borderRadius: '50%', background: SUBTLE, color: INK, fontWeight: 600 }, children: [...from.trim()][0] ?? '?' }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 600 }, children: from }), _jsx("div", { style: { color: DIMMED, fontSize: 12 }, children: i18n.stage.recipient(str(p.to, i18n.stage.unspecified)) })] }), p.time ? _jsx("time", { style: { color: DIMMED, fontSize: 12 }, children: str(p.time) }) : null] }), _jsx("strong", { style: { fontSize: 18 }, children: str(p.subject, i18n.stage.noSubject) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, lineHeight: 1.6, whiteSpace: 'pre-wrap' }, children: children })] });
+}
+function DataCard({ node, p }) {
+    const { t: i18n } = useI18n();
+    const { changed = [] } = useCtx();
+    const rows = dataRows(p.value, p.fields, node.props?.value, changed);
+    const root = useRoot(node, p, { className: 'jbox', style: { background: SURFACE, padding: 20, minWidth: 0, width: '100%' } });
+    return _jsxs("section", { ...root, children: [_jsx(Rough, { seedKey: node.id }), _jsx("div", { style: { fontWeight: 600, fontSize: 20, marginBottom: 14 }, children: str(p.title, i18n.stage.dataRecords) }), rows.length ? _jsx("dl", { style: { margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }, children: rows.map((row, i) => _jsxs("div", { "data-changed": row.change ? '' : undefined, style: { display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 12, padding: '10px 12px', background: row.change ? 'color-mix(in srgb, var(--jp-accent) 15%, var(--jp-surface))' : undefined, borderLeft: row.change ? `3px solid ${ACCENT}` : '3px solid transparent' }, children: [_jsx("dt", { style: { color: DIMMED, minWidth: 80 }, children: row.label }), _jsxs("dd", { style: { margin: 0, overflowWrap: 'anywhere', flex: 1 }, children: [displayData(row.value), row.change ? _jsxs("div", { style: { color: INK2, fontSize: 13, marginTop: 4 }, children: [_jsx("span", { children: displayData(row.change.before) }), " \u2192 ", _jsx("span", { children: displayData(row.change.after) })] }) : null] })] }, `${row.key}:${i}`)) }) : _jsx("div", { style: { color: DIMMED }, children: i18n.stage.noData })] });
+}
+function StateFlow({ node, p }) {
+    const { t: i18n } = useI18n();
+    const { changed = [] } = useCtx();
+    const items = stateFlowItems(p.value, p.states, p.labels);
+    const change = changeFor(node.props?.value, changed);
+    const label = (v) => items.find(item => item.value === v)?.label ?? displayData(v);
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column', gap: 10 } });
+    return _jsxs("div", { ...root, children: [_jsx("ol", { style: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 10 }, children: items.map((item, i) => _jsxs("li", { "aria-current": item.state === 'current' ? 'step' : undefined, style: { display: 'flex', gap: 10, alignItems: 'center' }, children: [i ? _jsx("span", { "aria-hidden": true, style: { color: DIMMED }, children: "\u2192" }) : null, _jsxs("span", { className: "jbox", style: { display: 'inline-flex', gap: 6, alignItems: 'center', padding: '8px 14px', color: item.state === 'todo' ? DIMMED : INK, background: item.state === 'current' ? 'color-mix(in srgb, var(--jp-accent) 20%, var(--jp-surface))' : SURFACE, fontWeight: item.state === 'current' ? 600 : 400 }, children: [_jsx(Rough, { seedKey: `${node.id}:${i}`, stroke: item.state === 'current' ? ACCENT : item.state === 'done' ? OK : LINE }), item.state === 'done' ? _jsx("span", { "aria-label": i18n.stage.done, style: { color: OK }, children: "\u2713" }) : null, item.label] })] }, `${item.value}:${i}`)) }), change ? _jsx("div", { "data-state-change": "", style: { color: INK2, fontSize: 14 }, children: i18n.stage.stateChange(label(change.before), label(change.after)) }) : null, !items.length ? _jsx("span", { style: { color: DIMMED }, children: i18n.stage.noStates }) : null] });
+}
+const ARTIFACT_ICON = { doc: '▤', code: '</>', sheet: '▦', web: '◎', image: '▣' };
+const ARTIFACT_KIND = (i18n) => ({ doc: i18n.stage.document, code: i18n.stage.code, sheet: i18n.stage.sheet, web: i18n.stage.webPage, image: i18n.stage.image });
+function ArtifactStatus({ status }) {
+    const { t: i18n } = useI18n();
+    if (status === 'generating')
+        return (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6, color: INFO, flexShrink: 0, fontSize: 13 }, children: [_jsx(Spinner, { size: 13, c: INFO }), i18n.stage.generating] }));
+    if (status === 'error')
+        return _jsx("span", { style: { color: DANGER, flexShrink: 0, fontSize: 13 }, children: i18n.stage.generationFailed });
+    return _jsx("span", { style: { color: OK, flexShrink: 0, fontSize: 13 }, children: i18n.stage.generated });
+}
+/** Agent 的侧边产物（D56）：标题栏（类型图标、标题、版本、状态）+ 内容区；默认占满所在容器的高度。 */
+function Artifact({ node, p, children }) {
+    const { t: i18n } = useI18n();
+    const mode = useStroke();
+    const kind = str(p.kind, 'doc');
+    const root = useRoot(node, p, { className: cn('jbox', mode === 'clean' && 'rounded-xl'), style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', minHeight: 0, background: SURFACE, overflow: 'hidden' } });
+    return (_jsxs("div", { ...root, "data-kind": kind, children: [_jsx(Rough, { seedKey: node.id }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderBottom: `1px solid ${LINE}`, minWidth: 0 }, children: [_jsx("span", { "aria-hidden": true, style: { fontFamily: MONO, fontSize: 13, color: INK2, flexShrink: 0 }, children: ARTIFACT_ICON[kind] ?? ARTIFACT_ICON.doc }), _jsx("span", { className: "jtrunc", style: { fontWeight: 600, color: INK }, children: str(p.title, i18n.stage.artifact) }), p.version !== undefined ? _jsx("span", { style: { flexShrink: 0, fontSize: 12, color: DIMMED, border: `1px solid ${LINE_STRONG}`, borderRadius: 999, padding: '0 7px', lineHeight: '18px' }, children: str(p.version) }) : null, _jsx("span", { style: { flex: 1 } }), _jsx(ArtifactStatus, { status: str(p.status, 'ready') })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 10, whiteSpace: 'pre-wrap', lineHeight: 1.6 }, children: children })] }));
+}
+/** 对话里指向产物的卡片（可点击打开）。 */
+function ArtifactRef({ node, p, disabled }) {
+    const { t: i18n } = useI18n();
+    const mode = useStroke();
+    const kind = str(p.kind, 'doc');
+    const root = useRoot(node, p, { disabled, className: cn('jbox', mode === 'clean' && 'rounded-lg'), style: { display: 'flex', alignItems: 'center', gap: 12, width: '100%', maxWidth: 360, padding: '10px 14px', background: SURFACE, textAlign: 'left' } });
+    return (_jsxs("button", { ...root, type: "button", "data-jcontrol": node.id, children: [_jsx(Rough, { seedKey: node.id }), _jsx("span", { "aria-hidden": true, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, flexShrink: 0, borderRadius: 8, background: SUBTLE, fontFamily: MONO, fontSize: 13, color: INK2 }, children: ARTIFACT_ICON[kind] ?? ARTIFACT_ICON.doc }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }, children: [_jsx("span", { className: "jtrunc", style: { fontWeight: 600, color: INK }, children: str(p.title, i18n.stage.artifact) }), _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: i18n.stage.artifactSummary(ARTIFACT_KIND(i18n)[kind] ?? i18n.stage.document, p.status === 'generating') })] })] }));
+}
+function PromptInput({ node, p, disabled }) {
+    const { t: i18n } = useI18n();
+    const ctx = useCtx();
+    const v = useInputValue(node, p);
+    const has = v !== undefined && v !== null && v !== '';
+    const root = useRoot(node, p, { disabled, className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-xl', style: { flex: 1, minWidth: 0, width: '100%', minHeight: 44, padding: '10px 14px', whiteSpace: 'pre-wrap', color: has ? INK : SOFT, background: SURFACE } });
+    return (_jsxs("div", { ...root, "data-jcontrol": node.id, children: [_jsx(Rough, { seedKey: node.id }), _jsx("textarea", { readOnly: !ctx.interactive || disabled, tabIndex: ctx.interactive && !disabled ? 0 : -1, onChange: e => ctx.act?.(node.id, { type: 'type', value: e.currentTarget.value }), onClick: ctx.interactive ? e => e.stopPropagation() : undefined, "aria-label": nodeLabel(node), value: str(v), placeholder: str(p.placeholder, i18n.stage.typeAMessage), rows: 1, className: FIELD_CLASS, style: { display: 'block', width: '100%', font: 'inherit', color: INK, lineHeight: '24px', maxHeight: 144, overflowY: 'auto' } })] }));
+}
+// ============ 设备外框：终端与手机 ============
+const TERM_TONE = { plain: INK, ok: OK, warn: WARN, error: DANGER };
+const TERM_MONO = '[.jstage[data-stroke=clean]_&]:font-mono';
+/**
+ * 终端（低保真线框，与其他组件同一风格）：圆角窗口，左上角是 title；里面每条命令、每段输出各是一个带边框的圆角块。
+ * 内容超出 h / mah 时在窗口内部滚动。tone 只改输出文字的颜色。
+ */
+function Terminal({ node, p, children }) {
+    // 像真实终端一样停在最新的输出（输入行可见）
+    const body = useRef(null);
+    useLayoutEffect(() => {
+        const el = body.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    });
+    const root = useRoot(node, p, {
+        className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-[18px]',
+        style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', minHeight: 0, background: SURFACE, padding: '12px 16px 16px' },
+    });
+    return (_jsxs("div", { ...root, children: [_jsx(Rough, { seedKey: node.id, shape: "roundrect", radius: 18, strokeWidth: 1.5 }), _jsx("div", { className: "jtrunc", style: { flexShrink: 0, fontSize: 15 }, children: str(p.title, 'Terminal') }), _jsx("div", { ref: body, style: { flex: 1, minHeight: 0, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 12, padding: 2 }, "data-jterm-body": "", children: children })] }));
+}
+function TerminalCommand({ node, p, children }) {
+    const root = useRoot(node, p, {
+        className: cn('jbox [.jstage[data-stroke=clean]_&]:rounded-[10px]', TERM_MONO),
+        style: { display: 'flex', gap: 8, padding: '10px 16px', whiteSpace: 'pre-wrap', wordBreak: 'break-word', background: SURFACE, flexShrink: 0 },
+    });
+    return (_jsxs("div", { ...root, children: [_jsx(Rough, { seedKey: node.id, shape: "roundrect", radius: 10 }), _jsx("span", { "aria-hidden": true, style: { flexShrink: 0 }, children: str(p.prompt, '$') }), _jsx("span", { style: { minWidth: 0 }, children: children })] }));
+}
+function TerminalOutput({ node, p, children }) {
+    const tone = str(p.tone, 'plain');
+    const root = useRoot(node, p, {
+        className: cn('jbox [.jstage[data-stroke=clean]_&]:rounded-[14px]', TERM_MONO),
+        style: { padding: '10px 16px', minHeight: 56, whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.55, background: SURFACE, color: TERM_TONE[tone] ?? INK, flexShrink: 0 },
+    });
+    return (_jsxs("div", { ...root, "data-tone": tone in TERM_TONE ? tone : 'plain', children: [_jsx(Rough, { seedKey: node.id, shape: "roundrect", radius: 14 }), _jsx("div", { children: children })] }));
+}
+/** 终端里的输入行（值类型）：与命令块同样的圆角块，type 动作写入；没有值时显示 placeholder 与光标。 */
+function TerminalInput({ node, p, disabled }) {
+    const v = useInputValue(node, p);
+    const has = v !== undefined && v !== null && v !== '';
+    const root = useRoot(node, p, {
+        disabled,
+        className: cn('jbox [.jstage[data-stroke=clean]_&]:rounded-[10px]', TERM_MONO),
+        style: { display: 'flex', gap: 8, alignItems: 'baseline', padding: '10px 16px', background: SURFACE, flexShrink: 0 },
+    });
+    return (_jsxs("div", { ...root, "data-soft": "", "data-dashed": "", children: [_jsx(Rough, { seedKey: node.id, shape: "roundrect", radius: 10, stroke: SOFT, dashed: true }), _jsx("span", { "aria-hidden": true, style: { flexShrink: 0 }, children: str(p.prompt, '$') }), _jsxs("span", { role: "textbox", "aria-readonly": "true", tabIndex: 0, "data-jcontrol": node.id, style: { minWidth: 0, flex: 1, whiteSpace: 'pre-wrap', color: has ? INK : SOFT }, children: [_jsx("span", { "data-jtext": "", children: has ? str(v) : str(p.placeholder) }), _jsx("span", { "aria-hidden": true, style: { display: 'inline-block', width: 2, height: '1.1em', marginLeft: 2, verticalAlign: 'text-bottom', background: INK } })] })] }));
+}
+/** 手机外框的几何尺寸：机身边框，以及屏幕内的安全区（顶部避开听筒与圆角、底部避开圆角与横条、左右避开圆角）。 */
+export const PHONE_BEZEL = 12;
+export const PHONE_SAFE = { top: 40, bottom: 26, x: 12 };
+const PHONE_RADIUS = 54;
+const PHONE_BUTTONS = [
+    { side: 'left', top: 118, h: 30 },
+    { side: 'left', top: 176, h: 58 },
+    { side: 'left', top: 246, h: 58 },
+    { side: 'right', top: 196, h: 90 },
+];
+/** 横放（刘海在左）时屏幕内的安全区：左侧避开刘海，右侧与上下避开圆角，底部避开横条。 */
+export const PHONE_SAFE_LANDSCAPE = { top: 12, bottom: 20, left: 44, right: 28 };
+const phoneInsets = (landscape) => landscape ? PHONE_SAFE_LANDSCAPE : { top: PHONE_SAFE.top, bottom: PHONE_SAFE.bottom, left: PHONE_SAFE.x, right: PHONE_SAFE.x };
+/** 外框占用的总尺寸（含侧键余量），内容区为 width × height；横放时侧键在机身上下沿。 */
+export function phoneFrameSize(width, height, landscape = false) {
+    const s = phoneInsets(landscape);
+    const screenW = width + s.left + s.right;
+    const screenH = height + s.top + s.bottom;
+    return landscape ? { width: screenW + PHONE_BEZEL * 2, height: screenH + PHONE_BEZEL * 2 + 8 } : { width: screenW + PHONE_BEZEL * 2 + 8, height: screenH + PHONE_BEZEL * 2 };
+}
+/**
+ * 手机外框（Phone 组件与舞台的自动外框共用）：大圆角机身、侧边按键、顶部听筒、底部横条，不显示任何文字。
+ * children 放在屏幕安全区以内的内容区，内容区正好是 width × height（断点按 width 计算，不被圆角和听筒遮挡）；
+ * scale 只做视觉缩放。主题取外层 ThemeContext（sketch 用手绘描边）。
+ */
+export function PhoneFrame({ width, height, scale = 1, children, seed = 'phone', landscape = false }) {
+    const mode = useStroke();
+    const { theme, font, style: fontStyle } = useLook();
+    const sketch = mode === 'rough';
+    const safe = phoneInsets(landscape);
+    const screenW = width + safe.left + safe.right;
+    const screenH = height + safe.top + safe.bottom;
+    const W = screenW + PHONE_BEZEL * 2;
+    const H = screenH + PHONE_BEZEL * 2;
+    const ink = INK;
+    const size = phoneFrameSize(width, height, landscape);
+    // 竖放：侧键在左右两侧，机身左移 4 留出左侧键；横放（逆时针转 90°）：左侧键转到下沿、右侧键转到上沿，机身下移 4
+    const buttons = PHONE_BUTTONS.map((b) => landscape
+        ? { edge: (b.side === 'left' ? 'bottom' : 'top'), at: b.side === 'left' ? b.top : W - b.top - b.h, len: b.h }
+        : { edge: b.side, at: b.top, len: b.h });
+    return (_jsx("div", { className: "jtheme", style: { width: size.width * scale, height: size.height * scale, position: 'relative', flexShrink: 0, ...fontStyle }, "data-jphone-frame": "", "data-theme": theme, "data-stroke": mode, "data-font": font ?? undefined, children: _jsxs("div", { style: { position: 'absolute', left: landscape ? 0 : 4, top: landscape ? 4 : 0, width: W, height: H, transform: scale === 1 ? undefined : `scale(${scale})`, transformOrigin: '0 0' }, children: [buttons.map((b, i) => (_jsx("div", { "aria-hidden": true, "data-jphone-button": b.edge, style: b.edge === 'left' || b.edge === 'right'
+                        ? { position: 'absolute', top: b.at, height: b.len, width: 5, [b.edge]: -5, background: sketch ? 'transparent' : ink, borderRadius: b.edge === 'left' ? '3px 0 0 3px' : '0 3px 3px 0' }
+                        : { position: 'absolute', left: b.at, width: b.len, height: 5, [b.edge]: -5, background: sketch ? 'transparent' : ink, borderRadius: b.edge === 'top' ? '3px 3px 0 0' : '0 0 3px 3px' }, children: sketch ? _jsx(Rough, { seedKey: `${seed}:btn${i}`, strokeWidth: 1.4, inset: 0.5 }) : null }, i))), _jsx("div", { style: { position: 'absolute', inset: 0, borderRadius: PHONE_RADIUS, background: sketch ? SURFACE : ink, boxShadow: sketch ? 'none' : '0 18px 40px rgba(0,0,0,0.18)' }, children: sketch ? _jsx(Rough, { seedKey: `${seed}:body`, shape: "roundrect", radius: PHONE_RADIUS, strokeWidth: 2, roughness: 0.8, inset: 1.5 }) : null }), _jsxs("div", { style: { position: 'absolute', left: PHONE_BEZEL, top: PHONE_BEZEL, width: screenW, height: screenH, borderRadius: PHONE_RADIUS - PHONE_BEZEL, overflow: 'hidden', background: SURFACE, isolation: 'isolate' }, "data-jphone-screen": "", children: [sketch ? null : landscape
+                            ? _jsx("div", { "aria-hidden": true, style: { position: 'absolute', left: 12, top: '50%', width: 24, height: 96, marginTop: -48, borderRadius: 12, background: ink } })
+                            : _jsx("div", { "aria-hidden": true, style: { position: 'absolute', top: 12, left: '50%', width: 96, height: 24, marginLeft: -48, borderRadius: 12, background: ink } }), _jsx("div", { "aria-hidden": true, style: { position: 'absolute', bottom: landscape ? 7 : 9, left: '50%', width: landscape ? 160 : 120, height: 4, marginLeft: landscape ? -80 : -60, borderRadius: 2, background: sketch ? INK2 : LINE_STRONG } }), _jsx("div", { style: { position: 'absolute', left: safe.left, top: safe.top, width, height, overflow: 'hidden' }, "data-jphone-content-box": "", children: children })] }), sketch ? (landscape
+                    ? _jsx("div", { "aria-hidden": true, style: { position: 'absolute', left: PHONE_BEZEL + 14, top: '50%', width: 6, height: 64, marginTop: -32, borderRadius: 3, border: `1.5px solid ${INK2}` } })
+                    : _jsx("div", { "aria-hidden": true, style: { position: 'absolute', top: PHONE_BEZEL + 14, left: '50%', width: 64, height: 6, marginLeft: -32, borderRadius: 3, border: `1.5px solid ${INK2}` } })) : null] }) }));
+}
+/** Phone 组件：子节点放进手机屏幕，按手机宽度排版（响应式断点按这个宽度计算）；弹窗渲染在屏幕内。 */
+function Phone({ node, p, children }) {
+    const ctx = useCtx();
+    const [layer, setLayer] = useState(null);
+    const r = useR(p);
+    const landscape = p.landscape === true;
+    // 横放：内容区按横屏手机的尺寸排版（断点按这个宽度算）；h 仍可改高度
+    const width = childWidth(node, ctx.width, p);
+    const hv = Number(r('h'));
+    const height = Number.isFinite(hv) && hv > 0 ? hv : landscape ? PHONE_LANDSCAPE.height : VIEWPORT_SIZE.mobile.height;
+    const sv = Number(r('scale'));
+    const scale = Number.isFinite(sv) && sv > 0 ? sv : 1;
+    const { h: _h, w: _w, landscape: _l, ...rest } = p;
+    const root = useRoot(node, rest, { style: { display: 'inline-block', flexShrink: 0 } });
+    return (_jsx("div", { ...root, children: _jsxs(PhoneFrame, { width: width, height: height, scale: scale, seed: node.id, landscape: landscape, children: [_jsx(RendererContextProvider, { value: { width, dialogLayer: layer }, children: _jsx("div", { style: { position: 'absolute', inset: 0, overflow: 'auto' }, "data-jphone-content": "", children: children }) }), _jsx("div", { ref: setLayer, className: "pointer-events-none absolute inset-0 z-20 [&>*]:pointer-events-auto", "data-jlayer": "dialog" })] }) }));
+}
+// ============ Joplo ============
+function Placeholder({ node, p }) {
+    const { t: i18n } = useI18n();
+    const h = dim(p.h ?? p.height) ?? '120px';
+    const root = useRoot(node, p, { className: 'jbox', style: { display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'center', background: SUBTLE, fontSize: 14, color: DIMMED, height: h } });
+    return (_jsxs("div", { ...root, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT, fill: LINE, fillStyle: "cross-hatch" }), _jsx("span", { className: "rounded bg-[color-mix(in_srgb,var(--jp-surface)_90%,transparent)] px-2", children: str(p.label, i18n.stage.placeholder) })] }));
+}
+// ============ 产品界面（D68）：官网示例里反复手拼的常见界面 ============
+// 都只读主题变量（--jp-*）与 Rough 描边；状态全部来自绑定的属性 / state.inputs，由步骤驱动；不请求网络、不加载外部资源。
+const ROW_GAP = 12;
+/** Avatar.Group：头像叠在一起（负间距 + 底色描边圈）。 */
+function AvatarGroup({ node, p, children }) {
+    const overlap = typeof p.spacing === 'number' ? p.spacing : (SPACING[str(p.spacing, 'sm')] ?? 12) * 0.7;
+    const root = useRoot(node, p, { className: 'javatar-group', style: { display: 'inline-flex', alignItems: 'center', ['--javatar-overlap']: `${-Math.round(overlap)}px` } });
+    return _jsx("div", { ...root, children: children });
+}
+/** Radio.Card：Radio.Group 里的可选卡片；是否选中读 Radio.Group 的当前值。 */
+function RadioCard({ node, p, disabled }) {
+    const host = useCtx();
+    const ctx = useContext(ValueContext);
+    const standalone = useInputValue(node, p) === true;
+    const on = ctx ? ctx.value !== null && ctx.value === str(p.value) : standalone;
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%', padding: '12px 14px', background: on ? tint(INK, 6) : SURFACE } });
+    return (_jsxs("div", { ...root, role: "radio", tabIndex: host.interactive ? 0 : undefined, onClick: host.interactive ? e => { e.stopPropagation(); if (!disabled && ctx && !ctx.disabled)
+            host.act?.(node.id, { type: 'click' }, { type: 'select', target: ctx.owner, value: str(p.value) }); } : undefined, onKeyDown: host.interactive ? e => { if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            e.currentTarget.click();
+        } } : undefined, "aria-checked": on, "data-jchecked": on ? '' : undefined, children: [_jsx(Rough, { seedKey: node.id, stroke: on ? INK : SOFT, strokeWidth: on ? 1.8 : 1.1 }), p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, style: { fontSize: 20, lineHeight: '24px' }, children: str(p.leftSection) }) : null, _jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }, children: [p.label !== undefined ? _jsx("span", { style: { fontWeight: on ? 650 : 500 }, children: str(p.label) }) : null, p.description !== undefined ? _jsx("span", { style: { fontSize: 13, color: DIMMED, lineHeight: 1.45 }, children: str(p.description) }) : null] }), _jsxs("span", { className: "jbox inline-flex shrink-0 items-center justify-center rounded-full", style: { width: 20, height: 20, marginTop: 2 }, children: [_jsx(Rough, { seedKey: `${node.id}:dot`, shape: "ellipse", inset: 1 }), on ? _jsx("span", { style: { width: 9, height: 9, borderRadius: 5, background: INK } }) : null] })] }));
+}
+/** EmptyState：空列表、404 / 过期 / 无权限页、结果页。图标圈 + 标题 + 说明 + 子节点里的操作按钮。 */
+function EmptyState({ node, p, children }) {
+    const c = color(p.color) ?? INK2;
+    const border = p.withBorder === true;
+    const root = useRoot(node, p, { className: border ? 'jbox [.jstage[data-stroke=clean]_&]:rounded-lg' : undefined, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, textAlign: 'center', width: '100%', padding: '32px 24px' } });
+    return (_jsxs("div", { ...root, role: "status", "data-dashed": border ? '' : undefined, children: [border ? _jsx(Rough, { seedKey: node.id, dashed: true, stroke: SOFT }) : null, p.icon !== undefined ? (_jsxs("span", { "aria-hidden": true, className: "jbox", "data-jround": "", style: { width: 56, height: 56, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 999, background: light(c), color: c, fontSize: 24, marginBottom: 4 }, children: [_jsx(Rough, { seedKey: `${node.id}:icon`, shape: "ellipse", stroke: c, strokeWidth: 1.1 }), _jsx("span", { children: str(p.icon) })] })) : null, p.title !== undefined ? _jsx("div", { style: { fontSize: 18, fontWeight: 700, lineHeight: 1.35 }, children: str(p.title) }) : null, p.description !== undefined ? _jsx("div", { style: { fontSize: 14, color: DIMMED, lineHeight: 1.55, maxWidth: 420, whiteSpace: 'pre-line' }, children: str(p.description) }) : null, children ? _jsx("div", { style: { display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginTop: 6 }, children: children }) : null] }));
+}
+/** ListRow：头像 / 图标 + 标题 + 副标题，右侧内容放在子节点。active 时浅色底。 */
+function ListRow({ node, p, children }) {
+    const c = color(p.color) ?? INK2;
+    const active = p.active === true;
+    const border = p.withBorder === true;
+    const root = useRoot(node, p, { className: border ? 'jbox [.jstage[data-stroke=clean]_&]:rounded-md' : 'jlistrow', style: { display: 'flex', alignItems: 'center', gap: ROW_GAP, width: '100%', padding: border ? '10px 12px' : '10px 4px', background: active ? tint(INK, 7) : border ? SURFACE : undefined, borderRadius: border ? undefined : 8 } });
+    return (_jsxs("div", { ...root, "data-jactive": active ? '' : undefined, children: [border ? _jsx(Rough, { seedKey: node.id, stroke: active ? INK : SOFT, strokeWidth: active ? 1.6 : 1.1 }) : null, p.avatar !== undefined ? (_jsxs("span", { className: "jbox", "data-jround": "", "aria-hidden": true, style: { width: 38, height: 38, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, color: c, background: light(c), flexShrink: 0, fontWeight: 600 }, children: [_jsx(Rough, { seedKey: `${node.id}:avatar`, shape: "ellipse", stroke: c, strokeWidth: 1.1 }), _jsx("span", { children: initials(str(p.avatar)) })] })) : p.icon !== undefined ? (_jsx("span", { "aria-hidden": true, style: { width: 38, height: 38, borderRadius: 10, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, background: SUBTLE, flexShrink: 0 }, children: str(p.icon) })) : null, _jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }, children: [p.title !== undefined ? _jsx("span", { className: "jtrunc", style: { fontWeight: 600, lineHeight: 1.35 }, children: str(p.title) }) : null, p.description !== undefined ? _jsx("span", { className: "jtrunc", style: { fontSize: 13, color: DIMMED, lineHeight: 1.4 }, children: str(p.description) }) : null] }), children ? _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }, children: children }) : null] }));
+}
+/** diff 的颜色：以 - / − 开头为红，以 + 开头为绿，其余跟随 color。 */
+export function diffTone(diff) {
+    const t = diff.trim();
+    if (/^[-−]/.test(t))
+        return 'down';
+    if (/^\+/.test(t))
+        return 'up';
+    return 'flat';
+}
+/** Stat：指标卡。 */
+function Stat({ node, p }) {
+    const c = color(p.color) ?? INK;
+    const diff = p.diff !== undefined && p.diff !== null && p.diff !== '' ? str(p.diff) : null;
+    const tone = diff ? diffTone(diff) : 'flat';
+    const progress = typeof p.progress === 'number' && Number.isFinite(p.progress) ? Math.max(0, Math.min(100, p.progress)) : null;
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-lg', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '14px 16px', background: SURFACE, minWidth: 0 } });
+    return (_jsxs("div", { ...root, "data-soft": "", children: [_jsx(Rough, { seedKey: node.id, stroke: SOFT }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, color: DIMMED, fontSize: 13 }, children: [p.icon !== undefined ? _jsx("span", { "aria-hidden": true, children: str(p.icon) }) : null, _jsx("span", { className: "jtrunc", children: str(p.label) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }, children: [_jsx("span", { style: { fontSize: 28, fontWeight: 700, lineHeight: 1.1, color: c }, "data-jvalue": "", children: str(p.value) }), diff ? _jsx("span", { style: { fontSize: 13, fontWeight: 600, color: tone === 'down' ? DANGER : tone === 'up' ? OK : DIMMED }, "data-jdiff": tone, children: diff }) : null] }), p.description !== undefined ? _jsx("div", { style: { fontSize: 12, color: DIMMED }, children: str(p.description) }) : null, progress !== null ? (_jsx("div", { style: { height: 6, background: SUBTLE, borderRadius: 999, overflow: 'hidden', marginTop: 2 }, role: "progressbar", "aria-valuenow": progress, children: _jsx("div", { style: { width: `${progress}%`, height: '100%', background: c } }) })) : null] }));
+}
+/** KeyValue：一列“名称 …… 值”；total 时最后一行加粗并在上方画分隔线。 */
+function KeyValue({ node, p }) {
+    const items = arr(p.items).filter((x) => !!x && typeof x === 'object');
+    const root = useRoot(node, p, { style: { display: 'flex', flexDirection: 'column', width: '100%' } });
+    return (_jsx("dl", { ...root, style: { ...root.style, margin: 0 }, children: items.map((it, i) => {
+            const last = i === items.length - 1;
+            const total = p.total === true && last && items.length > 1;
+            return (_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, padding: '7px 0', borderTop: total || (p.withDivider === true && i > 0) ? `1px solid ${LINE}` : undefined, fontWeight: total ? 700 : undefined, fontSize: total ? 16 : 14 }, "data-jtotal": total ? '' : undefined, children: [_jsx("dt", { style: { color: total ? INK : DIMMED, minWidth: 0 }, children: str(it.label) }), _jsx("dd", { style: { margin: 0, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }, children: str(it.value) })] }, i));
+        }) }));
+}
+// ---------- 图表（BarChart / LineChart，对齐 @mantine/charts 的 data / dataKey / series） ----------
+const SERIES_COLORS = [INFO, ACCENT, OK, DANGER, '#7048e8', '#0ca678'];
+/** 图表的纯数据部分：每个系列取 data[i][name]（不是数字的当作 0），刻度取“好看”的整数步长。 */
+export function chartModel(data, dataKey, series) {
+    const rows = arr(data).filter((r) => !!r && typeof r === 'object');
+    const key = str(dataKey);
+    const list = arr(series)
+        .filter((s) => !!s && typeof s === 'object' && typeof s.name === 'string')
+        .map((s, i) => ({ name: String(s.name), label: s.label !== undefined ? str(s.label) : String(s.name), color: color(s.color) ?? SERIES_COLORS[i % SERIES_COLORS.length], values: rows.map((r) => (typeof r[String(s.name)] === 'number' && Number.isFinite(r[String(s.name)]) ? r[String(s.name)] : 0)) }));
+    const peak = Math.max(0, ...list.flatMap((s) => s.values));
+    const step = niceStep(peak / 4);
+    const max = Math.max(step, Math.ceil(peak / step) * step);
+    const ticks = Array.from({ length: Math.round(max / step) + 1 }, (_, i) => i * step);
+    return { labels: rows.map((r) => str(r[key])), series: list, max, ticks };
+}
+function niceStep(raw) {
+    if (!(raw > 0))
+        return 1;
+    const pow = 10 ** Math.floor(Math.log10(raw));
+    const f = raw / pow;
+    return (f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10) * pow;
+}
+function Chart({ node, p, kind }) {
+    const { animate } = useCtx();
+    const r = useR(p);
+    const m = chartModel(p.data, p.dataKey, p.series);
+    const H = typeof r('h') === 'number' ? r('h') : 220;
+    const W = 600;
+    const pad = { l: 40, r: 12, t: 12, b: 28 };
+    const iw = W - pad.l - pad.r;
+    const legend = (m.series.length > 1 && p.withLegend !== false) || p.withLegend === true;
+    // h 是整张图（含图例）的高度：图例占 22px，其余给 SVG
+    const svgH = Math.max(80, H - (legend ? 22 : 0));
+    const ih = svgH - pad.t - pad.b;
+    const unit = p.unit !== undefined ? str(p.unit) : '';
+    const n = Math.max(1, m.labels.length);
+    const band = iw / n;
+    const y = (v) => pad.t + ih - (v / m.max) * ih;
+    const root = useRoot(node, p, { style: { width: '100%', position: 'relative' } });
+    return (_jsxs("div", { ...root, style: { ...root.style, height: 'auto', minHeight: H }, role: "img", "aria-label": m.series.map((s) => s.label).join(', '), children: [_jsxs("svg", { viewBox: `0 0 ${W} ${svgH}`, width: "100%", height: svgH, preserveAspectRatio: "none", style: { display: 'block', overflow: 'visible' }, children: [m.ticks.map((t) => (_jsxs("g", { children: [_jsx("line", { x1: pad.l, x2: W - pad.r, y1: y(t), y2: y(t), style: { stroke: LINE }, strokeDasharray: t === 0 ? undefined : '3 4' }), _jsx("text", { x: pad.l - 6, y: y(t) + 4, textAnchor: "end", style: { fill: DIMMED, fontSize: 11 }, children: `${t}${unit}` })] }, t))), m.labels.map((l, i) => (_jsx("text", { x: pad.l + band * (i + 0.5), y: pad.t + ih + 18, textAnchor: "middle", style: { fill: DIMMED, fontSize: 11 }, children: l }, i))), kind === 'bar'
+                        ? m.series.map((s, si) => {
+                            const bw = Math.max(4, (band * 0.7) / m.series.length);
+                            return s.values.map((v, i) => {
+                                const x = pad.l + band * i + band * 0.15 + bw * si;
+                                return _jsx(motion.rect, { x: x, width: bw - 2, rx: 2, style: { fill: s.color }, initial: false, animate: { y: y(v), height: Math.max(0, pad.t + ih - y(v)) }, transition: animate ? { duration: 0.5, ease: [0.16, 1, 0.3, 1] } : { duration: 0 }, "data-jbar": `${s.name}:${i}` }, `${si}:${i}`);
+                            });
+                        })
+                        : m.series.map((s, si) => {
+                            const pts = s.values.map((v, i) => [pad.l + band * (i + 0.5), y(v)]);
+                            const d = pts.map(([x, yy], i) => `${i ? 'L' : 'M'}${x.toFixed(1)},${yy.toFixed(1)}`).join(' ');
+                            return (_jsxs("g", { children: [_jsx(motion.path, { d: d, fill: "none", style: { stroke: s.color }, strokeWidth: 2.2, strokeLinejoin: "round", initial: false, animate: { d }, transition: animate ? { duration: 0.5 } : { duration: 0 } }), pts.map(([x, yy], i) => _jsx(motion.circle, { r: 3.5, cx: x, style: { fill: SURFACE, stroke: s.color }, strokeWidth: 2, initial: false, animate: { cy: yy }, transition: animate ? { duration: 0.5 } : { duration: 0 }, "data-jpoint": `${s.name}:${i}` }, i))] }, si));
+                        })] }), legend ? (_jsx("div", { style: { display: 'flex', gap: 14, justifyContent: 'center', alignItems: 'center', height: 22, fontSize: 12, color: DIMMED }, children: m.series.map((s) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { "aria-hidden": true, style: { width: 10, height: 10, borderRadius: 2, background: s.color } }), s.label] }, s.name))) })) : null] }));
+}
+const BarChart = (props) => _jsx(Chart, { ...props, kind: "bar" });
+const LineChart = (props) => _jsx(Chart, { ...props, kind: "line" });
+// ---------- Menu（对齐 Mantine）：opened 写在 Menu 上，编译器抄给 Menu.Dropdown（core 门控） ----------
+const MenuContext = createContext(null);
+function Menu({ node, p, children }) {
+    const anchor = useRef(null);
+    const root = useRoot(node, p, { style: { position: 'relative', display: 'inline-block' } });
+    return (_jsx(MenuContext.Provider, { value: { anchor, position: str(p.position, 'bottom-start') }, children: _jsx("div", { ...root, ref: anchor, children: children }) }));
+}
+function MenuTarget({ node, p, children }) {
+    const root = useRoot(node, p, { style: { display: 'inline-flex' } });
+    return _jsx("span", { ...root, children: children });
+}
+/** 下拉相对 Menu 的位置：top-* 在上方，*-end 右对齐。 */
+export function menuPlacement(position) {
+    return { top: position.startsWith('top'), end: position.endsWith('end') };
+}
+function MenuDropdown({ node, p, children }) {
+    const { dialogLayer, animate } = useCtx();
+    const menu = useContext(MenuContext);
+    const place = menuPlacement(menu?.position ?? 'bottom-start');
+    const [pos, setPos] = useState(null);
+    // 浮到弹窗层（与 Modal 同一层，跟着镜头一起平移缩放），不被表格、卡片的 overflow 裁掉；坐标按镜头缩放换回画面坐标
+    useLayoutEffect(() => {
+        const a = menu?.anchor.current;
+        if (!a || !dialogLayer)
+            return;
+        const ar = rectOf(a);
+        const lr = rectOf(dialogLayer);
+        const k = dialogLayer.offsetWidth ? lr.width / dialogLayer.offsetWidth : 1;
+        const next = { left: ((place.end ? ar.right : ar.left) - lr.left) / (k || 1), top: ((place.top ? ar.top - 6 : ar.bottom + 6) - lr.top) / (k || 1) };
+        if (!pos || Math.abs(pos.left - next.left) > 0.5 || Math.abs(pos.top - next.top) > 0.5)
+            setPos(next);
+    });
+    const shift = `${place.end ? 'translateX(-100%)' : ''} ${place.top ? 'translateY(-100%)' : ''}`.trim() || undefined;
+    const root = useRoot(node, p, { className: 'jbox [.jstage[data-stroke=clean]_&]:rounded-md', style: { minWidth: 180, padding: 4, background: SURFACE, boxShadow: 'var(--jp-shadow)', display: 'flex', flexDirection: 'column' } });
+    const panel = (_jsxs(motion.div, { ...root, role: "menu", initial: animate ? { opacity: 0, y: place.top ? 4 : -4 } : false, animate: { opacity: 1, y: 0 }, transition: { duration: 0.16 }, children: [_jsx(Rough, { seedKey: node.id, strokeWidth: 1.4 }), children] }));
+    if (dialogLayer && pos)
+        return createPortal(_jsx("div", { style: { position: 'absolute', left: pos.left, top: pos.top, transform: shift, zIndex: 5 }, children: panel }), dialogLayer);
+    // 还没测量（首帧、服务端渲染的截图）：先在 Menu 旁边原位浮出
+    return _jsx("div", { style: { position: 'absolute', zIndex: 30, ...(place.top ? { bottom: '100%', marginBottom: 6 } : { top: '100%', marginTop: 6 }), ...(place.end ? { right: 0 } : { left: 0 }) }, children: panel });
+}
+function MenuItem({ node, p, disabled, children }) {
+    const c = color(p.color);
+    const root = useRoot(node, p, { disabled, className: '[.jstage[data-stroke=clean]_&]:rounded', style: { display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 10px', fontSize: 14, textAlign: 'left', background: 'transparent', border: 'none', color: disabled ? SOFT : (c ?? INK), cursor: 'inherit' } });
+    return (_jsxs("button", { ...root, type: "button", role: "menuitem", "data-jcontrol": node.id, children: [p.leftSection !== undefined ? _jsx("span", { "aria-hidden": true, style: { width: 18, textAlign: 'center' }, children: str(p.leftSection) }) : null, _jsx("span", { className: "jtrunc", style: { flex: 1 }, "data-jtext": "", children: children }), p.rightSection !== undefined ? _jsx("span", { style: { fontSize: 12, color: DIMMED }, children: str(p.rightSection) }) : null] }));
+}
+function MenuLabel({ node, p, children }) {
+    const root = useRoot(node, p, { style: { padding: '6px 10px 4px', fontSize: 12, fontWeight: 600, color: DIMMED } });
+    return _jsx("div", { ...root, children: children });
+}
+function MenuDivider({ node, p }) {
+    const root = useRoot(node, p, { style: { height: 1, background: LINE, margin: '4px 6px' } });
+    return _jsx("div", { ...root, role: "separator" });
+}
+/** TabBar：手机底部标签栏；当前值来自 state.inputs（select 写入）或 value / defaultValue。 */
+function TabBar({ node, p, disabled }) {
+    const { state, preview } = useCtx();
+    const v = useInputValue(node, p);
+    const items = arr(p.data).map((d) => (d && typeof d === 'object' ? d : { value: d, label: d }));
+    const choices = choicesOf(node, state) ?? [];
+    const pv = preview && preview.nodeId === node.id ? preview.text : null;
+    const cur = pv !== null ? (choices.find((c) => c.value === pv || c.label === pv)?.value ?? null) : v !== undefined && v !== null && v !== '' ? str(v) : (choices[0]?.value ?? null);
+    const c = color(p.color) ?? INK;
+    const root = useRoot(node, p, { disabled, style: { display: 'flex', alignItems: 'stretch', width: '100%', marginTop: 'auto', position: 'sticky', bottom: 0, zIndex: 3, background: SURFACE, borderTop: `1.5px solid ${LINE_STRONG}`, padding: '6px 4px 8px' } });
+    return (_jsx("nav", { ...root, role: "tablist", "aria-label": p['aria-label'] !== undefined ? str(p['aria-label']) : undefined, "data-jcontrol": node.id, children: items.map((it, i) => {
+            const value = str(it.value);
+            const on = value === cur;
+            const badge = it.badge !== undefined && it.badge !== null && it.badge !== '' && it.badge !== 0 ? str(it.badge) : null;
+            return (_jsxs("span", { role: "tab", "aria-selected": on, "data-jchoice": value, style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, fontSize: 11, color: on ? c : DIMMED, fontWeight: on ? 700 : 500, position: 'relative' }, children: [_jsx("span", { "aria-hidden": true, style: { fontSize: 20, lineHeight: '24px', filter: on ? undefined : 'grayscale(1)', opacity: on ? 1 : 0.7 }, children: it.icon !== undefined ? str(it.icon) : '•' }), _jsx("span", { className: "jtrunc", style: { maxWidth: '100%' }, children: str(it.label ?? it.value) }), badge ? _jsx("span", { style: { position: 'absolute', top: -2, left: '55%', minWidth: 16, height: 16, padding: '0 4px', borderRadius: 999, background: DANGER, color: '#fff', fontSize: 10, lineHeight: '16px', textAlign: 'center' }, children: badge }) : null] }, `${value}:${i}`));
+        }) }));
+}
+// ============ 注册表：目录中每个类型都必须有实现（Record<ComponentType, …> 由类型检查保证） ============
+const IMPL = {
+    AppShell,
+    'AppShell.Header': ShellHeader,
+    'AppShell.Navbar': ShellSide,
+    'AppShell.Main': ShellMain,
+    'AppShell.Aside': ShellSide,
+    'AppShell.Footer': ShellFooter,
+    Container,
+    Stack,
+    Group,
+    Flex,
+    Grid,
+    'Grid.Col': GridCol,
+    SimpleGrid,
+    Center,
+    Box,
+    Space,
+    Paper,
+    Card,
+    'Card.Section': CardSection,
+    Divider,
+    ScrollArea,
+    Title,
+    Text,
+    Code,
+    Kbd,
+    Blockquote,
+    List,
+    'List.Item': ListItem,
+    Badge,
+    Avatar,
+    Image: ImageBox,
+    ThemeIcon,
+    Indicator,
+    Timeline,
+    'Timeline.Item': TimelineItem,
+    Table,
+    'Table.Thead': tablePart('thead'),
+    'Table.Tbody': tablePart('tbody'),
+    'Table.Tr': tablePart('tr'),
+    'Table.Th': tablePart('th'),
+    'Table.Td': tablePart('td'),
+    DataTable,
+    Accordion,
+    'Accordion.Item': AccordionItem,
+    'Accordion.Panel': AccordionPanel,
+    Radio,
+    'Tabs.List': TabsList,
+    'Tabs.Panel': TabsPanel,
+    Breadcrumbs,
+    Stepper,
+    'Stepper.Step': StepperStep,
+    Alert,
+    Loader,
+    Progress,
+    RingProgress,
+    Skeleton,
+    Notification,
+    Modal: Overlay,
+    Drawer: Overlay,
+    ChatMessage,
+    ToolCall,
+    Thinking,
+    Email,
+    DataCard,
+    StateFlow,
+    Artifact,
+    Terminal,
+    'Terminal.Command': TerminalCommand,
+    'Terminal.Output': TerminalOutput,
+    Phone,
+    ...Object.fromEntries(HTML_TAGS.map((t) => [t, htmlImpl(t)])),
+    Placeholder,
+    // 产品界面（D68）
+    'Avatar.Group': AvatarGroup,
+    'Radio.Card': RadioCard,
+    EmptyState,
+    ListRow,
+    Stat,
+    KeyValue,
+    BarChart,
+    LineChart,
+    Menu,
+    'Menu.Target': MenuTarget,
+    'Menu.Dropdown': MenuDropdown,
+    'Menu.Item': MenuItem,
+    'Menu.Label': MenuLabel,
+    'Menu.Divider': MenuDivider,
+    TabBar,
+    Button,
+    ActionIcon,
+    CloseButton,
+    Anchor,
+    a: Anchor,
+    NavLink,
+    Burger,
+    TextInput,
+    PasswordInput: TextInput,
+    NumberInput: TextInput,
+    Textarea,
+    Select,
+    MultiSelect: Select,
+    Checkbox,
+    'Radio.Group': RadioGroup,
+    Switch,
+    SegmentedControl,
+    FileInput: TextInput,
+    Tabs,
+    'Tabs.Tab': TabsTab,
+    'Accordion.Control': AccordionControl,
+    Pagination,
+    PromptInput,
+    'Artifact.Ref': ArtifactRef,
+    'Terminal.Input': TerminalInput,
+};
+export const IMPLEMENTED_TYPES = Object.keys(IMPL).map(name => `ui:${name}`);
+export default defineRuntime({
+    id: 'ui',
+    components: Object.fromEntries(Object.entries(IMPL).map(([name, Impl]) => [name, { react: ({ ctx }) => _jsx(Impl, { node: ctx.model, p: ctx.node.props, disabled: ctx.node.disabled, children: ctx.renderChildren() }) }])),
+    viewports: { mobile: { insets: { x: 4 + PHONE_BEZEL + PHONE_SAFE.x, y: PHONE_BEZEL + PHONE_SAFE.top }, size: phoneFrameSize, react: PhoneFrame } },
+});