@shwfed/nuxt 0.7.10 → 0.8.0

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

@@ -6,7 +6,7 @@ import z from "zod";
 import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTableRenderers } from "../../../composables/useTableRenderers";
-import { dotPropC, expressionC } from "../../../utils/coders";
+import { dotPropC, expressionC, getLocalizedText, hasVisibleLocaleValue } from "../../../utils/coders";
 import { cn } from "../../../utils/cn";
 import ExpressionEditor from "../expression-editor/ExpressionEditor.vue";
 import { Button } from "../button";
@@ -20,7 +20,7 @@ import {
   DialogTitle
 } from "../dialog";
 import { Input } from "../input";
-import { InputGroup, InputGroupNumberField } from "../input-group";
+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";
@@ -30,7 +30,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
 import { Toggle } from "../toggle";
 import {
   getColumnTechnicalKey,
-  getLocalizedText,
+  normalizePaginationPageSizes,
+  resolvePaginationPageSize,
   TableConfigC,
   TableConfigCellStylesC,
   TableConfigEnableMultiRowSelectionC,
@@ -57,6 +58,7 @@ const GENERATED_COLUMN_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab]
 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 TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP = "table-configurator-initial-state";
 const props = defineProps({
   config: { type: Object, required: true }
 });
@@ -66,7 +68,7 @@ const open = defineModel("open", { type: Boolean, ...{
 } });
 const { $toast } = useNuxtApp();
 const { t, locale } = useI18n();
-const { listTableRenderers, resolveTableRenderer } = useTableRenderers();
+const { getTableRenderer, listTableRenderers, resolveTableRenderer } = useTableRenderers();
 const search = ref("");
 const childSearch = ref("");
 const selectedItemId = ref("general");
@@ -80,6 +82,7 @@ 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);
@@ -89,6 +92,8 @@ 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);
@@ -96,7 +101,6 @@ const getSubRowsEditor = ref(null);
 const enableRowSelectionEditor = ref(null);
 const enableMultiRowSelectionEditor = ref(null);
 const cellStylesEditor = ref(null);
-const importInputRef = ref(null);
 const accessorPathEditor = ref(null);
 const accessorReadEditor = ref(null);
 const accessorWriteEditor = ref(null);
