@drawnagency/primitives 0.1.118 → 0.1.120

package/src/deck/flip.ts

@@ -1,70 +0,0 @@
-/**
- * FLIP for the image grid's expand/collapse.
- *
- * The grid changes layout via React state, so the "First" rects have to be
- * taken in the event handler (before `setState`) and the invert applied in a
- * layout effect (after the DOM has moved, before paint).
- */
-
-const TILE_SELECTOR = "[data-deck-tile]";
-
-export type TileRects = Map<Element, DOMRect>;
-
-export function captureTileRects(grid: HTMLElement): TileRects {
-  const rects: TileRects = new Map();
-  for (const tile of grid.querySelectorAll(TILE_SELECTOR)) rects.set(tile, tile.getBoundingClientRect());
-  return rects;
-}
-
-/**
- * Rects are screen-space but the transform applies inside the stage, which is
- * itself scaled — so translations divide by that scale or the tile overshoots
- * by exactly the stage factor. `DeckStage` publishes it as `data-deck-scale`.
- */
-function stageScale(el: Element): number {
-  const raw = el.closest("[data-deck-stage]")?.getAttribute("data-deck-scale");
-  const value = raw === null || raw === undefined ? Number.NaN : Number(raw);
-  return Number.isFinite(value) && value > 0 ? value : 1;
-}
-
-export function playTileFlip(grid: HTMLElement, before: TileRects): void {
-  const scale = stageScale(grid);
-  const moved: HTMLElement[] = [];
-
-  for (const tile of grid.querySelectorAll<HTMLElement>(TILE_SELECTOR)) {
-    const first = before.get(tile);
-    if (!first) continue;
-    const last = tile.getBoundingClientRect();
-    // Unmeasurable boxes (jsdom, a hidden ancestor) invert to NaN; skip them
-    // and the tile simply lands without an animation.
-    if (!first.width || !last.width) continue;
-
-    // Inverted about the element's CENTER, which is `transform-origin`'s
-    // default — so this never sets the property and never has to clean it up.
-    // A top-left origin would have to be cleared, and clearing it synchronously
-    // jumps an in-flight animation while leaving it behind makes the tile's
-    // next hover scale from its corner instead of its middle.
-    const dx = (first.left + first.width / 2 - (last.left + last.width / 2)) / scale;
-    const dy = (first.top + first.height / 2 - (last.top + last.height / 2)) / scale;
-    const sx = first.width / last.width;
-    const sy = first.height / last.height;
-    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5 && Math.abs(sx - 1) < 0.002) continue;
-
-    tile.style.transition = "none";
-    tile.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
-    moved.push(tile);
-  }
-
-  if (moved.length === 0) return;
-
-  // Commit the inverted start state with a synchronous reflow, NOT
-  // requestAnimationFrame: rAF does not run in a background tab, and a deck
-  // left on an inactive tab would come back with every tile stranded under its
-  // inverse transform.
-  void grid.offsetWidth;
-
-  for (const tile of moved) {
-    tile.style.transition = "";
-    tile.style.transform = "";
-  }
-}

package/src/deck/index.ts

@@ -1,30 +0,0 @@
-/**
- * The deck runtime — a sealed subtree, like ./document.
- *
- * NOT re-exported from the primitives root barrel, and deliberately not a
- * section type: nothing on an ordinary viewer page may pull this graph in.
- * Only deck surfaces (the Deck Builder, in-portal deck views, the Public Link
- * route) import from here.
- */
-export { DeckPlayer } from "./DeckPlayer";
-export { DeckStage } from "./DeckStage";
-export { DeckSlideView } from "./DeckSlideView";
-export { DeckComponentView } from "./DeckComponentView";
-export { CenteredTextLayout } from "./layouts/CenteredTextLayout";
-export { ColumnSplitLayout } from "./layouts/ColumnSplitLayout";
-export { FullBleedImageLayout } from "./layouts/FullBleedImageLayout";
-export { DeckRichText } from "./components/DeckRichText";
-export { DeckImage } from "./components/DeckImage";
-export { DeckImageGrid } from "./components/DeckImageGrid";
-export { DeckVideo } from "./components/DeckVideo";
-export {
-  DeckMediaProvider,
-  DeckMissingMedia,
-  useDeckMedia,
-  useDeckMediaResolver,
-  type DeckMediaAsset,
-  type DeckMediaResolver,
-} from "./media";
-export { DeckTextEditProvider, EditableText, type DeckTextEditor } from "./editing";
-export { useStageScale } from "./useStageScale";
-export { deckAlign, surfaceInk, DECK_ELEVATION, SURFACE_BACKGROUND, type DeckSurface } from "./tokens";

