@miragon/mcp-toolkit-ui 0.10.1

package/README.md

@@ -0,0 +1,36 @@
+# @miragon/mcp-toolkit-ui
+
+React UI for MCP servers: shadcn primitives, composite components, TanStack
+Query hooks, and the MCP App shell (McpAppView + WidgetRenderer).
+
+## Install
+
+Published to the public npm registry under the `@miragon` scope — no `.npmrc`
+or token needed.
+
+```sh
+pnpm add @miragon/mcp-toolkit-ui @miragon/mcp-toolkit-core mcp-use@1.34.1 react@19.2.7 react-dom@19.2.7 tailwindcss@4.3.1
+```
+
+Peer versions are pinned exactly — install the versions above.
+
+## Import paths
+
+| Subpath                   | Key exports                                                                                                                                                                           | Constraint                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `@miragon/mcp-toolkit-ui` | Primitives (`Card`, `Table`, `Button`, …), composed components (`KpiGrid`, `WidgetHeader`, `FilterBar`), `useToolQuery`, `createTheme` / `ThemeProvider`, `cn`, `parseViewToolResult` | Free of `mcp-use/react` value imports (langchain transitive) — safe for apps that never mount the shell. |
+| `…-ui/app`                | `McpToolkitApp`, `McpAppView`, `WidgetRenderer`, `useHostBridge`, `adaptDataWidget`, `WidgetFixtureHost`                                                                              | The MCP app shell + host bridge — imports `mcp-use/react`. Never re-exported from the root barrel.       |
+| `…-ui/hooks`              | `useViewToolQuery`, `useViewData`, `useToolQuery`, `useToolMutation`                                                                                                                  | View-tool hooks.                                                                                         |
+| `…-ui/globals.css`        | Tailwind v4 theme + design tokens                                                                                                                                                     | Import once in the app entry.                                                                            |
+
+## Component catalog
+
+`ui-catalog.json` (shipped in the tarball) is the machine-readable catalog of
+every prompt-relevant component and hook — import path, props, when to use.
+Human twin: [docs/reference/components.md](https://github.com/Miragon/mcp-toolkit/blob/main/docs/reference/components.md).
+
+## Links
+
+- [API reference](https://github.com/Miragon/mcp-toolkit/blob/main/docs/reference/api-ui.md)
+- [Getting started](https://github.com/Miragon/mcp-toolkit/blob/main/docs/getting-started.md)
+- [Starter template](https://github.com/Miragon/mcp-toolkit-starter) — "Use this template" for a new server project

package/dist/app/adapt-data-widget.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentType } from "react";
+import type { WidgetComponent } from "./widget-renderer.js";
+/**
+ * Builds the model-context line for an adapted widget. Receives the resolved
+ * step data (never null — the adapter skips the description while loading) plus
+ * the per-cell layout props so scope filters that only travel as props (e.g.
+ * `period` / `engine` on dashboard widgets) can be reported too.
+ */
+export type DescribeForModel<T> = (data: NonNullable<T>, props: Readonly<Record<string, unknown>>) => string;
+/**
+ * Wraps a "single-data" widget component (signature `({ data }: { data: T | null })`)
+ * so it can be registered as a framework {@link WidgetComponent} (which receives
+ * `WidgetProps = { keys, context, widgetProps? }`). The adapter looks up the
+ * matching step result in `context.steps` by its `_dataType` and forwards
+ * `result.data` to the wrapped widget. Lets `render-view` and `*_show_*` tools
+ * (via `buildSingleWidgetView`) share the same widget components without
+ * changing their props.
+ *
+ * Per-cell `props` from the layout (`row[].props`) are spread onto the
+ * wrapped widget as named props. This lets the same widget appear multiple
+ * times in one view with different scoping (e.g. one tab per process key).
+ *
+ * When `describeForModel` is provided the adapter wraps the widget in a
+ * `ModelContext` so the model knows what the user is looking at (view identity,
+ * active filters, headline numbers) without per-widget boilerplate. The
+ * description is only rendered once the step data is present; widgets that
+ * self-fetch when the adapter has no data (cockpit views) must render their own
+ * `<ModelContext>` instead.
+ */
+export declare function adaptDataWidget<T>(Widget: ComponentType<{
+    data: T | null;
+} & Record<string, unknown>>, dataType: string, describeForModel?: DescribeForModel<T>): WidgetComponent;
+//# sourceMappingURL=adapt-data-widget.d.ts.map

package/dist/app/adapt-data-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapt-data-widget.d.ts","sourceRoot":"","sources":["../../src/app/adapt-data-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EACpB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KACrC,MAAM,CAAA;AAEX;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,MAAM,EAAE,aAAa,CAAC;IAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACnE,QAAQ,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACrC,eAAe,CAUjB"}

package/dist/app/adapt-data-widget.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModelContext } from "mcp-use/react";
+/**
+ * Wraps a "single-data" widget component (signature `({ data }: { data: T | null })`)
+ * so it can be registered as a framework {@link WidgetComponent} (which receives
+ * `WidgetProps = { keys, context, widgetProps? }`). The adapter looks up the
+ * matching step result in `context.steps` by its `_dataType` and forwards
+ * `result.data` to the wrapped widget. Lets `render-view` and `*_show_*` tools
+ * (via `buildSingleWidgetView`) share the same widget components without
+ * changing their props.
+ *
+ * Per-cell `props` from the layout (`row[].props`) are spread onto the
+ * wrapped widget as named props. This lets the same widget appear multiple
+ * times in one view with different scoping (e.g. one tab per process key).
+ *
+ * When `describeForModel` is provided the adapter wraps the widget in a
+ * `ModelContext` so the model knows what the user is looking at (view identity,
+ * active filters, headline numbers) without per-widget boilerplate. The
+ * description is only rendered once the step data is present; widgets that
+ * self-fetch when the adapter has no data (cockpit views) must render their own
+ * `<ModelContext>` instead.
+ */
+export function adaptDataWidget(Widget, dataType, describeForModel) {
+    function AdaptedWidget({ context, widgetProps }) {
+        const stepResult = Object.values(context.steps).find((s) => s._dataType === dataType);
+        const data = (stepResult?.data ?? null);
+        const widget = _jsx(Widget, { ...(widgetProps ?? {}), data: data });
+        if (data == null || !describeForModel)
+            return widget;
+        return _jsx(ModelContext, { content: describeForModel(data, widgetProps ?? {}), children: widget });
+    }
+    AdaptedWidget.displayName = `Adapted(${Widget.displayName ?? Widget.name ?? "Widget"})`;
+    return AdaptedWidget;
+}
+//# sourceMappingURL=adapt-data-widget.js.map

package/dist/app/adapt-data-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapt-data-widget.js","sourceRoot":"","sources":["../../src/app/adapt-data-widget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAe5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,eAAe,CAC7B,MAAmE,EACnE,QAAgB,EAChB,gBAAsC;IAEtC,SAAS,aAAa,CAAC,EAAE,OAAO,EAAE,WAAW,EAAe;QAC1D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAA;QACrF,MAAM,IAAI,GAAG,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CAAa,CAAA;QACnD,MAAM,MAAM,GAAG,KAAC,MAAM,OAAK,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,GAAI,CAAA;QAC9D,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO,MAAM,CAAA;QACpD,OAAO,KAAC,YAAY,IAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,EAAE,WAAW,IAAI,EAAE,CAAC,YAAG,MAAM,GAAgB,CAAA;IAClG,CAAC;IACD,aAAa,CAAC,WAAW,GAAG,WAAW,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,GAAG,CAAA;IACvF,OAAO,aAAa,CAAA;AACtB,CAAC"}

package/dist/app/builder/CatalogueSheet.d.ts

@@ -0,0 +1,13 @@
+import type { AvailableStep, KeyCatalogEntry, UnreachableWidget } from "@miragon/mcp-toolkit-core";
+import type { LayoutBuilderLabels } from "./labels.js";
+export declare function CatalogueSheet({ L, open, onOpenChange, keyCatalog, availableSteps, unreachableWidgets, onSeedKey, onAddProducingStep, }: {
+    L: Required<LayoutBuilderLabels>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    keyCatalog: KeyCatalogEntry[];
+    availableSteps: AvailableStep[];
+    unreachableWidgets: UnreachableWidget[];
+    onSeedKey: (name: string) => void;
+    onAddProducingStep: (key: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CatalogueSheet.d.ts.map

package/dist/app/builder/CatalogueSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CatalogueSheet.d.ts","sourceRoot":"","sources":["../../../src/app/builder/CatalogueSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAYlG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAMtD,wBAAgB,cAAc,CAAC,EAC7B,CAAC,EACD,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,kBAAkB,GACnB,EAAE;IACD,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,kBAAkB,EAAE,iBAAiB,EAAE,CAAA;IACvC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C,+BAiLA"}

package/dist/app/builder/CatalogueSheet.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ArrowDownToLine, Library, Plus } from "lucide-react";
+import { Badge } from "../../primitives/badge.js";
+import { Button } from "../../primitives/button.js";
+import { ScrollArea } from "../../primitives/scroll-area.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "../../primitives/sheet.js";
+import { cn } from "../../lib/utils.js";
+// -------------------------------------------------------------------------- //
+// Catalogue Sheet — slides in from the right
+// -------------------------------------------------------------------------- //
+export function CatalogueSheet({ L, open, onOpenChange, keyCatalog, availableSteps, unreachableWidgets, onSeedKey, onAddProducingStep, }) {
+    const producerOf = useMemo(() => {
+        const map = new Map();
+        for (const e of keyCatalog)
+            map.set(e.key, e.producedBySteps[0]);
+        return map;
+    }, [keyCatalog]);
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "w-full sm:max-w-md md:max-w-lg", children: [_jsxs(SheetHeader, { children: [_jsxs(SheetTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Library, { className: "size-4" }), L.catalogue] }), _jsx(SheetDescription, { children: L.catalogueDescription })] }), _jsx(ScrollArea, { className: "flex-1 px-4 pb-4", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(CatalogueSectionHeader, { title: L.catalogueKeys, count: keyCatalog.length }), keyCatalog.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs italic", children: "No keys registered." })) : (_jsx("ul", { className: "flex flex-col gap-1", children: keyCatalog.map((entry) => (_jsxs("li", { className: "hover:bg-accent/40 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "truncate font-mono", children: entry.key }), _jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-1 text-[10px]", entry.inContext
+                                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                                : "text-muted-foreground"), children: [_jsx("span", { className: cn("size-1.5 rounded-full", entry.inContext ? "bg-emerald-500" : "bg-muted-foreground/40") }), entry.inContext ? L.catalogueLive : L.catalogueMissing] })] }), (entry.producedBySteps.length > 0 ||
+                                                    entry.consumedBySteps.length > 0 ||
+                                                    entry.consumedByWidgets.length > 0) && (_jsxs("div", { className: "text-muted-foreground/80 flex flex-col gap-0.5 text-[10px]", children: [entry.producedBySteps.length > 0 && (_jsxs("span", { children: [L.catalogueProducedBy, " ", _jsx("span", { className: "font-mono", children: entry.producedBySteps.join(", ") })] })), entry.consumedBySteps.length > 0 && (_jsxs("span", { children: ["step ", L.catalogueConsumedBy, " ", _jsx("span", { className: "font-mono", children: entry.consumedBySteps.join(", ") })] })), entry.consumedByWidgets.length > 0 && (_jsxs("span", { children: ["widget ", L.catalogueConsumedBy, " ", _jsx("span", { className: "font-mono", children: entry.consumedByWidgets.join(", ") })] }))] })), !entry.inContext && (_jsxs("div", { className: "mt-0.5 flex items-center gap-1", children: [_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => onSeedKey(entry.key), children: [_jsx(Plus, {}), " ", L.cataloguePickKey] }), producerOf.get(entry.key) && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => onAddProducingStep(entry.key), children: [_jsx(ArrowDownToLine, {}), " ", L.catalogueAddProducingStep] }))] }))] }, entry.key))) }))] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(CatalogueSectionHeader, { title: L.catalogueSteps, count: availableSteps.length }), availableSteps.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs italic", children: "No steps registered." })) : (_jsx("ul", { className: "flex flex-col gap-1", children: availableSteps.map((s) => (_jsxs("li", { className: "flex flex-col gap-0.5 rounded-md border px-2 py-1.5 text-xs", children: [_jsx("span", { className: "truncate font-mono", children: s.id }), _jsxs("div", { className: "text-muted-foreground/80 flex flex-wrap gap-x-3 text-[10px]", children: [_jsxs("span", { className: "font-mono", children: ["\u2190 ", s.requires.length ? s.requires.join(", ") : "(no inputs)"] }), _jsxs("span", { className: "font-mono", children: ["\u2192 ", s.produces.length ? s.produces.join(", ") : "(none)"] })] })] }, s.id))) }))] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(CatalogueSectionHeader, { title: L.catalogueUnreachable, count: unreachableWidgets.length }), unreachableWidgets.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs italic", children: L.catalogueUnreachableEmpty })) : (_jsx("ul", { className: "flex flex-col gap-1", children: unreachableWidgets.map((w) => {
+                                            const candidate = w.missingKeys
+                                                .map((k) => ({ key: k, step: producerOf.get(k) }))
+                                                .find((c) => c.step);
+                                            return (_jsxs("li", { className: "bg-muted/20 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs", children: [_jsx("span", { className: "truncate font-mono", children: w.id }), _jsxs("span", { className: "text-muted-foreground/80 text-[10px]", children: [L.catalogueNeedsKeys, " ", _jsx("span", { className: "font-mono", children: w.missingKeys.join(", ") })] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1", children: [w.missingKeys.map((k) => (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => onSeedKey(k), children: [_jsx(Plus, {}), _jsx("span", { className: "font-mono", children: k })] }, k))), candidate && (_jsxs(Button, { variant: "outline", size: "xs", onClick: () => onAddProducingStep(candidate.key), children: [_jsx(ArrowDownToLine, {}), " ", L.catalogueAddProducingStep] }))] })] }, w.id));
+                                        }) }))] })] }) })] }) }));
+}
+function CatalogueSectionHeader({ title, count }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-semibold tracking-[0.12em] uppercase", children: title }), _jsx("span", { className: "bg-border h-px flex-1", "aria-hidden": "true" }), _jsx(Badge, { variant: "outline", className: "px-1.5 text-[10px]", children: count })] }));
+}
+//# sourceMappingURL=CatalogueSheet.js.map

