@misoto22/folio 0.0.0 → 0.17.0

package/dist/website/Workbench/WorkbenchHero.js

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

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

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

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

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

package/dist/website/Workbench/theme.js

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

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

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

package/dist/website/index.d.ts

@@ -0,0 +1,38 @@
+export { SiteFooter, SiteFooterGroup, SiteFooterProps, SiteLink, SiteLinkProps, SiteSectionHeading, SiteSectionHeadingProps, SiteShell, SiteShellProps } from './SiteShell/SiteShell.js';
+export { NavigationSearchTrigger, NavigationSearchTriggerProps, PreferenceMenu, PreferenceMenuProps, SiteNavigation, SiteNavigationItem, SiteNavigationProps } from './SiteNavigation/SiteNavigation.js';
+export { Portfolio, PortfolioCategories, PortfolioCategoriesProps, PortfolioImage, PortfolioImageProps, PortfolioList, PortfolioListProps, PortfolioProps, PortfolioRecord, PortfolioRecordProps } from './Portfolio/Portfolio.js';
+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 { 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 { 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';
+export { LiveCount, LiveCountProps, MetricDelta, MetricDeltaProps, MetricValue, MetricValueProps, MetricsEmptyState, MetricsEmptyStateProps, MetricsList, MetricsListProps, MetricsPanel, MetricsPanelGrid, MetricsPanelGridProps, MetricsPanelProps, MetricsRange, MetricsRangeProps, MetricsSection, MetricsSectionProps } from './Metrics/Metrics.js';
+export { SearchExcerpt, SearchExcerptProps, SearchPalette, SearchPaletteGroup, SearchPaletteItem, SearchPaletteProps } from './SearchPalette/SearchPalette.js';
+export { ContentTable, ContentTableProps, ExternalLinkMark, ExternalLinkMarkProps, SequenceStep, StepSequence, StepSequenceProps, StepSequenceSpec } from './Content/Content.js';
+export { ClipboardButton, ClipboardButtonProps, CodePanel, CodePanelProps } from './Content/CodePanel.js';
+export { ActionMenu, ActionMenuItem, ActionMenuProps, ScrollControl, ScrollControlProps } from './Actions/Actions.js';
+export { ActionProposal, ActionProposalProps, ConversationAnswer, ConversationAnswerHeading, ConversationAnswerProps, ConversationControl, ConversationDock, ConversationDockCorner, ConversationDockProps, ConversationDockWelcome, ConversationDockWelcomeProps, ConversationFacts, ConversationFactsProps, ConversationLauncher, ConversationLauncherProps, ConversationLayout, ConversationLayoutProps, ConversationLog, ConversationLogProps, ConversationProse, ConversationQuote, ConversationQuoteProps, ConversationResizeHandle, ConversationResizeHandleProps, ConversationRoomLink, ConversationSource, ConversationSources, ConversationSourcesProps, ConversationSuggestion, ConversationSuggestions, ConversationSuggestionsProps, ConversationThread, ConversationThreadProps, ConversationTurn, ConversationTurnProps, QuestionComposer, QuestionComposerProps, SelectionToolbar, SelectionToolbarAction, SelectionToolbarProps, StreamingCaret } from './Conversation/Conversation.js';
+export { ActivityTrace, ActivityTraceItem, ActivityTraceProps, EvidenceDisclosure, EvidenceDisclosureProps, EvidenceDuration, EvidenceDurations, EvidenceDurationsProps, EvidenceFacts, EvidenceFactsProps, EvidenceMeter, EvidenceMeterProps, EvidencePanel, EvidencePanelProps, EvidenceQuery, EvidenceQueryProps, EvidenceScore, EvidenceScores, EvidenceScoresProps, EvidenceSelection, EvidenceSelectionProps, EvidenceStage, EvidenceStageProps, EvidenceStages, EvidenceState, EvidenceStatus, EvidenceStatusProps, EvidenceSummary, EvidenceSummaryProps, SignalFigure, SignalFigureProps } from './Evidence/Evidence.js';
+export { Reveal, RevealProps } from './Workbench/Reveal.js';
+export { WorkbenchSection, WorkbenchSectionProps } from './Workbench/Workbench.js';
+export { WorkbenchHero, WorkbenchHeroProps, WorkbenchStat } from './Workbench/WorkbenchHero.js';
+export { WorkbenchFigure, WorkbenchFigureProps } from './Workbench/WorkbenchFigure.js';
+export { ToolStrip, ToolStripItem, ToolStripProps } from './Workbench/ToolStrip.js';
+export { WorkbenchCard, WorkbenchCardGrid, WorkbenchCardGridProps, WorkbenchCardProps, WorkbenchTile, WorkbenchTileProps } from './Workbench/WorkbenchCard.js';
+export { WorkbenchEntries, WorkbenchEntriesProps, WorkbenchEntry } from './Workbench/WorkbenchEntries.js';
+export { Chronology, ChronologyItem, ChronologyProps } from './Workbench/Chronology.js';
+export { PhotoMosaic, PhotoMosaicProps } from './Workbench/PhotoMosaic.js';
+export { ContactRow, ContactRowProps } from './Workbench/ContactRow.js';
+export { WORKBENCH_THEME } from './Workbench/theme.js';
+import 'react';
+import '../components/DescriptionList/DescriptionList.js';
+import '../components/ErrorState/ErrorState.js';
+import '../components/Heading/Heading.js';
+import '../components/Button/Button.js';
+import '../components/Dialog/Dialog.js';
+import '@radix-ui/react-dialog';

package/dist/website/index.js

@@ -0,0 +1,32 @@
+export * from "./SiteShell/SiteShell.js";
+export * from "./SiteNavigation/SiteNavigation.js";
+export * from "./Portfolio/Portfolio.js";
+export * from "./Portfolio/QuestionCard.js";
+export * from "./PortfolioIndex/PortfolioIndex.js";
+export * from "./Collection/Collection.js";
+export * from "./Reading/Reading.js";
+export * from "./Contact/Contact.js";
+export * from "./Music/Music.js";
+export * from "./Timeline/Timeline.js";
+export * from "./Recovery/Recovery.js";
+export * from "./Media/Media.js";
+export * from "./Media/MediaLightbox.js";
+export * from "./Metrics/Metrics.js";
+export * from "./SearchPalette/SearchPalette.js";
+export * from "./Content/Content.js";
+export * from "./Content/CodePanel.js";
+export * from "./Actions/Actions.js";
+export * from "./Conversation/Conversation.js";
+export * from "./Evidence/Evidence.js";
+export * from "./Workbench/Reveal.js";
+export * from "./Workbench/Workbench.js";
+export * from "./Workbench/WorkbenchHero.js";
+export * from "./Workbench/WorkbenchFigure.js";
+export * from "./Workbench/ToolStrip.js";
+export * from "./Workbench/WorkbenchCard.js";
+export * from "./Workbench/WorkbenchEntries.js";
+export * from "./Workbench/Chronology.js";
+export * from "./Workbench/PhotoMosaic.js";
+export * from "./Workbench/ContactRow.js";
+export * from "./Workbench/theme.js";
+//# sourceMappingURL=index.js.map

package/dist/website/index.js.map

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

package/dist/website-actions.css

@@ -0,0 +1,6 @@
+.folio-action-menu { inline-size: 15rem; max-inline-size: calc(100vw - 1rem); max-block-size: min(32rem, var(--radix-dropdown-menu-content-available-height)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.folio-action-menu-item { min-block-size: 44px; }
+.folio-scroll-control { transition: opacity var(--duration-fast) var(--ease); }
+.folio-scroll-control-hidden { opacity: 0; pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { .folio-scroll-control { transition: none; } }
+[data-motion='none'] .folio-scroll-control { transition: none; }

package/dist/website-base.css

@@ -0,0 +1,46 @@
+/*
+ * Document defaults for a host whose whole page is a website, published as
+ * `website-base.css`.
+ *
+ * Opt-in, and deliberately not part of `website.css`: every rule here reaches
+ * past the compositions to the document — the body's type and ground, heading
+ * and paragraph margins, link colour, the scrollbar gutter, and one focus ring
+ * for every focusable element. An application that renders a composition inside
+ * its own chrome keeps its own defaults by not importing this file.
+ *
+ * All of it sits in the base layer, so any utility still wins over it.
+ */
+@layer base {
+  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
+  body {
+    margin: 0;
+    background: var(--paper);
+    color: var(--ink);
+    font-family: var(--sans);
+    font-size: clamp(15.5px, 1.05vw, 17px);
+    line-height: 1.62;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  h1, h2, h3, h4 { margin: 0; font-weight: 400; }
+  p { margin: 0; }
+  a { color: inherit; }
+  :lang(zh) {
+    text-spacing-trim: space-first;
+    text-autospace: normal;
+    font-synthesis-style: none;
+  }
+
+  /* The site-wide ring the compositions are drawn against.
+
+     Layered, because unlayered it beat every utility whatever its specificity:
+     the `Command` input asks for `outline-none` and still drew a clipped square.
+     `:is()` rather than `:where()` so it outranks the core `:focus-visible` ring
+     in this same layer whichever stylesheet loads last, while any composition
+     rule and any utility still outranks it. `--website-focus` is defined in
+     `website.css`; without it the ring takes the core focus colour. */
+  :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
+    outline: var(--focus-w) solid var(--website-focus, var(--focus));
+    outline-offset: 3px;
+  }
+}

package/dist/website-collection.css

@@ -0,0 +1,89 @@
+.folio-collection-frame{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
+.folio-content-band{background:var(--paper);color:var(--ink)}
+.folio-content-band[data-tone=muted]{background:var(--paper-2)}
+.folio-content-band[data-tone=feature]{background:var(--feature-surface);color:var(--on-feature)}
+.folio-content-band[data-spacing=content]{padding-block:0 clamp(4rem,8vw,7rem)}
+.folio-content-band[data-spacing=section]{padding-block:clamp(3rem,7vw,6rem)}
+.folio-collection-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4.5rem)}
+.folio-collection-intro:has(>div:only-child){grid-template-columns:minmax(0,1fr)}
+.folio-collection-intro h1{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-title);line-height:1.05;letter-spacing:-.032em;text-wrap:balance}
+.folio-collection-intro>div:first-child>p{max-width:54ch;margin-block:1.5rem 0;color:var(--ink-2);font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.65;text-wrap:pretty}
+.folio-collection-intro[data-compact] h1{font-size:var(--fs-lead)}
+.folio-collection-intro-media{min-width:0}
+.folio-collection-intro-media img{width:100%;height:auto}
+.folio-collection-context,.folio-record-context,.folio-record-metadata,.folio-collection-count{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;line-height:1.65;letter-spacing:calc(.09em * var(--label-tracking-scale));color:var(--ink-3-aa)}
+.folio-collection-context{margin-block-end:1rem;text-transform:var(--label-case)}
+.folio-collection-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-start:1.5rem}
+.folio-collection-metadata{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin:0;padding-block:1.25rem;border-block:1px solid var(--rule)}
+.folio-collection-metadata dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.folio-collection-metadata dd{margin:.5rem 0 0;color:var(--ink)}
+.folio-collection-group{padding-block-start:clamp(3rem,7vw,6rem)}
+.folio-collection-group[data-compact]{padding-block-start:1.5rem}
+.folio-collection-group-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-hard);padding-block-end:1rem;margin-block-end:1rem}
+.folio-collection-group-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-lead);line-height:1.1;letter-spacing:-.028em}
+.folio-collection-group-heading>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.folio-collection-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border-block:1px solid var(--rule);padding-block:1rem}
+.folio-collection-controls[data-quiet]{border:0}
+.folio-collection-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}
+.folio-collection-filters>.folio-collection-context{margin:0 1rem 0 0}
+.folio-collection-count{margin-inline-start:.25rem;letter-spacing:normal}
+.folio-collection-search{display:flex;align-items:center;gap:.5rem;min-width:0;max-width:24rem;flex:1 1 16rem}
+.folio-collection-search>div{min-width:0;flex:1;gap:0}
+.folio-collection-search input{width:100%;min-width:0;min-height:44px}
+.folio-collection-highlight{background:var(--accent-muted);color:var(--accent-on-muted);border-radius:var(--radius-sm);padding-inline:.125rem}
+.folio-record{border-block-end:1px solid var(--rule)}
+.folio-record-link{display:grid;grid-template-columns:9.25rem minmax(0,1fr) minmax(7rem,auto);gap:1.75rem;padding-block:1.875rem;color:inherit;text-decoration:none;align-items:start}
+.folio-record-link:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-off)}
+.folio-record-media{position:relative;height:6.5rem;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-2)}
+.folio-record-media[data-empty]{border:0;background:transparent}
+.folio-record-media img{display:block;width:100%;height:100%;object-fit:cover}
+.folio-record-copy{min-width:0}
+.folio-record-copy h2,.folio-record-copy h3{margin:.375rem 0 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-heading);font-weight:var(--display-weight);line-height:1.16;letter-spacing:-.022em}
+.folio-record-link:hover h2,.folio-record-link:hover h3{color:var(--ink-2)}
+.folio-record-context{display:flex;flex-wrap:wrap;gap:.75rem}
+.folio-record-summary{max-width:var(--measure-record,62ch);margin:.875rem 0 0;color:var(--ink-2);line-height:1.66;text-wrap:pretty}
+.folio-record-metadata{margin-block-start:1rem}
+.folio-record-metadata ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
+.folio-record-trailing{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;line-height:1.8;text-align:end;color:var(--ink-3-aa)}
+.folio-record-context,.folio-record-metadata,.folio-record-trailing,.folio-collection-metadata dt,.folio-collection-group-heading>span{font-family:var(--sans);font-size:.75rem;letter-spacing:normal;font-variant-numeric:tabular-nums}
+.folio-record-index{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.folio-record[data-variant=editorial][data-indexed] .folio-record-link{grid-template-columns:2rem 9.25rem minmax(0,1fr) minmax(7rem,auto)}
+.folio-record[data-variant=media] .folio-record-link{grid-template-columns:15.375rem minmax(0,1fr) auto}
+.folio-record[data-variant=media][data-indexed] .folio-record-link{grid-template-columns:2rem 15.375rem minmax(0,1fr) auto}
+.folio-record[data-variant=media] .folio-record-media{height:9.625rem}
+.folio-record[data-variant=compact] .folio-record-link{grid-template-columns:minmax(0,1fr) auto;padding-block:1.125rem}
+.folio-record[data-variant=compact][data-indexed] .folio-record-link{grid-template-columns:2.25rem minmax(0,1fr) auto}
+.folio-record[data-variant=compact] h2,.folio-record[data-variant=compact] h3{font-family:var(--mono-i18n,var(--font-mono));font-size:.9375rem;font-weight:500;line-height:1.6;letter-spacing:normal}
+.folio-record-subtitle{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;line-height:1.6;color:var(--ink-3-aa);overflow-wrap:anywhere}
+.folio-featured-record{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:2.5rem clamp(3rem,6vw,5.5rem);border-block-end:1px solid var(--rule)}
+.folio-featured-record-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-sm)}
+.folio-featured-record-media>a{display:block;width:100%;height:100%}
+.folio-featured-record-media img{width:100%;height:100%;object-fit:cover}
+.folio-featured-record h2{margin-block:1.125rem 0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.1;letter-spacing:-.028em}
+.folio-featured-record h2 a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
+.folio-featured-record p{max-width:49ch;margin-block:1.25rem 0;color:var(--ink-2);line-height:1.7}
+.folio-collection-footer{padding-block-start:clamp(2rem,5vw,4rem)}
+.folio-collection-footer>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem}
+.folio-taxonomy-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.5rem}
+.folio-reference-rows{margin:0;border-block-start:1px solid var(--rule-hard)}
+.folio-reference-rows>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}
+.folio-reference-rows dd{margin:0;min-width:0}
+/* The enclosing row owns the divider when structured content is nested. */
+.folio-reference-rows>div>dd>:is(.folio-feature-pairs,.folio-reference-rows){border-block-start:0}
+.folio-reference-rows>div>dd>.folio-feature-pairs{row-gap:1.5rem}
+.folio-reference-rows>div>dd>.folio-feature-pairs>div{padding-block:0;border-block-end:0}
+.folio-reference-rows>div>dd>.folio-reference-rows>div:first-child{padding-block-start:0}
+.folio-reference-rows>div>dd>.folio-reference-rows>div:last-child{padding-block-end:0;border-block-end:0}
+.folio-reference-rows + .folio-collection-controls,
+.folio-reference-rows + :is(div,section)>.folio-collection-controls:first-child{border-block-start:0}
+.folio-collection-group-heading ~ .folio-reference-rows{border-block-start:0}
+@media(max-width:900px){.folio-collection-intro,.folio-featured-record{grid-template-columns:1fr}.folio-record[data-variant=media] .folio-record-link,.folio-record[data-variant=media][data-indexed] .folio-record-link{grid-template-columns:10rem minmax(0,1fr) auto}.folio-record[data-variant=media] .folio-record-index{display:none}}
+@media(max-width:640px){.folio-collection-controls{align-items:stretch}.folio-collection-search{max-width:none}.folio-record[data-variant] .folio-record-link,.folio-record[data-variant][data-indexed] .folio-record-link{grid-template-columns:minmax(0,1fr);gap:1rem}.folio-record-media,.folio-record-index{display:none}.folio-record[data-variant=media] .folio-record-media:not([data-empty]){display:block;height:auto;aspect-ratio:16/9}.folio-record-trailing{text-align:start}.folio-reference-rows>div{grid-template-columns:1fr}.folio-collection-intro{padding-block-start:3.5rem}}
+:lang(zh) :is(.folio-collection-intro h1,.folio-record-copy h2,.folio-record-copy h3,.folio-featured-record h2,.folio-collection-group h2){letter-spacing:var(--ls-cjk,normal);line-height:1.35}
+.folio-collection-tally{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem 1.5rem;margin:0;font-family:var(--sans);font-size:.8125rem;font-weight:400;line-height:1.5;letter-spacing:normal;color:var(--ink-3-aa);font-variant-numeric:tabular-nums}
+.folio-collection-tally>span{display:inline-flex;align-items:center;padding:.5rem .875rem;border:1px solid var(--rule);border-radius:var(--radius-pill);background:var(--paper-2)}
+@media(max-width:767px){.folio-collection-tally{justify-content:flex-start}}
+.folio-collection-list{list-style:none;margin:0;padding:0}
+.folio-collection-list>li{min-width:0}

