@drawnagency/primitives 0.1.118 → 0.1.119

package/src/deck-builder/starter-deck.ts

@@ -1,86 +0,0 @@
-import { DECK_SCHEMA_VERSION, DeckSchema, type Deck } from "../schemas/deck";
-
-/**
- * A new deck's seed. Three slides using the two text-only Layouts, so a New
- * Deck is publishable and presentable before the author has said anything —
- * and so the starter never cites media that a given site may not have (a
- * reference the manifest cannot resolve renders as a gap, which is a poor
- * first impression of the runtime).
- *
- * Parsed rather than cast: this is the one deck the product itself authors, so
- * a schema change that breaks it should break a test, not a client's first
- * deck.
- */
-export function starterDeck(id: string, title: string): Deck {
-  return DeckSchema.parse({
-    schemaVersion: DECK_SCHEMA_VERSION,
-    id,
-    title,
-    slides: [
-      {
-        id: "cover",
-        title: "Cover",
-        layout: {
-          type: "centeredText",
-          background: "brand",
-          content: {
-            type: "richText",
-            kicker: "New deck",
-            heading: title,
-            subheading: "Rename this slide's heading, or ask the assistant to rewrite the whole deck.",
-          },
-        },
-      },
-      {
-        id: "context",
-        title: "Context",
-        layout: {
-          type: "centeredText",
-          content: {
-            type: "richText",
-            kicker: "Context",
-            heading: "What this deck is for",
-            paragraphs: [
-              "Every slide uses one of the portal's prebuilt Layouts, so it inherits the brand's type, color and spacing automatically.",
-            ],
-          },
-        },
-      },
-      {
-        id: "next",
-        title: "Next",
-        layout: {
-          type: "centeredText",
-          content: {
-            type: "richText",
-            kicker: "Next",
-            heading: "Three things to try",
-            bullets: [
-              "Click a thumbnail below to move through the deck",
-              "Publish when you want the deck kept for you",
-              "Everything you change stays on this device until you do",
-            ],
-          },
-        },
-      },
-    ],
-  });
-}
-
-/**
- * A deck id for a new deck: a slug of the title plus a short random suffix.
- *
- * Random rather than sequential because the id is a directory name on a shared
- * branch that this browser cannot enumerate (a viewer only ever sees their own
- * decks), so "next free number" is not something the builder can know. The
- * charset is `DeckIdSchema`'s.
- */
-export function newDeckId(title: string): string {
-  const slug = title
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 40);
-  const suffix = Math.random().toString(36).slice(2, 8).replace(/[^a-z0-9]/g, "0").padEnd(6, "0");
-  return slug ? `${slug}-${suffix}` : `deck-${suffix}`;
-}

package/src/deck-builder/types.ts

@@ -1,24 +0,0 @@
-import type { Deck } from "../schemas/deck";
-
-/**
- * One row of the builder's deck grid: whatever this browser has staged, joined
- * to whatever the decks branch holds.
- *
- * The join is by deck id and both sides are optional, because the three states
- * are all real: a draft never published (published side absent), a deck
- * published from another device (draft side absent), and the normal case where
- * both exist and may differ.
- */
-export interface DeckGridEntry {
-  id: string;
-  title: string;
-  slideCount: number;
-  /** ISO timestamp behind the card's "… ago" line. */
-  updatedAt: string;
-  /** Present when this browser has the deck staged. */
-  draft: { deck: Deck; baseVersion: string | null } | null;
-  /** Present when the decks branch holds it. */
-  published: { version: string } | null;
-  /** The draft differs from what was published (or was never published). */
-  unpublishedChanges: boolean;
-}

package/src/deck-builder/useSortableSlide.ts

