@drawnagency/primitives 0.1.118 → 0.1.120

package/src/components/shell/DocumentPresentOverlay.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useMemo } from "react";
-import type { Page } from "../../schemas/site-config";
-import type { MediaManifest } from "../../media/types";
-import type { LoadedSection } from "../../lib/loader";
-import { DocViewer, documentOptionsSchema, type DocHost } from "../../document";
-import { buildDraftDocumentInput } from "../../lib/document-input";
-// Same sealed document stylesheet the editor overlay ships (see
-// DocumentEditorOverlay). Vitest stubs CSS imports, so it stays out of the jsdom
-// test graph regardless.
-import "../../document/styles/document.css";
-
-export interface DocumentPresentOverlayProps {
-  /** The active page — its `document` block supplies cover/meta/section settings. */
-  page: Page;
-  /**
-   * The sections currently on the canvas (already page-ordered and filtered to
-   * the branch being previewed). The shell derives these from the same
-   * `computeDisplaySections` call the history/branch canvas renders.
-   */
-  sections: LoadedSection[];
-  manifest: MediaManifest;
-  onClose: () => void;
-}
-
-/**
- * Read-only, full-viewport document PRESENTATION of the content currently being
- * viewed — used when the shell is previewing a non-draft version (the published
- * branch). It is `DocViewer` in `present` mode: no inspector, no update path.
- *
- * Product decision (Drew): history/branch views are the record — we present them
- * but never open the editor over them. Document SETTINGS come from the current
- * draft's `page.document`; the previewed branch's own document index is not
- * carried in the shell's `viewSections`, so cover/meta/exclusions here reflect
- * the draft, not the historical commit. This is an accepted approximation: we
- * are rendering historical *content* with the draft's presentation settings.
- */
-export function DocumentPresentOverlay({
-  page,
-  sections,
-  manifest,
-  onClose,
-}: DocumentPresentOverlayProps) {
-  // 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, manifest }),
-    [page, sections, manifest],
-  );
-
-  // All media bytes come from /api/media — the same host shape the present route
-  // and the editor overlay use.
-  const host: DocHost = useMemo(
-    () => ({
-      variant: "preview",
-      imageSrc: (image, variant) =>
-        `/api/media/${image.imageId}/${variant === "print" ? image.printFile : image.previewFile}`,
-    }),
-    [],
-  );
-
-  // Escape closes, matching the editor overlay. DocViewer owns arrow paging on
-  // its own window listener; Escape doesn't collide with it.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Escape") return;
-      e.preventDefault();
-      onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex flex-col bg-base"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Document presentation"
-    >
-      <div className="flex min-h-0 flex-1">
-        <DocViewer source={source} document={doc} host={host} mode="present" onClose={onClose} />
-      </div>
-    </div>
-  );
-}

package/src/components/shell/SiteSettingsDecks.tsx

@@ -1,41 +0,0 @@
-import { AudienceChips } from "./AudienceChips";
-import type { SiteConfig } from "../../schemas/site-config";
-import type { Audience } from "../../auth/types";
-
-interface Props {
-  siteConfig: SiteConfig;
-  onSiteConfigChange: (config: SiteConfig) => void;
-  audiences: Audience[];
-}
-
-/** Deck Builder settings. One control today — the creation opt-in — because
- *  that is the only `deckBuilder` key that exists; public sharing (#37) is the
- *  next one and belongs on this tab. */
-export function SiteSettingsDecks({ siteConfig, onSiteConfigChange, audiences }: Props) {
-  const selected = siteConfig.deckBuilder.audiences;
-
-  function toggle(name: string) {
-    const next = selected.includes(name) ? selected.filter((n) => n !== name) : [...selected, name];
-    onSiteConfigChange({ ...siteConfig, deckBuilder: { ...siteConfig.deckBuilder, audiences: next } });
-  }
-
-  return (
-    <div className="space-y-3">
-      <div>
-        <h3 className="mb-1 text-sm font-medium text-base-contrast">Who can build decks</h3>
-        <p className="mb-2 text-xs text-base-contrast-light">
-          Members of the selected audiences get the Decks button and can create and publish their own presentations.
-          None selected means no viewer can start a new one. Editors always can.
-        </p>
-        <AudienceChips audiences={audiences} selected={selected} onToggle={toggle} />
-      </div>
-      <p className="text-xs text-base-contrast-light">
-        Removing an audience here stops its members starting new decks. Decks they already own stay theirs — they can
-        still open, edit and delete them — so remove the deck itself if that is what you want gone.
-      </p>
-      <p className="text-xs text-base-contrast-light">
-        A deck is private to the person who made it. Sharing it with an audience, or by public link, comes later.
-      </p>
-    </div>
-  );
-}

