@miragon/mcp-toolkit-ui 1.0.1 → 1.2.0

package/dist/app/builder/use-key-step-entries.js

@@ -0,0 +1,46 @@
+import { useCallback, useState } from "react";
+import { defaultStepIdFor, keysToEntries } from "./builder-model.js";
+// -------------------------------------------------------------------------- //
+// Keys + steps editor state — the pipeline tab's editable entry lists
+// -------------------------------------------------------------------------- //
+/**
+ * Owns the key/step editor entries and their mutations, extracted from
+ * `layout-builder.tsx` unchanged. `addKey` de-dupes a prefilled name (the
+ * catalogue's "Add as key" action) and `addStep` derives a unique context
+ * id via `defaultStepIdFor`.
+ */
+export function useKeyStepEntries({ initialKeys, initialSteps, }) {
+    const [keyEntries, setKeyEntries] = useState(() => keysToEntries(initialKeys));
+    const [stepEntries, setStepEntries] = useState(() => initialSteps ?? []);
+    const addKey = useCallback((prefilledName) => {
+        setKeyEntries((prev) => {
+            if (prefilledName) {
+                if (prev.some((e) => e.name === prefilledName))
+                    return prev;
+                return [...prev, { name: prefilledName, rawValue: "" }];
+            }
+            return [...prev, { name: "", rawValue: "" }];
+        });
+    }, []);
+    const updateKey = useCallback((idx, patch) => {
+        setKeyEntries((prev) => prev.map((e, i) => (i === idx ? { ...e, ...patch } : e)));
+    }, []);
+    const removeKey = useCallback((idx) => {
+        setKeyEntries((prev) => prev.filter((_, i) => i !== idx));
+    }, []);
+    const addStep = useCallback((stepId) => {
+        setStepEntries((prev) => {
+            const taken = new Set(prev.map((s) => s.id));
+            const newId = stepId ? defaultStepIdFor(stepId, taken) : `step-${prev.length + 1}`;
+            return [...prev, { id: newId, step: stepId ?? "", optional: false }];
+        });
+    }, []);
+    const updateStep = useCallback((idx, patch) => {
+        setStepEntries((prev) => prev.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
+    }, []);
+    const removeStep = useCallback((idx) => {
+        setStepEntries((prev) => prev.filter((_, i) => i !== idx));
+    }, []);
+    return { keyEntries, stepEntries, addKey, updateKey, removeKey, addStep, updateStep, removeStep };
+}
+//# sourceMappingURL=use-key-step-entries.js.map

package/dist/app/builder/use-key-step-entries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-key-step-entries.js","sourceRoot":"","sources":["../../../src/app/builder/use-key-step-entries.ts"],"names":[],"mappings":"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"}

package/dist/app/builder/use-save-dashboard.d.ts

@@ -0,0 +1,33 @@
+import type { PipelineStepRef } from "@miragon/mcp-toolkit-core";
+import { type DraftLayout, type KeyEntry } from "./builder-model.js";
+/**
+ * Owns the save dialog's state (open flag, name/description inputs, busy
+ * flag, inline error) and the `save-dashboard` call. Extracted from
+ * `layout-builder.tsx` unchanged: a rejected save surfaces its reason
+ * inline in the SaveDialog instead of failing silently (Finding [3]).
+ */
+export declare function useSaveDashboard({ callTool, saveToolName, dashboardId, title, keyEntries, stepEntries, draft, onSaved, }: {
+    callTool: (name: string, args: object) => Promise<unknown>;
+    saveToolName: string;
+    dashboardId?: string;
+    title?: string;
+    keyEntries: KeyEntry[];
+    stepEntries: PipelineStepRef[];
+    draft: DraftLayout;
+    onSaved?: (result: {
+        id: string;
+        name: string;
+    }) => void;
+}): {
+    isBusy: boolean;
+    saveOpen: boolean;
+    setSaveOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    saveName: string;
+    setSaveName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    saveDescription: string;
+    setSaveDescription: import("react").Dispatch<import("react").SetStateAction<string>>;
+    saveError: string | null;
+    setSaveError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    saveDraft: () => Promise<void>;
+};
+//# sourceMappingURL=use-save-dashboard.d.ts.map

package/dist/app/builder/use-save-dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-save-dashboard.d.ts","sourceRoot":"","sources":["../../../src/app/builder/use-save-dashboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEhE,OAAO,EAAgC,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAMlG;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1D,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,QAAQ,EAAE,CAAA;IACtB,WAAW,EAAE,eAAe,EAAE,CAAA;IAC9B,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACzD;;;;;;;;;;;EA+DA"}

package/dist/app/builder/use-save-dashboard.js

@@ -0,0 +1,78 @@
+import { useCallback, useState } from "react";
+import { parseToolResult } from "../../lib/parse-tool-result.js";
+import { draftToLayout, entriesToKeys } from "./builder-model.js";
+// -------------------------------------------------------------------------- //
+// Save-dashboard hook — dialog state + the `save-dashboard` call
+// -------------------------------------------------------------------------- //
+/**
+ * Owns the save dialog's state (open flag, name/description inputs, busy
+ * flag, inline error) and the `save-dashboard` call. Extracted from
+ * `layout-builder.tsx` unchanged: a rejected save surfaces its reason
+ * inline in the SaveDialog instead of failing silently (Finding [3]).
+ */
+export function useSaveDashboard({ callTool, saveToolName, dashboardId, title, keyEntries, stepEntries, draft, onSaved, }) {
+    const [isBusy, setBusy] = useState(false);
+    const [saveOpen, setSaveOpen] = useState(false);
+    const [saveName, setSaveName] = useState(title ?? "");
+    const [saveDescription, setSaveDescription] = useState("");
+    // Last save failure (Finding [3]). Shown inline in the SaveDialog so a
+    // rejected `save-dashboard` call no longer fails silently.
+    const [saveError, setSaveError] = useState(null);
+    const saveDraft = useCallback(async () => {
+        if (!saveName.trim())
+            return;
+        setBusy(true);
+        setSaveError(null);
+        try {
+            const result = await callTool(saveToolName, {
+                id: dashboardId,
+                name: saveName.trim(),
+                description: saveDescription.trim() || undefined,
+                keys: entriesToKeys(keyEntries),
+                steps: stepEntries.filter((s) => s.step.trim().length > 0),
+                layout: draftToLayout(draft),
+                title,
+            });
+            const saved = parseToolResult(result);
+            setSaveOpen(false);
+            if (saved?.id && onSaved) {
+                onSaved({
+                    id: saved.id,
+                    name: saved.name ?? saveName.trim(),
+                });
+            }
+        }
+        catch (err) {
+            // Previously uncaught: a rejected `save-dashboard` left the dialog open
+            // with no feedback. Surface the reason inline (Finding [3]).
+            setSaveError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [
+        callTool,
+        dashboardId,
+        draft,
+        keyEntries,
+        onSaved,
+        saveDescription,
+        saveName,
+        saveToolName,
+        stepEntries,
+        title,
+    ]);
+    return {
+        isBusy,
+        saveOpen,
+        setSaveOpen,
+        saveName,
+        setSaveName,
+        saveDescription,
+        setSaveDescription,
+        saveError,
+        setSaveError,
+        saveDraft,
+    };
+}
+//# sourceMappingURL=use-save-dashboard.js.map

package/dist/app/builder/use-save-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-save-dashboard.js","sourceRoot":"","sources":["../../../src/app/builder/use-save-dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAmC,MAAM,oBAAoB,CAAA;AAElG,gFAAgF;AAChF,iEAAiE;AACjE,gFAAgF;AAEhF;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,GAUR;IACC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;IACrD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC1D,uEAAuE;IACvE,2DAA2D;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAE/D,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAAE,OAAM;QAC5B,OAAO,CAAC,IAAI,CAAC,CAAA;QACb,YAAY,CAAC,IAAI,CAAC,CAAA;QAClB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,YAAY,EAAE;gBAC1C,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE;gBACrB,WAAW,EAAE,eAAe,CAAC,IAAI,EAAE,IAAI,SAAS;gBAChD,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC;gBAC/B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC1D,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC;gBAC5B,KAAK;aACN,CAAC,CAAA;YACF,MAAM,KAAK,GAAG,eAAe,CAAwC,MAAM,CAAC,CAAA;YAC5E,WAAW,CAAC,KAAK,CAAC,CAAA;YAClB,IAAI,KAAK,EAAE,EAAE,IAAI,OAAO,EAAE,CAAC;gBACzB,OAAO,CAAC;oBACN,EAAE,EAAE,KAAK,CAAC,EAAE;oBACZ,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,EAAE;iBACpC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,wEAAwE;YACxE,6DAA6D;YAC7D,YAAY,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;QAChE,CAAC;gBAAS,CAAC;YACT,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC;IACH,CAAC,EAAE;QACD,QAAQ;QACR,WAAW;QACX,KAAK;QACL,UAAU;QACV,OAAO;QACP,eAAe;QACf,QAAQ;QACR,YAAY;QACZ,WAAW;QACX,KAAK;KACN,CAAC,CAAA;IAEF,OAAO;QACL,MAAM;QACN,QAAQ;QACR,WAAW;QACX,QAAQ;QACR,WAAW;QACX,eAAe;QACf,kBAAkB;QAClB,SAAS;QACT,YAAY;QACZ,SAAS;KACV,CAAA;AACH,CAAC"}

package/dist/app/host-bridge.d.ts

@@ -4,7 +4,7 @@ import { type ReactNode } from "react";
  * host runtime. A `HostBridge` is the single seam a portable widget talks to:
  * write the widget against {@link useHostBridge} and it runs unchanged in our
  * own `mcp-use` host, inside ChatGPT (OpenAI Apps SDK), or as a standalone web
- * app driven directly by a `@modelcontextprotocol/sdk` client — only the
+ * app driven directly by a `@modelcontextprotocol/client` client — only the
  * surrounding adapter changes.
  *
  * This is deliberately the *minimum* a deterministic UI needs, not a mirror of
@@ -164,7 +164,7 @@ export declare function createChatGptHostBridge(sdk?: OpenAiAppsSdk | null): Hos
 export interface StandaloneHostBridgeOptions {
     /**
      * The only required capability: how to call a tool on the server. In a
-     * standalone web app this typically wraps a `@modelcontextprotocol/sdk`
+     * standalone web app this typically wraps a `@modelcontextprotocol/client`
      * `Client.callTool({ name, arguments })`, but any function with this shape
      * works — that injection is the whole point: hand-built widgets render
      * against *any* existing MCP server without the toolkit's host runtime.
@@ -197,7 +197,7 @@ export interface StandaloneHostBridgeOptions {
 /**
  * Build a {@link HostBridge} for a standalone web app driven against an existing
  * MCP server — no toolkit host, no `createFrameworkApp`. You inject `callTool`
- * (usually a thin wrapper over a `@modelcontextprotocol/sdk` client); the
+ * (usually a thin wrapper over a `@modelcontextprotocol/client` client); the
  * conversation-shaped verbs (`sendFollowup`, `setModelContext`) are no-ops
  * unless you wire handlers, and `openExternal` defaults to `window.open`.
  *
@@ -207,7 +207,7 @@ export interface StandaloneHostBridgeOptions {
  * harness also builds on this factory so host simulation has a single source.
  *
  * @example
- * const client = new Client(…) // @modelcontextprotocol/sdk
+ * const client = new Client(…) // @modelcontextprotocol/client
  * const bridge = createStandaloneHostBridge({
  *   callTool: (name, args) => client.callTool({ name, arguments: args }),
  *   getData: () => currentRecord,

package/dist/app/host-bridge.js

@@ -173,7 +173,7 @@ export function createChatGptHostBridge(sdk) {
 /**
  * Build a {@link HostBridge} for a standalone web app driven against an existing
  * MCP server — no toolkit host, no `createFrameworkApp`. You inject `callTool`
- * (usually a thin wrapper over a `@modelcontextprotocol/sdk` client); the
+ * (usually a thin wrapper over a `@modelcontextprotocol/client` client); the
  * conversation-shaped verbs (`sendFollowup`, `setModelContext`) are no-ops
  * unless you wire handlers, and `openExternal` defaults to `window.open`.
  *
@@ -183,7 +183,7 @@ export function createChatGptHostBridge(sdk) {
  * harness also builds on this factory so host simulation has a single source.
  *
  * @example
- * const client = new Client(…) // @modelcontextprotocol/sdk
+ * const client = new Client(…) // @modelcontextprotocol/client
  * const bridge = createStandaloneHostBridge({
  *   callTool: (name, args) => client.callTool({ name, arguments: args }),
  *   getData: () => currentRecord,

package/dist/app/layout-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-builder.d.ts","sourceRoot":"","sources":["../../src/app/layout-builder.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,YAAY,EAEZ,eAAe,EAKhB,MAAM,2BAA2B,CAAA;AAiBlC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAW9E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAO3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAM9D,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAA;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1D,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QACjB,MAAM,EAAE,YAAY,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;QAC9B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;YAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;YACjB,QAAQ,EAAE,MAAM,CACd,MAAM,EACN;gBAAE,IAAI,EAAE,OAAO,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,SAAS,EAAE,MAAM,CAAA;aAAE,CAClF,CAAA;YACD,MAAM,EAAE;gBAAE,MAAM,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,EAAE,CAAA;SAC7C,CAAA;KACF,KAAK,IAAI,CAAA;CACX;AAQD,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAA2C,EAC3C,YAA+B,EAC/B,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,kBAAkB,+BA2qBpB"}
+{"version":3,"file":"layout-builder.d.ts","sourceRoot":"","sources":["../../src/app/layout-builder.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,2BAA2B,CAAA;AAOnG,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAc9E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAO3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAM9D,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAA;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1D,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QACjB,MAAM,EAAE,YAAY,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;QAC9B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;YAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;YACjB,QAAQ,EAAE,MAAM,CACd,MAAM,EACN;gBAAE,IAAI,EAAE,OAAO,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,SAAS,EAAE,MAAM,CAAA;aAAE,CAClF,CAAA;YACD,MAAM,EAAE;gBAAE,MAAM,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,EAAE,CAAA;SAC7C,CAAA;KACF,KAAK,IAAI,CAAA;CACX;AAMD,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAA2C,EAC3C,YAA+B,EAC/B,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,kBAAkB,+BA0XpB"}

package/dist/app/layout-builder.js

@@ -1,24 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
-import { AlertTriangle, Eye, Layers, Plus, SlidersHorizontal, X } from "lucide-react";
-import { parseToolResult } from "../lib/parse-tool-result.js";
-import { defaultStepIdFor, draftToLayout, entriesToKeys, initDraft, keysToEntries, sizeToSpan, toPipelineContext, } from "./builder/builder-model.js";
+import { useCallback, useMemo, useReducer, useState } from "react";
+import { Eye, Layers, SlidersHorizontal } from "lucide-react";
+import { draftToLayout, entriesToKeys, initDraft, sizeToSpan } from "./builder/builder-model.js";
 import { draftReducer, initBuilderState, } from "./builder/builder-reducer.js";
 import { DEFAULT_LABELS } from "./builder/labels.js";
 import { Toolbar } from "./builder/Toolbar.js";
 import { PipelineStrip } from "./builder/PipelineStrip.js";
-import { Workspace } from "./builder/Workspace.js";
 import { CatalogueSheet } from "./builder/CatalogueSheet.js";
 import { SaveDialog } from "./builder/SaveDialog.js";
 import { PreviewPane } from "./builder/PreviewPane.js";
-import { WidgetPropsSheet } from "./widget-props-sheet.js";
-import { Button } from "../primitives/button.js";
+import { LayoutSurface } from "./builder/LayoutSurface.js";
+import { BuilderBanners } from "./builder/BuilderBanners.js";
+import { EmptyHint } from "./builder/EmptyHint.js";
+import { CellPropsSheet } from "./builder/CellPropsSheet.js";
+import { useBuilderCatalogue } from "./builder/use-builder-catalogue.js";
+import { useKeyStepEntries } from "./builder/use-key-step-entries.js";
+import { useSaveDashboard } from "./builder/use-save-dashboard.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs.js";
-import { cn } from "../lib/utils.js";
 // -------------------------------------------------------------------------- //
 // Main component
 // -------------------------------------------------------------------------- //
-const EMPTY_CONTEXT = { steps: {}, keys: {}, errors: [] };
 export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps, widgets, callTool, catalogueToolName = "get-builder-catalogue", saveToolName = "save-dashboard", dashboardId, labels, onSaved, onExit, }) {
     const L = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
     // ── Draft layout (pure reducer) ─────────────────────────────────────────
@@ -54,33 +55,22 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
             setRenameRejected(false);
     }
     // ── Keys + steps editor state ───────────────────────────────────────────
-    const [keyEntries, setKeyEntries] = useState(() => keysToEntries(initialKeys));
-    const [stepEntries, setStepEntries] = useState(() => initialSteps ?? []);
-    // ── Live snapshots from get-builder-catalogue responses ─────────────────
-    // Start empty — the first effect below fetches the catalogue on mount.
-    const [liveReachable, setLiveReachable] = useState([]);
-    const [liveUnreachable, setLiveUnreachable] = useState([]);
-    const [liveCatalog, setLiveCatalog] = useState([]);
-    const [liveSteps, setLiveSteps] = useState([]);
-    const [liveContext, setLiveContext] = useState(EMPTY_CONTEXT);
-    // Pipeline validation issues from the catalogue (Finding [10]/[6]). The
-    // catalogue is fail-soft, but `render-view` is fail-hard, so we surface
-    // these so the user sees — before committing — that the pipeline as
-    // configured wouldn't render.
-    const [validationIssues, setValidationIssues] = useState([]);
-    const [status, setStatus] = useState("idle");
-    // Last catalogue-fetch failure (Finding [3]). Surfaced as a toolbar banner
-    // instead of only `console.warn`-ing, so the user knows the palette/context
-    // may be stale. Cleared on the next successful refresh.
-    const [refreshError, setRefreshError] = useState(null);
+    const { keyEntries, stepEntries, addKey, updateKey, removeKey, addStep, updateStep, removeStep } = useKeyStepEntries({ initialKeys, initialSteps });
+    // ── Catalogue fetch (mount + on key/step edits) ─────────────────────────
+    // The builder fetches its own catalogue from the app-only
+    // `get-builder-catalogue` tool; the LLM never sees this data.
+    const { liveReachable, liveUnreachable, liveCatalog, liveSteps, liveContext, validationIssues, status, refreshError, widgetById, propsSchemaByWidgetId, paletteByApp, liveKeyCount, stepsByApp, } = useBuilderCatalogue({ callTool, catalogueToolName, keyEntries, stepEntries });
     // ── Save dialog ─────────────────────────────────────────────────────────
-    const [isBusy, setBusy] = useState(false);
-    const [saveOpen, setSaveOpen] = useState(false);
-    const [saveName, setSaveName] = useState(title ?? "");
-    const [saveDescription, setSaveDescription] = useState("");
-    // Last save failure (Finding [3]). Shown inline in the SaveDialog so a
-    // rejected `save-dashboard` call no longer fails silently.
-    const [saveError, setSaveError] = useState(null);
+    const { isBusy, saveOpen, setSaveOpen, saveName, setSaveName, saveDescription, setSaveDescription, saveError, setSaveError, saveDraft, } = useSaveDashboard({
+        callTool,
+        saveToolName,
+        dashboardId,
+        title,
+        keyEntries,
+        stepEntries,
+        draft,
+        onSaved,
+    });
     // ── DnD ──────────────────────────────────────────────────────────────────
     const [dragOverRow, setDragOverRow] = useState(null);
     // Which cell (if any) is having its props configured. The
@@ -89,48 +79,6 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
     // — including across tabs. Stored as `{ rowIdx, cellIdx }` against the
     // currently active draft surface (rows or active tab's rows).
     const [configuringCell, setConfiguringCell] = useState(null);
-    // ── Derived ─────────────────────────────────────────────────────────────
-    const widgetById = useMemo(() => {
-        const map = new Map();
-        for (const w of liveReachable)
-            map.set(w.id, w);
-        return map;
-    }, [liveReachable]);
-    // Per-widget propsSchema lookup. Merged from both reachable and
-    // unreachable lists because a saved layout can reference a widget whose
-    // `requires` aren't currently satisfied — we still want the user to be
-    // able to edit its props.
-    const propsSchemaByWidgetId = useMemo(() => {
-        const map = new Map();
-        for (const w of liveReachable) {
-            if (w.propsSchema)
-                map.set(w.id, w.propsSchema);
-        }
-        for (const w of liveUnreachable) {
-            if (w.propsSchema)
-                map.set(w.id, w.propsSchema);
-        }
-        return map;
-    }, [liveReachable, liveUnreachable]);
-    const paletteByApp = useMemo(() => {
-        const groups = new Map();
-        for (const w of liveReachable) {
-            if (!groups.has(w.app))
-                groups.set(w.app, []);
-            groups.get(w.app).push(w);
-        }
-        return [...groups.entries()].sort(([a], [b]) => a.localeCompare(b));
-    }, [liveReachable]);
-    const liveKeyCount = useMemo(() => liveCatalog.filter((c) => c.inContext).length, [liveCatalog]);
-    const stepsByApp = useMemo(() => {
-        const groups = new Map();
-        for (const s of liveSteps) {
-            if (!groups.has(s.app))
-                groups.set(s.app, []);
-            groups.get(s.app).push(s);
-        }
-        return [...groups.entries()].sort(([a], [b]) => a.localeCompare(b));
-    }, [liveSteps]);
     const activeRows = draft.kind === "tabs" ? (draft.tabs[activeTabIndex]?.rows ?? []) : draft.rows;
     // ── Layout mutations (dispatch pure actions) ────────────────────────────
     const addWidgetToRow = useCallback((widgetId, targetRowIdx) => {
@@ -171,149 +119,6 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
             setEditingTabIdx(null);
     }, [draft, setEditingTabIdx]);
     const removeTab = useCallback((tabIdx) => dispatch({ type: "removeTab", tabIdx }), []);
-    // ── Keys/steps mutations ────────────────────────────────────────────────
-    const addKey = useCallback((prefilledName) => {
-        setKeyEntries((prev) => {
-            if (prefilledName) {
-                if (prev.some((e) => e.name === prefilledName))
-                    return prev;
-                return [...prev, { name: prefilledName, rawValue: "" }];
-            }
-            return [...prev, { name: "", rawValue: "" }];
-        });
-    }, []);
-    const updateKey = useCallback((idx, patch) => {
-        setKeyEntries((prev) => prev.map((e, i) => (i === idx ? { ...e, ...patch } : e)));
-    }, []);
-    const removeKey = useCallback((idx) => {
-        setKeyEntries((prev) => prev.filter((_, i) => i !== idx));
-    }, []);
-    const addStep = useCallback((stepId) => {
-        setStepEntries((prev) => {
-            const taken = new Set(prev.map((s) => s.id));
-            const newId = stepId ? defaultStepIdFor(stepId, taken) : `step-${prev.length + 1}`;
-            return [...prev, { id: newId, step: stepId ?? "", optional: false }];
-        });
-    }, []);
-    const updateStep = useCallback((idx, patch) => {
-        setStepEntries((prev) => prev.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
-    }, []);
-    const removeStep = useCallback((idx) => {
-        setStepEntries((prev) => prev.filter((_, i) => i !== idx));
-    }, []);
-    // ── Catalogue fetch (mount + on key/step edits) ─────────────────────────
-    // The builder fetches its own catalogue from the app-only
-    // `get-builder-catalogue` tool; the LLM never sees this data.
-    const refreshBuilder = useCallback(async () => {
-        setStatus("refreshing");
-        try {
-            const result = await callTool(catalogueToolName, {
-                keys: entriesToKeys(keyEntries),
-                steps: stepEntries.filter((s) => s.step.trim().length > 0),
-            });
-            const sc = parseToolResult(result);
-            if (sc?.reachableWidgets)
-                setLiveReachable(sc.reachableWidgets);
-            if (sc?.unreachableWidgets)
-                setLiveUnreachable(sc.unreachableWidgets);
-            if (sc?.availableSteps)
-                setLiveSteps(sc.availableSteps);
-            if (sc?.keyCatalog)
-                setLiveCatalog(sc.keyCatalog);
-            if (sc?.context)
-                setLiveContext(toPipelineContext(sc.context));
-            // Pipeline issues are fail-soft in the catalogue but fail-hard in
-            // render-view; surface them so the user sees the render path wouldn't
-            // run as configured (Finding [10]/[6]). Coerce undefined → [] so a
-            // fixed pipeline clears a previously-shown warning.
-            setValidationIssues(sc?.validationIssues ?? []);
-            // A successful fetch clears any stale failure banner.
-            setRefreshError(null);
-        }
-        catch (err) {
-            // Fail soft: when the host's server hasn't registered the app-only
-            // `get-builder-catalogue` tool (the builder platform is opt-in via
-            // `app.builder`), the call rejects. Degrade to the static catalogue
-            // already derived from the layout rather than crashing the iframe —
-            // but surface the failure so the user knows the palette may be stale
-            // (Finding [3]).
-            const reason = err instanceof Error ? err.message : String(err);
-            console.warn(`[mcp-toolkit] builder catalogue fetch failed (${catalogueToolName}): ${reason}. ` +
-                "The builder platform may be disabled on this server (app.builder).");
-            setRefreshError(reason);
-        }
-        finally {
-            setStatus("idle");
-        }
-    }, [catalogueToolName, callTool, keyEntries, stepEntries]);
-    // Fetch the catalogue on mount (no debounce) so the builder is ready
-    // immediately. Then on every keys/steps edit, debounce 600ms before
-    // re-fetching. The ref pattern keeps the effect dependent on only
-    // keyEntries / stepEntries.
-    const refreshRef = useRef(refreshBuilder);
-    useEffect(() => {
-        refreshRef.current = refreshBuilder;
-    }, [refreshBuilder]);
-    const isFirstRun = useRef(true);
-    useEffect(() => {
-        if (isFirstRun.current) {
-            isFirstRun.current = false;
-            void refreshRef.current();
-            return;
-        }
-        setStatus("pending");
-        const handle = window.setTimeout(() => {
-            void refreshRef.current();
-        }, 600);
-        return () => {
-            window.clearTimeout(handle);
-        };
-    }, [keyEntries, stepEntries]);
-    // ── Save ────────────────────────────────────────────────────────────────
-    const saveDraft = useCallback(async () => {
-        if (!saveName.trim())
-            return;
-        setBusy(true);
-        setSaveError(null);
-        try {
-            const result = await callTool(saveToolName, {
-                id: dashboardId,
-                name: saveName.trim(),
-                description: saveDescription.trim() || undefined,
-                keys: entriesToKeys(keyEntries),
-                steps: stepEntries.filter((s) => s.step.trim().length > 0),
-                layout: draftToLayout(draft),
-                title,
-            });
-            const saved = parseToolResult(result);
-            setSaveOpen(false);
-            if (saved?.id && onSaved) {
-                onSaved({
-                    id: saved.id,
-                    name: saved.name ?? saveName.trim(),
-                });
-            }
-        }
-        catch (err) {
-            // Previously uncaught: a rejected `save-dashboard` left the dialog open
-            // with no feedback. Surface the reason inline (Finding [3]).
-            setSaveError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            setBusy(false);
-        }
-    }, [
-        callTool,
-        dashboardId,
-        draft,
-        keyEntries,
-        onSaved,
-        saveDescription,
-        saveName,
-        saveToolName,
-        stepEntries,
-        title,
-    ]);
     // ── Smart action: add a producing step for a missing key ────────────────
     const addProducingStepFor = useCallback((key) => {
         const producer = liveCatalog.find((c) => c.key === key)?.producedBySteps[0];
@@ -324,25 +129,6 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
     const widgetProps = useMemo(() => ({ keys: liveContext.keys, context: liveContext }), [liveContext]);
     const hasAnyCell = activeRows.some((r) => r.row.length > 0);
     const liveKeysMap = liveContext.keys;
-    const layoutContent = draft.kind === "tabs" ? (_jsxs(Tabs, { value: draft.tabs[activeTabIndex]?.label ?? "", onValueChange: (label) => {
-            const idx = draft.tabs.findIndex((t) => t.label === label);
-            if (idx >= 0)
-                setActiveTabIndex(idx);
-        }, children: [_jsxs("div", { className: "mb-3 flex items-center gap-1", children: [_jsx(TabsList, { children: draft.tabs.map((tab, idx) => (_jsxs("div", { className: "group relative inline-flex", children: [_jsx(TabsTrigger, { value: tab.label, className: "pr-7", onDoubleClick: () => setEditingTabIdx(idx), title: "Double-click to rename", children: editingTabIdx === idx ? (_jsx("input", { autoFocus: true, defaultValue: tab.label, "aria-invalid": renameRejected, onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
-                                            if (e.key === "Enter") {
-                                                e.preventDefault();
-                                                commitRename(idx, e.currentTarget.value);
-                                            }
-                                            else if (e.key === "Escape") {
-                                                e.preventDefault();
-                                                setEditingTabIdx(null);
-                                            }
-                                        }, onBlur: (e) => {
-                                            commitRename(idx, e.currentTarget.value);
-                                        }, className: cn("w-24 border-none bg-transparent p-0 text-inherit outline-none focus:ring-0", renameRejected && "text-destructive"), size: Math.max(tab.label.length + 1, 6) })) : (_jsx("span", { children: tab.label })) }), _jsx("button", { type: "button", "aria-label": L.removeTab, title: L.removeTab, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
-                                        e.stopPropagation();
-                                        removeTab(idx);
-                                    }, className: "text-muted-foreground/60 hover:text-foreground absolute top-1/2 right-1 -translate-y-1/2 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 data-[state=active]:opacity-100", children: _jsx(X, { className: "size-3" }) })] }, tab.label))) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: addTab, "aria-label": L.addTab, title: L.addTab, children: _jsx(Plus, {}) }), _jsx("span", { className: "text-muted-foreground/70 ml-2 hidden text-[10px] sm:inline", children: "double-click a tab to rename" })] }), renameRejected && editingTabIdx !== null && (_jsx("p", { className: "text-destructive -mt-1 mb-2 text-[11px]", role: "alert", children: L.renameDuplicate })), draft.tabs.map((tab, idx) => (_jsx(TabsContent, { value: tab.label, className: "mt-0", children: idx === activeTabIndex ? (_jsx(Workspace, { L: L, paletteByApp: paletteByApp, paletteCount: liveReachable.length, activeRows: activeRows, focusedRowIndex: focusedRowIndex, setFocusedRowIndex: setFocusedRowIndex, dragOverRow: dragOverRow, setDragOverRow: setDragOverRow, onAddRow: addRow, onRemoveRow: removeRow, onMoveRow: moveRow, onSetCellSpan: setCellSpan, onRemoveCell: removeCell, onAddWidget: addWidgetToRow, onConfigureCell: (rowIdx, cellIdx) => setConfiguringCell({ rowIdx, cellIdx }), propsSchemaByWidgetId: propsSchemaByWidgetId, widgets: widgets, widgetProps: widgetProps })) : null }, tab.label)))] })) : (_jsx(Workspace, { L: L, paletteByApp: paletteByApp, paletteCount: liveReachable.length, activeRows: activeRows, focusedRowIndex: focusedRowIndex, setFocusedRowIndex: setFocusedRowIndex, dragOverRow: dragOverRow, setDragOverRow: setDragOverRow, onAddRow: addRow, onRemoveRow: removeRow, onMoveRow: moveRow, onSetCellSpan: setCellSpan, onRemoveCell: removeCell, onAddWidget: addWidgetToRow, onConfigureCell: (rowIdx, cellIdx) => setConfiguringCell({ rowIdx, cellIdx }), propsSchemaByWidgetId: propsSchemaByWidgetId, widgets: widgets, widgetProps: widgetProps, showAddTabButton: true, onAddTab: addTab }));
     return (_jsxs("div", { className: "flex min-h-[60vh] flex-col gap-4 p-1", children: [_jsx(Toolbar, { L: L, previewMode: view === "preview", isBusy: isBusy, status: status, liveKeys: liveKeyCount, reachableCount: liveReachable.length, unreachableCount: liveUnreachable.length, onOpenCatalogue: () => setCatalogueOpen(true), onOpenSave: () => setSaveOpen(true), onDone: onExit
                     ? () => onExit({
                         layout: draftToLayout(draft),
@@ -364,7 +150,26 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
                             errors: liveContext.errors,
                         },
                     })
-                    : undefined, hasAnyCell: hasAnyCell }), _jsx(BuilderBanners, { L: L, catalogueToolName: catalogueToolName, refreshError: refreshError, validationIssues: validationIssues }), _jsxs(Tabs, { value: view, onValueChange: (v) => setView(v), children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "layout", children: [_jsx(Layers, { className: "size-3.5" }), L.viewLayoutTab] }), _jsxs(TabsTrigger, { value: "pipeline", children: [_jsx(SlidersHorizontal, { className: "size-3.5" }), L.viewPipelineTab, (keyEntries.length > 0 || stepEntries.length > 0) && (_jsxs("span", { className: "bg-muted text-muted-foreground ml-1 rounded px-1 font-mono text-[10px]", children: [keyEntries.length, "/", stepEntries.length] }))] }), _jsxs(TabsTrigger, { value: "preview", disabled: !hasAnyCell, children: [_jsx(Eye, { className: "size-3.5" }), L.viewPreviewTab] })] }), _jsx(TabsContent, { value: "layout", className: "mt-4", children: liveReachable.length === 0 && !hasAnyCell ? (_jsx(EmptyHint, { L: L, onGotoPipeline: () => setView("pipeline") })) : (layoutContent) }), _jsx(TabsContent, { value: "pipeline", className: "mt-4", children: _jsx(PipelineStrip, { L: L, keyEntries: keyEntries, stepEntries: stepEntries, keyCatalog: liveCatalog, availableSteps: liveSteps, stepsByApp: stepsByApp, liveKeys: liveKeysMap, onAddKey: addKey, onUpdateKey: updateKey, onRemoveKey: removeKey, onAddStep: addStep, onUpdateStep: updateStep, onRemoveStep: removeStep, status: status }) }), _jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsx(PreviewPane, { draft: draft, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, widgets: widgets, widgetProps: widgetProps }) })] }), _jsx(CatalogueSheet, { L: L, open: catalogueOpen, onOpenChange: setCatalogueOpen, keyCatalog: liveCatalog, availableSteps: liveSteps, unreachableWidgets: liveUnreachable, onSeedKey: (name) => {
+                    : undefined, hasAnyCell: hasAnyCell }), _jsx(BuilderBanners, { L: L, catalogueToolName: catalogueToolName, refreshError: refreshError, validationIssues: validationIssues }), _jsxs(Tabs, { value: view, onValueChange: (v) => setView(v), children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "layout", children: [_jsx(Layers, { className: "size-3.5" }), L.viewLayoutTab] }), _jsxs(TabsTrigger, { value: "pipeline", children: [_jsx(SlidersHorizontal, { className: "size-3.5" }), L.viewPipelineTab, (keyEntries.length > 0 || stepEntries.length > 0) && (_jsxs("span", { className: "bg-muted text-muted-foreground ml-1 rounded px-1 font-mono text-[10px]", children: [keyEntries.length, "/", stepEntries.length] }))] }), _jsxs(TabsTrigger, { value: "preview", disabled: !hasAnyCell, children: [_jsx(Eye, { className: "size-3.5" }), L.viewPreviewTab] })] }), _jsx(TabsContent, { value: "layout", className: "mt-4", children: liveReachable.length === 0 && !hasAnyCell ? (_jsx(EmptyHint, { L: L, onGotoPipeline: () => setView("pipeline") })) : (_jsx(LayoutSurface, { L: L, draft: draft, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, editingTabIdx: editingTabIdx, setEditingTabIdx: setEditingTabIdx, renameRejected: renameRejected, commitRename: commitRename, onAddTab: addTab, onRemoveTab: removeTab, workspace: {
+                                L,
+                                paletteByApp,
+                                paletteCount: liveReachable.length,
+                                activeRows,
+                                focusedRowIndex,
+                                setFocusedRowIndex,
+                                dragOverRow,
+                                setDragOverRow,
+                                onAddRow: addRow,
+                                onRemoveRow: removeRow,
+                                onMoveRow: moveRow,
+                                onSetCellSpan: setCellSpan,
+                                onRemoveCell: removeCell,
+                                onAddWidget: addWidgetToRow,
+                                onConfigureCell: (rowIdx, cellIdx) => setConfiguringCell({ rowIdx, cellIdx }),
+                                propsSchemaByWidgetId,
+                                widgets,
+                                widgetProps,
+                            } })) }), _jsx(TabsContent, { value: "pipeline", className: "mt-4", children: _jsx(PipelineStrip, { L: L, keyEntries: keyEntries, stepEntries: stepEntries, keyCatalog: liveCatalog, availableSteps: liveSteps, stepsByApp: stepsByApp, liveKeys: liveKeysMap, onAddKey: addKey, onUpdateKey: updateKey, onRemoveKey: removeKey, onAddStep: addStep, onUpdateStep: updateStep, onRemoveStep: removeStep, status: status }) }), _jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsx(PreviewPane, { draft: draft, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, widgets: widgets, widgetProps: widgetProps }) })] }), _jsx(CatalogueSheet, { L: L, open: catalogueOpen, onOpenChange: setCatalogueOpen, keyCatalog: liveCatalog, availableSteps: liveSteps, unreachableWidgets: liveUnreachable, onSeedKey: (name) => {
                     addKey(name);
                     setCatalogueOpen(false);
                     setView("pipeline");
@@ -377,42 +182,6 @@ export function LayoutBuilder({ initialLayout, title, initialKeys, initialSteps,
                     // dismissed so a fresh attempt starts clean.
                     setSaveError(null);
                     setSaveOpen(open);
-                }, name: saveName, setName: setSaveName, description: saveDescription, setDescription: setSaveDescription, onSubmit: saveDraft, busy: isBusy, error: saveError }), (() => {
-                if (!configuringCell)
-                    return null;
-                const cell = activeRows[configuringCell.rowIdx]?.row[configuringCell.cellIdx];
-                if (!cell)
-                    return null;
-                const schema = propsSchemaByWidgetId.get(cell.widget);
-                return (_jsx(WidgetPropsSheet, { open: true, onOpenChange: (open) => {
-                        if (!open)
-                            setConfiguringCell(null);
-                    }, widgetId: cell.widget, schema: schema, value: cell.props, onApply: (next) => {
-                        setCellProps(configuringCell.rowIdx, configuringCell.cellIdx, next);
-                        setConfiguringCell(null);
-                    } }));
-            })()] }));
-}
-function EmptyHint({ L, onGotoPipeline, }) {
-    return (_jsxs("div", { className: "border-muted-foreground/30 text-muted-foreground flex flex-col items-center gap-2 rounded-md border border-dashed p-10 text-sm", children: [_jsx(Layers, { className: "size-5" }), _jsx("p", { children: "No widgets reachable yet." }), _jsxs("p", { className: "text-xs", children: ["Open the ", _jsx("span", { className: "font-medium", children: L.viewPipelineTab }), " tab to seed keys or add a pipeline step \u2014 the palette unlocks as soon as a widget's contract is satisfied."] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onGotoPipeline, className: "mt-1", children: [_jsx(SlidersHorizontal, {}), " Open ", L.viewPipelineTab] })] }));
-}
-// -------------------------------------------------------------------------- //
-// Builder banners — catalogue-fetch failure + pipeline validation warning
-// -------------------------------------------------------------------------- //
-/**
- * Inline feedback strip under the toolbar. Surfaces two things the builder
- * previously swallowed:
- *   - a `get-builder-catalogue` fetch failure (Finding [3]) — only console-
- *     logged before, so the user couldn't tell the palette was stale, and
- *   - pipeline validation issues (Finding [10]/[6]) the catalogue reports
- *     fail-soft but `render-view` would reject fail-hard.
- *
- * Renders nothing when there's no error and no issues, so the happy path is
- * visually unchanged.
- */
-function BuilderBanners({ L, catalogueToolName, refreshError, validationIssues, }) {
-    if (!refreshError && validationIssues.length === 0)
-        return null;
-    return (_jsxs("div", { className: "flex flex-col gap-2", role: "status", "aria-live": "polite", children: [refreshError && (_jsxs("div", { className: "border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border px-3 py-2 text-xs", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium", children: L.catalogueError }), _jsxs("p", { className: "text-destructive/80 mt-0.5 break-words", children: [_jsx("span", { className: "font-mono", children: catalogueToolName }), ": ", refreshError] })] })] })), validationIssues.length > 0 && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium", children: L.validationWarning }), _jsx("ul", { className: "mt-0.5 list-inside list-disc space-y-0.5", children: validationIssues.map((issue, idx) => (_jsx("li", { className: "break-words", children: issue }, idx))) })] })] }))] }));
+                }, name: saveName, setName: setSaveName, description: saveDescription, setDescription: setSaveDescription, onSubmit: saveDraft, busy: isBusy, error: saveError }), _jsx(CellPropsSheet, { configuringCell: configuringCell, activeRows: activeRows, propsSchemaByWidgetId: propsSchemaByWidgetId, onApply: setCellProps, onClose: () => setConfiguringCell(null) })] }));
 }
 //# sourceMappingURL=layout-builder.js.map