@misoto22/folio 0.0.0 → 0.16.0

package/dist/website/Reading/Reading.js

@@ -0,0 +1,357 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiListUnordered, RiPlayFill, RiPauseFill } from "@remixicon/react";
+import { Button } from "../../components/Button/Button.js";
+import { StatusDot } from "../../components/StatusDot/StatusDot.js";
+import { Sheet, SheetContent, SheetTrigger } from "../../components/Sheet/Sheet.js";
+import { CodeBlock } from "../../components/CodeBlock/CodeBlock.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs/Tabs.js";
+import { cn } from "../../lib/cn.js";
+import { replaceSlotContent } from "../../lib/slot-content.js";
+function DetailMasthead({ backLink, title, dek, context, aside, actions, metadata = [], width = "page" }) {
+  const stacked = title.length <= 28 || typeof dek !== "string" || dek.length > 280 || Boolean(aside);
+  return /* @__PURE__ */ jsxs("header", { className: "folio-detail-masthead", "data-width": width, "data-stacked": stacked || void 0, "data-display": title.length <= 16 || void 0, children: [
+    backLink && /* @__PURE__ */ jsx("div", { className: "folio-detail-back", children: backLink }),
+    context && /* @__PURE__ */ jsx("p", { className: "folio-detail-context", children: context }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-detail-opening", "data-aside": Boolean(aside) || void 0, "data-stacked": stacked || void 0, children: [
+      aside ? /* @__PURE__ */ jsxs("div", { className: "folio-detail-copy", children: [
+        /* @__PURE__ */ jsx("h1", { children: title }),
+        dek && /* @__PURE__ */ jsx("p", { className: "folio-detail-dek", children: dek })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h1", { children: title }),
+        dek && /* @__PURE__ */ jsx("p", { className: "folio-detail-dek", children: dek })
+      ] }),
+      aside && /* @__PURE__ */ jsx("aside", { children: aside })
+    ] }),
+    (metadata.length > 0 || actions) && /* @__PURE__ */ jsxs("div", { className: "folio-detail-metabar", children: [
+      /* @__PURE__ */ jsx("dl", { children: metadata.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: item.label }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          item.live && /* @__PURE__ */ jsx(StatusDot, { size: "sm", pulse: false }),
+          item.dateTime ? /* @__PURE__ */ jsx("time", { dateTime: item.dateTime, children: item.value }) : item.value
+        ] })
+      ] }, item.label)) }),
+      actions && /* @__PURE__ */ jsx("div", { className: "folio-detail-actions", children: actions })
+    ] })
+  ] });
+}
+function ReadingLayout({ children, outline, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-reading-layout", className), ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-reading-body", children }),
+    outline
+  ] });
+}
+function ReadingSection({ title, caption, lead, compact, seamless, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("folio-reading-section", className), "data-compact": compact || void 0, "data-seamless": seamless || void 0, ...rest, children: [
+    (title || caption) && /* @__PURE__ */ jsxs("div", { className: "folio-reading-heading", children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      caption && /* @__PURE__ */ jsx("span", { children: caption })
+    ] }),
+    lead && /* @__PURE__ */ jsx("p", { className: "folio-reading-lead", children: lead }),
+    children
+  ] });
+}
+function ReadingLead({ children, muted, description }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-reading-lede", children: [
+    /* @__PURE__ */ jsxs("p", { children: [
+      children,
+      muted && /* @__PURE__ */ jsxs("span", { children: [
+        " ",
+        muted
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { children: description })
+  ] });
+}
+function RecordPager({ label, previous, next }) {
+  if (!previous && !next) return null;
+  const cell = (item, direction) => item ? /* @__PURE__ */ jsx(Slot, { className: "folio-record-pager-link", "data-direction": direction, children: replaceSlotContent(item.link, /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.media && /* @__PURE__ */ jsx("span", { className: "folio-record-pager-media", children: item.media }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: "folio-record-pager-direction", children: item.direction }),
+      " ",
+      /* @__PURE__ */ jsx("strong", { children: item.title })
+    ] })
+  ] })) }) : /* @__PURE__ */ jsx("span", {});
+  return /* @__PURE__ */ jsxs("nav", { className: "folio-record-pager", "aria-label": label, children: [
+    cell(previous, "prev"),
+    cell(next, "next")
+  ] });
+}
+const SELF_NUMBERED = /^\s*\d+[a-z]?\s*[.)]\s+/i;
+function isSelfNumbered(items) {
+  if (!items.length) return false;
+  const top = Math.min(...items.map((item) => item.level));
+  const headings = items.filter((item) => item.level === top);
+  return headings.length >= 2 && headings.filter((item) => SELF_NUMBERED.test(item.label)).length * 2 > headings.length;
+}
+function numberToc(items) {
+  const top = items.length ? Math.min(...items.map((item) => item.level)) : 0;
+  let major = 0;
+  let minor = 0;
+  return items.map((item) => item.level <= top ? (minor = 0, String(++major)) : `${major}.${++minor}`);
+}
+function TableOfContents({ items, label, numbering = "auto", onNavigate, expanded = false }) {
+  const [activeId, setActiveId] = useState(items[0]?.id ?? "");
+  const pinnedId = useRef(null);
+  const releaseTimer = useRef(void 0);
+  const numbers = numberToc(items);
+  const showNumbers = numbering === "auto" && !isSelfNumbered(items);
+  const top = items.length ? Math.min(...items.map((item) => item.level)) : 0;
+  useEffect(() => () => clearTimeout(releaseTimer.current), []);
+  useEffect(() => {
+    const sections = items.map((item) => document.getElementById(item.id)).filter((item) => Boolean(item));
+    const first = sections[0];
+    if (!first) return;
+    const update = () => {
+      let current = first;
+      for (const section of sections) if (section.getBoundingClientRect().top <= window.innerHeight * 0.28) current = section;
+      if (pinnedId.current && current.id !== pinnedId.current) return;
+      pinnedId.current = null;
+      setActiveId(current.id);
+    };
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    update();
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [items]);
+  const groups = [];
+  items.forEach((item, index) => {
+    const last = groups.at(-1);
+    if (item.level <= top || !last) groups.push({ item, index, subs: [] });
+    else last.subs.push({ item, index });
+  });
+  if (!items.length) return null;
+  const link = (item, index, isOpen) => /* @__PURE__ */ jsxs("a", { href: `#${item.id}`, "data-toc-id": item.id, "aria-current": activeId === item.id ? "true" : void 0, "aria-expanded": isOpen, onClick: (event) => {
+    pinnedId.current = item.id;
+    clearTimeout(releaseTimer.current);
+    releaseTimer.current = setTimeout(() => {
+      pinnedId.current = null;
+    }, 1200);
+    setActiveId(item.id);
+    if (onNavigate) {
+      event.preventDefault();
+      onNavigate(item.id);
+    }
+  }, children: [
+    showNumbers && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: numbers[index] }),
+    item.label
+  ] });
+  return /* @__PURE__ */ jsx("nav", { className: "folio-toc", "aria-label": label, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { children: label }),
+    /* @__PURE__ */ jsx("ul", { children: groups.map((group) => {
+      const open = expanded || group.item.id === activeId || group.subs.some(({ item }) => item.id === activeId);
+      return /* @__PURE__ */ jsxs("li", { children: [
+        link(group.item, group.index, group.subs.length ? open : void 0),
+        group.subs.length > 0 && open && /* @__PURE__ */ jsx("ul", { children: group.subs.map(({ item, index }) => /* @__PURE__ */ jsx("li", { children: link(item, index) }, item.id)) })
+      ] }, group.item.id);
+    }) })
+  ] }) });
+}
+function MobileOutline({ items, title, openLabel, closeLabel }) {
+  const [open, setOpen] = useState(false);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", iconOnly: true, "aria-label": openLabel, className: "folio-outline-trigger", children: /* @__PURE__ */ jsx(RiListUnordered, { size: 18, "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsx(SheetContent, { title, closeLabel, side: "bottom", className: "folio-outline-sheet", "aria-describedby": void 0, children: /* @__PURE__ */ jsx(TableOfContents, { items, label: title, expanded: true, onNavigate: (id) => {
+      setOpen(false);
+      requestAnimationFrame(() => {
+        const target = document.getElementById(id);
+        if (target) {
+          target.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "start" });
+          window.history.replaceState(null, "", `#${id}`);
+        }
+      });
+    } }) })
+  ] });
+}
+function ReadingProgress() {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    const update = () => {
+      const doc = document.documentElement;
+      const max = doc.scrollHeight - doc.clientHeight;
+      setProgress(max > 0 ? Math.min(100, Math.max(0, doc.scrollTop / max * 100)) : 0);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "folio-reading-progress", "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { style: { width: `${progress}%` } }) });
+}
+function AuthorPanel({ avatar, name, role, bio, links }) {
+  return /* @__PURE__ */ jsxs("aside", { className: "folio-author-panel", children: [
+    avatar && /* @__PURE__ */ jsx("div", { className: "folio-author-avatar", "aria-hidden": true, children: avatar }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { children: name }),
+      role && /* @__PURE__ */ jsx("div", { className: "folio-author-role", children: role }),
+      bio && /* @__PURE__ */ jsx("p", { children: bio }),
+      links && /* @__PURE__ */ jsx("div", { className: "folio-author-links", children: links })
+    ] })
+  ] });
+}
+function ReadingFigure({ media, captionStart, captionEnd, width = "page", ratio = "16 / 8", fit = "cover" }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-reading-figure", "data-width": width, "data-fit": fit, children: [
+    /* @__PURE__ */ jsx("div", { style: { aspectRatio: ratio }, children: media }),
+    (captionStart || captionEnd) && /* @__PURE__ */ jsxs("figcaption", { children: [
+      /* @__PURE__ */ jsx("span", { children: captionStart }),
+      /* @__PURE__ */ jsx("span", { children: captionEnd })
+    ] })
+  ] });
+}
+function MediaPlayback({ src, poster, label, playLabel, pauseLabel, fallback }) {
+  const [reduceMotion, setReduceMotion] = useState(true);
+  const [playing, setPlaying] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduceMotion(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  if (reduceMotion) return fallback;
+  return /* @__PURE__ */ jsxs("div", { className: "folio-media-playback", children: [
+    /* @__PURE__ */ jsx("video", { ref, src, poster, "aria-label": label, autoPlay: true, muted: true, loop: true, playsInline: true, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", iconOnly: true, "aria-label": playing ? pauseLabel : playLabel, onClick: () => {
+      if (playing) ref.current?.pause();
+      else void ref.current?.play().catch(() => {
+      });
+    }, children: playing ? /* @__PURE__ */ jsx(RiPauseFill, { size: 18, "aria-hidden": true }) : /* @__PURE__ */ jsx(RiPlayFill, { size: 18, "aria-hidden": true }) })
+  ] });
+}
+function ActionBand({ title, description, actions, eyebrow }) {
+  return /* @__PURE__ */ jsxs("section", { className: "folio-action-band", children: [
+    eyebrow && /* @__PURE__ */ jsx("span", { className: "folio-action-band__eyebrow", children: eyebrow }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-action-band__copy", children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "folio-action-band__actions", children: actions })
+  ] });
+}
+function FeaturePairs({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-feature-pairs", children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { children: [
+    item.label && /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.title && /* @__PURE__ */ jsx("h3", { children: item.title }),
+    /* @__PURE__ */ jsx("div", { className: "folio-feature-description", children: item.description })
+  ] }, item.id ?? index)) });
+}
+function DevicePreview({ kind, label, media, caption }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-device-preview", "data-kind": kind, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      kind === "browser" && /* @__PURE__ */ jsxs("div", { className: "folio-browser-bar", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u25CF \u25CF \u25CF" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "folio-device-screen", children: media })
+    ] }),
+    caption && /* @__PURE__ */ jsx("figcaption", { children: caption })
+  ] });
+}
+function PreviewPair({ desktop, mobile }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-preview-pair", "data-mobile": Boolean(mobile) || void 0, children: [
+    desktop,
+    mobile
+  ] });
+}
+function CommandTabs({ label, tabs, copyLabel, copiedLabel, footer }) {
+  const first = tabs[0];
+  if (!first) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "folio-command-tabs", children: [
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: first.id, children: [
+      /* @__PURE__ */ jsx(TabsList, { "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, children: tab.name }, tab.id)) }),
+      tabs.map((tab) => /* @__PURE__ */ jsxs(TabsContent, { value: tab.id, children: [
+        tab.commands.map((command) => /* @__PURE__ */ jsx(CodeBlock, { code: command, copyLabel, copiedLabel }, command)),
+        tab.then && /* @__PURE__ */ jsx("p", { children: tab.then }),
+        tab.note && /* @__PURE__ */ jsx("p", { children: tab.note }),
+        tab.link
+      ] }, tab.id))
+    ] }),
+    footer && /* @__PURE__ */ jsx("div", { className: "folio-command-footer", children: footer })
+  ] });
+}
+function ReadingSurface({ numbered, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-reading-surface", className), "data-folio-article": true, "data-numbered": numbered || void 0, ...rest, children });
+}
+function ReadingForm({ inline, className, ...props }) {
+  return /* @__PURE__ */ jsx("form", { className: cn("folio-reading-form", className), "data-inline": inline || void 0, ...props });
+}
+function ArchitectureColumns({ columns, foundation }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-architecture-columns", children: [
+    /* @__PURE__ */ jsx("div", { children: columns.map((column, index) => /* @__PURE__ */ jsxs("div", { "data-connected": Boolean(foundation?.length && column.connected) || void 0, children: [
+      /* @__PURE__ */ jsx("h3", { children: column.title }),
+      column.nodes.map((node) => /* @__PURE__ */ jsxs("div", { className: "folio-architecture-node", children: [
+        /* @__PURE__ */ jsx("strong", { children: node.title }),
+        node.description && /* @__PURE__ */ jsx("span", { children: node.description })
+      ] }, node.id))
+    ] }, index)) }),
+    foundation && foundation.length > 0 && /* @__PURE__ */ jsx("div", { className: "folio-architecture-foundation", children: foundation.map((node) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("strong", { children: node.title }),
+      node.description && /* @__PURE__ */ jsx("span", { children: node.description })
+    ] }, node.id)) })
+  ] });
+}
+function TokenLine({ items, label, separator = "\xB7" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-token-line", "data-flow": separator !== "\xB7" || void 0, children: [
+    label && /* @__PURE__ */ jsx("span", { children: label }),
+    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": typeof label === "string" ? label : void 0, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "folio-token-separator", children: separator }),
+      item.icon && /* @__PURE__ */ jsx("span", { className: "folio-token-icon", "aria-hidden": true, children: item.icon }),
+      item.strong ? /* @__PURE__ */ jsx("strong", { children: item.label }) : item.label
+    ] }, index)) })
+  ] });
+}
+function ContentFigure({ children, caption, wide }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-content-figure", "data-wide": wide || void 0, children: [
+    children,
+    caption && /* @__PURE__ */ jsx("figcaption", { children: caption })
+  ] });
+}
+function ReadingPage({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("folio-reading-page", className), ...props, children });
+}
+function CommandSnippet({ code, pieces, copyLabel, copiedLabel, className }) {
+  const escape = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  const highlighted = pieces?.map((piece) => piece.text).join("") === code ? pieces : void 0;
+  const html = highlighted ? `<pre><code>${highlighted.map((piece) => `<span class="folio-command-${piece.emphasis ?? "normal"}">${escape(piece.text)}</span>`).join("")}</code></pre>` : void 0;
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-command-snippet", className), children: /* @__PURE__ */ jsx(CodeBlock, { code, html, copyLabel, copiedLabel }) });
+}
+export {
+  ActionBand,
+  ArchitectureColumns,
+  AuthorPanel,
+  CommandSnippet,
+  CommandTabs,
+  ContentFigure,
+  DetailMasthead,
+  DevicePreview,
+  FeaturePairs,
+  MediaPlayback,
+  MobileOutline,
+  PreviewPair,
+  ReadingFigure,
+  ReadingForm,
+  ReadingLayout,
+  ReadingLead,
+  ReadingPage,
+  ReadingProgress,
+  ReadingSection,
+  ReadingSurface,
+  RecordPager,
+  TableOfContents,
+  TokenLine,
+  isSelfNumbered,
+  numberToc
+};
+//# sourceMappingURL=Reading.js.map