package/src/deck/layouts/CenteredTextLayout.tsx

@@ -1,29 +0,0 @@
-import { cn } from "../../lib/cn";
-import type { CenteredTextLayout as CenteredTextLayoutNode } from "../../schemas/deck";
-import { DeckComponentView } from "../DeckComponentView";
-import { deckAlign, SURFACE_BACKGROUND, surfaceInk } from "../tokens";
-
-interface Props {
-  layout: CenteredTextLayoutNode;
-}
-
-/**
- * Layout — centered text. A full-slide title card holding one Deck Component,
- * centered on both axes. The Layout owns the surface (background + ink tokens)
- * and the stage-relative padding; the component owns nothing but its own type.
- */
-export function CenteredTextLayout({ layout }: Props) {
-  return (
-    <div
-      data-deck-layout="centeredText"
-      data-deck-surface={layout.background}
-      style={{ ...surfaceInk(layout.background), ...deckAlign("center") }}
-      className={cn(
-        "flex size-full flex-col items-center justify-center px-[180px] py-[110px] text-center",
-        SURFACE_BACKGROUND[layout.background],
-      )}
-    >
-      <DeckComponentView component={layout.content} slot="content" />
-    </div>
-  );
-}

package/src/deck/layouts/ColumnSplitLayout.tsx

@@ -1,69 +0,0 @@
-import { cn } from "../../lib/cn";
-import type { ColumnSplitLayout as ColumnSplitLayoutNode, DeckComponent, DeckSplitRatio } from "../../schemas/deck";
-import { DeckComponentView } from "../DeckComponentView";
-import { deckAlign, SURFACE_BACKGROUND, surfaceInk } from "../tokens";
-
-interface Props {
-  layout: ColumnSplitLayoutNode;
-}
-
-const RATIO: Record<DeckSplitRatio, string> = {
-  "1-2": "grid-cols-[1fr_2fr]",
-  "2-1": "grid-cols-[2fr_1fr]",
-};
-
-/**
- * How much air a column gives its component. Text needs generous margins; an
- * image is meant to run to the stage edge; a grid and a video need enough
- * breathing room for a tile to lift without clipping.
- */
-const COLUMN_PADDING: Record<DeckComponent["type"], string> = {
-  richText: "flex flex-col justify-center px-[64px] py-[96px]",
-  image: "",
-  imageGrid: "p-[44px]",
-  video: "p-[44px]",
-};
-
-/**
- * Layout — left/right column split.
- *
- * The hairline runs down the text column's inner edge, which is the editorial
- * treatment's only separator: the columns are set apart by the type and the
- * crop, not by a card or a shadow.
- */
-export function ColumnSplitLayout({ layout }: Props) {
-  // The rule belongs to the seam, so exactly one column ever draws it. Asking
-  // each text column for its own inner border drew a 2px rule whenever both
-  // columns held text — the one case where the hairline is doing the most work.
-  const seam = layout.left.type === "richText" ? "left" : layout.right.type === "richText" ? "right" : null;
-
-  return (
-    <div
-      data-deck-layout="columnSplit"
-      data-deck-ratio={layout.ratio}
-      data-deck-surface="base"
-      style={{ ...surfaceInk("base"), ...deckAlign("start") }}
-      className={cn("grid size-full text-left", RATIO[layout.ratio], SURFACE_BACKGROUND.base)}
-    >
-      <Column component={layout.left} side="left" rule={seam === "left"} />
-      <Column component={layout.right} side="right" rule={seam === "right"} />
-    </div>
-  );
-}
-
-// `side` doubles as the edit-seam slot name (see DeckTextPath) — the two are
-// the same coordinate, so keeping one avoids a mapping that could drift.
-function Column({ component, side, rule }: { component: DeckComponent; side: "left" | "right"; rule: boolean }) {
-  return (
-    <div
-      data-deck-column={side}
-      className={cn(
-        "relative min-w-0 overflow-hidden",
-        COLUMN_PADDING[component.type],
-        rule && (side === "left" ? "border-r border-base-200" : "border-l border-base-200"),
-      )}
-    >
-      <DeckComponentView component={component} slot={side} />
-    </div>
-  );
-}

