@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/tokens/typography.css

@@ -1,22 +1,52 @@
-/* Keybricks typography tokens — sizes/tracking verbatim from the .fig */
+/* Keybricks typography tokens — the 14px scale (v2.0).
+   One ladder, 3–5 sizes do almost all the work: 12 captions · 14 body and controls · 16 section titles · 20 page titles.
+   Control text (--control-text) is defined per size tier in layout.css and points back into this ladder. */
 :root{
 --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
---font-mono:Menlo,ui-monospace,'SF Mono',Consolas,monospace;
-/* size / line-height / letter-spacing pairs */
---text-2xs:10px;--leading-2xs:12.5px;--tracking-2xs:.117px;      /* palette tile labels */
---text-xs:11px;--leading-xs:16.5px;--tracking-xs:.064px;         /* table cells, captions, step labels */
---text-sm:12px;--leading-sm:18px;--tracking-sm:0;                /* form labels, inputs, chips, meta */
---text-base:13px;--leading-base:19.5px;--tracking-base:-.076px;  /* default UI text, buttons, nav */
---text-md:14px;--leading-md:21px;--tracking-md:-.15px;           /* section headings, panel titles */
---text-lg:15px;--leading-lg:22.5px;--tracking-lg:-.234px;        /* page titles, wordmark */
---text-xl:20px;--leading-xl:30px;--tracking-xl:-.449px;          /* greeting heading */
+--font-mono:Menlo,ui-monospace,'SF Mono',Consolas,monospace;   /* code only: code blocks, logs, inline code and config-code chips — never IDs or amounts in the UI */
+/* size / line-height / letter-spacing triples — always set all three together */
+--text-2xs:11px;--leading-2xs:16px;--tracking-2xs:.064px;        /* chart text only — nothing in the system is smaller; 12px in CJK */
+--text-2xs-mono:11px;
+--text-code:12px;--leading-code:18px;                            /* config-code chips (Table `code` columns): Latin, so not bumped in CJK; 11/16 in sm */
+--text-glyph-min:11px;                                           /* floor for text sized from geometry (switch inside text, avatar initials); 12px in CJK */                                            /* chart numerals (UI font, tabular figures; name kept for compatibility): Latin digits, so they stay 11px in CJK too */
+--text-xs:12px;--leading-xs:16px;--tracking-xs:0;                /* captions, helper text, badges, tags, meta; sm-tier control text — 13px in CJK */
+--text-sm:12px;--leading-sm:16px;--tracking-sm:0;                /* alias of --text-xs kept for compatibility — prefer --text-xs */
+--text-base:14px;--leading-base:20px;--tracking-base:-.15px;     /* body, md/lg controls, labels, table cells */
+--text-md:16px;--leading-md:24px;--tracking-md:-.28px;           /* section headings, panel / card / dialog titles */
+--text-lg:20px;--leading-lg:28px;--tracking-lg:-.449px;          /* page titles */
+--text-xl:24px;--leading-xl:32px;--tracking-xl:-.54px;           /* greeting heading, page hero */
 --text-num:24px;--leading-num:32px;--tracking-num:.07px;         /* stat numbers (weight 300) */
-/* Extended display scale — extrapolated from the file's own size→tracking curve (≈ −.0225px per size px) */
---text-2xl:24px;--leading-2xl:31px;--tracking-2xl:-.54px;        /* modal/page hero headings */
---text-3xl:30px;--leading-3xl:37px;--tracking-3xl:-.67px;        /* marketing/report headings */
---text-4xl:36px;--leading-4xl:43px;--tracking-4xl:-.81px;        /* dashboard hero numbers */
---text-display:48px;--leading-display:54px;--tracking-display:-1.08px; /* slides, covers */
+/* Extended display scale — same size→tracking curve, continued */
+--text-2xl:30px;--leading-2xl:38px;--tracking-2xl:-.67px;        /* modal / report hero headings */
+--text-3xl:38px;--leading-3xl:46px;--tracking-3xl:-.855px;       /* marketing headings, site hero */
+--text-4xl:48px;--leading-4xl:56px;--tracking-4xl:-1.08px;       /* dashboard hero numbers */
+--text-display:60px;--leading-display:68px;--tracking-display:-1.35px; /* slides, covers */
 --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;
 }
+/* Chinese (Simplified and Traditional), Japanese and Korean — one rule for all square scripts.
+   A square glyph carries far more strokes than a Latin letter, so the same numeric weight reads heavier:
+   PingFang 600 beside Inter 500 looks a full step bolder, and 600 everywhere flattens labels and headers
+   into one weight. CJK therefore uses 500 (PingFang / Hiragino / Apple SD Gothic Neo Medium) for both
+   --weight-medium and --weight-semibold, and Latin tracking is switched off. Microsoft YaHei, Meiryo,
+   Yu Gothic UI and Malgun Gothic ship no 500 face, so on Windows these render Regular — hierarchy there
+   comes from size, colour and the header fill.
+   Small sizes are one step larger than Latin: a 12px square glyph has about 11 device pixels for up to
+   8 horizontal strokes, which a 1x display cannot resolve. 12 → 13 (leading 18) and 11 → 12, so nothing
+   CJK renders below 12px. 14px and up are unchanged. In sm regions (13px CJK text) the medium weight
+   drops back to 400, because bold strokes merge at that size.
+   Set lang on <html> or on the region; every Keybricks component re-reads --font-sans so a per-region
+   switch works too. */
+[lang|="zh"]{--font-sans:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+[lang|="ja"]{--font-sans:'Inter','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Meiryo','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+[lang|="ko"]{--font-sans:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+:lang(zh),:lang(ja),:lang(ko){font-family:var(--font-sans)}
+[lang|="zh"],[lang|="ja"],[lang|="ko"]{--weight-medium:500;--weight-semibold:500;
+--text-glyph-min:12px;--text-2xs:12px;--text-xs:13px;--leading-xs:18px;--text-sm:13px;--leading-sm:18px;
+--tracking-2xs:0;--tracking-xs:0;--tracking-sm:0;--tracking-base:0;--tracking-md:0;--tracking-lg:0;--tracking-xl:0;--tracking-num:0;--tracking-2xl:0;--tracking-3xl:0;--tracking-4xl:0;--tracking-display:0}
+/* sm tier in CJK: 13px text at regular weight. The second rule re-derives the tier's control text on a
+   lang element inside an sm region (a tier token resolves where it is declared, not where it is read). */
+:is([lang|="zh"],[lang|="ja"],[lang|="ko"])[data-size="sm"],:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) [data-size="sm"]{--weight-medium:400}
+[data-size="sm"] :is([lang|="zh"],[lang|="ja"],[lang|="ko"]){--control-text:var(--text-xs);--control-leading:var(--leading-xs);--weight-medium:400}
+:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) :is([data-size="md"],[data-size="lg"]){--weight-medium:500}
 body{font-family:var(--font-sans);color:var(--text-primary);-webkit-font-smoothing:antialiased}
 a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}

package/components/_cards/brand-visual.card.html

