@nivaro/react 0.3.24 → 0.3.26

package/dist/hooks/useSessionRecorder.js

@@ -9,7 +9,7 @@ import { noteReplayEvent as _e, createReplayCheckoutState as De } from "../share
 import { emitReplayTap as Te, setReplayRecorderMode as N, registerReplayCapture as qe, clipEndOffset as Le, withClipKind as Pe } from "../shared/lib/replay-capture.js";
 import { instrumentConsole as Ne, instrumentRequests as Fe, redactSecrets as Me } from "../shared/lib/replay-context.js";
 import { instrumentSocket as Oe } from "../shared/lib/replay-socket.js";
-const Ue = "nivaro-react@0.3.24", j = 1e4, We = 150, He = 3e3, Ke = 600, $e = (n) => `nvr_replay_resume${n ? `:${n}` : ""}`, G = () => typeof navigator > "u" || navigator.onLine !== !1;
+const Ue = "nivaro-react@0.3.26", j = 1e4, We = 150, He = 3e3, Ke = 600, $e = (n) => `nvr_replay_resume${n ? `:${n}` : ""}`, G = () => typeof navigator > "u" || navigator.onLine !== !1;
 function Be(n) {
   return typeof n.url != "string" || typeof fetch != "function" ? null : (f, a) => {
     const u = typeof n.getToken == "function" ? n.getToken() : void 0, d = { "Content-Type": "application/json" };

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { ListResponse } from '@nivaro/sdk';
 import type { LucideIcon } from 'lucide-react';
 import { ManagedUser } from '@nivaro/sdk';
 import { MutableRefObject } from 'react';
+import { NamedExoticComponent } from 'react';
 import { NivaroClient } from '@nivaro/sdk';
 import { Query } from '@nivaro/sdk';
 import { QueryClient } from '@tanstack/react-query';
@@ -3070,30 +3071,32 @@ export declare interface FieldInterfaceProps {
     itemId: string | null;
 }
 
-export declare function FieldRenderer({ field, value, onChange, relations, collection, itemId, cascadeFilter, requiredParentLabel, narrowedBy, onCountChange, displayOnly, prefillParentId, pinnedOption }: {
-    field: CMSField;
-    value: unknown;
-    onChange: (v: unknown) => void;
-    relations: CMSRelation[];
-    collection: string;
-    itemId: string;
-    cascadeFilter?: Record<string, unknown>;
-    requiredParentLabel?: string | null;
-    /** Cascade parents currently narrowing an M2O picker (see RelationCombobox). */
-    narrowedBy?: {
-        labels: string[];
-        keys: string[];
-        onClear?: (key: string) => void;
-    };
-    onCountChange?: (count: number) => void;
-    displayOnly?: boolean;
-    prefillParentId?: string;
-    /** M2O pickers: a floating first option (see RelationCombobox `pinned`). */
-    pinnedOption?: {
-        id: unknown;
-        tag?: string;
-    } | null;
-}): JSX.Element;
+/** Memoized: rows pass it stable props, so a row re-render that changes
+ *  nothing about this field's control skips it. */
+export declare const FieldRenderer: NamedExoticComponent<    {
+field: CMSField;
+value: unknown;
+onChange: (v: unknown) => void;
+relations: CMSRelation[];
+collection: string;
+itemId: string;
+cascadeFilter?: Record<string, unknown>;
+requiredParentLabel?: string | null;
+/** Cascade parents currently narrowing an M2O picker (see RelationCombobox). */
+narrowedBy?: {
+labels: string[];
+keys: string[];
+onClear?: (key: string) => void;
+};
+onCountChange?: (count: number) => void;
+displayOnly?: boolean;
+prefillParentId?: string;
+/** M2O pickers: a floating first option (see RelationCombobox `pinned`). */
+pinnedOption?: {
+id: unknown;
+tag?: string;
+} | null;
+}>;
 
 export declare type FieldState = {
     value: unknown;
@@ -5075,6 +5078,13 @@ export declare interface ItemEditFormProps {
     /** Extra rows for the record's More menu, above Delete (e.g. a host's Edit layout).
      *  Rows that open something outside the menu set `data-nvr-menu-close`. */
     moreMenuItems?: ReactNode;
+    /** Which view the record shows (Summary or Edit) and the collection's Summary layout id
+     *  (null = none; Summary then renders the edit layout read-only). Hosts use it so their
+     *  Edit layout opens the layout the person is looking at. */
+    onViewModeChange?: (view: {
+        mode: 'summary' | 'edit';
+        summaryLayoutId: number | null;
+    }) => void;
     /** Scroll to + flash a field on load (deep links: ?focus=<field>). */
     focusField?: string | null;
     /**
@@ -7308,8 +7318,10 @@ export declare function PretendDownSection({ scope, options }: {
 
 /**
  * Inline attachment preview — click a file, see it, without a download round
- * trip. Images, PDFs, video and audio render in an overlay; anything else
- * gets an honest "no preview" panel with the Download action front and center.
+ * trip. Images (SVG too, drawn by an img tag, which runs no script), PDFs,
+ * video, audio and plain text render in an overlay; anything else (HTML, XML,
+ * Office files…) gets an honest "no preview" panel with the Download action
+ * front and center. Plain text loads in a fully sandboxed iframe.
  *
  * Plain portal to document.body at z-[130] (above popovers at 110 and the
  * tooltip layer at 120). The asset URL is the same cookie/session-authed
@@ -9537,6 +9549,13 @@ export declare interface SocketRealtimeOptions {
     windowEvents?: Partial<Record<SocketRealtimeWindowEvent, boolean>>;
     /** How long a reconnect waits for its catch-up answer before it counts as live again. */
     catchupTimeoutMs?: number;
+    /**
+     * Upper bound of the random delay before a `catchup:full` or `access:changed` window event
+     * (default REACTION_JITTER_MS; 0 = at once). Both land on every tab at the same moment after a
+     * deploy or a role change, and each makes the tab refetch its lists — spread over a few
+     * seconds they stop arriving at the API as one wave.
+     */
+    reactionJitterMs?: number;
 }
 
 export declare type SocketRealtimeWindowEvent = 'catchupFull' | 'accessChanged' | 'configUpdate' | 'forceRefresh';

package/dist/shared/components/FilePreviewLightbox.js

@@ -1,77 +1,98 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Download as c, X as d } from "lucide-react";
-import { useEffect as m } from "react";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { Download as d, X as x } from "lucide-react";
+import { useEffect as u } from "react";
 import { createPortal as h } from "react-dom";
-function v(e) {
-  return e ? e.startsWith("image/") || e === "application/pdf" || e.startsWith("video/") || e.startsWith("audio/") || e.startsWith("text/") : !1;
+const p = /* @__PURE__ */ new Set([
+  "text/plain",
+  "text/csv",
+  "text/tab-separated-values",
+  "text/markdown",
+  "text/x-markdown",
+  "text/x-log"
+]);
+function o(e) {
+  return String(e ?? "").split(";")[0].trim().toLowerCase();
 }
-function x(e) {
+function m(e) {
+  return p.has(o(e));
+}
+function N(e) {
+  if (!e) return !1;
+  const r = o(e);
+  return r.startsWith("image/") || r === "application/pdf" || r.startsWith("video/") || r.startsWith("audio/") || m(r);
+}
+function w(e) {
   return e == null || !Number.isFinite(e) ? null : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-function b({
-  file: e,
-  onClose: s
-}) {
-  m(() => {
-    const a = (l) => {
-      l.key === "Escape" && (l.stopPropagation(), s());
+function y({ file: e, onClose: r }) {
+  u(() => {
+    const n = (c) => {
+      c.key === "Escape" && (c.stopPropagation(), r());
     };
-    return window.addEventListener("keydown", a, !0), () => window.removeEventListener("keydown", a, !0);
-  }, [s]);
-  const r = e.type ?? "", o = x(e.size);
+    return window.addEventListener("keydown", n, !0), () => window.removeEventListener("keydown", n, !0);
+  }, [r]);
+  const a = e.type ?? "", l = w(e.size);
   let i;
-  return r.startsWith("image/") ? i = /* @__PURE__ */ t(
+  return a.startsWith("image/") ? i = /* @__PURE__ */ t(
     "img",
     {
       src: e.url,
       alt: e.name,
       className: "max-h-[82vh] max-w-full rounded object-contain"
     }
-  ) : r === "application/pdf" || r.startsWith("text/") ? i = /* @__PURE__ */ t(
+  ) : o(a) === "application/pdf" ? i = /* @__PURE__ */ t(
+    "iframe",
+    {
+      src: e.url,
+      title: e.name,
+      className: "h-[82vh] w-[min(920px,92vw)] rounded border-0 bg-white"
+    }
+  ) : m(a) ? i = /* @__PURE__ */ t(
     "iframe",
     {
       src: e.url,
       title: e.name,
+      sandbox: "",
       className: "h-[82vh] w-[min(920px,92vw)] rounded border-0 bg-white"
     }
-  ) : r.startsWith("video/") ? i = /* @__PURE__ */ t("video", { src: e.url, controls: !0, className: "max-h-[82vh] max-w-full rounded" }) : r.startsWith("audio/") ? i = /* @__PURE__ */ t("audio", { src: e.url, controls: !0, className: "w-[min(480px,90vw)]" }) : i = /* @__PURE__ */ n("div", { className: "flex w-[min(420px,90vw)] flex-col items-center gap-3 rounded-lg bg-white p-8 text-center dark:bg-card", children: [
+  ) : a.startsWith("video/") ? i = /* @__PURE__ */ t("video", { src: e.url, controls: !0, className: "max-h-[82vh] max-w-full rounded" }) : a.startsWith("audio/") ? i = /* @__PURE__ */ t("audio", { src: e.url, controls: !0, className: "w-[min(480px,90vw)]" }) : i = /* @__PURE__ */ s("div", { className: "flex w-[min(420px,90vw)] flex-col items-center gap-3 rounded-lg bg-white p-8 text-center dark:bg-card", children: [
     /* @__PURE__ */ t("p", { className: "text-[13px] font-medium text-slate-700 dark:text-slate-200", children: e.name }),
-    /* @__PURE__ */ n("p", { className: "text-[12px] text-slate-500 dark:text-slate-400", children: [
+    /* @__PURE__ */ s("p", { className: "text-[12px] text-slate-500 dark:text-slate-400", children: [
       "No inline preview for this file type",
-      r ? ` (${r})` : "",
+      a ? ` (${a})` : "",
       "."
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ s(
       "a",
       {
         href: `${e.url}?download=1`,
         className: "inline-flex items-center gap-1.5 rounded-md bg-nvr-cyan px-3 py-1.5 text-[12.5px] font-medium text-white hover:brightness-110",
         children: [
-          /* @__PURE__ */ t(c, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ t(d, { className: "h-3.5 w-3.5" }),
           " Download"
         ]
       }
     )
   ] }), h(
     // biome-ignore lint/a11y/useKeyWithClickEvents: Escape handled globally above
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ s(
       "div",
       {
         className: "fixed inset-0 z-[130] flex flex-col bg-black/70 backdrop-blur-[2px]",
-        onClick: s,
+        onClick: r,
         "data-file-lightbox": !0,
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ s(
             "div",
             {
               className: "flex items-center gap-3 px-4 py-2.5",
-              onClick: (a) => a.stopPropagation(),
+              onClick: (n) => n.stopPropagation(),
               onKeyDown: () => {
               },
               children: [
-                /* @__PURE__ */ n("p", { className: "min-w-0 flex-1 truncate text-[13px] font-medium text-white", children: [
+                /* @__PURE__ */ s("p", { className: "min-w-0 flex-1 truncate text-[13px] font-medium text-white", children: [
                   e.name,
-                  o && /* @__PURE__ */ t("span", { className: "ml-2 text-[11px] font-normal text-white/60", children: o })
+                  l && /* @__PURE__ */ t("span", { className: "ml-2 text-[11px] font-normal text-white/60", children: l })
                 ] }),
                 /* @__PURE__ */ t(
                   "a",
@@ -79,17 +100,17 @@ function b({
                     href: `${e.url}?download=1`,
                     title: "Download",
                     className: "rounded p-1.5 text-white/80 hover:bg-white/10 hover:text-white",
-                    children: /* @__PURE__ */ t(c, { className: "h-4 w-4" })
+                    children: /* @__PURE__ */ t(d, { className: "h-4 w-4" })
                   }
                 ),
                 /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    onClick: s,
+                    onClick: r,
                     title: "Close (Esc)",
                     className: "rounded p-1.5 text-white/80 hover:bg-white/10 hover:text-white",
-                    children: /* @__PURE__ */ t(d, { className: "h-4 w-4" })
+                    children: /* @__PURE__ */ t(x, { className: "h-4 w-4" })
                   }
                 )
               ]
@@ -99,7 +120,7 @@ function b({
             "div",
             {
               className: "flex min-h-0 flex-1 items-center justify-center p-4 pt-0",
-              onClick: (a) => a.stopPropagation(),
+              onClick: (n) => n.stopPropagation(),
               onKeyDown: () => {
               },
               children: i
@@ -112,6 +133,6 @@ function b({
   );
 }
 export {
-  b as FilePreviewLightbox,
-  v as canPreviewFile
+  y as FilePreviewLightbox,
+  N as canPreviewFile
 };