@misoto22/folio 0.16.0 → 0.17.0

package/dist/themes.css

@@ -47,6 +47,7 @@
        cobalt     8.05    9.21    7.86            8.41   10.23    8.27
        plum       8.49    9.55    8.12            8.74   10.43    8.41
        moss       5.80    8.30    7.24            8.76   11.32    9.06
+       ember      5.46    6.34    5.47            7.81    8.86    7.31
 
    `--accent-foreground` resolves to `--paper`, so paper printed ON the accent
    fill is the mark column read the other way up. */
@@ -94,6 +95,16 @@
   --red-soft: rgba(86, 107, 82, 0.1);
 }
 
+/* A burnt orange for the Workbench preset: it marks a link or the current
+   state and nothing else, so it can carry heat without competing with the
+   photographs it sits beside. The lowest-contrast mark after moss; its
+   ink is a step darker so a link on a stone panel still clears AA. */
+[data-accent='ember'] {
+  --clay: #b8430a;
+  --clay-ink: #a83c08;
+  --red-soft: rgba(184, 67, 10, 0.1);
+}
+
 /* Re-derives the chain, on any element that names an accent.
 
    A `var()` is substituted where it is DECLARED, not where it is read:
@@ -117,6 +128,8 @@
   --accent-foreground: var(--on-red);
   --accent-on-dark: var(--red);
   --accent-on-muted: var(--red-ink);
+  --action: var(--red);
+  --action-foreground: var(--on-red);
 }
 
 /* On the dark ground the same hues have to come UP to clear AA, not down. An
@@ -160,6 +173,30 @@
   --clay-ink: #b8cbb3;
   --red-soft: rgba(156, 181, 151, 0.14);
 }
+[data-mode='dark'][data-accent='ember'],
+[data-mode='dark'] [data-accent='ember'] {
+  --clay: #f08a4b;
+  --clay-ink: #f29a62;
+  --red-soft: rgba(240, 138, 75, 0.14);
+}
+
+/* ─── Action ───────────────────────────────────────────────────────────────
+   What the primary button is filled with. By default it is the accent, which
+   is what law 7 asks for. `ink` takes the primary action back to the page's
+   own ink while the accent keeps marking links and the current state — the
+   Workbench preset's split, where a burnt-orange button would be the loudest
+   thing on a page of photographs. Declared after the accent block so it wins
+   on the same element, and re-derived on it for the same reason that block
+   is: a `var()` resolves where it is written. Ink and paper already swap in
+   dark mode, so this axis needs no dark block of its own. */
+[data-action='accent'] {
+  --action: var(--accent);
+  --action-foreground: var(--accent-foreground);
+}
+[data-action='ink'] {
+  --action: var(--ink);
+  --action-foreground: var(--paper);
+}
 
 /* ─── Surface ──────────────────────────────────────────────────────────────
    The ground and its two steps. Law 8 still holds — dark is a value swap, so
@@ -234,6 +271,40 @@
   --rule-2: rgba(240, 244, 250, 0.26);
 }
 
+/* Linen, the Workbench ground. Unlike `warm` and `cool` it also moves the
+   three text steps, because the preset's warmth is carried by the ink as much
+   as by the paper: a neutral #101010 on a linen ground reads as a cold page
+   with a tinted background. The text steps keep the root's ladder — ink,
+   a secondary step, and an AA floor — measured on every linen ground:
+   light ink 14.33 / 13.60 / 12.42, --ink-2 8.13 / 7.72 / 7.05, --ink-3-aa
+   6.15 / 5.84 / 5.33 against paper / paper-2 / stone; dark ink 15.57 /
+   14.44 / 13.15, --ink-2 9.67 / 8.96 / 8.16, --ink-3-aa 7.18 / 6.66 / 6.07.
+   Rules are the ink itself at the root's two weights, so a hairline stays
+   the colour of the type it separates. */
+[data-surface='linen'] {
+  --paper: #f7f7f4;
+  --paper-2: #f2f1ed;
+  --stone: #e8e7e2;
+  --rule: rgba(38, 37, 30, 0.1);
+  --rule-2: rgba(38, 37, 30, 0.2);
+  --ink: #26251e;
+  --ink-2: #4d4b44;
+  --ink-3: rgba(38, 37, 30, 0.55);
+  --ink-3-aa: #5f5d55;
+}
+[data-mode='dark'][data-surface='linen'],
+[data-mode='dark'] [data-surface='linen'] {
+  --paper: #14130f;
+  --paper-2: #1c1b17;
+  --stone: #25231e;
+  --rule: rgba(236, 235, 230, 0.14);
+  --rule-2: rgba(236, 235, 230, 0.26);
+  --ink: #ecebe6;
+  --ink-2: #bdbbb3;
+  --ink-3: rgba(236, 235, 230, 0.55);
+  --ink-3-aa: #a3a199;
+}
+
 /* Glass, and the one place this system allows a blur.
  *
  * Law 2 says depth is a hairline and never a blur, and this does not break it:
@@ -340,6 +411,28 @@
   --font-heading: var(--serif);
 }
 
+/* ─── Voice ────────────────────────────────────────────────────────────────
+   How loud the page speaks, which the type axis does not decide: that axis
+   picks a FACE and leaves the ramp alone. `quiet` is the Workbench setting —
+   page titles at roughly two-thirds of the ramp, display type at a regular
+   weight rather than a light one, and labels set as sentence-case sans in
+   place of tracked mono capitals. Body, record and item steps do not move, so
+   a quiet page keeps its hierarchy; only its top two steps come down. */
+[data-voice='display'] {
+  --display-scale: 1;
+  --display-weight: 300;
+  --label-font: var(--font-mono);
+  --label-case: uppercase;
+  --label-tracking-scale: 1;
+}
+[data-voice='quiet'] {
+  --display-scale: 0.62;
+  --display-weight: 400;
+  --label-font: var(--font-sans);
+  --label-case: none;
+  --label-tracking-scale: 0;
+}
+
 /* ─── Motion ───────────────────────────────────────────────────────────────
    `prefers-reduced-motion` is honoured separately and is not a theme: a
    reader's stated need is not one of five looks. This axis is taste. */

