@drawnagency/primitives 0.1.118 → 0.1.120

package/dist/schemas/deck.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"deck.d.ts","sourceRoot":"","sources":["../../src/schemas/deck.ts"],"names":[],"mappings":"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"}

package/dist/schemas/deck.js

@@ -1,65 +0,0 @@
-import {
-  CenteredTextLayoutSchema,
-  ColumnSplitLayoutSchema,
-  DECK_COMPONENT_TYPES,
-  DECK_LAYOUT_TYPES,
-  DECK_MAX_SLIDES,
-  DECK_MEDIA_KINDS,
-  DECK_OVERLAY_PLACEMENTS,
-  DECK_SCHEMA_VERSION,
-  DECK_SPLIT_RATIOS,
-  DECK_STAGE_HEIGHT,
-  DECK_STAGE_WIDTH,
-  DECK_SURFACES,
-  DeckComponentSchema,
-  DeckIdSchema,
-  DeckImageGridItemSchema,
-  DeckImageGridSchema,
-  DeckImageSchema,
-  DeckLayoutSchema,
-  DeckMediaRefSchema,
-  DeckOverlayPanelSchema,
-  DeckRichTextSchema,
-  DeckSchema,
-  DeckSlideSchema,
-  DeckTextSpanSchema,
-  DeckVideoSchema,
-  FullBleedImageLayoutSchema,
-  PortalMediaRefSchema,
-  formatDeckIssues,
-  parseDeck,
-  serializeDeck
-} from "../chunk-VAYZJKVR.js";
-import "../chunk-JSBRDJBE.js";
-export {
-  CenteredTextLayoutSchema,
-  ColumnSplitLayoutSchema,
-  DECK_COMPONENT_TYPES,
-  DECK_LAYOUT_TYPES,
-  DECK_MAX_SLIDES,
-  DECK_MEDIA_KINDS,
-  DECK_OVERLAY_PLACEMENTS,
-  DECK_SCHEMA_VERSION,
-  DECK_SPLIT_RATIOS,
-  DECK_STAGE_HEIGHT,
-  DECK_STAGE_WIDTH,
-  DECK_SURFACES,
-  DeckComponentSchema,
-  DeckIdSchema,
-  DeckImageGridItemSchema,
-  DeckImageGridSchema,
-  DeckImageSchema,
-  DeckLayoutSchema,
-  DeckMediaRefSchema,
-  DeckOverlayPanelSchema,
-  DeckRichTextSchema,
-  DeckSchema,
-  DeckSlideSchema,
-  DeckTextSpanSchema,
-  DeckVideoSchema,
-  FullBleedImageLayoutSchema,
-  PortalMediaRefSchema,
-  formatDeckIssues,
-  parseDeck,
-  serializeDeck
-};

package/src/components/editor/SectionOrderingModal.tsx

@@ -1,80 +0,0 @@
-import type { LoadedSection } from "../../lib/loader";
-import { getSection } from "../../lib/registry";
-import type { MediaManifest } from "../../media/types";
-import { DragHandle } from "./DragHandle";
-import { useSortableRow } from "../../hooks/useSortableRow";
-import { DropEdgeIndicator } from "./DropEdgeIndicator";
-import { SectionSummaryRow } from "../shared/SectionSummaryRow";
-import { toThumbViews } from "../../lib/thumb-views";
-import { cn } from "../../lib/cn";
-
-interface SectionOrderingModalProps {
-  sections: LoadedSection[];
-  mediaManifest: MediaManifest;
-  onReorder: (fromIndex: number, toIndex: number) => void;
-}
-
-function SectionRow({
-  section,
-  index,
-  mediaManifest,
-  onReorder,
-}: {
-  section: LoadedSection;
-  index: number;
-  mediaManifest: MediaManifest;
-  onReorder: (fromIndex: number, toIndex: number) => void;
-}) {
-  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
-    index,
-    dragType: "ordering-row",
-    onReorder,
-  });
-
-  const definition = getSection(section.section.type);
-  const label = definition?.getLabel?.(section.section) ?? definition?.label ?? section.section.type;
-  const typeLabel = definition?.label ?? section.section.type;
-
-  return (
-    <div
-      ref={rowRef}
-      className={cn(
-        "relative flex items-center gap-1",
-        isDragging && "opacity-50",
-      )}
-    >
-      <DropEdgeIndicator edge={closestEdge} />
-
-      <div className="shrink-0 [&_[role=tooltip]]:hidden">
-        <DragHandle ref={handleRef} />
-      </div>
-
-      <SectionSummaryRow
-        label={label}
-        typeLabel={typeLabel}
-        thumbnails={toThumbViews(definition?.getThumbnails?.(section.section) ?? [], mediaManifest)}
-        className={cn(isDragging && "outline outline-2 outline-primary/50")}
-      />
-    </div>
-  );
-}
-
-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/shell/DocInspector.tsx

