@drawnagency/primitives 0.1.25 → 0.1.27

package/dist/storage/types.d.ts

@@ -0,0 +1,21 @@
+export interface StorageProvider {
+    writeFiles(files: FileWrite[], message: string): Promise<{
+        version: string;
+    }>;
+    readFile(path: string, options?: {
+        draft?: boolean;
+    }): Promise<Uint8Array | null>;
+    promoteDraft(): Promise<{
+        version: string;
+    }>;
+    getVersion(): Promise<string>;
+    listDirectory(path: string, options?: {
+        draft?: boolean;
+    }): Promise<string[]>;
+}
+export type FileWrite = {
+    path: string;
+    content: string | Uint8Array | null;
+    encoding?: "utf-8" | "base64";
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/storage/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/storage/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,UAAU,CACR,KAAK,EAAE,SAAS,EAAE,EAClB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEhC,QAAQ,CACN,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAC5B,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAE9B,YAAY,IAAI,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE7C,UAAU,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAE9B,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAC/E;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.25",
+  "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/shared/HistoryPopover.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { cn } from "../../lib/cn";
+import { formatDateTime } from "../../lib/timestamp";
 import { Button } from "./Button";
 
 interface CommitItem {
@@ -12,37 +13,6 @@ interface HistoryPopoverProps {
   onSelectCommit: (sha: string, date: string) => void;
 }
 
-function formatRelativeDate(dateStr: string): string {
-  const date = new Date(dateStr);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-  if (diffDays === 0) return "Today";
-  if (diffDays === 1) return "Yesterday";
-  if (diffDays < 7) return `${diffDays} days ago`;
-  if (diffDays < 30) {
-    const weeks = Math.floor(diffDays / 7);
-    return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
-  }
-  if (diffDays < 365) {
-    const months = Math.floor(diffDays / 30);
-    return `${months} ${months === 1 ? "month" : "months"} ago`;
-  }
-  const years = Math.floor(diffDays / 365);
-  return `${years} ${years === 1 ? "year" : "years"} ago`;
-}
-
-function formatAbsoluteDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-  });
-}
-
 export function HistoryPopover({ onSelectCommit }: HistoryPopoverProps) {
   const [commits, setCommits] = useState<CommitItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -111,9 +81,8 @@ export function HistoryPopover({ onSelectCommit }: HistoryPopoverProps) {
                 "w-full cursor-pointer px-4 py-2 text-left text-xs transition-colors",
                 "hover:bg-base-accent text-base-contrast-light hover:text-base-contrast",
               )}
-              title={formatAbsoluteDate(commit.date)}
             >
-              {formatRelativeDate(commit.date)}
+              {formatDateTime(commit.date)}
             </button>
           </li>
         ))}

package/src/components/shared/Navigation.tsx

@@ -4,6 +4,7 @@ import { Toggle } from "./Toggle";
 import type { NavItem } from "../../lib/nav";
 import { editModeEvent, navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
+import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
 import { HistoryPopover } from "./HistoryPopover";
 
@@ -205,11 +206,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                     className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors"
                     aria-label="View history"
                   >
-                    Last updated {new Date(lastUpdated).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                      year: "numeric",
-                    })}
+                    Last updated {formatDate(lastUpdated)}
                   </button>
                   <Popover
                     isOpen={showHistory}