@@ -1,43 +0,0 @@
-<!-- @dsCard group="Brand" viewport="700x560" name="Brand Visuals" subtitle="Seven generative motifs — one 1200×400 canvas each, cropped to fill any box" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<script src="../_shared/view-source.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:20px;font-family:var(--font-sans)}
-.lab{font-size:var(--text-2xs);letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-semibold);margin:0 0 6px}
-.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
-.name{font-size:var(--text-xs);color:var(--text-secondary);margin:5px 0 0}
-.name b{color:var(--text-heading);font-weight:var(--weight-medium)}
-.hero-t{font-size:26px;line-height:30px;font-weight:var(--weight-semibold);color:#fff;letter-spacing:-.4px;margin:0}
-.hero-e{font-size:var(--text-2xs);letter-spacing:.8px;text-transform:uppercase;color:#93c5fd;font-weight:var(--weight-semibold);margin:0 0 6px}
-a{color:var(--link)}a:hover{color:var(--link-hover)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { BrandVisual } = window.KeybricksDesignSystem_71231a;
-const M = [["orbit","Orbit","同心弧 · 主母题"],["entropy","Entropy","晶核与尘"],["focal","Focal","景深点阵"],["manifold","Manifold","参数曲面"],["tesseract","Tesseract","嵌套立方"],["meridian","Meridian","经线扭曲"],["ledger","Ledger","刻度与游标"]];
-function Demo(){
-  return (<div>
-    <p className="lab">Hero — full width, overlay content</p>
-    <BrandVisual motif="orbit" height={150}>
-      <div style={{padding:"26px 28px"}}>
-        <p className="hero-e">Design System</p>
-        <p className="hero-t">Keybricks</p>
-      </div>
-    </BrandVisual>
-    <p className="lab" style={{marginTop:22}}>Motifs — uniform 1200×400 canvas, cropped to fill</p>
-    <div className="grid">
-      {M.map(([m,en,zh])=>(
-        <div key={m}>
-          <BrandVisual motif={m} height={104}/>
-          <p className="name"><b>{en}</b> · {zh}</p>
-        </div>
-      ))}
-    </div>
-  </div>);
-}
-ReactDOM.createRoot(document.getElementById("root")).render(<Demo/>);
-if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"BrandVisual.jsx","path":"../brand/BrandVisual.jsx"},{"name":"brandMotifs.js","path":"../brand/brandMotifs.js"}]); }, 0);
-</script></body></html>

package/components/_cards/datatable.card.html

