@misoto22/folio 0.0.0 → 0.16.0

package/dist/website/SearchPalette/SearchPalette.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { DialogContentProps } from '../../components/Dialog/Dialog.js';
+import '@radix-ui/react-dialog';
+
+interface SearchPaletteItem {
+    /** Stable identity, independent of a translated title. */
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    meta?: ReactNode;
+    onSelect: () => void;
+}
+interface SearchPaletteGroup {
+    id: string;
+    label: string;
+    items: SearchPaletteItem[];
+}
+interface SearchPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    label: string;
+    inputLabel: string;
+    placeholder: string;
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Already filtered results; search and data access belong to the consumer. */
+    groups: SearchPaletteGroup[];
+    emptyLabel: ReactNode;
+    labels: {
+        close: string;
+        navigate: string;
+        select: string;
+        back: string;
+    };
+    /** Optional answer or detail view, with Escape returning to the results. */
+    detail?: {
+        label: string;
+        content: ReactNode;
+        onBack: () => void;
+        onSubmit: () => void;
+        submitDisabled?: boolean;
+    };
+    onContentLinkClick?: () => void;
+    onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus'];
+}
+/** Search, actions and an optional result detail inside one accessible modal. */
+declare function SearchPalette({ open, onOpenChange, label, inputLabel, placeholder, query, onQueryChange, groups, emptyLabel, labels, detail, onContentLinkClick, onCloseAutoFocus, }: SearchPaletteProps): react.JSX.Element;
+interface SearchExcerptProps {
+    segments: ReadonlyArray<{
+        text: string;
+        highlighted: boolean;
+    }>;
+}
+/** Render query highlights as text, never as consumer-supplied HTML. */
+declare function SearchExcerpt({ segments }: SearchExcerptProps): react.JSX.Element;
+
+export { SearchExcerpt, type SearchExcerptProps, SearchPalette, type SearchPaletteGroup, type SearchPaletteItem, type SearchPaletteProps };

package/dist/website/SearchPalette/SearchPalette.js

