@ai-matrx/records-ui 0.115.38 → 0.115.40

package/dist/index.js

@@ -5503,9 +5503,12 @@ function withheldNoticeOf(hidden, key) {
   return notice && typeof notice === "object" ? notice : null;
 }
 function withheldSentence(field2, notice) {
-  const says = notice.says;
-  if (typeof says === "string" && says.trim() !== "") return says.trim();
+  const extra = notice;
+  if (typeof extra.says === "string" && extra.says.trim() !== "") return extra.says.trim();
   const name = fieldName(field2);
+  if (typeof extra.part === "string" && extra.part.trim() !== "" && typeof extra.who === "string" && extra.who.trim() !== "") {
+    return `${name} is in ${extra.part.trim()} \u2014 ${extra.who.trim()} see it.`;
+  }
   const reason = notice.reason ? ` It is ${notice.reason}` : "";
   const needs = notice.needs ? `${reason ? "," : " It"} and reading it needs ${notice.needs}` : "";
   const or = notice.or ? `${needs || reason ? ", or" : " It needs"} ${notice.or}` : "";
@@ -11474,6 +11477,9 @@ function useGridEditing({ tableId, fields, rows, reload, reloadAfterWrite, canWr
   const startedFrom = useRef21(null);
   const startedStored = useRef21(null);
   const host = useRecordsUi();
+  const fieldsRef = useRef21(fields);
+  fieldsRef.current = fields;
+  const forceNext = useRef21(/* @__PURE__ */ new Set());
   const type = useCallback10((value) => {
     typed2.current = value;
     setDraft(value);
@@ -11630,6 +11636,47 @@ function useGridEditing({ tableId, fields, rows, reload, reloadAfterWrite, canWr
         delete next[id];
         return next;
       });
+      const syncedField = fieldsRef.current.find((f) => f.key === key);
+      if (syncedField?.source === "synced" && host.writeSyncedCell) {
+        const force = forceNext.current.delete(id);
+        let outcome;
+        try {
+          outcome = await host.writeSyncedCell({ tableId, recordId: rowId, fieldKey: key, value: shown5, force });
+        } catch (thrown) {
+          outcome = { ok: false, message: thrown instanceof Error ? thrown.message : String(thrown) };
+        }
+        setSaving((held) => {
+          const next = { ...held };
+          delete next[id];
+          return next;
+        });
+        if (outcome.ok && outcome.status === "written") {
+          if (typeof outcome.version === "number") {
+            rememberVersion(versions.current, rowId, outcome.version);
+            source.wrote(rowId, outcome.version);
+          }
+          settling.current.set(id, base2);
+          writtenRef.current?.({ rowId, key, before: base2, after: shown5 });
+          afterWrite();
+          return;
+        }
+        setOptimistic((held) => {
+          const next = { ...held };
+          delete next[id];
+          return next;
+        });
+        const sheetValue = outcome.ok ? outcome.sheetValue : null;
+        setRefusals((held) => ({
+          ...held,
+          [id]: outcome.ok ? {
+            error: { code: "stale_write", message: `The sheet now says "${sheetValue ?? ""}". Retry keeps yours.` },
+            conflict: null,
+            attempted: value,
+            sheet: { value: sheetValue }
+          } : { error: { code: "refused_by_rule", message: outcome.message }, conflict: null, attempted: value }
+        }));
+        return;
+      }
       let written;
       try {
         let version = await versionOf(source, versions.current, versionReads.current, rowId);
@@ -11789,6 +11836,7 @@ function useGridEditing({ tableId, fields, rows, reload, reloadAfterWrite, canWr
     (rowId, key) => {
       const held = refusals[cellKey(rowId, key)];
       if (!held) return;
+      if (held.sheet) forceNext.current.add(cellKey(rowId, key));
       void writeCell(rowId, key, held.attempted, held.conflict?.contested_fields[key]);
     },
     [refusals, writeCell]
@@ -16573,6 +16621,7 @@ function useMergedGridControls(args) {
   } = args;
   const client = useRecordsClient27();
   const linkRecord = useRecordsUi().linkRecord;
+  const columnAccess = useRecordsUi().columnAccess;
   const hrefForRecord = useRecordsUi().hrefForRecord;
   const tableVersion = (0, recordVersions_exports.useTableVersion)(client, tableId, table);
   const mutation = useFieldMutation2();
@@ -16754,6 +16803,14 @@ function useMergedGridControls(args) {
               writeLook({ ...rest, ...next.size > 0 ? { wrapColumns: [...next] } : {} });
             }
           });
+          if (columnAccess) {
+            out.push({
+              id: "col-access",
+              label: "Who can see and edit\u2026",
+              disabledReason: rights.structure ? void 0 : rights.why("structure"),
+              onSelect: () => setDialog({ kind: "access", field: field2 })
+            });
+          }
           out.push({
             id: "col-duplicate",
             label: "Duplicate property",
@@ -17035,6 +17092,7 @@ function useMergedGridControls(args) {
       }
     };
   }, [
+    columnAccess,
     args,
     colours,
     fieldKeys,
@@ -17085,6 +17143,13 @@ function useMergedGridControls(args) {
   const close = () => setDialog(null);
   const dialogs = !enabled ? null : /* @__PURE__ */ jsxs57(Fragment17, { children: [
     colours.dialogs,
+    dialog?.kind === "access" && columnAccess ? columnAccess({
+      tableId,
+      fieldId: dialog.field.id,
+      name: fieldName(dialog.field),
+      onClose: () => setDialog(null),
+      onChanged: () => tableShapeChanged5(tableId)
+    }) : null,
     /* @__PURE__ */ jsx63(RowActionsDialog, { tableId, open: rowActionsOpen, onOpenChange: setRowActionsOpen }),
     /* @__PURE__ */ jsx63(
       RowLabelPicker,
@@ -19672,6 +19737,40 @@ function columnForField(field2, editing, mayWriteRow, whyNotRow, look, onAskWhoC
   const name = fieldName(field2);
   const format = cellFormatFor(field2, look?.format);
   const workedOut = workedOutFrom(field2);
+  const syncedMark = field2.source === "synced" ? /* @__PURE__ */ jsx69(
+    "span",
+    {
+      "data-records-synced": field2.key,
+      title: `Synced from ${look?.syncedFrom || "its source"}`,
+      "aria-label": `Synced from ${look?.syncedFrom || "its source"}`,
+      className: "text-[10px] text-muted-foreground",
+      children: "\u27F3"
+    }
+  ) : null;
+  const restricted = field2.sensitivity === "confidential" || field2.sensitivity === "restricted";
+  const lockMark = restricted ? /* @__PURE__ */ jsx69(
+    "span",
+    {
+      "data-records-restricted": field2.key,
+      title: "Fewer people see this column",
+      "aria-label": "Fewer people see this column",
+      className: "inline-flex text-muted-foreground",
+      children: /* @__PURE__ */ jsxs63("svg", { viewBox: "0 0 24 24", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx69("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+        /* @__PURE__ */ jsx69("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+      ] })
+    }
+  ) : null;
+  const withSynced = (inner2) => {
+    const header = lockMark ? /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
+      inner2,
+      lockMark
+    ] }) : inner2;
+    return syncedMark ? /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
+      syncedMark,
+      header
+    ] }) : header;
+  };
   return {
     id: field2.key,
     /*
@@ -19679,38 +19778,40 @@ function columnForField(field2, editing, mayWriteRow, whyNotRow, look, onAskWhoC
      * (`custom.formula_eval`, on read or on write) and nobody types it — so its header carries
      * the mark, and the formula it is worked out from is one hover away, in its own words.
      */
-    header: look?.rowLabel ? (
-      // THE COLUMN THAT NAMES EACH RECORD says so (tranche 6i, the older grid's key marker).
-      /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
+    header: withSynced(
+      look?.rowLabel ? (
+        // THE COLUMN THAT NAMES EACH RECORD says so (tranche 6i, the older grid's key marker).
+        /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx69(
+            "span",
+            {
+              "data-records-row-label": field2.key,
+              title: "This column names each record",
+              "aria-label": "Names each record",
+              className: "text-[10px] text-muted-foreground",
+              children: "\u26BF"
+            }
+          ),
+          name
+        ] })
+      ) : workedOut && stampMarkOf(field2) ? (
+        // A STAMP OR A RECORD NUMBER (walk 2026-10-08 D7): kept by the store, but nobody wrote a formula
+        // for it, so its header wears its own mark — a clock, a person, a number sign — never "fx".
+        /* @__PURE__ */ jsx69("span", { className: "inline-flex items-center", title: workedOut, "data-records-stamp": stampMarkOf(field2), children: withTypeMark(field2, name) })
+      ) : workedOut ? /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
+        name,
         /* @__PURE__ */ jsx69(
           "span",
           {
-            "data-records-row-label": field2.key,
-            title: "This column names each record",
-            "aria-label": "Names each record",
-            className: "text-[10px] text-muted-foreground",
-            children: "\u26BF"
+            "data-records-worked-out": field2.key,
+            title: workedOut,
+            "aria-label": workedOut,
+            className: "rounded bg-muted px-1 font-mono text-[10px] font-normal text-muted-foreground",
+            children: "fx"
           }
-        ),
-        name
-      ] })
-    ) : workedOut && stampMarkOf(field2) ? (
-      // A STAMP OR A RECORD NUMBER (walk 2026-10-08 D7): kept by the store, but nobody wrote a formula
-      // for it, so its header wears its own mark — a clock, a person, a number sign — never "fx".
-      /* @__PURE__ */ jsx69("span", { className: "inline-flex items-center", title: workedOut, "data-records-stamp": stampMarkOf(field2), children: withTypeMark(field2, name) })
-    ) : workedOut ? /* @__PURE__ */ jsxs63("span", { className: "inline-flex items-center gap-1", children: [
-      name,
-      /* @__PURE__ */ jsx69(
-        "span",
-        {
-          "data-records-worked-out": field2.key,
-          title: workedOut,
-          "aria-label": workedOut,
-          className: "rounded bg-muted px-1 font-mono text-[10px] font-normal text-muted-foreground",
-          children: "fx"
-        }
-      )
-    ] }) : name,
+        )
+      ] }) : name
+    ),
     label: name,
     accessorFn: (row) => row.document?.[field2.key],
     // A column the store keeps no value for is not offered a sort it would refuse (`sortRefusal`).
