@misoto22/folio 0.17.0 → 0.18.0

package/dist/tokens.css

@@ -79,6 +79,11 @@
   --rule: #edebe6;
   --rule-2: #dbdbd6;
   --rule-hard: var(--ink);
+  /* The hard rule as a section DIVIDER — under a band heading, above a form,
+     between groups. Its own name so the rules axis can take dividers away
+     without touching the hard edges controls draw (a slider track, a table
+     head, a quotation bar). */
+  --rule-divider: var(--rule-hard);
 
   /* Historic role names, kept so a consumer written against the previous
      palette keeps resolving. Their hue is now ink; the role remains "the
@@ -191,6 +196,11 @@
   --rule: rgba(244, 244, 242, 0.14);
   --rule-2: rgba(244, 244, 242, 0.26);
   --rule-hard: var(--ink);
+  /* The hard rule as a section DIVIDER — under a band heading, above a form,
+     between groups. Its own name so the rules axis can take dividers away
+     without touching the hard edges controls draw (a slider track, a table
+     head, a quotation bar). */
+  --rule-divider: var(--rule-hard);
 
   --red: var(--clay);
   --red-ink: var(--clay);
@@ -279,6 +289,15 @@
 
 }
 
+/* Device hardware. A phone frame is drawn in the colours of the object, not
+   the page: a dark bezel and a black island read as an iPhone in light and
+   dark mode alike, so these do not flip with `data-mode`. */
+:root {
+  --device-bezel: #1d1d1f;
+  --device-rim: #4a4a4d;
+  --device-island: #000;
+}
+
 /* Display voice. How loud a page's display type and labels are, read by the
    website compositions instead of literal values so the voice axis in
    `themes.css` can quiet them. Declared on the root only — never on a fluid
@@ -289,6 +308,9 @@
   --label-font: var(--font-mono);
   --label-case: uppercase;
   --label-tracking-scale: 1;
+  /* Running text: the White Reset sets it light; a quiet voice sets it at a
+     regular weight to match its regular-weight headings. */
+  --body-weight: 300;
 }
 
 /* The fluid ramp, computed wherever `--fluid` is set.
@@ -359,6 +381,11 @@
   --radius: calc(8px * var(--radius-factor)); /* inputs, code, small plates */
   --radius-lg: calc(12px * var(--radius-factor)); /* cards, dialogs, menu panels */
   --radius-pill: calc(999px * var(--radius-factor)); /* capsules and counters */
+  /* The corner every pressable control shares — a button, an icon button, a
+     launcher. A role rather than a step, so a theme can make controls capsules
+     without re-shaping the inputs and plates that also sit on `--radius`. The
+     `data-controls` axis in themes.css is the only thing that moves it. */
+  --radius-control: var(--radius);
 
   /* The nesting law, applied to the two insets this system actually uses. */
   --radius-row: max(0px, calc(var(--radius-lg) - 0.375rem)); /* a row in a 6px-padded panel */

package/dist/tokens.d.ts

@@ -26,6 +26,7 @@ export type TokenName =
   | 'bar'
   | 'bar-2'
   | 'bar-h'
+  | 'body-weight'
   | 'border-color'
   | 'border-subtle'
   | 'brand-plate'
@@ -58,6 +59,9 @@ export type TokenName =
   | 'danger'
   | 'danger-soft'
   | 'danger-wash'
+  | 'device-bezel'
+  | 'device-island'
+  | 'device-rim'
   | 'diagram-band'
   | 'diagram-chip'
   | 'diagram-ink'
@@ -140,6 +144,7 @@ export type TokenName =
   | 'photo-scrim'
   | 'photo-shadow'
   | 'radius'
+  | 'radius-control'
   | 'radius-factor'
   | 'radius-frame'
   | 'radius-gate'
@@ -156,6 +161,7 @@ export type TokenName =
   | 'row'
   | 'rule'
   | 'rule-2'
+  | 'rule-divider'
   | 'rule-hard'
   | 'sans'
   | 'scrim'

package/dist/tokens.js

@@ -137,6 +137,13 @@ export const TOKENS = {
     "light": "var(--ink)",
     "dark": "var(--ink)"
   },
+  "rule-divider": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--rule-hard)",
+    "comment": "The hard rule as a section DIVIDER — under a band heading, above a form, between groups. Its own name so the rules axis can take dividers away without touching the hard edges controls draw (a slider track, a table head, a quotation bar).",
+    "dark": "var(--rule-hard)"
+  },
   "red": {
     "layer": "tokens",
     "category": "colour",
@@ -294,6 +301,21 @@ export const TOKENS = {
     "category": "space",
     "light": "52px"
   },
+  "device-bezel": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#1d1d1f"
+  },
+  "device-rim": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#4a4a4d"
+  },
+  "device-island": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#000"
+  },
   "display-scale": {
     "layer": "tokens",
     "category": "other",
@@ -319,6 +341,12 @@ export const TOKENS = {
     "category": "other",
     "light": "1"
   },
+  "body-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300",
+    "comment": "Running text: the White Reset sets it light; a quiet voice sets it at a regular weight to match its regular-weight headings."
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
@@ -405,6 +433,12 @@ export const TOKENS = {
     "light": "calc(999px * var(--radius-factor))",
     "comment": "capsules and counters"
   },
+  "radius-control": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "var(--radius)",
+    "comment": "The corner every pressable control shares — a button, an icon button, a launcher. A role rather than a step, so a theme can make controls capsules without re-shaping the inputs and plates that also sit on `--radius`. The `data-controls` axis in themes.css is the only thing that moves it."
+  },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
@@ -777,7 +811,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "other",
     "light": "var(--accent)",
-    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+    "comment": "The SOLID fill of a primary action or a chosen option — the primary button, the sliding pill of a segmented control, the active filter chip, the current page. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links can hand these large fills back to ink, while small marks (a checked box, a switch, a slider's range) keep the accent."
   },
   "action-foreground": {
     "layer": "semantic",

package/dist/tokens.json

@@ -136,6 +136,13 @@
     "light": "var(--ink)",
     "dark": "var(--ink)"
   },
+  "rule-divider": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--rule-hard)",
+    "comment": "The hard rule as a section DIVIDER — under a band heading, above a form, between groups. Its own name so the rules axis can take dividers away without touching the hard edges controls draw (a slider track, a table head, a quotation bar).",
+    "dark": "var(--rule-hard)"
+  },
   "red": {
     "layer": "tokens",
     "category": "colour",
@@ -293,6 +300,21 @@
     "category": "space",
     "light": "52px"
   },
+  "device-bezel": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#1d1d1f"
+  },
+  "device-rim": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#4a4a4d"
+  },
+  "device-island": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#000"
+  },
   "display-scale": {
     "layer": "tokens",
     "category": "other",
@@ -318,6 +340,12 @@
     "category": "other",
     "light": "1"
   },
+  "body-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300",
+    "comment": "Running text: the White Reset sets it light; a quiet voice sets it at a regular weight to match its regular-weight headings."
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
@@ -404,6 +432,12 @@
     "light": "calc(999px * var(--radius-factor))",
     "comment": "capsules and counters"
   },
+  "radius-control": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "var(--radius)",
+    "comment": "The corner every pressable control shares — a button, an icon button, a launcher. A role rather than a step, so a theme can make controls capsules without re-shaping the inputs and plates that also sit on `--radius`. The `data-controls` axis in themes.css is the only thing that moves it."
+  },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
@@ -776,7 +810,7 @@
     "layer": "semantic",
     "category": "other",
     "light": "var(--accent)",
