@shwfed/config 2.3.27 → 2.3.29

package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-single/schema.js

@@ -0,0 +1,153 @@
+import { Effect, Schema } from "effect";
+import { getProperty } from "dot-prop";
+import { Locale } from "../../../../../share/locale.js";
+import { Expression, LocaleMarkdown } from "../../../../../share/expression.js";
+import {
+  CelRowAccess,
+  derivedRowField,
+  editableColumnFields,
+  editableHeader,
+  registerRowVariablesIfAbsent
+} from "../../../utils/shared.js";
+export const type = "com.shwfed.table.column.tree-combobox-single";
+export const compatibilityDate = "2026-05-28";
+export const metadata = {
+  name: "\u4E0B\u62C9\u6811\uFF08\u5355\u9009\uFF09",
+  icon: "fluent:tree-evergreen-20-regular"
+};
+const isListLike = (t) => t === "dyn" || t.startsWith("list") || t.startsWith("optional");
+const isKeyType = (t) => t === "string" || t === "number" || t === "dyn";
+function withRowAndNode(configure) {
+  return (env) => {
+    configure(env);
+    registerRowVariablesIfAbsent(env);
+    env.registerVariable("node", "dyn", { description: "`\u6570\u636E\u6E90` \u8FD4\u56DE\u7684\u8282\u70B9\uFF1B\u7531\u6811\u9010\u5C42\u5411\u4E0B\u8BFB\u53D6" });
+  };
+}
+export function schema(configure) {
+  const CelBool = CelRowAccess(configure, { resultType: "bool" });
+  const CelNodeKey = Expression({ configure: withRowAndNode(configure), resultType: isKeyType });
+  const CelNodeChildren = Expression({ configure: withRowAndNode(configure), resultType: isListLike });
+  const CelNodeBool = Expression({ configure: withRowAndNode(configure), resultType: "bool" });
+  const CelKeywords = Expression({ configure: withRowAndNode(configure), resultType: isListLike });
+  const NodeLocaleMd = LocaleMarkdown({ configure: withRowAndNode(configure) });
+  const dataSourceConfigure = (env) => {
+    configure(env);
+    registerRowVariablesIfAbsent(env);
+  };
+  const CelDataSourceRequest = Expression({
+    configure: dataSourceConfigure,
+    resultType: "HttpRequest"
+  });
+  const CelDataSourceData = Expression({
+    configure: (env) => {
+      dataSourceConfigure(env);
+      env.registerVariable("json", "optional<dyn>", {
+        description: "HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`"
+      });
+    },
+    resultType: (t) => t.startsWith("list") || t === "dyn" || t.startsWith("optional")
+  });
+  const TreeDataSource = Schema.Struct({
+    request: Schema.optional(CelDataSourceRequest).annotations({
+      title: "\u8BF7\u6C42",
+      description: "\u53EF\u9009\u7684 HTTP \u8BF7\u6C42\u8868\u8FBE\u5F0F\uFF1B\u672A\u914D\u7F6E\u65F6\u6570\u636E\u4ECE `data` \u8868\u8FBE\u5F0F\u4E2D\u8BFB\u53D6"
+    }),
+    data: CelDataSourceData.annotations({
+      title: "\u6570\u636E",
+      description: "\u8FD4\u56DE\u884C\u6570\u636E\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF1B\u914D\u7F6E\u4E86 `request` \u65F6\u53EF\u901A\u8FC7 `json` \u5F15\u7528\u54CD\u5E94\u4F53"
+    })
+  }).annotations({ title: "DataSource", description: "\u6570\u636E\u6E90\u914D\u7F6E" });
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    ...editableColumnFields(),
+    placeholder: Schema.optional(Locale.annotations({
+      title: "\u5360\u4F4D\u7B26",
+      description: "\u672A\u9009\u4E2D\u4EFB\u4F55\u9009\u9879\u65F6\u8F93\u5165\u6846\u4E2D\u7684\u5360\u4F4D\u6587\u672C"
+    })),
+    hidden: Schema.optional(CelBool.annotations({
+      title: "\u9690\u85CF\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u8BE5\u884C\u7684\u4E0B\u62C9\u6811\u4E0D\u6E32\u67D3\uFF08\u5176\u4F59\u884C\u4E0D\u53D7\u5F71\u54CD\uFF09"
+    })),
+    disabled: Schema.optional(CelBool.annotations({
+      title: "\u7981\u7528\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u4E0B\u62C9\u6811\u4ECD\u7136\u6E32\u67D3\u4F46\u4E0D\u53EF\u9009\u62E9"
+    })),
+    readonly: Schema.optional(CelBool.annotations({
+      title: "\u53EA\u8BFB\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u9009\u9879\u7684\u6807\u7B7E"
+    })),
+    derived: derivedRowField(configure, "dyn"),
+    dataSource: TreeDataSource.annotations({
+      title: "\u6570\u636E\u6E90",
+      description: "\u8FD4\u56DE\u5B8C\u6574\u6811\uFF08\u6839\u8282\u70B9\u5217\u8868\uFF09\u7684\u6570\u636E\u6E90\uFF1B\u901A\u8FC7 `\u8282\u70B9\u5B50\u7EA7` \u8868\u8FBE\u5F0F\u9010\u5C42\u5411\u4E0B\u8BFB\u53D6\uFF1B\u53EF\u8BBF\u95EE `row`\u3001`index`"
+    }),
+    nodeKey: CelNodeKey.annotations({
+      title: "\u8282\u70B9 ID",
+      description: "\u4E3A\u6BCF\u4E2A\u8282\u70B9\u8BA1\u7B97\u7A33\u5B9A\u552F\u4E00 ID \u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `node`\u3001`row`\u3001`index`\uFF1B\u8FD0\u884C\u65F6\u4EE5\u5B57\u7B26\u4E32\u5F62\u5F0F\u5B58\u50A8"
+    }),
+    nodeChildren: CelNodeChildren.annotations({
+      title: "\u8282\u70B9\u5B50\u7EA7",
+      description: "\u8FD4\u56DE\u5F53\u524D\u8282\u70B9\u5B50\u7EA7\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF1B\u8FD4\u56DE `none`/`null` \u6216\u7A7A\u6570\u7EC4\u65F6\u8BE5\u8282\u70B9\u89C6\u4E3A\u53F6\u5B50\uFF08\u7EC8\u7AEF\u8282\u70B9\uFF09"
+    }),
+    nodeLabel: NodeLocaleMd.annotations({
+      title: "\u8282\u70B9\u6807\u7B7E",
+      description: "\u8282\u70B9\u5C55\u793A\u7684\u672C\u5730\u5316\u6587\u672C\uFF0C\u652F\u6301 Markdown \u4E0E `{{ node.foo }}` / `{{ row.foo }}` \u63D2\u503C"
+    }),
+    nodeTooltip: Schema.optional(NodeLocaleMd.annotations({
+      title: "\u8282\u70B9\u63D0\u793A",
+      description: "\u9F20\u6807\u60AC\u505C\u5728\u8282\u70B9\u4E0A\u65F6\u5C55\u793A\u7684\u672C\u5730\u5316\u63D0\u793A"
+    })),
+    keywords: Schema.optional(CelKeywords.annotations({
+      title: "\u989D\u5916\u5173\u952E\u8BCD",
+      description: "\u8FD4\u56DE\u5B57\u7B26\u4E32\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `node`\u3001`row`\u3001`index`\uFF1B\u641C\u7D22\u65F6\u53EA\u8981 `\u8282\u70B9\u6807\u7B7E` \u6216 \u4EFB\u4E00\u5173\u952E\u8BCD \u5305\u542B\u67E5\u8BE2\u8BCD\uFF08\u4E0D\u533A\u5206\u5927\u5C0F\u5199\uFF09\u5373\u547D\u4E2D"
+    })),
+    nodeSelectable: Schema.optional(CelNodeBool.annotations({
+      title: "\u8282\u70B9\u53EF\u9009\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u8868\u793A\u8BE5\u8282\u70B9\u53EF\u88AB\u9009\u4E2D\uFF1B\u9ED8\u8BA4\u5168\u90E8\u53EF\u9009"
+    })),
+    expandAll: Schema.optionalWith(Schema.Boolean, { default: () => false }).annotations({
+      title: "\u9ED8\u8BA4\u5168\u90E8\u5C55\u5F00",
+      description: "\u5F00\u542F\u540E\u6302\u8F7D\u65F6\u5C55\u5F00\u6240\u6709\u975E\u53F6\u5B50\u8282\u70B9"
+    })
+  }).annotations({ title: "TreeComboboxSingleRenderer", description: "\u4E0B\u62C9\u6811\u5355\u9009\u6E32\u67D3\u5668\uFF08\u53EF\u7F16\u8F91\uFF09" });
+}
+export function defaults() {
+  return {
+    dataSource: { data: "[]" },
+    nodeKey: "string(node.id)",
+    nodeChildren: "has(node.children) ? node.children : null",
+    nodeLabel: [{ locale: "zh", message: "{{ node.label }}" }],
+    expandAll: false
+  };
+}
+export const migrateFrom = [
+  { type: "com.shwfed.table.column.tree-combobox-single", compatibilityDate: "2026-05-27" }
+];
+export const migrate = (prev) => Effect.try({
+  try: () => {
+    if (!prev || typeof prev !== "object") {
+      throw new Error("\u4E0B\u62C9\u6811\uFF08\u5355\u9009\uFF09\u8FC1\u79FB\u5931\u8D25\uFF1A\u539F\u503C\u4E0D\u662F\u5BF9\u8C61");
+    }
+    const { compatibilityDate: _omit, ...rest } = prev;
+    return { ...rest, type, compatibilityDate };
+  },
+  catch: (e) => e instanceof Error ? e : new Error(String(e))
+});
+export function toColumnDef(value, { getLocaleText }) {
+  return {
+    header: editableHeader(getLocaleText(value.title)),
+    accessorFn: (row) => {
+      if (!row || typeof row !== "object") return void 0;
+      return getProperty(row, value.binding);
+    },
+    enableSorting: value.enableSorting ?? false,
+    sortingFn: "basic",
+    size: value.size,
+    meta: {
+      grow: value.grow ?? false,
+      tooltip: getLocaleText(value.tooltip)
+    }
+  };
+}