@@ -1,48 +0,0 @@
-<!-- @dsCard group="Components" viewport="700x460" name="Data Table" subtitle="Selectable comparison table · dense preview mode" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<script src="../_shared/view-source.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { DataTable, Select, Card } = window.KeybricksDesignSystem_71231a;
-function Sheet(){
-  const [sel,setSel]=React.useState([0]);
-  const toggle=(w,v)=>{ if(w==="all") setSel(v?[0,1,2]:[]); else setSel(v?[...sel,w]:sel.filter(i=>i!==w)); };
-  return <div style={{display:"flex",flexDirection:"column",gap:20}}>
-    <div><span className="lbl">Default — selectable, with row actions</span>
-      <DataTable selectable selected={sel} onToggle={toggle} columns={[
-        {key:"module",label:"Module"},
-        {key:"code",label:"Code",mono:true},
-        {key:"cur",label:"Current Value"},
-        {key:"next",label:"New Value"},
-        {key:"action",label:"Action",render:()=> <Select size="sm" options={["New","Overwrite","Skip"]}/>},
-      ]} rows={[
-        {module:"Financial Settings",code:"FIN_CURRENCY_DEFAULT",cur:"USD",next:"EUR"},
-        {module:"Financial Settings",code:"FIN_DECIMAL_PLACES",cur:"2",next:"2"},
-        {module:"User Management",code:"USER_SESSION_TIMEOUT",cur:"30",next:"60"},
-      ]}/>
-    </div>
-    <div><span className="lbl">Dense — data-preview drawer style</span>
-      <DataTable dense columns={[
-        {key:"id",label:"ID",mono:true},{key:"entity",label:"Entity",mono:true},{key:"customer",label:"Customer",mono:true},{key:"batch",label:"Batch Code",mono:true},{key:"qty",label:"Qty",mono:true},
-      ]} rows={[
-        {id:"528563",entity:"HK",customer:"A",batch:"HYSTK-1",qty:"4100"},
-        {id:"528564",entity:"SG",customer:"B",batch:"HYSTK-4",qty:"1610"},
-        {id:"528565",entity:"HK",customer:"C",batch:"HYSTK-5",qty:"3200"},
-      ]}/>
-    </div>
-    <div><span className="lbl">Empty state</span>
-      <Card pad={false}><DataTable columns={[{key:"module",label:"Module"},{key:"code",label:"Code",mono:true},{key:"cur",label:"Current Value"}]} rows={[]}/>
-        <div style={{padding:"28px 0",textAlign:"center",fontSize:13,color:"var(--text-muted)"}}>No rows to display</div>
-      </Card>
-    </div>
-  </div>;
-}
-ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
-if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"DataTable.jsx","path":"../data/DataTable.jsx"},{"name":"Select.jsx","path":"../forms/Select.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
-</script></body></html>

package/components/_shared/src-brand.js

@@ -1 +0,0 @@
-window.__KB_SRC__=Object.assign(window.__KB_SRC__||{},{"brand/BrandVisual.jsx":"import React from \"react\";\nimport { buildMotif, motifList, motifLabels } from \"./brandMotifs.js\";\n\n/** Generative brand visual. One canvas (1200×400) per motif, cropped to fill any box —\n *  use for page heroes, section headers and card headers. Always dark; never themed. */\nexport function BrandVisual({ motif = \"orbit\", width = \"100%\", height = 200, radius = \"var(--radius-lg)\", fit = \"slice\", children, style }) {\n  const { viewBox, els } = buildMotif(motif, 1200, 400);\n  return (\n    <div style={{ position: \"relative\", width, height, borderRadius: radius, overflow: \"hidden\", background: \"#060a1e\", ...style }}>\n      <svg viewBox={viewBox} preserveAspectRatio={fit === \"slice\" ? \"xMidYMid slice\" : \"xMidYMid meet\"} style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", display: \"block\" }}>\n        <defs>\n          <linearGradient id=\"kbv-bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stopColor=\"#060a1e\" /><stop offset=\".5\" stopColor=\"#0b1638\" /><stop offset=\"1\" stopColor=\"#10265f\" /></linearGradient>\n          <linearGradient id=\"kbv-bg-v\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stopColor=\"#060a1e\" /><stop offset=\".55\" stopColor=\"#0b1638\" /><stop offset=\"1\" stopColor=\"#10265f\" /></linearGradient>\n          <linearGradient id=\"kbv-bg-d\" x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stopColor=\"#0a1231\" /><stop offset=\".55\" stopColor=\"#070c22\" /><stop offset=\"1\" stopColor=\"#050815\" /></linearGradient>\n          <radialGradient id=\"kbv-core\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stopColor=\"#2b7fff\" stopOpacity=\".55\" /><stop offset=\"1\" stopColor=\"#2b7fff\" stopOpacity=\"0\" /></radialGradient>\n          <radialGradient id=\"kbv-glow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stopColor=\"#155dfc\" stopOpacity=\".5\" /><stop offset=\"1\" stopColor=\"#155dfc\" stopOpacity=\"0\" /></radialGradient>\n          <filter id=\"kbv-b1\"><feGaussianBlur stdDeviation=\"1.5\" /></filter>\n          <filter id=\"kbv-b2\"><feGaussianBlur stdDeviation=\"3\" /></filter>\n          <filter id=\"kbv-b3\"><feGaussianBlur stdDeviation=\"9\" /></filter>\n        </defs>\n        {els.map(({ t, ...a }, i) => React.createElement(t, { key: i, ...a }))}\n      </svg>\n      {children ? <div style={{ position: \"relative\", height: \"100%\" }}>{children}</div> : null}\n    </div>\n  );\n}\n\nBrandVisual.motifs = motifList;\nBrandVisual.labels = motifLabels;\n","brand/BrandVisual.vue":"<script setup>\n// Generative brand visual. One canvas (1200×400) per motif, cropped to fill any box. Always dark; never themed.\nimport { computed } from 'vue'\nimport { buildMotif } from './brandMotifs.js'\n\nconst props = defineProps({\n  motif: { type: String, default: 'orbit' },\n  width: { type: [Number, String], default: '100%' },\n  height: { type: [Number, String], default: 200 },\n  radius: { type: [Number, String], default: 'var(--radius-lg)' },\n  fit: { type: String, default: 'slice' },\n  style: Object\n})\nconst art = computed(() => buildMotif(props.motif, 1200, 400))\nconst attrsOf = (e) => { const { t, ...a } = e; return a }\n</script>\n<template>\n  <div :style=\"{ position:'relative', width: props.width, height: props.height, borderRadius: props.radius, overflow:'hidden', background:'#060a1e', ...props.style }\">\n    <svg :viewBox=\"art.viewBox\" :preserveAspectRatio=\"props.fit === 'slice' ? 'xMidYMid slice' : 'xMidYMid meet'\" style=\"position:absolute;inset:0;width:100%;height:100%;display:block\">\n      <defs>\n        <linearGradient id=\"kbv-bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#060a1e\" /><stop offset=\".5\" stop-color=\"#0b1638\" /><stop offset=\"1\" stop-color=\"#10265f\" /></linearGradient>\n        <linearGradient id=\"kbv-bg-v\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#060a1e\" /><stop offset=\".55\" stop-color=\"#0b1638\" /><stop offset=\"1\" stop-color=\"#10265f\" /></linearGradient>\n        <linearGradient id=\"kbv-bg-d\" x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0a1231\" /><stop offset=\".55\" stop-color=\"#070c22\" /><stop offset=\"1\" stop-color=\"#050815\" /></linearGradient>\n        <radialGradient id=\"kbv-core\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#2b7fff\" stop-opacity=\".55\" /><stop offset=\"1\" stop-color=\"#2b7fff\" stop-opacity=\"0\" /></radialGradient>\n        <radialGradient id=\"kbv-glow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#155dfc\" stop-opacity=\".5\" /><stop offset=\"1\" stop-color=\"#155dfc\" stop-opacity=\"0\" /></radialGradient>\n        <filter id=\"kbv-b1\"><feGaussianBlur stdDeviation=\"1.5\" /></filter>\n        <filter id=\"kbv-b2\"><feGaussianBlur stdDeviation=\"3\" /></filter>\n        <filter id=\"kbv-b3\"><feGaussianBlur stdDeviation=\"9\" /></filter>\n      </defs>\n      <component v-for=\"(e, i) in art.els\" :key=\"i\" :is=\"e.t\" v-bind=\"attrsOf(e)\" />\n    </svg>\n    <div v-if=\"$slots.default\" style=\"position:relative;height:100%\"><slot /></div>\n  </div>\n</template>\n","brand/brandMotifs.js":"/* Keybricks brand motifs — generative geometry for BrandVisual.\n   Every motif is authored against one canvas (1200×400) and expressed in fractions of W/H,\n   so a single component renders at any size. Deterministic: seeded PRNG per motif. */\n\nconst seeded = (s) => { let a = s >>> 0; return () => { a = (a * 1664525 + 1013904223) >>> 0; return a / 4294967296; }; };\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst clamp = (v, a, b) => Math.min(b, Math.max(a, v));\nconst n = (v) => Math.round(v * 10) / 10;\n\nexport const motifList = [\"orbit\", \"entropy\", \"focal\", \"manifold\", \"tesseract\", \"meridian\", \"ledger\"];\nexport const motifLabels = {\n  orbit: \"Orbit — concentric arcs\",\n  entropy: \"Entropy — crystal and dust\",\n  focal: \"Focal — depth-of-field lattice\",\n  manifold: \"Manifold — parametric surface\",\n  tesseract: \"Tesseract — nested cubes\",\n  meridian: \"Meridian — bent meridians\",\n  ledger: \"Ledger — scale and cursor\",\n};\n\nconst LINE = \"#51a2ff\", BRIGHT = \"#93c5fd\", HI = \"#dbeafe\";\n\n/** Returns { viewBox, els } — els are plain SVG element descriptors: { t, ...attrs }. */\nexport function buildMotif(motif = \"orbit\", W = 1200, H = 400) {\n  const rnd = seeded(motif.length * 7919 + 104729);\n  const els = [];\n  const push = (t, a) => els.push({ t, ...a });\n  const line = (d, o, w = 1, stroke = LINE, filter) => push(\"path\", { d, fill: \"none\", stroke, \"stroke-opacity\": o, \"stroke-width\": w, ...(filter ? { filter } : null) });\n  const dot = (x, y, r, fill, o) => push(\"circle\", { cx: n(x), cy: n(y), r: n(r), fill, \"fill-opacity\": o });\n  const ring = (x, y, r, o, w = 1.5, stroke = HI) => push(\"circle\", { cx: n(x), cy: n(y), r: n(r), fill: \"none\", stroke, \"stroke-opacity\": o, \"stroke-width\": w });\n  const marker = (x, y, s = 1) => { dot(x, y, 4.5 * s, HI, 1); ring(x, y, 12 * s, 0.55); ring(x, y, 25 * s, 0.22, 1.2, BRIGHT); };\n  const grid = (cols, rows, o = 0.14) => {\n    for (let i = 1; i < rows; i++) line(`M 0 ${n(H * i / rows)} L ${W} ${n(H * i / rows)}`, o, 1, BRIGHT);\n    for (let i = 1; i < cols; i++) line(`M ${n(W * i / cols)} 0 L ${n(W * i / cols)} ${H}`, o, 1, BRIGHT);\n  };\n\n  if (motif === \"orbit\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg)\" });\n    push(\"ellipse\", { cx: n(W * 0.72), cy: n(H * 0.2), rx: n(W * 0.36), ry: n(H * 0.78), fill: \"url(#kbv-core)\" });\n    push(\"ellipse\", { cx: n(W * 0.12), cy: n(H * 0.92), rx: n(W * 0.28), ry: n(H * 0.5), fill: \"url(#kbv-glow)\", opacity: 0.55 });\n    grid(4, 3);\n    const cx = W * 0.84, cy = H * 1.06;\n    const arc = (r, a1, a2) => {\n      const p = (a) => [cx + r * Math.cos(a * Math.PI / 180), cy + r * Math.sin(a * Math.PI / 180)];\n      const [x1, y1] = p(a1), [x2, y2] = p(a2);\n      return `M ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 0 1 ${n(x2)} ${n(y2)}`;\n    };\n    const wedge = (r, a1, a2) => `M ${n(cx)} ${n(cy)} L ${arc(r, a1, a2).slice(2)} Z`;\n    push(\"path\", { d: wedge(H * 1.24, 194, 248), fill: LINE, opacity: 0.2 });\n    push(\"path\", { d: wedge(H * 1.24, 248, 262), fill: BRIGHT, opacity: 0.16 });\n    push(\"path\", { d: wedge(H * 0.86, 206, 252), fill: \"#155dfc\", opacity: 0.42 });\n    [[1.62, 0.2], [1.28, 0.34], [0.98, 0.5], [0.7, 0.66], [0.44, 0.4]].forEach(([k, o], i) =>\n      line(arc(H * k, 178, 272), o, i === 2 ? 1.5 : 1, i > 1 ? BRIGHT : LINE));\n    marker(W * 0.34, H * 0.78);\n    dot(W * 0.25, H * 0.28, 3, HI, 0.9);\n    dot(W * 0.11, H * 0.6, 2.5, BRIGHT, 0.7);\n    dot(W * 0.75, H * 0.28, 2.5, HI, 0.6);\n  }\n\n  if (motif === \"entropy\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg-d)\" });\n    push(\"ellipse\", { cx: n(W * 0.74), cy: n(H * 0.35), rx: n(W * 0.4), ry: n(H * 0.82), fill: \"url(#kbv-core)\" });\n    push(\"ellipse\", { cx: n(W * 0.18), cy: n(H * 0.95), rx: n(W * 0.3), ry: n(H * 0.5), fill: \"url(#kbv-glow)\", opacity: 0.45 });\n    const NX = 11, NY = 6, NZ = 3, nuc = [8.2, 1.1, 2.05];\n    const sx = W * 0.042, sy = H * 0.072, sz = H * 0.132, nx = W * 0.745, ny = H * 0.335;\n    const iso = (x, y, z) => [nx + ((x - nuc[0]) - (y - nuc[1])) * sx, ny + ((x - nuc[0]) + (y - nuc[1])) * sy - (z - nuc[2]) * sz];\n    const nodes = new Map();\n    for (let x = 0; x < NX; x++) for (let y = 0; y < NY; y++) for (let z = 0; z < NZ; z++) {\n      const dn = Math.hypot((x - nuc[0]) * 0.92, (y - nuc[1]) * 0.72, (z - nuc[2]) * 1.15);\n      const order = clamp(1 - (dn - 1.5) / 5.4 + (rnd() - 0.5) * 0.24, 0, 1);\n      if (order < 0.1 && rnd() < 0.66) continue;\n      const c = iso(x, y, z), chaos = Math.pow(1 - order, 1.75);\n      nodes.set(`${x},${y},${z}`, { px: c[0] + (rnd() - 0.5) * W * 0.17 * chaos, py: c[1] + (rnd() - 0.5) * H * 0.52 * chaos, order, depth: x + y - z * 1.2 });\n    }\n    for (const [k, p] of nodes) {\n      const [x, y, z] = k.split(\",\").map(Number);\n      [[x + 1, y, z], [x, y + 1, z], [x, y, z + 1]].forEach((q) => {\n        const b = nodes.get(q.join(\",\"));\n        if (!b) return;\n        const o = Math.min(p.order, b.order);\n        if (o < 0.28 && rnd() < 0.62) return;\n        const near = clamp(1 - (p.depth + 5) / 16, 0, 1);\n        const d = `M ${n(p.px)} ${n(p.py)} L ${n(b.px)} ${n(b.py)}`;\n        if (o > 0.82) line(d, 0.34, 3.4, BRIGHT, \"url(#kbv-b2)\");\n        line(d, lerp(0.05, 0.62, Math.pow(o, 1.2)) * lerp(0.55, 1.15, near), lerp(1, 1.5, o), o > 0.7 ? BRIGHT : LINE);\n      });\n    }\n    for (const [, p] of nodes) {\n      const near = clamp(1 - (p.depth + 5) / 16, 0, 1);\n      dot(p.px, p.py, lerp(1.1, 3.2, near) * lerp(0.65, 1, p.order), p.order > 0.72 ? HI : BRIGHT, lerp(0.2, 0.95, p.order * 0.65 + near * 0.35));\n    }\n    for (let i = 0; i < 34; i++) {\n      const x = rnd() * W * 0.42, y = rnd() * H, L = lerp(W * 0.004, W * 0.022, rnd());\n      const a = Math.atan2(ny - y, nx - x) + (rnd() - 0.5) * 0.7;\n      line(`M ${n(x)} ${n(y)} L ${n(x + Math.cos(a) * L)} ${n(y + Math.sin(a) * L)}`, lerp(0.07, 0.3, rnd()), 1, BRIGHT, rnd() < 0.45 ? \"url(#kbv-b1)\" : undefined);\n    }\n    for (let i = 0; i < 18; i++) dot(rnd() * W * 0.46, rnd() * H, lerp(0.6, 1.7, rnd()), BRIGHT, lerp(0.12, 0.42, rnd()));\n    push(\"circle\", { cx: n(nx), cy: n(ny), r: n(H * 0.06), fill: LINE, \"fill-opacity\": 0.3, filter: \"url(#kbv-b3)\" });\n    marker(nx, ny);\n  }\n\n  if (motif === \"focal\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg-v)\" });\n    push(\"ellipse\", { cx: n(W * 0.5), cy: n(H * 0.3), rx: n(W * 0.42), ry: n(H * 0.5), fill: \"url(#kbv-glow)\" });\n    const R = 11, C = 15, pts = [];\n    for (let i = 0; i <= R; i++) {\n      const t = i / R, y = lerp(H * 0.26, H * 1.02, Math.pow(t, 1.4)), half = lerp(W * 0.17, W * 0.6, Math.pow(t, 1.08));\n      const row = [];\n      for (let j = 0; j <= C; j++) row.push([W * 0.48 + lerp(-half, half, j / C) - W * 0.04 * (1 - t), y - H * 0.03 * Math.sin(j / C * Math.PI * 1.6)]);\n      pts.push({ row, t });\n    }\n    pts.forEach(({ row, t }) => {\n      line(row.map(([x, y], j) => `${j ? \"L\" : \"M\"} ${n(x)} ${n(y)}`).join(\" \"), lerp(0.08, 0.42, t), 1, t > 0.6 ? BRIGHT : LINE);\n    });\n    for (let j = 0; j <= C; j += 1) {\n      line(pts.map(({ row }, i) => `${i ? \"L\" : \"M\"} ${n(row[j][0])} ${n(row[j][1])}`).join(\" \"), j % 3 === 0 ? 0.2 : 0.09, 1, LINE);\n    }\n    pts.forEach(({ row, t }) => row.forEach(([x, y]) => dot(x, y, lerp(1, 3, t), t > 0.55 ? HI : BRIGHT, lerp(0.22, 0.9, t))));\n    marker(W * 0.82, H * 0.34, 0.9);\n  }\n\n  if (motif === \"manifold\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg-v)\" });\n    push(\"ellipse\", { cx: n(W * 0.5), cy: n(H * 0.32), rx: n(W * 0.42), ry: n(H * 0.46), fill: \"url(#kbv-glow)\" });\n    const V = 9, U = 16, span = W * 0.46;\n    const f = (u, v) => {\n      const t = v / V, x = lerp(W * 0.5 - span * (0.35 + 0.65 * t), W * 0.5 + span * (0.35 + 0.65 * t), u / U);\n      const y = lerp(H * 0.27, H * 1.03, Math.pow(t, 1.5));\n      const z = Math.sin(u / U * Math.PI * 2.2 + t * 3) * Math.cos(t * 2.4) * H * 0.077 * (0.4 + t);\n      return [x, y - z, z];\n    };\n    for (let v = 0; v <= V; v++) {\n      let d = \"\", peak = null, pz = -1e9;\n      for (let u = 0; u <= U; u++) { const [x, y, z] = f(u, v); d += `${u ? \" L \" : \"M \"}${n(x)} ${n(y)}`; if (z > pz) { pz = z; peak = [x, y]; } }\n      const t = v / V;\n      line(d, lerp(0.15, 0.55, t), 1.2, t > 0.7 ? BRIGHT : LINE);\n      if (v === 6) marker(peak[0], peak[1], 0.9);\n    }\n    for (let u = 0; u <= U; u += 2) {\n      let d = \"\";\n      for (let v = 0; v <= V; v++) { const [x, y] = f(u, v); d += `${v ? \" L \" : \"M \"}${n(x)} ${n(y)}`; }\n      line(d, 0.14, 1.2);\n    }\n  }\n\n  if (motif === \"tesseract\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg)\" });\n    push(\"ellipse\", { cx: n(W * 0.5), cy: n(H * 0.46), rx: n(W * 0.4), ry: n(H * 0.56), fill: \"url(#kbv-core)\" });\n    const cx = W * 0.5, cy = H * 0.5;\n    const cube = (r, rt, o, c, w) => {\n      const p = [];\n      for (let i = 0; i < 4; i++) { const a = rt + i * Math.PI / 2; p.push([cx + r * Math.cos(a), cy + r * Math.sin(a) * 0.82]); }\n      const up = p.map(([x, y]) => [x, y - r * 0.62]);\n      for (let i = 0; i < 4; i++) {\n        const j = (i + 1) % 4;\n        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(p[j][0])} ${n(p[j][1])}`, o, w, c);\n        line(`M ${n(up[i][0])} ${n(up[i][1])} L ${n(up[j][0])} ${n(up[j][1])}`, o, w, c);\n        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(up[i][0])} ${n(up[i][1])}`, o * 0.8, w, c);\n      }\n      return { p, up };\n    };\n    const A = cube(H * 0.44, Math.PI / 4 + 0.2, 0.32, LINE, 1.2);\n    const B = cube(H * 0.218, Math.PI / 4 + 0.55, 0.75, BRIGHT, 1.4);\n    for (let i = 0; i < 4; i++) {\n      line(`M ${n(A.p[i][0])} ${n(A.p[i][1])} L ${n(B.p[i][0])} ${n(B.p[i][1])}`, 0.22, 1.2);\n      line(`M ${n(A.up[i][0])} ${n(A.up[i][1])} L ${n(B.up[i][0])} ${n(B.up[i][1])}`, 0.22, 1.2);\n    }\n    marker(B.up[1][0], B.up[1][1], 0.85);\n    dot(W * 0.14, H * 0.79, 2.5, HI, 0.65);\n    dot(W * 0.87, H * 0.2, 2.5, HI, 0.65);\n  }\n\n  if (motif === \"meridian\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg-v)\" });\n    push(\"ellipse\", { cx: n(W * 0.5), cy: n(H * 0.5), rx: n(W * 0.34), ry: n(H * 0.62), fill: \"url(#kbv-core)\" });\n    const cx = W * 0.5, cy = H * 0.5;\n    for (let j = 0; j <= 12; j++) {\n      const x0 = lerp(W * 0.06, W * 0.94, j / 12), k = (x0 - cx) / (W * 0.5);\n      let d = \"\";\n      for (let i = 0; i <= 24; i++) {\n        const y = lerp(-H * 0.04, H * 1.04, i / 24);\n        const bend = k * W * 0.055 * Math.exp(-Math.pow((y - cy) / (H * 0.42), 2));\n        d += `${i ? \" L \" : \"M \"}${n(x0 + bend)} ${n(y)}`;\n      }\n      line(d, lerp(0.42, 0.16, Math.abs(k)), Math.abs(k) < 0.2 ? 1.4 : 1, Math.abs(k) < 0.35 ? BRIGHT : LINE);\n    }\n    line(`M 0 ${n(cy)} L ${W} ${n(cy)}`, 0.14, 1, BRIGHT);\n    marker(cx, cy);\n    dot(W * 0.2, H * 0.22, 2.5, BRIGHT, 0.6);\n    dot(W * 0.84, H * 0.78, 2, BRIGHT, 0.5);\n  }\n\n  if (motif === \"ledger\") {\n    push(\"rect\", { width: W, height: H, fill: \"url(#kbv-bg-d)\" });\n    push(\"ellipse\", { cx: n(W * 0.5), cy: n(H * 1.04), rx: n(W * 0.46), ry: n(H * 0.66), fill: \"url(#kbv-glow)\" });\n    grid(8, 4, 0.12);\n    for (let i = 1; i < 40; i++) {\n      const x = W * i / 40, major = i % 5 === 0;\n      line(`M ${n(x)} ${n(H * 0.68)} L ${n(x)} ${n(H * 0.68 + (major ? H * 0.09 : H * 0.045))}`, major ? 0.5 : 0.24, 1, major ? BRIGHT : LINE);\n    }\n    const cur = W * 0.48;\n    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.6, 1.4, HI);\n    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.22, 4, BRIGHT, \"url(#kbv-b2)\");\n    marker(cur, H * 0.42, 0.9);\n    dot(W * 0.18, H * 0.22, 2.5, BRIGHT, 0.55);\n    dot(W * 0.72, H * 0.72, 2, BRIGHT, 0.45);\n  }\n\n  return { viewBox: `0 0 ${W} ${H}`, els };\n}\n"});

package/components/brand/BrandVisual.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-/** Generative brand visual — dark, geometric, always on-brand. Seven motifs, one 1200×400 canvas each, cropped to fill any box. */
-export type BrandMotif = "orbit" | "entropy" | "focal" | "manifold" | "tesseract" | "meridian" | "ledger";
-export interface BrandVisualProps {
-  /** Which motif to draw. Banner-leaning: orbit, entropy, ledger. Centred: focal, manifold, tesseract, meridian. */
-  motif?: BrandMotif;
-  width?: number | string;
-  height?: number | string;
-  /** Corner radius; pass 0 for a full-bleed hero. */
-  radius?: number | string;
-  /** "slice" crops to fill (default); "meet" letterboxes the whole canvas. */
-  fit?: "slice" | "meet";
-  /** Overlay content — headings, eyebrows. Sits above the artwork. */
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-}
-export declare function BrandVisual(props: BrandVisualProps): JSX.Element;

package/components/brand/BrandVisual.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { buildMotif, motifList, motifLabels } from "./brandMotifs.js";
-
-/** Generative brand visual. One canvas (1200×400) per motif, cropped to fill any box —
- *  use for page heroes, section headers and card headers. Always dark; never themed. */
-export function BrandVisual({ motif = "orbit", width = "100%", height = 200, radius = "var(--radius-lg)", fit = "slice", children, style }) {
-  const { viewBox, els } = buildMotif(motif, 1200, 400);
-  return (
-    <div style={{ position: "relative", width, height, borderRadius: radius, overflow: "hidden", background: "#060a1e", ...style }}>
-      <svg viewBox={viewBox} preserveAspectRatio={fit === "slice" ? "xMidYMid slice" : "xMidYMid meet"} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}>
-        <defs>
-          <linearGradient id="kbv-bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#060a1e" /><stop offset=".5" stopColor="#0b1638" /><stop offset="1" stopColor="#10265f" /></linearGradient>
-          <linearGradient id="kbv-bg-v" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#060a1e" /><stop offset=".55" stopColor="#0b1638" /><stop offset="1" stopColor="#10265f" /></linearGradient>
-          <linearGradient id="kbv-bg-d" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#0a1231" /><stop offset=".55" stopColor="#070c22" /><stop offset="1" stopColor="#050815" /></linearGradient>
-          <radialGradient id="kbv-core" cx=".5" cy=".5" r=".5"><stop offset="0" stopColor="#2b7fff" stopOpacity=".55" /><stop offset="1" stopColor="#2b7fff" stopOpacity="0" /></radialGradient>
-          <radialGradient id="kbv-glow" cx=".5" cy=".5" r=".5"><stop offset="0" stopColor="#155dfc" stopOpacity=".5" /><stop offset="1" stopColor="#155dfc" stopOpacity="0" /></radialGradient>
-          <filter id="kbv-b1"><feGaussianBlur stdDeviation="1.5" /></filter>
-          <filter id="kbv-b2"><feGaussianBlur stdDeviation="3" /></filter>
-          <filter id="kbv-b3"><feGaussianBlur stdDeviation="9" /></filter>
-        </defs>
-        {els.map(({ t, ...a }, i) => React.createElement(t, { key: i, ...a }))}
-      </svg>
-      {children ? <div style={{ position: "relative", height: "100%" }}>{children}</div> : null}
-    </div>
-  );
-}
-
-BrandVisual.motifs = motifList;
-BrandVisual.labels = motifLabels;

