@drawnagency/primitives 0.1.26 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -16,6 +16,10 @@
       "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
     },
+    "./lib/dexie": {
+      "types": "./dist/lib/dexie.d.ts",
+      "default": "./dist/lib/dexie.js"
+    },
     "./auth": {
       "types": "./dist/auth/index.d.ts",
       "default": "./dist/auth/index.js"

package/src/components/editor/DragHandle.tsx

@@ -5,7 +5,7 @@ import { Tooltip, Kbd } from "../shared/Tooltip";
 
 export const DragHandle = forwardRef<HTMLButtonElement>(function DragHandle(_, ref) {
   return (
-    <Tooltip content={<><Kbd>Drag</Kbd> to move</>} className="-ml-[34px]">
+    <Tooltip content={<><Kbd>Drag</Kbd> to move</>}>
       <IconButton
         ref={ref}
         icon={<DragHandleIcon size={18} />}

package/src/components/editor/SectionOrderingModal.tsx

@@ -0,0 +1,215 @@
+import { useState, useEffect, useRef } from "react";
+import type { LoadedSection } from "../../lib/loader";
+import type { Thumbnail } from "../../lib/registry";
+import { getSection } from "../../lib/registry";
+import { getMediaProvider } from "../../media";
+import type { MediaManifest } from "../../media/types";
+import { DragHandle } from "./DragHandle";
+import { cn } from "../../lib/cn";
+
+interface SectionOrderingModalProps {
+  sections: LoadedSection[];
+  mediaManifest: MediaManifest;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+}
+
+function resolveThumbnailSrc(thumb: Thumbnail, manifest: MediaManifest): string | null {
+  if (thumb.type === "color") return null;
+  const item = manifest.images[thumb.src];
+  if (!item) return null;
+  const provider = getMediaProvider();
+  const resolved = provider.resolve(item, [200]);
+  if (!resolved) return null;
+  return resolved.tag === "img" || resolved.tag === "video" ? resolved.src : null;
+}
+
+function SectionRow({
+  section,
+  index,
+  mediaManifest,
+  onReorder,
+}: {
+  section: LoadedSection;
+  index: number;
+  mediaManifest: MediaManifest;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+}) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<"top" | "bottom" | null>(null);
+
+  const definition = getSection(section.section.type);
+  const label = definition?.getLabel?.(section.section) ?? definition?.label ?? section.section.type;
+  const typeLabel = definition?.label ?? section.section.type;
+  const allThumbnails = definition?.getThumbnails?.(section.section) ?? [];
+  const thumbnails = allThumbnails.slice(0, 3);
+  const remainingCount = Math.max(0, allThumbnails.length - 3);
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+
+      const cleanupDraggable = draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ dragType: "ordering-row", index }),
+        onGenerateDragPreview: () => {
+          row.style.opacity = "0.4";
+          requestAnimationFrame(() => {
+            row.style.opacity = "";
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      });
+
+      const cleanupDropTarget = dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) => source.data.dragType === "ordering-row",
+        getData: ({ input, element }) =>
+          attachClosestEdge({ index }, { input, element, allowedEdges: ["top", "bottom"] }),
+        onDragEnter: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDrag: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const fromIndex = source.data.index as number;
+          const edge = extractClosestEdge(self.data);
+          let toIndex = index;
+          if (edge === "bottom") toIndex = index + 1;
+          if (fromIndex < toIndex) toIndex--;
+          if (fromIndex !== toIndex) {
+            onReorder(fromIndex, toIndex);
+          }
+        },
+      });
+
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [index, onReorder]);
+
+  return (
+    <div
+      ref={rowRef}
+      className={cn(
+        "relative flex items-center gap-1",
+        isDragging && "opacity-50",
+      )}
+    >
+      {closestEdge === "top" && (
+        <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />
+      )}
+      {closestEdge === "bottom" && (
+        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />
+      )}
+
+      <div className="shrink-0 [&_[role=tooltip]]:hidden">
+        <DragHandle ref={handleRef} />
+      </div>
+
+      <div className={cn(
+        "flex min-w-0 flex-1 items-center gap-3 rounded-md border border-base-200 bg-base px-3 py-2",
+        isDragging && "outline outline-2 outline-primary/50",
+      )}>
+        <div className="min-w-0 flex-1">
+          <div className="text-xs text-base-contrast-light">{typeLabel}</div>
+          <div className="truncate text-sm font-medium text-base-contrast">
+            {label}
+          </div>
+        </div>
+
+        {thumbnails.length > 0 && (
+          <div className="flex items-center -space-x-2">
+            {thumbnails.map((thumb, i) => (
+              thumb.type === "color" ? (
+                <div
+                  key={i}
+                  className="h-8 w-8 rounded border-2 border-base"
+                  style={{ backgroundColor: thumb.value }}
+                />
+              ) : (
+                <ResolvedImage
+                  key={i}
+                  thumb={thumb}
+                  manifest={mediaManifest}
+                />
+              )
+            ))}
+            {remainingCount > 0 && (
+              <div className="ml-1 flex h-8 w-8 items-center justify-center rounded border-2 border-base bg-base-accent text-xs text-base-contrast-light">
+                +{remainingCount}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ResolvedImage({
+  thumb,
+  manifest,
+}: {
+  thumb: Thumbnail & { type: "image" };
+  manifest: MediaManifest;
+}) {
+  const src = resolveThumbnailSrc(thumb, manifest);
+  if (!src) {
+    return (
+      <div className="h-8 w-8 rounded border-2 border-base bg-base-accent" />
+    );
+  }
+  return (
+    <img
+      src={src}
+      alt={thumb.alt ?? ""}
+      className="h-8 w-8 rounded border-2 border-base object-cover"
+    />
+  );
+}
+
+export function SectionOrderingModal({
+  sections,
+  mediaManifest,
+  onReorder,
+}: SectionOrderingModalProps) {
+  return (
+    <div className="flex flex-col gap-2 overflow-y-auto">
+      {sections.map((loadedSection, index) => (
+        <SectionRow
+          key={loadedSection.section.id}
+          section={loadedSection}
+          index={index}
+          mediaManifest={mediaManifest}
+          onReorder={onReorder}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/editor/SectionWrapper.tsx

@@ -273,7 +273,9 @@ export function SectionWrapper({
           alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
       >
-        <DragHandle ref={handleRef} />
+        <div className="-ml-[34px]">
+          <DragHandle ref={handleRef} />
+        </div>
         <span className="pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80">
           {definition.label}
         </span>

package/src/components/primitives/EditableRichText.tsx

@@ -19,13 +19,15 @@ function isContentEmpty(html: string): boolean {
   return html.replace(/<[^>]*>/g, "").trim().length === 0;
 }
 
+const DEFAULT_PLACEHOLDER = "Click to edit…";
+
 export function EditableRichText({
   value,
   onChange,
   isEditMode,
   preset = "rich",
   className,
-  placeholder,
+  placeholder = DEFAULT_PLACEHOLDER,
 }: EditableRichTextProps) {
   const { isEditorActive, editor, activate, deactivate } =
     useEditableRichText({ value, onChange, preset, placeholder });
@@ -106,7 +108,7 @@ export function EditableRichText({
   // Edit mode, not yet active: static HTML with click-to-activate.
   // When content is empty, show the placeholder so the area is visibly clickable.
   if (!isEditorActive || !editor) {
-    const empty = placeholder && isContentEmpty(value);
+    const empty = isContentEmpty(value);
     if (empty) {
       return (
         <div className={className} onClick={handleClick}>

package/src/components/sections/Button/index.tsx

@@ -26,6 +26,7 @@ export default defineSection({
     />
   ),
   defaults: () => ({ type: "button" as const, content: { text: "Button" } }),
+  getLabel: (content) => content.content.text,
   settings: {
     href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
     target: {

package/src/components/sections/Colors/index.tsx

@@ -33,6 +33,14 @@ export default defineSection({
     type: "colors" as const,
     content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
   }),
+  getLabel: (content) => {
+    const n = content.content.colors.length;
+    return `${n} color${n === 1 ? "" : "s"}`;
+  },
+  getThumbnails: (content) =>
+    content.content.colors
+      .filter((c) => c.spaces[0]?.hex)
+      .map((c) => ({ type: "color" as const, value: c.spaces[0].hex! })),
   settings: {
     columns: {
       type: "select", label: "Columns", default: "3", coerce: "number",

package/src/components/sections/DoDontMediaGrid/index.tsx

@@ -40,6 +40,14 @@ export default defineSection({
       ],
     },
   }),
+  getLabel: (content) => {
+    const n = content.content.media.length;
+    return `${n} item${n === 1 ? "" : "s"}`;
+  },
+  getThumbnails: (content) =>
+    content.content.media
+      .filter((m) => m.imageId)
+      .map((m) => ({ type: "image" as const, src: m.imageId })),
   settings: {
     columns: {
       type: "select", label: "Columns", default: "2", target: "content", coerce: "number",

package/src/components/sections/IconList/index.tsx

@@ -32,5 +32,9 @@ export default defineSection({
     type: "icon_list" as const,
     content: { items: [{ label: "", text: "" }] },
   }),
+  getLabel: (content) => {
+    const n = content.content.items.length;
+    return `${n} icon${n === 1 ? "" : "s"}`;
+  },
   settingsForm: IconListSettings,
 });

package/src/components/sections/LinkHeading/index.tsx

@@ -11,6 +11,7 @@ export default defineSection({
   type: "link_heading",
   label: "Link Heading",
   schema,
+  navRole: "h1",
   component: ({ content, onChange }) => (
     <HeadingSection
       heading={content.content.heading}
@@ -21,4 +22,5 @@ export default defineSection({
     />
   ),
   defaults: () => ({ type: "link_heading" as const, content: { heading: "New Section" } }),
+  getLabel: (content) => content.content.heading,
 });

package/src/components/sections/MediaGrid/index.tsx

@@ -34,6 +34,14 @@ export default defineSection({
     content: { columns: 2, media: [{ type: "image" as const, imageId: "" }] },
     options: {},
   }),
+  getLabel: (content) => {
+    const n = content.content.media.length;
+    return `${n} image${n === 1 ? "" : "s"}`;
+  },
+  getThumbnails: (content) =>
+    content.content.media
+      .filter((m) => m.imageId)
+      .map((m) => ({ type: "image" as const, src: m.imageId })),
   settings: {
     columns: {
       type: "select", label: "Columns", default: "2", target: "content", coerce: "number",

package/src/components/sections/Prose/index.tsx

@@ -1,6 +1,7 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
 import Prose from "./Prose";
+import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("prose"),
@@ -15,4 +16,5 @@ export default defineSection({
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />
   ),
   defaults: () => ({ type: "prose" as const, content: { body: "<p></p>" } }),
+  getLabel: (content) => truncate(stripHtmlToPlainText(content.content.body), 60),
 });

package/src/components/sections/SplitContent/index.tsx

@@ -1,7 +1,7 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
 import SplitContent from "./SplitContent";
-import { SplitContentSettings } from "./SplitContentSettings";
+import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("split_content"),
@@ -35,5 +35,19 @@ export default defineSection({
     type: "split_content" as const,
     content: { imageId: undefined, body: "<p></p>" },
   }),
-  settingsForm: SplitContentSettings,
+  settings: {
+    imagePosition: {
+      type: "select",
+      label: "Image Position",
+      default: "left",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+      ],
+    },
+    border: { type: "checkbox", label: "Show border", default: false },
+  },
+  getLabel: (content) => truncate(stripHtmlToPlainText(content.content.body), 60),
+  getThumbnails: (content) =>
+    content.content.imageId ? [{ type: "image" as const, src: content.content.imageId }] : [],
 });

package/src/components/sections/SubHeading/index.tsx

@@ -11,6 +11,7 @@ export default defineSection({
   type: "sub_heading",
   label: "Sub Heading",
   schema,
+  navRole: "h2",
   component: ({ content, onChange }) => (
     <HeadingSection
       heading={content.content.heading}
@@ -21,6 +22,7 @@ export default defineSection({
     />
   ),
   defaults: () => ({ type: "sub_heading" as const, content: { heading: "New Sub Heading" } }),
+  getLabel: (content) => content.content.heading,
   settings: {
     excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
   },

package/src/components/sections/SubSubHeading/index.tsx

@@ -11,6 +11,7 @@ export default defineSection({
   type: "sub_sub_heading",
   label: "Sub Sub Heading",
   schema,
+  navRole: "h3",
   component: ({ content, onChange }) => (
     <HeadingSection
       heading={content.content.heading}
@@ -21,6 +22,7 @@ export default defineSection({
     />
   ),
   defaults: () => ({ type: "sub_sub_heading" as const, content: { heading: "New Sub Sub Heading" } }),
+  getLabel: (content) => content.content.heading,
   settings: {
     excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
   },

package/src/components/sections/ViewRenderer.tsx

@@ -1,5 +1,7 @@
-import "./register";
+import { ensureSectionsRegistered } from "./register";
 import { getSection } from "../../lib/registry";
+
+ensureSectionsRegistered();
 import { SectionLayout } from "./SectionLayout";
 import type { LoadedSection } from "../../lib/loader";
 

package/src/components/sections/register-schemas.ts

@@ -15,8 +15,6 @@ const allDefs = [linkHeading, subHeading, subSubHeading, prose, mediaGrid,
  splitContent, button, colors, doDontList, doDontImageGrid, iconList,
 ];
 
-allDefs.forEach((def) => registerSchema(def.type, def.schema));
-
 let _ensured = false;
 export function ensureSchemasRegistered(): number {
   if (!_ensured) {

package/src/components/sections/register.ts

@@ -15,8 +15,6 @@ const allDefs = [linkHeading, subHeading, subSubHeading, prose, mediaGrid,
  splitContent, button, colors, doDontList, doDontImageGrid, iconList,
 ];
 
-allDefs.forEach(registerSection);
-
 let _ensured = false;
 export function ensureSectionsRegistered(): number {
   if (!_ensured) {

package/src/components/shell/EditorShell.tsx

@@ -16,9 +16,12 @@ import { MediaLibraryModal } from "./MediaLibraryModal";
 import { MediaLibraryContext } from "./MediaLibraryContext";
 import { ProcessingIndicator } from "./ProcessingIndicator";
 import { SectionSkeleton } from "./SectionSkeleton";
-import "../sections/register";
+import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections } from "../../lib/registry";
+
+ensureSectionsRegistered();
 import { SectionWrapper } from "../editor/SectionWrapper";
+import { SectionOrderingModal } from "../editor/SectionOrderingModal";
 import { SectionLayout } from "../sections/SectionLayout";
 import {
   initEditorStore,
@@ -30,7 +33,7 @@ import {
   persistMediaManifest,
   getMediaManifest,
   getPendingMediaItems,
-  getPendingMediaLocalUrls,
+  getPendingMediaBlobs,
   getPendingMediaDeletions,
 } from "../../lib/dexie";
 import { useEditorPersistence } from "../../hooks/useEditorPersistence";
@@ -47,7 +50,7 @@ import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
-import { ImageIcon, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -110,6 +113,7 @@ export default function EditorShell({
   const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
   const [isLoadingViewContent, setIsLoadingViewContent] = useState(false);
   const [showRestoreModal, setShowRestoreModal] = useState(false);
+  const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
@@ -149,6 +153,9 @@ export default function EditorShell({
     pendingMediaItems: mediaPipeline.pendingMediaItems,
     pendingMediaDeletions: mediaPipeline.pendingDeletions,
     onMediaPublished: (publishedItems, publishedDeletions) => {
+      for (const url of Object.values(mediaPipeline.pendingLocalUrls)) {
+        URL.revokeObjectURL(url);
+      }
       mediaPipeline.setPendingMediaItems([]);
       mediaPipeline.setPendingLocalUrls({});
       mediaPipeline.setPendingDeletions([]);
@@ -265,16 +272,16 @@ export default function EditorShell({
       siteIndexRef.current = loadedIndex;
       applySiteConfigPreview(loadedConfig);
 
-      // Load pending media from Dexie
+      // Load pending media from Dexie — recreate blob URLs from stored blobs
       const savedPendingItems = await getPendingMediaItems();
       if (!cancelled && savedPendingItems.length > 0) {
         mediaPipeline.setPendingMediaItems(savedPendingItems);
         const urlMap: Record<string, string> = {};
         for (const pi of savedPendingItems) {
-          const urls = await getPendingMediaLocalUrls(pi.id);
-          if (urls) {
-            const smallestKey = Object.keys(urls).find((k) => k !== "primary") ?? "primary";
-            if (urls[smallestKey]) urlMap[pi.id] = urls[smallestKey];
+          const blobs = await getPendingMediaBlobs(pi.id);
+          if (blobs) {
+            const displayKey = Object.keys(blobs).find((k) => k !== "primary" && k !== "poster") ?? "primary";
+            if (blobs[displayKey]) urlMap[pi.id] = URL.createObjectURL(blobs[displayKey]);
           }
         }
         if (!cancelled) mediaPipeline.setPendingLocalUrls(urlMap);
@@ -352,6 +359,9 @@ export default function EditorShell({
     await discardLocalChanges();
     setLocalChangesExist(false);
     setDirtySectionIds(new Set());
+    for (const url of Object.values(mediaPipeline.pendingLocalUrls)) {
+      URL.revokeObjectURL(url);
+    }
     mediaPipeline.setPendingMediaItems([]);
     mediaPipeline.setPendingLocalUrls({});
     mediaPipeline.setPendingDeletions([]);
@@ -534,7 +544,6 @@ export default function EditorShell({
         })),
         siteIndex: historyContent.index,
         siteConfig: historyContent.siteConfig,
-        targetBranch: "main",
       };
 
       const response = await fetch("/api/save", {
@@ -626,6 +635,7 @@ export default function EditorShell({
             buildElapsed={buildStatus.elapsedSeconds}
             onBuildDismiss={buildStatus.dismiss}
             onRestoreClick={() => setShowRestoreModal(true)}
+            onOrderingClick={() => setShowOrderingModal(true)}
           />
 
           <HistoryOrEditorContent sections={sections}>
@@ -704,6 +714,18 @@ export default function EditorShell({
               maxFileSize={siteConfig?.media.maxFileSize}
             />
           </EditorModal>
+          <EditorModal
+            isOpen={showOrderingModal}
+            onClose={() => setShowOrderingModal(false)}
+            title="Reorder Sections"
+            size="settings"
+          >
+            <SectionOrderingModal
+              sections={sections}
+              mediaManifest={mediaManifest}
+              onReorder={onReorderSections}
+            />
+          </EditorModal>
           <RestoreHandler
             showRestoreModal={showRestoreModal}
             setShowRestoreModal={setShowRestoreModal}
@@ -1097,6 +1119,7 @@ function EditorToolbar({
   buildElapsed,
   onBuildDismiss,
   onRestoreClick,
+  onOrderingClick,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -1113,6 +1136,7 @@ function EditorToolbar({
   buildElapsed: number;
   onBuildDismiss: () => void;
   onRestoreClick: () => void;
+  onOrderingClick: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
 
@@ -1177,6 +1201,13 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
+              <IconButton
+                icon={<ListOrderedIcon size={16} />}
+                label="Reorder sections"
+                size="md"
+                onClick={onOrderingClick}
+                className="border border-base-200 bg-base-accent"
+              />
               <IconButton
                 icon={<ImageIcon size={16} />}
                 label="Media library"

package/src/deploy/index.ts

@@ -0,0 +1 @@
+export type { DeployStatus, DeployStatusProvider } from "./types";

package/src/deploy/types.ts

@@ -0,0 +1,12 @@
+export interface DeployStatus {
+  deployId: string;
+  state: "building" | "ready" | "error";
+  deployUrl: string;
+  commitSha: string | null;
+  updatedAt: string;
+}
+
+export interface DeployStatusProvider {
+  get(siteId: string): Promise<DeployStatus | null>;
+  upsert(siteId: string, data: Omit<DeployStatus, "updatedAt">): Promise<void>;
+}