dslinter 0.2.3 → 0.4.0

package/src/dashboard/paths.test.ts

@@ -1,9 +1,26 @@
 import { describe, expect, it } from "vitest";
-import { truncatePathMiddle } from "./paths";
+import { resolveReportAbsolutePath, truncatePathMiddle } from "./paths";
 
 const SAMPLE =
   "resources/js/components/manage-two-factor.tsx";
 
+describe("resolveReportAbsolutePath", () => {
+  it("returns absolute paths unchanged when under root", () => {
+    expect(
+      resolveReportAbsolutePath(
+        "/repo",
+        "/repo/src/components/Button.tsx",
+      ),
+    ).toBe("/repo/src/components/Button.tsx");
+  });
+
+  it("joins root-relative paths", () => {
+    expect(
+      resolveReportAbsolutePath("/repo", "src/pages/Home.tsx"),
+    ).toBe("/repo/src/pages/Home.tsx");
+  });
+});
+
 describe("truncatePathMiddle", () => {
   it("returns the path unchanged when it fits", () => {
     expect(truncatePathMiddle(SAMPLE, 100)).toBe(SAMPLE);

package/src/dashboard/paths.ts

@@ -14,6 +14,14 @@ export function shortPath(root: string, fullPath: string): string {
   return parts.slice(-3).join("/");
 }
 
+/** Resolve a report path (absolute or root-relative) to an absolute path. */
+export function resolveReportAbsolutePath(root: string, path: string): string {
+  const r = normalizePath(root);
+  const p = normalizePath(path);
+  if (p.startsWith(r + "/") || p === r) return p;
+  return `${r}/${p}`;
+}
+
 /**
  * Truncate a file path from the middle, preserving the filename and path
  * separators. Leading path segments are kept when space allows.

package/src/mcp/agent-query.ts

@@ -7,7 +7,7 @@ import {
 import { findingsForComponent } from "../report/findingsForComponent";
 import { controlsForSpec } from "../playground/controls";
 import { genericUsageSnippet } from "../playground/snippet";
-import { pillarForRule, ruleById, ruleCatalog } from "./rule-catalog";
+import { pillarForRule, ruleCatalog } from "./rule-catalog";
 import { findingMatchesPath } from "./normalize-paths";
 import type {
   ConfigSnapshot,

package/src/mcp/css-color.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { findColorTokenForHex, normalizeHex, parseCssColor } from "./css-color";
+import type { CssTokenDefinition } from "../types/report";
+
+function colorDef(name: string, value: string): CssTokenDefinition {
+  return {
+    name,
+    value,
+    category: "color",
+    scope: "theme",
+    path: "theme.css",
+    line: 1,
+  };
+}
+
+describe("css-color", () => {
+  it("normalizes shorthand hex", () => {
+    expect(normalizeHex("#abc")).toBe("#aabbcc");
+    expect(normalizeHex("#DC2626")).toBe("#dc2626");
+  });
+
+  it("parses rgb to hex", () => {
+    expect(parseCssColor("rgb(220, 38, 38)")).toBe("#dc2626");
+    expect(parseCssColor("rgba(220, 38, 38, 0.5)")).toBe("#dc2626");
+  });
+
+  it("finds token by normalized hex when value is rgb", () => {
+    const defs = [colorDef("--color-danger", "rgb(220, 38, 38)")];
+    const token = findColorTokenForHex(defs, "#dc2626");
+    expect(token?.name).toBe("--color-danger");
+  });
+
+  it("finds token when value is hex and finding uses shorthand", () => {
+    const defs = [colorDef("--color-danger", "#dc2626")];
+    const token = findColorTokenForHex(defs, "#dc2626");
+    expect(token?.name).toBe("--color-danger");
+  });
+
+  it("resolves var() chains before matching", () => {
+    const defs = [
+      colorDef("--primary", "#93c5fd"),
+      colorDef("--color-primary", "var(--primary)"),
+    ];
+    const token = findColorTokenForHex(defs, "#93c5fd");
+    expect(token?.name).toBe("--color-primary");
+  });
+
+  it("returns undefined when no token matches", () => {
+    const defs = [colorDef("--color-danger", "rgb(220, 38, 38)")];
+    expect(findColorTokenForHex(defs, "#ff0066")).toBeUndefined();
+  });
+});

package/src/mcp/css-color.ts

@@ -0,0 +1,73 @@
+import type { CssTokenDefinition } from "../types/report";
+
+/** Expand `#abc` → `#aabbcc` (lowercase). */
+export function normalizeHex(raw: string): string | null {
+  const s = raw.trim().replace(/^#/, "");
+  if (s.length === 3 && /^[0-9a-fA-F]{3}$/.test(s)) {
+    return `#${s[0]}${s[0]}${s[1]}${s[1]}${s[2]}${s[2]}`.toLowerCase();
+  }
+  if (s.length === 6 && /^[0-9a-fA-F]{6}$/.test(s)) {
+    return `#${s}`.toLowerCase();
+  }
+  return null;
+}
+
+/** Parse hex or `rgb()`/`rgba()` into normalized `#rrggbb`. */
+export function parseCssColor(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) {
+    return normalizeHex(trimmed);
+  }
+  const rgb = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (rgb) {
+    const [, r, g, b] = rgb;
+    const toHex = (n: string) => Number(n).toString(16).padStart(2, "0");
+    return `#${toHex(r!)}${toHex(g!)}${toHex(b!)}`;
+  }
+  return null;
+}
+
+const VAR_REF_RE = /var\(\s*(--[a-zA-Z0-9][a-zA-Z0-9_-]*)/;
+const MAX_VAR_DEPTH = 8;
+
+function resolveTokenValue(
+  value: string,
+  varMap: Map<string, string>,
+  depth = 0,
+): string | null {
+  if (depth > MAX_VAR_DEPTH) return null;
+  const trimmed = value.trim();
+  const varMatch = trimmed.match(VAR_REF_RE);
+  if (varMatch?.[1]) {
+    const next = varMap.get(varMatch[1]);
+    if (!next) return null;
+    return resolveTokenValue(next, varMap, depth + 1);
+  }
+  return trimmed;
+}
+
+/** Find a color token whose resolved value equals the given hex (after normalization). */
+export function findColorTokenForHex(
+  definitions: CssTokenDefinition[] | undefined,
+  hex: string,
+): CssTokenDefinition | undefined {
+  const target = parseCssColor(hex);
+  if (!target || !definitions?.length) return undefined;
+
+  const varMap = new Map(definitions.map((d) => [d.name, d.value]));
+
+  const matches = definitions.filter((def) => {
+    if (def.category !== "color") return false;
+    const resolved = resolveTokenValue(def.value, varMap);
+    if (!resolved) return false;
+    return parseCssColor(resolved) === target;
+  });
+
+  if (matches.length === 0) return undefined;
+
+  return matches.sort((a, b) => {
+    const aPref = a.name.startsWith("--color-") ? 0 : 1;
+    const bPref = b.name.startsWith("--color-") ? 0 : 1;
+    return aPref - bPref;
+  })[0];
+}

package/src/mcp/rule-catalog.json

@@ -45,15 +45,15 @@
     "rule_id": "token-hardcoded-color",
     "pillar": "token",
     "default_severity": "warning",
-    "description": "Hardcoded hex/rgb color instead of design tokens.",
+    "description": "Hardcoded hex/rgb color with no matching value in scanned CSS design tokens (className, style, or literals).",
     "fix_hint": "Replace with a CSS variable or Tailwind theme utility from css_tokens."
   },
   {
     "rule_id": "token-tailwind-arbitrary",
     "pillar": "token",
     "default_severity": "warning",
-    "description": "Tailwind arbitrary value (e.g. bg-[#fff]) bypasses the token system.",
-    "fix_hint": "Use a named theme utility or CSS custom property."
+    "description": "Tailwind arbitrary color or redundant size that duplicates the default scale or @theme spacing tokens.",
+    "fix_hint": "Use a named theme utility (e.g. w-20, p-layout-md) instead of an arbitrary bracket value."
   },
   {
     "rule_id": "token-unused-css-var",

package/src/mcp/verify-loop.test.ts

@@ -46,4 +46,28 @@ describe("verify-loop", () => {
     const fix = suggestFix(report, { rule_id: "token-hardcoded-color" });
     expect(fix?.fix_hint).toBeTruthy();
   });
+
+  it("matches rgb token values when suggesting hardcoded color fix", () => {
+    const report = loadDemoReport();
+    const fix = suggestFix(report, {
+      rule_id: "token-hardcoded-color",
+      message: "Hardcoded color `#dc2626` — no matching design token",
+    });
+    // Demo theme defines --color-danger as hex; rgb form should also resolve.
+    const rgbReport = {
+      ...report,
+      css_tokens: {
+        ...report.css_tokens!,
+        definitions: report.css_tokens!.definitions.map((d) =>
+          d.name === "--color-danger" ? { ...d, value: "rgb(220, 38, 38)" } : d,
+        ),
+      },
+    };
+    const rgbFix = suggestFix(rgbReport, {
+      rule_id: "token-hardcoded-color",
+      message: "Hardcoded color `#dc2626` — no matching design token",
+    });
+    expect(rgbFix?.token).toBe("--color-danger");
+    expect(fix?.fix_hint).toBeTruthy();
+  });
 });

package/src/mcp/verify-loop.ts

@@ -1,4 +1,5 @@
 import { catalogSummary, componentSpec, findingsForPaths } from "./agent-query";
+import { findColorTokenForHex } from "./css-color";
 import { ruleById } from "./rule-catalog";
 import type { LintFinding, WorkspaceReport } from "../types/report";
 
@@ -13,7 +14,7 @@ export type FixSuggestion = {
 
 export function suggestFix(
   report: WorkspaceReport,
-  opts: { rule_id: string; path?: string; component?: string },
+  opts: { rule_id: string; path?: string; component?: string; message?: string },
 ): FixSuggestion | null {
   const entry = ruleById(opts.rule_id);
   const fix_hint = entry?.fix_hint ?? "Review the finding and align with design system conventions.";
@@ -42,19 +43,39 @@ export function suggestFix(
   }
 
   if (opts.rule_id === "token-hardcoded-color") {
-    const colorToken = report.css_tokens?.definitions.find(
-      (d) => d.category === "color",
-    );
+    const hexMatch = opts.message?.match(/`(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))`/);
+    const hex = hexMatch?.[1]?.toLowerCase();
+    const colorToken =
+      hex != null
+        ? findColorTokenForHex(report.css_tokens?.definitions, hex)
+        : report.css_tokens?.definitions.find((d) => d.category === "color");
     return {
       rule_id: opts.rule_id,
       fix_hint,
       suggestion: colorToken
-        ? `Use theme token \`${colorToken.name}\` or Tailwind utility bound to it instead of a hardcoded color.`
-        : "Replace hardcoded color with a CSS variable or Tailwind theme utility.",
+        ? `Use theme token \`${colorToken.name}\` or Tailwind utility bound to it instead of hardcoded \`${hex ?? "color"}\`.`
+        : "Replace hardcoded color with a CSS variable or Tailwind theme utility from css_tokens.",
       token: colorToken?.name,
     };
   }
 
+  if (opts.rule_id === "token-tailwind-arbitrary") {
+    const utilityMatch = opts.message?.match(/Use `([^`]+)` instead of arbitrary/);
+    if (utilityMatch?.[1]) {
+      return {
+        rule_id: opts.rule_id,
+        fix_hint,
+        suggestion: `Replace the arbitrary value with \`${utilityMatch[1]}\` from the Tailwind or @theme spacing scale.`,
+      };
+    }
+    return {
+      rule_id: opts.rule_id,
+      fix_hint,
+      suggestion:
+        "Replace the arbitrary bracket value with a named theme utility or CSS custom property.",
+    };
+  }
+
   if (opts.rule_id === "a11y-img-alt" && opts.path) {
     const decorative =
       /avatar|icon|logo|decorative|spacer/i.test(opts.path) ||
@@ -141,6 +162,7 @@ export function findingsWithSuggestions(
       rule_id: f.rule_id,
       path: f.path,
       component: componentMatch?.[1],
+      message: f.message,
     });
     return suggestion ? { ...f, suggestion } : f;
   });