@@ -1,314 +0,0 @@
-import { settingsFor, type DocumentOptions } from "../../document";
-import { Input } from "../shared/Input";
-import { Select } from "../shared/Select";
-import { Checkbox } from "../shared/Checkbox";
-import { RadioGroup } from "../shared/RadioGroup";
-import { ColorPicker } from "../shared/ColorPicker";
-import { FormLabel } from "../shared/FormLabel";
-import { useMediaLibrary } from "./MediaLibraryContext";
-import { Button } from "../shared/Button";
-import { imageThumbnailUrl } from "../../media/utils";
-
-
-export interface DocInspectorProps {
-  document: DocumentOptions;
-  selection: { kind: "cover" } | { kind: "chunk"; chunkId: string; title: string; depth?: number };
-  warnings: string[]; // warningsByChunk for the selected chunk
-  onUpdateCover: (patch: Partial<DocumentOptions["cover"]>) => void;
-  onUpdateMeta: (patch: Partial<DocumentOptions["meta"]>) => void;
-  // Caller merges the patch via sectionSettingsSchema.parse.
-  onUpdateSection: (chunkId: string, patch: Record<string, unknown>) => void;
-}
-
-// Drawn palette — mirrors the swatch row in the harness inspector.
-const SWATCHES = [
-  "#FFFFFF", "#EBEBEB", "#999999", "#333333", "#1F1F1F", // neutrals: white → near-black
-  "#009FAD", // teal (brand primary)
-  "#3D7F7F", // forest
-  "#099A6F", // green
-  "#5F81AB", // blue
-  "#7C97BB", // sky
-  "#6864A0", // violet
-  "#D3A978", // beige
-  "#EB9500", // gold
-  "#F07C00", // orange
-  "#A24E16", // brown / rust
-  "#A65982", // indigo
-  "#E64165", // pink
-];
-
-function ColorControl({ label, value, onPick }: { label: string; value: string; onPick: (v: string) => void }) {
-  return (
-    <div className="mb-4">
-      <FormLabel>{label}</FormLabel>
-      <div className="flex flex-wrap items-center gap-1">
-        {SWATCHES.map((s) => (
-          <button
-            key={s}
-            type="button"
-            aria-label={s}
-            onClick={() => onPick(s)}
-            style={{ background: s }}
-            className={`h-6 w-6 rounded border ${s === value ? "border-primary ring-1 ring-primary" : "border-base-200"}`}
-          />
-        ))}
-        <ColorPicker value={value} onChange={onPick} label="Custom color" className="h-6 w-6" />
-      </div>
-    </div>
-  );
-}
-
-export function DocInspector({
-  document: doc,
-  selection,
-  warnings,
-  onUpdateCover,
-  onUpdateMeta,
-  onUpdateSection,
-}: DocInspectorProps) {
-  return (
-    <aside data-testid="doc-inspector" className="w-64 shrink-0 overflow-y-auto border-l border-base-200 bg-base p-4">
-      {selection.kind === "cover" ? (
-        <CoverPanel doc={doc} onUpdateCover={onUpdateCover} onUpdateMeta={onUpdateMeta} />
-      ) : (
-        <ChunkPanel
-          key={selection.chunkId}
-          chunkId={selection.chunkId}
-          title={selection.title}
-          depth={selection.depth}
-          doc={doc}
-          warnings={warnings}
-          onUpdateSection={onUpdateSection}
-        />
-      )}
-    </aside>
-  );
-}
-
-function CoverPanel({
-  doc,
-  onUpdateCover,
-  onUpdateMeta,
-}: {
-  doc: DocumentOptions;
-  onUpdateCover: (patch: Partial<DocumentOptions["cover"]>) => void;
-  onUpdateMeta: (patch: Partial<DocumentOptions["meta"]>) => void;
-}) {
-  const { cover, meta } = doc;
-  const media = useMediaLibrary();
-  return (
-    <>
-      <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">Cover</h2>
-      <Input label="Title" value={cover.title} onChange={(title) => onUpdateCover({ title })} className="mb-2" />
-      <Input label="Label" value={cover.label} onChange={(label) => onUpdateCover({ label })} className="mb-2" />
-      <Input label="Date" value={cover.date} onChange={(date) => onUpdateCover({ date })} className="mb-2" />
-
-      {media ? (
-        <div className="mb-4">
-          <FormLabel>Cover image</FormLabel>
-          {cover.imageId ? (
-            (() => {
-              const src = imageThumbnailUrl(media.manifest.images[cover.imageId]);
-              return src ? (
-                <img src={src} alt="Cover image preview" className="mb-2 max-h-24 rounded border border-base-200" />
-              ) : null;
-            })()
-          ) : null}
-          <div className="flex gap-2">
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => media.openSelectModal((imageId) => onUpdateCover({ imageId }))}
-            >
-              {cover.imageId ? "Replace image" : "Choose image"}
-            </Button>
-            {cover.imageId ? (
-              <Button variant="ghost" size="sm" onClick={() => onUpdateCover({ imageId: null })}>
-                Remove image
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-
-      <ColorControl label="Background" value={cover.bgColor} onPick={(bgColor) => onUpdateCover({ bgColor })} />
-      <ColorControl label="Accent" value={cover.accentColor} onPick={(accentColor) => onUpdateCover({ accentColor })} />
-
-      <h2 className="mb-2 mt-6 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">Document</h2>
-      <Input label="Client" value={meta.client} onChange={(client) => onUpdateMeta({ client })} className="mb-2" />
-      <Input label="Project" value={meta.project} onChange={(project) => onUpdateMeta({ project })} className="mb-2" />
-      <Input label="Date label" value={meta.dateLabel} onChange={(dateLabel) => onUpdateMeta({ dateLabel })} className="mb-2" />
-    </>
-  );
-}
-
-function ChunkPanel({
-  chunkId,
-  title,
-  depth,
-  doc,
-  warnings,
-  onUpdateSection,
-}: {
-  chunkId: string;
-  title: string;
-  depth?: number;
-  doc: DocumentOptions;
-  warnings: string[];
-  onUpdateSection: (chunkId: string, patch: Record<string, unknown>) => void;
-}) {
-  const settings = settingsFor(doc.sections, chunkId);
-  const layout = settings.imageLayout;
-
-  return (
-    <>
-      <h2 className="mb-3 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">{title}</h2>
-
-      <Checkbox
-        className="mb-4"
-        checked={!settings.excluded}
-        onChange={(checked) => onUpdateSection(chunkId, { excluded: !checked })}
-        label="Include in document"
-      />
-
-      {/* Only parent sections own the boundary setting — a sub-page can't
-          split further, and its entry would be inert anyway (harvest reads
-          splitAt from parent ids only). */}
-      {(depth ?? 0) === 0 ? (
-        <Select
-          className="mb-4"
-          label="Split pages at"
-          value={settings.splitAt}
-          options={[
-            { value: "none", label: "Off" },
-            { value: "sub_heading", label: "Sub-headings" },
-          ]}
-          onChange={(splitAt) => onUpdateSection(chunkId, { splitAt })}
-        />
-      ) : null}
-
-      {/* Image placement is linked, not independent (Drew, 2026-07-19): text
-          left → images right of the column, text top → images below full
-          width. One control drives both fields. */}
-      <RadioGroup
-        className="mb-4"
-        label="Text placement"
-        value={settings.textPlacement}
-        options={[
-          { label: "Top", value: "top" },
-          { label: "Left column", value: "leftColumn" },
-        ]}
-        onChange={(textPlacement) =>
-          onUpdateSection(chunkId, {
-            textPlacement,
-            imagePlacement: textPlacement === "leftColumn" ? "right" : "fullWidth",
-          })
-        }
-      />
-
-      <Checkbox
-        className="mb-4"
-        checked={settings.dropTextOverflow}
-        onChange={(dropTextOverflow) => onUpdateSection(chunkId, { dropTextOverflow })}
-        label="Drop text overflow"
-      />
-
-      <Select
-        className="mb-4"
-        label="Image layout"
-        value={layout.mode}
-        options={[
-          { value: "grid", label: "Grid" },
-          { value: "masonry", label: "Masonry" },
-        ]}
-        onChange={(v) =>
-          onUpdateSection(
-            chunkId,
-            v === "grid"
-              ? { imageLayout: { mode: "grid", rows: 2, columns: 4 } }
-              : { imageLayout: { mode: "masonry", flow: "rows", columns: 3 } },
-          )
-        }
-      />
-
-      {layout.mode === "grid" ? (
-        <>
-          <Select
-            className="mb-4"
-            label="Rows"
-            value={String(layout.rows)}
-            options={[1, 2, 3].map((n) => ({ value: String(n), label: String(n) }))}
-            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, rows: Number(v) } })}
-          />
-          <Select
-            className="mb-4"
-            label="Columns"
-            value={String(layout.columns)}
-            options={[2, 3, 4].map((n) => ({ value: String(n), label: String(n) }))}
-            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, columns: Number(v) } })}
-          />
-          <Select
-            className="mb-4"
-            label="Image fit"
-            value={layout.fit}
-            options={[
-              { value: "cover", label: "Crop" },
-              { value: "contain", label: "Contain" },
-            ]}
-            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, fit: v } })}
-          />
-        </>
-      ) : (
-        <>
-          <Select
-            className="mb-4"
-            label="Flow"
-            value={layout.flow}
-            options={[
-              { value: "rows", label: "Rows" },
-              { value: "columns", label: "Columns" },
-            ]}
-            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, flow: v } })}
-          />
-          {/* Rows count only drives the rows flow; "auto" keeps the greedy
-              target-height fill. Mirrors Columns, which only drives columns. */}
-          {layout.flow === "rows" ? (
-            <Select
-              className="mb-4"
-              label="Rows"
-              value={String(layout.rows)}
-              options={[
-                { value: "auto", label: "Auto" },
-                ...[1, 2, 3, 4].map((n) => ({ value: String(n), label: String(n) })),
-              ]}
-              onChange={(v) =>
-                onUpdateSection(chunkId, { imageLayout: { ...layout, rows: v === "auto" ? "auto" : Number(v) } })
-              }
-            />
-          ) : null}
-          {/* Column count only drives the columns flow (layoutRows never reads
-              it) — hide it when irrelevant. */}
-          {layout.flow === "columns" ? (
-            <Select
-              className="mb-4"
-              label="Columns"
-              value={String(layout.columns)}
-              options={[2, 3, 4, 5, 6].map((n) => ({ value: String(n), label: String(n) }))}
-              onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, columns: Number(v) } })}
-            />
-          ) : null}
-        </>
-      )}
-
-      {warnings.length > 0 ? (
-        <div className="mt-2">
-          {warnings.map((w, i) => (
-            <p key={i} className="mb-1 rounded border border-warning bg-warning-bg px-2 py-1 text-xs text-warning">
-              {w}
-            </p>
-          ))}
-        </div>
-      ) : null}
-    </>
-  );
-}