package/dist/tokens.css

@@ -279,14 +279,28 @@
 
 }
 
+/* Display voice. How loud a page's display type and labels are, read by the
+   website compositions instead of literal values so the voice axis in
+   `themes.css` can quiet them. Declared on the root only — never on a fluid
+   frame — so an axis set on an ancestor is not reset inside one. */
+:root {
+  --display-scale: 1;
+  --display-weight: 300;
+  --label-font: var(--font-mono);
+  --label-case: uppercase;
+  --label-tracking-scale: 1;
+}
+
 /* The fluid ramp, computed wherever `--fluid` is set.
    `[data-fluid-frame]` must sit INSIDE the element carrying `container-type`:
    a container query unit resolves against an ANCESTOR container, never against
    the element that declares the container itself. */
 :root,
 [data-fluid-frame] {
-  --fs-title: clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem); /* page h1        40 → 54px */
-  --fs-lead: clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem); /* band heading   30 → 42px */
+  /* `--display-scale` is the voice axis's lever on the two display steps; at
+     1 they are the ramp as drawn. */
+  --fs-title: calc(clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem) * var(--display-scale, 1)); /* page h1        40 → 54px */
+  --fs-lead: calc(clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem) * var(--display-scale, 1)); /* band heading   30 → 42px */
   --fs-heading: clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem); /* record title   24 → 29px */
   --fs-sub: clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem); /* card sub-head  21 → 25px */
   --fs-item: clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem); /* in-card title  18 → 20px */

package/dist/tokens.d.ts

@@ -19,6 +19,8 @@ export type TokenName =
   | 'accent-on-dark'
   | 'accent-on-muted'
   | 'accent-wash'
+  | 'action'
+  | 'action-foreground'
   | 'background'
   | 'background-elevated'
   | 'bar'
@@ -73,6 +75,8 @@ export type TokenName =
   | 'diagram-sigil'
   | 'diagram-surface'
   | 'disabled-opacity'
+  | 'display-scale'
+  | 'display-weight'
   | 'duration-base'
   | 'duration-fast'
   | 'duration-slow'