@@ -0,0 +1,120 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { RiArrowLeftLine, RiCloseLine } from "@remixicon/react";
+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";
+function SearchPalette({
+  open,
+  onOpenChange,
+  label,
+  inputLabel,
+  placeholder,
+  query,
+  onQueryChange,
+  groups,
+  emptyLabel,
+  labels,
+  detail,
+  onContentLinkClick,
+  onCloseAutoFocus
+}) {
+  const input = useRef(null);
+  const previousFocus = useRef(null);
+  const showingDetail = Boolean(detail);
+  useEffect(() => {
+    if (open) input.current?.focus();
+  }, [open, showingDetail]);
+  const close = () => onOpenChange(false);
+  const field = { input, inputLabel, placeholder, query, onQueryChange };
+  return /* @__PURE__ */ jsxs(
+    CommandDialog,
+    {
+      open,
+      onOpenChange,
+      label,
+      inputLabel,
+      shouldFilter: false,
+      onOpenAutoFocus: () => {
+        previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      },
+      onCloseAutoFocus: (event) => {
+        onCloseAutoFocus?.(event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          previousFocus.current?.focus();
+        }
+      },
+      onEscapeKeyDown: (event) => {
+        if (detail) {
+          event.preventDefault();
+          detail.onBack();
+        }
+      },
+      children: [
+        detail ? /* @__PURE__ */ jsx(SearchDetail, { ...field, detail, labels, onClose: close, onContentLinkClick }) : /* @__PURE__ */ jsx(SearchResults, { ...field, label, groups, emptyLabel, closeLabel: labels.close, onClose: close }),
+        /* @__PURE__ */ jsxs(CommandFooter, { className: "folio-search-palette__footer", children: [
+          !detail && /* @__PURE__ */ jsx(CommandHint, { keys: ["\u2191", "\u2193"], children: labels.navigate }),
+          /* @__PURE__ */ jsx(CommandHint, { keys: ["\u21B5"], children: labels.select }),
+          /* @__PURE__ */ jsx(CommandHint, { keys: ["esc"], children: detail ? labels.back : labels.close })
+        ] })
+      ]
+    }
+  );
+}
+function SearchResults({ input, inputLabel, placeholder, query, onQueryChange, onClose, label, groups, emptyLabel, closeLabel }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-search-palette__search", children: [
+      /* @__PURE__ */ jsx(CommandInput, { ref: input, "aria-label": inputLabel, placeholder, value: query, onValueChange: onQueryChange, autoComplete: "off", spellCheck: false }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": closeLabel, onClick: onClose, className: "folio-search-palette__close", children: /* @__PURE__ */ jsx(RiCloseLine, { size: 18, "aria-hidden": true }) })
+    ] }),
+    /* @__PURE__ */ jsxs(CommandList, { label, children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyLabel }),
+      groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: /* @__PURE__ */ jsx("span", { className: "folio-search-palette__heading", children: group.label }), children: group.items.map((item) => /* @__PURE__ */ jsx(
+        CommandItem,
+        {
+          value: item.id,
+          icon: item.icon,
+          onSelect: item.onSelect,
+          className: "folio-search-palette__item",
+          meta: item.meta ? /* @__PURE__ */ jsx("span", { className: "folio-search-palette__meta", children: item.meta }) : void 0,
+          children: /* @__PURE__ */ jsxs("span", { className: "folio-search-palette__result", children: [
+            /* @__PURE__ */ jsx("span", { children: item.title }),
+            item.description && /* @__PURE__ */ jsx("span", { className: "folio-search-palette__description", children: item.description })
+          ] })
+        },
+        item.id
+      )) }, group.id))
+    ] })
+  ] });
+}
+const LIST_KEYS = /* @__PURE__ */ new Set(["Enter", "Home", "End", "ArrowUp", "ArrowDown"]);
+function keepFromList(event) {
+  if (LIST_KEYS.has(event.key)) event.stopPropagation();
+}
+function SearchDetail({ input, inputLabel, placeholder, query, onQueryChange, onClose, detail, labels, onContentLinkClick }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("form", { className: "folio-search-palette__input", onKeyDown: keepFromList, onSubmit: (event) => {
+      event.preventDefault();
+      if (query.trim() && !detail.submitDisabled) detail.onSubmit();
+    }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": labels.back, onClick: detail.onBack, children: /* @__PURE__ */ jsx(RiArrowLeftLine, { size: 18, "aria-hidden": true }) }),
+      /* @__PURE__ */ jsx(Input, { ref: input, "aria-label": inputLabel, placeholder, value: query, onChange: (event) => onQueryChange(event.target.value), autoComplete: "off" }),
+      /* @__PURE__ */ jsx(Badge, { children: detail.label }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": labels.close, onClick: onClose, children: /* @__PURE__ */ jsx(RiCloseLine, { size: 18, "aria-hidden": true }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "folio-search-palette__detail", "aria-live": "polite", onKeyDown: keepFromList, onClick: (event) => {
+      if (event.target.closest("a")) onContentLinkClick?.();
+    }, children: detail.content })
+  ] });
+}
+function SearchExcerpt({ segments }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, index) => segment.highlighted ? /* @__PURE__ */ jsx("mark", { className: "folio-search-palette__highlight", children: segment.text }, index) : segment.text) });
+}
+export {
+  SearchExcerpt,
+  SearchPalette
+};
+//# sourceMappingURL=SearchPalette.js.map

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

@@ -0,0 +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":[]}

package/dist/website/SiteNavigation/SiteNavigation.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface SiteNavigationItem {
+    id: string;
+    content: ReactElement;
+    active?: boolean;
+}
+interface NavigationSearchTriggerProps {
+    label: string;
+    onClick: () => void;
+    shortcut?: string;
+}
+/** A visible search entry with its keyboard shortcut, compact on small screens. */
+declare function NavigationSearchTrigger({ label, onClick, shortcut }: NavigationSearchTriggerProps): react.JSX.Element;
+interface PreferenceMenuProps {
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    icon: ReactNode;
+    disabled?: boolean;
+    options: {
+        value: string;
+        label: string;
+        icon?: ReactNode;
+    }[];
+}
+/** A compact named control for selecting one persistent reader preference. */
+declare function PreferenceMenu({ label, value, onValueChange, icon, disabled, options }: PreferenceMenuProps): react.JSX.Element;
+interface SiteNavigationProps {
+    brand: ReactNode;
+    links: SiteNavigationItem[];
+    actions?: ReactNode;
+    footer?: ReactNode;
+    label: string;
+    openLabel: string;
+    closeLabel: string;
+    /** Transparent over media until the reader scrolls. */
+    overlay?: boolean;
+    /** A host navigation identity; changing it dismisses the mobile menu. */
+    navigationKey?: string;
+}
+/** A public-site masthead with a keyboard-safe mobile navigation sheet. */
+declare function SiteNavigation({ brand, links, actions, footer, label, openLabel, closeLabel, overlay, navigationKey }: SiteNavigationProps): react.JSX.Element;
+
+export { NavigationSearchTrigger, type NavigationSearchTriggerProps, PreferenceMenu, type PreferenceMenuProps, SiteNavigation, type SiteNavigationItem, type SiteNavigationProps };

