@tenphi/renderer 0.20.3 → 0.20.5

package/dist/components/LayoutComponents.js

@@ -1,5 +1,6 @@
 import { tasty } from "@tenphi/tasty";
 import { customizeComponent } from "./customize-component.js";
+import { selectPopoverStyles } from "./select-popover-styles.js";
 import { configureCookbookStates } from "./tasty-states.js";
 
 configureCookbookStates();
@@ -117,56 +118,37 @@ export const PackageVersionRoot = customizeComponent(
   }),
 );
 
+const versionSelectStyles = selectPopoverStyles({
+  option: "Link",
+  hoverOption: "HoverLink",
+  currentOption: "CurrentLink",
+});
+
 export const VersionSwitcherRoot = customizeComponent(
   "VersionSwitcher",
   tasty({
-    as: "details",
+    as: "div",
     styles: {
+      ...versionSelectStyles,
       display: "inline-flex",
-      position: "relative",
       flexShrink: "0",
-      color: "#text-soft",
       Trigger: {
-        $: "> summary",
-        display: "flex",
-        alignItems: "center",
+        ...versionSelectStyles.Trigger,
         blockSize: "min $control-height",
         inlinePadding: "$gap",
         fill: "#surface-2",
         border: true,
-        radius: "$header-control-radius",
         preset: "small / strong",
-        cursor: "pointer",
-        whiteSpace: "nowrap",
+        anchorName: "--version-trigger",
       },
       Panel: {
-        $: "> nav",
-        position: "absolute",
-        inset: { "": "100% auto auto 0", "@mobile": "100% 0 auto auto" },
-        zIndex: "10",
-        inlineSize: "min 8rem",
-        padding: "($gap * 0.5)",
-        fill: "#surface",
-        border: true,
-        radius: "$radius",
-        shadow: "0 0.75rem 2rem #shadow",
-      },
-      OpenPanel: {
-        $: "&[open] > nav",
-        display: "grid",
-      },
-      Link: {
-        $: "> nav > a",
-        display: "block",
-        padding: "($gap * 0.5) $gap",
-        color: "#text-soft",
-        preset: "small",
-        textDecoration: "none",
-      },
-      CurrentLink: {
-        $: '> nav > a[aria-current="page"]',
-        color: "#accent-text",
-        preset: "small / strong",
+        ...versionSelectStyles.Panel,
+        positionAnchor: "--version-trigger",
+        blockInset: "(anchor(bottom) + $gap) start, auto end",
+        inlineInset: {
+          "": "anchor(left) start, auto end",
+          "@mobile": "auto start, anchor(right) end",
+        },
       },
     },
   }),
@@ -182,7 +164,7 @@ export const TopNavigationRoot = customizeComponent(
       alignItems: "stretch",
       gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
       inlineSize: "100%",
-      blockSize: "min 2.5rem",
+      blockSize: "min 2.75rem",
       blockBorder: "1bw solid #border start",
       overflowX: "auto",
       scrollbar: "none",
@@ -196,7 +178,7 @@ export const TopNavigationRoot = customizeComponent(
         flexGrow: "0",
         flexShrink: "0",
         flexBasis: "auto",
-        blockPadding: "($gap * 0.75) start, $gap end",
+        blockPadding: "($gap * 1.25) start, $gap end",
         color: "#text-soft",
         preset: "navigation",
         textDecoration: "none",
@@ -320,6 +302,15 @@ export const HeaderRoot = customizeComponent(
         inlineSize: "$docs-menu-button-size",
         blockSize: "$docs-menu-button-size",
       },
+      MobileLanguage: {
+        $: ".td-header__mobile-language",
+        display: "grid",
+        hide: { "": true, "@mobile": false },
+        flexShrink: "0",
+        order: "1",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+      },
     },
   }),
 );
