@treeui/mcp 0.7.0 → 0.8.1

package/dist/index.d.cts

@@ -106,6 +106,13 @@ interface TreeuiTokenEntry {
     description?: string;
     /** Per-theme values for tokens that change with `[data-tree-theme]`. */
     themeValues?: Record<string, string>;
+    /**
+     * True for interaction states the library computes from the semantic layer
+     * (hover, press, selected, disabled). They are real, emitted variables an
+     * agent may read, but a product must not theme against them — and they rank
+     * below the semantic tokens in search so they cannot bury the answer.
+     */
+    derived?: boolean;
 }
 interface TreeuiCatalog {
     generatedAt: string;

package/dist/index.d.ts

@@ -106,6 +106,13 @@ interface TreeuiTokenEntry {
     description?: string;
     /** Per-theme values for tokens that change with `[data-tree-theme]`. */
     themeValues?: Record<string, string>;
+    /**
+     * True for interaction states the library computes from the semantic layer
+     * (hover, press, selected, disabled). They are real, emitted variables an
+     * agent may read, but a product must not theme against them — and they rank
+     * below the semantic tokens in search so they cannot bury the answer.
+     */
+    derived?: boolean;
 }
 interface TreeuiCatalog {
     generatedAt: string;

package/dist/index.js

@@ -11,14 +11,175 @@ import {
   searchComponents,
   searchRecipes,
   searchTokens
-} from "./chunk-2Y7LP7ZZ.js";
+} from "./chunk-DGIMKZPZ.js";
 
 // src/catalog-source.ts
 import fs from "fs";
 import path from "path";
 import { parseAllDocuments } from "yaml";
 
+// ../tokens/src/primitives.ts
+var treePrimitives = {
+  white: "#ffffff",
+  black: "#000000",
+  /**
+   * Neutral ramp. Carries both themes: 0-300 are light-mode surfaces and
+   * borders, 700-950 are dark-mode surfaces, and the 400-600 middle is where
+   * borders and muted text land in whichever theme needs that luminance.
+   */
+  gray: {
+    0: "#ffffff",
+    50: "#f6f8fa",
+    100: "#eff2f5",
+    200: "#d0d7de",
+    300: "#afb8c1",
+    /** Clears 3:1 on every light surface, including the subtle one — control edges. */
+    400: "#858c93",
+    /** Its dark-mode counterpart, 3:1 on every dark surface. */
+    500: "#737c88",
+    600: "#59636e",
+    650: "#576270",
+    700: "#444c56",
+    800: "#2d333b",
+    850: "#22272e",
+    900: "#1c2128",
+    950: "#0d1117",
+    /** Ink. Not gray-1000: it carries a blue cast, which is why it is named. */
+    ink: "#1f2328",
+    /** Muted ink for dark surfaces. */
+    inkDark: "#adbac7",
+    inkDarkMuted: "#95a3b2"
+  },
+  blue: {
+    50: "#ddf4ff",
+    300: "#6cb6ff",
+    400: "#559cf5",
+    450: "#6cabf7",
+    500: "#0969da",
+    600: "#0550ae",
+    800: "#1a3453",
+    900: "#0a1a2f"
+  },
+  /**
+   * Secondary accent ramp. Seeded from `#8957e5` and stepped until the mid tone
+   * reads as text on its own tint in both themes — see `DECISIONS.md`.
+   */
+  purple: {
+    50: "#efeaf9",
+    300: "#ba9df0",
+    400: "#ad8bed",
+    500: "#794dcb",
+    600: "#633fa6",
+    800: "#332e4a"
+  },
+  /**
+   * The status hues carry the narrowest margin in the palette, because the band
+   * they have to clear is `bg.subtle` — the secondary surface a status line
+   * usually lands on (inside a card, under a field), not the primary one they
+   * are easy to calibrate against. Each of these three was a step away from the
+   * floor and is now a step above it; `status.test.ts` holds the headroom, and
+   * the contract validator holds the floor.
+   */
+  green: {
+    400: "#5bae5e",
+    500: "#197d36"
+  },
+  amber: {
+    400: "#c99227",
+    500: "#946300"
+  },
+  red: {
+    400: "#f5766e",
+    500: "#d1242f"
+  },
+  /**
+   * Categorical data-viz hues. Deliberately not a ramp — these are eight
+   * distinct hues chosen for separation under the three common CVD types, each
+   * held at >= 3:1 against its own theme's surface so a mark is visible without
+   * relying on the legend. Assign in order.
+   */
+  dataviz: {
+    light: {
+      1: "#2a78d6",
+      // 2, 3 and 7 were #1baf7a / #eda100 / #e87ba4, measuring 2.82, 2.17 and
+      // 2.69 against the light surface — a mark you cannot see is not a
+      // category. Darkened along the same hue until each clears 3:1.
+      2: "#12855c",
+      3: "#8a6100",
+      4: "#008300",
+      5: "#4a3aa7",
+      6: "#e34948",
+      7: "#c4587f",
+      8: "#eb6834"
+    },
+    dark: {
+      1: "#3987e5",
+      2: "#199e70",
+      3: "#c98500",
+      4: "#008300",
+      5: "#9085e9",
+      6: "#e66767",
+      7: "#d55181",
+      8: "#d95926"
+    }
+  }
+};
+var treeAlpha = {
+  /** Modal and drawer scrim. */
+  overlay: { light: 0.5, dark: 0.6 },
+  /** Focus ring, over the brand colour. */
+  focusRing: 0.32
+};
+
+// ../tokens/src/color.ts
+var clampChannel = (value) => Math.min(255, Math.max(0, Math.round(value)));
+var expandShortHex = (hex) => hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex;
+var parseHex = (value) => {
+  const hex = expandShortHex(value.trim());
+  const match = /^#([0-9a-fA-F]{6})$/.exec(hex);
+  if (!match) {
+    throw new Error(`Invalid hex color: "${value}"`);
+  }
+  const int = Number.parseInt(match[1], 16);
+  return {
+    r: int >> 16 & 255,
+    g: int >> 8 & 255,
+    b: int & 255
+  };
+};
+var formatHex = ({ r, g, b }) => {
+  const toPart = (channel) => clampChannel(channel).toString(16).padStart(2, "0");
+  return `#${toPart(r)}${toPart(g)}${toPart(b)}`;
+};
+var mixColors = (a, b, weight) => {
+  const t = Math.min(1, Math.max(0, weight));
+  return {
+    r: a.r + (b.r - a.r) * t,
+    g: a.g + (b.g - a.g) * t,
+    b: a.b + (b.b - a.b) * t
+  };
+};
+var BLACK = { r: 0, g: 0, b: 0 };
+var WHITE = { r: 255, g: 255, b: 255 };
+var darken = (color, amount) => mixColors(color, BLACK, amount);
+var lighten = (color, amount) => mixColors(color, WHITE, amount);
+var channelLuminance = (value) => {
+  const channel = value / 255;
+  return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+};
+var relativeLuminance = ({ r, g, b }) => 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);
+var contrastRatio = (a, b) => {
+  const luminanceA = relativeLuminance(a);
+  const luminanceB = relativeLuminance(b);
+  const lighter = Math.max(luminanceA, luminanceB);
+  const darker = Math.min(luminanceA, luminanceB);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+var bestContrast = (color, candidates) => contrastRatio(color, candidates[0]) >= contrastRatio(color, candidates[1]) ? candidates[0] : candidates[1];
+var withAlpha = ({ r, g, b }, alpha2) => `rgba(${clampChannel(r)}, ${clampChannel(g)}, ${clampChannel(b)}, ${alpha2})`;
+
 // ../tokens/src/tokens.ts
+var alpha = (color, amount) => withAlpha(parseHex(color), amount);
 var treeTokens = {
   font: {
     family: {
@@ -32,7 +193,11 @@ var treeTokens = {
       base: "0.9375rem",
       lg: "1.125rem",
       xl: "1.375rem",
-      "2xl": "1.375rem",
+      // `2xl` used to repeat `xl` verbatim, which made every
+      // `clamp(xl … 2xl)` a constant and left a hole between 1.375 and 1.75rem.
+      // It now fills that hole; `xl` is unchanged, since it is the more used of
+      // the two. `tokens.test.ts` keeps the scale strictly increasing.
+      "2xl": "1.5rem",
       "3xl": "1.75rem",
       "4xl": "2.25rem",
       "5xl": "3rem"
@@ -52,6 +217,11 @@ var treeTokens = {
       base: "1.5",
       body: "1.6",
       relaxed: "1.65"
+    },
+    tracking: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.08em"
     }
   },
   space: {
@@ -72,10 +242,23 @@ var treeTokens = {
     lg: "0.875rem",
     pill: "999px"
   },
+  // Elevation. The geometry is theme-independent and lives here; the *colour*
+  // comes from `--tree-color-shadow-rgb`, which the theme sets — a slate shadow
+  // was being emitted on `:root` and reused verbatim on the dark surface, where
+  // a near-black umbra is what actually reads.
   shadow: {
-    xs: "0 1px 2px rgba(15, 23, 42, 0.06)",
-    sm: "0 6px 18px rgba(15, 23, 42, 0.08)",
-    md: "0 14px 34px rgba(15, 23, 42, 0.12)"
+    xs: "0 1px 2px rgba(var(--tree-color-shadow-rgb), 0.06)",
+    sm: "0 6px 18px rgba(var(--tree-color-shadow-rgb), 0.08)",
+    md: "0 14px 34px rgba(var(--tree-color-shadow-rgb), 0.12)",
+    // Marketing-scale elevation: a large, soft lift for a hero card or a banded
+    // section, where `md` reads flat. Same neutral shadow colour as the smaller
+    // steps, so the whole scale stays one family.
+    lg: "0 24px 48px -24px rgba(var(--tree-color-shadow-rgb), 0.22)",
+    xl: "0 40px 80px -32px rgba(var(--tree-color-shadow-rgb), 0.28)",
+    // Elevation tinted by whatever accent is in scope (see `--tree-color-accent-*`
+    // and the `accent` prop on TSection/THero/TPageSurface), so a surface's glow
+    // follows its accent instead of being written by hand per landing page.
+    accent: "0 24px 48px -32px color-mix(in srgb, var(--tree-color-accent-primary) 60%, transparent)"
   },
   // Brand gradient for high-emphasis surfaces (e.g. the primary CTA).
   // References the theme brand vars so it follows light/dark automatically;
@@ -89,6 +272,15 @@ var treeTokens = {
       strong: "1.5px"
     }
   },
+  /**
+   * Opacity for the parts of a disabled control that carry no text — an icon,
+   * a thumbnail, a toolbar. Anywhere a label sits on a surface, disabled is a
+   * colour instead (`--tree-color-state-disabled-*`), because opacity cannot be
+   * measured for contrast. This replaces eight different hand-picked values.
+   */
+  opacity: {
+    disabled: "0.5"
+  },
   motion: {
     duration: {
       fast: "100ms",
@@ -153,95 +345,233 @@ var treeThemes = {
   light: {
     color: {
       bg: {
-        primary: "#f6f8fa",
-        surface: "#ffffff",
-        subtle: "#eff2f5"
+        primary: treePrimitives.gray[50],
+        surface: treePrimitives.gray[0],
+        subtle: treePrimitives.gray[100]
       },
       border: {
-        default: "#d0d7de",
-        strong: "#afb8c1"
+        default: treePrimitives.gray[200],
+        strong: treePrimitives.gray[300]
+        // `border.interactive` is deliberately absent: WCAG 1.4.11 asks for 3:1
+        // on the boundary that *identifies* a control, and `default` measures
+        // 1.45:1 here — fine for a card edge, not fine for the only thing
+        // telling a user where an input is. The library derives a passing value
+        // from `strong` (see states.ts); a product may set one, and it is
+        // validated the same way.
       },
       text: {
-        primary: "#1f2328",
-        muted: "#59636e",
-        inverse: "#ffffff"
+        primary: treePrimitives.gray.ink,
+        muted: treePrimitives.gray[600],
+        inverse: treePrimitives.gray[0]
       },
+      /** Umbra as an `r, g, b` triple so the elevation scale can vary alpha. */
+      "shadow-rgb": "15, 23, 42",
       brand: {
-        primary: "#0969da",
-        hover: "#0550ae",
-        soft: "#ddf4ff",
-        contrast: "#ffffff"
+        primary: treePrimitives.blue[500],
+        hover: treePrimitives.blue[600],
+        soft: treePrimitives.blue[50],
+        contrast: treePrimitives.gray[0]
+      },
+      // Secondary brand accent — a closed axis, never a free colour. It is what
+      // `TTag tone="accent"` paints with, and the default value of the surface
+      // `accent` axis (TSection/THero/TPageSurface), which remaps these four
+      // variables when a product wants a status hue instead. Derived with
+      // `deriveBrandRamp` from #8957e5 so the accent stays legible as text on
+      // its own soft tint (measured 4.77:1) and on every background.
+      accent: {
+        primary: treePrimitives.purple[500],
+        hover: treePrimitives.purple[600],
+        soft: treePrimitives.purple[50],
+        contrast: treePrimitives.gray[0]
       },
       status: {
-        success: "#1a7f37",
-        warning: "#9a6700",
-        error: "#d1242f",
-        info: "#0969da"
+        success: treePrimitives.green[500],
+        warning: treePrimitives.amber[500],
+        error: treePrimitives.red[500],
+        info: treePrimitives.blue[500]
       },
       // Categorical data-viz palette. Fixed hue order (blue → orange), validated
       // for CVD separation and contrast against the light surface. Assign in order;
       // the components cycle after 8 as a fallback, but prefer folding a 9th+
       // category into "Other".
-      chart: {
-        1: "#2a78d6",
-        2: "#1baf7a",
-        3: "#eda100",
-        4: "#008300",
-        5: "#4a3aa7",
-        6: "#e34948",
-        7: "#e87ba4",
-        8: "#eb6834"
-      },
-      overlay: "rgba(31, 35, 40, 0.5)",
-      "focus-ring": "rgba(9, 105, 218, 0.32)"
+      chart: treePrimitives.dataviz.light,
+      overlay: alpha(treePrimitives.gray.ink, treeAlpha.overlay.light),
+      "focus-ring": alpha(treePrimitives.blue[500], treeAlpha.focusRing)
     }
   },
   dark: {
     color: {
       bg: {
-        primary: "#1c2128",
-        surface: "#22272e",
-        subtle: "#2d333b"
+        primary: treePrimitives.gray[900],
+        surface: treePrimitives.gray[850],
+        subtle: treePrimitives.gray[800]
       },
       border: {
-        default: "#444c56",
-        strong: "#576270"
+        default: treePrimitives.gray[700],
+        strong: treePrimitives.gray[650]
       },
       text: {
-        primary: "#adbac7",
-        muted: "#95a3b2",
-        inverse: "#1c2128"
+        primary: treePrimitives.gray.inkDark,
+        muted: treePrimitives.gray.inkDarkMuted,
+        inverse: treePrimitives.gray[900]
       },
+      /** Near-black umbra: a slate shadow is invisible on a dark surface. */
+      "shadow-rgb": "0, 0, 0",
       brand: {
-        primary: "#539bf5",
-        hover: "#6cabf7",
-        soft: "#1a3453",
-        contrast: "#0a1a2f"
+        primary: treePrimitives.blue[400],
+        hover: treePrimitives.blue[450],
+        soft: treePrimitives.blue[800],
+        contrast: treePrimitives.blue[900]
+      },
+      // Dark pair of the secondary accent (same #8957e5 seed, stepped for the
+      // dark surface). Measured 5.93:1 on bg-primary, 4.67:1 on bg-subtle and
+      // 4.72:1 on its own soft tint — AA on every background, and above what
+      // the dark brand pair itself clears. `accent.test.ts` holds that bar.
+      accent: {
+        primary: treePrimitives.purple[400],
+        hover: treePrimitives.purple[300],
+        soft: treePrimitives.purple[800],
+        contrast: treePrimitives.gray[900]
       },
       status: {
-        success: "#57ab5a",
-        warning: "#c69026",
-        error: "#f47067",
-        info: "#6cb6ff"
+        success: treePrimitives.green[400],
+        warning: treePrimitives.amber[400],
+        error: treePrimitives.red[400],
+        info: treePrimitives.blue[300]
       },
       // Same hue order stepped for the dark surface (not a separate palette) —
       // each step re-validated for the dark band and >= 3:1 on the dark surface.
-      chart: {
-        1: "#3987e5",
-        2: "#199e70",
-        3: "#c98500",
-        4: "#008300",
-        5: "#9085e9",
-        6: "#e66767",
-        7: "#d55181",
-        8: "#d95926"
-      },
-      overlay: "rgba(13, 17, 23, 0.6)",
-      "focus-ring": "rgba(83, 155, 245, 0.32)"
+      chart: treePrimitives.dataviz.dark,
+      overlay: alpha(treePrimitives.gray[950], treeAlpha.overlay.dark),
+      "focus-ring": alpha(treePrimitives.blue[400], treeAlpha.focusRing)
     }
   }
 };
 
+// ../tokens/src/states.ts
+var AA_UI = 3;
+var AA_TEXT = 4.5;
+var WHITE2 = { r: 255, g: 255, b: 255 };
+var BLACK2 = { r: 0, g: 0, b: 0 };
+var STEP = {
+  hover: 0.18,
+  press: 0.32,
+  /** Tint states move toward the solid colour instead of toward black/white. */
+  softHover: 0.14,
+  softPress: 0.26,
+  /** Neutral row/menu surfaces, as a fraction of the ink mixed into the surface. */
+  neutralHover: 0.06,
+  neutralPress: 0.12
+};
+var DEGENERATE = 1.12;
+var step = (color, amount, mode) => {
+  const preferred = mode === "light" ? darken(color, amount) : lighten(color, amount);
+  if (contrastRatio(preferred, color) >= DEGENERATE) return preferred;
+  const flipped = mode === "light" ? lighten(color, amount) : darken(color, amount);
+  return contrastRatio(flipped, color) > contrastRatio(preferred, color) ? flipped : preferred;
+};
+var fadeToward = (from, to, against, minRatio) => {
+  let best = from;
+  for (let amount = 0.05; amount <= 0.9; amount += 0.05) {
+    const candidate = mixColors(from, to, amount);
+    if (contrastRatio(candidate, against) < minRatio) break;
+    best = candidate;
+  }
+  return best;
+};
+var quantize = (color) => parseHex(formatHex(color));
+var untilLegible = (color, against, minRatio) => {
+  if (contrastRatio(color, against) >= minRatio) return color;
+  const goLighter = relativeLuminance(color) >= relativeLuminance(against);
+  let candidate = color;
+  for (let i = 0; i < 24; i += 1) {
+    candidate = goLighter ? lighten(candidate, 0.05) : darken(candidate, 0.05);
+    if (contrastRatio(candidate, against) >= minRatio) return candidate;
+  }
+  return bestContrast(against, [WHITE2, BLACK2]);
+};
+var STATUS_KEYS = ["success", "warning", "error", "info"];
+var deriveStateColors = (color, mode) => {
+  const surface = parseHex(color.bg.surface);
+  const subtle = parseHex(color.bg.subtle);
+  const ink = parseHex(color.text.primary);
+  const muted = parseHex(color.text.muted);
+  const inverse = parseHex(color.text.inverse);
+  const familyStates = (primary, soft) => {
+    const base = parseHex(primary);
+    const tint = parseHex(soft);
+    const softHover = quantize(mixColors(tint, base, STEP.softHover));
+    const softPress = quantize(mixColors(tint, base, STEP.softPress));
+    return {
+      press: formatHex(step(base, STEP.press, mode)),
+      "soft-hover": formatHex(softHover),
+      "soft-press": formatHex(softPress),
+      "on-soft": formatHex(untilLegible(base, tint, AA_TEXT)),
+      "on-soft-hover": formatHex(untilLegible(base, softHover, AA_TEXT)),
+      "on-soft-press": formatHex(untilLegible(base, softPress, AA_TEXT))
+    };
+  };
+  const brand = familyStates(color.brand.primary, color.brand.soft);
+  const accent = familyStates(color.accent.primary, color.accent.soft);
+  const status = Object.fromEntries(
+    STATUS_KEYS.flatMap((key) => {
+      const base = parseHex(color.status[key]);
+      const tint = quantize(mixColors(surface, base, 0.14));
+      const softHover = quantize(mixColors(tint, base, STEP.softHover));
+      return [
+        [`${key}-hover`, formatHex(step(base, STEP.hover, mode))],
+        [`${key}-press`, formatHex(step(base, STEP.press, mode))],
+        [`${key}-soft`, formatHex(tint)],
+        [`${key}-soft-hover`, formatHex(softHover)],
+        /**
+         * The alert's edge. Mixing the neutral border toward the status by a
+         * fixed 36% — the recipe the stylesheet used inline — produced a
+         * 1.8:1 edge on the tint, i.e. an edge nobody could see. Derived from
+         * the status colour instead, softened as far as 3:1 allows.
+         */
+        [`${key}-border`, formatHex(quantize(fadeToward(base, tint, tint, AA_UI)))],
+        [`${key}-contrast`, formatHex(bestContrast(base, [WHITE2, inverse]))],
+        // The status colour as ink on its own tint — soft alerts and badges.
+        [`${key}-on-soft`, formatHex(untilLegible(base, tint, AA_TEXT))],
+        [`${key}-on-soft-hover`, formatHex(untilLegible(base, softHover, AA_TEXT))]
+      ];
+    })
+  );
+  const disabledBg = subtle;
+  const disabledFg = quantize(fadeToward(muted, disabledBg, disabledBg, AA_UI));
+  const disabledBorder = mixColors(parseHex(color.border.default), disabledBg, 0.45);
+  return {
+    border: {
+      /**
+       * Control boundaries. Explicit in the semantic layer when a product sets
+       * one; derived here from `border.strong` otherwise, pushed until it
+       * clears 3:1 on the *subtle* surface — the worst of the three, and the
+       * one inputs actually sit on inside a card.
+       */
+      interactive: color.border.interactive ?? formatHex(untilLegible(parseHex(color.border.strong), subtle, AA_UI))
+    },
+    brand,
+    accent,
+    status,
+    state: {
+      /** Neutral interactive surfaces: menu items, table rows, ghost buttons. */
+      "hover-bg": formatHex(quantize(mixColors(surface, ink, STEP.neutralHover))),
+      "press-bg": formatHex(quantize(mixColors(surface, ink, STEP.neutralPress))),
+      /**
+       * Selection reads as the brand tint. The ink is the brand's derived
+       * on-tint ink, not `brand.primary` — on the shipped dark tint those
+       * differ, and the raw brand measured 4.44:1 there.
+       */
+      "selected-bg": color.brand.soft,
+      "selected-fg": brand["on-soft"],
+      "selected-border": color.brand.primary,
+      "disabled-bg": formatHex(disabledBg),
+      "disabled-fg": formatHex(disabledFg),
+      "disabled-border": formatHex(disabledBorder)
+    }
+  };
+};
+
 // src/token-source.ts
 var toCssVariable = (path2) => `--tree-${path2.join("-")}`;
 var flattenTokens = (record, path2 = []) => Object.entries(record).flatMap(([key, value]) => {
@@ -278,21 +608,29 @@ var buildTokenEntries = () => {
   );
   const themed = /* @__PURE__ */ new Map();
   for (const [themeName, theme] of Object.entries(treeThemes)) {
-    for (const [path2, value] of flattenTokens(theme)) {
-      const cssVar = toCssVariable(path2);
-      const existing = themed.get(cssVar);
-      if (existing) {
-        existing.themeValues = { ...existing.themeValues, [themeName]: String(value) };
-        continue;
+    const mode = themeName === "dark" ? "dark" : "light";
+    const derived = { color: deriveStateColors(theme.color, mode) };
+    for (const [source, entries] of [
+      ["semantic", flattenTokens(theme)],
+      ["derived", flattenTokens(derived)]
+    ]) {
+      for (const [path2, value] of entries) {
+        const cssVar = toCssVariable(path2);
+        const existing = themed.get(cssVar);
+        if (existing) {
+          existing.themeValues = { ...existing.themeValues, [themeName]: String(value) };
+          continue;
+        }
+        themed.set(cssVar, {
+          cssVar,
+          path: path2.join("."),
+          value: String(value),
+          category: path2[0],
+          derived: source === "derived",
+          description: source === "derived" ? `${describeToken(path2[0])} Derived by the library from the semantic layer \u2014 read it, do not override it.` : describeToken(path2[0]),
+          themeValues: { [themeName]: String(value) }
+        });
       }
-      themed.set(cssVar, {
-        cssVar,
-        path: path2.join("."),
-        value: String(value),
-        category: path2[0],
-        description: describeToken(path2[0]),
-        themeValues: { [themeName]: String(value) }
-      });
     }
   }
   for (const entry of themed.values()) {
@@ -542,15 +880,24 @@ var buildStoryIndex = (repoRoot) => {
       continue;
     }
     const componentName = componentMatch[1];
-    const titleMatch = source.match(/title:\s*'([^']+)'/);
-    const storyTitle = titleMatch?.[1];
+    const storyTitle = [...source.matchAll(/title:\s*'([^']+)'/g)].map((match) => match[1]).find((value) => /^(Components|Foundation|Patterns|Showcase)\/.+/.test(value));
+    if (!storyTitle) {
+      console.warn(
+        `[catalog] ${fileName} declares component: ${componentName} but no Storybook meta title \u2014 it will have no category or docs link.`
+      );
+    }
     const titleParts = storyTitle?.split("/") ?? [];
     const category = titleParts.length > 2 ? titleParts.slice(1, -1).join(" / ") : titleParts[1];
-    index.set(componentName, {
+    const entry = {
       storyFile: path.relative(repoRoot, filePath),
       storyTitle,
       category
-    });
+    };
+    index.set(componentName, entry);
+    const fileComponent = `T${fileName.replace(/\.stories\.ts$/, "")}`;
+    if (!index.has(fileComponent)) {
+      index.set(fileComponent, entry);
+    }
   }
   return index;
 };

package/package.json

@@ -1,8 +1,27 @@
 {
   "name": "@treeui/mcp",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Model Context Protocol server and AI catalog for TreeUI.",
+  "license": "MIT",
+  "author": "TreeUI",
+  "homepage": "https://viserion77.github.io/treeui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Viserion77/treeui.git",
+    "directory": "packages/mcp"
+  },
+  "bugs": {
+    "url": "https://github.com/Viserion77/treeui/issues"
+  },
+  "keywords": [
+    "treeui",
+    "mcp",
+    "model-context-protocol",
+    "ai",
+    "design-system"
+  ],
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,8 +39,8 @@
     "dist"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.4",
-    "yaml": "^2.9.0"
+    "@modelcontextprotocol/sdk": "^1.30.1",
+    "yaml": "^2.9.1"
   },
   "scripts": {
     "generate:catalog": "node --import tsx scripts/generate-catalog.ts",