package/dist/website/SiteNavigation/SiteNavigation.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as MenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { RiCheckLine, RiMenuLine, RiSearchLine } from "@remixicon/react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../components/Button/Button.js";
+import { Kbd } from "../../components/Kbd/Kbd.js";
+import { Sheet, SheetClose, SheetContent, SheetTrigger } from "../../components/Sheet/Sheet.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuLabel } from "../../components/DropdownMenu/DropdownMenu.js";
+function NavigationSearchTrigger({ label, onClick, shortcut = "\u2318 K" }) {
+  return /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "folio-navigation-search", "aria-label": `${label} (${shortcut})`, onClick, children: [
+    /* @__PURE__ */ jsx(RiSearchLine, { size: 17, "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "folio-navigation-search-label", children: label }),
+    /* @__PURE__ */ jsx(Kbd, { children: shortcut })
+  ] });
+}
+function PreferenceMenu({ label, value, onValueChange, icon, disabled, options }) {
+  const keyboardInteraction = useRef(false);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, onPointerDownCapture: () => {
+      keyboardInteraction.current = false;
+    }, onKeyDownCapture: () => {
+      keyboardInteraction.current = true;
+    }, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": label, disabled, children: icon }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", "aria-label": label, className: "folio-site-preference-menu", onPointerDownCapture: () => {
+      keyboardInteraction.current = false;
+    }, onKeyDownCapture: () => {
+      keyboardInteraction.current = true;
+    }, onCloseAutoFocus: (event) => {
+      if (!keyboardInteraction.current) event.preventDefault();
+    }, children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+      /* @__PURE__ */ jsx(MenuPrimitive.RadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, { value: option.value, className: "folio-site-preference-item", children: [
+        /* @__PURE__ */ jsx("span", { children: option.label }),
+        option.icon,
+        /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: "folio-site-preference-indicator", "aria-hidden": true, children: /* @__PURE__ */ jsx(RiCheckLine, { size: 14 }) })
+      ] }, option.value)) })
+    ] })
+  ] });
+}
+function isLaidOutAgainstViewport(element) {
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:fixed;inset:0 0 auto;inline-size:100%;visibility:hidden;pointer-events:none";
+  document.body.append(probe);
+  const own = element.getBoundingClientRect();
+  const viewport = probe.getBoundingClientRect();
+  probe.remove();
+  return Math.abs(own.left - viewport.left) <= 1 && Math.abs(own.top - viewport.top) <= 1 && Math.abs(own.width - viewport.width) <= 1;
+}
+function SiteNavigation({ brand, links, actions, footer, label, openLabel, closeLabel, overlay = false, navigationKey }) {
+  const header = useRef(null);
+  useEffect(() => {
+    const node = header.current;
+    if (!node) return;
+    let gutter = window.innerWidth - document.documentElement.clientWidth;
+    const measure = () => {
+      if (!document.body.hasAttribute("data-scroll-locked")) {
+        gutter = window.innerWidth - document.documentElement.clientWidth;
+      }
+      node.style.removeProperty("inline-size");
+      if (isLaidOutAgainstViewport(node)) node.style.setProperty("inline-size", `${window.innerWidth - gutter}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, []);
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [previousKey, setPreviousKey] = useState(navigationKey);
+  if (previousKey !== navigationKey) {
+    setPreviousKey(navigationKey);
+    setOpen(false);
+  }
+  useEffect(() => {
+    const update = () => setScrolled(window.scrollY > 40);
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, []);
+  return /* @__PURE__ */ jsx("header", { ref: header, className: "folio-site-navigation", "data-overlay": overlay && !scrolled && !open || void 0, children: /* @__PURE__ */ jsxs("div", { className: "folio-site-navigation-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "folio-site-wordmark", children: brand }),
+    /* @__PURE__ */ jsx("nav", { className: "folio-site-navigation-desktop", "aria-label": label, children: /* @__PURE__ */ jsx("ul", { children: links.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Slot, { className: "folio-site-navigation-link", "aria-current": item.active ? "page" : void 0, children: item.content }) }, item.id)) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-site-navigation-actions", children: [
+      actions,
+      /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": open ? closeLabel : openLabel, className: "folio-site-navigation-toggle", children: /* @__PURE__ */ jsx(RiMenuLine, { size: 19, "aria-hidden": true }) }) }),
+        /* @__PURE__ */ jsxs(SheetContent, { side: "top", title: label, closeLabel, className: "folio-site-navigation-sheet", "aria-describedby": void 0, children: [
+          /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "folio-site-navigation-mobile", children: links.map((item) => /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(Slot, { className: "folio-site-navigation-link", "aria-current": item.active ? "page" : void 0, children: item.content }) }, item.id)) }),
+          footer && /* @__PURE__ */ jsx("div", { className: "folio-site-navigation-footer", children: footer })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  NavigationSearchTrigger,
+  PreferenceMenu,
+  SiteNavigation
+};
+//# sourceMappingURL=SiteNavigation.js.map

package/dist/website/SiteNavigation/SiteNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/SiteNavigation/SiteNavigation.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport * as MenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { RiCheckLine, RiMenuLine, RiSearchLine } from '@remixicon/react'\nimport { useEffect, useRef, useState, type ReactElement, type ReactNode } from 'react'\nimport { Button } from '../../components/Button/Button'\nimport { Kbd } from '../../components/Kbd/Kbd'\nimport { Sheet, SheetClose, SheetContent, SheetTrigger } from '../../components/Sheet/Sheet'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuLabel } from '../../components/DropdownMenu/DropdownMenu'\n\nexport interface SiteNavigationItem {\n  id: string\n  content: ReactElement\n  active?: boolean\n}\n\nexport interface NavigationSearchTriggerProps {\n  label: string\n  onClick: () => void\n  shortcut?: string\n}\n\n/** A visible search entry with its keyboard shortcut, compact on small screens. */\nexport function NavigationSearchTrigger({ label, onClick, shortcut = '⌘ K' }: NavigationSearchTriggerProps) {\n  return <Button variant=\"ghost\" className=\"folio-navigation-search\" aria-label={`${label} (${shortcut})`} onClick={onClick}><RiSearchLine size={17} aria-hidden /><span className=\"folio-navigation-search-label\">{label}</span><Kbd>{shortcut}</Kbd></Button>\n}\n\nexport interface PreferenceMenuProps {\n  label: string\n  value: string\n  onValueChange: (value: string) => void\n  icon: ReactNode\n  disabled?: boolean\n  options: { value: string; label: string; icon?: ReactNode }[]\n}\n\n/** A compact named control for selecting one persistent reader preference. */\nexport function PreferenceMenu({ label, value, onValueChange, icon, disabled, options }: PreferenceMenuProps) {\n  const keyboardInteraction = useRef(false)\n  return <DropdownMenu modal={false}><DropdownMenuTrigger asChild onPointerDownCapture={() => { keyboardInteraction.current = false }} onKeyDownCapture={() => { keyboardInteraction.current = true }}><Button variant=\"ghost\" iconOnly aria-label={label} disabled={disabled}>{icon}</Button></DropdownMenuTrigger><DropdownMenuContent align=\"end\" aria-label={label} className=\"folio-site-preference-menu\"onPointerDownCapture={() => { keyboardInteraction.current = false }} onKeyDownCapture={() => { keyboardInteraction.current = true }} onCloseAutoFocus={event => { if (!keyboardInteraction.current) event.preventDefault() }}><DropdownMenuLabel>{label}</DropdownMenuLabel><MenuPrimitive.RadioGroup value={value} onValueChange={onValueChange}>{options.map(option => <MenuPrimitive.RadioItem key={option.value} value={option.value} className=\"folio-site-preference-item\"><span>{option.label}</span>{option.icon}<MenuPrimitive.ItemIndicator className=\"folio-site-preference-indicator\" aria-hidden><RiCheckLine size={14} /></MenuPrimitive.ItemIndicator></MenuPrimitive.RadioItem>)}</MenuPrimitive.RadioGroup></DropdownMenuContent></DropdownMenu>\n}\n\n/**\n * Whether a fixed element's containing block is the viewport.\n *\n * A transform, filter or `contain: layout` on any ancestor takes that role\n * instead, and the list differs between engines, so the element is\n * compared with a probe fixed to the body rather than checked against a list.\n * `documentElement.clientWidth` cannot stand in for the probe: with a stable\n * scrollbar gutter Chromium reports the full window while laying fixed boxes\n * out beside the gutter.\n */\nfunction isLaidOutAgainstViewport(element: HTMLElement): boolean {\n  const probe = document.createElement('div')\n  probe.style.cssText = 'position:fixed;inset:0 0 auto;inline-size:100%;visibility:hidden;pointer-events:none'\n  document.body.append(probe)\n  const own = element.getBoundingClientRect()\n  const viewport = probe.getBoundingClientRect()\n  probe.remove()\n  return Math.abs(own.left - viewport.left) <= 1 && Math.abs(own.top - viewport.top) <= 1 && Math.abs(own.width - viewport.width) <= 1\n}\n\nexport interface SiteNavigationProps {\n  brand: ReactNode\n  links: SiteNavigationItem[]\n  actions?: ReactNode\n  footer?: ReactNode\n  label: string\n  openLabel: string\n  closeLabel: string\n  /** Transparent over media until the reader scrolls. */\n  overlay?: boolean\n  /** A host navigation identity; changing it dismisses the mobile menu. */\n  navigationKey?: string\n}\n\n/** A public-site masthead with a keyboard-safe mobile navigation sheet. */\nexport function SiteNavigation({ brand, links, actions, footer, label, openLabel, closeLabel, overlay = false, navigationKey }: SiteNavigationProps) {\n  const header = useRef<HTMLElement>(null)\n  useEffect(() => {\n    const node = header.current\n    if (!node) return\n    // Overlay scroll locks change the viewport's available layout width in\n    // WebViews. Keep the unlocked width until an actual window resize.\n    let gutter = window.innerWidth - document.documentElement.clientWidth\n    const measure = () => {\n      if (!document.body.hasAttribute('data-scroll-locked')) {\n        gutter = window.innerWidth - document.documentElement.clientWidth\n      }\n      // Pin only against the viewport. Under an ancestor that contains fixed\n      // descendants the stylesheet's 100% is that ancestor's width, and the\n      // window's overflows it.\n      node.style.removeProperty('inline-size')\n      if (isLaidOutAgainstViewport(node)) node.style.setProperty('inline-size', `${window.innerWidth - gutter}px`)\n    }\n    measure()\n    window.addEventListener('resize', measure)\n    return () => window.removeEventListener('resize', measure)\n  }, [])\n  const [open, setOpen] = useState(false)\n  const [scrolled, setScrolled] = useState(false)\n  const [previousKey, setPreviousKey] = useState(navigationKey)\n  if (previousKey !== navigationKey) {\n    setPreviousKey(navigationKey)\n    setOpen(false)\n  }\n  useEffect(() => {\n    const update = () => setScrolled(window.scrollY > 40)\n    update()\n    window.addEventListener('scroll', update, { passive: true })\n    return () => window.removeEventListener('scroll', update)\n  }, [])\n\n  return (\n    <header ref={header} className=\"folio-site-navigation\" data-overlay={overlay && !scrolled && !open || undefined}>\n      <div className=\"folio-site-navigation-inner\">\n        <div className=\"folio-site-wordmark\">{brand}</div>\n        <nav className=\"folio-site-navigation-desktop\" aria-label={label}>\n          <ul>{links.map(item => <li key={item.id}><Slot className=\"folio-site-navigation-link\" aria-current={item.active ? 'page' : undefined}>{item.content}</Slot></li>)}</ul>\n        </nav>\n        <div className=\"folio-site-navigation-actions\">\n          {actions}\n          <Sheet open={open} onOpenChange={setOpen}>\n            <SheetTrigger asChild><Button variant=\"ghost\" iconOnly aria-label={open ? closeLabel : openLabel} className=\"folio-site-navigation-toggle\"><RiMenuLine size={19} aria-hidden /></Button></SheetTrigger>\n            <SheetContent side=\"top\" title={label} closeLabel={closeLabel} className=\"folio-site-navigation-sheet\" aria-describedby={undefined}>\n              <nav aria-label={label} className=\"folio-site-navigation-mobile\">\n                {links.map(item => <SheetClose asChild key={item.id}><Slot className=\"folio-site-navigation-link\" aria-current={item.active ? 'page' : undefined}>{item.content}</Slot></SheetClose>)}\n              </nav>\n              {footer && <div className=\"folio-site-navigation-footer\">{footer}</div>}\n            </SheetContent>\n          </Sheet>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/website/SiteShell/SiteShell.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ReactNode, ReactElement, HTMLAttributes } from 'react';
+
+interface SiteShellProps {
+    children: ReactNode;
+    navigation?: ReactNode;
+    footer?: ReactNode;
+    skipLabel: string;
+    contentId?: string;
+}
+/** One main landmark, a keyboard skip link, and the publication's common shell. */
+declare function SiteShell({ children, navigation, footer, skipLabel, contentId }: SiteShellProps): react.JSX.Element;
+interface SiteFooterGroup {
+    id: string;
+    label: string;
+    items: {
+        id: string;
+        content: ReactNode;
+    }[];
+    kind?: 'links' | 'files' | 'social';
+}
+interface SiteFooterProps {
+    brand: ReactNode;
+    contact?: ReactNode;
+    description?: ReactNode;
+    groups: SiteFooterGroup[];
+    copyright: ReactNode;
+    colophon?: ReactNode;
+}
+/** A quiet footer with semantic, independently named destination groups. */
+declare function SiteFooter({ brand, contact, description, groups, copyright, colophon }: SiteFooterProps): react.JSX.Element;
+interface SiteSectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subtitle?: string;
+}
+declare function SiteSectionHeading({ title, subtitle, className, ...rest }: SiteSectionHeadingProps): react.JSX.Element;
+interface SiteLinkProps {
+    children: ReactElement;
+    variant?: 'text' | 'back' | 'meta';
+    className?: string;
+}
+/** Styling for a host router's link without owning its destination. */
+declare function SiteLink({ children, variant, className }: SiteLinkProps): react.JSX.Element;
+
+export { SiteFooter, type SiteFooterGroup, type SiteFooterProps, SiteLink, type SiteLinkProps, SiteSectionHeading, type SiteSectionHeadingProps, SiteShell, type SiteShellProps };

package/dist/website/SiteShell/SiteShell.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/cn.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { Text } from "../../components/Text/Text.js";
+function SiteShell({ children, navigation, footer, skipLabel, contentId = "main-content" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-site-shell", children: [
+    /* @__PURE__ */ jsx("a", { className: "folio-site-skip", href: `#${contentId}`, children: skipLabel }),
+    navigation,
+    /* @__PURE__ */ jsx("main", { id: contentId, children }),
+    footer
+  ] });
+}
+function SiteFooter({ brand, contact, description, groups, copyright, colophon }) {
+  return /* @__PURE__ */ jsx("footer", { className: "folio-site-footer", children: /* @__PURE__ */ jsxs("div", { className: "folio-site-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-site-footer-masthead", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-site-wordmark", children: brand }),
+      contact
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "folio-site-footer-description", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "folio-site-footer-groups", children: groups.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": group.label, "data-kind": group.kind ?? "links", children: [
+      /* @__PURE__ */ jsx("h2", { children: group.label }),
+      /* @__PURE__ */ jsx("ul", { children: group.items.map((item) => /* @__PURE__ */ jsx("li", { children: item.content }, item.id)) })
+    ] }, group.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-site-colophon", children: [
+      /* @__PURE__ */ jsx("div", { children: copyright }),
+      /* @__PURE__ */ jsx("div", { children: colophon })
+    ] })
+  ] }) });
+}
+function SiteSectionHeading({ title, subtitle, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-site-section-heading", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+    subtitle && /* @__PURE__ */ jsx(Text, { children: subtitle })
+  ] });
+}
+function SiteLink({ children, variant = "text", className }) {
+  return /* @__PURE__ */ jsx(Slot, { className: cn("folio-site-link", `folio-site-link-${variant}`, className), children });
+}
+export {
+  SiteFooter,
+  SiteLink,
+  SiteSectionHeading,
+  SiteShell
+};
+//# sourceMappingURL=SiteShell.js.map