@@ -104,6 +108,9 @@ export type TokenName =
   | 'ink-2'
   | 'ink-3'
   | 'ink-3-aa'
+  | 'label-case'
+  | 'label-font'
+  | 'label-tracking-scale'
   | 'lh-cjk'
   | 'lift'
   | 'lift-sm'

package/dist/tokens.js

@@ -294,16 +294,41 @@ export const TOKENS = {
     "category": "space",
     "light": "52px"
   },
+  "display-scale": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "1"
+  },
+  "display-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300"
+  },
+  "label-font": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--font-mono)"
+  },
+  "label-case": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "uppercase"
+  },
+  "label-tracking-scale": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "1"
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "light": "calc(clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem) * var(--display-scale, 1))",
     "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
+    "light": "calc(clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem) * var(--display-scale, 1))",
     "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
@@ -748,6 +773,17 @@ export const TOKENS = {
     "light": "var(--red-ink)",
     "comment": "Accent text sitting on an accent-muted panel, which --accent cannot do: it clears AA on paper by 4.58:1, and any tint of itself underneath pushes it below 4.5. This names the situation so the choice is not left to whoever writes the next panel."
   },
+  "action": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+  },
+  "action-foreground": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
   "success": {
     "layer": "semantic",
     "category": "colour",

package/dist/tokens.json

@@ -293,16 +293,41 @@
     "category": "space",
     "light": "52px"
   },
+  "display-scale": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "1"
+  },
+  "display-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300"
+  },
+  "label-font": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--font-mono)"
+  },
+  "label-case": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "uppercase"
+  },
+  "label-tracking-scale": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "1"
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "light": "calc(clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem) * var(--display-scale, 1))",
     "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
+    "light": "calc(clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem) * var(--display-scale, 1))",
     "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
@@ -747,6 +772,17 @@
     "light": "var(--red-ink)",
     "comment": "Accent text sitting on an accent-muted panel, which --accent cannot do: it clears AA on paper by 4.58:1, and any tint of itself underneath pushes it below 4.5. This names the situation so the choice is not left to whoever writes the next panel."
   },