package/dist/runtime/components/table/columns/2026-05-28/tree-combobox-shared.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Wrapping + adapter helpers shared by `tree-combobox-single` and
+ * `tree-combobox-multi`. The whole tree comes from `dataSource` in one
+ * shot, so wrapping is a pure walk over CEL-derived children: each raw
+ * node either has children (`branch`) or it doesn't (`terminal`).
+ */
+export type WrappedNode = {
+    readonly kind: 'branch';
+    readonly raw: unknown;
+    readonly key: string;
+    readonly children: WrappedNode[];
+} | {
+    readonly kind: 'terminal';
+    readonly raw: unknown;
+    readonly key: string;
+};
+export interface WrapStructureContext {
+    /** Stringified node id; one per raw node. Reuses `nodeKey` CEL. */
+    nodeKey: (raw: unknown) => string;
+    /**
+     * Normalised children array. `undefined`/`null`/empty all collapse to
+     * `undefined` here — the wrapping logic interprets that as
+     * "this node has no children" → `terminal`.
+     */
+    nodeChildren: (raw: unknown) => unknown[] | undefined;
+}
+export declare function wrapStructural(raw: unknown, ctx: WrapStructureContext): WrappedNode;
+export declare function wrapStructuralAll(raws: unknown[], ctx: WrapStructureContext): WrappedNode[];
+/** Synchronous `getChildren` adapter for ui/tree. */
+export declare function getWrappedChildren(w: WrappedNode): WrappedNode[] | undefined;
+/**
+ * Find the path from root to a node whose `key` matches. Returns `null`
+ * if the key isn't present in `roots`.
+ */
+export declare function findWrappedPath(roots: WrappedNode[], key: string): WrappedNode[] | null;

