@tenphi/starlight 0.5.0 → 0.6.1

package/dist/components/TastyComponents.js

@@ -0,0 +1,156 @@
+import { tasty } from "@tenphi/tasty";
+import { customizeComponent } from "./customize-component.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export const CardRoot = customizeComponent(
+  "Card",
+  { as: "article" },
+  tasty({
+    as: "article",
+    styles: {
+      display: "grid",
+      gap: "1.5x",
+      padding: "2.5x",
+      color: "#text",
+      textDecoration: "none",
+      border: true,
+      radius: "1cr",
+      fill: "#surface-2",
+      shadow: "0 1px 2px #shadow",
+      transition: "fill 120ms ease, shadow 120ms ease, translate 120ms ease",
+
+      Heading2: {
+        $: "h2",
+        margin: "0",
+      },
+      Heading3: {
+        $: "h3",
+        margin: "0",
+      },
+      Paragraph: {
+        $: "p",
+        margin: "0",
+      },
+    },
+  }),
+);
+
+export const CardLink = tasty(CardRoot, {
+  as: "a",
+  styles: {
+    fill: {
+      "": "#surface-2",
+      ":hover": "#surface-2-hover",
+      ":active": "#surface-2-pressed",
+    },
+    shadow: {
+      "": "0 1px 2px #shadow",
+      ":hover": "0 .75x 2x #shadow",
+    },
+    translate: {
+      "": "0",
+      ":hover": "0 -1px",
+      ":active": "0",
+    },
+  },
+});
+
+const previewElements = {
+  Caption: "figcaption",
+  Stage: "div",
+  Frame: "iframe",
+  Code: "details",
+  Summary: "summary",
+  Pre: "pre",
+};
+
+export const PreviewRoot = customizeComponent(
+  "Preview",
+  { as: "figure", elements: previewElements },
+  tasty({
+    as: "figure",
+    styles: {
+      margin: "0",
+      overflow: "clip",
+      color: "#text",
+      border: true,
+      radius: "1cr",
+      fill: "#surface",
+      shadow: "0 1px 2px #shadow",
+
+      Caption: {
+        padding: "1.5x 2x",
+        preset: "small",
+        fill: "#surface-2",
+      },
+      Stage: {
+        padding: "3x",
+        fill: "#surface",
+      },
+      Frame: {
+        display: "block",
+        width: "100%",
+        height: "min 18rem",
+        border: "0",
+        fill: "#surface",
+      },
+      Code: {
+        border: "1bw top #border",
+      },
+      Summary: {
+        padding: "1.5x 2x",
+        preset: "small",
+        fill: "#surface-2",
+        cursor: "pointer",
+      },
+      Pre: {
+        margin: "0",
+        radius: "0",
+      },
+    },
+    elements: previewElements,
+  }),
+);
+
+export const StepsRoot = customizeComponent(
+  "Steps",
+  { as: "ol" },
+  tasty({
+    as: "ol",
+    styles: {
+      display: "grid",
+      gap: "2x",
+      padding: "4x left",
+      border: "1bw left #border",
+
+      Item: {
+        $: "> li",
+        padding: "1x left",
+      },
+      Marker: {
+        $: "> li::marker",
+        color: "#accent-text",
+        preset: "bold",
+      },
+    },
+  }),
+);
+
+export const TabsRoot = customizeComponent(
+  "Tabs",
+  { as: "div" },
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      flow: "row wrap",
+      gap: "1x",
+      padding: "1x",
+      border: true,
+      radius: "1cr",
+      fill: "#surface-2",
+    },
+  }),
+);

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