@@ -367,6 +371,18 @@ function normalizeOptionalNumber(value) {
 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;
@@ -482,6 +498,35 @@ function reorderItemIds(itemIds, oldIndex, newIndex) {
   nextItemIds.splice(newIndex, 0, movedItemId);
   return nextItemIds;
 }
+function clampInsertionIndex(index, itemCount) {
+  return Math.min(Math.max(index, 0), itemCount);
+}
+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) {
@@ -530,6 +575,7 @@ function initializeInitialStateGroups(config) {
   rightPinnedRootItemIds.value = rightItemIds;
 }
 function resetDraftState(config) {
+  const nextPaginationPageSizes = getInitialPaginationPageSizes(config);
   draftBaseConfig.value = config;
   draftColumnTree.value = buildTableConfiguratorColumnTree(config.columns);
   draftGetRowId.value = config.getRowId;
@@ -539,8 +585,10 @@ function resetDraftState(config) {
   draftCellStyles.value = config.cellStyles;
   draftPaginationLeft.value = config.paginationLeft;
   draftPaginationRight.value = config.paginationRight;
-  draftPageSize.value = getInitialPageSize(config);
+  draftPageSize.value = resolvePaginationPageSize(getInitialPageSize(config), nextPaginationPageSizes);
+  draftPaginationPageSizes.value = createPaginationPageSizeItems(nextPaginationPageSizes);
   initializeInitialStateGroups(config);
+  syncDraftColumnTreeRootOrder();
   childSearch.value = "";
   selectedItemId.value = "general";
   clearExpressionValidation();
@@ -553,11 +601,13 @@ watch(() => props.config, (config) => {
 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() {
@@ -596,17 +646,87 @@ function normalizeInitialStateGroups() {
   centerRootItemIds.value = centerItemIds;
   rightPinnedRootItemIds.value = rightItemIds;
 }
+function resolveInitialStateGroupByElement(element) {
+  if (!element) {
+    return void 0;
+  }
+  if (element === leftPinnedSortableListRef.value) {
+    return "left";
+  }
+  if (element === centerSortableListRef.value) {
+    return "center";
+  }
+  if (element === rightPinnedSortableListRef.value) {
+    return "right";
+  }
+  return void 0;
+}
+function getInitialStateGroupItemIds(group) {
+  if (group === "left") {
+    return leftPinnedRootItemIds.value.slice();
+  }
+  if (group === "center") {
+    return centerRootItemIds.value.slice();
+  }
+  return rightPinnedRootItemIds.value.slice();
+}
+function setInitialStateGroupItemIds(group, itemIds) {
+  if (group === "left") {
+    leftPinnedRootItemIds.value = itemIds;
+    return;
+  }
+  if (group === "center") {
+    centerRootItemIds.value = itemIds;
+    return;
+  }
+  rightPinnedRootItemIds.value = itemIds;
+}
+function reorderInitialStateGroup(group, oldIndex, newIndex) {
+  setInitialStateGroupItemIds(
+    group,
+    reorderItemIds(getInitialStateGroupItemIds(group), oldIndex, newIndex)
+  );
+}
+function canMoveInitialStateItemToGroup(itemId, group) {
+  if (group === "center") {
+    return true;
+  }
+  return rootInitialStateItems.value.some((item) => item.itemId === itemId && item.canManage);
+}
+function moveInitialStateItemBetweenGroups(fromGroup, toGroup, oldIndex, newIndex) {
+  if (fromGroup === toGroup) {
+    reorderInitialStateGroup(toGroup, oldIndex, newIndex);
+    return;
+  }
+  const sourceItemIds = getInitialStateGroupItemIds(fromGroup);
+  const targetItemIds = getInitialStateGroupItemIds(toGroup);
+  const movedItemId = sourceItemIds[oldIndex];
+  if (!movedItemId || !canMoveInitialStateItemToGroup(movedItemId, toGroup)) {
+    return;
+  }
+  const nextSourceItemIds = sourceItemIds.filter((_, index) => index !== oldIndex);
+  const nextTargetItemIds = targetItemIds.slice();
+  nextTargetItemIds.splice(clampInsertionIndex(newIndex, nextTargetItemIds.length), 0, movedItemId);
+  setInitialStateGroupItemIds(fromGroup, nextSourceItemIds);
+  setInitialStateGroupItemIds(toGroup, nextTargetItemIds);
+}
+function handleInitialStateSortableAdd(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  const fromGroup = resolveInitialStateGroupByElement(event.from);
+  const toGroup = resolveInitialStateGroupByElement(event.to);
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || !fromGroup || !toGroup) {
+    return;
+  }
+  moveInitialStateItemBetweenGroups(fromGroup, toGroup, oldIndex, newIndex);
+}
 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
-  );
+  reorderInitialStateGroup("left", oldIndex, newIndex);
 }
 function handleCenterSortableUpdate(event) {
   const oldIndex = event.oldIndex;
@@ -614,11 +734,7 @@ function handleCenterSortableUpdate(event) {
   if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
     return;
   }
-  centerRootItemIds.value = reorderItemIds(
-    centerRootItemIds.value,
-    oldIndex,
-    newIndex
-  );
+  reorderInitialStateGroup("center", oldIndex, newIndex);
 }
 function handleRightPinnedSortableUpdate(event) {
   const oldIndex = event.oldIndex;
@@ -626,11 +742,24 @@ function handleRightPinnedSortableUpdate(event) {
   if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
     return;
   }
-  rightPinnedRootItemIds.value = reorderItemIds(
-    rightPinnedRootItemIds.value,
+  reorderInitialStateGroup("right", 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;
@@ -648,18 +777,26 @@ function handleChildSortableUpdate(event) {
 }
 function configureLeftPinnedSortable() {
   leftPinnedSortable.option("animation", 150);
-  leftPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-left-drag-handle"]');
+  leftPinnedSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   leftPinnedSortable.option("onUpdate", handleLeftPinnedSortableUpdate);
+  leftPinnedSortable.option("onAdd", handleInitialStateSortableAdd);
 }
 function configureCenterSortable() {
   centerSortable.option("animation", 150);
-  centerSortable.option("handle", '[data-slot="table-configurator-initial-state-center-drag-handle"]');
+  centerSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   centerSortable.option("onUpdate", handleCenterSortableUpdate);
+  centerSortable.option("onAdd", handleInitialStateSortableAdd);
 }
 function configureRightPinnedSortable() {
   rightPinnedSortable.option("animation", 150);
-  rightPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-right-drag-handle"]');
+  rightPinnedSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   rightPinnedSortable.option("onUpdate", handleRightPinnedSortableUpdate);
+  rightPinnedSortable.option("onAdd", handleInitialStateSortableAdd);
+}
+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);
@@ -670,6 +807,7 @@ async function refreshSortable() {
   leftPinnedSortable.stop();
   centerSortable.stop();
   rightPinnedSortable.stop();
+  paginationPageSizesSortable.stop();
   childSortable.stop();
   if (!open.value) {
     return;
@@ -679,9 +817,11 @@ async function refreshSortable() {
     leftPinnedSortable.start();
     centerSortable.start();
     rightPinnedSortable.start();
+    paginationPageSizesSortable.start();
     configureLeftPinnedSortable();
     configureCenterSortable();
     configureRightPinnedSortable();
+    configurePaginationPageSizesSortable();
     return;
   }
   if (selectedColumnNode.value) {
@@ -692,9 +832,18 @@ async function refreshSortable() {
 watch(rootInitialStateItems, () => {
   normalizeInitialStateGroups();
 }, { immediate: true });
-watch([draftColumnTree, selectedItemId, leftPinnedRootItemIds, centerRootItemIds, rightPinnedRootItemIds], () => {
+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);
@@ -704,6 +853,7 @@ watch(open, async (value) => {
   leftPinnedSortable.stop();
   centerSortable.stop();
   rightPinnedSortable.stop();
+  paginationPageSizesSortable.stop();
   childSortable.stop();
   childSearch.value = "";
   search.value = "";
@@ -744,15 +894,14 @@ watch(filteredColumnItems, (items) => {
 watch(selectedColumnRendererId, () => {
   clearRendererValidation();
 });
-function hasVisibleTitle(value) {
-  return value?.some((item) => item.message.trim().length > 0) ?? false;
-}
 function normalizeColumn(column) {
-  const title = hasVisibleTitle(column.title) ? column.title : void 0;
-  const tooltip = hasVisibleTitle(column.tooltip) ? column.tooltip : void 0;
+  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
@@ -777,21 +926,6 @@ function selectGeneral() {
 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()
@@ -1077,9 +1211,34 @@ function updateDraftPaginationRight(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 nextPageSize = draftPageSize.value;
+  const nextPaginationPageSizes = buildNextPaginationPageSizes();
+  const nextPageSize = resolvePaginationPageSize(draftPageSize.value, nextPaginationPageSizes);
   if (!currentPagination && nextPageSize === void 0) {
     return void 0;
   }
@@ -1098,6 +1257,7 @@ function buildDraftConfig() {
     cellStyles: draftCellStyles.value,
     paginationLeft: normalizeOptionalText(draftPaginationLeft.value),
     paginationRight: normalizeOptionalText(draftPaginationRight.value),
+    paginationPageSizes: buildNextPaginationPageSizes(),
     columns: materializeTableConfiguratorColumnTree(draftColumnTree.value).map(normalizeColumn),
     props: {
       ...draftBaseConfig.value.props,
@@ -1114,68 +1274,320 @@ function buildDraftConfig() {
     }
   });
 }
-function triggerImport() {
-  importInputRef.value?.click();
-}
 function showImportError(message) {
   $toast.error(message);
 }
-function showExportError() {
-  $toast.error(t("export-config-failed"));
+function showCopyError(message) {
+  $toast.error(message);
 }
-async function handleImportChange(event) {
-  const target = event.target;
-  if (!(target instanceof HTMLInputElement)) {
-    return;
+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 file = target.files?.[0];
-  try {
-    if (!file) {
-      return;
+  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 source = await file.text();
-    let parsedValue;
-    try {
-      parsedValue = JSON.parse(source);
-    } catch {
-      showImportError(t("import-config-invalid-json"));
-      return;
+    const rendererId = getColumnRendererId(column);
+    if (!rendererIds.includes(rendererId)) {
+      rendererIds.push(rendererId);
     }
-    const result = TableConfigC.safeParse(parsedValue);
-    if (!result.success) {
-      showImportError(t("import-config-invalid-schema"));
-      return;
+  }
+  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");
     }
-    resetDraftState(result.data);
-    await nextTick();
-    await refreshSortable();
-  } finally {
-    target.value = "";
+    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);
   }
 }
-function exportConfig() {
-  if (!validateExpressionEditors()) {
-    showExportError();
+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;
   }
-  const result = buildDraftConfig();
+  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) {
-    showExportError();
+    showImportErrorWithCopyAction(
+      t("paste-config-invalid-schema"),
+      async () => copyPasteConfigError(source, result.error)
+    );
     return;
   }
-  try {
-    const blob = new Blob([JSON.stringify(result.data, null, 2)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = "table-config.json";
-    document.body.append(link);
-    link.click();
-    link.remove();
-    URL.revokeObjectURL(url);
-  } catch {
-    showExportError();
+  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()) {
@@ -1199,6 +1611,7 @@ function confirmChanges() {
     <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">
@@ -1209,21 +1622,13 @@ function confirmChanges() {
             type="button"
             variant="ghost"
             size="sm"
-            data-slot="table-configurator-import"
+            data-slot="table-configurator-paste"
             class="shrink-0"
-            @click="triggerImport"
+            @click="pasteConfigFromClipboard"
           >
-            <Icon icon="fluent:arrow-upload-20-regular" />
-            {{ t("import-config") }}
+            <Icon icon="fluent:clipboard-paste-20-regular" />
+            {{ t("paste-config") }}
           </Button>
-          <input
-            ref="importInputRef"
-            data-slot="table-configurator-import-input"
-            class="hidden"
-            type="file"
-            accept="application/json,.json"
-            @change="handleImportChange"
-          >
         </div>
         <DialogDescription class="text-sm text-zinc-500">
           {{ t("configure-table-description") }}
@@ -1397,13 +1802,13 @@ function confirmChanges() {
 
             <section
               data-slot="table-configurator-pagination"
-              class="rounded-lg border border-zinc-200 p-4"
+              class="border-t border-zinc-200 pt-4"
             >
               <h4 class="text-sm font-semibold text-zinc-800">
                 {{ t("pagination") }}
               </h4>
 
-              <div class="mt-3 flex flex-col gap-4">
+              <div class="mt-4 flex flex-col gap-4">
                 <label
                   data-field-key="paginationLeft"
                   class="flex flex-col gap-1"
@@ -1443,186 +1848,214 @@ function confirmChanges() {
                     <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"
+              class="border-t border-zinc-200 pt-4"
             >
               <h4 class="text-sm font-semibold text-zinc-800">
                 {{ t("initial-state") }}
               </h4>
 
-              <div class="mt-3 flex flex-col gap-4">
+              <div class="mt-4 grid gap-3 xl:grid-cols-3">
                 <section
                   data-slot="table-configurator-initial-state-left"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-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"
+                    data-slot="table-configurator-initial-state-left-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-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"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         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 })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <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>
+                    <p
+                      v-if="leftPinnedInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-left-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-left-columns") }}
+                    </p>
+                  </div>
                 </section>
 
                 <section
                   data-slot="table-configurator-initial-state-center"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-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"
+                    data-slot="table-configurator-initial-state-center-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-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"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         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 })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <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>
+                    <p
+                      v-if="centerInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-center-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-center-columns") }}
+                    </p>
+                  </div>
                 </section>
 
                 <section
                   data-slot="table-configurator-initial-state-right"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-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"
+                    data-slot="table-configurator-initial-state-right-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-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"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         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 })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <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>
+                    <p
+                      v-if="rightPinnedInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-right-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-right-columns") }}
+                    </p>
+                  </div>
                 </section>
               </div>
             </section>
@@ -1674,6 +2107,7 @@ function confirmChanges() {
 
                     <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"
@@ -1685,7 +2119,10 @@ function confirmChanges() {
                   </InputGroup>
                 </label>
 
-                <label class="flex items-center justify-between gap-3 py-1">
+                <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>
@@ -1938,34 +2375,50 @@ function confirmChanges() {
         </section>
       </div>
 
-      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
-        <Button
-          type="button"
-          data-slot="table-configurator-export"
-          variant="ghost"
-          @click="exportConfig"
-        >
-          <Icon icon="fluent:arrow-download-20-regular" />
-          {{ t("export-config") }}
-        </Button>
-        <Button
-          type="button"
-          data-slot="table-configurator-cancel"
-          variant="default"
-          @click="discardChanges"
+      <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"
         >
-          <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>
+          <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>
@@ -1976,11 +2429,16 @@ function confirmChanges() {
   "zh": {
     "configure-table": "配置表格",
     "configure-table-description": "在这里浏览表格和列配置项。",
-    "import-config": "导入",
-    "export-config": "导出",
-    "import-config-invalid-json": "导入失败，文件不是有效的 JSON。",
-    "import-config-invalid-schema": "导入失败，配置格式无效。",
-    "export-config-failed": "导出失败，请先修正当前配置中的错误。",
+    "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": "没有匹配的列。",
@@ -2016,6 +2474,11 @@ function confirmChanges() {
     "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": "基本",
@@ -2047,13 +2510,7 @@ function confirmChanges() {
     "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-initial-state-column": "拖拽调整列分组和顺序：{column}",
     "drag-child-column": "拖拽调整子列顺序：{column}",
     "delete-column": "删除列：{column}",
     "remove-child-column": "移出子列：{column}",
@@ -2065,6 +2522,16 @@ function confirmChanges() {
   "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": "一致する列がありません。",
@@ -2100,6 +2567,11 @@ function confirmChanges() {
     "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": "基本",
@@ -2131,13 +2603,7 @@ function confirmChanges() {
     "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-initial-state-column": "{column} の列グループと順序をドラッグで変更",
     "drag-child-column": "{column} の子列順をドラッグで変更",
     "delete-column": "{column} を削除",
     "remove-child-column": "{column} を子列から外す",
@@ -2149,6 +2615,16 @@ function confirmChanges() {
   "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.",
@@ -2184,6 +2660,11 @@ function confirmChanges() {
     "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",
@@ -2215,13 +2696,7 @@ function confirmChanges() {
     "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-initial-state-column": "Drag to move and reorder column {column}",
     "drag-child-column": "Drag to reorder child column {column}",
     "delete-column": "Delete {column}",
     "remove-child-column": "Remove child column {column}",