@misoto22/folio 0.16.0 → 0.17.0

package/dist/website/Workbench/WorkbenchCard.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function WorkbenchCard({ cover, title, description, meta }) {
+  return /* @__PURE__ */ jsxs("article", { className: "folio-wb-card", children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-wb-card-cover", children: cover }),
+    /* @__PURE__ */ jsx("h3", { className: "folio-wb-card-title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "folio-wb-card-description", children: description }),
+    meta && /* @__PURE__ */ jsx("p", { className: "folio-wb-card-meta", children: meta })
+  ] });
+}
+function WorkbenchCardGrid({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-wb-card-grid", children });
+}
+function WorkbenchTile({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-wb-tile", children: /* @__PURE__ */ jsx("span", { children: label }) });
+}
+export {
+  WorkbenchCard,
+  WorkbenchCardGrid,
+  WorkbenchTile
+};
+//# sourceMappingURL=WorkbenchCard.js.map

package/dist/website/Workbench/WorkbenchCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/WorkbenchCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface WorkbenchCardProps {\n  /** A cover image, or a `WorkbenchTile` when there is no picture. */\n  cover: ReactNode\n  /** The title, usually a link; the whole card becomes its hit area. */\n  title: ReactNode\n  description?: ReactNode\n  meta?: ReactNode\n}\n\n/**\n * An image-led record. The title's link is stretched over the card, so the\n * card is one target without nesting interactive elements.\n */\nexport function WorkbenchCard({ cover, title, description, meta }: WorkbenchCardProps) {\n  return (\n    <article className=\"folio-wb-card\">\n      <div className=\"folio-wb-card-cover\">{cover}</div>\n      <h3 className=\"folio-wb-card-title\">{title}</h3>\n      {description && <p className=\"folio-wb-card-description\">{description}</p>}\n      {meta && <p className=\"folio-wb-card-meta\">{meta}</p>}\n    </article>\n  )\n}\n\nexport interface WorkbenchCardGridProps {\n  children: ReactNode\n}\n\n/** Two cards per row on the content subgrid, one on a phone. */\nexport function WorkbenchCardGrid({ children }: WorkbenchCardGridProps) {\n  return <div className=\"folio-wb-card-grid\">{children}</div>\n}\n\nexport interface WorkbenchTileProps {\n  /** Large word set on the tile, such as a product name. */\n  label: ReactNode\n}\n\n/** A typographic stand-in cover: ink ground, a fine grid, one word. */\nexport function WorkbenchTile({ label }: WorkbenchTileProps) {\n  return (\n    <div className=\"folio-wb-tile\">\n      <span>{label}</span>\n    </div>\n  )\n}\n"],"mappings":"AAiBI,SACE,KADF;AAFG,SAAS,cAAc,EAAE,OAAO,OAAO,aAAa,KAAK,GAAuB;AACrF,SACE,qBAAC,aAAQ,WAAU,iBACjB;AAAA,wBAAC,SAAI,WAAU,uBAAuB,iBAAM;AAAA,IAC5C,oBAAC,QAAG,WAAU,uBAAuB,iBAAM;AAAA,IAC1C,eAAe,oBAAC,OAAE,WAAU,6BAA6B,uBAAY;AAAA,IACrE,QAAQ,oBAAC,OAAE,WAAU,sBAAsB,gBAAK;AAAA,KACnD;AAEJ;AAOO,SAAS,kBAAkB,EAAE,SAAS,GAA2B;AACtE,SAAO,oBAAC,SAAI,WAAU,sBAAsB,UAAS;AACvD;AAQO,SAAS,cAAc,EAAE,MAAM,GAAuB;AAC3D,SACE,oBAAC,SAAI,WAAU,iBACb,8BAAC,UAAM,iBAAM,GACf;AAEJ;","names":[]}

package/dist/website/Workbench/WorkbenchEntries.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface WorkbenchEntry {
+    id: string;
+    /** The title, usually a link. */
+    title: ReactNode;
+    excerpt?: ReactNode;
+    /** A short date such as "Jun 25". */
+    date?: ReactNode;
+    /** Category and reading time. */
+    meta?: ReactNode;
+}
+interface WorkbenchEntriesProps {
+    /** Shown as a typographic notebook tile; the rest list beside it. */
+    featured?: WorkbenchEntry;
+    entries: WorkbenchEntry[];
+}
+/** A featured entry set as a tile, with the next few entries stacked beside it. */
+declare function WorkbenchEntries({ featured, entries }: WorkbenchEntriesProps): react.JSX.Element;
+
+export { WorkbenchEntries, type WorkbenchEntriesProps, type WorkbenchEntry };

package/dist/website/Workbench/WorkbenchEntries.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function WorkbenchEntries({ featured, entries }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-wb-entries", "data-has-featured": featured ? true : void 0, children: [
+    featured && /* @__PURE__ */ jsxs("article", { className: "folio-wb-entry-featured", children: [
+      /* @__PURE__ */ jsx("h3", { children: featured.title }),
+      featured.excerpt && /* @__PURE__ */ jsx("p", { children: featured.excerpt }),
+      /* @__PURE__ */ jsxs("p", { className: "folio-wb-entry-meta", children: [
+        featured.meta,
+        featured.meta && featured.date && " \xB7 ",
+        featured.date
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { children: entries.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("article", { className: "folio-wb-entry", children: [
+      entry.date && /* @__PURE__ */ jsx("p", { className: "folio-wb-entry-date", children: entry.date }),
+      /* @__PURE__ */ jsx("h3", { children: entry.title }),
+      entry.excerpt && /* @__PURE__ */ jsx("p", { className: "folio-wb-entry-excerpt", children: entry.excerpt }),
+      entry.meta && /* @__PURE__ */ jsx("p", { className: "folio-wb-entry-meta", children: entry.meta })
+    ] }) }, entry.id)) })
+  ] });
+}
+export {
+  WorkbenchEntries
+};
+//# sourceMappingURL=WorkbenchEntries.js.map

package/dist/website/Workbench/WorkbenchEntries.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/WorkbenchEntries.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface WorkbenchEntry {\n  id: string\n  /** The title, usually a link. */\n  title: ReactNode\n  excerpt?: ReactNode\n  /** A short date such as \"Jun 25\". */\n  date?: ReactNode\n  /** Category and reading time. */\n  meta?: ReactNode\n}\n\nexport interface WorkbenchEntriesProps {\n  /** Shown as a typographic notebook tile; the rest list beside it. */\n  featured?: WorkbenchEntry\n  entries: WorkbenchEntry[]\n}\n\n/** A featured entry set as a tile, with the next few entries stacked beside it. */\nexport function WorkbenchEntries({ featured, entries }: WorkbenchEntriesProps) {\n  return (\n    <div className=\"folio-wb-entries\" data-has-featured={featured ? true : undefined}>\n      {featured && (\n        <article className=\"folio-wb-entry-featured\">\n          <h3>{featured.title}</h3>\n          {featured.excerpt && <p>{featured.excerpt}</p>}\n          <p className=\"folio-wb-entry-meta\">\n            {featured.meta}\n            {featured.meta && featured.date && ' · '}\n            {featured.date}\n          </p>\n        </article>\n      )}\n      <ul>\n        {entries.map((entry) => (\n          <li key={entry.id}>\n            <article className=\"folio-wb-entry\">\n              {entry.date && <p className=\"folio-wb-entry-date\">{entry.date}</p>}\n              <h3>{entry.title}</h3>\n              {entry.excerpt && <p className=\"folio-wb-entry-excerpt\">{entry.excerpt}</p>}\n              {entry.meta && <p className=\"folio-wb-entry-meta\">{entry.meta}</p>}\n            </article>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n"],"mappings":"AAyBU,cAEA,YAFA;AALH,SAAS,iBAAiB,EAAE,UAAU,QAAQ,GAA0B;AAC7E,SACE,qBAAC,SAAI,WAAU,oBAAmB,qBAAmB,WAAW,OAAO,QACpE;AAAA,gBACC,qBAAC,aAAQ,WAAU,2BACjB;AAAA,0BAAC,QAAI,mBAAS,OAAM;AAAA,MACnB,SAAS,WAAW,oBAAC,OAAG,mBAAS,SAAQ;AAAA,MAC1C,qBAAC,OAAE,WAAU,uBACV;AAAA,iBAAS;AAAA,QACT,SAAS,QAAQ,SAAS,QAAQ;AAAA,QAClC,SAAS;AAAA,SACZ;AAAA,OACF;AAAA,IAEF,oBAAC,QACE,kBAAQ,IAAI,CAAC,UACZ,oBAAC,QACC,+BAAC,aAAQ,WAAU,kBAChB;AAAA,YAAM,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,gBAAM,MAAK;AAAA,MAC9D,oBAAC,QAAI,gBAAM,OAAM;AAAA,MAChB,MAAM,WAAW,oBAAC,OAAE,WAAU,0BAA0B,gBAAM,SAAQ;AAAA,MACtE,MAAM,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,gBAAM,MAAK;AAAA,OAChE,KANO,MAAM,EAOf,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/website/Workbench/WorkbenchFigure.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+interface WorkbenchFigureProps {
+    /** The image element (or a host image component); it fills the frame. */
+    children: ReactElement;
+    /** Caption start: the photograph's title. */
+    title?: ReactNode;
+    /** Caption end: place and year, right-aligned. */
+    meta?: ReactNode;
+    /** Frame proportion. */
+    ratio?: 'wide' | 'landscape' | 'portrait' | 'panorama';
+}
+/**
+ * A photograph shown as a photograph: its own proportion, an 8px corner, and a
+ * caption line beneath — never a backdrop for something else.
+ */
+declare function WorkbenchFigure({ children, title, meta, ratio }: WorkbenchFigureProps): react.JSX.Element;
+
+export { WorkbenchFigure, type WorkbenchFigureProps };

package/dist/website/Workbench/WorkbenchFigure.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+function WorkbenchFigure({ children, title, meta, ratio = "landscape" }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-wb-figure", "data-ratio": ratio, children: [
+    /* @__PURE__ */ jsx(Slot, { className: "folio-wb-figure-frame", children }),
+    (title || meta) && /* @__PURE__ */ jsxs("figcaption", { children: [
+      title && /* @__PURE__ */ jsx("span", { children: title }),
+      meta && /* @__PURE__ */ jsx("span", { className: "folio-wb-figure-meta", children: meta })
+    ] })
+  ] });
+}
+export {
+  WorkbenchFigure
+};
+//# sourceMappingURL=WorkbenchFigure.js.map

