cortena-ui 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortena-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Cortena UI — the shared React component library for cortenaweb and every Cortena extension. shadcn over Base UI, styled entirely from cortena-design tokens.",
   "license": "UNLICENSED",
   "repository": {
@@ -39,11 +39,11 @@
     "prepack": "pnpm build"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
     "cortena-design": ">=3.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "zod": "^3.25.0 || ^4.0.0",
-    "@tanstack/react-query": "^5.0.0"
+    "zod": "^3.25.0 || ^4.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
@@ -89,6 +89,7 @@
     "playwright": "^1.63.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rehype-raw": "^7.0.0",
     "tailwindcss": "^4.3.3",
     "tsdown": "^0.23.0",
     "typescript": "^5.9.0",
@@ -99,13 +100,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "peerDependenciesMeta": {
-    "zod": {
-      "optional": true
-    },
-    "@tanstack/react-query": {
-      "optional": true
-    }
   }
 }

package/src/a2ui/catalogue.ts

@@ -119,6 +119,15 @@ const buttonVariant = z
 
 const buttonSize = z.enum(["sm", "md", "lg"]).describe("Control size.");
 
+/**
+ * Root-relative means one slash and then a path. `//evil.example/x` is
+ * protocol-relative — the browser resolves it against the page's scheme and
+ * goes off-origin — and `/\evil.example` is the same trick, because browsers
+ * treat a backslash after the leading slash as a second slash.
+ */
+const rootRelative = (value: string) =>
+  value.startsWith("/") && value[1] !== "/" && value[1] !== "\\";
+
 /**
  * A URL an agent may point at.
  *
@@ -129,7 +138,7 @@ const buttonSize = z.enum(["sm", "md", "lg"]).describe("Control size.");
 const httpUrl = z
   .string()
   .refine(
-    (value) => /^https?:\/\//i.test(value) || value.startsWith("/") || value.startsWith("#"),
+    (value) => /^https?:\/\//i.test(value) || rootRelative(value) || value.startsWith("#"),
     "Must be an http(s), root-relative or fragment URL.",
   )
   .describe("Destination URL (http, https, root-relative or fragment).");
@@ -137,7 +146,7 @@ const httpUrl = z
 const imageUrl = z
   .string()
   .refine(
-    (value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || value.startsWith("/"),
+    (value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || rootRelative(value),
     "Must be an http(s), root-relative or data:image URL.",
   )
   .describe("Image URL (http, https, root-relative or data:image).");

package/src/components/chart/chart.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/cn";
 import { ChartContainer, ChartEmpty, ChartError, ChartLoading, type ChartContainerProps } from "./container";
 import { configFor, isEmptyData, isMatrix, isSeriesArray, toRows, toSlices } from "./data";
-import { NivoChart, type NivoType } from "./nivo-charts";
+import { NivoChart, resetNivoChunks, type NivoType } from "./nivo-charts";
 import { RechartsChart, type RechartsType } from "./recharts-charts";
 import {
   chartEngine,
@@ -82,16 +82,34 @@ function seriesKeys(type: ChartType, data: unknown, indexBy?: string, keys?: str
   }
 }
 
-class ChunkBoundary extends React.Component<
-  { children: React.ReactNode; fallback: React.ReactNode },
-  { failed: boolean }
-> {
-  state = { failed: false };
+interface ChunkBoundaryProps {
+  children: React.ReactNode;
+  /** Changing it clears a previous failure and renders the children again. */
+  resetKey: string;
+  fallback: (retry: () => void) => React.ReactNode;
+}
+
+/**
+ * Catches a Nivo chunk that failed to load. Recovering takes two things,
+ * because `React.lazy` memoises a rejection for the life of the page: fresh
+ * lazy components ({@link resetNivoChunks}) and a boundary that leaves its
+ * failed state. `resetKey` does the second on its own when the chart changes,
+ * and the fallback gets a `retry` that does both.
+ */
+class ChunkBoundary extends React.Component<ChunkBoundaryProps, { failed: boolean; key: string }> {
+  state = { failed: false, key: this.props.resetKey };
   static getDerivedStateFromError() {
     return { failed: true };
   }
+  static getDerivedStateFromProps(props: ChunkBoundaryProps, state: { failed: boolean; key: string }) {
+    return props.resetKey === state.key ? null : { failed: false, key: props.resetKey };
+  }
+  retry = () => {
+    resetNivoChunks();
+    this.setState({ failed: false });
+  };
   render() {
-    return this.state.failed ? this.props.fallback : this.props.children;
+    return this.state.failed ? this.props.fallback(this.retry) : this.props.children;
   }
 }
 
