@misoto22/folio 0.0.0 → 0.17.0

package/dist/website/Music/Music.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiPauseFill, RiPlayFill } from "@remixicon/react";
+import { useId } from "react";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Button } from "../../components/Button/Button.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { Progress } from "../../components/Progress/Progress.js";
+import { StatusDot } from "../../components/StatusDot/StatusDot.js";
+import { Text } from "../../components/Text/Text.js";
+import { cn } from "../../lib/cn.js";
+function PreviewAction({ action, children, overlay = false }) {
+  return /* @__PURE__ */ jsxs(Button, { type: "button", iconOnly: true, variant: "ghost", onClick: action.onToggle, disabled: action.disabled, "aria-label": action.label, title: action.disabled ? action.label : void 0, className: cn("folio-media-preview min-h-11 min-w-11", overlay && "folio-media-preview--overlay"), children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "folio-media-preview__control", "data-playing": action.playing || void 0, "aria-hidden": true, children: action.disabled ? "\u2014" : action.playing ? /* @__PURE__ */ jsx(RiPauseFill, { size: 16, "aria-hidden": true }) : /* @__PURE__ */ jsx(RiPlayFill, { size: 16, "aria-hidden": true }) })
+  ] });
+}
+function MediaListRow({ index, artwork, title, description, trailing, preview, active = false, artworkShape = "square", className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-media-row", className), "data-active": active || void 0, "data-artwork-shape": artworkShape, ...rest, children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: active ? "strong" : "muted", children: index }),
+    /* @__PURE__ */ jsx(PreviewAction, { action: preview, children: artwork }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-row__copy", children: [
+      /* @__PURE__ */ jsx("div", { children: title }),
+      description && /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "muted", className: "block truncate", children: description })
+    ] }),
+    trailing && /* @__PURE__ */ jsx("div", { className: "folio-media-row__trailing", children: trailing })
+  ] });
+}
+function MusicFeature({ label, title, description, artwork, artworkFallback, live = false, notice, action, progress, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { role: "region", "aria-label": label, className: cn("folio-media-feature", className), ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-media-feature__artwork", children: artwork ?? /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", className: "m-0 max-w-[16ch]", children: artworkFallback }) }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-feature__copy", children: [
+      /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", tone: "muted", className: "mb-5 inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(StatusDot, { tone: "neutral", pulse: live }),
+        label
+      ] }),
+      notice && /* @__PURE__ */ jsx(Text, { role: "status", size: "sm", className: "mb-5 max-w-[42ch]", children: notice }),
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "lead", className: "mb-3", children: title }),
+      description && /* @__PURE__ */ jsx(Text, { size: "lead", className: "mb-5", children: description }),
+      progress && /* @__PURE__ */ jsxs("div", { className: "folio-media-feature__progress", children: [
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: progress.currentLabel }),
+        /* @__PURE__ */ jsx(Progress, { label: progress.label, value: progress.value, max: progress.max }),
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: progress.endLabel })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "mt-8", children: action })
+    ] })
+  ] });
+}
+function MediaCollectionCard({ title, artwork, tag, description, metadata, preview, className, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("article", { "aria-labelledby": id, className: cn("folio-media-collection", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-collection__artwork", children: [
+      artwork,
+      tag && /* @__PURE__ */ jsx(Badge, { className: "absolute start-2 top-2", children: tag }),
+      /* @__PURE__ */ jsx(PreviewAction, { action: preview, overlay: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-collection__copy", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, id, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { size: "sm", className: "mb-3 line-clamp-2", children: description }),
+      metadata && /* @__PURE__ */ jsx("div", { className: "folio-media-collection__metadata", children: metadata })
+    ] })
+  ] });
+}
+function MusicSection({ title, caption, children, layout = "list", className, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": id, className: cn("folio-music-section", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-music-section__header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, id, children: title }),
+      caption && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: caption })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: layout === "collections" ? "folio-music-section__collections" : void 0, children })
+  ] });
+}
+export {
+  MediaCollectionCard,
+  MediaListRow,
+  MusicFeature,
+  MusicSection
+};
+//# sourceMappingURL=Music.js.map