+  "action": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+  },
+  "action-foreground": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
   "success": {
     "layer": "semantic",
     "category": "colour",

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

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChronologyItem {
+    id: string;
+    title: ReactNode;
+    organisation?: ReactNode;
+    /** Decimal years, e.g. 2019.5 for July 2019. */
+    start: number;
+    /** Decimal years; omit for an item that is still going. */
+    end?: number;
+    kind: 'role' | 'study';
+}
+interface ChronologyProps {
+    /** Accessible name of the chart. */
+    label: string;
+    /** First and last year on the axis, inclusive. */
+    from: number;
+    to: number;
+    items: ChronologyItem[];
+    /** Text marking a current item, such as "Now". */
+    currentLabel?: ReactNode;
+}
+/**
+ * Roles and studies as bars on one year axis, one lane each. Roles are filled,
+ * studies outlined, and a current role is ink with an accent end. The bars are
+ * a list underneath, so a screen reader hears titles and dates rather than
+ * geometry.
+ */
+declare function Chronology({ label, from, to, items, currentLabel }: ChronologyProps): react.JSX.Element;
+
+export { Chronology, type ChronologyItem, type ChronologyProps };

package/dist/website/Workbench/Chronology.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Chronology({ label, from, to, items, currentLabel }) {
+  const span = to + 1 - from;
+  const years = Array.from({ length: to - from + 1 }, (_, index) => from + index);
+  const position = (value) => `${((value - from) / span * 100).toFixed(3)}%`;
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-wb-chronology", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("ol", { children: items.map((item) => {
+      const current = item.end === void 0;
+      const align = current || (item.start - from) / span >= 0.4 ? "end" : "start";
+      const style = { "--start": position(item.start), "--end": position(item.end ?? to + 1) };
+      return /* @__PURE__ */ jsxs("li", { "data-kind": item.kind, "data-current": current || void 0, "data-align": align, style, children: [
+        /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsx("span", { children: item.title }),
+          item.organisation && /* @__PURE__ */ jsxs("span", { className: "folio-wb-chronology-org", children: [
+            " \xB7 ",
+            item.organisation
+          ] }),
+          current && currentLabel && /* @__PURE__ */ jsxs("span", { className: "folio-wb-chronology-now", children: [
+            " \xB7 ",
+            currentLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "folio-wb-chronology-bar", "aria-hidden": true })
+      ] }, item.id);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "folio-wb-chronology-axis", "aria-hidden": true, children: years.map((year) => /* @__PURE__ */ jsx("span", { children: year }, year)) })
+  ] });
+}
+export {
+  Chronology
+};
+//# sourceMappingURL=Chronology.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/Chronology.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react'\n\nexport interface ChronologyItem {\n  id: string\n  title: ReactNode\n  organisation?: ReactNode\n  /** Decimal years, e.g. 2019.5 for July 2019. */\n  start: number\n  /** Decimal years; omit for an item that is still going. */\n  end?: number\n  kind: 'role' | 'study'\n}\n\nexport interface ChronologyProps {\n  /** Accessible name of the chart. */\n  label: string\n  /** First and last year on the axis, inclusive. */\n  from: number\n  to: number\n  items: ChronologyItem[]\n  /** Text marking a current item, such as \"Now\". */\n  currentLabel?: ReactNode\n}\n\n/**\n * Roles and studies as bars on one year axis, one lane each. Roles are filled,\n * studies outlined, and a current role is ink with an accent end. The bars are\n * a list underneath, so a screen reader hears titles and dates rather than\n * geometry.\n */\nexport function Chronology({ label, from, to, items, currentLabel }: ChronologyProps) {\n  const span = to + 1 - from\n  const years = Array.from({ length: to - from + 1 }, (_, index) => from + index)\n  const position = (value: number) => `${(((value - from) / span) * 100).toFixed(3)}%`\n  return (\n    <figure className=\"folio-wb-chronology\" aria-label={label}>\n      <ol>\n        {items.map((item) => {\n          const current = item.end === undefined\n          // A bar that starts in the later part of the axis hangs its label from its end,\n          // so a long title never runs off the right of the axis.\n          const align = current || (item.start - from) / span >= 0.4 ? 'end' : 'start'\n          const style = { '--start': position(item.start), '--end': position(item.end ?? to + 1) } as CSSProperties\n          return (\n            <li key={item.id} data-kind={item.kind} data-current={current || undefined} data-align={align} style={style}>\n              <p>\n                <span>{item.title}</span>\n                {item.organisation && <span className=\"folio-wb-chronology-org\"> · {item.organisation}</span>}\n                {current && currentLabel && <span className=\"folio-wb-chronology-now\"> · {currentLabel}</span>}\n              </p>\n              <span className=\"folio-wb-chronology-bar\" aria-hidden />\n            </li>\n          )\n        })}\n      </ol>\n      <div className=\"folio-wb-chronology-axis\" aria-hidden>\n        {years.map((year) => (\n          <span key={year}>{year}</span>\n        ))}\n      </div>\n    </figure>\n  )\n}\n"],"mappings":"AA8CgB,cACsB,YADtB;AAhBT,SAAS,WAAW,EAAE,OAAO,MAAM,IAAI,OAAO,aAAa,GAAoB;AACpF,QAAM,OAAO,KAAK,IAAI;AACtB,QAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,GAAG,CAAC,GAAG,UAAU,OAAO,KAAK;AAC9E,QAAM,WAAW,CAAC,UAAkB,KAAM,QAAQ,QAAQ,OAAQ,KAAK,QAAQ,CAAC,CAAC;AACjF,SACE,qBAAC,YAAO,WAAU,uBAAsB,cAAY,OAClD;AAAA,wBAAC,QACE,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,UAAU,KAAK,QAAQ;AAG7B,YAAM,QAAQ,YAAY,KAAK,QAAQ,QAAQ,QAAQ,MAAM,QAAQ;AACrE,YAAM,QAAQ,EAAE,WAAW,SAAS,KAAK,KAAK,GAAG,SAAS,SAAS,KAAK,OAAO,KAAK,CAAC,EAAE;AACvF,aACE,qBAAC,QAAiB,aAAW,KAAK,MAAM,gBAAc,WAAW,QAAW,cAAY,OAAO,OAC7F;AAAA,6BAAC,OACC;AAAA,8BAAC,UAAM,eAAK,OAAM;AAAA,UACjB,KAAK,gBAAgB,qBAAC,UAAK,WAAU,2BAA0B;AAAA;AAAA,YAAI,KAAK;AAAA,aAAa;AAAA,UACrF,WAAW,gBAAgB,qBAAC,UAAK,WAAU,2BAA0B;AAAA;AAAA,YAAI;AAAA,aAAa;AAAA,WACzF;AAAA,QACA,oBAAC,UAAK,WAAU,2BAA0B,eAAW,MAAC;AAAA,WAN/C,KAAK,EAOd;AAAA,IAEJ,CAAC,GACH;AAAA,IACA,oBAAC,SAAI,WAAU,4BAA2B,eAAW,MAClD,gBAAM,IAAI,CAAC,SACV,oBAAC,UAAiB,kBAAP,IAAY,CACxB,GACH;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ContactRowProps {
+    /** The address, set large — usually a `mailto:` link. */
+    address: ReactNode;
+    /** One button beside it. */
+    action?: ReactNode;
+}
+/** An address and one action on a single line of the content subgrid. */
+declare function ContactRow({ address, action }: ContactRowProps): react.JSX.Element;
+
+export { ContactRow, type ContactRowProps };

