@misoto22/folio 0.17.0 → 0.18.0

package/dist/website/Recovery/Recovery.js

@@ -39,8 +39,42 @@ function LoadingRecords({ rows = 4, media = true }) {
     ] })
   ] }, index)) });
 }
+function LoadingArticle({ media }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-detail-masthead folio-loading-article", "data-loading-content": true, children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-20" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-8 h-[clamp(2.5rem,5vw,4rem)] w-[min(100%,36rem)]" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-6 h-3.5 w-[min(100%,40rem)]" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-2.5 h-3.5 w-[min(100%,30rem)]" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-wrap gap-8", children: [0, 1, 2].map((cell) => /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-20" }, cell)) })
+    ] }),
+    media && /* @__PURE__ */ jsx("div", { className: "folio-reading-figure", "data-loading-content": true, children: /* @__PURE__ */ jsx(SkeletonBlock, { className: "aspect-[16/9] w-full" }) }),
+    /* @__PURE__ */ jsx("div", { className: "folio-reading-layout", "data-loading-content": true, children: /* @__PURE__ */ jsx("div", { className: "folio-reading-body", children: ["w-full", "w-11/12", "w-full", "w-4/5", "w-full", "w-2/3"].map((width, index) => /* @__PURE__ */ jsx(SkeletonLine, { className: cn("mt-3.5 h-3.5", width) }, index)) }) })
+  ] });
+}
+function LoadingPhotograph() {
+  return /* @__PURE__ */ jsx("div", { className: "folio-media-detail-page", children: /* @__PURE__ */ jsxs("div", { className: "folio-media-detail", "data-loading-content": true, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-media-index-bar", children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-24" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-12" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-spread", "data-photo-spread": "wide", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-media-well", children: /* @__PURE__ */ jsx(SkeletonBlock, { className: "aspect-[3/2] w-full" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "folio-media-ledger", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SkeletonLine, { className: "h-2.5 w-24" }),
+          /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-5 h-10 w-4/5" }),
+          /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-6 h-3 w-full" }),
+          /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-2.5 h-3 w-3/4" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-10", children: [0, 1, 2, 3].map((row) => /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-3 h-2.5 w-2/3" }, row)) })
+      ] })
+    ] })
+  ] }) });
+}
 function WebsiteLoading({ label, layout = "records", titleClassName, rows = 4, media = true, filters = false }) {
-  return /* @__PURE__ */ jsxs(SkeletonPage, { label, children: [
+  if (layout === "article" || layout === "photograph") return /* @__PURE__ */ jsx("div", { className: "folio-loading-page", children: /* @__PURE__ */ jsx(SkeletonPage, { label, children: layout === "article" ? /* @__PURE__ */ jsx(LoadingArticle, { media }) : /* @__PURE__ */ jsx(LoadingPhotograph, {}) }) });
+  return /* @__PURE__ */ jsx("div", { className: "folio-loading-page", children: /* @__PURE__ */ jsxs(SkeletonPage, { label, children: [
     layout === "identity" ? /* @__PURE__ */ jsxs("header", { className: "folio-loading-identity folio-loading-container", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
@@ -84,7 +118,7 @@ function WebsiteLoading({ label, layout = "records", titleClassName, rows = 4, m
       /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-16 h-3 w-28" }),
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-6 h-[220px] w-full" })
     ] })
-  ] });
+  ] }) });
 }
 export {
   LoadingRecords,

package/dist/website/Recovery/Recovery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/website/Recovery/Recovery.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\nimport { Button } from '../../components/Button/Button'\nimport { ErrorState, type ErrorStateProps } from '../../components/ErrorState/ErrorState'\nimport { Heading } from '../../components/Heading/Heading'\nimport { SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\n\nexport interface RecoveryStateProps extends ErrorStateProps {\n  elsewhere?: ReactNode\n}\n\n/** A recovery page composed from the system error primitive and caller-owned destinations. */\nexport function RecoveryState({ action, elsewhere, ...props }: RecoveryStateProps) {\n  return <ErrorState {...props} action={<><div className=\"folio-recovery-actions\">{action}</div>{elsewhere}</>} />\n}\n\nexport interface RecoveryLinksProps {\n  label: string\n  items: { id: string; link: ReactElement }[]\n}\n\n/** Suggested destinations, with routing supplied by the host. */\nexport function RecoveryLinks({ label, items }: RecoveryLinksProps) {\n  return <nav aria-label={label} className=\"folio-recovery-links\"><Heading level={2} size=\"label\">{label}</Heading><ul>{items.map((item) => <li key={item.id}><Button asChild variant=\"ghost\" className=\"min-h-11 w-full justify-start\">{item.link}</Button></li>)}</ul></nav>\n}\n\nexport interface LoadingRouteIntroProps {\n  titleClassName?: string\n}\n\n/** The shared masthead geometry, drawn from the core loading primitives. */\nexport function LoadingRouteIntro({ titleClassName = 'w-[min(100%,18rem)]' }: LoadingRouteIntroProps) {\n  return <header className=\"folio-loading-intro folio-loading-container\"><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className={cn('mt-6 h-[clamp(2.5rem,4.6vw,3.375rem)]', titleClassName)} /><SkeletonLine className=\"mt-7 h-3.5 w-[min(100%,34rem)]\" /><SkeletonLine className=\"mt-2.5 h-3.5 w-[min(100%,26rem)]\" /></div><SkeletonLine className=\"hidden h-2.5 w-40 justify-self-end md:block\" /></header>\n}\n\nexport interface LoadingRecordsProps {\n  rows?: number\n  media?: boolean\n}\n\n/** A collection skeleton with or without a media column. */\nexport function LoadingRecords({ rows = 4, media = true }: LoadingRecordsProps) {\n  return <div data-loading-content className=\"folio-loading-records folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index} className=\"folio-loading-records__row\" data-media={media || undefined}><SkeletonLine className=\"hidden h-2.5 w-8 sm:block\" />{media && <SkeletonBlock className=\"h-[clamp(140px,20vw,154px)]\" />}<div className=\"min-w-0\"><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-6 w-[min(100%,20rem)]\" /><SkeletonLine className=\"mt-5 h-3 w-full max-w-(--measure-record)\" /><SkeletonLine className=\"mt-2.5 h-3 w-[min(100%,26rem)]\" /></div></div>)}</div>\n}\n\nexport interface WebsiteLoadingProps extends LoadingRecordsProps, LoadingRouteIntroProps {\n  label: string\n  layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity'\n  filters?: boolean\n}\n\n/** Named loading layouts for the website's reusable page shapes. */\nexport function WebsiteLoading({ label, layout = 'records', titleClassName, rows = 4, media = true, filters = false }: WebsiteLoadingProps) {\n  return <SkeletonPage label={label}>\n    {layout === 'identity' ? <header className=\"folio-loading-identity folio-loading-container\"><div><div className=\"flex items-center gap-5\"><SkeletonCircle className=\"size-12\" /><SkeletonBlock className=\"h-12 w-64\" /></div><SkeletonLine className=\"mt-9 h-3.5 w-full\" /><SkeletonLine className=\"mt-3 h-3.5 w-4/5\" /><SkeletonLine className=\"mt-10 h-3 w-2/3\" /></div><SkeletonBlock className=\"aspect-square w-full\" /></header> : <LoadingRouteIntro titleClassName={titleClassName} />}\n    {filters && <div className=\"folio-loading-filters folio-loading-container\" data-loading-content><div className=\"flex flex-wrap gap-6\">{[8, 16, 12, 20].map((width) => <SkeletonLine key={width} className=\"h-3 w-12\" />)}</div><SkeletonBlock className=\"h-11 w-56\" /></div>}\n    {(layout === 'records' || layout === 'identity') && <LoadingRecords rows={rows} media={media} />}\n    {layout === 'gallery' && <section data-loading-content className=\"folio-loading-gallery folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index}><SkeletonBlock className=\"aspect-[4/5] w-full\" /><SkeletonLine className=\"mt-3 h-3 w-3/4\" /></div>)}</section>}\n    {layout === 'media' && <section data-loading-content className=\"folio-loading-media\"><div data-loading-now-playing className=\"folio-media-feature folio-loading-container\"><div className=\"folio-media-feature__artwork\"><SkeletonBlock data-loading-artwork className=\"h-full w-full\" /></div><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className=\"mt-5 h-16 w-4/5\" /><SkeletonLine className=\"mt-5 h-3.5 w-2/3\" /><SkeletonLine className=\"mt-6 h-1 w-full\" /></div></div></section>}\n    {layout === 'metrics' && <div data-loading-content className=\"folio-loading-metrics folio-loading-container\"><div className=\"folio-loading-filters\"><SkeletonLine className=\"h-2.5 w-12\" /><SkeletonBlock className=\"h-11 w-72\" /></div><div className=\"folio-loading-metrics__figures\">{[0, 1, 2, 3].map((cell) => <div key={cell}><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-9 w-20\" /><SkeletonLine className=\"mt-4 h-2.5 w-16\" /></div>)}</div><SkeletonLine className=\"mt-16 h-3 w-28\" /><SkeletonBlock className=\"mt-6 h-[220px] w-full\" /></div>}\n  </SkeletonPage>\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/website/Recovery/Recovery.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\nimport { Button } from '../../components/Button/Button'\nimport { ErrorState, type ErrorStateProps } from '../../components/ErrorState/ErrorState'\nimport { Heading } from '../../components/Heading/Heading'\nimport { SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\n\nexport interface RecoveryStateProps extends ErrorStateProps {\n  elsewhere?: ReactNode\n}\n\n/** A recovery page composed from the system error primitive and caller-owned destinations. */\nexport function RecoveryState({ action, elsewhere, ...props }: RecoveryStateProps) {\n  return <ErrorState {...props} action={<><div className=\"folio-recovery-actions\">{action}</div>{elsewhere}</>} />\n}\n\nexport interface RecoveryLinksProps {\n  label: string\n  items: { id: string; link: ReactElement }[]\n}\n\n/** Suggested destinations, with routing supplied by the host. */\nexport function RecoveryLinks({ label, items }: RecoveryLinksProps) {\n  return <nav aria-label={label} className=\"folio-recovery-links\"><Heading level={2} size=\"label\">{label}</Heading><ul>{items.map((item) => <li key={item.id}><Button asChild variant=\"ghost\" className=\"min-h-11 w-full justify-start\">{item.link}</Button></li>)}</ul></nav>\n}\n\nexport interface LoadingRouteIntroProps {\n  titleClassName?: string\n}\n\n/** The shared masthead geometry, drawn from the core loading primitives. */\nexport function LoadingRouteIntro({ titleClassName = 'w-[min(100%,18rem)]' }: LoadingRouteIntroProps) {\n  return <header className=\"folio-loading-intro folio-loading-container\"><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className={cn('mt-6 h-[clamp(2.5rem,4.6vw,3.375rem)]', titleClassName)} /><SkeletonLine className=\"mt-7 h-3.5 w-[min(100%,34rem)]\" /><SkeletonLine className=\"mt-2.5 h-3.5 w-[min(100%,26rem)]\" /></div><SkeletonLine className=\"hidden h-2.5 w-40 justify-self-end md:block\" /></header>\n}\n\nexport interface LoadingRecordsProps {\n  rows?: number\n  media?: boolean\n}\n\n/** A collection skeleton with or without a media column. */\nexport function LoadingRecords({ rows = 4, media = true }: LoadingRecordsProps) {\n  return <div data-loading-content className=\"folio-loading-records folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index} className=\"folio-loading-records__row\" data-media={media || undefined}><SkeletonLine className=\"hidden h-2.5 w-8 sm:block\" />{media && <SkeletonBlock className=\"h-[clamp(140px,20vw,154px)]\" />}<div className=\"min-w-0\"><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-6 w-[min(100%,20rem)]\" /><SkeletonLine className=\"mt-5 h-3 w-full max-w-(--measure-record)\" /><SkeletonLine className=\"mt-2.5 h-3 w-[min(100%,26rem)]\" /></div></div>)}</div>\n}\n\nexport interface WebsiteLoadingProps extends LoadingRecordsProps, LoadingRouteIntroProps {\n  label: string\n  layout?: 'records' | 'gallery' | 'media' | 'metrics' | 'identity' | 'article' | 'photograph'\n  filters?: boolean\n}\n\n/** A detail page's masthead and opening paragraphs, drawn on the reading page's own frame. */\nfunction LoadingArticle({ media }: { media: boolean }) {\n  return <>\n    <header className=\"folio-detail-masthead folio-loading-article\" data-loading-content><SkeletonLine className=\"h-2.5 w-20\" /><SkeletonBlock className=\"mt-8 h-[clamp(2.5rem,5vw,4rem)] w-[min(100%,36rem)]\" /><SkeletonLine className=\"mt-6 h-3.5 w-[min(100%,40rem)]\" /><SkeletonLine className=\"mt-2.5 h-3.5 w-[min(100%,30rem)]\" /><div className=\"mt-10 flex flex-wrap gap-8\">{[0, 1, 2].map((cell) => <SkeletonLine key={cell} className=\"h-2.5 w-20\" />)}</div></header>\n    {media && <div className=\"folio-reading-figure\" data-loading-content><SkeletonBlock className=\"aspect-[16/9] w-full\" /></div>}\n    <div className=\"folio-reading-layout\" data-loading-content><div className=\"folio-reading-body\">{['w-full', 'w-11/12', 'w-full', 'w-4/5', 'w-full', 'w-2/3'].map((width, index) => <SkeletonLine key={index} className={cn('mt-3.5 h-3.5', width)} />)}</div></div>\n  </>\n}\n\n/** One photograph's spread: the back bar, the image well and its ledger, in the detail page's own grid. */\nfunction LoadingPhotograph() {\n  return <div className=\"folio-media-detail-page\"><div className=\"folio-media-detail\" data-loading-content>\n    <header className=\"folio-media-index-bar\"><SkeletonLine className=\"h-3 w-24\" /><SkeletonLine className=\"h-2.5 w-12\" /></header>\n    <div className=\"folio-media-spread\" data-photo-spread=\"wide\"><div className=\"folio-media-well\"><SkeletonBlock className=\"aspect-[3/2] w-full\" /></div><div className=\"folio-media-ledger\"><div><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-5 h-10 w-4/5\" /><SkeletonLine className=\"mt-6 h-3 w-full\" /><SkeletonLine className=\"mt-2.5 h-3 w-3/4\" /></div><div className=\"mt-10\">{[0, 1, 2, 3].map((row) => <SkeletonLine key={row} className=\"mt-3 h-2.5 w-2/3\" />)}</div></div></div>\n  </div></div>\n}\n\n/**\n * Named loading layouts for the website's reusable page shapes.\n *\n * Every layout waits a beat before it shows and then fades in, so a route that\n * resolves within that beat goes straight from the old page to the new one\n * instead of flashing grey bars for a frame. A detail route needs its own\n * `article` or `photograph` shape: inheriting the list skeleton above it\n * promises a layout the page then abandons.\n */\nexport function WebsiteLoading({ label, layout = 'records', titleClassName, rows = 4, media = true, filters = false }: WebsiteLoadingProps) {\n  if (layout === 'article' || layout === 'photograph') return <div className=\"folio-loading-page\"><SkeletonPage label={label}>{layout === 'article' ? <LoadingArticle media={media} /> : <LoadingPhotograph />}</SkeletonPage></div>\n  return <div className=\"folio-loading-page\"><SkeletonPage label={label}>\n    {layout === 'identity' ? <header className=\"folio-loading-identity folio-loading-container\"><div><div className=\"flex items-center gap-5\"><SkeletonCircle className=\"size-12\" /><SkeletonBlock className=\"h-12 w-64\" /></div><SkeletonLine className=\"mt-9 h-3.5 w-full\" /><SkeletonLine className=\"mt-3 h-3.5 w-4/5\" /><SkeletonLine className=\"mt-10 h-3 w-2/3\" /></div><SkeletonBlock className=\"aspect-square w-full\" /></header> : <LoadingRouteIntro titleClassName={titleClassName} />}\n    {filters && <div className=\"folio-loading-filters folio-loading-container\" data-loading-content><div className=\"flex flex-wrap gap-6\">{[8, 16, 12, 20].map((width) => <SkeletonLine key={width} className=\"h-3 w-12\" />)}</div><SkeletonBlock className=\"h-11 w-56\" /></div>}\n    {(layout === 'records' || layout === 'identity') && <LoadingRecords rows={rows} media={media} />}\n    {layout === 'gallery' && <section data-loading-content className=\"folio-loading-gallery folio-loading-container\">{Array.from({ length: rows }, (_, index) => <div key={index}><SkeletonBlock className=\"aspect-[4/5] w-full\" /><SkeletonLine className=\"mt-3 h-3 w-3/4\" /></div>)}</section>}\n    {layout === 'media' && <section data-loading-content className=\"folio-loading-media\"><div data-loading-now-playing className=\"folio-media-feature folio-loading-container\"><div className=\"folio-media-feature__artwork\"><SkeletonBlock data-loading-artwork className=\"h-full w-full\" /></div><div><SkeletonLine className=\"h-2.5 w-28\" /><SkeletonBlock className=\"mt-5 h-16 w-4/5\" /><SkeletonLine className=\"mt-5 h-3.5 w-2/3\" /><SkeletonLine className=\"mt-6 h-1 w-full\" /></div></div></section>}\n    {layout === 'metrics' && <div data-loading-content className=\"folio-loading-metrics folio-loading-container\"><div className=\"folio-loading-filters\"><SkeletonLine className=\"h-2.5 w-12\" /><SkeletonBlock className=\"h-11 w-72\" /></div><div className=\"folio-loading-metrics__figures\">{[0, 1, 2, 3].map((cell) => <div key={cell}><SkeletonLine className=\"h-2.5 w-24\" /><SkeletonBlock className=\"mt-4 h-9 w-20\" /><SkeletonLine className=\"mt-4 h-2.5 w-16\" /></div>)}</div><SkeletonLine className=\"mt-16 h-3 w-28\" /><SkeletonBlock className=\"mt-6 h-[220px] w-full\" /></div>}\n  </SkeletonPage></div>\n}\n"],"mappings":"AAawC,mBAAE,KAAF;AAZxC,SAAS,cAAc;AACvB,SAAS,kBAAwC;AACjD,SAAS,eAAe;AACxB,SAAS,eAAe,gBAAgB,cAAc,oBAAoB;AAC1E,SAAS,UAAU;AAOZ,SAAS,cAAc,EAAE,QAAQ,WAAW,GAAG,MAAM,GAAuB;AACjF,SAAO,oBAAC,cAAY,GAAG,OAAO,QAAQ,iCAAE;AAAA,wBAAC,SAAI,WAAU,0BAA0B,kBAAO;AAAA,IAAO;AAAA,KAAU,GAAK;AAChH;AAQO,SAAS,cAAc,EAAE,OAAO,MAAM,GAAuB;AAClE,SAAO,qBAAC,SAAI,cAAY,OAAO,WAAU,wBAAuB;AAAA,wBAAC,WAAQ,OAAO,GAAG,MAAK,SAAS,iBAAM;AAAA,IAAU,oBAAC,QAAI,gBAAM,IAAI,CAAC,SAAS,oBAAC,QAAiB,8BAAC,UAAO,SAAO,MAAC,SAAQ,SAAQ,WAAU,iCAAiC,eAAK,MAAK,KAA9F,KAAK,EAAkG,CAAK,GAAE;AAAA,KAAK;AACxQ;AAOO,SAAS,kBAAkB,EAAE,iBAAiB,sBAAsB,GAA2B;AACpG,SAAO,qBAAC,YAAO,WAAU,+CAA8C;AAAA,yBAAC,SAAI;AAAA,0BAAC,gBAAa,WAAU,cAAa;AAAA,MAAE,oBAAC,iBAAc,WAAW,GAAG,yCAAyC,cAAc,GAAG;AAAA,MAAE,oBAAC,gBAAa,WAAU,kCAAiC;AAAA,MAAE,oBAAC,gBAAa,WAAU,oCAAmC;AAAA,OAAE;AAAA,IAAM,oBAAC,gBAAa,WAAU,+CAA8C;AAAA,KAAE;AACpZ;AAQO,SAAS,eAAe,EAAE,OAAO,GAAG,QAAQ,KAAK,GAAwB;AAC9E,SAAO,oBAAC,SAAI,wBAAoB,MAAC,WAAU,iDAAiD,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,UAAU,qBAAC,SAAgB,WAAU,8BAA6B,cAAY,SAAS,QAAW;AAAA,wBAAC,gBAAa,WAAU,6BAA4B;AAAA,IAAG,SAAS,oBAAC,iBAAc,WAAU,+BAA8B;AAAA,IAAG,qBAAC,SAAI,WAAU,WAAU;AAAA,0BAAC,gBAAa,WAAU,cAAa;AAAA,MAAE,oBAAC,iBAAc,WAAU,gCAA+B;AAAA,MAAE,oBAAC,gBAAa,WAAU,4CAA2C;AAAA,MAAE,oBAAC,gBAAa,WAAU,kCAAiC;AAAA,OAAE;AAAA,OAAlc,KAAwc,CAAM,GAAE;AACnmB;AASA,SAAS,eAAe,EAAE,MAAM,GAAuB;AACrD,SAAO,iCACL;AAAA,yBAAC,YAAO,WAAU,+CAA8C,wBAAoB,MAAC;AAAA,0BAAC,gBAAa,WAAU,cAAa;AAAA,MAAE,oBAAC,iBAAc,WAAU,uDAAsD;AAAA,MAAE,oBAAC,gBAAa,WAAU,kCAAiC;AAAA,MAAE,oBAAC,gBAAa,WAAU,oCAAmC;AAAA,MAAE,oBAAC,SAAI,WAAU,8BAA8B,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,oBAAC,gBAAwB,WAAU,gBAAhB,IAA6B,CAAE,GAAE;AAAA,OAAM;AAAA,IACnc,SAAS,oBAAC,SAAI,WAAU,wBAAuB,wBAAoB,MAAC,8BAAC,iBAAc,WAAU,wBAAuB,GAAE;AAAA,IACvH,oBAAC,SAAI,WAAU,wBAAuB,wBAAoB,MAAC,8BAAC,SAAI,WAAU,sBAAsB,WAAC,UAAU,WAAW,UAAU,SAAS,UAAU,OAAO,EAAE,IAAI,CAAC,OAAO,UAAU,oBAAC,gBAAyB,WAAW,GAAG,gBAAgB,KAAK,KAA1C,KAA6C,CAAE,GAAE,GAAM;AAAA,KAC9P;AACF;AAGA,SAAS,oBAAoB;AAC3B,SAAO,oBAAC,SAAI,WAAU,2BAA0B,+BAAC,SAAI,WAAU,sBAAqB,wBAAoB,MACtG;AAAA,yBAAC,YAAO,WAAU,yBAAwB;AAAA,0BAAC,gBAAa,WAAU,YAAW;AAAA,MAAE,oBAAC,gBAAa,WAAU,cAAa;AAAA,OAAE;AAAA,IACtH,qBAAC,SAAI,WAAU,sBAAqB,qBAAkB,QAAO;AAAA,0BAAC,SAAI,WAAU,oBAAmB,8BAAC,iBAAc,WAAU,uBAAsB,GAAE;AAAA,MAAM,qBAAC,SAAI,WAAU,sBAAqB;AAAA,6BAAC,SAAI;AAAA,8BAAC,gBAAa,WAAU,cAAa;AAAA,UAAE,oBAAC,iBAAc,WAAU,mBAAkB;AAAA,UAAE,oBAAC,gBAAa,WAAU,mBAAkB;AAAA,UAAE,oBAAC,gBAAa,WAAU,oBAAmB;AAAA,WAAE;AAAA,QAAM,oBAAC,SAAI,WAAU,SAAS,WAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ,oBAAC,gBAAuB,WAAU,sBAAf,GAAkC,CAAE,GAAE;AAAA,SAAM;AAAA,OAAM;AAAA,KAC3e,GAAM;AACR;AAWO,SAAS,eAAe,EAAE,OAAO,SAAS,WAAW,gBAAgB,OAAO,GAAG,QAAQ,MAAM,UAAU,MAAM,GAAwB;AAC1I,MAAI,WAAW,aAAa,WAAW,aAAc,QAAO,oBAAC,SAAI,WAAU,sBAAqB,8BAAC,gBAAa,OAAe,qBAAW,YAAY,oBAAC,kBAAe,OAAc,IAAK,oBAAC,qBAAkB,GAAG,GAAe;AAC5N,SAAO,oBAAC,SAAI,WAAU,sBAAqB,+BAAC,gBAAa,OACtD;AAAA,eAAW,aAAa,qBAAC,YAAO,WAAU,kDAAiD;AAAA,2BAAC,SAAI;AAAA,6BAAC,SAAI,WAAU,2BAA0B;AAAA,8BAAC,kBAAe,WAAU,WAAU;AAAA,UAAE,oBAAC,iBAAc,WAAU,aAAY;AAAA,WAAE;AAAA,QAAM,oBAAC,gBAAa,WAAU,qBAAoB;AAAA,QAAE,oBAAC,gBAAa,WAAU,oBAAmB;AAAA,QAAE,oBAAC,gBAAa,WAAU,mBAAkB;AAAA,SAAE;AAAA,MAAM,oBAAC,iBAAc,WAAU,wBAAuB;AAAA,OAAE,IAAY,oBAAC,qBAAkB,gBAAgC;AAAA,IAC1d,WAAW,qBAAC,SAAI,WAAU,iDAAgD,wBAAoB,MAAC;AAAA,0BAAC,SAAI,WAAU,wBAAwB,WAAC,GAAG,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,oBAAC,gBAAyB,WAAU,cAAjB,KAA4B,CAAE,GAAE;AAAA,MAAM,oBAAC,iBAAc,WAAU,aAAY;AAAA,OAAE;AAAA,KACpQ,WAAW,aAAa,WAAW,eAAe,oBAAC,kBAAe,MAAY,OAAc;AAAA,IAC7F,WAAW,aAAa,oBAAC,aAAQ,wBAAoB,MAAC,WAAU,iDAAiD,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,UAAU,qBAAC,SAAgB;AAAA,0BAAC,iBAAc,WAAU,uBAAsB;AAAA,MAAE,oBAAC,gBAAa,WAAU,kBAAiB;AAAA,SAAjG,KAAmG,CAAM,GAAE;AAAA,IACjR,WAAW,WAAW,oBAAC,aAAQ,wBAAoB,MAAC,WAAU,uBAAsB,+BAAC,SAAI,4BAAwB,MAAC,WAAU,+CAA8C;AAAA,0BAAC,SAAI,WAAU,gCAA+B,8BAAC,iBAAc,wBAAoB,MAAC,WAAU,iBAAgB,GAAE;AAAA,MAAM,qBAAC,SAAI;AAAA,4BAAC,gBAAa,WAAU,cAAa;AAAA,QAAE,oBAAC,iBAAc,WAAU,mBAAkB;AAAA,QAAE,oBAAC,gBAAa,WAAU,oBAAmB;AAAA,QAAE,oBAAC,gBAAa,WAAU,mBAAkB;AAAA,SAAE;AAAA,OAAM,GAAM;AAAA,IAC5d,WAAW,aAAa,qBAAC,SAAI,wBAAoB,MAAC,WAAU,iDAAgD;AAAA,2BAAC,SAAI,WAAU,yBAAwB;AAAA,4BAAC,gBAAa,WAAU,cAAa;AAAA,QAAE,oBAAC,iBAAc,WAAU,aAAY;AAAA,SAAE;AAAA,MAAM,oBAAC,SAAI,WAAU,kCAAkC,WAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,qBAAC,SAAe;AAAA,4BAAC,gBAAa,WAAU,cAAa;AAAA,QAAE,oBAAC,iBAAc,WAAU,iBAAgB;AAAA,QAAE,oBAAC,gBAAa,WAAU,mBAAkB;AAAA,WAAlI,IAAoI,CAAM,GAAE;AAAA,MAAM,oBAAC,gBAAa,WAAU,kBAAiB;AAAA,MAAE,oBAAC,iBAAc,WAAU,yBAAwB;AAAA,OAAE;AAAA,KAChjB,GAAe;AACjB;","names":[]}

package/dist/website/SearchPalette/SearchPalette.js

@@ -6,6 +6,7 @@ import { Badge } from "../../components/Badge/Badge.js";
 import { Button } from "../../components/Button/Button.js";
 import { CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList } from "../../components/Command/Command.js";
 import { Input } from "../../components/Input/Input.js";
+const PANEL = "folio-search-palette top-[max(4rem,15svh)] w-[min(94vw,40rem)] data-[state=open]:animate-[folio-palette-in_var(--duration-base)_var(--ease)] data-[state=closed]:animate-[folio-palette-out_var(--duration-fast)_var(--ease)]";
 function SearchPalette({
   open,
   onOpenChange,
@@ -37,6 +38,7 @@ function SearchPalette({
       label,
       inputLabel,
       shouldFilter: false,
+      className: PANEL,
       onOpenAutoFocus: () => {
         previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       },

package/dist/website/SearchPalette/SearchPalette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/website/SearchPalette/SearchPalette.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode, type RefObject } from 'react'\nimport { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button } from '../../components/Button/Button'\nimport { CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList } from '../../components/Command/Command'\nimport type { DialogContentProps } from '../../components/Dialog/Dialog'\nimport { Input } from '../../components/Input/Input'\n\nexport interface SearchPaletteItem {\n  /** Stable identity, independent of a translated title. */\n  id: string\n  title: ReactNode\n  description?: ReactNode\n  icon?: ReactNode\n  meta?: ReactNode\n  onSelect: () => void\n}\n\nexport interface SearchPaletteGroup {\n  id: string\n  label: string\n  items: SearchPaletteItem[]\n}\n\nexport interface SearchPaletteProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  label: string\n  inputLabel: string\n  placeholder: string\n  query: string\n  onQueryChange: (query: string) => void\n  /** Already filtered results; search and data access belong to the consumer. */\n  groups: SearchPaletteGroup[]\n  emptyLabel: ReactNode\n  labels: { close: string; navigate: string; select: string; back: string }\n  /** Optional answer or detail view, with Escape returning to the results. */\n  detail?: { label: string; content: ReactNode; onBack: () => void; onSubmit: () => void; submitDisabled?: boolean }\n  onContentLinkClick?: () => void\n  onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus']\n}\n\n/** Search, actions and an optional result detail inside one accessible modal. */\nexport function SearchPalette({\n  open, onOpenChange, label, inputLabel, placeholder, query, onQueryChange,\n  groups, emptyLabel, labels, detail, onContentLinkClick, onCloseAutoFocus,\n}: SearchPaletteProps) {\n  const input = useRef<HTMLInputElement>(null)\n  const previousFocus = useRef<HTMLElement | null>(null)\n  const showingDetail = Boolean(detail)\n  useEffect(() => {\n    if (open) input.current?.focus()\n  }, [open, showingDetail])\n  const close = () => onOpenChange(false)\n  const field = { input, inputLabel, placeholder, query, onQueryChange }\n\n  return (\n    <CommandDialog\n      open={open} onOpenChange={onOpenChange} label={label} inputLabel={inputLabel} shouldFilter={false}\n      onOpenAutoFocus={() => {\n        previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null\n      }}\n      // A palette opened by a shortcut has no trigger for the dialog to return\n      // focus to, so it goes back to whatever held it before opening.\n      onCloseAutoFocus={(event) => {\n        onCloseAutoFocus?.(event)\n        if (!event.defaultPrevented) {\n          event.preventDefault()\n          previousFocus.current?.focus()\n        }\n      }}\n      onEscapeKeyDown={(event) => {\n        if (detail) { event.preventDefault(); detail.onBack() }\n      }}\n    >\n      {detail\n        ? <SearchDetail {...field} detail={detail} labels={labels} onClose={close} onContentLinkClick={onContentLinkClick} />\n        : <SearchResults {...field} label={label} groups={groups} emptyLabel={emptyLabel} closeLabel={labels.close} onClose={close} />}\n      <CommandFooter className=\"folio-search-palette__footer\">\n        {!detail && <CommandHint keys={['↑', '↓']}>{labels.navigate}</CommandHint>}\n        <CommandHint keys={['↵']}>{labels.select}</CommandHint>\n        <CommandHint keys={['esc']}>{detail ? labels.back : labels.close}</CommandHint>\n      </CommandFooter>\n    </CommandDialog>\n  )\n}\n\ninterface SearchFieldProps {\n  input: RefObject<HTMLInputElement | null>\n  inputLabel: string\n  placeholder: string\n  query: string\n  onQueryChange: (query: string) => void\n  onClose: () => void\n}\n\ninterface SearchResultsProps extends SearchFieldProps {\n  label: string\n  groups: SearchPaletteGroup[]\n  emptyLabel: ReactNode\n  closeLabel: string\n}\n\n/** The combobox over the host's groups, which the palette never filters again. */\nfunction SearchResults({ input, inputLabel, placeholder, query, onQueryChange, onClose, label, groups, emptyLabel, closeLabel }: SearchResultsProps) {\n  return (\n    <>\n      <div className=\"folio-search-palette__search\">\n        <CommandInput ref={input} aria-label={inputLabel} placeholder={placeholder} value={query} onValueChange={onQueryChange} autoComplete=\"off\" spellCheck={false} />\n        <Button variant=\"ghost\" iconOnly aria-label={closeLabel} onClick={onClose} className=\"folio-search-palette__close\"><RiCloseLine size={18} aria-hidden /></Button>\n      </div>\n      <CommandList label={label}>\n        <CommandEmpty>{emptyLabel}</CommandEmpty>\n        {groups.map((group) => (\n          <CommandGroup key={group.id} heading={<span className=\"folio-search-palette__heading\">{group.label}</span>}>\n            {group.items.map((item) => (\n              <CommandItem\n                key={item.id} value={item.id} icon={item.icon} onSelect={item.onSelect} className=\"folio-search-palette__item\"\n                meta={item.meta ? <span className=\"folio-search-palette__meta\">{item.meta}</span> : undefined}\n              >\n                <span className=\"folio-search-palette__result\">\n                  <span>{item.title}</span>\n                  {item.description && <span className=\"folio-search-palette__description\">{item.description}</span>}\n                </span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        ))}\n      </CommandList>\n    </>\n  )\n}\n\ninterface SearchDetailProps extends SearchFieldProps {\n  detail: NonNullable<SearchPaletteProps['detail']>\n  labels: SearchPaletteProps['labels']\n  onContentLinkClick?: () => void\n}\n\n/**\n * The keys the command list takes for itself: moving its highlight, and running\n * the highlighted row with Enter, which it does by cancelling the key. The\n * detail view has no list, and needs them back — Enter submits the question or\n * follows a link, and the others move the caret or scroll the answer — so they\n * stop here instead of reaching it.\n */\nconst LIST_KEYS = new Set(['Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'])\n\nfunction keepFromList(event: KeyboardEvent<HTMLElement>) {\n  if (LIST_KEYS.has(event.key)) event.stopPropagation()\n}\n\n/** The answer view: a question field over content the host renders. */\nfunction SearchDetail({ input, inputLabel, placeholder, query, onQueryChange, onClose, detail, labels, onContentLinkClick }: SearchDetailProps) {\n  return (\n    <>\n      <form className=\"folio-search-palette__input\" onKeyDown={keepFromList} onSubmit={(event) => {\n        event.preventDefault()\n        if (query.trim() && !detail.submitDisabled) detail.onSubmit()\n      }}>\n        <Button variant=\"ghost\" iconOnly aria-label={labels.back} onClick={detail.onBack}><RiArrowLeftLine size={18} aria-hidden /></Button>\n        <Input ref={input} aria-label={inputLabel} placeholder={placeholder} value={query} onChange={(event) => onQueryChange(event.target.value)} autoComplete=\"off\" />\n        <Badge>{detail.label}</Badge>\n        <Button variant=\"ghost\" iconOnly aria-label={labels.close} onClick={onClose}><RiCloseLine size={18} aria-hidden /></Button>\n      </form>\n      <div className=\"folio-search-palette__detail\" aria-live=\"polite\" onKeyDown={keepFromList} onClick={(event) => {\n        if ((event.target as HTMLElement).closest('a')) onContentLinkClick?.()\n      }}>{detail.content}</div>\n    </>\n  )\n}\n\nexport interface SearchExcerptProps {\n  segments: ReadonlyArray<{ text: string; highlighted: boolean }>\n}\n\n/** Render query highlights as text, never as consumer-supplied HTML. */\nexport function SearchExcerpt({ segments }: SearchExcerptProps) {\n  return <>{segments.map((segment, index) => segment.highlighted\n    ? <mark className=\"folio-search-palette__highlight\" key={index}>{segment.text}</mark>\n    : segment.text)}</>\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/website/SearchPalette/SearchPalette.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode, type RefObject } from 'react'\nimport { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button } from '../../components/Button/Button'\nimport { CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList } from '../../components/Command/Command'\nimport type { DialogContentProps } from '../../components/Dialog/Dialog'\nimport { Input } from '../../components/Input/Input'\n\nexport interface SearchPaletteItem {\n  /** Stable identity, independent of a translated title. */\n  id: string\n  title: ReactNode\n  description?: ReactNode\n  icon?: ReactNode\n  meta?: ReactNode\n  onSelect: () => void\n}\n\nexport interface SearchPaletteGroup {\n  id: string\n  label: string\n  items: SearchPaletteItem[]\n}\n\nexport interface SearchPaletteProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  label: string\n  inputLabel: string\n  placeholder: string\n  query: string\n  onQueryChange: (query: string) => void\n  /** Already filtered results; search and data access belong to the consumer. */\n  groups: SearchPaletteGroup[]\n  emptyLabel: ReactNode\n  labels: { close: string; navigate: string; select: string; back: string }\n  /** Optional answer or detail view, with Escape returning to the results. */\n  detail?: { label: string; content: ReactNode; onBack: () => void; onSubmit: () => void; submitDisabled?: boolean }\n  onContentLinkClick?: () => void\n  onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus']\n}\n\nconst PANEL = 'folio-search-palette top-[max(4rem,15svh)] w-[min(94vw,40rem)] data-[state=open]:animate-[folio-palette-in_var(--duration-base)_var(--ease)] data-[state=closed]:animate-[folio-palette-out_var(--duration-fast)_var(--ease)]'\n\n/** Search, actions and an optional result detail inside one accessible modal. */\nexport function SearchPalette({\n  open, onOpenChange, label, inputLabel, placeholder, query, onQueryChange,\n  groups, emptyLabel, labels, detail, onContentLinkClick, onCloseAutoFocus,\n}: SearchPaletteProps) {\n  const input = useRef<HTMLInputElement>(null)\n  const previousFocus = useRef<HTMLElement | null>(null)\n  const showingDetail = Boolean(detail)\n  useEffect(() => {\n    if (open) input.current?.focus()\n  }, [open, showingDetail])\n  const close = () => onOpenChange(false)\n  const field = { input, inputLabel, placeholder, query, onQueryChange }\n\n  return (\n    <CommandDialog\n      open={open} onOpenChange={onOpenChange} label={label} inputLabel={inputLabel} shouldFilter={false}\n      // Placed on the optical centre rather than near the top edge: the panel's\n      // resting height (field, ten rows, footer) puts its middle a little above\n      // the viewport's. It settles in from a 6px lift and a hair of scale, and\n      // leaves faster than it arrives, so closing never feels like waiting.\n      className={PANEL}\n      onOpenAutoFocus={() => {\n        previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null\n      }}\n      // A palette opened by a shortcut has no trigger for the dialog to return\n      // focus to, so it goes back to whatever held it before opening.\n      onCloseAutoFocus={(event) => {\n        onCloseAutoFocus?.(event)\n        if (!event.defaultPrevented) {\n          event.preventDefault()\n          previousFocus.current?.focus()\n        }\n      }}\n      onEscapeKeyDown={(event) => {\n        if (detail) { event.preventDefault(); detail.onBack() }\n      }}\n    >\n      {detail\n        ? <SearchDetail {...field} detail={detail} labels={labels} onClose={close} onContentLinkClick={onContentLinkClick} />\n        : <SearchResults {...field} label={label} groups={groups} emptyLabel={emptyLabel} closeLabel={labels.close} onClose={close} />}\n      <CommandFooter className=\"folio-search-palette__footer\">\n        {!detail && <CommandHint keys={['↑', '↓']}>{labels.navigate}</CommandHint>}\n        <CommandHint keys={['↵']}>{labels.select}</CommandHint>\n        <CommandHint keys={['esc']}>{detail ? labels.back : labels.close}</CommandHint>\n      </CommandFooter>\n    </CommandDialog>\n  )\n}\n\ninterface SearchFieldProps {\n  input: RefObject<HTMLInputElement | null>\n  inputLabel: string\n  placeholder: string\n  query: string\n  onQueryChange: (query: string) => void\n  onClose: () => void\n}\n\ninterface SearchResultsProps extends SearchFieldProps {\n  label: string\n  groups: SearchPaletteGroup[]\n  emptyLabel: ReactNode\n  closeLabel: string\n}\n\n/** The combobox over the host's groups, which the palette never filters again. */\nfunction SearchResults({ input, inputLabel, placeholder, query, onQueryChange, onClose, label, groups, emptyLabel, closeLabel }: SearchResultsProps) {\n  return (\n    <>\n      <div className=\"folio-search-palette__search\">\n        <CommandInput ref={input} aria-label={inputLabel} placeholder={placeholder} value={query} onValueChange={onQueryChange} autoComplete=\"off\" spellCheck={false} />\n        <Button variant=\"ghost\" iconOnly aria-label={closeLabel} onClick={onClose} className=\"folio-search-palette__close\"><RiCloseLine size={18} aria-hidden /></Button>\n      </div>\n      <CommandList label={label}>\n        <CommandEmpty>{emptyLabel}</CommandEmpty>\n        {groups.map((group) => (\n          <CommandGroup key={group.id} heading={<span className=\"folio-search-palette__heading\">{group.label}</span>}>\n            {group.items.map((item) => (\n              <CommandItem\n                key={item.id} value={item.id} icon={item.icon} onSelect={item.onSelect} className=\"folio-search-palette__item\"\n                meta={item.meta ? <span className=\"folio-search-palette__meta\">{item.meta}</span> : undefined}\n              >\n                <span className=\"folio-search-palette__result\">\n                  <span>{item.title}</span>\n                  {item.description && <span className=\"folio-search-palette__description\">{item.description}</span>}\n                </span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        ))}\n      </CommandList>\n    </>\n  )\n}\n\ninterface SearchDetailProps extends SearchFieldProps {\n  detail: NonNullable<SearchPaletteProps['detail']>\n  labels: SearchPaletteProps['labels']\n  onContentLinkClick?: () => void\n}\n\n/**\n * The keys the command list takes for itself: moving its highlight, and running\n * the highlighted row with Enter, which it does by cancelling the key. The\n * detail view has no list, and needs them back — Enter submits the question or\n * follows a link, and the others move the caret or scroll the answer — so they\n * stop here instead of reaching it.\n */\nconst LIST_KEYS = new Set(['Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'])\n\nfunction keepFromList(event: KeyboardEvent<HTMLElement>) {\n  if (LIST_KEYS.has(event.key)) event.stopPropagation()\n}\n\n/** The answer view: a question field over content the host renders. */\nfunction SearchDetail({ input, inputLabel, placeholder, query, onQueryChange, onClose, detail, labels, onContentLinkClick }: SearchDetailProps) {\n  return (\n    <>\n      <form className=\"folio-search-palette__input\" onKeyDown={keepFromList} onSubmit={(event) => {\n        event.preventDefault()\n        if (query.trim() && !detail.submitDisabled) detail.onSubmit()\n      }}>\n        <Button variant=\"ghost\" iconOnly aria-label={labels.back} onClick={detail.onBack}><RiArrowLeftLine size={18} aria-hidden /></Button>\n        <Input ref={input} aria-label={inputLabel} placeholder={placeholder} value={query} onChange={(event) => onQueryChange(event.target.value)} autoComplete=\"off\" />\n        <Badge>{detail.label}</Badge>\n        <Button variant=\"ghost\" iconOnly aria-label={labels.close} onClick={onClose}><RiCloseLine size={18} aria-hidden /></Button>\n      </form>\n      <div className=\"folio-search-palette__detail\" aria-live=\"polite\" onKeyDown={keepFromList} onClick={(event) => {\n        if ((event.target as HTMLElement).closest('a')) onContentLinkClick?.()\n      }}>{detail.content}</div>\n    </>\n  )\n}\n\nexport interface SearchExcerptProps {\n  segments: ReadonlyArray<{ text: string; highlighted: boolean }>\n}\n\n/** Render query highlights as text, never as consumer-supplied HTML. */\nexport function SearchExcerpt({ segments }: SearchExcerptProps) {\n  return <>{segments.map((segment, index) => segment.highlighted\n    ? <mark className=\"folio-search-palette__highlight\" key={index}>{segment.text}</mark>\n    : segment.text)}</>\n}\n"],"mappings":"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","names":[]}

package/dist/website/Timeline/Timeline.d.ts

@@ -9,6 +9,15 @@ interface RecordSectionProps extends HTMLAttributes<HTMLElement> {
 }
 /** A named ledger section. The host supplies its chronology without reordering. */
 declare function RecordSection({ title, count, headingId, children, className, ...rest }: RecordSectionProps): react.JSX.Element;
+/**
+ * One entry in a record's tag row. A bare string is a text chip; an object can
+ * add a mark beside the label. The mark is decoration — `aria-hidden` — so the
+ * label is still the whole of what a screen reader hears.
+ */
+type CareerRecordTag = string | {
+    label: string;
+    icon?: ReactNode;
+};
 interface CareerRecordProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: string;
     organization: ReactNode;
@@ -17,7 +26,7 @@ interface CareerRecordProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     location: string;
     locationLabel: string;
     description: string[];
-    tags: string[];
+    tags: CareerRecordTag[];
     tagsLabel: string;
     mark?: ReactNode;
     currentLabel?: string;
@@ -77,4 +86,4 @@ declare function Timeline({ className, ...props }: HTMLAttributes<HTMLDivElement
 /** A record mount, isolated so motion can follow the shared data-motion axis. */
 declare function TimelineItem({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
-export { CareerRecord, type CareerRecordProps, ProfileFigure, type ProfileFigureProps, ProfileInterests, type ProfileInterestsProps, ProfileNarrative, type ProfileNarrativeProps, ProfileSection, type ProfileSectionProps, type ProfileSkill, ProfileSkills, type ProfileSkillsProps, RecordSection, type RecordSectionProps, Timeline, TimelineItem };
+export { CareerRecord, type CareerRecordProps, type CareerRecordTag, ProfileFigure, type ProfileFigureProps, ProfileInterests, type ProfileInterestsProps, ProfileNarrative, type ProfileNarrativeProps, ProfileSection, type ProfileSectionProps, type ProfileSkill, ProfileSkills, type ProfileSkillsProps, RecordSection, type RecordSectionProps, Timeline, TimelineItem };

package/dist/website/Timeline/Timeline.js

@@ -29,7 +29,13 @@ function CareerRecord({ title, organization, period, periodLabel, location, loca
       /* @__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}`)) })
+      tags.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": tagsLabel, className: "folio-career-record__tags", children: tags.map((tag, index) => {
+        const { label, icon } = typeof tag === "string" ? { label: tag, icon: void 0 } : tag;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Tag, { className: "folio-career-record__tag", children: [
+          icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "folio-career-record__tag-mark", children: icon }),
+          label
+        ] }) }, `${label}-${index}`);
+      }) })
     ] }),
     mark && /* @__PURE__ */ jsx("div", { className: "folio-career-record__mark", children: mark })
   ] });

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

@@ -1 +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":[]}
+{"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\n/**\n * One entry in a record's tag row. A bare string is a text chip; an object can\n * add a mark beside the label. The mark is decoration — `aria-hidden` — so the\n * label is still the whole of what a screen reader hears.\n */\nexport type CareerRecordTag = string | { label: string; icon?: ReactNode }\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: CareerRecordTag[]\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) => { const { label, icon } = typeof tag === 'string' ? { label: tag, icon: undefined } : tag; return <li key={`${label}-${index}`}><Tag className=\"folio-career-record__tag\">{icon && <span aria-hidden=\"true\" className=\"folio-career-record__tag-mark\">{icon}</span>}{label}</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/theme.d.ts

@@ -3,7 +3,7 @@
  *
  * 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
+ * the current state, primary buttons in ink and every control a capsule, 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
@@ -17,6 +17,7 @@ declare const WORKBENCH_THEME: {
     readonly 'data-type': "grotesk";
     readonly 'data-rules': "quiet";
     readonly 'data-voice': "quiet";
+    readonly 'data-controls': "pill";
 };
 
 export { WORKBENCH_THEME };

package/dist/website/Workbench/theme.js

@@ -4,7 +4,8 @@ const WORKBENCH_THEME = {
   "data-action": "ink",
   "data-type": "grotesk",
   "data-rules": "quiet",
-  "data-voice": "quiet"
+  "data-voice": "quiet",
+  "data-controls": "pill"
 };
 export {
   WORKBENCH_THEME

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

@@ -1 +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":[]}
+{"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 and every control a capsule, 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  'data-controls': 'pill',\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;AAAA,EACd,iBAAiB;AACnB;","names":[]}

package/dist/website/index.d.ts

@@ -4,10 +4,10 @@ export { Portfolio, PortfolioCategories, PortfolioCategoriesProps, PortfolioImag
 export { QuestionCard, QuestionCardProps } from './Portfolio/QuestionCard.js';
 export { PortfolioIndex, PortfolioIndexItem, PortfolioIndexProps } from './PortfolioIndex/PortfolioIndex.js';
 export { CollectionControls, CollectionControlsProps, CollectionEmpty, CollectionEmptyProps, CollectionFilter, CollectionFooter, CollectionFooterProps, CollectionGroup, CollectionGroupProps, CollectionIntro, CollectionIntroProps, CollectionLink, CollectionList, CollectionListProps, CollectionMetadata, CollectionMetadataItem, CollectionMetadataProps, CollectionSearch, CollectionSearchProps, CollectionTally, CollectionTallyProps, ContentBand, ContentBandProps, FeaturedRecord, FeaturedRecordProps, HighlightedText, HighlightedTextProps, RecordRow, RecordRowProps, ReferenceLink, ReferenceRows, ReferenceRowsProps, TaxonomyLinks, TaxonomyLinksProps } from './Collection/Collection.js';
-export { ActionBand, ActionBandProps, ArchitectureColumnNode, ArchitectureColumns, ArchitectureColumnsProps, AuthorPanel, AuthorPanelProps, CommandPiece, CommandSnippet, CommandSnippetProps, CommandTab, CommandTabs, CommandTabsProps, ContentFigure, ContentFigureProps, DetailMasthead, DetailMastheadProps, DevicePreview, DevicePreviewProps, FeaturePairs, FeaturePairsProps, MediaPlayback, MediaPlaybackProps, MobileOutline, MobileOutlineProps, OutlineItem, PreviewPair, PreviewPairProps, ReadingFigure, ReadingFigureProps, ReadingForm, ReadingFormProps, ReadingLayout, ReadingLayoutProps, ReadingLead, ReadingLeadProps, ReadingMetadataItem, ReadingPage, ReadingPageProps, ReadingPagerItem, ReadingProgress, ReadingSection, ReadingSectionProps, ReadingSurface, ReadingSurfaceProps, RecordPager, RecordPagerProps, TableOfContents, TableOfContentsProps, TokenLine, TokenLineProps, isSelfNumbered, numberToc } from './Reading/Reading.js';
+export { ActionBand, ActionBandProps, ArchitectureColumnNode, ArchitectureColumns, ArchitectureColumnsProps, AuthorPanel, AuthorPanelProps, CommandPiece, CommandSnippet, CommandSnippetProps, CommandTab, CommandTabs, CommandTabsProps, ContentFigure, ContentFigureProps, DetailMasthead, DetailMastheadProps, DevicePreview, DevicePreviewProps, DeviceRow, DeviceRowProps, FeaturePairs, FeaturePairsProps, MediaPlayback, MediaPlaybackProps, MobileOutline, MobileOutlineProps, OutlineItem, PreviewPair, PreviewPairProps, ReadingFigure, ReadingFigureProps, ReadingForm, ReadingFormProps, ReadingLayout, ReadingLayoutProps, ReadingLead, ReadingLeadProps, ReadingMetadataItem, ReadingPage, ReadingPageProps, ReadingPagerItem, ReadingProgress, ReadingSection, ReadingSectionProps, ReadingSurface, ReadingSurfaceProps, RecordPager, RecordPagerProps, TableOfContents, TableOfContentsProps, TokenLine, TokenLineProps, isSelfNumbered, numberToc } from './Reading/Reading.js';
 export { ContactFacts, ContactFactsProps, ContactFormLabels, ContactFormValues, ContactFormView, ContactFormViewProps, CorrespondenceSection, CorrespondenceSectionProps, LocationFigure, LocationFigureProps, QuestionList, QuestionListProps } from './Contact/Contact.js';
 export { MediaCollectionCard, MediaCollectionCardProps, MediaListRow, MediaListRowProps, MediaPreviewAction, MusicFeature, MusicFeatureProps, MusicSection, MusicSectionProps } from './Music/Music.js';
-export { CareerRecord, CareerRecordProps, ProfileFigure, ProfileFigureProps, ProfileInterests, ProfileInterestsProps, ProfileNarrative, ProfileNarrativeProps, ProfileSection, ProfileSectionProps, ProfileSkill, ProfileSkills, ProfileSkillsProps, RecordSection, RecordSectionProps, Timeline, TimelineItem } from './Timeline/Timeline.js';
+export { CareerRecord, CareerRecordProps, CareerRecordTag, ProfileFigure, ProfileFigureProps, ProfileInterests, ProfileInterestsProps, ProfileNarrative, ProfileNarrativeProps, ProfileSection, ProfileSectionProps, ProfileSkill, ProfileSkills, ProfileSkillsProps, RecordSection, RecordSectionProps, Timeline, TimelineItem } from './Timeline/Timeline.js';
 export { LoadingRecords, LoadingRecordsProps, LoadingRouteIntro, LoadingRouteIntroProps, RecoveryLinks, RecoveryLinksProps, RecoveryState, RecoveryStateProps, WebsiteLoading, WebsiteLoadingProps } from './Recovery/Recovery.js';
 export { MediaCollection, MediaCollectionProps, MediaDetailLayout, MediaDetailLayoutProps, MediaGallery, MediaGalleryItem, MediaGalleryItemProps, MediaGalleryProps, MediaGallerySkeleton, MediaGallerySkeletonProps, MediaLightNote, MediaLightNoteLine, MediaLightNoteProps, MediaMapArea, MediaMapAreaList, MediaMapAreaListProps, MediaMapCanvas, MediaMapCanvasProps, MediaMapFrame, MediaMapFrameProps, MediaMapMarker, MediaMapMarkerProps, MediaMapNavigation, MediaMapNavigationProps, MediaMapPin, MediaMapPinProps, MediaMapPreview, MediaMapPreviewProps, MediaMapSection, MediaMapSectionProps, MediaMapSkeleton, MediaMasthead, MediaMastheadProps, MediaMetadata, MediaMetadataProps, MediaPager, MediaPagerItem, MediaPagerItemProps, MediaPagerProps, MediaThumbnail, MediaThumbnailProps, MediaThumbnailStrip, MediaThumbnailStripProps, PhotographFeature, PhotographFeatureProps } from './Media/Media.js';
 export { MediaLightbox, MediaLightboxProps } from './Media/MediaLightbox.js';

package/dist/website-collection.css

@@ -19,7 +19,7 @@
 .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{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}
@@ -65,7 +65,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-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; }
@@ -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; }

package/dist/website-media.css

@@ -34,7 +34,7 @@
 .folio-media-gallery-caption { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.625rem; padding-block-start: 0.875rem; }
 .folio-media-gallery-index,
 .folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.1em * var(--label-tracking-scale)); text-overflow: ellipsis; white-space: nowrap; }
-.folio-media-gallery-location { grid-column: 2; letter-spacing: 0.14em; }
+.folio-media-gallery-location { grid-column: 2; letter-spacing: calc(0.14em * var(--label-tracking-scale)); }
 .folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: var(--display-weight); line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .folio-media-gallery-mount { block-size: auto; aspect-ratio: 1; }
 
@@ -125,15 +125,21 @@
 .folio-media-pager-link[data-direction='next'] { grid-template-columns: minmax(0, 1fr) 4.5rem; padding-inline: 1.5rem 0; }
 .folio-media-pager-copy { min-inline-size: 0; }
 .folio-media-pager-link[data-direction='next'] .folio-media-pager-copy { text-align: end; }
-.folio-media-pager-image { position: relative; display: block; block-size: 3.25rem; overflow: hidden; background: var(--background-elevated); }
-.folio-media-pager-image img { object-fit: contain; }
+.folio-media-pager-image { position: relative; display: block; block-size: 3.25rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--background-elevated); }
+.folio-media-pager-image img { object-fit: cover; }
 .folio-media-pager-label { display: block; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.16em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-pager-title { display: block; overflow: hidden; margin-block-start: 0.3125rem; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--display-weight); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
 .folio-media-thumbnails { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 1px solid var(--border-subtle); }
 .folio-media-thumbnails h2 { margin-block: 0 0.75rem; color: var(--foreground-muted); font-family: var(--label-font); font-size: 0.6875rem; font-weight: 400; letter-spacing: calc(0.13em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-thumbnail-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.8rem); }
-.folio-media-thumbnail { position: relative; min-inline-size: 44px; min-block-size: 44px; aspect-ratio: 1; overflow: hidden; background: var(--background-elevated); }
-.folio-media-thumbnail img { object-fit: contain; }
+/* Each frame fills its square. `contain` letterboxed every photograph onto an
+   elevated plate, so a strip of mixed orientations read as a row of grey
+   cards on a linen page — two grounds for one set of images. Cropped, the
+   plate only shows for the instant before the image decodes. */
+.folio-media-thumbnail { position: relative; display: block; min-inline-size: 44px; min-block-size: 44px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--background-elevated); }
+.folio-media-thumbnail img { object-fit: cover; transition: scale var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); }
+.folio-media-thumbnail:hover img { scale: 1.02; }
+@media (prefers-reduced-motion: reduce) { .folio-media-thumbnail img { transition: none; } .folio-media-thumbnail:hover img { scale: none; } }
 
 .folio-media-map-section { border-block: 1px solid var(--border-subtle); background: var(--background-elevated); padding-block: clamp(4rem, 10vw, 8rem); }
 .folio-media-anchor { display: block; block-size: 0; scroll-margin-block-start: var(--scroll-offset); pointer-events: none; }

package/dist/website-metrics.css

@@ -1,6 +1,6 @@
 .folio-metrics-range { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; border-block: 1px solid var(--rule); padding-block: 1rem; margin-block-start: 2rem; }
 .folio-metrics-section { padding-block: clamp(3rem, 6vw, 5rem); }
-.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-metrics-panel { min-inline-size: 0; }
 .folio-metrics-panel > header { margin-block-end: 1.25rem; }
 .folio-metrics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }

package/dist/website-music.css

@@ -20,7 +20,7 @@
 .folio-media-collection__copy h3 a { font: inherit; white-space: normal; text-align: start; }
 .folio-media-collection__metadata { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
 .folio-music-section { min-inline-size: 0; }
-.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-music-section__collections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
 @media (min-width: 640px) { .folio-media-row { gap: 1rem; }.folio-media-collection { grid-template-columns: 9rem minmax(0, 1fr); }.folio-media-collection__copy { padding-inline: 1.5rem; } }
 @media (min-width: 768px) { .folio-media-feature { grid-template-columns: minmax(15rem, 5fr) minmax(0, 7fr); }.folio-music-section__collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

package/dist/website-reading.css

@@ -19,7 +19,7 @@
 .folio-reading-body{min-width:0}
 .folio-reading-section{padding-block-start:clamp(3rem,7vw,5.5rem);scroll-margin-block-start:var(--scroll-offset,6rem)}
 .folio-reading-section[data-compact]{padding-block-start:2rem}
-.folio-reading-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:1.75rem}
+.folio-reading-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:1.75rem}
 .folio-reading-section[data-seamless] .folio-reading-heading{margin-block-end:0}
 .folio-reading-heading:has(+ .folio-reference-rows, + .folio-feature-pairs){margin-block-end:0}
 .folio-reading-heading + :is(.folio-reference-rows,.folio-feature-pairs){border-block-start:0}
@@ -47,7 +47,10 @@
 .folio-toc a[aria-current=true]{font-weight:500;color:var(--ink)}
 .folio-toc a:hover{color:var(--ink)}
 .folio-toc a>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem}
-.folio-outline-trigger{position:fixed;inset-inline-start:1.5rem;inset-block-end:1.5rem;z-index:var(--z-sticky,30)}
+/* The outline trigger stacks one step above the conversation launcher, which
+   owns the same corner (1.5rem in, 3rem tall). Sharing the spot put one
+   control on top of the other on every narrow article page. */
+.folio-outline-trigger{position:fixed;inset-inline-start:1.5rem;inset-block-end:calc(1.5rem + 3rem + .75rem);z-index:var(--z-sticky,30)}
 .folio-outline-sheet .folio-toc a{min-height:44px}
 .folio-reading-progress{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-sticky,30);height:2px;pointer-events:none}
 .folio-reading-progress>div{height:100%;background:var(--accent)}
@@ -67,12 +70,12 @@
 .folio-media-playback{position:relative;width:100%;height:100%}
 .folio-media-playback video{display:block;width:100%;height:100%;object-fit:cover}
 .folio-media-playback button{position:absolute;inset-inline-end:.75rem;inset-block-end:.75rem;background:var(--paper)}
-.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-hard);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
+.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-divider);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
 .folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;letter-spacing:calc(.1em * var(--label-tracking-scale));color:var(--ink-3-aa)}
 .folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.15;margin:0;text-wrap:balance}
 .folio-action-band p{max-width:46ch;color:var(--ink-3-aa);line-height:1.7;margin:1rem 0 0}
 .folio-action-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