package/dist/website/Music/Music.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Music/Music.tsx"],"sourcesContent":["'use client'\n\nimport { RiPauseFill, RiPlayFill } from '@remixicon/react'\nimport { useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button } from '../../components/Button/Button'\nimport { Heading } from '../../components/Heading/Heading'\nimport { Progress } from '../../components/Progress/Progress'\nimport { StatusDot } from '../../components/StatusDot/StatusDot'\nimport { Text } from '../../components/Text/Text'\nimport { cn } from '../../lib/cn'\n\nexport interface MediaPreviewAction {\n  label: string\n  disabled?: boolean\n  playing?: boolean\n  onToggle: () => void\n}\n\nfunction PreviewAction({ action, children, overlay = false }: { action: MediaPreviewAction; children?: ReactNode; overlay?: boolean }) {\n  return (\n    <Button type=\"button\" iconOnly variant=\"ghost\" onClick={action.onToggle} disabled={action.disabled} aria-label={action.label} title={action.disabled ? action.label : undefined} className={cn('folio-media-preview min-h-11 min-w-11', overlay && 'folio-media-preview--overlay')}>\n      {children}\n      <span className=\"folio-media-preview__control\" data-playing={action.playing || undefined} aria-hidden>\n        {action.disabled ? '—' : action.playing ? <RiPauseFill size={16} aria-hidden /> : <RiPlayFill size={16} aria-hidden />}\n      </span>\n    </Button>\n  )\n}\n\nexport interface MediaListRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  index: number\n  artwork?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  trailing?: ReactNode\n  preview: MediaPreviewAction\n  active?: boolean\n  artworkShape?: 'square' | 'circle'\n}\n\n/** A ranked recording or artist, controlled by the host's one media player. */\nexport function MediaListRow({ index, artwork, title, description, trailing, preview, active = false, artworkShape = 'square', className, ...rest }: MediaListRowProps) {\n  return (\n    <div className={cn('folio-media-row', className)} data-active={active || undefined} data-artwork-shape={artworkShape} {...rest}>\n      <Text as=\"span\" size=\"xs\" tone={active ? 'strong' : 'muted'}>{index}</Text>\n      <PreviewAction action={preview}>{artwork}</PreviewAction>\n      <div className=\"folio-media-row__copy\"><div>{title}</div>{description && <Text as=\"span\" size=\"sm\" tone=\"muted\" className=\"block truncate\">{description}</Text>}</div>\n      {trailing && <div className=\"folio-media-row__trailing\">{trailing}</div>}\n    </div>\n  )\n}\n\nexport interface MusicFeatureProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  label: string\n  title: ReactNode\n  description?: ReactNode\n  artwork?: ReactNode\n  artworkFallback: string\n  live?: boolean\n  notice?: string\n  action?: ReactNode\n  progress?: { label: string; value: number; max: number; currentLabel: string; endLabel: string }\n}\n\n/** The same media feature geometry for playing, recent and unavailable recordings. */\nexport function MusicFeature({ label, title, description, artwork, artworkFallback, live = false, notice, action, progress, className, ...rest }: MusicFeatureProps) {\n  return (\n    <section role=\"region\" aria-label={label} className={cn('folio-media-feature', className)} {...rest}>\n      <div className=\"folio-media-feature__artwork\">{artwork ?? <Text size=\"sm\" tone=\"muted\" className=\"m-0 max-w-[16ch]\">{artworkFallback}</Text>}</div>\n      <div className=\"folio-media-feature__copy\">\n        <Text as=\"span\" size=\"xs\" tone=\"muted\" className=\"mb-5 inline-flex items-center gap-2\"><StatusDot tone=\"neutral\" pulse={live} />{label}</Text>\n        {notice && <Text role=\"status\" size=\"sm\" className=\"mb-5 max-w-[42ch]\">{notice}</Text>}\n        <Heading level={2} size=\"lead\" className=\"mb-3\">{title}</Heading>\n        {description && <Text size=\"lead\" className=\"mb-5\">{description}</Text>}\n        {progress && <div className=\"folio-media-feature__progress\"><Text as=\"span\" size=\"xs\" tone=\"muted\">{progress.currentLabel}</Text><Progress label={progress.label} value={progress.value} max={progress.max} /><Text as=\"span\" size=\"xs\" tone=\"muted\">{progress.endLabel}</Text></div>}\n        {action && <div className=\"mt-8\">{action}</div>}\n      </div>\n    </section>\n  )\n}\n\nexport interface MediaCollectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  artwork?: ReactNode\n  tag?: string | null\n  description?: string | null\n  metadata?: ReactNode\n  preview: MediaPreviewAction\n}\n\n/** A playlist, album or other media collection with one explicit preview action. */\nexport function MediaCollectionCard({ title, artwork, tag, description, metadata, preview, className, ...rest }: MediaCollectionCardProps) {\n  const id = useId()\n  return (\n    <article aria-labelledby={id} className={cn('folio-media-collection', className)} {...rest}>\n      <div className=\"folio-media-collection__artwork\">{artwork}{tag && <Badge className=\"absolute start-2 top-2\">{tag}</Badge>}<PreviewAction action={preview} overlay /></div>\n      <div className=\"folio-media-collection__copy\"><Heading level={3} id={id}>{title}</Heading>{description && <Text size=\"sm\" className=\"mb-3 line-clamp-2\">{description}</Text>}{metadata && <div className=\"folio-media-collection__metadata\">{metadata}</div>}</div>\n    </article>\n  )\n}\n\nexport interface MusicSectionProps extends HTMLAttributes<HTMLElement> {\n  title: string\n  caption?: string\n  children: ReactNode\n  layout?: 'list' | 'collections'\n}\n\n/** A media list's heading, caption and collection layout. */\nexport function MusicSection({ title, caption, children, layout = 'list', className, ...rest }: MusicSectionProps) {\n  const id = useId()\n  return (\n    <section aria-labelledby={id} className={cn('folio-music-section', className)} {...rest}>\n      <header className=\"folio-music-section__header\"><Heading level={2} id={id}>{title}</Heading>{caption && <Text as=\"span\" size=\"xs\" tone=\"muted\">{caption}</Text>}</header>\n      <div className={layout === 'collections' ? 'folio-music-section__collections' : undefined}>{children}</div>\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/website/Portfolio/FrameLayout.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** Justified photo rows preserve image proportions without leaving masonry tails. */
+declare function FrameLayout({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { FrameLayout as default };

package/dist/website/Portfolio/FrameLayout.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Children, useLayoutEffect, useRef } from "react";
+function FrameLayout({ children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const grid = ref.current;
+    if (!grid) return;
+    const measure = () => {
+      const columns = grid.clientWidth >= 600 ? 3 : 2;
+      const items = Array.from(grid.children);
+      for (let start = 0; start < items.length; start += columns) {
+        const row = items.slice(start, start + columns);
+        const ratios = row.map((item) => {
+          const image = item.querySelector("img");
+          const width = image?.naturalWidth || Number(image?.getAttribute("width"));
+          const height = image?.naturalHeight || Number(image?.getAttribute("height"));
+          return width > 0 && height > 0 ? width / height : 1;
+        });
+        const total = ratios.reduce((sum, ratio) => sum + ratio, 0);
+        row.forEach((item, index) => {
+          const share = (ratios[index] ?? 1) / total;
+          item.style.flexBasis = `calc(${share * 100}% - ${(row.length - 1) * 12 * share}px)`;
+        });
+      }
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(grid);
+    grid.addEventListener("load", measure, true);
+    measure();
+    return () => {
+      observer.disconnect();
+      grid.removeEventListener("load", measure, true);
+    };
+  }, [children]);
+  return /* @__PURE__ */ jsx("div", { ref, children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: "folio-frame-layout-item", children: child })) });
+}
+var FrameLayout_default = FrameLayout;
+export {
+  FrameLayout_default as default
+};
+//# sourceMappingURL=FrameLayout.js.map

