@keyfunc/keybricks-ds 2.7.0 → 2.8.0

package/{components/feedback → _vue-services}/MESSAGE_SERVICES.md

@@ -1,6 +1,6 @@
 # Vue 消息服务与 Element Plus 迁移
 
-2.6.0 新增源码入口，适用于 Vue 3，复用 Keybricks Toast、Button、IconButton 和 Icon。
+2.6.0 新增源码入口，适用于 Vue 3。2.8.0 起两个服务不再自带样式：Message 用 DS 的 `ToastStack`（`placement="top-center"`）和 `Toast` 显示，MessageBox 用 DS 的 `Modal`、`Button`、`Input` / `Textarea` 显示，焦点、Esc、遮罩和滚动锁定都由 `Modal` 负责。改 Toast 或 Modal 的外观，两个服务会自动跟着变。源码位于 `_vue-services/`。
 本次仅补齐源码，未执行测试、类型检查、构建或浏览器验证，也尚未发布。
 
 ```js
@@ -28,7 +28,7 @@ const { value } = await MessageBox.prompt('请输入名称', '新建', {
 | `ElMessage(options / string / VNode)` | `Message(...)`，返回 `{ close() }` |
 | `success / info / warning / error` | 同名快捷方法 |
 | `duration / showClose / offset / zIndex / customClass / center` | 支持；默认 3000 毫秒，0 不自动关闭 |
-| 消息堆叠与 `grouping` | 同一挂载目标按真实高度向下堆叠；分组显示重复次数并重置计时 |
+| 消息堆叠与 `grouping` | 同一挂载目标放进一个顶部居中的 ToastStack，间距 8px；分组显示 × n 并重置计时 |
 | 悬停与焦点暂停计时 | 支持，离开后重新计时 |
 | `onClose / closeAll(type?)` | 支持，手动及自动关闭均清理实例 |
 | `MessageBox(options)` | 返回 Promise，弹窗按调用顺序排队 |

package/_vue-services/_internal/MessageBoxView.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { computed, h, isVNode, onBeforeUnmount, ref } from 'vue'
+import Modal from '../../components/feedback/Modal.vue'
+import Button from '../../components/buttons/Button.vue'
+import Icon from '../../components/icons/Icon.vue'
+import Input from '../../components/forms/Input.vue'
+import Textarea from '../../components/forms/Textarea.vue'
+import { contentNode } from './service-utils.js'
+
+// MessageBox 的显示完全交给 DS：Modal（焦点、Esc、遮罩、滚动锁定）、Button、Input / Textarea、Icon。
+// 本组件只负责 Element Plus 风格的选项映射、输入校验和确认 / 取消 / 关闭动作。
+const props = defineProps({ options: { type: Object, required: true } })
+const emit = defineEmits(['action'])
+const error = ref('')
+const validating = ref(false)
+const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
+const Title = () => contentNode(props.options.title)
+const icons = { success: 'circle-check', warning: 'triangle-alert', error: 'triangle-alert', info: 'info' }
+const colors = { success: 'var(--success-text)', warning: 'var(--warning-text)', error: 'var(--danger-text)', info: 'var(--info-fg)' }
+const icon = computed(() => props.options.icon || icons[props.options.type])
+const CustomIcon = () => isVNode(icon.value) ? icon.value : h(icon.value)
+const confirmVariant = computed(() => props.options.confirmButtonClass?.includes('el-button--danger') ? 'danger' : 'primary')
+const titleIsText = computed(() => props.options.title == null || typeof props.options.title === 'string')
+const inputId = computed(() => `${props.options.id}-input`)
+const round = computed(() => props.options.roundButton ? { borderRadius: 'var(--radius-full)' } : null)
+let disposed = false
+let validationRevision = 0
+onBeforeUnmount(() => { disposed = true })
+
+function focusInput() {
+  const el = document.getElementById(inputId.value)
+  const target = el && (el.matches('input, textarea') ? el : el.querySelector('input, textarea'))
+  target?.focus()
+}
+
+async function confirm() {
+  const options = props.options
+  if (validating.value || options.confirmButtonDisabled || options.confirmButtonLoading) return
+  if (options.showInput) {
+    const revision = ++validationRevision
+    const value = options.inputValue ?? ''
+    validating.value = true
+    let message = ''
+    try {
+      if (options.inputPattern) {
+        // 避免全局正则的 lastIndex 导致同一输入校验结果交替。
+        const pattern = new RegExp(options.inputPattern.source, options.inputPattern.flags)
+        if (!pattern.test(value)) message = options.inputErrorMessage || 'Invalid input'
+      }
+      if (!message && options.inputValidator) {
+        const result = await options.inputValidator(value)
+        if (result === false || typeof result === 'string') message = result || options.inputErrorMessage || 'Invalid input'
+      }
+    } catch (reason) {
+      message = options.inputErrorMessage || reason?.message || 'Invalid input'
+    } finally {
+      validating.value = false
+    }
+    if (disposed || revision !== validationRevision) return
+    error.value = message
+    if (message) { focusInput(); return }
+  }
+  emit('action', 'confirm')
+}
+function changeInput(value) {
+  validationRevision++
+  props.options.inputValue = value
+  error.value = ''
+}
+function onEnter(event) {
+  if (event.isComposing || props.options.inputType === 'textarea') return
+  event.preventDefault()
+  confirm()
+}
+</script>
+
+<template>
+  <Modal
+    open alert
+    :title="titleIsText ? options.title : undefined"
+    :width="options.width ?? 440"
+    :size="options.size || 'lg'"
+    :close-on-esc="options.closeOnPressEscape"
+    :close-on-scrim="options.closeOnClickModal"
+    :show-close="options.showClose"
+    :lock-scroll="options.lockScroll"
+    :scrim="options.modal !== false"
+    :auto-focus="options.autofocus"
+    :z-index="options.zIndex"
+    :close-label="options.closeLabel || 'Close'"
+    :class="[options.modalClass, options.customClass]"
+    @close="emit('action', 'close')"
+  >
+    <template v-if="!titleIsText" #title><Title /></template>
+    <div :id="`${options.id}-content`" :style="{ display: 'flex', alignItems: 'flex-start', gap: '12px', justifyContent: options.center ? 'center' : undefined, textAlign: options.center ? 'center' : undefined, fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: 'var(--text-body)' }">
+      <span v-if="icon" :style="{ color: colors[options.type] || 'var(--text-secondary)', display: 'inline-flex', flexShrink: 0 }">
+        <Icon v-if="typeof icon === 'string'" :name="icon" :size="20" />
+        <CustomIcon v-else />
+      </span>
+      <div style="min-width:0;overflow-wrap:anywhere;white-space:pre-wrap"><Content /></div>
+    </div>
+    <div v-if="options.showInput" style="display:flex;flex-direction:column;gap:var(--control-gap);margin-top:var(--group-gap)">
+      <Textarea
+        v-if="options.inputType === 'textarea'"
+        :id="inputId" data-autofocus
+        :model-value="options.inputValue" :error="!!error"
+        :placeholder="options.inputPlaceholder"
+        :aria-label="options.inputPlaceholder || (titleIsText && options.title) || 'Input'"
+        :aria-invalid="!!error" :aria-describedby="error ? `${options.id}-error` : undefined"
+        @update:model-value="changeInput"
+      />
+      <Input
+        v-else
+        :id="inputId" data-autofocus
+        :type="options.inputType"
+        :model-value="options.inputValue" :error="!!error"
+        :placeholder="options.inputPlaceholder"
+        :aria-label="options.inputPlaceholder || (titleIsText && options.title) || 'Input'"
+        :aria-invalid="!!error" :aria-describedby="error ? `${options.id}-error` : undefined"
+        :style="{ width: '100%' }"
+        @update:model-value="changeInput"
+        @keydown.enter="onEnter"
+      />
+      <div v-if="error" :id="`${options.id}-error`" role="alert" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--danger-text)">{{ error }}</div>
+    </div>
+    <template #footer>
+      <div :style="{ display: 'flex', flex: 1, gap: 'var(--control-gap)', justifyContent: options.center ? 'center' : 'flex-end' }">
+        <Button
+          v-if="options.showCancelButton"
+          variant="outline"
+          :class="options.cancelButtonClass"
+          :style="round"
+          :disabled="options.cancelButtonDisabled"
+          :loading="options.cancelButtonLoading"
+          @click="emit('action', 'cancel')"
+        >{{ options.cancelButtonText ?? 'Cancel' }}</Button>
+        <Button
+          v-if="options.showConfirmButton"
+          :variant="confirmVariant"
+          :class="options.confirmButtonClass"
+          :style="round"
+          :data-autofocus="options.showInput ? undefined : ''"
+          :disabled="options.confirmButtonDisabled"
+          :loading="options.confirmButtonLoading || validating"
+          @click="confirm"
+        >{{ options.confirmButtonText ?? 'OK' }}</Button>
+      </div>
+    </template>
+  </Modal>
+</template>

package/{components/feedback → _vue-services}/_internal/service-utils.js

@@ -32,15 +32,3 @@ export function mountService(component, props, options = {}, appContext) {
     container.remove()
   }
 }
-
-let locks = 0
-let previousOverflow
-export function lockBody() {
-  if (locks++ === 0) {
-    previousOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  }
-  return () => {
-    if (--locks === 0) document.body.style.overflow = previousOverflow
-  }
-}

package/_vue-services/message.js

@@ -0,0 +1,87 @@
+import { getCurrentInstance, h, isVNode, reactive, render } from 'vue'
+import ToastStack from '../components/feedback/ToastStack.vue'
+import { contentNode, resolveTarget } from './_internal/service-utils.js'
+
+/* Vue 消息服务。显示交给 DS 的 ToastStack（placement="top-center"）和 Toast，本文件只负责调用方式、分组、计时参数和关闭句柄；
+   业务错误脱敏仍由应用处理。 */
+const TONE = { success: 'success', info: 'info', warning: 'warning', error: 'danger' }
+const hosts = new Map()
+const entries = new Map()
+let seed = 0
+const normalize = value => typeof value === 'string' || typeof value === 'function' || isVNode(value)
+  ? { message: value } : { ...value }
+
+function onEscape(event) {
+  if (event.key !== 'Escape' || event.defaultPrevented) return
+  const last = [...entries.values()].pop()
+  if (last) last.handle.close()
+}
+
+function hostFor(target, options, appContext) {
+  let host = hosts.get(target)
+  if (host) { host.state.offset = Number(options.offset) || 0; if (options.zIndex != null) host.state.zIndex = options.zIndex; return host }
+  const list = reactive([])
+  const state = reactive({ offset: Number(options.offset) || 0, zIndex: options.zIndex })
+  const container = document.createElement('div')
+  target.appendChild(container)
+  const vnode = h({ render: () => h(ToastStack, {
+    toasts: list, placement: 'top-center', offset: state.offset, zIndex: state.zIndex,
+    onDismiss: id => entries.get(id)?.handle.close(),
+  }) })
+  vnode.appContext = appContext || null
+  render(vnode, container)
+  if (!hosts.size) document.addEventListener('keydown', onEscape)
+  host = { list, state, dispose() {
+    render(null, container); container.remove(); hosts.delete(target)
+    if (!hosts.size) document.removeEventListener('keydown', onEscape)
+  } }
+  hosts.set(target, host)
+  return host
+}
+
+/** Message(options | string | VNode, appContext?) → { close() } */
+export function Message(value = {}, appContext) {
+  if (typeof document === 'undefined') return { close() {} }
+  const options = { type: 'info', duration: 3000, offset: 16, ...Message.defaults, ...normalize(value) }
+  const target = resolveTarget(options)
+  if (options.grouping) {
+    const existing = [...entries.values()].find(e => e.target === target && e.message === options.message)
+    if (existing) {
+      existing.item.count++
+      existing.item.tone = TONE[options.type] || 'info'
+      return existing.handle
+    }
+  }
+  const host = hostFor(target, options, appContext || getCurrentInstance()?.appContext)
+  const id = `kb-message-${++seed}`
+  host.list.push({
+    id, tone: TONE[options.type] || 'info', count: 1, duration: Number(options.duration) || 0,
+    content: () => contentNode(options.message, options.dangerouslyUseHTMLString),
+    icon: options.icon, dismissible: !!options.showClose, closeLabel: options.closeLabel, class: options.customClass,
+    style: { minWidth: 'min(280px, 92vw)', maxWidth: '100%', boxSizing: 'border-box', ...(options.center ? { textAlign: 'center' } : null), ...(options.plain ? { boxShadow: 'none' } : null) },
+  })
+  const item = host.list[host.list.length - 1]
+  let closed = false
+  const handle = { close() {
+    if (closed) return
+    closed = true
+    entries.delete(id)
+    const i = host.list.indexOf(item)
+    if (i >= 0) host.list.splice(i, 1)
+    if (!host.list.length) host.dispose()
+    options.onClose?.(handle)
+  } }
+  entries.set(id, { item, handle, target, message: options.message, type: options.type })
+  return handle
+}
+
+for (const type of ['success', 'info', 'warning', 'error']) {
+  Message[type] = (value, appContext) => Message({ ...normalize(value), type }, appContext)
+}
+Message.closeAll = type => {
+  for (const entry of [...entries.values()]) {
+    if (!type || entry.type === type) entry.handle.close()
+  }
+}
+export default Message
+Message.defaults = {}

package/changelog.js

@@ -1,8 +1,17 @@
 /* Keybricks changelog — the source for the Changelog section of index.html. Newest first.
    Each release: v, date (ISO, "" when not recorded), status ("unreleased" until it is tagged), items.
-   Each item: tag (new | improved | fixed | breaking | removed) and the text as [en, zh, ja].
+   Each item: tag (new | improved | fixed | breaking | removed | rule — a team rule, shown in amber) and the text as [en, zh, ja].
    INTEGRATION.md keeps the full migration notes; this list is the short, reader-facing summary. */
 window.KB_CHANGELOG = [
+{ v: "2.8.0", date: "2026-11-03", status: "unreleased", items: [
+  { tag: "rule", t: ["For notices and dialogs use <code>Toast</code> / <code>ToastStack</code> and <code>Modal</code> (Vue services: <code>Message</code> / <code>MessageBox</code>, built on them). Before building any new component, check the component list; only when nothing there fits may you build one — please check with Felix first.", "提示和弹窗一律使用 <code>Toast</code> / <code>ToastStack</code> 和 <code>Modal</code>（Vue 命令式调用用基于它们的 <code>Message</code> / <code>MessageBox</code>）。新建任何组件前先查组件列表，只有找不到现成可用的才能新建，请先问 Felix。", "通知とダイアログには必ず <code>Toast</code> / <code>ToastStack</code> と <code>Modal</code> を使う（Vue の命令的な呼び出しはそれらを使う <code>Message</code> / <code>MessageBox</code>）。新しいコンポーネントを作る前にコンポーネント一覧を確認し、使えるものがない場合のみ作成可。その際はまず Felix に相談してください。"] },
+  { tag: "improved", t: ["Modal: Esc closes, focus stays inside and returns on close, the page behind stops scrolling; new options to block closing by scrim / Esc / ×, and a must-answer mode.", "弹窗：支持 Esc 关闭，焦点留在弹窗内、关闭后回到原处，打开时背后页面不滚动；新增可选设置：禁止点遮罩 / Esc / × 关闭，以及必须回答模式。", "モーダル：Esc で閉じる、フォーカスを内側に保持し閉じたら元に戻す、背面のスクロールを停止。遮罩 / Esc / × で閉じない設定と、必ず回答するモードを追加。"] },
+  { tag: "improved", t: ["ToastStack: choose the position (top-center, top-right, bottom-right, bottom-center), auto-dismiss with pause on hover, and “× 2” for repeated messages. Toasts are read out by screen readers.", "轻提示堆叠：可设置位置（顶部居中、右上、右下、底部居中），可自动消失、悬停时暂停，重复消息显示“× 2”。读屏软件会读出提示。", "トーストスタック：表示位置（上中央・右上・右下・下中央）を選択可能、ホバーで一時停止する自動クローズ、同じ通知は「× 2」と表示。スクリーンリーダーが読み上げる。"] },
+  { tag: "improved", t: ["Vue Message and MessageBox now render with ToastStack and Modal — no second look to maintain. Their source moved to <code>_vue-services/</code>; imports stay the same.", "Vue 的 Message 和 MessageBox 改为直接用 ToastStack 和 Modal 显示，不再另有一套样式；源码移到 <code>_vue-services/</code>，引用方式不变。", "Vue の Message と MessageBox は ToastStack と Modal で表示するように変更し、別の見た目を持たない。ソースは <code>_vue-services/</code> へ移動、インポート方法は変わらない。"] },
+  { tag: "new", t: ["Table: <code>rowOpen=\"row\"</code> opens a row from a click anywhere on it (hand cursor on the whole row); buttons, checkboxes, inputs, links, the ⋯ menu, the tree arrow and text selection are left alone.", "表格：<code>rowOpen=\"row\"</code> 时点击整行任意空白处即可打开该行（整行显示手型光标）；按钮、复选框、输入框、链接、更多菜单、树形箭头和选中文字不受影响。", "テーブル：<code>rowOpen=\"row\"</code> で行のどこをクリックしても開けるように（行全体が手のカーソル）。ボタン、チェックボックス、入力欄、リンク、⋯ メニュー、ツリーの矢印、テキスト選択はそのまま。"] },
+  { tag: "improved", t: ["Tree follows the size tier of its region: 28px rows and 12px text in sm, unchanged in md.", "树形视图跟随所在区域的尺寸档位：sm 档为 28px 行高、12px 文字，md 档外观不变。", "ツリーが領域のサイズ段階に追従：sm は行高 28px・文字 12px、md は従来どおり。"] },
+  { tag: "new", t: ["Tree: <code>icon: false</code> on a node drops its icon without leaving a gap — for a root such as “Documents”.", "树形视图：节点设置 <code>icon: false</code> 时不显示图标、也不留空位，适合“Documents”这类根节点。", "ツリー：ノードに <code>icon: false</code> を指定するとアイコンを表示せず余白も残さない。「Documents」のようなルートに。"] },
+] },
 { v: "2.7.0", date: "2026-11-02", items: [
   { tag: "new", t: ["<b>AI button</b> (<code>variant=\"ai\"</code>) for Prophet AI entry points: animated gradient ring, tint and glow on hover.", "<b>AI 按钮</b>（<code>variant=\"ai\"</code>），专用于方知入口：渐变描边缓慢流动，悬停时出现渐变底色和光晕。", "<b>AI ボタン</b>（<code>variant=\"ai\"</code>）を追加。Prophet AI の入口専用：グラデーションの枠が流れ、ホバーで色味と光彩が出る。"] },
   { tag: "new", t: ["<b>Global Search</b> in the top bar: ⌘K / Ctrl K, scopes, grouped results, Deep Search, and one step to hand a question to Prophet AI.", "顶栏新增<b>全局搜索</b>：⌘K / Ctrl K 唤起，支持范围切换、分组结果、深度搜索，并可一步把问题交给方知。", "トップバーに<b>グローバル検索</b>を追加：⌘K / Ctrl K で起動、スコープ切替、グループ化された結果、ディープサーチ、質問を Prophet AI へ引き継ぎ。"] },

package/components/_cards/modal.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x520" name="Modal" subtitle="Default · destructive footer · with form content · no subtitle" -->
+<!-- @dsCard group="Components" viewport="700x520" name="Modal" subtitle="Focus · Esc · must-answer dialogs · Default · destructive footer · with form content · no subtitle" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -12,13 +12,17 @@
 const { Modal, Button, Field, Input } = window.KeybricksDesignSystem_71231a;
 function Sheet(){
   const [which,setWhich]=React.useState(null);
+  const [why,setWhy]=React.useState("");
+  const shut=(r)=>{setWhy(r||"button");setWhich(null);};
   return <div>
     <div className="row">
       <Button variant="outline" onClick={()=>setWhich("confirm")}>Open confirm</Button>
       <Button variant="outline" onClick={()=>setWhich("destructive")}>Open destructive</Button>
       <Button variant="outline" onClick={()=>setWhich("form")}>Open with form</Button>
       <Button variant="outline" onClick={()=>setWhich("plain")}>Open, no subtitle</Button>
+      <Button variant="outline" onClick={()=>setWhich("must")}>Must answer</Button>
     </div>
+    <p style={{margin:"12px 0 0",fontSize:"var(--text-xs)",lineHeight:"17px",color:"var(--text-secondary)",maxWidth:"64ch"}}>Every dialog: focus moves in, Tab stays inside, Esc closes the top one, the page behind stops scrolling, and focus returns to the button that opened it. <b>Must answer</b> uses <code>alert</code>, <code>closeOnScrim={"{false}"}</code>, <code>closeOnEsc={"{false}"}</code> and <code>showClose={"{false}"}</code>, so only its buttons close it. Last close reason: <code>{why||"none"}</code></p>
     <Modal open={which==="confirm"} title="Discard changes?" subtitle="Your edits to this node haven't been saved." onClose={()=>setWhich(null)}
       footer={<React.Fragment><Button variant="outline" onClick={()=>setWhich(null)}>Keep Editing</Button><Button onClick={()=>setWhich(null)}>Discard</Button></React.Fragment>}/>
     <Modal open={which==="destructive"} title="Delete node?" subtitle="“Sales × Product Join” and its 2 edges will be removed." onClose={()=>setWhich(null)}
@@ -27,7 +31,9 @@ function Sheet(){
       footer={<React.Fragment><Button variant="outline" onClick={()=>setWhich(null)}>Cancel</Button><Button onClick={()=>setWhich(null)}>Save</Button></React.Fragment>}>
       <Field label="Node Name" required><Input defaultValue="Sales × Product Join"/></Field>
     </Modal>
-    <Modal open={which==="plain"} title="Export complete" onClose={()=>setWhich(null)} footer={<Button onClick={()=>setWhich(null)}>Done</Button>}/>
+    <Modal open={which==="plain"} title="Export complete" onClose={shut} footer={<Button onClick={()=>shut()}>Done</Button>}/>
+    <Modal open={which==="must"} alert closeOnScrim={false} closeOnEsc={false} showClose={false} title="Publish to production?" subtitle="Users see the new model as soon as it is published." onClose={shut}
+      footer={<React.Fragment><Button variant="outline" onClick={()=>shut("cancel")}>Cancel</Button><Button data-autofocus="" onClick={()=>shut("publish")}>Publish</Button></React.Fragment>}/>
   </div>;
 }
 ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);

package/components/_cards/table.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x11184" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
+<!-- @dsCard group="Components" viewport="700x11729" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · whole-row open · sorting · selection · frames · column resize · states · composition" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -167,6 +167,11 @@ function Sheet() {
   const [srt, setSrt] = React.useState(null);
   const [exp, setExp] = React.useState(["budget"]);
   const [opened, setOpened] = React.useState(null);
+  const [rowExp, setRowExp] = React.useState(["budget"]);
+  const [rowSel, setRowSel] = React.useState([]);
+  const [rowOpened, setRowOpened] = React.useState(null);
+  const rowToggle = (w, v, next) => setRowSel(w === "all" ? (next || []) : v ? [...rowSel, w] : rowSel.filter(i => i !== w));
+  const openWholeRow = (r) => { if (r.children) setRowExp(rowExp.includes(r.id) ? rowExp.filter(k => k !== r.id) : [...rowExp, r.id]); else setRowOpened(r.name); };
   const [pin, setPin] = React.useState([3]);
   const [lock, setLock] = React.useState([0, 3]);
   const lockFn = lockRule(lock);
@@ -225,6 +230,10 @@ function Sheet() {
       <Table bordered tree columns={DOCS} rows={TREE_ROWS} expandedKeys={exp} onExpandChange={(r, open, keys) => setExp(keys)} onRowOpen={(r) => setOpened(r.name)} />
       <div className="note">Each level indents 24px; the 20px arrow slot plus 4px puts a child's arrow under its parent's tile. Rows without children keep the slot, so tiles line up. Click a tile or a title to open the row (hand cursor; Enter or Space on the title). Sorting reorders siblings only. Opened: <code>{opened || "none"}</code> · <code>expandedKeys</code>: <code>{JSON.stringify(exp)}</code></div>
     </Case>
+    <Case k={'rowOpen="row" — click anywhere on a row to open it · whole row shows the hand cursor'}>
+      <Table bordered tree selectable rowOpen="row" columns={DOCS} rows={TREE_ROWS} selected={rowSel} onToggle={rowToggle} expandedKeys={rowExp} onExpandChange={(r, open, keys) => setRowExp(keys)} onRowOpen={openWholeRow} onRowMore={(r) => setRowOpened("⋯ " + r.name)} />
+      <div className="note">Default <code>rowOpen="title"</code> opens on the tile and the title only (above). With <code>"row"</code> any blank part of a body row calls <code>onRowOpen(row, index, event)</code>. Clicks on the checkbox, the ⋯ menu, the tree arrow, buttons, inputs and links do their own job and never open the row; neither does a click that ends a text selection, nor the header or a resize handle. The tile and the title open the row once, not twice. Here a folder row expands or collapses (the app decides in <code>onRowOpen</code>), a document opens. Last: <code>{rowOpened || "none"}</code></div>
+    </Case>
     <Case k="sm · 50px rows — 28px tile, 8px to the text, 12px title, 8px padding"><Table size="sm" bordered columns={DOCS} rows={DOC_ROWS.slice(2, 4)} /></Case>
     <Case k="lg · 68px rows — 40px tile r10, 20px icon, 4px between lines, 14px padding"><Table size="lg" bordered columns={DOCS} rows={DOC_ROWS.slice(2, 4)} /></Case>
     <Case k="md · CJK — description 13/18, row 60px (lang=&quot;zh-CN&quot;) · labels: the sort and ⋯ tooltips in Chinese"><div lang="zh-CN"><Table bordered labels={ZH_LABELS} columns={[{ ...DOCS[0], label: "名称" }, { ...DOCS[1], label: "详情" }, { ...DOCS[2], label: "修改时间" }]} rows={DOC_ROWS_ZH} /></div></Case>

package/components/_cards/toast.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x744" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
+<!-- @dsCard group="Components" viewport="700x1087" name="Toast" subtitle="Placement · auto-dismiss · repeat count · Tones · with/without meta · live ToastStack demo" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -14,6 +14,9 @@ const { Toast, ToastStack, Button } = window.KeybricksDesignSystem_71231a;
 const { KBLive: Live } = window;
 function Sheet(){
   const [toasts,setToasts]=React.useState([]);
+  const [place,setPlace]=React.useState("top-center");
+  const [stack,setStack]=React.useState([]);
+  const push=(tone,title)=>setStack(s=>{const ex=s.find(t=>t.title===title);if(ex)return s.map(t=>t===ex?{...t,count:(t.count||1)+1}:t);return [...s,{id:Date.now()+Math.random(),tone,title}];});
   const notify=(tone,title,meta)=>{const id=Date.now()+Math.random();setToasts(s=>[...s,{id,tone,title,meta}]);setTimeout(()=>setToasts(s=>s.filter(t=>t.id!==id)),3200);};
   return <div>
     <div className="col">
@@ -28,6 +31,13 @@ function Sheet(){
       <Button variant="outline" onClick={()=>notify("danger","Task failed","Retry available")}>Trigger danger</Button>
     </div>
     <ToastStack toasts={toasts} onDismiss={(id)=>setToasts(s=>s.filter(t=>t.id!==id))}/>
+    <div style={{borderTop:"1px solid var(--border-subtle)",marginTop:20,paddingTop:16,display:"flex",flexDirection:"column",gap:10}}>
+      <span style={{fontSize:"var(--text-xs)",fontWeight:600,color:"var(--text-muted)"}}>ToastStack — placement · duration · repeat count</span>
+      <div style={{display:"flex",flexWrap:"wrap",gap:8}}>{["top-center","top-right","bottom-right","bottom-center"].map(p=><Button key={p} variant={p===place?"primary-soft":"outline"} onClick={()=>setPlace(p)}>{p}</Button>)}</div>
+      <div style={{display:"flex",flexWrap:"wrap",gap:8}}><Button onClick={()=>push("success","Saved")}>Saved</Button><Button variant="outline" onClick={()=>push("warning","Check the highlighted fields")}>Warning</Button><Button variant="outline" onClick={()=>push("danger","Sync failed")}>Error</Button></div>
+      <span style={{fontSize:"var(--text-xs)",lineHeight:"17px",color:"var(--text-secondary)",maxWidth:"64ch"}}><code>placement</code> sets the corner or edge (default <code>bottom-right</code>; the Vue Message service uses <code>top-center</code>). <code>duration={"{3000}"}</code> dismisses each toast after 3 s, paused while the pointer or focus is on it. Clicking the same message again shows <code>× 2</code> instead of stacking a copy, and restarts its timer. Toasts announce themselves to screen readers (danger and warning as alerts).</span>
+    </div>
+    <ToastStack toasts={stack} placement={place} duration={3000} onDismiss={(id)=>setStack(s=>s.filter(t=>t.id!==id))}/>
   </div>;
 }
 ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);

package/components/_cards/tree.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x3171" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
+<!-- @dsCard group="Components" viewport="700x3385" name="Tree" subtitle="Size tiers · rows without an icon · Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -178,7 +178,28 @@ function WithActions(){
   </div>;
 }
 
+const ROOTED = [{key:"docs",title:"Documents",icon:false,children:FILES}];
+
+function Tiers(){
+  return <div>
+    <span className="lbl">Size tiers — follows the region's data-size</span>
+    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
+      {["sm","md"].map(t=><div key={t} data-size={t}><div className="hint" style={{paddingBottom:4}}>{t==="sm"?"sm · 28px rows · 12px text (13px CJK)":"md · 32px rows · 14px text"}</div><Tree items={FILES} defaultExpanded={["finance"]} defaultActive="close"/></div>)}
+    </div>
+    <div className="hint">Row height <code>--control-h</code>, text <code>--control-text</code> / <code>--control-leading</code> / <code>--control-tracking</code>, glyph <code>--control-icon</code> − 1px. md is unchanged; lg rows are 40px.</div>
+  </div>;
+}
+
+function NoIconRoot(){
+  return <div>
+    <span className="lbl">icon: false — a root without a glyph</span>
+    <Tree items={ROOTED} defaultExpanded={["docs","finance"]} defaultActive="docs"/>
+    <div className="hint">The node draws no glyph and keeps no gap for one: its title follows the arrow. Works with <code>showIcon</code> on; every other row keeps its glyph.</div>
+  </div>;
+}
+
 function Sheet(){return <div className="g">
+  <Tiers/><NoIconRoot/>
   <Basic/><Checkable/>
   <Strict/><DisabledCase/>
   <Lines/><Multi/>

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>