package/dist/app/builder/CatalogueSheet.js.map

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

package/dist/app/builder/PipelineStrip.d.ts

@@ -0,0 +1,22 @@
+import type { AvailableStep, KeyCatalogEntry, PipelineStepRef } from "@miragon/mcp-toolkit-core";
+import { type KeyEntry } from "./builder-model.js";
+import type { LayoutBuilderLabels, RefreshStatus } from "./labels.js";
+declare function PipelineStripImpl({ L, keyEntries, stepEntries, keyCatalog, availableSteps, stepsByApp, liveKeys, onAddKey, onUpdateKey, onRemoveKey, onAddStep, onUpdateStep, onRemoveStep, status, }: {
+    L: Required<LayoutBuilderLabels>;
+    keyEntries: KeyEntry[];
+    stepEntries: PipelineStepRef[];
+    keyCatalog: KeyCatalogEntry[];
+    availableSteps: AvailableStep[];
+    stepsByApp: [string, AvailableStep[]][];
+    liveKeys: Record<string, unknown>;
+    onAddKey: (prefilledName?: string) => void;
+    onUpdateKey: (idx: number, patch: Partial<KeyEntry>) => void;
+    onRemoveKey: (idx: number) => void;
+    onAddStep: (stepId?: string) => void;
+    onUpdateStep: (idx: number, patch: Partial<PipelineStepRef>) => void;
+    onRemoveStep: (idx: number) => void;
+    status: RefreshStatus;
+}): import("react").JSX.Element;
+export declare const PipelineStrip: import("react").MemoExoticComponent<typeof PipelineStripImpl>;
+export {};
+//# sourceMappingURL=PipelineStrip.d.ts.map

