@ai-matrx/records-ui 0.60.0 → 0.61.0

package/dist/index.js

@@ -1178,8 +1178,13 @@ var LabelContext = createContext3({
   // provides one, so this is only ever a bare unit test.
   lookup: () => null,
   want: () => {
-  }
+  },
+  waiting: () => null
 });
+var SAY_WHAT_YOU_ARE_WAITING_FOR_AFTER_MS = 1e3;
+function waitingLineFor(field, target) {
+  return field.type === "list" ? "Reading this column\u2019s list of choices\u2026" : `Reading the ${target ?? "records"} this column points at\u2026`;
+}
 function idsOf(value) {
   if (Array.isArray(value)) return value.map(String).filter(isId);
   if (typeof value === "string" && isId(value)) return [value];
@@ -1196,13 +1201,48 @@ function RecordLabelProvider({ children }) {
   const client = useRecordsClient5();
   const [names, setNames] = useState5({});
   const [settled, setSettled] = useState5({});
+  const [waitingLines, setWaitingLines] = useState5({});
   const asked = useRef2(/* @__PURE__ */ new Set());
   const chased = useRef2(/* @__PURE__ */ new Set());
+  const timers = useRef2(/* @__PURE__ */ new Map());
+  const startWaitClock = useCallback3((field, target) => {
+    if (timers.current.has(field.id)) return;
+    timers.current.set(
+      field.id,
+      setTimeout(() => {
+        timers.current.delete(field.id);
+        setWaitingLines(
+          (current) => current[field.id] ? current : { ...current, [field.id]: waitingLineFor(field, target) }
+        );
+      }, SAY_WHAT_YOU_ARE_WAITING_FOR_AFTER_MS)
+    );
+  }, []);
+  const stopWaitClock = useCallback3((fieldId) => {
+    const timer = timers.current.get(fieldId);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(fieldId);
+    }
+    setWaitingLines((current) => {
+      if (!current[fieldId]) return current;
+      const next = { ...current };
+      delete next[fieldId];
+      return next;
+    });
+  }, []);
+  useEffect5(
+    () => () => {
+      for (const timer of timers.current.values()) clearTimeout(timer);
+      timers.current.clear();
+    },
+    []
+  );
   const want = useCallback3(
     (field) => {
       if (!pointsAtRecords(field)) return;
       if (asked.current.has(field.id)) return;
       asked.current.add(field.id);
+      startWaitClock(field, null);
       void (async () => {
         if (field.type === "list") {
           const result = await client.fieldOptions({ field_id: field.id });
@@ -1216,11 +1256,13 @@ function RecordLabelProvider({ children }) {
             });
           }
           setSettled((current) => ({ ...current, [field.id]: true }));
+          stopWaitClock(field.id);
           return;
         }
         const target = field.relation_target;
         if (!target) {
           setSettled((current) => ({ ...current, [field.id]: true }));
+          stopWaitClock(field.id);
           return;
         }
         const [rows, tables] = await Promise.all([
@@ -1238,24 +1280,54 @@ function RecordLabelProvider({ children }) {
           });
         }
         setSettled((current) => ({ ...current, [field.id]: true }));
+        stopWaitClock(field.id);
       })();
     },
-    [client]
+    [client, startWaitClock, stopWaitClock]
   );