@@ -0,0 +1,75 @@
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  configureComponentStyles,
+  resolveLegacyAnatomyStyles,
+  resolveComponentStyleOverride,
+  resolveComponentStyles,
+} from "./component-styles.js";
+
+const defaults = {
+  color: "#text",
+  padding: "2x",
+  Label: { color: "#text-soft", fontWeight: 500 },
+};
+
+afterEach(() => configureComponentStyles(undefined));
+
+describe("component style configuration", () => {
+  it("extends defaults with a plain Tasty style object", () => {
+    configureComponentStyles({
+      Card: { padding: "3x", Label: { color: "#accent-text" } },
+    });
+
+    expect(resolveComponentStyles("Card", defaults)).toEqual({
+      color: "#text",
+      padding: "3x",
+      Label: { color: "#accent-text", fontWeight: 500 },
+    });
+  });
+
+  it("supports explicit extension and complete replacement", () => {
+    configureComponentStyles({
+      Card: { mode: "extend", styles: { radius: "1cr" } },
+    });
+    expect(resolveComponentStyles("Card", defaults)).toMatchObject({
+      color: "#text",
+      radius: "1cr",
+    });
+
+    configureComponentStyles({
+      Card: { mode: "replace", styles: { display: "grid" } },
+    });
+    expect(resolveComponentStyles("Card", defaults)).toEqual({
+      display: "grid",
+    });
+  });
+
+  it("normalizes configured component overrides for Tasty composition", () => {
+    expect(resolveComponentStyleOverride("Card")).toBeUndefined();
+
+    configureComponentStyles({ Card: { padding: "3x" } });
+    expect(resolveComponentStyleOverride("Card")).toEqual({
+      mode: "extend",
+      styles: { padding: "3x" },
+    });
+
+    configureComponentStyles({
+      Card: { mode: "replace", styles: { display: "grid" } },
+    });
+    expect(resolveComponentStyleOverride("Card")).toEqual({
+      mode: "replace",
+      styles: { display: "grid" },
+    });
+  });
+
+  it("keeps custom anatomy styles on the compatibility bridge", () => {
+    expect(
+      resolveLegacyAnatomyStyles({
+        ThemeSelect: { padding: "1x" },
+        ProductBadge: { color: "#accent-text" },
+      }),
+    ).toEqual({
+      '[data-tasty-anatomy="ProductBadge"]': { color: "#accent-text" },
+    });
+  });
+});

package/dist/components/component-styles.ts

@@ -0,0 +1,79 @@
+import { mergeStyles, type Styles } from "@tenphi/tasty/core";
+import {
+  COOKBOOK_COMPONENT_NAMES,
+  type ComponentStyleConfig,
+  type ComponentStylesConfig,
+  type CookbookComponentName,
+} from "@tenphi/docs";
+
+// Astro can load the integration and renderer through separate module graphs.
+// Keep their component configuration on the shared process global.
+const sharedConfiguration = globalThis as typeof globalThis & {
+  __tenphiCookbookComponentStyles?: ComponentStylesConfig;
+};
+const cookbookComponentNames = new Set<string>(COOKBOOK_COMPONENT_NAMES);
+
+export function configureComponentStyles(
+  styles: ComponentStylesConfig | undefined,
+): void {
+  sharedConfiguration.__tenphiCookbookComponentStyles = styles ?? {};
+}
+
+export function resolveComponentStyles(
+  name: CookbookComponentName,
+  defaults: Styles,
+): Styles {
+  const configured = sharedConfiguration.__tenphiCookbookComponentStyles?.[
+    name
+  ] as ComponentStyleConfig | undefined;
+  if (!configured) return defaults;
+  if (isModeConfig(configured)) {
+    const styles = configured.styles as Styles;
+    return configured.mode === "replace"
+      ? styles
+      : mergeStyles(defaults, styles);
+  }
+  return mergeStyles(defaults, configured as Styles);
+}
+
+export function resolveComponentStyleOverride(
+  name: CookbookComponentName,
+): { mode: "extend" | "replace"; styles: Styles } | undefined {
+  const configured = sharedConfiguration.__tenphiCookbookComponentStyles?.[
+    name
+  ] as ComponentStyleConfig | undefined;
+  if (!configured) return undefined;
+  if (isModeConfig(configured)) {
+    return { mode: configured.mode, styles: configured.styles as Styles };
+  }
+  return { mode: "extend", styles: configured as Styles };
+}
+
+/** Preserve custom anatomy names from the pre-component style API. */
+export function resolveLegacyAnatomyStyles(
+  styles: ComponentStylesConfig | undefined,
+): Record<string, Styles> | undefined {
+  if (!styles) return undefined;
+  const entries = Object.entries(styles)
+    .filter(
+      (entry): entry is [string, ComponentStyleConfig] =>
+        !cookbookComponentNames.has(entry[0]) && entry[1] !== undefined,
+    )
+    .map(([name, value]) => [
+      `[data-tasty-anatomy="${name}"]`,
+      isModeConfig(value) ? value.styles : value,
+    ]);
+  return entries.length
+    ? (Object.fromEntries(entries) as Record<string, Styles>)
+    : undefined;
+}
+
+function isModeConfig(
+  value: ComponentStyleConfig,
+): value is Extract<ComponentStyleConfig, { mode: string }> {
+  return (
+    "mode" in value &&
+    (value.mode === "extend" || value.mode === "replace") &&
+    "styles" in value
+  );
+}

package/dist/components/customize-component.js

@@ -0,0 +1,10 @@
+import { tasty } from "@tenphi/tasty";
+import { resolveComponentStyleOverride } from "./component-styles.js";
+
+export function customizeComponent(name, options, base) {
+  const override = resolveComponentStyleOverride(name);
+  if (!override) return base;
+  return override.mode === "replace"
+    ? tasty({ ...options, styles: override.styles })
+    : tasty(base, { styles: override.styles });
+}