package/dist/website/Workbench/WorkbenchFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/WorkbenchFigure.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { ReactElement, ReactNode } from 'react'\n\nexport interface WorkbenchFigureProps {\n  /** The image element (or a host image component); it fills the frame. */\n  children: ReactElement\n  /** Caption start: the photograph's title. */\n  title?: ReactNode\n  /** Caption end: place and year, right-aligned. */\n  meta?: ReactNode\n  /** Frame proportion. */\n  ratio?: 'wide' | 'landscape' | 'portrait' | 'panorama'\n}\n\n/**\n * A photograph shown as a photograph: its own proportion, an 8px corner, and a\n * caption line beneath — never a backdrop for something else.\n */\nexport function WorkbenchFigure({ children, title, meta, ratio = 'landscape' }: WorkbenchFigureProps) {\n  return (\n    <figure className=\"folio-wb-figure\" data-ratio={ratio}>\n      <Slot className=\"folio-wb-figure-frame\">{children}</Slot>\n      {(title || meta) && (\n        <figcaption>\n          {title && <span>{title}</span>}\n          {meta && <span className=\"folio-wb-figure-meta\">{meta}</span>}\n        </figcaption>\n      )}\n    </figure>\n  )\n}\n"],"mappings":"AAqBM,cAEE,YAFF;AArBN,SAAS,YAAY;AAkBd,SAAS,gBAAgB,EAAE,UAAU,OAAO,MAAM,QAAQ,YAAY,GAAyB;AACpG,SACE,qBAAC,YAAO,WAAU,mBAAkB,cAAY,OAC9C;AAAA,wBAAC,QAAK,WAAU,yBAAyB,UAAS;AAAA,KAChD,SAAS,SACT,qBAAC,gBACE;AAAA,eAAS,oBAAC,UAAM,iBAAM;AAAA,MACtB,QAAQ,oBAAC,UAAK,WAAU,wBAAwB,gBAAK;AAAA,OACxD;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/website/Workbench/WorkbenchHero.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface WorkbenchStat {
+    id: string;
+    value: ReactNode;
+    label: ReactNode;
+}
+interface WorkbenchHeroProps {
+    /** The ink clause of the statement; it is the page's h1. */
+    statement: ReactNode;
+    /** The muted continuation of the statement. */
+    lead?: ReactNode;
+    /** Up to two buttons or links, primary first. */
+    actions?: ReactNode;
+    /** Small counts beside the statement, such as projects and posts. */
+    stats?: WorkbenchStat[];
+    /** One captioned photograph under the statement — a `WorkbenchFigure`. */
+    figure?: ReactNode;
+}
+/** The Workbench opening: a two-tone statement, its actions, a few counts and one photograph. */
+declare function WorkbenchHero({ statement, lead, actions, stats, figure }: WorkbenchHeroProps): react.JSX.Element;
+
+export { WorkbenchHero, type WorkbenchHeroProps, type WorkbenchStat };