package/src/components/shell/DocumentEditorOverlay.tsx

@@ -1,179 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import type { Page } from "../../schemas/site-config";
-import type { MediaManifest } from "../../media/types";
-import type { LoadedSection } from "../../lib/loader";
-import {
-  DocViewer,
-  documentOptionsSchema,
-  sectionSettingsSchema,
-  settingsFor,
-  type Chunk,
-  type DocHost,
-  type DocumentOptions,
-} from "../../document";
-import { DocInspector, type DocInspectorProps } from "./DocInspector";
-import { buildDraftDocumentInput } from "../../lib/document-input";
-import { Button } from "../shared/Button";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
-import { useStackedEscape } from "../../hooks/useStackedEscape";
-// The sealed document stylesheet ships with its editor consumer (Task 6 decided
-// the present route imports it from its island; this is the editor's island).
-// Vitest stubs CSS imports, so it stays out of the jsdom test graph regardless.
-import "../../document/styles/document.css";
-
-export interface DocumentEditorOverlayProps {
-  /** The active page — its `document` block must be enabled for the FAB to mount. */
-  page: Page;
-  /**
-   * The page's draft sections, in `page.order` order. The overlay drops
-   * archived ones itself — /present renders only live sections, so a chunk the
-   * published document will never show must not influence the proofed layout.
-   */
-  sections: LoadedSection[];
-  manifest: MediaManifest;
-  /** Wired by the shell to `setPageDocument` + the local-changes dirty flag. */
-  onUpdateDocument: (patch: Partial<DocumentOptions>) => void;
-  onClose: () => void;
-}
-
-/**
- * Full-viewport editing surface: DocViewer (edit mode, ghosts + selection) on
- * the left, DocInspector (settings for the current selection) on the right.
- *
- * The engine input is rebuilt from the live draft (page + in-memory sections +
- * manifest) on every prop change, so unsaved edits repaginate immediately —
- * the pagination hook's stale-heights guard absorbs the shape changes.
- */
-export function DocumentEditorOverlay({
-  page,
-  sections,
-  manifest,
-  onUpdateDocument,
-  onClose,
-}: DocumentEditorOverlayProps) {
-  // page.document is optional on the type; the caller only mounts this when it
-  // is enabled, but parse-with-defaults keeps us total either way.
-  const doc = useMemo(() => documentOptionsSchema.parse(page.document ?? {}), [page.document]);
-
-  const source = useMemo(
-    () =>
-      buildDraftDocumentInput({
-        page,
-        sections: sections.filter((s) => s.meta.status !== "archived"),
-        manifest,
-      }),
-    [page, sections, manifest],
-  );
-
-  // Titles (for the inspector header) + per-chunk warnings come straight from
-  // DocViewer's single pagination pass via onDocState — no second useDocPages.
-  const [docState, setDocState] = useState<{ chunks: Chunk[]; warningsByChunk: Record<string, string[]> }>({
-    chunks: [],
-    warningsByChunk: {},
-  });
-  const { chunks, warningsByChunk } = docState;
-
-  // null = cover selected.
-  const [selectedChunkId, setSelectedChunkId] = useState<string | null>(null);
-
-  // All media bytes come from /api/media (draft branch bytes are served to
-  // editor sessions) — the same host shape the present route uses.
-  const host: DocHost = useMemo(
-    () => ({
-      variant: "preview",
-      imageSrc: (image, variant) =>
-        `/api/media/${image.imageId}/${variant === "print" ? image.printFile : image.previewFile}`,
-    }),
-    [],
-  );
-
-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
-  // Escape closes (the close button is the other exit), but a modal opened on
-  // top — the Media Library, from the cover-image picker — owns Escape first
-  // (useStackedEscape's layer check). DocViewer owns arrow paging on its own
-  // window listener; Escape doesn't collide with it. An Escape aimed at an
-  // inspector control is the cancel-the-field gesture, not "leave the
-  // editor": text fields blur (so the next Escape closes), and a select is
-  // left alone entirely (swallowed, not blurred) — the browser uses Escape to
-  // dismiss its popup and there's no way to tell whether one is open.
-  // Stable identity: useStackedEscape's effect deps include `before`, so a
-  // fresh arrow every render (this closes over nothing render-specific) would
-  // tear down and re-add the document listener on every render instead of
-  // just mount/unmount.
-  const blurFieldFirst = useCallback((e: KeyboardEvent) => {
-    const t = e.target as HTMLElement | null;
-    if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) {
-      t.blur();
-      return true;
-    }
-    if (t && t.tagName === "SELECT") return true;
-    return false;
-  }, []);
-
-  useStackedEscape(onClose, {
-    enabled: true,
-    before: blurFieldFirst,
-  });
-
-  const selection: DocInspectorProps["selection"] = useMemo(() => {
-    if (selectedChunkId === null) return { kind: "cover" };
-    const chunk = chunks.find((c) => c.id === selectedChunkId);
-    return { kind: "chunk", chunkId: selectedChunkId, title: chunk?.title ?? selectedChunkId, depth: chunk?.depth };
-  }, [selectedChunkId, chunks]);
-
-  const warnings = selectedChunkId ? warningsByChunk[selectedChunkId] ?? [] : [];
-
-  // Merge the inspector's partial patch onto the chunk's CURRENT settings and
-  // ship the whole validated block — setPageDocument merges sections shallowly
-  // by key, so we must hand it a complete SectionSettings, not a fragment.
-  const handleUpdateSection = useCallback(
-    (chunkId: string, patch: Record<string, unknown>) => {
-      const merged = sectionSettingsSchema.parse({ ...settingsFor(doc.sections, chunkId), ...patch });
-      onUpdateDocument({ sections: { [chunkId]: merged } });
-    },
-    [doc.sections, onUpdateDocument],
-  );
-
-  // Cover/meta are single objects on the document; merge onto the current value
-  // so a one-field edit doesn't blank the siblings before setPageDocument runs.
-  const handleUpdateCover = useCallback(
-    (patch: Partial<DocumentOptions["cover"]>) => onUpdateDocument({ cover: { ...doc.cover, ...patch } }),
-    [doc.cover, onUpdateDocument],
-  );
-  const handleUpdateMeta = useCallback(
-    (patch: Partial<DocumentOptions["meta"]>) => onUpdateDocument({ meta: { ...doc.meta, ...patch } }),
-    [doc.meta, onUpdateDocument],
-  );
-
-  return (
-    <div ref={panelRef} className="fixed inset-0 z-50 flex flex-col bg-base" role="dialog" aria-modal="true" aria-label="Document editor">
-      <div className="flex items-center justify-between border-b border-base-200 bg-base px-4 py-2">
-        <span className="text-sm font-medium text-base-contrast">Document · {page.title}</span>
-        <Button variant="secondary" size="sm" aria-label="Close document editor" onClick={onClose}>
-          Close
-        </Button>
-      </div>
-      <div className="flex min-h-0 flex-1">
-        <DocViewer
-          source={source}
-          document={doc}
-          host={host}
-          mode="edit"
-          selectedChunkId={selectedChunkId}
-          onSelectChunk={setSelectedChunkId}
-          onDocState={setDocState}
-        />
-        <DocInspector
-          document={doc}
-          selection={selection}
-          warnings={warnings}
-          onUpdateCover={handleUpdateCover}
-          onUpdateMeta={handleUpdateMeta}
-          onUpdateSection={handleUpdateSection}
-        />
-      </div>
-    </div>
-  );
-}