@keyfunc/keybricks-ds 2.6.0 → 2.8.0

package/components/buttons/Button.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { px } from '../px.js'
-import { cloneVNode, computed, h, isVNode, ref } from 'vue'
+import { cloneVNode, computed, h, isVNode, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import Icon from '../icons/Icon.vue'
+import { aiStyles, aiSpinDelay, rampAiSpin } from './ai-button.js'
 
 // Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
 // switch together when a region declares data-size="sm" | "md" | "lg". The `size` prop only stamps that attribute on
@@ -22,13 +23,13 @@ const hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dar
 const presses = { primary: 'var(--action-primary-active)', dark: 'var(--action-dark-active)', outline: 'var(--bg-press)', ghost: 'var(--bg-press)', 'primary-soft': 'var(--soft-active)', danger: 'var(--danger-active)', 'danger-soft': 'var(--danger-soft-active)' }
 const colorHoverVariants = { text: 'var(--text-heading)' }
 
-// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
+// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text | ai (Prophet AI entry points only); size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
 const props = defineProps({
   variant: { type: String, default: 'primary' }, size: String,
   icon: [String, Object, Function], trailingIcon: [String, Object, Function],
   iconSize: Number, iconPosition: { type: String, default: 'left' },
   medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
-  label: String, text: String, pressed: Boolean, focused: Boolean, style: Object,
+  label: String, text: String, hovered: Boolean, pressed: Boolean, focused: Boolean, style: Object,
   nativeType: { type: String, default: 'button', validator: value => ['button', 'submit', 'reset'].includes(value) },
 })
 const emit = defineEmits(['click'])
@@ -47,7 +48,7 @@ const s = computed(() => {
       if (hover.value || isPressed.value) { base.color = colorHoverVariants[props.variant]; base.textDecoration = 'underline' }
       if (isPressed.value) base.opacity = .7
     } else if (isPressed.value) base.background = presses[props.variant]
-    else if (hover.value) base.background = hovers[props.variant]
+    else if (hover.value || props.hovered) base.background = hovers[props.variant]
     if (isFocused.value) base.boxShadow = 'var(--ring-focus)'
   }
   return base
@@ -72,42 +73,43 @@ function onClick(event) {
   if (busy.value) return
   emit('click', event)
 }
+// variant="ai" — see ai-button.js
+const aiEl = ref(null), aiDelay = aiSpinDelay()
+const aiOn = computed(() => !busy.value && (hover.value || props.hovered))
+const ai = computed(() => aiStyles({ on: aiOn.value, press: !busy.value && isPressed.value, busy: busy.value, focused: isFocused.value, medium: props.medium, fullWidth: props.fullWidth, iconOnly: props.iconOnly, delay: aiDelay, style: props.style }))
+const aiIcon = computed(() => (typeof props.icon === 'string' && props.icon) || 'prophet-sparkle')
+let stopRamp = () => {}
+const ramp = (on) => { stopRamp(); stopRamp = rampAiSpin(aiEl.value, on) }
+watch(aiOn, ramp)
+onMounted(() => { if (aiOn.value) ramp(true) })
+onBeforeUnmount(() => stopRamp())
 </script>
 <template>
-  <button
-    :type="nativeType"
-    data-press="own"
-    :data-size="size"
-    :style="s"
-    :disabled="busy"
-    :aria-busy="loading"
-    :aria-label="iconOnly ? label : undefined"
-    @click="onClick"
-    @mouseenter="hover = true"
-    @mouseleave="hover = false; press = false"
-    @mousedown="press = true"
-    @mouseup="press = false"
-    @keydown.enter="press = true"
-    @keydown.space="press = true"
-    @keyup="press = false"
-    @focus="focus = $event.target.matches(':focus-visible')"
-    @blur="focus = false"
-  >
-    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle">
-      <span
-        aria-hidden="true"
-        :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }"
-      />
-    </slot>
-    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle">
-      <LeadingIcon v-if="icon" />
-    </slot>
+  <button v-if="variant === 'ai'" ref="aiEl" :type="nativeType" data-press="own" :data-size="size" :style="ai.outer" :disabled="busy" :aria-busy="loading" :aria-label="iconOnly ? label : undefined"
+    @click="onClick" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
+    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
+    <span aria-hidden="true" :style="ai.glow" />
+    <span aria-hidden="true" :style="ai.ring" />
+    <span :style="ai.surface">
+      <span aria-hidden="true" :style="ai.tint" />
+      <span v-if="loading" :style="ai.iconBox"><slot name="loading" :size="iSize" :style="iconStyle"><span aria-hidden="true" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" /></slot></span>
+      <span v-else :style="ai.iconBox">
+        <Icon :name="aiIcon" :size="iSize" :style="{ ...iconStyle, ...ai.iconRest }" />
+        <Icon :name="aiIcon" :size="iSize" gradient :style="{ ...iconStyle, ...ai.iconGrad }" />
+      </span>
+      <span v-if="!iconOnly" :style="ai.label"><slot>{{ text }}</slot></span>
+      <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading"><TrailingIcon v-if="trailingIcon" /></slot>
+    </span>
+  </button>
+  <button v-else :type="nativeType" data-press="own" :data-size="size" :style="s" :disabled="busy" :aria-busy="loading" :aria-label="iconOnly ? label : undefined"
+    @click="onClick" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
+    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
+    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle"><span aria-hidden="true" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" /></slot>
+    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle"><LeadingIcon v-if="icon" /></slot>
     <slot v-if="!iconOnly">{{ text }}</slot>