package/dist/website/Workbench/WorkbenchHero.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function WorkbenchHero({ statement, lead, actions, stats = [], figure }) {
+  return /* @__PURE__ */ jsxs("section", { className: "folio-wb-hero", children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-wb-hero-copy", children: [
+      /* @__PURE__ */ jsxs("h1", { className: "folio-wb-heading folio-wb-hero-statement", children: [
+        /* @__PURE__ */ jsx("span", { children: statement }),
+        lead && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "folio-wb-heading-lead", children: lead })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "folio-wb-hero-actions", children: actions })
+    ] }),
+    stats.length > 0 && /* @__PURE__ */ jsx("dl", { className: "folio-wb-hero-stats", children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: stat.label }),
+      /* @__PURE__ */ jsx("dd", { children: stat.value })
+    ] }, stat.id)) }),
+    figure && /* @__PURE__ */ jsx("div", { className: "folio-wb-hero-figure", children: figure })
+  ] });
+}
+export {
+  WorkbenchHero
+};
+//# sourceMappingURL=WorkbenchHero.js.map

package/dist/website/Workbench/WorkbenchHero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/WorkbenchHero.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface WorkbenchStat {\n  id: string\n  value: ReactNode\n  label: ReactNode\n}\n\nexport interface WorkbenchHeroProps {\n  /** The ink clause of the statement; it is the page's h1. */\n  statement: ReactNode\n  /** The muted continuation of the statement. */\n  lead?: ReactNode\n  /** Up to two buttons or links, primary first. */\n  actions?: ReactNode\n  /** Small counts beside the statement, such as projects and posts. */\n  stats?: WorkbenchStat[]\n  /** One captioned photograph under the statement — a `WorkbenchFigure`. */\n  figure?: ReactNode\n}\n\n/** The Workbench opening: a two-tone statement, its actions, a few counts and one photograph. */\nexport function WorkbenchHero({ statement, lead, actions, stats = [], figure }: WorkbenchHeroProps) {\n  return (\n    <section className=\"folio-wb-hero\">\n      <div className=\"folio-wb-hero-copy\">\n        <h1 className=\"folio-wb-heading folio-wb-hero-statement\">\n          <span>{statement}</span>\n          {lead && <> <span className=\"folio-wb-heading-lead\">{lead}</span></>}\n        </h1>\n        {actions && <div className=\"folio-wb-hero-actions\">{actions}</div>}\n      </div>\n      {stats.length > 0 && (\n        <dl className=\"folio-wb-hero-stats\">\n          {stats.map((stat) => (\n            <div key={stat.id}>\n              <dt>{stat.label}</dt>\n              <dd>{stat.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n      {figure && <div className=\"folio-wb-hero-figure\">{figure}</div>}\n    </section>\n  )\n}\n"],"mappings":"AA2BU,SACS,UADT,KACS,YADT;AALH,SAAS,cAAc,EAAE,WAAW,MAAM,SAAS,QAAQ,CAAC,GAAG,OAAO,GAAuB;AAClG,SACE,qBAAC,aAAQ,WAAU,iBACjB;AAAA,yBAAC,SAAI,WAAU,sBACb;AAAA,2BAAC,QAAG,WAAU,4CACZ;AAAA,4BAAC,UAAM,qBAAU;AAAA,QAChB,QAAQ,iCAAE;AAAA;AAAA,UAAC,oBAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,WAAO;AAAA,SACnE;AAAA,MACC,WAAW,oBAAC,SAAI,WAAU,yBAAyB,mBAAQ;AAAA,OAC9D;AAAA,IACC,MAAM,SAAS,KACd,oBAAC,QAAG,WAAU,uBACX,gBAAM,IAAI,CAAC,SACV,qBAAC,SACC;AAAA,0BAAC,QAAI,eAAK,OAAM;AAAA,MAChB,oBAAC,QAAI,eAAK,OAAM;AAAA,SAFR,KAAK,EAGf,CACD,GACH;AAAA,IAED,UAAU,oBAAC,SAAI,WAAU,wBAAwB,kBAAO;AAAA,KAC3D;AAEJ;","names":[]}

package/dist/website/Workbench/theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The Workbench preset as the attributes a host writes on `<html>`.
+ *
+ * A preset is a combination of theme axes, never a block of its own, so this
+ * is the whole of it: linen ground and warm ink, an ember accent for links and
+ * the current state, primary buttons in ink, headings in the grotesk at a quiet voice, and quiet rules. Radius, motion
+ * and density stay on their defaults. Spread it onto the root element:
+ *
+ * ```tsx
+ * <html {...WORKBENCH_THEME} data-mode="light">
+ * ```
+ */
+declare const WORKBENCH_THEME: {
+    readonly 'data-surface': "linen";
+    readonly 'data-accent': "ember";
+    readonly 'data-action': "ink";
+    readonly 'data-type': "grotesk";
+    readonly 'data-rules': "quiet";
+    readonly 'data-voice': "quiet";
+};
+
+export { WORKBENCH_THEME };

package/dist/website/Workbench/theme.js

@@ -0,0 +1,12 @@
+const WORKBENCH_THEME = {
+  "data-surface": "linen",
+  "data-accent": "ember",
+  "data-action": "ink",
+  "data-type": "grotesk",
+  "data-rules": "quiet",
+  "data-voice": "quiet"
+};
+export {
+  WORKBENCH_THEME
+};
+//# sourceMappingURL=theme.js.map