package/dist/app/builder/PipelineStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineStrip.d.ts","sourceRoot":"","sources":["../../../src/app/builder/PipelineStrip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAWhG,OAAO,EAAsC,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAOrE,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,MAAM,GACP,EAAE;IACD,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAChC,UAAU,EAAE,QAAQ,EAAE,CAAA;IACtB,WAAW,EAAE,eAAe,EAAE,CAAA;IAC9B,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,UAAU,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAA;IACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACjC,QAAQ,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAA;IAC5D,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACpE,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,MAAM,EAAE,aAAa,CAAA;CACtB,+BA8MA;AAED,eAAO,MAAM,aAAa,+DAA0B,CAAA"}

package/dist/app/builder/PipelineStrip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { ArrowDownToLine, ArrowRightToLine, Plus, X } from "lucide-react";
+import { Badge } from "../../primitives/badge.js";
+import { Button } from "../../primitives/button.js";
+import { Input } from "../../primitives/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../primitives/select.js";
+import { formatLiveKeyValue, valueTypeLabel } from "./builder-model.js";
+import { StatusChip } from "./status-chip.js";
+// -------------------------------------------------------------------------- //
+// Pipeline strip — compact horizontal Keys + Steps
+// -------------------------------------------------------------------------- //
+function PipelineStripImpl({ L, keyEntries, stepEntries, keyCatalog, availableSteps, stepsByApp, liveKeys, onAddKey, onUpdateKey, onRemoveKey, onAddStep, onUpdateStep, onRemoveStep, status, }) {
+    const stepLookup = useMemo(() => {
+        const map = new Map();
+        for (const s of availableSteps)
+            map.set(s.id, s);
+        return map;
+    }, [availableSteps]);
+    return (_jsxs("section", { className: "bg-muted/30 -mx-1 rounded-lg border px-3 py-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-semibold tracking-[0.12em] uppercase", children: L.pipelineHeader }), _jsx("span", { className: "text-muted-foreground/60 text-[10px]", children: "\u00B7 auto-applies on edit" }), _jsx("div", { className: "ml-auto text-[11px]", children: _jsx(StatusChip, { status: status, L: L }) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-x-6 gap-y-3 lg:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 text-[11px] font-semibold", children: [_jsx(ArrowRightToLine, { className: "size-3" }), L.keysHeader, _jsx(Badge, { variant: "outline", className: "px-1.5 text-[10px]", children: keyEntries.length })] }), keyEntries.length === 0 ? (_jsx("div", { className: "text-muted-foreground rounded-md border border-dashed px-2 py-1.5 text-xs italic", children: L.emptyKeys })) : (_jsx("ul", { className: "flex flex-col gap-1", children: keyEntries.map((entry, idx) => {
+                                    const livePreview = formatLiveKeyValue(liveKeys[entry.name]);
+                                    const usedNames = new Set(keyEntries.map((e, i) => (i === idx ? "" : e.name)).filter(Boolean));
+                                    const pickable = keyCatalog.filter((c) => c.key === entry.name || !usedNames.has(c.key));
+                                    return (_jsxs("li", { className: "grid grid-cols-2 items-center gap-1", children: [_jsxs(Select, { value: entry.name || undefined, onValueChange: (value) => onUpdateKey(idx, { name: value }), children: [_jsx(SelectTrigger, { className: "h-7 min-w-0 font-mono text-xs", children: _jsx(SelectValue, { placeholder: L.keyName }) }), _jsx(SelectContent, { children: pickable.length === 0 ? (_jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs italic", children: "No more keys available." })) : (pickable.map((c) => (_jsx(SelectItem, { value: c.key, className: "py-1.5", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-mono text-xs", children: c.key }), c.consumedByWidgets.length + c.consumedBySteps.length > 0 && (_jsxs("span", { className: "text-muted-foreground/80 font-mono text-[10px]", children: ["\u2192 ", [...c.consumedByWidgets, ...c.consumedBySteps].join(", ")] }))] }) }, c.key)))) })] }), _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Input, { value: entry.rawValue, onChange: (e) => onUpdateKey(idx, { rawValue: e.target.value }), placeholder: livePreview ?? L.keyValue, className: "h-7 pr-10 font-mono text-xs" }), _jsx("span", { className: "text-muted-foreground/70 pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 font-mono text-[10px] tabular-nums", title: "parsed type", children: valueTypeLabel(entry.rawValue) })] }), _jsx(Button, { variant: "ghost", size: "icon-xs", onClick: () => onRemoveKey(idx), "aria-label": "Remove key", children: _jsx(X, {}) })] })] }, idx));
+                                }) })), _jsxs(Button, { variant: "ghost", size: "xs", onClick: () => onAddKey(), className: "text-muted-foreground hover:text-foreground self-start", children: [_jsx(Plus, {}), " ", L.addKey] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 text-[11px] font-semibold", children: [_jsx(ArrowDownToLine, { className: "size-3" }), L.stepsHeader, _jsx(Badge, { variant: "outline", className: "px-1.5 text-[10px]", children: stepEntries.length })] }), stepEntries.length === 0 ? (_jsx("div", { className: "text-muted-foreground rounded-md border border-dashed px-2 py-1.5 text-xs italic", children: L.emptySteps })) : (_jsx("ul", { className: "flex flex-col gap-1", children: stepEntries.map((step, idx) => {
+                                    const meta = stepLookup.get(step.step);
+                                    return (_jsxs("li", { className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { value: step.id, onChange: (e) => onUpdateStep(idx, { id: e.target.value }), placeholder: L.stepContextId, className: "h-7 w-24 font-mono text-xs" }), _jsxs(Select, { value: step.step || undefined, onValueChange: (value) => onUpdateStep(idx, { step: value }), children: [_jsx(SelectTrigger, { className: "h-7 flex-1 text-xs", children: _jsx(SelectValue, { placeholder: L.stepPickerLabel }) }), _jsx(SelectContent, { children: stepsByApp.map(([app, items]) => (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground px-2 py-1 text-[10px] font-semibold tracking-wide uppercase", children: app }), items.map((s) => (_jsx(SelectItem, { value: s.id, className: "py-2", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-mono text-xs", children: s.id }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap gap-x-2 text-[10px]", children: [_jsxs("span", { className: "font-mono", children: ["\u2190", " ", s.requires.length ? s.requires.join(", ") : "(no inputs)"] }), _jsxs("span", { className: "font-mono", children: ["\u2192 ", s.produces.length ? s.produces.join(", ") : "(none)"] })] })] }) }, s.id)))] }, app))) })] }), _jsx(Button, { variant: "ghost", size: "icon-xs", onClick: () => onRemoveStep(idx), "aria-label": "Remove step", children: _jsx(X, {}) })] }), meta && (_jsxs("div", { className: "text-muted-foreground/80 ml-1 flex flex-wrap gap-x-2 pl-24 text-[10px]", children: [_jsxs("span", { className: "font-mono", children: ["\u2190 ", meta.requires.length ? meta.requires.join(", ") : "(no inputs)"] }), _jsxs("span", { className: "font-mono", children: ["\u2192 ", meta.produces.length ? meta.produces.join(", ") : "(none)"] })] }))] }, idx));
+                                }) })), _jsxs(Button, { variant: "ghost", size: "xs", onClick: () => onAddStep(), disabled: availableSteps.length === 0, className: "text-muted-foreground hover:text-foreground self-start", children: [_jsx(Plus, {}), " ", L.addStep] })] })] })] }));
+}
+export const PipelineStrip = memo(PipelineStripImpl);
+//# sourceMappingURL=PipelineStrip.js.map