package/dist/website/Workbench/ContactRow.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ContactRow({ address, action }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-wb-contact", children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-wb-contact-address", children: address }),
+    action && /* @__PURE__ */ jsx("div", { className: "folio-wb-contact-action", children: action })
+  ] });
+}
+export {
+  ContactRow
+};
+//# sourceMappingURL=ContactRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/ContactRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface ContactRowProps {\n  /** The address, set large — usually a `mailto:` link. */\n  address: ReactNode\n  /** One button beside it. */\n  action?: ReactNode\n}\n\n/** An address and one action on a single line of the content subgrid. */\nexport function ContactRow({ address, action }: ContactRowProps) {\n  return (\n    <div className=\"folio-wb-contact\">\n      <div className=\"folio-wb-contact-address\">{address}</div>\n      {action && <div className=\"folio-wb-contact-action\">{action}</div>}\n    </div>\n  )\n}\n"],"mappings":"AAYI,SACE,KADF;AAFG,SAAS,WAAW,EAAE,SAAS,OAAO,GAAoB;AAC/D,SACE,qBAAC,SAAI,WAAU,oBACb;AAAA,wBAAC,SAAI,WAAU,4BAA4B,mBAAQ;AAAA,IAClD,UAAU,oBAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,KAC9D;AAEJ;","names":[]}

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

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface PhotoMosaicProps {
+    /** Exactly the photographs to show: the first is the large one, the next four fill a 2×2 beside it. */
+    children: ReactNode[];
+    /** Caption under the large photograph. */
+    caption?: ReactNode;
+}
+/** One large photograph beside a 2×2 of smaller ones, all on the content subgrid. */
+declare function PhotoMosaic({ children, caption }: PhotoMosaicProps): react.JSX.Element;
+
+export { PhotoMosaic, type PhotoMosaicProps };