package/src/deck/DeckComponentView.tsx

@@ -1,28 +0,0 @@
-import type { DeckTextSlot } from "../lib/deck-edit";
-import type { DeckComponent } from "../schemas/deck";
-import { DeckImage } from "./components/DeckImage";
-import { DeckImageGrid } from "./components/DeckImageGrid";
-import { DeckRichText } from "./components/DeckRichText";
-import { DeckVideo } from "./components/DeckVideo";
-
-interface Props {
-  component: DeckComponent;
-  /** The Layout slot this component fills — carried only so text leaves can
-   *  address themselves for inline editing (#39). Optional: a caller that omits
-   *  it gets the read-only render. */
-  slot?: DeckTextSlot;
-}
-
-/** Dispatches a Deck Component onto its runtime implementation. */
-export function DeckComponentView({ component, slot }: Props) {
-  switch (component.type) {
-    case "richText":
-      return <DeckRichText content={component} slot={slot} />;
-    case "image":
-      return <DeckImage content={component} />;
-    case "imageGrid":
-      return <DeckImageGrid content={component} />;
-    case "video":
-      return <DeckVideo content={component} />;
-  }
-}

package/src/deck/DeckPlayer.tsx

@@ -1,166 +0,0 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { cn } from "../lib/cn";
-import type { Deck, DeckMediaAsset, DeckMediaResolver } from "../schemas/deck";
-import { DeckMediaProvider } from "./media";
-import { DeckStage } from "./DeckStage";
-import { DeckSlideView } from "./DeckSlideView";
-
-interface Props {
-  deck: Deck;
-  /** Slide to open on. Out-of-range values clamp into the deck. */
-  initialSlide?: number;
-  /** Window-level arrow/space/Home/End navigation. Off for thumbnails. */
-  keyboard?: boolean;
-  /** Turns media references into bytes. The Deck Builder injects the real one. */
-  resolveMedia?: DeckMediaResolver;
-  /**
-   * Pre-resolved portal media, keyed by media id. The serializable form of the
-   * same seam, for callers that cross an Astro island boundary — a function
-   * prop cannot survive that trip. Ignored when `resolveMedia` is given.
-   */
-  mediaAssets?: Record<string, DeckMediaAsset>;
-  className?: string;
-}
-
-function clamp(index: number, length: number): number {
-  return Math.min(Math.max(index, 0), length - 1);
-}
-
-/** Arrow keys must not steal typing from a chat panel docked beside the stage. */
-function isTypingTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
-}
-
-/**
- * A native button activates on Space *keyup*; the keydown only marks it active
- * and suppresses scrolling. Calling preventDefault on that keydown cancels the
- * activation — so Space on a focused "Previous slide" used to swallow the click
- * and step FORWARD instead. Enter needs no such guard: it has no case below, so
- * it never reaches preventDefault.
- */
-function isActivatableTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) return false;
-  if (target.tagName === "BUTTON" || target.tagName === "SUMMARY") return true;
-  if (target.tagName === "A" && target.hasAttribute("href")) return true;
-  return target.getAttribute("role") === "button";
-}
-
-const NAV_BUTTON =
-  "flex size-[38px] items-center justify-center rounded-[var(--radius-outer)] border border-base-200 text-base-contrast transition-colors hover:bg-base-accent disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent";
-
-/**
- * The deck runtime's presentation surface: one 16:9 stage plus slide
- * navigation. Deliberately self-contained — the Deck Builder, the in-portal
- * deck view and the Public Link view all mount this same component, so slide
- * state lives here rather than in any one of those shells.
- */
-export function DeckPlayer({ deck, initialSlide = 0, keyboard = true, resolveMedia, mediaAssets, className }: Props) {
-  const total = deck.slides.length;
-  const [index, setIndex] = useState(() => clamp(initialSlide, total));
-  // `Object.hasOwn`, not indexing: a media id is author-supplied, and a plain
-  // object answers `"constructor"` and `"toString"` with inherited members that
-  // are not assets at all. The schema's charset rules those ids out too — this
-  // is the second lock on the same door. The `kind` check keeps the map form
-  // honest the day a second media kind lands: it resolves portal ids, and says
-  // so by refusing everything else rather than looking the id up anyway.
-  const resolve = useMemo<DeckMediaResolver>(
-    () =>
-      resolveMedia ??
-      ((ref) =>
-        ref.kind === "portal" && mediaAssets !== undefined && Object.hasOwn(mediaAssets, ref.id)
-          ? mediaAssets[ref.id]
-          : null),
-    [resolveMedia, mediaAssets],
-  );
-
-  const current = clamp(index, total);
-  const slide = deck.slides[current];
-
-  const goTo = useCallback((next: number) => setIndex(clamp(next, total)), [total]);
-  // `prev` is clamped BEFORE the delta: the builder live-replaces the deck every
-  // LLM turn, so a shrunk deck can leave the stored index past the end. Without
-  // the inner clamp the first Previous press would land back on the slide
-  // already showing — a visible no-op.
-  const step = useCallback(
-    (delta: number) => setIndex((prev) => clamp(clamp(prev, total) + delta, total)),
-    [total],
-  );
-
-  useEffect(() => {
-    if (!keyboard) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey || event.ctrlKey || event.altKey) return;
-      if (isTypingTarget(event.target)) return;
-      switch (event.key) {
-        case " ":
-          if (isActivatableTarget(event.target)) return;
-          event.preventDefault();
-          step(1);
-          break;
-        case "ArrowRight":
-        case "PageDown":
-          event.preventDefault();
-          step(1);
-          break;
-        case "ArrowLeft":
-        case "PageUp":
-          event.preventDefault();
-          step(-1);
-          break;
-        case "Home":
-          event.preventDefault();
-          setIndex(0);
-          break;
-        case "End":
-          event.preventDefault();
-          setIndex(total - 1);
-          break;
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [keyboard, step, total]);
-
-  return (
-    <div data-deck-player={deck.id} className={cn("flex h-full min-h-0 w-full flex-col gap-4 bg-base p-4", className)}>
-      <DeckStage className="flex-1">
-        <DeckMediaProvider resolve={resolve}>
-          <DeckSlideView slide={slide} />
-        </DeckMediaProvider>
-      </DeckStage>
-
-      <nav aria-label={`${deck.title} slides`} className="flex shrink-0 items-center justify-center gap-4">
-        <button type="button" className={NAV_BUTTON} onClick={() => step(-1)} disabled={current === 0} aria-label="Previous slide">
-          <ChevronLeft className="size-5" aria-hidden="true" />
-        </button>
-
-        <ol className="flex items-center gap-2">
-          {deck.slides.map((s, i) => (
-            <li key={s.id}>
-              <button
-                type="button"
-                onClick={() => goTo(i)}
-                aria-current={i === current ? "true" : undefined}
-                aria-label={s.title ? `Slide ${i + 1}: ${s.title}` : `Slide ${i + 1}`}
-                className={cn(
-                  "size-[10px] rounded-full transition-colors",
-                  i === current ? "bg-primary" : "bg-base-300 hover:bg-base-contrast-light",
-                )}
-              />
-            </li>
-          ))}
-        </ol>
-
-        <button type="button" className={NAV_BUTTON} onClick={() => step(1)} disabled={current === total - 1} aria-label="Next slide">
-          <ChevronRight className="size-5" aria-hidden="true" />
-        </button>
-
-        <p aria-live="polite" className="ml-2 text-sm tabular-nums text-base-contrast-light">
-          {current + 1} / {total}
-        </p>
-      </nav>
-    </div>
-  );
-}

package/src/deck/DeckSlideView.tsx

@@ -1,38 +0,0 @@
-import type { DeckSlide } from "../schemas/deck";
-import { CenteredTextLayout } from "./layouts/CenteredTextLayout";
-import { ColumnSplitLayout } from "./layouts/ColumnSplitLayout";
-import { FullBleedImageLayout } from "./layouts/FullBleedImageLayout";
-
-interface Props {
-  slide: DeckSlide;
-}
-
-function LayoutView({ slide }: Props) {
-  const { layout } = slide;
-  switch (layout.type) {
-    case "centeredText":
-      return <CenteredTextLayout layout={layout} />;
-    case "fullBleedImage":
-      return <FullBleedImageLayout layout={layout} />;
-    case "columnSplit":
-      return <ColumnSplitLayout layout={layout} />;
-  }
-}
-
-/**
- * Dispatches a slide onto its Layout. One slide uses exactly one Layout.
- *
- * Keyed by slide id, and that key is load-bearing rather than a lint nicety:
- * two slides sharing a Layout shape reconcile onto the SAME component
- * instances, so an expanded image-grid tile or a playing video on slide 1 was
- * inherited by slide 2 the moment you pressed the arrow key. The key forces the
- * subtree to remount, which is the only thing that makes a slide's interaction
- * state belong to that slide.
- */
-export function DeckSlideView({ slide }: Props) {
-  return (
-    <div key={slide.id} data-deck-slide={slide.id} className="size-full">
-      <LayoutView slide={slide} />
-    </div>
-  );
-}

package/src/deck/DeckStage.tsx

@@ -1,39 +0,0 @@
-import { useRef, type ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { DECK_STAGE_HEIGHT, DECK_STAGE_WIDTH } from "../schemas/deck";
-import { useStageScale } from "./useStageScale";
-
-interface Props {
-  children: ReactNode;
-  /** Applied to the fit box, which is what the stage is scaled to fill. */
-  className?: string;
-}
-
-/**
- * The 16:9 stage: a fixed logical canvas centered in — and scaled to fit — its
- * container, so slide contents are authored in px against one coordinate system
- * regardless of the viewport. Scaling by transform (rather than by a font-size
- * cascade) keeps every measurement, including line breaks, identical at every
- * size, which is what makes a screenshared deck look the same as its preview.
- */
-export function DeckStage({ children, className }: Props) {
-  const fitRef = useRef<HTMLDivElement>(null);
-  const scale = useStageScale(fitRef);
-
-  return (
-    <div ref={fitRef} className={cn("relative min-h-0 w-full overflow-hidden", className)} data-deck-fit="">
-      <div
-        data-deck-stage=""
-        data-deck-scale={scale === null ? undefined : scale.toFixed(4)}
-        className="absolute top-1/2 left-1/2 origin-center overflow-hidden rounded-[var(--radius-outer)] font-body"
-        style={{
-          width: DECK_STAGE_WIDTH,
-          height: DECK_STAGE_HEIGHT,
-          transform: scale === null ? "translate(-50%, -50%)" : `translate(-50%, -50%) scale(${scale})`,
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/deck/components/DeckImage.tsx

@@ -1,38 +0,0 @@
-import type { DeckImage as DeckImageContent } from "../../schemas/deck";
-import { DeckMissingMedia, useDeckMedia } from "../media";
-import { surfaceInk } from "../tokens";
-
-interface Props {
-  content: DeckImageContent;
-}
-
-/**
- * Deck Component — image.
- *
- * Fills its slot and crops. The caption is a solid brand block sitting on the
- * image's bottom edge rather than a gradient scrim: a scrim needs a literal
- * color to darken toward, and legibility here comes from the block.
- */
-export function DeckImage({ content }: Props) {
-  const asset = useDeckMedia(content.media);
-
-  return (
-    <figure data-deck-component="image" className="relative size-full overflow-hidden bg-base-200">
-      {asset === null ? (
-        <DeckMissingMedia />
-      ) : (
-        <img src={asset.src} alt={asset.alt} className="size-full object-cover" />
-      )}
-
-      {content.caption !== undefined && (
-        <figcaption
-          data-deck-surface="brand"
-          style={surfaceInk("brand")}
-          className="absolute right-0 bottom-0 left-0 bg-primary px-[28px] py-[18px] text-[18px] tracking-[0.06em] text-[var(--deck-ink)] [text-transform:var(--nav-text-transform)]"
-        >
-          {content.caption}
-        </figcaption>
-      )}
-    </figure>
-  );
-}