@miragon/mcp-toolkit-ui 1.1.0 → 1.2.0

package/src/app/builder/LayoutSurface.tsx

@@ -0,0 +1,140 @@
+import { Plus, X } from "lucide-react"
+import { Button } from "../../primitives/button.js"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../primitives/tabs.js"
+import { cn } from "../../lib/utils.js"
+import type { DraftLayout } from "./builder-model.js"
+import type { LayoutBuilderLabels } from "./labels.js"
+import { Workspace, type WorkspaceProps } from "./Workspace.js"
+
+// -------------------------------------------------------------------------- //
+// Layout surface — single workspace, or the tab strip (with inline rename)
+// wrapping one workspace per tab
+// -------------------------------------------------------------------------- //
+
+/**
+ * The "Layout" view's canvas surface, extracted from `layout-builder.tsx`.
+ *
+ * Renders either a single `Workspace` (rows draft) or the tab strip with
+ * the inline-rename editor plus one `Workspace` per tab (tabs draft). All
+ * state stays in the LayoutBuilder container — rename feedback included —
+ * so unmounting this surface (e.g. switching to the Pipeline view) loses
+ * nothing. Props in, callbacks out; the shared `workspace` bag is spread
+ * into `<Workspace>` untouched so its memo semantics are unchanged.
+ */
+export function LayoutSurface({
+  L,
+  draft,
+  activeTabIndex,
+  setActiveTabIndex,
+  editingTabIdx,
+  setEditingTabIdx,
+  renameRejected,
+  commitRename,
+  onAddTab,
+  onRemoveTab,
+  workspace,
+}: {
+  L: Required<LayoutBuilderLabels>
+  draft: DraftLayout
+  activeTabIndex: number
+  setActiveTabIndex: (idx: number) => void
+  editingTabIdx: number | null
+  setEditingTabIdx: (idx: number | null) => void
+  renameRejected: boolean
+  commitRename: (tabIdx: number, label: string) => void
+  onAddTab: () => void
+  onRemoveTab: (tabIdx: number) => void
+  workspace: Omit<WorkspaceProps, "showAddTabButton" | "onAddTab">
+}) {
+  if (draft.kind !== "tabs") {
+    return <Workspace {...workspace} showAddTabButton onAddTab={onAddTab} />
+  }
+  return (
+    <Tabs
+      value={draft.tabs[activeTabIndex]?.label ?? ""}
+      onValueChange={(label) => {
+        const idx = draft.tabs.findIndex((t) => t.label === label)
+        if (idx >= 0) setActiveTabIndex(idx)
+      }}
+    >
+      <div className="mb-3 flex items-center gap-1">
+        <TabsList>
+          {draft.tabs.map((tab, idx) => (
+            <div key={tab.label} className="group relative inline-flex">
+              <TabsTrigger
+                value={tab.label}
+                className="pr-7"
+                onDoubleClick={() => setEditingTabIdx(idx)}
+                title="Double-click to rename"
+              >
+                {editingTabIdx === idx ? (
+                  <input
+                    autoFocus
+                    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)}
+                  />
+                ) : (
+                  <span>{tab.label}</span>
+                )}
+              </TabsTrigger>
+              <button
+                type="button"
+                aria-label={L.removeTab}
+                title={L.removeTab}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onRemoveTab(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"
+              >
+                <X className="size-3" />
+              </button>
+            </div>
+          ))}
+        </TabsList>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onAddTab}
+          aria-label={L.addTab}
+          title={L.addTab}
+        >
+          <Plus />
+        </Button>
+        <span className="text-muted-foreground/70 ml-2 hidden text-[10px] sm:inline">
+          double-click a tab to rename
+        </span>
+      </div>
+      {renameRejected && editingTabIdx !== null && (
+        <p className="text-destructive -mt-1 mb-2 text-[11px]" role="alert">
+          {L.renameDuplicate}
+        </p>
+      )}
+      {draft.tabs.map((tab, idx) => (
+        <TabsContent key={tab.label} value={tab.label} className="mt-0">
+          {idx === activeTabIndex ? <Workspace {...workspace} /> : null}
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}

package/src/app/builder/Workspace.tsx

@@ -1,34 +1,46 @@
-import { memo, useCallback, useRef } from "react"
-import {
-  ChevronDown,
-  ChevronUp,
-  GripVertical,
-  Plus,
-  SlidersHorizontal,
-  Trash2,
-  X,
-} from "lucide-react"
+import { memo } from "react"
+import { GripVertical, Plus } from "lucide-react"
 import type { ReachableWidget, RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
-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, type WidgetComponent } from "../widget-renderer.js"
+import type { WidgetComponent } from "../widget-renderer.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 import { WIDGET_DRAG_MIME } from "./labels.js"
+import { CanvasRow } from "./CanvasRow.js"
 
 // -------------------------------------------------------------------------- //
 // Workspace — palette + canvas (palette sticky on lg+)
 // -------------------------------------------------------------------------- //
 
+/**
+ * Props for the workspace surface. Exported so the LayoutSurface container
+ * can pass the shared prop bag through to `<Workspace {...workspace} />`
+ * without re-declaring the contract.
+ */
+export interface WorkspaceProps {
+  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
+}
+
 function WorkspaceImpl({
   L,
   paletteByApp,
@@ -50,28 +62,7 @@ function WorkspaceImpl({
   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
-}) {
+}: WorkspaceProps) {
   return (
     <div className="grid grid-cols-12 gap-4">
       <aside className="col-span-12 lg:col-span-3 xl:col-span-2">
@@ -181,303 +172,3 @@ function PaletteItemImpl({ w, onClick }: { w: ReachableWidget; onClick: () => vo
 }
 
 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,
-}: {
-  L: Required<LayoutBuilderLabels>
-  row: RowDef
-  rowIdx: number
-  focused: boolean
-  isFirst: boolean
-  isLast: boolean
-  dragOver: boolean
-  setDragOverRow: (idx: number | null) => void
-  setFocusedRowIndex: (idx: number) => 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
-}) {
-  const gridRef = useRef<HTMLDivElement | null>(null)
-
-  return (
-    <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 as Node)) 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",
-      )}
-    >
-      <div className="mb-2 flex items-center justify-between">
-        <div className="text-muted-foreground flex items-center gap-2 text-[11px]">
-          <span className="font-mono">row {rowIdx + 1}</span>
-          <span className="bg-muted/60 rounded px-1 py-0.5 text-[10px]">
-            {row.row.length} {row.row.length === 1 ? "widget" : "widgets"}
-          </span>
-        </div>
-        <div className="opacity-0 transition-opacity group-hover:opacity-100">
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            onClick={(e) => {
-              e.stopPropagation()
-              onMoveRow(rowIdx, -1)
-            }}
-            disabled={isFirst}
-            aria-label="Move row up"
-          >
-            <ChevronUp />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            onClick={(e) => {
-              e.stopPropagation()
-              onMoveRow(rowIdx, 1)
-            }}
-            disabled={isLast}
-            aria-label="Move row down"
-          >
-            <ChevronDown />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            onClick={(e) => {
-              e.stopPropagation()
-              onRemoveRow(rowIdx)
-            }}
-            aria-label={L.removeRow}
-          >
-            <Trash2 />
-          </Button>
-        </div>
-      </div>
-      {row.row.length === 0 ? (
-        <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",
-          )}
-        >
-          {dragOver ? L.canvasDropHint : L.canvasEmpty}
-        </div>
-      ) : (
-        <div ref={gridRef} data-row-grid>
-          <GridLayout>
-            {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 (
-                <GridItem key={`${cell.widget}-${cellIdx}`} span={span}>
-                  <div className="border-border bg-card relative overflow-hidden rounded-md border shadow-sm">
-                    <div className="text-muted-foreground bg-muted/30 flex items-center justify-between gap-2 border-b px-2 py-1 text-[10px]">
-                      <span className="truncate font-mono">{cell.widget}</span>
-                      <div className="flex shrink-0 items-center gap-2">
-                        <label className="text-muted-foreground/80 inline-flex items-center gap-0.5 font-mono">
-                          <span className="sr-only">Column span</span>
-                          <Select
-                            value={String(span)}
-                            onValueChange={(v) => onSetCellSpan(rowIdx, cellIdx, Number(v))}
-                          >
-                            <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()}
-                            >
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
-                                <SelectItem key={n} value={String(n)} className="font-mono text-xs">
-                                  {n}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                          <span aria-hidden="true">/12</span>
-                        </label>
-                        {hasPropsSchema && (
-                          <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")}
-                          >
-                            <SlidersHorizontal />
-                          </Button>
-                        )}
-                        <Button
-                          variant="ghost"
-                          size="icon-xs"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            onRemoveCell(rowIdx, cellIdx)
-                          }}
-                          aria-label="Remove widget"
-                        >
-                          <X />
-                        </Button>
-                      </div>
-                    </div>
-                    <div className="p-2">
-                      <RenderedWidget
-                        widget={Widget}
-                        widgetId={cell.widget}
-                        props={widgetProps}
-                        cellProps={cell.props}
-                        showEmptyHint
-                        notBundledClassName="text-muted-foreground rounded border border-dashed p-3 text-center text-[11px]"
-                      />
-                    </div>
-                    <ResizeHandle
-                      rowIdx={rowIdx}
-                      cellIdx={cellIdx}
-                      span={span}
-                      getGridEl={() => gridRef.current}
-                      onSetCellSpan={onSetCellSpan}
-                    />
-                  </div>
-                </GridItem>
-              )
-            })}
-          </GridLayout>
-        </div>
-      )}
-    </div>
-  )
-}
-
-const CanvasRow = memo(CanvasRowImpl)
-
-// -------------------------------------------------------------------------- //
-// Resize handle
-// -------------------------------------------------------------------------- //
-
-function ResizeHandle({
-  rowIdx,
-  cellIdx,
-  span,
-  getGridEl,
-  onSetCellSpan,
-}: {
-  rowIdx: number
-  cellIdx: number
-  span: number
-  getGridEl: () => HTMLElement | null
-  onSetCellSpan: (rowIdx: number, cellIdx: number, span: number) => void
-}) {
-  const onPointerDown = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>) => {
-      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: PointerEvent) => {
-        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: React.KeyboardEvent<HTMLDivElement>) => {
-      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 (
-    <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}
-    />
-  )
-}