package/dist/website/Reading/Reading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Reading/Reading.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { RiListUnordered, RiPlayFill, RiPauseFill } from '@remixicon/react'\nimport { Button } from '../../components/Button/Button'\nimport { StatusDot } from '../../components/StatusDot/StatusDot'\nimport { Sheet, SheetContent, SheetTrigger } from '../../components/Sheet/Sheet'\nimport { CodeBlock } from '../../components/CodeBlock/CodeBlock'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/Tabs/Tabs'\nimport { cn } from '../../lib/cn'\nimport { replaceSlotContent } from '../../lib/slot-content'\nimport type { CollectionLink } from '../Collection/Collection'\n\nexport interface ReadingMetadataItem { label: string; value: ReactNode; live?: boolean; dateTime?: string }\nexport interface DetailMastheadProps { backLink?: ReactNode; title: string; dek?: ReactNode; context?: ReactNode; aside?: ReactNode; actions?: ReactNode; metadata?: ReadingMetadataItem[]; width?: 'page' | 'fill' }\nexport function DetailMasthead({ backLink, title, dek, context, aside, actions, metadata = [], width = 'page' }: DetailMastheadProps) {\n  const stacked = title.length <= 28 || typeof dek !== 'string' || dek.length > 280 || Boolean(aside)\n  return <header className=\"folio-detail-masthead\" data-width={width} data-stacked={stacked || undefined} data-display={title.length <= 16 || undefined}>\n    {backLink && <div className=\"folio-detail-back\">{backLink}</div>}{context && <p className=\"folio-detail-context\">{context}</p>}\n    <div className=\"folio-detail-opening\" data-aside={Boolean(aside) || undefined} data-stacked={stacked || undefined}>{aside ? <div className=\"folio-detail-copy\"><h1>{title}</h1>{dek && <p className=\"folio-detail-dek\">{dek}</p>}</div> : <><h1>{title}</h1>{dek && <p className=\"folio-detail-dek\">{dek}</p>}</>}{aside && <aside>{aside}</aside>}</div>\n    {(metadata.length > 0 || actions) && <div className=\"folio-detail-metabar\"><dl>{metadata.map((item) => <div key={item.label}><dt>{item.label}</dt><dd>{item.live && <StatusDot size=\"sm\" pulse={false} />}{item.dateTime ? <time dateTime={item.dateTime}>{item.value}</time> : item.value}</dd></div>)}</dl>{actions && <div className=\"folio-detail-actions\">{actions}</div>}</div>}\n  </header>\n}\nexport interface ReadingLayoutProps extends HTMLAttributes<HTMLDivElement> { outline?: ReactNode }\nexport function ReadingLayout({ children, outline, className, ...rest }: ReadingLayoutProps) { return <div className={cn('folio-reading-layout', className)} {...rest}><div className=\"folio-reading-body\">{children}</div>{outline}</div> }\nexport interface ReadingSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> { title?: ReactNode; caption?: ReactNode; lead?: ReactNode; compact?: boolean; seamless?: boolean }\n/** `seamless` lets a structured child continue directly from the section rule without drawing a second seam. */\nexport function ReadingSection({ title, caption, lead, compact, seamless, children, className, ...rest }: ReadingSectionProps) {\n  return <section className={cn('folio-reading-section', className)} data-compact={compact || undefined} data-seamless={seamless || undefined} {...rest}>{(title || caption) && <div className=\"folio-reading-heading\"><h2>{title}</h2>{caption && <span>{caption}</span>}</div>}{lead && <p className=\"folio-reading-lead\">{lead}</p>}{children}</section>\n}\nexport interface ReadingLeadProps { children: ReactNode; muted?: ReactNode; description?: ReactNode }\nexport function ReadingLead({ children, muted, description }: ReadingLeadProps) { return <div className=\"folio-reading-lede\"><p>{children}{muted && <span> {muted}</span>}</p>{description && <p>{description}</p>}</div> }\nexport interface ReadingPagerItem { link: CollectionLink; direction: ReactNode; title: ReactNode; media?: ReactNode }\nexport interface RecordPagerProps { label: string; previous?: ReadingPagerItem; next?: ReadingPagerItem }\nexport function RecordPager({ label, previous, next }: RecordPagerProps) {\n  if (!previous && !next) return null\n  const cell = (item: ReadingPagerItem | undefined, direction: 'prev' | 'next') => item ? <Slot className=\"folio-record-pager-link\" data-direction={direction}>{replaceSlotContent(item.link, <>{item.media && <span className=\"folio-record-pager-media\">{item.media}</span>}<span><span className=\"folio-record-pager-direction\">{item.direction}</span>{' '}<strong>{item.title}</strong></span></>)}</Slot> : <span />\n  return <nav className=\"folio-record-pager\" aria-label={label}>{cell(previous, 'prev')}{cell(next, 'next')}</nav>\n}\nexport interface OutlineItem { id: string; label: string; level: number }\nconst SELF_NUMBERED = /^\\s*\\d+[a-z]?\\s*[.)]\\s+/i\nexport function isSelfNumbered(items: OutlineItem[]): boolean {\n  if (!items.length) return false\n  const top = Math.min(...items.map((item) => item.level))\n  const headings = items.filter((item) => item.level === top)\n  return headings.length >= 2 && headings.filter((item) => SELF_NUMBERED.test(item.label)).length * 2 > headings.length\n}\nexport function numberToc(items: OutlineItem[]): string[] {\n  const top = items.length ? Math.min(...items.map((item) => item.level)) : 0\n  let major = 0; let minor = 0\n  return items.map((item) => item.level <= top ? (minor = 0, String(++major)) : `${major}.${++minor}`)\n}\nexport interface TableOfContentsProps { items: OutlineItem[]; label: string; numbering?: 'auto' | 'none'; onNavigate?: (id: string) => void; expanded?: boolean }\nexport function TableOfContents({ items, label, numbering = 'auto', onNavigate, expanded = false }: TableOfContentsProps) {\n  const [activeId, setActiveId] = useState(items[0]?.id ?? '')\n  const pinnedId = useRef<string | null>(null)\n  const releaseTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const numbers = numberToc(items)\n  const showNumbers = numbering === 'auto' && !isSelfNumbered(items)\n  const top = items.length ? Math.min(...items.map((item) => item.level)) : 0\n  useEffect(() => () => clearTimeout(releaseTimer.current), [])\n  useEffect(() => {\n    const sections = items.map((item) => document.getElementById(item.id)).filter((item): item is HTMLElement => Boolean(item))\n    const first = sections[0]\n    if (!first) return\n    const update = () => {\n      let current = first\n      for (const section of sections) if (section.getBoundingClientRect().top <= window.innerHeight * .28) current = section\n      if (pinnedId.current && current.id !== pinnedId.current) return\n      pinnedId.current = null\n      setActiveId(current.id)\n    }\n    window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); update()\n    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update) }\n  }, [items])\n  const groups: { item: OutlineItem; index: number; subs: { item: OutlineItem; index: number }[] }[] = []\n  items.forEach((item, index) => { const last = groups.at(-1); if (item.level <= top || !last) groups.push({ item, index, subs: [] }); else last.subs.push({ item, index }) })\n  if (!items.length) return null\n  const link = (item: OutlineItem, index: number, isOpen?: boolean) => <a href={`#${item.id}`} data-toc-id={item.id} aria-current={activeId === item.id ? 'true' : undefined} aria-expanded={isOpen} onClick={(event) => {\n    pinnedId.current = item.id; clearTimeout(releaseTimer.current); releaseTimer.current = setTimeout(() => { pinnedId.current = null }, 1200); setActiveId(item.id)\n    if (onNavigate) { event.preventDefault(); onNavigate(item.id) }\n  }}>{showNumbers && <span aria-hidden>{numbers[index]}</span>}{item.label}</a>\n  return <nav className=\"folio-toc\" aria-label={label}><div><p>{label}</p><ul>{groups.map((group) => {\n    const open = expanded || group.item.id === activeId || group.subs.some(({ item }) => item.id === activeId)\n    return <li key={group.item.id}>{link(group.item, group.index, group.subs.length ? open : undefined)}{group.subs.length > 0 && open && <ul>{group.subs.map(({ item, index }) => <li key={item.id}>{link(item, index)}</li>)}</ul>}</li>\n  })}</ul></div></nav>\n}\nexport interface MobileOutlineProps { items: OutlineItem[]; title: string; openLabel: string; closeLabel: string }\nexport function MobileOutline({ items, title, openLabel, closeLabel }: MobileOutlineProps) {\n  const [open, setOpen] = useState(false)\n  if (!items.length) return null\n  return <Sheet open={open} onOpenChange={setOpen}><SheetTrigger asChild><Button variant=\"secondary\" iconOnly aria-label={openLabel} className=\"folio-outline-trigger\"><RiListUnordered size={18} aria-hidden=\"true\" /></Button></SheetTrigger><SheetContent title={title} closeLabel={closeLabel} side=\"bottom\" className=\"folio-outline-sheet\" aria-describedby={undefined}><TableOfContents items={items} label={title} expanded onNavigate={(id) => {\n    setOpen(false)\n    requestAnimationFrame(() => { const target = document.getElementById(id); if (target) { target.scrollIntoView({ behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth', block: 'start' }); window.history.replaceState(null, '', `#${id}`) } })\n  }} /></SheetContent></Sheet>\n}\nexport function ReadingProgress() {\n  const [progress, setProgress] = useState(0)\n  useEffect(() => {\n    const update = () => { const doc = document.documentElement; const max = doc.scrollHeight - doc.clientHeight; setProgress(max > 0 ? Math.min(100, Math.max(0, doc.scrollTop / max * 100)) : 0) }\n    update(); window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update)\n    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update) }\n  }, [])\n  return <div className=\"folio-reading-progress\" aria-hidden><div style={{ width: `${progress}%` }} /></div>\n}\nexport interface AuthorPanelProps { avatar?: ReactNode; name: string; role?: ReactNode; bio?: ReactNode; links?: ReactNode }\nexport function AuthorPanel({ avatar, name, role, bio, links }: AuthorPanelProps) { return <aside className=\"folio-author-panel\">{avatar && <div className=\"folio-author-avatar\" aria-hidden>{avatar}</div>}<div><h2>{name}</h2>{role && <div className=\"folio-author-role\">{role}</div>}{bio && <p>{bio}</p>}{links && <div className=\"folio-author-links\">{links}</div>}</div></aside> }\nexport interface ReadingFigureProps { media: ReactNode; captionStart?: ReactNode; captionEnd?: ReactNode; width?: 'page' | 'fill'; ratio?: string; fit?: 'cover' | 'contain' }\n/** A reading image can preserve its source framing with `fit=\"contain\"`, rather than silently cropping it to a house ratio. */\nexport function ReadingFigure({ media, captionStart, captionEnd, width = 'page', ratio = '16 / 8', fit = 'cover' }: ReadingFigureProps) { return <figure className=\"folio-reading-figure\" data-width={width} data-fit={fit}><div style={{ aspectRatio: ratio }}>{media}</div>{(captionStart || captionEnd) && <figcaption><span>{captionStart}</span><span>{captionEnd}</span></figcaption>}</figure> }\nexport interface MediaPlaybackProps { src: string; poster?: string; label: string; playLabel: string; pauseLabel: string; fallback: ReactNode }\nexport function MediaPlayback({ src, poster, label, playLabel, pauseLabel, fallback }: MediaPlaybackProps) {\n  const [reduceMotion, setReduceMotion] = useState(true)\n  const [playing, setPlaying] = useState(false)\n  const ref = useRef<HTMLVideoElement>(null)\n  useEffect(() => { if (typeof window.matchMedia !== 'function') return; const query = window.matchMedia('(prefers-reduced-motion: reduce)'); const update = () => setReduceMotion(query.matches); update(); query.addEventListener('change', update); return () => query.removeEventListener('change', update) }, [])\n  if (reduceMotion) return fallback\n  return <div className=\"folio-media-playback\"><video ref={ref} src={src} poster={poster} aria-label={label} autoPlay muted loop playsInline preload=\"metadata\" onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} /><Button type=\"button\" variant=\"secondary\" iconOnly aria-label={playing ? pauseLabel : playLabel} onClick={() => { if (playing) ref.current?.pause(); else void ref.current?.play().catch(() => {}) }}>{playing ? <RiPauseFill size={18} aria-hidden /> : <RiPlayFill size={18} aria-hidden />}</Button></div>\n}\nexport interface ActionBandProps { title: ReactNode; description?: ReactNode; actions?: ReactNode; eyebrow?: ReactNode }\n/** A terminal project invitation with one strong entry action and quieter supporting actions. */\nexport function ActionBand({ title, description, actions, eyebrow }: ActionBandProps) { return <section className=\"folio-action-band\">{eyebrow && <span className=\"folio-action-band__eyebrow\">{eyebrow}</span>}<div className=\"folio-action-band__copy\"><h2>{title}</h2>{description && <p>{description}</p>}</div>{actions && <div className=\"folio-action-band__actions\">{actions}</div>}</section> }\nexport interface FeaturePairsProps { items: { id?: string; label?: ReactNode; title?: ReactNode; description: ReactNode }[] }\nexport function FeaturePairs({ items }: FeaturePairsProps) { return <div className=\"folio-feature-pairs\">{items.map((item, index) => <div key={item.id ?? index}>{item.label && <span>{item.label}</span>}{item.title && <h3>{item.title}</h3>}<div className=\"folio-feature-description\">{item.description}</div></div>)}</div> }\nexport interface DevicePreviewProps { kind: 'browser' | 'phone'; label?: string; media: ReactNode; caption?: ReactNode }\nexport function DevicePreview({ kind, label, media, caption }: DevicePreviewProps) { return <figure className=\"folio-device-preview\" data-kind={kind}><div>{kind === 'browser' && <div className=\"folio-browser-bar\"><span aria-hidden>● ● ●</span><span>{label}</span></div>}<div className=\"folio-device-screen\">{media}</div></div>{caption && <figcaption>{caption}</figcaption>}</figure> }\nexport interface PreviewPairProps { desktop: ReactNode; mobile?: ReactNode }\nexport function PreviewPair({ desktop, mobile }: PreviewPairProps) { return <div className=\"folio-preview-pair\" data-mobile={Boolean(mobile) || undefined}>{desktop}{mobile}</div> }\nexport interface CommandTab { id: string; name: string; commands: string[]; then?: ReactNode; note?: ReactNode; link?: ReactNode }\nexport interface CommandTabsProps { label: string; tabs: CommandTab[]; copyLabel: string; copiedLabel: string; footer?: ReactNode }\nexport function CommandTabs({ label, tabs, copyLabel, copiedLabel, footer }: CommandTabsProps) {\n  const first = tabs[0]\n  if (!first) return null\n  return <div className=\"folio-command-tabs\"><Tabs defaultValue={first.id}><TabsList aria-label={label}>{tabs.map((tab) => <TabsTrigger value={tab.id} key={tab.id}>{tab.name}</TabsTrigger>)}</TabsList>{tabs.map((tab) => <TabsContent value={tab.id} key={tab.id}>{tab.commands.map((command) => <CodeBlock key={command} code={command} copyLabel={copyLabel} copiedLabel={copiedLabel} />)}{tab.then && <p>{tab.then}</p>}{tab.note && <p>{tab.note}</p>}{tab.link}</TabsContent>)}</Tabs>{footer && <div className=\"folio-command-footer\">{footer}</div>}</div>\n}\nexport interface ReadingSurfaceProps extends HTMLAttributes<HTMLDivElement> { numbered?: boolean }\nexport function ReadingSurface({ numbered, children, className, ...rest }: ReadingSurfaceProps) { return <div className={cn('folio-reading-surface', className)} data-folio-article data-numbered={numbered || undefined} {...rest}>{children}</div> }\nexport interface ReadingFormProps extends React.FormHTMLAttributes<HTMLFormElement> { inline?: boolean }\nexport function ReadingForm({ inline, className, ...props }: ReadingFormProps) { return <form className={cn('folio-reading-form', className)} data-inline={inline || undefined} {...props} /> }\nexport interface ArchitectureColumnNode { id: string; title: string; description?: string }\nexport interface ArchitectureColumnsProps { columns: { title: string; connected?: boolean; nodes: ArchitectureColumnNode[] }[]; foundation?: ArchitectureColumnNode[] }\nexport function ArchitectureColumns({ columns, foundation }: ArchitectureColumnsProps) {\n  return <div className=\"folio-architecture-columns\"><div>{columns.map((column, index) => <div key={index} data-connected={Boolean(foundation?.length && column.connected) || undefined}><h3>{column.title}</h3>{column.nodes.map((node) => <div className=\"folio-architecture-node\" key={node.id}><strong>{node.title}</strong>{node.description && <span>{node.description}</span>}</div>)}</div>)}</div>{foundation && foundation.length > 0 && <div className=\"folio-architecture-foundation\">{foundation.map((node) => <div key={node.id}><strong>{node.title}</strong>{node.description && <span>{node.description}</span>}</div>)}</div>}</div>\n}\nexport interface TokenLineProps { items: { label: ReactNode; strong?: boolean; icon?: ReactNode }[]; label?: ReactNode; separator?: string }\nexport function TokenLine({ items, label, separator = '·' }: TokenLineProps) {\n  return <div className=\"folio-token-line\" data-flow={separator !== '·' || undefined}>\n    {label && <span>{label}</span>}\n    <ul role=\"list\" aria-label={typeof label === 'string' ? label : undefined}>\n      {items.map((item, index) => <li key={index}>\n        {index > 0 && <span aria-hidden className=\"folio-token-separator\">{separator}</span>}\n        {item.icon && <span className=\"folio-token-icon\" aria-hidden>{item.icon}</span>}{item.strong ? <strong>{item.label}</strong> : item.label}\n      </li>)}\n    </ul>\n  </div>\n}\nexport interface ContentFigureProps { children: ReactNode; caption?: ReactNode; wide?: boolean }\nexport function ContentFigure({ children, caption, wide }: ContentFigureProps) { return <figure className=\"folio-content-figure\" data-wide={wide || undefined}>{children}{caption && <figcaption>{caption}</figcaption>}</figure> }\nexport interface ReadingPageProps extends HTMLAttributes<HTMLElement> { children: ReactNode }\nexport function ReadingPage({ children, className, ...props }: ReadingPageProps) { return <section className={cn('folio-reading-page', className)} {...props}>{children}</section> }\nexport interface CommandPiece { text: string; emphasis?: 'strong' | 'normal' | 'muted' }\nexport interface CommandSnippetProps { code: string; pieces?: CommandPiece[]; copyLabel: string; copiedLabel: string; className?: string }\nexport function CommandSnippet({ code, pieces, copyLabel, copiedLabel, className }: CommandSnippetProps) {\n  const escape = (value: string) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;')\n  // Only use the highlighting when it describes the exact source being copied.\n  const highlighted = pieces?.map((piece) => piece.text).join('') === code ? pieces : undefined\n  const html = highlighted ? `<pre><code>${highlighted.map((piece) => `<span class=\"folio-command-${piece.emphasis ?? 'normal'}\">${escape(piece.text)}</span>`).join('')}</code></pre>` : undefined\n  return <div className={cn('folio-command-snippet', className)}><CodeBlock code={code} html={html} copyLabel={copyLabel} copiedLabel={copiedLabel} /></div>\n}\n"],"mappings":"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","names":[]}