package/dist/website/Portfolio/FrameLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Portfolio/FrameLayout.tsx"],"sourcesContent":["'use client'\n\nimport { Children, useLayoutEffect, useRef, type ReactNode } from 'react'\n\n/** Justified photo rows preserve image proportions without leaving masonry tails. */\nfunction FrameLayout({ children }: { children: ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null)\n  useLayoutEffect(() => {\n    const grid = ref.current\n    if (!grid) return\n    const measure = () => {\n      const columns = grid.clientWidth >= 600 ? 3 : 2\n      const items = Array.from(grid.children) as HTMLElement[]\n      for (let start = 0; start < items.length; start += columns) {\n        const row = items.slice(start, start + columns)\n        const ratios = row.map(item => {\n          const image = item.querySelector('img')\n          const width = image?.naturalWidth || Number(image?.getAttribute('width'))\n          const height = image?.naturalHeight || Number(image?.getAttribute('height'))\n          return width > 0 && height > 0 ? width / height : 1\n        })\n        const total = ratios.reduce((sum, ratio) => sum + ratio, 0)\n        row.forEach((item, index) => {\n          const share = (ratios[index] ?? 1) / total\n          item.style.flexBasis = `calc(${share * 100}% - ${(row.length - 1) * 12 * share}px)`\n        })\n      }\n    }\n    const observer = new ResizeObserver(measure)\n    observer.observe(grid)\n    grid.addEventListener('load', measure, true)\n    measure()\n    return () => { observer.disconnect(); grid.removeEventListener('load', measure, true) }\n  }, [children])\n  return <div ref={ref}>{Children.map(children, child => <div className=\"folio-frame-layout-item\">{child}</div>)}</div>\n}\n\nexport default FrameLayout\n"],"mappings":";AAkCyD;AAhCzD,SAAS,UAAU,iBAAiB,cAA8B;AAGlE,SAAS,YAAY,EAAE,SAAS,GAA4B;AAC1D,QAAM,MAAM,OAAuB,IAAI;AACvC,kBAAgB,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,MAAM;AACpB,YAAM,UAAU,KAAK,eAAe,MAAM,IAAI;AAC9C,YAAM,QAAQ,MAAM,KAAK,KAAK,QAAQ;AACtC,eAAS,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,SAAS;AAC1D,cAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,OAAO;AAC9C,cAAM,SAAS,IAAI,IAAI,UAAQ;AAC7B,gBAAM,QAAQ,KAAK,cAAc,KAAK;AACtC,gBAAM,QAAQ,OAAO,gBAAgB,OAAO,OAAO,aAAa,OAAO,CAAC;AACxE,gBAAM,SAAS,OAAO,iBAAiB,OAAO,OAAO,aAAa,QAAQ,CAAC;AAC3E,iBAAO,QAAQ,KAAK,SAAS,IAAI,QAAQ,SAAS;AAAA,QACpD,CAAC;AACD,cAAM,QAAQ,OAAO,OAAO,CAAC,KAAK,UAAU,MAAM,OAAO,CAAC;AAC1D,YAAI,QAAQ,CAAC,MAAM,UAAU;AAC3B,gBAAM,SAAS,OAAO,KAAK,KAAK,KAAK;AACrC,eAAK,MAAM,YAAY,QAAQ,QAAQ,GAAG,QAAQ,IAAI,SAAS,KAAK,KAAK,KAAK;AAAA,QAChF,CAAC;AAAA,MACH;AAAA,IACF;AACA,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,SAAK,iBAAiB,QAAQ,SAAS,IAAI;AAC3C,YAAQ;AACR,WAAO,MAAM;AAAE,eAAS,WAAW;AAAG,WAAK,oBAAoB,QAAQ,SAAS,IAAI;AAAA,IAAE;AAAA,EACxF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAO,oBAAC,SAAI,KAAW,mBAAS,IAAI,UAAU,WAAS,oBAAC,SAAI,WAAU,2BAA2B,iBAAM,CAAM,GAAE;AACjH;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/website/Portfolio/Portfolio.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface PortfolioProps {
+    name: string;
+    monogram?: string;
+    biography: ReactNode;
+    facts?: ReactNode[];
+    quotation?: ReactNode;
+    feature?: ReactNode;
+}
+/** An introduction and a chosen photograph, with content supplied by the host. */
+declare function Portfolio({ name, monogram, biography, facts, quotation, feature }: PortfolioProps): react.JSX.Element;
+interface PortfolioImageProps {
+    children: ReactElement;
+    title?: ReactNode;
+    metadata?: ReactNode;
+    index?: string;
+    size?: 'feature' | 'tile' | 'thumbnail';
+    /** Preserve the supplied image's intrinsic dimensions instead of cropping. */
+    natural?: boolean;
+}
+declare function PortfolioImage({ children, title, metadata, index, size, natural }: PortfolioImageProps): react.JSX.Element;
+interface PortfolioRecordProps {
+    title: ReactNode;
+    description?: ReactNode;
+    context?: ReactNode;
+    image?: ReactNode;
+    action?: ReactNode;
+    metadata?: ReactNode;
+}
+declare function PortfolioRecord({ title, description, context, image, action, metadata }: PortfolioRecordProps): react.JSX.Element;
+interface PortfolioListProps {
+    children: ReactNode;
+    variant?: 'records' | 'frames' | 'thumbnails';
+    label?: string;
+}
+declare function PortfolioList({ children, variant, label }: PortfolioListProps): react.JSX.Element;
+interface PortfolioCategoriesProps {
+    label: string;
+    items: {
+        id: string;
+        label: ReactNode;
+        count: number;
+    }[];
+}
+declare function PortfolioCategories({ label, items }: PortfolioCategoriesProps): react.JSX.Element | null;
+
+export { Portfolio, PortfolioCategories, type PortfolioCategoriesProps, PortfolioImage, type PortfolioImageProps, PortfolioList, type PortfolioListProps, type PortfolioProps, PortfolioRecord, type PortfolioRecordProps };

package/dist/website/Portfolio/Portfolio.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import FrameLayout from "./FrameLayout.js";
+import { Slot } from "@radix-ui/react-slot";
+import { Heading } from "../../components/Heading/Heading.js";
+function Portfolio({ name, monogram, biography, facts = [], quotation, feature }) {
+  return /* @__PURE__ */ jsxs("section", { className: "folio-portfolio-intro", "aria-label": name, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-portfolio-intro-copy", children: [
+      /* @__PURE__ */ jsxs("div", { className: "folio-portfolio-byline", children: [
+        monogram && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "folio-portfolio-monogram", children: monogram }),
+        /* @__PURE__ */ jsx(Heading, { level: 1, children: name })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "folio-portfolio-biography", children: biography }),
+      /* @__PURE__ */ jsx("div", { className: "folio-portfolio-facts", children: facts.map((fact, index) => /* @__PURE__ */ jsx("div", { children: fact }, index)) }),
+      quotation && /* @__PURE__ */ jsx("blockquote", { children: quotation })
+    ] }),
+    feature && /* @__PURE__ */ jsx("div", { className: "folio-portfolio-feature", children: feature })
+  ] });
+}
+function PortfolioImage({ children, title, metadata, index, size = "tile", natural = false }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-portfolio-image", "data-size": size, "data-natural": natural || void 0, children: [
+    /* @__PURE__ */ jsx(Slot, { className: "folio-portfolio-image-frame", children }),
+    (title || metadata) && /* @__PURE__ */ jsxs("figcaption", { children: [
+      index && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: index }),
+      /* @__PURE__ */ jsx("span", { children: title }),
+      metadata && /* @__PURE__ */ jsx("small", { children: metadata })
+    ] })
+  ] });
+}
+function PortfolioRecord({ title, description, context, image, action, metadata }) {
+  return /* @__PURE__ */ jsxs("article", { className: "folio-portfolio-record", "data-has-image": !!image || void 0, children: [
+    image,
+    /* @__PURE__ */ jsxs("div", { children: [
+      context && /* @__PURE__ */ jsx("div", { className: "folio-portfolio-record-context", children: context }),
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "sub", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "folio-portfolio-record-description", children: description }),
+      (action || metadata) && /* @__PURE__ */ jsxs("div", { className: "folio-portfolio-record-meta", children: [
+        action,
+        metadata && /* @__PURE__ */ jsx("span", { children: metadata })
+      ] })
+    ] })
+  ] });
+}
+function PortfolioList({ children, variant = "records", label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-portfolio-list", "data-variant": variant, children: [
+    label && /* @__PURE__ */ jsx("h2", { children: label }),
+    variant === "frames" ? /* @__PURE__ */ jsx(FrameLayout, { children }) : /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function PortfolioCategories({ label, items }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "folio-portfolio-categories", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("h2", { children: label }),
+    /* @__PURE__ */ jsx("dl", { children: items.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: item.label }),
+      /* @__PURE__ */ jsx("dd", { children: item.count })
+    ] }, item.id)) })
+  ] });
+}
+export {
+  Portfolio,
+  PortfolioCategories,
+  PortfolioImage,
+  PortfolioList,
+  PortfolioRecord
+};
+//# sourceMappingURL=Portfolio.js.map