package/dist/website/Workbench/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/theme.ts"],"sourcesContent":["/**\n * The Workbench preset as the attributes a host writes on `<html>`.\n *\n * A preset is a combination of theme axes, never a block of its own, so this\n * is the whole of it: linen ground and warm ink, an ember accent for links and\n * the current state, primary buttons in ink, headings in the grotesk at a quiet voice, and quiet rules. Radius, motion\n * and density stay on their defaults. Spread it onto the root element:\n *\n * ```tsx\n * <html {...WORKBENCH_THEME} data-mode=\"light\">\n * ```\n */\nexport const WORKBENCH_THEME = {\n  'data-surface': 'linen',\n  'data-accent': 'ember',\n  'data-action': 'ink',\n  'data-type': 'grotesk',\n  'data-rules': 'quiet',\n  'data-voice': 'quiet',\n} as const\n"],"mappings":"AAYO,MAAM,kBAAkB;AAAA,EAC7B,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAChB;","names":[]}

package/dist/website/index.d.ts

@@ -18,6 +18,17 @@ export { ClipboardButton, ClipboardButtonProps, CodePanel, CodePanelProps } from
 export { ActionMenu, ActionMenuItem, ActionMenuProps, ScrollControl, ScrollControlProps } from './Actions/Actions.js';
 export { ActionProposal, ActionProposalProps, ConversationAnswer, ConversationAnswerHeading, ConversationAnswerProps, ConversationControl, ConversationDock, ConversationDockCorner, ConversationDockProps, ConversationDockWelcome, ConversationDockWelcomeProps, ConversationFacts, ConversationFactsProps, ConversationLauncher, ConversationLauncherProps, ConversationLayout, ConversationLayoutProps, ConversationLog, ConversationLogProps, ConversationProse, ConversationQuote, ConversationQuoteProps, ConversationResizeHandle, ConversationResizeHandleProps, ConversationRoomLink, ConversationSource, ConversationSources, ConversationSourcesProps, ConversationSuggestion, ConversationSuggestions, ConversationSuggestionsProps, ConversationThread, ConversationThreadProps, ConversationTurn, ConversationTurnProps, QuestionComposer, QuestionComposerProps, SelectionToolbar, SelectionToolbarAction, SelectionToolbarProps, StreamingCaret } from './Conversation/Conversation.js';
 export { ActivityTrace, ActivityTraceItem, ActivityTraceProps, EvidenceDisclosure, EvidenceDisclosureProps, EvidenceDuration, EvidenceDurations, EvidenceDurationsProps, EvidenceFacts, EvidenceFactsProps, EvidenceMeter, EvidenceMeterProps, EvidencePanel, EvidencePanelProps, EvidenceQuery, EvidenceQueryProps, EvidenceScore, EvidenceScores, EvidenceScoresProps, EvidenceSelection, EvidenceSelectionProps, EvidenceStage, EvidenceStageProps, EvidenceStages, EvidenceState, EvidenceStatus, EvidenceStatusProps, EvidenceSummary, EvidenceSummaryProps, SignalFigure, SignalFigureProps } from './Evidence/Evidence.js';
+export { Reveal, RevealProps } from './Workbench/Reveal.js';
+export { WorkbenchSection, WorkbenchSectionProps } from './Workbench/Workbench.js';
+export { WorkbenchHero, WorkbenchHeroProps, WorkbenchStat } from './Workbench/WorkbenchHero.js';
+export { WorkbenchFigure, WorkbenchFigureProps } from './Workbench/WorkbenchFigure.js';
+export { ToolStrip, ToolStripItem, ToolStripProps } from './Workbench/ToolStrip.js';
+export { WorkbenchCard, WorkbenchCardGrid, WorkbenchCardGridProps, WorkbenchCardProps, WorkbenchTile, WorkbenchTileProps } from './Workbench/WorkbenchCard.js';
+export { WorkbenchEntries, WorkbenchEntriesProps, WorkbenchEntry } from './Workbench/WorkbenchEntries.js';
+export { Chronology, ChronologyItem, ChronologyProps } from './Workbench/Chronology.js';
+export { PhotoMosaic, PhotoMosaicProps } from './Workbench/PhotoMosaic.js';
+export { ContactRow, ContactRowProps } from './Workbench/ContactRow.js';
+export { WORKBENCH_THEME } from './Workbench/theme.js';
 import 'react';
 import '../components/DescriptionList/DescriptionList.js';
 import '../components/ErrorState/ErrorState.js';

package/dist/website/index.js

@@ -18,4 +18,15 @@ export * from "./Content/CodePanel.js";
 export * from "./Actions/Actions.js";
 export * from "./Conversation/Conversation.js";
 export * from "./Evidence/Evidence.js";
+export * from "./Workbench/Reveal.js";
+export * from "./Workbench/Workbench.js";
+export * from "./Workbench/WorkbenchHero.js";
+export * from "./Workbench/WorkbenchFigure.js";
+export * from "./Workbench/ToolStrip.js";
+export * from "./Workbench/WorkbenchCard.js";
+export * from "./Workbench/WorkbenchEntries.js";
+export * from "./Workbench/Chronology.js";
+export * from "./Workbench/PhotoMosaic.js";
+export * from "./Workbench/ContactRow.js";
+export * from "./Workbench/theme.js";
 //# sourceMappingURL=index.js.map

package/dist/website/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/website/index.ts"],"sourcesContent":["export * from './SiteShell/SiteShell'\nexport * from './SiteNavigation/SiteNavigation'\nexport * from './Portfolio/Portfolio'\nexport * from './Portfolio/QuestionCard'\nexport * from './PortfolioIndex/PortfolioIndex'\nexport * from './Collection/Collection'\nexport * from './Reading/Reading'\nexport * from './Contact/Contact'\nexport * from './Music/Music'\nexport * from './Timeline/Timeline'\nexport * from './Recovery/Recovery'\nexport * from './Media/Media'\nexport * from './Media/MediaLightbox'\nexport * from './Metrics/Metrics'\nexport * from './SearchPalette/SearchPalette'\nexport * from './Content/Content'\nexport * from './Content/CodePanel'\nexport * from './Actions/Actions'\nexport * from './Conversation/Conversation'\nexport * from './Evidence/Evidence'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/website/index.ts"],"sourcesContent":["export * from './SiteShell/SiteShell'\nexport * from './SiteNavigation/SiteNavigation'\nexport * from './Portfolio/Portfolio'\nexport * from './Portfolio/QuestionCard'\nexport * from './PortfolioIndex/PortfolioIndex'\nexport * from './Collection/Collection'\nexport * from './Reading/Reading'\nexport * from './Contact/Contact'\nexport * from './Music/Music'\nexport * from './Timeline/Timeline'\nexport * from './Recovery/Recovery'\nexport * from './Media/Media'\nexport * from './Media/MediaLightbox'\nexport * from './Metrics/Metrics'\nexport * from './SearchPalette/SearchPalette'\nexport * from './Content/Content'\nexport * from './Content/CodePanel'\nexport * from './Actions/Actions'\nexport * from './Conversation/Conversation'\nexport * from './Evidence/Evidence'\nexport * from './Workbench/Reveal'\nexport * from './Workbench/Workbench'\nexport * from './Workbench/WorkbenchHero'\nexport * from './Workbench/WorkbenchFigure'\nexport * from './Workbench/ToolStrip'\nexport * from './Workbench/WorkbenchCard'\nexport * from './Workbench/WorkbenchEntries'\nexport * from './Workbench/Chronology'\nexport * from './Workbench/PhotoMosaic'\nexport * from './Workbench/ContactRow'\nexport * from './Workbench/theme'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/website-collection.css

