@keyfunc/keybricks-ds 2.1.1 → 2.3.1

package/components/feedback/Modal.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { px } from '../px.js'
 import IconButton from '../buttons/IconButton.vue'
-// Modal dialog. A size region that defaults to lg (36px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart.
+// Modal dialog. A size region that defaults to lg (40px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart.
 defineProps({ open: Boolean, title: String, subtitle: String, width: { type: [Number, String], default: 440 }, size: { type: String, default: 'lg' }, style: Object })
 const emit = defineEmits(['close'])
 </script>

package/components/feedback/Timeline.vue

@@ -12,8 +12,8 @@ defineProps({ items: { type: Array, default: () => [] }, style: Object })
         <span v-if="i < items.length - 1" style="width:1.5px;flex:1;min-height:14px;background:var(--border-control)" />
       </div>
       <div :style="{ display: 'flex', flexDirection: 'column', gap: '2px', paddingBottom: i < items.length - 1 ? '18px' : 0, minWidth: 0, paddingTop: '3px' }">
-        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-heading)">{{ it.title }}</span>
-        <span v-if="it.meta" style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)">{{ it.meta }}</span>
+        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ it.title }}</span>
+        <span v-if="it.meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted)">{{ it.meta }}</span>
         <span v-if="it.body" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body);padding-top:4px">{{ it.body }}</span>
       </div>
     </div>

package/components/forms/Combobox.d.ts

