@drawnagency/primitives 0.1.118 → 0.1.119

package/dist/chunk-TEOAKGZA.js

@@ -1,784 +0,0 @@
-import {
-  cn
-} from "./chunk-7EOSDFS3.js";
-import {
-  DECK_STAGE_HEIGHT,
-  DECK_STAGE_WIDTH
-} from "./chunk-VAYZJKVR.js";
-
-// src/deck/DeckPlayer.tsx
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useState as useState5 } from "react";
-
-// src/deck/media.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var NO_MEDIA = () => null;
-var DeckMediaContext = createContext(NO_MEDIA);
-function DeckMediaProvider({ resolve, children }) {
-  return /* @__PURE__ */ jsx(DeckMediaContext.Provider, { value: resolve, children });
-}
-function useDeckMedia(ref) {
-  return useContext(DeckMediaContext)(ref);
-}
-function useDeckMediaResolver() {
-  return useContext(DeckMediaContext);
-}
-function DeckMissingMedia({ className }) {
-  return /* @__PURE__ */ jsx("span", { "data-deck-media": "missing", "aria-hidden": "true", className: cn("block size-full bg-base-200", className) });
-}
-
-// src/deck/DeckStage.tsx
-import { useRef } from "react";
-
-// src/deck/useStageScale.ts
-import { useEffect, useLayoutEffect, useState } from "react";
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-function useStageScale(fitRef) {
-  const [scale, setScale] = useState(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;
-}
-
-// src/deck/DeckStage.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function DeckStage({ children, className }) {
-  const fitRef = useRef(null);
-  const scale = useStageScale(fitRef);
-  return /* @__PURE__ */ jsx2("div", { ref: fitRef, className: cn("relative min-h-0 w-full overflow-hidden", className), "data-deck-fit": "", children: /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-deck-stage": "",
-      "data-deck-scale": scale === null ? void 0 : 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
-    }
-  ) });
-}
-
-// src/deck/tokens.ts
-var SURFACE_INK = {
-  base: {
-    "--deck-ink": "var(--color-base-contrast)",
-    "--deck-ink-muted": "var(--color-base-contrast-light)",
-    "--deck-accent": "var(--color-primary)"
-  },
-  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)"
-  }
-};
-function surfaceInk(surface) {
-  return SURFACE_INK[surface];
-}
-var SURFACE_BACKGROUND = {
-  base: "bg-base-accent",
-  brand: "bg-primary"
-};
-function deckAlign(align) {
-  return { "--deck-align": align };
-}
-var DECK_ELEVATION = {
-  "--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)"
-};
-
-// src/deck/components/DeckImage.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function DeckImage({ content }) {
-  const asset = useDeckMedia(content.media);
-  return /* @__PURE__ */ jsxs("figure", { "data-deck-component": "image", className: "relative size-full overflow-hidden bg-base-200", children: [
-    asset === null ? /* @__PURE__ */ jsx3(DeckMissingMedia, {}) : /* @__PURE__ */ jsx3("img", { src: asset.src, alt: asset.alt, className: "size-full object-cover" }),
-    content.caption !== void 0 && /* @__PURE__ */ jsx3(
-      "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)]",
-        children: content.caption
-      }
-    )
-  ] });
-}
-
-// src/deck/components/DeckImageGrid.tsx
-import { useCallback, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
-
-// src/deck/flip.ts
-var TILE_SELECTOR = "[data-deck-tile]";
-function captureTileRects(grid) {
-  const rects = /* @__PURE__ */ new Map();
-  for (const tile of grid.querySelectorAll(TILE_SELECTOR)) rects.set(tile, tile.getBoundingClientRect());
-  return rects;
-}
-function stageScale(el) {
-  const raw = el.closest("[data-deck-stage]")?.getAttribute("data-deck-scale");
-  const value = raw === null || raw === void 0 ? Number.NaN : Number(raw);
-  return Number.isFinite(value) && value > 0 ? value : 1;
-}
-function playTileFlip(grid, before) {
-  const scale = stageScale(grid);
-  const moved = [];
-  for (const tile of grid.querySelectorAll(TILE_SELECTOR)) {
-    const first = before.get(tile);
-    if (!first) continue;
-    const last = tile.getBoundingClientRect();
-    if (!first.width || !last.width) continue;
-    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) < 2e-3) continue;
-    tile.style.transition = "none";
-    tile.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
-    moved.push(tile);
-  }
-  if (moved.length === 0) return;
-  void grid.offsetWidth;
-  for (const tile of moved) {
-    tile.style.transition = "";
-    tile.style.transform = "";
-  }
-}
-
-// src/deck/components/DeckImageGrid.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function columnsFor(count) {
-  return count <= 4 ? 2 : 3;
-}
-function tileRatio(asset) {
-  if (asset?.width === void 0 || asset.height === void 0 || asset.width <= 0) return 1;
-  return asset.height / asset.width;
-}
-function packMasonry(ratios, columns) {
-  const packed = Array.from({ length: columns }, () => []);
-  const filled = new Array(columns).fill(0);
-  ratios.forEach((ratio, index) => {
-    let target = 0;
-    for (let column = 1; column < columns; column++) {
-      if (filled[column] < filled[target]) target = column;
-    }
-    packed[target].push(index);
-    filled[target] += ratio;
-  });
-  return packed;
-}
-var TILE_BASE = "group relative block shrink-0 overflow-hidden bg-base-200 will-change-transform transition-[transform,box-shadow,opacity] duration-[380ms] ease-[cubic-bezier(0.2,0.75,0.2,1)] focus-visible:outline-2 focus-visible:outline-offset-[-6px] focus-visible:outline-[var(--color-primary)]";
-function DeckImageGrid({ content }) {
-  const [active, setActive] = useState2(null);
-  const gridRef = useRef2(null);
-  const pendingRects = useRef2(null);
-  const expanded = active !== null;
-  const resolve = useDeckMediaResolver();
-  const count = content.items.length;
-  const assets = useMemo(() => content.items.map((item) => resolve(item.media)), [content.items, resolve]);
-  const columns = columnsFor(count);
-  const packed = useMemo(() => packMasonry(assets.map(tileRatio), columns), [assets, columns]);
-  const transitionTo = useCallback((next) => {
-    const grid = gridRef.current;
-    if (grid) pendingRects.current = captureTileRects(grid);
-    setActive(next);
-  }, []);
-  useLayoutEffect2(() => {
-    const grid = gridRef.current;
-    const before = pendingRects.current;
-    pendingRects.current = null;
-    if (grid && before) playTileFlip(grid, before);
-  }, [active]);
-  useEffect2(() => {
-    setActive((prev) => prev === null || prev < count ? prev : null);
-  }, [count]);
-  useEffect2(() => {
-    if (!expanded) return;
-    const onKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      event.stopPropagation();
-      transitionTo(null);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [expanded, transitionTo]);
-  const close = useCallback(() => {
-    gridRef.current?.querySelector(`[data-deck-tile="${active}"]`)?.focus({ preventScroll: true });
-    transitionTo(null);
-  }, [active, transitionTo]);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref: gridRef,
-      "data-deck-component": "imageGrid",
-      "data-deck-grid-expanded": expanded ? "true" : "false",
-      "data-deck-grid-columns": columns,
-      style: DECK_ELEVATION,
-      className: "relative flex size-full gap-[14px] overflow-hidden",
-      children: [
-        packed.map((indices, column) => (
-          // `flex-1` rather than a width fraction: the columns have to share the
-          // gap between them, and equal flex bases divide what is left over.
-          /* @__PURE__ */ jsx4("div", { "data-deck-grid-column": column, className: "flex min-w-0 flex-1 flex-col gap-[14px]", children: indices.map((index) => /* @__PURE__ */ jsx4(
-            Tile,
-            {
-              item: content.items[index],
-              asset: assets[index],
-              index,
-              expanded,
-              active: index === active,
-              onActivate: () => transitionTo(index === active ? null : index)
-            },
-            index
-          )) }, column)
-        )),
-        expanded && /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            "data-deck-grid-close": "",
-            onClick: close,
-            "data-deck-surface": "brand",
-            style: surfaceInk("brand"),
-            className: "absolute top-[14px] right-[14px] z-[4] bg-primary px-[18px] py-[10px] text-[15px] font-semibold tracking-[0.12em] text-[var(--deck-ink)] uppercase",
-            children: "Close"
-          }
-        )
-      ]
-    }
-  );
-}
-function Tile({ item, asset, index, expanded, active, onActivate }) {
-  const label = item.caption ?? asset?.alt ?? `Image ${index + 1}`;
-  return /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      type: "button",
-      "data-deck-tile": index,
-      "data-deck-tile-active": active ? "true" : "false",
-      "aria-expanded": active,
-      "aria-label": active ? `Close ${label}` : `Expand ${label}`,
-      tabIndex: expanded && !active ? -1 : 0,
-      onClick: onActivate,
-      className: cn(
-        TILE_BASE,
-        // Every tile leaves the column flow when one is expanded, not only the
-        // active one: leaving the siblings in place would let the columns
-        // re-pack around the gap, which both reflows the tiles the lightbox is
-        // covering and moves the ones the FLIP is animating.
-        expanded ? "absolute inset-0 flex items-center justify-center" : "w-full",
-        expanded && !active && "pointer-events-none opacity-0",
-        // Transparent, not the tile's loading plate: an expanded frame is
-        // letterboxed inside the slot, and the field around it should read as
-        // the slide showing through rather than as a grey box drawn on top.
-        expanded && active && "z-[3] bg-transparent opacity-100",
-        !expanded && "cursor-pointer hover:z-[2] hover:scale-[1.035] hover:shadow-[var(--deck-lift)]"
-      ),
-      children: [
-        asset === null ? /* @__PURE__ */ jsx4(DeckMissingMedia, { className: active ? "size-full" : "aspect-square h-auto w-full" }) : /* @__PURE__ */ jsx4(
-          "img",
-          {
-            src: asset.src,
-            alt: "",
-            width: asset.width,
-            height: asset.height,
-            className: active ? "max-h-full max-w-full object-contain shadow-[var(--deck-lift-strong)]" : "block h-auto w-full"
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "aria-hidden": "true",
-            "data-deck-surface": "brand",
-            style: surfaceInk("brand"),
-            className: "absolute top-0 left-0 bg-primary px-[12px] py-[6px] text-[15px] font-bold tracking-[0.1em] text-[var(--deck-ink)] tabular-nums",
-            children: String(index + 1).padStart(2, "0")
-          }
-        ),
-        item.caption !== void 0 && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "data-deck-surface": "brand",
-            style: surfaceInk("brand"),
-            className: cn(
-              "absolute right-0 bottom-0 left-0 bg-primary text-left tracking-[0.04em] text-[var(--deck-ink)] transition-opacity duration-200",
-              active ? "px-[30px] py-[22px] text-[24px] opacity-100" : "px-[18px] py-[14px] text-[18px] opacity-0 group-hover:opacity-100"
-            ),
-            children: item.caption
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/deck/components/DeckRichText.tsx
-import { Fragment as Fragment2 } from "react";
-
-// src/deck/editing.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
-var DeckTextEditContext = createContext2(null);
-function DeckTextEditProvider({ editor, children }) {
-  return /* @__PURE__ */ jsx5(DeckTextEditContext.Provider, { value: editor, children });
-}
-function useDeckTextEditor() {
-  return useContext2(DeckTextEditContext);
-}
-function EditableText({ path, children }) {
-  const editor = useDeckTextEditor();
-  const [editing, setEditing] = useState3(false);
-  const enabled = editor !== null && path !== void 0 && editor.disabled !== true;
-  useEffect3(() => {
-    if (!enabled && editing) setEditing(false);
-  }, [enabled, editing]);
-  if (editor === null || path === void 0) return /* @__PURE__ */ jsx5(Fragment, { children });
-  if (editing && enabled) {
-    return /* @__PURE__ */ jsx5(
-      EditableField,
-      {
-        initial: children,
-        onCommit: (text) => {
-          setEditing(false);
-          const trimmed = text.trim();
-          if (trimmed !== "" && trimmed !== children) editor.onEditText(path, trimmed);
-        },
-        onCancel: () => setEditing(false)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx5(
-    "span",
-    {
-      role: "button",
-      tabIndex: enabled ? 0 : -1,
-      "aria-disabled": enabled ? void 0 : true,
-      "data-deck-editable": "",
-      onClick: enabled ? () => setEditing(true) : void 0,
-      onKeyDown: enabled ? (event) => {
-        if (event.key !== "Enter" && event.key !== " ") return;
-        event.preventDefault();
-        setEditing(true);
-      } : void 0,
-      className: enabled ? "cursor-text rounded-[var(--radius-inner)] decoration-dotted underline-offset-[6px] outline-none hover:underline focus-visible:underline" : "opacity-70",
-      children
-    }
-  );
-}
-function EditableField({
-  initial,
-  onCommit,
-  onCancel
-}) {
-  const ref = useRef3(null);
-  const cancelled = useRef3(false);
-  useEffect3(() => {
-    const element = ref.current;
-    if (!element) return;
-    element.textContent = initial;
-    element.focus();
-    const selection = window.getSelection?.();
-    if (selection) {
-      const range = document.createRange();
-      range.selectNodeContents(element);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    }
-  }, [initial]);
-  return /* @__PURE__ */ jsx5(
-    "span",
-    {
-      ref,
-      contentEditable: true,
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      "aria-label": "Edit text",
-      spellCheck: true,
-      "data-deck-editing": "",
-      onKeyDown: (event) => {
-        if (event.nativeEvent.isComposing) return;
-        if (event.key === "Enter") {
-          event.preventDefault();
-          event.currentTarget.blur();
-          return;
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          cancelled.current = true;
-          event.currentTarget.blur();
-        }
-      },
-      onPaste: (event) => {
-        event.preventDefault();
-        const text = event.clipboardData.getData("text/plain").replace(/\s+/g, " ").trim();
-        const doc = event.currentTarget.ownerDocument;
-        if (text !== "" && typeof doc.execCommand === "function") doc.execCommand("insertText", false, text);
-      },
-      onBlur: (event) => {
-        if (cancelled.current) {
-          cancelled.current = false;
-          onCancel();
-          return;
-        }
-        onCommit(event.currentTarget.textContent ?? "");
-      },
-      className: "rounded-[var(--radius-inner)] outline-2 outline-offset-2 outline-[var(--deck-accent)]"
-    }
-  );
-}
-
-// src/deck/components/DeckRichText.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function InlineText({ value, path }) {
-  if (typeof value === "string") return /* @__PURE__ */ jsx6(EditableText, { path, children: value });
-  return /* @__PURE__ */ jsx6(Fragment3, { children: value.map((span, i) => {
-    let node = /* @__PURE__ */ jsx6(EditableText, { path: path && { ...path, span: i }, children: span.text });
-    if (span.italic) node = /* @__PURE__ */ jsx6("em", { className: "italic", children: node });
-    if (span.bold) node = /* @__PURE__ */ jsx6("strong", { className: "font-semibold text-[var(--deck-ink)]", children: node });
-    return /* @__PURE__ */ jsx6(Fragment2, { children: node }, i);
-  }) });
-}
-function DeckRichText({ content, slot }) {
-  const { kicker, heading, subheading, paragraphs, bullets } = content;
-  const at = (field, line) => slot === void 0 ? void 0 : { slot, field, line };
-  return /* @__PURE__ */ jsxs3("div", { "data-deck-component": "richText", className: "flex flex-col gap-[28px]", children: [
-    kicker !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[18px]", children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-[22px] font-semibold tracking-[0.2em] text-[var(--deck-accent)] [text-transform:var(--nav-text-transform)]", children: /* @__PURE__ */ jsx6(EditableText, { path: at("kicker"), children: kicker }) }),
-      /* @__PURE__ */ jsx6(
-        "span",
-        {
-          "aria-hidden": "true",
-          style: { alignSelf: "var(--deck-align, start)" },
-          className: "h-[4px] w-[84px] rounded-[var(--radius-inner)] bg-[var(--deck-accent)]"
-        }
-      )
-    ] }),
-    heading !== void 0 && /* @__PURE__ */ jsx6("h1", { className: "font-heading text-[88px] leading-[1.06] font-medium tracking-[-0.015em] text-[var(--deck-ink)] [text-transform:var(--heading-text-transform)]", children: /* @__PURE__ */ jsx6(EditableText, { path: at("heading"), children: heading }) }),
-    subheading !== void 0 && /* @__PURE__ */ jsx6("h2", { className: "font-heading text-[38px] leading-[1.25] font-normal text-[var(--deck-ink-muted)] [text-transform:var(--subheading-text-transform)]", children: /* @__PURE__ */ jsx6(EditableText, { path: at("subheading"), children: subheading }) }),
-    paragraphs !== void 0 && paragraphs.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex max-w-[1000px] flex-col gap-[18px] self-[var(--deck-align,start)]", children: paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx6("p", { className: "text-[26px] leading-[1.6] text-[var(--deck-ink-muted)]", children: /* @__PURE__ */ jsx6(InlineText, { value: paragraph, path: at("paragraphs", i) }) }, i)) }),
-    bullets !== void 0 && bullets.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-[16px] self-[var(--deck-align,start)] text-left", children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-[18px] text-[26px] leading-[1.45] text-[var(--deck-ink)]", children: [
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "mt-[14px] size-[10px] shrink-0 rounded-full bg-[var(--deck-accent)]" }),
-      /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6(InlineText, { value: bullet, path: at("bullets", i) }) })
-    ] }, i)) })
-  ] });
-}
-
-// src/deck/components/DeckVideo.tsx
-import { Play } from "lucide-react";
-import { useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function DeckVideo({ content }) {
-  const asset = useDeckMedia(content.media);
-  const videoRef = useRef4(null);
-  const [playing, setPlaying] = useState4(false);
-  const start = () => {
-    setPlaying(true);
-    videoRef.current?.play()?.catch(() => void 0);
-  };
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      "data-deck-component": "video",
-      "data-deck-video-state": playing ? "playing" : "idle",
-      style: DECK_ELEVATION,
-      className: "relative size-full overflow-hidden bg-base-200",
-      children: [
-        asset === null ? /* @__PURE__ */ jsx7(DeckMissingMedia, {}) : /* @__PURE__ */ jsx7(
-          "video",
-          {
-            ref: videoRef,
-            src: asset.src,
-            poster: asset.poster,
-            preload: "none",
-            playsInline: true,
-            controls: playing,
-            onEnded: () => setPlaying(false),
-            className: "size-full object-cover"
-          }
-        ),
-        !playing && asset !== null && /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            "data-deck-video-play": "",
-            onClick: start,
-            "aria-label": content.title === void 0 ? "Play video" : `Play ${content.title}`,
-            className: "group absolute inset-0 grid cursor-pointer place-items-center",
-            children: /* @__PURE__ */ jsx7("span", { className: "grid size-[108px] place-items-center rounded-full bg-primary text-[var(--color-on-primary)] shadow-[var(--deck-lift)] transition-transform duration-200 group-hover:scale-105", children: /* @__PURE__ */ jsx7(Play, { "aria-hidden": "true", className: "ml-[6px] size-[44px] fill-current" }) })
-          }
-        ),
-        !playing && content.title !== void 0 && /* @__PURE__ */ jsx7(
-          "span",
-          {
-            "data-deck-surface": "brand",
-            style: surfaceInk("brand"),
-            className: "pointer-events-none 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)]",
-            children: content.title
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/deck/DeckComponentView.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function DeckComponentView({ component, slot }) {
-  switch (component.type) {
-    case "richText":
-      return /* @__PURE__ */ jsx8(DeckRichText, { content: component, slot });
-    case "image":
-      return /* @__PURE__ */ jsx8(DeckImage, { content: component });
-    case "imageGrid":
-      return /* @__PURE__ */ jsx8(DeckImageGrid, { content: component });
-    case "video":
-      return /* @__PURE__ */ jsx8(DeckVideo, { content: component });
-  }
-}
-
-// src/deck/layouts/CenteredTextLayout.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function CenteredTextLayout({ layout }) {
-  return /* @__PURE__ */ jsx9(
-    "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]
-      ),
-      children: /* @__PURE__ */ jsx9(DeckComponentView, { component: layout.content, slot: "content" })
-    }
-  );
-}
-
-// src/deck/layouts/ColumnSplitLayout.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var RATIO = {
-  "1-2": "grid-cols-[1fr_2fr]",
-  "2-1": "grid-cols-[2fr_1fr]"
-};
-var COLUMN_PADDING = {
-  richText: "flex flex-col justify-center px-[64px] py-[96px]",
-  image: "",
-  imageGrid: "p-[44px]",
-  video: "p-[44px]"
-};
-function ColumnSplitLayout({ layout }) {
-  const seam = layout.left.type === "richText" ? "left" : layout.right.type === "richText" ? "right" : null;
-  return /* @__PURE__ */ jsxs5(
-    "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),
-      children: [
-        /* @__PURE__ */ jsx10(Column, { component: layout.left, side: "left", rule: seam === "left" }),
-        /* @__PURE__ */ jsx10(Column, { component: layout.right, side: "right", rule: seam === "right" })
-      ]
-    }
-  );
-}
-function Column({ component, side, rule }) {
-  return /* @__PURE__ */ jsx10(
-    "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")
-      ),
-      children: /* @__PURE__ */ jsx10(DeckComponentView, { component, slot: side })
-    }
-  );
-}
-
-// src/deck/layouts/FullBleedImageLayout.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var PLACEMENT = {
-  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]"
-};
-function FullBleedImageLayout({ layout }) {
-  const asset = useDeckMedia(layout.media);
-  const { overlay } = layout;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      "data-deck-layout": "fullBleedImage",
-      "data-deck-surface": "base",
-      style: { ...surfaceInk("base"), ...deckAlign("start") },
-      className: cn("relative size-full overflow-hidden", SURFACE_BACKGROUND.base),
-      children: [
-        asset === null ? /* @__PURE__ */ jsx11(DeckMissingMedia, { className: "absolute inset-0" }) : /* @__PURE__ */ jsx11("img", { src: asset.src, alt: asset.alt, className: "absolute inset-0 size-full object-cover" }),
-        overlay !== void 0 && /* @__PURE__ */ jsx11(
-          "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]),
-            children: /* @__PURE__ */ jsx11(DeckRichText, { content: overlay.content, slot: "overlay" })
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/deck/DeckSlideView.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-function LayoutView({ slide }) {
-  const { layout } = slide;
-  switch (layout.type) {
-    case "centeredText":
-      return /* @__PURE__ */ jsx12(CenteredTextLayout, { layout });
-    case "fullBleedImage":
-      return /* @__PURE__ */ jsx12(FullBleedImageLayout, { layout });
-    case "columnSplit":
-      return /* @__PURE__ */ jsx12(ColumnSplitLayout, { layout });
-  }
-}
-function DeckSlideView({ slide }) {
-  return /* @__PURE__ */ jsx12("div", { "data-deck-slide": slide.id, className: "size-full", children: /* @__PURE__ */ jsx12(LayoutView, { slide }) }, slide.id);
-}
-
-// src/deck/DeckPlayer.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-function clamp(index, length) {
-  return Math.min(Math.max(index, 0), length - 1);
-}
-function isTypingTarget(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
-}
-function isActivatableTarget(target) {
-  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";
-}
-var 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";
-function DeckPlayer({ deck, initialSlide = 0, keyboard = true, resolveMedia, mediaAssets, className }) {
-  const total = deck.slides.length;
-  const [index, setIndex] = useState5(() => clamp(initialSlide, total));
-  const resolve = useMemo2(
-    () => resolveMedia ?? ((ref) => ref.kind === "portal" && mediaAssets !== void 0 && Object.hasOwn(mediaAssets, ref.id) ? mediaAssets[ref.id] : null),
-    [resolveMedia, mediaAssets]
-  );
-  const current = clamp(index, total);
-  const slide = deck.slides[current];
-  const goTo = useCallback2((next) => setIndex(clamp(next, total)), [total]);
-  const step = useCallback2(
-    (delta) => setIndex((prev) => clamp(clamp(prev, total) + delta, total)),
-    [total]
-  );
-  useEffect4(() => {
-    if (!keyboard) return;
-    const onKeyDown = (event) => {
-      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 /* @__PURE__ */ jsxs7("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), children: [
-    /* @__PURE__ */ jsx13(DeckStage, { className: "flex-1", children: /* @__PURE__ */ jsx13(DeckMediaProvider, { resolve, children: /* @__PURE__ */ jsx13(DeckSlideView, { slide }) }) }),
-    /* @__PURE__ */ jsxs7("nav", { "aria-label": `${deck.title} slides`, className: "flex shrink-0 items-center justify-center gap-4", children: [
-      /* @__PURE__ */ jsx13("button", { type: "button", className: NAV_BUTTON, onClick: () => step(-1), disabled: current === 0, "aria-label": "Previous slide", children: /* @__PURE__ */ jsx13(ChevronLeft, { className: "size-5", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsx13("ol", { className: "flex items-center gap-2", children: deck.slides.map((s, i) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          onClick: () => goTo(i),
-          "aria-current": i === current ? "true" : void 0,
-          "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"
-          )
-        }
-      ) }, s.id)) }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: NAV_BUTTON, onClick: () => step(1), disabled: current === total - 1, "aria-label": "Next slide", children: /* @__PURE__ */ jsx13(ChevronRight, { className: "size-5", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsxs7("p", { "aria-live": "polite", className: "ml-2 text-sm tabular-nums text-base-contrast-light", children: [
-        current + 1,
-        " / ",
-        total
-      ] })
-    ] })
-  ] });
-}
-
-export {
-  DeckMediaProvider,
-  useDeckMedia,
-  useDeckMediaResolver,
-  DeckMissingMedia,
-  useStageScale,
-  DeckStage,
-  surfaceInk,
-  SURFACE_BACKGROUND,
-  deckAlign,
-  DECK_ELEVATION,
-  DeckImage,
-  DeckImageGrid,
-  DeckTextEditProvider,
-  EditableText,
-  DeckRichText,
-  DeckVideo,
-  DeckComponentView,
-  CenteredTextLayout,
-  ColumnSplitLayout,
-  FullBleedImageLayout,
-  DeckSlideView,
-  DeckPlayer
-};