dslinter 0.0.6

package/src/styles/dashboard-theme.css

@@ -0,0 +1,188 @@
+/**
+ * DSLinter dashboard design tokens + shadcn/ui theme.
+ * Host apps import once: `@import "dslinter/theme.css";` after `@import "tailwindcss"` and `@source` for this package.
+ */
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@theme {
+  --color-primary-muted: #93c5fd;
+  --color-surface: #f8fafc;
+  --color-surface-elevated: #ffffff;
+  --color-surface-border: #e2e8f0;
+  --color-danger: #dc2626;
+  --color-danger-foreground: #fef2f2;
+  --color-success: #15803d;
+  --color-success-foreground: #f0fdf4;
+  --color-warning: #ca8a04;
+  --color-warning-foreground: #422006;
+  --spacing-layout-xs: 0.5rem;
+  --spacing-layout-sm: 1rem;
+  --spacing-layout-md: 1.5rem;
+  --spacing-layout-lg: 2rem;
+  --radius-ds: 0.5rem;
+  --radius-ds-lg: 0.75rem;
+  --animate-progress-indeterminate: progress-indeterminate 1.2s ease-in-out
+    infinite;
+
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+:root {
+  color-scheme: light;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  /* Match legacy DSLinter demo primary (blue-600) */
+  --primary: oklch(0.488 0.243 264.376);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.18 264);
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+    margin: 0;
+  }
+}
+
+/** Subtle dot grid for playground preview areas (examples, variant matrix). */
+@layer utilities {
+  .ds-playground-dot-surface {
+    background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
+    background-size: 10px 10px;
+  }
+
+  .dark .ds-playground-dot-surface {
+    background-image: radial-gradient(
+      circle,
+      rgb(148 163 184 / 0.22) 1px,
+      transparent 1px
+    );
+  }
+}

package/src/types/controls.ts