package/dist/website/Workbench/PhotoMosaic.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function PhotoMosaic({ children, caption }) {
+  const [lead, ...rest] = children;
+  return /* @__PURE__ */ jsxs("div", { className: "folio-wb-mosaic", children: [
+    /* @__PURE__ */ jsxs("figure", { className: "folio-wb-mosaic-lead", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-wb-mosaic-frame", children: lead }),
+      caption && /* @__PURE__ */ jsx("figcaption", { children: caption })
+    ] }),
+    rest.slice(0, 4).map((child, index) => /* @__PURE__ */ jsx("div", { className: "folio-wb-mosaic-frame", children: child }, index))
+  ] });
+}
+export {
+  PhotoMosaic
+};
+//# sourceMappingURL=PhotoMosaic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/PhotoMosaic.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface PhotoMosaicProps {\n  /** Exactly the photographs to show: the first is the large one, the next four fill a 2×2 beside it. */\n  children: ReactNode[]\n  /** Caption under the large photograph. */\n  caption?: ReactNode\n}\n\n/** One large photograph beside a 2×2 of smaller ones, all on the content subgrid. */\nexport function PhotoMosaic({ children, caption }: PhotoMosaicProps) {\n  const [lead, ...rest] = children\n  return (\n    <div className=\"folio-wb-mosaic\">\n      <figure className=\"folio-wb-mosaic-lead\">\n        <div className=\"folio-wb-mosaic-frame\">{lead}</div>\n        {caption && <figcaption>{caption}</figcaption>}\n      </figure>\n      {rest.slice(0, 4).map((child, index) => (\n        <div key={index} className=\"folio-wb-mosaic-frame\">\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"AAcM,SACE,KADF;AAJC,SAAS,YAAY,EAAE,UAAU,QAAQ,GAAqB;AACnE,QAAM,CAAC,MAAM,GAAG,IAAI,IAAI;AACxB,SACE,qBAAC,SAAI,WAAU,mBACb;AAAA,yBAAC,YAAO,WAAU,wBAChB;AAAA,0BAAC,SAAI,WAAU,yBAAyB,gBAAK;AAAA,MAC5C,WAAW,oBAAC,gBAAY,mBAAQ;AAAA,OACnC;AAAA,IACC,KAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,OAAO,UAC5B,oBAAC,SAAgB,WAAU,yBACxB,mBADO,KAEV,CACD;AAAA,KACH;AAEJ;","names":[]}

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+interface RevealProps {
+    /** One element; it keeps its own tag and receives the reveal state. */
+    children: ReactElement;
+}
+/**
+ * Fades and lifts its child the first time it scrolls into view.
+ *
+ * The server renders the child visible. Only after hydration, and only for an
+ * element that starts below the fold, is it hidden and then revealed — so a
+ * page without JavaScript, a crawler and anything already on screen never see
+ * an empty frame. Reduced motion skips the whole thing, and the duration is the
+ * motion axis's own, so `data-motion="still"` makes it instant.
+ */
+declare function Reveal({ children }: RevealProps): react.JSX.Element;
+
+export { Reveal, type RevealProps };

package/dist/website/Workbench/Reveal.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { useEffect, useRef } from "react";
+function Reveal({ children }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    if (node.getBoundingClientRect().top < window.innerHeight) return;
+    node.dataset.reveal = "hidden";
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        node.dataset.reveal = "shown";
+        observer.disconnect();
+      },
+      { rootMargin: "0px 0px -10% 0px" }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(Slot, { ref, className: "folio-wb-reveal", children });
+}
+export {
+  Reveal
+};
+//# sourceMappingURL=Reveal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/Reveal.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEffect, useRef, type ReactElement } from 'react'\n\nexport interface RevealProps {\n  /** One element; it keeps its own tag and receives the reveal state. */\n  children: ReactElement\n}\n\n/**\n * Fades and lifts its child the first time it scrolls into view.\n *\n * The server renders the child visible. Only after hydration, and only for an\n * element that starts below the fold, is it hidden and then revealed — so a\n * page without JavaScript, a crawler and anything already on screen never see\n * an empty frame. Reduced motion skips the whole thing, and the duration is the\n * motion axis's own, so `data-motion=\"still\"` makes it instant.\n */\nexport function Reveal({ children }: RevealProps) {\n  const ref = useRef<HTMLElement>(null)\n  useEffect(() => {\n    const node = ref.current\n    if (!node || typeof IntersectionObserver === 'undefined') return\n    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return\n    if (node.getBoundingClientRect().top < window.innerHeight) return\n    node.dataset.reveal = 'hidden'\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (!entries.some((entry) => entry.isIntersecting)) return\n        node.dataset.reveal = 'shown'\n        observer.disconnect()\n      },\n      { rootMargin: '0px 0px -10% 0px' },\n    )\n    observer.observe(node)\n    return () => observer.disconnect()\n  }, [])\n  return <Slot ref={ref} className=\"folio-wb-reveal\">{children}</Slot>\n}\n"],"mappings":";AAsCS;AApCT,SAAS,YAAY;AACrB,SAAS,WAAW,cAAiC;AAgB9C,SAAS,OAAO,EAAE,SAAS,GAAgB;AAChD,QAAM,MAAM,OAAoB,IAAI;AACpC,YAAU,MAAM;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,QAAQ,OAAO,yBAAyB,YAAa;AAC1D,QAAI,OAAO,aAAa,kCAAkC,EAAE,QAAS;AACrE,QAAI,KAAK,sBAAsB,EAAE,MAAM,OAAO,YAAa;AAC3D,SAAK,QAAQ,SAAS;AACtB,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,YAAI,CAAC,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,EAAG;AACpD,aAAK,QAAQ,SAAS;AACtB,iBAAS,WAAW;AAAA,MACtB;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA,IACnC;AACA,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AACL,SAAO,oBAAC,QAAK,KAAU,WAAU,mBAAmB,UAAS;AAC/D;","names":[]}

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ToolStripItem {
+    id: string;
+    /** The tool's name; it is the tile's accessible label and tooltip. */
+    name: string;
+    /** A monochrome mark drawn in `currentColor`. */
+    icon: ReactNode;
+}
+interface ToolStripProps {
+    label: ReactNode;
+    items: ToolStripItem[];
+}
+/** A row of equal tiles, one monochrome tool mark each, under a centred caption. */
+declare function ToolStrip({ label, items }: ToolStripProps): react.JSX.Element | null;
+
+export { ToolStrip, type ToolStripItem, type ToolStripProps };