package/components/brand/BrandVisual.vue

@@ -1,34 +0,0 @@
-<script setup>
-// Generative brand visual. One canvas (1200×400) per motif, cropped to fill any box. Always dark; never themed.
-import { computed } from 'vue'
-import { buildMotif } from './brandMotifs.js'
-
-const props = defineProps({
-  motif: { type: String, default: 'orbit' },
-  width: { type: [Number, String], default: '100%' },
-  height: { type: [Number, String], default: 200 },
-  radius: { type: [Number, String], default: 'var(--radius-lg)' },
-  fit: { type: String, default: 'slice' },
-  style: Object
-})
-const art = computed(() => buildMotif(props.motif, 1200, 400))
-const attrsOf = (e) => { const { t, ...a } = e; return a }
-</script>
-<template>
-  <div :style="{ position:'relative', width: props.width, height: props.height, borderRadius: props.radius, overflow:'hidden', background:'#060a1e', ...props.style }">
-    <svg :viewBox="art.viewBox" :preserveAspectRatio="props.fit === 'slice' ? 'xMidYMid slice' : 'xMidYMid meet'" style="position:absolute;inset:0;width:100%;height:100%;display:block">
-      <defs>
-        <linearGradient id="kbv-bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#060a1e" /><stop offset=".5" stop-color="#0b1638" /><stop offset="1" stop-color="#10265f" /></linearGradient>
-        <linearGradient id="kbv-bg-v" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#060a1e" /><stop offset=".55" stop-color="#0b1638" /><stop offset="1" stop-color="#10265f" /></linearGradient>
-        <linearGradient id="kbv-bg-d" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0a1231" /><stop offset=".55" stop-color="#070c22" /><stop offset="1" stop-color="#050815" /></linearGradient>
-        <radialGradient id="kbv-core" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#2b7fff" stop-opacity=".55" /><stop offset="1" stop-color="#2b7fff" stop-opacity="0" /></radialGradient>
-        <radialGradient id="kbv-glow" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#155dfc" stop-opacity=".5" /><stop offset="1" stop-color="#155dfc" stop-opacity="0" /></radialGradient>
-        <filter id="kbv-b1"><feGaussianBlur stdDeviation="1.5" /></filter>
-        <filter id="kbv-b2"><feGaussianBlur stdDeviation="3" /></filter>
-        <filter id="kbv-b3"><feGaussianBlur stdDeviation="9" /></filter>
-      </defs>
-      <component v-for="(e, i) in art.els" :key="i" :is="e.t" v-bind="attrsOf(e)" />
-    </svg>
-    <div v-if="$slots.default" style="position:relative;height:100%"><slot /></div>
-  </div>
-</template>

