@testgorilla/tgo-ui 8.10.0 → 8.11.1

package/mcp/server.mjs

@@ -2230,8 +2230,8 @@ var require_resolve = __commonJS({
       }
       return count;
     }
-    function getFullPath(resolver, id = "", normalize) {
-      if (normalize !== false)
+    function getFullPath(resolver, id = "", normalize2) {
+      if (normalize2 !== false)
         id = normalizeId(id);
       const p = resolver.parse(id);
       return _getFullPath(resolver, p);
@@ -3627,7 +3627,7 @@ var require_fast_uri = __commonJS({
     "use strict";
     var { normalizeIPv6, removeDotSegments, recomposeAuthority, normalizePercentEncoding, normalizePathEncoding, escapePreservingEscapes, reescapeHostDelimiters, isIPv4, nonSimpleDomain } = require_utils();
     var { SCHEMES, getSchemeHandler } = require_schemes();
-    function normalize(uri, options) {
+    function normalize2(uri, options) {
       if (typeof uri === "string") {
         uri = /** @type {T} */
         normalizeString(uri, options);
@@ -3894,7 +3894,7 @@ var require_fast_uri = __commonJS({
     }
     var fastUri = {
       SCHEMES,
-      normalize,
+      normalize: normalize2,
       resolve,
       resolveComponent,
       equal,
@@ -21581,6 +21581,202 @@ function registerGetQueryGuideTool(server, store) {
   );
 }
 
+// src/tools/list-stories-with-design-links.ts
+function handleListStoriesWithDesignLinks(store) {
+  const rows = [];
+  for (const c of store.getAll()) {
+    const examplesWithUrl = c.examples.filter((e) => e.designUrl);
+    const metaUrl = c.designUrl ?? "";
+    if (examplesWithUrl.length > 0) {
+      for (const ex of c.examples) {
+        const url = ex.designUrl ?? metaUrl;
+        if (!url) continue;
+        rows.push({
+          component: deriveComponentDir(c.importPath),
+          componentName: c.name,
+          selector: c.selector,
+          storyName: ex.name,
+          designUrl: url
+        });
+      }
+    } else if (metaUrl) {
+      rows.push({
+        component: deriveComponentDir(c.importPath),
+        componentName: c.name,
+        selector: c.selector,
+        storyName: "",
+        designUrl: metaUrl
+      });
+    }
+  }
+  rows.sort((a, b) => {
+    const byComp = a.component.localeCompare(b.component);
+    return byComp !== 0 ? byComp : a.storyName.localeCompare(b.storyName);
+  });
+  return rows;
+}
+function deriveComponentDir(importPath) {
+  const idx = importPath.lastIndexOf("/");
+  return idx === -1 ? importPath : importPath.slice(idx + 1);
+}
+function registerListStoriesWithDesignLinksTool(server, store) {
+  server.tool(
+    "list_stories_with_design_links",
+    "List every Storybook story that has a Figma design URL (from `parameters.design.url`). Returns flat rows of {component, componentName, selector, storyName, designUrl}. When a story has no per-story URL but the component has a meta-level URL, the meta URL applies. Components with no design URL at any level are omitted. `storyName` is empty when only a meta-level URL is known (i.e. applies to all stories).",
+    {},
+    async () => ({
+      content: [{ type: "text", text: JSON.stringify(handleListStoriesWithDesignLinks(store), null, 2) }]
+    })
+  );
+}
+
+// src/tools/get-icon-for-figma-name.ts
+function registerGetIconForFigmaNameTool(server, resolver) {
+  server.tool(
+    "get_icon_for_figma_name",
+    'Resolve a Figma icon name (as exported by Figma Dev Mode) to a Canopy `<ui-icon>` name + svg path. Returns null when no match is found at any level. The `match` field tells you how the resolution happened: "exact" (after case/punctuation normalization), "alias" (manual entry in mcp/icon-aliases.json), or "fuzzy" (substring match \u2014 verify visually before relying on it).',
+    {
+      figmaIconName: external_exports.string().describe('Icon name from Figma (e.g., "checkmark", "Arrow-down", "Eye Open"). Case- and punctuation-insensitive.')
+    },
+    async ({ figmaIconName }) => {
+      const result = resolver.resolve(figmaIconName);
+      return {
+        content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+      };
+    }
+  );
+}
+
+// src/tools/get-design-tokens.ts
+function handleGetDesignTokens(tokens, params) {
+  if (!params.category) return tokens;
+  const wanted = params.category.toLowerCase();
+  return tokens.filter((t) => t.category === wanted);
+}
+function registerGetDesignTokensTool(server, tokens) {
+  server.tool(
+    "get_design_tokens",
+    "Return Canopy design tokens parsed from `theme/_variables.scss` (colors, breakpoints, shadows, etc.). Each token is `{ name, value, category }`. Call without `category` first to discover the available buckets, then re-call with a filter to narrow.",
+    {
+      category: external_exports.string().optional().describe('Optional category filter (e.g., "color", "breakpoint", "shadow", "font", "size"). Case-insensitive.')
+    },
+    async ({ category }) => ({
+      content: [{ type: "text", text: JSON.stringify(handleGetDesignTokens(tokens, { category }), null, 2) }]
+    })
+  );
+}
+
+// src/tools/list-typography-classes.ts
+function handleListTypographyClasses(classes) {
+  return classes;
+}
+function registerListTypographyClassesTool(server, classes) {
+  server.tool(
+    "list_typography_classes",
+    'List Canopy typography styles available app-wide WITHOUT requiring a component (h1\u2013h6, .body-large, .body-small-regular, .featured, .caption, .hyperlink, .button-label, etc.). Use this BEFORE flagging text spans as missing components \u2014 a `<h1>` or `<p class="body-large">` is part of the design system, not a gap. Each entry returns `{ name, selector, source, properties }`; `properties` has font-size, line-height, font-weight, font-family, text-transform, color when present.',
+    {},
+    async () => ({
+      content: [{ type: "text", text: JSON.stringify(handleListTypographyClasses(classes), null, 2) }]
+    })
+  );
+}
+
+// src/tools/list-color-palettes.ts
+function handleListColorPalettes(palettes, params) {
+  if (!params.palette) return palettes;
+  const wanted = params.palette.toLowerCase();
+  return palettes.filter(
+    (p) => p.name.toLowerCase() === wanted || p.name.toLowerCase().includes(wanted)
+  );
+}
+function registerListColorPalettesTool(server, palettes) {
+  server.tool(
+    "list_color_palettes",
+    "List semantic color palettes from Canopy Foundations (BrandColors, RebrandInformativeColors, RebrandSuccessColors, RebrandGrayscaleColors, AiColors, etc.). Use this when you need to know which Canopy color is intended for a given role (brand / informative / success / error / warning / neutral / AI). Each palette returns `{ name, displayName, colors: [{ variable, cssClass, hex }, ...] }`. For raw SCSS variables without grouping, use `get_design_tokens` instead.",
+    {
+      palette: external_exports.string().optional().describe('Optional palette filter (case-insensitive, substring match). Example: "brand", "success", "rebrand".')
+    },
+    async ({ palette }) => ({
+      content: [{ type: "text", text: JSON.stringify(handleListColorPalettes(palettes, { palette }), null, 2) }]
+    })
+  );
+}
+
+// src/icons/icon-resolver.ts
+var MIN_FUZZY_QUERY_LENGTH = 4;
+var IconResolver = class {
+  byNormalized = /* @__PURE__ */ new Map();
+  aliasMap;
+  unmapped;
+  icons;
+  constructor(icons, aliases = {}, unmapped = []) {
+    this.icons = icons;
+    for (const icon of icons) {
+      this.byNormalized.set(normalize(icon.name), icon);
+    }
+    this.aliasMap = /* @__PURE__ */ new Map();
+    for (const [from, to] of Object.entries(aliases)) {
+      this.aliasMap.set(normalize(from), to);
+    }
+    this.unmapped = new Set(unmapped.map(normalize));
+  }
+  resolve(figmaName) {
+    const normalized = normalize(figmaName);
+    if (!normalized) return null;
+    const exact = this.byNormalized.get(normalized);
+    if (exact) {
+      return { canopyIconName: exact.name, svgPath: exact.svgPath, match: "exact" };
+    }
+    const aliasTarget = this.aliasMap.get(normalized);
+    if (aliasTarget) {
+      const target = this.byNormalized.get(normalize(aliasTarget));
+      if (target) {
+        return { canopyIconName: target.name, svgPath: target.svgPath, match: "alias" };
+      }
+    }
+    if (this.unmapped.has(normalized)) return null;
+    if (normalized.length >= MIN_FUZZY_QUERY_LENGTH) {
+      const best = this.bestFuzzyMatch(normalized);
+      if (best) {
+        return { canopyIconName: best.name, svgPath: best.svgPath, match: "fuzzy" };
+      }
+    }
+    return null;
+  }
+  /**
+   * Pick the best fuzzy candidate rather than the first one in iteration order.
+   * Among icons whose normalized name contains (or is contained by) the query,
+   * rank by: prefix match over mid-substring, then smallest length delta, then
+   * alphabetical for stable results as the icon set grows. This stops `arrow`
+   * from always landing on whichever icon happens to sort first.
+   */
+  bestFuzzyMatch(query) {
+    let best = null;
+    for (const icon of this.icons) {
+      const candidate = normalize(icon.name);
+      if (candidate === query) continue;
+      if (!candidate.includes(query) && !query.includes(candidate)) continue;
+      const isPrefix = candidate.startsWith(query) || query.startsWith(candidate) ? 0 : 1;
+      const rank = [isPrefix, Math.abs(candidate.length - query.length), candidate];
+      if (best === null || compareFuzzyRank(rank, best.rank) < 0) {
+        best = { icon, rank };
+      }
+    }
+    return best?.icon ?? null;
+  }
+};
+function compareFuzzyRank(a, b) {
+  if (a[0] !== b[0]) return a[0] - b[0];
+  if (a[1] !== b[1]) return a[1] - b[1];
+  return a[2].localeCompare(b[2]);
+}
+function stripSvgExtension(name) {
+  return name.toLowerCase().endsWith(".svg") ? name.slice(0, -".svg".length) : name;
+}
+function normalize(name) {
+  return stripSvgExtension(name).toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
 // src/server-lite.ts
 var CatalogSchema = external_exports.object({
   version: external_exports.string(),
@@ -21595,7 +21791,24 @@ var CatalogSchema = external_exports.object({
     outputs: external_exports.array(external_exports.any()),
     types: external_exports.any(),
     queryGuide: external_exports.any()
-  }).passthrough())
+  }).passthrough()),
+  // Phase G additions. Defaulted so catalogs published before v8.1 still parse cleanly.
+  icons: external_exports.array(external_exports.object({ name: external_exports.string(), svgPath: external_exports.string() })).optional().default([]),
+  iconAliases: external_exports.record(external_exports.string()).optional().default({}),
+  iconUnmapped: external_exports.array(external_exports.string()).optional().default([]),
+  tokens: external_exports.array(external_exports.object({ name: external_exports.string(), value: external_exports.string(), category: external_exports.string() })).optional().default([]),
+  // Foundations additions (Phase G.1.d). Same default-to-empty pattern.
+  typography: external_exports.array(external_exports.object({
+    name: external_exports.string(),
+    selector: external_exports.string(),
+    source: external_exports.string(),
+    properties: external_exports.record(external_exports.string())
+  })).optional().default([]),
+  colorPalettes: external_exports.array(external_exports.object({
+    name: external_exports.string(),
+    displayName: external_exports.string(),
+    colors: external_exports.array(external_exports.object({ variable: external_exports.string(), cssClass: external_exports.string(), hex: external_exports.string() }))
+  })).optional().default([])
 });
 function loadCatalog(catalog) {
   const store = new CatalogStore();
@@ -21616,6 +21829,12 @@ function createStaticMcpServer(catalog) {
   registerGetUsageGuideTool(server, store);
   registerGetComponentTypesTool(server, store);
   registerGetQueryGuideTool(server, store);
+  registerListStoriesWithDesignLinksTool(server, store);
+  const iconResolver = new IconResolver(catalog.icons ?? [], catalog.iconAliases ?? {}, catalog.iconUnmapped ?? []);
+  registerGetIconForFigmaNameTool(server, iconResolver);
+  registerGetDesignTokensTool(server, catalog.tokens ?? []);
+  registerListTypographyClassesTool(server, catalog.typography ?? []);
+  registerListColorPalettesTool(server, catalog.colorPalettes ?? []);
   return server;
 }
 var isMainScript = import.meta.url === `file://${process.argv[1]}` || process.argv[1]?.endsWith("server-lite.js") || process.argv[1]?.endsWith("server.mjs");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "8.10.0",
+  "version": "8.11.1",
   "license": "proprietary-license",
   "lint-staged": {
     "{projects,components}/**/*.ts": [
@@ -64,7 +64,8 @@
     "postcss": "8.5.12",
     "uuid": "^11.1.1",
     "fast-uri": "^3.1.2",
-    "webpack-dev-server": "^5.2.4"
+    "webpack-dev-server": "^5.2.4",
+    "shell-quote": "^1.8.4"
   },
   "module": "fesm2022/testgorilla-tgo-ui.mjs",
   "typings": "index.d.ts",

package/projects/tgo-canopy-ui/theme/_typography.scss

@@ -87,7 +87,7 @@ p,
 .caption {
   .semibold {
     font-weight: 600;
-    color: #46a997;
+    color: $brand-50;
   }
 }