package/dist/website/Recovery/Recovery.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { ErrorStateProps } from '../../components/ErrorState/ErrorState.js';
+import '../../components/Heading/Heading.js';
+
+interface RecoveryStateProps extends ErrorStateProps {
+    elsewhere?: ReactNode;
+}
+/** A recovery page composed from the system error primitive and caller-owned destinations. */
+declare function RecoveryState({ action, elsewhere, ...props }: RecoveryStateProps): react.JSX.Element;
+interface RecoveryLinksProps {
+    label: string;
+    items: {
+        id: string;
+        link: ReactElement;
+    }[];
+}
+/** Suggested destinations, with routing supplied by the host. */
+declare function RecoveryLinks({ label, items }: RecoveryLinksProps): react.JSX.Element;
+interface LoadingRouteIntroProps {
+    titleClassName?: string;
+}
+/** The shared masthead geometry, drawn from the core loading primitives. */
+declare function LoadingRouteIntro({ titleClassName }: LoadingRouteIntroProps): react.JSX.Element;
+interface LoadingRecordsProps {
+    rows?: number;
+    media?: boolean;
+}
+/** A collection skeleton with or without a media column. */
+declare function LoadingRecords({ rows, media }: LoadingRecordsProps): react.JSX.Element;
+interface WebsiteLoadingProps extends LoadingRecordsProps, LoadingRouteIntroProps {
+    label: string;
+    layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity';
+    filters?: boolean;
+}
+/** Named loading layouts for the website's reusable page shapes. */
+declare function WebsiteLoading({ label, layout, titleClassName, rows, media, filters }: WebsiteLoadingProps): react.JSX.Element;
+
+export { LoadingRecords, type LoadingRecordsProps, LoadingRouteIntro, type LoadingRouteIntroProps, RecoveryLinks, type RecoveryLinksProps, RecoveryState, type RecoveryStateProps, WebsiteLoading, type WebsiteLoadingProps };