@@ -8,7 +8,7 @@ export interface ComboboxProps {
   disabled?: boolean;
   error?: boolean;
   width?: number | string;
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   onChange?: (value: string) => void;
   style?: React.CSSProperties;

package/components/forms/DatePicker.d.ts

@@ -7,7 +7,7 @@ export interface DatePickerProps {
   disabled?: boolean;
   error?: boolean;
   width?: number | string;
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   /** BCP 47 locale for the month title, weekday initials and the field label (default "en-US"; e.g. "zh-CN", "ja-JP") */
   locale?: string;

package/components/forms/Input.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** r8 hairline text input at the region's tier height (sm 24 · md 32 · lg 36); readOnly = inset fill, disabled = 50% opacity, error = red border+ring. Extends native input props. */
+/** r8 hairline text input at the region's tier height (sm 28 · md 32 · lg 40); readOnly = inset fill, disabled = 50% opacity, error = red border+ring. Extends native input props. */
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /** Size tier. Omit to inherit the enclosing region's tier (the default); controls that share a row must share a tier. */
   size?: "sm" | "md" | "lg";

package/components/forms/Input.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { inputBase } from "./input-base.js";
 export { inputBase };
 
-/** Text input, r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). readOnly = inset fill; disabled = 50% opacity; error = red border + ring. */
+/** Text input, r8, tier height (sm 28 · md 32 · lg 40 — omit `size` to inherit the region's tier). readOnly = inset fill; disabled = 50% opacity; error = red border + ring. */
 export function Input({ readOnly, disabled, error, size, style, ...rest }) {
   const [focus, setFocus] = React.useState(false);
   return <input readOnly={readOnly} disabled={disabled} data-size={size} data-field={readOnly || disabled ? undefined : ""} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
@@ -30,7 +30,7 @@ export function Textarea({ style, rows = 4, error, disabled, showCount, maxLengt
           ...(error || over ? { borderColor: "var(--danger)" } : null),
           ...(focus && !disabled ? { borderColor: error || over ? "var(--danger)" : "var(--focus-border)", boxShadow: `0 0 0 2px ${error || over ? "var(--danger-bg)" : "var(--focus-ring)"}` } : null),
           ...(disabled ? { opacity: .5, cursor: "not-allowed", background: "var(--bg-inset)" } : null), ...style }} {...rest} />
-      {showCount ? <span style={{ position: "absolute", right: 10, bottom: 7, fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: over ? "var(--danger)" : "var(--text-muted)" }}>{len}{maxLength != null ? `/${maxLength}` : ""}</span> : null}
+      {showCount ? <span style={{ position: "absolute", right: 10, bottom: 7, fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: over ? "var(--danger)" : "var(--text-muted)" }}>{len}{maxLength != null ? `/${maxLength}` : ""}</span> : null}
     </div>
   );
 }

package/components/forms/Input.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { inputBase } from './input-base.js'
-// Text input, r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
+// Text input, r8, tier height (sm 28 · md 32 · lg 40 — omit `size` to inherit the region's tier). v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
 // Multiline variant lives in Textarea.vue.
 const props = defineProps({ modelValue: String, readonly: Boolean, disabled: Boolean, error: Boolean, size: String, style: Object })
 defineEmits(['update:modelValue'])

package/components/forms/MultiSelect.d.ts

@@ -9,7 +9,7 @@ export interface MultiSelectProps {
   maxTags?: number;
   disabled?: boolean;
   width?: number | string;
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   onChange?: (value: string[]) => void;
   style?: React.CSSProperties;

package/components/forms/NumberStepper.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 /** Segmented −/value/+ number stepper at the region's tier height, r8 — "Preview rows" control. */
 export interface NumberStepperProps {
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   value?: number;
   onChange?: (next: number) => void;

package/components/forms/SearchInput.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export interface SearchInputProps {
   placeholder?: string;
   bare?: boolean;
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   value?: string;
   /** Receives the new string value (consistent with Select / Combobox / MultiSelect) */

package/components/forms/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** Hairline select, r8, at the region's tier height (sm 24 · md 32 · lg 36). disabled fills inset like Input's readOnly. */
+/** Hairline select, r8, at the region's tier height (sm 28 · md 32 · lg 40). disabled fills inset like Input's readOnly. */
 export interface SelectProps {
   options?: string[];
   /** Size tier. Omit to inherit the enclosing region's tier (the default); controls that share a row must share a tier. */

package/components/forms/Select.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Native select styled per Keybricks: r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readOnly), 50% opacity; error = red border. */
+/** Native select styled per Keybricks: r8, tier height (sm 28 · md 32 · lg 40 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readOnly), 50% opacity; error = red border. */
 export function Select({ options = [], size, value, onChange, placeholder, disabled, error, style }) {
   return (
     <div data-size={size} style={{ position: "relative", display: "inline-flex", ...style }}>

package/components/forms/Select.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Icon from '../icons/Icon.vue'
-// Native select styled per Keybricks: r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readonly), 50% opacity; error = red border.
+// Native select styled per Keybricks: r8, tier height (sm 28 · md 32 · lg 40 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readonly), 50% opacity; error = red border.
 const props = defineProps({ modelValue: String, options: { type: Array, default: () => [] }, size: String, placeholder: String, disabled: Boolean, error: Boolean, style: Object })
 defineEmits(['update:modelValue'])
 </script>

package/components/forms/Slider.jsx

@@ -13,7 +13,7 @@ export function Slider({ value = 50, min = 0, max = 100, step = 1, labels, showV
         <div style={{ position: "absolute", left: 0, right: 0, height: 6, borderRadius: "var(--radius-full)", background: "var(--track)" }}></div>
         <div style={{ position: "absolute", left: 0, width: pct + "%", height: 6, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }}></div>
         <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", width: 16, height: 16, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", border: "2px solid var(--action-primary)", boxSizing: "border-box", boxShadow: drag ? "0 0 0 4px var(--focus-ring), 0 1px 2px rgba(0,0,0,.15)" : "var(--thumb-ring, 0 1px 2px rgba(0,0,0,.15))", transition: "box-shadow var(--dur-fast) var(--ease-out)" }}></span>
-        {(drag || showValue) && <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", bottom: 22, background: "var(--tooltip-bg)", color: "var(--tooltip-fg)", borderRadius: "var(--radius-sm)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", whiteSpace: "nowrap", pointerEvents: "none" }}>{value}{unit}</span>}
+        {(drag || showValue) && <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", bottom: 22, background: "var(--tooltip-bg)", color: "var(--tooltip-fg)", borderRadius: "var(--radius-sm)", padding: "2px 6px", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", whiteSpace: "nowrap", pointerEvents: "none" }}>{value}{unit}</span>}
       </div>
       {labels && <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 4, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}><span>{min}{unit}</span><span>{max}{unit}</span></div>}
     </div>

package/components/forms/Slider.vue

@@ -16,7 +16,7 @@ onUnmounted(up)
       <div style="position:absolute;left:0;right:0;height:6px;border-radius:var(--radius-full);background:var(--track)" />
       <div :style="{ position: 'absolute', left: 0, width: pct + '%', height: '6px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
       <span :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', width: '16px', height: '16px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', border: '2px solid var(--action-primary)', boxSizing: 'border-box', boxShadow: drag ? '0 0 0 4px var(--focus-ring), 0 1px 2px rgba(0,0,0,.15)' : 'var(--thumb-ring, 0 1px 2px rgba(0,0,0,.15))', transition: 'box-shadow var(--dur-fast) var(--ease-out)' }" />
-      <span v-if="drag || showValue" :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', bottom: '22px', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-sm)', padding: '2px 6px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', whiteSpace: 'nowrap', pointerEvents: 'none' }">{{ modelValue }}{{ unit }}</span>
+      <span v-if="drag || showValue" :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', bottom: '22px', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-sm)', padding: '2px 6px', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', whiteSpace: 'nowrap', pointerEvents: 'none' }">{{ modelValue }}{{ unit }}</span>
     </div>
     <div v-if="labels" style="display:flex;justify-content:space-between;padding-top:4px;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)"><span>{{ min }}{{ unit }}</span><span>{{ max }}{{ unit }}</span></div>
   </div>

package/components/forms/Switch.jsx

@@ -20,7 +20,7 @@ import { Icon } from "../icons/Icon.jsx";
  */
 
 /* Geometry in CSS so it follows the tier without JavaScript: knob = track height − 4, glyph = half the track height. */
-const H = "var(--switch-h)", W = "var(--switch-w)", KNOB = "calc(var(--switch-h) - 4px)", GLYPH = "calc(var(--switch-h) * .5)";
+const H = "var(--switch-h)", W = "var(--switch-w)", KNOB = "calc(var(--switch-h) - 4px)", GLYPH = "calc(var(--switch-h) * .5)", TEXT = "max(calc(var(--switch-h) * .5), var(--text-glyph-min))" /* text never drops below the glyph floor (12px in CJK) */;
 
 const pick = (v, on) => (v && typeof v === "object" ? (on ? v.on : v.off) : v);
 
@@ -60,14 +60,14 @@ export function Switch({ checked = false, onChange, disabled, size, tone = "prim
   const glyphText = pick(knobText, checked);
   const knobX = checked ? `calc(100% - ${H} + 2px)` : 2;
 
-  const knob = <span aria-hidden="true" style={{ position: "absolute", top: 2, left: knobX, width: KNOB, height: KNOB, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", boxShadow: "0 1px 2px rgba(0,0,0,.18)", transition: "left 160ms ease-out", display: "flex", alignItems: "center", justifyContent: "center", color: track, fontSize: GLYPH, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", overflow: "hidden" }}>
+  const knob = <span aria-hidden="true" style={{ position: "absolute", top: 2, left: knobX, width: KNOB, height: KNOB, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", boxShadow: "0 1px 2px rgba(0,0,0,.18)", transition: "left 160ms ease-out", display: "flex", alignItems: "center", justifyContent: "center", color: track, fontSize: TEXT, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", overflow: "hidden" }}>
     {loading
       ? <span style={{ width: GLYPH, height: GLYPH, borderRadius: "50%", border: `1.5px solid ${track}`, borderRightColor: "transparent", animation: "kb-spin 720ms linear infinite" }}></span>
       : glyphIcon ? <Icon name={glyphIcon} size={10} strokeWidth={2.5} style={{ width: GLYPH, height: GLYPH }} />
       : glyphText ? <span>{String(glyphText).slice(0, 1)}</span> : null}
   </span>;
 
-  const insideStyle = (side) => ({ position: "absolute", top: 0, bottom: 0, [side]: 6, display: "flex", alignItems: "center", fontSize: GLYPH, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", letterSpacing: ".2px", color: "var(--on-accent)", transition: "opacity 160ms ease-out", pointerEvents: "none", whiteSpace: "nowrap" });
+  const insideStyle = (side) => ({ position: "absolute", top: 0, bottom: 0, [side]: 6, display: "flex", alignItems: "center", fontSize: TEXT, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", letterSpacing: ".2px", color: "var(--on-accent)", transition: "opacity 160ms ease-out", pointerEvents: "none", whiteSpace: "nowrap" });
 
   const pill = <span role="switch" aria-checked={checked} aria-busy={loading || undefined} aria-disabled={disabled || undefined} tabIndex={inert ? -1 : 0} onClick={flip}
     onKeyDown={e => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); flip(); } }}

package/components/forms/Switch.vue

@@ -12,17 +12,20 @@ const props = defineProps({
   size: String, tone: { type: String, default: 'primary' },
   onColor: String, offColor: String,
   knobIcon: [String, Object], knobText: [String, Object],
-  insideOn: String, insideOff: String, label: String, labelOn: String, labelOff: String,
+  insideOn: String, insideOff: String, inlinePrompt: Object, label: String, labelOn: String, labelOff: String,
   beforeChange: Function, style: Object
 })
 const emit = defineEmits(['update:checked', 'change'])
-const H = 'var(--switch-h)', W = 'var(--switch-w)', KNOB = 'calc(var(--switch-h) - 4px)', GLYPH = 'calc(var(--switch-h) * .5)'
+const H = 'var(--switch-h)', W = 'var(--switch-w)', KNOB = 'calc(var(--switch-h) - 4px)', GLYPH = 'calc(var(--switch-h) * .5)', TEXT = 'max(calc(var(--switch-h) * .5), var(--text-glyph-min))' /* text never drops below the glyph floor (12px in CJK) */
 const busy = ref(false); let alive = true; onBeforeUnmount(() => { alive = false })
 const isLoading = computed(() => props.loading || busy.value)
 const inert = computed(() => props.disabled || isLoading.value)
-const hasInside = computed(() => props.insideOn != null || props.insideOff != null)
+// inlinePrompt { on, off } is an alias of the insideOn / insideOff pair (same as Switch.jsx)
+const inOn = computed(() => props.insideOn ?? (props.inlinePrompt ? props.inlinePrompt.on : undefined))
+const inOff = computed(() => props.insideOff ?? (props.inlinePrompt ? props.inlinePrompt.off : undefined))
+const hasInside = computed(() => inOn.value != null || inOff.value != null)
 // inside text needs a wider track so the knob never covers the word: text runs at half the track height, ~.68em per character
-const width = computed(() => { if (!hasInside.value) return W; const n = Math.max((props.insideOn || '').length, (props.insideOff || '').length); return `max(${W}, calc(${H} * ${(1 + n * .34).toFixed(2)} + 6px))` })
+const width = computed(() => { if (!hasInside.value) return W; const n = Math.max((inOn.value || '').length, (inOff.value || '').length); return `max(${W}, calc(${H} * ${(1 + n * .34).toFixed(2)} + 6px))` })
 const track = computed(() => props.checked ? (props.onColor || (props.tone === 'semantic' ? 'var(--success)' : 'var(--action-primary)')) : (props.offColor || (props.tone === 'semantic' ? 'var(--danger)' : 'var(--border-strong)')))
 const pick = (v) => v && typeof v === 'object' ? (props.checked ? v.on : v.off) : v
 const glyphIcon = computed(() => pick(props.knobIcon))
@@ -40,7 +43,7 @@ async function flip() {
   }
   emit('update:checked', next); emit('change', next)
 }
-const insideStyle = (side, on) => ({ position: 'absolute', top: 0, bottom: 0, [side]: '6px', display: 'flex', alignItems: 'center', fontSize: GLYPH, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', letterSpacing: '.2px', color: 'var(--on-accent)', transition: 'opacity 160ms ease-out', pointerEvents: 'none', whiteSpace: 'nowrap', opacity: on === props.checked ? 1 : 0 })
+const insideStyle = (side, on) => ({ position: 'absolute', top: 0, bottom: 0, [side]: '6px', display: 'flex', alignItems: 'center', fontSize: TEXT, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', letterSpacing: '.2px', color: 'var(--on-accent)', transition: 'opacity 160ms ease-out', pointerEvents: 'none', whiteSpace: 'nowrap', opacity: on === props.checked ? 1 : 0 })
 const cap = (active) => ({ fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontFamily: 'var(--font-sans)', fontWeight: active ? 'var(--weight-medium)' : 'var(--weight-regular)', color: active ? 'var(--text-heading)' : 'var(--text-muted)', transition: 'color 160ms ease-out', cursor: inert.value ? 'default' : 'pointer', userSelect: 'none' })
 </script>
 <template>
@@ -48,9 +51,9 @@ const cap = (active) => ({ fontSize: 'var(--control-text)', lineHeight: 'var(--c
     <span v-if="labelOff != null" :style="cap(!checked)" @click="flip">{{ labelOff }}</span>
     <span role="switch" :aria-checked="checked" :aria-busy="isLoading || undefined" :aria-disabled="disabled || undefined" :tabindex="inert ? -1 : 0" @click="flip" @keydown.space.prevent="flip" @keydown.enter.prevent="flip"
       :style="{ position: 'relative', display: 'inline-block', width: width, height: H, borderRadius: 'var(--radius-full)', '--sw-track': track, background: 'var(--sw-bg, var(--sw-track))', transition: 'background 160ms ease-out', cursor: inert ? (isLoading ? 'progress' : 'not-allowed') : 'pointer', flexShrink: 0, verticalAlign: 'middle', outline: 'none' }">
-      <span v-if="hasInside" :style="insideStyle('left', true)">{{ insideOn }}</span>
-      <span v-if="hasInside" :style="insideStyle('right', false)">{{ insideOff }}</span>
-      <span aria-hidden="true" :style="{ position: 'absolute', top: '2px', left: knobX, width: KNOB, height: KNOB, borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', boxShadow: '0 1px 2px rgba(0,0,0,.18)', transition: 'left 160ms ease-out', display: 'flex', alignItems: 'center', justifyContent: 'center', color: track, fontSize: GLYPH, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', overflow: 'hidden' }">
+      <span v-if="hasInside" :style="insideStyle('left', true)">{{ inOn }}</span>
+      <span v-if="hasInside" :style="insideStyle('right', false)">{{ inOff }}</span>
+      <span aria-hidden="true" :style="{ position: 'absolute', top: '2px', left: knobX, width: KNOB, height: KNOB, borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', boxShadow: '0 1px 2px rgba(0,0,0,.18)', transition: 'left 160ms ease-out', display: 'flex', alignItems: 'center', justifyContent: 'center', color: track, fontSize: TEXT, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', overflow: 'hidden' }">
         <span v-if="isLoading" :style="{ width: GLYPH, height: GLYPH, borderRadius: '50%', border: '1.5px solid ' + track, borderRightColor: 'transparent', animation: 'kb-spin 720ms linear infinite' }"></span>
         <Icon v-else-if="glyphIcon" :name="glyphIcon" :size="10" :stroke-width="2.5" :style="{ width: GLYPH, height: GLYPH }" />
         <span v-else-if="glyphText">{{ glyphText }}</span>

package/components/forms/Textarea.vue

@@ -15,6 +15,6 @@ const s = computed(() => ({ ...inputBase, height: '90px', resize: 'vertical', pa
 <template>
   <div style="position:relative">
     <textarea :rows="rows" :disabled="disabled" :data-size="size" :data-field="disabled ? undefined : ''" :maxlength="showCount ? undefined : maxLength" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @focus="focus = true" @blur="focus = false" :style="s"></textarea>
-    <span v-if="showCount" :style="{ position: 'absolute', right: '10px', bottom: '7px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: over ? 'var(--danger)' : 'var(--text-muted)' }">{{ len }}{{ maxLength != null ? `/${maxLength}` : '' }}</span>
+    <span v-if="showCount" :style="{ position: 'absolute', right: '10px', bottom: '7px', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', color: over ? 'var(--danger)' : 'var(--text-muted)' }">{{ len }}{{ maxLength != null ? `/${maxLength}` : '' }}</span>
   </div>
 </template>

package/components/forms/input-base.js

@@ -1,4 +1,4 @@
 // Shared base style for text-like controls (Input, Textarea, Combobox, DatePicker).
 // Lives in a plain module because <script setup> cannot export values.
-// Height, text and padding come from the size tier of the enclosing region (tokens/layout.css): sm 24 · md 32 · lg 36.
+// Height, text and padding come from the size tier of the enclosing region (tokens/layout.css): sm 28 · md 32 · lg 40.
 export const inputBase = { height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: '1px solid var(--field-border, var(--border-control))', background: 'var(--bg-surface)', padding: '0 var(--control-px)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box', width: '100%' }

package/components/icons/Icon.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 // Keybricks icon set — the source file uses Lucide stroke glyphs (24-grid, stroke 2,
 // round caps/joins, currentColor) rendered at 14/16px. Path data below is from the
-// public Lucide set, matching the glyphs used across Keyfunc UI v8.
+// public Lucide set, matching the glyphs used across Keyfunc UI v8, plus thirteen Keybricks
+// glyphs (event … time-restatement, ai, ai-sparkles) drawn to the same rules.
 export const ICON_PATHS = {
   search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
   bell: '<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>',
@@ -74,6 +75,21 @@ export const ICON_PATHS = {
   info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
   "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
   calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
+  // Keybricks glyphs — drawn to the core-set rules (see readme.md › Iconography)
+  event: '<path d="M17 2 22 12 17 22 12 12Z"/><path d="M7 2 2 12l5 10"/><path d="M12 2 7 12l5 10"/>',
+  consolidation: '<rect width="4" height="4" x="2" y="17" rx="1"/><rect width="4" height="4" x="10" y="17" rx="1"/><rect width="4" height="4" x="18" y="17" rx="1"/><path d="M4 17v-5a2 2 0 0 1 2-2h2"/><path d="M20 17v-5a2 2 0 0 0-2-2h-2"/><path d="M12 17v-4"/><path d="M12 3v6"/><path d="M9 6h6"/>',
+  journal: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="M2 8h20"/><path d="M12 8v12"/><path d="M6 12h2"/><path d="M16 16h2"/>',
+  reconciliation: '<path d="M3 6h8"/><path d="m15 4 2 2 4-4"/><path d="M3 10h18"/><path d="M3 18h8"/><path d="m15 16 2 2 4-4"/><path d="M3 22h18"/>',
+  "view-tree": '<rect width="4" height="4" x="4" y="2" rx="1"/><rect width="4" height="4" x="16" y="10" rx="1"/><rect width="4" height="4" x="16" y="18" rx="1"/><path d="M6 6v4a2 2 0 0 0 2 2h8"/><path d="M6 10v8a2 2 0 0 0 2 2h8"/>',
+  "drilldown": '<path d="M12 2v11"/><path d="m8 9 4 4 4-4"/><path d="M19 17H5"/><path d="M16 21H8"/>',
+  "add-below": '<path d="M11 2v10"/><path d="M6 7h10"/><path d="M22 9v5a4 4 0 0 1-4 4H2"/><path d="m6 14-4 4 4 4"/>',
+  "copy-data": '<path d="M14 22h5a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5"/><path d="m11 16 4-4-4-4"/><path d="M3 22v-6a4 4 0 0 1 4-4h8"/>',
+  "task-execution": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M8 14h8"/><path d="m13 11 3 3-3 3"/>',
+  "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
+  "time-restatement": '<path d="M2 12A10 10 0 1 0 4 6"/><path d="M12 7v5h5"/><path d="M3 2v5h5"/>',
+  // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
+  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
 };
 
 import { FEATHER_PATHS } from "./feather-paths.js";

package/components/icons/Icon.prompt.md

@@ -6,3 +6,5 @@ Stroke icon component embedding the Lucide glyphs used across Keybricks; use for
 ```
 
 Sizes in the product: 14 (dense chrome), 16 (nav/buttons), 18 (palette tiles), 22 (node tiles). Color inherits `currentColor`. Categories pair hue + tint bg: source `database/table/layers/grid-3x3`, join `text-search/shuffle`, transform `sliders-horizontal/split/arrow-right-left/menu/funnel/chart-no-axes-column/trending-up/code`, merge `database/merge`, output `table/layers/grid-3x3`.
+
+Keybricks glyphs (drawn to the same grid rules): modules `reconciliation`, `consolidation`, `journal`, `event`, `view-tree`; actions `drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`, `time-restatement`. For hierarchy use `layers`; for change use `repeat`.

package/components/icons/Icon.vue

@@ -1,6 +1,6 @@
 <script setup>
 // Keybricks icon set — Lucide stroke glyphs (24-grid, stroke 2, round caps/joins, currentColor), rendered at 14/16px.
-// Full path dictionary mirrors icons/Icon.jsx's ICON_PATHS (80+ entries) — see that file for the complete list.
+// Full path dictionary mirrors icons/Icon.jsx's ICON_PATHS (81 entries) — see that file for the complete list.
 import { VUE_ICON_PATHS } from './icon-paths.js'
 import { FEATHER_PATHS } from './feather-paths.js'
 const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, style: Object })

package/components/icons/icon-paths.js

@@ -70,4 +70,19 @@ export const VUE_ICON_PATHS = {
   info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
   "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
   calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
+  // Keybricks glyphs — drawn to the core-set rules (see readme.md › Iconography)
+  event: '<path d="M17 2 22 12 17 22 12 12Z"/><path d="M7 2 2 12l5 10"/><path d="M12 2 7 12l5 10"/>',
+  consolidation: '<rect width="4" height="4" x="2" y="17" rx="1"/><rect width="4" height="4" x="10" y="17" rx="1"/><rect width="4" height="4" x="18" y="17" rx="1"/><path d="M4 17v-5a2 2 0 0 1 2-2h2"/><path d="M20 17v-5a2 2 0 0 0-2-2h-2"/><path d="M12 17v-4"/><path d="M12 3v6"/><path d="M9 6h6"/>',
+  journal: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="M2 8h20"/><path d="M12 8v12"/><path d="M6 12h2"/><path d="M16 16h2"/>',
+  reconciliation: '<path d="M3 6h8"/><path d="m15 4 2 2 4-4"/><path d="M3 10h18"/><path d="M3 18h8"/><path d="m15 16 2 2 4-4"/><path d="M3 22h18"/>',
+  "view-tree": '<rect width="4" height="4" x="4" y="2" rx="1"/><rect width="4" height="4" x="16" y="10" rx="1"/><rect width="4" height="4" x="16" y="18" rx="1"/><path d="M6 6v4a2 2 0 0 0 2 2h8"/><path d="M6 10v8a2 2 0 0 0 2 2h8"/>',
+  "drilldown": '<path d="M12 2v11"/><path d="m8 9 4 4 4-4"/><path d="M19 17H5"/><path d="M16 21H8"/>',
+  "add-below": '<path d="M11 2v10"/><path d="M6 7h10"/><path d="M22 9v5a4 4 0 0 1-4 4H2"/><path d="m6 14-4 4 4 4"/>',
+  "copy-data": '<path d="M14 22h5a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5"/><path d="m11 16 4-4-4-4"/><path d="M3 22v-6a4 4 0 0 1 4-4h8"/>',
+  "task-execution": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M8 14h8"/><path d="m13 11 3 3-3 3"/>',
+  "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
+  "time-restatement": '<path d="M2 12A10 10 0 1 0 4 6"/><path d="M12 7v5h5"/><path d="M3 2v5h5"/>',
+  // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
+  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
 };

package/components/index.js

@@ -90,7 +90,7 @@ export { ICON_PATHS, Icon } from "./icons/Icon.jsx";
 export { Unicon } from "./icons/Unicon.jsx";
 
 /* navigation/ */
-export { Breadcrumb, ThemeToggle } from "./navigation/Breadcrumb.jsx";
+export { Breadcrumb, ThemeToggle, applyStoredTheme } from "./navigation/Breadcrumb.jsx";
 export { DocTree } from "./navigation/DocTree.jsx";
 export { KEYBRICKS_NAV, Sidebar } from "./navigation/Sidebar.jsx";
 export { PageHeading, PageToolbar, TopBar } from "./navigation/TopBar.jsx";

package/components/navigation/Breadcrumb.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { applyStoredTheme } from "./theme-store.js";
 
 function Crumb({ label, last, hovered, onSelect }) {
   const [hover, setHover] = React.useState(false);
@@ -111,10 +112,5 @@ export function ThemeToggle({ size = 34, dark: darkProp, onToggle, style }) {
   );
 }
 
-/** Reads the persisted theme and applies it before first paint. Call once at app start. */
-export function applyStoredTheme() {
-  if (typeof document === "undefined") return;
-  let t = "light";
-  try { t = localStorage.getItem("kb-theme") || "light"; } catch (e) {}
-  document.documentElement.dataset.theme = t;
-}
+/** Reads the persisted theme and applies it before first paint. Call once at app start. Defined in theme-store.js, shared with the Vue entry. */
+export { applyStoredTheme };

package/components/navigation/Breadcrumb.vue

@@ -62,11 +62,5 @@ const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(
   </nav>
 </template>
 
-<!-- applyStoredTheme() — reads the persisted theme and applies it before first paint. Call once at app start (main.js): -->
-<!--
-export function applyStoredTheme() {
-  let t = 'light'
-  try { t = localStorage.getItem('kb-theme') || 'light' } catch (e) {}
-  document.documentElement.dataset.theme = t
-}
--->
+<!-- applyStoredTheme() lives in ./theme-store.js (shared with React) and is exported from the Vue entry.
+     Call it once in main.js before mounting. -->

package/components/navigation/Sidebar.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { KEYBRICKS_NAV } from "./nav-model.js";
 
 function NavItem({ icon, label, active, indent, collapsed, badge, onClick }) {
   const [hover, setHover] = React.useState(false);
@@ -51,25 +52,5 @@ export function Sidebar({ items = [], footerItems = [{ icon: "circle-help", labe
   );
 }
 
-/** Default Keybricks nav model (Home dashboard). */
-export const KEYBRICKS_NAV = [
-  { icon: "house", label: "Home" },
-  { icon: "file-text", label: "Documents" },
-  { icon: "layout-grid", label: "Business Intelligence" },
-  { icon: "database", label: "Data Integration" },
-  { icon: "scale", label: "Reconciliation" },
-  { icon: "network", label: "Consolidation" },
-  {
-    icon: "folder-cog", label: "Management", children: [
-      { icon: "box", label: "Modeling" },
-      { icon: "workflow", label: "Workflow" },
-      { icon: "shield", label: "Security Management" },
-      { icon: "refresh-cw", label: "System Migration" },
-      { icon: "chart-column", label: "Business Logic" },
-      { icon: "list-todo", label: "Tasks Management" },
-      { icon: "circle-check", label: "Validation Rules" },
-      { icon: "settings-2", label: "Control Center" },
-      { icon: "network", label: "Reconciliation" },
-    ],
-  },
-];
+/** Default Keybricks nav model (Home dashboard) — defined in nav-model.js, shared with the Vue entry. */
+export { KEYBRICKS_NAV };

package/components/navigation/Sidebar.vue

@@ -45,10 +45,5 @@ function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-i
   </aside>
 </template>
 
-<!-- KEYBRICKS_NAV — default Keybricks nav model (Home dashboard), same shape as Sidebar.jsx's export, for reference:
-export const KEYBRICKS_NAV = [
-  { icon: 'house', label: 'Home' }, { icon: 'file-text', label: 'Documents' },
-  { icon: 'layout-grid', label: 'Business Intelligence' }, { icon: 'database', label: 'Data Integration' },
-  { icon: 'scale', label: 'Reconciliation' }, { icon: 'network', label: 'Consolidation' },
-  { icon: 'folder-cog', label: 'Management', children: [ ... ] },
-] -->
+<!-- The product's nav model is KEYBRICKS_NAV in ./nav-model.js — also exported from the Vue entry:
+     import { Sidebar, KEYBRICKS_NAV } from '@keyfunc/keybricks-ds/vue' -->

package/components/navigation/Tree.jsx

@@ -165,7 +165,7 @@ function Row({ item, state, cfg, api }) {
           <Highlight text={titleOf(node)} query={cfg.searchValue} />
         </span>
         {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
-        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
+        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
         {cfg.rowActions && !disabled ? <span style={{ marginLeft: node.count != null ? 6 : "auto", display: "flex", gap: 2, opacity: hover ? 1 : 0, transition: "var(--t-hover)" }} onClick={(e) => e.stopPropagation()}>{cfg.rowActions(node)}</span> : null}
       </div>
       {open && loading && !kids.length ? (

package/components/navigation/Tree.vue

@@ -9,6 +9,8 @@ const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', pu
 const INDENT = 18
 const props = defineProps({
   items: { type: Array, default: () => [] },
+  treeData: Array, // alias of items (same as Tree.jsx)
+  expandedKeys: Array, selectedKeys: Array, checkedKeys: Array, // controlled: the parent's value wins whenever it changes
   defaultExpanded: { type: Array, default: () => [] },
   defaultActive: String,
   defaultSelected: { type: Array, default: () => [] },
@@ -24,12 +26,15 @@ const props = defineProps({
 })
 const emit = defineEmits(['select', 'check', 'expand', 'drop'])
 
-const data = ref(JSON.parse(JSON.stringify(props.items)))
+const data = ref(JSON.parse(JSON.stringify(props.treeData || props.items)))
 // Compare by value: re-seeding on identity alone would wipe async-loaded children.
-watch(() => JSON.stringify(props.items), (next, prev) => { if (next !== prev) data.value = JSON.parse(next) })
+watch(() => JSON.stringify(props.treeData || props.items), (next, prev) => { if (next !== prev) data.value = JSON.parse(next) })
 const expanded = ref([...props.defaultExpanded])
 const selected = ref(props.defaultActive ? [props.defaultActive] : [...props.defaultSelected])
 const checked = ref([...props.defaultChecked])
+watch(() => props.expandedKeys, (v) => { if (v) expanded.value = [...v] }, { immediate: true })
+watch(() => props.selectedKeys, (v) => { if (v) selected.value = [...v] }, { immediate: true })
+watch(() => props.checkedKeys, (v) => { if (v) checked.value = [...v] }, { immediate: true })
 const loading = ref([]); const loaded = ref([]); const focus = ref(null)
 const dragKey = ref(null); const drop = ref(null)
 
@@ -245,14 +250,14 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
         <template v-for="(p, i) in parts(titleOf(row.n))" :key="i"><mark v-if="p.hit" style="background:var(--soft-bg);color:var(--info-fg);font-weight:var(--weight-medium);padding:0;border-radius:2px">{{ p.t }}</mark><template v-else>{{ p.t }}</template></template>
       </span>
       <span v-if="row.n.tag" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:1;padding:2px 5px;border-radius:var(--radius-sm);background:var(--bg-inset);color:var(--text-secondary);flex-shrink:0">{{ row.n.tag }}</span>
-      <span v-if="row.n.count != null" style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);padding-left:8px">{{ row.n.count }}</span>
+      <span v-if="row.n.count != null" style="margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted);padding-left:8px">{{ row.n.count }}</span>
     </div>
     <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-muted)">No matching items</div>
   </div>
 </template>
 <style scoped>
 .kb-tree-row:not(.is-disabled):hover{background:var(--bg-hover)}
-.kb-tree-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
+.kb-tree-row:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px}
 .kb-tree-spin{animation:kb-tree-spin 900ms linear infinite}
 @keyframes kb-tree-spin{to{transform:rotate(360deg)}}
 </style>

package/components/navigation/nav-model.js

@@ -0,0 +1,23 @@
+// The product's real nav model (Home dashboard). Framework-neutral: imported by Sidebar.jsx (re-exported
+// as KEYBRICKS_NAV from the React entry) and exported from the Vue entry for <Sidebar :items="KEYBRICKS_NAV">.
+export const KEYBRICKS_NAV = [
+  { icon: 'house', label: 'Home' },
+  { icon: 'file-text', label: 'Documents' },
+  { icon: 'layout-grid', label: 'Business Intelligence' },
+  { icon: 'database', label: 'Data Integration' },
+  { icon: 'reconciliation', label: 'Reconciliation' },
+  { icon: 'consolidation', label: 'Consolidation' },
+  {
+    icon: 'folder-cog', label: 'Management', children: [
+      { icon: 'box', label: 'Modeling' },
+      { icon: 'workflow', label: 'Workflow' },
+      { icon: 'shield', label: 'Security Management' },
+      { icon: 'refresh-cw', label: 'System Migration' },
+      { icon: 'chart-column', label: 'Business Logic' },
+      { icon: 'list-todo', label: 'Tasks Management' },
+      { icon: 'circle-check', label: 'Validation Rules' },
+      { icon: 'settings-2', label: 'Control Center' },
+      { icon: 'reconciliation', label: 'Reconciliation' },
+    ],
+  },
+];

package/components/navigation/theme-store.js

@@ -0,0 +1,9 @@
+// Theme persistence shared by ThemeToggle (React and Vue). Framework-neutral.
+// applyStoredTheme(): reads localStorage("kb-theme") and sets <html data-theme> before first paint —
+// call once at app start (main.jsx / main.js).
+export function applyStoredTheme() {
+  if (typeof document === 'undefined') return;
+  let t = 'light';
+  try { t = localStorage.getItem('kb-theme') || 'light'; } catch (e) {}
+  document.documentElement.dataset.theme = t;
+}

package/components/tabs/PillTabs.vue

@@ -1,5 +1,5 @@
 <script setup>
-// Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit.
+// Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 28 · md 32 · lg 40); omit `size` to inherit.
 defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>

package/components/tabs/SegmentedControl.d.ts

@@ -5,7 +5,7 @@ export interface SegmentedControlProps {
   options?: (string | { label: string; icon?: string; disabled?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
-  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   /** Hide labels; each label becomes the segment's aria-label and tooltip */
   iconOnly?: boolean;

package/components/tabs/SegmentedControl.jsx

@@ -4,7 +4,7 @@ import { Icon } from "../icons/Icon.jsx";
 /**
  * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
  * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
- * size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
+ * size sm 28 | md 32 | lg 40 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
  * disabled greys the whole control · fullWidth stretches segments evenly
  * Keyboard: ← → move between enabled segments.
  */

package/components/tabs/SegmentedControl.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 // Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
-// options: string[] | { label, icon?, disabled? }[] · v-model by label · size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier
+// options: string[] | { label, icon?, disabled? }[] · v-model by label · size sm 28 | md 32 | lg 40 — omit it to inherit the region's tier
 // iconOnly hides labels (label → aria-label/title) · disabled greys the control · fullWidth stretches segments · ← → keyboard.
 const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: String, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, style: Object })

package/components/tabs/Tabs.jsx

@@ -34,7 +34,7 @@ export function PanelTabs({ tabs = [], active, onChange, size, style }) {
   );
 }
 
-/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit. */
+/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = tinted pill. Pills are control-height (sm 28 · md 32 · lg 40); omit `size` to inherit. */
 export function PillTabs({ tabs = [], active, onChange, size, style }) {
   return (
     <div role="tablist" data-size={size} style={{ display: "flex", gap: "var(--control-gap)", ...style }}>