@@ -1,102 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { computeReorderTarget } from "../lib/reorder";
-
-interface Options {
-  index: number;
-  onReorder: (fromIndex: number, toIndex: number) => void;
-  /** False while a chat turn streams — the strip goes inert, like the stage. */
-  enabled: boolean;
-}
-
-const DRAG_TYPE = "deck-filmstrip-slide";
-
-/**
- * Drag-to-reorder for one filmstrip thumbnail.
- *
- * A sibling of `useSortableRow` rather than an option on it: the filmstrip is
- * HORIZONTAL, so it reads left/right edges where every existing consumer reads
- * top/bottom, and widening that hook's `closestEdge` type would change the two
- * shipped editor modals that render `DropEdgeIndicator` from it. The Deck
- * Builder is a sealed subtree; a second small hook here costs less than a type
- * change under two surfaces this ticket is not touching.
- *
- * The pointer-math is NOT duplicated: `computeReorderTarget` is written in
- * before/after terms, so left maps to "top" and right to "bottom" and the
- * unit-tested decrement stays the one implementation. The whole atlaskit
- * adapter is imported lazily, as it is everywhere else — jsdom cannot run it,
- * which is why `moveDeckSlide` and the move affordances carry the coverage.
- */
-export function useSortableSlide<E extends HTMLElement>({ index, onReorder, enabled }: Options) {
-  const ref = useRef<E>(null);
-  // Held in a ref so the effect does not depend on it. `onReorder` is rebuilt
-  // whenever the draft refreshes — i.e. after every single edit — and depending
-  // on it tore down and re-registered the drag adapter on every thumbnail in
-  // the strip each time.
-  const onReorderRef = useRef(onReorder);
-  onReorderRef.current = onReorder;
-  const [isDragging, setIsDragging] = useState(false);
-  const [closestEdge, setClosestEdge] = useState<"left" | "right" | null>(null);
-
-  useEffect(() => {
-    if (!enabled) return;
-    const element = ref.current;
-    if (!element) return;
-
-    let cleanup: (() => void) | undefined;
-    let cancelled = false;
-
-    void 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 edgeOf = (data: Record<string | symbol, unknown>): "left" | "right" | null => {
-        const edge = extractClosestEdge(data);
-        return edge === "left" || edge === "right" ? edge : null;
-      };
-
-      const cleanupDraggable = draggable({
-        element,
-        getInitialData: () => ({ dragType: DRAG_TYPE, index }),
-        onGenerateDragPreview: () => {
-          element.style.opacity = "0.4";
-          requestAnimationFrame(() => {
-            element.style.opacity = "";
-          });
-        },
-        onDragStart: () => setIsDragging(true),
-        onDrop: () => setIsDragging(false),
-      });
-
-      const cleanupDropTarget = dropTargetForElements({
-        element,
-        canDrop: ({ source }) => source.data.dragType === DRAG_TYPE,
-        getData: ({ input, element: target }) =>
-          attachClosestEdge({ index }, { input, element: target, allowedEdges: ["left", "right"] }),
-        onDragEnter: ({ self }) => setClosestEdge(edgeOf(self.data)),
-        onDrag: ({ self }) => setClosestEdge(edgeOf(self.data)),
-        onDragLeave: () => setClosestEdge(null),
-        onDrop: ({ source, self }) => {
-          setClosestEdge(null);
-          const fromIndex = source.data.index as number;
-          const edge = edgeOf(self.data);
-          const toIndex = computeReorderTarget(fromIndex, index, edge === "right" ? "bottom" : edge === "left" ? "top" : null);
-          if (toIndex !== null) onReorderRef.current(fromIndex, toIndex);
-        },
-      });
-
-      cleanup = () => {
-        cleanupDraggable();
-        cleanupDropTarget();
-      };
-    });
-
-    return () => {
-      cancelled = true;
-      cleanup?.();
-    };
-  }, [index, enabled]);
-
-  return { ref, isDragging, closestEdge };
-}

package/src/document/components/DocCoverPage.tsx

