@misoto22/folio 0.0.0 → 0.17.0

package/dist/website/Timeline/Timeline.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { Tag } from "../../components/Tag/Tag.js";
+import { Text } from "../../components/Text/Text.js";
+import { cn } from "../../lib/cn.js";
+function RecordSection({ title, count, headingId, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, className: cn("folio-record-section", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-record-section__header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, id: headingId, children: title }),
+      count && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: count })
+    ] }),
+    children
+  ] });
+}
+function CareerRecord({ title, organization, period, periodLabel, location, locationLabel, description, tags, tagsLabel, mark, currentLabel, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("article", { className: cn("folio-career-record", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-career-record__dates", children: [
+      /* @__PURE__ */ jsxs("dl", { children: [
+        /* @__PURE__ */ jsx("dt", { className: "sr-only", children: periodLabel }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "strong", children: period }) }),
+        /* @__PURE__ */ jsx("dt", { className: "sr-only", children: locationLabel }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: location }) })
+      ] }),
+      currentLabel && /* @__PURE__ */ jsx(Badge, { children: currentLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-career-record__body", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "heading", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: organization }),
+      description.length === 1 && /* @__PURE__ */ jsx(Text, { className: "mb-0 mt-5 max-w-(--measure-record)", children: description[0] }),
+      description.length > 1 && /* @__PURE__ */ jsx("ul", { className: "folio-career-record__description", children: description.map((point, index) => /* @__PURE__ */ jsx(Text, { as: "li", children: point }, index)) }),
+      tags.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": tagsLabel, className: "folio-career-record__tags", children: tags.map((tag, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tag, { children: tag }) }, `${tag}-${index}`)) })
+    ] }),
+    mark && /* @__PURE__ */ jsx("div", { className: "folio-career-record__mark", children: mark })
+  ] });
+}
+function ProfileSection({ headingId, title, description, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, className: cn("folio-profile-section", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-profile-section__header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, id: headingId, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { className: "m-0 max-w-[42rem]", children: description })
+    ] }),
+    children
+  ] });
+}
+function ProfileNarrative({ headingId, title, pull, paragraphs, action }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, className: "folio-profile-narrative", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, id: headingId, children: title }),
+      /* @__PURE__ */ jsx(Text, { size: "lead", tone: "strong", className: "mb-0 mt-6 max-w-[30ch]", children: pull })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      paragraphs.map((paragraph, index) => /* @__PURE__ */ jsx(Text, { className: "mb-5 mt-0 max-w-(--measure-record)", children: paragraph }, index)),
+      action
+    ] })
+  ] });
+}
+function ProfileSkills({ groups }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-profile-skills", children: groups.map((group) => /* @__PURE__ */ jsxs("section", { className: "folio-profile-skills__group", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 3, size: "item", children: group.title }),
+    /* @__PURE__ */ jsx("ul", { className: "folio-profile-skills__items", children: group.items.map((skill) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs("span", { className: "folio-profile-skill__icon", "data-invert": skill.invertInDark || void 0, "data-has-dark": Boolean(skill.darkIcon) || void 0, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("span", { "data-artwork": "light", children: skill.icon }),
+        skill.darkIcon && /* @__PURE__ */ jsx("span", { "data-artwork": "dark", children: skill.darkIcon })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "strong", children: skill.label })
+    ] }, skill.id)) })
+  ] }, group.id)) });
+}
+function ProfileInterests({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-profile-interests", children: items.map((item) => /* @__PURE__ */ jsxs("article", { children: [
+    /* @__PURE__ */ jsx(Heading, { level: 3, children: item.title }),
+    /* @__PURE__ */ jsx(Text, { className: "mb-0 mt-4", children: item.description })
+  ] }, item.id)) });
+}
+function ProfileFigure({ children, caption }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "folio-profile-figure", children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-profile-figure__image", children }),
+    caption && /* @__PURE__ */ jsx(Text, { as: "figcaption", size: "xs", tone: "muted", className: "mt-3", children: caption })
+  ] });
+}
+function Timeline({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-timeline", className), ...props });
+}
+function TimelineItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-timeline__item", className), ...props });
+}
+export {
+  CareerRecord,
+  ProfileFigure,
+  ProfileInterests,
+  ProfileNarrative,
+  ProfileSection,
+  ProfileSkills,
+  RecordSection,
+  Timeline,
+  TimelineItem
+};
+//# sourceMappingURL=Timeline.js.map

