@marktiderman/genesis-studio 0.2.5 → 0.2.7

package/README.md

@@ -1,6 +1,6 @@
 # @marktiderman/genesis-studio
 
-**Genesis Data Studio**, the workspace UI: a sidebar of the tables the signed-in user may see, and a
+**Genesis Data Studio**, the editor UI: a sidebar of the tables the signed-in user may see, and a
 sheet of the selected one where a cell is edited in place. Every save is checked against the
 version of the row it was read at and committed with its audit entry, and the outcome is on screen:
 "Saved", with the audit entry, or "Not saved" and why.

package/dist/index.js

@@ -3,7 +3,7 @@
 // src/DataStudio.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo8, useRef, useState as useState10 } from "react";
 import { keepPreviousData as keepPreviousData2, useQuery as useQuery5, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2, Database, History as History2, Lock as Lock2, PencilLine, Plus as Plus3, Table2 as Table22, Trash2 as Trash22, Undo2, X as X4 } from "lucide-react";
+import { ChevronLeft, ChevronRight, Database, History as History2, Lock as Lock2, PencilLine, Plus as Plus3, Table2 as Table22, Trash2 as Trash22, Undo2, X as X4 } from "lucide-react";
 import { GenesisProvider } from "@marktiderman/genesis-core/provider";
 import {
   encodeRecordKey as encodeRecordKey5,
@@ -11,10 +11,10 @@ import {
   keyFields as keyFields3
 } from "@marktiderman/genesis-core/schema";
 import { useSavedViews } from "@marktiderman/genesis-ui/data";
-import { Button as Button9 } from "@marktiderman/genesis-ui/button";
+import { Button as Button8 } from "@marktiderman/genesis-ui/button";
 import { Dialog as Dialog3, DialogContent as DialogContent3, DialogDescription as DialogDescription3, DialogHeader as DialogHeader3, DialogTitle as DialogTitle3 } from "@marktiderman/genesis-ui/dialog";
 import { Alert as Alert2, AlertDescription as AlertDescription2, AlertTitle as AlertTitle2 } from "@marktiderman/genesis-ui/alert";
-import { cn as cn4 } from "@marktiderman/genesis-ui/utils";
+import { cn as cn3 } from "@marktiderman/genesis-ui/utils";
 
 // src/router.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -43,7 +43,7 @@ function locationFromSearchParams(params) {
     ...params.get(PARAM.record) ? { record: params.get(PARAM.record) } : {},
     ...VIEWS.includes(params.get(PARAM.view) ?? "") ? { view: params.get(PARAM.view) } : {},
     ...params.get(PARAM.by) ? { by: params.get(PARAM.by) } : {},
-    .../^\d{4}-\d{2}$/.test(params.get(PARAM.month) ?? "") ? { month: params.get(PARAM.month) } : {}
+    .../^\d{4}-(0[1-9]|1[0-2])$/.test(params.get(PARAM.month) ?? "") ? { month: params.get(PARAM.month) } : {}
   };
 }
 function searchParamsFromLocation(location, base) {
@@ -1731,12 +1731,12 @@ function KanbanView({
 // src/views/CalendarView.tsx
 import { useEffect as useEffect4, useMemo as useMemo5 } from "react";
 import { keepPreviousData, useQuery as useQuery4 } from "@tanstack/react-query";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { encodeRecordKey as encodeRecordKey3, isDataWriteError as isDataWriteError3 } from "@marktiderman/genesis-core/schema";
-import { Button as Button6 } from "@marktiderman/genesis-ui/button";
-import { cn as cn3 } from "@marktiderman/genesis-ui/utils";
+import { EventCalendar, readEventTime as readEventTime2 } from "@marktiderman/genesis-ui/data";
 
 // src/views/fields.ts
+import { deviceTimeZone } from "@marktiderman/genesis-core/dates";
+import { calendarWindow, readEventTime, timeStorage, windowBounds } from "@marktiderman/genesis-ui/data";
 function boardFields(schema) {
   return schema.fields.filter((f) => !f.array && Boolean(choicesFor(f)));
 }
@@ -1746,58 +1746,20 @@ function dateFields(schema) {
 function isDateOnly(field) {
   return field.dbType === "date" || field.widget === "date";
 }
-var DB_DATE = /^(\d{4}-\d{2}-\d{2})(?:[ T](\d{2}:\d{2}(?::\d{2})?)(\.\d+)?)?\s*(Z|[+-]\d{2}(?::?\d{2})?)?$/;
-function localDay(value, dateOnly) {
-  if (typeof value !== "string") return null;
-  const m = DB_DATE.exec(value.trim());
-  if (!m) return null;
-  if (dateOnly || !m[2]) return m[1];
-  let zone = m[4] ?? "";
-  if (/^[+-]\d{2}$/.test(zone)) zone += ":00";
-  else if (/^[+-]\d{4}$/.test(zone)) zone = `${zone.slice(0, 3)}:${zone.slice(3)}`;
-  const time = m[2].length === 5 ? `${m[2]}:00` : m[2];
-  const ms = m[3] ? m[3].slice(0, 4).padEnd(4, "0") : "";
-  const date = /* @__PURE__ */ new Date(`${m[1]}T${time}${ms}${zone}`);
-  if (Number.isNaN(date.getTime())) return null;
-  return dayKey(date);
-}
 function dayKey(date) {
   const pad = (n) => String(n).padStart(2, "0");
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 }
-function isZoned(field) {
-  return !isDateOnly(field) && (field.dbType === void 0 || /with time zone|timestamptz/.test(field.dbType));
-}
 function monthBounds(month, field) {
-  const [y, m] = month.split("-").map(Number);
-  const start = new Date(y, m - 1, 1);
-  const next = new Date(y, m, 1);
-  return isZoned(field) ? { from: start.toISOString(), to: next.toISOString() } : { from: dayKey(start), to: dayKey(next) };
+  return windowBounds(calendarWindow("month", `${month}-01`, { weekStartsOn: 1 }), timeStorage(field), deviceTimeZone());
 }
 function currentMonth(now = /* @__PURE__ */ new Date()) {
   return dayKey(now).slice(0, 7);
 }
-function shiftMonth(month, by) {
-  const [y, m] = month.split("-").map(Number);
-  return currentMonth(new Date(y, m - 1 + by, 1));
-}
 
 // src/views/CalendarView.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var CALENDAR_CAP = 200;
-var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-function weeksOf(month) {
-  const [y, m] = month.split("-").map(Number);
-  const first = new Date(y, m - 1, 1);
-  const days = new Date(y, m, 0).getDate();
-  const lead = (first.getDay() + 6) % 7;
-  const cells = [
-    ...Array.from({ length: lead }, () => null),
-    ...Array.from({ length: days }, (_, i) => dayKey(new Date(y, m - 1, i + 1)))
-  ];
-  while (cells.length % 7) cells.push(null);
-  return Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
-}
 function CalendarView({
   provider,
   schema,
@@ -1835,83 +1797,55 @@ function CalendarView({
     if (signedOut) onSignedOut();
   }, [signedOut, onSignedOut]);
   const rows = query.data?.data ?? [];
-  const byDay = useMemo5(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const row of rows) {
-      const day = localDay(row[field.name], dateOnly);
-      if (!day) continue;
-      map.set(day, [...map.get(day) ?? [], row]);
-    }
-    return map;
-  }, [rows, field.name, dateOnly]);
-  const total = query.data?.total ?? 0;
-  const today = dayKey(/* @__PURE__ */ new Date());
-  const title = (/* @__PURE__ */ new Date(`${month}-01T00:00:00`)).toLocaleDateString(void 0, { month: "long", year: "numeric" });
   const labelField = schema.labelField;
-  return /* @__PURE__ */ jsxs7("div", { className: "space-y-2", "data-testid": "studio-calendar", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx8(Button6, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", "aria-label": "Previous month", onClick: () => onMonthChange(shiftMonth(month, -1)), children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }) }),
-      /* @__PURE__ */ jsx8(Button6, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", "aria-label": "Next month", onClick: () => onMonthChange(shiftMonth(month, 1)), children: /* @__PURE__ */ jsx8(ChevronRight, { className: "h-4 w-4", "aria-hidden": true }) }),
-      /* @__PURE__ */ jsx8(Button6, { type: "button", variant: "ghost", size: "sm", onClick: () => onMonthChange(currentMonth()), children: "Today" }),
-      /* @__PURE__ */ jsx8("h3", { className: "text-sm font-semibold", "aria-live": "polite", children: title }),
-      /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground", children: [
+  const events = useMemo5(
+    () => rows.flatMap((row) => {
+      const start = readEventTime2(row[field.name], { dateOnly });
+      if (start === null) return [];
+      const key = String(encodeRecordKey3(schema, row));
+      return [{ key, title: displayText(labelField ? row[labelField] : void 0) ?? key, start, row }];
+    }),
+    [rows, field.name, dateOnly, schema, labelField]
+  );
+  const total = query.data?.total ?? 0;
+  return /* @__PURE__ */ jsx8(
+    EventCalendar,
+    {
+      events,
+      layout: "month",
+      weekStartsOn: 1,
+      anchor: `${month}-01`,
+      onAnchorChange: (day) => onMonthChange(day.slice(0, 7)),
+      label: `${schema.label ?? schema.name} by ${fieldLabel(field)}`,
+      toolbar: /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground", children: [
         "by ",
         fieldLabel(field)
-      ] })
-    ] }),
-    total > rows.length && /* @__PURE__ */ jsxs7("p", { role: "status", className: "text-xs text-muted-foreground", "data-testid": "studio-calendar-capped", children: [
-      "Showing the first ",
-      rows.length.toLocaleString(),
-      " of ",
-      total.toLocaleString(),
-      " rows this month. Filter the table to see the rest."
-    ] }),
-    query.isError && !signedOut && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-sm text-destructive", children: query.error instanceof Error ? query.error.message : String(query.error) }),
-    /* @__PURE__ */ jsx8("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "w-full min-w-[42rem] table-fixed border-collapse text-sm", children: [
-      /* @__PURE__ */ jsxs7("caption", { className: "sr-only", children: [
-        schema.label ?? schema.name,
-        " by ",
-        fieldLabel(field),
-        ", ",
-        title
       ] }),
-      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx8("th", { scope: "col", className: "py-1 text-left text-xs font-medium text-muted-foreground", children: d }, d)) }) }),
-      /* @__PURE__ */ jsx8("tbody", { children: weeksOf(month).map((week, w) => /* @__PURE__ */ jsx8("tr", { children: week.map((day, d) => /* @__PURE__ */ jsx8(
-        "td",
-        {
-          className: cn3("h-28 border align-top", !day && "bg-muted/30"),
-          "data-day": day ?? void 0,
-          children: day && /* @__PURE__ */ jsxs7("div", { className: "flex h-full flex-col gap-0.5 p-1", children: [
-            /* @__PURE__ */ jsx8("span", { className: cn3("text-xs", day === today ? "font-bold text-primary" : "text-muted-foreground"), children: Number(day.slice(8)) }),
-            /* @__PURE__ */ jsx8("ul", { className: "max-h-24 space-y-0.5 overflow-y-auto", children: (byDay.get(day) ?? []).map((row) => {
-              const id = String(encodeRecordKey3(schema, row));
-              return /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(
-                "button",
-                {
-                  type: "button",
-                  className: "w-full truncate rounded bg-primary/10 px-1.5 py-0.5 text-left text-xs hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  onClick: () => onOpenRecord(id),
-                  "data-testid": "studio-calendar-item",
-                  children: displayText(labelField ? row[labelField] : void 0) ?? id
-                }
-              ) }, id);
-            }) })
-          ] })
-        },
-        day ?? `pad-${w}-${d}`
-      )) }, w)) })
-    ] }) })
-  ] });
+      notice: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+        total > rows.length && /* @__PURE__ */ jsxs7("p", { role: "status", className: "text-xs text-muted-foreground", "data-testid": "studio-calendar-capped", children: [
+          "Showing the first ",
+          rows.length.toLocaleString(),
+          " of ",
+          total.toLocaleString(),
+          " rows in this view. Filter the table to see the rest."
+        ] }),
+        query.isError && !signedOut && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-sm text-destructive", children: query.error instanceof Error ? query.error.message : String(query.error) })
+      ] }),
+      loading: query.isPending,
+      onSelect: (event) => onOpenRecord(event.key),
+      testID: "studio-calendar"
+    }
+  );
 }
 
 // src/toolbar/ImportDialog.tsx
 import { useMemo as useMemo6, useState as useState8 } from "react";
 import { Upload } from "lucide-react";