package/components/brand/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x120" name="Brand dir" subtitle="Full card: Brand → Brand Visuals" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { BrandVisual } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<BrandVisual motif="orbit" height={88}/>);
-</script></body></html>

package/components/brand/brandMotifs.js

@@ -1,210 +0,0 @@
-/* Keybricks brand motifs — generative geometry for BrandVisual.
-   Every motif is authored against one canvas (1200×400) and expressed in fractions of W/H,
-   so a single component renders at any size. Deterministic: seeded PRNG per motif. */
-
-const seeded = (s) => { let a = s >>> 0; return () => { a = (a * 1664525 + 1013904223) >>> 0; return a / 4294967296; }; };
-const lerp = (a, b, t) => a + (b - a) * t;
-const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
-const n = (v) => Math.round(v * 10) / 10;
-
-export const motifList = ["orbit", "entropy", "focal", "manifold", "tesseract", "meridian", "ledger"];
-export const motifLabels = {
-  orbit: "Orbit — concentric arcs",
-  entropy: "Entropy — crystal and dust",
-  focal: "Focal — depth-of-field lattice",
-  manifold: "Manifold — parametric surface",
-  tesseract: "Tesseract — nested cubes",
-  meridian: "Meridian — bent meridians",
-  ledger: "Ledger — scale and cursor",
-};
-
-const LINE = "#51a2ff", BRIGHT = "#93c5fd", HI = "#dbeafe";
-
-/** Returns { viewBox, els } — els are plain SVG element descriptors: { t, ...attrs }. */
-export function buildMotif(motif = "orbit", W = 1200, H = 400) {
-  const rnd = seeded(motif.length * 7919 + 104729);
-  const els = [];
-  const push = (t, a) => els.push({ t, ...a });
-  const line = (d, o, w = 1, stroke = LINE, filter) => push("path", { d, fill: "none", stroke, "stroke-opacity": o, "stroke-width": w, ...(filter ? { filter } : null) });
-  const dot = (x, y, r, fill, o) => push("circle", { cx: n(x), cy: n(y), r: n(r), fill, "fill-opacity": o });
-  const ring = (x, y, r, o, w = 1.5, stroke = HI) => push("circle", { cx: n(x), cy: n(y), r: n(r), fill: "none", stroke, "stroke-opacity": o, "stroke-width": w });
-  const marker = (x, y, s = 1) => { dot(x, y, 4.5 * s, HI, 1); ring(x, y, 12 * s, 0.55); ring(x, y, 25 * s, 0.22, 1.2, BRIGHT); };
-  const grid = (cols, rows, o = 0.14) => {
-    for (let i = 1; i < rows; i++) line(`M 0 ${n(H * i / rows)} L ${W} ${n(H * i / rows)}`, o, 1, BRIGHT);
-    for (let i = 1; i < cols; i++) line(`M ${n(W * i / cols)} 0 L ${n(W * i / cols)} ${H}`, o, 1, BRIGHT);
-  };
-
-  if (motif === "orbit") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg)" });
-    push("ellipse", { cx: n(W * 0.72), cy: n(H * 0.2), rx: n(W * 0.36), ry: n(H * 0.78), fill: "url(#kbv-core)" });
-    push("ellipse", { cx: n(W * 0.12), cy: n(H * 0.92), rx: n(W * 0.28), ry: n(H * 0.5), fill: "url(#kbv-glow)", opacity: 0.55 });
-    grid(4, 3);
-    const cx = W * 0.84, cy = H * 1.06;
-    const arc = (r, a1, a2) => {
-      const p = (a) => [cx + r * Math.cos(a * Math.PI / 180), cy + r * Math.sin(a * Math.PI / 180)];
-      const [x1, y1] = p(a1), [x2, y2] = p(a2);
-      return `M ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 0 1 ${n(x2)} ${n(y2)}`;
-    };
-    const wedge = (r, a1, a2) => `M ${n(cx)} ${n(cy)} L ${arc(r, a1, a2).slice(2)} Z`;
-    push("path", { d: wedge(H * 1.24, 194, 248), fill: LINE, opacity: 0.2 });
-    push("path", { d: wedge(H * 1.24, 248, 262), fill: BRIGHT, opacity: 0.16 });
-    push("path", { d: wedge(H * 0.86, 206, 252), fill: "#155dfc", opacity: 0.42 });
-    [[1.62, 0.2], [1.28, 0.34], [0.98, 0.5], [0.7, 0.66], [0.44, 0.4]].forEach(([k, o], i) =>
-      line(arc(H * k, 178, 272), o, i === 2 ? 1.5 : 1, i > 1 ? BRIGHT : LINE));
-    marker(W * 0.34, H * 0.78);
-    dot(W * 0.25, H * 0.28, 3, HI, 0.9);
-    dot(W * 0.11, H * 0.6, 2.5, BRIGHT, 0.7);
-    dot(W * 0.75, H * 0.28, 2.5, HI, 0.6);
-  }
-
-  if (motif === "entropy") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg-d)" });
-    push("ellipse", { cx: n(W * 0.74), cy: n(H * 0.35), rx: n(W * 0.4), ry: n(H * 0.82), fill: "url(#kbv-core)" });
-    push("ellipse", { cx: n(W * 0.18), cy: n(H * 0.95), rx: n(W * 0.3), ry: n(H * 0.5), fill: "url(#kbv-glow)", opacity: 0.45 });
-    const NX = 11, NY = 6, NZ = 3, nuc = [8.2, 1.1, 2.05];
-    const sx = W * 0.042, sy = H * 0.072, sz = H * 0.132, nx = W * 0.745, ny = H * 0.335;
-    const iso = (x, y, z) => [nx + ((x - nuc[0]) - (y - nuc[1])) * sx, ny + ((x - nuc[0]) + (y - nuc[1])) * sy - (z - nuc[2]) * sz];
-    const nodes = new Map();
-    for (let x = 0; x < NX; x++) for (let y = 0; y < NY; y++) for (let z = 0; z < NZ; z++) {
-      const dn = Math.hypot((x - nuc[0]) * 0.92, (y - nuc[1]) * 0.72, (z - nuc[2]) * 1.15);
-      const order = clamp(1 - (dn - 1.5) / 5.4 + (rnd() - 0.5) * 0.24, 0, 1);
-      if (order < 0.1 && rnd() < 0.66) continue;
-      const c = iso(x, y, z), chaos = Math.pow(1 - order, 1.75);
-      nodes.set(`${x},${y},${z}`, { px: c[0] + (rnd() - 0.5) * W * 0.17 * chaos, py: c[1] + (rnd() - 0.5) * H * 0.52 * chaos, order, depth: x + y - z * 1.2 });
-    }
-    for (const [k, p] of nodes) {
-      const [x, y, z] = k.split(",").map(Number);
-      [[x + 1, y, z], [x, y + 1, z], [x, y, z + 1]].forEach((q) => {
-        const b = nodes.get(q.join(","));
-        if (!b) return;
-        const o = Math.min(p.order, b.order);
-        if (o < 0.28 && rnd() < 0.62) return;
-        const near = clamp(1 - (p.depth + 5) / 16, 0, 1);
-        const d = `M ${n(p.px)} ${n(p.py)} L ${n(b.px)} ${n(b.py)}`;
-        if (o > 0.82) line(d, 0.34, 3.4, BRIGHT, "url(#kbv-b2)");
-        line(d, lerp(0.05, 0.62, Math.pow(o, 1.2)) * lerp(0.55, 1.15, near), lerp(1, 1.5, o), o > 0.7 ? BRIGHT : LINE);
-      });
-    }
-    for (const [, p] of nodes) {
-      const near = clamp(1 - (p.depth + 5) / 16, 0, 1);
-      dot(p.px, p.py, lerp(1.1, 3.2, near) * lerp(0.65, 1, p.order), p.order > 0.72 ? HI : BRIGHT, lerp(0.2, 0.95, p.order * 0.65 + near * 0.35));
-    }
-    for (let i = 0; i < 34; i++) {
-      const x = rnd() * W * 0.42, y = rnd() * H, L = lerp(W * 0.004, W * 0.022, rnd());
-      const a = Math.atan2(ny - y, nx - x) + (rnd() - 0.5) * 0.7;
-      line(`M ${n(x)} ${n(y)} L ${n(x + Math.cos(a) * L)} ${n(y + Math.sin(a) * L)}`, lerp(0.07, 0.3, rnd()), 1, BRIGHT, rnd() < 0.45 ? "url(#kbv-b1)" : undefined);
-    }
-    for (let i = 0; i < 18; i++) dot(rnd() * W * 0.46, rnd() * H, lerp(0.6, 1.7, rnd()), BRIGHT, lerp(0.12, 0.42, rnd()));
-    push("circle", { cx: n(nx), cy: n(ny), r: n(H * 0.06), fill: LINE, "fill-opacity": 0.3, filter: "url(#kbv-b3)" });
-    marker(nx, ny);
-  }
-
-  if (motif === "focal") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
-    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.3), rx: n(W * 0.42), ry: n(H * 0.5), fill: "url(#kbv-glow)" });
-    const R = 11, C = 15, pts = [];
-    for (let i = 0; i <= R; i++) {
-      const t = i / R, y = lerp(H * 0.26, H * 1.02, Math.pow(t, 1.4)), half = lerp(W * 0.17, W * 0.6, Math.pow(t, 1.08));
-      const row = [];
-      for (let j = 0; j <= C; j++) row.push([W * 0.48 + lerp(-half, half, j / C) - W * 0.04 * (1 - t), y - H * 0.03 * Math.sin(j / C * Math.PI * 1.6)]);
-      pts.push({ row, t });
-    }
-    pts.forEach(({ row, t }) => {
-      line(row.map(([x, y], j) => `${j ? "L" : "M"} ${n(x)} ${n(y)}`).join(" "), lerp(0.08, 0.42, t), 1, t > 0.6 ? BRIGHT : LINE);
-    });
-    for (let j = 0; j <= C; j += 1) {
-      line(pts.map(({ row }, i) => `${i ? "L" : "M"} ${n(row[j][0])} ${n(row[j][1])}`).join(" "), j % 3 === 0 ? 0.2 : 0.09, 1, LINE);
-    }
-    pts.forEach(({ row, t }) => row.forEach(([x, y]) => dot(x, y, lerp(1, 3, t), t > 0.55 ? HI : BRIGHT, lerp(0.22, 0.9, t))));
-    marker(W * 0.82, H * 0.34, 0.9);
-  }
-
-  if (motif === "manifold") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
-    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.32), rx: n(W * 0.42), ry: n(H * 0.46), fill: "url(#kbv-glow)" });
-    const V = 9, U = 16, span = W * 0.46;
-    const f = (u, v) => {
-      const t = v / V, x = lerp(W * 0.5 - span * (0.35 + 0.65 * t), W * 0.5 + span * (0.35 + 0.65 * t), u / U);
-      const y = lerp(H * 0.27, H * 1.03, Math.pow(t, 1.5));
-      const z = Math.sin(u / U * Math.PI * 2.2 + t * 3) * Math.cos(t * 2.4) * H * 0.077 * (0.4 + t);
-      return [x, y - z, z];
-    };
-    for (let v = 0; v <= V; v++) {
-      let d = "", peak = null, pz = -1e9;
-      for (let u = 0; u <= U; u++) { const [x, y, z] = f(u, v); d += `${u ? " L " : "M "}${n(x)} ${n(y)}`; if (z > pz) { pz = z; peak = [x, y]; } }
-      const t = v / V;
-      line(d, lerp(0.15, 0.55, t), 1.2, t > 0.7 ? BRIGHT : LINE);
-      if (v === 6) marker(peak[0], peak[1], 0.9);
-    }
-    for (let u = 0; u <= U; u += 2) {
-      let d = "";
-      for (let v = 0; v <= V; v++) { const [x, y] = f(u, v); d += `${v ? " L " : "M "}${n(x)} ${n(y)}`; }
-      line(d, 0.14, 1.2);
-    }
-  }
-
-  if (motif === "tesseract") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg)" });
-    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.46), rx: n(W * 0.4), ry: n(H * 0.56), fill: "url(#kbv-core)" });
-    const cx = W * 0.5, cy = H * 0.5;
-    const cube = (r, rt, o, c, w) => {
-      const p = [];
-      for (let i = 0; i < 4; i++) { const a = rt + i * Math.PI / 2; p.push([cx + r * Math.cos(a), cy + r * Math.sin(a) * 0.82]); }
-      const up = p.map(([x, y]) => [x, y - r * 0.62]);
-      for (let i = 0; i < 4; i++) {
-        const j = (i + 1) % 4;
-        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(p[j][0])} ${n(p[j][1])}`, o, w, c);
-        line(`M ${n(up[i][0])} ${n(up[i][1])} L ${n(up[j][0])} ${n(up[j][1])}`, o, w, c);
-        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(up[i][0])} ${n(up[i][1])}`, o * 0.8, w, c);
-      }
-      return { p, up };
-    };
-    const A = cube(H * 0.44, Math.PI / 4 + 0.2, 0.32, LINE, 1.2);
-    const B = cube(H * 0.218, Math.PI / 4 + 0.55, 0.75, BRIGHT, 1.4);
-    for (let i = 0; i < 4; i++) {
-      line(`M ${n(A.p[i][0])} ${n(A.p[i][1])} L ${n(B.p[i][0])} ${n(B.p[i][1])}`, 0.22, 1.2);
-      line(`M ${n(A.up[i][0])} ${n(A.up[i][1])} L ${n(B.up[i][0])} ${n(B.up[i][1])}`, 0.22, 1.2);
-    }
-    marker(B.up[1][0], B.up[1][1], 0.85);
-    dot(W * 0.14, H * 0.79, 2.5, HI, 0.65);
-    dot(W * 0.87, H * 0.2, 2.5, HI, 0.65);
-  }
-
-  if (motif === "meridian") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
-    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.5), rx: n(W * 0.34), ry: n(H * 0.62), fill: "url(#kbv-core)" });
-    const cx = W * 0.5, cy = H * 0.5;
-    for (let j = 0; j <= 12; j++) {
-      const x0 = lerp(W * 0.06, W * 0.94, j / 12), k = (x0 - cx) / (W * 0.5);
-      let d = "";
-      for (let i = 0; i <= 24; i++) {
-        const y = lerp(-H * 0.04, H * 1.04, i / 24);
-        const bend = k * W * 0.055 * Math.exp(-Math.pow((y - cy) / (H * 0.42), 2));
-        d += `${i ? " L " : "M "}${n(x0 + bend)} ${n(y)}`;
-      }
-      line(d, lerp(0.42, 0.16, Math.abs(k)), Math.abs(k) < 0.2 ? 1.4 : 1, Math.abs(k) < 0.35 ? BRIGHT : LINE);
-    }
-    line(`M 0 ${n(cy)} L ${W} ${n(cy)}`, 0.14, 1, BRIGHT);
-    marker(cx, cy);
-    dot(W * 0.2, H * 0.22, 2.5, BRIGHT, 0.6);
-    dot(W * 0.84, H * 0.78, 2, BRIGHT, 0.5);
-  }
-
-  if (motif === "ledger") {
-    push("rect", { width: W, height: H, fill: "url(#kbv-bg-d)" });
-    push("ellipse", { cx: n(W * 0.5), cy: n(H * 1.04), rx: n(W * 0.46), ry: n(H * 0.66), fill: "url(#kbv-glow)" });
-    grid(8, 4, 0.12);
-    for (let i = 1; i < 40; i++) {
-      const x = W * i / 40, major = i % 5 === 0;
-      line(`M ${n(x)} ${n(H * 0.68)} L ${n(x)} ${n(H * 0.68 + (major ? H * 0.09 : H * 0.045))}`, major ? 0.5 : 0.24, 1, major ? BRIGHT : LINE);
-    }
-    const cur = W * 0.48;
-    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.6, 1.4, HI);
-    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.22, 4, BRIGHT, "url(#kbv-b2)");
-    marker(cur, H * 0.42, 0.9);
-    dot(W * 0.18, H * 0.22, 2.5, BRIGHT, 0.55);
-    dot(W * 0.72, H * 0.72, 2, BRIGHT, 0.45);
-  }
-
-  return { viewBox: `0 0 ${W} ${H}`, els };
-}

