@shwfed/config 1.1.5 → 2.0.0

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

@@ -1,1549 +0,0 @@
-<script setup>
-import { computed, inject, onBeforeUnmount, provide, ref, watch } from "vue";
-import { Icon } from "@iconify/vue";
-import {
-  ActionSchemaFields,
-  ActionsConfig,
-  getStructFieldDescription,
-  getStructFieldTitle
-} from "./schema";
-import { Environment } from "../../vendor/cel-js/lib/index";
-import { provideCELContext } from "../../plugins/cel/context";
-import { BUTTONS, findButton } from "./utils/resolve";
-import { SIDEBAR_TAKEOVER_KEY } from "../sidebar-takeover";
-import { BREADCRUMB_EXTENSION_KEY } from "../config/breadcrumb-extension";
-import { ScrollArea } from "../ui/scroll-area";
-import { Field, FieldLabel } from "../ui/field";
-import { Textarea } from "../ui/textarea";
-import { ExpressionEditor } from "../ui/expression-editor";
-import { Switch } from "../ui/switch";
-import { Separator } from "../ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { Locale as LocaleField } from "../ui/locale";
-import { IconPicker } from "../ui/icon-picker";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupCombobox,
-  InputGroupNumberField
-} from "../ui/input-group";
-import { CommandGroup, CommandItem } from "../ui/command";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "../ui/select";
-import { getLocalizedText } from "../../share/locale";
-import { Markdown } from "../ui/markdown";
-import {
-  useTreeDnd
-} from "../../composables/useTreeDnd";
-defineOptions({ name: "ShwfedActionsConfig" });
-const props = defineProps({
-  configure: { type: Function, required: false }
-});
-const config = defineModel("modelValue", { type: null, ...{ required: true } });
-const configure = props.configure ?? (() => {
-});
-const actionsSchema = ActionsConfig(configure);
-const advertisedContext = (() => {
-  const probe = new Environment({ unlistedVariablesAreDyn: false });
-  const baseline = new Set(probe.getDefinitions().variables.map((v) => v.name));
-  configure(probe);
-  const out = {};
-  for (const v of probe.getDefinitions().variables) {
-    if (baseline.has(v.name)) continue;
-    out[v.name] = {
-      type: v.type,
-      label: v.name,
-      description: v.description ?? void 0,
-      value: void 0
-    };
-  }
-  return out;
-})();
-provideCELContext(advertisedContext);
-const {
-  ActionGroup: ActionGroupSchema,
-  ActionItem: ActionItemSchema,
-  DropdownAction: DropdownActionSchema,
-  DropdownActionItem: DropdownActionItemSchema
-} = ActionSchemaFields(configure);
-const groupFieldTitle = (f) => getStructFieldTitle(ActionGroupSchema, f) ?? f;
-const itemFieldTitle = (f) => getStructFieldTitle(ActionItemSchema, f) ?? f;
-const dropdownItemFieldTitle = (f) => getStructFieldTitle(DropdownActionItemSchema, f) ?? f;
-const subFieldTitle = (f) => getStructFieldTitle(DropdownActionSchema, f) ?? f;
-const generalFieldTitle = (f) => getStructFieldTitle(actionsSchema, f) ?? f;
-const groupFieldDescription = (f) => getStructFieldDescription(ActionGroupSchema, f);
-const itemFieldDescription = (f) => getStructFieldDescription(ActionItemSchema, f);
-const dropdownItemFieldDescription = (f) => getStructFieldDescription(DropdownActionItemSchema, f);
-const subFieldDescription = (f) => getStructFieldDescription(DropdownActionSchema, f);
-const generalFieldDescription = (f) => getStructFieldDescription(actionsSchema, f);
-function isDropdownItem(item) {
-  return "items" in item;
-}
-const GROUP_DRAG_KIND = "group";
-const ITEM_DRAG_KIND = "item";
-const SUBITEM_DRAG_KIND = "sub";
-const VARIANT_OPTIONS = [
-  { value: "default", label: "\u9ED8\u8BA4" },
-  { value: "primary", label: "\u4E3B\u8981" },
-  { value: "destructive", label: "\u5371\u9669" },
-  { value: "ghost", label: "\u900F\u660E" },
-  { value: "link", label: "\u94FE\u63A5" }
-];
-const SIZE_OPTIONS = [
-  { value: "default", label: "\u9ED8\u8BA4" },
-  { value: "sm", label: "\u5C0F" },
-  { value: "xs", label: "\u6781\u5C0F" }
-];
-const ACTION_PICKER_ENTRIES = (() => {
-  const byType = /* @__PURE__ */ new Map();
-  for (const a of BUTTONS) {
-    const prev = byType.get(a.type);
-    if (!prev || a.compatibilityDate > prev.compatibilityDate) {
-      byType.set(a.type, {
-        type: a.type,
-        compatibilityDate: a.compatibilityDate,
-        name: a.metadata.name,
-        icon: a.metadata.icon
-      });
-    }
-  }
-  return [...byType.values()].sort((a, b) => a.name.localeCompare(b.name, "zh"));
-})();
-const editingGroups = computed(
-  () => config.value.groups ?? []
-);
-const editingItems = computed(
-  () => config.value.items ?? []
-);
-function snapshot() {
-  return {
-    groups: [...config.value.groups ?? []],
-    items: [...config.value.items ?? []]
-  };
-}
-function commit(w) {
-  config.value = { ...config.value, groups: w.groups, items: w.items };
-}
-const editingSize = computed({
-  get: () => config.value.size ?? "default",
-  set: (next) => {
-    config.value = { ...config.value, size: next };
-  }
-});
-const editingGap = computed({
-  get: () => config.value.gap ?? 4,
-  set: (next) => {
-    config.value = { ...config.value, gap: next };
-  }
-});
-const editingStyle = computed({
-  get: () => config.value.style ?? "",
-  set: (next) => {
-    const cleaned = next;
-    if (cleaned.trim() === "") {
-      const { style: _drop, ...rest } = config.value;
-      config.value = rest;
-    } else {
-      config.value = { ...config.value, style: cleaned };
-    }
-  }
-});
-const selected = ref({ kind: "general" });
-function itemsOfGroup(groupId) {
-  return editingItems.value.filter((it) => it.groupId === groupId);
-}
-function itemLabel(item) {
-  const fallback = isDropdownItem(item) ? "\u672A\u547D\u540D\u4E0B\u62C9\u6309\u94AE" : "\u672A\u547D\u540D\u6309\u94AE";
-  return getLocalizedText(item.title, "zh") ?? fallback;
-}
-function subLabel(sub) {
-  return getLocalizedText(sub.title, "zh") ?? "\u672A\u547D\u540D\u6309\u94AE";
-}
-function composeGroupLabel(groupId) {
-  const items = itemsOfGroup(groupId);
-  if (items.length === 0) return "";
-  const first = itemLabel(items[0]);
-  if (items.length === 1) return first;
-  if (items.length === 2) return `${first}\u3001${itemLabel(items[1])}`;
-  return `${first} \u7B49 ${items.length} \u4E2A\u6309\u94AE`;
-}
-function findItem(id) {
-  return editingItems.value.find((it) => it.id === id) ?? null;
-}
-function findSub(id) {
-  for (const it of editingItems.value) {
-    if (!isDropdownItem(it)) continue;
-    const sub = it.items.find((s) => s.id === id);
-    if (sub) return { parent: it, sub };
-  }
-  return null;
-}
-function findGroup(id) {
-  return editingGroups.value.find((g) => g.id === id) ?? null;
-}
-const selectedGeneral = computed(() => selected.value?.kind === "general");
-const selectedGroup = computed(() => {
-  if (selected.value?.kind !== "group") return null;
-  return findGroup(selected.value.id);
-});
-const selectedActionItem = computed(() => {
-  if (selected.value?.kind !== "item") return null;
-  const it = findItem(selected.value.id);
-  if (!it || isDropdownItem(it)) return null;
-  return it;
-});
-const selectedDropdownItem = computed(() => {
-  if (selected.value?.kind !== "item") return null;
-  const it = findItem(selected.value.id);
-  if (!it || !isDropdownItem(it)) return null;
-  return it;
-});
-const selectedSubRef = computed(() => {
-  if (selected.value?.kind !== "sub") return null;
-  return findSub(selected.value.id)?.sub ?? null;
-});
-const hasSelection = computed(
-  () => selectedGeneral.value || selectedGroup.value !== null || selectedActionItem.value !== null || selectedDropdownItem.value !== null || selectedSubRef.value !== null
-);
-function setOptionalString(target, key, value) {
-  if (value.trim() === "") Reflect.deleteProperty(target, key);
-  else target[key] = value;
-}
-function setOptionalBoolean(target, key, value) {
-  if (!value) Reflect.deleteProperty(target, key);
-  else target[key] = true;
-}
-function setOptionalLocale(target, key, value) {
-  if (!value || value.length === 0 || value.every((m) => m.message.trim().length === 0)) {
-    Reflect.deleteProperty(target, key);
-  } else {
-    target[key] = value;
-  }
-}
-function emptyLocale() {
-  return [{ locale: "zh", message: "" }];
-}
-function getActionConfigComponent(action) {
-  return findButton(action.type, action.compatibilityDate)?.config;
-}
-function getButtonMetadataLabel(action) {
-  return findButton(action.type, action.compatibilityDate)?.metadata.name ?? action.type;
-}
-function patchSelectedGroup(mutate) {
-  const sel = selected.value;
-  if (sel?.kind !== "group") return;
-  const id = sel.id;
-  const w = snapshot();
-  let touched = false;
-  w.groups = w.groups.map((g) => {
-    if (g.id !== id) return g;
-    const next = { ...g };
-    mutate(next);
-    touched = true;
-    return next;
-  });
-  if (!touched) return;
-  commit(w);
-}
-function patchSelectedActionItem(mutate) {
-  const sel = selected.value;
-  if (sel?.kind !== "item") return;
-  const id = sel.id;
-  const w = snapshot();
-  let touched = false;
-  w.items = w.items.map((it) => {
-    if (it.id !== id || isDropdownItem(it)) return it;
-    const next = { ...it };
-    mutate(next);
-    touched = true;
-    return next;
-  });
-  if (!touched) return;
-  commit(w);
-}
-function patchSelectedDropdownItem(mutate) {
-  const sel = selected.value;
-  if (sel?.kind !== "item") return;
-  const id = sel.id;
-  const w = snapshot();
-  let touched = false;
-  w.items = w.items.map((it) => {
-    if (it.id !== id || !isDropdownItem(it)) return it;
-    const next = { ...it };
-    mutate(next);
-    touched = true;
-    return next;
-  });
-  if (!touched) return;
-  commit(w);
-}
-function patchSelectedSub(mutate) {
-  const sel = selected.value;
-  if (sel?.kind !== "sub") return;
-  const id = sel.id;
-  const w = snapshot();
-  let touched = false;
-  w.items = w.items.map((it) => {
-    if (!isDropdownItem(it)) return it;
-    if (!it.items.some((s) => s.id === id)) return it;
-    return {
-      ...it,
-      items: it.items.map((s) => {
-        if (s.id !== id) return s;
-        const next = { ...s };
-        mutate(next);
-        touched = true;
-        return next;
-      })
-    };
-  });
-  if (!touched) return;
-  commit(w);
-}
-function isDrillableAction(action) {
-  if (!action) return false;
-  return findButton(action.type, action.compatibilityDate)?.metadata.drillable === true;
-}
-const selectedDrillableAction = computed(() => {
-  const it = selectedActionItem.value;
-  if (it?.action && isDrillableAction(it.action)) return it.action;
-  const sub = selectedSubRef.value;
-  if (sub?.action && isDrillableAction(sub.action)) return sub.action;
-  return null;
-});
-const selectedDrillableTitle = computed(() => {
-  const drilled = selectedDrillableAction.value;
-  if (!drilled) return null;
-  const it = selectedActionItem.value;
-  if (it && it.action === drilled) return it.title;
-  const sub = selectedSubRef.value;
-  if (sub && sub.action === drilled) return sub.title;
-  return null;
-});
-const outerTakeover = inject(SIDEBAR_TAKEOVER_KEY, null);
-const outerTakeoverTarget = computed(() => outerTakeover?.target.value ?? null);
-const sidebarTakeoverTarget = ref(null);
-const drilledByAction = ref(false);
-provide(SIDEBAR_TAKEOVER_KEY, { target: sidebarTakeoverTarget, drilled: drilledByAction });
-const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
-if (breadcrumbExt) {
-  const crumb = breadcrumbExt.add();
-  watch(
-    [selectedDrillableAction, selectedDrillableTitle],
-    ([action, title]) => {
-      if (!action) {
-        crumb.label.value = null;
-        crumb.back.value = null;
-        return;
-      }
-      const fallback = findButton(action.type, action.compatibilityDate)?.metadata.name ?? action.type;
-      crumb.label.value = getLocalizedText(title ?? void 0, "zh") ?? fallback;
-      crumb.back.value = () => {
-        selected.value = null;
-      };
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => {
-    crumb.dispose();
-  });
-}
-function selectGeneral() {
-  selected.value = { kind: "general" };
-}
-function selectGroup(id) {
-  selected.value = { kind: "group", id };
-}
-function selectItem(id) {
-  selected.value = { kind: "item", id };
-}
-function selectSub(id) {
-  selected.value = { kind: "sub", id };
-}
-function isSourceDropdown(src) {
-  if (src.kind !== ITEM_DRAG_KIND) return false;
-  const it = editingItems.value.find((i) => i.id === src.id);
-  return !!it && isDropdownItem(it);
-}
-function findParentDropdownOfSub(items, subId) {
-  for (const it of items) {
-    if (isDropdownItem(it) && it.items.some((s) => s.id === subId)) return it;
-  }
-  return null;
-}
-function actionItemToSubItem(it) {
-  const out = {
-    id: it.id,
-    title: it.title
-  };
-  if (it.tooltip !== void 0) out.tooltip = it.tooltip;
-  if (it.icon !== void 0) out.icon = it.icon;
-  if (it.hidden !== void 0) out.hidden = it.hidden;
-  if (it.disabled !== void 0) out.disabled = it.disabled;
-  if (it.variant !== void 0) out.variant = it.variant;
-  if (it.action !== void 0) out.action = it.action;
-  return out;
-}
-function subItemToActionItem(sub, groupId) {
-  const out = {
-    id: sub.id,
-    groupId,
-    title: sub.title
-  };
-  const s = sub;
-  if (s.tooltip !== void 0) out.tooltip = s.tooltip;
-  if (s.icon !== void 0) out.icon = s.icon;
-  if (s.hidden !== void 0) out.hidden = s.hidden;
-  if (s.disabled !== void 0) out.disabled = s.disabled;
-  if (s.variant !== void 0) out.variant = s.variant;
-  if (s.action !== void 0) out.action = s.action;
-  return out;
-}
-function materializeAsSubItems(items, kind, id) {
-  if (kind === ITEM_DRAG_KIND) {
-    const it = items.find((i) => i.id === id);
-    if (!it || isDropdownItem(it)) return [];
-    return [actionItemToSubItem(it)];
-  }
-  if (kind === SUBITEM_DRAG_KIND) {
-    const parent = findParentDropdownOfSub(items, id);
-    const sub = parent?.items.find((s) => s.id === id);
-    return sub ? [{ ...sub }] : [];
-  }
-  return [];
-}
-function materializeAsTopLevel(items, kind, id, groupId) {
-  if (kind === ITEM_DRAG_KIND) {
-    const it = items.find((i) => i.id === id);
-    if (!it) return null;
-    return { ...it, groupId };
-  }
-  if (kind === SUBITEM_DRAG_KIND) {
-    const parent = findParentDropdownOfSub(items, id);
-    const sub = parent?.items.find((s) => s.id === id);
-    return sub ? subItemToActionItem(sub, groupId) : null;
-  }
-  return null;
-}
-function removeFromSource(w, kind, id) {
-  if (kind === ITEM_DRAG_KIND) {
-    w.items = w.items.filter((it) => it.id !== id);
-    pruneEmptyGroups(w);
-    return;
-  }
-  w.items = w.items.map((it) => {
-    if (!isDropdownItem(it)) return it;
-    if (!it.items.some((s) => s.id === id)) return it;
-    return { ...it, items: it.items.filter((s) => s.id !== id) };
-  });
-  pruneEmptyDropdowns(w);
-  pruneEmptyGroups(w);
-}
-function pruneEmptyGroups(w) {
-  const groupsWithItems = new Set(w.items.map((it) => it.groupId));
-  w.groups = w.groups.filter((g) => groupsWithItems.has(g.id));
-}
-function pruneEmptyDropdowns(w) {
-  w.items = w.items.filter((it) => !isDropdownItem(it) || it.items.length > 0);
-}
-function sortByGroupOrder(groups, items) {
-  const order = new Map(groups.map((g, i) => [g.id, i]));
-  return [...items].sort((a, b) => (order.get(a.groupId) ?? 0) - (order.get(b.groupId) ?? 0));
-}
-function dropGroupOnGroup(sourceId, targetId, edge) {
-  if (sourceId === targetId) return;
-  const w = snapshot();
-  const from = w.groups.findIndex((g) => g.id === sourceId);
-  const tgt = w.groups.findIndex((g) => g.id === targetId);
-  if (from < 0 || tgt < 0) return;
-  const [src] = w.groups.splice(from, 1);
-  let to = tgt > from ? tgt - 1 : tgt;
-  if (edge === "reorder-below") to += 1;
-  w.groups.splice(to, 0, src);
-  commit(w);
-}
-function dropAsChild(sourceKind, sourceId, targetItemId) {
-  if (sourceKind === GROUP_DRAG_KIND) return;
-  if (sourceId === targetItemId) return;
-  const w = snapshot();
-  const idx = w.items.findIndex((i) => i.id === targetItemId);
-  if (idx < 0) return;
-  const cur = w.items[idx];
-  if (!isDropdownItem(cur)) return;
-  if (sourceKind === SUBITEM_DRAG_KIND && cur.items.some((s) => s.id === sourceId)) return;
-  const subs = materializeAsSubItems(w.items, sourceKind, sourceId);
-  if (subs.length === 0) return;
-  removeFromSource(w, sourceKind, sourceId);
-  const afterIdx = w.items.findIndex((i) => i.id === targetItemId);
-  if (afterIdx < 0) return;
-  const target = w.items[afterIdx];
-  const updated = { ...target, items: [...target.items, ...subs] };
-  w.items = w.items.map((it, i) => i === afterIdx ? updated : it);
-  commit(w);
-}
-function dropAtTopLevel(sourceKind, sourceId, targetItemId, edge) {
-  if (sourceKind === GROUP_DRAG_KIND) return;
-  if (sourceId === targetItemId) return;
-  const w = snapshot();
-  const target = w.items.find((i) => i.id === targetItemId);
-  if (!target) return;
-  const targetGroupId = target.groupId;
-  const newItem = materializeAsTopLevel(w.items, sourceKind, sourceId, targetGroupId);
-  if (!newItem) return;
-  removeFromSource(w, sourceKind, sourceId);
-  const next = [];
-  let inserted = false;
-  for (const it of w.items) {
-    if (it.id === targetItemId) {
-      if (edge === "reorder-above") {
-        next.push(newItem, it);
-      } else {
-        next.push(it, newItem);
-      }
-      inserted = true;
-    } else {
-      next.push(it);
-    }
-  }
-  if (!inserted) next.push(newItem);
-  w.items = sortByGroupOrder(w.groups, next);
-  pruneEmptyGroups(w);
-  pruneEmptyDropdowns(w);
-  commit(w);
-}
-function dropAtSub(sourceKind, sourceId, targetSubId, edge) {
-  if (sourceKind === GROUP_DRAG_KIND) return;
-  if (sourceId === targetSubId) return;
-  const w = snapshot();
-  const parent = findParentDropdownOfSub(w.items, targetSubId);
-  if (!parent) return;
-  const parentId = parent.id;
-  const subs = materializeAsSubItems(w.items, sourceKind, sourceId);
-  if (subs.length === 0) return;
-  removeFromSource(w, sourceKind, sourceId);
-  const idx = w.items.findIndex((i) => i.id === parentId);
-  if (idx < 0) return;
-  const cur = w.items[idx];
-  if (!isDropdownItem(cur)) return;
-  const newItems = [];
-  let inserted = false;
-  for (const s of cur.items) {
-    if (s.id === targetSubId) {
-      if (edge === "reorder-above") newItems.push(...subs, s);
-      else newItems.push(s, ...subs);
-      inserted = true;
-    } else {
-      newItems.push(s);
-    }
-  }
-  if (!inserted) newItems.push(...subs);
-  const updated = { ...cur, items: newItems };
-  w.items = w.items.map((it, i) => i === idx ? updated : it);
-  pruneEmptyDropdowns(w);
-  pruneEmptyGroups(w);
-  commit(w);
-}
-function addButton(type, compatibilityDate) {
-  const groupId = crypto.randomUUID();
-  const itemId = crypto.randomUUID();
-  const newItem = {
-    id: itemId,
-    groupId,
-    title: emptyLocale(),
-    action: { type, compatibilityDate }
-  };
-  const w = snapshot();
-  w.groups = [...w.groups, { id: groupId }];
-  w.items = [...w.items, newItem];
-  commit(w);
-  selected.value = { kind: "item", id: itemId };
-}
-function promoteToNewGroup(sourceKind, sourceId, groupInsertIndex) {
-  if (sourceKind === GROUP_DRAG_KIND) return;
-  const w = snapshot();
-  const tmp = materializeAsTopLevel(w.items, sourceKind, sourceId, "");
-  if (!tmp) return;
-  const newGroup = { id: crypto.randomUUID() };
-  const newItem = { ...tmp, groupId: newGroup.id };
-  removeFromSource(w, sourceKind, sourceId);
-  const idx = Math.max(0, Math.min(groupInsertIndex, w.groups.length));
-  w.groups.splice(idx, 0, newGroup);
-  w.items = sortByGroupOrder(w.groups, [...w.items, newItem]);
-  commit(w);
-}
-function wrapActionItemInDropdown(itemId) {
-  const w = snapshot();
-  const idx = w.items.findIndex((i) => i.id === itemId);
-  if (idx < 0) return;
-  const cur = w.items[idx];
-  if (isDropdownItem(cur)) return;
-  const sub = actionItemToSubItem(cur);
-  const dropdown = {
-    id: crypto.randomUUID(),
-    groupId: cur.groupId,
-    title: emptyLocale(),
-    items: [sub]
-  };
-  w.items = w.items.map((it, i) => i === idx ? dropdown : it);
-  commit(w);
-  selected.value = { kind: "item", id: dropdown.id };
-}
-function resolveSelection() {
-  const s = selected.value;
-  if (!s || s.kind === "general") return;
-  if (s.kind === "group" && findGroup(s.id)) return;
-  if (s.kind === "item" && findItem(s.id)) return;
-  if (s.kind === "sub" && findSub(s.id)) return;
-  selected.value = { kind: "general" };
-}
-function deleteGroup(groupId) {
-  const w = snapshot();
-  w.items = w.items.filter((it) => it.groupId !== groupId);
-  w.groups = w.groups.filter((g) => g.id !== groupId);
-  commit(w);
-  resolveSelection();
-}
-function deleteItem(itemId) {
-  const w = snapshot();
-  w.items = w.items.filter((it) => it.id !== itemId);
-  pruneEmptyGroups(w);
-  commit(w);
-  resolveSelection();
-}
-function deleteSub(subId) {
-  const w = snapshot();
-  w.items = w.items.map((it) => {
-    if (!isDropdownItem(it)) return it;
-    if (!it.items.some((s) => s.id === subId)) return it;
-    return { ...it, items: it.items.filter((s) => s.id !== subId) };
-  });
-  pruneEmptyDropdowns(w);
-  pruneEmptyGroups(w);
-  commit(w);
-  resolveSelection();
-}
-function isKnownSourceKind(k) {
-  return k === GROUP_DRAG_KIND || k === ITEM_DRAG_KIND || k === SUBITEM_DRAG_KIND;
-}
-function onRowDrop({ source, target, instruction }) {
-  if (!isKnownSourceKind(source.kind)) return;
-  if (target.kind === "group") {
-    if (source.kind !== GROUP_DRAG_KIND) return;
-    if (instruction === "reorder-above" || instruction === "reorder-below") {
-      dropGroupOnGroup(source.id, target.id, instruction);
-    }
-    return;
-  }
-  if (target.kind === "item") {
-    if (source.kind === GROUP_DRAG_KIND) return;
-    if (instruction === "make-child") {
-      dropAsChild(source.kind, source.id, target.id);
-    } else if (instruction === "reorder-above" || instruction === "reorder-below") {
-      dropAtTopLevel(source.kind, source.id, target.id, instruction);
-    }
-    return;
-  }
-  if (target.kind === "sub") {
-    if (source.kind === GROUP_DRAG_KIND) return;
-    if (instruction === "reorder-above" || instruction === "reorder-below") {
-      dropAtSub(source.kind, source.id, target.id, instruction);
-    }
-  }
-}
-function onZoneDrop({ source, data }) {
-  if (!isKnownSourceKind(source.kind) || source.kind === GROUP_DRAG_KIND) return;
-  const insertIndex = data.insertIndex;
-  if (typeof insertIndex !== "number") return;
-  promoteToNewGroup(source.kind, source.id, insertIndex);
-}
-const dnd = useTreeDnd({ onRowDrop, onZoneDrop });
-const pickDragHandle = (el) => el.querySelector(".drag-handle");
-function groupRowConfig(groupId) {
-  return {
-    kind: GROUP_DRAG_KIND,
-    canDrop: (src) => src.kind === GROUP_DRAG_KIND,
-    blockInstructions: (src) => {
-      const block = ["make-child", "reparent"];
-      if (src.id === groupId) block.push("reorder-above", "reorder-below");
-      return block;
-    },
-    dragHandle: pickDragHandle
-  };
-}
-function itemRowConfig(itemId, groupId, isDropdown) {
-  return {
-    kind: ITEM_DRAG_KIND,
-    data: { groupId },
-    canDrop: (src) => {
-      if (src.kind === GROUP_DRAG_KIND) return false;
-      if (src.id === itemId) return false;
-      if (!isDropdown) return true;
-      if (src.kind === SUBITEM_DRAG_KIND) {
-        const parent = findParentDropdownOfSub(editingItems.value, src.id);
-        if (parent?.id === itemId) return false;
-      }
-      return true;
-    },
-    blockInstructions: (src) => {
-      const block = ["reparent"];
-      if (src.id === itemId) {
-        block.push("reorder-above", "reorder-below", "make-child");
-        return block;
-      }
-      if (!isDropdown) {
-        block.push("make-child");
-        return block;
-      }
-      block.push("reorder-above");
-      if (isSourceDropdown(src)) block.push("make-child");
-      return block;
-    },
-    resolveInstruction: isDropdown ? ({ input, element }) => {
-      const rect = element.getBoundingClientRect();
-      const relY = input.clientY - rect.top;
-      return relY < rect.height / 2 ? "make-child" : "reorder-below";
-    } : void 0,
-    dragHandle: pickDragHandle
-  };
-}
-function subRowConfig(subId, parentDropdownId) {
-  return {
-    kind: SUBITEM_DRAG_KIND,
-    data: { parentDropdownId },
-    canDrop: (src) => src.kind !== GROUP_DRAG_KIND && !isSourceDropdown(src),
-    blockInstructions: (src) => {
-      const block = ["make-child", "reparent"];
-      if (src.id === subId) {
-        block.push("reorder-above", "reorder-below");
-        return block;
-      }
-      if (src.kind === SUBITEM_DRAG_KIND) {
-        const parent = findParentDropdownOfSub(editingItems.value, src.id);
-        if (parent?.id === parentDropdownId) return block;
-      }
-      block.push("reorder-above", "reorder-below");
-      return block;
-    },
-    dragHandle: pickDragHandle
-  };
-}
-const newGroupZoneConfig = (insertIndex) => ({
-  data: { insertIndex },
-  canDrop: (src) => src.kind === ITEM_DRAG_KIND || src.kind === SUBITEM_DRAG_KIND
-});
-const newGroupZoneId = (insertIndex) => `new-group-${insertIndex}`;
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <div class="flex min-h-128 gap-6">
-      <!-- Sidebar: teleported into the outer host's left column when one is
-           provided (flattens nested sidebars while drilled through e.g.
-           modal-layout → form → actions field); otherwise renders inline
-           next to the main pane. `:disabled` keeps both modes from a single
-           source so DnD refs and reactivity stay intact.
-
-           While a drillable button (e.g. modal-layout) has drilled into one
-           of its child blocks, the child owns the entire pane — we drop our
-           column entirely so neither an empty teleport-target div nor the
-           288px wrapper leaks through as an empty left sidebar. -->
-      <Teleport
-        v-if="!drilledByAction"
-        :to="outerTakeoverTarget"
-        :disabled="!outerTakeoverTarget"
-      >
-        <div
-          :class="outerTakeoverTarget ? 'flex flex-1 flex-col gap-2 min-h-0' : 'flex gap-2 w-72 shrink-0 flex-col'"
-        >
-          <div
-            v-if="selectedDrillableAction"
-            ref="sidebarTakeoverTarget"
-            class="flex flex-1 flex-col min-h-0"
-          />
-          <template v-else>
-            <ScrollArea class="flex-1">
-              <div
-                class="row general-row pl-2"
-                :class="[
-  selected?.kind === 'general' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-                @click.stop="selectGeneral()"
-              >
-                <Icon
-                  icon="fluent:settings-20-regular"
-                  class="size-4 shrink-0"
-                />
-                <span class="flex-1 truncate">通用</span>
-              </div>
-
-              <div
-                :ref="dnd.zoneRef(newGroupZoneId(0), newGroupZoneConfig(0))"
-                class="new-group-zone"
-                :data-active="dnd.isZoneActive(newGroupZoneId(0)) ? 'true' : void 0"
-              >
-                <span class="new-group-zone-label">＋ 新按钮组</span>
-              </div>
-
-              <template
-                v-for="group in editingGroups"
-                :key="group.id"
-              >
-                <div class="space-y-1">
-                  <div
-                    :ref="dnd.rowRef(group.id, groupRowConfig(group.id))"
-                    class="row group group-row pl-2"
-                    :class="[
-  selected?.kind === 'group' && selected.id === group.id ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : ''
-]"
-                    :data-instruction="dnd.instructionFor(group.id) ?? void 0"
-                    @click.stop="selectGroup(group.id)"
-                  >
-                    <Icon
-                      icon="fluent:re-order-dots-vertical-20-regular"
-                      class="drag-handle size-4 shrink-0 cursor-grab text-zinc-400"
-                    />
-                    <span class="flex-1 truncate">
-                      {{ composeGroupLabel(group.id) }}
-                    </span>
-                    <Tooltip :delay-duration="180">
-                      <TooltipTrigger as-child>
-                        <button
-                          class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
-                          @click.stop="deleteGroup(group.id)"
-                        >
-                          <Icon
-                            icon="fluent:delete-20-regular"
-                            class="size-3.5"
-                          />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">
-                        删除该按钮组及其所有按钮
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-
-                  <div
-                    v-for="item in itemsOfGroup(group.id)"
-                    :key="item.id"
-                    :ref="dnd.rowRef(item.id, itemRowConfig(item.id, item.groupId, isDropdownItem(item)))"
-                    class="item-wrap space-y-1"
-                    :class="{ 'dropdown-wrap': isDropdownItem(item) }"
-                    :data-instruction="dnd.instructionFor(item.id) ?? void 0"
-                  >
-                    <div
-                      class="row group item-row pl-5"
-                      :class="[
-  selected?.kind === 'item' && selected.id === item.id ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-                      @click.stop="selectItem(item.id)"
-                    >
-                      <Icon
-                        icon="fluent:re-order-dots-vertical-20-regular"
-                        class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
-                      />
-                      <Icon
-                        v-if="item.icon"
-                        :icon="item.icon"
-                        class="size-4 shrink-0"
-                      />
-                      <span class="flex-1 truncate">{{ itemLabel(item) }}</span>
-                      <Tooltip
-                        v-if="!isDropdownItem(item)"
-                        :delay-duration="180"
-                      >
-                        <TooltipTrigger as-child>
-                          <button
-                            class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-zinc-600 group-hover:opacity-100"
-                            @click.stop="wrapActionItemInDropdown(item.id)"
-                          >
-                            <Icon
-                              icon="fluent:folder-add-20-regular"
-                              class="size-3.5"
-                            />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent side="right">
-                          将该按钮包裹为下拉按钮，之后可添加更多下拉项
-                        </TooltipContent>
-                      </Tooltip>
-                      <Tooltip :delay-duration="180">
-                        <TooltipTrigger as-child>
-                          <button
-                            class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
-                            @click.stop="deleteItem(item.id)"
-                          >
-                            <Icon
-                              icon="fluent:delete-20-regular"
-                              class="size-3.5"
-                            />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent side="right">
-                          {{ isDropdownItem(item) ? "\u5220\u9664\u8BE5\u4E0B\u62C9\u6309\u94AE\u53CA\u5176\u6240\u6709\u4E0B\u62C9\u9879" : "\u5220\u9664\u8BE5\u6309\u94AE" }}
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-
-                    <template v-if="isDropdownItem(item)">
-                      <div
-                        v-for="sub in item.items"
-                        :key="sub.id"
-                        :ref="dnd.rowRef(sub.id, subRowConfig(sub.id, item.id))"
-                        class="row group sub-item-row pl-10"
-                        :class="[
-  selected?.kind === 'sub' && selected.id === sub.id ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-500 hover:bg-zinc-50'
-]"
-                        :data-instruction="dnd.instructionFor(sub.id) ?? void 0"
-                        @click.stop="selectSub(sub.id)"
-                      >
-                        <Icon
-                          icon="fluent:re-order-dots-vertical-20-regular"
-                          class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
-                        />
-                        <Icon
-                          v-if="sub.icon"
-                          :icon="sub.icon"
-                          class="size-4 shrink-0"
-                        />
-                        <span class="flex-1 truncate">{{ subLabel(sub) }}</span>
-                        <Tooltip :delay-duration="180">
-                          <TooltipTrigger as-child>
-                            <button
-                              class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
-                              @click.stop="deleteSub(sub.id)"
-                            >
-                              <Icon
-                                icon="fluent:delete-20-regular"
-                                class="size-3.5"
-                              />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipContent side="right">
-                            从下拉菜单中移除该按钮
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </template>
-
-              <div
-                :ref="dnd.zoneRef(newGroupZoneId(editingGroups.length), newGroupZoneConfig(editingGroups.length))"
-                class="new-group-zone"
-                :data-active="dnd.isZoneActive(newGroupZoneId(editingGroups.length)) ? 'true' : void 0"
-              >
-                <span class="new-group-zone-label">＋ 新按钮组</span>
-              </div>
-            </ScrollArea>
-
-            <div class="border-t border-zinc-100 p-2">
-              <InputGroup>
-                <InputGroupAddon align="inline-start">
-                  <Icon icon="fluent:add-20-regular" />
-                </InputGroupAddon>
-                <InputGroupCombobox>
-                  <CommandGroup>
-                    <CommandItem
-                      v-for="entry in ACTION_PICKER_ENTRIES"
-                      :key="entry.type"
-                      :value="entry.type"
-                      @select="addButton(entry.type, entry.compatibilityDate)"
-                    >
-                      <Icon
-                        :icon="entry.icon"
-                        class="size-4 shrink-0"
-                      />
-                      <span class="flex-1">{{ entry.name }}</span>
-                      <span class="ml-auto text-xs tabular-nums text-zinc-400">{{ entry.compatibilityDate }}</span>
-                    </CommandItem>
-                  </CommandGroup>
-                </InputGroupCombobox>
-              </InputGroup>
-            </div>
-          </template>
-        </div>
-      </Teleport>
-
-      <div class="flex flex-1 flex-col">
-        <ScrollArea class="flex-1">
-          <div
-            v-if="!hasSelection"
-            class="flex min-h-112 items-center justify-center p-8 text-sm text-zinc-400"
-          >
-            选择一项以编辑
-          </div>
-
-          <div
-            v-else-if="selectedGeneral"
-            class="flex flex-col gap-4 p-6"
-          >
-            <slot name="general-extra" />
-
-            <div class="grid grid-cols-2 gap-4">
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="generalFieldDescription('size')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="generalFieldDescription('size')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ generalFieldTitle("size") }}
-                </FieldLabel>
-                <Select
-                  :model-value="editingSize"
-                  @update:model-value="(v) => editingSize = v"
-                >
-                  <SelectTrigger class="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem
-                      v-for="opt in SIZE_OPTIONS"
-                      :key="opt.value"
-                      :value="opt.value"
-                    >
-                      {{ opt.label }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="generalFieldDescription('gap')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="generalFieldDescription('gap')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ generalFieldTitle("gap") }}
-                </FieldLabel>
-                <InputGroup>
-                  <InputGroupNumberField
-                    :model-value="editingGap"
-                    :min="0"
-                    @update:model-value="(v) => editingGap = v"
-                  />
-                </InputGroup>
-              </Field>
-            </div>
-
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="generalFieldDescription('style')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="generalFieldDescription('style')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ generalFieldTitle("style") }}
-              </FieldLabel>
-              <Textarea
-                :model-value="editingStyle"
-                placeholder="CSS 样式字符串"
-                class="min-h-20 font-mono text-xs"
-                @update:model-value="(v) => editingStyle = String(v)"
-              />
-            </Field>
-          </div>
-
-          <div
-            v-else-if="selectedGroup"
-            class="flex flex-col gap-4 p-6"
-          >
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="groupFieldDescription('variant')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="groupFieldDescription('variant')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ groupFieldTitle("variant") }}
-              </FieldLabel>
-              <Select
-                :model-value="selectedGroup.variant ?? 'default'"
-                @update:model-value="(v) => patchSelectedGroup((g) => {
-  g.variant = v;
-})"
-              >
-                <SelectTrigger class="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    v-for="opt in VARIANT_OPTIONS"
-                    :key="opt.value"
-                    :value="opt.value"
-                  >
-                    {{ opt.label }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-          </div>
-
-          <div
-            v-else-if="selectedDropdownItem"
-            class="flex flex-col gap-4 p-6"
-          >
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="dropdownItemFieldDescription('title')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="dropdownItemFieldDescription('title')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ dropdownItemFieldTitle("title") }}
-              </FieldLabel>
-              <LocaleField
-                :model-value="selectedDropdownItem.title"
-                @update:model-value="(v) => patchSelectedDropdownItem((it) => {
-  it.title = v;
-})"
-              />
-            </Field>
-
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="dropdownItemFieldDescription('icon')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="dropdownItemFieldDescription('icon')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ dropdownItemFieldTitle("icon") }}
-              </FieldLabel>
-              <IconPicker
-                :model-value="selectedDropdownItem.icon ?? ''"
-                @update:model-value="(v) => patchSelectedDropdownItem((it) => setOptionalString(it, 'icon', v))"
-              />
-            </Field>
-
-            <p class="text-xs text-zinc-400">
-              下拉按钮的下拉项以独立行的形式编辑，选中任意下拉项即可修改其属性。
-            </p>
-          </div>
-
-          <div
-            v-else-if="selectedActionItem"
-            :class="drilledByAction && isDrillableAction(selectedActionItem.action) ? 'flex flex-col' : 'flex flex-col gap-4 p-6'"
-          >
-            <template v-if="!(drilledByAction && isDrillableAction(selectedActionItem.action))">
-              <div class="grid grid-cols-2 gap-4">
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="itemFieldDescription('title')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="itemFieldDescription('title')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ itemFieldTitle("title") }}
-                  </FieldLabel>
-                  <LocaleField
-                    :model-value="selectedActionItem.title"
-                    @update:model-value="(v) => patchSelectedActionItem((it) => {
-  it.title = v;
-})"
-                  />
-                </Field>
-
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="itemFieldDescription('tooltip')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="itemFieldDescription('tooltip')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ itemFieldTitle("tooltip") }}
-                  </FieldLabel>
-                  <LocaleField
-                    markdown
-                    :model-value="selectedActionItem.tooltip ?? emptyLocale()"
-                    @update:model-value="(v) => patchSelectedActionItem((it) => setOptionalLocale(it, 'tooltip', v))"
-                  />
-                </Field>
-              </div>
-
-              <div class="grid grid-cols-2 gap-4">
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="itemFieldDescription('hidden')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="itemFieldDescription('hidden')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ itemFieldTitle("hidden") }}
-                  </FieldLabel>
-                  <ExpressionEditor
-                    :model-value="selectedActionItem.hidden ?? ''"
-                    placeholder="CEL 表达式，返回 true 时隐藏"
-                    result-type="bool"
-                    class="min-h-10"
-                    @update:model-value="(v) => patchSelectedActionItem((it) => setOptionalString(it, 'hidden', v))"
-                  />
-                </Field>
-
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="itemFieldDescription('disabled')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="itemFieldDescription('disabled')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ itemFieldTitle("disabled") }}
-                  </FieldLabel>
-                  <ExpressionEditor
-                    :model-value="selectedActionItem.disabled ?? ''"
-                    placeholder="CEL 表达式，返回 true 时禁用"
-                    result-type="bool"
-                    class="min-h-10"
-                    @update:model-value="(v) => patchSelectedActionItem((it) => setOptionalString(it, 'disabled', v))"
-                  />
-                </Field>
-              </div>
-
-              <div class="flex items-end gap-4">
-                <Field
-                  orientation="vertical"
-                  class="w-1/2"
-                >
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="itemFieldDescription('variant')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="itemFieldDescription('variant')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ itemFieldTitle("variant") }}
-                  </FieldLabel>
-                  <Select
-                    :model-value="selectedActionItem.variant ?? 'default'"
-                    @update:model-value="(v) => patchSelectedActionItem((it) => {
-  it.variant = v;
-})"
-                  >
-                    <SelectTrigger class="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem
-                        v-for="opt in VARIANT_OPTIONS"
-                        :key="opt.value"
-                        :value="opt.value"
-                      >
-                        {{ opt.label }}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <div class="flex w-1/2 items-end gap-4">
-                  <Field
-                    orientation="vertical"
-                    class="flex-1"
-                  >
-                    <FieldLabel class="text-xs text-zinc-500">
-                      <template
-                        v-if="itemFieldDescription('icon')"
-                        #tooltip
-                      >
-                        <Markdown
-                          :source="itemFieldDescription('icon')"
-                          block
-                          class="prose prose-sm prose-zinc"
-                        />
-                      </template>
-                      {{ itemFieldTitle("icon") }}
-                    </FieldLabel>
-                    <IconPicker
-                      :model-value="selectedActionItem.icon ?? ''"
-                      @update:model-value="(v) => patchSelectedActionItem((it) => setOptionalString(it, 'icon', v))"
-                    />
-                  </Field>
-                  <Field
-                    orientation="horizontal"
-                    class="h-9 w-auto gap-2"
-                  >
-                    <Switch
-                      :model-value="selectedActionItem.hideTitle ?? false"
-                      @update:model-value="(v) => patchSelectedActionItem((it) => setOptionalBoolean(it, 'hideTitle', v))"
-                    />
-                    <FieldLabel class="text-sm text-zinc-600">
-                      <template
-                        v-if="itemFieldDescription('hideTitle')"
-                        #tooltip
-                      >
-                        <Markdown
-                          :source="itemFieldDescription('hideTitle')"
-                          block
-                          class="prose prose-sm prose-zinc"
-                        />
-                      </template>
-                      {{ itemFieldTitle("hideTitle") }}
-                    </FieldLabel>
-                  </Field>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="selectedActionItem.action">
-              <template v-if="!isDrillableAction(selectedActionItem.action)">
-                <Separator />
-
-                <div class="text-xs text-zinc-400">
-                  {{ getButtonMetadataLabel(selectedActionItem.action) }}
-                </div>
-              </template>
-
-              <component
-                :is="getActionConfigComponent(selectedActionItem.action)"
-                v-if="getActionConfigComponent(selectedActionItem.action)"
-                :model-value="selectedActionItem.action"
-                :configure="configure"
-                @update:model-value="(v) => patchSelectedActionItem((it) => {
-  it.action = v;
-})"
-              />
-            </template>
-          </div>
-
-          <div
-            v-else-if="selectedSubRef"
-            :class="drilledByAction && isDrillableAction(selectedSubRef.action) ? 'flex flex-col' : 'flex flex-col gap-4 p-6'"
-          >
-            <template v-if="!(drilledByAction && isDrillableAction(selectedSubRef.action))">
-              <div class="grid grid-cols-2 gap-4">
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="subFieldDescription('title')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="subFieldDescription('title')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ subFieldTitle("title") }}
-                  </FieldLabel>
-                  <LocaleField
-                    :model-value="selectedSubRef.title"
-                    @update:model-value="(v) => patchSelectedSub((s) => {
-  s.title = v;
-})"
-                  />
-                </Field>
-
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="subFieldDescription('tooltip')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="subFieldDescription('tooltip')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ subFieldTitle("tooltip") }}
-                  </FieldLabel>
-                  <LocaleField
-                    markdown
-                    :model-value="selectedSubRef.tooltip ?? emptyLocale()"
-                    @update:model-value="(v) => patchSelectedSub((s) => setOptionalLocale(s, 'tooltip', v))"
-                  />
-                </Field>
-              </div>
-
-              <div class="grid grid-cols-2 gap-4">
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="subFieldDescription('hidden')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="subFieldDescription('hidden')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ subFieldTitle("hidden") }}
-                  </FieldLabel>
-                  <ExpressionEditor
-                    :model-value="selectedSubRef.hidden ?? ''"
-                    placeholder="CEL 表达式，返回 true 时隐藏"
-                    result-type="bool"
-                    class="min-h-10"
-                    @update:model-value="(v) => patchSelectedSub((s) => setOptionalString(s, 'hidden', v))"
-                  />
-                </Field>
-
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="subFieldDescription('disabled')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="subFieldDescription('disabled')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ subFieldTitle("disabled") }}
-                  </FieldLabel>
-                  <ExpressionEditor
-                    :model-value="selectedSubRef.disabled ?? ''"
-                    placeholder="CEL 表达式，返回 true 时禁用"
-                    result-type="bool"
-                    class="min-h-10"
-                    @update:model-value="(v) => patchSelectedSub((s) => setOptionalString(s, 'disabled', v))"
-                  />
-                </Field>
-              </div>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="subFieldDescription('icon')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="subFieldDescription('icon')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ subFieldTitle("icon") }}
-                </FieldLabel>
-                <IconPicker
-                  :model-value="selectedSubRef.icon ?? ''"
-                  @update:model-value="(v) => patchSelectedSub((s) => setOptionalString(s, 'icon', v))"
-                />
-              </Field>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="subFieldDescription('variant')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="subFieldDescription('variant')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ subFieldTitle("variant") }}
-                </FieldLabel>
-                <Select
-                  :model-value="selectedSubRef.variant ?? 'default'"
-                  @update:model-value="(v) => patchSelectedSub((s) => {
-  s.variant = v;
-})"
-                >
-                  <SelectTrigger class="w-1/2">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem
-                      v-for="opt in VARIANT_OPTIONS"
-                      :key="opt.value"
-                      :value="opt.value"
-                    >
-                      {{ opt.label }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-            </template>
-
-            <template v-if="selectedSubRef.action">
-              <template v-if="!isDrillableAction(selectedSubRef.action)">
-                <Separator />
-
-                <div class="text-xs text-zinc-400">
-                  {{ getButtonMetadataLabel(selectedSubRef.action) }}
-                </div>
-              </template>
-
-              <component
-                :is="getActionConfigComponent(selectedSubRef.action)"
-                v-if="getActionConfigComponent(selectedSubRef.action)"
-                :model-value="selectedSubRef.action"
-                :configure="configure"
-                @update:model-value="(v) => patchSelectedSub((s) => {
-  s.action = v;
-})"
-              />
-            </template>
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.row{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;font-size:.875rem;gap:.375rem;padding-block:.375rem;padding-right:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-row{color:#3f3f46;font-weight:500}.group-row:hover{background:#fafafa}.general-row{cursor:pointer;font-weight:500}[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:.5rem;pointer-events:none;position:absolute;right:.5rem;z-index:1}[data-instruction=reorder-above]:before{top:-1px}[data-instruction=reorder-below]:after{bottom:-1px}.item-wrap{position:relative}.dropdown-wrap[data-instruction=make-child]{background:color-mix(in srgb,var(--primary,#2563eb) 12%,#fff);border-radius:.25rem;outline:1px dashed var(--primary,#2563eb);outline-offset:-2px}.new-group-zone{align-items:center;border-radius:.25rem;color:transparent;display:flex;font-size:.75rem;height:.5rem;justify-content:center;margin:.125rem 0;pointer-events:auto;transition:height .12s ease,color .12s ease,background-color .12s ease}.new-group-zone[data-active=true]{background-color:color-mix(in srgb,var(--primary,#2563eb) 8%,#fff);color:var(--primary,#2563eb);height:1.5rem}.new-group-zone-label{pointer-events:none}
-</style>