@@ -20921,7 +21022,7 @@ function columnsSentence(mapped, total, unmapped) {
   if (unmapped === "ignore") return `${mapped} of ${total} columns go into this table \xB7 ${rest} left out`;
   return `${mapped} of ${total} go in now \xB7 ${rest} wait for approval with their values`;
 }
-function ImportWizard({ tableId, source, onDone, onWrote, className }) {
+function ImportWizard({ tableId, source, onDone, onWrote, autoRun, className }) {
   const client = useRecordsClient35();
   const table = useTable8(tableId);
   const fields = useFields10(tableId);
@@ -21543,6 +21644,13 @@ function ImportWizard({ tableId, source, onDone, onWrote, className }) {
   const refusedByRules = ruleVerdicts.reduce((n, v) => n + v.refused, 0);
   const [goAheadAnyway, setGoAheadAnyway] = useState61(false);
   useEffect46(() => setGoAheadAnyway(false), [ruleVerdicts]);
+  const [autoRan, setAutoRan] = useState61(false);
+  useEffect46(() => {
+    if (!autoRun || autoRan || !source || phase !== "ready" || !plan) return;
+    if (busy || !rights.write || rows.length === 0 || titleMissing || ruleVerdicts.length > 0) return;
+    setAutoRan(true);
+    void run();
+  }, [autoRun, autoRan, source, phase, plan, busy, rights.write, rows.length, titleMissing, ruleVerdicts, run]);
   const afterWrite = !busy && (phase === "done" || alreadyRan !== null || ledger !== null && ledger.seen > 0);
   return /* @__PURE__ */ jsxs68("div", { className: cn37("flex min-w-0 flex-col gap-2 text-xs", className), children: [
     /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-2", children: [
@@ -24251,6 +24359,8 @@ import {
   designateView,
   viewPatchFor,
   groupViewsBySection,
+  planViewDrop,
+  sectionDropId,
   sectionNames,
   sectionNameOk,
   reassignSection
@@ -25710,7 +25820,8 @@ function GridBody({
             ...presentation.formats?.[field2.key] ? { format: presentation.formats[field2.key] } : {},
             frozen: frozenKeys.has(field2.key),
             // The column that names each record wears the mark (merged grid, tranche 6i).
-            rowLabel: merged && field2.key === (table.data?.title_field ?? null)
+            rowLabel: merged && field2.key === (table.data?.title_field ?? null),
+            syncedFrom: syncedFromWords(table.data)
           },
           onAskWhoChanged,
           {
@@ -26899,6 +27010,12 @@ function withHeaderMenus(columns, menuFor, filterFor) {
     return filter ? { ...withMenu, ...filter } : withMenu;
   });
 }
+function syncedFromWords(table) {
+  const source = table?.sync_source;
+  if (!source?.provider) return null;
+  const from = source.provider === "google_sheets" ? "Google Sheets" : source.provider === "csv_url" ? "a CSV link" : source.provider === "postgres" ? "an outside database" : source.provider === "matrx_view" ? "another table" : source.provider;
+  return source.label ? `${from} \xB7 ${source.label}` : from;
+}
 function withoutGoneColumns(query, liveKeys, openingSort) {
   const sortGone = Boolean(query.sort && !liveKeys.has(query.sort.id));
   const goneFilters = Object.keys(query.columnFilters ?? {}).filter((key) => !liveKeys.has(key));
@@ -28163,7 +28280,7 @@ function NewTableStart({
       /* @__PURE__ */ jsx89(Button53, { disabled: !importReady || busy, onClick: () => void continueImport(), "data-new-table-continue": "", children: busy ? "Creating\u2026" : "Next: columns" })
     ] });
   } else {
-    body = /* @__PURE__ */ jsx89("div", { "data-new-table-wizard": "", children: /* @__PURE__ */ jsx89(ImportWizard, { tableId: step2.tableId, source: step2.source, onDone: () => onOpenTable?.(step2.tableId) }) });
+    body = /* @__PURE__ */ jsx89("div", { "data-new-table-wizard": "", children: /* @__PURE__ */ jsx89(ImportWizard, { tableId: step2.tableId, source: step2.source, autoRun: step2.made, onDone: () => onOpenTable?.(step2.tableId) }) });
     footer = /* @__PURE__ */ jsxs79(Fragment30, { children: [
       !step2.made ? /* @__PURE__ */ jsx89(Button53, { variant: "ghost", className: "mr-auto", onClick: () => setStep({ at: "import" }), children: "Back" }) : null,
       /* @__PURE__ */ jsx89(Button53, { variant: "outline", onClick: () => onOpenTable?.(step2.tableId), "data-new-table-open": "", children: "Open the table" })
@@ -35008,6 +35125,7 @@ function TimelineView({
   const [dragging, setDragging] = useState99(null);
   const [linking, setLinking] = useState99(null);
   const [ganttBusy, setGanttBusy] = useState99(false);
+  const [linkTarget, setLinkTarget] = useState99(null);
   const { placed, unscheduled } = useMemo57(() => {
     const out = [];
     const without = [];
@@ -35176,6 +35294,18 @@ function TimelineView({
       label: `${titleOf(target)} now waits on ${titleOf(source)}`
     });
   };
+  const taskRowAt = (x, y) => {
+    const canvas = scroller.current?.querySelector("[data-timeline-canvas]");
+    const body2 = scroller.current;
+    if (!canvas || !body2) return null;
+    const box = canvas.getBoundingClientRect();
+    const frame2 = body2.getBoundingClientRect();
+    if (frame2.width === 0 || x < frame2.left || x > frame2.right) return null;
+    const index = Math.floor((y - box.top - LANE_PAD / 2) / ROW_PX);
+    if (index < 0) return null;
+    const lane = laneRows[0];
+    return lane?.packed.find((b) => b.row === index)?.p.row.id ?? null;
+  };
   const beginLink = (p) => (e) => {
     if (e.button !== void 0 && e.button !== 0) return;
     e.stopPropagation();
@@ -35184,13 +35314,21 @@ function TimelineView({
     const x1 = box.left + box.width / 2;
     const y1 = box.top + box.height / 2;
     setLinking({ id: p.row.id, x1, y1, x2: e.clientX, y2: e.clientY });
-    const onMove = (ev) => setLinking((l) => l ? { ...l, x2: ev.clientX, y2: ev.clientY } : l);
+    const onMove = (ev) => {
+      const x = ev.clientX;
+      const y = ev.clientY;
+      setLinking((l) => l ? { ...l, x2: x, y2: y } : l);
+      const over = taskRowAt(x, y);
+      setLinkTarget(over && over !== p.row.id ? over : null);
+    };
     const onUp = (ev) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
       setLinking(null);
+      setLinkTarget(null);
+      const at = ev;
       const hit = ev.target?.closest?.("[data-timeline-bar]");
-      const id = hit?.getAttribute("data-timeline-bar");
+      const id = taskRowAt(at.clientX, at.clientY) ?? hit?.getAttribute("data-timeline-bar");
       if (id && id !== p.row.id) connect(p.row.id, id);
     };
     window.addEventListener("pointermove", onMove);
@@ -35202,7 +35340,7 @@ function TimelineView({
     try {
       const make = async (current, key, label) => {
         if (current) return current.key;
-        const made = await knobClient.fieldDeclare({ table_id: tableId, spec: { key, label, type: "datetime", kind: "date" } });
+        const made = await knobClient.fieldDeclare({ table_id: tableId, spec: { key, label, parity_type: "datetime", kind: "date" } });
         if (!made.ok) {
           moves.say(refusalSentence(made.error));
           return null;
@@ -35421,6 +35559,7 @@ function TimelineView({
         "data-timeline-span": `${first}..${last}`,
         ...p.marker ? { "data-timeline-marker": "" } : {},
         ...milestone ? { "data-timeline-milestone": "" } : {},
+        ...linkTarget === p.row.id ? { "data-timeline-drop-target": "" } : {},
         ...onCritical ? { "data-timeline-critical": "" } : {},
         ...slip !== null ? { "data-timeline-slip": slip } : {},
         ...may ? {} : { "data-timeline-locked": "" },
@@ -35434,6 +35573,7 @@ function TimelineView({
           outside ? "overflow-visible" : "overflow-hidden",
           milestone ? "border-transparent bg-transparent" : color ? CHOICE_CHIP_CLASS4[color] : "bg-muted",
           onCritical ? "ring-2 ring-amber-500" : void 0,
+          linkTarget === p.row.id ? "ring-2 ring-primary" : void 0,
           may ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
           dragging?.id === p.row.id ? "z-20 shadow-md" : "z-10",
           refused ? "ring-2 ring-destructive" : void 0
@@ -35515,7 +35655,7 @@ function TimelineView({
     /* @__PURE__ */ jsxs109("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
       settings,
       /* @__PURE__ */ jsxs109(DropdownMenu8, { children: [
-        /* @__PURE__ */ jsx120(DropdownMenuTrigger8, { asChild: true, children: /* @__PURE__ */ jsx120(Button75, { size: "sm", variant: ganttOn ? "secondary" : "outline", "aria-label": "Gantt options", "data-timeline-gantt-menu": "", children: "Gantt" }) }),
+        /* @__PURE__ */ jsx120(DropdownMenuTrigger8, { asChild: true, children: /* @__PURE__ */ jsx120(Button75, { size: "sm", variant: "outline", className: ganttOn ? "bg-secondary" : void 0, "aria-label": "Gantt options", "data-timeline-gantt-menu": "", children: "Gantt" }) }),
         /* @__PURE__ */ jsxs109(DropdownMenuContent8, { align: "end", className: "min-w-48", children: [
           /* @__PURE__ */ jsx120(DropdownMenuCheckboxItem2, { checked: ganttOn, onCheckedChange: (on) => setGantt({ mode: on === true }), children: "Gantt view" }),
           ganttOn ? /* @__PURE__ */ jsxs109(Fragment45, { children: [
@@ -35593,6 +35733,7 @@ function TimelineView({
     const ghost = baselineOf(b.p.row);
     const at = shown5(b.p);
     return /* @__PURE__ */ jsxs109("div", { children: [
+      linkTarget === b.p.row.id ? /* @__PURE__ */ jsx120("div", { "aria-hidden": "true", "data-timeline-drop-band": b.p.row.id, className: "pointer-events-none absolute inset-x-0 bg-primary/10", style: { top: LANE_PAD / 2 + b.row * ROW_PX, height: ROW_PX } }) : null,
       ghost ? /* @__PURE__ */ jsx120(
         "div",
         {
@@ -38927,6 +39068,9 @@ function ArchivedPortals({
 import { useCallback as useCallback43, useEffect as useEffect89, useRef as useRef50, useState as useState109 } from "react";
 import { useRecordsClient as useRecordsClient74 } from "@ai-matrx/records/react";
 import { Badge as Badge15, Button as Button80, Input as Input6, Popover as Popover16, PopoverContent as PopoverContent16, PopoverTrigger as PopoverTrigger16, Skeleton as Skeleton18, cn as cn65 } from "@ai-matrx/design-system";
+import { DndContext, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS as CSS2 } from "@dnd-kit/utilities";
 
 // src/seedOnce.ts
 import { useCallback as useCallback42, useRef as useRef49 } from "react";
@@ -38948,7 +39092,7 @@ var NOOP3 = () => {
 };
 function viewActions(whyNot, host, locked = false, personal = false) {
   const one = (base2, run) => {
-    if (whyNot !== null) return { ...base2, disabledReason: whyNot, run: NOOP3 };
+    if (whyNot !== null) return { ...base2, disabledReason: locked && base2.id !== "duplicate" && base2.id !== "lock" ? VIEW_LOCKED_REASON : whyNot, run: NOOP3 };
     if (!run) return { ...base2, disabledReason: ACTION_NOT_HERE_REASON, run: NOOP3 };
     return { ...base2, run };
   };
@@ -38991,6 +39135,25 @@ function seedIsSatisfied(seed, views) {
   if (views.some((v) => v.name === seed.name)) return true;
   return seed.isDefault === true && views.some((v) => v.isDefault);
 }
+function SectionBox({ id, children, ...rest }) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+  return /* @__PURE__ */ jsx131("div", { ref: setNodeRef, className: cn65("rounded-sm", isOver && "bg-accent/40"), ...rest, children });
+}
+function SortableRow({ id, disabled, children }) {
+  const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+  return /* @__PURE__ */ jsx131(
+    "div",
+    {
+      ref: setNodeRef,
+      style: { transform: CSS2.Transform.toString(transform), transition },
+      className: cn65(isDragging && "relative z-10 opacity-80"),
+      "data-view-row": id,
+      ...disabled ? {} : attributes,
+      ...disabled ? {} : listeners2,
+      children
+    }
+  );
+}
 function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews, initialViews, className }) {
   const client = useRecordsClient74();
   const claimSeed = useSeedGuard();
@@ -39022,6 +39185,26 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
     }
   });
   const [renamingSection, setRenamingSection] = useState109(null);
+  const [dragging, setDragging] = useState109(false);
+  const justDragged = useRef50(false);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+  async function dropped(event) {
+    setDragging(false);
+    justDragged.current = true;
+    setTimeout(() => {
+      justDragged.current = false;
+    }, 250);
+    if (!event.over || !views) return;
+    const writes = planViewDrop(views, String(event.active.id), String(event.over.id));
+    for (const w of writes) {
+      const written = await saveViewPatch(client, tableId, w.id, { position: w.position, ..."section" in w ? { section: w.section ?? null } : {} });
+      if (!written.ok) {
+        setError(written.error);
+        break;
+      }
+    }
+    if (writes.length > 0) await load();
+  }
   const toggleShut = (name) => {
     setShut((all) => {
       const next = all.includes(name) ? all.filter((n) => n !== name) : [...all, name];
@@ -39234,83 +39417,89 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
     ) }),
     /* @__PURE__ */ jsxs119(PopoverContent16, { sizing: "content", align: "start", className: "w-64 p-1", "data-view-picker-content": "", children: [
       /* @__PURE__ */ jsxs119("div", { role: "group", "aria-label": "Saved views", className: "flex max-h-[50dvh] flex-col overflow-y-auto", children: [
-        groupViewsBySection(views).map((group) => /* @__PURE__ */ jsxs119("div", { role: "group", "aria-label": group.name ?? "Views", "data-view-section": group.name ?? "", children: [
-          group.name !== null ? renamingSection?.from === group.name ? /* @__PURE__ */ jsxs119(
-            "form",
-            {
-              className: "flex items-center gap-1 px-1 py-1",
-              onSubmit: (e) => {
-                e.preventDefault();
-                void renameSection(group.name, renamingSection.draft);
-              },
-              children: [
-                /* @__PURE__ */ jsx131(
-                  Input6,
-                  {
-                    autoFocus: true,
-                    "aria-label": "New name for this section",
-                    value: renamingSection.draft,
-                    onChange: (e) => setRenamingSection({ from: group.name, draft: e.target.value }),
-                    onKeyDown: (e) => {
-                      if (e.key === "Escape") {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setRenamingSection(null);
-                      }
-                    },
-                    className: "h-7 min-w-0 flex-1 text-xs"
-                  }
-                ),
-                /* @__PURE__ */ jsx131(Button80, { size: "sm", type: "submit", className: "h-7", children: "Save" })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs119("div", { className: "group flex min-h-7 items-center gap-1 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs119(
+        /* @__PURE__ */ jsx131(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: () => setDragging(true), onDragCancel: () => setDragging(false), onDragEnd: (e) => void dropped(e), children: (() => {
+          const groups = groupViewsBySection(views);
+          return groups.some((g) => g.name === null) || !dragging ? groups : [{ name: null, views: [] }, ...groups];
+        })().map((group) => /* @__PURE__ */ jsxs119(SectionBox, { id: sectionDropId(group.name), role: "group", "aria-label": group.name ?? "Views", "data-view-section": group.name ?? "", children: [
+          group.name === null && group.views.length === 0 ? /* @__PURE__ */ jsx131("span", { className: "block px-2 py-1.5 text-[11px] text-muted-foreground", children: "No section" }) : null,
+          /* @__PURE__ */ jsxs119(SortableContext, { items: group.views.map((v) => v.id), strategy: verticalListSortingStrategy, children: [
+            group.name !== null ? renamingSection?.from === group.name ? /* @__PURE__ */ jsxs119(
+              "form",
+              {
+                className: "flex items-center gap-1 px-1 py-1",
+                onSubmit: (e) => {
+                  e.preventDefault();
+                  void renameSection(group.name, renamingSection.draft);
+                },
+                children: [
+                  /* @__PURE__ */ jsx131(
+                    Input6,
+                    {
+                      autoFocus: true,
+                      "aria-label": "New name for this section",
+                      value: renamingSection.draft,
+                      onChange: (e) => setRenamingSection({ from: group.name, draft: e.target.value }),
+                      onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setRenamingSection(null);
+                        }
+                      },
+                      className: "h-7 min-w-0 flex-1 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx131(Button80, { size: "sm", type: "submit", className: "h-7", children: "Save" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs119("div", { className: "group flex min-h-7 items-center gap-1 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs119(
+                "button",
+                {
+                  type: "button",
+                  className: "flex min-w-0 flex-1 items-center gap-1 text-left",
+                  "aria-expanded": !shut.includes(group.name),
+                  "data-view-section-toggle": "",
+                  onClick: () => toggleShut(group.name),
+                  children: [
+                    /* @__PURE__ */ jsx131("svg", { viewBox: "0 0 24 24", className: cn65("h-3 w-3 shrink-0", shut.includes(group.name) && "-rotate-90"), fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx131("path", { d: "m6 9 6 6 6-6" }) }),
+                    /* @__PURE__ */ jsx131("span", { className: "truncate", children: group.name }),
+                    /* @__PURE__ */ jsx131("span", { className: "shrink-0 font-normal normal-case", children: group.views.length })
+                  ]
+                }
+              ),
+              rights.admin ? /* @__PURE__ */ jsxs119(Fragment49, { children: [
+                /* @__PURE__ */ jsx131("button", { type: "button", className: "shrink-0 normal-case hover:text-foreground", "data-view-section-rename": "", onClick: () => setRenamingSection({ from: group.name, draft: group.name }), children: "Rename" }),
+                /* @__PURE__ */ jsx131("button", { type: "button", className: "shrink-0 normal-case hover:text-destructive", "data-view-section-delete": "", title: "The views stay; they leave the section", onClick: () => void renameSection(group.name, null), children: "Delete" })
+              ] }) : null
+            ] }) : null,
+            group.name !== null && shut.includes(group.name) && !group.views.some((v) => v.id === active) ? null : group.views.map((view) => /* @__PURE__ */ jsx131(SortableRow, { id: view.id, disabled: !(rights.admin || view.personal) || view.presentation?.locked === true, children: /* @__PURE__ */ jsxs119(
               "button",
               {
                 type: "button",
-                className: "flex min-w-0 flex-1 items-center gap-1 text-left",
-                "aria-expanded": !shut.includes(group.name),
-                "data-view-section-toggle": "",
-                onClick: () => toggleShut(group.name),
+                "aria-pressed": view.id === active,
+                className: cn65(
+                  "flex min-h-8 w-full items-center gap-2 rounded-sm px-2 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+                  group.name !== null && "pl-4",
+                  view.id === active && "font-medium"
+                ),
+                onClick: () => {
+                  if (justDragged.current) return;
+                  setActive(view.id);
+                  onActiveView?.(view);
+                  setOpen(false);
+                },
+                title: view.ruleId ? "Membership is this view's Rule" : "The whole table",
                 children: [
-                  /* @__PURE__ */ jsx131("svg", { viewBox: "0 0 24 24", className: cn65("h-3 w-3 shrink-0", shut.includes(group.name) && "-rotate-90"), fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx131("path", { d: "m6 9 6 6 6-6" }) }),
-                  /* @__PURE__ */ jsx131("span", { className: "truncate", children: group.name }),
-                  /* @__PURE__ */ jsx131("span", { className: "shrink-0 font-normal normal-case", children: group.views.length })
+                  /* @__PURE__ */ jsx131("span", { className: "min-w-0 flex-1 truncate", children: view.name }),
+                  view.presentation?.locked === true ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-locked": "", title: VIEW_LOCKED_REASON, children: "Locked" }) : null,
+                  view.personal ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-personal": "", title: "Only you see this view", children: "Personal" }) : null,
+                  view.isDefault ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-default": "", children: "Default" }) : null
                 ]
               }
-            ),
-            rights.admin ? /* @__PURE__ */ jsxs119(Fragment49, { children: [
-              /* @__PURE__ */ jsx131("button", { type: "button", className: "shrink-0 normal-case hover:text-foreground", "data-view-section-rename": "", onClick: () => setRenamingSection({ from: group.name, draft: group.name }), children: "Rename" }),
-              /* @__PURE__ */ jsx131("button", { type: "button", className: "shrink-0 normal-case hover:text-destructive", "data-view-section-delete": "", title: "The views stay; they leave the section", onClick: () => void renameSection(group.name, null), children: "Delete" })
-            ] }) : null
-          ] }) : null,
-          group.name !== null && shut.includes(group.name) && !group.views.some((v) => v.id === active) ? null : group.views.map((view) => /* @__PURE__ */ jsxs119(
-            "button",
-            {
-              type: "button",
-              "aria-pressed": view.id === active,
-              className: cn65(
-                "flex min-h-8 w-full items-center gap-2 rounded-sm px-2 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
-                group.name !== null && "pl-4",
-                view.id === active && "font-medium"
-              ),
-              onClick: () => {
-                setActive(view.id);
-                onActiveView?.(view);
-                setOpen(false);
-              },
-              title: view.ruleId ? "Membership is this view's Rule" : "The whole table",
-              children: [
-                /* @__PURE__ */ jsx131("span", { className: "min-w-0 flex-1 truncate", children: view.name }),
-                view.presentation?.locked === true ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-locked": "", title: VIEW_LOCKED_REASON, children: "Locked" }) : null,
-                view.personal ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-personal": "", title: "Only you see this view", children: "Personal" }) : null,
-                view.isDefault ? /* @__PURE__ */ jsx131(Badge15, { variant: "neutral", className: "shrink-0 px-1.5 py-0 text-[10px]", "data-view-default": "", children: "Default" }) : null
-              ]
-            },
-            view.id
-          ))
-        ] }, group.name ?? "__loose")),
+            ) }, view.id))
+          ] })
+        ] }, group.name ?? "__loose")) }),
         views.length === 0 && !rights.admin ? /* @__PURE__ */ jsx131("span", { className: "px-2 py-1 text-xs text-muted-foreground", children: rights.why("structure") }) : null
       ] }),
       /* @__PURE__ */ jsx131("div", { className: "mt-1 border-t border-border pt-1", children: naming ? /* @__PURE__ */ jsxs119(
@@ -44610,9 +44799,9 @@ function SubscriptionsPanel({ tableId, activeRuleId, className }) {
 import { copyText as copyText8 } from "@ai-matrx/kit/clipboard";
 import { ErrorBox as ErrorBox7 } from "@ai-matrx/design-system";
 import { useCallback as useCallback56, useEffect as useEffect106, useMemo as useMemo73, useRef as useRef58, useState as useState127 } from "react";
-import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS as CSS2 } from "@dnd-kit/utilities";
+import { DndContext as DndContext2, KeyboardSensor, PointerSensor as PointerSensor2, closestCenter as closestCenter2, useSensor as useSensor2, useSensors as useSensors2 } from "@dnd-kit/core";
+import { SortableContext as SortableContext2, arrayMove, sortableKeyboardCoordinates, useSortable as useSortable2, verticalListSortingStrategy as verticalListSortingStrategy2 } from "@dnd-kit/sortable";
+import { CSS as CSS3 } from "@dnd-kit/utilities";
 import { useFields as useFields28, useRecordsClient as useRecordsClient89, useTable as useTable30 } from "@ai-matrx/records/react";
 import { publicFormPath } from "@ai-matrx/records";
 import {
@@ -46269,9 +46458,9 @@ function QuestionList({
   onQuestions,
   onQuestion
 }) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  const sensors = useSensors2(
+    useSensor2(PointerSensor2, { activationConstraint: { distance: 4 } }),
+    useSensor2(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
   const askable = askableFields([...fields]);
   const unasked = askable.filter((f) => !draft.questions.some((q) => q.field === f.key));
@@ -46293,7 +46482,7 @@ function QuestionList({
       /* @__PURE__ */ jsx151("span", { className: "font-medium text-foreground", children: "Questions" }),
       /* @__PURE__ */ jsx151("span", { className: "tabular-nums", children: draft.questions.length })
     ] }),
-    /* @__PURE__ */ jsx151(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: dragEnd, children: /* @__PURE__ */ jsx151(SortableContext, { items: draft.questions.map((q) => q.field), strategy: verticalListSortingStrategy, children: draft.questions.map((question, index) => /* @__PURE__ */ jsx151(
+    /* @__PURE__ */ jsx151(DndContext2, { sensors, collisionDetection: closestCenter2, onDragEnd: dragEnd, children: /* @__PURE__ */ jsx151(SortableContext2, { items: draft.questions.map((q) => q.field), strategy: verticalListSortingStrategy2, children: draft.questions.map((question, index) => /* @__PURE__ */ jsx151(
       QuestionRow,
       {
         index,
@@ -46346,14 +46535,14 @@ function QuestionRow({
   onChange,
   onRemove
 }) {
-  const sortable = useSortable({ id: question.field });
+  const sortable = useSortable2({ id: question.field });
   const [open, setOpen] = useState127(true);
   const name = field2 ? fieldName(field2) : question.field;
   return /* @__PURE__ */ jsxs139(
     "div",
     {
       ref: sortable.setNodeRef,
-      style: { transform: CSS2.Transform.toString(sortable.transform), transition: sortable.transition },
+      style: { transform: CSS3.Transform.toString(sortable.transform), transition: sortable.transition },
       className: cn84("rounded border bg-background px-2 py-1.5", sortable.isDragging && "z-10 shadow-md"),
       "data-records-form-question-row": question.field,
       children: [
@@ -47303,20 +47492,20 @@ import {
 
 // src/DashboardGrid.tsx
 import {
-  DndContext as DndContext2,
+  DndContext as DndContext3,
   KeyboardSensor as KeyboardSensor2,
-  PointerSensor as PointerSensor2,
+  PointerSensor as PointerSensor3,
   pointerWithin,
-  useSensor as useSensor2,
-  useSensors as useSensors2
+  useSensor as useSensor3,
+  useSensors as useSensors3
 } from "@dnd-kit/core";
 import {
-  SortableContext as SortableContext2,
+  SortableContext as SortableContext3,
   rectSortingStrategy,
   sortableKeyboardCoordinates as sortableKeyboardCoordinates2,
-  useSortable as useSortable2
+  useSortable as useSortable3
 } from "@dnd-kit/sortable";
-import { CSS as CSS3 } from "@dnd-kit/utilities";
+import { CSS as CSS4 } from "@dnd-kit/utilities";
 import { cn as cn89 } from "@ai-matrx/design-system";
 
 // src/dashboardLayout.ts
@@ -47380,9 +47569,9 @@ var dashboardCollision = (args) => {
   }).sort((a, b) => a.data.value - b.data.value);
 };
 function DashboardGrid({ items, arranging, onMove, onSpan }) {
-  const sensors = useSensors2(
-    useSensor2(PointerSensor2, { activationConstraint: { distance: 4 } }),
-    useSensor2(KeyboardSensor2, { coordinateGetter: sortableKeyboardCoordinates2 })
+  const sensors = useSensors3(
+    useSensor3(PointerSensor3, { activationConstraint: { distance: 4 } }),
+    useSensor3(KeyboardSensor2, { coordinateGetter: sortableKeyboardCoordinates2 })
   );
   const ids = items.map((item) => item.id);
   function dragEnd(event) {
@@ -47392,7 +47581,7 @@ function DashboardGrid({ items, arranging, onMove, onSpan }) {
   }
   const grid = /* @__PURE__ */ jsx156("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-12", children: items.map((item, index) => /* @__PURE__ */ jsx156(GridCell2, { item, index, arranging, onSpan }, item.id)) });
   if (!arranging) return grid;
-  return /* @__PURE__ */ jsx156(DndContext2, { sensors, collisionDetection: dashboardCollision, onDragEnd: dragEnd, children: /* @__PURE__ */ jsx156(SortableContext2, { items: ids, strategy: rectSortingStrategy, children: grid }) });
+  return /* @__PURE__ */ jsx156(DndContext3, { sensors, collisionDetection: dashboardCollision, onDragEnd: dragEnd, children: /* @__PURE__ */ jsx156(SortableContext3, { items: ids, strategy: rectSortingStrategy, children: grid }) });
 }
 function GridCell2({
   item,
@@ -47400,8 +47589,8 @@ function GridCell2({
   arranging,
   onSpan
 }) {
-  const sortable = useSortable2({ id: item.id, disabled: !arranging });
-  const style = arranging ? { transform: CSS3.Transform.toString(sortable.transform), transition: sortable.transition } : void 0;
+  const sortable = useSortable3({ id: item.id, disabled: !arranging });
+  const style = arranging ? { transform: CSS4.Transform.toString(sortable.transform), transition: sortable.transition } : void 0;
   return /* @__PURE__ */ jsxs144(
     "div",
     {