package/dist/website/Recovery/Recovery.js

@@ -0,0 +1,96 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/Button/Button.js";
+import { ErrorState } from "../../components/ErrorState/ErrorState.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage } from "../../components/Skeleton/Skeleton.js";
+import { cn } from "../../lib/cn.js";
+function RecoveryState({ action, elsewhere, ...props }) {
+  return /* @__PURE__ */ jsx(ErrorState, { ...props, action: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-recovery-actions", children: action }),
+    elsewhere
+  ] }) });
+}
+function RecoveryLinks({ label, items }) {
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: "folio-recovery-links", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, size: "label", children: label }),
+    /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", className: "min-h-11 w-full justify-start", children: item.link }) }, item.id)) })
+  ] });
+}
+function LoadingRouteIntro({ titleClassName = "w-[min(100%,18rem)]" }) {
+  return /* @__PURE__ */ jsxs("header", { className: "folio-loading-intro folio-loading-container", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-28" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: cn("mt-6 h-[clamp(2.5rem,4.6vw,3.375rem)]", titleClassName) }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-7 h-3.5 w-[min(100%,34rem)]" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-2.5 h-3.5 w-[min(100%,26rem)]" })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonLine, { className: "hidden h-2.5 w-40 justify-self-end md:block" })
+  ] });
+}
+function LoadingRecords({ rows = 4, media = true }) {
+  return /* @__PURE__ */ jsx("div", { "data-loading-content": true, className: "folio-loading-records folio-loading-container", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "folio-loading-records__row", "data-media": media || void 0, children: [
+    /* @__PURE__ */ jsx(SkeletonLine, { className: "hidden h-2.5 w-8 sm:block" }),
+    media && /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-[clamp(140px,20vw,154px)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-24" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-4 h-6 w-[min(100%,20rem)]" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-5 h-3 w-full max-w-(--measure-record)" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-2.5 h-3 w-[min(100%,26rem)]" })
+    ] })
+  ] }, index)) });
+}
+function WebsiteLoading({ label, layout = "records", titleClassName, rows = 4, media = true, filters = false }) {
+  return /* @__PURE__ */ jsxs(SkeletonPage, { label, children: [
+    layout === "identity" ? /* @__PURE__ */ jsxs("header", { className: "folio-loading-identity folio-loading-container", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+          /* @__PURE__ */ jsx(SkeletonCircle, { className: "size-12" }),
+          /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-12 w-64" })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-9 h-3.5 w-full" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-3 h-3.5 w-4/5" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-10 h-3 w-2/3" })
+      ] }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "aspect-square w-full" })
+    ] }) : /* @__PURE__ */ jsx(LoadingRouteIntro, { titleClassName }),
+    filters && /* @__PURE__ */ jsxs("div", { className: "folio-loading-filters folio-loading-container", "data-loading-content": true, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-6", children: [8, 16, 12, 20].map((width) => /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-12" }, width)) }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-11 w-56" })
+    ] }),
+    (layout === "records" || layout === "identity") && /* @__PURE__ */ jsx(LoadingRecords, { rows, media }),
+    layout === "gallery" && /* @__PURE__ */ jsx("section", { "data-loading-content": true, className: "folio-loading-gallery folio-loading-container", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "aspect-[4/5] w-full" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-3 h-3 w-3/4" })
+    ] }, index)) }),
+    layout === "media" && /* @__PURE__ */ jsx("section", { "data-loading-content": true, className: "folio-loading-media", children: /* @__PURE__ */ jsxs("div", { "data-loading-now-playing": true, className: "folio-media-feature folio-loading-container", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-media-feature__artwork", children: /* @__PURE__ */ jsx(SkeletonBlock, { "data-loading-artwork": true, className: "h-full w-full" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-28" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-5 h-16 w-4/5" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-5 h-3.5 w-2/3" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-6 h-1 w-full" })
+      ] })
+    ] }) }),
+    layout === "metrics" && /* @__PURE__ */ jsxs("div", { "data-loading-content": true, className: "folio-loading-metrics folio-loading-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "folio-loading-filters", children: [
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-12" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-11 w-72" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "folio-loading-metrics__figures", children: [0, 1, 2, 3].map((cell) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-24" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-4 h-9 w-20" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-4 h-2.5 w-16" })
+      ] }, cell)) }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-16 h-3 w-28" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-6 h-[220px] w-full" })
+    ] })
+  ] });
+}
+export {
+  LoadingRecords,
+  LoadingRouteIntro,
+  RecoveryLinks,
+  RecoveryState,
+  WebsiteLoading
+};
+//# sourceMappingURL=Recovery.js.map

