@keyfunc/keybricks-ds 2.5.0 → 2.5.1

package/_src/usage-code.js

@@ -0,0 +1,737 @@
+/* Usage code for component cards — the "Show code" bar under each example, like Element UI's demos.
+   It reads the card's live React tree (fibers), finds the outermost design-system component instances, groups them by the
+   example block they sit in, and prints the code that builds that example: React (JSX) and Vue 3 (SFC), each with its import from
+   the package entry ('@keyfunc/keybricks-ds' / '@keyfunc/keybricks-ds/vue'). Code is generated when the bar opens, from the props
+   the components have at that moment, so it always matches what is on screen. Loaded on demand by view-source.js; lives in _src/
+   so it stays out of _ds_bundle.js. */
+(function () {
+  if (window.KBUsage) return;
+  var NSN = 'KeybricksDesignSystem_71231a';
+  var VUE = new Set('ActionChip,Button,ButtonGroup,IconButton,Bar3D,BarChart,BarList,BoxPlot,BulletChart,CandlestickChart,ChartLegend,ChartTooltip,ChordChart,DonutChart,FunnelChart,GanttChart,GaugeChart,HeatmapChart,Histogram,LineChart,ParetoChart,Pie3D,PlotGrid,RadarChart,Ribbon3D,SankeyChart,Scatter3D,ScatterChart,Sparkline,SunburstChart,Surface3D,TreemapChart,WaterfallChart,WorldMap,XLabels,CodeBlock,DiffValue,FilterBar,KeyValue,KeyValueList,ListRow,Pagination,SmartTable,Spreadsheet,Table,AreaChart,Avatar,AvatarGroup,Badge,Card,Divider,Donut,IconTile,Kbd,MiniBars,ProgressBar,StatCard,StatusBadge,Tag,Accordion,ActivityItem,Alert,Banner,ContextMenu,DotActivity,Drawer,EmptyState,LogViewer,Menu,Modal,Skeleton,Spinner,Stepper,Timeline,Toast,ToastStack,Tooltip,Checkbox,Combobox,DatePicker,Dropzone,Field,Input,MultiSelect,NumberStepper,Radio,RadioGroup,RelativeTimePicker,SearchInput,Select,Slider,Switch,Textarea,Icon,Lucide,Unicon,Breadcrumb,DocTree,PageHeading,PageToolbar,SidePanel,Sidebar,ThemeToggle,TopBar,Tree,UserMenu,ConfigPanel,DataPreview,NodeCard,PaletteItem,PaletteListItem,PalettePanel,PipelineCanvas,Port,PortLabel,ZoomControls,CountBadge,PanelTabs,PillTabs,SegmentedControl,Tabs,ViewToggle'.split(','));
+  var L = {
+    show: ['Show code', '显示代码', 'コードを表示'], hide: ['Hide code', '隐藏代码', 'コードを隠す'],
+    copy: ['Copy', '复制', 'コピー'], copied: ['Copied', '已复制', 'コピー済み'],
+    novue: ['This example uses components that have no Vue version yet: ', '此示例用到的组件暂无 Vue 版本：', 'この例のコンポーネントには Vue 版がまだありません：'],
+    example: ['Example', '示例', '例'], tiers: ['Size tiers — the control inherits data-size from its region', '尺寸档位 — 控件继承所在区域的 data-size', 'サイズ段階 — コントロールは領域の data-size を継承']
+  };
+  var lang = 'en', fw = 'react';
+  try { fw = localStorage.getItem('kb-code-fw') === 'vue' ? 'vue' : 'react'; } catch (e) {}
+  function tr(k) { var v = L[k]; return lang === 'zh' ? v[1] : lang === 'ja' ? v[2] : lang === 'both' ? v[0] + ' · ' + v[1] : v[0]; }
+  var bars = [];
+  window.addEventListener('message', function (e) { var m = e.data; if (m && m.kb === 'lang' && m.lang && m.lang !== lang) { lang = m.lang; bars.forEach(function (b) { b.paint(); }); } });
+
+  /* ---------- component names ---------- */
+  var names = new Map();
+  function buildNames() { var ns = window[NSN] || {}; Object.keys(ns).forEach(function (k) { var v = ns[k]; if (/^[A-Z]/.test(k) && v && (typeof v === 'function' || typeof v === 'object') && !names.has(v)) names.set(v, k); }); }
+  function dsName(t) { return t && names.has(t) ? names.get(t) : null; }
+  var VALUE_KEYS = { value: 1, checked: 1, selected: 1, open: 1, active: 1, page: 1, activeKey: 1, current: 1, expanded: 1, tab: 1, values: 1, date: 1, query: 1 };
+
+  /* ---------- fiber walk ---------- */
+  /* The container keeps the first HostRoot fiber; the live tree hangs off its FiberRoot's current. */
+  function rootFiber(el) { var k = Object.keys(el).find(function (k) { return k.indexOf('__reactContainer$') === 0; }); if (!k) return null; var hr = el[k]; return hr.stateNode && hr.stateNode.current ? hr.stateNode.current : hr; }
+  function collect(f, out, live) {
+    for (; f; f = f.sibling) {
+      var n = dsName(f.elementType) || dsName(f.type);
+      if (n) { out.push({ fiber: f, name: n, live: live }); continue; }
+      collect(f.child, out, f.type && f.type === window.KBLive ? f : live);
+    }
+  }
+  function domOf(f) { if (f.stateNode && f.stateNode.nodeType === 1) return f.stateNode; for (var c = f.child; c; c = c.sibling) { var d = domOf(c); if (d) return d; } return null; }
+  function isRow(el) { var cs = getComputedStyle(el); return (cs.display === 'flex' || cs.display === 'inline-flex') && cs.flexDirection.indexOf('row') === 0; }
+  function isFlow(el) { var cs = getComputedStyle(el); return cs.display === 'block' || cs.display === 'flow-root' || ((cs.display === 'flex' || cs.display === 'inline-flex') && cs.flexDirection.indexOf('column') === 0); }
+  /* Where an example's bar goes: the nearest block that flows top-to-bottom, or the section (.kb-sec / .sec / .case / section) holding it. */
+  function place(el, root) {
+    var tiers = el.closest('.kb-tiers');
+    var rowNode = tiers || (el.parentElement && el.parentElement !== root && isRow(el.parentElement) ? el.parentElement : el);
+    var node = rowNode;
+    while (node.parentElement && node.parentElement !== root && root.contains(node.parentElement) && !isFlow(node.parentElement)) node = node.parentElement;
+    var sec = node.closest('.kb-sec,.sec,.case,section');
+    var anchor = node, mode = 'after';
+    if (sec && sec !== root && root.contains(sec)) { anchor = sec; mode = 'append'; }
+    /* The bar needs a full-width line of its own: never inside a horizontal row, a multi-column grid or a narrow cell.
+       Climb until the box it lands in is a single column at least 320px wide; examples sharing that box share one bar. */
+    for (var g = 0; g < 10; g++) {
+      if (mode === 'append') { if (flexRow(anchor) || anchor.getBoundingClientRect().width < 280) { mode = 'after'; continue; } break; }
+      var box = anchor.parentElement;
+      if (!box || box === root.parentElement || (box !== root && !root.contains(box))) break;
+      var bw = box.getBoundingClientRect().width, aw = anchor.getBoundingClientRect().width;
+      /* One of several cells side by side in a grid: the bar goes under that grid row, after its last cell, spanning the row —
+         cells on the same row share it. (A label | content row is not side by side: its content cell keeps its own bar.) */
+      if (gridCols(box) > 1 && aw < bw * 0.6) {
+        var top = anchor.getBoundingClientRect().top, last = anchor;
+        for (var s = anchor.nextElementSibling; s; s = s.nextElementSibling) { if (s.hasAttribute('data-kb-code')) continue; if (Math.abs(s.getBoundingClientRect().top - top) < 4) last = s; else break; }
+        anchor = last; break;
+      }
+      /* out of a horizontal row or a narrow box */
+      if (!(flexRow(box) || (box !== root && bw < 280)) || box === root) break;
+      anchor = box;
+    }
+    return { anchor: anchor, mode: mode, row: rowNode, tiers: tiers };
+  }
+  function flexRow(el) { var cs = getComputedStyle(el); return (cs.display === 'flex' || cs.display === 'inline-flex') && cs.flexDirection.indexOf('row') === 0; }
+  function gridCols(el) { var cs = getComputedStyle(el); return cs.display.indexOf('grid') >= 0 ? cs.gridTemplateColumns.split(' ').filter(Boolean).length : 0; }
+  var LABEL = '.lbl,.k,.kb-k,.kb-h,.kb-th,h3,h4,.cap,.hint';
+  function labelFor(u, stop) {
+    if (u.name === 'Field' && typeof u.props.label === 'string') return u.props.label;
+    for (var n = u.row; n && n !== stop.parentElement; n = n.parentElement) {
+      for (var s = n.previousElementSibling; s; s = s.previousElementSibling) {
+        if (s.matches && s.matches(LABEL)) return s.textContent.trim();
+        if (s.querySelector && s.closest('[data-kb-code]') == null) { var q = s.matches('div,span') && s.children.length < 3 ? s.querySelector(LABEL) : null; if (q) return q.textContent.trim(); }
+        break;
+      }
+      if (n === stop) break;
+    }
+    var first = stop.querySelector && stop.querySelector(LABEL); return first ? first.textContent.trim() : '';
+  }
+  function scan(root) {
+    buildNames();
+    var rf = rootFiber(root), units = [];
+    if (!rf) return units;
+    collect(rf.child || rf, units, null);
+    units.forEach(function (u) { u.el = domOf(u.fiber); u.props = u.fiber.memoizedProps || {}; if (u.el && root.contains(u.el) && !u.el.closest('[data-kb-code]')) { var p = place(u.el, root); u.anchor = p.anchor; u.mode = p.mode; u.row = p.row; u.tiers = p.tiers; } });
+    /* A fixed overlay (ToastStack, a floating panel) belongs to the example that opens it: the previous unit on the page. */
+    var prev = null;
+    units.forEach(function (u) {
+      if (!u.anchor) return;
+      if (getComputedStyle(u.el).position === 'fixed') { if (prev) { u.anchor = prev.anchor; u.mode = prev.mode; u.row = prev.row; u.tiers = prev.tiers; u.fixed = true; } }
+      else prev = u;
+    });
+    return units.filter(function (u) { return u.anchor; });
+  }
+
+  /* ---------- printing ---------- */
+  var IDENT = /^[A-Za-z_$][\w$]*$/;
+  function q(s) { return "'" + String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n') + "'"; }
+  function kebab(k) { return k.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); }); }
+  function isEl(v) { return v && typeof v === 'object' && v.$$typeof && v.props !== undefined; }
+  /* The card's authored JSX: dev React keeps each element's source position (_source / _debugSource), so an attribute's
+     expression can be printed exactly as written — arrows, spreads and JSX intact, not Babel's ES5 output. */
+  var SRC = null;
+  function srcText() { if (SRC == null) { var s = document.querySelector('script[type="text/babel"]'); SRC = s ? s.textContent : ''; } return SRC; }
+  function offsetOf(pos) { var s = srcText(); if (!s || !pos || !pos.lineNumber) return -1; var i = 0; for (var l = 1; l < pos.lineNumber; l++) { i = s.indexOf('\n', i); if (i < 0) return -1; i++; } i += Math.max(0, (pos.columnNumber || 1) - 1); var j = s.indexOf('<', i); return j >= 0 && j - i < 4 ? j : s.lastIndexOf('<', i + 1); }
+  function balanced(s, i) { var d = 0, q = null; for (var k = i; k < s.length; k++) { var c = s[k]; if (q) { if (c === '\\') { k++; continue; } if (c === q) q = null; continue; } if (c === '"' || c === "'" || c === '`') { q = c; continue; } if (c === '{') d++; else if (c === '}') { d--; if (!d) return k; } } return -1; }
+  function attrSrc(pos) {
+    var s = srcText(), i = offsetOf(pos), out = {}; if (i < 0) return out;
+    var k = i + 1; while (k < s.length && /[\w.$]/.test(s[k])) k++;
+    while (k < s.length) {
+      while (/\s/.test(s[k])) k++;
+      if (s[k] === '>' || (s[k] === '/' && s[k + 1] === '>')) break;
+      var m = /^([\w$-]+)/.exec(s.slice(k, k + 60)); if (!m) { if (s[k] === '{') { var e0 = balanced(s, k); if (e0 < 0) break; k = e0 + 1; continue; } break; }
+      k += m[1].length; while (/\s/.test(s[k])) k++;
+      if (s[k] !== '=') continue; k++; while (/\s/.test(s[k])) k++;
+      if (s[k] === '{') { var e = balanced(s, k); if (e < 0) break; out[m[1]] = s.slice(k + 1, e).trim(); k = e + 1; }
+      else if (s[k] === '"' || s[k] === "'") { var e2 = s.indexOf(s[k], k + 1); k = e2 + 1; } else break;
+    }
+    return out;
+  }
+  var TOP = null;
+  function topConsts() {
+    if (TOP) return TOP; TOP = {}; var s = srcText(), re = /^const\s+([A-Za-z_$][\w$]*)\s*=\s*/gm, m;
+    while ((m = re.exec(s))) {
+      var i = re.lastIndex, d = 0, q = null, k = i;
+      for (; k < s.length; k++) { var c = s[k]; if (q) { if (c === '\\') { k++; continue; } if (c === q) q = null; continue; } if (c === '"' || c === "'" || c === '`') { q = c; continue; } if ('([{'.indexOf(c) >= 0) d++; else if (')]}'.indexOf(c) >= 0) d--; else if (d === 0 && (c === ';' || (c === '\n' && /^\S/.test(s.slice(k + 1, k + 2)) && !/^[.?:+\-*|&]/.test(s.slice(k + 1, k + 2))))) break; }
+      TOP[m[1]] = s.slice(i, k).trim();
+    }
+    return TOP;
+  }
+  /* A prop written as a card constant (columns={CFG}) is printed as that constant, as authored, with the constants it uses. */
+  function useConst(name, S) { var tx = topConsts()[name] || ((defOf(name) || '').replace(/^const\s+[\w$]+\s*=\s*/, '')); if (!tx || /^(window|React)\b/.test(tx)) return false; pullOne(name, S); return S.consts.some(function (c) { return c.name === name; }) || S.helpers.some(function (h) { return h.name === name; }); }
+  /* End of an expression starting at i: the first ; or line break at bracket depth 0 (not inside a string). */
+  function exprEnd(s, i) { var d = 0, q = null, k = i; for (; k < s.length; k++) { var c = s[k]; if (q) { if (c === '\\') { k++; continue; } if (c === q) q = null; continue; } if (c === '"' || c === "'" || c === '`') { q = c; continue; } if ('([{'.indexOf(c) >= 0) d++; else if (')]}'.indexOf(c) >= 0) { d--; if (d < 0) return k; } else if (d === 0 && (c === ';' || (c === '\n' && !/^\s*[.?:+\-*|&]/.test(s.slice(k + 1, k + 40))))) return k; } return k; }
+  function defOf(id) {
+    var s = srcText(), m = new RegExp('(?:const|let|var)\\s+' + id + '\\s*=\\s*').exec(s);
+    if (m) return 'const ' + id + ' = ' + s.slice(m.index + m[0].length, exprEnd(s, m.index + m[0].length)).trim();
+    m = new RegExp('function\\s+' + id + '\\s*\\(').exec(s);
+    if (m) { var b = s.indexOf('{', m.index), e = balanced(s, b); if (e > 0) return s.slice(m.index, e + 1); }
+    return null;
+  }
+  function stateSrc(name) { var m = new RegExp('\\[\\s*' + name + '\\s*,\\s*([\\w$]+)\\s*\\]\\s*=\\s*(?:React\\.)?useState\\(').exec(srcText()); if (!m) return null; var i = m.index + m[0].length; return { set: m[1], init: srcText().slice(i, exprEnd(srcText(), i)).trim() }; }
+  function setterSrc(set) { var m = new RegExp('\\[\\s*([\\w$]+)\\s*,\\s*' + set + '\\s*\\]\\s*=\\s*(?:React\\.)?useState\\(').exec(srcText()); if (!m) return null; var i = m.index + m[0].length; return { name: m[1], init: srcText().slice(i, exprEnd(srcText(), i)).trim() }; }
+  var GLOBALS = /^(Math|JSON|console|setTimeout|clearTimeout|setInterval|Date|Array|Object|String|Number|Boolean|Promise|window|document|React|alert|parseInt|parseFloat|isNaN|Set|Map|if|for|while|switch|return|function|typeof|new|catch)$/;
+  /* Card-local functions and values a printed snippet calls (notify(…), fmt(…)) are copied in, so the snippet runs on its own. */
+  function idsIn(text) {
+    text = text.replace(/\.\.\./g, ' ');  /* a spread (...RUNS) names RUNS; it is not a property access */
+    text = text.replace(/`(?:[^`\\]|\\.)*`|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, '""');  /* words inside strings ("Detail Sheet") are not names */
+    /* Names the text uses, minus what it declares itself (params, locals) and property names after a dot. */
+    var local = new Set();
+    (text.match(/(?:const|let|var)\s+([\w$]+)/g) || []).forEach(function (m) { local.add(m.split(/\s+/)[1]); });
+    (text.match(/\(([^()]*)\)\s*=>/g) || []).forEach(function (m) { m.slice(1, m.indexOf(')')).split(',').forEach(function (p) { p = p.replace(/[{}\[\]=].*$/, '').trim(); if (p) local.add(p); }); });
+    (text.match(/\b([\w$]+)\s*=>/g) || []).forEach(function (m) { local.add(m.replace(/\s*=>/, '')); });
+    var ids = []; text.replace(/(^|[^.\w$'"])([A-Za-z_$][\w$]*)/g, function (all, pre, id) { if (!local.has(id) && ids.indexOf(id) < 0) ids.push(id); return all; });
+    return ids;
+  }
+  /* Names an authored expression needs from outside: strings and JSX text removed; object keys and JSX attribute names are not names. */
+  function freeIds(ex) {
+    var s = ex.replace(/`(?:[^`\\]|\\.)*`|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, '""').replace(/>([^<>{}]*)</g, '><');
+    /* JSX tags: keep the tag name and the {expressions} in its attributes; attribute names (muted, label=…) are not names. */
+    var o = '', k = 0;
+    while (k < s.length) {
+      if (s[k] === '<' && /[A-Za-z]/.test(s[k + 1] || '')) {
+        var nm = /^[\w.$]+/.exec(s.slice(k + 1))[0]; o += ' ' + nm + ' '; k += 1 + nm.length;
+        while (k < s.length && s[k] !== '>') { if (s[k] === '{') { var e = balanced(s, k); if (e < 0) break; o += ' ' + s.slice(k + 1, e) + ' '; k = e + 1; } else k++; }
+        k++; continue;
+      }
+      o += s[k++];
+    }
+    s = o;
+    s = s.replace(/([A-Za-z_$][\w$]*)\s*:(?!:)/g, ' :').replace(/([A-Za-z_$][\w$-]*)\s*=(?![=>])/g, ' =');
+    return idsIn(s).filter(function (id) { return !GLOBALS.test(id) && !/^(true|false|null|undefined|NaN|Infinity|this)$/.test(id); });
+  }
+  function resolvable(id, S) { return S.declared(id) || (window[NSN] && window[NSN][id]) || defOf(id) || stateSrc(id) || (/^set[A-Z]/.test(id) && setterSrc(id)); }
+  /* End of a value inside an object literal: the , or } at depth 0. */
+  function valueEnd(s, i) { var d = 0, q = null; for (var k = i; k < s.length; k++) { var c = s[k]; if (q) { if (c === '\\') { k++; continue; } if (c === q) q = null; continue; } if (c === '"' || c === "'" || c === '`') { q = c; continue; } if ('([{'.indexOf(c) >= 0) d++; else if (')]}'.indexOf(c) >= 0) { if (d === 0) return k; d--; } else if (c === ',' && d === 0) return k; } return k; }
+  /* Column renders in an authored columns expression: [{ key, text }] — and the expression without them (for Vue, where cells are slots). */
+  function columnRenders(ex) {
+    var out = [], re = /render\s*:\s*/g, m;
+    while ((m = re.exec(ex))) {
+      var st = m.index + m[0].length, en = valueEnd(ex, st);
+      var before = ex.slice(0, m.index), ob = before.lastIndexOf('{'), km = /key\s*:\s*["']([^"']+)["']/.exec(ex.slice(ob, en));
+      if (km) out.push({ key: km[1], text: ex.slice(st, en).trim() });
+    }
+    var res = '', last = 0, re2 = /,\s*render\s*:\s*/g, m2;
+    while ((m2 = re2.exec(ex))) { var en3 = valueEnd(ex, m2.index + m2[0].length); res += ex.slice(last, m2.index); last = en3; re2.lastIndex = en3; }
+    res += ex.slice(last);
+    return { renders: out, stripped: res };
+  }
+  /* A JSX expression → a Vue template, for the common shapes (elements, attributes, {expr} children). Returns null when it can't. */
+  function jsxToVue(src, params) {
+    var s = src.trim(), i = 0, ok = true;
+    function fail() { ok = false; return ''; }
+    function expr(e) { e = e.trim(); if (/<[A-Za-z>]/.test(e) || /\bfunction\b/.test(e)) return fail(); return e.replace(/"/g, "'"); }
+    function node() {
+      if (s[i] !== '<') return fail();
+      i++;
+      if (s[i] === '>') { i++; var kids0 = children(''); return kids0; }
+      var nm = /^[\w.$-]+/.exec(s.slice(i)); if (!nm) return fail(); var tag = nm[0]; i += tag.length;
+      if (/^[A-Z]/.test(tag) && !(window[NSN] && window[NSN][tag])) return fail();
+      var at = [];
+      for (;;) {
+        while (/\s/.test(s[i])) i++;
+        if (s[i] === '/' && s[i + 1] === '>') { i += 2; return '<' + tag + (at.length ? ' ' + at.join(' ') : '') + ' />'; }
+        if (s[i] === '>') { i++; break; }
+        if (s[i] === '{') return fail();
+        var an = /^[\w$-]+/.exec(s.slice(i)); if (!an) return fail(); var a = an[0]; i += a.length; while (/\s/.test(s[i])) i++;
+        var vn = a === 'className' ? 'class' : a;
+        if (s[i] !== '=') { at.push(vn); continue; }
+        i++; while (/\s/.test(s[i])) i++;
+        if (s[i] === '"' || s[i] === "'") { var e2 = s.indexOf(s[i], i + 1); at.push(vn + '="' + s.slice(i + 1, e2) + '"'); i = e2 + 1; continue; }
+        if (s[i] === '{') { var e3 = balanced(s, i); var x = expr(s.slice(i + 1, e3)); i = e3 + 1; at.push(/^on[A-Z]/.test(a) ? '@' + kebab(a.slice(2)).replace(/^-/, '') + '="' + x + '"' : ':' + vn + '="' + x + '"'); continue; }
+        return fail();
+      }
+      var inner = children(tag);
+      return '<' + tag + (at.length ? ' ' + at.join(' ') : '') + '>' + inner + '</' + tag + '>';
+    }
+    function children(tag) {
+      var out = '';
+      for (var g = 0; g < 500 && ok; g++) {
+        if (s.slice(i, i + 2) === '</') { var close = s.indexOf('>', i); i = close + 1; return out; }
+        if (i >= s.length) return fail();
+        if (s[i] === '<') { out += node(); continue; }
+        if (s[i] === '{') { var e = balanced(s, i); var x = s.slice(i + 1, e).trim(); i = e + 1; if (/^\/\*[\s\S]*\*\/$/.test(x)) continue;
+          /* {list.map(t => <Tag key={t}>{t}</Tag>)} → <Tag v-for="t in list" :key="t">{{ t }}</Tag> */
+          var mp = /^([\s\S]+?)\.map\(\s*\(?\s*([\w$]+)\s*(?:,\s*([\w$]+))?\s*\)?\s*=>\s*\(?\s*(<[\s\S]*>)\s*\)?\s*\)$/.exec(x);
+          if (mp) { var sub = jsxToVue(mp[4]); if (sub == null) return fail(); out += addAttr(sub, 'v-for="' + (mp[3] ? '(' + mp[2] + ', ' + mp[3] + ')' : mp[2]) + ' in ' + expr(mp[1]) + '"'); continue; }
+          out += '{{ ' + expr(x) + ' }}'; continue; }
+        var nx = s.slice(i).search(/[<{]/); if (nx < 0) return fail(); out += s.slice(i, i + nx).replace(/\s+/g, ' '); i += nx;
+      }
+      return out;
+    }
+    if (s[0] === '(' && s[s.length - 1] === ')') s = s.slice(1, -1).trim();
+    var res;
+    if (s[0] === '<') res = node(); else res = '{{ ' + expr(s) + ' }}';
+    return ok && i >= s.length - 1 ? res.trim() : (ok && s[0] !== '<' ? res : null);
+  }
+  /* Identifier substitution outside strings and property names: replace(text, { a: '(expr)' }). */
+  function substIds(text, map) {
+    return text.replace(/(`(?:[^`\\]|\\.)*`|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(\.?)\b([A-Za-z_$][\w$]*)\b(\s*:(?!:))?/g, function (all, str, dot, id, colon) { if (str) return str; if (dot || colon || !Object.prototype.hasOwnProperty.call(map, id)) return all; return map[id]; });
+  }
+  function simpleExpr(e) { return /^(?:[\w$.]+|"[^"]*"|'[^']*'|\d+(?:\.\d+)?|true|false|null)$/.test(e.trim()); }
+  /* Parse <Tag attrs>children</Tag> starting at s[i] === '<'. → { tag, attrs: {name: exprSrc}, children, end } */
+  function parseEl(s, i) {
+    var nm = /^<([\w.$]+)/.exec(s.slice(i)); if (!nm) return null; var tag = nm[1], k = i + nm[0].length, at = {};
+    for (;;) {
+      while (/\s/.test(s[k])) k++;
+      if (s[k] === '/' && s[k + 1] === '>') return { tag: tag, attrs: at, children: '', end: k + 2 };
+      if (s[k] === '>') { k++; break; }
+      var an = /^[\w$-]+/.exec(s.slice(k)); if (!an) return null; k += an[0].length; while (/\s/.test(s[k])) k++;
+      if (s[k] !== '=') { at[an[0]] = 'true'; continue; }
+      k++; while (/\s/.test(s[k])) k++;
+      if (s[k] === '"' || s[k] === "'") { var e2 = s.indexOf(s[k], k + 1); at[an[0]] = s.slice(k, e2 + 1); k = e2 + 1; continue; }
+      if (s[k] === '{') { var e3 = balanced(s, k); at[an[0]] = s.slice(k + 1, e3).trim(); k = e3 + 1; continue; }
+      return null;
+    }
+    var close = '</' + tag + '>', depth = 1, j = k, open = new RegExp('<' + tag.replace(/\./g, '\\.') + '[\\s/>]', 'g');
+    for (; j < s.length; j++) { if (s.startsWith(close, j)) { if (--depth === 0) break; } else if (s[j] === '<' && open.test(s.slice(j, j + tag.length + 2))) { open.lastIndex = 0; depth++; } open.lastIndex = 0; }
+    if (j >= s.length) return null;
+    return { tag: tag, attrs: at, children: s.slice(k, j), end: j + close.length };
+  }
+  /* A card helper component (<IconText icon="…">{v}</IconText>) used in a cell: its own JSX with the props filled in. */
+  function expandHelpers(body, used) {
+    for (var pass = 0; pass < 4; pass++) {
+      var changed = false, re = /<([A-Z][\w$]*)/g, m;
+      while ((m = re.exec(body))) {
+        var tag = m[1]; if ((window[NSN] && window[NSN][tag]) || tag === 'Live') continue;
+        var d = defOf(tag); if (!d) return null;
+        var hm = /^const\s+[\w$]+\s*=\s*\(\s*\{([^}]*)\}\s*\)\s*=>\s*([\s\S]*?);?\s*$/.exec(d); if (!hm) return null;
+        var el = parseEl(body, m.index); if (!el) return null;
+        var map = {};
+        hm[1].split(',').forEach(function (p) { p = p.trim(); if (!p) return; var eq = p.indexOf('='), n = (eq < 0 ? p : p.slice(0, eq)).trim(), dv = eq < 0 ? 'undefined' : p.slice(eq + 1).trim(); var v = n === 'children' ? null : el.attrs[n] != null ? el.attrs[n] : dv; if (n !== 'children') map[n] = simpleExpr(v) ? v : '(' + v + ')'; });
+        var hb = hm[2].trim(); if (hb[0] === '(' && hb[hb.length - 1] === ')') hb = hb.slice(1, -1).trim();
+        hb = hb.replace(/\{\s*children\s*\}/g, function () { return el.children; });
+        hb = substIds(hb, map);
+        used.add(tag);
+        body = body.slice(0, m.index) + hb + body.slice(el.end); changed = true; break;
+      }
+      if (!changed) return body;
+    }
+    return body;
+  }
+  /* <Live init={v}>{(x, set) => <Input value={x} onChange={set} />}</Live> — per-cell state in a card — becomes a binding to the row's field. */
+  function expandLive(body, field) {
+    for (var g = 0; g < 6; g++) {
+      var i = body.indexOf('<Live'); if (i < 0) return body;
+      var el = parseEl(body, i); if (!el) return null;
+      var ch = el.children.trim(); if (ch[0] !== '{') return null; var e = balanced(ch, 0), fn = ch.slice(1, e).trim();
+      var fm = /^\(?\s*([\w$]+)\s*(?:,\s*([\w$]+))?\s*\)?\s*=>\s*([\s\S]*)$/.exec(fn); if (!fm) return null;
+      var inner = fm[3].trim(), map = {}; map[fm[1]] = field;
+      if (fm[2]) { inner = inner.replace(new RegExp('\\b' + fm[2] + '\\(', 'g'), '(' + field + ' = '); map[fm[2]] = '((val) => (' + field + ' = val))'; }
+      inner = substIds(inner, map);
+      body = body.slice(0, i) + inner + body.slice(el.end);
+    }
+    return body;
+  }
+  /* cond ? A : B at the top level of an expression → [cond, A, B]. */
+  function splitTernary(s) {
+    var d = 0, q = null, qi = -1, depthQ = 0;
+    for (var k = 0; k < s.length; k++) { var c = s[k]; if (q) { if (c === '\\') { k++; continue; } if (c === q) q = null; continue; } if (c === '"' || c === "'" || c === '`') { q = c; continue; }
+      if ('([{'.indexOf(c) >= 0) d++; else if (')]}'.indexOf(c) >= 0) d--;
+      else if (d === 0 && c === '?' && s[k + 1] !== '.' && s[k + 1] !== '?') { if (qi < 0) qi = k; depthQ++; }
+      else if (d === 0 && c === ':' && qi >= 0) { if (--depthQ === 0) return [s.slice(0, qi).trim(), s.slice(qi + 1, k).trim(), s.slice(k + 1).trim()]; } }
+    return null;
+  }
+  function addAttr(tpl, attr) { return tpl.replace(/^<([\w.$-]+)/, '<$1 ' + attr); }
+  /* A column's render (v, row, i) => body → a Vue cell slot. Card helpers are inlined; per-cell state binds to the row. */
+  function renderSlot(key, text, ind, S, slotName, names) {
+    var m = /^(?:\(([^)]*)\)|([\w$]+))\s*=>\s*([\s\S]*)$/.exec(text.trim()); if (!m) return null;
+    var ps = (m[1] != null ? m[1] : m[2]).split(',').map(function (x) { return x.trim(); }).filter(Boolean), body = m[3].trim();
+    if (body[0] === '{') { var rm = /^\{\s*return\s+([\s\S]*?);?\s*\}$/.exec(body); if (!rm) return null; body = rm[1]; }
+    var used = new Set(); body = expandHelpers(body, used); if (body == null) return null;
+    var live = body.indexOf('<Live') >= 0;
+    if (live) { while (ps.length < 2) ps.push(['value', 'row'][ps.length]); if (ps[1] === '_') ps[1] = 'row'; body = expandLive(body, ps[1] + (/^[A-Za-z_$][\w$]*$/.test(key) ? '.' + key : "['" + key + "']")); if (body == null) return null; }
+    var tpl, tern = splitTernary(body);
+    if (tern && /^\(?\s*</.test(tern[1]) && /^\(?\s*</.test(tern[2])) { var A = jsxToVue(tern[1]), B = jsxToVue(tern[2]); if (A == null || B == null) return null; tpl = addAttr(A, 'v-if="' + tern[0].replace(/"/g, "'") + '"') + '\n' + '  '.repeat(ind + 1) + addAttr(B, 'v-else'); }
+    else { tpl = jsxToVue(body, ps); if (tpl == null) return null; }
+    names = names || ['value', 'row', 'index']; var dest = ps.map(function (p, i) { if (/^[{[]/.test(p)) return null; if (p === '_') return ''; return p === names[i] ? p : names[i] + ': ' + p; });
+    if (dest.some(function (d) { return d == null; })) return null;
+    dest = dest.filter(Boolean);
+    var html = new Set((body.match(/<([a-z][\w-]*)/g) || []).map(function (x) { return x.slice(1); }));
+    var params = new Set(ps), ids = freeIds(body).filter(function (id) { return !params.has(id) && !html.has(id) && !(window[NSN] && window[NSN][id]) && !used.has(id) && id !== 'val'; });
+    (body.match(/<([A-Z][\w$]*)/g) || []).forEach(function (mm) { var n = mm.slice(1); if (window[NSN] && window[NSN][n]) { S.used.add(n); if (!VUE.has(n)) S.novue.add(n); } });
+    var pad = '  '.repeat(ind);
+    return { live: live, ids: ids, text: pad + '<template #' + (slotName || 'cell-' + key) + (dest.length ? '="{ ' + dest.join(', ') + ' }"' : '') + '>\n' + pad + '  ' + tpl + '\n' + pad + '</template>' };
+  }
+  /* Bring in one card-local name the snippet uses — after the names it depends on, so the printed order runs top to bottom.
+     Definitions that touch component state go inside the component; the rest at module level. */
+  function pullOne(id, S) {
+    if (GLOBALS.test(id) || S.declared(id) || S.seen.has(id) || (window[NSN] && window[NSN][id])) return;
+    S.seen.add(id);
+    if (/^set[A-Z]/.test(id)) { var ss = setterSrc(id); if (ss) S.stateFromSetter(id, null, ss); return; }
+    var st = stateSrc(id); if (st) { S.stateFromSetter(st.set, null, { name: id, init: st.init }); return; }
+    var d = defOf(id); if (!d || d.length > 4000) return;
+    if (/^const [\w$]+ = (?:React\.)?use[A-Z]/.test(d)) return;
+    var body = d.replace(/^(const [\w$]+ = |function [\w$]+)/, '');
+    var deps = idsIn(body); deps.forEach(function (x) { pullOne(x, S); });
+    if (/<[A-Za-z]|=>|function/.test(body)) S.vueFn = S.vueFn || /<[A-Za-z]/.test(body);
+    (body.match(/<([A-Z][\w$]*)/g) || []).forEach(function (m) { var n = m.slice(1); if (window[NSN] && window[NSN][n]) S.used.add(n); });
+    var usesState = deps.some(function (x) { return S.declared(x) || S.helpers.some(function (h) { return h.name === x; }); });
+    (usesState ? S.helpers : S.consts).push({ name: id, text: usesState ? d : body, full: d });
+  }
+  function pullHelpers(text, S) { idsIn(text).forEach(function (id) { pullOne(id, S); }); }
+  function clean(s, S) {
+    s = s.replace(/\/\*#__PURE__\*\/\s*/g, '').replace(/,?\s*__source:\s*\{[^{}]*\}/g, '').replace(/,?\s*__self:\s*this/g, '').replace(/,?\s*"data-(om|cc|dm)-[\w-]+":\s*"(?:[^"\\]|\\.)*"/g, '')
+      /* Editor text overrides compiled into the card: keep only the authored fallback text. */
+      .replace(/\(\s*(_[\w$]+)\s*=\s*\(window\.__omTextO\s*\|\|\s*\{\}\)\[[^\]]*\]\)\s*!==\s*null\s*&&\s*\1\s*!==\s*void 0\s*\?\s*\1\s*:\s*/g, '')
+      .replace(/var _txt[\w$]*(?:,\s*_txt[\w$]*)*;\s*/g, '');
+    (s.match(/React\.createElement\(\s*([A-Z][\w$]*)/g) || []).forEach(function (m) { var n = m.replace(/React\.createElement\(\s*/, ''); if (VUE.has(n) || (window[NSN] && window[NSN][n])) S.used.add(n); });
+    return s;
+  }
+  function fnStr(f, S) {
+    var s = Function.prototype.toString.call(f);
+    if (/\[native code\]/.test(s)) { var nm = S.setterName(f); return nm || '() => {}'; }
+    if (/React\.createElement/.test(s)) { S.react = true; s = clean(s, S); }
+    S.handlers = (S.handlers || '') + ' ' + s;
+    /* Babel turns arrows into functions; print them back as arrows. */
+    var m = s.match(/^function\s*[\w$]*\s*\(([^)]*)\)\s*\{\s*return\s+([\s\S]*?);?\s*\}$/);
+    if (m && m[2].indexOf('\n') < 0) s = '(' + m[1].trim() + ') => ' + m[2].trim();
+    else { m = s.match(/^function\s*[\w$]*\s*\(([^)]*)\)\s*(\{[\s\S]*\})$/); if (m) s = '(' + m[1].trim() + ') => ' + m[2]; }
+    return s.length < 140 ? s.replace(/\s*\n\s*/g, ' ') : s;
+  }
+  function lit(v, ind, S, depth) {
+    depth = depth || 0;
+    if (v === null) return 'null'; if (v === undefined) return 'undefined';
+    if (typeof v === 'string') return q(v);
+    if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+    if (typeof v === 'function') return fnStr(v, S);
+    if (depth > 6) return 'undefined';
+    if (isEl(v)) { if (S.fw === 'vue') return hCall(v, ind, S); return jsx(v, ind, S).trim(); }
+    if (v instanceof Date) return 'new Date(' + q(v.toISOString()) + ')';
+    var pad = '  '.repeat(ind + 1), parts;
+    if (Array.isArray(v)) {
+      parts = v.map(function (x) { return lit(x, ind + 1, S, depth + 1); });
+      var one = '[' + parts.join(', ') + ']';
+      return one.length <= 72 && one.indexOf('\n') < 0 ? one : '[\n' + parts.map(function (p) { return pad + p; }).join(',\n') + '\n' + '  '.repeat(ind) + ']';
+    }
+    if (typeof v === 'object') {
+      var ks = Object.keys(v).filter(function (k) { return v[k] !== undefined; });
+      parts = ks.map(function (k) { return (IDENT.test(k) ? k : q(k)) + ': ' + lit(v[k], ind + 1, S, depth + 1); });
+      var o = '{ ' + parts.join(', ') + ' }';
+      if (!ks.length) return '{}';
+      return o.length <= 72 && o.indexOf('\n') < 0 ? o : '{\n' + parts.map(function (p) { return pad + p; }).join(',\n') + '\n' + '  '.repeat(ind) + '}';
+    }
+    return 'undefined';
+  }
+  /* Vue: an element inside data (a row value, an item body) is written as h(Component, props, …) — the component renders it as a VNode. */
+  function hCall(node, ind, S) {
+    if (node == null || node === false || node === true) return 'null';
+    if (typeof node === 'string' || typeof node === 'number') return lit(node, ind, S);
+    if (Array.isArray(node)) return '[' + kids(node).map(function (c) { return hCall(c, ind, S); }).join(', ') + ']';
+    if (!isEl(node)) return 'null';
+    if (isWrap(node)) { var w = kids(node.props.children); return w.length === 1 ? hCall(w[0], ind, S) : hCall(w, ind, S); }
+    S.needH = true;
+    var ds = dsName(node.type), tag = ds ? (S.used.add(ds), (VUE.has(ds) || S.novue.add(ds)), ds) : typeof node.type === 'string' ? q(node.type) : null;
+    if (!tag) { var ex = expand(node, S); return ex !== undefined ? hCall(ex, ind, S) : 'null'; }
+    var p = node.props || {}, pr = {};
+    Object.keys(p).forEach(function (k) { if (k !== 'children' && k !== 'key' && !/^data-(om|cc|dm)-/.test(k) && p[k] !== undefined) pr[k === 'className' ? 'class' : k] = p[k]; });
+    var ch = kids(p.children).filter(function (c) { return !(isEl(c) && isWrap(c) && !kids(c.props.children).length); });
+    var props = Object.keys(pr).length ? lit(pr, ind, S) : 'null';
+    if (!ch.length) return 'h(' + tag + (props !== 'null' ? ', ' + props : '') + ')';
+    var body = ch.length === 1 ? hCall(ch[0], ind, S) : '[' + ch.map(function (c) { return hCall(c, ind, S); }).join(', ') + ']';
+    return 'h(' + tag + ', ' + props + ', ' + (ds ? '() => ' + body : body) + ')';
+  }
+  function hoist(key, text, S) { var n = key, i = 2; while (S.consts.some(function (c) { return c.name === n; }) || S.helpers.some(function (h) { return h.name === n; }) || S.declared(n) || defOf(n)) n = key + i++; S.consts.push({ name: n, text: text }); return n; }
+  function nameOf(type, S) {
+    var n = dsName(type);
+    if (n) { S.used.add(n); if (!VUE.has(n)) S.novue.add(n); return n; }
+    if (typeof type === 'string') return type;
+    return (type && (type.displayName || type.name)) || 'Component';
+  }
+  /* Card-local helpers with no hooks are expanded to what they render; KBLive turns into a state variable. */
+  function expand(el, S) {
+    var ty = el.type;
+    if (typeof ty !== 'function' || dsName(ty) || (ty.prototype && ty.prototype.isReactComponent)) return undefined;
+    if (ty === window.KBLive && typeof el.props.children === 'function') { var st = S.state(el.props.children, el.props.init, null); return el.props.children(st.val, st.set); }
+    var src = Function.prototype.toString.call(ty);
+    if (/\buse[A-Z]\w*\s*\(/.test(src)) return undefined;
+    try { return ty(el.props); } catch (e) { return undefined; }
+  }
+  function isWrap(n) { return isEl(n) && n.props && typeof n.props.i === 'string' && n.props.i.indexOf('txt:') === 0; }
+  function kids(c) { var out = []; (function f(x) { if (x == null || x === false || x === true) return; if (Array.isArray(x)) x.forEach(f); else out.push(x); })(c); return out; }
+  function textOk(s) { return !/[{}<>]/.test(s); }
+  /* Props of one element → [attr strings, slot children (vue)] */
+  function attrs(el, ind, S, unit) {
+    var p = el.props || {}, out = [], slots = [], as = attrSrc(el._source || (unit && el.__unit ? unit.fiber._debugSource : null));
+    var fns = Object.keys(p).filter(function (k) { return typeof p[k] === 'function' && k !== 'children'; }).map(function (k) { return fnStr(p[k], S); }).join(' ');
+    var fsrc = Object.keys(p).filter(function (k) { return typeof p[k] === 'function' && k !== 'children'; }).map(function (k) { return as[k] || ''; }).join(' ') + ' ' + fns;
+    var free = (fsrc.match(/\bset[A-Z][\w$]*/g) || []).filter(function (n, i, a) { return !S.declared(n) && a.indexOf(n) === i; });
+    S.free = (S.free || []).concat(free);
+    /* An onChange the card builds in a helper (spread props, no source to print) becomes plain state on the value it drives. */
+    var auto = null;
+    if (typeof p.onChange === 'function' && !as.onChange && !S.setterName(p.onChange)) {
+      var vk = Object.keys(p).find(function (k) { return VALUE_KEYS[k] && typeof p[k] !== 'function' && !S.boundName(p[k], unit); });
+      if (vk) { var base = vk, nm = base, n2 = 2; while (S.declared(nm)) nm = base + n2++; var setn = 'set' + nm[0].toUpperCase() + nm.slice(1); S.states.push({ name: nm, set: setn, init: p[vk], val: {}, sentinel: function () {} }); auto = { key: vk, name: nm, set: setn }; }
+    }
+    Object.keys(p).forEach(function (k) {
+      if (k === 'children' || k === 'key' || k === 'ref' || k === '__self' || k === '__source' || /^data-(om|cc|dm)-/.test(k)) return;
+      var v = p[k]; if (v === undefined) return;
+      var name = S.fw === 'vue' ? (k === 'className' ? 'class' : kebab(k)) : k;
+      var bound = auto && auto.key === k ? auto.name : VALUE_KEYS[k] ? S.boundName(v, unit) : null;
+      if (!bound && as[k] && /^[A-Za-z_$][\w$]*$/.test(as[k]) && typeof v !== 'function') { var ss2 = stateSrc(as[k]); if (ss2) bound = S.stateFromSetter(ss2.set, v, { name: as[k], init: ss2.init }); }
+      /* Guessing a value from a setter only when the card's source for this prop is unknown. */
+      if (!bound && !as[k] && VALUE_KEYS[k] && free.length && typeof v !== 'function') { bound = S.stateFromSetter(free.shift(), v); }
+      if (bound) { out.push(S.fw === 'vue' ? ':' + name + '="' + bound + '"' : k + '={' + bound + '}'); return; }
+      if (typeof v === 'function') {
+        /* Vue: a render prop written as JSX (Tree rowActions={(n) => <>…</>}) becomes the component's slot. */
+        var VSLOTS = { Tree: { rowActions: ['node'] } }, tg = dsName(el.type);
+        if (S.fw === 'vue' && as[k] && /</.test(as[k]) && VSLOTS[tg] && VSLOTS[tg][k]) {
+          var rs = renderSlot(k, as[k], ind + 1, S, kebab(k), VSLOTS[tg][k]);
+          if (rs && rs.ids.every(function (id) { return resolvable(id, S); })) { rs.ids.forEach(function (id) { pullOne(id, S); }); slots.push({ raw: rs.text }); return; }
+        }
+        /* A handler the card names (onToggle={toggle}) is printed by name, with its authored definition copied in. */
+        if (as[k] && /^[A-Za-z_$][\w$]*$/.test(as[k]) && !S.declared(as[k]) && !/^set[A-Z]/.test(as[k]) && defOf(as[k])) pullOne(as[k], S);
+        var fs = (auto && k === 'onChange' ? auto.set : null) || S.setterName(v) || (as[k] && (/=>|function/.test(as[k]) || (/^[\w$.]+$/.test(as[k]) && (S.declared(as[k]) || /^set[A-Z]/.test(as[k]) || S.helpers.some(function (h) { return h.name === as[k]; }) || S.consts.some(function (c) { return c.name === as[k]; })))) ? as[k] : fnStr(v, S));
+        var vq = function (x) { return x.indexOf("'") < 0 ? x.replace(/"/g, "'") : x.replace(/"/g, '&quot;'); };
+        S.handlers = (S.handlers || '') + ' ' + fs;
+        if (S.fw === 'vue') { if (/^on[A-Z]/.test(k)) out.push('@' + kebab(k.slice(2)).replace(/^-/, '') + '="' + vq(fs) + '"'); else { if (/React\.createElement/.test(fs)) S.vueFn = true; out.push(':' + name + '="' + fs.replace(/"/g, '&quot;') + '"'); } }
+        else out.push(k + '={' + fs + '}');
+        return;
+      }
+      if (typeof v === 'string') { if (S.fw === 'vue') out.push(name + '="' + v.replace(/"/g, '&quot;') + '"'); else out.push(/["\n]/.test(v) ? k + '={' + q(v) + '}' : k + '="' + v + '"'); return; }
+      if (v === true) { out.push(name); return; }
+      if (isEl(v) || (Array.isArray(v) && v.length && v.every(isEl))) {
+        if (S.fw === 'vue') { slots.push({ name: k, el: v }); return; }
+        out.push(k + '={' + (Array.isArray(v) ? '[' + v.map(function (x) { return jsx(x, ind + 1, S).trim(); }).join(', ') + ']' : jsx(v, ind + 1, S).trim()) + '}'); return;
+      }
+      /* Vue Table: column renders become #cell-<key> slots; the columns themselves are printed without render. */
+      if (S.fw === 'vue' && k === 'columns' && Array.isArray(v) && v.some(function (c) { return c && typeof c.render === 'function'; })) {
+        var csrc = as[k] && /^[A-Za-z_$][\w$]*$/.test(as[k]) ? (topConsts()[as[k]] || (defOf(as[k]) || '').replace(/^const\s+[\w$]+\s*=\s*/, '')) : as[k];
+        /* const TIER_COLS_SM = TIER_COLS("sm") with TIER_COLS = (t) => [...]: use the array with t filled in. */
+        var fc = csrc && /^([A-Za-z_$][\w$]*)\(\s*([^()]*?)\s*\)$/.exec(csrc.trim()), fdef = fc && topConsts()[fc[1]], fm2 = fdef && /^\(?\s*([\w$]+)\s*\)?\s*=>\s*([\s\S]*)$/.exec(fdef.trim());
+        if (fm2) { var mp2 = {}; mp2[fm2[1]] = fc[2]; csrc = substIds(fm2[2].trim(), mp2); }
+        var cr = csrc ? columnRenders(csrc) : { renders: [], stripped: null };
+        /* Renders that live in the constants this one spreads or maps (…RUNS) count too; those constants print without them. */
+        var refd = [];
+        var queue = csrc ? freeIds(csrc) : [], seenR = new Set();
+        while (queue.length) { var id = queue.shift(); if (seenR.has(id)) continue; seenR.add(id); var tx = topConsts()[id]; if (!tx) continue; queue = queue.concat(freeIds(tx)); if (/render\s*:/.test(tx)) { refd.push(id); columnRenders(tx).renders.forEach(function (r) { if (!cr.renders.some(function (x) { return x.key === r.key; })) cr.renders.push(r); }); } }
+        /* render: dimCell — a named function: use its definition. */
+        cr.renders.forEach(function (r) { if (/^[A-Za-z_$][\w$]*$/.test(r.text)) { var dd = defOf(r.text); var mm = dd && /^const\s+[\w$]+\s*=\s*([\s\S]*)$/.exec(dd); if (mm) r.text = mm[1].trim().replace(/;$/, ''); } });
+        var tplSlots = cr.renders.map(function (r) { return renderSlot(r.key, r.text, ind + 1, S); });
+        if (cr.stripped && tplSlots.length && tplSlots.every(Boolean) && tplSlots.every(function (sl) { return sl.ids.every(function (id) { return resolvable(id, S); }); })) {
+          tplSlots.forEach(function (sl) { slots.push({ raw: sl.text }); sl.ids.forEach(function (id) { pullOne(id, S); }); });
+          if (tplSlots.some(function (sl) { return sl.live; }) && as.rows && /^[A-Za-z_$][\w$]*$/.test(as.rows)) { S.reactive = S.reactive || new Set(); S.reactive.add(as.rows); }
+          (cr.stripped.match(/<([A-Z][\w$]*)/g) || []).forEach(function () {});
+          cr.renders.forEach(function (r) { (r.text.match(/<([A-Z][\w$]*)/g) || []).forEach(function (mm) { var n = mm.slice(1); if (window[NSN] && window[NSN][n]) { S.used.add(n); if (!VUE.has(n)) S.novue.add(n); } }); });
+          var ids0 = freeIds(cr.stripped);
+          if (ids0.every(function (id) { return resolvable(id, S); })) {
+            ids0.forEach(function (id) { pullOne(id, S); });
+            S.consts.forEach(function (c) { if (refd.indexOf(c.name) >= 0) c.text = columnRenders(c.text).stripped; });
+            var nm0 = as[k] && /^[A-Za-z_$][\w$]*$/.test(as[k]) ? as[k] : 'columns';
+            S.consts = S.consts.filter(function (c) { return c.name !== nm0; });
+            S.consts.push({ name: nm0, text: cr.stripped.trim() });
+            out.push(':' + name + '="' + nm0 + '"'); return;
+          }
+          slots.length = 0;
+        }
+        v = v.map(function (c) { if (!c || typeof c.render !== 'function') return c; var o = {}; Object.keys(c).forEach(function (kk) { if (kk !== 'render') o[kk] = c[kk]; }); return o; });
+        S.vueFn = true;
+      }
+      /* Any other authored expression (an inline array, a .map over a constant, JSX) is printed as written, with the names it uses. */
+      if (as[k] && typeof v === 'object' && v !== null && !isEl(v) && !/^[A-Za-z_$][\w$]*$/.test(as[k]) && !(S.fw === 'vue' && /<[A-Za-z]|=>/.test(as[k]))) {
+        var ids = freeIds(as[k]);
+        if (ids.every(function (id) { return resolvable(id, S); })) {
+          ids.forEach(function (id) { pullOne(id, S); });
+          (as[k].match(/<([A-Z][\w$]*)/g) || []).forEach(function (mm) { var n = mm.slice(1); if (window[NSN] && window[NSN][n]) S.used.add(n); });
+          var ex = as[k].trim(), txt = k !== 'style' && (ex.length > 60 || ex.indexOf('\n') >= 0) ? hoist(k, ex, S) : ex;
+          out.push(S.fw === 'vue' ? ':' + name + '="' + txt.replace(/"/g, "'") + '"' : k + '={' + txt + '}'); return;
+        }
+      }
+      if (as[k] && /^[A-Za-z_$][\w$]*$/.test(as[k]) && typeof v === 'object' && useConst(as[k], S)) { out.push(S.fw === 'vue' ? ':' + name + '="' + as[k] + '"' : k + '={' + as[k] + '}'); return; }
+      var text = lit(v, ind + 1, S);
+      if (k !== 'style' && (text.length > 60 || text.indexOf('\n') >= 0) && typeof v === 'object') text = hoist(k, lit(v, 0, S), S);
+      out.push(S.fw === 'vue' ? ':' + name + '="' + text.replace(/"/g, '&quot;') + '"' : k + '={' + text + '}');
+    });
+    return [out, slots];
+  }
+  function tagLine(open, a, ind) {
+    var pad = '  '.repeat(ind), one = open + (a.length ? ' ' + a.join(' ') : '');
+    if (one.length + pad.length <= 100 && one.indexOf('\n') < 0) return [one];
+    return [open].concat(a.map(function (x) { return '  ' + x.replace(/\n/g, '\n  '); }));
+  }
+  function jsx(node, ind, S, unit) {
+    var pad = '  '.repeat(ind);
+    if (node == null || node === false || node === true) return '';
+    if (typeof node === 'string' || typeof node === 'number') { var s = String(node); return pad + (S.fw === 'vue' ? s.replace(/</g, '&lt;') : textOk(s) ? s : '{' + q(s) + '}'); }
+    if (Array.isArray(node)) return kids(node).map(function (c) { return jsx(c, ind, S, unit); }).filter(Boolean).join('\n');
+    if (!isEl(node)) return '';
+    if (typeof node.type === 'symbol' || (node.type && node.type === (window.React && window.React.Fragment))) { var fk = kids(node.props.children), fb = fk.map(function (c) { return jsx(c, S.fw === 'vue' || fk.length < 2 ? ind : ind + 1, S, unit); }).filter(Boolean).join('\n'); return S.fw === 'vue' || fk.length < 2 ? fb : '  '.repeat(ind) + '<>\n' + fb + '\n' + '  '.repeat(ind) + '</>'; }
+    /* Editor instrumentation (a text wrapper <e i="txt:…">) is not part of the example. */
+    if (isWrap(node)) return kids(node.props.children).map(function (c) { return jsx(c, ind, S, unit); }).filter(Boolean).join('\n');
+    var ex = expand(node, S); if (ex !== undefined) return jsx(ex, ind, S, unit);
+    var tag = nameOf(node.type, S), r = attrs(node, ind, S, unit), a = r[0], slots = r[1];
+    var ch = kids(node.props && node.props.children);
+    if (typeof (node.props && node.props.children) === 'function') { a.push(S.fw === 'vue' ? '<!-- render function -->' : 'children={' + fnStr(node.props.children, S) + '}'); ch = []; }
+    var head = tagLine('<' + tag, a, ind);
+    if (!ch.length && !slots.length) { head[head.length - 1] += ' />'; return head.map(function (l) { return pad + l; }).join('\n'); }
+    head[head.length - 1] += '>';
+    if (ch.length === 1 && isWrap(ch[0])) ch = kids(ch[0].props.children);
+    if (!slots.length && ch.length === 1 && (typeof ch[0] === 'string' || typeof ch[0] === 'number') && head.length === 1 && String(ch[0]).length < 60 && (S.fw === 'vue' || textOk(String(ch[0])))) return pad + head[0] + String(ch[0]).replace(/</g, S.fw === 'vue' ? '&lt;' : '<') + '</' + tag + '>';
+    var body = slots.map(function (sl) { if (sl.raw) return sl.raw; return '  '.repeat(ind + 1) + '<template #' + kebab(sl.name) + '>\n' + jsx(sl.el, ind + 2, S, unit) + '\n' + '  '.repeat(ind + 1) + '</template>'; });
+    var inner = ch.map(function (c) { return jsx(c, ind + 1, S, unit); }).filter(Boolean);
+    return head.map(function (l) { return pad + l; }).join('\n') + '\n' + body.concat(inner).join('\n') + '\n' + pad + '</' + tag + '>';
+  }
+
+  /* ---------- state ---------- */
+  function Ctx(fwk) {
+    var S = { fw: fwk, used: new Set(), novue: new Set(), consts: [], states: [], react: false, vueEl: false, vueFn: false };
+    S.declared = function (n) { return S.states.some(function (s) { return s.set === n || s.name === n; }); };
+    S.state = function (childFn, init, dispatch) {
+      var m = Function.prototype.toString.call(childFn).match(/^\s*(?:function\s*[\w$]*\s*)?\(?\s*([\w$]+)\s*(?:,\s*([\w$]+))?/);
+      var name = m && m[1] || 'value', set = m && m[2] || 'set' + name[0].toUpperCase() + name.slice(1);
+      var ex = S.states.find(function (s) { return s.name === name; }); if (ex) return ex;
+      var st = { name: name, set: set, init: init, val: init, dispatch: dispatch, sentinel: function (x) {} };
+      S.states.push(st); return { val: st.val, set: st.sentinel };
+    };
+    S.boundName = function (v, unit) { if (v === null || v === undefined) return null; var st = S.states.find(function (s) { return (s.unit === unit || !s.unit) && Object.is(s.val, v); }); return st ? st.name : null; };
+    S.setterName = function (f) { var st = S.states.find(function (s) { return s.sentinel === f || (s.dispatch && s.dispatch === f); }); return st ? st.set : null; };
+    S.stateFromSetter = function (set, v, src) { src = src || setterSrc(set); var name = src ? src.name : set.slice(3); if (!src) name = name[0].toLowerCase() + name.slice(1); if (S.declared(name)) return name; S.states.push({ name: name, set: set, init: v, initSrc: src ? src.init : null, val: v, sentinel: function () {} }); return name; };
+    S.helpers = []; S.seen = new Set();
+    return S;
+  }
+  function liveOf(u, S) {
+    var lf = u.live; if (!lf) return;
+    var hook = lf.memoizedState, val = hook ? hook.memoizedState : lf.memoizedProps.init, dispatch = hook && hook.queue ? hook.queue.dispatch : null;
+    var r = S.state(lf.memoizedProps.children, val, dispatch); var st = S.states[S.states.length - 1]; st.val = val; st.unit = u; return r;
+  }
+  function gen(snips, fwk) {
+    var S = Ctx(fwk), blocks = [];
+    snips.forEach(function (sn) {
+      var lines = [];
+      if (sn.tiers) {
+        sn.units.forEach(function (u) { var cell = u.el.closest('[data-size]'); var pr = {}; Object.keys(u.props).forEach(function (k) { if (typeof u.props[k] !== 'function') pr[k] = u.props[k]; }); var inner = jsx({ $typeof: 1, type: u.fiber.elementType || u.fiber.type, props: pr, _source: u.fiber._debugSource }, 1, S, u); lines.push(S.fw === 'vue' ? '<div data-size="' + (cell ? cell.getAttribute('data-size') : 'md') + '">\n' + inner + '\n</div>' : '<div data-size="' + (cell ? cell.getAttribute('data-size') : 'md') + '">\n' + inner + '\n</div>'); });
+      } else {
+        sn.units.forEach(function (u) { liveOf(u, S); lines.push(jsx({ $$typeof: 1, type: u.fiber.elementType || u.fiber.type, props: u.props, _source: u.fiber._debugSource }, 0, S, u)); });
+      }
+      blocks.push({ title: sn.title, lines: lines, row: sn.units.length > 1 && !sn.tiers });
+    });
+    return { S: S, blocks: blocks };
+  }
+  function indent(s, n) { var p = '  '.repeat(n); return s.split('\n').map(function (l) { return l ? p + l : l; }).join('\n'); }
+  function wrapBody(lines, row, fwk) {
+    if (lines.length === 1) return lines[0];
+    if (!row) return lines.join('\n');
+    var open = fwk === 'vue' ? '<div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center">' : "<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>";
+    return open + '\n' + indent(lines.join('\n'), 1) + '\n</div>';
+  }
+  function code(snip, fwk) {
+    var g = gen([snip], fwk), S = g.S, b = g.blocks[0];
+    (S.free || []).forEach(function (n) { if (!S.declared(n)) S.stateFromSetter(n, null); });
+    pullHelpers((S.handlers || '') + ' ' + S.consts.map(function (c) { return c.text; }).join(' '), S);
+    /* A module-level constant that reads component state or a helper inside the component moves inside too. */
+    for (var moved = true; moved;) {
+      moved = false;
+      var inner = new Set(S.states.reduce(function (a, s) { return a.concat([s.name, s.set]); }, []).concat(S.helpers.map(function (h) { return h.name; })));
+      S.consts = S.consts.filter(function (c) { if (idsIn(c.text).some(function (x) { return inner.has(x); })) { S.helpers.push({ name: c.name, text: 'const ' + c.name + ' = ' + c.text }); moved = true; return false; } return true; });
+    }
+    var body = wrapBody(b.lines, b.row, fwk), comps = Array.from(S.used).sort();
+    var imp = comps.length ? 'import { ' + comps.join(', ') + " } from '@keyfunc/keybricks-ds" + (fwk === 'vue' ? '/vue' : '') + "'" : '';
+    /* Vue: rows that cells edit in place (bound to row.field) are reactive. */
+    var consts = S.consts.map(function (c) { return 'const ' + c.name + ' = ' + (fwk === 'vue' && S.reactive && S.reactive.has(c.name) ? 'reactive(' + c.text + ')' : c.text); }).join('\n\n');
+    if (fwk === 'vue') {
+      (S.free || []).forEach(function (n) { if (!S.declared(n)) S.stateFromSetter(n, null); });
+      var st = S.states.map(function (s) { return 'const ' + s.name + ' = ref(' + (s.initSrc || lit(s.init, 0, S)) + ')\nconst ' + s.set + " = (x) => { " + s.name + ".value = typeof x === 'function' ? x(" + s.name + '.value) : x }'; }).join('\n') + (S.helpers.length ? '\n' + S.helpers.map(function (h) { /* in <script setup> a ref is read as name.value (the template unwraps it) */ var mp = {}; S.states.forEach(function (s) { mp[s.name] = s.name + '.value'; }); return substIds(h.text, mp); }).join('\n') : '');
+      var multiRoot = body.split('\n').filter(function (l) { return /^</.test(l) && !/^<\//.test(l); }).length;
+      var scriptPart = (st || '') + '\n' + (consts || '');
+      var note = /<[A-Za-z][\w.]*[\s/>]/.test(scriptPart) ? '<!-- Custom cells below are written for React. In Vue, write each one as a slot — <template #cell-<key>="{ value, row }">…</template> — using the markup from the React tab. -->\n' : S.vueEl ? '<!-- Some props here take a React element in the React tab; in Vue pass that content through the component\'s slot. -->\n' : '';
+      return { novue: Array.from(S.novue), text: '<script setup>\n' + (S.states.length || S.reactive || S.needH ? "import { " + [S.needH ? 'h' : '', S.states.length ? 'ref' : '', S.reactive ? 'reactive' : ''].filter(Boolean).join(', ') + " } from 'vue'\n" : '') + imp + (consts ? '\n\n' + consts : '') + (st ? '\n\n' + st : '') + '\n<\/script>\n\n<template>\n' + note + indent(body, 1) + '\n</template>' };
+    }
+    (S.free || []).forEach(function (n) { if (!S.declared(n)) S.stateFromSetter(n, null); });
+    var helpers = S.helpers.map(function (h) { return h.text; }).join('\n');
+    /* Cards keep per-cell demo state with a Live helper (<Live init={v}>{(x, set) => …}</Live>); the snippet carries its three-line definition. */
+    var needLive = /<Live[\s>]/.test((consts || '') + '\n' + helpers + '\n' + body);
+    var useSt = S.states.length || needLive;
+    var reactImp = useSt && S.react ? "import React, { useState } from 'react'\n" : useSt ? "import { useState } from 'react'\n" : S.react ? "import React from 'react'\n" : '';
+    var liveDef = needLive ? '// One cell\'s own value — stands in for your row state\nfunction Live({ init, children }) {\n  const [value, setValue] = useState(init)\n  return children(value, setValue)\n}\n\n' : '';
+    var st2 = S.states.map(function (s) { return '  const [' + s.name + ', ' + s.set + '] = useState(' + (s.initSrc || lit(s.init, 1, S)) + ')'; }).join('\n') + (helpers ? '\n' + indent(helpers, 1) : '');
+    var multi = b.lines.length > 1 && !b.row;
+    var ret = multi ? '<>\n' + indent(body, 1) + '\n</>' : body;
+    return { novue: [], text: reactImp + imp + '\n\n' + liveDef + (consts ? consts + '\n\n' : '') + 'export default function Example() {\n' + (st2 ? st2 + '\n\n' : '') + '  return (\n' + indent(ret, 2) + '\n  )\n}' };
+  }
+
+  /* ---------- UI ---------- */
+  var ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>';
+  var SEG = 'display:inline-flex;gap:2px;padding:2px;height:28px;box-sizing:border-box;border-radius:var(--radius-md);background:var(--bg-inset);border:1px solid var(--border-control)';
+  var SEGB = 'height:22px;padding:0 8px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;';
+  var BTN = 'display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;box-sizing:border-box;border-radius:var(--radius-md);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);cursor:pointer;flex-shrink:0';
+  function el(tag, css, html) { var e = document.createElement(tag); if (css) e.style.cssText = css; if (html != null) e.innerHTML = html; return e; }
+  function makeBar(anchor, root) {
+    var wrap = el('div', 'grid-column:1/-1;contain:inline-size;max-width:100%;margin-top:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-family:var(--font-sans);background:var(--bg-surface);min-width:0;width:100%;box-sizing:border-box');
+    wrap.setAttribute('data-kb-code', ''); wrap.__kbAnchor = anchor; wrap.__anchor = anchor;
+    var panel = el('div', 'display:none;border-bottom:1px solid var(--border-subtle)');
+    var head = el('div', 'display:flex;align-items:center;justify-content:flex-end;padding:8px 12px;border-bottom:1px solid var(--border-subtle)');
+    var seg = el('div', SEG); head.appendChild(seg);
+    var list = el('div');
+    panel.appendChild(head); panel.appendChild(list);
+    var toggle = el('button', 'display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:32px;border:none;background:var(--addrow-bg,transparent);color:var(--addrow-fg,var(--text-secondary));font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);cursor:pointer');
+    toggle.type = 'button'; toggle.setAttribute('data-addrow', '');
+    wrap.appendChild(panel); wrap.appendChild(toggle);
+    var open = false, bar = { anchor: anchor };
+    function render() {
+      seg.innerHTML = '';
+      [['react', 'React'], ['vue', 'Vue 3']].forEach(function (o) {
+        var b = el('button', SEGB + (fw === o[0] ? 'background:var(--bg-surface);box-shadow:0 1px 2px rgba(0,0,0,.08);color:var(--text-heading)' : 'background:transparent;color:var(--text-secondary)'), o[1]);
+        b.type = 'button'; b.onclick = function () { fw = o[0]; try { localStorage.setItem('kb-code-fw', fw); } catch (e) {} bars.forEach(function (x) { x.refresh(); }); }; seg.appendChild(b);
+      });
+      list.innerHTML = '';
+      snipsFor(anchor, root).forEach(function (sn, i) {
+        var c = code(sn, fw);
+        var item = el('div', i ? 'border-top:1px solid var(--border-subtle)' : '');
+        var top = el('div', 'display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 0');
+        var title = el('span', 'font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'); title.textContent = sn.title || '';
+        var cp = el('button', BTN); cp.type = 'button';
+        var label = function (k) { cp.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span></span>'; cp.lastChild.textContent = tr(k); };
+        label('copy');
+        var text = fw === 'vue' && c.novue.length ? null : c.text;
+        cp.onclick = function () { try { navigator.clipboard.writeText(text || ''); } catch (e) {} label('copied'); setTimeout(function () { label('copy'); }, 1200); };
+        top.appendChild(title); if (text) top.appendChild(cp);
+        var pre = el('pre', 'margin:8px 0 0;padding:12px 16px;overflow:auto;max-height:420px;background:var(--bg-inset);font-family:var(--font-mono);font-size:var(--text-code);line-height:var(--leading-code);color:var(--text-body);white-space:pre;tab-size:2');
+        pre.textContent = text || tr('novue') + c.novue.join(', ');
+        if (!text) pre.style.whiteSpace = 'normal';
+        item.appendChild(top); item.appendChild(pre); list.appendChild(item);
+      });
+    }
+    var count = 0; try { count = snipsFor(anchor, root).length; } catch (e) {}
+    bar.paint = function () { toggle.innerHTML = ICON + '<span></span>'; toggle.lastChild.textContent = tr(open ? 'hide' : 'show') + (count > 1 ? ' · ' + count : ''); if (open) render(); };
+    bar.refresh = function () { if (open) render(); };
+    /* A card whose root is a narrow, centred box (one small control): the bar still gets a readable width. */
+    setTimeout(function () { if (wrap.parentElement === root && wrap.getBoundingClientRect().width < 320) wrap.style.minWidth = 'min(560px, calc(100vw - 32px))'; }, 0);
+    toggle.onclick = function () { open = !open; panel.style.display = open ? 'block' : 'none'; bar.paint(); };
+    bar.paint();
+    bars.push(bar);
+    return wrap;
+  }
+  function snipsFor(anchor, root) {
+    var units = scan(root).filter(function (u) { return u.anchor === anchor; }), map = new Map(), out = [];
+    units.forEach(function (u) {
+      if (u.tiers && u.el.closest('[lang]') && u.el.closest('[lang]').getAttribute('lang') !== 'en') return;
+      var key = u.row; if (!map.has(key)) { var sn = { units: [], tiers: !!u.tiers, title: '' }; map.set(key, sn); out.push(sn); } map.get(key).units.push(u);
+    });
+    out.forEach(function (sn) { sn.title = sn.tiers ? (labelFor(sn.units[0], anchor) || tr('tiers')) : labelFor(sn.units[0], anchor); });
+    /* A section (.kb-sec / .sec / .case) without live state reads as one example: one snippet for all its controls. */
+    if (out.length > 1 && units[0].mode === 'append' && !out.some(function (s) { return s.tiers || s.units.some(function (u) { return u.live; }); })) {
+      var h = anchor.querySelector('.kb-h,h3,h4,.k,.lbl');
+      return [{ units: out.reduce(function (a, s) { return a.concat(s.units); }, []), tiers: false, title: h ? h.textContent.trim() : '' }];
+    }
+    return out;
+  }
+  /* Examples that overflow their box (an open menu, a stacked toast) must not sit on the bar: push the bar below them. */
+  function clear(bar, anchor, root) {
+    var fix = function () {
+      var us = scan(root).filter(function (u) { return u.anchor === anchor && u.el && !u.fixed; }); if (!us.length) return;
+      var bottom = Math.max.apply(null, us.map(function (u) { return u.el.getBoundingClientRect().bottom; }));
+      bar.style.marginTop = '12px'; var gap = bar.getBoundingClientRect().top - bottom;
+      if (gap < 8) bar.style.marginTop = (12 + 8 - gap) + 'px';
+    };
+    requestAnimationFrame(fix); setTimeout(fix, 500);
+  }
+  function pass(root) {
+    var units = scan(root); if (!units.length || units.length > 80) return;
+    var seen = new Set(), anchors = [];
+    units.forEach(function (u) { if (!seen.has(u.anchor)) { seen.add(u.anchor); anchors.push(u); } });
+    anchors.forEach(function (u) {
+      if (u.anchor.__kbCode) return; u.anchor.__kbCode = true;
+      var bar = makeBar(u.anchor, root);
+      /* Never inside a box that clips (a fixed-height pane): the bar goes after the outermost clipping box instead. */
+      var clips = function (n) { var cs = getComputedStyle(n); return cs.overflowY !== 'visible' || cs.overflowX !== 'visible'; };
+      var top = null; for (var n = u.mode === 'append' ? u.anchor : u.anchor.parentElement; n && n !== root && root.contains(n); n = n.parentElement) if (clips(n)) top = n;
+      if (top) { top.parentNode.insertBefore(bar, top.nextSibling); clear(bar, u.anchor, root); return; }
+      if (u.mode === 'append') { u.anchor.appendChild(bar); clear(bar, u.anchor, root); return; }
+      /* A grid that also holds a full-width block with its own bar: this bar goes right under the grid's own cells, before that block. */
+      var inner = false && Array.prototype.find.call(u.anchor.children, function (ch) { return anchors.some(function (o) { return o.anchor !== u.anchor && ch.contains(o.anchor); }); });
+      if (inner) u.anchor.insertBefore(bar, inner); else u.anchor.parentNode.insertBefore(bar, u.anchor.nextSibling);
+      clear(bar, u.anchor, root);
+    });
+  }
+  function attach(sel) {
+    if (/\/icons-[^/]*\.card\.html/.test(location.pathname)) return;
+    var root = document.querySelector(sel); if (!root) return;
+    /* Cards render at different speeds (charts, 3D): pass now, then again whenever the card's own DOM changes, for 20s. */
+    var run = function () { try { pass(root); } catch (e) { console.warn('usage-code:', e); } };
+    [60, 600, 1600].forEach(function (d) { setTimeout(run, d); });
+    var tm = null, mo = new MutationObserver(function (ms) {
+      if (ms.every(function (m) { return m.target.closest && m.target.closest('[data-kb-code]'); })) return;
+      clearTimeout(tm); tm = setTimeout(run, 250);
+    });
+    mo.observe(root, { childList: true, subtree: true });
+    setTimeout(function () { mo.disconnect(); }, 20000);
+  }
+  window.KBUsage = { _rs: function (k, tx) { return renderSlot(k, tx, 0, Ctx('vue')); }, _x: function (b) { var u = new Set(); var r = expandHelpers(b, u); return [r, r && jsxToVue(r)]; }, attach: attach, _code: code, _snips: function (sel) { var r = document.querySelector(sel); var a = scan(r); return a; } };
+})();