@tenphi/renderer 0.20.5 → 0.21.1

package/dist/client/search.js

@@ -8,6 +8,8 @@ function initializeSearch(element, options, development, base) {
 	const dialog = element.querySelector("dialog");
 	const frame = element.querySelector(".dialog-frame");
 	const status = element.querySelector("[data-search-status]");
+	const input = element.querySelector("[data-search-input]");
+	const clear = element.querySelector("[data-clear-search]");
 	const shortcut = open.querySelector("kbd");
 	if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
 		shortcut.querySelector("kbd").textContent = "⌘";
@@ -15,7 +17,24 @@ function initializeSearch(element, options, development, base) {
 	}
 	delete shortcut.dataset.pending;
 	let initialized;
+	let engineInput = null;
 	let returnFocus = null;
+	let closing = false;
+	let generation = 0;
+	const updateSearch = () => {
+		if (clear) clear.hidden = !input?.value;
+		if (engineInput) {
+			engineInput.value = input?.value ?? "";
+			engineInput.dispatchEvent(new Event("input", { bubbles: true }));
+		}
+	};
+	input?.addEventListener("input", updateSearch);
+	clear?.addEventListener("click", () => {
+		if (!input) return;
+		input.value = "";
+		updateSearch();
+		input.focus();
+	});
 	const initialize = () => {
 		if (development) return Promise.resolve();
 		return initialized ??= (async () => {
@@ -24,7 +43,7 @@ function initializeSearch(element, options, development, base) {
 			const format = (url) => element.hasAttribute("data-strip-trailing-slash") ? url.replace(/(.)\/(#.*)?$/, "$1$2") : url;
 			new PagefindUI({
 				...options,
-				element: "#cookbook__search",
+				element: element.querySelector("[data-search-results]"),
 				baseUrl: base,
 				bundlePath: `${base.replace(/\/$/, "")}/pagefind/`,
 				showImages: false,
@@ -39,6 +58,13 @@ function initializeSearch(element, options, development, base) {
 					return result;
 				}
 			});
+			engineInput = element.querySelector(".pagefind-ui__search-input");
+			element.querySelector(".pagefind-ui__form")?.removeAttribute("role");
+			element.querySelectorAll(".pagefind-ui__search-input, .pagefind-ui__search-clear").forEach((control) => {
+				control.hidden = true;
+				control.tabIndex = -1;
+			});
+			updateSearch();
 		})().catch((error) => {
 			initialized = void 0;
 			if (status) {
@@ -49,38 +75,53 @@ function initializeSearch(element, options, development, base) {
 			throw error;
 		});
 	};
-	const show = async () => {
-		if (dialog.open) return;
-		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : open;
-		dialog.removeAttribute("data-open");
-		dialog.showModal();
+	const show = (trigger) => {
+		if (dialog.open && !closing) return;
+		generation += 1;
+		closing = false;
+		if (!dialog.open) {
+			returnFocus = trigger ?? (document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : open);
+			dialog.removeAttribute("data-open");
+			dialog.showModal();
+		}
+		input?.focus({ preventScroll: true });
 		dialog.getBoundingClientRect();
 		dialog.setAttribute("data-open", "");
 		document.body.setAttribute("data-search-modal-open", "");
 		if (!development && status) status.hidden = true;
-		try {
-			await initialize();
-			if (dialog.open) element.querySelector("input")?.focus();
-		} catch {}
+		initialize().catch(() => {});
+	};
+	const hide = async () => {
+		if (!dialog.open || closing) return;
+		closing = true;
+		const current = ++generation;
+		dialog.removeAttribute("data-open");
+		await Promise.allSettled(dialog.getAnimations().filter((animation) => Number.isFinite(animation.effect?.getComputedTiming().endTime)).map((animation) => animation.finished));
+		if (current === generation && dialog.open) dialog.close();
 	};
 	open.addEventListener("click", () => {
-		show();
+		show(open);
 	});
 	open.disabled = false;
-	close.addEventListener("click", () => dialog.close());
+	close.addEventListener("click", () => void hide());
+	dialog.addEventListener("cancel", (event) => {
+		event.preventDefault();
+		hide();
+	});
 	dialog.addEventListener("click", (event) => {
 		if (!(event.target instanceof Element)) return;
-		if (event.target.closest("a[href]") || !frame.contains(event.target)) dialog.close();
+		if (event.target.closest("a[href]") || !frame.contains(event.target)) hide();
 	});
 	dialog.addEventListener("close", () => {
 		dialog.removeAttribute("data-open");
+		closing = false;
 		document.body.removeAttribute("data-search-modal-open");
 		returnFocus?.focus();
 	});
 	window.addEventListener("keydown", (event) => {
 		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
 			event.preventDefault();
-			if (dialog.open) dialog.close();
+			if (dialog.open && !closing) hide();
 			else show();
 		}
 	});

package/dist/client/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let returnFocus: HTMLElement | null = null;\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: \"#cookbook__search\",\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = async () => {\n    if (dialog.open) return;\n    returnFocus =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : open;\n    dialog.removeAttribute(\"data-open\");\n    dialog.showModal();\n    // Establish the initial state after entering the top layer. The global\n    // style renderer does not preserve @starting-style in server output.\n    dialog.getBoundingClientRect();\n    dialog.setAttribute(\"data-open\", \"\");\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    try {\n      await initialize();\n      // Pagefind mounts synchronously. Only focus if the user has not closed it.\n      if (dialog.open) element.querySelector(\"input\")?.focus();\n    } catch {\n      /* Keep the close control usable when the search bundle fails. */\n    }\n  };\n  open.addEventListener(\"click\", () => {\n    void show();\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => dialog.close());\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      dialog.close();\n  });\n  dialog.addEventListener(\"close\", () => {\n    dialog.removeAttribute(\"data-open\");\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open) dialog.close();\n      else void show();\n    }\n  });\n}\n"],"mappings":";;AAMA,SAAgB,iBACd,SACA,SACA,aACA,MACM;CACN,IAAI,QAAQ,QAAQ,aAAa;CACjC,QAAQ,QAAQ,cAAc;CAC9B,MAAM,OAAO,QAAQ,cAAiC,mBAAmB;CACzE,MAAM,QAAQ,QAAQ,cAAiC,oBAAoB;CAC3E,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,MAAM,QAAQ,QAAQ,cAAc,eAAe;CACnD,MAAM,SAAS,QAAQ,cAA2B,sBAAsB;CACxE,MAAM,WAAW,KAAK,cAAc,KAAK;CACzC,IAAI,0BAA0B,KAAK,UAAU,QAAQ,GAAG;EACtD,SAAS,cAAc,KAAK,CAAC,CAAE,cAAc;EAC7C,KAAK,aAAa,qBAAqB,QAAQ;CACjD;CACA,OAAO,SAAS,QAAQ;CACxB,IAAI;CACJ,IAAI,cAAkC;CACtC,MAAM,mBAAmB;EACvB,IAAI,aAAa,OAAO,QAAQ,QAAQ;EACxC,OAAQ,iBAAiB,YAAY;GAEnC,MAAM,EAAE,eAAe,MAAM,OAAO;GACpC,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;GACpE,MAAM,UAAU,QACd,QAAQ,aAAa,2BAA2B,IAC5C,IAAI,QAAQ,gBAAgB,MAAM,IAClC;GACN,IAAI,WAAW;IACb,GAAG;IACH,SAAS;IACT,SAAS;IACT,YAAY,GAAG,KAAK,QAAQ,OAAO,EAAE,EAAE;IACvC,YAAY;IACZ,gBAAgB;IAChB;IACA,cAAc,QAAsB;KAClC,SAAS,QAAQ,gBAAgB,MAAM,KAAK;KAC5C,OAAO,MAAM,OAAO,OAAO,GAAG;KAC9B,OAAO,aAAa,SAAS,UAAU;MACrC,MAAM,MAAM,OAAO,MAAM,GAAG;KAC9B,CAAC;KACD,OAAO;IACT;GACF,CAAC;EACH,EAAA,CAAG,CAAC,CAAC,OAAO,UAAmB;GAC7B,cAAc,KAAA;GACd,IAAI,QAAQ;IACV,OAAO,SAAS;IAEhB,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;IACpE,OAAO,cACL,aAAa,SAAS;GAC1B;GACA,MAAM;EACR,CAAC;CACH;CACA,MAAM,OAAO,YAAY;EACvB,IAAI,OAAO,MAAM;EACjB,cACE,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EACN,OAAO,gBAAgB,WAAW;EAClC,OAAO,UAAU;EAGjB,OAAO,sBAAsB;EAC7B,OAAO,aAAa,aAAa,EAAE;EACnC,SAAS,KAAK,aAAa,0BAA0B,EAAE;EACvD,IAAI,CAAC,eAAe,QAAQ,OAAO,SAAS;EAC5C,IAAI;GACF,MAAM,WAAW;GAEjB,IAAI,OAAO,MAAM,QAAQ,cAAc,OAAO,CAAC,EAAE,MAAM;EACzD,QAAQ,CAER;CACF;CACA,KAAK,iBAAiB,eAAe;EACnC,KAAU;CACZ,CAAC;CACD,KAAK,WAAW;CAChB,MAAM,iBAAiB,eAAe,OAAO,MAAM,CAAC;CACpD,OAAO,iBAAiB,UAAU,UAAU;EAC1C,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,IAAI,MAAM,OAAO,QAAQ,SAAS,KAAK,CAAC,MAAM,SAAS,MAAM,MAAM,GACjE,OAAO,MAAM;CACjB,CAAC;CACD,OAAO,iBAAiB,eAAe;EACrC,OAAO,gBAAgB,WAAW;EAClC,SAAS,KAAK,gBAAgB,wBAAwB;EACtD,aAAa,MAAM;CACrB,CAAC;CACD,OAAO,iBAAiB,YAAY,UAAU;EAC5C,KAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;GACvE,MAAM,eAAe;GACrB,IAAI,OAAO,MAAM,OAAO,MAAM;QACzB,KAAU;EACjB;CACF,CAAC;AACH"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const input = element.querySelector<HTMLInputElement>(\"[data-search-input]\");\n  const clear = element.querySelector<HTMLButtonElement>(\"[data-clear-search]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let engineInput: HTMLInputElement | null = null;\n  let returnFocus: HTMLElement | null = null;\n  let closing = false;\n  let generation = 0;\n  const updateSearch = () => {\n    if (clear) clear.hidden = !input?.value;\n    if (engineInput) {\n      engineInput.value = input?.value ?? \"\";\n      engineInput.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    }\n  };\n  input?.addEventListener(\"input\", updateSearch);\n  clear?.addEventListener(\"click\", () => {\n    if (!input) return;\n    input.value = \"\";\n    updateSearch();\n    input.focus();\n  });\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: element.querySelector(\"[data-search-results]\"),\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n      engineInput = element.querySelector(\".pagefind-ui__search-input\");\n      element.querySelector(\".pagefind-ui__form\")?.removeAttribute(\"role\");\n      // Cookbook owns the field so focus stays within the opening tap on mobile.\n      // Pagefind still owns query processing and its lazily rendered results.\n      element\n        .querySelectorAll<HTMLElement>(\n          \".pagefind-ui__search-input, .pagefind-ui__search-clear\",\n        )\n        .forEach((control) => {\n          control.hidden = true;\n          control.tabIndex = -1;\n        });\n      updateSearch();\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = (trigger?: HTMLElement) => {\n    if (dialog.open && !closing) return;\n    generation += 1;\n    closing = false;\n    if (!dialog.open) {\n      returnFocus =\n        trigger ??\n        (document.activeElement instanceof HTMLElement &&\n        document.activeElement !== document.body\n          ? document.activeElement\n          : open);\n      dialog.removeAttribute(\"data-open\");\n      dialog.showModal();\n    }\n    // Do this synchronously, before the lazy import releases user activation.\n    input?.focus({ preventScroll: true });\n    // Establish the initial state after entering the top layer. The global\n    // style renderer does not preserve @starting-style in server output.\n    dialog.getBoundingClientRect();\n    dialog.setAttribute(\"data-open\", \"\");\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    void initialize().catch(() => {\n      /* Keep the close control usable when the search bundle fails. */\n    });\n  };\n  const hide = async () => {\n    if (!dialog.open || closing) return;\n    closing = true;\n    const current = ++generation;\n    dialog.removeAttribute(\"data-open\");\n    // Keep the modal in the top layer until its exit transition has finished.\n    // This also works in browsers without discrete display/overlay transitions.\n    await Promise.allSettled(\n      dialog\n        .getAnimations()\n        .filter((animation) =>\n          Number.isFinite(animation.effect?.getComputedTiming().endTime),\n        )\n        .map((animation) => animation.finished),\n    );\n    if (current === generation && dialog.open) dialog.close();\n  };\n  open.addEventListener(\"click\", () => {\n    show(open);\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => void hide());\n  dialog.addEventListener(\"cancel\", (event) => {\n    event.preventDefault();\n    void hide();\n  });\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      void hide();\n  });\n  dialog.addEventListener(\"close\", () => {\n    dialog.removeAttribute(\"data-open\");\n    closing = false;\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open && !closing) void hide();\n      else void show();\n    }\n  });\n}\n"],"mappings":"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"}

package/dist/components/GlobalStyles.js

@@ -363,18 +363,18 @@ export default function GlobalStyles() {
       },
       Backdrop: {
         $: "dialog::backdrop",
-        fill: "#overlay",
-        backdropFilter: "blur(0.25rem)",
+        fill: { "": "#overlay", "@mobile": "#clear" },
+        backdropFilter: { "": "blur(0.25rem)", "@mobile": "none" },
         opacity: "0",
         transition: {
           "": "none",
-          "!@reduced-motion":
+          "!@reduced-motion & !@mobile":
             "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
         },
       },
       EnteredBackdrop: {
         $: "dialog[open][data-open]::backdrop",
-        opacity: "1",
+        opacity: { "": "1", "@mobile": "0" },
       },
       Frame: {
         $: ".dialog-frame",
@@ -1032,8 +1032,8 @@ export default function GlobalStyles() {
     ".cookbook-markdown-content code:not(:where(pre *, .not-content *))",
     resolveComponentStyles("MarkdownInlineCode", {
       padding: "0.125rem 0.375rem",
-      color: "#text",
-      fill: "#surface-2",
+      color: "#text-soft",
+      fill: "#surface-3",
       preset: "code",
       fontSize: "0.875em",
       radius: "($radius * 0.65)",
@@ -1530,7 +1530,7 @@ export default function GlobalStyles() {
       "$pagefind-ui-tag": "#surface-3",
       preset: "body",
       UI: {
-        $: ".pagefind-ui",
+        $: ".pagefind-ui, [data-search-results]",
         display: "flex",
         flow: "column",
         flexGrow: "1",
@@ -1544,6 +1544,15 @@ export default function GlobalStyles() {
         flexGrow: "1",
         minBlockSize: "0",
       },
+      Field: {
+        $: ".cookbook-search-field",
+        position: "relative",
+        flexShrink: "0",
+      },
+      EngineControls: {
+        $: ".pagefind-ui__search-input, .pagefind-ui__search-clear",
+        display: "none",
+      },
       Drawer: {
         $: ".pagefind-ui__drawer",
         display: "flex",
@@ -1552,7 +1561,7 @@ export default function GlobalStyles() {
         minBlockSize: "0",
       },
       Input: {
-        $: ".pagefind-ui__search-input",
+        $: ".cookbook-search-input",
         flexShrink: "0",
         inlineSize: "100%",
         minBlockSize: "3rem",
@@ -1566,7 +1575,7 @@ export default function GlobalStyles() {
         boxShadow: "none",
       },
       Clear: {
-        $: ".pagefind-ui__search-clear",
+        $: ".cookbook-search-clear",
         position: "absolute",
         insetBlockStart: "0",
         insetInlineEnd: "0",
@@ -1654,7 +1663,7 @@ export default function GlobalStyles() {
       },
       HoverMore: { $: ".pagefind-ui__button:hover", fill: "#surface-2-hover" },
       SearchIcon: {
-        $: ".pagefind-ui__form::before",
+        $: ".cookbook-search-field::before",
         content: '""',
         position: "absolute",
         zIndex: "1",
@@ -1668,7 +1677,7 @@ export default function GlobalStyles() {
         pointerEvents: "none",
       },
       ClearIcon: {
-        $: ".pagefind-ui__search-clear::before",
+        $: ".cookbook-search-clear::before",
         content: '""',
         display: "block",
         inlineSize: "1rem",
@@ -1677,7 +1686,7 @@ export default function GlobalStyles() {
         mask: `url("${svgIconUrl(closeIcon)}") center / 1rem no-repeat`,
       },
       SuppressedClear: {
-        $: ".pagefind-ui__search-clear.pagefind-ui__suppressed",
+        $: ".cookbook-search-clear[hidden]",
         display: "none",
       },
     }),

package/dist/components/component-styles.test.ts

@@ -1,7 +1,6 @@
 import { afterEach, describe, expect, it } from "vitest";
 import {
   configureComponentStyles,
-  resolveLegacyAnatomyStyles,
   resolveComponentStyleOverride,
   resolveComponentStyles,
   unusedCustomStyleNames,
@@ -97,19 +96,7 @@ describe("component style configuration", () => {
     });
   });
 
-  it("keeps custom anatomy styles on the compatibility bridge", () => {
-    expect(
-      resolveLegacyAnatomyStyles({
-        Footer: { color: "#text-muted" },
-        ThemeSelect: { padding: "1x" },
-        ProductBadge: { color: "#accent-text" },
-      }),
-    ).toEqual({
-      '[data-tasty-anatomy="ProductBadge"]': { color: "#accent-text" },
-    });
-  });
-
-  it("reports only custom style names without a component or anatomy match", () => {
+  it("reports only custom style names without a component style resolver", () => {
     const styles = {
       ProjectBadge: { color: "#accent-text" },
       ProjectNote: { color: "#text" },
@@ -117,13 +104,10 @@ describe("component style configuration", () => {
     };
     configureComponentStyles(styles);
     resolveComponentStyles("ProjectBadge", { color: "#text" });
+    resolveComponentStyles("ProjectNote", { color: "#text" });
 
-    expect(unusedCustomStyleNames(styles, new Set(["ProjectNote"]))).toEqual([
-      "ProjectBadg",
-    ]);
+    expect(unusedCustomStyleNames(styles)).toEqual(["ProjectBadg"]);
     configureComponentStyles(styles);
-    expect(unusedCustomStyleNames(styles, new Set())).toEqual(
-      Object.keys(styles),
-    );
+    expect(unusedCustomStyleNames(styles)).toEqual(Object.keys(styles));
   });
 });

package/dist/components/component-styles.ts

@@ -1,5 +1,4 @@
 import { mergeStyles, type Styles } from "@tenphi/tasty/core";
-import { COOKBOOK_COMPONENT_NAMES } from "@tenphi/docs";
 
 // Astro can load the integration and renderer through separate module graphs.
 // Keep their component configuration on the shared process global.
@@ -7,7 +6,6 @@ const sharedConfiguration = globalThis as typeof globalThis & {
   __tenphiCookbookComponentStyles?: Record<string, Styles | undefined>;
   __tenphiCookbookUsedComponentStyles?: Set<string>;
 };
-const cookbookComponentNames = new Set<string>(COOKBOOK_COMPONENT_NAMES);
 
 export function configureComponentStyles(
   styles: Record<string, Styles | undefined> | undefined,
@@ -29,15 +27,13 @@ export function resolveComponentStyles(
     : baseStyles;
 }
 
-/** Find custom names without a component style resolver or rendered anatomy. */
+/** Find custom names without a component style resolver match. */
 export function unusedCustomStyleNames(
   styles: Record<string, Styles> | undefined,
-  anatomyNames: ReadonlySet<string>,
 ): string[] {
   return Object.keys(styles ?? {}).filter(
     (name) =>
-      !sharedConfiguration.__tenphiCookbookUsedComponentStyles?.has(name) &&
-      !anatomyNames.has(name),
+      !sharedConfiguration.__tenphiCookbookUsedComponentStyles?.has(name),
   );
 }
 
@@ -47,19 +43,3 @@ export function resolveComponentStyleOverride(
   return sharedConfiguration.__tenphiCookbookComponentStyles?.[name] as
     Styles | undefined;
 }
-
-/** Preserve custom anatomy names from the pre-component style API. */
-export function resolveLegacyAnatomyStyles(
-  styles: Record<string, Styles | undefined> | undefined,
-): Record<string, Styles> | undefined {
-  if (!styles) return undefined;
-  const entries = Object.entries(styles)
-    .filter(
-      (entry): entry is [string, Styles] =>
-        !cookbookComponentNames.has(entry[0]) && entry[1] !== undefined,
-    )
-    .map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, value]);
-  return entries.length
-    ? (Object.fromEntries(entries) as Record<string, Styles>)
-    : undefined;
-}

package/dist/eslint-plugin.js

@@ -140,8 +140,8 @@ function createValidationConfig(theme = {}) {
 		...tasty_config_default,
 		tokens: [
 			...tasty_config_default.tokens,
-			...Object.keys(theme.tokens ?? {}).map((name) => name.startsWith("--") ? `$${name.slice(2)}` : name),
-			...Object.keys(theme.palette ?? {}).map((name) => `#${name === "textSoft" ? "text-soft" : name}`)
+			...Object.keys(theme.tokens ?? {}),
+			...Object.keys(theme.palette ?? {}).map((name) => `#${name}`)
 		],
 		units: [...tasty_config_default.units, ...Object.keys(theme.units ?? {})],
 		states: [...tasty_config_default.states, ...Object.keys(theme.states ?? {})],

package/dist/eslint-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\"@tenphi/cookbook/styling\", \"@tenphi/renderer/styling\"],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n    mergeStyles: { argument: \"all\", kind: \"styles\", partial: true },\n  },\n  tokens: [\n    \"$gap\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@mobile\",\n    \"@desktop\",\n    \"@small\",\n    \"@compact\",\n    \"@shell-mobile\",\n    \"@shell-desktop\",\n    \"@narrow-layout\",\n    \"@medium-layout\",\n    \"@reduced-motion\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}).map((name) =>\n        name.startsWith(\"--\") ? `$${name.slice(2)}` : name,\n      ),\n      ...Object.keys(theme.palette ?? {}).map(\n        (name) => `#${name === \"textSoft\" ? \"text-soft\" : name}`,\n      ),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe,CAAC,4BAA4B,0BAA0B;CACtE,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;EACtD,aAAa;GAAE,UAAU;GAAO,MAAM;GAAU,SAAS;EAAK;CAChE;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;ACzGA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,SACtC,KAAK,WAAW,IAAI,IAAI,IAAI,KAAK,MAAM,CAAC,MAAM,IAChD;GACA,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KACjC,SAAS,IAAI,SAAS,aAAa,cAAc,MACpD;EACF;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}
+{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\"@tenphi/cookbook/styling\", \"@tenphi/renderer/styling\"],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n    mergeStyles: { argument: \"all\", kind: \"styles\", partial: true },\n  },\n  tokens: [\n    \"$gap\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@mobile\",\n    \"@desktop\",\n    \"@small\",\n    \"@compact\",\n    \"@shell-mobile\",\n    \"@shell-desktop\",\n    \"@narrow-layout\",\n    \"@medium-layout\",\n    \"@reduced-motion\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}),\n      ...Object.keys(theme.palette ?? {}).map((name) => `#${name}`),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe,CAAC,4BAA4B,0BAA0B;CACtE,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;EACtD,aAAa;GAAE,UAAU;GAAO,MAAM;GAAU,SAAS;EAAK;CAChE;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;ACzGA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;GACjC,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM;EAC9D;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/plugin-contract.ts","../src/integration.ts"],"mappings":";;;;;KAEY;EAEN,WAAW,iBAAiB,QAAQ;;EAGpC,MAAM,iBAAiB;;;;UCiGZ;EACf,SAAS;EACT;EACA;;EAEA,oBAAoB;;iBAGE,SACtB,UAAS,kBACR"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/plugin-contract.ts","../src/integration.ts"],"mappings":";;;;;KAEY;EAEN,WAAW,iBAAiB,QAAQ;;EAGpC,MAAM,iBAAiB;;;;UC+FZ;EACf,SAAS;EACT;EACA;;EAEA,oBAAoB;;iBAGE,SACtB,UAAS,kBACR"}

package/dist/index.js

@@ -3,7 +3,7 @@ import { localeAlternates } from "./localization.js";
 import { DEFAULT_THEME_TOKENS, DEFAULT_TYPOGRAPHY_PRESETS, resolveThemeTokens, resolveTypographyPresets } from "./theme/defaults.js";
 import { configureCodeHighlighting, cookbookShikiConfig } from "./theme/shiki-theme.js";
 import { TASTY_UNITS, tastyTokens } from "./theme/tasty-config.js";
-import { a as resolveLegacyAnatomyStyles, n as cookbookStates, o as unusedCustomStyleNames, r as configureComponentStyles } from "./tasty-states-BDKIbfw2.js";
+import { a as unusedCustomStyleNames, n as cookbookStates, r as configureComponentStyles } from "./tasty-states-rTLFy26t.js";
 import { agentPagePath } from "./page-metadata.js";
 import { createRequire } from "node:module";
 import { cp, mkdir, readFile, readdir, rename, stat, unlink, writeFile } from "node:fs/promises";
@@ -904,9 +904,9 @@ async function createDefaultSocialImage(site, base, colors) {
 	const origin = site.url ? new URL(site.url).host : "";
 	const surface = toHex(colors.surface.light);
 	const heading = toHex(colors.heading.light);
-	const soft = toHex(colors.textSoft.light);
-	const accent = toHex(colors.accentText.light);
-	const accentSurface = toHex(colors.accentSurface.light);
+	const soft = toHex(colors["text-soft"].light);
+	const accent = toHex(colors["accent-text"].light);
+	const accentSurface = toHex(colors["accent-surface"].light);
 	const artwork = Buffer.from(`<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}">
       <rect width="${WIDTH}" height="${HEIGHT}" fill="${surface}"/>
       <rect width="14" height="${HEIGHT}" fill="${accent}"/>
@@ -1530,17 +1530,15 @@ function configuredCookbook(options) {
 			"astro:build:done": async (context) => {
 				await callInner(inner, "astro:build:done", context);
 				const output = fileURLToPath(context.dir);
-				const anatomyNames = /* @__PURE__ */ new Set();
 				for (const relativePath of await readdir(output, { recursive: true })) {
 					if (extname(relativePath) !== ".html") continue;
 					const path = join(output, relativePath);
 					const html = await readFile(path, "utf8");
-					for (const match of html.matchAll(/\bdata-tasty-anatomy="([^"]+)"/g)) anatomyNames.add(match[1]);
 					const sanitized = html.replace(/\s*<link\b(?=[^>]*rel="stylesheet")(?=[^>]*href="data:text\/css,")[^>]*>/g, "").replace(/\s*<style>\s*<\/style>/g, "").replace(/<style>astro-island,astro-slot,astro-static-slot\{display:contents\}<\/style>/g, "");
 					assertTastyOutput(sanitized, relativePath);
 					if (sanitized !== html) await writeFile(path, sanitized);
 				}
-				for (const name of unusedCustomStyleNames(options.config?.theme?.customStyles, anatomyNames)) context.logger.warn(`theme.customStyles.${name} did not match a component style resolver or rendered data-tasty-anatomy attribute. Check that its name matches defineComponent() or resolveComponentStyles().`);
+				for (const name of unusedCustomStyleNames(options.config?.theme?.customStyles)) context.logger.warn(`theme.customStyles.${name} did not match a component style resolver. Check that its name matches defineComponent() or resolveComponentStyles().`);
 				if (graph?.config.search.enabled !== false) try {
 					const { index, errors } = await pagefind.createIndex();
 					if (errors.length || !index) throw new Error(errors.join("\n") || "Pagefind did not create an index.");
@@ -1667,7 +1665,6 @@ function errorMessage(error) {
 }
 function configureTastyTheme(theme, resolved) {
 	const tokens = tastyTokens(resolved);
-	const globalStyles = resolveLegacyAnatomyStyles(theme?.customStyles);
 	globalThis.__tenphiCookbookTastyRuntime = {
 		units: {
 			...TASTY_UNITS,
@@ -1689,8 +1686,7 @@ function configureTastyTheme(theme, resolved) {
 		},
 		recipes: theme?.recipes ?? {},
 		tokens,
-		presets: resolved.presets,
-		...globalStyles ? { globalStyles } : {}
+		presets: resolved.presets
 	});
 }
 async function callInner(integrations, hook, context) {