dslinter 0.1.13 → 0.2.2

package/src/components/ComponentPlaygroundPane.tsx

@@ -14,7 +14,11 @@ import { a11ySummaryForModule } from "../report/a11yForModule";
 import { codeScoreSummaryForModule } from "../report/codeScoreForModule";
 import { tokenStyleFindingsForModule } from "../report/tokenStyleFindingsForModule";
 import type { WorkspaceReport } from "../types/report";
-import { aggregateDeclaredProps, usageMap } from "../dashboard/aggregate";
+import {
+  aggregateDeclaredProps,
+  componentCatalogFamilyForName,
+  usageMap,
+} from "../dashboard/aggregate";
 import { defaultArgsFromControls } from "../types/controls";
 import type { PlaygroundArgs } from "../types/controls";
 import type { PlaygroundEntry } from "../types/playground";
@@ -26,15 +30,28 @@ import {
   PlaygroundTokenStyleSection,
   PlaygroundUsageSection,
 } from "./PlaygroundA11yAndCode";
+import { PlaygroundAppThemeWrapper } from "./PlaygroundAppThemeWrapper";
+import { PlaygroundPreviewErrorBoundary } from "./PlaygroundPreviewErrorBoundary";
 import { PlaygroundVariantMatrix } from "./PlaygroundVariantMatrix";
 import { enumerateControlCombinations } from "../playground/enumerateControlCombinations";
+import {
+  mergePlaygroundA11yFindings,
+  playgroundA11yScore,
+  type PlaygroundA11yFinding,
+} from "../playground/scanVariantA11y";
+import { HideFromCatalogButton } from "./HideFromCatalogButton";
+import { OpenInEditorButton } from "./OpenInEditorButton";
 import { Section } from "./Section";
+import {
+  resolveModuleAbsolutePath,
+} from "../dashboard/editorLink";
 
 type Props = {
   entry: PlaygroundEntry;
-  formatModulePath?: (modulePath: string) => string;
   workspaceReport: WorkspaceReport | null;
   reportReady: boolean;
+  onOpenComponent: (componentId: string) => void;
+  onHideFromCatalog?: (componentId: string) => void;
 };
 
 const MIN_PREVIEW_PX = 280;
@@ -59,6 +76,31 @@ function nextPreviewWidthForResize(
   return clampPreviewWidth(prevPreview, nextOuter);
 }
 