package/dist/website/SiteShell/SiteShell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/SiteShell/SiteShell.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { HTMLAttributes, ReactElement, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Heading } from '../../components/Heading/Heading'\nimport { Text } from '../../components/Text/Text'\n\nexport interface SiteShellProps {\n  children: ReactNode\n  navigation?: ReactNode\n  footer?: ReactNode\n  skipLabel: string\n  contentId?: string\n}\n\n/** One main landmark, a keyboard skip link, and the publication's common shell. */\nexport function SiteShell({ children, navigation, footer, skipLabel, contentId = 'main-content' }: SiteShellProps) {\n  return <div className=\"folio-site-shell\"><a className=\"folio-site-skip\" href={`#${contentId}`}>{skipLabel}</a>{navigation}<main id={contentId}>{children}</main>{footer}</div>\n}\n\nexport interface SiteFooterGroup {\n  id: string\n  label: string\n  items: { id: string; content: ReactNode }[]\n  kind?: 'links' | 'files' | 'social'\n}\n\nexport interface SiteFooterProps {\n  brand: ReactNode\n  contact?: ReactNode\n  description?: ReactNode\n  groups: SiteFooterGroup[]\n  copyright: ReactNode\n  colophon?: ReactNode\n}\n\n/** A quiet footer with semantic, independently named destination groups. */\nexport function SiteFooter({ brand, contact, description, groups, copyright, colophon }: SiteFooterProps) {\n  return <footer className=\"folio-site-footer\"><div className=\"folio-site-container\"><div className=\"folio-site-footer-masthead\"><div className=\"folio-site-wordmark\">{brand}</div>{contact}</div>{description && <p className=\"folio-site-footer-description\">{description}</p>}<div className=\"folio-site-footer-groups\">{groups.map(group => <nav key={group.id} aria-label={group.label} data-kind={group.kind ?? 'links'}><h2>{group.label}</h2><ul>{group.items.map(item => <li key={item.id}>{item.content}</li>)}</ul></nav>)}</div><div className=\"folio-site-colophon\"><div>{copyright}</div><div>{colophon}</div></div></div></footer>\n}\n\nexport interface SiteSectionHeadingProps extends HTMLAttributes<HTMLDivElement> {\n  title: string\n  subtitle?: string\n}\nexport function SiteSectionHeading({ title, subtitle, className, ...rest }: SiteSectionHeadingProps) {\n  return <div className={cn('folio-site-section-heading', className)} {...rest}><Heading level={2}>{title}</Heading>{subtitle && <Text>{subtitle}</Text>}</div>\n}\n\nexport interface SiteLinkProps {\n  children: ReactElement\n  variant?: 'text' | 'back' | 'meta'\n  className?: string\n}\n/** Styling for a host router's link without owning its destination. */\nexport function SiteLink({ children, variant = 'text', className }: SiteLinkProps) {\n  return <Slot className={cn('folio-site-link', `folio-site-link-${variant}`, className)}>{children}</Slot>\n}\n"],"mappings":"AAgBS,SAAkC,KAAlC;AAhBT,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,YAAY;AAWd,SAAS,UAAU,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,eAAe,GAAmB;AACjH,SAAO,qBAAC,SAAI,WAAU,oBAAmB;AAAA,wBAAC,OAAE,WAAU,mBAAkB,MAAM,IAAI,SAAS,IAAK,qBAAU;AAAA,IAAK;AAAA,IAAW,oBAAC,UAAK,IAAI,WAAY,UAAS;AAAA,IAAQ;AAAA,KAAO;AAC1K;AAmBO,SAAS,WAAW,EAAE,OAAO,SAAS,aAAa,QAAQ,WAAW,SAAS,GAAoB;AACxG,SAAO,oBAAC,YAAO,WAAU,qBAAoB,+BAAC,SAAI,WAAU,wBAAuB;AAAA,yBAAC,SAAI,WAAU,8BAA6B;AAAA,0BAAC,SAAI,WAAU,uBAAuB,iBAAM;AAAA,MAAO;AAAA,OAAQ;AAAA,IAAO,eAAe,oBAAC,OAAE,WAAU,iCAAiC,uBAAY;AAAA,IAAK,oBAAC,SAAI,WAAU,4BAA4B,iBAAO,IAAI,WAAS,qBAAC,SAAmB,cAAY,MAAM,OAAO,aAAW,MAAM,QAAQ,SAAS;AAAA,0BAAC,QAAI,gBAAM,OAAM;AAAA,MAAK,oBAAC,QAAI,gBAAM,MAAM,IAAI,UAAQ,oBAAC,QAAkB,eAAK,WAAf,KAAK,EAAkB,CAAK,GAAE;AAAA,SAA/J,MAAM,EAA8J,CAAM,GAAE;AAAA,IAAM,qBAAC,SAAI,WAAU,uBAAsB;AAAA,0BAAC,SAAK,qBAAU;AAAA,MAAM,oBAAC,SAAK,oBAAS;AAAA,OAAM;AAAA,KAAM,GAAM;AACxmB;AAMO,SAAS,mBAAmB,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAA4B;AACnG,SAAO,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GAAI,GAAG,MAAM;AAAA,wBAAC,WAAQ,OAAO,GAAI,iBAAM;AAAA,IAAW,YAAY,oBAAC,QAAM,oBAAS;AAAA,KAAQ;AACzJ;AAQO,SAAS,SAAS,EAAE,UAAU,UAAU,QAAQ,UAAU,GAAkB;AACjF,SAAO,oBAAC,QAAK,WAAW,GAAG,mBAAmB,mBAAmB,OAAO,IAAI,SAAS,GAAI,UAAS;AACpG;","names":[]}

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

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface RecordSectionProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    count?: string;
+    headingId: string;
+    children: ReactNode;
+}
+/** A named ledger section. The host supplies its chronology without reordering. */
+declare function RecordSection({ title, count, headingId, children, className, ...rest }: RecordSectionProps): react.JSX.Element;
+interface CareerRecordProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: string;
+    organization: ReactNode;
+    period: string;
+    periodLabel: string;
+    location: string;
+    locationLabel: string;
+    description: string[];
+    tags: string[];
+    tagsLabel: string;
+    mark?: ReactNode;
+    currentLabel?: string;
+}
+/** One dated record, reusable for a role, qualification or other chronology. */
+declare function CareerRecord({ title, organization, period, periodLabel, location, locationLabel, description, tags, tagsLabel, mark, currentLabel, className, ...rest }: CareerRecordProps): react.JSX.Element;
+interface ProfileSectionProps extends HTMLAttributes<HTMLElement> {
+    headingId: string;
+    title: string;
+    description?: string;
+    children: ReactNode;
+}
+/** A profile section follows the same heading and spacing contract as its neighbors. */
+declare function ProfileSection({ headingId, title, description, children, className, ...rest }: ProfileSectionProps): react.JSX.Element;
+interface ProfileNarrativeProps {
+    headingId: string;
+    title: string;
+    pull: string;
+    paragraphs: string[];
+    action?: ReactNode;
+}
+/** A short introduction with a pull quote and a longer account alongside it. */
+declare function ProfileNarrative({ headingId, title, pull, paragraphs, action }: ProfileNarrativeProps): react.JSX.Element;
+interface ProfileSkill {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    darkIcon?: ReactNode;
+    invertInDark?: boolean;
+}
+interface ProfileSkillsProps {
+    groups: {
+        id: string;
+        title: string;
+        items: ProfileSkill[];
+    }[];
+}
+/** Skill labels and theme-aware artwork, supplied by the host's content adapter. */
+declare function ProfileSkills({ groups }: ProfileSkillsProps): react.JSX.Element;
+interface ProfileInterestsProps {
+    items: {
+        id: string;
+        title: string;
+        description: string;
+    }[];
+}
+/** A small set of interests or areas of practice. */
+declare function ProfileInterests({ items }: ProfileInterestsProps): react.JSX.Element;
+interface ProfileFigureProps {
+    children: ReactNode;
+    caption?: string;
+}
+/** Source-faithful profile photography: retain the supplied image's aspect ratio. */
+declare function ProfileFigure({ children, caption }: ProfileFigureProps): react.JSX.Element;
+/** An ordered collection frame. No sorting or business data is owned here. */
+declare function Timeline({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** 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 };