package/dist/website/Workbench/ToolStrip.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToolStrip({ label, items }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "folio-wb-tools", "aria-label": typeof label === "string" ? label : void 0, children: [
+    /* @__PURE__ */ jsx("p", { className: "folio-wb-tools-label", children: label }),
+    /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsxs("li", { title: item.name, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: item.icon }),
+      /* @__PURE__ */ jsx("span", { className: "folio-wb-visually-hidden", children: item.name })
+    ] }, item.id)) })
+  ] });
+}
+export {
+  ToolStrip
+};
+//# sourceMappingURL=ToolStrip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Workbench/ToolStrip.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface ToolStripItem {\n  id: string\n  /** The tool's name; it is the tile's accessible label and tooltip. */\n  name: string\n  /** A monochrome mark drawn in `currentColor`. */\n  icon: ReactNode\n}\n\nexport interface ToolStripProps {\n  label: ReactNode\n  items: ToolStripItem[]\n}\n\n/** A row of equal tiles, one monochrome tool mark each, under a centred caption. */\nexport function ToolStrip({ label, items }: ToolStripProps) {\n  if (!items.length) return null\n  return (\n    <section className=\"folio-wb-tools\" aria-label={typeof label === 'string' ? label : undefined}>\n      <p className=\"folio-wb-tools-label\">{label}</p>\n      <ul>\n        {items.map((item) => (\n          <li key={item.id} title={item.name}>\n            <span aria-hidden>{item.icon}</span>\n            <span className=\"folio-wb-visually-hidden\">{item.name}</span>\n          </li>\n        ))}\n      </ul>\n    </section>\n  )\n}\n"],"mappings":"AAoBM,cAGI,YAHJ;AAJC,SAAS,UAAU,EAAE,OAAO,MAAM,GAAmB;AAC1D,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SACE,qBAAC,aAAQ,WAAU,kBAAiB,cAAY,OAAO,UAAU,WAAW,QAAQ,QAClF;AAAA,wBAAC,OAAE,WAAU,wBAAwB,iBAAM;AAAA,IAC3C,oBAAC,QACE,gBAAM,IAAI,CAAC,SACV,qBAAC,QAAiB,OAAO,KAAK,MAC5B;AAAA,0BAAC,UAAK,eAAW,MAAE,eAAK,MAAK;AAAA,MAC7B,oBAAC,UAAK,WAAU,4BAA4B,eAAK,MAAK;AAAA,SAF/C,KAAK,EAGd,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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 };