-    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle">
-      <LeadingIcon v-if="icon" />
-    </slot>
-    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading">
-      <TrailingIcon v-if="trailingIcon" />
-    </slot>
+    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle"><LeadingIcon v-if="icon" /></slot>
+    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading"><TrailingIcon v-if="trailingIcon" /></slot>
   </button>
 </template>

package/components/buttons/Button.vue.d.ts

@@ -2,7 +2,8 @@ import type { Component, ComponentOptionsMixin, CSSProperties, DefineComponent,
 
 /** Vue 专用声明；同目录 Button.d.ts 继续描述 React 接口。 */
 export interface VueButtonProps {
-  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text';
+  /** ai：仅用于 Prophet AI（方知）入口；它的 icon 只接受 DS 图标名，默认 prophet-sparkle。 */
+  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text' | 'ai';
   size?: 'sm' | 'md' | 'lg';
   icon?: string | Component | VNode;
   /** 不随 loading 隐藏，适用于下拉箭头等独立的尾部标记。 */
@@ -17,6 +18,8 @@ export interface VueButtonProps {
   label?: string;
   /** 默认插槽的后备文本。 */
   text?: string;
+  /** 强制悬停样式，用于规范展示。 */
+  hovered?: boolean;
   pressed?: boolean;
   focused?: boolean;
   style?: CSSProperties;

package/components/buttons/ai-button.js

@@ -0,0 +1,54 @@
+/* Button variant="ai" — the Prophet AI (方知) entry treatment, shared by Button.jsx and Button.vue.
+   Same outer box as every Button at the tier (height, radius, padding); the 1px border is replaced by a 1px ring:
+   at rest a gradient comet travels round a neutral track; on hover the full ring, an 8% gradient tint, a soft glow and a
+   gradient icon fade in and the ring speeds up. Tokens: tokens/ai.css. One CSS animation (kb-ai-spin) drives the angle;
+   hover speed is ramped with Animation.playbackRate, so the angle never jumps. */
+/* The animated angle needs a registered <angle> property and a keyframe on it — injected once, so the token files stay plain. */
+if (typeof document !== "undefined" && !document.querySelector("style[data-kb-ai]")) {
+  const el = document.createElement("style");
+  el.setAttribute("data-kb-ai", "");
+  el.textContent = "@property --kb-ai-angle{syntax:'<angle>';inherits:true;initial-value:0deg}@keyframes kb-ai-spin{to{--kb-ai-angle:360deg}}";
+  document.head.appendChild(el);
+}
+const FADE = "opacity 300ms var(--ease-out)";
+const FULL = "conic-gradient(from var(--kb-ai-angle), var(--ai-gradient-stops))";
+const COMET = "conic-gradient(from var(--kb-ai-angle), var(--ai-ring-rest-track) 0 50%, var(--ai-gradient-start) 78%, var(--ai-gradient-end) 100%)";
+const layer = { position: "absolute", inset: "0", borderRadius: "inherit", pointerEvents: "none", transition: FADE };
+
+/** A random phase per instance, so neighbouring rings never move in lockstep. */
+export const aiSpinDelay = () => "-" + (Math.random() * 5).toFixed(2) + "s";
+
+/** on = hovered (and not busy). Lengths are strings so the same objects work in React and Vue. */
+export function aiStyles({ on, press, busy, focused, medium, fullWidth, iconOnly, delay, style }) {
+  const tint = press ? "var(--ai-tint-press)" : "var(--ai-tint)";
+  return {
+    outer: { position: "relative", isolation: "isolate", display: fullWidth ? "flex" : "inline-flex", alignItems: "stretch", width: fullWidth ? "100%" : iconOnly ? "var(--control-h)" : undefined, height: "var(--control-h)", padding: "var(--ai-ring-width)", border: "none", borderRadius: "var(--radius-md)", boxSizing: "border-box", background: COMET, animation: "kb-ai-spin var(--ai-spin-rest) linear " + delay + " infinite", cursor: busy ? "default" : "pointer", opacity: busy ? .55 : undefined, boxShadow: focused && !busy ? "var(--ring-focus)" : undefined, fontFamily: "var(--font-sans)", fontWeight: medium ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-body)", whiteSpace: "nowrap", verticalAlign: "middle", ...style },
+    glow: { ...layer, zIndex: "-1", background: FULL, filter: "blur(var(--ai-glow-blur))", opacity: on ? "var(--ai-glow-opacity)" : "0" },
+    ring: { ...layer, background: FULL, opacity: on ? "1" : "0" },
+    surface: { position: "relative", flex: "1 1 auto", display: "flex", alignItems: "center", justifyContent: "center", gap: iconOnly ? "0" : "6px", padding: iconOnly ? "0" : "0 calc(var(--control-px) - var(--ai-ring-width))", borderRadius: "calc(var(--radius-md) - var(--ai-ring-width))", background: "var(--bg-surface)", overflow: "hidden" },
+    tint: { ...layer, background: "linear-gradient(90deg, color-mix(in srgb, var(--ai-gradient-start) " + tint + ", transparent), color-mix(in srgb, var(--ai-gradient-end) " + tint + ", transparent))", opacity: on || press ? "1" : "0" },
+    iconBox: { position: "relative", display: "inline-flex", flexShrink: "0" },
+    iconRest: { transition: FADE, opacity: on ? "0" : "1" },
+    iconGrad: { position: "absolute", inset: "0", transition: FADE, opacity: on ? "1" : "0" },
+    label: { position: "relative" },
+  };
+}
+
+const secs = (v, d) => { v = (v || "").trim(); const n = parseFloat(v); return isNaN(n) ? d : /ms$/.test(v) ? n / 1000 : n; };
+/** Ease the ring's speed toward rest (fast=false) or hover (fast=true). Returns a cancel function. */
+export function rampAiSpin(el, fast) {
+  if (!el || !el.getAnimations || (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches)) return () => {};
+  const anim = el.getAnimations().find((a) => a.animationName === "kb-ai-spin");
+  if (!anim) return () => {};
+  const cs = getComputedStyle(el);
+  const target = fast ? secs(cs.getPropertyValue("--ai-spin-rest"), 5) / secs(cs.getPropertyValue("--ai-spin-hover"), 1.2) : 1;
+  let raf = 0, last = performance.now();
+  const step = (t) => {
+    const dt = Math.min(0.05, (t - last) / 1000); last = t;
+    const r = anim.playbackRate + (target - anim.playbackRate) * Math.min(1, dt * 5);
+    if (Math.abs(target - r) < 0.01) { anim.playbackRate = target; return; }
+    anim.playbackRate = r; raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => cancelAnimationFrame(raf);
+}

package/components/buttons/buttons.prompt.md

@@ -2,7 +2,8 @@ Buttons: `Button` (primary/dark/outline/ghost/primary-soft), `IconButton` (squar
 
 ```jsx
 <Button icon="send">Submit</Button>
-<Button variant="dark" icon="ai-sparkles">AI Assistant</Button>
+<Button variant="dark" icon="upload-cloud">Publish</Button>
+<Button variant="ai">Ask Prophet AI</Button>   // 中文：问方知 — icon defaults to prophet-sparkle
 <Button variant="ghost" icon="play">Run Test</Button>
 <Button variant="text">Cancel</Button>
 <Button variant="primary-soft" icon="eye">Data Preview</Button>
@@ -17,4 +18,8 @@ Buttons: `Button` (primary/dark/outline/ghost/primary-soft), `IconButton` (squar
 <ActionChip tone="success">Mark as New</ActionChip>
 ```
 
-Primary = the single blue CTA per view. Dark = brand-level actions (AI Assistant, Show). Ghost = no box at rest, grey wash on hover — the default for actions in card and section headers, table toolbars and panel chrome ("Export", "Filter", "Run Test", "Back"); same height as outline so it lines up. `text` = bare label, underline on hover — links that happen to be buttons ("View all", "Clear filters"), never beside a boxed button and never a toolbar action. Emphasis is always the variant, never the size: a quieter action gets `ghost` or `text`, not `size="sm"`. Danger/danger-soft = destructive actions. lg (36px) comes from an lg region — dialogs and wizard footers; `Modal` sets it for you. A `size` prop on a single button is only for a control that stands alone, never to adjust one button inside a bar. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).
+Primary = the single blue CTA per view. Dark = brand-level actions that should outweigh the page but not compete with the blue CTA (Publish, Show). Never for AI — Prophet AI entries use `ai`. Ghost = no box at rest, grey wash on hover — the default for actions in card and section headers, table toolbars and panel chrome ("Export", "Filter", "Run Test", "Back"); same height as outline so it lines up. `text` = bare label, underline on hover — links that happen to be buttons ("View all", "Clear filters"), never beside a boxed button and never a toolbar action. Emphasis is always the variant, never the size: a quieter action gets `ghost` or `text`, not `size="sm"`. Danger/danger-soft = destructive actions. lg (36px) comes from an lg region — dialogs and wizard footers; `Modal` sets it for you. A `size` prop on a single button is only for a control that stands alone, never to adjust one button inside a bar. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).
+
+`ai` = Prophet AI (方知) entry points only — never a generic primary action, at most one per region. Same box, tiers and generic states (focus, disabled, loading) as every Button; only the surface differs: a 1px travelling gradient ring at rest, and on hover the full ring, an 8% gradient tint, a soft glow and a gradient icon, with the ring speeding up. It only triggers (opens the Prophet AI panel); it never shows AI content in place. Tokens live in `tokens/ai.css` (`--ai-*`); `<Icon gradient/>` renders the gradient glyph.
+
+Legacy adapters (both frameworks): `trailingIcon` (e.g. "chevron-down" on a menu button, stays visible while loading), `nativeType` ("submit" for old forms), `text` (fallback label), element / component icons, `aria-busy`. Vue adds `#icon` / `#loading` / `#trailing` slots and has its own types in `Button.vue.d.ts`. Migrating the old actnplanBtn: `BUTTON_MIGRATION.md`.

package/components/data/Table.d.ts

@@ -93,6 +93,11 @@ export interface DataTableProps {
   onRowMore?: (row: any, index: number, event: React.MouseEvent) => void;
   /** Opens a row from its twoLine cell: the icon tile and the title get a hand cursor and call this on click (the title also on Enter / Space). Vue: `@row-open`. */
   onRowOpen?: (row: any, index: number, event: React.SyntheticEvent) => void;
+  /** What opens a row (needs onRowOpen). "title" (default): the twoLine tile and title only. "row": a click anywhere on a body row calls onRowOpen and the whole row
+   *  shows the hand cursor — except clicks on buttons (the ⋯ menu, the tree arrow), checkboxes, inputs, links, menus, and a click that ends a text selection.
+   *  The header and the resize handles never open a row. The tile and title still open it once, never twice. Tree folders: decide in onRowOpen
+   *  whether to expand (expandedKeys) or enter. Vue: `row-open="row"` with `@row-open`. */
+  rowOpen?: "title" | "row";
   /** Tree rows: a row nests through `children` (or sets `hasChildren: true` to show the arrow before its children are loaded). The twoLine column indents 24px per level and shows an expand arrow (chevron-right, turned down when open). Sorting reorders siblings only. Selection and event indices are depth-first over every row, so they never move. */
   tree?: boolean;
   /** Row field that identifies a row in expandedKeys (default "id"; falls back to the row's index). */

package/components/data/Table.jsx

@@ -3,6 +3,7 @@ import { Checkbox } from "../forms/Checkbox.jsx";
 import { IconTile } from "../display/Badge.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
 import { Icon } from "../icons/Icon.jsx";
+import { rowOpenFromClick } from "./row-open.js";
 
 /* Selection checkbox: sits in the first column's leading padding, not in a column of its own, so the gap to the
    first column's text equals the edge padding (16px; 12px in sm) whatever the table width or column widths (a separate column took a share
@@ -103,10 +104,10 @@ function TitleCell({ c, item, onRowMore, onRowOpen, labels, tree, onToggleRow })
     <div style={{ display: "flex", alignItems: "center", minWidth: c.minWidth ?? 180, ...(tree ? { paddingLeft: item.level * TREE_INDENT } : null) }}>
       {tree ? <span style={{ width: TREE_TOGGLE, flexShrink: 0, marginRight: TREE_INDENT - TREE_TOGGLE, display: "inline-flex" }}>{item.kids ? <TreeToggle open={item.open} label={item.open ? labels.collapse : labels.expand} onClick={() => onToggleRow(item)} /> : null}</span> : null}
       <div style={{ display: "flex", alignItems: "center", gap: "var(--title-cell-tile-gap)", flex: 1, minWidth: 0 }}>
-        {icon ? <span onClick={open || undefined} style={{ display: "inline-flex", flexShrink: 0, cursor: open ? "pointer" : undefined }}><IconTile icon={icon} hue={hue || "neutral"} kind="row" style={T_TILE} iconStyle={T_ICON} /></span> : null}
+        {icon ? <span data-row-open={open ? "" : undefined} onClick={open || undefined} style={{ display: "inline-flex", flexShrink: 0, cursor: open ? "pointer" : undefined }}><IconTile icon={icon} hue={hue || "neutral"} kind="row" style={T_TILE} iconStyle={T_ICON} /></span> : null}
         <div style={{ display: "flex", flexDirection: "column", gap: "var(--title-cell-gap)", flex: 1, minWidth: 0 }}>
           <div style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0 }}>
-            <span style={{ ...T_TITLE, ...(open ? { cursor: "pointer" } : null) }} {...(open ? { role: "button", tabIndex: 0, onClick: open, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(e); } } } : null)}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</span>
+            <span style={{ ...T_TITLE, ...(open ? { cursor: "pointer" } : null) }} {...(open ? { "data-row-open": "", role: "button", tabIndex: 0, onClick: open, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(e); } } } : null)}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</span>
             {mark ? <TitleMark m={mark} /> : null}
           </div>
           {desc ? <span style={T_DESC}>{desc}</span> : null}
@@ -124,6 +125,9 @@ function TitleCell({ c, item, onRowMore, onRowOpen, labels, tree, onToggleRow })
  *            (defaultSort to seed it uncontrolled); compare(a, b, rowA, rowB) overrides the default comparison; manualSort keeps rows as given.
  * twoLine  — the name column of a document list: icon tile, title over a description, optional mark ("favorite" = filled star), trailing ⋯
  *            (onRowMore(row, index, event)); onRowOpen(row, index, event) makes the tile and the title open the row (hand cursor, Enter / Space on the title).
+ * rowOpen  — "title" (default): only the tile and the title open a row. "row": a click anywhere on a body row calls onRowOpen(row, index, event) and the
+ *            whole row shows the hand cursor — except clicks on buttons (⋯, tree arrow), checkboxes, inputs, links, menus, and clicks that end a text
+ *            selection. The tile and title still open it once (never twice). Tree folders: decide in onRowOpen whether to expand or enter.
  *            tree — rows nest through `children` (or `hasChildren` for rows you load on demand); the twoLine column indents 24px per level with an
  *            expand arrow; expandedKeys / defaultExpandedKeys / onExpandChange(row, expanded, keys); rowKey names the key field (default "id").
  * labels   — { sortAsc, sortDesc, sortClear, more, expand, collapse } for every word the table draws (English by default).
@@ -147,7 +151,7 @@ function TitleCell({ c, item, onRowMore, onRowOpen, labels, tree, onToggleRow })
  * resizable — a short divider between header cells (hover darkens it, cursor col-resize); drag to set that column's width.
  *             Widths live in local state unless you pass columnWidths (then update it from onColumnResize). onColumnResize(key, px) fires on every drag either way. Min width = column.minWidth ?? 48.
  */
-export function Table({ columns = [], rows = [], size, dense, selectable, selected = [], onToggle, pinSelected, isRowDisabled, disabledReason, headerBorder = true, bordered, framed, resizable, columnWidths, onColumnResize, onRowMore, onRowOpen, sort, defaultSort = null, onSortChange, manualSort, tree, rowKey = "id", expandedKeys, defaultExpandedKeys, onExpandChange, labels, empty, style }) {
+export function Table({ columns = [], rows = [], size, dense, selectable, selected = [], onToggle, pinSelected, isRowDisabled, disabledReason, headerBorder = true, bordered, framed, resizable, columnWidths, onColumnResize, onRowMore, onRowOpen, rowOpen = "title", sort, defaultSort = null, onSortChange, manualSort, tree, rowKey = "id", expandedKeys, defaultExpandedKeys, onExpandChange, labels, empty, style }) {
   const L = { ...DEFAULT_LABELS, ...labels };
   const [localExp, setLocalExp] = React.useState(defaultExpandedKeys || []);
   const expKeys = expandedKeys !== undefined ? expandedKeys : localExp;
@@ -192,6 +196,7 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
     if (onExpandChange) onExpandChange(item.r, !item.open, next);
   };
   const tier = size || (dense ? "sm" : undefined);
+  const rowMode = rowOpen === "row" && !!onRowOpen;
   const flushTop = bordered || framed;
   const colCount = columns.length || 1;
   const [localW, setLocalW] = React.useState({});
@@ -262,9 +267,9 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
       </thead>
       <tbody>
         {view.map((item, pos) => { const { r, ri } = item; const dis = isDis(r, ri); return (<React.Fragment key={item.key}>{groupAt(pos)}
-          <tr data-row="" aria-level={tree ? item.level + 1 : undefined} aria-expanded={item.kids ? item.open : undefined} style={{ ...(dis ? { "--row-wash": "initial" } : null), height: "var(--bar-h)", background: pinInfo && pinInfo.sel.has(ri) ? "var(--row-wash, var(--bg-inset))" : "var(--row-wash, transparent)", transition: "var(--t-hover)", borderBottom: ruleBelow(pos) ? "1px solid var(--border-control)" : bordered && pos === view.length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
+          <tr data-row="" aria-level={tree ? item.level + 1 : undefined} aria-expanded={item.kids ? item.open : undefined} onClick={rowMode ? (e) => { if (rowOpenFromClick(e)) onRowOpen(r, ri, e); } : undefined} style={{ ...(dis ? { "--row-wash": "initial" } : null), ...(rowMode ? { cursor: "pointer" } : null), height: "var(--bar-h)", background: pinInfo && pinInfo.sel.has(ri) ? "var(--row-wash, var(--bg-inset))" : "var(--row-wash, transparent)", transition: "var(--t-hover)", borderBottom: ruleBelow(pos) ? "1px solid var(--border-control)" : bordered && pos === view.length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
             {columns.map((c, i) => (
-              <td 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) }}>{selectable && i === 0 ? <span style={checkSlot} title={dis && disabledReason ? disabledReason(r, ri) : undefined}><Checkbox checked={selected.includes(ri)} disabled={dis} onChange={(v) => onToggle && onToggle(ri, v)} /></span> : null}{c.twoLine ? <TitleCell c={c} item={item} onRowMore={onRowMore} onRowOpen={onRowOpen} labels={L} tree={tree && c === columns.find((x) => x.twoLine)} onToggleRow={toggleRow} /> : (c.code && (typeof r[c.key] === "string" || typeof r[c.key] === "number") && r[c.key] !== "") ? <code style={codeChip}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</code> : c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
+              <td 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) }}>{selectable && i === 0 ? <span data-row-skip="" style={checkSlot} title={dis && disabledReason ? disabledReason(r, ri) : undefined}><Checkbox checked={selected.includes(ri)} disabled={dis} onChange={(v) => onToggle && onToggle(ri, v)} /></span> : null}{c.twoLine ? <TitleCell c={c} item={item} onRowMore={onRowMore} onRowOpen={onRowOpen} labels={L} tree={tree && c === columns.find((x) => x.twoLine)} onToggleRow={toggleRow} /> : (c.code && (typeof r[c.key] === "string" || typeof r[c.key] === "number") && r[c.key] !== "") ? <code style={codeChip}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</code> : c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
             ))}
           </tr></React.Fragment>
         ); })}

package/components/data/Table.vue

@@ -5,6 +5,7 @@ import Checkbox from '../forms/Checkbox.vue'
 import IconTile from '../display/IconTile.vue'
 import IconButton from '../buttons/IconButton.vue'
 import Icon from '../icons/Icon.vue'
+import { rowOpenFromClick } from './row-open.js'
 // 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']
@@ -12,6 +13,8 @@ Cell.props = ['v']
 // 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).
+// rowOpen  — 'title' (default) | 'row': with 'row' a click anywhere on a body row emits row-open (hand cursor on the whole row), except on buttons
+//            (⋯, tree arrow), checkboxes, inputs, links, menus, or a click ending a text selection. Tile and title still open once. Tree folders: decide in @row-open.
 //            tree — rows nest through `children` (or `hasChildren` for rows you load on demand); the twoLine column indents 24px per level with an
 //            expand arrow; v-model:expandedKeys / defaultExpandedKeys / @expand-change(row, expanded, keys); rowKey names the key field (default "id").
 // labels   — { sortAsc, sortDesc, sortClear, more, expand, collapse } for every word the table draws (English by default).
@@ -35,7 +38,7 @@ Cell.props = ['v']
 // isRowDisabled(row, index) — with selectable: the app's lock for a row, called on every render. Locked: checkbox disabled (50%, not-allowed, no hover, no toggle), no row hover wash,
 //             cells left to the app. Never changes selected. Select-all / Clear skip locked rows — @toggle('all', v, next) passes the result. disabledReason(row, index) → checkbox tooltip.
 // #empty slot renders inside the table when rows is empty.
-const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, size: String, dense: Boolean, selectable: Boolean, pinSelected: [Boolean, String], isRowDisabled: Function, disabledReason: Function, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, bordered: Boolean, framed: Boolean, resizable: Boolean, columnWidths: Object, sort: { type: Object, default: undefined }, defaultSort: { type: Object, default: null }, manualSort: Boolean, tree: Boolean, rowKey: { type: String, default: 'id' }, expandedKeys: { type: Array, default: undefined }, defaultExpandedKeys: { type: Array, default: () => [] }, labels: Object, style: Object })
+const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, size: String, dense: Boolean, selectable: Boolean, pinSelected: [Boolean, String], isRowDisabled: Function, disabledReason: Function, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, rowOpen: { type: String, default: 'title' }, bordered: Boolean, framed: Boolean, resizable: Boolean, columnWidths: Object, sort: { type: Object, default: undefined }, defaultSort: { type: Object, default: null }, manualSort: Boolean, tree: Boolean, rowKey: { type: String, default: 'id' }, expandedKeys: { type: Array, default: undefined }, defaultExpandedKeys: { type: Array, default: () => [] }, labels: Object, style: Object })
 const emit = defineEmits(['toggle', 'columnResize', 'rowMore', 'rowOpen', 'sortChange', 'update:sort', 'expandChange', 'update:expandedKeys'])
 // Every word the table draws itself; `labels` translates them. The sort tooltip names the NEXT step: unsorted → sortAsc, ascending → sortDesc, descending → sortClear.
 const DEFAULT_LABELS = { sortAsc: 'Sort ascending', sortDesc: 'Sort descending', sortClear: 'Clear sorting', more: 'More actions', expand: 'Expand', collapse: 'Collapse', pinned: 'Selected', others: 'Others', unavailable: 'Unavailable', clear: 'Clear' }
@@ -45,6 +48,9 @@ const sortLabel = (sorted) => sorted === 'asc' ? L.value.sortDesc : sorted === '
 const inst = getCurrentInstance()
 const canOpen = computed(() => !!(inst && inst.vnode.props && (inst.vnode.props.onRowOpen || inst.vnode.props['onRow-open'])))
 function openRow(r, ri, e) { emit('rowOpen', r, ri, e) }
+// rowOpen="row": a click anywhere on a body row opens it (see row-open.js for what is skipped); the tile and title keep their own single open.
+const rowMode = computed(() => props.rowOpen === 'row' && canOpen.value)
+function rowClick(item, e) { if (rowMode.value && rowOpenFromClick(e)) openRow(item.r, item.ri, e) }
 function openKey(r, ri, e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRow(r, ri, e) } }
 // Tree: 24px per level; a 20px arrow slot + 4px, so a child's arrow sits under its parent's tile.
 const TREE_INDENT = 24, TREE_TOGGLE = 20