@@ -6,13 +6,13 @@
 .folio-content-band[data-spacing=section]{padding-block:clamp(3rem,7vw,6rem)}
 .folio-collection-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4.5rem)}
 .folio-collection-intro:has(>div:only-child){grid-template-columns:minmax(0,1fr)}
-.folio-collection-intro h1{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-title);line-height:1.05;letter-spacing:-.032em;text-wrap:balance}
+.folio-collection-intro h1{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-title);line-height:1.05;letter-spacing:-.032em;text-wrap:balance}
 .folio-collection-intro>div:first-child>p{max-width:54ch;margin-block:1.5rem 0;color:var(--ink-2);font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.65;text-wrap:pretty}
 .folio-collection-intro[data-compact] h1{font-size:var(--fs-lead)}
 .folio-collection-intro-media{min-width:0}
 .folio-collection-intro-media img{width:100%;height:auto}
-.folio-collection-context,.folio-record-context,.folio-record-metadata,.folio-collection-count{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;line-height:1.65;letter-spacing:.09em;color:var(--ink-3-aa)}
-.folio-collection-context{margin-block-end:1rem;text-transform:uppercase}
+.folio-collection-context,.folio-record-context,.folio-record-metadata,.folio-collection-count{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;line-height:1.65;letter-spacing:calc(.09em * var(--label-tracking-scale));color:var(--ink-3-aa)}
+.folio-collection-context{margin-block-end:1rem;text-transform:var(--label-case)}
 .folio-collection-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-start:1.5rem}
 .folio-collection-metadata{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin:0;padding-block:1.25rem;border-block:1px solid var(--rule)}
 .folio-collection-metadata dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
@@ -20,7 +20,7 @@
 .folio-collection-group{padding-block-start:clamp(3rem,7vw,6rem)}
 .folio-collection-group[data-compact]{padding-block-start:1.5rem}
 .folio-collection-group-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-hard);padding-block-end:1rem;margin-block-end:1rem}
-.folio-collection-group-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-lead);line-height:1.1;letter-spacing:-.028em}
+.folio-collection-group-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-lead);line-height:1.1;letter-spacing:-.028em}
 .folio-collection-group-heading>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
 .folio-collection-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border-block:1px solid var(--rule);padding-block:1rem}
 .folio-collection-controls[data-quiet]{border:0}
@@ -38,7 +38,7 @@
 .folio-record-media[data-empty]{border:0;background:transparent}
 .folio-record-media img{display:block;width:100%;height:100%;object-fit:cover}
 .folio-record-copy{min-width:0}
-.folio-record-copy h2,.folio-record-copy h3{margin:.375rem 0 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-heading);font-weight:300;line-height:1.16;letter-spacing:-.022em}
+.folio-record-copy h2,.folio-record-copy h3{margin:.375rem 0 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-heading);font-weight:var(--display-weight);line-height:1.16;letter-spacing:-.022em}
 .folio-record-link:hover h2,.folio-record-link:hover h3{color:var(--ink-2)}
 .folio-record-context{display:flex;flex-wrap:wrap;gap:.75rem}
 .folio-record-summary{max-width:var(--measure-record,62ch);margin:.875rem 0 0;color:var(--ink-2);line-height:1.66;text-wrap:pretty}
@@ -59,7 +59,7 @@
 .folio-featured-record-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-sm)}
 .folio-featured-record-media>a{display:block;width:100%;height:100%}
 .folio-featured-record-media img{width:100%;height:100%;object-fit:cover}
-.folio-featured-record h2{margin-block:1.125rem 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:300;line-height:1.1;letter-spacing:-.028em}
+.folio-featured-record h2{margin-block:1.125rem 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.1;letter-spacing:-.028em}
 .folio-featured-record h2 a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
 .folio-featured-record p{max-width:49ch;margin-block:1.25rem 0;color:var(--ink-2);line-height:1.7}
 .folio-collection-footer{padding-block-start:clamp(2rem,5vw,4rem)}

package/dist/website-content.css

@@ -1,4 +1,7 @@
 .folio-step-sequence { margin: 0; }
+/* A sequence's anchor is emphasis, not progress, so it takes the primary
+   action's fill: the accent by default, ink where `data-action` says so. */
+.folio-sequence-step[data-anchor] .folio-sequence-counter { border-color: var(--action); background: var(--action); color: var(--action-foreground); }
 /* The rail itself is the core Steps rendering; only what Steps has no slot for lives here. The column's own 0.25rem gap plus this margin keeps tags 0.625rem under the note. */
 .folio-sequence-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.375rem; }
 .folio-sequence-caption { max-inline-size: 62ch; margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border-subtle); color: var(--foreground-muted); font-size: 0.875rem; line-height: 1.65; }
@@ -8,7 +11,7 @@
 .folio-code-panel,
 figure:has(> .folio-code-panel-head) { min-inline-size: 0; margin-block: 2rem; margin-inline: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--background); }
 .folio-code-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.25rem; padding-inline: 1rem 0.375rem; border-block-end: 1px solid var(--border-subtle); background: var(--background-elevated); }
-.folio-code-panel-head > span { color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; }
+.folio-code-panel-head > span { color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.14em * var(--label-tracking-scale)); }
 .folio-clipboard-button { min-inline-size: 44px; min-block-size: 44px; }
 pre.folio-code-panel-pre,
 [data-folio-article] pre.folio-code-panel-pre { min-inline-size: 0; margin: 0; padding: 1rem 1.125rem; overflow-x: auto; border: 0; border-radius: 0; background: var(--background); color: var(--foreground); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; scrollbar-width: thin; }

