dslinter 0.0.6

package/src/shell/DashboardLayout.tsx

@@ -0,0 +1,230 @@
+import type { ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import type { PlaygroundEntry } from "../types/playground";
+import type { TokenCatalog } from "../types/tokenCatalog";
+import type { DslinterReportState } from "../dashboard/useWorkspaceReport";
+import { Button } from "@/components/ui/button";
+import { cn } from "../lib/utils";
+import { ComponentPlaygroundPane } from "./ComponentPlaygroundPane";
+import { GovernancePane } from "./GovernancePane";
+import { Sidebar } from "./Sidebar";
+import { TokensPane } from "./TokensPane";
+import { DashboardCommandPalette } from "./DashboardCommandPalette";
+import { useHashRoute } from "./useHashRoute";
+
+const STORAGE_KEY = "dslinter-dashboard-theme";
+
+export type DashboardThemePreference = "light" | "dark";
+export type DashboardResolvedTheme = DashboardThemePreference;
+
+function readStored(): DashboardThemePreference | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const LEGACY_KEY = "dslinter-workbench-theme";
+    let v = localStorage.getItem(STORAGE_KEY);
+    if (v == null) {
+      v = localStorage.getItem(LEGACY_KEY);
+      if (v === "light" || v === "dark") {
+        localStorage.setItem(STORAGE_KEY, v);
+        localStorage.removeItem(LEGACY_KEY);
+      }
+    }
+    if (v === "light" || v === "dark") return v;
+    /** Migrate legacy `system` (and any unknown) to an explicit mode. */
+    if (v === "system") {
+      const next = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+      localStorage.setItem(STORAGE_KEY, next);
+      return next;
+    }
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+function readInitialTheme(): DashboardThemePreference {
+  return readStored() ?? "light";
+}
+
+type DashboardThemeContextValue = {
+  theme: DashboardThemePreference;
+  setTheme: (next: DashboardThemePreference) => void;
+  /** Same as `theme`; kept for callers that already used `resolvedTheme`. */
+  resolvedTheme: DashboardResolvedTheme;
+};
+
+const DashboardThemeContext = createContext<DashboardThemeContextValue | null>(
+  null,
+);
+
+export function DashboardThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<DashboardThemePreference>(() =>
+    readInitialTheme(),
+  );
+
+  const setTheme = useCallback((next: DashboardThemePreference) => {
+    setThemeState(next);
+  }, []);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, theme);
+    } catch {
+      /* ignore */
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key !== STORAGE_KEY || e.newValue == null) return;
+      if (e.newValue === "light" || e.newValue === "dark") {
+        setThemeState(e.newValue);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const value = useMemo(
+    () => ({ theme, setTheme, resolvedTheme: theme }),
+    [theme, setTheme],
+  );
+
+  return (
+    <DashboardThemeContext.Provider value={value}>
+      {children}
+    </DashboardThemeContext.Provider>
+  );
+}
+
+export function useDashboardTheme(): DashboardThemeContextValue {
+  const ctx = useContext(DashboardThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "useDashboardTheme must be used within DashboardThemeProvider",
+    );
+  }
+  return ctx;
+}
+
+export type DashboardLayoutProps = {
+  playgroundEntries: PlaygroundEntry[];
+  tokenCatalog: TokenCatalog;
+  /** Custom intro shown above the governance inventory on `#!/governance`; defaults to package copy. */
+  overview?: ReactNode;
+  /** Fetch URL for `dslint --json` output. */
+  reportUrl?: string;
+  /** Shown next to the governance refresh hint. */
+  dslinterReportHint?: string;
+  /** Maps Vite `import.meta.glob` path to a label in the component header. */
+  formatModulePath?: (modulePath: string) => string;
+  /** Workspace report fetch state (shared by governance + component a11y). */
+  dslinterReport: DslinterReportState;
+};
+
+function DashboardLayoutInner({
+  playgroundEntries,
+  tokenCatalog,
+  overview,
+  reportUrl,
+  dslinterReportHint,
+  formatModulePath,
+  dslinterReport,
+}: DashboardLayoutProps) {
+  const [route, navigate] = useHashRoute();
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const { theme, setTheme, resolvedTheme } = useDashboardTheme();
+
+  const getEntry = (id: string) => playgroundEntries.find((e) => e.id === id);
+
+  let main: ReactNode;
+  if (route.view === "tokens") {
+    main = <TokensPane tokenCatalog={tokenCatalog} />;
+  } else if (route.view === "governance") {
+    main = (
+      <GovernancePane
+        landing={overview}
+        reportUrl={reportUrl}
+        dslinterReportHint={dslinterReportHint}
+        dslinterReport={dslinterReport}
+      />
+    );
+  } else {
+    const entry = getEntry(route.componentId);
+    if (!entry) {
+      main = (
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 bg-muted/40 px-8 text-center">
+          <p className="text-sm font-medium text-foreground">Unknown preview</p>
+          <p className="max-w-md text-xs text-muted-foreground">
+            No playground registered for{" "}
+            <span className="font-mono">{route.componentId}</span>.
+          </p>
+          <Button
+            type="button"
+            size="sm"
+            onClick={() => navigate({ view: "governance" })}
+          >
+            Back to governance
+          </Button>
+        </div>
+      );
+    } else {
+      main = (
+        <ComponentPlaygroundPane
+          entry={entry}
+          formatModulePath={formatModulePath}
+          workspaceReport={dslinterReport.report}
+          reportReady={
+            !dslinterReport.loading &&
+            dslinterReport.error == null &&
+            dslinterReport.report != null
+          }
+        />
+      );
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-screen min-h-0 bg-background text-foreground",
+        resolvedTheme === "dark" && "dark",
+      )}
+    >
+      <DashboardCommandPalette
+        entries={playgroundEntries}
+        onNavigate={navigate}
+        open={commandPaletteOpen}
+        onOpenChange={setCommandPaletteOpen}
+      />
+      <Sidebar
+        entries={playgroundEntries}
+        route={route}
+        onNavigate={navigate}
+        onOpenCommandPalette={() => setCommandPaletteOpen(true)}
+        theme={theme}
+        onThemeChange={setTheme}
+      />
+      <div className="ml-[240px] flex min-h-0 min-w-0 flex-1 flex-col">
+        {main}
+      </div>
+    </div>
+  );
+}
+
+export function DashboardLayout(props: DashboardLayoutProps) {
+  return (
+    <DashboardThemeProvider>
+      <DashboardLayoutInner {...props} />
+    </DashboardThemeProvider>
+  );
+}