package/dist/website-contact.css

@@ -0,0 +1,29 @@
+.folio-correspondence {
+  display: grid;
+  align-items: start;
+  gap: 3rem;
+  border-block-start: 1px solid var(--rule-hard);
+  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__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); }
+.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); }
+.folio-location-figure__map > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
+.folio-location-figure__crosshair::before, .folio-location-figure__crosshair::after { content: ''; position: absolute; background: var(--rule-2); }
+.folio-location-figure__crosshair::before { inset-block: 0; inset-inline-start: 50%; inline-size: 1px; }
+.folio-location-figure__crosshair::after { inset-inline: 0; inset-block-start: 50%; block-size: 1px; }
+.folio-location-figure__marker { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: .875rem; block-size: .875rem; border-radius: var(--radius-pill); border: 2px solid var(--paper); background: var(--ink); outline: 1px solid var(--ink); translate: -50% -50%; }
+[dir='rtl'] .folio-location-figure__marker { translate: 50% -50%; }
+.folio-location-figure__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-block-start: .75rem; border-block-start: 1px solid var(--rule); padding-block-start: .75rem; }
+@media (min-width: 640px) { .folio-contact-form__identity { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 768px) { .folio-question-list__item { grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr); gap: 2rem; } }
+@media (min-width: 901px) {
+  .folio-correspondence { grid-template-columns: minmax(16rem, 4fr) minmax(0, 8fr); gap: clamp(3rem, 7vw, 7rem); }
+  .folio-correspondence[data-aside-position='end'] { grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr); }
+}