package/dist/website-conversation.css

@@ -32,7 +32,7 @@
 .folio-conversation-turn__body { max-inline-size: 64ch; padding-block-start: .75rem; }
 .folio-conversation-turn__preview { max-inline-size: 64ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .folio-conversation-quote { margin: 0 0 1.5rem; border-inline-start: 1px solid var(--rule-2); padding-inline-start: 1.25rem; }
-.folio-conversation-quote > blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: .5rem 0 0; font-family: var(--font-heading); font-weight: 300; font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
+.folio-conversation-quote > blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: .5rem 0 0; font-family: var(--font-heading); font-weight: var(--display-weight); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
 .folio-conversation-quote[data-compact] { margin-block-end: 1rem; padding-inline-start: .875rem; }
 .folio-conversation-quote[data-compact] > blockquote { -webkit-line-clamp: 3; font-size: .875rem; }
 .folio-conversation-answer__question { margin-block: .375rem 1rem; font-family: var(--font-heading); }

package/dist/website-media.css

@@ -18,8 +18,8 @@
 
 .folio-media-detail-page { min-block-size: 100svh; }
 .folio-media-masthead { padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(1.75rem, 3.5vw, 2.75rem); }
-.folio-media-eyebrow { margin: 0; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
-.folio-media-masthead-title { max-inline-size: 22ch; margin: 0.75rem 0 0; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: 300; letter-spacing: -0.034em; line-height: 1.04; text-wrap: balance; }
+.folio-media-eyebrow { margin: 0; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.16em * var(--label-tracking-scale)); text-transform: var(--label-case); }
+.folio-media-masthead-title { max-inline-size: 22ch; margin: 0.75rem 0 0; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: var(--display-weight); letter-spacing: -0.034em; line-height: 1.04; text-wrap: balance; }
 .folio-media-description { max-inline-size: 52ch; margin-block: 1.25rem 0; color: var(--foreground-muted); font-size: 1rem; line-height: 1.7; }
 .folio-media-gallery-content { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(4rem, 9vw, 8rem); }
 .folio-media-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.75rem, 5.5vw, 4.5rem) 1.5rem; margin: 0; padding: 0; list-style: none; }
@@ -33,13 +33,13 @@
 .folio-media-pager-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
 .folio-media-gallery-caption { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.625rem; padding-block-start: 0.875rem; }
 .folio-media-gallery-index,
-.folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-overflow: ellipsis; white-space: nowrap; }
+.folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.1em * var(--label-tracking-scale)); text-overflow: ellipsis; white-space: nowrap; }
 .folio-media-gallery-location { grid-column: 2; letter-spacing: 0.14em; }
-.folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 300; line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: var(--display-weight); line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .folio-media-gallery-mount { block-size: auto; aspect-ratio: 1; }
 
 .folio-photograph-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 8vw, 7rem); }