package/components/buttons/_dir.card.html

@@ -1,13 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x70" name="Buttons dir" subtitle="Full card: Components → Button" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-<script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
-<body><div id="root"></div>
-<script type="text/babel">
-const { Button } = window.KeybricksDesignSystem_71231a;
-ReactDOM.createRoot(document.getElementById("root")).render(<Button icon="send">Submit</Button>);
-</script></body></html>

package/components/charts/ChartKit.vue

@@ -1,47 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { SERIES } from './chart-geometry.js'
-/**
- * Shared chart furniture for the Vue charts — one component, two shapes via `kind`
- * ("legend" | "tooltip"), so a single import covers both. The React side exposes these
- * as ChartLegend / ChartTooltip.
- */
-const props = defineProps({
-  kind: { type: String, default: 'legend' },
-  items: { type: Array, default: () => [] },
-  hidden: { type: Array, default: () => [] },
-  align: { type: String, default: 'left' },
-  x: Number,
-  y: Number,
-  title: String,
-  rows: { type: Array, default: () => [] },
-  flip: Boolean,
-  style: Object,
-})
-const emit = defineEmits(['toggle'])
-const tipStyle = computed(() => ({
-  position: 'absolute', left: props.x + 'px', top: props.y + 'px',
-  transform: props.flip ? 'translate(calc(-100% - 10px),-50%)' : 'translate(10px,-50%)',
-  pointerEvents: 'none', zIndex: 5, background: 'var(--bg-surface)',
-  border: '1px solid var(--border-card)', borderRadius: 'var(--radius-md)',
-  boxShadow: 'var(--shadow-menu)', padding: '7px 10px', minWidth: '90px',
-  lineHeight: 'normal', whiteSpace: 'nowrap',
-}))
-</script>
-<template>
-  <div v-if="kind === 'tooltip'" :style="tipStyle">
-    <div v-if="title != null" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px">{{ title }}</div>
-    <div v-for="(r,i) in rows" :key="i" style="display:flex;align-items:center;gap:6px;padding:1px 0">
-      <span v-if="r.color" :style="{width:'7px',height:'7px',borderRadius:'2px',background:r.color,flexShrink:0}"/>
-      <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ r.label }}</span>
-      <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ r.value }}</span>
-    </div>
-  </div>
-  <div v-else :style="{display:'flex',flexWrap:'wrap',gap:'4px 14px',justifyContent:align==='right'?'flex-end':'flex-start',lineHeight:'normal',...style}">
-    <span v-for="(it,i) in items" :key="it.label" role="button" tabindex="0" @click="emit('toggle', it.label)"
-      :style="{display:'inline-flex',alignItems:'center',gap:'6px',cursor:'pointer',opacity:hidden.includes(it.label)?0.4:1,transition:'var(--t-hover)'}">
-      <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:it.color||SERIES[i%SERIES.length],flexShrink:0}"/>
-      <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-xs)',color:'var(--text-secondary)',textDecoration:hidden.includes(it.label)?'line-through':'none'}">{{ it.label }}</span>
-    </span>
-  </div>
-</template>