@@ -1,45 +0,0 @@
-import type { DocCover } from "../engine/settings";
-import type { DocImage, DocMeta } from "../engine/types";
-import { DocPage } from "./DocPage";
-import type { DocHost } from "./DocSectionPage";
-import { Wordmark } from "./Wordmark";
-
-// Absorbs the harness's TitleCardLayout inline instead of wrapping it: the
-// portal-native cover has no client-logo slot (the harness only ever passed
-// null) and cover text is edited in the inspector, never on-canvas, so there
-// is no EditableText/deck-context machinery here — this always renders the
-// harness's non-editable, null-logo branch.
-export function DocCoverPage({
-  cover,
-  meta,
-  image,
-  host,
-}: {
-  cover: DocCover;
-  meta: DocMeta;
-  /** Resolved from source.images[cover.imageId] by the caller; null/undefined = solid cover. */
-  image?: DocImage | null;
-  host?: DocHost;
-}) {
-  return (
-    <DocPage meta={meta} bleed chrome={false}>
-      <div className="layout-titlecard" style={{ background: cover.bgColor }}>
-        <header className="layout-titlecard__masthead">
-          <Wordmark className="layout-titlecard__wordmark" />
-          <span className="layout-titlecard__rule" />
-        </header>
-        {image && host ? (
-          <div className="layout-titlecard__image">
-            <img src={host.imageSrc(image, host.variant)} alt={image.alt} />
-          </div>
-        ) : null}
-        <div className="layout-titlecard__lockup" style={{ color: cover.accentColor }}>
-          <h1 className="layout-titlecard__title">{cover.title}</h1>
-          <span className="layout-titlecard__titlerule" style={{ background: cover.accentColor }} />
-          <p className="layout-titlecard__label">{cover.label}</p>
-          <p className="layout-titlecard__date">{cover.date || meta.dateLabel}</p>
-        </div>
-      </div>
-    </DocPage>
-  );
-}

package/src/document/components/DocPage.tsx

@@ -1,40 +0,0 @@
-import type { ReactNode } from "react";
-import type { DocMeta } from "../engine/types";
-import { Wordmark } from "./Wordmark";
-
-// Re-exported so index.ts's `export { DocPage, type DocMeta } from
-// "./components/DocPage"` has a local name — the single definition still
-// lives in engine/types.ts.
-export type { DocMeta };
-
-export function DocPage({
-  meta,
-  bleed = false,
-  chrome = true,
-  children,
-}: {
-  meta: DocMeta;
-  bleed?: boolean;
-  chrome?: boolean;
-  children: ReactNode;
-}) {
-  const crumb = [meta.client, meta.project, meta.dateLabel]
-    .map((s) => s.trim().toUpperCase())
-    .filter(Boolean)
-    .join(" :: ");
-
-  return (
-    <section className="deck-page">
-      {bleed ? <div className="deck-bleed">{children}</div> : null}
-      {chrome ? (
-        <header className="deck-chrome">
-          <span className="deck-crumb">{crumb}</span>
-          <div className="deck-wordmark-clip">
-            <Wordmark className="deck-wordmark" />
-          </div>
-        </header>
-      ) : null}
-      {!bleed ? <div className="deck-body">{children}</div> : null}
-    </section>
-  );
-}

package/src/document/components/DocRail.tsx