+function PreviewResizeHandle({
+  side,
+  onPointerDown,
+}: {
+  side: "left" | "right";
+  onPointerDown: (e: PointerEvent<HTMLButtonElement>) => void;
+}) {
+  const positionClass =
+    side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2";
+
+  return (
+    <button
+      type="button"
+      className={`absolute top-0 bottom-0 z-10 flex w-4 ${positionClass} cursor-ew-resize touch-none items-center justify-center rounded border-0 bg-muted p-0 shadow-xs ring-1 ring-border hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+      aria-label="Resize preview from center (drag left or right)"
+      onPointerDown={onPointerDown}
+    >
+      <span
+        className="h-10 w-px rounded-full bg-muted-foreground/40"
+        aria-hidden
+      />
+    </button>
+  );
+}
+
 function TocLink({ href, children }: { href: string; children: ReactNode }) {
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
     // Modifier keys / non-primary clicks → fall back to default browser behaviour.
@@ -95,14 +137,15 @@ function TocLink({ href, children }: { href: string; children: ReactNode }) {
 
 export function ComponentPlaygroundPane({
   entry,
-  formatModulePath,
   workspaceReport,
   reportReady,
+  onOpenComponent,
+  onHideFromCatalog,
 }: Props) {
-  const { Preview } = entry;
-  const rel = formatModulePath
-    ? formatModulePath(entry.modulePath)
-    : entry.modulePath.replace(/^\.\.\//, "");
+  const { renderPreview } = entry;
+  const sourceAbsolutePath = workspaceReport?.root
+    ? resolveModuleAbsolutePath(workspaceReport.root, entry.modulePath)
+    : undefined;
 
   const [values, setValues] = useState<PlaygroundArgs>(() =>
     defaultArgsFromControls(entry.controls),
@@ -151,6 +194,8 @@ export function ComponentPlaygroundPane({
 
   const previewMeasureRef = useRef<HTMLDivElement>(null);
   const previewFrameRef = useRef<HTMLDivElement>(null);
+  const previewWidthLabelRef = useRef<HTMLSpanElement>(null);
+  const livePreviewWidthRef = useRef(DEFAULT_PREVIEW_PX);
   const maxOuterRef = useRef(0);
   const [maxOuterPx, setMaxOuterPx] = useState(0);
   const [previewWidthPx, setPreviewWidthPx] = useState(DEFAULT_PREVIEW_PX);
@@ -159,6 +204,24 @@ export function ComponentPlaygroundPane({
     null,
   );
 
+  useEffect(() => {
+    livePreviewWidthRef.current = previewWidthPx;
+  }, [previewWidthPx]);
+
+  const applyLivePreviewWidth = useCallback((w: number) => {
+    const clamped = clampPreviewWidth(w, maxOuterRef.current);
+    livePreviewWidthRef.current = clamped;
+    const frame = previewFrameRef.current;
+    if (frame) {
+      frame.style.width = `${clamped}px`;
+    }
+    const label = previewWidthLabelRef.current;
+    if (label) {
+      label.textContent = `${Math.round(clamped)}px`;
+    }
+    return clamped;
+  }, []);
+
   const syncPreviewToOuterWidth = useCallback((nextOuter: number) => {
     if (!Number.isFinite(nextOuter) || nextOuter <= 0) return;
     const prevOuter = maxOuterRef.current;
@@ -203,32 +266,61 @@ export function ComponentPlaygroundPane({
     return () => window.removeEventListener("resize", syncUsemodsBreakpoints);
   }, [syncUsemodsBreakpoints]);
 
-  const attachSymmetricWidthDrag = useCallback((side: "left" | "right") => {
-    return (e: PointerEvent<HTMLButtonElement>) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      const target = e.currentTarget;
-      target.setPointerCapture(e.pointerId);
-      let lastX = e.clientX;
-      const sign = side === "right" ? 1 : -1;
-      const onMove = (ev: globalThis.PointerEvent) => {
-        const dx = ev.clientX - lastX;
-        lastX = ev.clientX;
-        setPreviewWidthPx((w) =>
-          clampPreviewWidth(w + sign * 2 * dx, maxOuterRef.current),
-        );
-      };
-      const onUp = (ev: globalThis.PointerEvent) => {
-        target.releasePointerCapture(ev.pointerId);
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onUp);
-        window.removeEventListener("pointercancel", onUp);
+  const attachSymmetricWidthDrag = useCallback(
+    (side: "left" | "right") => {
+      return (e: PointerEvent<HTMLButtonElement>) => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        const target = e.currentTarget;
+        target.setPointerCapture(e.pointerId);
+
+        let lastX = e.clientX;
+        let currentWidth = livePreviewWidthRef.current;
+        let rafId = 0;
+        const sign = side === "right" ? 1 : -1;
+        const prevBodyCursor = document.body.style.cursor;
+        const prevBodyUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = "ew-resize";
+        document.body.style.userSelect = "none";
+
+        const flushWidth = () => {
+          rafId = 0;
+          applyLivePreviewWidth(currentWidth);
+        };
+
+        const onMove = (ev: globalThis.PointerEvent) => {
+          const dx = ev.clientX - lastX;
+          lastX = ev.clientX;
+          currentWidth = clampPreviewWidth(
+            currentWidth + sign * 2 * dx,
+            maxOuterRef.current,
+          );
+          if (!rafId) {
+            rafId = requestAnimationFrame(flushWidth);
+          }
+        };
+
+        const endDrag = (ev: globalThis.PointerEvent) => {
+          if (rafId) {
+            cancelAnimationFrame(rafId);
+            applyLivePreviewWidth(currentWidth);
+          }
+          setPreviewWidthPx(livePreviewWidthRef.current);
+          document.body.style.cursor = prevBodyCursor;
+          document.body.style.userSelect = prevBodyUserSelect;
+          target.releasePointerCapture(ev.pointerId);
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", endDrag);
+          window.removeEventListener("pointercancel", endDrag);
+        };
+
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", endDrag);
+        window.addEventListener("pointercancel", endDrag);
       };
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onUp);
-      window.addEventListener("pointercancel", onUp);
-    };
-  }, []);
+    },
+    [applyLivePreviewWidth],
+  );
 
   const hasControls = entry.controls.length > 0;
 
@@ -240,38 +332,105 @@ export function ComponentPlaygroundPane({
   const showVariantsSection =
     hasControls &&
     (variantEnumeration.combinations.length > 0 ||
-      (variantEnumeration.combinations.length === 0 &&
-        variantEnumeration.totalCount === 0));
+      variantEnumeration.totalCount === 0);
+
+  const [variantA11yFindings, setVariantA11yFindings] = useState<
+    PlaygroundA11yFinding[]
+  >([]);
+  const [variantScanComplete, setVariantScanComplete] = useState(false);
+
+  useEffect(() => {
+    setVariantA11yFindings([]);
+    setVariantScanComplete(false);
+  }, [entry.id, variantEnumeration.combinations]);
+
+  const handleVariantA11yScan = useCallback(
+    (findings: PlaygroundA11yFinding[]) => {
+      setVariantA11yFindings(findings);
+      setVariantScanComplete(true);
+    },
+    [],
+  );
+
+  const combinedA11y = useMemo(() => {
+    const findings = mergePlaygroundA11yFindings(
+      a11y.findings,
+      variantA11yFindings,
+    );
+    return {
+      ...a11y,
+      findings,
+      issueCount: findings.length,
+      score: playgroundA11yScore(a11y.findings, variantA11yFindings),
+    };
+  }, [a11y, variantA11yFindings]);
+
+  const hasVariantMatrix = variantEnumeration.combinations.length > 0;
+  const variantScanPending = hasVariantMatrix && !variantScanComplete;
+  const a11yScoreLabel =
+    reportReady || variantScanComplete
+      ? `${combinedA11y.score}/100${variantScanPending ? "…" : ""}`
+      : "—";
+
+  const report = reportReady ? workspaceReport : null;
+  const family = useMemo(
+    () => componentCatalogFamilyForName(report, entry.id),
+    [report, entry.id],
+  );
+  const childComponents = family?.parent === entry.id ? family.children : [];
+  const resetControls = () =>
+    setValues(defaultArgsFromControls(entry.controls));
+
+  const tocItems: { href: string; label: string; show?: boolean }[] = [
+    { href: "#api-reference", label: "API reference", show: hasControls },
+    { href: "#usage", label: "Usage" },
+    {
+      href: "#subcomponents",
+      label: "Subcomponents",
+      show: childComponents.length > 0,
+    },
+    { href: "#repo-usage", label: "Repo usage" },
+    { href: "#design-tokens", label: "Design tokens" },
+    { href: "#code-score", label: "Code score" },
+    { href: "#accessibility", label: "Accessibility" },
+    { href: "#variants", label: "Variants", show: showVariantsSection },
+  ];
 
   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 id="source" className="scroll-mt-20 border-b border-border bg-card p-6">
-          <div className="mx-auto">
-            <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">
-                  {entry.meta.group ? (
-                    <>
-                      Components <span className="text-muted-foreground/40">/</span>{" "}
-                      <span className="capitalize text-foreground/80">
-                        {entry.meta.group}
-                      </span>
-                    </>
-                  ) : (
-                    "Components"
-                  )}
-                </p>
-                <h1 className="text-3xl font-semibold tracking-tight text-foreground">
-                  {entry.meta.title}
-                </h1>
-                <p
-                  className="mt-1 truncate font-mono text-xs text-muted-foreground"
-                  title={rel}
-                >
-                  {rel}
-                </p>
-              </div>
+        <header
+          id="source"
+          className="scroll-mt-20 border-b border-border bg-card p-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
+                {entry.meta.group ? (
+                  <>
+                    {" "}
+                    <span className="text-muted-foreground/40">/</span>{" "}
+                    <span className="capitalize text-foreground/80">
+                      {entry.meta.group}
+                    </span>
+                  </>
+                ) : null}
+              </p>
+              <h1 className="text-3xl font-semibold tracking-tight text-foreground">
+                {entry.meta.title}
+              </h1>
+            </div>
+            <div className="flex shrink-0 flex-wrap items-center gap-2">
+              {sourceAbsolutePath ? (
+                <OpenInEditorButton filePath={sourceAbsolutePath} />
+              ) : null}
+              {onHideFromCatalog ? (
+                <HideFromCatalogButton
+                  componentName={entry.meta.id}
+                  onHidden={onHideFromCatalog}
+                />
+              ) : null}
             </div>
           </div>
         </header>
@@ -284,44 +443,39 @@ export function ComponentPlaygroundPane({
             <div className="flex justify-center">
               <div
                 ref={previewFrameRef}
-                className="relative min-w-0 shrink-0 select-none rounded-lg border border-border bg-muted/50 shadow-xs"
+                className="relative min-w-0 shrink-0 select-none rounded-lg border border-border bg-muted/50 shadow-xs will-change-[width]"
                 style={{ width: previewWidthPx }}
               >
-                <button
-                  type="button"
-                  className="absolute left-0 top-0 bottom-0 z-10 flex w-4 -translate-x-1/2 cursor-ew-resize touch-none items-center justify-center rounded border-0 bg-muted p-0 shadow-xs ring-1 ring-border hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  aria-label="Resize preview from center (drag left or right)"
+                <PreviewResizeHandle
+                  side="left"
                   onPointerDown={attachSymmetricWidthDrag("left")}
-                >
-                  <span
-                    className="h-10 w-px rounded-full bg-muted-foreground/40"
-                    aria-hidden
-                  />
-                </button>
-                <button
-                  type="button"
-                  className="absolute right-0 top-0 bottom-0 z-10 flex w-4 translate-x-1/2 cursor-ew-resize touch-none items-center justify-center rounded border-0 bg-muted p-0 shadow-xs ring-1 ring-border hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  aria-label="Resize preview from center (drag left or right)"
+                />
+                <PreviewResizeHandle
+                  side="right"
                   onPointerDown={attachSymmetricWidthDrag("right")}
+                />
+                <PlaygroundAppThemeWrapper
+                  workspaceReport={report}
+                  className="min-w-0 p-8 backdrop-blur-2xl"
                 >
-                  <span
-                    className="h-10 w-px rounded-full bg-muted-foreground/40"
-                    aria-hidden
-                  />
-                </button>
-                <div className="min-w-0 bg-card p-8">
-                  <Preview values={values} />
-                </div>
+                  <PlaygroundPreviewErrorBoundary
+                    componentName={entry.meta.title}
+                  >
+                    {renderPreview(values)}
+                  </PlaygroundPreviewErrorBoundary>
+                </PlaygroundAppThemeWrapper>
               </div>
             </div>
             {maxOuterPx > 0 ? (
-              <div className="mt-4 divide-x divide-border h-6 overflow-hidden items-center mx-auto flex w-fit border border-border bg-card text-center text-xs/none tabular-nums font-mono rounded-sm text-muted-foreground">
-                <span className="p-2.5">{Math.round(previewWidthPx)}px</span>
-                <span className=" p-2.5" title="usemods detectBreakpoint">
+              <div className="mx-auto mt-4 flex h-6 w-fit items-center overflow-hidden rounded-sm border border-border bg-card text-center font-mono text-xs/none tabular-nums text-muted-foreground divide-x divide-border">
+                <span ref={previewWidthLabelRef} className="p-2.5">
+                  {Math.round(previewWidthPx)}px
+                </span>
+                <span className="p-2.5" title="usemods detectBreakpoint">
                   Screen: {windowBreakpoint ?? "—"}
                 </span>
                 <span
-                  className=" p-2.5"
+                  className="p-2.5"
                   title="usemods detectContainerBreakpoint"
                 >
                   Container: {containerBreakpoint ?? "—"}
@@ -336,27 +490,21 @@ export function ComponentPlaygroundPane({
             <div className="min-w-0 space-y-14">
               {hasControls ? (
                 <PlaygroundApiReference
+                  entry={entry}
                   controls={entry.controls}
                   values={values}
                   onChange={setValues}
-                  onReset={() =>
-                    setValues(defaultArgsFromControls(entry.controls))
-                  }
+                  onReset={resetControls}
                   reportUsage={repoUsage}
                   declaredPropsFromScan={declaredPropsFromScan}
-                  governanceReportLoaded={
-                    reportReady && workspaceReport != null
-                  }
+                  governanceReportLoaded={report != null}
                 />
               ) : null}
 
               <PlaygroundUsageSection entry={entry} values={values} />
 
               <Section id="repo-usage" title="Repo usage" description="">
-                <ComponentUsageDetails
-                  report={reportReady ? workspaceReport : null}
-                  componentId={entry.id}
-                />
+                <ComponentUsageDetails report={report} componentId={entry.id} />
               </Section>
 
               <Section
@@ -383,10 +531,14 @@ export function ComponentPlaygroundPane({
 
               <Section
                 id="accessibility"
-                title={`Accessibility: ${reportReady ? a11y.score : "—"}/100`}
-                description="Accessibility checks and findings from the workspace DSLinter report scoped to this file."
+                title={`Accessibility: ${a11yScoreLabel}`}
+                description="Static accessibility rules from the DSLinter report, plus runtime color-contrast checks on each variant preview below."
               >
-                <PlaygroundA11ySection a11y={a11y} reportReady={reportReady} />
+                <PlaygroundA11ySection
+                  a11y={combinedA11y}
+                  reportReady={reportReady || variantScanComplete}
+                  variantScanPending={variantScanPending}
+                />
               </Section>
             </div>
 
@@ -398,17 +550,13 @@ export function ComponentPlaygroundPane({
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   On this page
                 </p>
-                {hasControls ? (
-                  <TocLink href="#api-reference">API reference</TocLink>
-                ) : null}
-                <TocLink href="#usage">Usage</TocLink>
-                <TocLink href="#repo-usage">Repo usage</TocLink>
-                <TocLink href="#design-tokens">Design tokens</TocLink>
-                <TocLink href="#code-score">Code score</TocLink>
-                <TocLink href="#accessibility">Accessibility</TocLink>
-                {showVariantsSection ? (
-                  <TocLink href="#variants">Variants</TocLink>
-                ) : null}
+                {tocItems.map(({ href, label, show = true }) =>
+                  show ? (
+                    <TocLink key={href} href={href}>
+                      {label}
+                    </TocLink>
+                  ) : null,
+                )}
               </nav>
             </aside>
           </div>
@@ -417,18 +565,19 @@ export function ComponentPlaygroundPane({
         {variantEnumeration.combinations.length > 0 ? (
           <section
             id="variants"
-            className="ds-playground-dot-surface mt-8 w-full scroll-mt-20 border-t  pt-10 pb-12"
+            className="ds-playground-dot-surface mt-8 w-full scroll-mt-20 border-t pt-10 pb-12"
           >
             <div className="min-w-0 w-full px-6 lg:px-12">
               <h2 className="w-fit bg-card text-xl font-semibold tracking-tight text-foreground">
                 All variants
               </h2>
               <PlaygroundVariantMatrix
-                Preview={Preview}
+                renderPreview={renderPreview}
                 combinations={variantEnumeration.combinations}
                 finiteAxisKeys={variantEnumeration.finiteAxisKeys}
                 totalCount={variantEnumeration.totalCount}
                 capped={variantEnumeration.capped}
+                onVariantA11yScan={handleVariantA11yScan}
               />
             </div>
           </section>

package/src/components/DashboardCommandPalette.tsx

@@ -12,7 +12,7 @@ import {
 import type { HashRoute } from "../shell/hashRoute";
 
 type Props = {
-  catalogNames: string[];
+  catalogEntries: { name: string; label: string }[];
   onNavigate: (next: HashRoute) => void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -25,12 +25,7 @@ function eventTargetIsEditable(target: EventTarget | null): boolean {
   return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
 }
 
-export function DashboardCommandPalette({
-  catalogNames,
-  onNavigate,
-  open,
-  onOpenChange,
-}: Props) {
+export function DashboardCommandPalette({ catalogEntries, onNavigate, open, onOpenChange }: Props) {
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   useEffect(() => {
@@ -65,18 +60,18 @@ export function DashboardCommandPalette({
             Governance
           </CommandItem>
         </CommandGroup>
-        {catalogNames.length > 0 ? (
+        {catalogEntries.length > 0 ? (
           <CommandGroup heading="Components">
-            {catalogNames.map((name) => (
+            {catalogEntries.map(({ name, label }) => (
               <CommandItem
                 key={name}
-                value={name}
+                value={`${name} ${label}`}
                 onSelect={() => {
                   onNavigate({ view: "component", componentId: name });
                   close();
                 }}
               >
-                {name}
+                {label}
               </CommandItem>
             ))}
           </CommandGroup>

package/src/components/GovernancePane.tsx

@@ -14,8 +14,8 @@ type Props = {
 
 export function GovernancePane({
   landing,
-  reportUrl: _reportUrl = "/dslint-report.json",
-  dslinterReportHint = "npm run dslint:report",
+  reportUrl: _reportUrl = "/dslinter-report.json",
+  dslinterReportHint = "npm run dslinter:report",
   dslinterReport,
   onOpenComponent,
 }: Props) {

package/src/components/HideFromCatalogButton.tsx

@@ -0,0 +1,44 @@
+import { useCallback, useState } from "react";
+import { hideCatalogComponent } from "../dashboard/updateDslintConfig";
+import { Button } from "./ui/button";
+
+type Props = {
+  componentName: string;
+  onHidden: (componentName: string) => void;
+};
+
+export function HideFromCatalogButton({ componentName, onHidden }: Props) {
+  const [pending, setPending] = useState(false);
+
+  const handleClick = useCallback(async () => {
+    if (
+      !window.confirm(
+        `Hide ${componentName} from the component catalog? This updates hidden_components in .dslinter.json.`,
+      )
+    ) {
+      return;
+    }
+    setPending(true);
+    try {
+      await hideCatalogComponent(componentName);
+      onHidden(componentName);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      window.alert(`Could not hide ${componentName}: ${message}`);
+    } finally {
+      setPending(false);
+    }
+  }, [componentName, onHidden]);
+
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      disabled={pending}
+      onClick={() => void handleClick()}
+    >
+      {pending ? "Hiding…" : "Hide Component"}
+    </Button>
+  );
+}

package/src/components/OpenInEditorButton.tsx

@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+import { openSourceFile } from "../dashboard/editorLink";
+import { Button } from "./ui/button";
+
+type Props = {
+  filePath: string;
+  line?: number;
+};
+
+export function OpenInEditorButton({ filePath, line }: Props) {
+  const [pending, setPending] = useState(false);
+
+  const handleClick = useCallback(async () => {
+    setPending(true);
+    try {
+      await openSourceFile(filePath, line);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      window.alert(`Could not open file: ${message}`);
+    } finally {
+      setPending(false);
+    }
+  }, [filePath, line]);
+
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      disabled={pending}
+      onClick={() => void handleClick()}
+    >
+      {pending ? "Opening…" : "Open in Editor"}
+    </Button>
+  );
+}