@keyfunc/keybricks-ds 2.4.12 → 2.5.0

package/components/data/ListRow.jsx

@@ -2,24 +2,32 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconTile } from "../display/Badge.jsx";
 
-/** Expandable workflow list row: chevron + bordered 32px icon tile + title/meta + right count. */
+const T_TITLE = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
+const T_META = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
+const T_TRAIL = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-secondary)", whiteSpace: "nowrap", flexShrink: 0 };
+
+/** Expandable workflow list row: chevron + 32px hairline icon tile + title / meta + right count.
+ *  The chevron shows when the row has content to expand (children); the row is a button only when it has onClick —
+ *  focusable, Enter / Space, aria-expanded, hover wash from tokens/hover.css [data-row]. A row with neither is static.
+ *  Rows without a chevron keep its 16px slot, so tiles line up in a mixed list. Expanded content starts under the title. */
 export function ListRow({ icon = "file-text", title, meta, trailing, expanded, onClick, children, style }) {
-  const [hover, setHover] = React.useState(false);
+  const hasContent = children != null && children !== false;
+  const clickable = typeof onClick === "function";
+  const onKey = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } };
   return (
     <div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
-      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", cursor: "pointer", background: hover ? "var(--bg-inset)" : "transparent", transition: "var(--t-hover)" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <span style={{ color: "var(--text-muted)", transform: expanded ? "rotate(90deg)" : "none", transition: "transform .15s ease", display: "inline-flex" }}><Icon name="chevron-right" size={16} /></span>
-          <IconTile icon={icon} kind="row" />
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-            {meta ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
-          </div>
+      <div data-row={clickable ? "" : undefined} role={clickable ? "button" : undefined} tabIndex={clickable ? 0 : undefined}
+        aria-expanded={clickable && hasContent ? !!expanded : undefined} onClick={clickable ? onClick : undefined} onKeyDown={clickable ? onKey : undefined}
+        style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px var(--edge-pad)", cursor: clickable ? "pointer" : "default", background: "var(--row-wash, transparent)", outlineOffset: -2, transition: "var(--t-hover)" }}>
+        <span aria-hidden="true" style={{ width: 16, flexShrink: 0, display: "inline-flex", color: "var(--text-muted)", transform: expanded ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}>{hasContent ? <Icon name="chevron-right" size={16} /> : null}</span>
+        <IconTile icon={icon} kind="row" />
+        <div style={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
+          <span style={T_TITLE}>{title}</span>
+          {meta ? <span style={T_META}>{meta}</span> : null}
         </div>
-        {trailing ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-secondary)" }}>{trailing}</span> : null}
+        {trailing != null && trailing !== "" ? <span style={T_TRAIL}>{trailing}</span> : null}
       </div>
-      {expanded && children ? <div style={{ padding: "0 16px 12px 72px" }}>{children}</div> : null}
+      {expanded && hasContent ? <div style={{ padding: "0 var(--edge-pad) 12px calc(var(--edge-pad) + 72px)" }}>{children}</div> : null}
     </div>
   );
 }

package/components/data/ListRow.vue

@@ -1,25 +1,35 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, getCurrentInstance, useSlots } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconTile from '../display/IconTile.vue'
-// Expandable workflow list row: chevron + bordered 32px icon tile + title/meta + right count.
-defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta: String, trailing: [String, Number], expanded: Boolean, style: Object })
-defineEmits(['click'])
-const hover = ref(false)
+// Expandable workflow list row: chevron + 32px hairline icon tile + title / meta + right count.
+// The chevron shows when the row has content to expand (default slot); the row is a button only when it has a @click
+// listener — focusable, Enter / Space, aria-expanded, hover wash from tokens/hover.css [data-row]. A row with neither is static.
+// Rows without a chevron keep its 16px slot, so tiles line up in a mixed list. Expanded content starts under the title.
+const props = defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta: String, trailing: [String, Number], expanded: Boolean, style: Object })
+const emit = defineEmits(['click'])
+const slots = useSlots()
+const inst = getCurrentInstance()
+const hasContent = computed(() => !!slots.default)
+const clickable = computed(() => !!(inst && inst.vnode.props && inst.vnode.props.onClick))
+function onKey(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emit('click', e) } }
+const T_TITLE = { fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }
+const T_META = { fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }
+const T_TRAIL = { fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', fontVariantNumeric: 'tabular-nums', color: 'var(--text-secondary)', whiteSpace: 'nowrap', flexShrink: 0 }
 </script>
 <template>
   <div :style="{ borderBottom: '1px solid var(--border-card)', ...style }">
-    <div @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false" :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', cursor: 'pointer', background: hover ? 'var(--bg-inset)' : 'transparent', transition: 'var(--t-hover)' }">
-      <div style="display:flex;align-items:center;gap:12px">
-        <span :style="{ color: 'var(--text-muted)', transform: expanded ? 'rotate(90deg)' : 'none', transition: 'transform .15s ease', display: 'inline-flex' }"><Icon name="chevron-right" :size="16" /></span>
-        <IconTile :icon="icon" kind="row" />
-        <div style="display:flex;flex-direction:column">
-          <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)">{{ title }}</span>
-          <span v-if="meta" style="font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
-        </div>
+    <div :data-row="clickable ? '' : undefined" :role="clickable ? 'button' : undefined" :tabindex="clickable ? 0 : undefined"
+      :aria-expanded="clickable && hasContent ? !!expanded : undefined" @click="clickable && emit('click', $event)" @keydown="clickable && onKey($event)"
+      :style="{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px var(--edge-pad)', cursor: clickable ? 'pointer' : 'default', background: 'var(--row-wash, transparent)', outlineOffset: '-2px', transition: 'var(--t-hover)' }">
+      <span aria-hidden="true" :style="{ width: '16px', flexShrink: 0, display: 'inline-flex', color: 'var(--text-muted)', transform: expanded ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon v-if="hasContent" name="chevron-right" :size="16" /></span>
+      <IconTile :icon="icon" kind="row" />
+      <div style="display:flex;flex-direction:column;min-width:0;flex:1">
+        <span :style="T_TITLE">{{ title }}</span>
+        <span v-if="meta" :style="T_META">{{ meta }}</span>
       </div>
