@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/components/feedback/ContextMenu.jsx

@@ -1,15 +1,19 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides. */
+/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+ *  selected: true marks the current choice of a single-choice menu (section switcher, language picker): --bg-hover fill, --weight-medium
+ *  --text-heading, no checkmark. A menu with any selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree) so a hovered
+ *  fill never touches the selected one; an action menu (nothing selected) keeps its rows flush. Dividers keep 4px above and below. */
 export function ContextMenu({ items = [], onSelect, size, style }) {
   const [hover, setHover] = React.useState(-1);
+  const choice = items.some((it) => it && it.selected);
   return (
-    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", ...style }}>
-      {items.map((it, i) => it.divider ? <div key={i} style={{ height: 1, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
+    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", gap: choice ? 2 : 0, ...style }}>
+      {items.map((it, i) => it.divider ? <div key={i} role="separator" style={{ height: 1, flexShrink: 0, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
         <button key={i} type="button" onClick={() => onSelect && onSelect(it.label)}
           onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
-          role="menuitem" style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
+          role={choice ? "menuitemradio" : "menuitem"} aria-checked={choice ? !!it.selected : undefined} style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", flexShrink: 0, padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: it.selected || hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontWeight: it.selected ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
           {it.icon ? <Icon name={it.icon} size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /> : null}{it.label}
         </button>
       ))}

package/components/feedback/ContextMenu.vue

@@ -1,17 +1,20 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
-defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
+// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+// selected: true marks the current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. A menu with any
+// selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree); an action menu keeps its rows flush. Dividers keep 4px above and below.
+const props = defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
+const choice = computed(() => props.items.some(it => it && it.selected))
 const emit = defineEmits(['select'])
 const hover = ref(-1)
 </script>
 <template>
-  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', ...style }">
+  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', gap: choice ? '2px' : 0, ...style }">
     <template v-for="(it, i) in items" :key="i">
-      <div v-if="it.divider" style="height:1px;background:var(--border-subtle);margin:4px 0" />
+      <div v-if="it.divider" role="separator" :style="{ height: '1px', flexShrink: 0, background: 'var(--border-subtle)', margin: '4px 0' }" />
       <button v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1"
-        role="menuitem" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
+        :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', flexShrink: 0, padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: it.selected || hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontWeight: it.selected ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
         <Icon v-if="it.icon" :name="it.icon" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" />{{ it.label }}
       </button>
     </template>

package/components/feedback/Menu.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 /** Trigger-anchored dropdown menu (reuses ContextMenu's look). Addition — for "Show ⌄"-style buttons and user menus. */
 export interface MenuProps {
   trigger: React.ReactNode;
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
+  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
   align?: "start" | "end";
   style?: React.CSSProperties;

package/components/feedback/Modal.jsx

@@ -22,7 +22,7 @@ export function Tooltip({ label, placement = "top", children, style }) {
 }
 
 /** Centered modal dialog with scrim. width defaults to 440. */
-/** 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. */
 export function Modal({ open, title, subtitle, onClose, footer, width = 440, size = "lg", children, style }) {
   if (!open) return null;
   return (

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/feedback/feedback.prompt.md

@@ -1,4 +1,4 @@
-Feedback & flow: `Stepper` (wizard circles), `ContextMenu`, `ActivityItem`/`DotActivity` (feeds), `LogViewer` (mono logs).
+Feedback & flow: `Stepper` (wizard circles), `ContextMenu` / `Menu` (action menus flush; `selected: true` on one item makes a single-choice menu with 2px row gaps, no checkmark), `ActivityItem`/`DotActivity` (feeds), `LogViewer` (mono logs).
 
 ```jsx
 <Stepper current={1} steps={[{label:"Upload & Parse",icon:"upload"},{label:"Comparison",icon:"file-text"},{label:"Confirmation",icon:"check"},{label:"Execution",icon:"play"},{label:"Results",icon:"eye"}]}/>

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.d.ts

@@ -73,6 +73,7 @@ export * from "./icons/Icon";
 export * from "./icons/Unicon";
 export * from "./navigation/Breadcrumb";
 export * from "./navigation/DocTree";
+export * from "./navigation/SidePanel";
 export * from "./navigation/Sidebar";
 export * from "./navigation/TopBar";
 export * from "./navigation/Tree";

package/components/index.js

@@ -90,10 +90,11 @@ 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";
+export { SidePanel } from "./navigation/SidePanel.jsx";
+export { KEYBRICKS_MGMT, KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, SIDEBAR_COLORS, Sidebar } from "./navigation/Sidebar.jsx";
+export { PageHeading, PageToolbar, THEME_OPTIONS, TopBar, UserMenu } from "./navigation/TopBar.jsx";
 export { Tree } from "./navigation/Tree.jsx";
 
 /* pipeline/ */
@@ -106,5 +107,5 @@ export { ZoomControls } from "./pipeline/ZoomControls.jsx";
 
 /* tabs/ */
 export { SegmentedControl } from "./tabs/SegmentedControl.jsx";
-export { PanelTabs, PillTabs, Tabs } from "./tabs/Tabs.jsx";
+export { CountBadge, PanelTabs, PillTabs, Tabs } from "./tabs/Tabs.jsx";
 export { ViewToggle } from "./tabs/ViewToggle.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/SidePanel.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/** Side panel docked beside the Sidebar (Documents, Management): 240px, same tone as the rail, grows open from 0 and fades its content in.
+ *  56px header: title + actions + close. The body scrolls. Vue: #actions slot, @close. */
+export interface SidePanelProps {
+  open?: boolean;
+  title?: React.ReactNode;
+  /** Extra header buttons left of close (e.g. a muted IconButton "maximize-2" to open the full page) */
+  actions?: React.ReactNode;
+  /** Shows the close button. Vue: @close (hide it with :closable="false"). */
+  onClose?: () => void;
+  closeLabel?: string;
+  closeIcon?: string;
+  /** Same values as Sidebar — keep the two in step */
+  tone?: "recessed" | "flush" | "contrast" | "custom";
+  color?: string;
+  width?: number;
+  /** Size tier of the panel body ("sm" for compact document lists) */
+  size?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function SidePanel(props: SidePanelProps): JSX.Element;

package/components/navigation/SidePanel.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { chromeTone } from "./chrome-tones.js";
+
+/**
+ * Side panel docked beside the Sidebar (Documents, Management). 240px, same tone as the rail, opens by growing from 0
+ * (--dur-slow, --ease-out) while its content fades in from 12px left. 56px header: title + actions + close.
+ * Body scrolls; put a SegmentedControl, SearchInput, Tree or rows inside. size="sm" makes its controls compact.
+ */
+export function SidePanel({ open = true, title, actions, onClose, closeLabel = "Close", closeIcon = "x", tone = "recessed", color, width = 240, size, children, style }) {
+  const t = chromeTone(tone, color);
+  return (
+    <div aria-hidden={open ? undefined : "true"} style={{ width: open ? width : 0, flexShrink: 0, overflow: "hidden", height: "100%", transition: "width var(--dur-slow) var(--ease-out)" }}>
+      <div data-theme={t.theme} data-size={size} style={{ ...t.vars, width, height: "100%", background: "var(--sb-bg)", borderRight: "1px solid var(--sb-border)", color: "var(--sb-text)", display: "flex", flexDirection: "column", boxSizing: "border-box", opacity: open ? 1 : 0, transform: open ? "none" : "translateX(-12px)", transition: "opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out)", pointerEvents: open ? "auto" : "none", ...style }}>
+        <div style={{ height: "var(--topbar-h)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "0 8px 0 16px", boxSizing: "border-box", flexShrink: 0 }}>
+          <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontWeight: "var(--weight-medium)", color: "var(--text-heading)" }}>{title}</span>
+          <div data-size="md" style={{ display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }}>{actions}{onClose ? <IconButton icon={closeIcon} muted label={closeLabel} title={closeLabel} onClick={onClose} /> : null}</div>
+        </div>
+        <div style={{ flex: 1, minHeight: 0, overflow: "auto", display: "flex", flexDirection: "column" }}>{children}</div>
+      </div>
+    </div>
+  );
+}