+  const queued = useRef2(/* @__PURE__ */ new Map());
+  const flushing = useRef2(null);
+  const flush = useCallback3(() => {
+    flushing.current = null;
+    const batch = [...queued.current.entries()];
+    queued.current.clear();
+    if (batch.length === 0) return;
+    void (async () => {
+      const learned = {};
+      const LANES = 6;
+      let at = 0;
+      await Promise.all(
+        Array.from({ length: Math.min(LANES, batch.length) }, async () => {
+          for (; ; ) {
+            const next = batch[at];
+            at += 1;
+            if (!next) return;
+            const [id] = next;
+            const result = await client.recordRead({ record_id: id });
+            learned[id] = result.ok ? recordName(result.data.document, null, "Untitled") : WITHHELD_RECORD_LABEL;
+          }
+        })
+      );
+      setNames((current) => ({ ...current, ...learned }));
+      for (const [, field] of batch) stopWaitClock(field.id);
+    })();
+  }, [client, stopWaitClock]);
   const chase = useCallback3(
     (field, id) => {
       const key = `${field.id}:${id}`;
       if (chased.current.has(key)) return;
       chased.current.add(key);
-      void (async () => {
-        const result = await client.recordRead({ record_id: id });
-        setNames((current) => ({
-          ...current,
-          [id]: result.ok ? recordName(result.data.document, null, "Untitled") : WITHHELD_RECORD_LABEL
-        }));
-      })();
+      queued.current.set(id, field);
+      startWaitClock(field, null);
+      if (flushing.current === null) flushing.current = setTimeout(flush, 0);
     },
-    [client]
+    [flush, startWaitClock]
+  );
+  useEffect5(
+    () => () => {
+      if (flushing.current !== null) clearTimeout(flushing.current);
+    },
+    []
   );
   const lookup = useCallback3(
     (field, id) => {
@@ -1266,7 +1338,8 @@ function RecordLabelProvider({ children }) {
     },
     [names, settled, chase]
   );
-  const value = useMemo5(() => ({ lookup, want }), [lookup, want]);
+  const waiting = useCallback3((field) => waitingLines[field.id] ?? null, [waitingLines]);
+  const value = useMemo5(() => ({ lookup, want, waiting }), [lookup, want, waiting]);
   return /* @__PURE__ */ jsx7(LabelContext.Provider, { value, children });
 }
 function useRecordLabels(fields) {
@@ -1276,6 +1349,10 @@ function useRecordLabels(fields) {
   }, [fields, want]);
   return lookup;
 }
+function useLabelWait(field) {
+  const { waiting } = useContext3(LabelContext);
+  return field ? waiting(field) : null;
+}
 
 // src/values.tsx
 import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
@@ -1289,7 +1366,7 @@ var ABSENCE_WORDS = {
   refused: "refused",
   conflicting: "conflicting"
 };