package/dist/app/builder/PipelineStrip.js.map

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

package/dist/app/builder/PreviewPane.d.ts

@@ -0,0 +1,13 @@
+import type { WidgetProps } from "@miragon/mcp-toolkit-core";
+import { type WidgetComponent } from "../widget-renderer.js";
+import type { DraftLayout } from "./builder-model.js";
+declare function PreviewPaneImpl({ draft, activeTabIndex, setActiveTabIndex, widgets, widgetProps, }: {
+    draft: DraftLayout;
+    activeTabIndex: number;
+    setActiveTabIndex: (idx: number) => void;
+    widgets: Record<string, WidgetComponent>;
+    widgetProps: WidgetProps;
+}): import("react").JSX.Element;
+export declare const PreviewPane: import("react").MemoExoticComponent<typeof PreviewPaneImpl>;
+export {};
+//# sourceMappingURL=PreviewPane.d.ts.map

package/dist/app/builder/PreviewPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPane.d.ts","sourceRoot":"","sources":["../../../src/app/builder/PreviewPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAU,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAGpE,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAMrD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACxC,WAAW,EAAE,WAAW,CAAA;CACzB,+BA8CA;AAED,eAAO,MAAM,WAAW,6DAAwB,CAAA"}

package/dist/app/builder/PreviewPane.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { GridItem, GridLayout } from "../../components/GridLayout.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../primitives/tabs.js";
+import { RenderedWidget } from "../widget-renderer.js";
+// -------------------------------------------------------------------------- //
+// Preview pane
+// -------------------------------------------------------------------------- //
+function PreviewPaneImpl({ draft, activeTabIndex, setActiveTabIndex, widgets, widgetProps, }) {
+    const renderRows = (rs) => (_jsx("div", { className: "flex flex-col gap-4", children: rs.map((row, rowIdx) => (_jsx(GridLayout, { children: row.row.map((cell, cellIdx) => (_jsx(GridItem, { span: cell.span ?? 12, children: _jsx(RenderedWidget, { widget: widgets[cell.widget], widgetId: cell.widget, props: widgetProps, cellProps: cell.props, showEmptyHint: true }) }, `${cell.widget}-${cellIdx}`))) }, rowIdx))) }));
+    if (draft.kind === "tabs") {
+        return (_jsxs(Tabs, { value: draft.tabs[activeTabIndex]?.label ?? "", onValueChange: (label) => {
+                const idx = draft.tabs.findIndex((t) => t.label === label);
+                if (idx >= 0)
+                    setActiveTabIndex(idx);
+            }, children: [_jsx(TabsList, { children: draft.tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.label, children: tab.label }, tab.label))) }), draft.tabs.map((tab) => (_jsx(TabsContent, { value: tab.label, className: "mt-3", children: renderRows(tab.rows) }, tab.label)))] }));
+    }
+    return renderRows(draft.rows);
+}
+export const PreviewPane = memo(PreviewPaneImpl);
+//# sourceMappingURL=PreviewPane.js.map

