dslinter 0.1.13 → 0.2.0

package/src/components/Sidebar.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
-import { IconMoon, IconSearch, IconSun } from "./icons";
+import { IconChevronDown, IconMoon, IconSearch, IconSun } from "./icons";
 import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
 
-import { componentCatalogNamesFromReport } from "../dashboard/aggregate";
+import {
+  componentCatalogTreeFromReport,
+} from "../dashboard/aggregate";
 import type { WorkspaceReport } from "../types/report";
 import type { HashRoute } from "../shell/hashRoute";
 import type { DashboardThemePreference } from "../shell/DashboardLayout";
@@ -16,6 +18,7 @@ type Props = {
   onOpenCommandPalette: () => void;
   theme: DashboardThemePreference;
   onThemeChange: (next: DashboardThemePreference) => void;
+  catalogNames: string[];
 };
 
 function SearchShortcutBadge() {
@@ -32,13 +35,29 @@ function SearchShortcutBadge() {
 }
 
 function navButtonClass(active: boolean) {
-  return `w-full rounded-md px-2.5 py-1.5 text-left text-sm transition ${
+  return `w-full rounded-md truncate px-2.5 py-1.5 text-left text-sm transition ${
     active
       ? "bg-sidebar-primary text-sidebar-primary-foreground shadow-xs"
       : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
   }`;
 }
 
+function familyParentButtonClass(active: boolean) {
+  return `min-w-0 flex-1 rounded-l-md truncate px-2.5 py-1.5 text-left text-sm transition ${
+    active
+      ? "bg-sidebar-primary text-sidebar-primary-foreground shadow-xs"
+      : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+  }`;
+}
+
+function familyToggleClass(active: boolean) {
+  return `flex h-[32px] w-8 shrink-0 items-center justify-center rounded-r-md transition ${
+    active
+      ? "bg-sidebar-primary text-sidebar-primary-foreground shadow-xs"
+      : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+  }`;
+}
+
 function sectionLabel(text: string) {
   return (
     <p className="mb-1.5 mt-4 px-2.5 text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/50 first:mt-0">
@@ -56,16 +75,31 @@ export function Sidebar({
   onOpenCommandPalette,
   theme,
   onThemeChange,
+  catalogNames,
 }: Props) {
-  const catalogNames = useMemo(
-    () => componentCatalogNamesFromReport(report),
-    [report],
-  );
+  const catalogTree = useMemo(() => componentCatalogTreeFromReport(report), [report]);
+  const [expandedFamilies, setExpandedFamilies] = useState<Set<string>>(() => new Set());
   const tokensActive = route.view === "tokens";
-  const governanceActive =
-    route.view === "governance" && route.catalog == null;
+  const governanceActive = route.view === "governance";
+
+  useEffect(() => {
+    if (route.view !== "component") return;
+    const activeFamily = catalogTree.find(
+      (item) =>
+        item.type === "family" &&
+        (item.parent === route.componentId || item.children.includes(route.componentId)),
+    );
+    if (!activeFamily || activeFamily.type !== "family") return;
+    setExpandedFamilies((prev) => {
+      if (prev.has(activeFamily.parent)) return prev;
+      const next = new Set(prev);
+      next.add(activeFamily.parent);
+      return next;
+    });
+  }, [catalogTree, route]);
 
   const onThemeValueChange = (value: string) => {
+    // Radix ToggleGroup (single) emits "" when re-clicking the active item — keep selection.
     if (value !== "light" && value !== "dark") return;
     onThemeChange(value);
   };
@@ -75,12 +109,7 @@ export function Sidebar({
       <div className="sticky top-0 z-10 shrink-0 border-b border-sidebar-border bg-sidebar px-6 py-4">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center text-sidebar-foreground">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <g fill="currentColor">
                 <path
                   d="m22.346,4.836l-3.182-3.182c-.779-.78-2.049-.78-2.828,0l-3.182,3.182c-.78.78-.78,2.048,0,2.828l3.182,3.182c.39.39.902.585,1.414.585s1.024-.195,1.414-.585l3.182-3.182c.78-.78.78-2.048,0-2.828Z"
@@ -150,15 +179,11 @@ export function Sidebar({
         </button>
 
         {sectionLabel(
-          catalogNames.length > 0
-            ? `Components (${catalogNames.length})`
-            : "Components",
+          catalogNames.length > 0 ? `Components (${catalogNames.length})` : "Components",
         )}
         <div className="space-y-0.5">
           {reportLoading && catalogNames.length === 0 ? (
-            <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">
-              Loading components…
-            </p>
+            <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">Loading components…</p>
           ) : null}
           {reportError && catalogNames.length === 0 ? (
             <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">
@@ -170,20 +195,90 @@ export function Sidebar({
               No components in scan
             </p>
           ) : null}
-          {catalogNames.map((name) => {
-            const active =
-              route.view === "component" && route.componentId === name;
+          {catalogTree.map((item) => {
+            if (item.type === "component") {
+              const active = route.view === "component" && route.componentId === item.name;
+              return (
+                <button
+                  key={item.name}
+                  type="button"
+                  onClick={() => onNavigate({ view: "component", componentId: item.name })}
+                  className={navButtonClass(active)}
+                >
+                  {item.name}
+                </button>
+              );
+            }
+
+            const parentActive = route.view === "component" && route.componentId === item.parent;
+            const childActive =
+              route.view === "component" && item.children.includes(route.componentId);
+            const expanded = expandedFamilies.has(item.parent);
             return (
-              <button
-                key={name}
-                type="button"
-                onClick={() =>
-                  onNavigate({ view: "component", componentId: name })
-                }
-                className={navButtonClass(active)}
-              >
-                {name}
-              </button>
+              <div key={item.parent}>
+                <div className="flex min-w-0">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      onNavigate({
+                        view: "component",
+                        componentId: item.parent,
+                      })
+                    }
+                    className={familyParentButtonClass(parentActive)}
+                  >
+                    {item.parent}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setExpandedFamilies((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.parent)) {
+                          next.delete(item.parent);
+                        } else {
+                          next.add(item.parent);
+                        }
+                        return next;
+                      })
+                    }
+                    className={familyToggleClass(parentActive || childActive)}
+                    aria-label={
+                      expanded
+                        ? `Collapse ${item.parent} subcomponents`
+                        : `Expand ${item.parent} subcomponents`
+                    }
+                    aria-expanded={expanded}
+                  >
+                    <IconChevronDown
+                      className={`size-4 transition-transform ${expanded ? "rotate-180" : ""}`}
+                      aria-hidden
+                    />
+                  </button>
+                </div>
+                {expanded ? (
+                  <div className="mt-0.5 space-y-0.5 border-l border-sidebar-border/70 pl-3">
+                    {item.children.map((child) => {
+                      const active = route.view === "component" && route.componentId === child;
+                      return (
+                        <button
+                          key={child}
+                          type="button"
+                          onClick={() =>
+                            onNavigate({
+                              view: "component",
+                              componentId: child,
+                            })
+                          }
+                          className={`${navButtonClass(active)} text-xs`}
+                        >
+                          {child}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : null}
+              </div>
             );
           })}
         </div>
@@ -203,20 +298,10 @@ export function Sidebar({
           onValueChange={onThemeValueChange}
           aria-label="Color theme"
         >
-          <ToggleGroupItem
-            value="light"
-            className="flex-1"
-            aria-label="Light theme"
-            title="Light"
-          >
+          <ToggleGroupItem value="light" className="flex-1" aria-label="Light theme" title="Light">
             <IconSun className="size-4" aria-hidden />
           </ToggleGroupItem>
-          <ToggleGroupItem
-            value="dark"
-            className="flex-1"
-            aria-label="Dark theme"
-            title="Dark"
-          >
+          <ToggleGroupItem value="dark" className="flex-1" aria-label="Dark theme" title="Dark">
             <IconMoon className="size-4" aria-hidden />
           </ToggleGroupItem>
         </ToggleGroup>

package/src/components/TruncatedPath.tsx

@@ -0,0 +1,44 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import {
+  monospaceCharCountThatFits,
+  truncatePathMiddle,
+} from "../dashboard/paths";
+import { cn } from "../lib/utils";
+
+export function TruncatedPath({
+  path,
+  className,
+  title,
+}: {
+  path: string;
+  className?: string;
+  title?: string;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [displayPath, setDisplayPath] = useState(path);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const sync = () => {
+      const maxLength = monospaceCharCountThatFits(el);
+      setDisplayPath(truncatePathMiddle(path, maxLength));
+    };
+
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [path]);
+
+  return (
+    <span
+      ref={ref}
+      className={cn("block min-w-0 font-mono", className)}
+      title={title ?? path}
+    >
+      {displayPath}
+    </span>
+  );
+}

package/src/components/controlApiTable.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { controlsToApiRows } from "./controlApiTable";
+import type { PlaygroundControl } from "../types/controls";
+
+describe("controlsToApiRows", () => {
+  it("does not expose generated example defaults as type badges", () => {
+    const controls: PlaygroundControl[] = [
+      {
+        key: "children",
+        label: "children",
+        type: "string",
+        default: "Example",
+        defaultSource: "example",
+      },
+      {
+        key: "variant",
+        label: "variant",
+        type: "string",
+        default: "default",
+        defaultSource: "type",
+      },
+    ];
+
+    expect(controlsToApiRows(controls)).toMatchObject([
+      { prop: "children", default: "\"Example\"", defaultBadge: null },
+      { prop: "variant", default: "\"default\"", defaultBadge: "\"default\"" },
+    ]);
+  });
+});

package/src/components/controlApiTable.ts

@@ -6,6 +6,8 @@ export type ApiTableRow = {
   /** Select option values; Type column renders these as badges instead of a `|` string. */
   unionLiterals: string[] | null;
   default: string;
+  /** Default text that is API-sourced enough to show in the Type badge. */
+  defaultBadge: string | null;
 };
 
 function formatDefault(c: PlaygroundControl): string {
@@ -49,5 +51,6 @@ export function controlsToApiRows(controls: PlaygroundControl[]): ApiTableRow[]
     type: formatType(c),
     unionLiterals: unionLiteralsForControl(c),
     default: formatDefault(c),
+    defaultBadge: c.defaultSource === "type" ? formatDefault(c) : null,
   }));
 }

package/src/components/playgroundUsageHighlight.ts

@@ -1,9 +1,16 @@
 import tsx from "@shikijs/langs/tsx";
 import githubDark from "@shikijs/themes/github-dark";
+import githubLight from "@shikijs/themes/github-light";
 import { createHighlighterCore, type HighlighterCore } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 
-const THEME = "github-dark";
+export type PlaygroundUsageTheme = "light" | "dark";
+
+const SHIKI_THEMES: Record<PlaygroundUsageTheme, string> = {
+  light: "github-light",
+  dark: "github-dark",
+};
+
 const LANG = "tsx";
 
 let highlighterPromise: Promise<HighlighterCore> | null = null;
@@ -11,7 +18,7 @@ let highlighterPromise: Promise<HighlighterCore> | null = null;
 function getHighlighter(): Promise<HighlighterCore> {
   if (highlighterPromise == null) {
     highlighterPromise = createHighlighterCore({
-      themes: [githubDark],
+      themes: [githubLight, githubDark],
       langs: [tsx],
       engine: createJavaScriptRegexEngine(),
     });
@@ -26,9 +33,13 @@ function assertNotAborted(signal: AbortSignal | undefined): void {
 /** Renders usage source to Shiki HTML. */
 export async function renderPlaygroundUsageHtml(
   source: string,
+  theme: PlaygroundUsageTheme,
   signal?: AbortSignal,
 ): Promise<string> {
   const highlighter = await getHighlighter();
   assertNotAborted(signal);
-  return highlighter.codeToHtml(source, { lang: LANG, theme: THEME });
+  return highlighter.codeToHtml(source, {
+    lang: LANG,
+    theme: SHIKI_THEMES[theme],
+  });
 }

package/src/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center border font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  "inline-flex items-center justify-center border font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
     <div
       data-slot="table-container"
       className={cn(
-        "relative w-full overflow-x-auto rounded-lg border border-border bg-card shadow-xs",
+        "relative w-full overflow-x-auto rounded-lg border border-border bg-card",
         className,
       )}
     >
@@ -58,7 +58,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
         className,
       )}
       {...props}

package/src/dashboard/ComponentCatalog.tsx

@@ -26,21 +26,7 @@ import {
 import { shortPath } from "./paths";
 import type { WorkspaceReport } from "../types/report";
 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 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;
-}
+import { TruncatedPath } from "../components/TruncatedPath";
 
 const catalogHoverTriggerClass =
   "cursor-default text-xs underline decoration-dotted underline-offset-2 hover:text-foreground";
@@ -103,8 +89,11 @@ function CatalogAppUsageHover({
         </p>
         <ul className="mt-2 max-h-48 space-y-0.5 overflow-y-auto font-mono text-xs text-muted-foreground">
           {sortedFiles.map((file) => (
-            <li key={file} className="truncate" title={shortPath(root, file)}>
-              {shortPath(root, file)}
+            <li key={file} className="min-w-0">
+              <TruncatedPath
+                path={shortPath(root, file)}
+                className="text-xs text-muted-foreground"
+              />
             </li>
           ))}
         </ul>
@@ -122,12 +111,16 @@ export function ComponentCatalog({
 }) {
   const defs = aggregateDefinitions(report);
   const usages = usageMap(report);
-  const names = catalogComponentNames(defs, usages);
-  const unusedProps = useMemo(() => buildUnusedPropSet(report), [report]);
-  const declaredByName = useMemo(
-    () => aggregateDeclaredProps(report),
-    [report],
-  );
+  const names = catalogComponentNames(defs, usages, report);
+  const { unusedProps, declaredByName } = useMemo(() => {
+    const declaredByName = aggregateDeclaredProps(report);
+    const unusedProps = new Set<string>();
+    for (const [componentName, declared] of declaredByName) {
+      const unused = buildUnusedPropSetForComponent(report, componentName, declared);
+      for (const key of unused) unusedProps.add(key);
+    }
+    return { unusedProps, declaredByName };
+  }, [report]);
 
   return (
     <Table>

package/src/dashboard/ComponentUsageDetails.tsx

@@ -11,7 +11,7 @@ import type { UsageLocation, WorkspaceReport } from "../types/report";
 import { usageMap } from "./aggregate";
 import { shortPath } from "./paths";
 import { EmptyCard } from "../components/EmptyCard";
-import { InlineCode } from "../components/InlineCode";
+import { TruncatedPath } from "../components/TruncatedPath";
 
 function formatCallSiteProps(loc: UsageLocation): string {
   if (!loc.props.length) return "—";
@@ -47,18 +47,14 @@ export function ComponentUsageDetails({
   if (!report) {
     return (
       <p className="text-sm text-muted-foreground">
-        Load <span className="font-mono">dslint-report.json</span> to see where
-        this component is used in the workspace.
+        Load <span className="font-mono">dslinter-report.json</span> to see
+        where this component is used in the workspace.
       </p>
     );
   }
 
   if (!usage) {
-    return (
-      <EmptyCard>
-        No found usage for <InlineCode>{componentId}</InlineCode>.
-      </EmptyCard>
-    );
+    return <EmptyCard>0 imports of {componentId} found in codebase</EmptyCard>;
   }
 
   const rows = sortedLocations(usage.usage_locations);
@@ -87,13 +83,8 @@ export function ComponentUsageDetails({
           const propsText = formatCallSiteProps(loc);
           return (
             <TableRow key={`${loc.path}-${loc.line}-${i}`}>
-              <TableCell className="min-w-0 max-w-0">
-                <span
-                  className="block truncate font-mono text-xs text-foreground"
-                  title={fileText}
-                >
-                  {fileText}
-                </span>
+              <TableCell className="min-w-0">
+                <TruncatedPath path={fileText} className="text-xs" />
               </TableCell>
               <TableCell className="tabular-nums text-muted-foreground">
                 {loc.line}

package/src/dashboard/DashboardBody.tsx

@@ -1,12 +1,4 @@
 import { Section } from "../components/Section";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../components/ui/table";
 import type { WorkspaceReport } from "../types/report";
 import { ComponentCatalog } from "./ComponentCatalog";
 import { FindingsList } from "./FindingsList";
@@ -30,33 +22,6 @@ export function DashboardBody({
         </div>
       ) : null}
 
-      {report.ownership.length > 0 ? (
-        <Section
-          id="ownership"
-          title="Ownership"
-          description="Prefix match from <span className='font-mono'>.dslint.json</span> — useful for adoption rollups."
-        >
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Owner</TableHead>
-                <TableHead>Files</TableHead>
-                <TableHead>Definitions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {report.ownership.map((row) => (
-                <TableRow key={row.owner}>
-                  <TableCell>{row.owner}</TableCell>
-                  <TableCell>{row.files}</TableCell>
-                  <TableCell>{row.definitions}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Section>
-      ) : null}
-
       <Section
         id="components"
         title="Components"