@shwfed/nuxt 0.7.9 → 0.7.11

package/dist/runtime/components/ui/table-configurator/TableConfiguratorDialog.vue

@@ -0,0 +1,2719 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { Icon } from "@iconify/vue";
+import z from "zod";
+import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useTableRenderers } from "../../../composables/useTableRenderers";
+import { dotPropC, expressionC, getLocalizedText, hasVisibleLocaleValue } from "../../../utils/coders";
+import { cn } from "../../../utils/cn";
+import ExpressionEditor from "../expression-editor/ExpressionEditor.vue";
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../dialog";
+import { Input } from "../input";
+import { InputGroup, InputGroupAddon, InputGroupNumberField } from "../input-group";
+import Locale from "../locale/Locale.vue";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+import { NumberField, NumberFieldInput } from "../number-field";
+import { Switch } from "../switch";
+import { Textarea } from "../textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { Toggle } from "../toggle";
+import {
+  getColumnTechnicalKey,
+  normalizePaginationPageSizes,
+  resolvePaginationPageSize,
+  TableConfigC,
+  TableConfigCellStylesC,
+  TableConfigEnableMultiRowSelectionC,
+  TableConfigEnableRowSelectionC,
+  TableConfigGetRowIdC,
+  TableConfigGetSubRowsC
+} from "../table/schema";
+import {
+  buildTableConfiguratorColumnTree,
+  createTableConfiguratorDraftColumnNode,
+  flattenTableConfiguratorColumnTree,
+  getTableConfiguratorColumnAncestorItemIds,
+  getTableConfiguratorColumnDescendantItemIds,
+  getTableConfiguratorColumnNode,
+  insertTableConfiguratorRootColumnNode,
+  materializeTableConfiguratorColumnTree,
+  moveTableConfiguratorColumnNodeAfterItem,
+  moveTableConfiguratorColumnNodeToParent,
+  moveTableConfiguratorColumnSibling,
+  removeTableConfiguratorColumnSubtree,
+  updateTableConfiguratorColumnNode
+} from "./menu";
+const GENERATED_COLUMN_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
+const TableConfiguratorColumnAccessorReadC = expressionC(/.+/, { row: "dyn", index: "int" });
+const TableConfiguratorColumnAccessorWriteC = z.string().trim().refine((value) => value.length > 0, { error: "\u5199\u5165\u8868\u8FBE\u5F0F\u4E0D\u80FD\u4E3A\u7A7A" });
+const TOOLTIP_EXPRESSION_EXAMPLE = "{{ expression }}";
+const props = defineProps({
+  config: { type: Object, required: true }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { $toast } = useNuxtApp();
+const { t, locale } = useI18n();
+const { getTableRenderer, listTableRenderers, resolveTableRenderer } = useTableRenderers();
+const search = ref("");
+const childSearch = ref("");
+const selectedItemId = ref("general");
+const draftBaseConfig = ref({ columns: [] });
+const draftColumnTree = ref(buildTableConfiguratorColumnTree([]));
+const draftGetRowId = ref();
+const draftGetSubRows = ref();
+const draftEnableRowSelection = ref();
+const draftEnableMultiRowSelection = ref();
+const draftCellStyles = ref();
+const draftPaginationLeft = ref();
+const draftPaginationRight = ref();
+const draftPageSize = ref();
+const draftPaginationPageSizes = ref([]);
+const leftPinnedSortableListRef = ref(null);
+const leftPinnedSortableItemIds = ref([]);
+const centerSortableListRef = ref(null);
+const centerSortableItemIds = ref([]);
+const rightPinnedSortableListRef = ref(null);
+const rightPinnedSortableItemIds = ref([]);
+const leftPinnedRootItemIds = ref([]);
+const centerRootItemIds = ref([]);
+const rightPinnedRootItemIds = ref([]);
+const paginationPageSizesSortableListRef = ref(null);
+const paginationPageSizesSortableItemIds = ref([]);
+const selectedChildSortableListRef = ref(null);
+const selectedChildSortableItemIds = ref([]);
+const getRowIdEditor = ref(null);
+const getSubRowsEditor = ref(null);
+const enableRowSelectionEditor = ref(null);
+const enableMultiRowSelectionEditor = ref(null);
+const cellStylesEditor = ref(null);
+const accessorPathEditor = ref(null);
+const accessorReadEditor = ref(null);
+const accessorWriteEditor = ref(null);
+const selectedRendererConfigRef = ref(null);
+const selectedColumnAccessorMode = ref("path");
+const generalItem = computed(() => ({
+  id: "general",
+  label: t("general")
+}));
+const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
+const normalizedChildSearch = computed(() => childSearch.value.trim().toLocaleLowerCase());
+const selectedColumnNode = computed(() => {
+  if (selectedItemId.value === "general") {
+    return void 0;
+  }
+  return getTableConfiguratorColumnNode(draftColumnTree.value, selectedItemId.value);
+});
+const selectedColumn = computed(() => selectedColumnNode.value?.column);
+const selectedColumnTechnicalKey = computed(() => selectedColumn.value ? getColumnTechnicalKey(selectedColumn.value) : void 0);
+const selectedColumnAncestorItemIds = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return getTableConfiguratorColumnAncestorItemIds(draftColumnTree.value, node.itemId);
+});
+const selectedColumnDescendantItemIds = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return getTableConfiguratorColumnDescendantItemIds(draftColumnTree.value, node.itemId);
+});
+function looksLikeGeneratedColumnId(value) {
+  if (!value) {
+    return false;
+  }
+  return GENERATED_COLUMN_ID_RE.test(value);
+}
+function getColumnSearchMeta(column, hasChildren) {
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  }
+  if (column.accessor) {
+    return column.accessor.read;
+  }
+  if (column.id && (hasChildren || !looksLikeGeneratedColumnId(column.id))) {
+    return column.id;
+  }
+  return void 0;
+}
+function createListItem(itemId, depth) {
+  const node = getTableConfiguratorColumnNode(draftColumnTree.value, itemId);
+  if (!node) {
+    return void 0;
+  }
+  const hasChildren = node.childItemIds.length > 0;
+  const searchMeta = getColumnSearchMeta(node.column, hasChildren);
+  return {
+    itemId,
+    label: getLocalizedText(node.column.title, locale.value) ?? searchMeta ?? t("untitled-column"),
+    searchMeta,
+    depth,
+    hasChildren,
+    column: node.column
+  };
+}
+const columnListItems = computed(() => flattenTableConfiguratorColumnTree(draftColumnTree.value).flatMap((item) => {
+  const listItem = createListItem(item.itemId, item.depth);
+  return listItem ? [listItem] : [];
+}));
+const filteredColumnItems = computed(() => {
+  if (!normalizedSearch.value) {
+    return columnListItems.value;
+  }
+  return columnListItems.value.filter((item) => matchesSearch(item, normalizedSearch.value));
+});
+const selectedColumnItem = computed(() => columnListItems.value.find((item) => item.itemId === selectedItemId.value));
+const selectedItemLabel = computed(() => selectedColumnItem.value?.label ?? generalItem.value.label);
+const selectedColumnLocaleValue = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return void 0;
+  }
+  if (node.column.title) {
+    return node.column.title;
+  }
+  const fallbackLabel = getColumnSearchMeta(node.column, node.childItemIds.length > 0);
+  if (!fallbackLabel) {
+    return void 0;
+  }
+  return [
+    {
+      locale: "zh",
+      message: fallbackLabel
+    }
+  ];
+});
+const selectedColumnTooltipValue = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return void 0;
+  }
+  return node.column.tooltip;
+});
+const selectedColumnHasChildren = computed(() => (selectedColumnNode.value?.childItemIds.length ?? 0) > 0);
+const rendererOptions = computed(() => listTableRenderers().map((renderer) => ({
+  id: renderer.id,
+  label: getTableConfiguratorRendererLabel(renderer.id)
+})));
+function getTableConfiguratorRendererLabel(rendererId) {
+  const segments = rendererId.split(".");
+  const leaf = segments.at(-1) ?? rendererId;
+  if (locale.value.startsWith("ja")) {
+    const labels2 = {
+      text: "\u30C6\u30AD\u30B9\u30C8",
+      selection: "\u9078\u629E",
+      expand: "\u5C55\u958B",
+      money: "\u91D1\u984D",
+      date: "\u65E5\u4ED8",
+      markdown: "Markdown"
+    };
+    const label2 = labels2[leaf];
+    if (label2) {
+      return label2;
+    }
+  }
+  if (locale.value.startsWith("en")) {
+    const labels2 = {
+      text: "Text",
+      selection: "Selection",
+      expand: "Expand",
+      money: "Money",
+      date: "Date",
+      markdown: "Markdown"
+    };
+    const label2 = labels2[leaf];
+    if (label2) {
+      return label2;
+    }
+  }
+  const labels = {
+    text: "\u6587\u672C",
+    selection: "\u9009\u62E9",
+    expand: "\u5C55\u5F00",
+    money: "\u91D1\u989D",
+    date: "\u65E5\u671F",
+    markdown: "Markdown"
+  };
+  const label = labels[leaf];
+  if (label) {
+    return label;
+  }
+  return `${leaf.slice(0, 1).toLocaleUpperCase()}${leaf.slice(1)}`;
+}
+function getColumnRendererId(column) {
+  if (!column) {
+    return "table.renderer.text";
+  }
+  if (typeof column.renderer === "string") {
+    return column.renderer;
+  }
+  return column.renderer?.id ?? "table.renderer.text";
+}
+function getColumnRendererProps(column) {
+  if (!column || !column.renderer || typeof column.renderer === "string") {
+    return void 0;
+  }
+  return column.renderer.props;
+}
+const selectedColumnRendererId = computed(() => getColumnRendererId(selectedColumn.value));
+const selectedColumnRendererModel = computed({
+  get() {
+    return selectedColumnRendererId.value;
+  },
+  set(value) {
+    updateSelectedColumnRendererId(value);
+  }
+});
+const selectedColumnRenderer = computed(() => resolveTableRenderer(selectedColumnRendererId.value));
+const selectedColumnRendererConfigComponent = computed(() => selectedColumnRenderer.value.config);
+const selectedColumnRendererOptions = computed(() => {
+  const renderer = selectedColumnRenderer.value;
+  try {
+    return renderer.parseOptions(getColumnRendererProps(selectedColumn.value));
+  } catch (e) {
+    console.error(e);
+    return renderer.parseOptions(void 0);
+  }
+});
+function isDotPropPath(value) {
+  if (!value) {
+    return false;
+  }
+  return dotPropC.safeParse(value).success;
+}
+async function copySelectedColumnId() {
+  if (!selectedColumnTechnicalKey.value) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(selectedColumnTechnicalKey.value);
+  } catch (e) {
+    console.error(e);
+  }
+}
+function getColumnAccessorPath(column) {
+  if (!column) {
+    return void 0;
+  }
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  }
+  if (!column.accessor) {
+    return void 0;
+  }
+  if (isDotPropPath(column.accessor.write)) {
+    return column.accessor.write;
+  }
+  const read = column.accessor.read;
+  if (!read.startsWith("row")) {
+    return void 0;
+  }
+  const path = read.slice(3);
+  const normalizedPath = path.startsWith(".") ? path.slice(1) : path;
+  return isDotPropPath(normalizedPath) ? normalizedPath : void 0;
+}
+function createAccessorReadFromPath(path) {
+  if (!path) {
+    return "";
+  }
+  return path.startsWith("[") ? `row${path}` : `row.${path}`;
+}
+function getColumnAccessorExpression(column) {
+  if (column?.accessor && typeof column.accessor !== "string") {
+    return column.accessor;
+  }
+  const path = getColumnAccessorPath(column);
+  return {
+    read: createAccessorReadFromPath(path),
+    write: path ?? ""
+  };
+}
+function getColumnAccessorMode(column) {
+  if (column?.accessor && typeof column.accessor !== "string") {
+    return "expression";
+  }
+  return "path";
+}
+const selectedColumnAccessorPath = computed(() => getColumnAccessorPath(selectedColumn.value));
+const selectedColumnAccessorExpression = computed(() => getColumnAccessorExpression(selectedColumn.value));
+function normalizeOptionalText(value) {
+  if (value === void 0 || value.trim().length === 0) {
+    return void 0;
+  }
+  return value;
+}
+function normalizeOptionalNumber(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : void 0;
+  }
+  if (value === void 0 || value.trim().length === 0) {
+    return void 0;
+  }
+  const normalized = Number(value);
+  return Number.isFinite(normalized) ? normalized : void 0;
+}
+function getInitialPageSize(config) {
+  return config.props?.initialState?.pagination?.pageSize;
+}
+function getInitialPaginationPageSizes(config) {
+  return normalizePaginationPageSizes(config.paginationPageSizes) ?? [];
+}
+function createPaginationPageSizeItem(value = void 0) {
+  return {
+    itemId: crypto.randomUUID(),
+    value
+  };
+}
+function createPaginationPageSizeItems(values) {
+  return (normalizePaginationPageSizes(values) ?? []).map((value) => createPaginationPageSizeItem(value));
+}
+function isRendererConfigExposed(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const clearValidation = Reflect.get(value, "clearValidation");
+  const validate = Reflect.get(value, "validate");
+  return typeof clearValidation === "function" && typeof validate === "function";
+}
+function areRendererOptionsDefault(rendererId, props2) {
+  const renderer = resolveTableRenderer(rendererId);
+  const normalizedProps = renderer.parseOptions(props2);
+  const defaultProps = renderer.parseOptions(void 0);
+  return JSON.stringify(normalizedProps) === JSON.stringify(defaultProps);
+}
+function buildColumnRenderer(rendererId, props2) {
+  const renderer = resolveTableRenderer(rendererId);
+  const normalizedProps = renderer.parseOptions(props2);
+  if (areRendererOptionsDefault(rendererId, normalizedProps)) {
+    return rendererId;
+  }
+  return {
+    id: renderer.id,
+    props: normalizedProps
+  };
+}
+function getLeafColumnTechnicalKeys(itemId) {
+  const node = getTableConfiguratorColumnNode(draftColumnTree.value, itemId);
+  if (!node) {
+    return void 0;
+  }
+  if (node.childItemIds.length === 0) {
+    const technicalKey = getColumnTechnicalKey(node.column);
+    return technicalKey ? [technicalKey] : void 0;
+  }
+  const leafColumnIds = [];
+  for (const childItemId of node.childItemIds) {
+    const childLeafColumnIds = getLeafColumnTechnicalKeys(childItemId);
+    if (!childLeafColumnIds?.length) {
+      return void 0;
+    }
+    leafColumnIds.push(...childLeafColumnIds);
+  }
+  return leafColumnIds;
+}
+function createRootInitialStateItem(itemId) {
+  const listItem = createListItem(itemId, 0);
+  if (!listItem) {
+    return void 0;
+  }
+  const leafColumnIds = getLeafColumnTechnicalKeys(itemId) ?? [];
+  return {
+    itemId,
+    label: listItem.label,
+    leafColumnIds,
+    canManage: leafColumnIds.length > 0
+  };
+}
+const rootInitialStateItems = computed(() => draftColumnTree.value.rootItemIds.flatMap((itemId) => {
+  const listItem = createRootInitialStateItem(itemId);
+  return listItem ? [listItem] : [];
+}));
+function resolveRootInitialStateItems(itemIds) {
+  return itemIds.flatMap((itemId) => {
+    const item = rootInitialStateItems.value.find((candidate) => candidate.itemId === itemId);
+    return item ? [item] : [];
+  });
+}
+const leftPinnedInitialStateItems = computed(() => resolveRootInitialStateItems(leftPinnedRootItemIds.value));
+const centerInitialStateItems = computed(() => resolveRootInitialStateItems(centerRootItemIds.value));
+const rightPinnedInitialStateItems = computed(() => resolveRootInitialStateItems(rightPinnedRootItemIds.value));
+const selectedChildItems = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return node.childItemIds.flatMap((itemId) => {
+    const listItem = createListItem(itemId, 0);
+    return listItem ? [listItem] : [];
+  });
+});
+const childCandidateItems = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  const excludedItemIds = /* @__PURE__ */ new Set([
+    node.itemId,
+    ...selectedColumnAncestorItemIds.value,
+    ...selectedColumnDescendantItemIds.value
+  ]);
+  return columnListItems.value.filter((item) => !excludedItemIds.has(item.itemId));
+});
+const filteredChildCandidateItems = computed(() => {
+  if (!normalizedChildSearch.value) {
+    return childCandidateItems.value;
+  }
+  return childCandidateItems.value.filter((item) => matchesSearch(item, normalizedChildSearch.value));
+});
+function matchesSearch(item, normalizedValue) {
+  const haystack = [item.label, item.searchMeta].filter((value) => value).join(" ").toLocaleLowerCase();
+  return haystack.includes(normalizedValue);
+}
+function reorderItemIds(itemIds, oldIndex, newIndex) {
+  if (oldIndex < 0 || newIndex < 0 || oldIndex >= itemIds.length || newIndex >= itemIds.length) {
+    return itemIds.slice();
+  }
+  const nextItemIds = itemIds.slice();
+  const movedItemId = nextItemIds[oldIndex];
+  if (!movedItemId) {
+    return itemIds.slice();
+  }
+  nextItemIds.splice(oldIndex, 1);
+  nextItemIds.splice(newIndex, 0, movedItemId);
+  return nextItemIds;
+}
+function areItemIdsEqual(left, right) {
+  if (left.length !== right.length) {
+    return false;
+  }
+  return left.every((itemId, index) => itemId === right[index]);
+}
+function syncDraftColumnTreeRootOrder() {
+  const existingRootItemIds = draftColumnTree.value.rootItemIds;
+  const nextRootItemIds = [
+    ...leftPinnedRootItemIds.value,
+    ...centerRootItemIds.value,
+    ...rightPinnedRootItemIds.value
+  ].filter((itemId, index, itemIds) => existingRootItemIds.includes(itemId) && itemIds.indexOf(itemId) === index);
+  for (const itemId of existingRootItemIds) {
+    if (!nextRootItemIds.includes(itemId)) {
+      nextRootItemIds.push(itemId);
+    }
+  }
+  if (areItemIdsEqual(existingRootItemIds, nextRootItemIds)) {
+    return;
+  }
+  draftColumnTree.value = {
+    ...draftColumnTree.value,
+    rootItemIds: nextRootItemIds
+  };
+}
+function initializeInitialStateGroups(config) {
+  const leafColumnIdToRootItemId = /* @__PURE__ */ new Map();
+  for (const item of rootInitialStateItems.value) {
+    if (!item.canManage) {
+      continue;
+    }
+    for (const leafColumnId of item.leafColumnIds) {
+      if (!leafColumnIdToRootItemId.has(leafColumnId)) {
+        leafColumnIdToRootItemId.set(leafColumnId, item.itemId);
+      }
+    }
+  }
+  const initialState = config.props?.initialState;
+  const leftItemIds = [];
+  const rightItemIds = [];
+  const centerItemIds = [];
+  for (const leafColumnId of initialState?.columnPinning?.left ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId)) {
+      continue;
+    }
+    leftItemIds.push(itemId);
+  }
+  for (const leafColumnId of initialState?.columnPinning?.right ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId) || rightItemIds.includes(itemId)) {
+      continue;
+    }
+    rightItemIds.push(itemId);
+  }
+  for (const leafColumnId of initialState?.columnOrder ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId) || rightItemIds.includes(itemId) || centerItemIds.includes(itemId)) {
+      continue;
+    }
+    centerItemIds.push(itemId);
+  }
+  for (const item of rootInitialStateItems.value) {
+    if (leftItemIds.includes(item.itemId) || rightItemIds.includes(item.itemId) || centerItemIds.includes(item.itemId)) {
+      continue;
+    }
+    centerItemIds.push(item.itemId);
+  }
+  leftPinnedRootItemIds.value = leftItemIds;
+  centerRootItemIds.value = centerItemIds;
+  rightPinnedRootItemIds.value = rightItemIds;
+}
+function resetDraftState(config) {
+  const nextPaginationPageSizes = getInitialPaginationPageSizes(config);
+  draftBaseConfig.value = config;
+  draftColumnTree.value = buildTableConfiguratorColumnTree(config.columns);
+  draftGetRowId.value = config.getRowId;
+  draftGetSubRows.value = config.getSubRows;
+  draftEnableRowSelection.value = config.enableRowSelection;
+  draftEnableMultiRowSelection.value = config.enableMultiRowSelection;
+  draftCellStyles.value = config.cellStyles;
+  draftPaginationLeft.value = config.paginationLeft;
+  draftPaginationRight.value = config.paginationRight;
+  draftPageSize.value = resolvePaginationPageSize(getInitialPageSize(config), nextPaginationPageSizes);
+  draftPaginationPageSizes.value = createPaginationPageSizeItems(nextPaginationPageSizes);
+  initializeInitialStateGroups(config);
+  syncDraftColumnTreeRootOrder();
+  childSearch.value = "";
+  selectedItemId.value = "general";
+  clearExpressionValidation();
+}
+watch(() => props.config, (config) => {
+  if (!open.value) {
+    resetDraftState(config);
+  }
+}, { immediate: true });
+const leftPinnedSortable = useSortable(leftPinnedSortableListRef, leftPinnedSortableItemIds);
+const centerSortable = useSortable(centerSortableListRef, centerSortableItemIds);
+const rightPinnedSortable = useSortable(rightPinnedSortableListRef, rightPinnedSortableItemIds);
+const paginationPageSizesSortable = useSortable(paginationPageSizesSortableListRef, paginationPageSizesSortableItemIds);
+const childSortable = useSortable(selectedChildSortableListRef, selectedChildSortableItemIds);
+function syncSortableItemIds() {
+  leftPinnedSortableItemIds.value = leftPinnedRootItemIds.value.slice();
+  centerSortableItemIds.value = centerRootItemIds.value.slice();
+  rightPinnedSortableItemIds.value = rightPinnedRootItemIds.value.slice();
+  paginationPageSizesSortableItemIds.value = draftPaginationPageSizes.value.map((item) => item.itemId);
+  selectedChildSortableItemIds.value = selectedColumnNode.value?.childItemIds.slice() ?? [];
+}
+function normalizeInitialStateGroups() {
+  const rootItemIdSet = new Set(rootInitialStateItems.value.map((item) => item.itemId));
+  const manageableRootItemIdSet = new Set(
+    rootInitialStateItems.value.filter((item) => item.canManage).map((item) => item.itemId)
+  );
+  const leftItemIds = [];
+  const centerItemIds = [];
+  const rightItemIds = [];
+  for (const itemId of leftPinnedRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || !manageableRootItemIdSet.has(itemId) || leftItemIds.includes(itemId)) {
+      continue;
+    }
+    leftItemIds.push(itemId);
+  }
+  for (const itemId of centerRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || leftItemIds.includes(itemId) || centerItemIds.includes(itemId)) {
+      continue;
+    }
+    centerItemIds.push(itemId);
+  }
+  for (const itemId of rightPinnedRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || !manageableRootItemIdSet.has(itemId) || leftItemIds.includes(itemId) || centerItemIds.includes(itemId) || rightItemIds.includes(itemId)) {
+      continue;
+    }
+    rightItemIds.push(itemId);
+  }
+  for (const item of rootInitialStateItems.value) {
+    if (leftItemIds.includes(item.itemId) || centerItemIds.includes(item.itemId) || rightItemIds.includes(item.itemId)) {
+      continue;
+    }
+    centerItemIds.push(item.itemId);
+  }
+  leftPinnedRootItemIds.value = leftItemIds;
+  centerRootItemIds.value = centerItemIds;
+  rightPinnedRootItemIds.value = rightItemIds;
+}
+function handleLeftPinnedSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  leftPinnedRootItemIds.value = reorderItemIds(
+    leftPinnedRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handleCenterSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  centerRootItemIds.value = reorderItemIds(
+    centerRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handleRightPinnedSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  rightPinnedRootItemIds.value = reorderItemIds(
+    rightPinnedRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handlePaginationPageSizesSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  const nextItemIds = reorderItemIds(
+    draftPaginationPageSizes.value.map((item) => item.itemId),
+    oldIndex,
+    newIndex
+  );
+  const itemMap = new Map(draftPaginationPageSizes.value.map((item) => [item.itemId, item]));
+  draftPaginationPageSizes.value = nextItemIds.flatMap((itemId) => {
+    const item = itemMap.get(itemId);
+    return item ? [item] : [];
+  });
+}
+function handleChildSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  const node = selectedColumnNode.value;
+  if (!node || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnSibling(
+    draftColumnTree.value,
+    node.itemId,
+    oldIndex,
+    newIndex
+  );
+}
+function configureLeftPinnedSortable() {
+  leftPinnedSortable.option("animation", 150);
+  leftPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-left-drag-handle"]');
+  leftPinnedSortable.option("onUpdate", handleLeftPinnedSortableUpdate);
+}
+function configureCenterSortable() {
+  centerSortable.option("animation", 150);
+  centerSortable.option("handle", '[data-slot="table-configurator-initial-state-center-drag-handle"]');
+  centerSortable.option("onUpdate", handleCenterSortableUpdate);
+}
+function configureRightPinnedSortable() {
+  rightPinnedSortable.option("animation", 150);
+  rightPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-right-drag-handle"]');
+  rightPinnedSortable.option("onUpdate", handleRightPinnedSortableUpdate);
+}
+function configurePaginationPageSizesSortable() {
+  paginationPageSizesSortable.option("animation", 150);
+  paginationPageSizesSortable.option("handle", '[data-slot="table-configurator-pagination-page-size-drag-handle"]');
+  paginationPageSizesSortable.option("onUpdate", handlePaginationPageSizesSortableUpdate);
+}
+function configureChildSortable() {
+  childSortable.option("animation", 150);
+  childSortable.option("handle", '[data-slot="table-configurator-child-drag-handle"]');
+  childSortable.option("onUpdate", handleChildSortableUpdate);
+}
+async function refreshSortable() {
+  leftPinnedSortable.stop();
+  centerSortable.stop();
+  rightPinnedSortable.stop();
+  paginationPageSizesSortable.stop();
+  childSortable.stop();
+  if (!open.value) {
+    return;
+  }
+  await nextTick();
+  if (selectedItemId.value === "general") {
+    leftPinnedSortable.start();
+    centerSortable.start();
+    rightPinnedSortable.start();
+    paginationPageSizesSortable.start();
+    configureLeftPinnedSortable();
+    configureCenterSortable();
+    configureRightPinnedSortable();
+    configurePaginationPageSizesSortable();
+    return;
+  }
+  if (selectedColumnNode.value) {
+    childSortable.start();
+    configureChildSortable();
+  }
+}
+watch(rootInitialStateItems, () => {
+  normalizeInitialStateGroups();
+}, { immediate: true });
+watch([leftPinnedRootItemIds, centerRootItemIds, rightPinnedRootItemIds], () => {
+  syncDraftColumnTreeRootOrder();
+}, { immediate: true });
+watch([draftColumnTree, draftPaginationPageSizes, selectedItemId, leftPinnedRootItemIds, centerRootItemIds, rightPinnedRootItemIds], () => {
+  syncSortableItemIds();
+}, { immediate: true });
+watch(() => draftPaginationPageSizes.value.length, async () => {
+  if (!open.value || selectedItemId.value !== "general") {
+    return;
+  }
+  await refreshSortable();
+});
+watch(open, async (value) => {
+  if (value) {
+    resetDraftState(props.config);
+    await refreshSortable();
+    return;
+  }
+  leftPinnedSortable.stop();
+  centerSortable.stop();
+  rightPinnedSortable.stop();
+  paginationPageSizesSortable.stop();
+  childSortable.stop();
+  childSearch.value = "";
+  search.value = "";
+}, { immediate: true });
+watch(selectedItemId, async () => {
+  childSearch.value = "";
+  clearAccessorValidation();
+  clearRendererValidation();
+  selectedColumnAccessorMode.value = getColumnAccessorMode(selectedColumn.value);
+  if (!open.value) {
+    return;
+  }
+  await refreshSortable();
+});
+watch(selectedColumnAccessorMode, (value, oldValue) => {
+  if (value === oldValue) {
+    return;
+  }
+  updateSelectedColumnAccessorMode(value);
+});
+watch(columnListItems, (items) => {
+  if (selectedItemId.value === "general") {
+    return;
+  }
+  if (!items.some((item) => item.itemId === selectedItemId.value)) {
+    selectedItemId.value = "general";
+  }
+}, { immediate: true });
+watch(filteredColumnItems, (items) => {
+  if (!normalizedSearch.value || selectedItemId.value === "general") {
+    return;
+  }
+  if (items.some((item) => item.itemId === selectedItemId.value)) {
+    return;
+  }
+  selectedItemId.value = items[0]?.itemId ?? "general";
+}, { immediate: true });
+watch(selectedColumnRendererId, () => {
+  clearRendererValidation();
+});
+function normalizeColumn(column) {
+  const title = hasVisibleLocaleValue(column.title) ? column.title : void 0;
+  const tooltip = hasVisibleLocaleValue(column.tooltip) ? column.tooltip : void 0;
+  const normalizedChildren = column.columns?.map(normalizeColumn);
+  const shouldDropGeneratedId = looksLikeGeneratedColumnId(column.id) && normalizedChildren === void 0 && column.accessor !== void 0;
+  return {
+    ...column,
+    id: shouldDropGeneratedId ? void 0 : column.id,
+    title,
+    tooltip,
+    columns: normalizedChildren?.length ? normalizedChildren : void 0
+  };
+}
+function discardChanges() {
+  resetDraftState(props.config);
+  childSearch.value = "";
+  search.value = "";
+  open.value = false;
+}
+function handleOpenChange(value) {
+  if (value) {
+    open.value = true;
+    return;
+  }
+  discardChanges();
+}
+function selectGeneral() {
+  selectedItemId.value = "general";
+}
+function selectItem(itemId) {
+  selectedItemId.value = itemId;
+}
+function moveRootItemToGroup(itemId, group) {
+  const nextLeftItemIds = leftPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  const nextCenterItemIds = centerRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  const nextRightItemIds = rightPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  if (group === "left") {
+    nextLeftItemIds.push(itemId);
+  } else if (group === "center") {
+    nextCenterItemIds.push(itemId);
+  } else {
+    nextRightItemIds.push(itemId);
+  }
+  leftPinnedRootItemIds.value = nextLeftItemIds;
+  centerRootItemIds.value = nextCenterItemIds;
+  rightPinnedRootItemIds.value = nextRightItemIds;
+}
+function addColumn() {
+  const nextNode = createTableConfiguratorDraftColumnNode({
+    id: crypto.randomUUID()
+  });
+  draftColumnTree.value = insertTableConfiguratorRootColumnNode(draftColumnTree.value, nextNode);
+  selectedItemId.value = nextNode.itemId;
+}
+function deleteColumn(itemId) {
+  const flattenedItems = flattenTableConfiguratorColumnTree(draftColumnTree.value);
+  const deleteIndex = flattenedItems.findIndex((item) => item.itemId === itemId);
+  if (deleteIndex < 0) {
+    return;
+  }
+  const removedItemIds = [itemId, ...getTableConfiguratorColumnDescendantItemIds(draftColumnTree.value, itemId)];
+  const nextTree = removeTableConfiguratorColumnSubtree(draftColumnTree.value, itemId);
+  draftColumnTree.value = nextTree;
+  if (!removedItemIds.includes(selectedItemId.value)) {
+    return;
+  }
+  const nextFlattenedItems = flattenTableConfiguratorColumnTree(nextTree);
+  const nextSelectedItem = nextFlattenedItems[deleteIndex] ?? nextFlattenedItems[deleteIndex - 1];
+  selectedItemId.value = nextSelectedItem?.itemId ?? "general";
+}
+function updateSelectedColumnTitle(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      title: value
+    })
+  );
+}
+function updateSelectedColumnTooltip(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      tooltip: value
+    })
+  );
+}
+function updateSelectedColumnAccessor(accessor) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      accessor
+    })
+  );
+}
+function updateSelectedColumnSize(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      size: normalizeOptionalNumber(value)
+    })
+  );
+}
+function updateSelectedColumnGrow(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      grow: value === true
+    })
+  );
+}
+function updateSelectedColumnEnableSorting(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      enableSorting: value === true
+    })
+  );
+}
+function updateSelectedColumnAccessorPath(value) {
+  updateSelectedColumnAccessor(value);
+}
+function updateSelectedColumnAccessorRead(value) {
+  const currentAccessor = selectedColumnAccessorExpression.value;
+  const nextRead = value ?? "";
+  const nextWrite = currentAccessor.write;
+  if (nextRead.length === 0 && nextWrite.length === 0) {
+    updateSelectedColumnAccessor(void 0);
+    return;
+  }
+  updateSelectedColumnAccessor({
+    read: nextRead,
+    write: nextWrite
+  });
+}
+function updateSelectedColumnAccessorWrite(value) {
+  const currentAccessor = selectedColumnAccessorExpression.value;
+  const nextRead = currentAccessor.read;
+  const nextWrite = value ?? "";
+  if (nextRead.length === 0 && nextWrite.length === 0) {
+    updateSelectedColumnAccessor(void 0);
+    return;
+  }
+  updateSelectedColumnAccessor({
+    read: nextRead,
+    write: nextWrite
+  });
+}
+function updateSelectedColumnAccessorMode(value) {
+  const column = selectedColumn.value;
+  if (!column) {
+    return;
+  }
+  if (value === "path") {
+    updateSelectedColumnAccessor(getColumnAccessorPath(column));
+    clearAccessorValidation();
+    return;
+  }
+  const accessor = getColumnAccessorExpression(column);
+  updateSelectedColumnAccessor({
+    read: accessor.read,
+    write: accessor.write
+  });
+  clearAccessorValidation();
+}
+function updateSelectedColumnRendererId(value) {
+  const node = selectedColumnNode.value;
+  if (!node || typeof value !== "string") {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      renderer: buildColumnRenderer(value, void 0)
+    })
+  );
+}
+function updateSelectedColumnRendererProps(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      renderer: buildColumnRenderer(selectedColumnRendererId.value, value)
+    })
+  );
+}
+function toggleChildSelection(itemId, value) {
+  const node = selectedColumnNode.value;
+  if (!node || value !== true) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnNodeToParent(
+    draftColumnTree.value,
+    itemId,
+    node.itemId
+  );
+}
+function removeSelectedChild(itemId) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnNodeAfterItem(
+    draftColumnTree.value,
+    itemId,
+    node.itemId
+  );
+}
+function clearExpressionValidation() {
+  getRowIdEditor.value?.clearValidation();
+  getSubRowsEditor.value?.clearValidation();
+  enableRowSelectionEditor.value?.clearValidation();
+  enableMultiRowSelectionEditor.value?.clearValidation();
+  cellStylesEditor.value?.clearValidation();
+  clearAccessorValidation();
+  clearRendererValidation();
+}
+function clearAccessorValidation() {
+  accessorPathEditor.value?.clearValidation();
+  accessorReadEditor.value?.clearValidation();
+  accessorWriteEditor.value?.clearValidation();
+}
+function clearRendererValidation() {
+  if (isRendererConfigExposed(selectedRendererConfigRef.value)) {
+    selectedRendererConfigRef.value.clearValidation();
+  }
+}
+function validateExpressionEditors() {
+  let isValid = true;
+  if (getRowIdEditor.value && !getRowIdEditor.value.validate()) {
+    isValid = false;
+  }
+  if (getSubRowsEditor.value && !getSubRowsEditor.value.validate()) {
+    isValid = false;
+  }
+  if (enableRowSelectionEditor.value && !enableRowSelectionEditor.value.validate()) {
+    isValid = false;
+  }
+  if (enableMultiRowSelectionEditor.value && !enableMultiRowSelectionEditor.value.validate()) {
+    isValid = false;
+  }
+  if (cellStylesEditor.value && !cellStylesEditor.value.validate()) {
+    isValid = false;
+  }
+  if (selectedColumn.value && selectedColumnAccessorMode.value === "path" && selectedColumnAccessorPath.value !== void 0 && accessorPathEditor.value && !accessorPathEditor.value.validate()) {
+    isValid = false;
+  }
+  if (selectedColumn.value && selectedColumnAccessorMode.value === "expression") {
+    const accessor = selectedColumn.value.accessor;
+    if (!accessor || typeof accessor === "string") {
+      return validateRendererConfig(isValid);
+    }
+    if (accessorReadEditor.value && !accessorReadEditor.value.validate()) {
+      isValid = false;
+    }
+    if (accessorWriteEditor.value && !accessorWriteEditor.value.validate()) {
+      isValid = false;
+    }
+  }
+  return validateRendererConfig(isValid);
+}
+function validateRendererConfig(currentIsValid) {
+  if (!selectedColumn.value || selectedColumnHasChildren.value) {
+    return currentIsValid;
+  }
+  if (isRendererConfigExposed(selectedRendererConfigRef.value) && !selectedRendererConfigRef.value.validate()) {
+    return false;
+  }
+  return currentIsValid;
+}
+function buildInitialStateLeafColumnIds(itemIds) {
+  const leafColumnIds = [];
+  for (const itemId of itemIds) {
+    const item = rootInitialStateItems.value.find((candidate) => candidate.itemId === itemId);
+    if (!item?.canManage) {
+      continue;
+    }
+    leafColumnIds.push(...item.leafColumnIds);
+  }
+  return leafColumnIds;
+}
+function updateDraftPaginationLeft(value) {
+  draftPaginationLeft.value = normalizeOptionalText(String(value));
+}
+function updateDraftPaginationRight(value) {
+  draftPaginationRight.value = normalizeOptionalText(String(value));
+}
+function updateDraftPageSize(value) {
+  draftPageSize.value = normalizeOptionalNumber(value);
+}
+function updateDraftPaginationPageSizeOption(itemId, value) {
+  const normalizedValue = normalizeOptionalNumber(value);
+  draftPaginationPageSizes.value = draftPaginationPageSizes.value.map((item) => item.itemId === itemId ? {
+    ...item,
+    value: normalizedValue
+  } : item);
+}
+function addDraftPaginationPageSizeOption() {
+  draftPaginationPageSizes.value = [
+    ...draftPaginationPageSizes.value,
+    createPaginationPageSizeItem()
+  ];
+}
+function removeDraftPaginationPageSizeOption(itemId) {
+  draftPaginationPageSizes.value = draftPaginationPageSizes.value.filter((item) => item.itemId !== itemId);
+}
+function buildNextPaginationPageSizes() {
+  return normalizePaginationPageSizes(draftPaginationPageSizes.value.flatMap((item) => {
+    if (item.value === void 0) {
+      return [];
+    }
+    return [item.value];
+  }));
+}
+function buildNextPaginationState() {
+  const currentPagination = draftBaseConfig.value.props?.initialState?.pagination;
+  const nextPaginationPageSizes = buildNextPaginationPageSizes();
+  const nextPageSize = resolvePaginationPageSize(draftPageSize.value, nextPaginationPageSizes);
+  if (!currentPagination && nextPageSize === void 0) {
+    return void 0;
+  }
+  return {
+    ...currentPagination,
+    pageSize: nextPageSize
+  };
+}
+function buildDraftConfig() {
+  return TableConfigC.safeParse({
+    ...draftBaseConfig.value,
+    getRowId: draftGetRowId.value,
+    getSubRows: draftGetSubRows.value,
+    enableRowSelection: draftEnableRowSelection.value,
+    enableMultiRowSelection: draftEnableMultiRowSelection.value,
+    cellStyles: draftCellStyles.value,
+    paginationLeft: normalizeOptionalText(draftPaginationLeft.value),
+    paginationRight: normalizeOptionalText(draftPaginationRight.value),
+    paginationPageSizes: buildNextPaginationPageSizes(),
+    columns: materializeTableConfiguratorColumnTree(draftColumnTree.value).map(normalizeColumn),
+    props: {
+      ...draftBaseConfig.value.props,
+      initialState: {
+        ...draftBaseConfig.value.props?.initialState,
+        columnPinning: {
+          ...draftBaseConfig.value.props?.initialState?.columnPinning,
+          left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
+          right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
+        },
+        columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
+        pagination: buildNextPaginationState()
+      }
+    }
+  });
+}
+function showImportError(message) {
+  $toast.error(message);
+}
+function showCopyError(message) {
+  $toast.error(message);
+}
+function showImportErrorWithCopyAction(message, onClick) {
+  $toast.error(message, {
+    action: {
+      label: t("copy-paste-error"),
+      onClick
+    }
+  });
+}
+function getValidDraftConfig(errorMessage) {
+  if (!validateExpressionEditors()) {
+    showCopyError(errorMessage);
+    return void 0;
+  }
+  const result = buildDraftConfig();
+  if (!result.success) {
+    showCopyError(errorMessage);
+    return void 0;
+  }
+  return result.data;
+}
+function buildTableConfigJsonSchema() {
+  return z.toJSONSchema(TableConfigC, {
+    io: "input",
+    unrepresentable: "any"
+  });
+}
+function collectUsedRendererIds(columns) {
+  const rendererIds = [];
+  for (const column of columns) {
+    if (Array.isArray(column.columns) && column.columns.length > 0) {
+      for (const rendererId2 of collectUsedRendererIds(column.columns)) {
+        if (!rendererIds.includes(rendererId2)) {
+          rendererIds.push(rendererId2);
+        }
+      }
+      continue;
+    }
+    const rendererId = getColumnRendererId(column);
+    if (!rendererIds.includes(rendererId)) {
+      rendererIds.push(rendererId);
+    }
+  }
+  return rendererIds;
+}
+function buildRendererSchemaMarkdown(config) {
+  const rendererIds = collectUsedRendererIds(config.columns);
+  if (rendererIds.length === 0) {
+    return "\u5F53\u524D\u8349\u7A3F\u4E2D\u6CA1\u6709\u53F6\u5B50\u5217\u6E32\u67D3\u5668\u3002";
+  }
+  return rendererIds.map((rendererId) => {
+    const renderer = getTableRenderer(rendererId);
+    if (!renderer) {
+      return [
+        `### ${rendererId}`,
+        "\u672A\u627E\u5230\u8BE5\u6E32\u67D3\u5668\u7684 options schema\u3002"
+      ].join("\n");
+    }
+    return [
+      `### ${rendererId}`,
+      "```json",
+      JSON.stringify(z.toJSONSchema(renderer.optionsSchema, {
+        io: "input",
+        unrepresentable: "any"
+      }), null, 2),
+      "```"
+    ].join("\n");
+  }).join("\n\n");
+}
+function buildDslGuideMarkdown() {
+  return [
+    "## DSL / CEL \u7F16\u5199\u8BF4\u660E",
+    "\u672C\u914D\u7F6E\u4E2D\u7684 DSL \u662F CEL \u8868\u8FBE\u5F0F\uFF1B\u8868\u8FBE\u5F0F\u5B57\u6BB5\u5FC5\u987B\u586B\u5199\u5B57\u7B26\u4E32\uFF0C\u4E0D\u8981\u751F\u6210 JavaScript\u3001TypeScript\u3001\u7BAD\u5934\u51FD\u6570\u6216\u4F2A\u4EE3\u7801\u3002",
+    "",
+    "### 1. \u57FA\u7840\u8BED\u6CD5",
+    '- \u5B57\u9762\u91CF\uFF1A`"text"`\u3001`123`\u3001`123.45`\u3001`true`\u3001`false`\u3001`null`\u3002',
+    '- \u5217\u8868 / \u5BF9\u8C61\uFF1A`[1, 2, 3]`\u3001`{"a": 1, "b": 2}`\u3002',
+    '- \u8BBF\u95EE\uFF1A`.`\u3001`[]`\uFF0C\u4F8B\u5982 `row.id`\u3001`row["id"]`\u3001`row.items[0]`\u3002',
+    '- \u53EF\u9009\u8BBF\u95EE\uFF1A`.?`\u3001`[?]`\uFF0C\u4F8B\u5982 `row.?children`\u3001`row[?"name"]`\u3002',
+    "- \u903B\u8F91\u4E0E\u6761\u4EF6\uFF1A`&&`\u3001`||`\u3001`!`\u3001`condition ? a : b`\u3002",
+    "- \u6BD4\u8F83\uFF1A`==`\u3001`!=`\u3001`<`\u3001`<=`\u3001`>`\u3001`>=`\u3001`in`\u3002",
+    "- \u7B97\u672F\uFF1A`+`\u3001`-`\u3001`*`\u3001`/`\u3001`%`\u3002",
+    '- \u65B9\u6CD5\u8C03\u7528\uFF1A`value.method(args)`\uFF0C\u4F8B\u5982 `now.format("yyyy-MM-dd")`\u3001`row.?children.orValue([])`\u3002',
+    "- `accessor` \u4E3A\u5B57\u7B26\u4E32\u65F6\u4E0D\u662F CEL\uFF0C\u800C\u662F dot-prop \u8DEF\u5F84\uFF0C\u4F8B\u5982 `id`\u3001`foo.bar`\u3001`foo[0].bar`\u3002",
+    "",
+    "### 2. \u5168\u5C40\u53D8\u91CF\u4E0E\u5E38\u91CF",
+    "- `now: Date` \u5F53\u524D\u65F6\u95F4\u3002",
+    "- `today: Date` \u4E0E `now` \u7C7B\u4F3C\uFF0C\u4FDD\u7559\u7528\u4E8E\u517C\u5BB9\u65E7\u914D\u7F6E\u3002",
+    "- `location: URL` \u5F53\u524D\u9875\u9762 URL\u3002",
+    "- `token: string` \u5F53\u524D sessionStorage \u4E2D\u7684 token\uFF0C\u7F3A\u5931\u65F6\u4E3A\u7A7A\u5B57\u7B26\u4E32\u3002",
+    "- `locale: string` \u5F53\u524D\u6D4F\u89C8\u5668\u8BED\u8A00\u3002",
+    "- `git: map<string, string>` \u6765\u81EA\u8FD0\u884C\u65F6\u914D\u7F6E\u7684 git \u5E38\u91CF\u3002",
+    "- `ci: map<string, dyn>` \u6765\u81EA\u8FD0\u884C\u65F6\u914D\u7F6E\u7684 CI \u5E38\u91CF\uFF0C\u5176\u4E2D `ci.build` \u4F1A\u88AB\u8F6C\u6210 `int`\u3002",
+    "- \u8FD8\u4F1A\u6DF7\u5165\u5BBF\u4E3B\u5E94\u7528\u901A\u8FC7 `props.dsl` \u6CE8\u5165\u7684\u5168\u5C40\u52A8\u6001\u4E0A\u4E0B\u6587\uFF1B\u8FD9\u4E9B\u952E\u5B58\u5728\u65F6\u53EF\u76F4\u63A5\u8BBF\u95EE\uFF0C\u4F46\u540D\u79F0\u548C\u7C7B\u578B\u4E0D\u56FA\u5B9A\uFF0C\u5E94\u4EE5\u5F53\u524D\u914D\u7F6E\u548C\u4E1A\u52A1\u4E0A\u4E0B\u6587\u4E3A\u51C6\u3002",
+    "",
+    "### 3. \u8868\u683C\u914D\u7F6E\u5B57\u6BB5\u91CC\u7684\u5C40\u90E8\u53D8\u91CF",
+    "- `accessor.read`: `row: dyn`\u3001`index: int`\u3002",
+    "- `getRowId`: `row: dyn`\u3001`index: int`\u3001`parent: dyn`\uFF1B\u5FC5\u987B\u8FD4\u56DE `string`\u3002",
+    "- `getSubRows`: `row: dyn`\u3001`index: int`\uFF1B\u901A\u5E38\u8FD4\u56DE `list<dyn>`\u3002",
+    "- `enableRowSelection`: `row: dyn`\u3001`index: int`\u3001`id: string`\uFF1B\u5FC5\u987B\u8FD4\u56DE `bool`\u3002",
+    "- `enableMultiRowSelection`: `row: dyn`\u3001`index: int`\u3001`id: string`\uFF1B\u5FC5\u987B\u8FD4\u56DE `bool`\u3002",
+    "- `cellStyles`: `row: dyn`\u3001`index: int`\u3001`id: string`\u3001`selected: bool`\u3001`pinned: dyn`\uFF1B\u5FC5\u987B\u8FD4\u56DE `map`\u3002",
+    "- `table.renderer.text.props.copyExpression`: `row: dyn`\u3001`index: int`\u3002",
+    "",
+    "### 4. \u53EF\u7528\u7C7B\u578B\u4E0E\u6269\u5C55\u80FD\u529B",
+    "- `URL` \u7C7B\u578B\uFF1A\u53EF\u8C03\u7528 `location.searchParams()`\uFF0C\u8FD4\u56DE `URLSearchParams`\u3002",
+    "- `URLSearchParams` \u7C7B\u578B\uFF1A\u53EF\u8C03\u7528 `searchParams({...})` \u521B\u5EFA\uFF0C`URLSearchParams.get(string)` \u8FD4\u56DE `optional<string>`\u3002",
+    "- `Date` \u7C7B\u578B\uFF1A\u7531 `date(string)` \u521B\u5EFA\uFF0C\u4E5F\u53EF\u76F4\u63A5\u4F7F\u7528 `now` / `today`\u3002",
+    "- `Date` \u652F\u6301\u6BD4\u8F83\uFF1A`<`\u3001`<=`\u3001`>`\u3001`>=`\u3001`==`\u3002",
+    "- `Date.startOf(string)` / `Date.endOf(string)`\uFF1A`unit` \u652F\u6301 `day` / `week` / `month` / `year`\u3002",
+    "- `Date.offset(int, string)`\uFF1A`unit` \u652F\u6301 `day|days|week|weeks|month|months|year|years`\u3002",
+    "- `Date.set(string, int)`\uFF1A`unit` \u652F\u6301 `day` / `month` / `year`\uFF0C\u5176\u4E2D `month` \u4F20\u5165\u81EA\u7136\u6708 1-12\u3002",
+    '- `Date.format(string)`\uFF1A\u4F7F\u7528 `date-fns` \u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 `now.format("yyyy-MM-dd")`\u3002',
+    "- `list<double>.sum()` / `list<int>.sum()`\uFF1A\u5BF9\u6570\u5B57\u5217\u8868\u6C42\u548C\uFF0C\u8FD4\u56DE `double`\u3002",
+    "- `double.toLocaleString(dyn)` / `int.toLocaleString(dyn)`\uFF1A\u6309\u5F53\u524D\u8BED\u8A00\u683C\u5F0F\u5316\u6570\u5B57\u3002",
+    "- `double.encodeSimplifiedChineseUppercase()` / `int.encodeSimplifiedChineseUppercase()`\uFF1A\u8F6C\u4E2D\u6587\u5927\u5199\u91D1\u989D/\u6570\u5B57\u3002",
+    "- `parseJSON(string): dyn`\uFF1A\u628A JSON \u5B57\u7B26\u4E32\u89E3\u6790\u6210\u5BF9\u8C61\u6216\u5217\u8868\u3002",
+    "- `string.slice(int)` / `string.slice(int, int)`\uFF1A\u5B57\u7B26\u4E32\u5207\u7247\u3002",
+    "- `session(string): optional<string>`\uFF1A\u4ECE `sessionStorage` \u8BFB\u53D6\u503C\u3002",
+    "- `local(string): optional<string>`\uFF1A\u4ECE `localStorage` \u8BFB\u53D6\u503C\u3002",
+    "",
+    "### 5. Optional / \u7A7A\u503C\u8BED\u4E49",
+    "- \u53EF\u9009\u8BBF\u95EE .? \u548C [?] \u4F1A\u8FD4\u56DE `Optional`\uFF0C\u800C\u4E0D\u662F\u76F4\u63A5\u8FD4\u56DE\u666E\u901A\u503C\u3002",
+    "- `Optional.hasValue()` \u5224\u65AD\u662F\u5426\u5B58\u5728\u503C\u3002",
+    "- `Optional.value()` \u53D6\u503C\uFF1B\u5728\u7A7A\u503C\u65F6\u4F1A\u629B\u9519\uFF0C\u4E00\u822C\u4E0D\u5EFA\u8BAE\u76F4\u63A5\u4F7F\u7528\u3002",
+    "- `Optional.or(optional)` \u5728\u7A7A\u503C\u65F6\u4F7F\u7528\u53E6\u4E00\u4E2A Optional\u3002",
+    "- `Optional.orValue(defaultValue)` \u5728\u7A7A\u503C\u65F6\u8FD4\u56DE\u9ED8\u8BA4\u503C\uFF0C\u6700\u5E38\u7528\u3002\u793A\u4F8B\uFF1A`row.?children.orValue([])`\u3002",
+    "",
+    "### 6. \u7F16\u5199\u8981\u6C42",
+    "- \u751F\u6210\u8868\u8FBE\u5F0F\u65F6\u8981\u4E25\u683C\u9075\u5B88\u5B57\u6BB5\u8FD4\u56DE\u7C7B\u578B\uFF0C\u4E0D\u8981\u6DF7\u7528\u5B57\u7B26\u4E32\u3001\u5E03\u5C14\u503C\u3001\u6570\u7EC4\u548C\u5BF9\u8C61\u3002",
+    "- \u5982\u679C\u5B57\u6BB5 schema \u6216\u5C40\u90E8\u53D8\u91CF\u6CA1\u6709\u58F0\u660E\u67D0\u4E2A\u53D8\u91CF\uFF0C\u5C31\u4E0D\u8981\u81C6\u9020\u65B0\u7684\u53D8\u91CF\u540D\u3002",
+    "- \u4F18\u5148\u590D\u7528\u5F53\u524D\u914D\u7F6E\u4E2D\u5DF2\u7ECF\u51FA\u73B0\u8FC7\u7684\u5B57\u6BB5\u8DEF\u5F84\u3001\u8868\u8FBE\u5F0F\u6A21\u5F0F\u548C\u8FD4\u56DE\u7ED3\u6784\u3002"
+  ].join("\n");
+}
+function buildMarkdownNotes() {
+  return [
+    "## \u6CE8\u610F\u4E8B\u9879",
+    "- \u8BF7\u4F18\u5148\u4F9D\u636E schema \u4E2D\u7684 `description` \u7F16\u5199\u914D\u7F6E\uFF0C\u63CF\u8FF0\u8D8A\u8BE6\u7EC6\u8D8A\u91CD\u8981\uFF0C\u4E0D\u8981\u5FFD\u7565\u5B57\u6BB5\u8BF4\u660E\u3002",
+    "- \u53EA\u5141\u8BB8\u4FEE\u6539\u73B0\u6709\u5217\u7684\u914D\u7F6E\uFF1B\u7981\u6B62\u65B0\u589E\u9876\u7EA7\u5217\u3001\u7981\u6B62\u65B0\u589E\u5B50\u5217\u3001\u7981\u6B62\u5220\u9664\u540E\u91CD\u5EFA\u5217\u3002",
+    "- \u7981\u6B62\u751F\u6210\u65B0\u7684\u5217 ID\uFF0C\u4E5F\u4E0D\u8981\u4E3A\u7F3A\u5931 ID \u7684\u65B0\u5217\u8865 ID\uFF1B\u5982\u679C\u7528\u6237\u9700\u8981\u65B0\u589E\u5217\uFF0C\u5FC5\u987B\u5728\u754C\u9762\u4E2D\u624B\u52A8\u5B8C\u6210\u3002",
+    "- \u4FEE\u6539\u5217\u914D\u7F6E\u65F6\u5C3D\u91CF\u4FDD\u7559\u73B0\u6709\u5217\u987A\u5E8F\u3001\u5C42\u7EA7\u7ED3\u6784\u3001`id`\u3001`accessor` \u548C renderer \u8BED\u4E49\uFF0C\u9664\u975E\u7528\u6237\u660E\u786E\u8981\u6C42\u53D8\u66F4\u3002",
+    "- \u5982\u679C\u9700\u6C42\u8D85\u51FA schema \u80FD\u8868\u8FBE\u7684\u8303\u56F4\uFF0C\u5E94\u8BE5\u76F4\u63A5\u8BF4\u660E\u9650\u5236\uFF0C\u800C\u4E0D\u662F\u53D1\u660E schema \u4E2D\u4E0D\u5B58\u5728\u7684\u65B0\u5B57\u6BB5\u3002"
+  ].join("\n");
+}
+function buildAiPromptHeaderMarkdown() {
+  return [
+    "# \u8868\u683C\u914D\u7F6E AI \u4E0A\u4E0B\u6587",
+    "\u4F60\u662F\u4E00\u4E2A\u5E2E\u52A9\u7528\u6237\u914D\u7F6E\u8868\u683C\u7EC4\u4EF6\u7684 AI \u52A9\u624B\uFF0C\u8D1F\u8D23\u6839\u636E\u5F53\u524D\u914D\u7F6E\u3001schema \u548C DSL \u89C4\u5219\u56DE\u7B54\u7528\u6237\u95EE\u9898\u3002",
+    "\u4F60\u7684\u76EE\u6807\u662F\u89E3\u91CA\u73B0\u6709\u914D\u7F6E\u3001\u5E2E\u52A9\u7528\u6237\u4FEE\u6539\u73B0\u6709\u914D\u7F6E\uFF0C\u5E76\u5728\u7EA6\u675F\u8303\u56F4\u5185\u751F\u6210\u53EF\u7528\u7684\u914D\u7F6E\u7247\u6BB5\u3002",
+    "\u5982\u679C\u4F60\u4E0D\u786E\u5B9A\u67D0\u4E2A\u5B57\u6BB5\u3001\u53D8\u91CF\u3001\u7C7B\u578B\u3001\u8FD0\u884C\u65F6\u4E0A\u4E0B\u6587\u6216\u4E1A\u52A1\u542B\u4E49\uFF0C\u5FC5\u987B\u660E\u786E\u8BF4\u660E\u4E0D\u786E\u5B9A\u70B9\uFF0C\u5E76\u8981\u6C42\u7528\u6237\u8865\u5145\u4FE1\u606F\uFF1B\u4E0D\u8981\u731C\u6D4B\uFF0C\u4E0D\u8981\u53D1\u660E schema \u4E2D\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5\u3001\u53D8\u91CF\u3001\u51FD\u6570\u6216\u80FD\u529B\u3002",
+    "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u201C\u751F\u6210\u914D\u7F6E\u201D\u201C\u8F93\u51FA\u914D\u7F6E\u201D\u201C\u76F4\u63A5\u7ED9\u6211\u914D\u7F6E\u201D\u201C\u8FD4\u56DE\u53EF\u7C98\u8D34\u914D\u7F6E\u201D\u8FD9\u7C7B\u7ED3\u679C\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\u6216\u914D\u7F6E\u7247\u6BB5\uFF1B\u5176\u4ED6\u60C5\u51B5\u4E0B\u4F18\u5148\u89E3\u91CA\u601D\u8DEF\u3001\u6307\u51FA\u4FEE\u6539\u70B9\u548C\u539F\u56E0\u3002",
+    "\u5F53\u6211\u8BF4\u201C\u751F\u6210\u914D\u7F6E\u201D\u65F6\uFF0C\u6211\u4F1A\u628A\u914D\u7F6E\u4EE5 Markdown code block \u7684\u5F62\u5F0F\u53D1\u7ED9\u4F60\uFF1B\u4F60\u8FD4\u56DE\u7684\u914D\u7F6E\u4E5F\u5E94\u8BE5\u653E\u5728 Markdown code block \u4E2D\uFF0C\u8FD9\u6837\u6211\u53EF\u4EE5\u76F4\u63A5\u7C98\u8D34\u5230\u9875\u9762\u914D\u7F6E\u91CC\u3002"
+  ].join("\n");
+}
+function buildMarkdownCopyContent(config) {
+  return [
+    buildAiPromptHeaderMarkdown(),
+    "",
+    "## \u5F53\u524D\u914D\u7F6E",
+    "```json",
+    JSON.stringify(config, null, 2),
+    "```",
+    "",
+    buildDslGuideMarkdown(),
+    "",
+    buildMarkdownNotes(),
+    "",
+    "## TableConfig JSON Schema",
+    "```json",
+    JSON.stringify(buildTableConfigJsonSchema(), null, 2),
+    "```",
+    "",
+    "## \u5F53\u524D\u4F7F\u7528\u7684 Renderer Options Schema",
+    buildRendererSchemaMarkdown(config)
+  ].join("\n");
+}
+function formatIssuePath(path) {
+  if (path.length === 0) {
+    return "(root)";
+  }
+  return path.map((segment) => {
+    if (typeof segment === "number") {
+      return `${segment}`;
+    }
+    if (typeof segment === "string") {
+      return segment;
+    }
+    return String(segment);
+  }).join(".");
+}
+function formatIssueExtraFields(issue) {
+  const lines = [];
+  const entries = Object.entries(issue);
+  for (const [key, value] of entries) {
+    if (key === "code" || key === "message" || key === "path") {
+      continue;
+    }
+    lines.push(`  - ${key}: ${JSON.stringify(value)}`);
+  }
+  return lines;
+}
+function buildPasteConfigErrorDetails(source, error) {
+  if (error instanceof SyntaxError) {
+    return [
+      "## \u7C98\u8D34\u5931\u8D25\u539F\u56E0",
+      "- \u7C7B\u578B\uFF1AJSON \u89E3\u6790\u5931\u8D25",
+      `- message: ${error.message}`,
+      "",
+      "## \u539F\u59CB\u7C98\u8D34\u5185\u5BB9",
+      "```text",
+      source,
+      "```"
+    ].join("\n");
+  }
+  const issueLines = error.issues.flatMap((issue, index) => {
+    return [
+      `### Issue ${index + 1}`,
+      `- path: ${formatIssuePath(issue.path)}`,
+      `- code: ${issue.code}`,
+      `- message: ${issue.message}`,
+      ...formatIssueExtraFields(issue)
+    ];
+  });
+  return [
+    "## \u7C98\u8D34\u5931\u8D25\u539F\u56E0",
+    "- \u7C7B\u578B\uFF1ASchema \u6821\u9A8C\u5931\u8D25",
+    "",
+    "## \u539F\u59CB\u7C98\u8D34\u5185\u5BB9",
+    "```json",
+    source,
+    "```",
+    "",
+    "## Schema \u62A5\u9519",
+    ...issueLines
+  ].join("\n");
+}
+function buildPasteConfigErrorMarkdown(source, error) {
+  return [
+    buildAiPromptHeaderMarkdown(),
+    "",
+    "## \u5F53\u524D\u4EFB\u52A1",
+    "\u7528\u6237\u628A\u4E00\u6BB5\u914D\u7F6E\u7C98\u8D34\u56DE\u8868\u683C\u914D\u7F6E\u5668\u65F6\u5931\u8D25\u4E86\u3002\u8BF7\u57FA\u4E8E\u4E0B\u9762\u7684\u539F\u59CB\u5185\u5BB9\u548C\u62A5\u9519\u4FEE\u590D\u5F53\u524D\u914D\u7F6E\u3002",
+    "\u4F60\u53EA\u80FD\u4FEE\u590D\u5F53\u524D\u914D\u7F6E\uFF0C\u4E0D\u80FD\u65B0\u589E\u5217\u3001\u4E0D\u80FD\u65B0\u589E\u5B50\u5217\u3001\u4E0D\u80FD\u5220\u9664\u540E\u91CD\u5EFA\u5217\u3001\u4E0D\u80FD\u751F\u6210\u65B0\u7684\u5217 ID\u3002",
+    "\u5982\u679C\u67D0\u4E2A\u5217\u7F3A\u5C11 ID\uFF0C\u4E0D\u8981\u66FF\u7528\u6237\u8865\u4E00\u4E2A\u65B0 ID\uFF1B\u8FD9\u7C7B\u64CD\u4F5C\u5FC5\u987B\u5728\u754C\u9762\u4E2D\u5B8C\u6210\u3002",
+    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\uFF0C\u53EA\u4FEE\u6539\u5BFC\u81F4\u62A5\u9519\u7684\u90E8\u5206\u3002",
+    "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u8F93\u51FA\u914D\u7F6E\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\uFF1B\u5982\u679C\u8FD4\u56DE\u914D\u7F6E\uFF0C\u5FC5\u987B\u653E\u5728 Markdown code block \u4E2D\u3002",
+    "",
+    buildPasteConfigErrorDetails(source, error),
+    "",
+    buildMarkdownNotes()
+  ].join("\n");
+}
+async function writeClipboardText(value, errorMessage) {
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch {
+    showCopyError(errorMessage);
+  }
+}
+async function copyPasteConfigError(source, error) {
+  await writeClipboardText(buildPasteConfigErrorMarkdown(source, error), t("copy-paste-error-failed"));
+}
+async function pasteConfigFromClipboard() {
+  let source = "";
+  try {
+    source = await navigator.clipboard.readText();
+  } catch {
+    showImportError(t("paste-config-read-failed"));
+    return;
+  }
+  let parsedValue;
+  try {
+    parsedValue = JSON.parse(source);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      showImportErrorWithCopyAction(
+        t("paste-config-invalid-json"),
+        async () => copyPasteConfigError(source, error)
+      );
+      return;
+    }
+    showImportError(t("paste-config-invalid-json"));
+    return;
+  }
+  const result = TableConfigC.safeParse(parsedValue);
+  if (!result.success) {
+    showImportErrorWithCopyAction(
+      t("paste-config-invalid-schema"),
+      async () => copyPasteConfigError(source, result.error)
+    );
+    return;
+  }
+  resetDraftState(result.data);
+  await nextTick();
+  await refreshSortable();
+}
+async function copyConfig() {
+  const config = getValidDraftConfig(t("copy-config-failed"));
+  if (!config) {
+    return;
+  }
+  await writeClipboardText(JSON.stringify(config, null, 2), t("copy-config-failed"));
+}
+async function copyMarkdown() {
+  const config = getValidDraftConfig(t("copy-markdown-failed"));
+  if (!config) {
+    return;
+  }
+  await writeClipboardText(buildMarkdownCopyContent(config), t("copy-markdown-failed"));
+}
+function confirmChanges() {
+  if (!validateExpressionEditors()) {
+    return;
+  }
+  const result = buildDraftConfig();
+  if (!result.success) {
+    return;
+  }
+  emit("confirm", result.data);
+  search.value = "";
+  open.value = false;
+}
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="handleOpenChange"
+  >
+    <DialogContent
+      class="flex h-[min(42rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[80vw] sm:max-w-[80vw]"
+      :show-close-button="true"
+      @pointer-down-outside="(event) => event.preventDefault()"
+    >
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <div class="flex items-center gap-3">
+          <DialogTitle class="text-xl font-semibold text-zinc-800">
+            {{ t("configure-table") }}
+          </DialogTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            data-slot="table-configurator-paste"
+            class="shrink-0"
+            @click="pasteConfigFromClipboard"
+          >
+            <Icon icon="fluent:clipboard-paste-20-regular" />
+            {{ t("paste-config") }}
+          </Button>
+        </div>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("configure-table-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[19rem_minmax(0,1fr)]">
+        <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
+          <Input
+            v-model="search"
+            data-slot="table-configurator-search"
+            :placeholder="t('search-columns')"
+          />
+
+          <Button
+            type="button"
+            data-slot="table-configurator-add"
+            class="mt-3 w-full justify-center"
+            @click="addColumn"
+          >
+            <Icon icon="fluent:add-20-regular" />
+            {{ t("add-column") }}
+          </Button>
+
+          <div class="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1">
+              <button
+                type="button"
+                data-slot="table-configurator-item"
+                data-item-id="general"
+                :data-selected="selectedItemId === 'general' ? 'true' : 'false'"
+                :class="cn(
+  'flex w-full items-center rounded-md border p-1 text-left transition-colors',
+  selectedItemId === 'general' ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                @click="selectGeneral"
+              >
+                <span class="truncate px-2 py-2 text-sm font-medium text-zinc-800">{{ generalItem.label }}</span>
+              </button>
+
+              <div
+                data-slot="table-configurator-column-list"
+                class="flex flex-col gap-1"
+              >
+                <div
+                  v-for="item in filteredColumnItems"
+                  :key="item.itemId"
+                  data-slot="table-configurator-item"
+                  :data-item-id="item.itemId"
+                  :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                  :class="cn(
+  'flex w-full items-center gap-2 rounded-md border p-1 transition-colors',
+  selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                  @click="selectItem(item.itemId)"
+                >
+                  <button
+                    type="button"
+                    class="min-w-0 flex-1 px-2 py-2 text-left"
+                  >
+                    <span class="block truncate text-sm font-medium text-zinc-800">{{ item.label }}</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="table-configurator-delete"
+                    class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                    :aria-label="t('delete-column', { column: item.label })"
+                    @click.stop="deleteColumn(item.itemId)"
+                  >
+                    <Icon icon="fluent:delete-20-regular" />
+                  </button>
+                </div>
+              </div>
+
+              <p
+                v-if="normalizedSearch && filteredColumnItems.length === 0"
+                data-slot="table-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("no-matches") }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="flex min-h-0 flex-col overflow-y-auto px-6 py-6">
+          <div class="flex items-center gap-2">
+            <h3
+              data-slot="table-configurator-detail-title"
+              class="text-lg font-semibold text-zinc-800"
+            >
+              {{ selectedItemLabel }}
+            </h3>
+            <Button
+              v-if="selectedColumnTechnicalKey"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="table-configurator-copy-id"
+              class="size-7 p-0 text-zinc-400 hover:text-zinc-700"
+              :aria-label="t('copy-column-id', { column: selectedItemLabel })"
+              :title="selectedColumnTechnicalKey"
+              @click="copySelectedColumnId"
+            >
+              <Icon icon="fluent:copy-20-regular" />
+            </Button>
+          </div>
+          <p
+            v-if="selectedItemId === 'general'"
+            data-slot="table-configurator-detail-description"
+            class="mt-2 text-sm text-zinc-500"
+          >
+            {{ t("general-placeholder") }}
+          </p>
+
+          <div
+            v-if="selectedItemId === 'general'"
+            data-slot="table-configurator-general-fields"
+            class="mt-6 flex flex-col gap-4"
+          >
+            <ExpressionEditor
+              ref="getRowIdEditor"
+              v-model="draftGetRowId"
+              data-field-key="getRowId"
+              :label="t('get-row-id')"
+              :description="t('get-row-id-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigGetRowIdC"
+            />
+
+            <ExpressionEditor
+              ref="getSubRowsEditor"
+              v-model="draftGetSubRows"
+              data-field-key="getSubRows"
+              :label="t('get-sub-rows')"
+              :description="t('get-sub-rows-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigGetSubRowsC"
+            />
+
+            <ExpressionEditor
+              ref="enableRowSelectionEditor"
+              v-model="draftEnableRowSelection"
+              data-field-key="enableRowSelection"
+              :label="t('enable-row-selection')"
+              :description="t('enable-row-selection-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigEnableRowSelectionC"
+            />
+
+            <ExpressionEditor
+              ref="enableMultiRowSelectionEditor"
+              v-model="draftEnableMultiRowSelection"
+              data-field-key="enableMultiRowSelection"
+              :label="t('enable-multi-row-selection')"
+              :description="t('enable-multi-row-selection-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigEnableMultiRowSelectionC"
+            />
+
+            <ExpressionEditor
+              ref="cellStylesEditor"
+              v-model="draftCellStyles"
+              data-field-key="cellStyles"
+              :label="t('cell-styles')"
+              :description="t('cell-styles-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigCellStylesC"
+            />
+
+            <section
+              data-slot="table-configurator-pagination"
+              class="rounded-lg border border-zinc-200 p-4"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("pagination") }}
+              </h4>
+
+              <div class="mt-3 flex flex-col gap-4">
+                <label
+                  data-field-key="paginationLeft"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-left") }}</span>
+                  <Textarea
+                    class="min-h-20"
+                    :model-value="draftPaginationLeft ?? ''"
+                    :placeholder="t('pagination-left-placeholder')"
+                    @update:model-value="updateDraftPaginationLeft"
+                  />
+                </label>
+
+                <label
+                  data-field-key="paginationRight"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-right") }}</span>
+                  <Textarea
+                    class="min-h-20"
+                    :model-value="draftPaginationRight ?? ''"
+                    :placeholder="t('pagination-right-placeholder')"
+                    @update:model-value="updateDraftPaginationRight"
+                  />
+                </label>
+
+                <label
+                  data-field-key="pageSize"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-page-size") }}</span>
+                  <NumberField
+                    :model-value="draftPageSize"
+                    :min="1"
+                    @update:model-value="updateDraftPageSize"
+                  >
+                    <NumberFieldInput class="w-full text-left" />
+                  </NumberField>
+                </label>
+
+                <div
+                  data-field-key="paginationPageSizes"
+                  class="flex flex-col gap-3"
+                >
+                  <div class="flex items-center justify-between gap-3">
+                    <span class="text-xs font-medium text-zinc-500">{{ t("pagination-page-size-options") }}</span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      data-slot="table-configurator-pagination-page-size-add"
+                      class="h-7 px-2 text-xs"
+                      @click="addDraftPaginationPageSizeOption"
+                    >
+                      <Icon icon="fluent:add-20-regular" />
+                      {{ t("add-pagination-page-size") }}
+                    </Button>
+                  </div>
+
+                  <div
+                    v-if="draftPaginationPageSizes.length > 0"
+                    ref="paginationPageSizesSortableListRef"
+                    data-slot="table-configurator-pagination-page-size-list"
+                    class="flex flex-col gap-2"
+                  >
+                    <InputGroup
+                      v-for="item in draftPaginationPageSizes"
+                      :key="item.itemId"
+                      :data-item-id="item.itemId"
+                      data-slot="table-configurator-pagination-page-size-item"
+                      class="overflow-hidden"
+                    >
+                      <InputGroupNumberField
+                        class="flex-1"
+                        :model-value="item.value"
+                        :min="1"
+                        @update:model-value="(value) => updateDraftPaginationPageSizeOption(item.itemId, value)"
+                      />
+
+                      <InputGroupAddon class="w-12 shrink-0 self-stretch border-r border-zinc-200 px-0 py-0">
+                        <div
+                          data-slot="table-configurator-pagination-page-size-drag-handle"
+                          :title="t('drag-pagination-page-size')"
+                          class="flex h-full w-full cursor-grab items-center justify-center text-zinc-400 transition-colors hover:bg-zinc-50 hover:text-zinc-700 active:cursor-grabbing"
+                        >
+                          <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                        </div>
+                      </InputGroupAddon>
+
+                      <InputGroupAddon
+                        align="inline-end"
+                        class="w-12 shrink-0 self-stretch border-l border-zinc-200 px-0 py-0 mr-0"
+                      >
+                        <button
+                          type="button"
+                          data-slot="table-configurator-pagination-page-size-remove"
+                          class="flex h-full w-full items-center justify-center bg-transparent text-red-600 transition-colors hover:bg-red-50 hover:text-red-700"
+                          :aria-label="t('remove-pagination-page-size')"
+                          @click="removeDraftPaginationPageSizeOption(item.itemId)"
+                        >
+                          <Icon icon="fluent:delete-20-regular" />
+                        </button>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-pagination-page-size-empty"
+                    class="text-xs text-zinc-400"
+                  >
+                    {{ t("no-pagination-page-sizes") }}
+                  </p>
+                </div>
+              </div>
+            </section>
+
+            <section
+              data-slot="table-configurator-initial-state"
+              class="rounded-lg border border-zinc-200 p-4"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("initial-state") }}
+              </h4>
+
+              <div class="mt-3 flex flex-col gap-4">
+                <section
+                  data-slot="table-configurator-initial-state-left"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-left-group") }}
+                  </p>
+
+                  <div
+                    v-if="leftPinnedInitialStateItems.length > 0"
+                    ref="leftPinnedSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in leftPinnedInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-left-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-left-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-left-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <button
+                        v-if="item.canManage"
+                        type="button"
+                        data-slot="table-configurator-unpin-from-left"
+                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                        :aria-label="t('unpin-left-column', { column: item.label })"
+                        @click="moveRootItemToGroup(item.itemId, 'center')"
+                      >
+                        <Icon icon="fluent:padding-right-20-regular" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-left-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-left-columns") }}
+                  </p>
+                </section>
+
+                <section
+                  data-slot="table-configurator-initial-state-center"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-center-group") }}
+                  </p>
+
+                  <div
+                    v-if="centerInitialStateItems.length > 0"
+                    ref="centerSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in centerInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-center-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-center-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-center-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <div
+                        v-if="item.canManage"
+                        class="flex items-center gap-1"
+                      >
+                        <button
+                          type="button"
+                          data-slot="table-configurator-pin-left"
+                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                          :aria-label="t('pin-left-column', { column: item.label })"
+                          @click="moveRootItemToGroup(item.itemId, 'left')"
+                        >
+                          <Icon icon="fluent:padding-left-20-regular" />
+                        </button>
+
+                        <button
+                          type="button"
+                          data-slot="table-configurator-pin-right"
+                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                          :aria-label="t('pin-right-column', { column: item.label })"
+                          @click="moveRootItemToGroup(item.itemId, 'right')"
+                        >
+                          <Icon icon="fluent:padding-right-20-regular" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-center-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-center-columns") }}
+                  </p>
+                </section>
+
+                <section
+                  data-slot="table-configurator-initial-state-right"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-right-group") }}
+                  </p>
+
+                  <div
+                    v-if="rightPinnedInitialStateItems.length > 0"
+                    ref="rightPinnedSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in rightPinnedInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-right-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-right-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-right-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <button
+                        v-if="item.canManage"
+                        type="button"
+                        data-slot="table-configurator-unpin-from-right"
+                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                        :aria-label="t('unpin-right-column', { column: item.label })"
+                        @click="moveRootItemToGroup(item.itemId, 'center')"
+                      >
+                        <Icon icon="fluent:padding-left-20-regular" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-right-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-right-columns") }}
+                  </p>
+                </section>
+              </div>
+            </section>
+          </div>
+
+          <div
+            v-else-if="selectedColumn"
+            class="mt-6 flex flex-col gap-6"
+          >
+            <section
+              data-slot="table-configurator-column-main"
+              class="flex flex-col gap-6"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("column-main") }}
+              </h4>
+
+              <div
+                data-slot="table-configurator-locale-field"
+                class="flex flex-col gap-2"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("column-title") }}
+                </p>
+
+                <Locale
+                  data-slot="table-configurator-locale"
+                  :model-value="selectedColumnLocaleValue"
+                  @update:model-value="updateSelectedColumnTitle"
+                />
+              </div>
+
+              <div
+                data-slot="table-configurator-column-options"
+                class="flex flex-col gap-3"
+              >
+                <label
+                  data-field-key="columnSize"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("column-size") }}</span>
+                  <InputGroup class="overflow-hidden">
+                    <InputGroupNumberField
+                      class="flex-1"
+                      :model-value="selectedColumn.size"
+                      :min="1"
+                      @update:model-value="updateSelectedColumnSize"
+                    />
+
+                    <div class="flex h-full items-stretch border-l border-zinc-200">
+                      <Toggle
+                        data-field-key="columnGrow"
+                        class="h-full rounded-none border-0 px-3 text-xs shadow-none"
+                        :model-value="selectedColumn.grow ?? false"
+                        @update:model-value="updateSelectedColumnGrow"
+                      >
+                        <Icon icon="fluent:arrow-fit-20-regular" />
+                        {{ t("column-grow") }}
+                      </Toggle>
+                    </div>
+                  </InputGroup>
+                </label>
+
+                <label
+                  data-field-key="columnEnableSorting"
+                  class="flex items-center justify-between gap-3 py-1"
+                >
+                  <div class="flex flex-col gap-1">
+                    <span class="text-sm font-medium text-zinc-800">{{ t("column-enable-sorting") }}</span>
+                    <span class="text-xs text-zinc-500">{{ t("column-enable-sorting-description") }}</span>
+                  </div>
+                  <Switch
+                    :model-value="selectedColumn.enableSorting ?? false"
+                    @update:model-value="updateSelectedColumnEnableSorting"
+                  />
+                </label>
+              </div>
+
+              <div
+                data-slot="table-configurator-accessor"
+                class="flex flex-col gap-3"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("accessor") }}
+                </p>
+
+                <Tabs
+                  v-model="selectedColumnAccessorMode"
+                  data-slot="table-configurator-accessor-tabs"
+                  class="gap-4"
+                >
+                  <TabsList>
+                    <TabsTrigger value="path">
+                      {{ t("accessor-path-tab") }}
+                    </TabsTrigger>
+                    <TabsTrigger value="expression">
+                      {{ t("accessor-expression-tab") }}
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent
+                    value="path"
+                    class="flex flex-col gap-4"
+                  >
+                    <ExpressionEditor
+                      ref="accessorPathEditor"
+                      data-field-key="accessorPath"
+                      :model-value="selectedColumnAccessorPath"
+                      :label="t('accessor-path')"
+                      :description="t('accessor-path-description')"
+                      :placeholder="t('accessor-path-placeholder')"
+                      :schema="dotPropC"
+                      @update:model-value="updateSelectedColumnAccessorPath"
+                    />
+                  </TabsContent>
+
+                  <TabsContent
+                    value="expression"
+                    class="flex flex-col gap-4"
+                  >
+                    <ExpressionEditor
+                      ref="accessorReadEditor"
+                      data-field-key="accessorRead"
+                      :model-value="selectedColumnAccessorExpression.read"
+                      :label="t('accessor-read')"
+                      :description="t('accessor-read-description')"
+                      :placeholder="t('accessor-read-placeholder')"
+                      :schema="TableConfiguratorColumnAccessorReadC"
+                      @update:model-value="updateSelectedColumnAccessorRead"
+                    />
+
+                    <ExpressionEditor
+                      ref="accessorWriteEditor"
+                      data-field-key="accessorWrite"
+                      :model-value="selectedColumnAccessorExpression.write"
+                      :label="t('accessor-write')"
+                      :description="t('accessor-write-description')"
+                      :placeholder="t('accessor-write-placeholder')"
+                      :schema="TableConfiguratorColumnAccessorWriteC"
+                      @update:model-value="updateSelectedColumnAccessorWrite"
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+
+              <div
+                v-if="!selectedColumnHasChildren"
+                data-slot="table-configurator-renderer"
+                class="flex flex-col gap-3"
+              >
+                <div class="flex items-center justify-between gap-3">
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("renderer") }}
+                  </p>
+
+                  <label
+                    data-field-key="rendererId"
+                    class="min-w-32 max-w-40"
+                  >
+                    <NativeSelect
+                      v-model="selectedColumnRendererModel"
+                      class="w-full"
+                    >
+                      <NativeSelectOption
+                        v-for="item in rendererOptions"
+                        :key="item.id"
+                        :value="item.id"
+                      >
+                        {{ item.label }}
+                      </NativeSelectOption>
+                    </NativeSelect>
+                  </label>
+                </div>
+
+                <component
+                  :is="selectedColumnRendererConfigComponent"
+                  v-if="selectedColumnRendererConfigComponent"
+                  ref="selectedRendererConfigRef"
+                  data-slot="table-configurator-renderer-config"
+                  :model-value="selectedColumnRendererOptions"
+                  @update:model-value="updateSelectedColumnRendererProps"
+                />
+              </div>
+
+              <div
+                data-slot="table-configurator-tooltip"
+                class="flex flex-col gap-3"
+              >
+                <div class="flex flex-col gap-1">
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("tooltip") }}
+                  </p>
+
+                  <p class="text-sm text-zinc-500">
+                    {{ t("tooltip-description", { expression: TOOLTIP_EXPRESSION_EXAMPLE }) }}
+                  </p>
+                </div>
+
+                <Locale
+                  data-slot="table-configurator-tooltip-locale"
+                  :model-value="selectedColumnTooltipValue"
+                  :multiline="true"
+                  @update:model-value="updateSelectedColumnTooltip"
+                />
+              </div>
+            </section>
+
+            <section
+              data-slot="table-configurator-children"
+              class="flex flex-col gap-3"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("child-columns") }}
+              </h4>
+
+              <div
+                data-slot="table-configurator-selected-children"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("selected-children") }}
+                </p>
+
+                <div
+                  v-if="selectedChildItems.length > 0"
+                  ref="selectedChildSortableListRef"
+                  class="mt-2 flex flex-col gap-1"
+                >
+                  <div
+                    v-for="item in selectedChildItems"
+                    :key="item.itemId"
+                    data-slot="table-configurator-child-item"
+                    class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                  >
+                    <button
+                      type="button"
+                      data-slot="table-configurator-child-drag-handle"
+                      class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                      :aria-label="t('drag-child-column', { column: item.label })"
+                    >
+                      <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                    </button>
+
+                    <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                    <button
+                      type="button"
+                      data-slot="table-configurator-child-remove"
+                      class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                      :aria-label="t('remove-child-column', { column: item.label })"
+                      @click="removeSelectedChild(item.itemId)"
+                    >
+                      <Icon icon="fluent:dismiss-20-regular" />
+                    </button>
+                  </div>
+                </div>
+
+                <p
+                  v-else
+                  data-slot="table-configurator-child-empty"
+                  class="mt-2 text-xs text-zinc-400"
+                >
+                  {{ t("no-selected-children") }}
+                </p>
+              </div>
+
+              <div
+                data-slot="table-configurator-child-candidates"
+                class="border-t border-zinc-200 pt-3"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("available-columns") }}
+                </p>
+
+                <Input
+                  v-model="childSearch"
+                  data-slot="table-configurator-child-search"
+                  class="mt-2"
+                  :placeholder="t('search-child-columns')"
+                />
+
+                <div
+                  v-if="filteredChildCandidateItems.length > 0"
+                  class="mt-3 flex flex-col gap-1"
+                >
+                  <label
+                    v-for="item in filteredChildCandidateItems"
+                    :key="item.itemId"
+                    data-slot="table-configurator-child-candidate"
+                    class="flex items-center gap-3 rounded-md border border-transparent p-1 text-sm text-zinc-700"
+                  >
+                    <Checkbox
+                      :model-value="false"
+                      @update:model-value="(value) => toggleChildSelection(item.itemId, value)"
+                    />
+                    <span class="min-w-0 truncate font-medium text-zinc-800">{{ item.label }}</span>
+                  </label>
+                </div>
+
+                <p
+                  v-else-if="normalizedChildSearch"
+                  data-slot="table-configurator-candidate-empty"
+                  class="mt-3 text-xs text-zinc-400"
+                >
+                  {{ t("no-child-matches") }}
+                </p>
+
+                <p
+                  v-else
+                  data-slot="table-configurator-candidate-empty"
+                  class="mt-3 text-xs text-zinc-400"
+                >
+                  {{ t("no-available-columns") }}
+                </p>
+              </div>
+            </section>
+          </div>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4 sm:justify-between">
+        <div
+          data-slot="table-configurator-copy-actions"
+          class="flex items-center gap-2"
+        >
+          <Button
+            type="button"
+            data-slot="table-configurator-copy-markdown"
+            variant="ghost"
+            @click="copyMarkdown"
+          >
+            <Icon icon="simple-icons:markdown" />
+            {{ t("copy-markdown") }}
+          </Button>
+          <Button
+            type="button"
+            data-slot="table-configurator-copy-config"
+            variant="ghost"
+            @click="copyConfig"
+          >
+            <Icon icon="fluent:copy-20-regular" />
+            {{ t("copy-config") }}
+          </Button>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            type="button"
+            data-slot="table-configurator-cancel"
+            variant="default"
+            @click="discardChanges"
+          >
+            <Icon icon="fluent:dismiss-20-regular" />
+            {{ t("cancel") }}
+          </Button>
+          <Button
+            type="button"
+            data-slot="table-configurator-confirm"
+            variant="primary"
+            @click="confirmChanges"
+          >
+            <Icon icon="fluent:checkmark-20-regular" />
+            {{ t("confirm") }}
+          </Button>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "configure-table": "配置表格",
+    "configure-table-description": "在这里浏览表格和列配置项。",
+    "paste-config": "粘贴配置",
+    "paste-config-invalid-json": "粘贴失败，剪贴板不是有效的 JSON。",
+    "paste-config-invalid-schema": "粘贴失败，配置格式无效。",
+    "paste-config-read-failed": "读取剪贴板失败，请检查剪贴板权限。",
+    "copy-paste-error": "复制错误",
+    "copy-paste-error-failed": "复制错误详情失败，请检查剪贴板权限。",
+    "copy-markdown": "复制为 Markdown",
+    "copy-markdown-failed": "复制 Markdown 失败，请先修正当前配置中的错误。",
+    "copy-config": "仅复制配置",
+    "copy-config-failed": "复制配置失败，请先修正当前配置中的错误。",
+    "search-columns": "搜索列名称……",
+    "general": "通用",
+    "no-matches": "没有匹配的列。",
+    "general-placeholder": "配置当前表格的通用 CEL 表达式。",
+    "expression-placeholder": "输入 CEL 表达式",
+    "accessor": "取值配置",
+    "accessor-path-tab": "路径",
+    "accessor-expression-tab": "表达式",
+    "accessor-path": "路径",
+    "accessor-path-description": "使用 dot-prop 路径从 row 读取值，如 foo.bar 或 foo[0].bar。",
+    "accessor-path-placeholder": "输入 dot-prop 路径",
+    "accessor-read": "读取表达式",
+    "accessor-read-description": "返回列值的 CEL 表达式，可使用 row、index 变量。",
+    "accessor-read-placeholder": "输入读取用 CEL 表达式",
+    "accessor-write": "写入表达式",
+    "accessor-write-description": "保存列值时使用的表达式。",
+    "accessor-write-placeholder": "输入写入表达式",
+    "tooltip": "提示",
+    "tooltip-description": "列提示支持 Markdown 编辑，并支持在 {expression} 中求值。",
+    "get-row-id": "行 ID",
+    "get-row-id-description": "返回 string 的 CEL 表达式，可使用 row、index、parent 变量。",
+    "get-sub-rows": "子行",
+    "get-sub-rows-description": "返回子行数据的 CEL 表达式，可使用 row、index 变量。",
+    "enable-row-selection": "启用行选择",
+    "enable-row-selection-description": "返回 bool 的 CEL 表达式，可使用 row、index、id 变量。",
+    "enable-multi-row-selection": "启用多选",
+    "enable-multi-row-selection-description": "返回 bool 的 CEL 表达式，可使用 row、index、id 变量。",
+    "cell-styles": "单元格样式",
+    "cell-styles-description": "返回样式对象的 CEL 表达式，可使用 row、index、id、selected、pinned 变量。",
+    "pagination": "分页",
+    "pagination-left": "左侧文案",
+    "pagination-left-placeholder": "输入分页左侧 Markdown",
+    "pagination-right": "右侧文案",
+    "pagination-right-placeholder": "输入分页右侧 Markdown",
+    "pagination-page-size": "每页条数",
+    "pagination-page-size-options": "每页条数选项",
+    "add-pagination-page-size": "新增选项",
+    "drag-pagination-page-size": "拖拽调整每页条数选项顺序",
+    "remove-pagination-page-size": "删除每页条数选项",
+    "no-pagination-page-sizes": "暂未配置每页条数选项。",
+    "initial-state": "初始状态",
+    "column-options": "列配置",
+    "column-main": "基本",
+    "column-title": "标题",
+    "column-size": "列宽",
+    "column-grow": "自适应增长",
+    "column-grow-description": "启用后该列会占据剩余空间。",
+    "column-enable-sorting": "启用排序",
+    "column-enable-sorting-description": "启用后表头会显示排序操作。",
+    "renderer": "渲染器",
+    "renderer-type": "渲染器类型",
+    "renderer-name-text": "文本",
+    "renderer-name-selection": "选择",
+    "renderer-name-expand": "展开",
+    "renderer-name-money": "金额",
+    "renderer-name-date": "日期",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "左侧组",
+    "pinned-center-group": "中间组",
+    "pinned-right-group": "右侧组",
+    "child-columns": "子列",
+    "selected-children": "已选子列",
+    "available-columns": "可选列",
+    "search-child-columns": "搜索可选列……",
+    "no-child-matches": "没有匹配的可选列。",
+    "no-pinned-left-columns": "左侧组暂无列。",
+    "no-pinned-center-columns": "中间组暂无列。",
+    "no-pinned-right-columns": "右侧组暂无列。",
+    "no-selected-children": "当前列还没有子列。",
+    "no-available-columns": "没有可添加的列。",
+    "add-column": "新增列",
+    "drag-left-column": "拖拽调整左侧组顺序：{column}",
+    "drag-center-column": "拖拽调整中间组顺序：{column}",
+    "drag-right-column": "拖拽调整右侧组顺序：{column}",
+    "pin-left-column": "固定到左侧组：{column}",
+    "pin-right-column": "固定到右侧组：{column}",
+    "unpin-left-column": "从左侧组释放到中间组：{column}",
+    "unpin-right-column": "从右侧组释放到中间组：{column}",
+    "drag-child-column": "拖拽调整子列顺序：{column}",
+    "delete-column": "删除列：{column}",
+    "remove-child-column": "移出子列：{column}",
+    "copy-column-id": "复制列 ID：{column}",
+    "untitled-column": "未命名列",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "ja": {
+    "configure-table": "テーブルを設定",
+    "configure-table-description": "ここではテーブルと列の設定項目を確認できます。",
+    "paste-config": "設定を貼り付け",
+    "paste-config-invalid-json": "貼り付けに失敗しました。クリップボードの内容が有効な JSON ではありません。",
+    "paste-config-invalid-schema": "貼り付けに失敗しました。設定形式が無効です。",
+    "paste-config-read-failed": "クリップボードの読み取りに失敗しました。権限を確認してください。",
+    "copy-paste-error": "エラーをコピー",
+    "copy-paste-error-failed": "エラー詳細のコピーに失敗しました。クリップボード権限を確認してください。",
+    "copy-markdown": "Markdown としてコピー",
+    "copy-markdown-failed": "Markdown のコピーに失敗しました。現在の設定エラーを先に修正してください。",
+    "copy-config": "設定のみコピー",
+    "copy-config-failed": "設定のコピーに失敗しました。現在の設定エラーを先に修正してください。",
+    "search-columns": "列名を検索…",
+    "general": "共通",
+    "no-matches": "一致する列がありません。",
+    "general-placeholder": "このテーブルの共通 CEL 式を設定します。",
+    "expression-placeholder": "CEL 式を入力",
+    "accessor": "アクセサ",
+    "accessor-path-tab": "パス",
+    "accessor-expression-tab": "式",
+    "accessor-path": "パス",
+    "accessor-path-description": "foo.bar や foo[0].bar のような dot-prop パスで row から値を読み取ります。",
+    "accessor-path-placeholder": "dot-prop パスを入力",
+    "accessor-read": "読み取り式",
+    "accessor-read-description": "列値を返す CEL 式です。row、index を利用できます。",
+    "accessor-read-placeholder": "読み取り用 CEL 式を入力",
+    "accessor-write": "書き込み式",
+    "accessor-write-description": "列値を書き戻すときに使う式です。",
+    "accessor-write-placeholder": "書き込み式を入力",
+    "tooltip": "ツールチップ",
+    "tooltip-description": "列ツールチップは Markdown で編集でき、{expression} も利用できます。",
+    "get-row-id": "行 ID",
+    "get-row-id-description": "string を返す CEL 式です。row、index、parent を利用できます。",
+    "get-sub-rows": "子行",
+    "get-sub-rows-description": "子行データを返す CEL 式です。row、index を利用できます。",
+    "enable-row-selection": "行選択を有効化",
+    "enable-row-selection-description": "bool を返す CEL 式です。row、index、id を利用できます。",
+    "enable-multi-row-selection": "複数選択を有効化",
+    "enable-multi-row-selection-description": "bool を返す CEL 式です。row、index、id を利用できます。",
+    "cell-styles": "セルスタイル",
+    "cell-styles-description": "スタイルオブジェクトを返す CEL 式です。row、index、id、selected、pinned を利用できます。",
+    "pagination": "ページネーション",
+    "pagination-left": "左側テキスト",
+    "pagination-left-placeholder": "左側の Markdown を入力",
+    "pagination-right": "右側テキスト",
+    "pagination-right-placeholder": "右側の Markdown を入力",
+    "pagination-page-size": "1ページあたりの件数",
+    "pagination-page-size-options": "1ページあたりの件数候補",
+    "add-pagination-page-size": "候補を追加",
+    "drag-pagination-page-size": "ドラッグして1ページあたりの件数候補の順序を変更",
+    "remove-pagination-page-size": "1ページあたりの件数候補を削除",
+    "no-pagination-page-sizes": "1ページあたりの件数候補はまだありません。",
+    "initial-state": "初期状態",
+    "column-options": "列設定",
+    "column-main": "基本",
+    "column-title": "タイトル",
+    "column-size": "列幅",
+    "column-grow": "可変幅",
+    "column-grow-description": "有効にすると余白を埋めるように広がります。",
+    "column-enable-sorting": "ソートを有効化",
+    "column-enable-sorting-description": "有効にするとヘッダーにソート操作を表示します。",
+    "renderer": "レンダラー",
+    "renderer-type": "レンダラー種別",
+    "renderer-name-text": "テキスト",
+    "renderer-name-selection": "選択",
+    "renderer-name-expand": "展開",
+    "renderer-name-money": "金額",
+    "renderer-name-date": "日付",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "左側グループ",
+    "pinned-center-group": "中央グループ",
+    "pinned-right-group": "右側グループ",
+    "child-columns": "子列",
+    "selected-children": "選択済みの子列",
+    "available-columns": "追加可能な列",
+    "search-child-columns": "追加可能な列を検索…",
+    "no-child-matches": "一致する追加可能な列がありません。",
+    "no-pinned-left-columns": "左側グループに列がありません。",
+    "no-pinned-center-columns": "中央グループに列がありません。",
+    "no-pinned-right-columns": "右側グループに列がありません。",
+    "no-selected-children": "この列にはまだ子列がありません。",
+    "no-available-columns": "追加できる列がありません。",
+    "add-column": "列を追加",
+    "drag-left-column": "{column} の左側グループ順をドラッグで変更",
+    "drag-center-column": "{column} の中央グループ順をドラッグで変更",
+    "drag-right-column": "{column} の右側グループ順をドラッグで変更",
+    "pin-left-column": "{column} を左側グループに固定",
+    "pin-right-column": "{column} を右側グループに固定",
+    "unpin-left-column": "{column} を左側グループから中央グループに戻す",
+    "unpin-right-column": "{column} を右側グループから中央グループに戻す",
+    "drag-child-column": "{column} の子列順をドラッグで変更",
+    "delete-column": "{column} を削除",
+    "remove-child-column": "{column} を子列から外す",
+    "copy-column-id": "{column} の列 ID をコピー",
+    "untitled-column": "未設定の列",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "en": {
+    "configure-table": "Configure Table",
+    "configure-table-description": "Browse the table and column settings here.",
+    "paste-config": "Paste Config",
+    "paste-config-invalid-json": "Paste failed because the clipboard does not contain valid JSON.",
+    "paste-config-invalid-schema": "Paste failed because the config shape is invalid.",
+    "paste-config-read-failed": "Failed to read from the clipboard. Check clipboard permissions.",
+    "copy-paste-error": "Copy Error",
+    "copy-paste-error-failed": "Failed to copy the error details. Check clipboard permissions.",
+    "copy-markdown": "Copy as Markdown",
+    "copy-markdown-failed": "Failed to copy Markdown. Fix the current config errors first.",
+    "copy-config": "Copy Config Only",
+    "copy-config-failed": "Failed to copy the config. Fix the current config errors first.",
+    "search-columns": "Search columns…",
+    "general": "General",
+    "no-matches": "No matching columns.",
+    "general-placeholder": "Configure the shared CEL expressions for this table.",
+    "expression-placeholder": "Enter a CEL expression",
+    "accessor": "Accessor",
+    "accessor-path-tab": "Path",
+    "accessor-expression-tab": "Expression",
+    "accessor-path": "Path",
+    "accessor-path-description": "Read from row with a dot-prop path such as foo.bar or foo[0].bar.",
+    "accessor-path-placeholder": "Enter a dot-prop path",
+    "accessor-read": "Read expression",
+    "accessor-read-description": "CEL expression that returns the column value. Variables: row, index.",
+    "accessor-read-placeholder": "Enter a read CEL expression",
+    "accessor-write": "Write expression",
+    "accessor-write-description": "Expression used when writing the column value back.",
+    "accessor-write-placeholder": "Enter a write expression",
+    "tooltip": "Tooltip",
+    "tooltip-description": "Column tooltips support Markdown and can evaluate {expression}.",
+    "get-row-id": "Row ID",
+    "get-row-id-description": "CEL expression that returns a string. Variables: row, index, parent.",
+    "get-sub-rows": "Sub rows",
+    "get-sub-rows-description": "CEL expression that returns sub-row data. Variables: row, index.",
+    "enable-row-selection": "Enable row selection",
+    "enable-row-selection-description": "CEL expression that returns a bool. Variables: row, index, id.",
+    "enable-multi-row-selection": "Enable multi row selection",
+    "enable-multi-row-selection-description": "CEL expression that returns a bool. Variables: row, index, id.",
+    "cell-styles": "Cell styles",
+    "cell-styles-description": "CEL expression that returns a style map. Variables: row, index, id, selected, pinned.",
+    "pagination": "Pagination",
+    "pagination-left": "Left content",
+    "pagination-left-placeholder": "Enter left pagination markdown",
+    "pagination-right": "Right content",
+    "pagination-right-placeholder": "Enter right pagination markdown",
+    "pagination-page-size": "Page size",
+    "pagination-page-size-options": "Page size options",
+    "add-pagination-page-size": "Add option",
+    "drag-pagination-page-size": "Drag to reorder page size options",
+    "remove-pagination-page-size": "Remove page size option",
+    "no-pagination-page-sizes": "No page size options configured.",
+    "initial-state": "Initial State",
+    "column-options": "Column options",
+    "column-main": "Basics",
+    "column-title": "Title",
+    "column-size": "Column size",
+    "column-grow": "Grow",
+    "column-grow-description": "Allow this column to fill remaining horizontal space.",
+    "column-enable-sorting": "Enable sorting",
+    "column-enable-sorting-description": "Show sorting controls in the header.",
+    "renderer": "Renderer",
+    "renderer-type": "Renderer type",
+    "renderer-name-text": "Text",
+    "renderer-name-selection": "Selection",
+    "renderer-name-expand": "Expand",
+    "renderer-name-money": "Money",
+    "renderer-name-date": "Date",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "Left group",
+    "pinned-center-group": "Center group",
+    "pinned-right-group": "Right group",
+    "child-columns": "Child columns",
+    "selected-children": "Selected child columns",
+    "available-columns": "Available columns",
+    "search-child-columns": "Search available columns…",
+    "no-child-matches": "No matching available columns.",
+    "no-pinned-left-columns": "No columns in the left group.",
+    "no-pinned-center-columns": "No columns in the center group.",
+    "no-pinned-right-columns": "No columns in the right group.",
+    "no-selected-children": "This column has no child columns yet.",
+    "no-available-columns": "No columns can be added here.",
+    "add-column": "Add column",
+    "drag-left-column": "Drag to reorder left group column {column}",
+    "drag-center-column": "Drag to reorder center group column {column}",
+    "drag-right-column": "Drag to reorder right group column {column}",
+    "pin-left-column": "Pin {column} to the left group",
+    "pin-right-column": "Pin {column} to the right group",
+    "unpin-left-column": "Move {column} from the left group to the center group",
+    "unpin-right-column": "Move {column} from the right group to the center group",
+    "drag-child-column": "Drag to reorder child column {column}",
+    "delete-column": "Delete {column}",
+    "remove-child-column": "Remove child column {column}",
+    "untitled-column": "Untitled column",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}
+</i18n>