-      <span v-if="trailing" 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);font-variant-numeric:tabular-nums;color:var(--text-secondary)">{{ trailing }}</span>
+      <span v-if="trailing != null && trailing !== ''" :style="T_TRAIL">{{ trailing }}</span>
     </div>
-    <div v-if="expanded" style="padding:0 16px 12px 72px"><slot /></div>
+    <div v-if="expanded && hasContent" style="padding:0 var(--edge-pad) 12px calc(var(--edge-pad) + 72px)"><slot /></div>
   </div>
 </template>

package/components/data/Table.vue

@@ -5,7 +5,11 @@ import Checkbox from '../forms/Checkbox.vue'
 import IconTile from '../display/IconTile.vue'
 import IconButton from '../buttons/IconButton.vue'
 import Icon from '../icons/Icon.vue'
-// Keybricks table. columns: [{key,label,width,minWidth,mono,code,twoLine,align,render}].
+// A cell: a #cell-<key> slot ({ value, row, index }) when the page gives one; else column.render's result — text or a VNode from h() — or the raw value.
+const Cell = (p) => p.v
+Cell.props = ['v']
+// Keybricks table. columns: [{key,label,width,minWidth,mono,code,twoLine,align,render}]. Custom cells: <template #cell-status="{ value, row, index }">…</template>,
+// or render(value, row, index) returning text or a VNode (h()).
 // twoLine  — the name column of a document list: icon tile, title over a description, optional mark ("favorite" = filled star), trailing ⋯
 //            (@row-more(row, index, event)); @row-open(row, index, event) makes the tile and the title open the row (hand cursor, Enter / Space on the title).
 //            tree — rows nest through `children` (or `hasChildren` for rows you load on demand); the twoLine column indents 24px per level with an
@@ -184,7 +188,7 @@ function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 're
         <tr v-else-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pos === pinInfo.unStart"><td :colspan="columns.length || 1" :style="GROUP_CELL">{{ L.unavailable }} · {{ pinInfo.un }}</td></tr>
         <tr data-row="" :aria-level="tree ? item.level + 1 : undefined" :aria-expanded="item.kids ? item.open : undefined" :style="{ ...(isDis(item.r, item.ri) ? { '--row-wash': 'initial' } : null), height: 'var(--bar-h)', background: pinInfo && pinInfo.sel.has(item.ri) ? 'var(--row-wash, var(--bg-inset))' : 'var(--row-wash, transparent)', transition: 'var(--t-hover)', borderBottom: pinInfo && ((pinInfo.rest > 0 && pos === pinInfo.rest - 1) || (pinInfo.unStart > 0 && pos === pinInfo.unStart - 1)) ? '1px solid var(--border-control)' : bordered && pos === view.length - 1 ? 'none' : '1px solid var(--border-subtle)' }">
           <template v-for="{ r, ri } in [item]" :key="'r'">