package/components/charts/_dir.card.html

@@ -1,7 +0,0 @@
-<!-- @dsCard group="Directory Index" viewport="700x240" name="charts/" subtitle="22 chart types · 3 size tiers · chart-geometry core + ChartKit furniture" -->
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
-<style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans)}.g{display:flex;flex-wrap:wrap;gap:8px}.p{border:1px solid var(--border-card);border-radius:var(--radius-md);padding:6px 10px;font-size:var(--text-xs);color:var(--text-body);font-family:var(--font-mono)}.h{font-size:var(--text-sm);line-height:19px;color:var(--text-secondary);padding-bottom:12px}</style></head>
-<body><div class="h">components/charts/ — the charting module. Every type has a live card under the <b>Charts</b> group; sizing tiers and color rules in <span style="font-family:var(--font-mono)">charts.prompt.md</span>. <b>WorldMap</b> additionally needs the pinned d3 + topojson tags on the page.</div>
-<div class="g"><span class="p">Sparkline</span><span class="p">LineChart</span><span class="p">BarChart</span><span class="p">BarList</span><span class="p">DonutChart</span><span class="p">ScatterChart</span><span class="p">HeatmapChart</span><span class="p">WaterfallChart</span><span class="p">BulletChart</span><span class="p">GaugeChart</span><span class="p">FunnelChart</span><span class="p">TreemapChart</span><span class="p">RadarChart</span><span class="p">Histogram</span><span class="p">BoxPlot</span><span class="p">ParetoChart</span><span class="p">CandlestickChart</span><span class="p">SankeyChart</span><span class="p">ChordChart</span><span class="p">SunburstChart</span><span class="p">WorldMap</span><span class="p">GanttChart</span><span class="p">ChartKit</span></div>
-</body></html>