package/src/shell/EmptyCard.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+export function EmptyCard({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-muted/50 px-4 py-3 text-sm text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/shell/GovernancePane.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import { DashboardBody } from "../dashboard/DashboardBody";
+import type { DslinterReportState } from "../dashboard/useWorkspaceReport";
+
+type Props = {
+  /** Intro / landing copy shown above the governance inventory. */
+  landing?: ReactNode;
+  reportUrl?: string;
+  dslinterReportHint?: string;
+  dslinterReport: DslinterReportState;
+};
+
+export function GovernancePane({
+  landing,
+  reportUrl: _reportUrl = "/dslint-report.json",
+  dslinterReportHint = "npm run dslint:report",
+  dslinterReport,
+}: Props) {
+  const { report, error, loading } = dslinterReport;
+
+  if (error) {
+    return (
+      <div className="min-h-0 flex-1 overflow-auto bg-muted/40">
+        {landing}
+        <header className="border-b border-border bg-card px-8 py-6">
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">
+            Governance
+          </h1>
+        </header>
+        <div className="mx-auto max-w-lg px-8 py-16 text-center">
+          <p className="text-sm font-medium text-foreground">
+            Could not load DSLinter report
+          </p>
+          <p className="mt-2 text-xs text-muted-foreground">{error}</p>
+          <p className="mt-6 text-xs text-muted-foreground">
+            Regenerate the JSON, then refresh. Example:{" "}
+            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+              {dslinterReportHint}
+            </code>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading || !report) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col overflow-auto bg-muted/40">
+        {landing}
+        <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+          Loading inventory…
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-0 flex-1 overflow-auto bg-muted/40">
+      {landing}
+      <header className="border-b border-border bg-card px-8 py-6">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Inventory
+        </p>
+        <h1 className="mt-1 text-lg font-semibold tracking-tight text-foreground">
+          Governance
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Scores, component catalog, token wall, and findings from the latest
+          DSLinter snapshot
+        </p>
+      </header>
+      <div className="min-w-0 w-full px-6 py-8">
+        <DashboardBody report={report} />
+      </div>
+    </div>
+  );
+}