-    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+    "comment": "The SOLID fill of a primary action or a chosen option — the primary button, the sliding pill of a segmented control, the active filter chip, the current page. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links can hand these large fills back to ink, while small marks (a checked box, a switch, a slider's range) keep the accent."
   },
   "action-foreground": {
     "layer": "semantic",

package/dist/website/Media/Media.js

@@ -52,7 +52,7 @@ function MediaGalleryItem({ children, title, index, location, orientation, class
   ] }) });
 }
 function MediaGallerySkeleton({ label, count = 6 }) {
-  return /* @__PURE__ */ jsxs(SkeletonPage, { label, "aria-label": label, children: [
+  return /* @__PURE__ */ jsx("div", { className: "folio-loading-page", children: /* @__PURE__ */ jsxs(SkeletonPage, { label, "aria-label": label, children: [
     /* @__PURE__ */ jsxs("header", { className: "folio-media-masthead", children: [
       /* @__PURE__ */ jsx(SkeletonLine, { className: "w-24" }),
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-4 h-9 w-[min(560px,90%)]" }),
@@ -63,7 +63,7 @@ function MediaGallerySkeleton({ label, count = 6 }) {
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "folio-media-gallery-mount" }),
       /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-3 w-3/4" })
     ] }, index)) }) })
-  ] });
+  ] }) });
 }
 function MediaDetailLayout({ title, titleId, headingLevel = 1, category, notesLabel, orientation, backLink, index, media, light, actions, metadata, location, pager, related, className, ...rest }) {
   const Heading = `h${headingLevel}`;

package/dist/website/Media/Media.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/website/Media/Media.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { RiAddLine, RiSubtractLine } from '@remixicon/react'\nimport type { ComponentPropsWithRef, HTMLAttributes, ReactElement, ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button, type ButtonProps } from '../../components/Button/Button'\nimport { DescriptionList, type DescriptionListItem } from '../../components/DescriptionList/DescriptionList'\nimport { EmptyState } from '../../components/EmptyState/EmptyState'\nimport { SkeletonBlock, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\nimport { replaceSlotContent } from '../../lib/slot-content'\n\nexport interface MediaMastheadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\n/** The quiet opening to an image collection, before its controls and prints. */\nexport function MediaMasthead({ eyebrow, title, description, headingLevel = 1, className, ...rest }: MediaMastheadProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <header className={cn('folio-media-masthead', className)} {...rest}>\n      {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n      <Heading className=\"folio-media-masthead-title\">{title}</Heading>\n      {description && <p className=\"folio-media-description\">{description}</p>}\n    </header>\n  )\n}\n\nexport interface PhotographFeatureProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  image: ReactNode\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  caption?: ReactNode\n  action?: ReactNode\n}\n\n/** A photograph and an editorial introduction, with the original image ratio. */\nexport function PhotographFeature({ image, title, eyebrow, description, caption, action, className, ...rest }: PhotographFeatureProps) {\n  return (\n    <section className={cn('folio-photograph-feature', className)} {...rest}>\n      <div className=\"folio-photograph-feature-copy\">\n        {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n        <h2 className=\"folio-photograph-feature-title\">{title}</h2>\n        {description && <div className=\"folio-media-description\">{description}</div>}\n        {action && <div className=\"folio-photograph-feature-action\">{action}</div>}\n      </div>\n      <figure className=\"folio-photograph-feature-figure\">\n        <div className=\"folio-photograph-feature-image\">{image}</div>\n        {caption && <figcaption className=\"folio-photograph-feature-caption\">{caption}</figcaption>}\n      </figure>\n    </section>\n  )\n}\n\nexport interface MediaCollectionProps extends HTMLAttributes<HTMLDivElement> {\n  masthead: ReactNode\n  controls?: ReactNode\n  collectionId?: string\n  footer?: ReactNode\n}\n\n/** Page-level gallery composition; the host owns its filters and collection. */\nexport function MediaCollection({ masthead, controls, collectionId, footer, children, className, ...rest }: MediaCollectionProps) {\n  return (\n    <div className={cn('folio-media-gallery-page', className)} {...rest}>\n      {masthead}\n      {controls && <div className=\"folio-media-container\">{controls}</div>}\n      <section id={collectionId} className=\"folio-media-gallery-content\">{children}</section>\n      {footer}\n    </div>\n  )\n}\n\nexport interface MediaGalleryProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode\n  /** Supply localized empty copy when the collection may have no children. */\n  emptyTitle?: ReactNode\n  emptyAction?: ReactNode\n}\n\n/** Level mounts keep unlike aspect ratios aligned without cropping the prints. */\nexport function MediaGallery({ children, emptyTitle, emptyAction, className, ...rest }: MediaGalleryProps) {\n  return (\n    <div className=\"folio-media-container\">\n      {emptyTitle ? <EmptyState title={emptyTitle} action={emptyAction} /> : (\n        <ul role=\"list\" className={cn('folio-media-gallery', className)} {...rest}>{children}</ul>\n      )}\n    </div>\n  )\n}\n\nexport interface MediaGalleryItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {\n  /** A host link containing its image. The package supplies the print layout. */\n  children: ReactElement\n  title: ReactNode\n  index?: ReactNode\n  location?: ReactNode\n  orientation?: 'portrait' | 'landscape' | 'square'\n}\n\nexport function MediaGalleryItem({ children, title, index, location, orientation, className, ...rest }: MediaGalleryItemProps) {\n  return (\n    <li className={cn('folio-media-gallery-item', className)} {...rest}>\n      <figure>\n        <Slot className=\"folio-media-gallery-link\" data-photo-orientation={orientation}>{children}</Slot>\n        <figcaption className=\"folio-media-gallery-caption\">\n          {index != null && <span className=\"folio-media-gallery-index\" aria-hidden=\"true\">{index}</span>}\n          <span className=\"folio-media-gallery-title\">{title}</span>\n          {location && <span className=\"folio-media-gallery-location\">{location}</span>}\n        </figcaption>\n      </figure>\n    </li>\n  )\n}\n\nexport interface MediaGallerySkeletonProps {\n  label: string\n  count?: number\n}\n\nexport function MediaGallerySkeleton({ label, count = 6 }: MediaGallerySkeletonProps) {\n  return (\n    <SkeletonPage label={label} aria-label={label}>\n      <header className=\"folio-media-masthead\">\n        <SkeletonLine className=\"w-24\" />\n        <SkeletonBlock className=\"mt-4 h-9 w-[min(560px,90%)]\" />\n        <SkeletonBlock className=\"mt-2.5 h-9 w-[min(380px,70%)]\" />\n      </header>\n      <div className=\"folio-media-container\"><SkeletonLine className=\"h-11 w-full\" /></div>\n      <section data-loading-content className=\"folio-media-gallery-content\">\n        <MediaGallery>\n          {Array.from({ length: count }, (_, index) => (\n            <li key={index}>\n              <SkeletonBlock className=\"folio-media-gallery-mount\" />\n              <SkeletonLine className=\"mt-3 w-3/4\" />\n            </li>\n          ))}\n        </MediaGallery>\n      </section>\n    </SkeletonPage>\n  )\n}\n\nexport interface MediaDetailLayoutProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  titleId: string\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  category?: ReactNode\n  notesLabel: string\n  orientation: 'portrait' | 'landscape' | 'square'\n  backLink: ReactElement\n  index?: ReactNode\n  media: ReactNode\n  light?: ReactNode\n  actions?: ReactNode\n  metadata?: ReactNode\n  location?: ReactNode\n  pager?: ReactNode\n  related?: ReactNode\n}\n\n/** Portraits share a spread with their notes; landscapes lead a full-width spread. */\nexport function MediaDetailLayout({ title, titleId, headingLevel = 1, category, notesLabel, orientation, backLink, index, media, light, actions, metadata, location, pager, related, className, ...rest }: MediaDetailLayoutProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <div className=\"folio-media-detail-page\">\n      <article className={cn('folio-media-detail', className)} aria-labelledby={titleId} data-photo-detail {...rest}>\n        <header className=\"folio-media-index-bar\">\n          <Button asChild variant=\"ghost\">{backLink}</Button>\n          {index && <span className=\"folio-media-index\">{index}</span>}\n        </header>\n        <div className=\"folio-media-spread\" data-photo-spread={orientation === 'landscape' ? 'wide' : 'tall'}>\n          <div className=\"folio-media-well\" data-photo-media>{media}</div>\n          <aside className=\"folio-media-ledger\" aria-label={notesLabel} data-photo-ledger>\n            <div className=\"folio-media-ledger-narrative\">\n              <div className=\"folio-media-ledger-lead\">\n                {category && <p className=\"folio-media-eyebrow\">{category}</p>}\n                <Heading id={titleId} className=\"folio-media-detail-title\">{title}</Heading>\n              </div>\n              {light}\n              {actions && <div className=\"folio-media-actions\" data-photo-actions>{actions}</div>}\n            </div>\n            <div className=\"folio-media-ledger-data\">{metadata}{location}</div>\n          </aside>\n        </div>\n        {pager}\n        {related}\n      </article>\n    </div>\n  )\n}\n\nexport interface MediaMetadataProps extends HTMLAttributes<HTMLDListElement> {\n  items: DescriptionListItem[]\n}\n\nexport function MediaMetadata({ items, className, ...rest }: MediaMetadataProps) {\n  return <DescriptionList items={items} className={cn('folio-media-metadata', className)} data-photo-specs {...rest} />\n}\n\nexport interface MediaPagerProps extends HTMLAttributes<HTMLElement> {\n  label: string\n  previous?: ReactNode\n  next?: ReactNode\n}\n\nexport function MediaPager({ label, previous, next, className, ...rest }: MediaPagerProps) {\n  if (!previous && !next) return null\n  return <nav aria-label={label} className={cn('folio-media-pager', className)} data-photo-pager {...rest}>{previous || <span />}{next || <span />}</nav>\n}\n\nexport interface MediaPagerItemProps {\n  link: ReactElement\n  direction: 'previous' | 'next'\n  label: ReactNode\n  title: ReactNode\n  image?: ReactNode\n}\n\nexport function MediaPagerItem({ link, direction, label, title, image }: MediaPagerItemProps) {\n  return (\n    <Slot className=\"folio-media-pager-link\" data-direction={direction}>\n      {/** Slot composes the host link while retaining its routing behavior. */}\n      {replaceSlotContent(link, <>\n        {image && direction === 'previous' && <span className=\"folio-media-pager-image\">{image}</span>}\n        <span className=\"folio-media-pager-copy\">\n          <span className=\"folio-media-pager-label\">{label}</span>{' '}\n          <strong className=\"folio-media-pager-title\">{title}</strong>\n        </span>\n        {image && direction === 'next' && <span className=\"folio-media-pager-image\">{image}</span>}\n      </>)}\n    </Slot>\n  )\n}\n\nexport interface MediaThumbnailStripProps extends HTMLAttributes<HTMLElement> {\n  heading: ReactNode\n}\n\nexport function MediaThumbnailStrip({ heading, children, className, ...rest }: MediaThumbnailStripProps) {\n  return <section className={cn('folio-media-thumbnails', className)} data-photo-related {...rest}><h2>{heading}</h2><div className=\"folio-media-thumbnail-list\">{children}</div></section>\n}\n\nexport interface MediaThumbnailProps {\n  children: ReactElement\n}\n\nexport function MediaThumbnail({ children }: MediaThumbnailProps) {\n  return <Slot className=\"folio-media-thumbnail\">{children}</Slot>\n}\n\nexport interface MediaLightNoteLine {\n  id: string\n  icon?: ReactNode\n  text: ReactNode\n  detail?: ReactNode\n}\n\nexport interface MediaLightNoteProps {\n  label: ReactNode\n  lines: MediaLightNoteLine[]\n}\n\n/** The host supplies observations and formatted labels; this is presentation only. */\nexport function MediaLightNote({ label, lines }: MediaLightNoteProps) {\n  return <div className=\"folio-media-light\"><Badge tone=\"outline\">{label}</Badge>{lines.map((line) => <div className=\"folio-media-light-line\" key={line.id}>{line.icon}<span>{line.text}</span>{line.detail && <span className=\"folio-media-light-detail\">{line.detail}</span>}</div>)}</div>\n}\n\nexport interface MediaMapSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  hint?: ReactNode\n  /** An optional legacy anchor, owned and named by the host. */\n  aliasId?: string\n  map: ReactNode\n  preview: ReactNode\n}\n\nexport function MediaMapSection({ title, hint, aliasId, map, preview, className, ...rest }: MediaMapSectionProps) {\n  return <section className={cn('folio-media-map-section', className)} {...rest}><div className=\"folio-media-container\">{aliasId && <span id={aliasId} className=\"folio-media-anchor\" aria-hidden=\"true\" />}<header><h2>{title}</h2>{hint && <p>{hint}</p>}</header><div className=\"folio-media-map-grid\">{map}{preview}</div></div></section>\n}\n\nexport interface MediaMapFrameProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode\n  hint?: ReactNode\n  navigation?: ReactNode\n  compact?: boolean\n}\n\nexport function MediaMapFrame({ label, hint, navigation, compact = false, children, className, ...rest }: MediaMapFrameProps) {\n  return <div className={cn('folio-media-map-frame', compact && 'folio-media-map-frame-compact', className)} {...rest}>{label && <span className=\"folio-media-map-label\">{label}</span>}<div className=\"folio-media-map-stage\">{children}{hint && <div className=\"folio-media-map-hint\">{hint}</div>}{navigation && <div className=\"folio-media-map-navigation\">{navigation}</div>}</div></div>\n}\n\nexport interface MediaMapNavigationProps {\n  zoomInLabel: string\n  zoomOutLabel: string\n  onZoomIn: () => void\n  onZoomOut: () => void\n}\n\nexport function MediaMapNavigation({ zoomInLabel, zoomOutLabel, onZoomIn, onZoomOut }: MediaMapNavigationProps) {\n  return <><Button variant=\"secondary\" iconOnly aria-label={zoomInLabel} onClick={onZoomIn}><RiAddLine size={18} aria-hidden=\"true\" /></Button><Button variant=\"secondary\" iconOnly aria-label={zoomOutLabel} onClick={onZoomOut}><RiSubtractLine size={18} aria-hidden=\"true\" /></Button></>\n}\n\nexport type MediaMapCanvasProps = ComponentPropsWithRef<'div'>\n\n/** A sized provider container. Map creation, themes and geographic math stay in the host. */\nexport function MediaMapCanvas({ className, ...rest }: MediaMapCanvasProps) {\n  return <div className={cn('folio-media-map-canvas', className)} {...rest} />\n}\n\nexport interface MediaMapPreviewProps {\n  title: ReactNode\n  image?: ReactNode\n  action?: ReactNode\n  place?: ReactNode\n  coordinates?: ReactNode\n  children?: ReactNode\n}\n\nexport function MediaMapPreview({ title, image, action, place, coordinates, children }: MediaMapPreviewProps) {\n  return <aside className=\"folio-media-map-preview\"><div className=\"folio-media-map-preview-image\">{image}{action && <div className=\"folio-media-map-preview-action\">{action}</div>}</div><div className=\"folio-media-map-preview-copy\"><h3>{title}</h3>{place && <p className=\"folio-media-map-place\">{place}</p>}{coordinates && <div className=\"folio-media-map-coordinates\">{coordinates}</div>}{children}</div></aside>\n}\n\nexport interface MediaMapArea {\n  id: string\n  label: ReactNode\n  count: ReactNode\n}\n\nexport interface MediaMapAreaListProps {\n  items: MediaMapArea[]\n  value?: string\n  onValueChange: (value: string) => void\n}\n\nexport function MediaMapAreaList({ items, value, onValueChange }: MediaMapAreaListProps) {\n  return (\n    <div className=\"folio-media-map-areas\">\n      {items.map((item) => (\n        <Button key={item.id} variant=\"ghost\" aria-pressed={value === item.id} onClick={() => onValueChange(item.id)} className=\"folio-media-map-area\">\n          <span className=\"folio-media-map-area-name\"><span aria-hidden=\"true\" />{item.label}</span>{' '}\n          <span className=\"folio-media-map-area-count\">{item.count}</span>\n        </Button>\n      ))}\n    </div>\n  )\n}\n\nexport interface MediaMapMarkerProps extends Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'> {\n  label: string\n  active?: boolean\n}\n\n/** A keyboard-operable 44px marker for a host's map-provider portal. */\nexport function MediaMapMarker({ label, active = false, className, ...rest }: MediaMapMarkerProps) {\n  return <Button {...rest} variant=\"ghost\" iconOnly aria-label={label} aria-pressed={active} className={cn('folio-media-map-marker', className)} style={{ width: 44, height: 44, ...rest.style }}><MediaMapPin active={active} /></Button>\n}\n\nexport interface MediaMapPinProps {\n  active?: boolean\n}\n\nexport function MediaMapPin({ active = false }: MediaMapPinProps) {\n  return <span className=\"folio-media-map-pin\" data-active={active || undefined} aria-hidden=\"true\"><span /></span>\n}\n\nexport function MediaMapSkeleton() {\n  return <div className=\"folio-media-map-skeleton folio-media-container\" aria-hidden=\"true\"><SkeletonBlock className=\"folio-media-map-canvas\" /></div>\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/website/Media/Media.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { RiAddLine, RiSubtractLine } from '@remixicon/react'\nimport type { ComponentPropsWithRef, HTMLAttributes, ReactElement, ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button, type ButtonProps } from '../../components/Button/Button'\nimport { DescriptionList, type DescriptionListItem } from '../../components/DescriptionList/DescriptionList'\nimport { EmptyState } from '../../components/EmptyState/EmptyState'\nimport { SkeletonBlock, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\nimport { replaceSlotContent } from '../../lib/slot-content'\n\nexport interface MediaMastheadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\n/** The quiet opening to an image collection, before its controls and prints. */\nexport function MediaMasthead({ eyebrow, title, description, headingLevel = 1, className, ...rest }: MediaMastheadProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <header className={cn('folio-media-masthead', className)} {...rest}>\n      {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n      <Heading className=\"folio-media-masthead-title\">{title}</Heading>\n      {description && <p className=\"folio-media-description\">{description}</p>}\n    </header>\n  )\n}\n\nexport interface PhotographFeatureProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  image: ReactNode\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  caption?: ReactNode\n  action?: ReactNode\n}\n\n/** A photograph and an editorial introduction, with the original image ratio. */\nexport function PhotographFeature({ image, title, eyebrow, description, caption, action, className, ...rest }: PhotographFeatureProps) {\n  return (\n    <section className={cn('folio-photograph-feature', className)} {...rest}>\n      <div className=\"folio-photograph-feature-copy\">\n        {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n        <h2 className=\"folio-photograph-feature-title\">{title}</h2>\n        {description && <div className=\"folio-media-description\">{description}</div>}\n        {action && <div className=\"folio-photograph-feature-action\">{action}</div>}\n      </div>\n      <figure className=\"folio-photograph-feature-figure\">\n        <div className=\"folio-photograph-feature-image\">{image}</div>\n        {caption && <figcaption className=\"folio-photograph-feature-caption\">{caption}</figcaption>}\n      </figure>\n    </section>\n  )\n}\n\nexport interface MediaCollectionProps extends HTMLAttributes<HTMLDivElement> {\n  masthead: ReactNode\n  controls?: ReactNode\n  collectionId?: string\n  footer?: ReactNode\n}\n\n/** Page-level gallery composition; the host owns its filters and collection. */\nexport function MediaCollection({ masthead, controls, collectionId, footer, children, className, ...rest }: MediaCollectionProps) {\n  return (\n    <div className={cn('folio-media-gallery-page', className)} {...rest}>\n      {masthead}\n      {controls && <div className=\"folio-media-container\">{controls}</div>}\n      <section id={collectionId} className=\"folio-media-gallery-content\">{children}</section>\n      {footer}\n    </div>\n  )\n}\n\nexport interface MediaGalleryProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode\n  /** Supply localized empty copy when the collection may have no children. */\n  emptyTitle?: ReactNode\n  emptyAction?: ReactNode\n}\n\n/** Level mounts keep unlike aspect ratios aligned without cropping the prints. */\nexport function MediaGallery({ children, emptyTitle, emptyAction, className, ...rest }: MediaGalleryProps) {\n  return (\n    <div className=\"folio-media-container\">\n      {emptyTitle ? <EmptyState title={emptyTitle} action={emptyAction} /> : (\n        <ul role=\"list\" className={cn('folio-media-gallery', className)} {...rest}>{children}</ul>\n      )}\n    </div>\n  )\n}\n\nexport interface MediaGalleryItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {\n  /** A host link containing its image. The package supplies the print layout. */\n  children: ReactElement\n  title: ReactNode\n  index?: ReactNode\n  location?: ReactNode\n  orientation?: 'portrait' | 'landscape' | 'square'\n}\n\nexport function MediaGalleryItem({ children, title, index, location, orientation, className, ...rest }: MediaGalleryItemProps) {\n  return (\n    <li className={cn('folio-media-gallery-item', className)} {...rest}>\n      <figure>\n        <Slot className=\"folio-media-gallery-link\" data-photo-orientation={orientation}>{children}</Slot>\n        <figcaption className=\"folio-media-gallery-caption\">\n          {index != null && <span className=\"folio-media-gallery-index\" aria-hidden=\"true\">{index}</span>}\n          <span className=\"folio-media-gallery-title\">{title}</span>\n          {location && <span className=\"folio-media-gallery-location\">{location}</span>}\n        </figcaption>\n      </figure>\n    </li>\n  )\n}\n\nexport interface MediaGallerySkeletonProps {\n  label: string\n  count?: number\n}\n\nexport function MediaGallerySkeleton({ label, count = 6 }: MediaGallerySkeletonProps) {\n  return (\n    <div className=\"folio-loading-page\">\n      <SkeletonPage label={label} aria-label={label}>\n        <header className=\"folio-media-masthead\">\n          <SkeletonLine className=\"w-24\" />\n          <SkeletonBlock className=\"mt-4 h-9 w-[min(560px,90%)]\" />\n          <SkeletonBlock className=\"mt-2.5 h-9 w-[min(380px,70%)]\" />\n        </header>\n        <div className=\"folio-media-container\"><SkeletonLine className=\"h-11 w-full\" /></div>\n        <section data-loading-content className=\"folio-media-gallery-content\">\n          <MediaGallery>\n            {Array.from({ length: count }, (_, index) => (\n              <li key={index}>\n                <SkeletonBlock className=\"folio-media-gallery-mount\" />\n                <SkeletonLine className=\"mt-3 w-3/4\" />\n              </li>\n            ))}\n          </MediaGallery>\n        </section>\n      </SkeletonPage>\n    </div>\n  )\n}\n\nexport interface MediaDetailLayoutProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  titleId: string\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  category?: ReactNode\n  notesLabel: string\n  orientation: 'portrait' | 'landscape' | 'square'\n  backLink: ReactElement\n  index?: ReactNode\n  media: ReactNode\n  light?: ReactNode\n  actions?: ReactNode\n  metadata?: ReactNode\n  location?: ReactNode\n  pager?: ReactNode\n  related?: ReactNode\n}\n\n/** Portraits share a spread with their notes; landscapes lead a full-width spread. */\nexport function MediaDetailLayout({ title, titleId, headingLevel = 1, category, notesLabel, orientation, backLink, index, media, light, actions, metadata, location, pager, related, className, ...rest }: MediaDetailLayoutProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <div className=\"folio-media-detail-page\">\n      <article className={cn('folio-media-detail', className)} aria-labelledby={titleId} data-photo-detail {...rest}>\n        <header className=\"folio-media-index-bar\">\n          <Button asChild variant=\"ghost\">{backLink}</Button>\n          {index && <span className=\"folio-media-index\">{index}</span>}\n        </header>\n        <div className=\"folio-media-spread\" data-photo-spread={orientation === 'landscape' ? 'wide' : 'tall'}>\n          <div className=\"folio-media-well\" data-photo-media>{media}</div>\n          <aside className=\"folio-media-ledger\" aria-label={notesLabel} data-photo-ledger>\n            <div className=\"folio-media-ledger-narrative\">\n              <div className=\"folio-media-ledger-lead\">\n                {category && <p className=\"folio-media-eyebrow\">{category}</p>}\n                <Heading id={titleId} className=\"folio-media-detail-title\">{title}</Heading>\n              </div>\n              {light}\n              {actions && <div className=\"folio-media-actions\" data-photo-actions>{actions}</div>}\n            </div>\n            <div className=\"folio-media-ledger-data\">{metadata}{location}</div>\n          </aside>\n        </div>\n        {pager}\n        {related}\n      </article>\n    </div>\n  )\n}\n\nexport interface MediaMetadataProps extends HTMLAttributes<HTMLDListElement> {\n  items: DescriptionListItem[]\n}\n\nexport function MediaMetadata({ items, className, ...rest }: MediaMetadataProps) {\n  return <DescriptionList items={items} className={cn('folio-media-metadata', className)} data-photo-specs {...rest} />\n}\n\nexport interface MediaPagerProps extends HTMLAttributes<HTMLElement> {\n  label: string\n  previous?: ReactNode\n  next?: ReactNode\n}\n\nexport function MediaPager({ label, previous, next, className, ...rest }: MediaPagerProps) {\n  if (!previous && !next) return null\n  return <nav aria-label={label} className={cn('folio-media-pager', className)} data-photo-pager {...rest}>{previous || <span />}{next || <span />}</nav>\n}\n\nexport interface MediaPagerItemProps {\n  link: ReactElement\n  direction: 'previous' | 'next'\n  label: ReactNode\n  title: ReactNode\n  image?: ReactNode\n}\n\nexport function MediaPagerItem({ link, direction, label, title, image }: MediaPagerItemProps) {\n  return (\n    <Slot className=\"folio-media-pager-link\" data-direction={direction}>\n      {/** Slot composes the host link while retaining its routing behavior. */}\n      {replaceSlotContent(link, <>\n        {image && direction === 'previous' && <span className=\"folio-media-pager-image\">{image}</span>}\n        <span className=\"folio-media-pager-copy\">\n          <span className=\"folio-media-pager-label\">{label}</span>{' '}\n          <strong className=\"folio-media-pager-title\">{title}</strong>\n        </span>\n        {image && direction === 'next' && <span className=\"folio-media-pager-image\">{image}</span>}\n      </>)}\n    </Slot>\n  )\n}\n\nexport interface MediaThumbnailStripProps extends HTMLAttributes<HTMLElement> {\n  heading: ReactNode\n}\n\nexport function MediaThumbnailStrip({ heading, children, className, ...rest }: MediaThumbnailStripProps) {\n  return <section className={cn('folio-media-thumbnails', className)} data-photo-related {...rest}><h2>{heading}</h2><div className=\"folio-media-thumbnail-list\">{children}</div></section>\n}\n\nexport interface MediaThumbnailProps {\n  children: ReactElement\n}\n\nexport function MediaThumbnail({ children }: MediaThumbnailProps) {\n  return <Slot className=\"folio-media-thumbnail\">{children}</Slot>\n}\n\nexport interface MediaLightNoteLine {\n  id: string\n  icon?: ReactNode\n  text: ReactNode\n  detail?: ReactNode\n}\n\nexport interface MediaLightNoteProps {\n  label: ReactNode\n  lines: MediaLightNoteLine[]\n}\n\n/** The host supplies observations and formatted labels; this is presentation only. */\nexport function MediaLightNote({ label, lines }: MediaLightNoteProps) {\n  return <div className=\"folio-media-light\"><Badge tone=\"outline\">{label}</Badge>{lines.map((line) => <div className=\"folio-media-light-line\" key={line.id}>{line.icon}<span>{line.text}</span>{line.detail && <span className=\"folio-media-light-detail\">{line.detail}</span>}</div>)}</div>\n}\n\nexport interface MediaMapSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  hint?: ReactNode\n  /** An optional legacy anchor, owned and named by the host. */\n  aliasId?: string\n  map: ReactNode\n  preview: ReactNode\n}\n\nexport function MediaMapSection({ title, hint, aliasId, map, preview, className, ...rest }: MediaMapSectionProps) {\n  return <section className={cn('folio-media-map-section', className)} {...rest}><div className=\"folio-media-container\">{aliasId && <span id={aliasId} className=\"folio-media-anchor\" aria-hidden=\"true\" />}<header><h2>{title}</h2>{hint && <p>{hint}</p>}</header><div className=\"folio-media-map-grid\">{map}{preview}</div></div></section>\n}\n\nexport interface MediaMapFrameProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode\n  hint?: ReactNode\n  navigation?: ReactNode\n  compact?: boolean\n}\n\nexport function MediaMapFrame({ label, hint, navigation, compact = false, children, className, ...rest }: MediaMapFrameProps) {\n  return <div className={cn('folio-media-map-frame', compact && 'folio-media-map-frame-compact', className)} {...rest}>{label && <span className=\"folio-media-map-label\">{label}</span>}<div className=\"folio-media-map-stage\">{children}{hint && <div className=\"folio-media-map-hint\">{hint}</div>}{navigation && <div className=\"folio-media-map-navigation\">{navigation}</div>}</div></div>\n}\n\nexport interface MediaMapNavigationProps {\n  zoomInLabel: string\n  zoomOutLabel: string\n  onZoomIn: () => void\n  onZoomOut: () => void\n}\n\nexport function MediaMapNavigation({ zoomInLabel, zoomOutLabel, onZoomIn, onZoomOut }: MediaMapNavigationProps) {\n  return <><Button variant=\"secondary\" iconOnly aria-label={zoomInLabel} onClick={onZoomIn}><RiAddLine size={18} aria-hidden=\"true\" /></Button><Button variant=\"secondary\" iconOnly aria-label={zoomOutLabel} onClick={onZoomOut}><RiSubtractLine size={18} aria-hidden=\"true\" /></Button></>\n}\n\nexport type MediaMapCanvasProps = ComponentPropsWithRef<'div'>\n\n/** A sized provider container. Map creation, themes and geographic math stay in the host. */\nexport function MediaMapCanvas({ className, ...rest }: MediaMapCanvasProps) {\n  return <div className={cn('folio-media-map-canvas', className)} {...rest} />\n}\n\nexport interface MediaMapPreviewProps {\n  title: ReactNode\n  image?: ReactNode\n  action?: ReactNode\n  place?: ReactNode\n  coordinates?: ReactNode\n  children?: ReactNode\n}\n\nexport function MediaMapPreview({ title, image, action, place, coordinates, children }: MediaMapPreviewProps) {\n  return <aside className=\"folio-media-map-preview\"><div className=\"folio-media-map-preview-image\">{image}{action && <div className=\"folio-media-map-preview-action\">{action}</div>}</div><div className=\"folio-media-map-preview-copy\"><h3>{title}</h3>{place && <p className=\"folio-media-map-place\">{place}</p>}{coordinates && <div className=\"folio-media-map-coordinates\">{coordinates}</div>}{children}</div></aside>\n}\n\nexport interface MediaMapArea {\n  id: string\n  label: ReactNode\n  count: ReactNode\n}\n\nexport interface MediaMapAreaListProps {\n  items: MediaMapArea[]\n  value?: string\n  onValueChange: (value: string) => void\n}\n\nexport function MediaMapAreaList({ items, value, onValueChange }: MediaMapAreaListProps) {\n  return (\n    <div className=\"folio-media-map-areas\">\n      {items.map((item) => (\n        <Button key={item.id} variant=\"ghost\" aria-pressed={value === item.id} onClick={() => onValueChange(item.id)} className=\"folio-media-map-area\">\n          <span className=\"folio-media-map-area-name\"><span aria-hidden=\"true\" />{item.label}</span>{' '}\n          <span className=\"folio-media-map-area-count\">{item.count}</span>\n        </Button>\n      ))}\n    </div>\n  )\n}\n\nexport interface MediaMapMarkerProps extends Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'> {\n  label: string\n  active?: boolean\n}\n\n/** A keyboard-operable 44px marker for a host's map-provider portal. */\nexport function MediaMapMarker({ label, active = false, className, ...rest }: MediaMapMarkerProps) {\n  return <Button {...rest} variant=\"ghost\" iconOnly aria-label={label} aria-pressed={active} className={cn('folio-media-map-marker', className)} style={{ width: 44, height: 44, ...rest.style }}><MediaMapPin active={active} /></Button>\n}\n\nexport interface MediaMapPinProps {\n  active?: boolean\n}\n\nexport function MediaMapPin({ active = false }: MediaMapPinProps) {\n  return <span className=\"folio-media-map-pin\" data-active={active || undefined} aria-hidden=\"true\"><span /></span>\n}\n\nexport function MediaMapSkeleton() {\n  return <div className=\"folio-media-map-skeleton folio-media-container\" aria-hidden=\"true\"><SkeletonBlock className=\"folio-media-map-canvas\" /></div>\n}\n"],"mappings":"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","names":[]}

package/dist/website/Reading/Reading.d.ts

@@ -128,6 +128,12 @@ interface PreviewPairProps {
     desktop: ReactNode;
     mobile?: ReactNode;
 }
+interface DeviceRowProps {
+    children: ReactNode;
+    label?: string;
+}
+/** Two or three phones side by side, the middle one raised a step, wrapping to a column on a narrow screen. */
+declare function DeviceRow({ children, label }: DeviceRowProps): react.JSX.Element;
 declare function PreviewPair({ desktop, mobile }: PreviewPairProps): react.JSX.Element;
 interface CommandTab {
     id: string;
@@ -200,4 +206,4 @@ interface CommandSnippetProps {
 }
 declare function CommandSnippet({ code, pieces, copyLabel, copiedLabel, className }: CommandSnippetProps): react.JSX.Element;
 
-export { ActionBand, type ActionBandProps, type ArchitectureColumnNode, ArchitectureColumns, type ArchitectureColumnsProps, AuthorPanel, type AuthorPanelProps, type CommandPiece, CommandSnippet, type CommandSnippetProps, type CommandTab, CommandTabs, type CommandTabsProps, ContentFigure, type ContentFigureProps, DetailMasthead, type DetailMastheadProps, DevicePreview, type DevicePreviewProps, FeaturePairs, type FeaturePairsProps, MediaPlayback, type MediaPlaybackProps, MobileOutline, type MobileOutlineProps, type OutlineItem, PreviewPair, type PreviewPairProps, ReadingFigure, type ReadingFigureProps, ReadingForm, type ReadingFormProps, ReadingLayout, type ReadingLayoutProps, ReadingLead, type ReadingLeadProps, type ReadingMetadataItem, ReadingPage, type ReadingPageProps, type ReadingPagerItem, ReadingProgress, ReadingSection, type ReadingSectionProps, ReadingSurface, type ReadingSurfaceProps, RecordPager, type RecordPagerProps, TableOfContents, type TableOfContentsProps, TokenLine, type TokenLineProps, isSelfNumbered, numberToc };
+export { ActionBand, type ActionBandProps, type ArchitectureColumnNode, ArchitectureColumns, type ArchitectureColumnsProps, AuthorPanel, type AuthorPanelProps, type CommandPiece, CommandSnippet, type CommandSnippetProps, type CommandTab, CommandTabs, type CommandTabsProps, ContentFigure, type ContentFigureProps, DetailMasthead, type DetailMastheadProps, DevicePreview, type DevicePreviewProps, DeviceRow, type DeviceRowProps, FeaturePairs, type FeaturePairsProps, MediaPlayback, type MediaPlaybackProps, MobileOutline, type MobileOutlineProps, type OutlineItem, PreviewPair, type PreviewPairProps, ReadingFigure, type ReadingFigureProps, ReadingForm, type ReadingFormProps, ReadingLayout, type ReadingLayoutProps, ReadingLead, type ReadingLeadProps, type ReadingMetadataItem, ReadingPage, type ReadingPageProps, type ReadingPagerItem, ReadingProgress, ReadingSection, type ReadingSectionProps, ReadingSurface, type ReadingSurfaceProps, RecordPager, type RecordPagerProps, TableOfContents, type TableOfContentsProps, TokenLine, type TokenLineProps, isSelfNumbered, numberToc };

package/dist/website/Reading/Reading.js

@@ -259,6 +259,9 @@ function DevicePreview({ kind, label, media, caption }) {
     caption && /* @__PURE__ */ jsx("figcaption", { children: caption })
   ] });
 }