package/src/deck/layouts/FullBleedImageLayout.tsx

@@ -1,58 +0,0 @@
-import { cn } from "../../lib/cn";
-import type { DeckOverlayPlacement, FullBleedImageLayout as FullBleedImageLayoutNode } from "../../schemas/deck";
-import { DeckRichText } from "../components/DeckRichText";
-import { DeckMissingMedia, useDeckMedia } from "../media";
-import { deckAlign, SURFACE_BACKGROUND, surfaceInk } from "../tokens";
-
-interface Props {
-  layout: FullBleedImageLayoutNode;
-}
-
-/**
- * Panel geometry, stage-relative. Hard edges and full bleed to the stage sides
- * — the panel is a block of brand color laid over the picture, not a card
- * floating on it.
- */
-const PLACEMENT: Record<DeckOverlayPlacement, string> = {
-  sideLeft: "top-0 bottom-0 left-0 w-[40%] justify-center px-[72px] py-[90px]",
-  sideRight: "top-0 bottom-0 right-0 w-[40%] justify-center px-[72px] py-[90px]",
-  bottomBand: "right-0 bottom-0 left-0 justify-end px-[96px] py-[56px]",
-};
-
-/**
- * Layout — full-bleed image with an optional text overlay panel.
- *
- * The Layout owns both surfaces: the slide is base (the image covers it), the
- * panel declares brand, so the rich text inside reads on-primary ink without
- * knowing it sits over a photograph.
- */
-export function FullBleedImageLayout({ layout }: Props) {
-  const asset = useDeckMedia(layout.media);
-  const { overlay } = layout;
-
-  return (
-    <div
-      data-deck-layout="fullBleedImage"
-      data-deck-surface="base"
-      style={{ ...surfaceInk("base"), ...deckAlign("start") }}
-      className={cn("relative size-full overflow-hidden", SURFACE_BACKGROUND.base)}
-    >
-      {asset === null ? (
-        <DeckMissingMedia className="absolute inset-0" />
-      ) : (
-        <img src={asset.src} alt={asset.alt} className="absolute inset-0 size-full object-cover" />
-      )}
-
-      {overlay !== undefined && (
-        <div
-          data-deck-overlay={overlay.placement}
-          data-deck-surface="brand"
-          style={surfaceInk("brand")}
-          className={cn("absolute z-[2] flex flex-col text-left", SURFACE_BACKGROUND.brand, PLACEMENT[overlay.placement])}
-        >
-          <DeckRichText content={overlay.content} slot="overlay" />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/deck/media.tsx

@@ -1,46 +0,0 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { cn } from "../lib/cn";
-import type { DeckMediaAsset, DeckMediaRef, DeckMediaResolver } from "../schemas/deck";
-
-/**
- * The runtime's media seam.
- *
- * Deck JSON stores references, never URLs (ADR 0001), so something outside the
- * runtime has to turn `{ kind: "portal", id }` into bytes. That something is a
- * resolver injected through context: the Deck Builder passes the manifest-backed
- * one, the dev preview route passes placeholders, and the components below never
- * learn which. Absent a provider every reference resolves to `null`, which is
- * also what a deleted asset resolves to — one path, one rendering.
- */
-
-export type { DeckMediaAsset, DeckMediaResolver } from "../schemas/deck";
-
-const NO_MEDIA: DeckMediaResolver = () => null;
-
-const DeckMediaContext = createContext<DeckMediaResolver>(NO_MEDIA);
-
-export function DeckMediaProvider({ resolve, children }: { resolve: DeckMediaResolver; children: ReactNode }) {
-  return <DeckMediaContext.Provider value={resolve}>{children}</DeckMediaContext.Provider>;
-}
-
-export function useDeckMedia(ref: DeckMediaRef): DeckMediaAsset | null {
-  return useContext(DeckMediaContext)(ref);
-}
-
-/**
- * The resolver itself, for a component that has to resolve a whole set before
- * it can lay any of it out — the image grid packs its masonry columns from
- * every tile's aspect ratio, which it cannot learn one `useDeckMedia` at a time.
- */
-export function useDeckMediaResolver(): DeckMediaResolver {
-  return useContext(DeckMediaContext);
-}
-
-/**
- * What an unresolvable reference renders. A published deck can outlive the
- * media it points at (ADR 0002 flags the GC hazard), and a torn alt string over
- * a presentation is worse than a quiet gap.
- */
-export function DeckMissingMedia({ className }: { className?: string }) {
-  return <span data-deck-media="missing" aria-hidden="true" className={cn("block size-full bg-base-200", className)} />;
-}

package/src/deck/tokens.ts

@@ -1,57 +0,0 @@
-import type { CSSProperties } from "react";
-import type { DeckSurface } from "../schemas/deck";
-
-export type { DeckSurface } from "../schemas/deck";
-
-/**
- * Deck ink is indirected through three custom properties so a Deck Component
- * never has to know what it is sitting on: a Layout declares the palette for
- * its surface, components read `--deck-ink` / `--deck-ink-muted` /
- * `--deck-accent`. Every value resolves to a portal brand token — nothing in
- * the deck runtime carries a literal color.
- */
-const SURFACE_INK: Record<DeckSurface, CSSProperties> = {
-  base: {
-    "--deck-ink": "var(--color-base-contrast)",
-    "--deck-ink-muted": "var(--color-base-contrast-light)",
-    "--deck-accent": "var(--color-primary)",
-  } as CSSProperties,
-  brand: {
-    "--deck-ink": "var(--color-on-primary)",
-    "--deck-ink-muted": "color-mix(in srgb, var(--color-on-primary) 72%, transparent)",
-    "--deck-accent": "var(--color-primary-contrast)",
-  } as CSSProperties,
-};
-
-export function surfaceInk(surface: DeckSurface): CSSProperties {
-  return SURFACE_INK[surface];
-}
-
-/** Tailwind background utility for a surface — both are brand tokens. */
-export const SURFACE_BACKGROUND: Record<DeckSurface, string> = {
-  base: "bg-base-accent",
-  brand: "bg-primary",
-};
-
-/**
- * Alignment travels the same way the ink does: a Layout declares how its slot
- * reads, components resolve `--deck-align` (an `align-self` value). Without it
- * a component would have to know whether it sits on a centered title card or in
- * a left-aligned column, which is precisely what the indirection prevents.
- */
-export type DeckAlign = "center" | "start";
-
-export function deckAlign(align: DeckAlign): CSSProperties {
-  return { "--deck-align": align } as CSSProperties;
-}
-
-/**
- * Elevation for media that lifts off the slide — grid tiles on hover, the video
- * play affordance. Declared as `--deck-*` custom properties rather than as
- * arbitrary Tailwind values so the shadow can be mixed from the site's ink
- * token instead of a literal rgba, and so a hover variant can reference it.
- */
-export const DECK_ELEVATION: CSSProperties = {
-  "--deck-lift": "0 26px 46px -18px color-mix(in srgb, var(--color-base-contrast) 45%, transparent)",
-  "--deck-lift-strong": "0 30px 60px -22px color-mix(in srgb, var(--color-base-contrast) 58%, transparent)",
-} as CSSProperties;

package/src/deck/useStageScale.ts

@@ -1,44 +0,0 @@
-import { useEffect, useLayoutEffect, useState, type RefObject } from "react";
-import { DECK_STAGE_HEIGHT, DECK_STAGE_WIDTH } from "../schemas/deck";
-
-/**
- * The first measurement has to happen before paint or the stage shows one frame
- * unscaled — a full-bleed 1600x900 flash on a laptop viewport. useLayoutEffect
- * warns when React renders on the server (Astro SSRs this island), and there is
- * nothing to measure there anyway, so fall back to useEffect off the browser.
- */
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-
-/**
- * The factor that fits the fixed 1600x900 stage inside `fitRef`'s box.
- *
- * `null` until the box has been measured — an unmeasured box (SSR, jsdom, a
- * hidden ancestor) reports 0x0, and scaling the stage to 0 would blank it. The
- * caller renders the stage unscaled until a real measurement arrives.
- */
-export function useStageScale(fitRef: RefObject<HTMLElement | null>): number | null {
-  const [scale, setScale] = useState<number | null>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    const el = fitRef.current;
-    if (!el) return;
-
-    const measure = () => {
-      const { clientWidth, clientHeight } = el;
-      if (!clientWidth || !clientHeight) return;
-      setScale(Math.min(clientWidth / DECK_STAGE_WIDTH, clientHeight / DECK_STAGE_HEIGHT));
-    };
-
-    measure();
-
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", measure);
-      return () => window.removeEventListener("resize", measure);
-    }
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [fitRef]);
-
-  return scale;
-}