package/dist/website-content.css

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

package/dist/website-controls.css

@@ -0,0 +1,91 @@
+/* Shared interaction density and focus treatment for public reading surfaces. */
+.folio-collection-controls { gap: .75rem 1.25rem; padding-block: .75rem; }
+.folio-collection-filters { gap: .25rem; }
+.folio-collection-filters>button { min-inline-size: 44px; min-block-size: 34px; padding: .375rem .625rem; font-size: .8125rem; border-radius: var(--radius-sm); }
+.folio-collection-search { gap: .5rem; flex: 0 1 16rem; max-inline-size: 18rem; padding: 0 .625rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
+.folio-collection-search:focus-within { border-color: var(--website-focus); }
+.folio-collection-search>svg { flex: none; color: var(--ink-3-aa); }
+.folio-collection-search input { min-inline-size: 0; min-block-size: 34px; block-size: 34px; flex: 1; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: .8125rem; box-shadow: none; }
+.folio-collection-search input:focus,.folio-collection-search input:focus-visible { outline: none; box-shadow: none; }
+.folio-collection-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
+.folio-collection-search>button { min-inline-size: 28px; min-block-size: 28px; inline-size: 28px; block-size: 28px; }
+.folio-reference-link { display: inline-flex; align-items: center; gap: .375rem; min-block-size: 32px; max-inline-size: 100%; padding: .25rem 0; font-family: var(--sans); font-size: .8125rem; color: var(--ink-2); text-decoration: none; }
+.folio-reference-link>span { overflow-wrap: anywhere; }
+.folio-reference-link>svg { flex: none; }
+.folio-reference-link:hover>span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-2); }
+.folio-reference-link:focus-visible { outline: 1px solid var(--rule-2); outline-offset: 2px; border-radius: 2px; }
+.folio-command-tabs [role=tab] { min-block-size: 34px; padding: .375rem .625rem; font-size: .75rem; }
+:is(.folio-command-tabs,.folio-command-snippet) [role=group] { padding: .625rem .75rem; }
+:is(.folio-command-tabs,.folio-command-snippet) pre { font-size: .78125rem; line-height: 1.6; }
+:is(.folio-command-tabs [role=tabpanel],.folio-command-snippet) button { min-inline-size: 28px; min-block-size: 28px; inline-size: 28px; block-size: 28px; }
+.folio-command-tabs [role=tabpanel] { padding-block-start: .75rem; }
+.folio-record[data-variant=compact] .folio-record-link { padding-block: 1rem; gap: 1rem; }
+.folio-record[data-variant=compact] :is(h2,h3) { font-family: var(--sans); font-size: .875rem; margin-block-start: 0; }
+.folio-record[data-variant=compact] .folio-record-summary { font-size: .8125rem; margin-block-start: .375rem; line-height: 1.7; }
+@media (max-width: 640px) { .folio-collection-search { flex-basis: auto; inline-size: 100%; max-inline-size: none; } }
+@media (pointer: coarse) {
+  .folio-collection-filters>button,.folio-collection-search input,.folio-reference-link,.folio-command-tabs [role=tab] { min-block-size: 44px; }
+  .folio-collection-search>button,:is(.folio-command-tabs [role=tabpanel],.folio-command-snippet) button { min-inline-size: 44px; min-block-size: 44px; }
+  :is(.folio-command-tabs [role=tabpanel],.folio-command-snippet) div:has(>button[aria-label]) { padding-block: 0; }
+}
+.folio-selection-toolbar { animation: folio-fade-in var(--duration-fast) var(--ease); }
+/* The site-wide ring that reads this colour lives in `website-base.css`; the
+   scoped rules below read it too. */
+:root { --website-focus: color-mix(in srgb, var(--ink) 60%, var(--paper)); }
+.folio-site-navigation-inner { min-block-size: 3.75rem; }
+.folio-site-navigation .folio-navigation-search {
+  min-block-size: 34px;
+  block-size: 34px;
+  inline-size: clamp(9rem, 14vw, 12rem);
+  padding-inline: .75rem;
+  background: var(--paper);
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+}
+.folio-navigation-search kbd { border: 0; background: transparent; padding: 0; }
+.folio-site-navigation button:focus-visible { outline-color: var(--website-focus); outline-offset: 2px; }
+.folio-site-navigation button:focus:not(:focus-visible) { outline: none; }
+.folio-site-navigation .folio-navigation-search:focus-visible { outline: none; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--website-focus); }
+.folio-question-card form { padding: .375rem; border-radius: var(--radius-md); align-items: center; gap: .375rem; }
+.folio-question-card form:focus-within { border-color: var(--website-focus); box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 5%, transparent); }
+.folio-question-card form>button { border-radius: 50%; inline-size: 44px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; }
+.folio-question-card form>button:disabled { background: var(--paper-2); color: var(--ink-3-aa); opacity: 1; border-color: var(--rule); }
+.folio-question-card form input:focus,
+.folio-question-card form input:focus-visible { outline: none; box-shadow: none; border: 0; }
+.folio-question-card form input { border-radius: 0; }
+.folio-selection-toolbar { gap: 0; padding: .25rem; border-color: var(--rule-2); border-radius: var(--radius-md); box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 9%, transparent); }
+.folio-selection-toolbar > button,
+.folio-selection-toolbar > button:first-child { min-block-size: 34px; background: transparent; color: var(--ink-2); border: 0; border-radius: var(--radius-sm); padding: .375rem .75rem; font-family: var(--sans); font-size: .8125rem; font-weight: 400; }
+.folio-selection-toolbar > button + button { border-inline-start: 1px solid var(--rule); border-start-start-radius: 0; border-end-start-radius: 0; }
+.folio-selection-toolbar > button:hover { background: var(--paper-2); color: var(--ink); }
+/* The menus the compositions open, and no others. A menu portals to <body>, so
+   it cannot be scoped by an ancestor; it carries its composition's class
+   instead, and a host's own DropdownMenu keeps the primitive's look. */
+:is(.folio-action-menu, .folio-site-preference-menu)[data-folio-menu] { padding: .375rem; border-color: var(--rule); border-radius: var(--radius-md); background: var(--paper); box-shadow: 0 4px 20px color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: none; }
+:is(.folio-action-menu, .folio-site-preference-menu)[data-folio-menu]:focus { outline: none; }
+:is(.folio-action-menu, .folio-site-preference-menu)[data-folio-menu] [role='menuitem'],
+.folio-site-preference-item { min-block-size: 36px; font-family: var(--sans); font-size: .8125rem; font-weight: 400; border-radius: var(--radius-sm); }
+.folio-portfolio-index [role='tab'] > span { color: var(--ink-3-aa); background: transparent; border: 0; font-family: var(--sans); font-size: .75rem; font-weight: 400; font-variant-numeric: tabular-nums; }
+.folio-portfolio-image[data-natural] .folio-portfolio-image-frame { aspect-ratio: auto; background: transparent; }
+.folio-portfolio-image[data-natural] img { position: static; display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
+.folio-portfolio-list[data-variant='thumbnails'] > div,
+.folio-portfolio-list[data-variant='frames'] > div { align-items: start; }
+@media (max-width: 599px) {
+  .folio-site-navigation .folio-navigation-search { inline-size: auto; }
+  .folio-collection-intro { padding-block-start: 6rem; }
+}
+@media (max-width: 40rem) {
+  /* Safari zooms a page when the field it focuses is under 16px. Keep the
+     surrounding compact composition, but make the editable text legible. */
+  .folio-collection-search input,
+  .folio-question-card form input { font-size: 1rem; }
+}
+@media (max-width: 359px) {
+  .folio-site-navigation .folio-navigation-search { inline-size: 44px; }
+}
+@media (pointer: coarse) {
+  .folio-site-navigation .folio-navigation-search,
+  .folio-selection-toolbar > button,
+  :is(.folio-action-menu, .folio-site-preference-menu)[data-folio-menu] [role='menuitem'],
+  .folio-site-preference-item { min-block-size: 44px; }
+}

package/dist/website-conversation.css

@@ -0,0 +1,115 @@
+.folio-conversation-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 3rem; }
+.folio-conversation-layout__evidence { display: none; min-inline-size: 0; }
+.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 > h2 { max-inline-size: 22ch; text-wrap: balance; }
+.folio-conversation-thread__intro > p { max-inline-size: 56ch; }
+.folio-conversation-suggestions { margin-block-start: 2rem; }
+.folio-conversation-suggestions > ul, .folio-conversation-sources > ul { list-style: none; margin: .5rem 0 0; padding: 0; border-block-start: 1px solid var(--rule); }
+.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 > 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__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; }
+.folio-question-composer__row > button { flex-shrink: 0; }
+.folio-question-composer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between; margin-block-start: .75rem; }
+.folio-question-composer__footer > p { max-inline-size: 56ch; }
+.folio-question-composer__counter { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.folio-conversation-turn { border-block-end: 1px solid var(--rule); padding-block: 1.75rem; }
+.folio-conversation-turn__toggle { inline-size: 100%; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: start; font: inherit; color: inherit; padding-inline: 0; }
+.folio-conversation-turn__toggle > span { text-wrap: balance; }
+.folio-conversation-turn__toggle > svg { flex-shrink: 0; transition: rotate var(--duration-fast) var(--ease); }
+.folio-conversation-turn__toggle[data-state='open'] > svg { rotate: 90deg; }
+.folio-conversation-turn__body { max-inline-size: 64ch; padding-block-start: .75rem; }
+.folio-conversation-turn__preview { max-inline-size: 64ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folio-conversation-quote { margin: 0 0 1.5rem; border-inline-start: 1px solid var(--rule-2); padding-inline-start: 1.25rem; }
+.folio-conversation-quote > blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: .5rem 0 0; font-family: var(--font-heading); font-weight: var(--display-weight); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
+.folio-conversation-quote[data-compact] { margin-block-end: 1rem; padding-inline-start: .875rem; }
+.folio-conversation-quote[data-compact] > blockquote { -webkit-line-clamp: 3; font-size: .875rem; }
+.folio-conversation-answer__question { margin-block: .375rem 1rem; font-family: var(--font-heading); }
+.folio-conversation-answer > .folio-activity-trace { margin-block-end: 1rem; }
+.folio-conversation-prose { font-size: 1rem; overflow-wrap: anywhere; }
+.folio-conversation-prose > p { white-space: pre-wrap; }
+.folio-conversation-prose p.folio-conversation-prose__heading { margin-block: 1.5rem .5rem; font-size: 1rem; font-family: var(--font-sans); font-weight: 500; line-height: 1.5; color: var(--ink); }
+.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__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__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; }
+.folio-conversation-launcher { position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 40; min-block-size:3rem; padding-inline:1rem 1.125rem; gap:.625rem; border:1px solid var(--rule-2); border-radius:var(--radius-pill); background:var(--paper); color:var(--ink-2); font-family:var(--sans); font-size:.8125rem; font-weight:500; box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 4%,transparent),0 8px 24px color-mix(in srgb,var(--ink) 6%,transparent); transition: opacity var(--duration-base) var(--ease),background var(--duration-fast),box-shadow var(--duration-fast); }
+.folio-conversation-launcher:hover { background:var(--paper-2); box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 5%,transparent),0 10px 28px color-mix(in srgb,var(--ink) 8%,transparent); }
+.folio-conversation-launcher[data-revealed='false'] { opacity: 0; pointer-events: none; }
+.folio-conversation-dock__scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }
+.folio-conversation-dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-modal); display: flex; flex-direction: column; max-block-size: min(72svh, 40rem); overflow: hidden; border: 1px solid var(--rule-hard); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--paper); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease); }
+.folio-conversation-dock[data-open='false'] { visibility: hidden; opacity: 0; translate: 0 .75rem; }
+.folio-conversation-dock[data-card='true'] { inset: auto; max-block-size: none; border-radius: var(--radius-lg); }
+.folio-conversation-dock[data-card='true'][data-corner='bottom-left'] { bottom: 1.5rem; left: 1.5rem; }
+.folio-conversation-dock[data-card='true'][data-corner='bottom-right'] { bottom: 1.5rem; right: 1.5rem; }
+.folio-conversation-dock[data-card='true'][data-corner='top-left'] { top: 1.5rem; left: 1.5rem; }
+.folio-conversation-dock[data-card='true'][data-corner='top-right'] { top: 1.5rem; right: 1.5rem; }
+.folio-conversation-dock[data-dragging] { user-select: none; }
+.folio-conversation-dock[data-moving] { transition: none; }
+.folio-conversation-dock__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-shrink: 0; border-block-end: 1px solid var(--rule-hard); padding-inline: 1rem; }
+.folio-conversation-dock__header > span, .folio-conversation-dock__header > div { display: flex; align-items: center; gap: .5rem; }
+.folio-conversation-dock[data-card='true'] > .folio-conversation-dock__header { cursor: grab; padding-block: .5rem; }
+.folio-conversation-dock[data-moving] > .folio-conversation-dock__header { cursor: grabbing; }
+.folio-conversation-dock__log { min-block-size: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
+.folio-conversation-dock__proposal { border-block-start: 1px solid var(--rule); padding: .75rem 1rem 0; }
+.folio-conversation-dock__notice { border-block-start: 1px solid var(--rule); padding: .75rem 1rem; background: var(--paper-2); }
+.folio-conversation-dock__composer { border-block-start: 1px solid var(--rule-hard); padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
+.folio-conversation-dock-welcome > p { max-inline-size: 30ch; font-family: var(--font-heading); }
+.folio-conversation-dock-welcome .folio-conversation-suggestions { margin-block-start: 1.5rem; }
+.folio-conversation-dock { border-color:var(--rule-2); box-shadow:0 12px 48px color-mix(in srgb,var(--ink) 12%,transparent); }
+.folio-conversation-dock__header { padding-inline:1.25rem; border-color:var(--rule); font-family:var(--sans); }
+.folio-conversation-dock__header a { font-family:var(--sans); font-size:.8125rem; }
+.folio-conversation-dock__log { padding:1.5rem; }
+.folio-conversation-dock-welcome>p { font-family:var(--sans); font-size:1rem; line-height:1.75; font-weight:400; color:var(--ink-2); }
+.folio-conversation-dock .folio-conversation-suggestions__action { font-family:var(--sans); font-size:.8125rem; font-weight:400; line-height:1.65; white-space:normal; padding-block:.75rem; }
+.folio-conversation-dock__composer { padding:1rem 1.25rem; border-color:var(--rule); background:var(--paper-2); }
+.folio-conversation-resize { position: absolute; z-index: 10; }
+.folio-conversation-resize[data-side='top'], .folio-conversation-resize[data-side='bottom'] { inset-inline: 0; block-size: .375rem; cursor: ns-resize; }
+.folio-conversation-resize[data-side='left'], .folio-conversation-resize[data-side='right'] { inset-block: 0; inline-size: .375rem; cursor: ew-resize; }
+.folio-conversation-resize[data-side='top'] { top: 0; }
+.folio-conversation-resize[data-side='bottom'] { bottom: 0; }
+.folio-conversation-resize[data-side='left'] { left: 0; }
+.folio-conversation-resize[data-side='right'] { right: 0; }
+.folio-conversation-resize:focus-visible, .folio-conversation-resize[data-dragging] { background: var(--focus); outline: none; }
+.folio-selection-toolbar { position: fixed; z-index: var(--z-modal); display: flex; align-items: stretch; gap: .125rem; padding: .3125rem; max-inline-size: calc(100vw - 2rem); border: 1px solid var(--rule-hard); border-radius: var(--radius-lg); background:var(--paper); box-shadow:0 .75rem 2rem color-mix(in srgb,var(--ink) 14%,transparent); }
+.folio-selection-toolbar[data-floating='false'] { left: 50%; translate: -50% 0; bottom: calc(5rem + env(safe-area-inset-bottom)); }
+.folio-selection-toolbar > button { min-block-size:2.5rem; white-space: nowrap; border-radius:calc(var(--radius) - 1px); }
+.folio-selection-toolbar > button:first-child{background:var(--ink);color:var(--paper)}
+@media (max-width: 639px) {
+  .folio-conversation-suggestions [data-wide-only] { display: none; }
+  .folio-action-proposal__detail { display: none; }
+  .folio-question-composer[data-compact] .folio-question-composer__row { gap: .5rem; }
+  .folio-question-composer[data-compact] input { font-size: 1rem; }
+}
+@media (min-width: 901px) {
+  .folio-conversation-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: clamp(2.5rem, 5vw, 5rem); }
+  .folio-conversation-layout__evidence { display: block; position: sticky; inset-block-start: var(--scroll-offset); border-inline-start: 1px solid var(--rule); padding-inline-start: clamp(1.5rem, 3vw, 2.5rem); }
+}
+@media (min-width: 640px) { .folio-conversation-facts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.5rem 3rem; } }
+@media (prefers-reduced-motion: no-preference) {
+  .folio-conversation-caret { animation: folio-conversation-blink 1s steps(2, end) infinite; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .folio-conversation-dock, .folio-conversation-launcher, .folio-conversation-turn__toggle > svg { transition: none; }
+}
+@keyframes folio-conversation-blink { to { opacity: 0; } }