package/dist/website/Portfolio/Portfolio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Portfolio/Portfolio.tsx"],"sourcesContent":["import FrameLayout from './FrameLayout'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { ReactElement, ReactNode } from 'react'\nimport { Heading } from '../../components/Heading/Heading'\n\nexport interface PortfolioProps {\n  name: string\n  monogram?: string\n  biography: ReactNode\n  facts?: ReactNode[]\n  quotation?: ReactNode\n  feature?: ReactNode\n}\n/** An introduction and a chosen photograph, with content supplied by the host. */\nexport function Portfolio({ name, monogram, biography, facts = [], quotation, feature }: PortfolioProps) {\n  return <section className=\"folio-portfolio-intro\" aria-label={name}><div className=\"folio-portfolio-intro-copy\"><div className=\"folio-portfolio-byline\">{monogram && <span aria-hidden className=\"folio-portfolio-monogram\">{monogram}</span>}<Heading level={1}>{name}</Heading></div><div className=\"folio-portfolio-biography\">{biography}</div><div className=\"folio-portfolio-facts\">{facts.map((fact, index) => <div key={index}>{fact}</div>)}</div>{quotation && <blockquote>{quotation}</blockquote>}</div>{feature && <div className=\"folio-portfolio-feature\">{feature}</div>}</section>\n}\n\nexport interface PortfolioImageProps {\n  children: ReactElement\n  title?: ReactNode\n  metadata?: ReactNode\n  index?: string\n  size?: 'feature' | 'tile' | 'thumbnail'\n  /** Preserve the supplied image's intrinsic dimensions instead of cropping. */\n  natural?: boolean\n}\nexport function PortfolioImage({ children, title, metadata, index, size = 'tile', natural = false }: PortfolioImageProps) {\n  return <figure className=\"folio-portfolio-image\" data-size={size} data-natural={natural || undefined}><Slot className=\"folio-portfolio-image-frame\">{children}</Slot>{(title || metadata) && <figcaption>{index && <span aria-hidden>{index}</span>}<span>{title}</span>{metadata && <small>{metadata}</small>}</figcaption>}</figure>\n}\n\nexport interface PortfolioRecordProps {\n  title: ReactNode\n  description?: ReactNode\n  context?: ReactNode\n  image?: ReactNode\n  action?: ReactNode\n  metadata?: ReactNode\n}\nexport function PortfolioRecord({ title, description, context, image, action, metadata }: PortfolioRecordProps) {\n  return <article className=\"folio-portfolio-record\" data-has-image={!!image || undefined}>{image}<div>{context && <div className=\"folio-portfolio-record-context\">{context}</div>}<Heading level={2} size=\"sub\">{title}</Heading>{description && <p className=\"folio-portfolio-record-description\">{description}</p>}{(action || metadata) && <div className=\"folio-portfolio-record-meta\">{action}{metadata && <span>{metadata}</span>}</div>}</div></article>\n}\n\nexport interface PortfolioListProps {\n  children: ReactNode\n  variant?: 'records' | 'frames' | 'thumbnails'\n  label?: string\n}\nexport function PortfolioList({ children, variant = 'records', label }: PortfolioListProps) {\n  return <div className=\"folio-portfolio-list\" data-variant={variant}>{label && <h2>{label}</h2>}{variant === 'frames' ? <FrameLayout>{children}</FrameLayout> : <div>{children}</div>}</div>\n}\n\nexport interface PortfolioCategoriesProps {\n  label: string\n  items: { id: string; label: ReactNode; count: number }[]\n}\nexport function PortfolioCategories({ label, items }: PortfolioCategoriesProps) {\n  if (!items.length) return null\n  return <section className=\"folio-portfolio-categories\" aria-label={label}><h2>{label}</h2><dl>{items.map(item => <div key={item.id}><dt>{item.label}</dt><dd>{item.count}</dd></div>)}</dl></section>\n}\n"],"mappings":"AAekH,SAAqD,KAArD;AAflH,OAAO,iBAAiB;AACxB,SAAS,YAAY;AAErB,SAAS,eAAe;AAWjB,SAAS,UAAU,EAAE,MAAM,UAAU,WAAW,QAAQ,CAAC,GAAG,WAAW,QAAQ,GAAmB;AACvG,SAAO,qBAAC,aAAQ,WAAU,yBAAwB,cAAY,MAAM;AAAA,yBAAC,SAAI,WAAU,8BAA6B;AAAA,2BAAC,SAAI,WAAU,0BAA0B;AAAA,oBAAY,oBAAC,UAAK,eAAW,MAAC,WAAU,4BAA4B,oBAAS;AAAA,QAAQ,oBAAC,WAAQ,OAAO,GAAI,gBAAK;AAAA,SAAU;AAAA,MAAM,oBAAC,SAAI,WAAU,6BAA6B,qBAAU;AAAA,MAAM,oBAAC,SAAI,WAAU,yBAAyB,gBAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,SAAiB,kBAAR,KAAa,CAAM,GAAE;AAAA,MAAO,aAAa,oBAAC,gBAAY,qBAAU;AAAA,OAAc;AAAA,IAAO,WAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,KAAO;AAC3jB;AAWO,SAAS,eAAe,EAAE,UAAU,OAAO,UAAU,OAAO,OAAO,QAAQ,UAAU,MAAM,GAAwB;AACxH,SAAO,qBAAC,YAAO,WAAU,yBAAwB,aAAW,MAAM,gBAAc,WAAW,QAAW;AAAA,wBAAC,QAAK,WAAU,+BAA+B,UAAS;AAAA,KAAS,SAAS,aAAa,qBAAC,gBAAY;AAAA,eAAS,oBAAC,UAAK,eAAW,MAAE,iBAAM;AAAA,MAAQ,oBAAC,UAAM,iBAAM;AAAA,MAAQ,YAAY,oBAAC,WAAO,oBAAS;AAAA,OAAS;AAAA,KAAc;AAC/T;AAUO,SAAS,gBAAgB,EAAE,OAAO,aAAa,SAAS,OAAO,QAAQ,SAAS,GAAyB;AAC9G,SAAO,qBAAC,aAAQ,WAAU,0BAAyB,kBAAgB,CAAC,CAAC,SAAS,QAAY;AAAA;AAAA,IAAM,qBAAC,SAAK;AAAA,iBAAW,oBAAC,SAAI,WAAU,kCAAkC,mBAAQ;AAAA,MAAO,oBAAC,WAAQ,OAAO,GAAG,MAAK,OAAO,iBAAM;AAAA,MAAW,eAAe,oBAAC,OAAE,WAAU,sCAAsC,uBAAY;AAAA,OAAO,UAAU,aAAa,qBAAC,SAAI,WAAU,+BAA+B;AAAA;AAAA,QAAQ,YAAY,oBAAC,UAAM,oBAAS;AAAA,SAAQ;AAAA,OAAO;AAAA,KAAM;AACtb;AAOO,SAAS,cAAc,EAAE,UAAU,UAAU,WAAW,MAAM,GAAuB;AAC1F,SAAO,qBAAC,SAAI,WAAU,wBAAuB,gBAAc,SAAU;AAAA,aAAS,oBAAC,QAAI,iBAAM;AAAA,IAAO,YAAY,WAAW,oBAAC,eAAa,UAAS,IAAiB,oBAAC,SAAK,UAAS;AAAA,KAAO;AACvL;AAMO,SAAS,oBAAoB,EAAE,OAAO,MAAM,GAA6B;AAC9E,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO,qBAAC,aAAQ,WAAU,8BAA6B,cAAY,OAAO;AAAA,wBAAC,QAAI,iBAAM;AAAA,IAAK,oBAAC,QAAI,gBAAM,IAAI,UAAQ,qBAAC,SAAkB;AAAA,0BAAC,QAAI,eAAK,OAAM;AAAA,MAAK,oBAAC,QAAI,eAAK,OAAM;AAAA,SAA9C,KAAK,EAA8C,CAAM,GAAE;AAAA,KAAK;AAC7L;","names":[]}

