dslinter 0.1.0 → 0.1.1

package/src/components/ComponentInspectPane.tsx

@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  aggregateDeclaredProps,
+  aggregateDefinitions,
+} from "../dashboard/aggregate";
+import {
+  buildUnusedPropSetForComponent,
+  ComponentPropUsageDetail,
+} from "../dashboard/ComponentPropUsageDetail";
+import { ComponentUsageDetails } from "../dashboard/ComponentUsageDetails";
+import { FindingsList } from "../dashboard/FindingsList";
+import { shortPath } from "../dashboard/paths";
+import { findingsForComponent } from "../report/findingsForComponent";
+import type { WorkspaceReport } from "../types/report";
+import { Section } from "./Section";
+
+type Props = {
+  componentId: string;
+  workspaceReport: WorkspaceReport | null;
+  reportReady: boolean;
+  hasPlaygroundSpec: boolean;
+  onBackToGovernance: () => void;
+};
+
+export function ComponentInspectPane({
+  componentId,
+  workspaceReport,
+  reportReady,
+  hasPlaygroundSpec,
+  onBackToGovernance,
+}: Props) {
+  const definitions = useMemo(() => {
+    if (!workspaceReport) return [];
+    return aggregateDefinitions(workspaceReport).get(componentId) ?? [];
+  }, [workspaceReport, componentId]);
+
+  const declared = useMemo(() => {
+    if (!workspaceReport) return [];
+    return aggregateDeclaredProps(workspaceReport).get(componentId) ?? [];
+  }, [workspaceReport, componentId]);
+
+  const unusedProps = useMemo(() => {
+    if (!workspaceReport) return new Set<string>();
+    return buildUnusedPropSetForComponent(
+      workspaceReport,
+      componentId,
+      declared,
+    );
+  }, [workspaceReport, componentId, declared]);
+
+  const findings = useMemo(
+    () => findingsForComponent(workspaceReport, componentId),
+    [workspaceReport, componentId],
+  );
+
+  const previewNote = hasPlaygroundSpec
+    ? "A preview was expected for this component but the module could not be loaded in the dashboard bundle (check the file path, export name, or that npx dslinter was run from the project root)."
+    : "No playable component definition was found in a .tsx/.jsx file under the scanned workspace — only names from JSX usage appear in the catalog.";
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+      <div className="min-h-0 flex-1 overflow-auto">
+        <header className="border-b border-border bg-card px-8 py-6">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-muted-foreground">
+                Components
+              </p>
+              <h1 className="text-3xl font-semibold tracking-tight text-foreground">
+                {componentId}
+              </h1>
+              <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+                Scan snapshot — no live preview. {previewNote}
+              </p>
+            </div>
+            <Button type="button" size="sm" variant="outline" onClick={onBackToGovernance}>
+              Back to governance
+            </Button>
+          </div>
+        </header>
+
+        <div className="mx-auto w-full max-w-5xl space-y-10 px-8 py-8">
+          <Section
+            id="definitions"
+            title="Definitions"
+            description="Source files where this component is defined."
+          >
+            {definitions.length > 0 ? (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>File</TableHead>
+                    <TableHead className="w-20">Line</TableHead>
+                    <TableHead>Kind</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {definitions.map((site) => (
+                    <TableRow
+                      key={`${site.path}:${site.line}:${site.kind}`}
+                    >
+                      <TableCell className="font-mono text-xs">
+                        {workspaceReport
+                          ? shortPath(workspaceReport.root, site.path)
+                          : site.path}
+                      </TableCell>
+                      <TableCell>{site.line}</TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {site.kind}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No definition sites recorded — this name may appear only from JSX
+                usage.
+              </p>
+            )}
+          </Section>
+
+          <Section
+            id="props"
+            title="Props"
+            description="Declared props and workspace usage from the latest scan."
+          >
+            {reportReady && workspaceReport ? (
+              <ComponentPropUsageDetail
+                component={componentId}
+                declared={declared}
+                unusedProps={unusedProps}
+              />
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Load the DSLinter report to see prop usage.
+              </p>
+            )}
+          </Section>
+
+          <Section
+            id="usage"
+            title="App usage"
+            description="Where this component is used in the workspace."
+          >
+            <ComponentUsageDetails
+              report={workspaceReport}
+              componentId={componentId}
+            />
+          </Section>
+
+          <Section
+            id="findings"
+            title="Findings"
+            description="DSLinter findings on files where this component is defined."
+          >
+            {reportReady && workspaceReport ? (
+              <FindingsList findings={findings} root={workspaceReport.root} />
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Load the DSLinter report to see findings.
+              </p>
+            )}
+          </Section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/DashboardCommandPalette.tsx

@@ -13,7 +13,6 @@ import type { HashRoute } from "../shell/hashRoute";
 
 type Props = {
   catalogNames: string[];
-  playgroundIds: Set<string>;
   onNavigate: (next: HashRoute) => void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -26,21 +25,8 @@ function eventTargetIsEditable(target: EventTarget | null): boolean {
   return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
 }
 
-function navigateToCatalogName(
-  name: string,
-  playgroundIds: Set<string>,
-  onNavigate: (next: HashRoute) => void,
-) {
-  if (playgroundIds.has(name)) {
-    onNavigate({ view: "component", componentId: name });
-  } else {
-    onNavigate({ view: "governance", catalog: name });
-  }
-}
-
 export function DashboardCommandPalette({
   catalogNames,
-  playgroundIds,
   onNavigate,
   open,
   onOpenChange,
@@ -86,7 +72,7 @@ export function DashboardCommandPalette({
                 key={name}
                 value={name}
                 onSelect={() => {
-                  navigateToCatalogName(name, playgroundIds, onNavigate);
+                  onNavigate({ view: "component", componentId: name });
                   close();
                 }}
               >

package/src/components/GovernancePane.tsx

@@ -9,7 +9,7 @@ type Props = {
   reportUrl?: string;
   dslinterReportHint?: string;
   dslinterReport: DslinterReportState;
-  focusName?: string;
+  onOpenComponent?: (name: string) => void;
 };
 
 export function GovernancePane({
@@ -17,7 +17,7 @@ export function GovernancePane({
   reportUrl: _reportUrl = "/dslint-report.json",
   dslinterReportHint = "npm run dslint:report",
   dslinterReport,
-  focusName,
+  onOpenComponent,
 }: Props) {
   const { report, error, loading } = dslinterReport;
   const componentCatalogCount = report
@@ -80,7 +80,7 @@ export function GovernancePane({
         </p>
       </header>
       <div className="min-w-0 w-full px-6 py-8">
-        <DashboardBody report={report} focusName={focusName} />
+        <DashboardBody report={report} onOpenComponent={onOpenComponent} />
       </div>
     </div>
   );

package/src/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import type { DashboardThemePreference } from "../shell/DashboardLayout";
 
 type Props = {
   report: WorkspaceReport | null;
-  playgroundIds: Set<string>;
   reportLoading: boolean;
   reportError: string | null;
   route: HashRoute;
@@ -50,7 +49,6 @@ function sectionLabel(text: string) {
 
 export function Sidebar({
   report,
-  playgroundIds,
   reportLoading,
   reportError,
   route,
@@ -64,7 +62,8 @@ export function Sidebar({
     [report],
   );
   const tokensActive = route.view === "tokens";
-  const governanceActive = route.view === "governance";
+  const governanceActive =
+    route.view === "governance" && route.catalog == null;
 
   const onThemeValueChange = (value: string) => {
     if (value !== "light" && value !== "dark") return;
@@ -173,16 +172,13 @@ export function Sidebar({
           ) : null}
           {catalogNames.map((name) => {
             const active =
-              (route.view === "component" && route.componentId === name) ||
-              (route.view === "governance" && route.catalog === name);
+              route.view === "component" && route.componentId === name;
             return (
               <button
                 key={name}
                 type="button"
                 onClick={() =>
-                  playgroundIds.has(name)
-                    ? onNavigate({ view: "component", componentId: name })
-                    : onNavigate({ view: "governance", catalog: name })
+                  onNavigate({ view: "component", componentId: name })
                 }
                 className={navButtonClass(active)}
               >

package/src/dashboard/ComponentCatalog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import {
   HoverCard,
   HoverCardContent,
@@ -16,9 +16,13 @@ import {
   aggregateDeclaredProps,
   aggregateDefinitions,
   catalogComponentNames,
-  catalogRowDomId,
   usageMap,
 } from "./aggregate";
+import {
+  catalogAttributeProps,
+  ComponentPropUsageDetail,
+  buildUnusedPropSetForComponent,
+} from "./ComponentPropUsageDetail";
 import { shortPath } from "./paths";
 import type { WorkspaceReport } from "../types/report";
 import { pluralize } from "usemods";
@@ -26,26 +30,15 @@ import { pluralize } from "usemods";
 /** Set of `"ComponentName/propName"` keys for every declared prop with no recorded usage. */
 function buildUnusedPropSet(report: WorkspaceReport): Set<string> {
   const s = new Set<string>();
-  const usageByComponent = new Map(
-    (report.usage_by_component ?? []).map((usage) => [
-      usage.component,
-      usage.prop_frequencies ?? {},
-    ]),
-  );
-
-  for (const file of report.files ?? []) {
-    for (const definition of file.definitions ?? []) {
-      const componentName = definition.name;
-      const propFrequencies = usageByComponent.get(componentName) ?? {};
-
-      for (const propName of definition.declared_props ?? []) {
-        if ((propFrequencies[propName] ?? 0) === 0) {
-          s.add(`${componentName}/${propName}`);
-        }
-      }
-    }
+  const declaredByName = aggregateDeclaredProps(report);
+  for (const [componentName, declared] of declaredByName) {
+    const unused = buildUnusedPropSetForComponent(
+      report,
+      componentName,
+      declared,
+    );
+    for (const key of unused) s.add(key);
   }
-
   return s;
 }
 
@@ -63,51 +56,24 @@ function CatalogPropUsageHover({
   unusedProps: Set<string>;
   usedPropCount: number;
 }) {
-  const used = declared.filter(
-    (prop) => !unusedProps.has(`${component}/${prop}`),
-  );
-  const unused = declared.filter((prop) =>
-    unusedProps.has(`${component}/${prop}`),
-  );
+  const attributeProps = catalogAttributeProps(declared);
 
   return (
     <HoverCard openDelay={200} closeDelay={100}>
       <HoverCardTrigger asChild>
         <button type="button" className={catalogHoverTriggerClass}>
           <span className="text-muted-foreground">
-            {usedPropCount}/{declared.length} {pluralize("prop", usedPropCount)}{" "}
-            used
+            {usedPropCount}/{attributeProps.length}{" "}
+            {pluralize("prop", usedPropCount)} used
           </span>
         </button>
       </HoverCardTrigger>
       <HoverCardContent align="start" className="w-56 p-3">
-        <p className="text-xs font-medium text-foreground">Props</p>
-        {used.length > 0 ? (
-          <div className="mt-2">
-            <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-              Used
-            </p>
-            <ul className="mt-1 space-y-0.5 font-mono text-xs text-foreground">
-              {used.map((prop) => (
-                <li key={prop}>{prop}</li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
-        {unused.length > 0 ? (
-          <div className={used.length > 0 ? "mt-3" : "mt-2"}>
-            <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-              Never passed
-            </p>
-            <ul className="mt-1 space-y-0.5 font-mono text-xs text-muted-foreground/70">
-              {unused.map((prop) => (
-                <li key={prop} className="line-through">
-                  {prop}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
+        <ComponentPropUsageDetail
+          component={component}
+          declared={declared}
+          unusedProps={unusedProps}
+        />
       </HoverCardContent>
     </HoverCard>
   );
@@ -149,10 +115,10 @@ function CatalogAppUsageHover({
 
 export function ComponentCatalog({
   report,
-  focusName,
+  onOpenComponent,
 }: {
   report: WorkspaceReport;
-  focusName?: string;
+  onOpenComponent?: (name: string) => void;
 }) {
   const defs = aggregateDefinitions(report);
   const usages = usageMap(report);
@@ -163,12 +129,6 @@ export function ComponentCatalog({
     [report],
   );
 
-  useEffect(() => {
-    if (!focusName || !names.includes(focusName)) return;
-    const el = document.getElementById(catalogRowDomId(focusName));
-    el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [focusName, names]);
-
   return (
     <Table>
       <TableHeader>
@@ -182,16 +142,29 @@ export function ComponentCatalog({
         {names.map((name) => {
           const use = usages.get(name);
           const declared = declaredByName.get(name) ?? [];
-          const usedPropCount = declared.filter(
+          const attributeProps = catalogAttributeProps(declared);
+          const usedPropCount = attributeProps.filter(
             (prop) => !unusedProps.has(`${name}/${prop}`),
           ).length;
 
           return (
-            <TableRow key={name} id={catalogRowDomId(name)}>
-              <TableCell>{name}</TableCell>
+            <TableRow key={name}>
+              <TableCell>
+                {onOpenComponent ? (
+                  <button
+                    type="button"
+                    onClick={() => onOpenComponent(name)}
+                    className="text-left font-medium text-foreground underline decoration-transparent underline-offset-2 transition hover:decoration-current"
+                  >
+                    {name}
+                  </button>
+                ) : (
+                  name
+                )}
+              </TableCell>
 
               <TableCell>
-                {declared.length > 0 ? (
+                {attributeProps.length > 0 ? (
                   <CatalogPropUsageHover
                     component={name}
                     declared={declared}

package/src/dashboard/ComponentPropUsageDetail.tsx

@@ -0,0 +1,90 @@
+import type { WorkspaceReport } from "../types/report";
+import { pluralize } from "usemods";
+
+/** React slot props — not attribute props. */
+const SLOT_PROPS = new Set(["children"]);
+
+export function catalogAttributeProps(props: string[]): string[] {
+  return props.filter((prop) => !SLOT_PROPS.has(prop));
+}
+
+/** Set of `"ComponentName/propName"` keys for props with no recorded usage. */
+export function buildUnusedPropSetForComponent(
+  report: WorkspaceReport,
+  componentName: string,
+  declared: string[],
+): Set<string> {
+  const s = new Set<string>();
+  const usageRow = (report.usage_by_component ?? []).find(
+    (u) => u.component === componentName,
+  );
+  const propFrequencies = usageRow?.prop_frequencies ?? {};
+  for (const propName of catalogAttributeProps(declared)) {
+    if ((propFrequencies[propName] ?? 0) === 0) {
+      s.add(`${componentName}/${propName}`);
+    }
+  }
+  return s;
+}
+
+export function ComponentPropUsageDetail({
+  component,
+  declared,
+  unusedProps,
+}: {
+  component: string;
+  declared: string[];
+  unusedProps: Set<string>;
+}) {
+  const attributeProps = catalogAttributeProps(declared);
+  const used = attributeProps.filter(
+    (prop) => !unusedProps.has(`${component}/${prop}`),
+  );
+  const unused = attributeProps.filter((prop) =>
+    unusedProps.has(`${component}/${prop}`),
+  );
+  const usedPropCount = used.length;
+
+  if (attributeProps.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No declared props recorded for this component.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        {usedPropCount}/{attributeProps.length}{" "}
+        {pluralize("prop", usedPropCount)} used in the workspace snapshot.
+      </p>
+      {used.length > 0 ? (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Used
+          </p>
+          <ul className="mt-1 space-y-0.5 font-mono text-xs text-foreground">
+            {used.map((prop) => (
+              <li key={prop}>{prop}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      {unused.length > 0 ? (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Never passed
+          </p>
+          <ul className="mt-1 space-y-0.5 font-mono text-xs text-muted-foreground/70">
+            {unused.map((prop) => (
+              <li key={prop} className="line-through">
+                {prop}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/dashboard/DashboardBody.tsx

@@ -14,10 +14,10 @@ import { ScoreStrip } from "./ScoreStrip";
 
 export function DashboardBody({
   report,
-  focusName,
+  onOpenComponent,
 }: {
   report: WorkspaceReport;
-  focusName?: string;
+  onOpenComponent?: (name: string) => void;
 }) {
   return (
     <div className="space-y-10">
@@ -62,7 +62,7 @@ export function DashboardBody({
         title="Components"
         description="Definitions and JSX usage from the latest snapshot."
       >
-        <ComponentCatalog report={report} focusName={focusName} />
+        <ComponentCatalog report={report} onOpenComponent={onOpenComponent} />
       </Section>
 
       <Section

package/src/index.ts

@@ -13,6 +13,12 @@ export type {
 } from "./types/controls";
 export { defaultArgsFromControls } from "./types/controls";
 export { definePlayground } from "./playground/definePlayground";
+export {
+  buildPlaygroundEntriesFromReport,
+  playgroundCatalogId,
+  resolvePlaygroundEntry,
+} from "./playground/buildPlaygroundEntriesFromReport";
+export type { BuildPlaygroundModules, BuildPlaygroundOptions } from "./playground/buildPlaygroundEntriesFromReport";
 export type { DefinedPlayground } from "./playground/definePlayground";
 export type { PlaygroundPreviewProps, PlaygroundPreviewComponent } from "./types/preview";
 export type {
@@ -69,6 +75,7 @@ export { a11ySummaryForModule, resolveModuleSourcePath } from "./report/a11yForM
 export type { A11yModuleSummary } from "./report/a11yForModule";
 export { tokenStyleFindingsForModule } from "./report/tokenStyleFindingsForModule";
 export { codeScoreSummaryForModule } from "./report/codeScoreForModule";
+export { findingsForComponent } from "./report/findingsForComponent";
 export type { CodeScoreModuleSummary } from "./report/codeScoreForModule";
 export { TokenWall } from "./dashboard/TokenWall";
 export { DashboardBody } from "./dashboard/DashboardBody";

package/src/playground/buildPlaygroundEntriesFromReport.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import type { PlaygroundEntry } from "../types/playground";
+import type { WorkspaceReport } from "../types/report";
+import { resolvePlaygroundEntry } from "./buildPlaygroundEntriesFromReport";
+
+const entries: PlaygroundEntry[] = [
+  {
+    id: "PrimaryButton",
+    meta: { id: "PrimaryButton", title: "PrimaryButton" },
+    modulePath: "@dslint-scan/src/components/PrimaryButton.tsx",
+    controls: [],
+    Preview: () => null,
+  },
+];
+
+describe("resolvePlaygroundEntry", () => {
+  it("finds by catalog export name id", () => {
+    expect(resolvePlaygroundEntry(entries, "PrimaryButton")).toBe(entries[0]);
+  });
+
+  it("returns undefined for unknown name", () => {
+    expect(resolvePlaygroundEntry(entries, "Missing")).toBeUndefined();
+  });
+});
+
+describe("playground catalog id alignment", () => {
+  it("report playgrounds use export_name as id", () => {
+    const report: WorkspaceReport = {
+      root: "/repo",
+      files: [],
+      findings: [],
+      scores: {
+        system_health: 0,
+        token_adoption: 0,
+        component_adoption: 0,
+        ux_consistency: 0,
+      },
+      ownership: [],
+      duplicate_components: [],
+      usage_by_component: [],
+      playgrounds: [
+        {
+          id: "Card",
+          export_name: "Card",
+          rel_path: "src/components/nested/DuplicateCardA.tsx",
+          declared_props: [],
+        },
+      ],
+    };
+    expect(report.playgrounds?.[0]?.id).toBe("Card");
+    expect(report.playgrounds?.[0]?.export_name).toBe("Card");
+  });
+});