-          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), ...(c.twoLine ? { paddingTop: 'var(--title-cell-py)', paddingBottom: 'var(--title-cell-py)', maxWidth: 0 } : null), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }"><span v-if="selectable && i === 0" :style="checkSlot" :title="isDis(r, ri) && disabledReason ? disabledReason(r, ri) : undefined"><Checkbox :checked="selected.includes(ri)" :disabled="isDis(r, ri)" @change="v => emit('toggle', ri, v)" /></span><div v-if="c.twoLine" :style="{ display: 'flex', alignItems: 'center', minWidth: px(c.minWidth ?? 180), ...(treeCol === c ? { paddingLeft: (item.level * TREE_INDENT) + 'px' } : null) }"><span v-if="treeCol === c" :style="{ width: TREE_TOGGLE + 'px', flexShrink: 0, marginRight: (TREE_INDENT - TREE_TOGGLE) + 'px', display: 'inline-flex' }"><button v-if="item.kids" type="button" :aria-expanded="item.open" :aria-label="item.open ? L.collapse : L.expand" :title="item.open ? L.collapse : L.expand" @click.stop="toggleRow(item)" @mouseenter="hotToggle = item.key" @mouseleave="hotToggle = null" :style="{ width: TREE_TOGGLE + 'px', height: TREE_TOGGLE + 'px', padding: 0, border: 'none', borderRadius: 'var(--radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: hotToggle === item.key ? 'var(--overlay-hover)' : 'transparent', color: hotToggle === item.key ? 'var(--text-body)' : 'var(--text-muted)', transition: 'var(--t-hover)' }"><Icon name="chevron-right" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)', transform: item.open ? 'rotate(90deg)' : 'none', transition: 'transform .15s ease' }" /></button></span><div style="display:flex;align-items:center;gap:var(--title-cell-tile-gap);flex:1;min-width:0"><template v-for="t in [tl(c, r, ri)]" :key="0"><span v-if="t.icon" :style="{ display: 'inline-flex', flexShrink: 0, cursor: canOpen ? 'pointer' : undefined }" @click="e => canOpen && openRow(r, ri, e)"><IconTile :icon="t.icon" :hue="t.hue || 'neutral'" kind="row" :style="T_TILE" :icon-style="T_ICON" /></span><div style="display:flex;flex-direction:column;gap:var(--title-cell-gap);flex:1;min-width:0"><div style="display:flex;align-items:center;gap:4px;min-width:0"><span v-if="canOpen" role="button" tabindex="0" :style="{ ...T_TITLE, cursor: 'pointer' }" @click="e => openRow(r, ri, e)" @keydown="e => openKey(r, ri, e)">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</span><span v-else :style="T_TITLE">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</span><svg v-if="t.mark === 'favorite'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linejoin="round" role="img" aria-label="Favorite" style="display:block;flex-shrink:0;color:var(--warning)"><path :d="STAR_FILLED" /></svg><span v-else-if="t.mark" role="img" :aria-label="t.mark.label" :style="{ display: 'inline-flex', flexShrink: 0, color: t.mark.color || 'var(--text-muted)' }"><Icon :name="t.mark.icon" :size="14" /></span></div><span v-if="t.desc" :style="T_DESC">{{ t.desc }}</span></div><IconButton v-if="t.more" icon="ellipsis" size="sm" muted :label="L.more" :title="L.more" @click="e => more(r, ri, e)" /></template></div></div><code v-else-if="c.code && (typeof r[c.key] === 'string' || typeof r[c.key] === 'number') && r[c.key] !== ''" :style="codeChip">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</code><template v-else>{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</template></td>
+          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), ...(c.twoLine ? { paddingTop: 'var(--title-cell-py)', paddingBottom: 'var(--title-cell-py)', maxWidth: 0 } : null), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }"><span v-if="selectable && i === 0" :style="checkSlot" :title="isDis(r, ri) && disabledReason ? disabledReason(r, ri) : undefined"><Checkbox :checked="selected.includes(ri)" :disabled="isDis(r, ri)" @change="v => emit('toggle', ri, v)" /></span><div v-if="c.twoLine" :style="{ display: 'flex', alignItems: 'center', minWidth: px(c.minWidth ?? 180), ...(treeCol === c ? { paddingLeft: (item.level * TREE_INDENT) + 'px' } : null) }"><span v-if="treeCol === c" :style="{ width: TREE_TOGGLE + 'px', flexShrink: 0, marginRight: (TREE_INDENT - TREE_TOGGLE) + 'px', display: 'inline-flex' }"><button v-if="item.kids" type="button" :aria-expanded="item.open" :aria-label="item.open ? L.collapse : L.expand" :title="item.open ? L.collapse : L.expand" @click.stop="toggleRow(item)" @mouseenter="hotToggle = item.key" @mouseleave="hotToggle = null" :style="{ width: TREE_TOGGLE + 'px', height: TREE_TOGGLE + 'px', padding: 0, border: 'none', borderRadius: 'var(--radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: hotToggle === item.key ? 'var(--overlay-hover)' : 'transparent', color: hotToggle === item.key ? 'var(--text-body)' : 'var(--text-muted)', transition: 'var(--t-hover)' }"><Icon name="chevron-right" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)', transform: item.open ? 'rotate(90deg)' : 'none', transition: 'transform .15s ease' }" /></button></span><div style="display:flex;align-items:center;gap:var(--title-cell-tile-gap);flex:1;min-width:0"><template v-for="t in [tl(c, r, ri)]" :key="0"><span v-if="t.icon" :style="{ display: 'inline-flex', flexShrink: 0, cursor: canOpen ? 'pointer' : undefined }" @click="e => canOpen && openRow(r, ri, e)"><IconTile :icon="t.icon" :hue="t.hue || 'neutral'" kind="row" :style="T_TILE" :icon-style="T_ICON" /></span><div style="display:flex;flex-direction:column;gap:var(--title-cell-gap);flex:1;min-width:0"><div style="display:flex;align-items:center;gap:4px;min-width:0"><span v-if="canOpen" role="button" tabindex="0" :style="{ ...T_TITLE, cursor: 'pointer' }" @click="e => openRow(r, ri, e)" @keydown="e => openKey(r, ri, e)"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><span v-else :style="T_TITLE"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><svg v-if="t.mark === 'favorite'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linejoin="round" role="img" aria-label="Favorite" style="display:block;flex-shrink:0;color:var(--warning)"><path :d="STAR_FILLED" /></svg><span v-else-if="t.mark" role="img" :aria-label="t.mark.label" :style="{ display: 'inline-flex', flexShrink: 0, color: t.mark.color || 'var(--text-muted)' }"><Icon :name="t.mark.icon" :size="14" /></span></div><span v-if="t.desc" :style="T_DESC">{{ t.desc }}</span></div><IconButton v-if="t.more" icon="ellipsis" size="sm" muted :label="L.more" :title="L.more" @click="e => more(r, ri, e)" /></template></div></div><code v-else-if="c.code && (typeof r[c.key] === 'string' || typeof r[c.key] === 'number') && r[c.key] !== ''" :style="codeChip"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></code><template v-else><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></template></td>
           </template>
         </tr>
         </template>