package/dist/website/Portfolio/QuestionCard.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface QuestionCardProps {
+    title: ReactNode;
+    description: string;
+    label: string;
+    placeholder: string;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    submitLabel: string;
+    examplesLabel: string;
+    examples: string[];
+    disabled?: boolean;
+    maxLength?: number;
+    inputId?: string;
+}
+/** A compact invitation to an application-owned conversation. */
+declare function QuestionCard({ title, description, label, placeholder, value, onChange, onSubmit, submitLabel, examplesLabel, examples, disabled, maxLength, inputId }: QuestionCardProps): react.JSX.Element;
+
+export { QuestionCard, type QuestionCardProps };

package/dist/website/Portfolio/QuestionCard.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { RiArrowUpLine, RiArrowRightUpLine, RiChat3Line } from "@remixicon/react";
+import { Button } from "../../components/Button/Button.js";
+import { Input } from "../../components/Input/Input.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { Text } from "../../components/Text/Text.js";
+function QuestionCard({ title, description, label, placeholder, value, onChange, onSubmit, submitLabel, examplesLabel, examples, disabled, maxLength, inputId }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs("section", { className: "folio-question-card", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-question-card-heading", children: [
+      /* @__PURE__ */ jsx(RiChat3Line, { size: 19, "aria-hidden": true }),
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "sub", id: titleId, children: title })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: description }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: (event) => {
+      event.preventDefault();
+      if (!disabled && value.trim()) onSubmit(value.trim());
+    }, autoComplete: "off", children: [
+      /* @__PURE__ */ jsx(Input, { id: inputId, "aria-label": label, name: "question", value, onChange: (event) => onChange(event.target.value), placeholder, maxLength }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", iconOnly: true, "aria-label": submitLabel, disabled: disabled || !value.trim(), children: /* @__PURE__ */ jsx(RiArrowUpLine, { size: 18, "aria-hidden": true }) })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { "aria-label": examplesLabel, children: examples.map((example) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", disabled, onClick: () => onSubmit(example), children: [
+      /* @__PURE__ */ jsx("span", { children: example }),
+      /* @__PURE__ */ jsx(RiArrowRightUpLine, { size: 14, "aria-hidden": true })
+    ] }) }, example)) })
+  ] });
+}
+export {
+  QuestionCard
+};
+//# sourceMappingURL=QuestionCard.js.map

