@bendyline/squisq-react 2.2.0 → 2.3.0

package/dist/chunk-TQH6RTTV.js

@@ -0,0 +1,789 @@
+import {
+  ImageLayer,
+  MapLayer,
+  MermaidLayer,
+  PathLayer,
+  ShapeLayer,
+  TableLayer,
+  TextLayer,
+  TreeLayer,
+  VideoLayer,
+  getTransitionClass
+} from "./chunk-XYS7HMP4.js";
+import {
+  useAutoSurface
+} from "./chunk-TT6ENR6T.js";
+import {
+  InlineVideoPlayer,
+  MarkdownRenderer
+} from "./chunk-D7KN4CRG.js";
+import {
+  useMediaUrl
+} from "./chunk-LR3AIGDD.js";
+
+// src/BlockRenderer.tsx
+import { useId } from "react";
+import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_VIEWPORT = {
+  width: 1920,
+  height: 1080
+};
+function BlockRenderer({
+  block,
+  blockTime,
+  basePath,
+  isEntering = false,
+  isExiting = false,
+  transition,
+  viewport = DEFAULT_VIEWPORT,
+  isPlaying,
+  animationsEnabled = true,
+  theme
+}) {
+  let transitionClass = "";
+  const transitionStyle = {};
+  const activeTransition = animationsEnabled ? transition ?? block.transition : void 0;
+  if (activeTransition && isEntering) {
+    transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
+  } else if (activeTransition && isExiting) {
+    transitionClass = getTransitionClass(activeTransition.type, false, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
+  }
+  const instanceId = useId().replace(/:/g, "");
+  const clipId = `vb-clip-${instanceId}-${block.id}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `block-svg ${transitionClass}`,
+      style: transitionStyle,
+      viewBox: `0 0 ${viewport.width} ${viewport.height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      overflow: "hidden",
+      "data-block-id": block.id,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx(
+          LayerRenderer,
+          {
+            layer,
+            basePath,
+            viewport,
+            blockTime,
+            isPlaying,
+            animationsEnabled,
+            theme
+          },
+          layer.id
+        )) })
+      ]
+    }
+  );
+}
+function LayerRenderer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  isPlaying,
+  animationsEnabled,
+  theme
+}) {
+  const renderedLayer = animationsEnabled || !layer.animation ? layer : { ...layer, animation: void 0 };
+  switch (renderedLayer.type) {
+    case "image":
+      return /* @__PURE__ */ jsx(
+        ImageLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime,
+          animationsEnabled
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(TextLayer, { layer: renderedLayer, viewport, blockTime });
+    case "shape":
+      return /* @__PURE__ */ jsx(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
+    case "path":
+      return /* @__PURE__ */ jsx(PathLayer, { layer: renderedLayer, viewport, blockTime });
+    case "map":
+      return /* @__PURE__ */ jsx(
+        MapLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ jsx(
+        VideoLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime,
+          isPlaying
+        }
+      );
+    case "table":
+      return /* @__PURE__ */ jsx(TableLayer, { layer: renderedLayer, viewport, blockTime });
+    case "tree":
+      return /* @__PURE__ */ jsx(TreeLayer, { layer: renderedLayer, viewport, blockTime });
+    case "mermaid":
+      return /* @__PURE__ */ jsx(
+        MermaidLayer,
+        {
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          theme
+        }
+      );
+    default:
+      console.warn(`Unknown layer type: ${renderedLayer.type}`);
+      return null;
+  }
+}
+
+// src/page/PageViewContext.ts
+import { createContext, useContext } from "react";
+import { DEFAULT_THEME, resolvePageStyle } from "@bendyline/squisq/doc";
+import { VIEWPORT_PRESETS } from "@bendyline/squisq/schemas";
+var defaultValue = {
+  theme: DEFAULT_THEME,
+  pageStyle: resolvePageStyle(DEFAULT_THEME),
+  basePath: "/",
+  viewport: VIEWPORT_PRESETS.landscape,
+  renderContext: { theme: DEFAULT_THEME },
+  animationsEnabled: true,
+  imageDisplayMode: "inline"
+};
+var PageViewContext = createContext(defaultValue);
+function usePageView() {
+  return useContext(PageViewContext);
+}
+
+// src/page/CanvasSection.tsx
+import { useMemo } from "react";
+import { materializeBlockLayers } from "@bendyline/squisq/doc";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function CanvasSection({ section }) {
+  const { renderContext, basePath, animationsEnabled, theme } = usePageView();
+  const media = section.slots.media;
+  const canvas = media?.type === "canvas" ? media : void 0;
+  const visualBlock = useMemo(() => {
+    if (!canvas) return null;
+    const { layers } = materializeBlockLayers(canvas.block, {
+      ...renderContext,
+      blockIndex: section.index
+    });
+    return { ...canvas.block, layers };
+  }, [canvas, renderContext, section.index]);
+  if (!canvas || !visualBlock) return null;
+  const aspect = canvas.aspect;
+  const frame = section.hints?.frame;
+  const frameClass = frame === "terminal" ? " squisq-page-canvas--terminal squisq-page-canvas--framed" : " squisq-page-canvas--framed";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: `squisq-page-canvas${frameClass}`,
+      style: {
+        aspectRatio: `${aspect.width} / ${aspect.height}`,
+        // Clamp tall canvases; derive the width cap from the aspect so a
+        // portrait viewport doesn't produce a page-height skyscraper.
+        maxHeight: "min(70vh, 720px)",
+        maxWidth: `calc(min(70vh, 720px) * ${(aspect.width / Math.max(1, aspect.height)).toFixed(4)})`
+      },
+      children: /* @__PURE__ */ jsx2(
+        BlockRenderer,
+        {
+          block: visualBlock,
+          blockTime: 0,
+          basePath,
+          viewport: { width: aspect.width, height: aspect.height },
+          animationsEnabled,
+          theme
+        }
+      )
+    }
+  );
+}
+
+// src/page/sections.tsx
+import { sanitizeUrl } from "@bendyline/squisq/markdown";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PageImg({
+  media,
+  eager,
+  className
+}) {
+  const { basePath } = usePageView();
+  const safeSrc = sanitizeUrl(media.src, "media");
+  const resolved = useMediaUrl(safeSrc ?? "", basePath);
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx3(
+    "img",
+    {
+      className,
+      src: resolved,
+      alt: media.alt,
+      loading: eager ? "eager" : "lazy",
+      decoding: "async",
+      width: media.width,
+      height: media.height
+    }
+  );
+}
+function BackdropVideo({ media }) {
+  const { basePath } = usePageView();
+  const safeSrc = sanitizeUrl(media.src, "media");
+  const resolvedSrc = useMediaUrl(safeSrc ?? "", basePath);
+  const safePoster = media.posterSrc ? sanitizeUrl(media.posterSrc, "media") : void 0;
+  const resolvedPoster = useMediaUrl(safePoster ?? "", basePath);
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx3(
+    "video",
+    {
+      src: resolvedSrc,
+      poster: safePoster ? resolvedPoster : void 0,
+      muted: true,
+      loop: true,
+      autoPlay: true,
+      playsInline: true,
+      preload: "metadata"
+    }
+  );
+}
+function Eyebrow({ section }) {
+  if (!section.slots.eyebrow) return null;
+  return /* @__PURE__ */ jsx3("span", { className: "squisq-page-eyebrow", children: section.slots.eyebrow });
+}
+function MediaCredit({ media }) {
+  if (!media || media.type === "canvas" || !media.credit) return null;
+  return /* @__PURE__ */ jsxs2("span", { className: "squisq-page-media-credit", children: [
+    media.credit,
+    media.license ? ` \xB7 ${media.license}` : ""
+  ] });
+}
+function HeroSection({ section }) {
+  const { pageStyle } = usePageView();
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const heroStyle = pageStyle.tokens.heroStyle;
+  const body = /* @__PURE__ */ jsxs2("div", { className: "squisq-page-hero-body", children: [
+    /* @__PURE__ */ jsx3(Eyebrow, { section }),
+    /* @__PURE__ */ jsx3("h1", { className: "squisq-page-hero-title", children: section.slots.title }),
+    section.slots.subtitle && /* @__PURE__ */ jsx3("p", { className: "squisq-page-hero-subtitle", children: section.slots.subtitle })
+  ] });
+  if (image && heroStyle === "split") {
+    return /* @__PURE__ */ jsxs2("div", { className: "squisq-page-hero-grid", children: [
+      body,
+      /* @__PURE__ */ jsxs2("div", { className: "squisq-page-hero-media squisq-page-media-frame", children: [
+        /* @__PURE__ */ jsx3(PageImg, { media: image, eager: true }),
+        /* @__PURE__ */ jsx3(MediaCredit, { media: image })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    image && section.background === "media" && /* @__PURE__ */ jsx3("div", { className: "squisq-page-hero-backdrop", children: /* @__PURE__ */ jsx3(PageImg, { media: image, eager: true }) }),
+    body
+  ] });
+}
+function BannerSection({ section }) {
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    image && section.background === "media" && /* @__PURE__ */ jsx3("div", { className: "squisq-page-hero-backdrop", children: /* @__PURE__ */ jsx3(PageImg, { media: image }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "squisq-page-banner-body", children: [
+      /* @__PURE__ */ jsx3(Eyebrow, { section }),
+      /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-banner-title", children: section.slots.title })
+    ] })
+  ] });
+}
+function StatBandSection({ section }) {
+  const items = section.slots.items ?? [];
+  const comparison = section.variant === "comparison";
+  const numericValues = items.map(
+    (item) => typeof item.value === "number" ? item.value : Number.parseFloat(String(item.value ?? ""))
+  );
+  const maxValue = Math.max(1, ...numericValues.filter((value) => Number.isFinite(value)));
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-stats", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: `squisq-page-stat${comparison ? " squisq-page-stat--bars" : ""}`, children: [
+      /* @__PURE__ */ jsx3("span", { className: "squisq-page-stat-value", children: item.value }),
+      comparison && Number.isFinite(numericValues[i]) && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "squisq-page-stat-bar",
+          style: { width: `${Math.max(4, numericValues[i] / maxValue * 100)}%` }
+        }
+      ),
+      item.title && /* @__PURE__ */ jsx3("span", { className: "squisq-page-stat-title", children: item.title }),
+      item.body && /* @__PURE__ */ jsx3("span", { className: "squisq-page-stat-body", children: item.body })
+    ] }, i)) }),
+    section.slots.meta && /* @__PURE__ */ jsx3("div", { className: "squisq-page-stat-meta", children: section.slots.meta })
+  ] });
+}
+function QuoteBandSection({ section }) {
+  const media = section.slots.media;
+  const backdrop = section.background === "media" && media && media.type !== "canvas";
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    backdrop && /* @__PURE__ */ jsx3("div", { className: "squisq-page-quote-backdrop", children: media.type === "image" ? /* @__PURE__ */ jsx3(PageImg, { media }) : /* @__PURE__ */ jsx3(BackdropVideo, { media }) }),
+    section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title", children: section.slots.title }),
+    /* @__PURE__ */ jsxs2("figure", { className: "squisq-page-quote-figure", style: { margin: 0 }, children: [
+      /* @__PURE__ */ jsx3("blockquote", { className: "squisq-page-quote", children: section.slots.body?.text }),
+      section.slots.attribution && /* @__PURE__ */ jsx3("figcaption", { className: "squisq-page-quote-attribution", children: section.slots.attribution })
+    ] })
+  ] });
+}
+function FeatureSplitSection({
+  section,
+  flip
+}) {
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const mediaRight = flip ? section.variant !== "media-right" : section.variant === "media-right";
+  return /* @__PURE__ */ jsxs2("div", { className: `squisq-page-feature${mediaRight ? " squisq-page-feature--media-right" : ""}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "squisq-page-feature-media squisq-page-media-frame", children: [
+      image && /* @__PURE__ */ jsx3(PageImg, { media: image }),
+      /* @__PURE__ */ jsx3(MediaCredit, { media: image })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "squisq-page-feature-text", children: [
+      /* @__PURE__ */ jsx3(Eyebrow, { section }),
+      section.slots.title && /* @__PURE__ */ jsx3("h3", { className: "squisq-page-section-title squisq-page-feature-title", children: section.slots.title }),
+      section.slots.body?.text && /* @__PURE__ */ jsx3("p", { className: "squisq-page-feature-body", children: section.slots.body.text })
+    ] })
+  ] });
+}
+function MediaFigureSection({ section }) {
+  const { basePath } = usePageView();
+  const media = section.slots.media;
+  if (!media || media.type === "canvas") return null;
+  return /* @__PURE__ */ jsxs2("figure", { className: "squisq-page-figure", children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-media-frame", children: media.type === "image" ? /* @__PURE__ */ jsx3(PageImg, { media }) : /* @__PURE__ */ jsx3(InlineVideoPlayer, { src: media.src, poster: media.posterSrc, basePath }) }),
+    (section.slots.caption || media.credit) && /* @__PURE__ */ jsxs2("figcaption", { children: [
+      section.slots.caption,
+      media.credit && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        section.slots.caption ? " " : "",
+        /* @__PURE__ */ jsx3(MediaCredit, { media })
+      ] })
+    ] })
+  ] });
+}
+function GallerySection({ section }) {
+  const items = section.slots.items ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { className: "squisq-page-gallery-empty", children: [
+      section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title", children: section.slots.title }),
+      section.slots.body?.text && /* @__PURE__ */ jsx3("p", { children: section.slots.body.text }),
+      section.slots.caption && /* @__PURE__ */ jsx3("div", { className: "squisq-page-gallery-caption", children: section.slots.caption })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-gallery", children: items.map(
+      (item, i) => item.media?.type === "image" ? /* @__PURE__ */ jsx3("div", { className: "squisq-page-media-frame", children: /* @__PURE__ */ jsx3(PageImg, { media: item.media }) }, i) : null
+    ) }),
+    section.slots.caption && /* @__PURE__ */ jsx3("div", { className: "squisq-page-gallery-caption", children: section.slots.caption })
+  ] });
+}
+function CalloutSection({ section }) {
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const framing = section.hints?.framing;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "squisq-page-callout",
+      "data-hint-framing": typeof framing === "string" ? framing : void 0,
+      children: [
+        image && /* @__PURE__ */ jsx3("div", { className: "squisq-page-media-frame", children: /* @__PURE__ */ jsx3(PageImg, { media: image }) }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3(Eyebrow, { section }),
+          section.slots.title && /* @__PURE__ */ jsx3("h3", { className: "squisq-page-callout-title", children: section.slots.title }),
+          section.slots.body?.text && /* @__PURE__ */ jsx3("p", { className: "squisq-page-callout-body", children: section.slots.body.text }),
+          section.slots.meta && /* @__PURE__ */ jsx3("div", { className: "squisq-page-callout-meta", children: section.slots.meta })
+        ] })
+      ]
+    }
+  );
+}
+function CardGridSection({ section }) {
+  const { theme } = usePageView();
+  const items = section.slots.items ?? [];
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-cards-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-cards", children: items.map((item, i) => {
+      const scheme = item.accentScheme ? theme.colorSchemes?.[item.accentScheme] : void 0;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "squisq-page-card",
+          style: scheme ? { "--squisq-page-card-accent": scheme.accent } : void 0,
+          children: [
+            item.title && /* @__PURE__ */ jsx3("h3", { className: "squisq-page-card-title", children: item.title }),
+            item.body && /* @__PURE__ */ jsx3("p", { className: "squisq-page-card-body", children: item.body })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+function ItemListSection({ section }) {
+  const items = section.slots.items ?? [];
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-items-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: item.body }, i)) })
+  ] });
+}
+function TimelineRailSection({ section }) {
+  const milestone = section.slots.milestone;
+  if (!milestone) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "squisq-page-milestone", "data-mood": milestone.mood, children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-milestone-date", children: milestone.date }),
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-milestone-rail", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs2("div", { className: "squisq-page-milestone-body", children: [
+      milestone.description,
+      milestone.footer && /* @__PURE__ */ jsx3("div", { className: "squisq-page-milestone-footer", children: milestone.footer })
+    ] })
+  ] });
+}
+function TableSection({ section }) {
+  const table = section.slots.table;
+  if (!table) return null;
+  const alignFor = (i) => table.align?.[i] ?? void 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-table-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx3("div", { className: "squisq-page-table-scroll", children: /* @__PURE__ */ jsxs2("table", { className: "squisq-page-table", children: [
+      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: table.headers.map((header, i) => /* @__PURE__ */ jsx3("th", { style: { textAlign: alignFor(i) }, children: header }, i)) }) }),
+      /* @__PURE__ */ jsx3("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx3("tr", { children: row.map((cell, c) => /* @__PURE__ */ jsx3("td", { style: { textAlign: alignFor(c) }, children: cell }, c)) }, r)) })
+    ] }) })
+  ] });
+}
+function ProseSection({ section, block }) {
+  const { theme } = usePageView();
+  const heading = section.slots.title !== void 0 && block?.sourceHeading ? /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: [block.sourceHeading], theme }) : null;
+  const bodyNodes = section.slots.body?.markdown ?? block?.contents;
+  return /* @__PURE__ */ jsxs2("div", { className: "squisq-page-prose", children: [
+    heading,
+    bodyNodes && bodyNodes.length > 0 && /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: bodyNodes, theme })
+  ] });
+}
+function FooterSection({ section }) {
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3(Eyebrow, { section }),
+    section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title", children: section.slots.title }),
+    section.slots.body?.text && /* @__PURE__ */ jsx3("p", { children: section.slots.body.text })
+  ] });
+}
+
+// src/page/PageSectionView.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function heroHasBackdrop(section, heroStyle) {
+  return section.kind === "hero" && section.background === "media" && section.slots.media?.type === "image" && heroStyle !== "split";
+}
+function accentVars(section) {
+  const scheme = section.accent.scheme;
+  if (!scheme) return void 0;
+  return {
+    "--squisq-page-accent": scheme.accent,
+    "--squisq-page-accent-bg": scheme.bg,
+    "--squisq-page-accent-text": scheme.text
+  };
+}
+function sectionBody(entry, featureFlip) {
+  const { section, block } = entry;
+  switch (section.kind) {
+    case "hero":
+      return /* @__PURE__ */ jsx4(HeroSection, { section, block });
+    case "banner":
+      return /* @__PURE__ */ jsx4(BannerSection, { section, block });
+    case "stat-band":
+      return /* @__PURE__ */ jsx4(StatBandSection, { section, block });
+    case "quote-band":
+      return /* @__PURE__ */ jsx4(QuoteBandSection, { section, block });
+    case "feature-split":
+      return /* @__PURE__ */ jsx4(FeatureSplitSection, { section, block, flip: featureFlip });
+    case "media-figure":
+      return /* @__PURE__ */ jsx4(MediaFigureSection, { section, block });
+    case "gallery":
+      return /* @__PURE__ */ jsx4(GallerySection, { section, block });
+    case "callout":
+      return /* @__PURE__ */ jsx4(CalloutSection, { section, block });
+    case "card-grid":
+      return /* @__PURE__ */ jsx4(CardGridSection, { section, block });
+    case "item-list":
+      return /* @__PURE__ */ jsx4(ItemListSection, { section, block });
+    case "timeline-rail":
+      return /* @__PURE__ */ jsx4(TimelineRailSection, { section, block });
+    case "table-section":
+      return /* @__PURE__ */ jsx4(TableSection, { section, block });
+    case "canvas-embed":
+      return /* @__PURE__ */ jsx4(CanvasSection, { section });
+    case "footer":
+      return /* @__PURE__ */ jsx4(FooterSection, { section, block });
+    case "prose":
+    default:
+      return /* @__PURE__ */ jsx4(ProseSection, { section, block });
+  }
+}
+function PageSectionView({ entry, featureFlip, isLeadProse }) {
+  const { pageStyle, theme } = usePageView();
+  const { section } = entry;
+  const richContent = section.slots.richContent?.markdown;
+  const classes = [
+    "squisq-linear-section",
+    "squisq-page-section",
+    `squisq-page-section--${section.kind}`,
+    `squisq-page-section--bg-${section.background}`,
+    `squisq-page-section--em-${section.emphasis}`
+  ];
+  if (section.variant) classes.push(`squisq-page-section--v-${section.variant}`);
+  if (heroHasBackdrop(section, pageStyle.tokens.heroStyle)) {
+    classes.push("squisq-page-section--hero-media");
+  }
+  const hintAttrs = {};
+  if (section.hints?.vignette) hintAttrs["data-hint-vignette"] = "";
+  if (section.hints?.dropCap && isLeadProse) hintAttrs["data-hint-drop-cap"] = "";
+  return /* @__PURE__ */ jsx4(
+    "section",
+    {
+      className: classes.join(" "),
+      "data-section-kind": section.kind,
+      "data-block-id": section.blockId,
+      "data-block-index": section.index,
+      "data-template": section.template,
+      style: accentVars(section),
+      ...hintAttrs,
+      children: /* @__PURE__ */ jsxs3("div", { className: "squisq-page-section-inner", children: [
+        sectionBody(entry, featureFlip),
+        richContent && richContent.length > 0 && /* @__PURE__ */ jsx4("div", { className: "squisq-page-rich-content", children: /* @__PURE__ */ jsx4(MarkdownRenderer, { nodes: richContent, theme }) })
+      ] })
+    }
+  );
+}
+
+// src/LinearDocView.tsx
+import { useEffect, useMemo as useMemo2, useRef } from "react";
+import {
+  applySurface,
+  resolveFontFamily
+} from "@bendyline/squisq/schemas";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
+import {
+  markdownToDoc,
+  materializePageSections,
+  resolvePageStyle as resolvePageStyle2,
+  buildPageCssVars,
+  pageStyleDataAttributes,
+  PAGE_BASE_CSS,
+  DEFAULT_THEME as DEFAULT_THEME2
+} from "@bendyline/squisq/doc";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function LinearDocView({
+  doc,
+  markdown,
+  basePath = "/",
+  viewport,
+  className,
+  theme,
+  surface,
+  animationsEnabled = true,
+  thinMargins = false,
+  imageDisplayMode = "inline",
+  globalKeyboardShortcuts = false,
+  showCover = true,
+  transformPage
+}) {
+  const scrollRef = useRef(null);
+  const activeViewport = viewport ?? VIEWPORT_PRESETS2.landscape;
+  const markdownDoc = useMemo2(
+    () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
+    [doc, markdown]
+  );
+  const resolvedDoc = doc ?? markdownDoc;
+  const autoSurface = useAutoSurface(surface === "auto");
+  const resolvedSurface = surface === "auto" ? autoSurface : surface;
+  const activeTheme = useMemo2(() => {
+    const baseTheme = theme ?? DEFAULT_THEME2;
+    return resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
+  }, [theme, resolvedSurface]);
+  const pageStyle = useMemo2(
+    () => resolvePageStyle2(activeTheme, transformPage),
+    [activeTheme, transformPage]
+  );
+  const sections = useMemo2(() => {
+    if (!resolvedDoc) return [];
+    return materializePageSections(resolvedDoc, {
+      theme: activeTheme,
+      viewport: activeViewport,
+      customTemplates: resolvedDoc.customTemplates,
+      cover: showCover !== false ? resolvedDoc.startBlock : false,
+      transformPage
+    });
+  }, [resolvedDoc, activeTheme, activeViewport, showCover, transformPage]);
+  const renderContext = useMemo2(
+    () => ({
+      theme: activeTheme,
+      viewport: activeViewport,
+      totalBlocks: sections.length,
+      persistentLayers: activeTheme.persistentLayers,
+      customTemplates: resolvedDoc?.customTemplates
+    }),
+    [activeTheme, activeViewport, sections.length, resolvedDoc?.customTemplates]
+  );
+  const pageContext = useMemo2(
+    () => ({
+      theme: activeTheme,
+      pageStyle,
+      basePath,
+      viewport: activeViewport,
+      renderContext,
+      animationsEnabled,
+      imageDisplayMode
+    }),
+    [
+      activeTheme,
+      pageStyle,
+      basePath,
+      activeViewport,
+      renderContext,
+      animationsEnabled,
+      imageDisplayMode
+    ]
+  );
+  const { featureOrdinals, leadProseIndex } = useMemo2(() => {
+    const ordinals = /* @__PURE__ */ new Map();
+    let featureCount = 0;
+    let firstProse = -1;
+    for (const entry of sections) {
+      if (entry.section.kind === "feature-split") {
+        ordinals.set(entry.section.index, featureCount++);
+      }
+      if (firstProse < 0 && entry.section.kind === "prose") {
+        firstProse = entry.section.index;
+      }
+    }
+    return { featureOrdinals: ordinals, leadProseIndex: firstProse };
+  }, [sections]);
+  useEffect(() => {
+    if (!globalKeyboardShortcuts) return;
+    const handleKeyDown = (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+        return;
+      }
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest(
+        'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="dialog"], [aria-modal="true"], .monaco-editor'
+      )) {
+        return;
+      }
+      const scroller = scrollRef.current;
+      if (!scroller) return;
+      event.preventDefault();
+      const distance = Math.max(64, Math.round(scroller.clientHeight * 0.12));
+      scroller.scrollBy({
+        top: event.key === "ArrowDown" ? distance : -distance,
+        behavior: "smooth"
+      });
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [globalKeyboardShortcuts]);
+  if (!resolvedDoc) {
+    return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: `squisq-linear squisq-linear--empty ${className || ""}` });
+  }
+  const bgColor = activeTheme.colors.background;
+  const textColor = activeTheme.colors.text;
+  const mutedColor = activeTheme.colors.textMuted;
+  const primaryColor = activeTheme.colors.primary;
+  const bodyFont = resolveFontFamily(activeTheme.typography.bodyFont, "system-ui, sans-serif");
+  const titleFont = resolveFontFamily(activeTheme.typography.titleFont, "Georgia, serif");
+  const lineHt = activeTheme.typography.lineHeight ?? 1.65;
+  const contentClasses = [
+    "squisq-linear-content",
+    "squisq-md",
+    "squisq-page",
+    thinMargins ? "squisq-linear-content--thin squisq-page--thin" : "",
+    imageDisplayMode === "thumbnail" ? "squisq-linear-content--thumbnail-images squisq-page--thumbnail-images" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: scrollRef,
+      className: `squisq-linear ${className || ""}`,
+      role: "region",
+      "aria-label": "Document page",
+      tabIndex: thinMargins ? void 0 : 0,
+      style: {
+        width: "100%",
+        // Thin-margins mode is the "embedded in someone else's container"
+        // signal (chat bubble, sidebar preview). Fit to content there so
+        // the host's bubble doesn't render a tall empty box when the doc
+        // is short. Standalone mode keeps height:100% for full-viewport
+        // scrolling.
+        height: thinMargins ? "auto" : "100%",
+        overflowY: thinMargins ? "visible" : "auto",
+        overflowX: "hidden",
+        background: bgColor,
+        // Container queries drive the responsive page layout — the page
+        // often lives inside editor panes / chat bubbles where viewport
+        // media queries lie about the available width.
+        containerType: "inline-size",
+        containerName: "squisq-page"
+      },
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: contentClasses,
+          ...pageStyleDataAttributes(pageStyle),
+          style: {
+            lineHeight: lineHt,
+            fontSize: "16px",
+            fontFamily: bodyFont,
+            color: textColor,
+            ...buildPageCssVars(activeTheme, pageStyle),
+            // Legacy custom properties kept for one release so host CSS
+            // and MarkdownRenderer content keyed on them keep working.
+            "--squisq-linear-title-font": titleFont,
+            "--squisq-linear-body-font": bodyFont,
+            "--squisq-linear-text": textColor,
+            "--squisq-linear-muted": mutedColor,
+            "--squisq-linear-primary": primaryColor,
+            "--squisq-linear-bg": bgColor
+          },
+          children: [
+            /* @__PURE__ */ jsx5("style", { "data-squisq-page": "", children: PAGE_BASE_CSS }),
+            /* @__PURE__ */ jsx5(PageViewContext.Provider, { value: pageContext, children: sections.map((entry) => {
+              const ordinal = featureOrdinals.get(entry.section.index) ?? 0;
+              const flip = !!entry.section.hints?.alternate && ordinal % 2 === 1;
+              return /* @__PURE__ */ jsx5(
+                PageSectionView,
+                {
+                  entry,
+                  featureFlip: flip,
+                  isLeadProse: entry.section.index === leadProseIndex
+                },
+                `${entry.section.blockId}-${entry.section.index}`
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  BlockRenderer,
+  PageViewContext,
+  usePageView,
+  CanvasSection,
+  PageSectionView,
+  LinearDocView
+};