package/dist/app/builder/PreviewPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPane.js","sourceRoot":"","sources":["../../../src/app/builder/PreviewPane.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE5B,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnF,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAA;AAG5E,gFAAgF;AAChF,eAAe;AACf,gFAAgF;AAEhF,SAAS,eAAe,CAAC,EACvB,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,WAAW,GAOZ;IACC,MAAM,UAAU,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACnC,cAAK,SAAS,EAAC,qBAAqB,YACjC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,UAAU,cACR,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAC9B,KAAC,QAAQ,IAAmC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,YAC/D,KAAC,cAAc,IACb,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAC5B,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,aAAa,SACb,IAPW,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,EAAE,CAQ/B,CACZ,CAAC,IAXa,MAAM,CAYV,CACd,CAAC,GACE,CACP,CAAA;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC1B,OAAO,CACL,MAAC,IAAI,IACH,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,EAAE,EAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;gBAC1D,IAAI,GAAG,IAAI,CAAC;oBAAE,iBAAiB,CAAC,GAAG,CAAC,CAAA;YACtC,CAAC,aAED,KAAC,QAAQ,cACN,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACvB,KAAC,WAAW,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,YAC1C,GAAG,CAAC,KAAK,IADM,GAAG,CAAC,KAAK,CAEb,CACf,CAAC,GACO,EACV,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACvB,KAAC,WAAW,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAC,MAAM,YAC5D,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IADL,GAAG,CAAC,KAAK,CAEb,CACf,CAAC,IACG,CACR,CAAA;IACH,CAAC;IACD,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,CAAA"}

package/dist/app/builder/SaveDialog.d.ts

@@ -0,0 +1,14 @@
+import type { LayoutBuilderLabels } from "./labels.js";
+export declare function SaveDialog({ L, open, onOpenChange, name, setName, description, setDescription, onSubmit, busy, error, }: {
+    L: Required<LayoutBuilderLabels>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    name: string;
+    setName: (v: string) => void;
+    description: string;
+    setDescription: (v: string) => void;
+    onSubmit: () => Promise<void>;
+    busy: boolean;
+    error: string | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SaveDialog.d.ts.map

package/dist/app/builder/SaveDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveDialog.d.ts","sourceRoot":"","sources":["../../../src/app/builder/SaveDialog.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAMtD,wBAAgB,UAAU,CAAC,EACzB,CAAC,EACD,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,KAAK,GACN,EAAE;IACD,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,+BAsDA"}

package/dist/app/builder/SaveDialog.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../primitives/dialog.js";
+import { Input } from "../../primitives/input.js";
+// -------------------------------------------------------------------------- //
+// Save dialog
+// -------------------------------------------------------------------------- //
+export function SaveDialog({ L, open, onOpenChange, name, setName, description, setDescription, onSubmit, busy, error, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: L.saveDialogTitle }), _jsx(DialogDescription, { children: L.saveDialogDescription })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [_jsx("span", { className: "font-medium", children: L.saveNameLabel }), _jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: "Invoice overview", autoFocus: true })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [_jsx("span", { className: "font-medium", children: L.saveDescriptionLabel }), _jsx(Input, { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional" })] }), error && (_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", role: "alert", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }), _jsxs("span", { className: "min-w-0 break-words", children: [_jsxs("span", { className: "font-medium", children: [L.saveError, ":"] }), " ", error] })] }))] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: L.cancel }) }), _jsx(Button, { disabled: !name.trim() || busy, onClick: () => {
+                                void onSubmit();
+                            }, children: L.saveConfirm })] })] }) }));
+}
+//# sourceMappingURL=SaveDialog.js.map

package/dist/app/builder/SaveDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveDialog.js","sourceRoot":"","sources":["../../../src/app/builder/SaveDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAGjD,gFAAgF;AAChF,cAAc;AACd,gFAAgF;AAEhF,MAAM,UAAU,UAAU,CAAC,EACzB,CAAC,EACD,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,KAAK,GAYN;IACC,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,YAC5C,MAAC,aAAa,eACZ,MAAC,YAAY,eACX,KAAC,WAAW,cAAE,CAAC,CAAC,eAAe,GAAe,EAC9C,KAAC,iBAAiB,cAAE,CAAC,CAAC,qBAAqB,GAAqB,IACnD,EACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,iBAAO,SAAS,EAAC,6BAA6B,aAC5C,eAAM,SAAS,EAAC,aAAa,YAAE,CAAC,CAAC,aAAa,GAAQ,EACtD,KAAC,KAAK,IACJ,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,WAAW,EAAC,kBAAkB,EAC9B,SAAS,SACT,IACI,EACR,iBAAO,SAAS,EAAC,6BAA6B,aAC5C,eAAM,SAAS,EAAC,aAAa,YAAE,CAAC,CAAC,oBAAoB,GAAQ,EAC7D,KAAC,KAAK,IACJ,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,WAAW,EAAC,UAAU,GACtB,IACI,EACP,KAAK,IAAI,CACR,eACE,SAAS,EAAC,qHAAqH,EAC/H,IAAI,EAAC,OAAO,aAEZ,KAAC,aAAa,IAAC,SAAS,EAAC,0BAA0B,iBAAa,MAAM,GAAG,EACzE,gBAAM,SAAS,EAAC,qBAAqB,aACnC,gBAAM,SAAS,EAAC,aAAa,aAAE,CAAC,CAAC,SAAS,SAAS,OAAE,KAAK,IACrD,IACH,CACP,IACG,EACN,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,OAAO,kBAClB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,YAAE,CAAC,CAAC,MAAM,GAAU,GACjC,EACd,KAAC,MAAM,IACL,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,EAC9B,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,QAAQ,EAAE,CAAA;4BACjB,CAAC,YAEA,CAAC,CAAC,WAAW,GACP,IACI,IACD,GACT,CACV,CAAA;AACH,CAAC"}

package/dist/app/builder/Toolbar.d.ts