package/dist/website/Portfolio/QuestionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Portfolio/QuestionCard.tsx"],"sourcesContent":["'use client'\nimport { useId, type ReactNode } from 'react'\nimport { RiArrowUpLine, RiArrowRightUpLine, RiChat3Line } from '@remixicon/react'\nimport { Button } from '../../components/Button/Button'\nimport { Input } from '../../components/Input/Input'\nimport { Heading } from '../../components/Heading/Heading'\nimport { Text } from '../../components/Text/Text'\n\nexport interface QuestionCardProps {\n  title: ReactNode\n  description: string\n  label: string\n  placeholder: string\n  value: string\n  onChange: (value: string) => void\n  onSubmit: (value: string) => void\n  submitLabel: string\n  examplesLabel: string\n  examples: string[]\n  disabled?: boolean\n  maxLength?: number\n  inputId?: string\n}\n/** A compact invitation to an application-owned conversation. */\nexport function QuestionCard({ title, description, label, placeholder, value, onChange, onSubmit, submitLabel, examplesLabel, examples, disabled, maxLength, inputId }: QuestionCardProps) {\n  const titleId = useId()\n  return <section className=\"folio-question-card\" aria-labelledby={titleId}><div className=\"folio-question-card-heading\"><RiChat3Line size={19} aria-hidden /><Heading level={2} size=\"sub\" id={titleId}>{title}</Heading></div><Text size=\"sm\">{description}</Text><form onSubmit={event => { event.preventDefault(); if (!disabled && value.trim()) onSubmit(value.trim()) }} autoComplete=\"off\"><Input id={inputId} aria-label={label} name=\"question\" value={value} onChange={event => onChange(event.target.value)} placeholder={placeholder} maxLength={maxLength} /><Button type=\"submit\" iconOnly aria-label={submitLabel} disabled={disabled || !value.trim()}><RiArrowUpLine size={18} aria-hidden /></Button></form><ul aria-label={examplesLabel}>{examples.map(example => <li key={example}><Button variant=\"ghost\" disabled={disabled} onClick={() => onSubmit(example)}><span>{example}</span><RiArrowRightUpLine size={14} aria-hidden /></Button></li>)}</ul></section>\n}\n"],"mappings":";AA0B4E,SAA6C,KAA7C;AAzB5E,SAAS,aAA6B;AACtC,SAAS,eAAe,oBAAoB,mBAAmB;AAC/D,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,YAAY;AAkBd,SAAS,aAAa,EAAE,OAAO,aAAa,OAAO,aAAa,OAAO,UAAU,UAAU,aAAa,eAAe,UAAU,UAAU,WAAW,QAAQ,GAAsB;AACzL,QAAM,UAAU,MAAM;AACtB,SAAO,qBAAC,aAAQ,WAAU,uBAAsB,mBAAiB,SAAS;AAAA,yBAAC,SAAI,WAAU,+BAA8B;AAAA,0BAAC,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA,MAAE,oBAAC,WAAQ,OAAO,GAAG,MAAK,OAAM,IAAI,SAAU,iBAAM;AAAA,OAAU;AAAA,IAAM,oBAAC,QAAK,MAAK,MAAM,uBAAY;AAAA,IAAO,qBAAC,UAAK,UAAU,WAAS;AAAE,YAAM,eAAe;AAAG,UAAI,CAAC,YAAY,MAAM,KAAK,EAAG,UAAS,MAAM,KAAK,CAAC;AAAA,IAAE,GAAG,cAAa,OAAM;AAAA,0BAAC,SAAM,IAAI,SAAS,cAAY,OAAO,MAAK,YAAW,OAAc,UAAU,WAAS,SAAS,MAAM,OAAO,KAAK,GAAG,aAA0B,WAAsB;AAAA,MAAE,oBAAC,UAAO,MAAK,UAAS,UAAQ,MAAC,cAAY,aAAa,UAAU,YAAY,CAAC,MAAM,KAAK,GAAG,8BAAC,iBAAc,MAAM,IAAI,eAAW,MAAC,GAAE;AAAA,OAAS;AAAA,IAAO,oBAAC,QAAG,cAAY,eAAgB,mBAAS,IAAI,aAAW,oBAAC,QAAiB,+BAAC,UAAO,SAAQ,SAAQ,UAAoB,SAAS,MAAM,SAAS,OAAO,GAAG;AAAA,0BAAC,UAAM,mBAAQ;AAAA,MAAO,oBAAC,sBAAmB,MAAM,IAAI,eAAW,MAAC;AAAA,OAAE,KAAzJ,OAAkK,CAAK,GAAE;AAAA,KAAK;AAC96B;","names":[]}