-function renderValue(field, value, document2, labels) {
+function renderValue(field, value, document2, labels, stillWaitingFor) {
   const envelope = envelopeFor(document2, field.key);
   if (envelope?.absent) {
     return /* @__PURE__ */ jsx8("span", { className: "text-xs italic text-muted-foreground", title: `VAL-2: ${envelope.absent}`, children: ABSENCE_WORDS[String(envelope.absent)] ?? String(envelope.absent) });
@@ -1310,13 +1387,13 @@ function renderValue(field, value, document2, labels) {
   if (typeof value === "boolean") {
     return /* @__PURE__ */ jsx8("span", { className: kind === "checkbox" ? "text-sm" : "", title: value ? "Yes" : "No", children: value ? "\u2713" : "\u2014" });
   }
-  return /* @__PURE__ */ jsx8("span", { className: cn5("truncate", kind === "number" || kind === "currency" || kind === "percent" ? "tabular-nums" : ""), children: scalarText(field, value, labels) });
+  return /* @__PURE__ */ jsx8("span", { className: cn5("truncate", kind === "number" || kind === "currency" || kind === "percent" ? "tabular-nums" : ""), children: scalarText(field, value, labels, stillWaitingFor) });
 }
-function scalarText(field, value, labels) {
+function scalarText(field, value, labels, stillWaitingFor) {
   if (value === null || value === void 0) return "\u2014";
   const kind = editorKindFor(field);
   if (isId(value) && (field.type === "list" || field.type === "relation")) {
-    return labels?.(field, String(value)) ?? "Loading\u2026";
+    return labels?.(field, String(value)) ?? stillWaitingFor ?? "Loading\u2026";
   }
   if (typeof value === "number") {
     if (kind === "percent") return `${value}%`;
@@ -1348,9 +1425,10 @@ function RecordValue({
   format
 }) {
   const labels = useRecordLabels(ONE_FIELD_ARRAY_CACHE(field));
+  const stillWaitingFor = useLabelWait(field);
   const formatted = format ? formatColumnValue({ format }, value) : null;
   if (formatted) return /* @__PURE__ */ jsx8(FormattedCell, { result: formatted });
-  return /* @__PURE__ */ jsx8(Fragment2, { children: renderValue(field, value, document2, labels) });
+  return /* @__PURE__ */ jsx8(Fragment2, { children: renderValue(field, value, document2, labels, stillWaitingFor) });
 }
 var ONE_FIELD_ARRAYS = /* @__PURE__ */ new WeakMap();
 function ONE_FIELD_ARRAY_CACHE(field) {
@@ -6214,6 +6292,37 @@ var LAYOUT_FIELD_KIND = {
   calendar: "date",
   gallery: null
 };
+var PAGE_VIEWS = [...VIEW_LAYOUTS, "dashboards"];
+var PAGE_VIEW_LABEL = {
+  ...LAYOUT_LABEL,
+  dashboards: "Dashboards"
+};
+var PAGE_VIEW_SPELLINGS = {
+  grid: "grid",
+  table: "grid",
+  rows: "grid",
+  list: "grid",
+  kanban: "kanban",
+  board: "kanban",
+  pipeline: "kanban",
+  calendar: "calendar",
+  month: "calendar",
+  schedule: "calendar",
+  gallery: "gallery",
+  cards: "gallery",
+  dashboards: "dashboards",
+  dashboard: "dashboards",
+  charts: "dashboards"
+};
+function pageViewFromParam(raw) {
+  if (typeof raw !== "string") return null;
+  const token = raw.trim().toLowerCase();
+  if (token === "") return null;
+  return PAGE_VIEW_SPELLINGS[token] ?? null;
+}
+function unknownViewLine(raw) {
+  return `The link asked for a view called \u201C${raw}\u201D, which this table has no view for, so you are looking at ${PAGE_VIEW_LABEL.grid}. The views this table has are ${PAGE_VIEWS.map((v) => PAGE_VIEW_LABEL[v]).join(", ")} \u2014 pick one above and the address follows it.`;
+}
 var LAYOUT_NO_FIELD = {
   grid: "",
   kanban: "This table has no choice field yet, so there is nothing to make columns from. Add a field that holds one of a set of choices \u2014 Add field, then Select \u2014 and it appears here.",
@@ -14401,6 +14510,19 @@ function surfaceChosen(current, asking) {
 function openingRail(activeRecordId) {
   return activeRecordId ? { rail: "record", record: activeRecordId } : { rail: "none", record: null };
 }
+function openingView(activeView, activeDashboardId) {
+  const named = pageViewFromParam(activeView);
+  if (named === null) {
+    const asked = typeof activeView === "string" ? activeView.trim() : "";
+    return {
+      main: activeDashboardId ? "dashboards" : "records",
+      layout: null,
+      unknown: asked === "" ? null : asked
+    };
+  }
+  if (named === "dashboards") return { main: "dashboards", layout: null, unknown: null };
+  return { main: "records", layout: named, unknown: null };
+}
 function TablePage({
   tableId,
   pageSize = 100,
@@ -14409,6 +14531,8 @@ function TablePage({
   leaveLabel = "Back to your tables",
   activeDashboardId,
   activeRecordId,
+  activeView,
+  onViewChanged,
   className
 }) {
   const client = useRecordsClient43();
@@ -14417,22 +14541,37 @@ function TablePage({
   const organizationId = useRecordsClient43().config.organizationId;
   const [view, setView] = useState52(null);
   const opening = openingRail(activeRecordId);
+  const opened = openingView(activeView, activeDashboardId);
   const [asking, setAsking] = useState52(null);
+  const [layoutFromLink, setLayoutFromLink] = useState52(opened.layout);
   const [surface, setSurface] = useState52({
-    main: activeDashboardId ? "dashboards" : "records",
+    main: opened.main,
     rail: opening.rail
   });
   const { main, rail } = surface;
   const setRail = (next) => setSurface((now) => ({ ...now, rail: next }));
   const [openRecord, setOpenRecord] = useState52(opening.record);
   const viewVersion = useRecordVersion(view?.id ?? null);
-  const press = (pressed) => setSurface((now) => chooseSurface(now, pressed));
+  const shownLayout = layoutFromLink ?? view?.layout ?? "grid";
+  const press = (pressed) => {
+    const next = chooseSurface(surface, pressed);
+    setSurface(next);
+    if (next.main !== surface.main) {
+      onViewChanged?.(next.main === "dashboards" ? "dashboards" : shownLayout);
+    }
+  };
   const show = (next) => press({ rail: next });
   useEffect41(() => {
     if (!activeRecordId) return;
     setOpenRecord(activeRecordId);
     setSurface((now) => ({ ...now, rail: "record" }));
   }, [activeRecordId]);
+  useEffect41(() => {
+    const named = pageViewFromParam(activeView);
+    if (named === null) return;
+    setLayoutFromLink(named === "dashboards" ? null : named);
+    setSurface((now) => ({ ...now, main: named === "dashboards" ? "dashboards" : "records" }));
+  }, [activeView]);
   const patchView = useCallback37(
     async (patch) => {
       const current = view;
@@ -14586,11 +14725,16 @@ function TablePage({
         /* @__PURE__ */ jsx57(ExportMenu, { tableId })
       ] }),
       main === "dashboards" ? /* @__PURE__ */ jsx57(DashboardCanvas, { tableId, activeDashboardId: activeDashboardId ?? null }) : /* @__PURE__ */ jsxs52(Fragment27, { children: [
+        opened.unknown ? /* @__PURE__ */ jsx57("p", { className: "rounded-md border border-amber-600/40 bg-amber-500/5 px-3 py-2 text-xs leading-relaxed text-amber-700 dark:border-amber-400/40 dark:text-amber-300", children: unknownViewLine(opened.unknown) }) : null,
         /* @__PURE__ */ jsx57(
           ViewSwitcher,
           {
-            view: view ?? defaultView(tableId),
+            view: { ...view ?? defaultView(tableId), layout: shownLayout },
             pageSize,
+            onLayoutChange: (layout) => {
+              setLayoutFromLink(layout);
+              onViewChanged?.(layout);
+            },
             ...view ? { onViewChange: (patch) => void patchView(patch) } : {},
             ...rights.write ? { onNewRecordForm: () => setRail("new-record") } : {},
             onOpenRecord: (recordId) => {
@@ -14766,6 +14910,8 @@ export {
   NO_SHARE_REASON,
   NO_UPLOAD_REASON,
   NotifyRuleEditor,
+  PAGE_VIEWS,
+  PAGE_VIEW_LABEL,
   PARITY_LABEL,
   PARITY_MADE_OF,
   Peek,
@@ -14789,6 +14935,7 @@ export {
   RefusalNotice,
   RelationPicker,
   SAVED_VIEWS_UNAVAILABLE,
+  SAY_WHAT_YOU_ARE_WAITING_FOR_AFTER_MS,
   SERIES_COLORS,
   SOMEBODY,
   STORE_ANSWERS_THESE,
@@ -14859,6 +15006,9 @@ export {
   machineIdentityIn,
   memberName,
   nextInWords,
+  openingRail,
+  openingView,
+  pageViewFromParam,
   parityTypesWithNoExplanation,
   parseGridPresentation,
   personActor,
@@ -14884,10 +15034,12 @@ export {
   tableName,
   tableRightsAt,
   tokenFor,
+  unknownViewLine,
   useCanShare,
   useEmbedHandshake,
   useEnrichCells,
   useGridEditing,
+  useLabelWait,
   useMeasuredWidth,
   useMyChecklistSteps,
   useRecordLabels,