package/src/playground/buildPlaygroundEntriesFromReport.test.ts

@@ -86,7 +86,7 @@ describe("playground preview props", () => {
   it("maps playground control values even when declared_props omits them", () => {
     const controlOverrides: Record<string, PlaygroundControl[]> = {
       Demo: [
-        { key: "children", label: "children", type: "string", default: "" },
+        { key: "children", label: "children", type: "node", default: "" },
         {
           key: "variant",
           label: "variant",
@@ -168,8 +168,8 @@ describe("playground preview props", () => {
     expect(asChild?.type).toBe("boolean");
 
     const children = entry!.controls.find((c) => c.key === "children");
-    expect(children?.type).toBe("string");
-    if (children?.type === "string") {
+    expect(children?.type).toBe("node");
+    if (children?.type === "node") {
       expect(children.default).toBe("Example");
     }
 

package/src/playground/controls.ts

@@ -19,18 +19,19 @@ export function stringDefaultForProp(key: string): string {
 }
 
 export type PlaygroundStringControl = Extract<PlaygroundControl, { type: "string" }>;
+export type PlaygroundNodeControl = Extract<PlaygroundControl, { type: "node" }>;
 
 /** Parts like BreadcrumbSeparator default to an icon when children is omitted. */
 export function usesIconChildrenFallback(exportName: string): boolean {
   return exportName.endsWith("Separator");
 }
 
-export function childrenControl(exportName?: string): PlaygroundStringControl {
+export function childrenControl(exportName?: string): PlaygroundNodeControl {
   if (exportName && usesIconChildrenFallback(exportName)) {
     return {
       key: "children",
       label: "children",
-      type: "string",
+      type: "node",
       default: "",
       placeholder: "Custom separator (chevron when empty)",
     };
@@ -38,12 +39,22 @@ export function childrenControl(exportName?: string): PlaygroundStringControl {
   return {
     key: "children",
     label: "children",
-    type: "string",
+    type: "node",
     default: CHILDREN_SLOT_DEFAULT,
     placeholder: "Slot content",
   };
 }
 
+export function nodeControlForProp(key: string): PlaygroundNodeControl {
+  return {
+    key,
+    label: key,
+    type: "node",
+    default: defaultStringForProp(key),
+    placeholder: "Slot content",
+  };
+}
+
 export function childrenPropForPreview(
   exportName: string | undefined,
   raw: unknown,
@@ -133,6 +144,8 @@ export function controlsFromDeclaredProps(
       out.push({ key, label: key, type: "boolean", default: false });
     } else if (kind === "number") {
       out.push({ key, label: key, type: "number", default: 0 });
+    } else if (kind === "node") {
+      out.push(nodeControlForProp(key));
     } else if (kind === "string") {
       out.push({
         key,

package/src/playground/enrichKitControls.ts

@@ -29,7 +29,7 @@ function enrichOneControl(control: PlaygroundControl, slot: KitJsxSlot | undefin
   const exampleDefault = slotDefaultFromComponent(slot.component);
   const hint = `${slot.component} children`;
 
-  if (control.type === "string") {
+  if (control.type === "string" || control.type === "node") {
     const useExample =
       exampleDefault !== undefined &&
       (control.default === control.key || control.default === control.key.toLowerCase());
@@ -102,12 +102,12 @@ function propMetadataForCatalog(
 
   const def = definitionForExport(report, spec.export_name);
   const propOptions = {
-    ...(def?.declared_prop_options ?? {}),
-    ...(spec.declared_prop_options ?? {}),
+    ...def?.declared_prop_options,
+    ...spec.declared_prop_options,
   };
   const propDefaults = {
-    ...(def?.declared_prop_defaults ?? {}),
-    ...(spec.declared_prop_defaults ?? {}),
+    ...def?.declared_prop_defaults,
+    ...spec.declared_prop_defaults,
   };
   const propKinds = { ...spec.declared_prop_kinds };
 

package/src/playground/inferKitJsx.test.ts

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 import { describe, expect, it } from "vitest";
 import {
   inferKitJsxSlots,
@@ -7,16 +6,6 @@ import {
   slotLabelFromComponent,
 } from "./inferKitJsx";
 
-function Alert(props: { variant?: string; children?: unknown }) {
-  return createElement("div", props);
-}
-function AlertTitle(props: { children?: unknown }) {
-  return createElement("div", props);
-}
-function AlertDescription(props: { children?: unknown }) {
-  return createElement("div", props);
-}
-
 describe("inferKitJsx", () => {
   it("reads createElement children bindings (including vite transforms)", () => {
     const viteTransformed =

package/src/playground/inferPropTypesFromTs.d.mts

@@ -1,7 +1,7 @@
 import type { Program, TypeChecker, SourceFile, Type } from "typescript";
 import type { PlaygroundSpec } from "../types/report.js";
 
-export type PropKind = "boolean" | "string" | "number";
+export type PropKind = "boolean" | "string" | "number" | "node";
 
 export type CheckerProgram = {
   program: Program;

package/src/playground/inferPropTypesFromTs.mjs

@@ -122,12 +122,22 @@ export function findComponentParamType(checker, sf, exportName) {
   return found;
 }
 
+/** @param {ts.TypeChecker} checker @param {ts.Type} type */
+function isReactNodeType(checker, type) {
+  const alias = type.aliasSymbol?.escapedName ?? type.aliasSymbol?.name;
+  if (alias === "ReactNode" || alias === "ReactElement") return true;
+  const text = checker.typeToString(type);
+  if (text === "ReactNode" || text === "ReactElement") return true;
+  return false;
+}
+
 /**
  * @param {ts.TypeChecker} checker
  * @param {ts.Type} type
  * @returns {PropKind | null}
  */
 export function classifyPropType(checker, type) {
+  if (isReactNodeType(checker, type)) return "node";
   const nn = checker.getNonNullableType(type);
   if (nn.isUnion()) {
     const parts = nn.types.map((u) =>
@@ -146,10 +156,16 @@ export function classifyPropType(checker, type) {
   return null;
 }
 
-/** @param {ts.TypeChecker} checker @param {ts.Type} type */
-function followTypeAlias(checker, type) {
+/** @param {ts.TypeChecker} checker @param {ts.Type} type @param {Set<number>} [seen] */
+function followTypeAlias(checker, type, seen = new Set()) {
   if (type.aliasSymbol) {
-    return followTypeAlias(checker, checker.getDeclaredTypeOfSymbol(type.aliasSymbol));
+    if (seen.has(type.id)) return type;
+    seen.add(type.id);
+    return followTypeAlias(
+      checker,
+      checker.getDeclaredTypeOfSymbol(type.aliasSymbol),
+      seen,
+    );
   }
   return type;
 }

package/src/playground/inferPropTypesFromTs.test.ts

@@ -217,6 +217,38 @@ describe("enrichPlaygroundSpecFromTs", () => {
     expect(enriched.declared_prop_defaults?.type).toBe("text");
     expect(enriched.declared_prop_kinds?.type).toBe("string");
   });
+
+  it("classifies ReactNode props as node", () => {
+    const root = tempProject({
+      "src/section.tsx": `
+        import type { ReactNode } from "react";
+        export function Section({
+          children,
+          actions,
+        }: {
+          children: ReactNode;
+          actions?: ReactNode;
+        }) {
+          return null;
+        }
+      `,
+    });
+    const bundle = createCheckerProgram(root)!;
+    const spec: PlaygroundSpec = {
+      id: "Section",
+      export_name: "Section",
+      rel_path: "src/section.tsx",
+      declared_props: ["children", "actions"],
+    };
+    const enriched = enrichPlaygroundSpecFromTs(
+      spec,
+      bundle.checker,
+      bundle.program,
+      root,
+    );
+    expect(enriched.declared_prop_kinds?.children).toBe("node");
+    expect(enriched.declared_prop_kinds?.actions).toBe("node");
+  });
 });
 
 describe("createCheckerProgram", () => {

package/src/playground/inferPropTypesFromTs.ts

@@ -1,5 +1,5 @@
 export type { DeclaredPropKind, PlaygroundSpec } from "../types/report";
-export type PropKind = "boolean" | "string" | "number";
+export type PropKind = "boolean" | "string" | "number" | "node";
 
 export type CheckerProgram = {
   program: import("typescript").Program;

package/src/playground/playgroundJoin.ts

@@ -168,3 +168,37 @@ export function findPlaygroundJoinSkip(
 ): PlaygroundJoinSkip | undefined {
   return skipped?.find((s) => s.export_name === componentId);
 }
+
+/** User-facing hint when a playground spec cannot join to the Vite module graph. */
+export function playgroundJoinDetailMessage(
+  skip: PlaygroundJoinSkip | undefined,
+  spec: PlaygroundSpec | undefined,
+): string | null {
+  if (skip?.reason === "module_not_found") {
+    const { globKey, rel_path } = skip;
+    const subdirHint = !rel_path.includes("/")
+      ? " This usually means the scanner was run from a subdirectory. Re-run from the project root: npx dslinter ."
+      : "";
+    if (globKey.startsWith("@dslinter-scan/")) {
+      return [
+        `Expected module key "${globKey}" but the dslinter Vite plugin did not load it.`,
+        `Use <DashboardLayout autoPlayground /> and run via npx dslinter (zero vite.config changes), or add plugins: [dslinter()] from dslinter/vite to vite.config.ts.`,
+        `Run the scanner from the project root so rel_path "${rel_path}" matches files under DSLINTER_SCAN_ROOT.`,
+      ].join(" ");
+    }
+    return [
+      `Vite glob is missing key "${globKey}" for report path "${rel_path}".`,
+      `Prefer <DashboardLayout autoPlayground /> with plugins: [dslinter()] from dslinter/vite, or run npx dslinter init for a custom buildRegistry.ts glob.`,
+      subdirHint,
+    ]
+      .filter(Boolean)
+      .join("");
+  }
+  if (skip?.reason === "export_not_found") {
+    return `Module loaded but named export "${skip.export_name}" was not found. Use export function ${skip.export_name}(…) in ${skip.rel_path}.`;
+  }
+  if (spec) {
+    return `Report path: ${spec.rel_path} (export ${spec.export_name}). Use autoPlayground with dslinter/vite, or ensure buildRegistry.ts glob covers this file.`;
+  }
+  return null;
+}

package/src/playground/propCoerce.ts

@@ -8,7 +8,7 @@ import {
 } from "./controls";
 
 export function coerceDeclaredPropKind(v: unknown): DeclaredPropKind | undefined {
-  if (v === "boolean" || v === "string" || v === "number" || v === "unknown")
+  if (v === "boolean" || v === "string" || v === "number" || v === "node" || v === "unknown")
     return v;
   return undefined;
 }
@@ -65,7 +65,7 @@ export function valuesToComponentProps(
       o[key] = Number.isFinite(n) ? n : 0;
       continue;
     }
-    if (kind === "string") {
+    if (kind === "string" || kind === "node") {
       o[key] = values[key];
       continue;
     }

package/src/playground/snippet.ts

@@ -17,6 +17,7 @@ function valueMatchesPlaygroundDefault(
       return Number.isFinite(n) && n === control.default;
     }
     case "string":
+    case "node":
     case "select":
       return String(value ?? "") === String(control.default);
     default:

package/src/shell/DashboardLayout.tsx

@@ -14,6 +14,7 @@ import type { TokenCatalog } from "../types/tokenCatalog";
 import type { DslinterReportState } from "../dashboard/useWorkspaceReport";
 import { ComponentInspectPane } from "../components/ComponentInspectPane";
 import { ComponentPlaygroundPane } from "../components/ComponentPlaygroundPane";
+import { CatalogPane } from "../components/CatalogPane";
 import { GovernancePane } from "../components/GovernancePane";
 import { Sidebar } from "../components/Sidebar";
 import { TokensPane } from "../components/TokensPane";
@@ -21,6 +22,7 @@ import { DashboardCommandPalette } from "../components/DashboardCommandPalette";
 import {
   componentCatalogNamesFromReport,
   componentCatalogTreeFromReport,
+  resolveFamilyNavigationTarget,
 } from "../dashboard/aggregate";
 import { reportWithExtraHidden } from "../dashboard/catalogVisibility";
 import { resolvePlaygroundEntry } from "../playground/buildPlaygroundEntriesFromReport";
@@ -186,14 +188,17 @@ export function DashboardLayoutInner({
         return [{ name: item.name, label: item.name }];
       }
       return [
-        { name: item.parent, label: item.parent },
+        {
+          name: resolveFamilyNavigationTarget(item, catalogNames),
+          label: item.parent,
+        },
         ...item.children.map((child) => ({
           name: child,
           label: `${item.parent} / ${child}`,
         })),
       ];
     });
-  }, [catalogReport]);
+  }, [catalogReport, catalogNames]);
 
   const handleHideFromCatalog = useCallback(
     (componentName: string) => {
@@ -230,9 +235,22 @@ export function DashboardLayoutInner({
         onOpenComponent={(name) =>
           navigate({ view: "component", componentId: name })
         }
+        onOpenCatalog={() => navigate({ view: "catalog" })}
       />
     );
-  } else {
+  } else if (route.view === "catalog") {
+    main = (
+      <CatalogPane
+        landing={overview}
+        dslinterReportHint={dslinterReportHint}
+        dslinterReport={dslinterReport}
+        onOpenComponent={(name) =>
+          navigate({ view: "component", componentId: name })
+        }
+        onBackToGovernance={() => navigate({ view: "governance" })}
+      />
+    );
+  } else if (route.view === "component") {
     const componentId = route.componentId;
     const entry = resolvePlaygroundEntry(playgroundEntries, componentId);
     const inCatalog = catalogNames.includes(componentId);
@@ -264,7 +282,6 @@ export function DashboardLayoutInner({
             playgroundJoinSkips,
             componentId,
           )}
-          onBackToGovernance={() => navigate({ view: "governance" })}
           onOpenComponent={(name) =>
             navigate({ view: "component", componentId: name })
           }