package/components/feedback/ContextMenu.d.ts

@@ -2,8 +2,10 @@ import * as React from "react";
 /** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row.
  *  Action menus keep rows flush; a single-choice menu (any item `selected`) spaces rows 2px apart. Dividers keep 4px above and below. */
 export interface ContextMenuProps {
-  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 }[];
+  items?: { label?: string; icon?: string; /** Colour for this item's icon — any CSS colour, e.g. "var(--cat-join)". Omit for a single-colour icon in the row's text colour. */ iconColor?: string; /** Shown in a 300px panel beside the menu while the item is hovered or focused: the item's icon and label, then this text. */ description?: 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;
+  /** Side the description panel opens on (default "right"); it flips to the other side when the viewport has no room. */
+  descriptionSide?: "left" | "right";
   /** Size tier of the rows. Omit to inherit the tier of the control that opened the menu (the default). */
   size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;

package/components/feedback/ContextMenu.jsx

@@ -1,22 +1,60 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** 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.
+const HINT_W = 300, HINT_GAP = 8;
+
+/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, iconColor, description, 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 }) {
+ *  fill never touches the selected one; an action menu (nothing selected) keeps its rows flush. Dividers keep 4px above and below.
+ *  iconColor: any CSS colour for that item's icon (e.g. "var(--cat-join)"); without it the icon takes the row's text colour.
+ *  description: hovering or focusing the item shows a 300px panel beside the menu — the item's icon and label, then the description.
+ *  It opens on descriptionSide ("right" by default) and flips to the other side when the viewport has no room. */
+export function ContextMenu({ items = [], onSelect, size, descriptionSide = "right", style }) {
   const [hover, setHover] = React.useState(-1);
+  const [hint, setHint] = React.useState(-1);
+  const [side, setSide] = React.useState(descriptionSide);
+  const wrap = React.useRef(null);
+  const hintId = React.useId();
   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", gap: choice ? 2 : 0, ...style }}>
+  const hasHint = items.some((it) => it && it.description);
+  const show = (i) => {
+    setHover(i);
+    if (!hasHint) return;
+    const it = items[i];
+    if (!it || !it.description) { setHint(-1); return; }
+    const r = wrap.current && wrap.current.getBoundingClientRect();
+    let s = descriptionSide;
+    if (r) { if (s === "right" && r.right + HINT_GAP + HINT_W > window.innerWidth && r.left - HINT_GAP - HINT_W >= 0) s = "left"; else if (s === "left" && r.left - HINT_GAP - HINT_W < 0 && r.right + HINT_GAP + HINT_W <= window.innerWidth) s = "right"; }
+    setSide(s); setHint(i);
+  };
+  const onBlur = (e) => { setHover(-1); if (hasHint && !(wrap.current && wrap.current.contains(e.relatedTarget))) setHint(-1); };
+  const menu = (
+    <div role="menu" data-size={hasHint ? undefined : 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={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}
+          onMouseEnter={() => show(i)} onMouseLeave={() => setHover(-1)} onFocus={() => show(i)} onBlur={onBlur}
+          aria-describedby={hint === i ? hintId : undefined}
+          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 || hint === 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)", flexShrink: 0, ...(it.iconColor ? { color: it.iconColor } : null) }} /> : null}{it.label}
         </button>
       ))}
     </div>
   );