package/dist/website/PortfolioIndex/PortfolioIndex.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface PortfolioIndexItem {
+    value: string;
+    label: string;
+    count?: number;
+    content: ReactNode;
+    aside?: ReactNode;
+    more?: ReactNode;
+}
+interface PortfolioIndexProps {
+    label: string;
+    items: PortfolioIndexItem[];
+    aside?: ReactNode;
+    defaultValue?: string;
+}
+/** A portfolio index whose categories and context follow the selected tab. */
+declare function PortfolioIndex({ label, items, aside, defaultValue }: PortfolioIndexProps): react.JSX.Element | null;
+
+export { PortfolioIndex, type PortfolioIndexItem, type PortfolioIndexProps };

package/dist/website/PortfolioIndex/PortfolioIndex.js

@@ -0,0 +1,31 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs/Tabs.js";
+function PortfolioIndex({ label, items, aside, defaultValue }) {
+  const first = items[0];
+  if (!first) return null;
+  return /* @__PURE__ */ jsx("section", { className: "folio-portfolio-index", "aria-label": label, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultValue ?? first.value, children: [
+    /* @__PURE__ */ jsx(TabsList, { "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxs(TabsTrigger, { value: item.value, children: [
+      item.label,
+      item.count !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(Badge, { className: "ms-2", children: item.count })
+      ] })
+    ] }, item.value)) }),
+    items.map((item) => /* @__PURE__ */ jsx(TabsContent, { value: item.value, children: /* @__PURE__ */ jsxs("div", { className: "folio-portfolio-columns", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        item.content,
+        item.more && /* @__PURE__ */ jsx("div", { className: "folio-portfolio-more", children: item.more })
+      ] }),
+      /* @__PURE__ */ jsxs("aside", { className: "folio-portfolio-aside", children: [
+        item.aside,
+        aside
+      ] })
+    ] }) }, item.value))
+  ] }) });
+}
+export {
+  PortfolioIndex
+};
+//# sourceMappingURL=PortfolioIndex.js.map

package/dist/website/PortfolioIndex/PortfolioIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/PortfolioIndex/PortfolioIndex.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/Tabs/Tabs'\n\nexport interface PortfolioIndexItem {\n  value: string\n  label: string\n  count?: number\n  content: ReactNode\n  aside?: ReactNode\n  more?: ReactNode\n}\nexport interface PortfolioIndexProps {\n  label: string\n  items: PortfolioIndexItem[]\n  aside?: ReactNode\n  defaultValue?: string\n}\n\n/** A portfolio index whose categories and context follow the selected tab. */\nexport function PortfolioIndex({ label, items, aside, defaultValue }: PortfolioIndexProps) {\n  const first = items[0]\n  if (!first) return null\n  return <section className=\"folio-portfolio-index\" aria-label={label}><Tabs defaultValue={defaultValue ?? first.value}><TabsList aria-label={label}>{items.map(item => <TabsTrigger key={item.value} value={item.value}>{item.label}{item.count !== undefined && <>{' '}<Badge className=\"ms-2\">{item.count}</Badge></>}</TabsTrigger>)}</TabsList>{items.map(item => <TabsContent key={item.value} value={item.value}><div className=\"folio-portfolio-columns\"><div>{item.content}{item.more && <div className=\"folio-portfolio-more\">{item.more}</div>}</div><aside className=\"folio-portfolio-aside\">{item.aside}{aside}</aside></div></TabsContent>)}</Tabs></section>\n}\n"],"mappings":";AAyBkQ,mBAAO,KAAP;AAtBlQ,SAAS,aAAa;AACtB,SAAS,MAAM,aAAa,UAAU,mBAAmB;AAkBlD,SAAS,eAAe,EAAE,OAAO,OAAO,OAAO,aAAa,GAAwB;AACzF,QAAM,QAAQ,MAAM,CAAC;AACrB,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,oBAAC,aAAQ,WAAU,yBAAwB,cAAY,OAAO,+BAAC,QAAK,cAAc,gBAAgB,MAAM,OAAO;AAAA,wBAAC,YAAS,cAAY,OAAQ,gBAAM,IAAI,UAAQ,qBAAC,eAA6B,OAAO,KAAK,OAAQ;AAAA,WAAK;AAAA,MAAO,KAAK,UAAU,UAAa,iCAAG;AAAA;AAAA,QAAI,oBAAC,SAAM,WAAU,QAAQ,eAAK,OAAM;AAAA,SAAQ;AAAA,SAA3H,KAAK,KAA0H,CAAc,GAAE;AAAA,IAAY,MAAM,IAAI,UAAQ,oBAAC,eAA6B,OAAO,KAAK,OAAO,+BAAC,SAAI,WAAU,2BAA0B;AAAA,2BAAC,SAAK;AAAA,aAAK;AAAA,QAAS,KAAK,QAAQ,oBAAC,SAAI,WAAU,wBAAwB,eAAK,MAAK;AAAA,SAAO;AAAA,MAAM,qBAAC,WAAM,WAAU,yBAAyB;AAAA,aAAK;AAAA,QAAO;AAAA,SAAM;AAAA,OAAQ,KAA3O,KAAK,KAA4O,CAAc;AAAA,KAAE,GAAO;AACjoB;","names":[]}

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