-.folio-photograph-feature-title { margin-block: 1rem; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; }
+.folio-photograph-feature-title { margin-block: 1rem; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 4rem); font-weight: var(--display-weight); letter-spacing: -0.035em; line-height: 1.08; }
 .folio-photograph-feature-action { margin-block-start: 2rem; }
 .folio-photograph-feature-figure { min-inline-size: 0; margin: 0; }
 .folio-photograph-feature-image img { display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
@@ -48,7 +48,7 @@
 .folio-media-detail { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
 .folio-media-index-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-index-bar > :is(a, button) { min-inline-size: 44.25px; min-block-size: 44.25px; }
-.folio-media-index { color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; font-variant-numeric: tabular-nums; letter-spacing: 0.13em; }
+.folio-media-index { color: var(--foreground-muted); font-family: var(--label-font); font-size: 0.6875rem; font-variant-numeric: tabular-nums; letter-spacing: calc(0.13em * var(--label-tracking-scale)); }
 .folio-media-spread { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 29vw, 27rem); align-items: start; gap: clamp(1.5rem, 3.5vw, 4.5rem); padding-block: clamp(1.5rem, 3.5vw, 3.75rem); }
 .folio-media-well { display: flex; min-inline-size: 0; align-items: flex-start; }
 .folio-media-frame {
@@ -76,7 +76,7 @@
 .folio-media-metadata > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding-block: 0.6875rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-metadata > div:first-child { padding-block-start: 0.6875rem; }
 .folio-media-metadata > div:last-child { padding-block-end: 0.6875rem; border-block-end: 1px solid var(--border-subtle); }
-.folio-media-metadata dt { flex: none; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.folio-media-metadata dt { flex: none; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.14em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-metadata dd { min-inline-size: 0; margin: 0; color: var(--foreground); font-family: var(--font-mono); font-size: 0.78125rem; text-align: end; overflow-wrap: anywhere; }
 .folio-media-light { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 1.1rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-light-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; }
@@ -117,7 +117,7 @@
 .folio-media-lightbox-close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
 .folio-media-lightbox-close:hover { border-color: var(--on-dark); }
 .folio-media-lightbox-close:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
-.folio-media-lightbox-caption { position: absolute; inset-block-end: 1.25rem; inset-inline: 1.25rem; overflow: hidden; margin: 0; color: var(--on-dark); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
+.folio-media-lightbox-caption { position: absolute; inset-block-end: 1.25rem; inset-inline: 1.25rem; overflow: hidden; margin: 0; color: var(--on-dark); font-family: var(--label-font); font-size: 0.6875rem; letter-spacing: calc(0.13em * var(--label-tracking-scale)); text-transform: var(--label-case); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
 
 .folio-media-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: clamp(2rem, 4vw, 3.5rem); border-block-start: 1px solid var(--border-color); border-block-end: 1px solid var(--border-subtle); }
 .folio-media-pager-link { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); min-block-size: 44px; align-items: center; gap: 1rem; padding-block: 1.125rem; padding-inline-end: 1.5rem; color: inherit; text-decoration: none; }
@@ -127,10 +127,10 @@
 .folio-media-pager-link[data-direction='next'] .folio-media-pager-copy { text-align: end; }
 .folio-media-pager-image { position: relative; display: block; block-size: 3.25rem; overflow: hidden; background: var(--background-elevated); }
 .folio-media-pager-image img { object-fit: contain; }
-.folio-media-pager-label { display: block; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
-.folio-media-pager-title { display: block; overflow: hidden; margin-block-start: 0.3125rem; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 300; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
+.folio-media-pager-label { display: block; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.16em * var(--label-tracking-scale)); text-transform: var(--label-case); }
+.folio-media-pager-title { display: block; overflow: hidden; margin-block-start: 0.3125rem; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--display-weight); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
 .folio-media-thumbnails { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 1px solid var(--border-subtle); }
-.folio-media-thumbnails h2 { margin-block: 0 0.75rem; color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; }
+.folio-media-thumbnails h2 { margin-block: 0 0.75rem; color: var(--foreground-muted); font-family: var(--label-font); font-size: 0.6875rem; font-weight: 400; letter-spacing: calc(0.13em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-thumbnail-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.8rem); }
 .folio-media-thumbnail { position: relative; min-inline-size: 44px; min-block-size: 44px; aspect-ratio: 1; overflow: hidden; background: var(--background-elevated); }
 .folio-media-thumbnail img { object-fit: contain; }
@@ -171,7 +171,7 @@
 .folio-media-map-pin[data-active] > span,
 .folio-media-map-marker:hover .folio-media-map-pin > span { transform: scale(1.3); }
 .folio-media-map-frame-compact { display: grid; gap: 0.75rem; margin-block-start: 1.5rem; }
-.folio-media-map-label { color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.folio-media-map-label { color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.14em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-map-frame-compact .folio-media-map-stage { block-size: 9.375rem; }
 .folio-media-map-frame-compact .folio-media-map-stage img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
 .folio-media-map-frame-compact .folio-media-map-pin { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }

package/dist/website-portfolio.css

@@ -20,11 +20,11 @@
   .folio-portfolio-intro { max-inline-size: var(--w-page); margin-inline: auto; padding: clamp(7.5rem, 11vw, 10rem) var(--page-pad) clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr); align-items: stretch; gap: clamp(3rem, 7vw, 7rem); }
   .folio-portfolio-intro-copy { display: flex; flex-direction: column; align-items: start; }
   .folio-portfolio-byline { display: flex; align-items: center; gap: 1.25rem; }
-  .folio-portfolio-byline h1 { font-weight: 300; font-size: clamp(2.7rem, 5vw, 4rem); }
+  .folio-portfolio-byline h1 { font-weight: var(--display-weight); font-size: clamp(2.7rem, 5vw, 4rem); }
   .folio-portfolio-monogram { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--ink-3-aa); font-family: var(--mono); font-size: .7rem; }
   .folio-portfolio-biography { max-inline-size: 35em; margin-block-start: 2rem; font-size: 1.05rem; line-height: 1.85; color: var(--ink-2); text-wrap: pretty; }
   .folio-portfolio-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-block: 1.5rem 3rem; }
-  .folio-portfolio-intro blockquote { margin: auto 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); inline-size: 100%; font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; color: var(--ink-3-aa); }
+  .folio-portfolio-intro blockquote { margin: auto 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); inline-size: 100%; font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.7; color: var(--ink-3-aa); }
   .folio-portfolio-feature { min-inline-size: 0; }
   .folio-portfolio-index { max-inline-size: var(--w-page); margin-inline: auto; padding: 1rem var(--page-pad) clamp(5rem, 9vw, 8rem); }
   .folio-portfolio-columns { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(3rem, 5vw, 5rem); align-items: start; padding-block-start: 1.5rem; }
@@ -36,7 +36,7 @@
   .folio-portfolio-image-frame img { object-fit: cover; }
   .folio-portfolio-image[data-size='feature'] .folio-portfolio-image-frame { aspect-ratio: 1; }
   .folio-portfolio-image[data-size='thumbnail'] .folio-portfolio-image-frame { aspect-ratio: 3 / 2; }
-  .folio-portfolio-image figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding-block-start: .625rem; color: var(--ink); font-family: var(--serif); font-size: .9375rem; line-height: 1.4; }
+  .folio-portfolio-image figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding-block-start: .625rem; color: var(--ink); font-family: var(--font-heading); font-size: .9375rem; line-height: 1.4; }
   .folio-portfolio-image figcaption > [aria-hidden] { font-family: var(--mono); font-size: .7rem; color: var(--ink-3-aa); }
   .folio-portfolio-image figcaption small { flex-basis:100%; margin-inline-start:0; text-align:start; color: var(--ink-3-aa); font-family: var(--sans); font-size: .75rem; }
   .folio-portfolio-record { display: grid; gap: 1.5rem; }
@@ -56,7 +56,7 @@
   .folio-portfolio-list > h2, .folio-portfolio-categories h2 { margin: 0 0 1rem; font-family: var(--sans); font-size: .85rem; color: var(--ink-3-aa); font-weight: 500; }
   .folio-portfolio-categories dl { margin: 0; }
   .folio-portfolio-categories dl > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: .35rem; }
-  .folio-portfolio-categories dt { font-family: var(--serif); font-size: 1.125rem; }
+  .folio-portfolio-categories dt { font-family: var(--font-heading); font-size: 1.125rem; }
   .folio-portfolio-categories dt a { display: flex; align-items: center; min-block-size: 44px; }
   .folio-portfolio-categories dd { margin: 0; font-family: var(--mono); font-size: .75rem; color: var(--ink-3-aa); }
   @media (max-width: 1023px) {

package/dist/website-reading.css

@@ -3,16 +3,16 @@
 .folio-detail-masthead[data-width=fill],.folio-reading-figure[data-width=fill]{padding-inline:0;max-width:none}
 .folio-detail-back{margin-block-end:clamp(2rem,5vw,3rem)}
 .folio-detail-back a{display:inline-flex;align-items:center;min-height:44px;gap:.5rem;color:var(--ink-3-aa);font-size:.875rem;text-decoration:none}
-.folio-detail-context{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);letter-spacing:.12em;margin-block:0 1.25rem}
+.folio-detail-context{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;color:var(--ink-3-aa);letter-spacing:calc(.12em * var(--label-tracking-scale));margin-block:0 1.25rem}
 .folio-detail-opening{display:grid;gap:2.5rem}
 .folio-detail-opening[data-aside]{grid-template-columns:minmax(0,1fr) minmax(19rem,26rem);gap:clamp(3rem,7vw,6rem)}
 .folio-detail-opening>div{min-width:0}