+  if (!hasHint) return menu;
+  const h = items[hint];
+  return (
+    <div ref={wrap} data-size={size} onMouseLeave={() => setHint(-1)} style={{ position: "relative", display: "inline-flex" }}>
+      {menu}
+      {h && h.description ? (
+        <div id={hintId} role="tooltip" style={{ position: "absolute", top: 0, [side === "left" ? "right" : "left"]: `calc(100% + ${HINT_GAP}px)`, width: HINT_W, boxSizing: "border-box", padding: "12px 14px", display: "flex", flexDirection: "column", gap: 6, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", fontFamily: "var(--font-sans)", animation: "kb-fade-in var(--dur) var(--ease-out)" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {h.icon ? <Icon name={h.icon} size={16} style={{ flexShrink: 0, color: h.iconColor || (h.danger ? "var(--danger)" : "var(--text-heading)") }} /> : null}
+            <span style={{ fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontWeight: "var(--weight-medium)", color: "var(--text-heading)" }}>{h.label}</span>
+          </div>
+          <span style={{ fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", textWrap: "pretty" }}>{h.description}</span>
+        </div>
+      ) : null}
+    </div>
+  );
 }

package/components/feedback/ContextMenu.vue

@@ -1,21 +1,61 @@
 <script setup>
 import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// 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.
+// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, iconColor, description, 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 })
+// iconColor: any CSS colour for that item's icon; without it the icon takes the row's text colour.
+// description: hovering or focusing the item shows a 300px panel beside the menu (icon + label, then the description), on descriptionSide
+// ("right" by default), flipping to the other side when the viewport has no room.
+const props = defineProps({ items: { type: Array, default: () => [] }, size: String, descriptionSide: { type: String, default: 'right' }, style: Object })
 const choice = computed(() => props.items.some(it => it && it.selected))
+const hasHint = computed(() => props.items.some(it => it && it.description))
 const emit = defineEmits(['select'])
-const hover = ref(-1)
+const hover = ref(-1), hint = ref(-1), side = ref(props.descriptionSide), wrap = ref(null)
+const HINT_W = 300, HINT_GAP = 8
+const hintId = 'kb-cm-hint-' + Math.random().toString(36).slice(2, 8)
+function show(i) {
+  hover.value = i
+  if (!hasHint.value) return
+  const it = props.items[i]
+  if (!it || !it.description) { hint.value = -1; return }
+  const r = wrap.value && wrap.value.getBoundingClientRect()
+  let s = props.descriptionSide
+  if (r) { if (s === 'right' && r.right + HINT_GAP + HINT_W > window.innerWidth && r.left - HINT_GAP - HINT_W >= 0) s = 'left'; else if (s === 'left' && r.left - HINT_GAP - HINT_W < 0 && r.right + HINT_GAP + HINT_W <= window.innerWidth) s = 'right' }
+  side.value = s; hint.value = i
+}
+function onBlur(e) { hover.value = -1; if (hasHint.value && !(wrap.value && wrap.value.contains(e.relatedTarget))) hint.value = -1 }
+const cur = computed(() => props.items[hint.value])
+const menuStyle = computed(() => ({ 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.value ? '2px' : 0, ...props.style }))
+const rowStyle = (it, i) => ({ 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.value === i || hint.value === 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' })
+const iconStyle = (it) => ({ width: 'var(--control-icon)', height: 'var(--control-icon)', flexShrink: 0, ...(it.iconColor ? { color: it.iconColor } : null) })
+const hintStyle = computed(() => ({ position: 'absolute', top: 0, [side.value === 'left' ? 'right' : 'left']: `calc(100% + ${HINT_GAP}px)`, width: HINT_W + 'px', boxSizing: 'border-box', padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: '6px', background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', fontFamily: 'var(--font-sans)', animation: 'kb-fade-in var(--dur) var(--ease-out)' }))
 </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', gap: choice ? '2px' : 0, ...style }">
+  <div v-if="hasHint" ref="wrap" :data-size="size" @mouseleave="hint = -1" :style="{ position: 'relative', display: 'inline-flex' }">
+    <div role="menu" :style="menuStyle">
+      <template v-for="(it, i) in items" :key="i">
+        <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="show(i)" @mouseleave="hover = -1" @focus="show(i)" @blur="onBlur"
+          :aria-describedby="hint === i ? hintId : undefined" :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="rowStyle(it, i)">
+          <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" />{{ it.label }}
+        </button>
+      </template>
+    </div>
+    <div v-if="cur && cur.description" :id="hintId" role="tooltip" :style="hintStyle">
+      <div :style="{ display: 'flex', alignItems: 'center', gap: '8px' }">
+        <Icon v-if="cur.icon" :name="cur.icon" :size="16" :style="{ flexShrink: 0, color: cur.iconColor || (cur.danger ? 'var(--danger)' : 'var(--text-heading)') }" />
+        <span :style="{ fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-heading)' }">{{ cur.label }}</span>
+      </div>
+      <span :style="{ fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-secondary)', textWrap: 'pretty' }">{{ cur.description }}</span>
+    </div>
+  </div>
+  <div v-else role="menu" :data-size="size" :style="menuStyle">
     <template v-for="(it, i) in items" :key="i">
       <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="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 v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1" @focus="hover = i" @blur="hover = -1"
+        :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="rowStyle(it, i)">
+        <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" />{{ it.label }}
       </button>
     </template>
   </div>

package/components/feedback/Menu.d.ts

@@ -2,9 +2,13 @@ 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; /** 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 }[];
+  items?: { label?: string; icon?: string; /** Colour for this item's icon — any CSS colour, e.g. "var(--cat-join)". Omit for a single-colour icon in the row's text colour. */ iconColor?: string; /** Shown in a 300px panel beside the menu while the item is hovered or focused: the item's icon and label, then this text. */ description?: 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";
+  /** Side for item descriptions. Default: away from the trigger's edge — "left" when align="end", "right" when align="start". Flips if the viewport has no room. */
+  descriptionSide?: "left" | "right";
+  /** Start open (docs and demos). */
+  defaultOpen?: boolean;
   style?: React.CSSProperties;
 }
 export declare function Menu(props: MenuProps): JSX.Element;

package/components/feedback/Menu.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { ContextMenu } from "./ContextMenu.jsx";
 
-/** Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click. */
-export function Menu({ trigger, items = [], onSelect, align = "start", style }) {
-  const [open, setOpen] = React.useState(false);
+/** Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click.
+ *  Items take ContextMenu's fields (icon, iconColor, description, …). Item descriptions open on the side away from the trigger's edge:
+ *  align="end" (trigger at the right) → left, align="start" (trigger at the left) → right; descriptionSide overrides. */
+export function Menu({ trigger, items = [], onSelect, align = "start", descriptionSide, defaultOpen = false, style }) {
+  const [open, setOpen] = React.useState(defaultOpen);
   const ref = React.useRef(null);
   React.useEffect(() => {
     if (!open) return;
@@ -16,7 +18,7 @@ export function Menu({ trigger, items = [], onSelect, align = "start", style })
       <span onClick={() => setOpen((o) => !o)}>{trigger}</span>
       {open ? (
         <div style={{ position: "absolute", top: "calc(100% + 6px)", [align === "end" ? "right" : "left"]: 0, zIndex: "var(--z-menu)" }}>
-          <ContextMenu items={items} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />
+          <ContextMenu items={items} descriptionSide={descriptionSide || (align === "end" ? "left" : "right")} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />
         </div>
       ) : null}
     </div>

package/components/feedback/Menu.vue

@@ -2,9 +2,11 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import ContextMenu from './ContextMenu.vue'
 // Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click.
-const props = defineProps({ items: { type: Array, default: () => [] }, align: { type: String, default: 'start' }, style: Object })
+// Items take ContextMenu's fields (icon, iconColor, description, …). Descriptions open on the side away from the trigger's edge:
+// align="end" → left, align="start" → right; descriptionSide overrides.
+const props = defineProps({ items: { type: Array, default: () => [] }, align: { type: String, default: 'start' }, descriptionSide: String, defaultOpen: Boolean, style: Object })
 const emit = defineEmits(['select'])
-const open = ref(false)
+const open = ref(props.defaultOpen)
 const root = ref(null)
 function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
 onMounted(() => document.addEventListener('mousedown', onDoc))
@@ -15,7 +17,7 @@ function select(l) { open.value = false; emit('select', l) }
   <div ref="root" :style="{ position: 'relative', display: 'inline-flex', ...style }">
     <span @click="open = !open"><slot name="trigger" /></span>
     <div v-if="open" :style="{ position: 'absolute', top: 'calc(100% + 6px)', [align === 'end' ? 'right' : 'left']: 0, zIndex: 'var(--z-menu)' }">
-      <ContextMenu :items="items" @select="select" />
+      <ContextMenu :items="items" :description-side="descriptionSide || (align === 'end' ? 'left' : 'right')" @select="select" />
     </div>
   </div>
 </template>

package/components/feedback/Timeline.vue

@@ -3,6 +3,9 @@ import Icon from '../icons/Icon.vue'
 const tlTones = { success: 'var(--success)', danger: 'var(--danger)', warning: 'var(--warning)', info: 'var(--action-primary)', neutral: 'var(--dot-neutral)' }
 // Vertical activity timeline: outlined icon nodes on a hairline spine. items: [{icon,tone,title,meta,body}].
 defineProps({ items: { type: Array, default: () => [] }, style: Object })
+// body may be text or a VNode (h(...)); a #body="{ item, index }" slot overrides it.
+const Cell = (p) => p.v
+Cell.props = ['v']
 </script>
 <template>
   <div :style="{ display: 'flex', flexDirection: 'column', ...style }">
@@ -14,7 +17,7 @@ defineProps({ items: { type: Array, default: () => [] }, style: Object })
       <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);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>
+        <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"><slot name="body" :item="it" :index="i"><Cell :v="it.body" /></slot></span>
       </div>
     </div>
   </div>

package/components/navigation/Tree.vue

@@ -34,6 +34,8 @@ const props = defineProps({
   loadData: Function, rowActions: Function, style: Object,
 })
 const emit = defineEmits(['select', 'check', 'expand', 'drop'])
+const Cell = (p) => p.v
+Cell.props = ['v']
 
 const data = ref(JSON.parse(JSON.stringify(props.treeData || props.items)))
 // Compare by value: re-seeding on identity alone would wipe async-loaded children.
@@ -263,6 +265,8 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       </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-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted);padding-left:8px">{{ row.n.count }}</span>
+      <!-- row actions: #row-actions="{ node }" slot, or rowActions(node) returning a VNode; shown on hover / focus -->
+      <span v-if="(rowActions || $slots['row-actions']) && !row.n.disabled" class="kb-tree-actions" @click.stop :style="{ marginLeft: row.n.count != null ? '6px' : 'auto', display: 'flex', gap: '2px', flexShrink: 0 }"><slot name="row-actions" :node="row.n"><Cell v-if="rowActions" :v="rowActions(row.n)" /></slot></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>
@@ -270,6 +274,8 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
 <style scoped>
 .kb-tree-row:not(.is-disabled):hover{background:var(--bg-hover)}
 .kb-tree-row:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px}
+.kb-tree-actions{opacity:0;transition:var(--t-hover)}
+.kb-tree-row:hover .kb-tree-actions,.kb-tree-row:focus-within .kb-tree-actions{opacity:1}
 .kb-tree-spin{animation:kb-tree-spin 900ms linear infinite}
 @keyframes kb-tree-spin{to{transform:rotate(360deg)}}
 </style>

package/index.html

@@ -59,22 +59,6 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 .frame-wrap{position:relative;border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}
 .frame-wrap iframe{border:0;display:block;transform-origin:top left;background:var(--bg-surface)}
 .frame-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted);background:var(--bg-inset);letter-spacing:var(--tracking-xs)}
-.code-area{margin-top:14px}
-.code-btn{display:inline-flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:0 8px;line-height:var(--leading-xs);border-radius:var(--radius-md);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-secondary);font-size:var(--text-xs);font-family:var(--font-sans);cursor:pointer;transition:var(--t-hover);letter-spacing:var(--tracking-xs)}
-.code-btn:hover{background:var(--bg-hover);color:var(--text-heading)}
-.code-panel{display:none;margin-top:10px;border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-inset)}
-.code-panel.open{display:block}
-.code-head{display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}
-.code-tabs{display:flex;flex:1;overflow-x:auto;scrollbar-width:none}
-.code-tabs::-webkit-scrollbar{display:none}
-.code-tab{padding:8px 12px;border:none;background:transparent;font-size:var(--text-xs);font-family:var(--font-sans);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:var(--tracking-xs)}
-.code-tab.on{color:var(--text-heading);border-bottom-color:var(--action-primary)}
-.code-fw{display:flex;gap:3px;padding:6px 8px;flex-shrink:0}
-.code-fw{display:flex;align-items:center;flex-shrink:0;height:28px;box-sizing:border-box;gap:2px;padding:2px;margin:0 8px;border-radius:var(--radius-md);background:var(--bg-inset);border:1px solid var(--border-control)}.fw-btn{display:inline-flex;align-items:center;height:22px;padding:0 6px;font-size:var(--text-xs);line-height:var(--leading-xs);border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-weight:var(--weight-medium);white-space:nowrap;cursor:pointer;transition:var(--t-hover);letter-spacing:var(--tracking-xs)}.fw-btn:not(.on):hover{color:var(--text-heading)}
-.fw-btn.on{background:var(--bg-surface);color:var(--text-heading);box-shadow:0 1px 2px rgba(0,0,0,.08)}
-.code-body{position:relative}
-.code-body pre{margin:0;padding:14px 70px 14px 16px;overflow:auto;max-height:420px;font-family:var(--font-mono);font-size:var(--text-code);line-height:var(--leading-code);color:var(--text-body);white-space:pre}
-.copy-btn{position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-secondary);font-size:var(--text-xs);line-height:var(--leading-xs);font-family:var(--font-sans);cursor:pointer;letter-spacing:var(--tracking-xs)}
 
 /* overview */
 #overview{margin-bottom:64px}
@@ -192,7 +176,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 const GROUPS=[["Brand","品牌","ブランド"],["Colors","颜色","カラー"],["Type","字体排印","タイポグラフィ"],["Foundations","基础规范","基盤仕様"],["Components","组件","コンポーネント"],["Charts","图表","チャート"],["Icons","图标库","アイコン"]];
 
 const S={
-brandsub:["Design System · v2.4.12","设计系统 · v2.4.12","デザインシステム · v2.4.12"],
+brandsub:["Design System · v2.5.0","设计系统 · v2.5.0","デザインシステム · v2.5.0"],
 doc_readme:["Readme","说明文档","ドキュメント"],
 doc_design:["DESIGN.md","下载 DESIGN.md","DESIGN.md"],
 doc_integration:["Integration","接入指南","導入ガイド"],
@@ -258,6 +242,7 @@ function setLang(l){
   document.getElementById("filter").placeholder=pick(S.filter_ph);
   document.querySelectorAll('a[data-readme]').forEach(a=>{a.href=(l==="zh"||l==="both")?"readme.zh-CN.md":"readme.md";});
   if(typeof fitChangelogTags==="function")fitChangelogTags();
+  syncFrames();
 }
 
 /* ---------- overview ---------- */
@@ -451,6 +436,8 @@ function renderNav(){
 let followSystem=true;
 const themeOf=()=>html.getAttribute("data-theme")||"light";
 function pushTheme(f){
+  /* Cards also need the site language: the "Show code" bars under each example follow it. */
+  try{f.contentWindow&&f.contentWindow.postMessage({kb:"lang",lang},"*");}catch(e){}
   if(f.dataset.alwaysdark==="1"||f.dataset.selfmanaged==="1")return;
   const t=themeOf();
   try{f.contentWindow&&f.contentWindow.postMessage({kb:"theme",theme:t},"*");}catch(e){}
@@ -473,49 +460,12 @@ if(mq&&mq.addEventListener)mq.addEventListener("change",e=>{if(followSystem)setT
 document.getElementById("themeToggle").addEventListener("click",()=>setTheme(themeOf()==="dark"?"light":"dark",true));
 
 /* ---------- frames: lazy load, fit to width, grow with content ---------- */
-/* Cards serve their source over postMessage (works from file:// too, where the host
-   cannot read the frame's DOM); the View Code UI is rendered here, below the box. */
-const CODE_ICON='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>';
-function buildCode(f,files){
-  if(f.__code||!files||!files.length)return;
-  const area=document.createElement("div");area.className="code-area";
-  const btn=document.createElement("button");btn.className="code-btn";
-  btn.innerHTML=CODE_ICON+'<span>View Code</span>';
-  const panel=document.createElement("div");panel.className="code-panel";
-  const head=document.createElement("div");head.className="code-head";
-  const tabs=document.createElement("div");tabs.className="code-tabs";
-  const fwb=document.createElement("div");fwb.className="code-fw";
-  head.appendChild(tabs);head.appendChild(fwb);
-  const body=document.createElement("div");body.className="code-body";
-  const pre=document.createElement("pre");
-  const copy=document.createElement("button");copy.className="copy-btn";copy.textContent="Copy";
-  body.appendChild(pre);body.appendChild(copy);
-  panel.appendChild(head);panel.appendChild(body);
-  area.appendChild(btn);area.appendChild(panel);
-  f.__section.appendChild(area);
-  let framework="react",active=0,open=false;const cache={};
-  files.forEach((t,i)=>{const b=document.createElement("button");b.className="code-tab";b.textContent=t.name;b.onclick=()=>{active=i;render();};tabs.appendChild(b);});
-  [["react","React"],["vue","Vue 3"]].forEach(([k,lab])=>{const b=document.createElement("button");b.className="fw-btn";b.textContent=lab;b.onclick=()=>{framework=k;render();};fwb.appendChild(b);});
-  const hidden=(t)=>(framework==="vue"&&t.reactOnly)||(framework==="react"&&t.vueOnly);
-  function render(){
-    if(hidden(files[active])){const k=files.findIndex(t=>!hidden(t));if(k>=0)active=k;}
-    [...tabs.children].forEach((el,i)=>{el.classList.toggle("on",i===active);el.style.display=hidden(files[i])?"none":"";el.textContent=framework==="vue"?(files[i].vueName||files[i].name.replace(/\.jsx$/,".vue")):files[i].name;});
-    [...fwb.children].forEach((el,i)=>el.classList.toggle("on",i===(framework==="react"?0:1)));
-    const key=framework+"|"+files[active].path;
-    if(cache[key]!=null)pre.textContent=cache[key];
-    else{pre.textContent="Loading…";try{f.contentWindow.postMessage({kb:"src-get",path:files[active].path,framework},"*");}catch(e){}}
-  }
-  copy.onclick=()=>{const t=pre.textContent;try{navigator.clipboard.writeText(t);}catch(e){}copy.textContent="Copied";setTimeout(()=>{copy.textContent="Copy";},1200);};
-  btn.onclick=()=>{open=!open;panel.classList.toggle("open",open);btn.querySelector("span").textContent=open?"Hide Code":"View Code";if(open)render();};
-  f.__code={receive(m){cache[m.framework+"|"+m.path]=m.text;if(open&&files[active].path===m.path&&framework===m.framework)pre.textContent=m.text;}};
-}
+/* Cards ask for the site theme over postMessage (works from file:// too). Usage code ("Show code") lives inside each card. */
 addEventListener("message",e=>{
   const m=e.data;if(!m||!m.kb)return;
   const f=[...document.querySelectorAll("iframe")].find(x=>{try{return x.contentWindow===e.source;}catch(err){return false;}});
   if(!f)return;
-  if(m.kb==="src-manifest")buildCode(f,m.files);
-  else if(m.kb==="src-text"&&f.__code)f.__code.receive(m);
-  else if(m.kb==="theme-ask")pushTheme(f);
+  if(m.kb==="theme-ask")pushTheme(f);
 });
 function fit(f){
   const wrap=f.__wrap,avail=wrap.clientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.12",
+  "version": "2.5.0",
   "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/typography.css

@@ -39,7 +39,8 @@
 [lang|="zh"]{--font-sans:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 [lang|="ja"]{--font-sans:'Inter','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Meiryo','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 [lang|="ko"]{--font-sans:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
-:lang(zh),:lang(ja),:lang(ko){font-family:var(--font-sans)}
+/* Set the font only where a language is declared; plain text inherits it, so descendant icon and code fonts keep their own family (e.g. AG Grid selection icons). */
+:where([lang|="zh"],[lang|="ja"],[lang|="ko"]){font-family:var(--font-sans)}
 [lang|="zh"],[lang|="ja"],[lang|="ko"]{--weight-medium:500;--weight-semibold:500;
 --text-glyph-min:12px;--text-2xs:12px;--text-xs:13px;--leading-xs:18px;--text-sm:13px;--leading-sm:18px;
 --tracking-2xs:0;--tracking-xs:0;--tracking-sm:0;--tracking-base:0;--tracking-md:0;--tracking-lg:0;--tracking-xl:0;--tracking-num:0;--tracking-2xl:0;--tracking-3xl:0;--tracking-4xl:0;--tracking-display:0}