package/dist/runtime/components/table/columns/2026-05-28/tree-combobox-shared.js

@@ -0,0 +1,31 @@
+export function wrapStructural(raw, ctx) {
+  const kids = ctx.nodeChildren(raw);
+  if (!kids || kids.length === 0) {
+    return { kind: "terminal", raw, key: ctx.nodeKey(raw) };
+  }
+  return {
+    kind: "branch",
+    raw,
+    key: ctx.nodeKey(raw),
+    children: kids.map((c) => wrapStructural(c, ctx))
+  };
+}
+export function wrapStructuralAll(raws, ctx) {
+  return raws.map((r) => wrapStructural(r, ctx));
+}
+export function getWrappedChildren(w) {
+  return w.kind === "branch" ? w.children : void 0;
+}
+export function findWrappedPath(roots, key) {
+  const trail = [];
+  function walk(siblings) {
+    for (const n of siblings) {
+      trail.push(n);
+      if (n.key === key) return true;
+      if (n.kind === "branch" && n.children.length > 0 && walk(n.children)) return true;
+      trail.pop();
+    }
+    return false;
+  }
+  return walk(roots) ? trail.slice() : null;
+}

package/dist/runtime/components/table/config.vue

@@ -485,26 +485,17 @@ function getColumnDefaults(id, type, compatibilityDate) {
     case "com.shwfed.table.column.actions":
       return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], size: 200, groups: [], items: [] };
     case "com.shwfed.table.column.combobox-multi":
