@drawnagency/primitives 0.1.93 → 0.1.95

package/src/components/primitives/ResolvedMedia.tsx

@@ -74,6 +74,12 @@ export function ResolvedMedia({
               playsInline
               loop
               autoPlay
+              // Defer the fetch until the loop nears the viewport. Without
+              // this, every media-section video on a page downloads in full
+              // during initial load. `autoplay` still overrides the hint when
+              // the browser decides to play, so playback is unchanged — see
+              // the matching note in sections/Video/VideoBlock.tsx.
+              preload="none"
               className={mediaClass}
               onLoadedData={() => setLoaded(true)}
             />

package/src/components/sections/Container/Container.tsx

@@ -1,6 +1,6 @@
 import { type ComponentType, type ReactNode } from "react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { getSection } from "../../../lib/registry";
+import { getSection, type OpenModal } from "../../../lib/registry";
 import { cn } from "../../../lib/cn";
 import { containerGridClass, colSpanClass, spacerHiddenClass, masonryColumnsClass } from "../../../lib/container-grid";
 import { ChildBlockWrapper } from "../../editor/ChildBlockWrapper";
@@ -27,7 +27,7 @@ type ChildComponent = ComponentType<{
   options: Record<string, unknown>;
   isEditMode: boolean;
   onChange?: (content: unknown) => void;
-  openModal?: (title: string, content: ReactNode) => void;
+  openModal?: OpenModal;
 }>;
 
 interface ContainerChildProps {
@@ -48,7 +48,7 @@ interface ContainerChildProps {
   onColSpanChange: (span: number) => void;
   onOpenSettings?: () => void;
   onChildContentChange?: (content: unknown) => void;
-  openModal?: (title: string, content: ReactNode) => void;
+  openModal?: OpenModal;
   /** Drag/drop hitbox edges: ["left","right"] in grid (row flow), ["top","bottom"] in masonry
    *  (CSS multi-column stacks items vertically). Defaults to ROW_EDGES. */
   allowedEdges?: Edge[];
@@ -134,7 +134,7 @@ export interface ContainerProps {
   content: { id?: string; content: ContainerContent };
   isEditMode: boolean;
   onChange?: (content: unknown) => void;
-  openModal?: (title: string, content: ReactNode) => void;
+  openModal?: OpenModal;
 }
 
 /**
@@ -296,6 +296,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
             onChange={applyResult}
             tabs={def.settingsTabs}
           />,
+          { tabbed: (def.settingsTabs?.length ?? 0) > 0 },
         );
       }
     };

package/src/components/sections/Video/VideoBlock.tsx

@@ -90,9 +90,17 @@ export function VideoBlock({ source, caption, options, isEditMode, onSourceChang
     const height = bakedHeight ?? resolved.height;
     aspect = width && height ? `${width} / ${height}` : undefined;
 
+    // `preload="none"` on the ambient branch is deliberate and load-bearing.
+    // An autoplaying loop with no preload hint fetches the whole file during
+    // initial page load, even far below the fold — on the Siete portal that was
+    // 246 MB of video downloading before the viewer scrolled to any of it.
+    // `preload` is only a hint and `autoplay` overrides it once the browser
+    // decides to play, so playback is unaffected; what changes is that the
+    // fetch is deferred until the element approaches the viewport instead of
+    // racing everything else on the page. The poster still renders immediately.
     const playbackProps =
       playback === "ambient"
-        ? { autoPlay: true, muted: true, loop: true, playsInline: true }
+        ? { autoPlay: true, muted: true, loop: true, playsInline: true, preload: "none" as const }
         : { controls: true, preload: "metadata" as const };
 
     const videoEl = imageId ? (

package/src/components/shared/HistoryChangesModal.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from "react";
+import { EditorModal } from "../shell/EditorModal";
+import { Button } from "./Button";
+
+export interface ChangedSection {
+  id: string;
+  /** The section's heading, or null when it has none / wasn't resolved. */
+  title: string | null;
+  type: string;
+  page: string | null;
+}
+
+/** "icon_list" → "Icon list". */
+function humanizeType(type: string) {
+  const spaced = type.replace(/[-_]/g, " ");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * Section ids are UUIDs, and plenty of section types (media, spacer) have no
+ * heading to show. Fall back to the type name alone — the page shown alongside
+ * it carries enough context, and an id fragment reads as noise. Two headless
+ * sections of the same type on one page will look alike; that's accepted.
+ */
+function displayName(s: ChangedSection) {
+  return s.title ?? humanizeType(s.type);
+}
+
+export interface ChangeSummary {
+  edited: ChangedSection[];
+  added: ChangedSection[];
+  removed: ChangedSection[];
+  structure: string[];
+  /** Too many sections changed to resolve real titles — ids shown instead. */
+  truncated: boolean;
+}
+
+interface HistoryChangesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Node label, e.g. "Friday · Jul 24" or "Edit at 4:47 PM". */
+  title: string;
+  base: string | null;
+  head: string;
+  commitCount: number;
+  onBrowse: () => void;
+  onRestore: () => void;
+  /**
+   * True when the editor holds unsaved local changes. Restoring discards them,
+   * and unlike published content they are NOT recoverable from history — so the
+   * confirmation has to say so rather than reassure.
+   */
+  hasUnsavedChanges?: boolean;
+  /** Disables the restore controls while a restore is in flight. */
+  isRestoring?: boolean;
+  /** Set when a dispatched restore came back failed. */
+  restoreError?: string | null;
+}
+
+// Commit ranges are immutable, so a fetched summary stays valid for the session.
+const cache = new Map<string, ChangeSummary>();
+
+/**
+ * Bump whenever the response shape or the meaning of a field changes.
+ *
+ * The endpoint sends `immutable` with a one-year max-age — correct for the
+ * *content* of a commit range, which genuinely never changes, but it means a
+ * browser that cached an older shape would keep serving it and no reload could
+ * dislodge it. Versioning the URL makes a shape change a different cache entry.
+ * v2: `title` became nullable (was the section id, which is a UUID).
+ */
+const API_VERSION = 2;
+
+function queryFor(head: string, base: string | null) {
+  const q = new URLSearchParams({ v: String(API_VERSION), head });
+  if (base) q.set("base", base);
+  return `/api/history/changes?${q.toString()}`;
+}
+
+function Group({ label, items, sign }: { label: string; items: ChangedSection[]; sign: string }) {
+  if (items.length === 0) return null;
+  return (
+    <>
+      <p className="mb-1.5 text-[10px] font-medium tracking-wider text-base-contrast-light uppercase">
+        {label} ({items.length})
+      </p>
+      <ul className="mb-4 list-none p-0">
+        {items.map((s) => (
+          <li
+            key={s.id}
+            className="flex items-baseline gap-2 border-b border-base-200 py-1 last:border-b-0"
+          >
+            <span aria-hidden="true" className="w-3 shrink-0 text-center text-xs font-bold text-base-contrast-light">
+              {sign}
+            </span>
+            <span className="text-sm text-base-contrast">{displayName(s)}</span>
+            {s.page && <span className="text-xs text-base-contrast-light">· {s.page}</span>}
+            <span className="ml-auto shrink-0 pl-2 text-xs text-base-contrast-light">{s.type}</span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export function HistoryChangesModal({
+  isOpen, onClose, title, base, head, commitCount, onBrowse, onRestore,
+  hasUnsavedChanges = false, isRestoring = false, restoreError = null,
+}: HistoryChangesModalProps) {
+  const [summary, setSummary] = useState<ChangeSummary | null>(null);
+  const [error, setError] = useState(false);
+  const [confirmingRestore, setConfirmingRestore] = useState(false);
+
+  // Reopening on a different range must not inherit the previous confirm state.
+  useEffect(() => {
+    if (!isOpen) setConfirmingRestore(false);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const url = queryFor(head, base);
+    const hit = cache.get(url);
+    if (hit) {
+      setSummary(hit);
+      setError(false);
+      return;
+    }
+    let live = true;
+    setSummary(null);
+    setError(false);
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(String(res.status));
+        const data = (await res.json()) as ChangeSummary;
+        cache.set(url, data);
+        if (live) setSummary(data);
+      } catch {
+        if (live) setError(true);
+      }
+    })();
+    return () => { live = false; };
+  }, [isOpen, head, base]);
+
+  const total = summary
+    ? summary.edited.length + summary.added.length + summary.removed.length
+    : 0;
+
+  return (
+    // `tabbed` locks the dialog to one height so it doesn't jump when the
+    // summary arrives, and gives an overflow-hidden flex column — which is what
+    // lets the body scroll under a pinned footer. `noPadding` because the
+    // scrolling region owns its own padding.
+    <EditorModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={confirmingRestore ? "Restore this version?" : title}
+      size="standard"
+      tabbed
+      noPadding
+    >
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {confirmingRestore ? (
+            <>
+              <p className="text-sm text-base-contrast-light">
+                This will publish the content from this version as a new update.
+                Your currently published content stays available in the history.
+              </p>
+              {restoreError && (
+                <p role="alert" className="mt-3 text-sm font-medium text-red-600">
+                  {restoreError} Nothing was published — you can try again.
+                </p>
+              )}
+              {hasUnsavedChanges && (
+                <p className="mt-3 text-sm font-medium text-red-600">
+                  You have unsaved changes. Restoring discards them, and unlike
+                  published content they cannot be recovered from history.
+                </p>
+              )}
+            </>
+          ) : (
+            <>
+              {error && (
+                <p className="py-6 text-center text-sm text-base-contrast-light">
+                  Couldn&rsquo;t load the change summary.
+                </p>
+              )}
+
+              {!error && !summary && (
+                <p className="py-6 text-center text-sm text-base-contrast-light">
+                  Loading changes&hellip;
+                </p>
+              )}
+
+              {summary && (
+                <>
+                  <p className="mb-4 text-xs text-base-contrast-light">
+                    {commitCount === 1 ? "Single edit" : `${commitCount} edits`}
+                    {" · "}
+                    {total} section{total === 1 ? "" : "s"} affected
+                  </p>
+
+                  <Group label="Edited" items={summary.edited} sign="~" />
+                  <Group label="Added" items={summary.added} sign="+" />
+                  <Group label="Removed" items={summary.removed} sign="−" />
+
+                  {summary.structure.length > 0 && (
+                    <>
+                      <p className="mb-1.5 text-[10px] font-medium tracking-wider text-base-contrast-light uppercase">
+                        Page structure
+                      </p>
+                      <ul className="mb-4 list-none p-0">
+                        {summary.structure.map((s) => (
+                          <li key={s} className="py-1 text-sm text-base-contrast">{s}</li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+
+                  {summary.truncated && (
+                    <p className="mb-4 text-xs text-base-contrast-light">
+                      Too many sections changed to resolve names &mdash; showing section
+                      types instead.
+                    </p>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="flex shrink-0 justify-end gap-2 border-t border-base-200 px-6 py-3">
+          {confirmingRestore ? (
+            <>
+              <Button variant="secondary" size="sm" disabled={isRestoring}
+                onClick={() => setConfirmingRestore(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" size="sm" disabled={isRestoring} onClick={onRestore}>
+                {isRestoring ? "Restoring…" : "Restore"}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="destructive" size="sm" onClick={() => setConfirmingRestore(true)}>
+                Restore&hellip;
+              </Button>
+              <Button size="sm" onClick={onBrowse}>Browse this version</Button>
+            </>
+          )}
+        </div>
+      </div>
+    </EditorModal>
+  );
+}