@tenphi/renderer 0.20.4 → 0.21.0

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",
+        },
       },
     },
   }),
@@ -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",
@@ -745,7 +736,7 @@ export const HeaderLinksRoot = customizeComponent(
         shadow: "0 0.75rem 2rem #shadow",
         opacity: "0",
         scale: "1 0.96",
-        transformOrigin: "top right",
+        transformOrigin: "top",
         transition: {
           "": "none",
           "!@reduced-motion":

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/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/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/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) {