package/dist/website/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Heading } from '../../components/Heading/Heading'\nimport { Tag } from '../../components/Tag/Tag'\nimport { Text } from '../../components/Text/Text'\nimport { cn } from '../../lib/cn'\n\nexport interface RecordSectionProps extends HTMLAttributes<HTMLElement> {\n  title: string\n  count?: string\n  headingId: string\n  children: ReactNode\n}\n\n/** A named ledger section. The host supplies its chronology without reordering. */\nexport function RecordSection({ title, count, headingId, children, className, ...rest }: RecordSectionProps) {\n  return <section aria-labelledby={headingId} className={cn('folio-record-section', className)} {...rest}><header className=\"folio-record-section__header\"><Heading level={2} id={headingId}>{title}</Heading>{count && <Text as=\"span\" size=\"xs\" tone=\"muted\">{count}</Text>}</header>{children}</section>\n}\n\nexport interface CareerRecordProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: string\n  organization: ReactNode\n  period: string\n  periodLabel: string\n  location: string\n  locationLabel: string\n  description: string[]\n  tags: string[]\n  tagsLabel: string\n  mark?: ReactNode\n  currentLabel?: string\n}\n\n/** One dated record, reusable for a role, qualification or other chronology. */\nexport function CareerRecord({ title, organization, period, periodLabel, location, locationLabel, description, tags, tagsLabel, mark, currentLabel, className, ...rest }: CareerRecordProps) {\n  return (\n    <article className={cn('folio-career-record', className)} {...rest}>\n      <div className=\"folio-career-record__dates\"><dl><dt className=\"sr-only\">{periodLabel}</dt><dd><Text as=\"span\" size=\"sm\" tone=\"strong\">{period}</Text></dd><dt className=\"sr-only\">{locationLabel}</dt><dd><Text as=\"span\" size=\"xs\" tone=\"muted\">{location}</Text></dd></dl>{currentLabel && <Badge>{currentLabel}</Badge>}</div>\n      <div className=\"folio-career-record__body\"><Heading level={3} size=\"heading\">{title}</Heading><div className=\"mt-2\">{organization}</div>{description.length === 1 && <Text className=\"mb-0 mt-5 max-w-(--measure-record)\">{description[0]}</Text>}{description.length > 1 && <ul className=\"folio-career-record__description\">{description.map((point, index) => <Text as=\"li\" key={index}>{point}</Text>)}</ul>}{tags.length > 0 && <ul aria-label={tagsLabel} className=\"folio-career-record__tags\">{tags.map((tag, index) => <li key={`${tag}-${index}`}><Tag>{tag}</Tag></li>)}</ul>}</div>\n      {mark && <div className=\"folio-career-record__mark\">{mark}</div>}\n    </article>\n  )\n}\n\nexport interface ProfileSectionProps extends HTMLAttributes<HTMLElement> {\n  headingId: string\n  title: string\n  description?: string\n  children: ReactNode\n}\n\n/** A profile section follows the same heading and spacing contract as its neighbors. */\nexport function ProfileSection({ headingId, title, description, children, className, ...rest }: ProfileSectionProps) {\n  return <section aria-labelledby={headingId} className={cn('folio-profile-section', className)} {...rest}><header className=\"folio-profile-section__header\"><Heading level={2} id={headingId}>{title}</Heading>{description && <Text className=\"m-0 max-w-[42rem]\">{description}</Text>}</header>{children}</section>\n}\n\nexport interface ProfileNarrativeProps {\n  headingId: string\n  title: string\n  pull: string\n  paragraphs: string[]\n  action?: ReactNode\n}\n\n/** A short introduction with a pull quote and a longer account alongside it. */\nexport function ProfileNarrative({ headingId, title, pull, paragraphs, action }: ProfileNarrativeProps) {\n  return <section aria-labelledby={headingId} className=\"folio-profile-narrative\"><div><Heading level={2} id={headingId}>{title}</Heading><Text size=\"lead\" tone=\"strong\" className=\"mb-0 mt-6 max-w-[30ch]\">{pull}</Text></div><div>{paragraphs.map((paragraph, index) => <Text key={index} className=\"mb-5 mt-0 max-w-(--measure-record)\">{paragraph}</Text>)}{action}</div></section>\n}\n\nexport interface ProfileSkill {\n  id: string\n  label: string\n  icon?: ReactNode\n  darkIcon?: ReactNode\n  invertInDark?: boolean\n}\n\nexport interface ProfileSkillsProps {\n  groups: { id: string; title: string; items: ProfileSkill[] }[]\n}\n\n/** Skill labels and theme-aware artwork, supplied by the host's content adapter. */\nexport function ProfileSkills({ groups }: ProfileSkillsProps) {\n  return <div className=\"folio-profile-skills\">{groups.map((group) => <section className=\"folio-profile-skills__group\" key={group.id}><Heading level={3} size=\"item\">{group.title}</Heading><ul className=\"folio-profile-skills__items\">{group.items.map((skill) => <li key={skill.id}><span className=\"folio-profile-skill__icon\" data-invert={skill.invertInDark || undefined} data-has-dark={Boolean(skill.darkIcon) || undefined} aria-hidden><span data-artwork=\"light\">{skill.icon}</span>{skill.darkIcon && <span data-artwork=\"dark\">{skill.darkIcon}</span>}</span><Text as=\"span\" size=\"sm\" tone=\"strong\">{skill.label}</Text></li>)}</ul></section>)}</div>\n}\n\nexport interface ProfileInterestsProps {\n  items: { id: string; title: string; description: string }[]\n}\n\n/** A small set of interests or areas of practice. */\nexport function ProfileInterests({ items }: ProfileInterestsProps) {\n  return <div className=\"folio-profile-interests\">{items.map((item) => <article key={item.id}><Heading level={3}>{item.title}</Heading><Text className=\"mb-0 mt-4\">{item.description}</Text></article>)}</div>\n}\n\nexport interface ProfileFigureProps {\n  children: ReactNode\n  caption?: string\n}\n\n/** Source-faithful profile photography: retain the supplied image's aspect ratio. */\nexport function ProfileFigure({ children, caption }: ProfileFigureProps) {\n  return <figure className=\"folio-profile-figure\"><div className=\"folio-profile-figure__image\">{children}</div>{caption && <Text as=\"figcaption\" size=\"xs\" tone=\"muted\" className=\"mt-3\">{caption}</Text>}</figure>\n}\n\n/** An ordered collection frame. No sorting or business data is owned here. */\nexport function Timeline({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('folio-timeline', className)} {...props} />\n}\n\n/** A record mount, isolated so motion can follow the shared data-motion axis. */\nexport function TimelineItem({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('folio-timeline__item', className)} {...props} />\n}\n"],"mappings":"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","names":[]}

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

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