-import { Button as Button7 } from "@marktiderman/genesis-ui/button";
+import { Button as Button6 } from "@marktiderman/genesis-ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@marktiderman/genesis-ui/dialog";
 import { Label as Label2 } from "@marktiderman/genesis-ui/label";
 import { Select as Select3, SelectContent as SelectContent3, SelectItem as SelectItem3, SelectTrigger as SelectTrigger3, SelectValue as SelectValue3 } from "@marktiderman/genesis-ui/select";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var SKIP = "__genesis_skip__";
 function ImportDialog({ provider, schema, onImported }) {
   const [open, setOpen] = useState8(false);
@@ -1965,9 +1899,9 @@ function ImportDialog({ provider, schema, onImported }) {
     }
   }
   const mapped = Object.values(mapping).filter((f) => f && f !== SKIP).length;
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
     /* @__PURE__ */ jsx9(
-      Button7,
+      Button6,
       {
         type: "button",
         variant: "ghost",
@@ -2003,7 +1937,7 @@ function ImportDialog({ provider, schema, onImported }) {
             }
           )
         ] }),
-        file && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        file && /* @__PURE__ */ jsxs8(Fragment4, { children: [
           /* @__PURE__ */ jsxs8("p", { className: "text-xs text-muted-foreground", children: [
             file.name,
             ": ",
@@ -2029,7 +1963,7 @@ function ImportDialog({ provider, schema, onImported }) {
             "All ",
             check.count,
             " rows are ready to import."
-          ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
             /* @__PURE__ */ jsxs8("p", { className: "font-medium text-destructive", children: [
               (check.failures ?? []).length,
               " of ",
@@ -2045,8 +1979,8 @@ function ImportDialog({ provider, schema, onImported }) {
           ] }) }),
           error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-sm text-destructive", children: error }),
           /* @__PURE__ */ jsxs8("div", { className: "flex justify-end gap-2", children: [
-            /* @__PURE__ */ jsx9(Button7, { type: "button", variant: "outline", disabled: busy || mapped === 0, onClick: () => void run(true), testID: "studio-import-check-button", children: busy ? "Checking\u2026" : "Check rows" }),
-            /* @__PURE__ */ jsxs8(Button7, { type: "button", disabled: busy || !check?.ok, onClick: () => void run(false), testID: "studio-import-commit", children: [
+            /* @__PURE__ */ jsx9(Button6, { type: "button", variant: "outline", disabled: busy || mapped === 0, onClick: () => void run(true), testID: "studio-import-check-button", children: busy ? "Checking\u2026" : "Check rows" }),
+            /* @__PURE__ */ jsxs8(Button6, { type: "button", disabled: busy || !check?.ok, onClick: () => void run(false), testID: "studio-import-commit", children: [
               "Import ",
               check?.ok ? check.count : "",
               " rows"
@@ -2060,7 +1994,7 @@ function ImportDialog({ provider, schema, onImported }) {
 
 // src/toolbar/BulkEdit.tsx
 import { useState as useState9 } from "react";
-import { Button as Button8 } from "@marktiderman/genesis-ui/button";
+import { Button as Button7 } from "@marktiderman/genesis-ui/button";
 import { Dialog as Dialog2, DialogContent as DialogContent2, DialogDescription as DialogDescription2, DialogHeader as DialogHeader2, DialogTitle as DialogTitle2 } from "@marktiderman/genesis-ui/dialog";
 import { Input as Input3 } from "@marktiderman/genesis-ui/input";
 import { Label as Label3 } from "@marktiderman/genesis-ui/label";
@@ -2140,8 +2074,8 @@ function BulkEditDialog({ schema, count, open, onOpenChange, onApply }) {
             /* @__PURE__ */ jsx10("ul", { className: "mt-1 list-disc pl-5 text-xs", children: (result.failures ?? []).slice(0, 10).map((f) => /* @__PURE__ */ jsx10("li", { children: f.message }, f.index)) })
           ] }),
           /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2", children: [
-            /* @__PURE__ */ jsx10(Button8, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
-            /* @__PURE__ */ jsx10(Button8, { type: "button", disabled: busy || !target, onClick: () => void apply(), testID: "studio-bulk-apply", children: busy ? "Saving\u2026" : `Set on ${count} row${count === 1 ? "" : "s"}` })
+            /* @__PURE__ */ jsx10(Button7, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx10(Button7, { type: "button", disabled: busy || !target, onClick: () => void apply(), testID: "studio-bulk-apply", children: busy ? "Saving\u2026" : `Set on ${count} row${count === 1 ? "" : "s"}` })
           ] })
         ] })
       ] })
@@ -2310,7 +2244,7 @@ function SheetView({
 }
 
 // src/DataStudio.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var PER_PAGE = 50;
 var SEARCH_DEBOUNCE_MS = 300;
 function isUnauthenticated(error) {
@@ -2459,14 +2393,14 @@ function StudioWorkspace({
     );
   }, []);
   if (signedOut) {
-    return /* @__PURE__ */ jsx12("div", { className: cn4("flex min-h-[320px] items-center justify-center p-6", className), "data-testid": "studio-sign-in", children: signIn ?? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: "Sign in to use the studio." }) });
+    return /* @__PURE__ */ jsx12("div", { className: cn3("flex min-h-[320px] items-center justify-center p-6", className), "data-testid": "studio-sign-in", children: signIn ?? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: "Sign in to use the studio." }) });
   }
   const selected = router.location.resource;
   const list = resources.data ?? [];
-  return /* @__PURE__ */ jsxs11("div", { className: cn4("w-full space-y-3", className), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn3("w-full space-y-3", className), children: [
     /* @__PURE__ */ jsxs11("div", { className: variant === "card" ? "overflow-hidden rounded-lg border bg-background" : "min-w-0", "data-testid": "studio", "data-variant": variant, children: [
-      (title !== null || resources.isLoading || resources.isError) && /* @__PURE__ */ jsxs11("div", { className: cn4("flex items-center gap-2", variant === "card" ? "border-b px-3 py-2" : "pb-3"), children: [
-        title !== null && (variant === "card" ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      (title !== null || resources.isLoading || resources.isError) && /* @__PURE__ */ jsxs11("div", { className: cn3("flex items-center gap-2", variant === "card" ? "border-b px-3 py-2" : "pb-3"), children: [
+        title !== null && (variant === "card" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
           /* @__PURE__ */ jsx12(Database, { className: "h-4 w-4 text-muted-foreground", "aria-hidden": true }),
           /* @__PURE__ */ jsx12("span", { className: "text-sm font-semibold", children: title })
         ] }) : /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold tracking-tight", children: title })),
@@ -2861,11 +2795,11 @@ function Sheet2({
         selected.size > 0 && /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1 rounded-md bg-muted px-2 text-sm", "data-testid": "studio-selection", children: [
           selected.size,
           " selected",
-          schema.access.update && provider.updateMany && /* @__PURE__ */ jsxs11(Button9, { type: "button", variant: "ghost", size: "sm", testID: "studio-bulk-set", onClick: () => setBulkIds([...selected]), children: [
+          schema.access.update && provider.updateMany && /* @__PURE__ */ jsxs11(Button8, { type: "button", variant: "ghost", size: "sm", testID: "studio-bulk-set", onClick: () => setBulkIds([...selected]), children: [
             /* @__PURE__ */ jsx12(PencilLine, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }),
             "Set a field\u2026"
           ] }),
-          schema.access.delete && provider.deleteMany && /* @__PURE__ */ jsxs11(Button9, { type: "button", variant: "ghost", size: "sm", className: "text-destructive", testID: "studio-bulk-delete", onClick: () => void deleteSelected(), children: [
+          schema.access.delete && provider.deleteMany && /* @__PURE__ */ jsxs11(Button8, { type: "button", variant: "ghost", size: "sm", className: "text-destructive", testID: "studio-bulk-delete", onClick: () => void deleteSelected(), children: [
             /* @__PURE__ */ jsx12(Trash22, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }),
             "Delete"
           ] }),
@@ -2968,12 +2902,12 @@ function Sheet2({
             total === 1 ? "" : "s"
           ] }),
           pageCount > 1 && /* @__PURE__ */ jsxs11("span", { className: "ml-auto flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx12(Button9, { type: "button", variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => navigate({ page: page - 1 }), "aria-label": "Previous page", children: /* @__PURE__ */ jsx12(ChevronLeft2, { className: "h-3.5 w-3.5", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx12(Button8, { type: "button", variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => navigate({ page: page - 1 }), "aria-label": "Previous page", children: /* @__PURE__ */ jsx12(ChevronLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }) }),
             "Page ",
             page,
             " of ",
             pageCount,
-            /* @__PURE__ */ jsx12(Button9, { type: "button", variant: "ghost", size: "sm", disabled: page >= pageCount, onClick: () => navigate({ page: page + 1 }), "aria-label": "Next page", children: /* @__PURE__ */ jsx12(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })
+            /* @__PURE__ */ jsx12(Button8, { type: "button", variant: "ghost", size: "sm", disabled: page >= pageCount, onClick: () => navigate({ page: page + 1 }), "aria-label": "Next page", children: /* @__PURE__ */ jsx12(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true }) })
           ] })
         ] })
       ] })
@@ -3096,7 +3030,7 @@ function ActivityPanel({ entries, onUndo }) {
       /* @__PURE__ */ jsx12(History2, { className: "h-4 w-4 text-muted-foreground", "aria-hidden": true }),
       "This session's edits",
       entries.length > 0 && /* @__PURE__ */ jsx12("span", { className: "text-xs font-normal text-muted-foreground", children: entries.length }),
-      entries[0] && /* @__PURE__ */ jsx12("span", { className: cn4("ml-2 truncate text-xs font-normal", entries[0].outcome === "saved" ? "text-muted-foreground" : "text-destructive"), children: entries[0].message })
+      entries[0] && /* @__PURE__ */ jsx12("span", { className: cn3("ml-2 truncate text-xs font-normal", entries[0].outcome === "saved" ? "text-muted-foreground" : "text-destructive"), children: entries[0].message })
     ] }),
     entries.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "px-3 py-3 text-xs text-muted-foreground", children: "Click a cell to edit it. Each save is checked against the latest version of the row, and audited." }) : /* @__PURE__ */ jsx12("ol", { className: "divide-y", "aria-live": "polite", children: entries.map((entry) => /* @__PURE__ */ jsxs11("li", { className: "px-3 py-2 text-xs", "data-testid": `studio-activity-${entry.outcome}`, children: [
       /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [