@misoto22/folio 0.16.0 → 0.17.1

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface WorkbenchSectionProps {
+    /** The heading's first, ink-coloured clause. */
+    title: ReactNode;
+    /** The muted continuation that follows the title in the same line. */
+    lead?: ReactNode;
+    /** One accent link under the heading, such as "All projects →". */
+    action?: ReactNode;
+    /** Heading level; sections on a page are h2. */
+    level?: 2 | 3;
+    id?: string;
+    children: ReactNode;
+}
+/**
+ * The Workbench section: a hairline, a two-tone heading in the first four
+ * columns, and the content on an eight-column subgrid beside it. Every section
+ * on a Workbench page uses this one rhythm, which is what keeps them aligned.
+ */
+declare function WorkbenchSection({ title, lead, action, level, id, children }: WorkbenchSectionProps): react.JSX.Element;
+
+export { WorkbenchSection, type WorkbenchSectionProps };

package/dist/website/Workbench/Workbench.js

@@ -0,0 +1,22 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Reveal } from "./Reveal.js";
+function WorkbenchSection({ title, lead, action, level = 2, id, children }) {
+  const Heading = level === 2 ? "h2" : "h3";
+  return /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsxs("section", { className: "folio-wb-section", id, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-wb-section-head", children: [
+      /* @__PURE__ */ jsxs(Heading, { className: "folio-wb-heading", children: [
+        /* @__PURE__ */ jsx("span", { children: title }),
+        lead && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "folio-wb-heading-lead", children: lead })
+        ] })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "folio-wb-section-action", children: action })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "folio-wb-section-body", children })
+  ] }) });
+}
+export {
+  WorkbenchSection
+};
+//# sourceMappingURL=Workbench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/Workbench.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { Reveal } from './Reveal'\n\nexport interface WorkbenchSectionProps {\n  /** The heading's first, ink-coloured clause. */\n  title: ReactNode\n  /** The muted continuation that follows the title in the same line. */\n  lead?: ReactNode\n  /** One accent link under the heading, such as \"All projects →\". */\n  action?: ReactNode\n  /** Heading level; sections on a page are h2. */\n  level?: 2 | 3\n  id?: string\n  children: ReactNode\n}\n\n/**\n * The Workbench section: a hairline, a two-tone heading in the first four\n * columns, and the content on an eight-column subgrid beside it. Every section\n * on a Workbench page uses this one rhythm, which is what keeps them aligned.\n */\nexport function WorkbenchSection({ title, lead, action, level = 2, id, children }: WorkbenchSectionProps) {\n  const Heading = level === 2 ? 'h2' : 'h3'\n  return (\n    <Reveal>\n      <section className=\"folio-wb-section\" id={id}>\n        <div className=\"folio-wb-section-head\">\n          <Heading className=\"folio-wb-heading\">\n            <span>{title}</span>\n            {lead && <> <span className=\"folio-wb-heading-lead\">{lead}</span></>}\n          </Heading>\n          {action && <div className=\"folio-wb-section-action\">{action}</div>}\n        </div>\n        <div className=\"folio-wb-section-body\">{children}</div>\n      </section>\n    </Reveal>\n  )\n}\n"],"mappings":"AA4BY,SACS,UADT,KACS,YADT;AA3BZ,SAAS,cAAc;AAoBhB,SAAS,iBAAiB,EAAE,OAAO,MAAM,QAAQ,QAAQ,GAAG,IAAI,SAAS,GAA0B;AACxG,QAAM,UAAU,UAAU,IAAI,OAAO;AACrC,SACE,oBAAC,UACC,+BAAC,aAAQ,WAAU,oBAAmB,IACpC;AAAA,yBAAC,SAAI,WAAU,yBACb;AAAA,2BAAC,WAAQ,WAAU,oBACjB;AAAA,4BAAC,UAAM,iBAAM;AAAA,QACZ,QAAQ,iCAAE;AAAA;AAAA,UAAC,oBAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,WAAO;AAAA,SACnE;AAAA,MACC,UAAU,oBAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,OAC9D;AAAA,IACA,oBAAC,SAAI,WAAU,yBAAyB,UAAS;AAAA,KACnD,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface WorkbenchCardProps {
+    /** A cover image, or a `WorkbenchTile` when there is no picture. */
+    cover: ReactNode;
+    /** The title, usually a link; the whole card becomes its hit area. */
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+}
+/**
+ * An image-led record. The title's link is stretched over the card, so the
+ * card is one target without nesting interactive elements.
+ */
+declare function WorkbenchCard({ cover, title, description, meta }: WorkbenchCardProps): react.JSX.Element;
+interface WorkbenchCardGridProps {
+    children: ReactNode;
+}
+/** Two cards per row on the content subgrid, one on a phone. */
+declare function WorkbenchCardGrid({ children }: WorkbenchCardGridProps): react.JSX.Element;
+interface WorkbenchTileProps {
+    /** Large word set on the tile, such as a product name. */
+    label: ReactNode;
+}
+/** A typographic stand-in cover: ink ground, a fine grid, one word. */
+declare function WorkbenchTile({ label }: WorkbenchTileProps): react.JSX.Element;
+
+export { WorkbenchCard, WorkbenchCardGrid, type WorkbenchCardGridProps, type WorkbenchCardProps, WorkbenchTile, type WorkbenchTileProps };

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,21 +6,21 @@
 .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)}
 .folio-collection-metadata dd{margin:.5rem 0 0;color:var(--ink)}
 .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{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-divider);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: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,13 +59,13 @@
 .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)}
 .folio-collection-footer>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem}
 .folio-taxonomy-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.5rem}
-.folio-reference-rows{margin:0;border-block-start:1px solid var(--rule-hard)}
+.folio-reference-rows{margin:0;border-block-start:1px solid var(--rule-divider)}
 .folio-reference-rows>div{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(0,3fr);gap:1.5rem;padding-block:1.5rem;border-block-end:1px solid var(--rule)}
 .folio-reference-rows dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.75rem;color:var(--ink-3-aa)}
 .folio-reference-rows dt p{font-family:var(--sans);font-size:.8125rem;line-height:1.6;margin-block:.5rem 0}

package/dist/website-contact.css

@@ -2,15 +2,21 @@
   display: grid;
   align-items: start;
   gap: 3rem;
-  border-block-start: 1px solid var(--rule-hard);
+  border-block-start: 1px solid var(--rule-divider);
   padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
 }
 .folio-contact-form, .folio-contact-facts { min-inline-size: 0; }
-.folio-contact-form__fields { display: grid; gap: 2rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: 2rem; }
+.folio-contact-form__fields { display: grid; gap: 2rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: 2rem; }
 .folio-contact-form__identity { display: grid; gap: 2rem; }
 .folio-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
 .folio-contact-facts__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-block-start: 1rem; }
-.folio-question-list__items { border-block-start: 1px solid var(--rule-hard); }
+/* A fact's link sits on the same left edge as its label: a ghost button's
+   inline padding read as an indent where an icon had gone missing. The 44px
+   block size the host gives the link is kept. */
+.folio-contact-facts dd > a:first-child,
+.folio-contact-facts__links > a { padding-inline: 0; }
+.folio-contact-facts__links { column-gap: 1.5rem; }
+.folio-question-list__items { border-block-start: 1px solid var(--rule-divider); }
 .folio-question-list__item { display: grid; gap: 1rem; padding-block: 1.5rem; border-block-end: 1px solid var(--rule); }
 .folio-location-figure { margin: 0; }
 .folio-location-figure__map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }

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

@@ -3,7 +3,7 @@
 .folio-conversation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; border-block: 1px solid var(--rule); padding-block: 1.25rem; }
 .folio-conversation-facts dd > span { display: inline-flex; align-items: center; gap: .5rem; }
 .folio-conversation-thread { min-inline-size: 0; }