@@ -151,7 +169,22 @@ function Chart<T extends ChartType>({
   else if (empty) body = <ChartEmpty>{emptyMessage}</ChartEmpty>;
   else if (engine === "nivo") {
     body = (
-      <ChunkBoundary fallback={<ChartError>Chart could not be loaded</ChartError>}>
+      <ChunkBoundary
+        resetKey={`${type}|${renderer}`}
+        fallback={(retry) => (
+          <ChartError>
+            Chart could not be loaded.{" "}
+            <button
+              type="button"
+              data-slot="chart-retry"
+              onClick={retry}
+              className="underline underline-offset-2"
+            >
+              Retry
+            </button>
+          </ChartError>
+        )}
+      >
         <React.Suspense fallback={<ChartLoading />}>
           <NivoChart
             type={type as NivoType}

package/src/components/chart/nivo-charts.tsx

@@ -18,16 +18,42 @@ export type NivoType = Extract<ChartType, "heatmap" | "calendar" | "treemap" | "
  */
 type AnyComponent = React.ComponentType<Record<string, unknown>>;
 
-const lazy = (load: () => Promise<AnyComponent>) =>
-  React.lazy(async () => ({ default: await load() }));
+const loaders = {
+  "heatmap-svg": async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent,
+  "heatmap-canvas": async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent,
+  "calendar-svg": async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent,
+  "calendar-canvas": async () =>
+    (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent,
+  "treemap-svg": async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent,
+  "treemap-canvas": async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent,
+  "sunburst-svg": async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent,
+} satisfies Record<string, () => Promise<AnyComponent>>;
 
-const HeatMapSvg = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent);
-const HeatMapCanvas = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent);
-const CalendarSvg = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent);
-const CalendarCanvas = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent);
-const TreeMapSvg = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent);
-const TreeMapCanvas = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent);
-const SunburstSvg = lazy(async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent);
+type ChunkName = keyof typeof loaders;
+
+/*
+ * `React.lazy` memoises the outcome of its loader, a rejection included: a
+ * chunk that fails once — an offline moment, a deploy that moved the file —
+ * throws the same error for the life of the page, and no re-render retries it.
+ * The lazy components are therefore cached here rather than frozen at module
+ * scope, and `resetNivoChunks` drops the cache so the next render builds fresh
+ * ones and asks for the chunk again. `Chart`'s ChunkBoundary calls it.
+ */
+let chunks = new Map<ChunkName, AnyComponent>();
+
+function chunk(name: ChunkName): AnyComponent {
+  let component = chunks.get(name);
+  if (!component) {
+    component = React.lazy(async () => ({ default: await loaders[name]() })) as unknown as AnyComponent;
+    chunks.set(name, component);
+  }
+  return component;
+}
+
+/** Forget every loaded-or-failed Nivo chunk, so the next render loads it again. */
+export function resetNivoChunks(): void {
+  chunks = new Map();
+}
 
 export interface NivoRenderProps {
   type: NivoType;
@@ -93,7 +119,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
 
   switch (type) {
     case "heatmap": {
-      const Component = canvas ? HeatMapCanvas : HeatMapSvg;
+      const Component = chunk(canvas ? "heatmap-canvas" : "heatmap-svg");
       // Either shape lands on Nivo's `[{ id, data: [{ x, y }] }]`.
       const rows = isMatrix(data) ? matrixToSeries(data as ChartMatrix) : (data as ChartSeries[]);
       // Labels only when cells are big enough to carry them.
@@ -139,7 +165,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "calendar": {
-      const Component = canvas ? CalendarCanvas : CalendarSvg;
+      const Component = chunk(canvas ? "calendar-canvas" : "calendar-svg");
       const days = data as ChartDay[];
       const range = calendarRange(days, from, to);
       return (
@@ -177,7 +203,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "treemap": {
-      const Component = canvas ? TreeMapCanvas : TreeMapSvg;
+      const Component = chunk(canvas ? "treemap-canvas" : "treemap-svg");
       const tree = data as ChartTree;
       return (
         <Component
@@ -202,9 +228,11 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "sunburst": {
+      // Sunburst has no canvas renderer; SVG either way.
+      const Component = chunk("sunburst-svg");
       const tree = data as ChartTree;
       return (
-        <SunburstSvg
+        <Component
           data={tree}
           id={treeIdentity(tree)}
           value="value"

package/src/components/data-table/export.ts

@@ -54,13 +54,29 @@ export function toSheet<Row extends RowData>(
   };
 }
 
+/**
+ * Text a spreadsheet would evaluate rather than display. Excel, Sheets and
+ * LibreOffice all treat a leading `=`, `+`, `-` or `@` as the start of a
+ * formula, and a leading tab or CR as whitespace they strip before looking
+ * again — so `\t=cmd|'/c calc'!A1` is a formula too. Only strings are checked:
+ * a number, boolean or Date cell cannot carry one, and prefixing `-5` would
+ * turn a number column into text.
+ */
+const FORMULA_START = /^[=+\-@\t\r]/;
+
 function csvField(value: ExportCell): string {
   if (value == null) return "";
-  const text = value instanceof Date ? value.toISOString() : String(value);
+  let text = value instanceof Date ? value.toISOString() : String(value);
+  // Prefix before quoting: the apostrophe is what makes the spreadsheet read
+  // the cell as text, and it has to sit inside the quotes to survive the parse.
+  if (typeof value === "string" && FORMULA_START.test(text)) text = `'${text}`;
   return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
 }
 
-/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
+/**
+ * RFC 4180 text: comma separated, CRLF lines, quotes doubled. A cell that a
+ * spreadsheet would read as a formula is prefixed with `'` so it stays text.
+ */
 export function toCsv<Row extends RowData>(
   table: DataTableTable<Row>,
   rows?: DataTableRow<Row>[],

package/src/components/data-table/use-server-source.ts

@@ -168,11 +168,23 @@ function useLocalStrategy<Row>(
     : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0);
   const requestKey = `${scopeKey}|${targetPage}|${tick}`;
 
+  // The consumer's `fetch` is usually an inline arrow — `fetch: q => api.list(q)`
+  // is the documented call — so it is a new function on every parent render.
+  // Depending on it would abort and refire the request each time; the request's
+  // identity is `requestKey`, so the latest function is read from a ref instead.
+  const fetchRef = React.useRef(fetch);
   React.useEffect(() => {
-    if (!fetch || !needs) return;
+    fetchRef.current = fetch;
+  });
+
+  const hasFetch = Boolean(fetch);
+
+  React.useEffect(() => {
+    const run = fetchRef.current;
+    if (!run || !needs) return;
     const controller = new AbortController();
     setState((s) => ({ ...s, isFetching: true }));
-    fetch({ ...scope, page: targetPage }, controller.signal).then(
+    run({ ...scope, page: targetPage }, controller.signal).then(
       (result) => {
         if (controller.signal.aborted) return;
         setState((s) => ({
@@ -189,9 +201,10 @@ function useLocalStrategy<Row>(
       },
     );
     return () => controller.abort();
-    // `requestKey` is the identity of the request; `scope` and `targetPage` derive from it.
+    // `requestKey` is the identity of the request; `scope` and `targetPage` derive
+    // from it. `fetch` itself is held in a ref, so only its presence is a dep.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetch, requestKey, needs]);
+  }, [hasFetch, requestKey, needs]);
 
   // Like keepPreviousData: the last result stays on screen while the next loads.
   const rows = React.useMemo(