+    case "com.shwfed.table.column.combobox-single":
       return {
         id,
         type,
         compatibilityDate,
         title: [{ locale: "zh", message: "" }],
-        binding: "",
-        size: 200,
-        options: { kind: "static", items: [] }
-      };
-    case "com.shwfed.table.column.combobox-multi.remote":
-      return {
-        id,
-        type,
-        compatibilityDate,
-        title: [{ locale: "zh", message: "" }],
-        accessor: "",
         size: 200,
+        write: { kind: "binding", binding: "" },
         options: { kind: "static", items: [] }
       };
-    case "com.shwfed.table.column.combobox-single":
+    case "com.shwfed.table.column.tree-combobox-single":
       return {
         id,
         type,
@@ -512,17 +503,26 @@ function getColumnDefaults(id, type, compatibilityDate) {
         title: [{ locale: "zh", message: "" }],
         binding: "",
         size: 200,
-        options: { kind: "static", items: [] }
+        dataSource: { data: "[]" },
+        nodeKey: "string(node.id)",
+        nodeChildren: "has(node.children) ? node.children : null",
+        nodeLabel: [{ locale: "zh", message: "{{ node.label }}" }],
+        expandAll: false
       };
-    case "com.shwfed.table.column.combobox-single.remote":
+    case "com.shwfed.table.column.tree-combobox-multi":
       return {
         id,
         type,
         compatibilityDate,
         title: [{ locale: "zh", message: "" }],
-        accessor: "",
+        binding: "",
         size: 200,
-        options: { kind: "static", items: [] }
+        dataSource: { data: "[]" },
+        nodeKey: "string(node.id)",
+        nodeChildren: "has(node.children) ? node.children : null",
+        nodeLabel: [{ locale: "zh", message: "{{ node.label }}" }],
+        cascade: "independent",
+        expandAll: false
       };
     default:
       return { id, type, compatibilityDate };

package/dist/runtime/components/ui/command/CommandItem.d.vue.ts

@@ -2,6 +2,13 @@ import type { ListboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = ListboxItemProps & {
     class?: HTMLAttributes['class'];
+    /**
+     * Extra text folded into the value `Command` filters against, on top of the
+     * item's rendered label (its DOM `textContent`). Lets callers make an item
+     * match search terms — keywords / aliases / codes — that the label never
+     * shows. Pass a single pre-joined string; whitespace separates terms.
+     */
+    keywords?: string;
 };
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ui/command/CommandItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { reactiveOmit, useCurrentElement } from "@vueuse/core";
 import { injectListboxRootContext, ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { cn } from "../../../utils/cn";
 import { useCommand, useCommandGroup } from ".";
 const props = defineProps({
@@ -9,10 +9,11 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  keywords: { type: String, required: false }
 });
 const emits = defineEmits(["select"]);
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class", "keywords");
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 const id = useId();
 const { filterState, allItems, allGroups } = useCommand();
@@ -40,10 +41,15 @@ const isRender = computed(() => {
 });
 const itemRef = ref();
 const currentElement = useCurrentElement(itemRef);
+function indexedValue() {
+  const label = currentElement.value instanceof HTMLElement ? currentElement.value.textContent ?? "" : props.value?.toString() ?? "";
+  const kw = props.keywords?.trim();
+  return kw ? `${label} ${kw}` : label;
+}
 onMounted(() => {
   if (!(currentElement.value instanceof HTMLElement))
     return;
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""));
+  allItems.value.set(id, indexedValue());
   const groupId = groupContext?.id;
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
@@ -53,6 +59,9 @@ onMounted(() => {
     }
   }
 });
+watch(() => props.keywords, () => {
+  if (allItems.value.has(id)) allItems.value.set(id, indexedValue());
+});
 onUnmounted(() => {
   allItems.value.delete(id);
 });

package/dist/runtime/components/ui/command/CommandItem.vue.d.ts

@@ -2,6 +2,13 @@ import type { ListboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = ListboxItemProps & {
     class?: HTMLAttributes['class'];
+    /**
+     * Extra text folded into the value `Command` filters against, on top of the
+     * item's rendered label (its DOM `textContent`). Lets callers make an item
+     * match search terms — keywords / aliases / codes — that the label never
+     * shows. Pass a single pre-joined string; whitespace separates terms.
+     */
+    keywords?: string;
 };
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ui/tree/Tree.d.vue.ts

@@ -34,6 +34,7 @@ declare const __VLS_export: <Node>(__VLS_props: NonNullable<Awaited<typeof __VLS
         onMove?: ((payload: MoveEventPayload) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
         "onUpdate:roots"?: ((value: Node[]) => any) | undefined;
+        "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -50,6 +51,7 @@ declare const __VLS_export: <Node>(__VLS_props: NonNullable<Awaited<typeof __VLS
     emit: {
         (e: "update:modelValue", value: NodeKey | NodeKey[] | undefined): void;
         (e: "update:roots", value: Node[]): void;
+        (e: "update:expanded", value: NodeKey[]): void;
         (e: "move", payload: MoveEventPayload): void;
     };
 }>) => import("vue").VNode & {

package/dist/runtime/components/ui/tree/Tree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch } from "vue";
+import { computed, watch, watchEffect } from "vue";
 import { useTreeState } from "./useTreeState";
 import TreeNode from "./TreeNode.vue";
 defineOptions({ name: "UiTree" });
@@ -19,7 +19,7 @@ const props = defineProps({
   initialExpanded: { type: Array, required: false, default: () => [] },
   showFocusedRow: { type: Boolean, required: false, default: true }
 });
-const emit = defineEmits(["update:modelValue", "update:roots", "move"]);
+const emit = defineEmits(["update:modelValue", "update:roots", "update:expanded", "move"]);
 defineSlots();
 function readInitialSelection() {
   if (props.selectionMode === "none") return [];
@@ -57,6 +57,11 @@ const state = useTreeState({
   onSelectionChange
 });
 watch(rootsRef, () => state.syncRoots());
+watchEffect(() => {
+  const next = [];
+  for (const k of state.expanded) next.push(k);
+  emit("update:expanded", next);
+});
 watch(
   () => props.modelValue,
   (v) => {

package/dist/runtime/components/ui/tree/Tree.vue.d.ts

@@ -34,6 +34,7 @@ declare const __VLS_export: <Node>(__VLS_props: NonNullable<Awaited<typeof __VLS
         onMove?: ((payload: MoveEventPayload) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
         "onUpdate:roots"?: ((value: Node[]) => any) | undefined;
+        "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -50,6 +51,7 @@ declare const __VLS_export: <Node>(__VLS_props: NonNullable<Awaited<typeof __VLS
     emit: {
         (e: "update:modelValue", value: NodeKey | NodeKey[] | undefined): void;
         (e: "update:roots", value: Node[]): void;
+        (e: "update:expanded", value: NodeKey[]): void;
         (e: "move", payload: MoveEventPayload): void;
     };
 }>) => import("vue").VNode & {

package/dist/runtime/components/ui/tree/TreeNode.vue

@@ -2,7 +2,6 @@
 import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { cn } from "../../../utils/cn";
-import { Checkbox } from "../checkbox";
 defineOptions({ name: "UiTreeNode", inheritAttrs: false });
 const props = defineProps({
   node: { type: null, required: true },
@@ -77,10 +76,16 @@ function onToggleArrow() {
   if (!expandable.value) return;
   emit("toggle-expand", key.value);
 }
-function onToggleSelect() {
-  if (props.selectionMode === "none") return;
-  if (!userSelectable.value) return;
-  emit("toggle-select", key.value);
+function onRowClick() {
+  if (expandable.value && !userSelectable.value) {
+    emit("toggle-expand", key.value);
+    return;
+  }
+  if (props.selectionMode !== "none" && userSelectable.value) {
+    emit("toggle-select", key.value);
+    return;
+  }
+  emit("focus-row", key.value);
 }
 const ariaSelected = computed(() => {
   if (props.selectionMode === "none") return void 0;
@@ -109,11 +114,13 @@ const showChildren = computed(
     <div
       v-if="subtreeMatches"
       :class="cn(
-  'group flex items-center justify-between gap-2 rounded px-1 py-1 outline-none',
+  'group flex items-center justify-between gap-2 rounded px-1 py-1 outline-none transition-colors',
+  selectionMode !== 'none' && userSelectable && 'cursor-pointer hover:bg-zinc-100/70',
+  selectedFlag && !indeterminateFlag && 'bg-(--primary)/10 hover:bg-(--primary)/15',
   showFocusedRow && focusedKey === key && 'bg-(--primary)/10'
 )"
       tabindex="-1"
-      @click.stop="emit('focus-row', key)"
+      @click.stop="onRowClick"
     >
       <!-- LEFT: indent + arrow + selector + #node slot -->
       <div class="flex items-center gap-1 min-w-0 flex-1">
@@ -140,25 +147,8 @@ const showChildren = computed(
           class="inline-block size-4 shrink-0"
         />
 
-        <!-- selector: shadcn-styled Checkbox for multi; raw radio for single
-             (no standalone shadcn radio — RadioGroupItem requires a group). -->
-        <template v-if="selectionMode !== 'none' && userSelectable">
-          <Checkbox
-            v-if="selectionMode === 'multi'"
-            :model-value="indeterminateFlag ? 'indeterminate' : selectedFlag"
-            data-tree-toggle="checkbox"
-            @update:model-value="onToggleSelect"
-            @click.stop
-          />
-          <input
-            v-else
-            type="radio"
-            class="size-4 shrink-0 accent-(--primary) cursor-pointer"
-            :checked="selectedFlag"
-            data-tree-toggle="radio"
-            @click.stop="onToggleSelect"
-          >
-        </template>
+        <!-- selection is driven entirely by row click; selection state is
+             conveyed via the row background highlight. -->
 
         <div class="min-w-0 flex-1">
           <slot

package/dist/runtime/share/clipboard.d.ts

@@ -0,0 +1,26 @@
+export type ClipSurface = 'form' | 'block';
+export type ClipPayload = Readonly<{
+    surface: ClipSurface;
+    items: ReadonlyArray<unknown>;
+    placements?: Readonly<Record<string, unknown>>;
+}>;
+/**
+ * Deep-clone the fragment with every id (and every reference to a copied id)
+ * replaced by a fresh UUID. Deterministic within one call: equal old ids map
+ * to equal new ids, so cross-references between copied items stay intact.
+ */
+export declare function reidItems<T>(items: ReadonlyArray<T>): T[];
+/**
+ * Reid items and their placements through one shared map, so the placement keys
+ * (which are item ids) and the items' own `id`s land on the same fresh UUIDs.
+ */
+export declare function reidFragment<T>(items: ReadonlyArray<T>, placements?: Readonly<Record<string, unknown>>): {
+    items: T[];
+    placements?: Record<string, unknown>;
+};
+export declare function serializeClip(surface: ClipSurface, items: ReadonlyArray<unknown>, placements?: Readonly<Record<string, unknown>>): string;
+export declare function parseClip(text: string): ClipPayload | null;
+/** Write a fragment to the system clipboard. Resolves `false` on any failure. */
+export declare function writeClip(surface: ClipSurface, items: ReadonlyArray<unknown>, placements?: Readonly<Record<string, unknown>>): Promise<boolean>;
+/** Read a fragment from the system clipboard, or `null` if absent/unreadable. */
+export declare function readClip(): Promise<ClipPayload | null>;

package/dist/runtime/share/clipboard.js

@@ -0,0 +1,82 @@
+const CLIP_KEY = "__shwfed_clip";
+const CLIP_VERSION = "v1";
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function freshId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+function collectIds(node, into) {
+  if (Array.isArray(node)) {
+    for (const v of node) collectIds(v, into);
+    return;
+  }
+  if (node === null || typeof node !== "object") return;
+  for (const [k, v] of Object.entries(node)) {
+    if (k === "id" && typeof v === "string" && UUID_RE.test(v)) into.add(v);
+    collectIds(v, into);
+  }
+}
+function remap(node, map) {
+  if (Array.isArray(node)) return node.map((v) => remap(v, map));
+  if (node === null || typeof node !== "object") {
+    return typeof node === "string" ? map.get(node) ?? node : node;
+  }
+  const out = {};
+  for (const [k, v] of Object.entries(node)) {
+    out[map.get(k) ?? k] = remap(v, map);
+  }
+  return out;
+}
+function buildIdMap(items) {
+  const ids = /* @__PURE__ */ new Set();
+  collectIds(items, ids);
+  const map = /* @__PURE__ */ new Map();
+  for (const id of ids) map.set(id, freshId());
+  return map;
+}
+export function reidItems(items) {
+  return remap(items, buildIdMap(items));
+}
+export function reidFragment(items, placements) {
+  const map = buildIdMap(items);
+  return {
+    items: remap(items, map),
+    placements: placements ? remap(placements, map) : void 0
+  };
+}
+export function serializeClip(surface, items, placements) {
+  return JSON.stringify({ [CLIP_KEY]: CLIP_VERSION, surface, items, placements });
+}
+function isPlainObject(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+export function parseClip(text) {
+  try {
+    const o = JSON.parse(text);
+    if (!o || o[CLIP_KEY] !== CLIP_VERSION) return null;
+    if (o.surface !== "form" && o.surface !== "block") return null;
+    if (!Array.isArray(o.items)) return null;
+    const placements = isPlainObject(o.placements) ? o.placements : void 0;
+    return { surface: o.surface, items: o.items, placements };
+  } catch {
+    return null;
+  }
+}
+export async function writeClip(surface, items, placements) {
+  try {
+    await navigator.clipboard.writeText(serializeClip(surface, items, placements));
+    return true;
+  } catch {
+    return false;
+  }
+}
+export async function readClip() {
+  try {
+    return parseClip(await navigator.clipboard.readText());
+  } catch {
+    return null;
+  }
+}

package/dist/runtime/share/layout.d.ts

@@ -50,6 +50,10 @@ export type IdentifiableItem = Readonly<{
 export declare function validatePlacements(items: ReadonlyArray<IdentifiableItem>, layouts: ReadonlyArray<LayoutSetValue>, label: string): string | true;
 export declare function normalizeLayoutSet(ls: LayoutSetValue): LayoutSetValue;
 export declare function findFreePlacement(placements: Readonly<Record<string, PlacementValue>>, w: number, h: number): PlacementValue;
+export declare function placeGroupAt(existing: Readonly<Record<string, PlacementValue>>, group: Readonly<Record<string, PlacementValue>>, target: {
+    x: number;
+    y: number;
+}): Record<string, PlacementValue>;
 type AnySchema = Schema.Schema<any, any, never>;
 export declare function Slot(BlockSchemaUnion: AnySchema, configure: (env: Environment) => void): Schema.refine<{
     readonly blocks: readonly any[];

package/dist/runtime/share/layout.js

@@ -152,6 +152,41 @@ export function findFreePlacement(placements, w, h) {
   }
   return { area: [[1, 1], [1 + ww, 1 + hh]] };
 }
+export function placeGroupAt(existing, group, target) {
+  const entries = Object.entries(group);
+  if (entries.length === 0) return {};
+  let gx1 = Infinity;
+  let gy1 = Infinity;
+  let gx2 = -Infinity;
+  let gy2 = -Infinity;
+  for (const [, p] of entries) {
+    const [[ax, ay], [bx, by]] = p.area;
+    if (ax < gx1) gx1 = ax;
+    if (ay < gy1) gy1 = ay;
+    if (bx > gx2) gx2 = bx;
+    if (by > gy2) gy2 = by;
+  }
+  const gw = gx2 - gx1;
+  const gh = gy2 - gy1;
+  const tx = Math.round(target.x);
+  const ty0 = Math.round(target.y);
+  const others = Object.values(existing).map((p) => p.area);
+  const overlaps = (a, b) => a[0][0] < b[1][0] && a[1][0] > b[0][0] && a[0][1] < b[1][1] && a[1][1] > b[0][1];
+  let ty = ty0;
+  for (let y = ty0; y < ty0 + 1e3; y++) {
+    const box = [[tx, y], [tx + gw, y + gh]];
+    if (!others.some((o) => overlaps(box, o))) {
+      ty = y;
+      break;
+    }
+  }
+  const sx = tx - gx1;
+  const sy = ty - gy1;
+  return Object.fromEntries(entries.map(([id, p]) => {
+    const [[ax, ay], [bx, by]] = p.area;
+    return [id, { ...p, area: [[ax + sx, ay + sy], [bx + sx, by + sy]] }];
+  }));
+}
 export function Slot(BlockSchemaUnion, configure) {
   return Schema.Struct({
     blocks: Schema.Array(BlockSchemaUnion).annotations({