package/dist/components/svg-icon.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { svgIconUrl } from "./svg-icon.js";
+
+describe("svgIconUrl", () => {
+  it("preserves case-sensitive SVG data when Tasty lowercases the style", () => {
+    const svg = '<svg viewBox="0 0 24 24"><path d="M1 2H3Z"/></svg>';
+    const [, payload] = svgIconUrl(svg).toLowerCase().split(",", 2);
+
+    expect(decodeURIComponent(payload ?? "")).toBe(svg);
+  });
+});

package/dist/components/svg-icon.ts

@@ -0,0 +1,11 @@
+/** Encode an SVG data URL that remains valid after Tasty lowercases styles. */
+export function svgIconUrl(svg: string): string {
+  const encoded = encodeURIComponent(svg).replace(
+    /%[0-9A-F]{2}|[A-Z]/g,
+    (token) =>
+      token.startsWith("%")
+        ? token.toLowerCase()
+        : `%${token.charCodeAt(0).toString(16)}`,
+  );
+  return `data:image/svg+xml,${encoded}`;
+}

package/dist/components/tasty-states.d.ts

@@ -0,0 +1,2 @@
+export const cookbookStates: Record<`@${string}`, string>;
+export function configureCookbookStates(): void;

package/dist/components/tasty-states.js

@@ -0,0 +1,21 @@
+import { configure } from "@tenphi/tasty";
+
+export const cookbookStates = {
+  "@mobile": "@media(w < 50rem)",
+  "@desktop": "@media(w >= 50rem)",
+  "@small": "@media(w <= 40rem)",
+  "@shell-mobile": "@media(w <= 48rem)",
+  "@shell-desktop": "@media(w > 48rem)",
+  "@narrow-layout": "@media(w < 72rem)",
+  "@medium-layout": "@media(w >= 50rem) & @media(w < 72rem)",
+  "@reduced-motion": "@media(prefers-reduced-motion: reduce)",
+};
+
+let configured = false;
+
+/** Configure aliases in the renderer's Tasty module before styles are parsed. */
+export function configureCookbookStates() {
+  if (configured) return;
+  configure({ states: cookbookStates });
+  configured = true;
+}

package/dist/components-public.d.ts

@@ -1,6 +1,7 @@
 import type { AstroComponentFactory } from "astro/runtime/server/index.js";
 
 export const Card: AstroComponentFactory;
+export const Logo: AstroComponentFactory;
 export const Preview: AstroComponentFactory;
 export const Steps: AstroComponentFactory;
 export const Tabs: AstroComponentFactory;

package/dist/components.d.ts

@@ -1,5 +1,6 @@
 import Card from "./components/Card.astro";
+import Logo from "./components/Logo.astro";
 import Preview from "./components/Preview.astro";
 import Steps from "./components/Steps.astro";
 import Tabs from "./components/Tabs.astro";
-export { Card, Preview, Steps, Tabs };
+export { Card, Logo, Preview, Steps, Tabs };

package/dist/components.js

@@ -1,5 +1,6 @@
 import Card from "./components/Card.astro";
+import Logo from "./components/Logo.astro";
 import Preview from "./components/Preview.astro";
 import Steps from "./components/Steps.astro";
 import Tabs from "./components/Tabs.astro";
-export { Card, Preview, Steps, Tabs };
+export { Card, Logo, Preview, Steps, Tabs };

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface StarlightOptions {
   title: string;
   description?: string;
   customCss?: string[];
+  disable404Route?: boolean;
   pagefind?: false | Record<string, unknown>;
   sidebar?: unknown[];
   [key: string]: unknown;
@@ -22,7 +23,6 @@ declare function tastyStarlight(config: Parameters<typeof starlight>[0]): AstroI
 //#endregion
 //#region src/theme/index.d.ts
 interface ResolvedDocsTheme {
-  css: string;
   colors: {
     surface: Record<string, string>;
     surface2: Record<string, string>;
@@ -33,6 +33,7 @@ interface ResolvedDocsTheme {
     accentSurface: Record<string, string>;
     accentSurfaceText: Record<string, string>;
     focus: Record<string, string>;
+    shadow: Record<string, string>;
   };
   tokens: ThemeTokens;
   presets: Record<string, TypographyPreset>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCqB7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAsZa,eACd,QAAQ,kBAAkB,gBACzB;;;UC7ac;EACf;EACA;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;;EAET,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCpC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCmC7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBA4aa,eACd,QAAQ,kBAAkB,gBACzB;;;UCldc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;EAEV,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCpC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}