@@ -0,0 +1,62 @@
+/** Values passed from the dashboard control panel into `PlaygroundPreview`. */
+export type PlaygroundArgs = Record<string, string | number | boolean>;
+
+export type PlaygroundBooleanControl = {
+  key: string;
+  label: string;
+  type: "boolean";
+  default: boolean;
+  hint?: string;
+};
+
+export type PlaygroundStringControl = {
+  key: string;
+  label: string;
+  type: "string";
+  default: string;
+  placeholder?: string;
+};
+
+export type PlaygroundNumberControl = {
+  key: string;
+  label: string;
+  type: "number";
+  default: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+export type PlaygroundSelectControl = {
+  key: string;
+  label: string;
+  type: "select";
+  default: string;
+  options: { value: string; label: string }[];
+};
+
+export type PlaygroundControl =
+  | PlaygroundBooleanControl
+  | PlaygroundStringControl
+  | PlaygroundNumberControl
+  | PlaygroundSelectControl;
+
+export function defaultArgsFromControls(controls: PlaygroundControl[] | undefined): PlaygroundArgs {
+  const out: PlaygroundArgs = {};
+  if (!controls) return out;
+  for (const c of controls) {
+    switch (c.type) {
+      case "boolean":
+        out[c.key] = c.default;
+        break;
+      case "string":
+      case "select":
+        out[c.key] = c.default;
+        break;
+      case "number":
+        out[c.key] = c.default;
+        break;
+    }
+  }
+  return out;
+}

package/src/types/defaultTailwindTypography.ts

@@ -0,0 +1,55 @@
+import type {
+  TokenCatalogFontFamily,
+  TokenCatalogFontSize,
+  TokenCatalogFontWeight,
+} from "./tokenCatalog";
+
+/** Tailwind v4 default `text-*` scale (font size / line-height pairing is class-level; values are font-size). */
+export const defaultTailwindFontSizes = [
+  { token: "xs", value: "0.75rem (12px)", tw: "text-xs" },
+  { token: "sm", value: "0.875rem (14px)", tw: "text-sm" },
+  { token: "base", value: "1rem (16px)", tw: "text-base" },
+  { token: "lg", value: "1.125rem (18px)", tw: "text-lg" },
+  { token: "xl", value: "1.25rem (20px)", tw: "text-xl" },
+  { token: "2xl", value: "1.5rem (24px)", tw: "text-2xl" },
+  { token: "3xl", value: "1.875rem (30px)", tw: "text-3xl" },
+  { token: "4xl", value: "2.25rem (36px)", tw: "text-4xl" },
+  { token: "5xl", value: "3rem (48px)", tw: "text-5xl" },
+  { token: "6xl", value: "3.75rem (60px)", tw: "text-6xl" },
+  { token: "7xl", value: "4.5rem (72px)", tw: "text-7xl" },
+  { token: "8xl", value: "6rem (96px)", tw: "text-8xl" },
+  { token: "9xl", value: "8rem (128px)", tw: "text-9xl" },
+] as const satisfies readonly TokenCatalogFontSize[];
+
+export const defaultTailwindFontWeights = [
+  { token: "thin", tw: "font-thin", value: "100" },
+  { token: "extralight", tw: "font-extralight", value: "200" },
+  { token: "light", tw: "font-light", value: "300" },
+  { token: "normal", tw: "font-normal", value: "400" },
+  { token: "medium", tw: "font-medium", value: "500" },
+  { token: "semibold", tw: "font-semibold", value: "600" },
+  { token: "bold", tw: "font-bold", value: "700" },
+  { token: "extrabold", tw: "font-extrabold", value: "800" },
+  { token: "black", tw: "font-black", value: "900" },
+] as const satisfies readonly TokenCatalogFontWeight[];
+
+/** Stacks aligned with Tailwind’s default theme fonts — keep in sync with host `@theme --font-*`. */
+export const defaultTailwindFontFamilies = [
+  {
+    key: "sans",
+    tw: "font-sans",
+    value:
+      'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+  },
+  {
+    key: "serif",
+    tw: "font-serif",
+    value: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  },
+  {
+    key: "mono",
+    tw: "font-mono",
+    value:
+      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+] as const satisfies readonly TokenCatalogFontFamily[];

package/src/types/playground.ts

@@ -0,0 +1,21 @@
+import type { PlaygroundArgs, PlaygroundControl } from "./controls";
+import type { PlaygroundPreviewComponent } from "./preview";
+
+export type PlaygroundMeta = {
+  /** Stable URL segment — matches `PlaygroundSpec.id` from dslint. */
+  id: string;
+  title: string;
+  /** From dslint `playground_groups` config (or manual `definePlayground`). */
+  group?: string;
+};
+
+export type PlaygroundEntry = {
+  id: string;
+  meta: PlaygroundMeta;
+  modulePath: string;
+  /** Optional controls shown above the preview; omit or use `[]` for static demos. */
+  controls: PlaygroundControl[];
+  /** Optional JSX-ish snippet from current `values` (consumer-defined). */
+  usageSnippet?: (values: PlaygroundArgs) => string;
+  Preview: PlaygroundPreviewComponent;
+};

package/src/types/preview.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+import type { PlaygroundArgs } from "./controls";
+
+export type PlaygroundPreviewProps = {
+  values: PlaygroundArgs;
+};
+
+export type PlaygroundPreviewComponent = ComponentType<PlaygroundPreviewProps>;

package/src/types/report.ts

@@ -0,0 +1,116 @@
+/** Mirrors `dslint` WorkspaceReport JSON (serde). */
+
+export type DefinitionKind =
+  | "function"
+  | "class"
+  | "const_arrow"
+  | "const_function"
+  | "wrapped_component"
+  | "export_default"
+  | "export_default_anonymous";
+
+export type Severity = "error" | "warning" | "info";
+
+export interface ComponentDefinition {
+  name: string;
+  kind: DefinitionKind;
+  line: number;
+  /** Props destructured from the first parameter, when detectable. */
+  declared_props?: string[];
+}
+
+export interface JsxUsage {
+  component: string;
+  line: number;
+  props: string[];
+  /** Statically-known literal prop values (non-literals omitted). */
+  prop_values?: Record<string, string>;
+}
+
+export interface LintFinding {
+  rule_id: string;
+  message: string;
+  path: string;
+  line: number | null;
+  severity: Severity;
+}
+
+export interface FileScan {
+  path: string;
+  definitions: ComponentDefinition[];
+  usages: JsxUsage[];
+  parse_errors: string[];
+  findings?: LintFinding[];
+}
+
+export interface GovernanceScores {
+  design_system_health: number;
+  ux_consistency: number;
+  accessibility: number;
+  maintainability: number;
+}
+
+export interface DuplicateComponent {
+  name: string;
+  locations: string[];
+}
+
+/** One individual call-site where a component is referenced. */
+export interface UsageLocation {
+  path: string;
+  line: number;
+  props: string[];
+  /** Statically-known literal prop values at this call-site (non-literals omitted). */
+  prop_values?: Record<string, string>;
+}
+
+export interface UsageSummary {
+  component: string;
+  reference_count: number;
+  file_count: number;
+  max_props_on_single_use: number;
+  files: string[];
+  /** How many call-sites pass each named prop. */
+  prop_frequencies?: Record<string, number>;
+  /** How many call-sites pass each literal value for each prop. */
+  prop_value_frequencies?: Record<string, Record<string, number>>;
+  /** Every individual call-site with its file, line, and passed props. */
+  usage_locations?: UsageLocation[];
+}
+
+export interface OwnershipSummary {
+  owner: string;
+  files: number;
+  definitions: number;
+}
+
+/**
+ * Simplified prop kind from TypeScript (e.g. demo `merge-playgrounds.mjs`).
+ * Dashboard falls back to name heuristics when a key is missing or kind is `unknown`.
+ */
+export type DeclaredPropKind = "boolean" | "string" | "number" | "unknown";
+
+/** Emitted by dslint for dashboard playgrounds (no per-component TS registration). */
+export interface PlaygroundSpec {
+  id: string;
+  export_name: string;
+  rel_path: string;
+  declared_props: string[];
+  group?: string | null;
+  /**
+   * Optional map from prop name to simplified TS kind, filled by tooling that runs the TS checker
+   * (demo: `merge-playgrounds.mjs`). Omitted when empty or unavailable.
+   */
+  declared_prop_kinds?: Partial<Record<string, DeclaredPropKind>>;
+}
+
+export interface WorkspaceReport {
+  root: string;
+  files: FileScan[];
+  findings: LintFinding[];
+  duplicate_components: DuplicateComponent[];
+  usage_by_component: UsageSummary[];
+  ownership: OwnershipSummary[];
+  scores: GovernanceScores;
+  playgrounds?: PlaygroundSpec[];
+}

package/src/types/tokenCatalog.ts

@@ -0,0 +1,54 @@
+/** Shape expected by `TokenWall` — your app mirrors Tailwind / tokens into this object. */
+
+export type TokenCatalogColor = {
+  token: string;
+  shade: string;
+  value: string;
+  tw: string;
+};
+
+export type TokenCatalogSpacing = {
+  token: string;
+  value: string;
+  tw: string;
+};
+
+export type TokenCatalogRadius = {
+  token: string;
+  value: string;
+  tw: string;
+};
+
+export type TokenCatalogFontFamily = {
+  /** Theme key / utility suffix, e.g. `sans` → `font-sans`. */
+  key: string;
+  /** Full CSS font-family stack for documentation. */
+  value: string;
+  tw: string;
+};
+
+export type TokenCatalogFontSize = {
+  token: string;
+  value: string;
+  tw: string;
+};
+
+export type TokenCatalogFontWeight = {
+  token: string;
+  tw: string;
+  /** Numeric weight for display, e.g. `600`. */
+  value?: string;
+};
+
+export type TokenCatalogTypography = {
+  families: readonly TokenCatalogFontFamily[];
+  sizes: readonly TokenCatalogFontSize[];
+  weights?: readonly TokenCatalogFontWeight[];
+};
+
+export type TokenCatalog = {
+  colors: readonly TokenCatalogColor[];
+  spacing: readonly TokenCatalogSpacing[];
+  radius: readonly TokenCatalogRadius[];
+  typography?: TokenCatalogTypography;
+};