@@ -186,9 +192,9 @@ function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 're
         <tr v-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pinInfo.top && pos === 0"><td :colspan="columns.length || 1" :style="GROUP_CELL"><span style="display:flex;align-items:center;gap:8px">{{ L.pinned }} · {{ pinInfo.n }}<button type="button" data-link="" @click="toggleAll(false)" :style="CLEAR_BTN">{{ L.clear }}</button></span></td></tr>
         <tr v-else-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pos === pinInfo.rest"><td :colspan="columns.length || 1" :style="GROUP_CELL">{{ L.others }} · {{ pinInfo.others }}</td></tr>
         <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)' }">
+        <tr data-row="" :aria-level="tree ? item.level + 1 : undefined" :aria-expanded="item.kids ? item.open : undefined" @click="e => rowClick(item, e)" :style="{ ...(isDis(item.r, item.ri) ? { '--row-wash': 'initial' } : null), ...(rowMode ? { cursor: 'pointer' } : 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 var(--dur-fast) var(--ease-out)' }" /></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>
+          <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" data-row-skip="" :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 var(--dur-fast) var(--ease-out)' }" /></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" :data-row-open="canOpen ? '' : undefined" :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" data-row-open="" 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/data/data.prompt.md

@@ -31,3 +31,5 @@ Data lists: `Table` (hairline table, mono cells, selectable; a size region — `
 ```jsx
 <CodeBlock language="sql" code={"SELECT * FROM sales_orders"}/>
 ```
+
+`Table rowOpen="row"` — with `onRowOpen` / `@row-open`, a click anywhere on a body row opens it (hand cursor on the whole row); buttons, checkboxes, inputs, links, the ⋯ menu, the tree arrow and text selection are left alone. Default `"title"` keeps opening on the tile and title only.

package/components/data/row-open.js

@@ -0,0 +1,13 @@
+/* Table rowOpen="row": decides whether a click on a body row opens it. Clicks on controls inside the row (buttons — the ⋯ menu and
+   the tree arrow included — checkboxes, inputs, links, menus), on the title / tile that open the row themselves, and clicks that end a
+   text selection do not. Header cells and resize handles sit outside the body rows, so they never reach here. */
+const SKIP = 'button, a[href], input, select, textarea, label, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menu"], [role="link"], [role="combobox"], [role="slider"], [data-row-open], [data-row-skip]';
+export function rowOpenFromClick(e) {
+  const tr = e.currentTarget, t = e.target;
+  if (!tr || e.defaultPrevented || (e.button != null && e.button !== 0)) return false;
+  const hit = t && t.closest ? t.closest(SKIP) : null;
+  if (hit && tr.contains(hit)) return false;
+  const sel = typeof window !== "undefined" && window.getSelection ? window.getSelection() : null;
+  if (sel && !sel.isCollapsed && String(sel).length > 0) return false;
+  return true;
+}

package/components/display/Kbd.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-/** Keyboard shortcut keycap row (20px). Addition — for a power-user data tool's shortcut hints. */
+/** Keyboard shortcut keycap row (20px). Semantic keys adapt to the OS: "mod" → ⌘ on macOS / Ctrl elsewhere; also "alt"/"opt", "shift", "enter", "backspace", "ctrl", "esc". Any other string renders as-is. */
 export interface KbdProps {
   keys?: string[];
+  /** "auto" detects from the browser (default); force "mac" or "win" for docs/screenshots. */
+  platform?: "auto" | "mac" | "win";
   style?: React.CSSProperties;
 }
 export declare function Kbd(props: KbdProps): JSX.Element;

package/components/display/Kbd.jsx

@@ -1,11 +1,16 @@
 import React from "react";
 
-/** Keyboard shortcut hint, e.g. <Kbd keys={["⌘","K"]}/>. */
-export function Kbd({ keys = [], style }) {
+const KBD_MAP = { mod: ["⌘", "Ctrl"], cmd: ["⌘", "Ctrl"], ctrl: ["⌃", "Ctrl"], alt: ["⌥", "Alt"], opt: ["⌥", "Alt"], shift: ["⇧", "Shift"], enter: ["⏎", "Enter"], backspace: ["⌫", "Backspace"], esc: ["Esc", "Esc"] };
+const isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+const resolveKbd = (k, mac) => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k; };
+
+/** Keyboard shortcut hint. Use semantic keys so it adapts per OS: <Kbd keys={["mod","K"]}/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels ("⌘", "F5") pass through unchanged. platform: "auto" (default) | "mac" | "win". */
+export function Kbd({ keys = [], platform = "auto", style }) {
+  const mac = platform === "auto" ? isMacPlatform() : platform === "mac";
   return (
     <span style={{ display: "inline-flex", gap: 3, ...style }}>
       {keys.map((k, i) => (
-        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
+        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{resolveKbd(k, mac)}</span>
       ))}
     </span>
   );

package/components/display/Kbd.vue

@@ -1,9 +1,13 @@
 <script setup>
-// Keyboard shortcut hint, e.g. <Kbd :keys="['⌘','K']"/>.
-defineProps({ keys: { type: Array, default: () => [] }, style: Object })
+// Keyboard shortcut hint. Semantic keys adapt per OS: <Kbd :keys="['mod','K']"/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels pass through. platform: 'auto' | 'mac' | 'win'.
+import { computed } from 'vue'
+const props = defineProps({ keys: { type: Array, default: () => [] }, platform: { type: String, default: 'auto' }, style: Object })
+const KBD_MAP = { mod: ['⌘', 'Ctrl'], cmd: ['⌘', 'Ctrl'], ctrl: ['⌃', 'Ctrl'], alt: ['⌥', 'Alt'], opt: ['⌥', 'Alt'], shift: ['⇧', 'Shift'], enter: ['⏎', 'Enter'], backspace: ['⌫', 'Backspace'], esc: ['Esc', 'Esc'] }
+const isMac = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || '')
+const labels = computed(() => { const mac = props.platform === 'auto' ? isMac() : props.platform === 'mac'; return props.keys.map(k => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k }) })
 </script>
 <template>
   <span :style="{ display: 'inline-flex', gap: '3px', ...style }">
-    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
+    <span v-for="(k, i) in labels" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
   </span>
 </template>

package/components/display/display.prompt.md

@@ -26,5 +26,7 @@ Cards are flat (no shadow). IconTile hues: source green, join blue, transform or
 ```jsx
 <Tag onRemove={remove}>Financial Settings</Tag>
 <Divider label="OR"/>  <Divider vertical/>
-<Kbd keys={["⌘","K"]}/>
+<Kbd keys={["mod","K"]}/>   // ⌘ K on macOS, Ctrl K on Windows/Linux
 ```
+
+Kbd: write modifiers semantically — `mod` (⌘/Ctrl), `alt`/`opt` (⌥/Alt), `shift` (⇧/Shift), `enter` (⏎/Enter), `backspace`, `ctrl`, `esc`. Don't hard-code "⌘": Windows users have no Command key. `platform="mac"|"win"` forces one side for docs.

package/components/feedback/Modal.d.ts

@@ -7,15 +7,35 @@ export interface TooltipProps {
   style?: React.CSSProperties;
 }
 export declare function Tooltip(props: TooltipProps): JSX.Element;
-/** Centered dialog with scrim, title/subtitle, close, footer slot. Addition. */
+/** Centered dialog with scrim, title/subtitle, close, footer slot. Focus moves into the dialog ([data-autofocus] first), Tab stays inside, and focus returns on close. */
 export interface ModalProps {
   open?: boolean;
-  title?: string;
+  /** Vue: also a #title slot */
+  title?: React.ReactNode;
   subtitle?: string;
-  onClose?: () => void;
+  /** Why it closed: "close" (×), "esc" or "scrim". Vue: @close(reason). */
+  onClose?: (reason: "close" | "esc" | "scrim") => void;
+  /** Esc closes the topmost dialog (default true) */
+  closeOnEsc?: boolean;
+  /** A click on the scrim closes it (default true; turn off for confirmations that must be answered) */
+  closeOnScrim?: boolean;
+  /** The × in the header (default true) */
+  showClose?: boolean;
+  /** Stops the page behind from scrolling while open (default true) */
+  lockScroll?: boolean;
+  /** Dims the page behind (default true) */
+  scrim?: boolean;
+  /** Moves focus in on open (default true) */
+  autoFocus?: boolean;
+  /** role="alertdialog" — for confirmations and warnings that need an answer */
+  alert?: boolean;
+  /** Overrides --z-modal */
+  zIndex?: number | string;
+  /** aria-label of the × (default "Close") */
+  closeLabel?: string;
   /** Right-aligned footer buttons */
   footer?: React.ReactNode;
-  width?: number;
+  width?: number | string;
   /** Size tier of the dialog region. Defaults to "lg" (36px controls) regardless of the page behind it — a dialog does not compete for space. */
   size?: "sm" | "md" | "lg";
   children?: React.ReactNode;
@@ -27,14 +47,52 @@ export interface ToastProps {
   tone?: "success" | "danger" | "warning" | "info";
   title?: string;
   meta?: string;
+  /** Repeat count: 2 or more shows "× n" after the title */
+  count?: number;
+  /** Replaces the tone glyph (Vue: #icon slot) */
+  icon?: React.ReactNode;
+  /** Content in place of title (Vue: default slot) */
+  children?: React.ReactNode;
+  /** aria-label of the dismiss button (default "Dismiss") */
+  closeLabel?: string;
+  /** Shows the dismiss button */
   onClose?: () => void;
   style?: React.CSSProperties;
 }
 export declare function Toast(props: ToastProps): JSX.Element;
-/** Fixed bottom-right toast stack. */
+export interface ToastStackItem {
+  id: string | number;
+  tone?: "success" | "danger" | "warning" | "info";
+  title?: string;
+  meta?: string;
+  /** Content in place of title (Vue: string | VNode | () => VNode) */
+  content?: React.ReactNode;
+  /** Glyph name or element in place of the tone glyph */
+  icon?: string | React.ReactNode;
+  /** "× n" after the title; a change restarts the timer */
+  count?: number;
+  /** ms, overrides the stack's duration; 0 = stay */
+  duration?: number;
+  /** Shows the × (default true) */
+  dismissible?: boolean;
+  closeLabel?: string;
+  /** Vue: class */
+  className?: string;
+  style?: React.CSSProperties;
+}
+/** Fixed stack of toasts. Toasts are role="status" (danger / warning: role="alert"), so screen readers announce them. */
 export interface ToastStackProps {
-  toasts?: { id: string | number; tone?: string; title?: string; meta?: string }[];
-  onDismiss?: (id: string | number) => void;
+  toasts?: ToastStackItem[];
+  /** Where the stack sits (default "bottom-right"). Vue Message uses "top-center". */
+  placement?: "bottom-right" | "top-center" | "top-right" | "bottom-center";
+  /** Distance from the edges in px (default 24) */
+  offset?: number;
+  /** Auto-dismiss after ms (default 0 = stay). Paused while the pointer or focus is on a toast. */
+  duration?: number;
+  /** Overrides --z-toast */
+  zIndex?: number | string;
+  /** "close" (×) or "timeout". Vue: @dismiss(id, reason). */
+  onDismiss?: (id: string | number, reason: "close" | "timeout") => void;
   style?: React.CSSProperties;
 }
 export declare function ToastStack(props: ToastStackProps): JSX.Element;