-.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-hard)}
+.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-divider)}
 .folio-reading-section[data-seamless] .folio-feature-pairs{border-block-start:0}
 .folio-feature-pairs>div{padding-block:clamp(1.5rem,3vw,2rem);border-block-end:1px solid var(--rule)}
 .folio-feature-pairs span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
@@ -86,9 +89,17 @@
 .folio-browser-bar>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .folio-device-screen{position:relative;aspect-ratio:16/10;overflow:hidden}
 .folio-device-screen img{width:100%;height:100%;object-fit:cover}
-.folio-device-preview[data-kind=phone]{max-width:16.625rem}
-.folio-device-preview[data-kind=phone]>div{border-width:.5rem;border-radius:calc(var(--radius) * 1.5)}
-.folio-device-preview[data-kind=phone] .folio-device-screen{aspect-ratio:9/19}
+/* The phone is an iPhone as the Simulator draws it: a dark bezel with a
+   hairline rim, a screen whose corner follows the glass, and the Dynamic Island
+   over the status bar. It used to be the browser frame with thicker borders —
+   a rounded rectangle that read as a box around a screenshot, not a device. */
+.folio-device-preview[data-kind=phone]{max-width:16.5rem;justify-self:center}
+.folio-device-preview[data-kind=phone]>div{position:relative;padding:.5rem;border:0;border-radius:2.75rem;background:var(--device-bezel);box-shadow:0 0 0 1px var(--device-rim),0 1.5rem 3rem color-mix(in srgb,var(--device-island) 22%,transparent)}
+.folio-device-preview[data-kind=phone]>div::before{content:'';position:absolute;z-index:1;inset-block-start:1.125rem;inset-inline-start:50%;inline-size:31%;block-size:1.6rem;translate:-50% 0;border-radius:var(--radius-pill);background:var(--device-island)}
+.folio-device-preview[data-kind=phone] .folio-device-screen{aspect-ratio:393/852;overflow:hidden;border-radius:2.25rem;background:var(--device-island)}
+.folio-device-preview[data-kind=phone] figcaption{text-align:center}
+.folio-device-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:clamp(1.5rem,4vw,3rem);align-items:end;padding-block:1.75rem .5rem}
+@media(min-width:48rem){.folio-device-row>:nth-child(3n+2){margin-block-end:2.5rem}}
 .folio-device-preview figcaption{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);margin-block-start:.75rem}
 .folio-command-tabs{min-width:0}
 .folio-command-tabs [role=tablist]{flex-wrap:wrap}