dslinter 0.4.0 → 0.5.1

package/src/dashboard/ComponentUsageDetails.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import {
   Table,
   TableBody,
@@ -9,10 +9,8 @@ import {
 } from "../components/ui/table";
 import type { UsageLocation, WorkspaceReport } from "../types/report";
 import { usageMap } from "./aggregate";
-import { openSourceFile } from "./editorLink";
-import { resolveReportAbsolutePath, shortPath } from "./paths";
 import { EmptyCard } from "../components/EmptyCard";
-import { TruncatedPath } from "../components/TruncatedPath";
+import { SourceLocationLink } from "./SourceLocationLink";
 
 function formatCallSiteProps(loc: UsageLocation): string {
   if (!loc.props.length) return "—";
@@ -33,40 +31,6 @@ function sortedLocations(
   return list;
 }
 
-function UsageLocationLink({
-  root,
-  loc,
-}: {
-  root: string;
-  loc: UsageLocation;
-}) {
-  const fileText = shortPath(root, loc.path);
-  const locationText = `${fileText}:${loc.line}`;
-  const absolutePath = resolveReportAbsolutePath(root, loc.path);
-
-  const handleClick = useCallback(() => {
-    void openSourceFile(absolutePath, loc.line).catch((err) => {
-      const message = err instanceof Error ? err.message : String(err);
-      window.alert(`Could not open file: ${message}`);
-    });
-  }, [absolutePath, loc.line]);
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className="block min-w-0 w-full text-left text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
-      title={locationText}
-    >
-      <TruncatedPath
-        path={`${fileText}:${loc.line}`}
-        className="text-xs"
-        title={undefined}
-      />
-    </button>
-  );
-}
-
 export function ComponentUsageDetails({
   report,
   componentId,
@@ -117,7 +81,11 @@ export function ComponentUsageDetails({
           return (
             <TableRow key={`${loc.path}-${loc.line}-${i}`}>
               <TableCell className="min-w-0">
-                <UsageLocationLink root={report.root} loc={loc} />
+                <SourceLocationLink
+                  root={report.root}
+                  path={loc.path}
+                  line={loc.line}
+                />
               </TableCell>
               <TableCell className="min-w-0">
                 <span

package/src/dashboard/DashboardBody.tsx

@@ -79,11 +79,7 @@ export function DashboardBody({
 
       <GovernanceInventoryTabs value={tab} onChange={setTab} counts={counts} />
 
-      <Section
-        id={section.id}
-        title={section.title}
-        description={section.description}
-      >
+      <Section id={section.id}>
         {tab === "unused" ? (
           <UnusedComponentsList
             components={unusedComponents}
@@ -103,8 +99,7 @@ export function DashboardBody({
             className="font-medium text-foreground underline decoration-dotted underline-offset-2 transition hover:decoration-solid"
           >
             View all components
-          </button>
-          {" "}
+          </button>{" "}
           for prop usage and app reference details.
         </p>
       ) : null}

package/src/dashboard/FindingsList.tsx

@@ -7,11 +7,11 @@ import {
   TableHeader,
   TableRow,
 } from "../components/ui/table";
-import { shortPath } from "./paths";
 import type { LintFinding, Severity } from "../types/report";
 import { Badge } from "../components/ui/badge";
+import { EmptyCard } from "../components/EmptyCard";
 import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
-import { TruncatedPath } from "../components/TruncatedPath";
+import { SourceLocationLink } from "./SourceLocationLink";
 
 type Filter = "all" | Severity;
 
@@ -24,6 +24,12 @@ function isFilter(value: string): value is Filter {
   );
 }
 
+function emptyFilterMessage(filter: Exclude<Filter, "all">): string {
+  if (filter === "error") return "No errors in these findings.";
+  if (filter === "warning") return "No warnings in these findings.";
+  return "No info findings in these findings.";
+}
+
 export function FindingsList({
   findings,
   root,
@@ -44,16 +50,15 @@ export function FindingsList({
   }, [findings]);
 
   const filtered = useMemo(
-    () => (filter === "all" ? findings : findings.filter((f) => f.severity === filter)),
+    () =>
+      filter === "all"
+        ? findings
+        : findings.filter((f) => f.severity === filter),
     [findings, filter],
   );
 
   if (findings.length === 0) {
-    return (
-      <p className="rounded-lg border border-dashed border-border bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground">
-        No findings
-      </p>
-    );
+    return <EmptyCard>No findings</EmptyCard>;
   }
 
   return (
@@ -107,55 +112,58 @@ export function FindingsList({
         </ToggleGroupItem>
       </ToggleGroup>
 
-      <Table className="mt-4">
-        <TableHeader>
-          <TableRow>
-            <TableHead scope="col">Severity</TableHead>
-            <TableHead scope="col">Rule</TableHead>
-            <TableHead scope="col">Message</TableHead>
-            <TableHead scope="col">File</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody className="align-top text-foreground">
-          {filtered.map((f, i) => (
-            <TableRow
-              key={`${f.rule_id}-${f.path}-${f.line ?? "x"}-${i}`}
-              className="border-border hover:bg-transparent"
-            >
-              <TableCell className="px-3 py-2">
-                <Badge
-                  variant={
-                    f.severity === "error"
-                      ? "destructive"
-                      : f.severity === "warning"
-                        ? "secondary"
-                        : "outline"
-                  }
-                >
-                  {f.severity}
-                </Badge>
-              </TableCell>
-              <TableCell className="px-3 py-2 font-mono text-xs text-muted-foreground">
-                {f.rule_id}
-              </TableCell>
-              <TableCell className="whitespace-normal px-3 py-2 text-sm">
-                {f.message}
-              </TableCell>
-              <TableCell className="min-w-0 px-3 py-2 font-mono text-xs text-muted-foreground">
-                <div className="flex min-w-0 items-baseline">
-                  <TruncatedPath
-                    path={shortPath(root, f.path)}
-                    className="min-w-0 flex-1 text-xs"
-                  />
-                  <span className="shrink-0">
-                    :{f.line != null ? f.line : "—"}
-                  </span>
-                </div>
-              </TableCell>
+      {filtered.length === 0 ? (
+        <EmptyCard className="mt-4">
+          {filter === "all" ? "No findings" : emptyFilterMessage(filter)}
+        </EmptyCard>
+      ) : (
+        <Table className="mt-4">
+          <TableHeader>
+            <TableRow>
+              <TableHead scope="col">Severity</TableHead>
+              <TableHead scope="col">Rule</TableHead>
+              <TableHead scope="col">File</TableHead>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHeader>
+          <TableBody className="align-top text-foreground">
+            {filtered.map((f, i) => (
+              <TableRow
+                key={`${f.rule_id}-${f.path}-${f.line ?? "x"}-${i}`}
+                className="border-border hover:bg-transparent"
+              >
+                <TableCell className="px-3 py-2">
+                  <Badge
+                    variant={
+                      f.severity === "error"
+                        ? "destructive"
+                        : f.severity === "warning"
+                          ? "secondary"
+                          : "outline"
+                    }
+                  >
+                    {f.severity}
+                  </Badge>
+                </TableCell>
+                <TableCell className="min-w-0 whitespace-normal px-3 py-2">
+                  <div className="font-mono text-xs text-muted-foreground">
+                    {f.rule_id}
+                  </div>
+                  <div className="mt-0.5 text-xs text-pretty text-foreground">
+                    {f.message}
+                  </div>
+                </TableCell>
+                <TableCell className="min-w-0 px-3 py-2">
+                  <SourceLocationLink
+                    root={root}
+                    path={f.path}
+                    line={f.line}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </div>
   );
 }

package/src/dashboard/ScannedTokenWall.tsx

@@ -5,6 +5,7 @@ import {
   HoverCardTrigger,
 } from "../components/ui/hover-card";
 import { cn } from "../lib/utils";
+import { EmptyCard } from "../components/EmptyCard";
 import { TruncatedPath } from "../components/TruncatedPath";
 import {
   filterTokenRows,
@@ -20,6 +21,14 @@ const filterTabs: { id: TokenUsageFilter; label: string }[] = [
   { id: "unused", label: "Unused" },
 ];
 
+function emptyFilterMessage(filter: TokenUsageFilter): string {
+  if (filter === "used") return "No used theme tokens match this filter.";
+  if (filter === "unused") {
+    return "No unused theme tokens — every scanned token is referenced in the workspace.";
+  }
+  return "No theme tokens found.";
+}
+
 function TokenSection({
   title,
   subtitle,
@@ -215,31 +224,37 @@ export function ScannedTokenWall({ view }: { view: MergedTokenView }) {
         </div>
       </div>
 
-      <ColorSection rows={filtered} />
-      <ListSection
-        title="Spacing"
-        subtitle="--spacing-* custom properties."
-        rows={filtered}
-        category="spacing"
-      />
-      <ListSection
-        title="Radius"
-        subtitle="--radius-* custom properties."
-        rows={filtered}
-        category="radius"
-      />
-      <ListSection
-        title="Typography"
-        subtitle="--font-* custom properties."
-        rows={filtered}
-        category="typography"
-      />
-      <ListSection
-        title="Other"
-        subtitle="Additional CSS variables."
-        rows={filtered}
-        category="other"
-      />
+      {filtered.length === 0 ? (
+        <EmptyCard>{emptyFilterMessage(filter)}</EmptyCard>
+      ) : (
+        <>
+          <ColorSection rows={filtered} />
+          <ListSection
+            title="Spacing"
+            subtitle="--spacing-* custom properties."
+            rows={filtered}
+            category="spacing"
+          />
+          <ListSection
+            title="Radius"
+            subtitle="--radius-* custom properties."
+            rows={filtered}
+            category="radius"
+          />
+          <ListSection
+            title="Typography"
+            subtitle="--font-* custom properties."
+            rows={filtered}
+            category="typography"
+          />
+          <ListSection
+            title="Other"
+            subtitle="Additional CSS variables."
+            rows={filtered}
+            category="other"
+          />
+        </>
+      )}
     </section>
   );
 }

package/src/dashboard/SourceLocationLink.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import { TruncatedPath } from "../components/TruncatedPath";
+import { openSourceFile } from "./editorLink";
+import { resolveReportAbsolutePath, shortPath } from "./paths";
+
+export function SourceLocationLink({
+  root,
+  path,
+  line,
+}: {
+  root: string;
+  path: string;
+  line?: number | null;
+}) {
+  const fileText = shortPath(root, path);
+  const locationText = line != null ? `${fileText}:${line}` : fileText;
+  const absolutePath = resolveReportAbsolutePath(root, path);
+
+  const handleClick = useCallback(() => {
+    void openSourceFile(absolutePath, line ?? undefined).catch((err) => {
+      const message = err instanceof Error ? err.message : String(err);
+      window.alert(`Could not open file: ${message}`);
+    });
+  }, [absolutePath, line]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="block min-w-0 w-full text-left text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+      title={locationText}
+    >
+      <TruncatedPath
+        path={locationText}
+        className="text-xs"
+        title={undefined}
+      />
+    </button>
+  );
+}

package/src/mcp/rule-catalog.json

@@ -115,8 +115,8 @@
     "rule_id": "code-inline-style",
     "pillar": "code",
     "default_severity": "warning",
-    "description": "Inline JSX style={{}} bypasses token/Tailwind conventions.",
-    "fix_hint": "Use className with theme utilities."
+    "description": "Inline JSX style uses hardcoded colors not in scanned CSS design tokens.",
+    "fix_hint": "Use className with theme utilities or CSS variables instead of inline color values."
   },
   {
     "rule_id": "code-empty-catch",

package/src/playground/inferKitJsx.ts

@@ -10,7 +10,53 @@ export type KitRootPropBinding = {
 };
 
 function kitSource(fn: Function): string {
-  return fn.toString();
+  const src = fn.toString();
+  const MAX_KIT_SOURCE_LEN = 64_000;
+  return src.length > MAX_KIT_SOURCE_LEN ? src.slice(0, MAX_KIT_SOURCE_LEN) : src;
+}
+
+function skipWhitespace(src: string, start: number): number {
+  let i = start;
+  while (i < src.length && /\s/.test(src[i]!)) i += 1;
+  return i;
+}
+
+function isIdentChar(ch: string, first = false): boolean {
+  if (first) return /[A-Za-z_$]/.test(ch);
+  return /[\w$]/.test(ch);
+}
+
+function readIdent(
+  src: string,
+  start: number,
+  firstUpper = false,
+): { value: string; end: number } | null {
+  if (start >= src.length) return null;
+  const ch = src[start]!;
+  if (firstUpper && !/[A-Z]/.test(ch)) return null;
+  if (!isIdentChar(ch, true)) return null;
+  let end = start + 1;
+  while (end < src.length && isIdentChar(src[end]!, false)) end += 1;
+  const value = src.slice(start, end);
+  if (firstUpper && !/^[A-Z][A-Za-z0-9]*$/.test(value)) return null;
+  return { value, end };
+}
+
+function skipUntilChar(src: string, start: number, target: string): number {
+  let quote: "'" | '"' | "`" | null = null;
+  for (let i = start; i < src.length; i += 1) {
+    const ch = src[i]!;
+    if (quote) {
+      if (ch === quote && src[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      continue;
+    }
+    if (ch === target) return i;
+  }
+  return -1;
 }
 
 /** Vite/esbuild wraps JSX as `(0, import.createElement)(Type, props)` (often split across lines). */
@@ -58,9 +104,45 @@ function collectJsxRuntimeSlots(src: string, out: KitJsxSlot[]): void {
 }
 
 function collectSourceJsxSlots(src: string, out: KitJsxSlot[]): void {
-  const re = /<([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?>\s*\{\s*([A-Za-z_$][\w$]*)\s*\}\s*<\/\1>/g;
-  for (const match of src.matchAll(re)) {
-    out.push({ component: match[1]!, param: match[2]! });
+  let i = 0;
+  while (i < src.length) {
+    const lt = src.indexOf("<", i);
+    if (lt === -1) break;
+    if (src[lt + 1] === "/") {
+      i = lt + 1;
+      continue;
+    }
+    const ident = readIdent(src, lt + 1, true);
+    if (!ident) {
+      i = lt + 1;
+      continue;
+    }
+    const tagEnd = skipUntilChar(src, ident.end, ">");
+    if (tagEnd === -1) break;
+    let j = skipWhitespace(src, tagEnd + 1);
+    if (src[j] !== "{") {
+      i = lt + 1;
+      continue;
+    }
+    j = skipWhitespace(src, j + 1);
+    const paramIdent = readIdent(src, j);
+    if (!paramIdent) {
+      i = lt + 1;
+      continue;
+    }
+    j = skipWhitespace(src, paramIdent.end);
+    if (src[j] !== "}") {
+      i = lt + 1;
+      continue;
+    }
+    j = skipWhitespace(src, j + 1);
+    const closeTag = `</${ident.value}>`;
+    if (!src.slice(j).startsWith(closeTag)) {
+      i = lt + 1;
+      continue;
+    }
+    out.push({ component: ident.value, param: paramIdent.value });
+    i = j + closeTag.length;
   }
 }
 
@@ -118,6 +200,60 @@ function parseJsxPropsObject(raw: string | undefined): Array<{ prop: string; par
   return out;
 }
 
+function parseJsxAttrBindings(attrs: string, component: string, out: KitRootPropBinding[]): void {
+  let i = 0;
+  while (i < attrs.length) {
+    i = skipWhitespace(attrs, i);
+    if (i >= attrs.length) break;
+    const propIdent = readIdent(attrs, i);
+    if (!propIdent) {
+      i += 1;
+      continue;
+    }
+    i = skipWhitespace(attrs, propIdent.end);
+    if (attrs[i] !== "=") {
+      i = propIdent.end;
+      continue;
+    }
+    i = skipWhitespace(attrs, i + 1);
+    if (attrs[i] !== "{") {
+      i += 1;
+      continue;
+    }
+    i = skipWhitespace(attrs, i + 1);
+    const paramIdent = readIdent(attrs, i);
+    if (!paramIdent) continue;
+    const prop = propIdent.value;
+    if (prop === "className" || prop === "style" || prop === "asChild") {
+      i = paramIdent.end;
+      continue;
+    }
+    out.push({ component, prop, param: paramIdent.value });
+    i = paramIdent.end;
+  }
+}
+
+function collectSourceRootPropBindings(src: string, out: KitRootPropBinding[]): void {
+  let i = 0;
+  while (i < src.length) {
+    const lt = src.indexOf("<", i);
+    if (lt === -1) break;
+    if (src[lt + 1] === "/") {
+      i = lt + 1;
+      continue;
+    }
+    const ident = readIdent(src, lt + 1, true);
+    if (!ident) {
+      i = lt + 1;
+      continue;
+    }
+    const tagEnd = skipUntilChar(src, ident.end, ">");
+    if (tagEnd === -1) break;
+    parseJsxAttrBindings(src.slice(ident.end, tagEnd), ident.value, out);
+    i = tagEnd + 1;
+  }
+}
+
 function collectRootPropBindings(src: string, out: KitRootPropBinding[]): void {
   const normalized = normalizeKitSource(src);
   for (const match of normalized.matchAll(RUNTIME_ROOT_PROPS_RE)) {
@@ -126,16 +262,7 @@ function collectRootPropBindings(src: string, out: KitRootPropBinding[]): void {
     }
   }
 
-  const sourceRoot = /<([A-Z][A-Za-z0-9]*)([^>]*)>/g;
-  for (const match of src.matchAll(sourceRoot)) {
-    const attrs = match[2] ?? "";
-    const attrRe = /\b([A-Za-z_$][\w$]*)\s*=\s*\{\s*([A-Za-z_$][\w$]*)\s*\}/g;
-    for (const attr of attrs.matchAll(attrRe)) {
-      const prop = attr[1]!;
-      if (prop === "className" || prop === "style" || prop === "asChild") continue;
-      out.push({ component: match[1]!, prop, param: attr[2]! });
-    }
-  }
+  collectSourceRootPropBindings(src, out);
 }
 
 /** Root component prop bindings such as `<Alert variant={variant}>`. */

package/src/playground/inferKitParams.ts

@@ -91,8 +91,46 @@ function findTopLevelChar(input: string, target: string): number {
 
 function objectDestructuringSource(fn: Function): string | undefined {
   const src = fn.toString().trim();
-  const match = src.match(/^(?:async\s*)?(?:function\s*)?\(\s*\{([\s\S]*?)\}\s*(?::[^)=]*)?\)/);
-  return match?.[1];
+  const MAX_KIT_SOURCE_LEN = 64_000;
+  const bounded = src.length > MAX_KIT_SOURCE_LEN ? src.slice(0, MAX_KIT_SOURCE_LEN) : src;
+
+  let i = 0;
+  if (bounded.startsWith("async")) i = "async".length;
+  i = skipWhitespace(bounded, i);
+  if (bounded.slice(i).startsWith("function")) i += "function".length;
+  i = skipWhitespace(bounded, i);
+  if (bounded[i] !== "(") return undefined;
+  i = skipWhitespace(bounded, i + 1);
+  if (bounded[i] !== "{") return undefined;
+
+  const start = i + 1;
+  let depth = 1;
+  i += 1;
+  let quote: "'" | '"' | "`" | null = null;
+  while (i < bounded.length && depth > 0) {
+    const ch = bounded[i]!;
+    if (quote) {
+      if (ch === quote && bounded[i - 1] !== "\\") quote = null;
+      i += 1;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      i += 1;
+      continue;
+    }
+    if (ch === "{") depth += 1;
+    else if (ch === "}") depth -= 1;
+    i += 1;
+  }
+  if (depth !== 0) return undefined;
+  return bounded.slice(start, i - 1);
+}
+
+function skipWhitespace(src: string, start: number): number {
+  let i = start;
+  while (i < src.length && /\s/.test(src[i]!)) i += 1;
+  return i;
 }
 
 /** Read destructured parameter keys (and inline defaults) from a kit callback. */

package/src/playground/playgroundJoin.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { WorkspaceReport } from "../types/report";
-import { defaultConsumerGlobKeyFromRelPath, diagnosePlaygroundJoinSkips } from "./playgroundJoin";
+import {
+  defaultConsumerGlobKeyFromRelPath,
+  diagnosePlaygroundJoinSkips,
+  isStaticBundledPreviewUnavailable,
+} from "./playgroundJoin";
 import { buildPlaygroundEntriesFromReportWithSkips } from "./buildPlaygroundEntriesFromReport";
 
 describe("defaultConsumerGlobKeyFromRelPath", () => {
@@ -140,3 +144,33 @@ describe("diagnosePlaygroundJoinSkips", () => {
     expect(entries[0]?.modulePath).toBe("../Components/Button.tsx");
   });
 });
+
+describe("isStaticBundledPreviewUnavailable", () => {
+  it("returns true in production when all skips are missing embed modules", () => {
+    const skipped = [
+      {
+        export_name: "AppLogo",
+        rel_path: "resources/js/components/app-logo.tsx",
+        globKey: "@dslinter-scan/resources/js/components/app-logo.tsx",
+        reason: "module_not_found" as const,
+      },
+    ];
+    expect(isStaticBundledPreviewUnavailable(skipped, { production: true })).toBe(
+      true,
+    );
+  });
+
+  it("returns false in dev mode", () => {
+    const skipped = [
+      {
+        export_name: "AppLogo",
+        rel_path: "resources/js/components/app-logo.tsx",
+        globKey: "@dslinter-scan/resources/js/components/app-logo.tsx",
+        reason: "module_not_found" as const,
+      },
+    ];
+    expect(isStaticBundledPreviewUnavailable(skipped, { production: false })).toBe(
+      false,
+    );
+  });
+});