+function DeviceRow({ children, label }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-device-row", role: label ? "group" : void 0, "aria-label": label, children });
+}
 function PreviewPair({ desktop, mobile }) {
   return /* @__PURE__ */ jsxs("div", { className: "folio-preview-pair", "data-mobile": Boolean(mobile) || void 0, children: [
     desktop,
@@ -336,6 +339,7 @@ export {
   ContentFigure,
   DetailMasthead,
   DevicePreview,
+  DeviceRow,
   FeaturePairs,
   MediaPlayback,
   MobileOutline,

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

@@ -1 +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":";AAmBiB,SAC6N,UAD7N,KAC+G,YAD/G;AAjBjB,SAAS,WAAW,QAAQ,gBAAqD;AACjF,SAAS,YAAY;AACrB,SAAS,iBAAiB,YAAY,mBAAmB;AACzD,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,cAAc,oBAAoB;AAClD,SAAS,iBAAiB;AAC1B,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,UAAU;AACnB,SAAS,0BAA0B;AAK5B,SAAS,eAAe,EAAE,UAAU,OAAO,KAAK,SAAS,OAAO,SAAS,WAAW,CAAC,GAAG,QAAQ,OAAO,GAAwB;AACpI,QAAM,UAAU,MAAM,UAAU,MAAM,OAAO,QAAQ,YAAY,IAAI,SAAS,OAAO,QAAQ,KAAK;AAClG,SAAO,qBAAC,YAAO,WAAU,yBAAwB,cAAY,OAAO,gBAAc,WAAW,QAAW,gBAAc,MAAM,UAAU,MAAM,QACzI;AAAA,gBAAY,oBAAC,SAAI,WAAU,qBAAqB,oBAAS;AAAA,IAAQ,WAAW,oBAAC,OAAE,WAAU,wBAAwB,mBAAQ;AAAA,IAC1H,qBAAC,SAAI,WAAU,wBAAuB,cAAY,QAAQ,KAAK,KAAK,QAAW,gBAAc,WAAW,QAAY;AAAA,cAAQ,qBAAC,SAAI,WAAU,qBAAoB;AAAA,4BAAC,QAAI,iBAAM;AAAA,QAAM,OAAO,oBAAC,OAAE,WAAU,oBAAoB,eAAI;AAAA,SAAK,IAAS,iCAAE;AAAA,4BAAC,QAAI,iBAAM;AAAA,QAAM,OAAO,oBAAC,OAAE,WAAU,oBAAoB,eAAI;AAAA,SAAK;AAAA,MAAK,SAAS,oBAAC,WAAO,iBAAM;AAAA,OAAS;AAAA,KACjV,SAAS,SAAS,KAAK,YAAY,qBAAC,SAAI,WAAU,wBAAuB;AAAA,0BAAC,QAAI,mBAAS,IAAI,CAAC,SAAS,qBAAC,SAAqB;AAAA,4BAAC,QAAI,eAAK,OAAM;AAAA,QAAK,qBAAC,QAAI;AAAA,eAAK,QAAQ,oBAAC,aAAU,MAAK,MAAK,OAAO,OAAO;AAAA,UAAI,KAAK,WAAW,oBAAC,UAAK,UAAU,KAAK,UAAW,eAAK,OAAM,IAAU,KAAK;AAAA,WAAM;AAAA,WAA1K,KAAK,KAA0K,CAAM,GAAE;AAAA,MAAM,WAAW,oBAAC,SAAI,WAAU,wBAAwB,mBAAQ;AAAA,OAAO;AAAA,KACjX;AACF;AAEO,SAAS,cAAc,EAAE,UAAU,SAAS,WAAW,GAAG,KAAK,GAAuB;AAAE,SAAO,qBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AAAA,wBAAC,SAAI,WAAU,sBAAsB,UAAS;AAAA,IAAO;AAAA,KAAQ;AAAO;AAGpO,SAAS,eAAe,EAAE,OAAO,SAAS,MAAM,SAAS,UAAU,UAAU,WAAW,GAAG,KAAK,GAAwB;AAC7H,SAAO,qBAAC,aAAQ,WAAW,GAAG,yBAAyB,SAAS,GAAG,gBAAc,WAAW,QAAW,iBAAe,YAAY,QAAY,GAAG,MAAQ;AAAA,cAAS,YAAY,qBAAC,SAAI,WAAU,yBAAwB;AAAA,0BAAC,QAAI,iBAAM;AAAA,MAAM,WAAW,oBAAC,UAAM,mBAAQ;AAAA,OAAQ;AAAA,IAAQ,QAAQ,oBAAC,OAAE,WAAU,sBAAsB,gBAAK;AAAA,IAAM;AAAA,KAAS;AACjV;AAEO,SAAS,YAAY,EAAE,UAAU,OAAO,YAAY,GAAqB;AAAE,SAAO,qBAAC,SAAI,WAAU,sBAAqB;AAAA,yBAAC,OAAG;AAAA;AAAA,MAAU,SAAS,qBAAC,UAAK;AAAA;AAAA,QAAE;AAAA,SAAM;AAAA,OAAQ;AAAA,IAAK,eAAe,oBAAC,OAAG,uBAAY;AAAA,KAAK;AAAO;AAGnN,SAAS,YAAY,EAAE,OAAO,UAAU,KAAK,GAAqB;AACvE,MAAI,CAAC,YAAY,CAAC,KAAM,QAAO;AAC/B,QAAM,OAAO,CAAC,MAAoC,cAA+B,OAAO,oBAAC,QAAK,WAAU,2BAA0B,kBAAgB,WAAY,6BAAmB,KAAK,MAAM,iCAAG;AAAA,SAAK,SAAS,oBAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAAA,IAAQ,qBAAC,UAAK;AAAA,0BAAC,UAAK,WAAU,gCAAgC,eAAK,WAAU;AAAA,MAAQ;AAAA,MAAI,oBAAC,YAAQ,eAAK,OAAM;AAAA,OAAS;AAAA,KAAO,CAAG,GAAE,IAAU,oBAAC,UAAK;AACtZ,SAAO,qBAAC,SAAI,WAAU,sBAAqB,cAAY,OAAQ;AAAA,SAAK,UAAU,MAAM;AAAA,IAAG,KAAK,MAAM,MAAM;AAAA,KAAE;AAC5G;AAEA,MAAM,gBAAgB;AACf,SAAS,eAAe,OAA+B;AAC5D,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,QAAM,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC;AACvD,QAAM,WAAW,MAAM,OAAO,CAAC,SAAS,KAAK,UAAU,GAAG;AAC1D,SAAO,SAAS,UAAU,KAAK,SAAS,OAAO,CAAC,SAAS,cAAc,KAAK,KAAK,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS;AACjH;AACO,SAAS,UAAU,OAAgC;AACxD,QAAM,MAAM,MAAM,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,IAAI;AAC1E,MAAI,QAAQ;AAAG,MAAI,QAAQ;AAC3B,SAAO,MAAM,IAAI,CAAC,SAAS,KAAK,SAAS,OAAO,QAAQ,GAAG,OAAO,EAAE,KAAK,KAAK,GAAG,KAAK,IAAI,EAAE,KAAK,EAAE;AACrG;AAEO,SAAS,gBAAgB,EAAE,OAAO,OAAO,YAAY,QAAQ,YAAY,WAAW,MAAM,GAAyB;AACxH,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAM,CAAC,GAAG,MAAM,EAAE;AAC3D,QAAM,WAAW,OAAsB,IAAI;AAC3C,QAAM,eAAe,OAAkD,MAAS;AAChF,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,cAAc,cAAc,UAAU,CAAC,eAAe,KAAK;AACjE,QAAM,MAAM,MAAM,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,IAAI;AAC1E,YAAU,MAAM,MAAM,aAAa,aAAa,OAAO,GAAG,CAAC,CAAC;AAC5D,YAAU,MAAM;AACd,UAAM,WAAW,MAAM,IAAI,CAAC,SAAS,SAAS,eAAe,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,SAA8B,QAAQ,IAAI,CAAC;AAC1H,UAAM,QAAQ,SAAS,CAAC;AACxB,QAAI,CAAC,MAAO;AACZ,UAAM,SAAS,MAAM;AACnB,UAAI,UAAU;AACd,iBAAW,WAAW,SAAU,KAAI,QAAQ,sBAAsB,EAAE,OAAO,OAAO,cAAc,KAAK,WAAU;AAC/G,UAAI,SAAS,WAAW,QAAQ,OAAO,SAAS,QAAS;AACzD,eAAS,UAAU;AACnB,kBAAY,QAAQ,EAAE;AAAA,IACxB;AACA,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAAG,WAAO,iBAAiB,UAAU,MAAM;AAAG,WAAO;AAChH,WAAO,MAAM;AAAE,aAAO,oBAAoB,UAAU,MAAM;AAAG,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAAE;AAAA,EAC5G,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,SAA+F,CAAC;AACtG,QAAM,QAAQ,CAAC,MAAM,UAAU;AAAE,UAAM,OAAO,OAAO,GAAG,EAAE;AAAG,QAAI,KAAK,SAAS,OAAO,CAAC,KAAM,QAAO,KAAK,EAAE,MAAM,OAAO,MAAM,CAAC,EAAE,CAAC;AAAA,QAAQ,MAAK,KAAK,KAAK,EAAE,MAAM,MAAM,CAAC;AAAA,EAAE,CAAC;AAC3K,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,QAAM,OAAO,CAAC,MAAmB,OAAe,WAAqB,qBAAC,OAAE,MAAM,IAAI,KAAK,EAAE,IAAI,eAAa,KAAK,IAAI,gBAAc,aAAa,KAAK,KAAK,SAAS,QAAW,iBAAe,QAAQ,SAAS,CAAC,UAAU;AACrN,aAAS,UAAU,KAAK;AAAI,iBAAa,aAAa,OAAO;AAAG,iBAAa,UAAU,WAAW,MAAM;AAAE,eAAS,UAAU;AAAA,IAAK,GAAG,IAAI;AAAG,gBAAY,KAAK,EAAE;AAC/J,QAAI,YAAY;AAAE,YAAM,eAAe;AAAG,iBAAW,KAAK,EAAE;AAAA,IAAE;AAAA,EAChE,GAAI;AAAA,mBAAe,oBAAC,UAAK,eAAW,MAAE,kBAAQ,KAAK,GAAE;AAAA,IAAS,KAAK;AAAA,KAAM;AACzE,SAAO,oBAAC,SAAI,WAAU,aAAY,cAAY,OAAO,+BAAC,SAAI;AAAA,wBAAC,OAAG,iBAAM;AAAA,IAAI,oBAAC,QAAI,iBAAO,IAAI,CAAC,UAAU;AACjG,YAAM,OAAO,YAAY,MAAM,KAAK,OAAO,YAAY,MAAM,KAAK,KAAK,CAAC,EAAE,KAAK,MAAM,KAAK,OAAO,QAAQ;AACzG,aAAO,qBAAC,QAAwB;AAAA,aAAK,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,SAAS,OAAO,MAAS;AAAA,QAAG,MAAM,KAAK,SAAS,KAAK,QAAQ,oBAAC,QAAI,gBAAM,KAAK,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,oBAAC,QAAkB,eAAK,MAAM,KAAK,KAA1B,KAAK,EAAuB,CAAK,GAAE;AAAA,WAA3M,MAAM,KAAK,EAAsM;AAAA,IACnO,CAAC,GAAE;AAAA,KAAK,GAAM;AAChB;AAEO,SAAS,cAAc,EAAE,OAAO,OAAO,WAAW,WAAW,GAAuB;AACzF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO,qBAAC,SAAM,MAAY,cAAc,SAAS;AAAA,wBAAC,gBAAa,SAAO,MAAC,8BAAC,UAAO,SAAQ,aAAY,UAAQ,MAAC,cAAY,WAAW,WAAU,yBAAwB,8BAAC,mBAAgB,MAAM,IAAI,eAAY,QAAO,GAAE,GAAS;AAAA,IAAe,oBAAC,gBAAa,OAAc,YAAwB,MAAK,UAAS,WAAU,uBAAsB,oBAAkB,QAAW,8BAAC,mBAAgB,OAAc,OAAO,OAAO,UAAQ,MAAC,YAAY,CAAC,OAAO;AACpb,cAAQ,KAAK;AACb,4BAAsB,MAAM;AAAE,cAAM,SAAS,SAAS,eAAe,EAAE;AAAG,YAAI,QAAQ;AAAE,iBAAO,eAAe,EAAE,UAAU,OAAO,WAAW,kCAAkC,EAAE,UAAU,SAAS,UAAU,OAAO,QAAQ,CAAC;AAAG,iBAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,EAAE,EAAE;AAAA,QAAE;AAAA,MAAE,CAAC;AAAA,IACrR,GAAG,GAAE;AAAA,KAAe;AACtB;AACO,SAAS,kBAAkB;AAChC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,YAAU,MAAM;AACd,UAAM,SAAS,MAAM;AAAE,YAAM,MAAM,SAAS;AAAiB,YAAM,MAAM,IAAI,eAAe,IAAI;AAAc,kBAAY,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,YAAY,MAAM,GAAG,CAAC,IAAI,CAAC;AAAA,IAAE;AAC/L,WAAO;AAAG,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAAG,WAAO,iBAAiB,UAAU,MAAM;AAChH,WAAO,MAAM;AAAE,aAAO,oBAAoB,UAAU,MAAM;AAAG,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAAE;AAAA,EAC5G,GAAG,CAAC,CAAC;AACL,SAAO,oBAAC,SAAI,WAAU,0BAAyB,eAAW,MAAC,8BAAC,SAAI,OAAO,EAAE,OAAO,GAAG,QAAQ,IAAI,GAAG,GAAE;AACtG;AAEO,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,MAAM,GAAqB;AAAE,SAAO,qBAAC,WAAM,WAAU,sBAAsB;AAAA,cAAU,oBAAC,SAAI,WAAU,uBAAsB,eAAW,MAAE,kBAAO;AAAA,IAAO,qBAAC,SAAI;AAAA,0BAAC,QAAI,gBAAK;AAAA,MAAM,QAAQ,oBAAC,SAAI,WAAU,qBAAqB,gBAAK;AAAA,MAAQ,OAAO,oBAAC,OAAG,eAAI;AAAA,MAAM,SAAS,oBAAC,SAAI,WAAU,sBAAsB,iBAAM;AAAA,OAAO;AAAA,KAAM;AAAS;AAGlX,SAAS,cAAc,EAAE,OAAO,cAAc,YAAY,QAAQ,QAAQ,QAAQ,UAAU,MAAM,QAAQ,GAAuB;AAAE,SAAO,qBAAC,YAAO,WAAU,wBAAuB,cAAY,OAAO,YAAU,KAAK;AAAA,wBAAC,SAAI,OAAO,EAAE,aAAa,MAAM,GAAI,iBAAM;AAAA,KAAQ,gBAAgB,eAAe,qBAAC,gBAAW;AAAA,0BAAC,UAAM,wBAAa;AAAA,MAAO,oBAAC,UAAM,sBAAW;AAAA,OAAO;AAAA,KAAc;AAAU;AAE/X,SAAS,cAAc,EAAE,KAAK,QAAQ,OAAO,WAAW,YAAY,SAAS,GAAuB;AACzG,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,MAAM,OAAyB,IAAI;AACzC,YAAU,MAAM;AAAE,QAAI,OAAO,OAAO,eAAe,WAAY;AAAQ,UAAM,QAAQ,OAAO,WAAW,kCAAkC;AAAG,UAAM,SAAS,MAAM,gBAAgB,MAAM,OAAO;AAAG,WAAO;AAAG,UAAM,iBAAiB,UAAU,MAAM;AAAG,WAAO,MAAM,MAAM,oBAAoB,UAAU,MAAM;AAAA,EAAE,GAAG,CAAC,CAAC;AACnT,MAAI,aAAc,QAAO;AACzB,SAAO,qBAAC,SAAI,WAAU,wBAAuB;AAAA,wBAAC,WAAM,KAAU,KAAU,QAAgB,cAAY,OAAO,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,SAAQ,YAAW,QAAQ,MAAM,WAAW,IAAI,GAAG,SAAS,MAAM,WAAW,KAAK,GAAG;AAAA,IAAE,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,UAAQ,MAAC,cAAY,UAAU,aAAa,WAAW,SAAS,MAAM;AAAE,UAAI,QAAS,KAAI,SAAS,MAAM;AAAA,UAAQ,MAAK,IAAI,SAAS,KAAK,EAAE,MAAM,MAAM;AAAA,MAAC,CAAC;AAAA,IAAE,GAAI,oBAAU,oBAAC,eAAY,MAAM,IAAI,eAAW,MAAC,IAAK,oBAAC,cAAW,MAAM,IAAI,eAAW,MAAC,GAAG;AAAA,KAAS;AAC3gB;AAGO,SAAS,WAAW,EAAE,OAAO,aAAa,SAAS,QAAQ,GAAoB;AAAE,SAAO,qBAAC,aAAQ,WAAU,qBAAqB;AAAA,eAAW,oBAAC,UAAK,WAAU,8BAA8B,mBAAQ;AAAA,IAAQ,qBAAC,SAAI,WAAU,2BAA0B;AAAA,0BAAC,QAAI,iBAAM;AAAA,MAAM,eAAe,oBAAC,OAAG,uBAAY;AAAA,OAAK;AAAA,IAAO,WAAW,oBAAC,SAAI,WAAU,8BAA8B,mBAAQ;AAAA,KAAO;AAAW;AAEhY,SAAS,aAAa,EAAE,MAAM,GAAsB;AAAE,SAAO,oBAAC,SAAI,WAAU,uBAAuB,gBAAM,IAAI,CAAC,MAAM,UAAU,qBAAC,SAA4B;AAAA,SAAK,SAAS,oBAAC,UAAM,eAAK,OAAM;AAAA,IAAS,KAAK,SAAS,oBAAC,QAAI,eAAK,OAAM;AAAA,IAAM,oBAAC,SAAI,WAAU,6BAA6B,eAAK,aAAY;AAAA,OAA7J,KAAK,MAAM,KAAwJ,CAAM,GAAE;AAAO;AAE1T,SAAS,cAAc,EAAE,MAAM,OAAO,OAAO,QAAQ,GAAuB;AAAE,SAAO,qBAAC,YAAO,WAAU,wBAAuB,aAAW,MAAM;AAAA,yBAAC,SAAK;AAAA,eAAS,aAAa,qBAAC,SAAI,WAAU,qBAAoB;AAAA,4BAAC,UAAK,eAAW,MAAC,kCAAK;AAAA,QAAO,oBAAC,UAAM,iBAAM;AAAA,SAAO;AAAA,MAAO,oBAAC,SAAI,WAAU,uBAAuB,iBAAM;AAAA,OAAM;AAAA,IAAO,WAAW,oBAAC,gBAAY,mBAAQ;AAAA,KAAc;AAAU;AAExX,SAAS,YAAY,EAAE,SAAS,OAAO,GAAqB;AAAE,SAAO,qBAAC,SAAI,WAAU,sBAAqB,eAAa,QAAQ,MAAM,KAAK,QAAY;AAAA;AAAA,IAAS;AAAA,KAAO;AAAO;AAG5K,SAAS,YAAY,EAAE,OAAO,MAAM,WAAW,aAAa,OAAO,GAAqB;AAC7F,QAAM,QAAQ,KAAK,CAAC;AACpB,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,qBAAC,SAAI,WAAU,sBAAqB;AAAA,yBAAC,QAAK,cAAc,MAAM,IAAI;AAAA,0BAAC,YAAS,cAAY,OAAQ,eAAK,IAAI,CAAC,QAAQ,oBAAC,eAAY,OAAO,IAAI,IAAkB,cAAI,QAAb,IAAI,EAAc,CAAc,GAAE;AAAA,MAAY,KAAK,IAAI,CAAC,QAAQ,qBAAC,eAAY,OAAO,IAAI,IAAkB;AAAA,YAAI,SAAS,IAAI,CAAC,YAAY,oBAAC,aAAwB,MAAM,SAAS,WAAsB,eAA9C,OAAwE,CAAE;AAAA,QAAG,IAAI,QAAQ,oBAAC,OAAG,cAAI,MAAK;AAAA,QAAM,IAAI,QAAQ,oBAAC,OAAG,cAAI,MAAK;AAAA,QAAM,IAAI;AAAA,WAAtM,IAAI,EAAuM,CAAc;AAAA,OAAE;AAAA,IAAQ,UAAU,oBAAC,SAAI,WAAU,wBAAwB,kBAAO;AAAA,KAAO;AAC/hB;AAEO,SAAS,eAAe,EAAE,UAAU,UAAU,WAAW,GAAG,KAAK,GAAwB;AAAE,SAAO,oBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAG,sBAAkB,MAAC,iBAAe,YAAY,QAAY,GAAG,MAAO,UAAS;AAAO;AAE9O,SAAS,YAAY,EAAE,QAAQ,WAAW,GAAG,MAAM,GAAqB;AAAE,SAAO,oBAAC,UAAK,WAAW,GAAG,sBAAsB,SAAS,GAAG,eAAa,UAAU,QAAY,GAAG,OAAO;AAAG;AAGvL,SAAS,oBAAoB,EAAE,SAAS,WAAW,GAA6B;AACrF,SAAO,qBAAC,SAAI,WAAU,8BAA6B;AAAA,wBAAC,SAAK,kBAAQ,IAAI,CAAC,QAAQ,UAAU,qBAAC,SAAgB,kBAAgB,QAAQ,YAAY,UAAU,OAAO,SAAS,KAAK,QAAW;AAAA,0BAAC,QAAI,iBAAO,OAAM;AAAA,MAAM,OAAO,MAAM,IAAI,CAAC,SAAS,qBAAC,SAAI,WAAU,2BAAwC;AAAA,4BAAC,YAAQ,eAAK,OAAM;AAAA,QAAU,KAAK,eAAe,oBAAC,UAAM,eAAK,aAAY;AAAA,WAAnF,KAAK,EAAsF,CAAM;AAAA,SAAvR,KAAyR,CAAM,GAAE;AAAA,IAAO,cAAc,WAAW,SAAS,KAAK,oBAAC,SAAI,WAAU,iCAAiC,qBAAW,IAAI,CAAC,SAAS,qBAAC,SAAkB;AAAA,0BAAC,YAAQ,eAAK,OAAM;AAAA,MAAU,KAAK,eAAe,oBAAC,UAAM,eAAK,aAAY;AAAA,SAAnF,KAAK,EAAsF,CAAM,GAAE;AAAA,KAAO;AAChnB;AAEO,SAAS,UAAU,EAAE,OAAO,OAAO,YAAY,OAAI,GAAmB;AAC3E,SAAO,qBAAC,SAAI,WAAU,oBAAmB,aAAW,cAAc,UAAO,QACtE;AAAA,aAAS,oBAAC,UAAM,iBAAM;AAAA,IACvB,oBAAC,QAAG,MAAK,QAAO,cAAY,OAAO,UAAU,WAAW,QAAQ,QAC7D,gBAAM,IAAI,CAAC,MAAM,UAAU,qBAAC,QAC1B;AAAA,cAAQ,KAAK,oBAAC,UAAK,eAAW,MAAC,WAAU,yBAAyB,qBAAU;AAAA,MAC5E,KAAK,QAAQ,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAAE,eAAK,MAAK;AAAA,MAAS,KAAK,SAAS,oBAAC,YAAQ,eAAK,OAAM,IAAY,KAAK;AAAA,SAFjG,KAGrC,CAAK,GACP;AAAA,KACF;AACF;AAEO,SAAS,cAAc,EAAE,UAAU,SAAS,KAAK,GAAuB;AAAE,SAAO,qBAAC,YAAO,WAAU,wBAAuB,aAAW,QAAQ,QAAY;AAAA;AAAA,IAAU,WAAW,oBAAC,gBAAY,mBAAQ;AAAA,KAAc;AAAU;AAE3N,SAAS,YAAY,EAAE,UAAU,WAAW,GAAG,MAAM,GAAqB;AAAE,SAAO,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,OAAQ,UAAS;AAAW;AAG5K,SAAS,eAAe,EAAE,MAAM,QAAQ,WAAW,aAAa,UAAU,GAAwB;AACvG,QAAM,SAAS,CAAC,UAAkB,MAAM,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,QAAQ,EAAE,QAAQ,MAAM,OAAO;AAExJ,QAAM,cAAc,QAAQ,IAAI,CAAC,UAAU,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,SAAS;AACpF,QAAM,OAAO,cAAc,cAAc,YAAY,IAAI,CAAC,UAAU,8BAA8B,MAAM,YAAY,QAAQ,KAAK,OAAO,MAAM,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,kBAAkB;AACxL,SAAO,oBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAG,8BAAC,aAAU,MAAY,MAAY,WAAsB,aAA0B,GAAE;AACtJ;","names":[]}
+{"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 interface DeviceRowProps { children: ReactNode; label?: string }\n/** Two or three phones side by side, the middle one raised a step, wrapping to a column on a narrow screen. */\nexport function DeviceRow({ children, label }: DeviceRowProps) { return <div className=\"folio-device-row\" role={label ? 'group' : undefined} aria-label={label}>{children}</div> }\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

@@ -30,10 +30,18 @@ interface LoadingRecordsProps {
 declare function LoadingRecords({ rows, media }: LoadingRecordsProps): react.JSX.Element;
 interface WebsiteLoadingProps extends LoadingRecordsProps, LoadingRouteIntroProps {
     label: string;
-    layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity';
+    layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity' | 'article' | 'photograph';
     filters?: boolean;
 }
-/** Named loading layouts for the website's reusable page shapes. */
+/**
+ * Named loading layouts for the website's reusable page shapes.
+ *
+ * Every layout waits a beat before it shows and then fades in, so a route that
+ * resolves within that beat goes straight from the old page to the new one
+ * instead of flashing grey bars for a frame. A detail route needs its own
+ * `article` or `photograph` shape: inheriting the list skeleton above it
+ * promises a layout the page then abandons.
+ */
 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 };