@drawnagency/primitives 0.1.62 → 0.1.64

package/dist/{chunk-FJBDGYHE.js → chunk-FECCYOPJ.js}

@@ -1,6 +1,6 @@
 import {
   EditablePlainText
-} from "./chunk-QWDOJUUO.js";
+} from "./chunk-VMDKWUMT.js";
 import {
   usePages
 } from "./chunk-4E66N6UV.js";

package/dist/{chunk-JRT4KWHU.js → chunk-QYQ3DQHI.js}

@@ -9,7 +9,7 @@ import {
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-QWDOJUUO.js";
+} from "./chunk-VMDKWUMT.js";
 import {
   AddIcon,
   DeleteIcon,

package/dist/{chunk-QWDOJUUO.js → chunk-VMDKWUMT.js}

@@ -264,10 +264,14 @@ function MediaBlock({ refValue, options, link, isEditMode, onRefChange }) {
   const showBorder = refValue.border ?? options.border;
   const captionStr = refValue.caption ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption : "";
   const replace = onRefChange ? (imageId) => onRefChange({ ...refValue, imageId }) : void 0;
+  const baked = refValue;
   const resolved = /* @__PURE__ */ jsx3(
     ResolvedMedia,
     {
       imageId: refValue.imageId || void 0,
+      src: baked.src,
+      srcset: baked.srcset,
+      alt: baked.alt,
       className: "h-full w-full",
       imgClassName: fitClass,
       invertFrom: refValue.invertFrom

package/dist/components/primitives/index.js

@@ -2,7 +2,7 @@ import {
   EditableRichText,
   LinkPopover,
   defineHeadingSection
-} from "../../chunk-FJBDGYHE.js";
+} from "../../chunk-FECCYOPJ.js";
 import {
   EditableGrid,
   EditablePlainText,
@@ -10,7 +10,7 @@ import {
   MediaBlock,
   ResolvedMedia,
   useEditableCollection
-} from "../../chunk-QWDOJUUO.js";
+} from "../../chunk-VMDKWUMT.js";
 import "../../chunk-4E66N6UV.js";
 import {
   DeleteIcon,

package/dist/components/sections/Media/MediaBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Media/MediaBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IACxG,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,eAAe,2CA2E/F"}
+{"version":3,"file":"MediaBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Media/MediaBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IACxG,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,eAAe,2CAoF/F"}

package/dist/components/sections/brand-guide.js

@@ -2,9 +2,9 @@ import {
   ColorItemSchema,
   ColorSpaceSchema,
   brandGuideSectionDefs
-} from "../../chunk-JRT4KWHU.js";
+} from "../../chunk-QYQ3DQHI.js";
 import "../../chunk-5THS4K5D.js";
-import "../../chunk-QWDOJUUO.js";
+import "../../chunk-VMDKWUMT.js";
 import "../../chunk-I5737FJY.js";
 import "../../chunk-CBWK3KPV.js";
 import "../../chunk-3DCG4DNU.js";

package/dist/components/sections/register-schemas.js

@@ -3,7 +3,7 @@ import {
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "../../chunk-JRT4KWHU.js";
+} from "../../chunk-QYQ3DQHI.js";
 import {
   DeleteButton,
   DragHandle,
@@ -20,7 +20,7 @@ import "../../chunk-5THS4K5D.js";
 import {
   EditableRichText,
   defineHeadingSection
-} from "../../chunk-FJBDGYHE.js";
+} from "../../chunk-FECCYOPJ.js";
 import {
   EditablePlainText,
   MAX_CONTAINER_COLUMNS,
@@ -28,7 +28,7 @@ import {
   colSpanClass,
   containerGridClass,
   spacerHiddenClass
-} from "../../chunk-QWDOJUUO.js";
+} from "../../chunk-VMDKWUMT.js";
 import "../../chunk-4E66N6UV.js";
 import "../../chunk-I5737FJY.js";
 import "../../chunk-CBWK3KPV.js";

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAo6BP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAsEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAo6BP"}

package/dist/components/shell/view-branch.d.ts

@@ -0,0 +1,38 @@
+export type ViewBranch = "saved" | "live";
+/**
+ * Section visibility for the editor's view-mode toggle.
+ *
+ * - `"live"` ("Published"): mirrors what an anonymous visitor sees on the
+ *   deployed site — only `status === "live"` (the same predicate the real viewer
+ *   applies in `viewer-page.ts`).
+ * - `"saved"` ("Unpublished"): all in-progress edits — every status EXCEPT
+ *   `archived` — so edits to live content show alongside drafts.
+ */
+export declare function isSectionVisibleInViewBranch(status: string, viewBranch: ViewBranch): boolean;
+/**
+ * Which sections to render in the editor's view mode.
+ *
+ * - Edit mode: the in-memory sections as-is (edit chrome handles them).
+ * - "Unpublished" (saved): the editor's CURRENT in-memory content — all edits
+ *   minus archived. It must NOT depend on a re-fetched branch: after a publish
+ *   the `saved` branch is deleted and `/api/content?branch=saved` falls back to
+ *   `main`, which would clobber unsaved edits (they'd flash then vanish).
+ * - "Published" (live): the deployed site — the fetched `main` branch filtered to
+ *   `status === "live"`, in page order. Renders nothing until the fetch resolves
+ *   so in-memory edits never flash as if they were published.
+ */
+export declare function computeDisplaySections<T extends {
+    section: {
+        id: string;
+    };
+    meta: {
+        status: string;
+    };
+}>(args: {
+    isEditMode: boolean;
+    viewBranch: ViewBranch;
+    sections: T[];
+    viewSections: T[] | null;
+    activePageSectionIds: string[];
+}): T[];
+//# sourceMappingURL=view-branch.d.ts.map

package/dist/components/shell/view-branch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-branch.d.ts","sourceRoot":"","sources":["../../../src/components/shell/view-branch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,GAAG,OAAO,CAE5F;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS;IAAE,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,EAAE,IAAI,EAAE;IAC5G,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,YAAY,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACzB,oBAAoB,EAAE,MAAM,EAAE,CAAC;CAChC,GAAG,CAAC,EAAE,CAaN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/sections/Media/MediaBlock.tsx

@@ -27,9 +27,18 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
 
   const replace = onRefChange ? (imageId: string) => onRefChange({ ...refValue, imageId }) : undefined;
 
+  // The zero-JS viewer has no MediaLibraryContext, so useResolvedMedia() can't
+  // resolve the URL. The SSR pass (resolveManifestReferences) bakes src/srcset/alt
+  // onto the ref instead — forward them so a real <img> renders rather than the
+  // placeholder. In edit mode these are absent and ResolvedMedia falls back to the
+  // live manifest via context. (Mirrors a3e8913, which did this for MediaGrid/SplitContent.)
+  const baked = refValue as Record<string, unknown>;
   const resolved = (
     <ResolvedMedia
       imageId={refValue.imageId || undefined}
+      src={baked.src as string | undefined}
+      srcset={baked.srcset as string | undefined}
+      alt={baked.alt as string | undefined}
       className="h-full w-full"
       imgClassName={fitClass}
       invertFrom={refValue.invertFrom}

package/src/components/shell/EditorShell.tsx

@@ -69,6 +69,7 @@ import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
+import { computeDisplaySections } from "./view-branch";
 import { SettingsIcon } from "../shared/icons";
 import { ImageIcon, ListOrderedIcon, FilesIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
@@ -1052,14 +1053,16 @@ function ViewBranchWatcher({
   const { isEditMode, viewBranch } = useEditorContext();
 
   useEffect(() => {
-    if (isEditMode) {
+    // Only "Published" (live) needs a fetch — it previews the deployed main
+    // branch. "Unpublished" (saved) renders the editor's in-memory edits, so no
+    // fetch (fetching `saved` would 404 after a publish and fall back to main,
+    // clobbering unsaved edits). Null viewSections routes to the in-memory path.
+    if (isEditMode || viewBranch !== "live") {
       setViewSections(null);
       return;
     }
 
-    const branch = viewBranch === "live" ? "main" : "saved";
-
-    fetch(`/api/content?branch=${branch}`)
+    fetch(`/api/content?branch=main`)
       .then((res) => res.json())
       .then((data) => {
         setViewSections(data.sections);
@@ -1215,14 +1218,16 @@ function EditorContent({
 
   const editingEnabled = isEditMode && !isPublishing;
 
-  // View mode: render the active page's sections from the fetched branch, in page
-  // order (Live additionally filters to status === "live"). Edit mode: the active
-  // page's in-memory sections (the `sections` prop is already `activeSections`).
-  const displaySections = !isEditMode && viewSections !== null
-    ? activePageSectionIds
-        .map((id) => viewSections.find((s) => s.section.id === id))
-        .filter((s): s is LoadedSection => !!s && (viewBranch !== "live" || s.meta.status === "live"))
-    : sections;
+  // "Published" (live) previews the deployed main branch (status === "live");
+  // "Unpublished" (saved) previews the editor's current in-memory edits (all
+  // statuses except archived) — see computeDisplaySections in view-branch.ts.
+  const displaySections = computeDisplaySections({
+    isEditMode,
+    viewBranch,
+    sections,
+    viewSections,
+    activePageSectionIds,
+  });
 
   useEffect(() => {
     return combine(
@@ -1642,8 +1647,8 @@ function EditorToolbar({
           <div className="mx-auto max-w-screen-xl flex items-center justify-center px-4 py-2">
             <SegmentedControl
               options={[
-                { value: "saved", label: "Draft" },
-                { value: "live", label: "Live" },
+                { value: "live", label: "Published" },
+                { value: "saved", label: "Unpublished" },
               ]}
               value={viewBranch}
               onChange={(v) => setViewBranch(v as "saved" | "live")}

package/src/components/shell/view-branch.ts

@@ -0,0 +1,47 @@
+export type ViewBranch = "saved" | "live";
+
+/**
+ * Section visibility for the editor's view-mode toggle.
+ *
+ * - `"live"` ("Published"): mirrors what an anonymous visitor sees on the
+ *   deployed site — only `status === "live"` (the same predicate the real viewer
+ *   applies in `viewer-page.ts`).
+ * - `"saved"` ("Unpublished"): all in-progress edits — every status EXCEPT
+ *   `archived` — so edits to live content show alongside drafts.
+ */
+export function isSectionVisibleInViewBranch(status: string, viewBranch: ViewBranch): boolean {
+  return viewBranch === "live" ? status === "live" : status !== "archived";
+}
+
+/**
+ * Which sections to render in the editor's view mode.
+ *
+ * - Edit mode: the in-memory sections as-is (edit chrome handles them).
+ * - "Unpublished" (saved): the editor's CURRENT in-memory content — all edits
+ *   minus archived. It must NOT depend on a re-fetched branch: after a publish
+ *   the `saved` branch is deleted and `/api/content?branch=saved` falls back to
+ *   `main`, which would clobber unsaved edits (they'd flash then vanish).
+ * - "Published" (live): the deployed site — the fetched `main` branch filtered to
+ *   `status === "live"`, in page order. Renders nothing until the fetch resolves
+ *   so in-memory edits never flash as if they were published.
+ */
+export function computeDisplaySections<T extends { section: { id: string }; meta: { status: string } }>(args: {
+  isEditMode: boolean;
+  viewBranch: ViewBranch;
+  sections: T[];
+  viewSections: T[] | null;
+  activePageSectionIds: string[];
+}): T[] {
+  const { isEditMode, viewBranch, sections, viewSections, activePageSectionIds } = args;
+
+  if (isEditMode) return sections;
+
+  if (viewBranch === "saved") {
+    return sections.filter((s) => isSectionVisibleInViewBranch(s.meta.status, "saved"));
+  }
+
+  if (viewSections === null) return [];
+  return activePageSectionIds
+    .map((id) => viewSections.find((s) => s.section.id === id))
+    .filter((s): s is T => !!s && isSectionVisibleInViewBranch(s.meta.status, "live"));
+}