@@ -0,0 +1,203 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import { CollectionLink } from '../Collection/Collection.js';
+
+interface ReadingMetadataItem {
+    label: string;
+    value: ReactNode;
+    live?: boolean;
+    dateTime?: string;
+}
+interface DetailMastheadProps {
+    backLink?: ReactNode;
+    title: string;
+    dek?: ReactNode;
+    context?: ReactNode;
+    aside?: ReactNode;
+    actions?: ReactNode;
+    metadata?: ReadingMetadataItem[];
+    width?: 'page' | 'fill';
+}
+declare function DetailMasthead({ backLink, title, dek, context, aside, actions, metadata, width }: DetailMastheadProps): react.JSX.Element;
+interface ReadingLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    outline?: ReactNode;
+}
+declare function ReadingLayout({ children, outline, className, ...rest }: ReadingLayoutProps): react.JSX.Element;
+interface ReadingSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    caption?: ReactNode;
+    lead?: ReactNode;
+    compact?: boolean;
+    seamless?: boolean;
+}
+/** `seamless` lets a structured child continue directly from the section rule without drawing a second seam. */
+declare function ReadingSection({ title, caption, lead, compact, seamless, children, className, ...rest }: ReadingSectionProps): react.JSX.Element;
+interface ReadingLeadProps {
+    children: ReactNode;
+    muted?: ReactNode;
+    description?: ReactNode;
+}
+declare function ReadingLead({ children, muted, description }: ReadingLeadProps): react.JSX.Element;
+interface ReadingPagerItem {
+    link: CollectionLink;
+    direction: ReactNode;
+    title: ReactNode;
+    media?: ReactNode;
+}
+interface RecordPagerProps {
+    label: string;
+    previous?: ReadingPagerItem;
+    next?: ReadingPagerItem;
+}
+declare function RecordPager({ label, previous, next }: RecordPagerProps): react.JSX.Element | null;
+interface OutlineItem {
+    id: string;
+    label: string;
+    level: number;
+}
+declare function isSelfNumbered(items: OutlineItem[]): boolean;
+declare function numberToc(items: OutlineItem[]): string[];
+interface TableOfContentsProps {
+    items: OutlineItem[];
+    label: string;
+    numbering?: 'auto' | 'none';
+    onNavigate?: (id: string) => void;
+    expanded?: boolean;
+}
+declare function TableOfContents({ items, label, numbering, onNavigate, expanded }: TableOfContentsProps): react.JSX.Element | null;
+interface MobileOutlineProps {
+    items: OutlineItem[];
+    title: string;
+    openLabel: string;
+    closeLabel: string;
+}
+declare function MobileOutline({ items, title, openLabel, closeLabel }: MobileOutlineProps): react.JSX.Element | null;
+declare function ReadingProgress(): react.JSX.Element;
+interface AuthorPanelProps {
+    avatar?: ReactNode;
+    name: string;
+    role?: ReactNode;
+    bio?: ReactNode;
+    links?: ReactNode;
+}
+declare function AuthorPanel({ avatar, name, role, bio, links }: AuthorPanelProps): react.JSX.Element;
+interface ReadingFigureProps {
+    media: ReactNode;
+    captionStart?: ReactNode;
+    captionEnd?: ReactNode;
+    width?: 'page' | 'fill';
+    ratio?: string;
+    fit?: 'cover' | 'contain';
+}
+/** A reading image can preserve its source framing with `fit="contain"`, rather than silently cropping it to a house ratio. */
+declare function ReadingFigure({ media, captionStart, captionEnd, width, ratio, fit }: ReadingFigureProps): react.JSX.Element;
+interface MediaPlaybackProps {
+    src: string;
+    poster?: string;
+    label: string;
+    playLabel: string;
+    pauseLabel: string;
+    fallback: ReactNode;
+}
+declare function MediaPlayback({ src, poster, label, playLabel, pauseLabel, fallback }: MediaPlaybackProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null | undefined;
+interface ActionBandProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    eyebrow?: ReactNode;
+}
+/** A terminal project invitation with one strong entry action and quieter supporting actions. */
+declare function ActionBand({ title, description, actions, eyebrow }: ActionBandProps): react.JSX.Element;
+interface FeaturePairsProps {
+    items: {
+        id?: string;
+        label?: ReactNode;
+        title?: ReactNode;
+        description: ReactNode;
+    }[];
+}
+declare function FeaturePairs({ items }: FeaturePairsProps): react.JSX.Element;
+interface DevicePreviewProps {
+    kind: 'browser' | 'phone';
+    label?: string;
+    media: ReactNode;
+    caption?: ReactNode;
+}
+declare function DevicePreview({ kind, label, media, caption }: DevicePreviewProps): react.JSX.Element;
+interface PreviewPairProps {
+    desktop: ReactNode;
+    mobile?: ReactNode;
+}
+declare function PreviewPair({ desktop, mobile }: PreviewPairProps): react.JSX.Element;
+interface CommandTab {
+    id: string;
+    name: string;
+    commands: string[];
+    then?: ReactNode;
+    note?: ReactNode;
+    link?: ReactNode;
+}
+interface CommandTabsProps {
+    label: string;
+    tabs: CommandTab[];
+    copyLabel: string;
+    copiedLabel: string;
+    footer?: ReactNode;
+}
+declare function CommandTabs({ label, tabs, copyLabel, copiedLabel, footer }: CommandTabsProps): react.JSX.Element | null;
+interface ReadingSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    numbered?: boolean;
+}
+declare function ReadingSurface({ numbered, children, className, ...rest }: ReadingSurfaceProps): react.JSX.Element;
+interface ReadingFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    inline?: boolean;
+}
+declare function ReadingForm({ inline, className, ...props }: ReadingFormProps): react.JSX.Element;
+interface ArchitectureColumnNode {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface ArchitectureColumnsProps {
+    columns: {
+        title: string;
+        connected?: boolean;
+        nodes: ArchitectureColumnNode[];
+    }[];
+    foundation?: ArchitectureColumnNode[];
+}
+declare function ArchitectureColumns({ columns, foundation }: ArchitectureColumnsProps): react.JSX.Element;
+interface TokenLineProps {
+    items: {
+        label: ReactNode;
+        strong?: boolean;
+        icon?: ReactNode;
+    }[];
+    label?: ReactNode;
+    separator?: string;
+}
+declare function TokenLine({ items, label, separator }: TokenLineProps): react.JSX.Element;
+interface ContentFigureProps {
+    children: ReactNode;
+    caption?: ReactNode;
+    wide?: boolean;
+}
+declare function ContentFigure({ children, caption, wide }: ContentFigureProps): react.JSX.Element;
+interface ReadingPageProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+}
+declare function ReadingPage({ children, className, ...props }: ReadingPageProps): react.JSX.Element;
+interface CommandPiece {
+    text: string;
+    emphasis?: 'strong' | 'normal' | 'muted';
+}
+interface CommandSnippetProps {
+    code: string;
+    pieces?: CommandPiece[];
+    copyLabel: string;
+    copiedLabel: string;
+    className?: string;
+}
+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 };