-.folio-conversation-thread__intro { border-block-start: 1px solid var(--rule-hard); padding-block-start: 2rem; }
+.folio-conversation-thread__intro { border-block-start: 1px solid var(--rule-divider); padding-block-start: 2rem; }
 .folio-conversation-thread__intro > h2 { max-inline-size: 22ch; text-wrap: balance; }
 .folio-conversation-thread__intro > p { max-inline-size: 56ch; }
 .folio-conversation-suggestions { margin-block-start: 2rem; }
@@ -11,12 +11,12 @@
 .folio-conversation-suggestions > ul > li, .folio-conversation-sources > ul > li { border-block-end: 1px solid var(--rule); }
 .folio-conversation-suggestions__action { inline-size: 100%; justify-content: space-between; text-align: start; gap: 1.5rem; padding-inline: 0; }
 .folio-conversation-suggestions__action > svg { flex-shrink: 0; }
-.folio-conversation-thread__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: .75rem; }
+.folio-conversation-thread__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: .75rem; }
 .folio-conversation-thread__controls > div { display: flex; flex-wrap: wrap; gap: .25rem; }
 .folio-conversation-log { display: flex; flex-direction: column; }
 .folio-conversation-log[data-compact] { gap: 2rem; }
 .folio-conversation-thread__composer { margin-block-start: 3rem; }
-.folio-conversation-thread__composer[data-sticky] { position: sticky; inset-block-end: 0; z-index: 10; margin-block-start: 2rem; padding-block: 1rem .75rem; border-block-start: 1px solid var(--rule-hard); background: var(--paper); }
+.folio-conversation-thread__composer[data-sticky] { position: sticky; inset-block-end: 0; z-index: 10; margin-block-start: 2rem; padding-block: 1rem .75rem; border-block-start: 1px solid var(--rule-divider); background: var(--paper); }
 .folio-conversation-thread__proposal { margin-block-end: 1.25rem; }
 .folio-question-composer__row { display: flex; align-items: end; gap: 1rem; }
 .folio-question-composer__field { flex: 1; min-inline-size: 0; }
@@ -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); }
@@ -43,13 +43,13 @@
 .folio-conversation-prose p.folio-conversation-prose__heading[data-lead] { margin-block-start: 0; }
 .folio-conversation-prose sup { font-size: .75em; }
 .folio-conversation-caret { display: inline-block; inline-size: .375rem; block-size: 1em; margin-inline-start: .2rem; vertical-align: -.1em; background: var(--ink); }
-.folio-conversation-sources { margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: .75rem; }
+.folio-conversation-sources { margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: .75rem; }
 .folio-conversation-sources__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
 .folio-conversation-sources__link { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; inline-size: 100%; align-items: baseline; text-align: start; gap: .75rem; padding-inline: 0; }
 .folio-conversation-sources__link[data-highlighted] { background: var(--accent-muted); }
 .folio-conversation-sources__link > span:nth-child(2) { min-inline-size: 0; }
 .folio-conversation-sources__link > span:nth-child(2) > span { display: block; }
-.folio-action-proposal__actions { margin-block-start: .375rem; border-block-start: 1px solid var(--rule-hard); }
+.folio-action-proposal__actions { margin-block-start: .375rem; border-block-start: 1px solid var(--rule-divider); }
 .folio-action-proposal__action { display: flex; inline-size: 100%; justify-content: space-between; gap: 1rem; text-align: start; border-block-end: 1px solid var(--rule); padding-inline: 0; }
 .folio-action-proposal__action > span { min-inline-size: 0; }
 .folio-action-proposal__action > span:last-child { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

package/dist/website-evidence.css

@@ -7,7 +7,7 @@
 .folio-activity-trace li > span { overflow-wrap: anywhere; }
 .folio-activity-trace__summary { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .folio-evidence-panel { min-inline-size: 0; }
-.folio-evidence-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-evidence-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-evidence-panel > header h2 { margin-block-start: .375rem; }
 .folio-evidence-panel > header > .folio-evidence-status { flex-shrink: 0; margin-block-start: .25rem; }
 .folio-evidence-panel > .folio-activity-trace { border-block-end: 1px solid var(--rule); padding-block: .75rem; }