@shwfed/config 2.12.3 → 2.12.5

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

@@ -28,6 +28,11 @@ import ShwfedActions from "../actions/components/group.vue";
 import ShwfedForm from "../form/index.vue";
 import { evaluateInitial } from "../form/utils/initial";
 import { provideTableInstanceId } from "./utils/instance";
+import {
+  mergeCustomization,
+  useTableCustomization
+} from "./utils/customization";
+import TableCustomization from "./customization.vue";
 import { provideSharedFetchLayer } from "./utils/shared-fetch";
 import { provideEventTarget } from "../../share/event-bus";
 import { usePersistedQuery } from "../../share/use-persisted-query";
@@ -50,6 +55,8 @@ const persistedQuery = usePersistedQuery(
   queryState,
   () => config.value?.persistQuery === true
 );
+const customization = useTableCustomization(config.value?.id);
+customization.load();
 const { t, locale } = useI18n({
   inheritLocale: true,
   messages: {
@@ -118,9 +125,20 @@ function freezeGrowColumns() {
   frozenGrowColumns.value = next;
 }
 function onResizeMouseDown(header, event) {
+  resizeGestureSeen = true;
   freezeGrowColumns();
   header.getResizeHandler()(event);
 }
+let resizeGestureSeen = false;
+function restoreFrozenGrowColumns() {
+  const userSizing = customization.snapshot()?.columnSizing;
+  if (!userSizing) return;
+  const grows = (config.value?.columns ?? []).filter((c) => c.grow === true && userSizing[c.id] !== void 0);
+  if (grows.length === 0) return;
+  const next = new Set(frozenGrowColumns.value);
+  grows.forEach((c) => next.add(c.id));
+  frozenGrowColumns.value = next;
+}
 function growLeafCount(header) {
   return header.getLeafHeaders().filter((h2) => isEffectiveGrow(h2.column)).length;
 }
@@ -301,6 +319,10 @@ const tableApi = useVueTable({
   getSortedRowModel: getSortedRowModel(),
   columnResizeMode: "onChange"
 });
+watch(() => tableApi.getState().columnSizing, (sizing) => {
+  if (!resizeGestureSeen) return;
+  customization.persistPatch({ columnSizing: { ...sizing } });
+});
 provideCELContext({
   selected: {
     type: "list<dyn>",
@@ -519,7 +541,7 @@ const sortedRowIndexMap = computed(() => {
 function getDisplayIndex(row) {
   return sortedRowIndexMap.value.get(row.id) ?? row.index;
 }
-watch(config, (config2) => {
+watch([config, customization.revision], ([config2]) => {
   if (!config2) return;
   const initialState = config2.initialState;
   const hiddenSeed = {};
@@ -528,17 +550,47 @@ watch(config, (config2) => {
   }
   const hasSeed = Object.keys(hiddenSeed).length > 0;
   const effective = initialState || hasSeed ? { ...initialState ?? {}, columnVisibility: { ...hiddenSeed, ...initialState?.columnVisibility ?? {} } } : void 0;
-  const nextKey = effective ? JSON.stringify(effective) : "";
-  if (appliedInitialStateKey.value === nextKey || !effective) {
+  const { state: merged, pageSize: pageSizeOverride } = mergeCustomization(
+    effective,
+    customization.snapshot(),
+    buildCustomizationContext(config2),
+    { explicit: customization.wasCustomized() }
+  );
+  const nextKey = merged ? JSON.stringify({ merged, pageSize: pageSizeOverride ?? null }) : "";
+  if (appliedInitialStateKey.value === nextKey || !merged) {
     appliedInitialStateKey.value = nextKey;
     syncPaginationPageSize();
     return;
   }
-  tableApi.initialState = mergeInitialState(tableApi.initialState, effective);
+  tableApi.initialState = mergeInitialState(tableApi.initialState, merged, pageSizeOverride);
   tableApi.reset();
+  restoreFrozenGrowColumns();
   appliedInitialStateKey.value = nextKey;
   syncPaginationPageSize();
 }, { immediate: true });
+function buildCustomizationContext(config2) {
+  return {
+    columnIds: new Set(config2.columns.map((c) => c.id)),
+    pageSizes: config2.pagination?.pageSizes ?? [],
+    paginationEnabled: config2.pagination !== void 0
+  };
+}
+function onCustomizationConfirm(payload) {
+  customization.persistPatch(payload);
+  if (payload.columnVisibility) tableApi.setColumnVisibility({ ...payload.columnVisibility });
+  if (payload.columnOrder) tableApi.setColumnOrder([...payload.columnOrder]);
+  if (payload.columnPinning) {
+    tableApi.setColumnPinning({
+      left: [...payload.columnPinning.left],
+      right: [...payload.columnPinning.right]
+    });
+  }
+}
+function resetCustomization() {
+  customization.clear();
+  resizeGestureSeen = false;
+  frozenGrowColumns.value = /* @__PURE__ */ new Set();
+}
 defineExpose(tableApi);
 const rows = computed(() => isPaginationEnabled.value ? tableApi.getRowModel().rows : tableApi.getPrePaginationRowModel().rows);
 const maxPage = computed(() => isPaginationEnabled.value ? Math.max(tableApi.getPageCount(), 1) : 1);
@@ -635,6 +687,7 @@ const currentPageSize = computed({
     const nextPageSize = Number(value);
     if (!Number.isInteger(nextPageSize) || nextPageSize <= 0) return;
     tableApi.setPageSize(nextPageSize);
+    customization.persistPatch({ pageSize: nextPageSize });
   }
 });
 function syncPaginationPageSize() {
@@ -659,7 +712,7 @@ function normalizeExpandedState(expanded, current) {
   if (expanded === false) return {};
   return expanded;
 }
-function mergeInitialState(current, initialState) {
+function mergeInitialState(current, initialState, pageSizeOverride) {
   return {
     ...current,
     columnVisibility: initialState.columnVisibility ?? current.columnVisibility,
@@ -680,7 +733,7 @@ function mergeInitialState(current, initialState) {
     columnSizing: initialState.columnSizing ?? current.columnSizing,
     pagination: isPaginationEnabled.value ? {
       pageIndex: paginationConfig.value?.pageIndex ?? current.pagination.pageIndex,
-      pageSize: paginationConfig.value?.pageSize ?? current.pagination.pageSize
+      pageSize: pageSizeOverride ?? paginationConfig.value?.pageSize ?? current.pagination.pageSize
     } : current.pagination,
     rowSelection: initialState.rowSelection ?? current.rowSelection
   };
@@ -724,6 +777,16 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
         class="absolute inset-0 bg-white/20 z-30 pointer-events-auto"
         aria-hidden="true"
       />
+      <!-- User-land customization trigger: floats over the sticky thead's
+           far-right corner, outside the scroll container so it neither moves
+           on horizontal scroll nor collides with right-pinned columns. -->
+      <TableCustomization
+        v-if="config?.id"
+        :config="config"
+        :table-api="tableApi"
+        @confirm="onCustomizationConfirm"
+        @reset="resetCustomization"
+      />
       <ClientOnly>
         <!-- Scrollable table container -->
         <div

package/dist/runtime/components/table/utils/customization.d.ts

@@ -0,0 +1,158 @@
+import type { InitialStateValue } from '../schema.js';
+export interface TableCustomizationSnapshot {
+    v: 1;
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+    columnPinning?: {
+        left: string[];
+        right: string[];
+    };
+    columnSizing?: Record<string, number>;
+    pageSize?: number;
+}
+export type TableCustomizationPatch = Partial<Omit<TableCustomizationSnapshot, 'v'>>;
+export interface CustomizationContext {
+    columnIds: ReadonlySet<string>;
+    pageSizes: ReadonlyArray<number>;
+    paginationEnabled: boolean;
+}
+/**
+ * Parse a raw localStorage value into a snapshot. Anything off — null, bad
+ * JSON, wrong version, non-object — yields `undefined` (treated as "no
+ * customization"). Slices are validated individually so one corrupted field
+ * drops alone instead of discarding the whole snapshot.
+ */
+export declare function parseSnapshot(raw: string | null): TableCustomizationSnapshot | undefined;
+/**
+ * Reconcile a snapshot against the live column set: entries referencing
+ * columns the designer has since deleted are dropped, and a persisted
+ * `pageSize` survives only while it is still one of the configured
+ * `pageSizes`.
+ *
+ * Emptied-by-prune rule for the wholesale slices (`columnOrder`,
+ * `columnPinning`): a slice that was non-empty but lost every entry to
+ * pruning is removed entirely — the user's whole choice referenced dead
+ * columns, so the designer's slice should apply again. A slice the user
+ * deliberately saved empty (e.g. unpinned everything) stays authoritative.
+ */
+export declare function pruneSnapshot(snapshot: TableCustomizationSnapshot, ctx: CustomizationContext): TableCustomizationSnapshot;
+export interface MergedCustomization {
+    state?: InitialStateValue;
+    pageSize?: number;
+}
+/**
+ * Fold a user snapshot over the designer's effective initial state.
+ *
+ * - Per-key slices (`columnVisibility`, `columnSizing`) merge entry-wise, user
+ *   over design — an explicit user `true` re-shows a designer-hidden column.
+ * - Wholesale slices (`columnOrder`, `columnPinning`) are taken from the user
+ *   when present (after pruning), else from the design.
+ * - `sorting` / `rowPinning` / `expanded` / `grouping` / `rowSelection` are
+ *   designer-only and pass through untouched.
+ *
+ * With a snapshot present, every user-editable slice is emitted explicitly
+ * (empty rather than absent) so the host's `mergeInitialState` overrides stale
+ * live state instead of falling through to it. `explicit` forces that same
+ * fully-specified output when the snapshot is absent — the reset path, where
+ * previously-applied user state must not survive the fall-through. Without a
+ * snapshot and without `explicit`, the design passes through unchanged
+ * (identical to pre-customization behavior).
+ */
+export declare function mergeCustomization(design: InitialStateValue | undefined, snapshot: TableCustomizationSnapshot | undefined, ctx: CustomizationContext, options?: {
+    explicit?: boolean;
+}): MergedCustomization;
+/**
+ * Rebuild a full leaf `columnOrder` from the modal's draft. Locked columns
+ * (select / drag-handle — structural, not shown in the modal) keep their
+ * current slots; the remaining slots are filled with the draft order. Draft
+ * ids missing from the current order (shouldn't happen, but a stale draft is
+ * cheap to tolerate) append at the end.
+ */
+export declare function weaveLockedColumns(currentLeafOrder: ReadonlyArray<string>, lockedIds: ReadonlySet<string>, draftOrder: ReadonlyArray<string>): string[];
+export type DraftBand = 'left' | 'main' | 'right' | 'hidden';
+export type DraftBands = Record<DraftBand, string[]>;
+export type GroupOf = (id: string) => string | undefined;
+export type DraftAnchor = {
+    at: 'append';
+} | {
+    at: 'before' | 'after';
+    ref: string;
+};
+export declare function bandOf(bands: DraftBands, id: string): DraftBand | undefined;
+/** A group's members currently in the visible bands, in order. */
+export declare function groupVisibleMembers(bands: DraftBands, groupOf: GroupOf, groupId: string): string[];
+/** A group's members currently in the hidden band, in order. */
+export declare function groupHiddenMembers(bands: DraftBands, groupOf: GroupOf, groupId: string): string[];
+/** The single visible band a group occupies, or undefined when fully hidden. */
+export declare function bandOfGroup(bands: DraftBands, groupOf: GroupOf, groupId: string): DraftBand | undefined;
+export declare function groupEdgeMember(bands: DraftBands, groupOf: GroupOf, groupId: string, edge: 'first' | 'last'): string | undefined;
+/**
+ * Remove `runIds` from wherever they sit, then reinsert them — contiguous, in
+ * the given order — at `anchor` within `band`.
+ */
+export declare function moveRun(bands: DraftBands, runIds: readonly string[], band: DraftBand, anchor: DraftAnchor): DraftBands;
+/**
+ * Safety weld: re-collect each group's members into one contiguous run.
+ *
+ * - Visible members collapse into the group's "home" band (the first visible
+ *   band holding any member) as a single run.
+ * - Hidden members are welded WITHIN the hidden band only — never merged with
+ *   the visible bands (that would silently un-hide them), so a fully-hidden
+ *   group still renders as one folder in the hidden pane.
+ *
+ * A no-op on already-welded input — the only state the designer or a prior
+ * confirm ever produce — it exists so a drifted / corrupted snapshot, or a
+ * multi-step drag, can't render a fragmented group.
+ */
+export declare function weldGroups(bands: DraftBands, groupOf: GroupOf): DraftBands;
+export interface DraftRowDrop {
+    sourceKind: 'group' | 'column';
+    sourceId: string;
+    sourceGroupId?: string;
+    targetKind: 'group' | 'column';
+    targetId: string;
+    before: boolean;
+}
+/**
+ * Resolve a row-to-row drop into the next bands. Assumes the drop already
+ * passed the modal's `canDrop` gate (group↔group, group↔standalone,
+ * same-group member reorder, standalone↔standalone) — combinations outside
+ * that set return the bands unchanged. A group source carries its whole run,
+ * which is its hidden members when the group is being revived from a
+ * fully-hidden state (see `groupRun`).
+ */
+export declare function applyRowDrop(bands: DraftBands, groupOf: GroupOf, drop: DraftRowDrop): DraftBands;
+export interface DraftZoneDrop {
+    sourceKind: 'group' | 'column';
+    sourceId: string;
+    band: DraftBand;
+}
+/**
+ * Resolve a drop onto a band zone (pin-left / pin-right / main filler /
+ * hidden). A group source carries its whole run — its visible members when
+ * hiding / re-pinning a visible group, or its hidden members when reviving a
+ * fully-hidden group back into a visible band (see `groupRun`).
+ */
+export declare function applyZoneDrop(bands: DraftBands, groupOf: GroupOf, drop: DraftZoneDrop): DraftBands;
+/**
+ * Owns the localStorage-backed customization snapshot for one table.
+ *
+ * Modeled on `usePersistedQuery`: storage is keyed on the table's stable
+ * `config.id`, every access is SSR- and privacy-mode-guarded, and the feature
+ * is fully off without an id.
+ *
+ * The snapshot itself is deliberately NON-reactive; `revision` is bumped only
+ * by `load()` and `clear()`. Live captures (resize, page size) and the modal
+ * confirm go through `persistPatch`, which updates storage and the in-memory
+ * snapshot WITHOUT bumping `revision` — so they never re-trigger the host's
+ * `watch([config, revision])` and its `tableApi.reset()` (which would nuke row
+ * selection). A later config change still re-reads the fresh snapshot.
+ */
+export declare function useTableCustomization(tableId: string | undefined): {
+    revision: import("vue").Ref<number, number>;
+    load: () => void;
+    snapshot: () => TableCustomizationSnapshot | undefined;
+    persistPatch: (patch: TableCustomizationPatch) => void;
+    clear: () => void;
+    wasCustomized: () => boolean;
+};

package/dist/runtime/components/table/utils/customization.js

@@ -0,0 +1,315 @@
+import { ref } from "vue";
+const STORAGE_PREFIX = "shwfed.table.customization.";
+function isRecordOf(x, check) {
+  return typeof x === "object" && x !== null && !Array.isArray(x) && Object.values(x).every(check);
+}
+const isBoolean = (v) => typeof v === "boolean";
+const isFiniteNumber = (v) => typeof v === "number" && Number.isFinite(v);
+const isStringArray = (x) => Array.isArray(x) && x.every((v) => typeof v === "string");
+export function parseSnapshot(raw) {
+  if (!raw) return void 0;
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return void 0;
+  const record = parsed;
+  if (record.v !== 1) return void 0;
+  const snapshot = { v: 1 };
+  if (isRecordOf(record.columnVisibility, isBoolean)) snapshot.columnVisibility = record.columnVisibility;
+  if (isStringArray(record.columnOrder)) snapshot.columnOrder = record.columnOrder;
+  {
+    const pinning = record.columnPinning;
+    if (pinning && isStringArray(pinning.left) && isStringArray(pinning.right)) {
+      snapshot.columnPinning = { left: pinning.left, right: pinning.right };
+    }
+  }
+  if (isRecordOf(record.columnSizing, isFiniteNumber)) snapshot.columnSizing = record.columnSizing;
+  if (isFiniteNumber(record.pageSize)) snapshot.pageSize = record.pageSize;
+  return snapshot;
+}
+function pruneRecord(record, ids) {
+  if (!record) return {};
+  return Object.fromEntries(Object.entries(record).filter(([id]) => ids.has(id)));
+}
+function pruneList(list, ids) {
+  return (list ?? []).filter((id) => ids.has(id));
+}
+export function pruneSnapshot(snapshot, ctx) {
+  const pruned = { v: 1 };
+  if (snapshot.columnVisibility) {
+    pruned.columnVisibility = pruneRecord(snapshot.columnVisibility, ctx.columnIds);
+  }
+  if (snapshot.columnSizing) {
+    pruned.columnSizing = pruneRecord(snapshot.columnSizing, ctx.columnIds);
+  }
+  if (snapshot.columnOrder) {
+    const order = pruneList(snapshot.columnOrder, ctx.columnIds);
+    if (order.length > 0 || snapshot.columnOrder.length === 0) pruned.columnOrder = order;
+  }
+  if (snapshot.columnPinning) {
+    const left = pruneList(snapshot.columnPinning.left, ctx.columnIds);
+    const right = pruneList(snapshot.columnPinning.right, ctx.columnIds);
+    const hadEntries = snapshot.columnPinning.left.length + snapshot.columnPinning.right.length > 0;
+    if (left.length + right.length > 0 || !hadEntries) pruned.columnPinning = { left, right };
+  }
+  if (snapshot.pageSize !== void 0 && ctx.paginationEnabled && Number.isInteger(snapshot.pageSize) && snapshot.pageSize > 0 && ctx.pageSizes.includes(snapshot.pageSize)) {
+    pruned.pageSize = snapshot.pageSize;
+  }
+  return pruned;
+}
+export function mergeCustomization(design, snapshot, ctx, options) {
+  if (!snapshot && !options?.explicit) return { state: design };
+  const pruned = snapshot ? pruneSnapshot(snapshot, ctx) : { v: 1 };
+  const designPinning = design?.columnPinning;
+  const prunedDesignPinning = designPinning ? {
+    left: pruneList(designPinning.left, ctx.columnIds),
+    right: pruneList(designPinning.right, ctx.columnIds)
+  } : void 0;
+  const state = {
+    ...design,
+    columnVisibility: {
+      ...pruneRecord(design?.columnVisibility, ctx.columnIds),
+      ...pruned.columnVisibility
+    },
+    columnSizing: {
+      ...pruneRecord(design?.columnSizing, ctx.columnIds),
+      ...pruned.columnSizing
+    },
+    columnOrder: pruned.columnOrder ?? pruneList(design?.columnOrder, ctx.columnIds),
+    columnPinning: pruned.columnPinning ?? prunedDesignPinning ?? { left: [], right: [] }
+  };
+  return { state, pageSize: pruned.pageSize };
+}
+export function weaveLockedColumns(currentLeafOrder, lockedIds, draftOrder) {
+  const draftQueue = draftOrder.filter((id) => !lockedIds.has(id));
+  const out = [];
+  const used = /* @__PURE__ */ new Set();
+  let next = 0;
+  for (const id of currentLeafOrder) {
+    if (lockedIds.has(id)) {
+      out.push(id);
+      used.add(id);
+      continue;
+    }
+    while (next < draftQueue.length && used.has(draftQueue[next])) next++;
+    if (next < draftQueue.length) {
+      const draftId = draftQueue[next++];
+      out.push(draftId);
+      used.add(draftId);
+    } else if (!used.has(id)) {
+      out.push(id);
+      used.add(id);
+    }
+  }
+  for (; next < draftQueue.length; next++) {
+    const draftId = draftQueue[next];
+    if (!used.has(draftId)) {
+      out.push(draftId);
+      used.add(draftId);
+    }
+  }
+  for (const id of currentLeafOrder) {
+    if (!used.has(id)) {
+      out.push(id);
+      used.add(id);
+    }
+  }
+  return out;
+}
+const ALL_BANDS = ["left", "main", "right", "hidden"];
+const VISIBLE_BANDS = ["left", "main", "right"];
+function cloneBands(b) {
+  return { left: [...b.left], main: [...b.main], right: [...b.right], hidden: [...b.hidden] };
+}
+export function bandOf(bands, id) {
+  return ALL_BANDS.find((band) => bands[band].includes(id));
+}
+export function groupVisibleMembers(bands, groupOf, groupId) {
+  const out = [];
+  for (const band of VISIBLE_BANDS) {
+    for (const id of bands[band]) if (groupOf(id) === groupId) out.push(id);
+  }
+  return out;
+}
+export function groupHiddenMembers(bands, groupOf, groupId) {
+  return bands.hidden.filter((id) => groupOf(id) === groupId);
+}
+function groupRun(bands, groupOf, groupId) {
+  const visible = groupVisibleMembers(bands, groupOf, groupId);
+  return visible.length > 0 ? visible : groupHiddenMembers(bands, groupOf, groupId);
+}
+export function bandOfGroup(bands, groupOf, groupId) {
+  return VISIBLE_BANDS.find((band) => bands[band].some((id) => groupOf(id) === groupId));
+}
+export function groupEdgeMember(bands, groupOf, groupId, edge) {
+  const m = groupVisibleMembers(bands, groupOf, groupId);
+  return edge === "first" ? m[0] : m[m.length - 1];
+}
+export function moveRun(bands, runIds, band, anchor) {
+  if (runIds.length === 0) return cloneBands(bands);
+  const drop = new Set(runIds);
+  const next = {
+    left: bands.left.filter((id) => !drop.has(id)),
+    main: bands.main.filter((id) => !drop.has(id)),
+    right: bands.right.filter((id) => !drop.has(id)),
+    hidden: bands.hidden.filter((id) => !drop.has(id))
+  };
+  const list = next[band];
+  let index = list.length;
+  if (anchor.at !== "append") {
+    const i = list.indexOf(anchor.ref);
+    if (i >= 0) index = anchor.at === "before" ? i : i + 1;
+  }
+  list.splice(index, 0, ...runIds);
+  return next;
+}
+function weldWithin(list, groupOf) {
+  const members = /* @__PURE__ */ new Map();
+  for (const id of list) {
+    const gid = groupOf(id);
+    if (!gid) continue;
+    const run = members.get(gid);
+    if (run) run.push(id);
+    else members.set(gid, [id]);
+  }
+  if (members.size === 0) return [...list];
+  const out = [];
+  const emitted = /* @__PURE__ */ new Set();
+  for (const id of list) {
+    const gid = groupOf(id);
+    if (!gid) {
+      out.push(id);
+      continue;
+    }
+    if (emitted.has(gid)) continue;
+    out.push(...members.get(gid) ?? [id]);
+    emitted.add(gid);
+  }
+  return out;
+}
+export function weldGroups(bands, groupOf) {
+  const next = cloneBands(bands);
+  const homeBand = /* @__PURE__ */ new Map();
+  const members = /* @__PURE__ */ new Map();
+  for (const band of VISIBLE_BANDS) {
+    for (const id of bands[band]) {
+      const gid = groupOf(id);
+      if (!gid) continue;
+      if (!homeBand.has(gid)) homeBand.set(gid, band);
+      const run = members.get(gid);
+      if (run) run.push(id);
+      else members.set(gid, [id]);
+    }
+  }
+  if (homeBand.size > 0) {
+    const emitted = /* @__PURE__ */ new Set();
+    for (const band of VISIBLE_BANDS) {
+      const rebuilt = [];
+      for (const id of bands[band]) {
+        const gid = groupOf(id);
+        if (!gid) {
+          rebuilt.push(id);
+          continue;
+        }
+        if (homeBand.get(gid) !== band || emitted.has(gid)) continue;
+        rebuilt.push(...members.get(gid) ?? [id]);
+        emitted.add(gid);
+      }
+      next[band] = rebuilt;
+    }
+  }
+  next.hidden = weldWithin(bands.hidden, groupOf);
+  return next;
+}
+export function applyRowDrop(bands, groupOf, drop) {
+  const { sourceKind, sourceId, sourceGroupId, targetKind, targetId, before } = drop;
+  const edge = before ? "first" : "last";
+  const place = before ? "before" : "after";
+  if (sourceKind === "group") {
+    const run = groupRun(bands, groupOf, sourceId);
+    if (run.length === 0) return cloneBands(bands);
+    if (targetKind === "group") {
+      if (targetId === sourceId) return cloneBands(bands);
+      const band3 = bandOfGroup(bands, groupOf, targetId);
+      const ref2 = groupEdgeMember(bands, groupOf, targetId, edge);
+      if (!band3 || !ref2) return cloneBands(bands);
+      return moveRun(bands, run, band3, { at: place, ref: ref2 });
+    }
+    const band2 = bandOf(bands, targetId);
+    if (!band2 || band2 === "hidden" || groupOf(targetId)) return cloneBands(bands);
+    return moveRun(bands, run, band2, { at: place, ref: targetId });
+  }
+  if (targetKind === "group") {
+    const band2 = bandOfGroup(bands, groupOf, targetId);
+    const ref2 = groupEdgeMember(bands, groupOf, targetId, edge);
+    if (!band2 || !ref2) return cloneBands(bands);
+    return moveRun(bands, [sourceId], band2, { at: place, ref: ref2 });
+  }
+  if (sourceId === targetId) return cloneBands(bands);
+  const band = bandOf(bands, targetId);
+  if (!band || band === "hidden") return cloneBands(bands);
+  const tgtGid = groupOf(targetId);
+  const sameGroup = Boolean(sourceGroupId) && tgtGid === sourceGroupId;
+  const bothStandalone = !sourceGroupId && !tgtGid;
+  if (sameGroup || bothStandalone) {
+    return moveRun(bands, [sourceId], band, { at: place, ref: targetId });
+  }
+  return cloneBands(bands);
+}
+export function applyZoneDrop(bands, groupOf, drop) {
+  const run = drop.sourceKind === "group" ? groupRun(bands, groupOf, drop.sourceId) : [drop.sourceId];
+  return moveRun(bands, run, drop.band, { at: "append" });
+}
+export function useTableCustomization(tableId) {
+  let current;
+  let everCustomized = false;
+  const revision = ref(0);
+  const enabled = () => Boolean(tableId) && typeof window !== "undefined";
+  const key = () => `${STORAGE_PREFIX}${tableId}`;
+  function load() {
+    if (!enabled()) return;
+    let parsed;
+    try {
+      parsed = parseSnapshot(window.localStorage.getItem(key()));
+    } catch {
+      return;
+    }
+    if (parsed) {
+      current = parsed;
+      everCustomized = true;
+      revision.value++;
+    }
+  }
+  function snapshot() {
+    return current;
+  }
+  function persistPatch(patch) {
+    if (!enabled()) return;
+    current = { ...current ?? { v: 1 }, ...patch, v: 1 };
+    everCustomized = true;
+    try {
+      window.localStorage.setItem(key(), JSON.stringify(current));
+    } catch {
+    }
+  }
+  function clear() {
+    if (!enabled()) return;
+    current = void 0;
+    try {
+      window.localStorage.removeItem(key());
+    } catch {
+    }
+    revision.value++;
+  }
+  return {
+    revision,
+    load,
+    snapshot,
+    persistPatch,
+    clear,
+    wasCustomized: () => everCustomized
+  };
+}

package/dist/runtime/components/ui/date-picker/DatePickerInput.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: Date | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    clearIcon: string;
     clearable: boolean;
+    clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/date-picker/DatePickerInput.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: Date | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    clearIcon: string;
     clearable: boolean;
+    clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: "sm" | "md" | "lg";
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
-    clearIcon: string;
     clearable: boolean;
+    clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: "sm" | "md" | "lg";
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
-    clearIcon: string;
     clearable: boolean;
+    clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.d.vue.ts

@@ -29,8 +29,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:endValue"?: ((args_0: Date | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    clearIcon: string;
     clearable: boolean;
+    clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;