package/dist/website/Recovery/Recovery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Recovery/Recovery.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\nimport { Button } from '../../components/Button/Button'\nimport { ErrorState, type ErrorStateProps } from '../../components/ErrorState/ErrorState'\nimport { Heading } from '../../components/Heading/Heading'\nimport { SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\n\nexport interface RecoveryStateProps extends ErrorStateProps {\n  elsewhere?: ReactNode\n}\n\n/** A recovery page composed from the system error primitive and caller-owned destinations. */\nexport function RecoveryState({ action, elsewhere, ...props }: RecoveryStateProps) {\n  return <ErrorState {...props} action={<><div className=\"folio-recovery-actions\">{action}</div>{elsewhere}</>} />\n}\n\nexport interface RecoveryLinksProps {\n  label: string\n  items: { id: string; link: ReactElement }[]\n}\n\n/** Suggested destinations, with routing supplied by the host. */\nexport function RecoveryLinks({ label, items }: RecoveryLinksProps) {\n  return <nav aria-label={label} className=\"folio-recovery-links\"><Heading level={2} size=\"label\">{label}</Heading><ul>{items.map((item) => <li key={item.id}><Button asChild variant=\"ghost\" className=\"min-h-11 w-full justify-start\">{item.link}</Button></li>)}</ul></nav>\n}\n\nexport interface LoadingRouteIntroProps {\n  titleClassName?: string\n}\n\n/** The shared masthead geometry, drawn from the core loading primitives. */\nexport function LoadingRouteIntro({ titleClassName = 'w-[min(100%,18rem)]' }: LoadingRouteIntroProps) {\n  return <header className=\"folio-loading-intro folio-loading-container\"><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className={cn('mt-6 h-[clamp(2.5rem,4.6vw,3.375rem)]', titleClassName)} /><SkeletonLine className=\"mt-7 h-3.5 w-[min(100%,34rem)]\" /><SkeletonLine className=\"mt-2.5 h-3.5 w-[min(100%,26rem)]\" /></div><SkeletonLine className=\"hidden h-2.5 w-40 justify-self-end md:block\" /></header>\n}\n\nexport interface LoadingRecordsProps {\n  rows?: number\n  media?: boolean\n}\n\n/** A collection skeleton with or without a media column. */\nexport function LoadingRecords({ rows = 4, media = true }: LoadingRecordsProps) {\n  return <div data-loading-content className=\"folio-loading-records folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index} className=\"folio-loading-records__row\" data-media={media || undefined}><SkeletonLine className=\"hidden h-2.5 w-8 sm:block\" />{media && <SkeletonBlock className=\"h-[clamp(140px,20vw,154px)]\" />}<div className=\"min-w-0\"><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-6 w-[min(100%,20rem)]\" /><SkeletonLine className=\"mt-5 h-3 w-full max-w-(--measure-record)\" /><SkeletonLine className=\"mt-2.5 h-3 w-[min(100%,26rem)]\" /></div></div>)}</div>\n}\n\nexport interface WebsiteLoadingProps extends LoadingRecordsProps, LoadingRouteIntroProps {\n  label: string\n  layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity'\n  filters?: boolean\n}\n\n/** Named loading layouts for the website's reusable page shapes. */\nexport function WebsiteLoading({ label, layout = 'records', titleClassName, rows = 4, media = true, filters = false }: WebsiteLoadingProps) {\n  return <SkeletonPage label={label}>\n    {layout === 'identity' ? <header className=\"folio-loading-identity folio-loading-container\"><div><div className=\"flex items-center gap-5\"><SkeletonCircle className=\"size-12\" /><SkeletonBlock className=\"h-12 w-64\" /></div><SkeletonLine className=\"mt-9 h-3.5 w-full\" /><SkeletonLine className=\"mt-3 h-3.5 w-4/5\" /><SkeletonLine className=\"mt-10 h-3 w-2/3\" /></div><SkeletonBlock className=\"aspect-square w-full\" /></header> : <LoadingRouteIntro titleClassName={titleClassName} />}\n    {filters && <div className=\"folio-loading-filters folio-loading-container\" data-loading-content><div className=\"flex flex-wrap gap-6\">{[8, 16, 12, 20].map((width) => <SkeletonLine key={width} className=\"h-3 w-12\" />)}</div><SkeletonBlock className=\"h-11 w-56\" /></div>}\n    {(layout === 'records' || layout === 'identity') && <LoadingRecords rows={rows} media={media} />}\n    {layout === 'gallery' && <section data-loading-content className=\"folio-loading-gallery folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index}><SkeletonBlock className=\"aspect-[4/5] w-full\" /><SkeletonLine className=\"mt-3 h-3 w-3/4\" /></div>)}</section>}\n    {layout === 'media' && <section data-loading-content className=\"folio-loading-media\"><div data-loading-now-playing className=\"folio-media-feature folio-loading-container\"><div className=\"folio-media-feature__artwork\"><SkeletonBlock data-loading-artwork className=\"h-full w-full\" /></div><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className=\"mt-5 h-16 w-4/5\" /><SkeletonLine className=\"mt-5 h-3.5 w-2/3\" /><SkeletonLine className=\"mt-6 h-1 w-full\" /></div></div></section>}\n    {layout === 'metrics' && <div data-loading-content className=\"folio-loading-metrics folio-loading-container\"><div className=\"folio-loading-filters\"><SkeletonLine className=\"h-2.5 w-12\" /><SkeletonBlock className=\"h-11 w-72\" /></div><div className=\"folio-loading-metrics__figures\">{[0, 1, 2, 3].map((cell) => <div key={cell}><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-9 w-20\" /><SkeletonLine className=\"mt-4 h-2.5 w-16\" /></div>)}</div><SkeletonLine className=\"mt-16 h-3 w-28\" /><SkeletonBlock className=\"mt-6 h-[220px] w-full\" /></div>}\n  </SkeletonPage>\n}\n"],"mappings":"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","names":[]}