-.folio-detail-masthead h1{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-title);font-weight:300;line-height:1.05;letter-spacing:-.032em;text-wrap:balance;margin:0}
+.folio-detail-masthead h1{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-title);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.032em;text-wrap:balance;margin:0}
 .folio-detail-masthead[data-display] h1{font-size:clamp(2.5rem,7vw,5.5rem)}
 .folio-detail-dek{max-width:64ch;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.65;color:var(--ink-2);margin-block:1.75rem 0;text-wrap:pretty}
 .folio-detail-metabar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2.5rem;border-block:1px solid var(--rule);padding-block:1.25rem;margin-block-start:clamp(2rem,4vw,3rem)}
 .folio-detail-metabar dl{display:flex;flex-wrap:wrap;gap:1.25rem 2.75rem;margin:0;min-width:0}
-.folio-detail-metabar dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem;letter-spacing:.12em;color:var(--ink-3-aa)}
+.folio-detail-metabar dt{font-family:var(--mono-i18n,var(--label-font));font-size:.625rem;letter-spacing:calc(.12em * var(--label-tracking-scale));color:var(--ink-3-aa)}
 .folio-detail-metabar dd{display:flex;align-items:center;gap:.5rem;margin:.375rem 0 0;font-size:.9375rem}
 .folio-detail-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-inline-start:auto}
 .folio-reading-layout{padding-block-start:clamp(2.75rem,5vw,4rem)}
@@ -24,10 +24,10 @@
 .folio-reading-heading:has(+ .folio-reference-rows, + .folio-feature-pairs){margin-block-end:0}
 .folio-reading-heading + :is(.folio-reference-rows,.folio-feature-pairs){border-block-start:0}
 .folio-reading-heading:has(+ .folio-figure-band){margin-block-end:1.25rem;padding-block-end:0;border-block-end:0}
-.folio-reading-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:300;line-height:1.1;letter-spacing:-.028em}
+.folio-reading-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.1;letter-spacing:-.028em}
 .folio-reading-heading>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
 .folio-reading-lead{font-size:1.0625rem;line-height:1.75;color:var(--ink-2);margin-block:0 2rem}
-.folio-reading-lede>p:first-child{font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-lead);line-height:1.28;letter-spacing:-.01em;margin:0}
+.folio-reading-lede>p:first-child{font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-lead);line-height:1.28;letter-spacing:-.01em;margin:0}
 .folio-reading-lede>p:first-child>span{color:var(--ink-3-aa)}
 .folio-reading-lede>p+p{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);margin-block-start:1.5rem}
 .folio-record-pager{display:grid;grid-template-columns:1fr 1fr;margin-block-start:clamp(3.5rem,7vw,5rem)}
@@ -35,12 +35,12 @@
 .folio-record-pager-link[data-direction=prev]{border-inline-end:1px solid var(--rule);padding-inline-end:1.5rem}
 .folio-record-pager-link[data-direction=next]{text-align:end;justify-content:end;padding-inline-start:1.5rem}
 .folio-record-pager-direction{display:block;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
-.folio-record-pager strong{display:block;margin-block-start:.5rem;font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-item);line-height:1.25}
+.folio-record-pager strong{display:block;margin-block-start:.5rem;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-item);line-height:1.25}
 .folio-record-pager-media{position:relative;width:4.5rem;height:3rem;overflow:hidden}
 .folio-record-pager-media img{width:100%;height:100%;object-fit:cover}
 .folio-toc{color:var(--ink-3-aa)}
 .folio-toc>div{position:sticky;inset-block-start:7rem}
-.folio-toc p{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem;letter-spacing:.12em;margin-block:0 1rem}
+.folio-toc p{font-family:var(--mono-i18n,var(--label-font));font-size:.625rem;letter-spacing:calc(.12em * var(--label-tracking-scale));margin-block:0 1rem}
 .folio-toc ul{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--rule)}
 .folio-toc ul ul{border:0;padding-inline-start:1rem}
 .folio-toc a{display:flex;align-items:baseline;gap:.625rem;min-height:2rem;padding:.375rem .5rem .375rem 1rem;color:inherit;font-size:.8125rem;line-height:1.5;text-decoration:none}
@@ -68,15 +68,15 @@
 .folio-media-playback video{display:block;width:100%;height:100%;object-fit:cover}
 .folio-media-playback button{position:absolute;inset-inline-end:.75rem;inset-block-end:.75rem;background:var(--paper)}
 .folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-hard);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
-.folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;letter-spacing:.1em;color:var(--ink-3-aa)}
-.folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:300;line-height:1.15;margin:0;text-wrap:balance}
+.folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;letter-spacing:calc(.1em * var(--label-tracking-scale));color:var(--ink-3-aa)}
+.folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.15;margin:0;text-wrap:balance}
 .folio-action-band p{max-width:46ch;color:var(--ink-3-aa);line-height:1.7;margin:1rem 0 0}
 .folio-action-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
 .folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-hard)}
 .folio-reading-section[data-seamless] .folio-feature-pairs{border-block-start:0}
 .folio-feature-pairs>div{padding-block:clamp(1.5rem,3vw,2rem);border-block-end:1px solid var(--rule)}
 .folio-feature-pairs span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
-.folio-feature-pairs h3{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-item);font-weight:300;line-height:1.2;margin-block:0 .75rem}
+.folio-feature-pairs h3{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-item);font-weight:var(--display-weight);line-height:1.2;margin-block:0 .75rem}
 .folio-feature-pairs p{color:var(--ink-2);font-size:1rem;line-height:1.7;margin:0}
 .folio-preview-pair{display:grid;gap:2rem;align-items:end;padding-block-start:1.75rem}
 .folio-preview-pair[data-mobile]{grid-template-columns:minmax(0,1fr) minmax(13.5rem,.3fr)}

package/dist/website-shell.css

@@ -19,7 +19,7 @@
   }
   .folio-site-navigation[data-overlay]::before { content: ''; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--photo-scrim) 45%, transparent), transparent); }
   .folio-site-navigation-inner { max-inline-size: var(--w-page); padding-inline: var(--page-pad); margin-inline: auto; min-block-size: 4.25rem; display: flex; align-items: center; gap: 2rem; }
-  .folio-site-wordmark { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.025em; white-space: nowrap; }
+  .folio-site-wordmark { font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: -.025em; white-space: nowrap; }
   .folio-site-wordmark a { display: inline-flex; align-items: center; min-block-size: 44px; }
   .folio-site-navigation-desktop { margin-inline-start: auto; }
   .folio-site-navigation-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.6rem; }