@@ -394,9 +385,9 @@ export const ThemeSelectRoot = customizeComponent(
         },
       },
       OpenPanel: {
-        $: "[popover]:popover-open",
-        opacity: { "": "1", "@starting": "0" },
-        scale: { "": "1", "@starting": "1 0.96" },
+        $: "[popover]:popover-open[data-open]",
+        opacity: "1",
+        scale: "1",
       },
       Section: {
         $: "fieldset",
@@ -674,6 +665,7 @@ export const HeaderLinksRoot = customizeComponent(
       display: "flex",
       flexShrink: "0",
       order: { "": "0", "@mobile": "2" },
+      "$popover-transition": "120ms",
       Desktop: {
         $: ".td-header-links__desktop",
         display: "flex",
@@ -742,6 +734,19 @@ export const HeaderLinksRoot = customizeComponent(
         border: true,
         radius: "$card-radius",
         shadow: "0 0.75rem 2rem #shadow",
+        opacity: "0",
+        scale: "1 0.96",
+        transformOrigin: "top",
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+        },
+      },
+      OpenPanel: {
+        $: ".td-header-links__panel:popover-open[data-open]",
+        opacity: "1",
+        scale: "1",
       },
       PanelNavigation: {
         $: ".td-header-links__panel nav",

package/dist/components/Preview.astro

@@ -14,7 +14,7 @@ const ui = messages(
 ---
 
 <PreviewRoot
-  className="td-preview"
+  className="td-preview not-content"
   aria-label={title}
   data-tasty-anatomy="Preview"
 >

package/dist/components/SelectPopover.astro

@@ -0,0 +1,64 @@
+---
+import Icon from "./Icon.astro";
+
+interface Option {
+  href: string;
+  label: string;
+  lang?: string;
+  hint?: string;
+  current?: boolean;
+}
+
+interface Props {
+  triggerLabel: string;
+  selectedLabel: string;
+  title: string;
+  options: Option[];
+  icon?: string;
+}
+
+const { triggerLabel, selectedLabel, title, options, icon } = Astro.props;
+const id = `select-${crypto.randomUUID()}`;
+---
+
+<button
+  type="button"
+  popovertarget={id}
+  aria-label={triggerLabel}
+  title={title}
+>
+  {icon && <Icon name={icon} class="label-icon" />}
+  <span class="trigger-label">{selectedLabel}</span>
+  <Icon name="down-caret" class="caret" />
+</button>
+<div
+  id={id}
+  popover="auto"
+  role="group"
+  aria-label={title}
+  data-select-popover-panel
+>
+  <div class="panel-title">{title}</div>
+  <nav aria-label={title}>
+    {
+      options.map((option) => (
+        <a
+          href={option.href}
+          aria-current={option.current ? "page" : undefined}
+        >
+          <span lang={option.lang}>{option.label}</span>
+          {option.hint && <span class="fallback-label">({option.hint})</span>}
+          <Icon name="approve-check" class="checkmark" />
+        </a>
+      ))
+    }
+  </nav>
+</div>
+
+<script>
+  import { initializePopoverMotion } from "../client/popover-motion.js";
+
+  document
+    .querySelectorAll<HTMLElement>("[data-select-popover-panel]")
+    .forEach((panel) => initializePopoverMotion(panel));
+</script>

package/dist/components/TastyComponents.js

@@ -84,13 +84,13 @@ export const PreviewRoot = customizeComponent(
         fill: "#surface-2",
       },
       Stage: {
-        padding: "3x",
+        padding: "2x",
         fill: "#surface",
       },
       Frame: {
         display: "block",
         width: "100%",
-        height: "min 18rem",
+        height: "min 10rem",
         border: "0",
         fill: "#surface",
       },
@@ -102,9 +102,23 @@ export const PreviewRoot = customizeComponent(
         preset: "small",
         fill: "#surface-2",
         cursor: "pointer",
+        transition: "fill $transition",
+      },
+      HoverSummary: {
+        $: "> details > summary:hover",
+        fill: "#surface-2-hover",
+      },
+      ActiveSummary: {
+        $: "> details > summary:active",
+        fill: "#surface-2-pressed",
       },
       Pre: {
         margin: "0",
+        padding: "2x",
+        overflowX: "auto",
+        color: "#syntax-text",
+        fill: "#syntax-bg",
+        preset: "code",
         radius: "0",
       },
     },

package/dist/components/VersionSwitcher.astro

@@ -4,6 +4,7 @@ import { content } from "virtual:cookbook/config";
 import type { DocsRoute, SiteVersion } from "@tenphi/docs";
 import { versionLinks } from "../versioning.js";
 import { VersionSwitcherRoot } from "./LayoutComponents.js";
+import SelectPopover from "./SelectPopover.astro";
 
 interface Props {
   versions: SiteVersion[];
@@ -23,22 +24,14 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
 <VersionSwitcherRoot data-tasty-anatomy="VersionSwitcher">
-  <summary
-    aria-label={`${ui.documentationVersion}: ${current?.label ?? ui.versions}`}
-    >{current?.label ?? ui.versions}</summary
-  >
-  <nav aria-label={ui.documentationVersions}>
-    {
-      links.map((version) => (
-        <a
-          href={version.href}
-          aria-current={
-            version.routeBase === current?.routeBase ? "page" : undefined
-          }
-        >
-          {version.label}
-        </a>
-      ))
-    }
-  </nav>
+  <SelectPopover
+    triggerLabel={`${ui.documentationVersion}: ${current?.label ?? ui.versions}`}
+    selectedLabel={current?.label ?? ui.versions}
+    title={ui.documentationVersions}
+    options={links.map((version) => ({
+      href: version.href,
+      label: version.label,
+      current: version.routeBase === current?.routeBase,
+    }))}
+  />
 </VersionSwitcherRoot>

package/dist/components/select-popover-styles.js

@@ -0,0 +1,107 @@
+/** Shared server-side styles for the language and version selectors. */
+export function selectPopoverStyles({
+  option = "Option",
+  hoverOption = "HoverOption",
+  currentOption = "CurrentOption",
+} = {}) {
+  return {
+    "$popover-transition": "120ms",
+    Trigger: {
+      $: "> button",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "($gap * 0.5)",
+      color: "#text-soft",
+      radius: "$header-control-radius",
+      preset: "small",
+      cursor: "pointer",
+    },
+    HoverTrigger: {
+      $: "> button:hover, &:has([popover]:popover-open) > button",
+      color: "#text",
+      fill: "#surface-2-hover",
+    },
+    TriggerLabel: {
+      $: ".trigger-label",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    Caret: {
+      $: "> button > .caret",
+      flexShrink: "0",
+      inlineSize: "0.875rem",
+      blockSize: "0.875rem",
+    },
+    Panel: {
+      $: "> [popover]",
+      position: "fixed",
+      inset: "auto",
+      inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - $docs-nav-height - $gap)",
+      overflowY: "auto",
+      margin: "0",
+      padding: "$gap",
+      color: "#text",
+      fill: "#surface-2",
+      border: true,
+      radius: "$card-radius",
+      shadow: "0 0.75rem 2rem #shadow",
+      opacity: "0",
+      scale: "1 0.96",
+      transformOrigin: "top",
+      transition: {
+        "": "none",
+        "!@reduced-motion":
+          "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+      },
+    },
+    OpenPanel: {
+      $: "> [popover]:popover-open[data-open]",
+      opacity: "1",
+      scale: "1",
+    },
+    PanelTitle: {
+      $: ".panel-title",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-muted",
+      preset: "small / strong",
+    },
+    Options: { $: "nav", display: "grid", gap: "($gap * 0.25)" },
+    [option]: {
+      $: "nav a",
+      display: "flex",
+      alignItems: "center",
+      gap: "$gap",
+      minBlockSize: "2.25rem",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-soft",
+      preset: "small",
+      textDecoration: "none",
+      radius: "$radius",
+    },
+    [hoverOption]: {
+      $: "nav a:hover",
+      color: "#text",
+      fill: "#surface-2-hover",
+    },
+    [currentOption]: {
+      $: 'nav a[aria-current="page"]',
+      color: "#accent-text",
+      fill: "#accent-surface-2-subtle",
+    },
+    Checkmark: {
+      $: "nav a > .checkmark",
+      flexShrink: "0",
+      inlineMargin: "auto start",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      visibility: "hidden",
+    },
+    SelectedCheckmark: {
+      $: 'nav a[aria-current="page"] > .checkmark',
+      visibility: "visible",
+    },
+  };
+}

package/dist/index.js

@@ -175,6 +175,17 @@ function assertTastyOutput(html, path) {
 	visit(tree);
 }
 //#endregion
+//#region src/pagefind-adapter.ts
+/** Pagefind's text clear button measures itself and writes inline padding.
+* Cookbook renders an icon and owns the reserved space in SearchResults.Input.
+* Fail on an upstream change so a dependency upgrade cannot silently restore it.
+*/
+function adaptPagefindUI(source) {
+	const assignment = /input_el\.style\.paddingRight = `\$\{width \+ 2\}px`/g;
+	if ([...source.matchAll(assignment)].length !== 1) throw new Error("Pagefind's UI sizing changed. Update Cookbook's Tasty adapter before upgrading @pagefind/default-ui.");
+	return source.replace(assignment, "undefined");
+}
+//#endregion
 //#region src/markdown/rehype-mermaid.ts
 const sourceStyleDirective = /^\s*(?:classDef|style|linkStyle)\s+.*$/gim;
 const accessibilityDirective = /^\s*acc(?:Title|Descr):\s*.*$/gim;
@@ -1263,12 +1274,21 @@ function configuredCookbook(options) {
 						shikiConfig: cookbookShikiConfig(context.config.markdown.shikiConfig)
 					},
 					vite: {
+						optimizeDeps: { exclude: ["@pagefind/default-ui"] },
 						ssr: { external: [
 							"@tenphi/docs",
 							"react",
 							"react-dom"
 						] },
 						plugins: [
+							{
+								name: "cookbook-pagefind-ui",
+								enforce: "pre",
+								transform(source, id) {
+									const modulePath = id.replaceAll("\\", "/").replace(/\?.*$/, "");
+									if (modulePath.includes("/@pagefind/default-ui/npm_dist/") && /\/ui-core\.(?:mjs|cjs)$/.test(modulePath)) return adaptPagefindUI(source);
+								}
+							},
 							{
 								name: "cookbook-server-only-styling",
 								enforce: "pre",