@@ -1,189 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import type { DerivedPage } from "../engine/paginate";
-import type { DocCover } from "../engine/settings";
-import type { DocImage, DocMeta } from "../engine/types";
-import { DocCoverPage } from "./DocCoverPage";
-import { DocSectionPage, type DocHost } from "./DocSectionPage";
-
-// 17in @96dpi = 1632px wide; thumbnails render the real page scaled to fill the
-// rail width at a locked 17:11 aspect ratio (mirrors the harness PageRail).
-const PAGE_W = 1632;
-const PAGE_H = 1056;
-
-export type RailEntry =
-  | { kind: "cover" }
-  | { kind: "page"; page: DerivedPage }
-  | { kind: "ghost"; chunkId: string; title: string; reason: "excluded" | "empty"; depth?: 1 };
-
-export function entryId(entry: RailEntry): string {
-  if (entry.kind === "cover") return "cover";
-  if (entry.kind === "page") return entry.page.id;
-  return `ghost:${entry.chunkId}`;
-}
-
-// Rail nesting: sub-pages sit one step in per depth, continuations one more.
-const INDENT = ["", "pl-4", "pl-8"];
-const indentClass = (level: number) => INDENT[Math.min(level, INDENT.length - 1)] || undefined;
-
-function ThumbButton({
-  id,
-  selectedId,
-  scale,
-  label,
-  indentLevel,
-  onSelect,
-  children,
-}: {
-  id: string;
-  selectedId: string;
-  scale: number;
-  label: string;
-  indentLevel?: number;
-  onSelect: (id: string) => void;
-  children: ReactNode;
-}) {
-  // Each thumbnail is a REAL page subtree — every image at print resolution,
-  // scaled to ~11%. Mounting all of them cost a 40-page document 40 subtrees and
-  // a fresh request for every image before the rail was even scrolled. The
-  // aspect-ratio box below holds its size whether or not the page is mounted, so
-  // deferring costs nothing in layout. Sticky once shown: re-unmounting would
-  // re-request the images on every scroll back.
-  const liRef = useRef<HTMLLIElement>(null);
-  const [shown, setShown] = useState(typeof IntersectionObserver === "undefined");
-  useEffect(() => {
-    if (shown) return;
-    const el = liRef.current;
-    if (!el) return;
-    const obs = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((e) => e.isIntersecting)) {
-          setShown(true);
-          obs.disconnect();
-        }
-      },
-      { rootMargin: "200% 0px" },
-    );
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, [shown]);
-
-  return (
-    <li ref={liRef} className={indentClass(indentLevel ?? 0)}>
-      <button
-        type="button"
-        onClick={() => onSelect(id)}
-        className={`relative block w-full rounded border-2 bg-white ${
-          id === selectedId ? "border-teal-600" : "border-neutral-200 hover:border-neutral-300"
-        }`}
-      >
-        <span className="pointer-events-none block w-full overflow-hidden aspect-[17/11]">
-          <span
-            className="block origin-top-left"
-            style={{ transform: `scale(${scale})`, width: PAGE_W, height: PAGE_H }}
-          >
-            {shown ? children : null}
-          </span>
-        </span>
-        <span className="absolute bottom-0.5 left-1 max-w-[90%] truncate text-[10px] text-neutral-400">
-          {label}
-        </span>
-      </button>
-    </li>
-  );
-}
-
-export function DocRail({
-  entries,
-  selectedId,
-  meta,
-  cover,
-  coverImage,
-  host,
-  onSelect,
-  onCollapse,
-}: {
-  entries: RailEntry[];
-  selectedId: string;
-  meta: DocMeta;
-  cover: DocCover;
-  coverImage?: DocImage | null;
-  host: DocHost;
-  onSelect: (id: string) => void;
-  onCollapse: () => void;
-}) {
-  const listRef = useRef<HTMLOListElement>(null);
-  const [scale, setScale] = useState(0.11);
-  useEffect(() => {
-    const el = listRef.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const obs = new ResizeObserver(() => {
-      // content width = list width minus the button's 2px border on each side
-      const w = el.clientWidth - 4;
-      if (w > 0) setScale(w / PAGE_W);
-    });
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, []);
-
-  return (
-    <nav
-      data-testid="doc-rail"
-      className="flex w-52 shrink-0 flex-col overflow-y-auto border-r border-neutral-200 bg-neutral-50 p-3"
-    >
-      <button
-        type="button"
-        aria-label="Collapse page rail"
-        onClick={onCollapse}
-        className="mb-2 flex w-full items-center justify-between rounded px-2 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
-      >
-        <span>Pages</span>
-        <span aria-hidden="true" className="text-lg leading-none">‹</span>
-      </button>
-      <ol ref={listRef} className="flex flex-col gap-2">
-        {entries.map((entry) => {
-          const id = entryId(entry);
-          if (entry.kind === "cover") {
-            return (
-              <ThumbButton key={id} id={id} selectedId={selectedId} scale={scale} label="Cover" onSelect={onSelect}>
-                <DocCoverPage cover={cover} meta={meta} image={coverImage} host={host} />
-              </ThumbButton>
-            );
-          }
-          if (entry.kind === "page") {
-            return (
-              <ThumbButton
-                key={id}
-                id={id}
-                selectedId={selectedId}
-                scale={scale}
-                label={entry.page.title}
-                indentLevel={(entry.page.depth ?? 0) + (entry.page.cont ? 1 : 0)}
-                onSelect={onSelect}
-              >
-                <DocSectionPage page={entry.page} meta={meta} host={host} />
-              </ThumbButton>
-            );
-          }
-          return (
-            <li key={id} className={indentClass(entry.depth ?? 0)}>
-              <button
-                type="button"
-                onClick={() => onSelect(id)}
-                className={`flex w-full items-center justify-between gap-2 rounded border px-2 py-2 text-left text-xs ${
-                  id === selectedId
-                    ? "border-teal-600 bg-white"
-                    : "border-dashed border-neutral-300 bg-neutral-50 hover:border-neutral-400"
-                }`}
-              >
-                <span className="truncate text-neutral-400">{entry.title}</span>
-                <span className="shrink-0 rounded bg-neutral-200 px-1 text-[10px] uppercase tracking-wide text-neutral-500">
-                  {entry.reason}
-                </span>
-              </button>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

package/src/document/components/DocSectionPage.tsx

@@ -1,48 +0,0 @@
-import type { DocImage, DocMeta } from "../engine/types";
-import type { DerivedPage } from "../engine/paginate";
-import { DocPage } from "./DocPage";
-
-export interface DocHost {
-  imageSrc: (image: DocImage, variant: "preview" | "print") => string;
-  variant: "preview" | "print";
-}
-
-const inch = (v: number) => `${v}in`;
-
-export function DocSectionPage({ page, meta, host }: { page: DerivedPage; meta: DocMeta; host: DocHost }) {
-  return (
-    <DocPage meta={meta}>
-      <h2 className="pdoc-title">
-        {page.kicker ? <span className="pdoc-kicker" aria-hidden="true">{page.kicker}</span> : null}
-        {page.title}
-      </h2>
-      {page.textRegion ? (
-        <div
-          className="pdoc-text"
-          style={{ left: inch(page.textRegion.xIn), top: inch(page.textRegion.yIn), width: inch(page.textRegion.wIn) }}
-        >
-          {page.textBlocks.map((b, i) => {
-            const spacing = i > 0 ? { marginTop: inch(0.15) } : undefined;
-            if (b.kind === "heading") {
-              return b.level === 2 ? (
-                <h3 key={i} className="pdoc-h2" style={spacing}>{b.text}</h3>
-              ) : (
-                <h4 key={i} className="pdoc-h3" style={spacing}>{b.text}</h4>
-              );
-            }
-            return <div key={i} className="pdoc-prose" style={spacing} dangerouslySetInnerHTML={{ __html: b.html }} />;
-          })}
-        </div>
-      ) : null}
-      {page.imageBoxes.map((box, i) => (
-        <div
-          key={`${box.image.imageId}-${i}`}
-          className="pdoc-img"
-          style={{ left: inch(box.xIn), top: inch(box.yIn), width: inch(box.wIn), height: inch(box.hIn) }}
-        >
-          <img src={host.imageSrc(box.image, host.variant)} alt={box.image.alt} style={{ objectFit: box.fit }} />
-        </div>
-      ))}
-    </DocPage>
-  );
-}