@@ -0,0 +1,17 @@
+import type { LayoutBuilderLabels, RefreshStatus } from "./labels.js";
+declare function ToolbarImpl({ L, previewMode, isBusy, status, liveKeys, reachableCount, unreachableCount, onOpenCatalogue, onOpenSave, onDone, hasAnyCell, }: {
+    L: Required<LayoutBuilderLabels>;
+    previewMode: boolean;
+    isBusy: boolean;
+    status: RefreshStatus;
+    liveKeys: number;
+    reachableCount: number;
+    unreachableCount: number;
+    onOpenCatalogue: () => void;
+    onOpenSave: () => void;
+    onDone?: () => void;
+    hasAnyCell: boolean;
+}): import("react").JSX.Element;
+export declare const Toolbar: import("react").MemoExoticComponent<typeof ToolbarImpl>;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/app/builder/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/app/builder/Toolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAOrE,iBAAS,WAAW,CAAC,EACnB,CAAC,EACD,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,MAAM,EACN,UAAU,GACX,EAAE;IACD,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;CACpB,+BAwDA;AAED,eAAO,MAAM,OAAO,yDAAoB,CAAA"}

package/dist/app/builder/Toolbar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from "react";
+import { Check, Eye, Layers, Library, Save } from "lucide-react";
+import { Badge } from "../../primitives/badge.js";
+import { Button } from "../../primitives/button.js";
+import { cn } from "../../lib/utils.js";
+import { StatusChip } from "./status-chip.js";
+// -------------------------------------------------------------------------- //
+// Toolbar — sticky top, dense status row + actions
+// -------------------------------------------------------------------------- //
+function ToolbarImpl({ L, previewMode, isBusy, status, liveKeys, reachableCount, unreachableCount, onOpenCatalogue, onOpenSave, onDone, hasAnyCell, }) {
+    return (_jsxs("header", { className: "bg-background/80 sticky top-0 z-10 -mx-1 flex flex-wrap items-center gap-3 border-b px-1 py-2 backdrop-blur", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn("inline-flex size-6 items-center justify-center rounded-md", previewMode ? "bg-emerald-500/10 text-emerald-500" : "bg-primary/10 text-primary"), "aria-hidden": "true", children: previewMode ? _jsx(Eye, { className: "size-3.5" }) : _jsx(Layers, { className: "size-3.5" }) }), _jsx("h2", { className: "text-sm font-semibold tracking-tight", children: L.title }), _jsx(Badge, { variant: previewMode ? "outline" : "secondary", className: "font-normal", children: previewMode ? L.previewBadge : L.builderBadge })] }), _jsxs("div", { className: "text-muted-foreground hidden items-center gap-3 text-[11px] sm:flex", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "size-1.5 rounded-full bg-emerald-500" }), _jsxs("span", { children: [_jsx("span", { className: "text-foreground font-medium", children: liveKeys }), " live"] })] }), _jsx("span", { className: "bg-border h-3 w-px", "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("span", { className: "text-foreground font-medium", children: reachableCount }), " reachable"] }), unreachableCount > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border h-3 w-px", "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("span", { className: "text-foreground font-medium", children: unreachableCount }), " unreachable"] })] })), _jsx(StatusChip, { status: status, L: L })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: onOpenCatalogue, children: [_jsx(Library, {}), " ", L.catalogue] }), _jsxs(Button, { size: "sm", onClick: onOpenSave, disabled: isBusy || !hasAnyCell, children: [_jsx(Save, {}), " ", L.save] }), onDone && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onDone, children: [_jsx(Check, {}), " ", L.done] }))] })] }));
+}
+export const Toolbar = memo(ToolbarImpl);
+//# sourceMappingURL=Toolbar.js.map

package/dist/app/builder/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/app/builder/Toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,gFAAgF;AAChF,mDAAmD;AACnD,gFAAgF;AAEhF,SAAS,WAAW,CAAC,EACnB,CAAC,EACD,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,MAAM,EACN,UAAU,GAaX;IACC,OAAO,CACL,kBAAQ,SAAS,EAAC,6GAA6G,aAC7H,eAAK,SAAS,EAAC,yBAAyB,aACtC,eACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,WAAW,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,4BAA4B,CAClF,iBACW,MAAM,YAEjB,WAAW,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,SAAS,EAAC,UAAU,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,GACxE,EACP,aAAI,SAAS,EAAC,sCAAsC,YAAE,CAAC,CAAC,KAAK,GAAM,EACnE,KAAC,KAAK,IAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,EAAC,aAAa,YAC3E,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GACxC,IACJ,EAEN,eAAK,SAAS,EAAC,qEAAqE,aAClF,gBAAM,SAAS,EAAC,kCAAkC,aAChD,eAAM,SAAS,EAAC,sCAAsC,GAAG,EACzD,2BACE,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,aAC1D,IACF,EACP,eAAM,SAAS,EAAC,oBAAoB,iBAAa,MAAM,GAAG,EAC1D,2BACE,eAAM,SAAS,EAAC,6BAA6B,YAAE,cAAc,GAAQ,kBAChE,EACN,gBAAgB,GAAG,CAAC,IAAI,CACvB,8BACE,eAAM,SAAS,EAAC,oBAAoB,iBAAa,MAAM,GAAG,EAC1D,2BACE,eAAM,SAAS,EAAC,6BAA6B,YAAE,gBAAgB,GAAQ,oBAClE,IACN,CACJ,EACD,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,GAAI,IAChC,EAEN,eAAK,SAAS,EAAC,iCAAiC,aAC9C,MAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,eAAe,aACxD,KAAC,OAAO,KAAG,OAAE,CAAC,CAAC,SAAS,IACjB,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,aACpE,KAAC,IAAI,KAAG,OAAE,CAAC,CAAC,IAAI,IACT,EACR,MAAM,IAAI,CACT,MAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,aACjD,KAAC,KAAK,KAAG,OAAE,CAAC,CAAC,IAAI,IACV,CACV,IACG,IACC,CACV,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,CAAA"}

package/dist/app/builder/Workspace.d.ts

@@ -0,0 +1,28 @@
+import type { ReachableWidget, RowDef, WidgetProps } from "@miragon/mcp-toolkit-core";
+import { type WidgetComponent } from "../widget-renderer.js";
+import type { LayoutBuilderLabels } from "./labels.js";
+declare function WorkspaceImpl({ L, paletteByApp, paletteCount, activeRows, focusedRowIndex, setFocusedRowIndex, dragOverRow, setDragOverRow, onAddRow, onRemoveRow, onMoveRow, onSetCellSpan, onRemoveCell, onAddWidget, onConfigureCell, propsSchemaByWidgetId, widgets, widgetProps, showAddTabButton, onAddTab, }: {
+    L: Required<LayoutBuilderLabels>;
+    paletteByApp: [string, ReachableWidget[]][];
+    paletteCount: number;
+    activeRows: RowDef[];
+    focusedRowIndex: number;
+    setFocusedRowIndex: (idx: number) => void;
+    dragOverRow: number | null;
+    setDragOverRow: (idx: number | null) => void;
+    onAddRow: () => void;
+    onRemoveRow: (rowIdx: number) => void;
+    onMoveRow: (rowIdx: number, direction: -1 | 1) => void;
+    onSetCellSpan: (rowIdx: number, cellIdx: number, span: number) => void;
+    onRemoveCell: (rowIdx: number, cellIdx: number) => void;
+    onAddWidget: (widgetId: string, targetRowIdx?: number) => void;
+    onConfigureCell: (rowIdx: number, cellIdx: number) => void;
+    propsSchemaByWidgetId: Map<string, Record<string, unknown>>;
+    widgets: Record<string, WidgetComponent>;
+    widgetProps: WidgetProps;
+    showAddTabButton?: boolean;
+    onAddTab?: () => void;
+}): import("react").JSX.Element;
+export declare const Workspace: import("react").MemoExoticComponent<typeof WorkspaceImpl>;
+export {};
+//# sourceMappingURL=Workspace.d.ts.map

package/dist/app/builder/Workspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.d.ts","sourceRoot":"","sources":["../../../src/app/builder/Workspace.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAarF,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC5E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAOtD,iBAAS,aAAa,CAAC,EACrB,CAAC,EACD,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,WAAW,EACX,eAAe,EACf,qBAAqB,EACrB,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAChC,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,EAAE,CAAA;IAC3C,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1D,qBAAqB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAC3D,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACxC,WAAW,EAAE,WAAW,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,+BA4EA;AAED,eAAO,MAAM,SAAS,2DAAsB,CAAA"}

package/dist/app/builder/Workspace.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from "react";
+import { ChevronDown, ChevronUp, GripVertical, Plus, SlidersHorizontal, Trash2, X, } from "lucide-react";
+import { GridItem, GridLayout } from "../../components/GridLayout.js";
+import { Badge } from "../../primitives/badge.js";
+import { Button } from "../../primitives/button.js";
+import { ScrollArea } from "../../primitives/scroll-area.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../primitives/select.js";
+import { cn } from "../../lib/utils.js";
+import { RenderedWidget } from "../widget-renderer.js";
+import { WIDGET_DRAG_MIME } from "./labels.js";
+// -------------------------------------------------------------------------- //
+// Workspace — palette + canvas (palette sticky on lg+)
+// -------------------------------------------------------------------------- //
+function WorkspaceImpl({ L, paletteByApp, paletteCount, activeRows, focusedRowIndex, setFocusedRowIndex, dragOverRow, setDragOverRow, onAddRow, onRemoveRow, onMoveRow, onSetCellSpan, onRemoveCell, onAddWidget, onConfigureCell, propsSchemaByWidgetId, widgets, widgetProps, showAddTabButton, onAddTab, }) {
+    return (_jsxs("div", { className: "grid grid-cols-12 gap-4", children: [_jsx("aside", { className: "col-span-12 lg:col-span-3 xl:col-span-2", children: _jsxs("div", { className: "lg:sticky lg:top-16", children: [_jsxs("div", { className: "text-muted-foreground mb-2 flex items-center gap-2 text-[10px] font-semibold tracking-[0.12em] uppercase", children: [L.paletteHeader, _jsx(Badge, { variant: "outline", className: "px-1.5 text-[10px]", children: paletteCount })] }), paletteCount === 0 ? (_jsx("div", { className: "text-muted-foreground rounded-md border border-dashed p-3 text-xs", children: L.paletteEmpty })) : (_jsx(ScrollArea, { className: "lg:max-h-[70vh]", children: _jsx("div", { className: "flex flex-col gap-3 pr-1", children: paletteByApp.map(([app, ws]) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-muted-foreground/80 text-[10px] font-semibold tracking-wide uppercase", children: app }), ws.map((w) => (_jsx(PaletteItem, { w: w, onClick: () => onAddWidget(w.id) }, w.id)))] }, app))) }) })), showAddTabButton && onAddTab && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: onAddTab, className: "text-muted-foreground hover:text-foreground mt-3", children: [_jsx(Plus, {}), " ", L.addTab] }))] }) }), _jsx("section", { className: "col-span-12 lg:col-span-9 xl:col-span-10", children: _jsxs("div", { className: "flex flex-col gap-3", children: [activeRows.map((row, rowIdx) => (_jsx(CanvasRow, { L: L, row: row, rowIdx: rowIdx, focused: rowIdx === focusedRowIndex, isFirst: rowIdx === 0, isLast: rowIdx === activeRows.length - 1, dragOver: dragOverRow === rowIdx, setDragOverRow: setDragOverRow, setFocusedRowIndex: setFocusedRowIndex, onRemoveRow: onRemoveRow, onMoveRow: onMoveRow, onSetCellSpan: onSetCellSpan, onRemoveCell: onRemoveCell, onAddWidget: onAddWidget, onConfigureCell: onConfigureCell, propsSchemaByWidgetId: propsSchemaByWidgetId, widgets: widgets, widgetProps: widgetProps }, rowIdx))), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddRow, className: "self-start text-xs", children: [_jsx(Plus, {}), " ", L.addRow] })] }) })] }));
+}
+export const Workspace = memo(WorkspaceImpl);
+// -------------------------------------------------------------------------- //
+// Palette item
+// -------------------------------------------------------------------------- //
+function PaletteItemImpl({ w, onClick }) {
+    return (_jsxs("button", { type: "button", draggable: true, onDragStart: (e) => {
+            e.dataTransfer.setData(WIDGET_DRAG_MIME, w.id);
+            e.dataTransfer.effectAllowed = "copy";
+        }, onClick: onClick, className: "hover:bg-accent hover:text-accent-foreground group bg-background/50 flex cursor-grab flex-col items-start gap-0.5 rounded-md border px-2 py-1.5 text-left text-xs transition-colors active:cursor-grabbing", children: [_jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-mono", children: w.id }), _jsx(GripVertical, { className: "text-muted-foreground/40 group-hover:text-muted-foreground size-3" })] }), w.requires.length > 0 && (_jsxs("span", { className: "text-muted-foreground/80 truncate font-mono text-[10px]", children: ["\u2190 ", w.requires.join(", ")] }))] }));
+}
+const PaletteItem = memo(PaletteItemImpl);
+// -------------------------------------------------------------------------- //
+// Canvas row — drop target + per-cell controls + resize handle
+// -------------------------------------------------------------------------- //
+function CanvasRowImpl({ L, row, rowIdx, focused, isFirst, isLast, dragOver, setDragOverRow, setFocusedRowIndex, onRemoveRow, onMoveRow, onSetCellSpan, onRemoveCell, onAddWidget, onConfigureCell, propsSchemaByWidgetId, widgets, widgetProps, }) {
+    const gridRef = useRef(null);
+    return (_jsxs("div", { onClick: () => setFocusedRowIndex(rowIdx), onDragOver: (e) => {
+            if (!e.dataTransfer.types.includes(WIDGET_DRAG_MIME))
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setDragOverRow(rowIdx);
+        }, onDragLeave: (e) => {
+            if (e.currentTarget.contains(e.relatedTarget))
+                return;
+            setDragOverRow(null);
+        }, onDrop: (e) => {
+            const id = e.dataTransfer.getData(WIDGET_DRAG_MIME);
+            setDragOverRow(null);
+            if (id) {
+                e.preventDefault();
+                onAddWidget(id, rowIdx);
+            }
+        }, className: cn("group relative rounded-lg border-l-2 px-3 py-2 transition-colors", focused
+            ? "border-l-primary bg-card"
+            : "bg-background hover:bg-card/60 border-l-transparent", dragOver && "bg-primary/5 border-l-primary"), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-[11px]", children: [_jsxs("span", { className: "font-mono", children: ["row ", rowIdx + 1] }), _jsxs("span", { className: "bg-muted/60 rounded px-1 py-0.5 text-[10px]", children: [row.row.length, " ", row.row.length === 1 ? "widget" : "widgets"] })] }), _jsxs("div", { className: "opacity-0 transition-opacity group-hover:opacity-100", children: [_jsx(Button, { variant: "ghost", size: "icon-xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onMoveRow(rowIdx, -1);
+                                }, disabled: isFirst, "aria-label": "Move row up", children: _jsx(ChevronUp, {}) }), _jsx(Button, { variant: "ghost", size: "icon-xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onMoveRow(rowIdx, 1);
+                                }, disabled: isLast, "aria-label": "Move row down", children: _jsx(ChevronDown, {}) }), _jsx(Button, { variant: "ghost", size: "icon-xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onRemoveRow(rowIdx);
+                                }, "aria-label": L.removeRow, children: _jsx(Trash2, {}) })] })] }), row.row.length === 0 ? (_jsx("div", { className: cn("rounded-md border border-dashed py-6 text-center text-[11px] transition-colors", dragOver
+                    ? "border-primary bg-primary/5 text-primary"
+                    : "border-muted-foreground/30 text-muted-foreground"), children: dragOver ? L.canvasDropHint : L.canvasEmpty })) : (_jsx("div", { ref: gridRef, "data-row-grid": true, children: _jsx(GridLayout, { children: row.row.map((cell, cellIdx) => {
+                        const span = cell.span ?? 12;
+                        const Widget = widgets[cell.widget];
+                        const hasPropsSchema = propsSchemaByWidgetId.has(cell.widget);
+                        const propCount = cell.props ? Object.keys(cell.props).length : 0;
+                        return (_jsx(GridItem, { span: span, children: _jsxs("div", { className: "border-border bg-card relative overflow-hidden rounded-md border shadow-sm", children: [_jsxs("div", { className: "text-muted-foreground bg-muted/30 flex items-center justify-between gap-2 border-b px-2 py-1 text-[10px]", children: [_jsx("span", { className: "truncate font-mono", children: cell.widget }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs("label", { className: "text-muted-foreground/80 inline-flex items-center gap-0.5 font-mono", children: [_jsx("span", { className: "sr-only", children: "Column span" }), _jsxs(Select, { value: String(span), onValueChange: (v) => onSetCellSpan(rowIdx, cellIdx, Number(v)), children: [_jsx(SelectTrigger, { size: "sm", className: "h-5 gap-0.5 border-none bg-transparent px-1 py-0 font-mono text-[10px] shadow-none focus:ring-0", "aria-label": "Column span", onClick: (e) => e.stopPropagation(), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (_jsx(SelectItem, { value: String(n), className: "font-mono text-xs", children: n }, n))) })] }), _jsx("span", { "aria-hidden": "true", children: "/12" })] }), hasPropsSchema && (_jsx(Button, { variant: "ghost", size: "icon-xs", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            onConfigureCell(rowIdx, cellIdx);
+                                                        }, "aria-label": "Configure widget props", title: propCount > 0
+                                                            ? `Configure widget props (${propCount} set)`
+                                                            : "Configure widget props", className: cn(propCount > 0 && "text-primary"), children: _jsx(SlidersHorizontal, {}) })), _jsx(Button, { variant: "ghost", size: "icon-xs", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            onRemoveCell(rowIdx, cellIdx);
+                                                        }, "aria-label": "Remove widget", children: _jsx(X, {}) })] })] }), _jsx("div", { className: "p-2", children: _jsx(RenderedWidget, { widget: Widget, widgetId: cell.widget, props: widgetProps, cellProps: cell.props, showEmptyHint: true, notBundledClassName: "text-muted-foreground rounded border border-dashed p-3 text-center text-[11px]" }) }), _jsx(ResizeHandle, { rowIdx: rowIdx, cellIdx: cellIdx, span: span, getGridEl: () => gridRef.current, onSetCellSpan: onSetCellSpan })] }) }, `${cell.widget}-${cellIdx}`));
+                    }) }) }))] }));
+}
+const CanvasRow = memo(CanvasRowImpl);
+// -------------------------------------------------------------------------- //
+// Resize handle
+// -------------------------------------------------------------------------- //
+function ResizeHandle({ rowIdx, cellIdx, span, getGridEl, onSetCellSpan, }) {
+    const onPointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const grid = getGridEl();
+        if (!grid)
+            return;
+        const rect = grid.getBoundingClientRect();
+        const colWidth = rect.width / 12;
+        const startX = e.clientX;
+        const startSpan = span;
+        const onMove = (ev) => {
+            const delta = ev.clientX - startX;
+            const next = Math.round(startSpan + delta / colWidth);
+            onSetCellSpan(rowIdx, cellIdx, Math.max(1, Math.min(12, next)));
+        };
+        const onUp = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    }, [cellIdx, getGridEl, onSetCellSpan, rowIdx, span]);
+    const onKeyDown = useCallback((e) => {
+        const dir = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+        if (dir === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        onSetCellSpan(rowIdx, cellIdx, Math.max(1, Math.min(12, span + dir)));
+    }, [cellIdx, onSetCellSpan, rowIdx, span]);
+    return (_jsx("div", { onPointerDown: onPointerDown, onClick: (e) => e.stopPropagation(), onKeyDown: onKeyDown, tabIndex: 0, className: "hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:ring-primary/60 absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none focus-visible:ring-1 focus-visible:outline-none", "aria-label": "Resize widget", role: "separator", "aria-orientation": "vertical", "aria-valuenow": span, "aria-valuemin": 1, "aria-valuemax": 12 }));
+}
+//# sourceMappingURL=Workspace.js.map