@miragon/mcp-toolkit-ui 2.7.0 → 2.8.1

package/src/app/builder/BuilderBanners.tsx

@@ -51,7 +51,7 @@ export function BuilderBanners({
         <div
           role="status"
           aria-live="polite"
-          className="border-warning bg-warning-soft text-foreground flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
+          className="border-warning bg-warning-soft text-foreground text-small flex items-start gap-2 rounded-md border px-3 py-2"
         >
           <AlertTriangle
             className={`mt-0.5 size-3.5 shrink-0 ${TONE_ICON.warning}`}

package/src/app/builder/CanvasRow.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useRef } from "react"
 import { ChevronDown, ChevronUp, SlidersHorizontal, Trash2, X } from "lucide-react"
-import type { RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
+import type { DisplayText, RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
 import { GridItem, GridLayout } from "../../components/GridLayout.js"
 import { Button } from "../../primitives/button.js"
 import {
@@ -10,10 +10,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../primitives/select.js"
+import { FOCUS_RING, FOCUS_RING_INSET } from "../../lib/focus-ring.js"
 import { cn } from "../../lib/utils.js"
 import { RenderedWidget, type WidgetComponent } from "../widget-renderer.js"
+import { displayLabel } from "./builder-model.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 import { WIDGET_DRAG_MIME } from "./labels.js"
+import { REVEAL_ON_INTENT } from "./reveal.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Canvas row — drop target + per-cell controls + resize handle
@@ -36,6 +40,8 @@ function CanvasRowImpl({
   onAddWidget,
   onConfigureCell,
   propsSchemaByWidgetId,
+  displayByWidgetId,
+  advanced,
   widgets,
   widgetProps,
 }: {
@@ -55,14 +61,25 @@ function CanvasRowImpl({
   onAddWidget: (widgetId: string, targetRowIdx?: number) => void
   onConfigureCell: (rowIdx: number, cellIdx: number) => void
   propsSchemaByWidgetId: Map<string, Record<string, unknown>>
+  displayByWidgetId: Map<string, DisplayText>
+  advanced: boolean
   widgets: Record<string, WidgetComponent>
   widgetProps: WidgetProps
 }) {
   const gridRef = useRef<HTMLDivElement | null>(null)
+  const { locale, resolveKey } = useDisplayResolver()
+  // The target row follows the pointer AND the keyboard: focus moving into a
+  // row (its actions, a cell control) makes it the row the palette adds to.
+  const target = () => {
+    if (!focused) setFocusedRowIndex(rowIdx)
+  }
 
   return (
     <div
-      onClick={() => setFocusedRowIndex(rowIdx)}
+      data-slot="builder-row"
+      data-target={focused ? "" : undefined}
+      onClick={target}
+      onFocus={target}
       onDragOver={(e) => {
         if (!e.dataTransfer.types.includes(WIDGET_DRAG_MIME)) return
         e.preventDefault()
@@ -89,14 +106,21 @@ function CanvasRowImpl({
         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">{L.rowLabel(rowIdx + 1)}</span>
-          <span className="bg-muted/60 rounded px-1 py-0.5 text-[10px]">
-            {L.elementCount(row.row.length)}
-          </span>
+      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+        <div className="text-muted-foreground text-small flex flex-wrap items-center gap-2">
+          <span className="font-medium">{L.rowLabel(rowIdx + 1)}</span>
+          <span className="bg-muted rounded px-1.5 py-0.5">{L.elementCount(row.row.length)}</span>
+          {focused && (
+            <span className="text-foreground inline-flex items-center gap-1.5">
+              <span aria-hidden="true" className="bg-primary size-1.5 rounded-full" />
+              {L.rowTarget}
+            </span>
+          )}
         </div>
-        <div className="opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+        <div
+          data-slot="builder-row-actions"
+          className={cn("flex items-center", focused ? "opacity-100" : REVEAL_ON_INTENT)}
+        >
           <Button
             variant="ghost"
             size="icon-xs"
@@ -137,7 +161,7 @@ function CanvasRowImpl({
       {row.row.length === 0 ? (
         <div
           className={cn(
-            "rounded-md border border-dashed py-6 text-center text-[11px] transition-colors",
+            "text-small rounded-md border border-dashed py-6 text-center transition-colors",
             dragOver
               ? "border-focus bg-accent text-accent-foreground"
               : "border-input text-muted-foreground",
@@ -153,13 +177,24 @@ function CanvasRowImpl({
               const Widget = widgets[cell.widget]
               const hasPropsSchema = propsSchemaByWidgetId.has(cell.widget)
               const propCount = cell.props ? Object.keys(cell.props).length : 0
+              const name = displayLabel(
+                displayByWidgetId.get(cell.widget) ?? {},
+                cell.widget,
+                locale,
+                resolveKey,
+              )
               return (
                 <GridItem key={`${cell.widget}-${cellIdx}`} span={span}>
                   <div className="border-border bg-card shadow-1 relative overflow-hidden rounded-md border">
-                    <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="text-muted-foreground bg-muted/30 text-small flex items-center justify-between gap-2 border-b px-2 py-1">
+                      <span className="flex min-w-0 items-baseline gap-2" title={name.hint}>
+                        <span className="text-foreground truncate font-medium">{name.label}</span>
+                        {advanced && name.hint && (
+                          <span className="truncate font-mono">{name.hint}</span>
+                        )}
+                      </span>
                       <div className="flex shrink-0 items-center gap-2">
-                        <label className="text-muted-foreground inline-flex items-center gap-0.5 font-mono">
+                        <label className="text-muted-foreground inline-flex items-center gap-0.5 tabular-nums">
                           <span className="sr-only">{L.columnSpan}</span>
                           <Select
                             value={String(span)}
@@ -167,7 +202,11 @@ function CanvasRowImpl({
                           >
                             <SelectTrigger
                               size="sm"
-                              className="h-5 gap-0.5 border-none bg-transparent px-1 py-0 font-mono text-[10px] shadow-none"
+                              className={cn(
+                                "text-small h-6 gap-0.5 border-none bg-transparent px-1 py-0 tabular-nums shadow-none",
+                                // Borderless, so the input focus edge is gone: the kit ring instead.
+                                FOCUS_RING,
+                              )}
                               aria-label={L.columnSpan}
                               onClick={(e) => e.stopPropagation()}
                             >
@@ -175,7 +214,11 @@ function CanvasRowImpl({
                             </SelectTrigger>
                             <SelectContent>
                               {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
-                                <SelectItem key={n} value={String(n)} className="font-mono text-xs">
+                                <SelectItem
+                                  key={n}
+                                  value={String(n)}
+                                  className="text-small tabular-nums"
+                                >
                                   {n}
                                 </SelectItem>
                               ))}
@@ -220,7 +263,7 @@ function CanvasRowImpl({
                         props={widgetProps}
                         cellProps={cell.props}
                         showEmptyHint
-                        notBundledClassName="text-muted-foreground rounded border border-dashed p-3 text-center text-[11px]"
+                        notBundledClassName="text-muted-foreground rounded border border-dashed p-3 text-center text-small"
                       />
                     </div>
                     <ResizeHandle
@@ -305,7 +348,10 @@ function ResizeHandle({
       onClick={(e) => e.stopPropagation()}
       onKeyDown={onKeyDown}
       tabIndex={0}
-      className="hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:ring-focus absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none focus-visible:ring-2 focus-visible:outline-hidden"
+      className={cn(
+        "hover:bg-primary/40 focus-visible:bg-primary/40 absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none",
+        FOCUS_RING_INSET,
+      )}
       aria-label={label}
       role="separator"
       aria-orientation="vertical"

package/src/app/builder/CatalogueSheet.tsx

@@ -13,7 +13,9 @@ import {
 } from "../../primitives/sheet.js"
 import { TONE_DOT, TONE_TEXT } from "../../lib/tone-utils.js"
 import { cn } from "../../lib/utils.js"
+import { displayLabel } from "./builder-model.js"
 import type { LayoutBuilderLabels } from "./labels.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Catalogue Sheet — slides in from the right
@@ -38,6 +40,7 @@ export function CatalogueSheet({
   onSeedKey: (name: string) => void
   onAddProducingStep: (key: string) => void
 }) {
+  const { locale, resolveKey } = useDisplayResolver()
   const producerOf = useMemo(() => {
     const map = new Map<string, string | undefined>()
     for (const e of keyCatalog) map.set(e.key, e.producedBySteps[0])
@@ -60,19 +63,19 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueKeys} count={keyCatalog.length} />
               {keyCatalog.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">{L.noKeysRegistered}</p>
+                <p className="text-muted-foreground text-small italic">{L.noKeysRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
                   {keyCatalog.map((entry) => (
                     <li
                       key={entry.key}
-                      className="hover:bg-muted flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
+                      className="hover:bg-muted text-small flex flex-col gap-1 rounded-md border px-2 py-1.5"
                     >
                       <div className="flex items-start justify-between gap-2">
                         <span className="truncate font-mono">{entry.key}</span>
                         <span
                           className={cn(
-                            "inline-flex shrink-0 items-center gap-1 text-[10px]",
+                            "text-small inline-flex shrink-0 items-center gap-1",
                             entry.inContext ? TONE_TEXT.success : "text-muted-foreground",
                           )}
                         >
@@ -91,7 +94,7 @@ export function CatalogueSheet({
                       {(entry.producedBySteps.length > 0 ||
                         entry.consumedBySteps.length > 0 ||
                         entry.consumedByWidgets.length > 0) && (
-                        <div className="text-muted-foreground flex flex-col gap-0.5 text-[10px]">
+                        <div className="text-muted-foreground text-small flex flex-col gap-0.5">
                           {entry.producedBySteps.length > 0 && (
                             <span>
                               {L.catalogueProducedBy}{" "}
@@ -139,25 +142,39 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueSteps} count={availableSteps.length} />
               {availableSteps.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">{L.noStepsRegistered}</p>
+                <p className="text-muted-foreground text-small italic">{L.noStepsRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
-                  {availableSteps.map((s) => (
-                    <li
-                      key={s.id}
-                      className="flex flex-col gap-0.5 rounded-md border px-2 py-1.5 text-xs"
-                    >
-                      <span className="truncate font-mono">{s.id}</span>
-                      <div className="text-muted-foreground flex flex-wrap gap-x-3 text-[10px]">
-                        <span className="font-mono">
-                          ← {s.requires.length ? s.requires.join(", ") : L.noInputs}
-                        </span>
-                        <span className="font-mono">
-                          → {s.produces.length ? s.produces.join(", ") : L.noOutputs}
-                        </span>
-                      </div>
-                    </li>
-                  ))}
+                  {availableSteps.map((s) => {
+                    const name = displayLabel(s, s.id, locale, resolveKey)
+                    return (
+                      <li
+                        key={s.id}
+                        className="text-small flex flex-col gap-0.5 rounded-md border px-2 py-1.5"
+                      >
+                        <span className="truncate font-medium">{name.label}</span>
+                        {name.hint && (
+                          <span className="text-muted-foreground truncate font-mono">
+                            {name.hint}
+                          </span>
+                        )}
+                        <div className="text-muted-foreground flex flex-wrap gap-x-3">
+                          <span>
+                            {L.catalogueNeedsKeys}{" "}
+                            <span className="font-mono">
+                              {s.requires.length ? s.requires.join(", ") : L.noInputs}
+                            </span>
+                          </span>
+                          <span>
+                            {L.stepProvides}{" "}
+                            <span className="font-mono">
+                              {s.produces.length ? s.produces.join(", ") : L.noOutputs}
+                            </span>
+                          </span>
+                        </div>
+                      </li>
+                    )
+                  })}
                 </ul>
               )}
             </section>
@@ -168,7 +185,7 @@ export function CatalogueSheet({
                 count={unreachableWidgets.length}
               />
               {unreachableWidgets.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">
+                <p className="text-muted-foreground text-small italic">
                   {L.catalogueUnreachableEmpty}
                 </p>
               ) : (
@@ -177,13 +194,19 @@ export function CatalogueSheet({
                     const candidate = w.missingKeys
                       .map((k) => ({ key: k, step: producerOf.get(k) }))
                       .find((c) => c.step)
+                    const name = displayLabel(w, w.id, locale, resolveKey)
                     return (
                       <li
                         key={w.id}
-                        className="bg-muted/20 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
+                        className="bg-muted/20 text-small flex flex-col gap-1 rounded-md border px-2 py-1.5"
                       >
-                        <span className="truncate font-mono">{w.id}</span>
-                        <span className="text-muted-foreground text-[10px]">
+                        <span className="truncate font-medium">{name.label}</span>
+                        {name.hint && (
+                          <span className="text-muted-foreground truncate font-mono">
+                            {name.hint}
+                          </span>
+                        )}
+                        <span className="text-muted-foreground">
                           {L.catalogueNeedsKeys}{" "}
                           <span className="font-mono">{w.missingKeys.join(", ")}</span>
                         </span>
@@ -220,11 +243,9 @@ export function CatalogueSheet({
 function CatalogueSectionHeader({ title, count }: { title: string; count: number }) {
   return (
     <div className="flex items-center gap-2">
-      <span className="text-muted-foreground text-[10px] font-semibold tracking-[0.12em] uppercase">
-        {title}
-      </span>
+      <h3 className="text-muted-foreground text-small font-semibold">{title}</h3>
       <span className="bg-border h-px flex-1" aria-hidden="true" />
-      <Badge variant="outline" className="px-1.5 text-[10px]">
+      <Badge variant="outline" className="px-1.5">
         {count}
       </Badge>
     </div>

package/src/app/builder/CellPropsSheet.tsx

@@ -1,5 +1,7 @@
-import type { RowDef } from "@miragon/mcp-toolkit-core"
+import type { DisplayText, RowDef } from "@miragon/mcp-toolkit-core"
 import { WidgetPropsSheet } from "../widget-props-sheet.js"
+import { displayLabel } from "./builder-model.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Cell props sheet — mounts the WidgetPropsSheet for the configured cell
@@ -10,25 +12,37 @@ import { WidgetPropsSheet } from "../widget-props-sheet.js"
  * can be open at a time across the entire workspace — including across
  * tabs. `configuringCell` addresses `{ rowIdx, cellIdx }` on the currently
  * active draft surface (rows or active tab's rows); renders nothing when no
- * cell is being configured or the address no longer resolves.
+ * cell is being configured or the address no longer resolves. The sheet is
+ * titled with the widget's name; closing it returns focus to the cell's
+ * configure button (the kit's `SheetContent` hands it back to the element
+ * that opened it, see `lib/focus-return.ts`).
  */
 export function CellPropsSheet({
   configuringCell,
   activeRows,
   propsSchemaByWidgetId,
+  displayByWidgetId,
   onApply,
   onClose,
 }: {
   configuringCell: { rowIdx: number; cellIdx: number } | null
   activeRows: RowDef[]
   propsSchemaByWidgetId: Map<string, Record<string, unknown>>
+  displayByWidgetId: Map<string, DisplayText>
   onApply: (rowIdx: number, cellIdx: number, next: Record<string, unknown> | undefined) => void
   onClose: () => void
 }) {
+  const { locale, resolveKey } = useDisplayResolver()
   if (!configuringCell) return null
   const cell = activeRows[configuringCell.rowIdx]?.row[configuringCell.cellIdx]
   if (!cell) return null
   const schema = propsSchemaByWidgetId.get(cell.widget)
+  const name = displayLabel(
+    displayByWidgetId.get(cell.widget) ?? {},
+    cell.widget,
+    locale,
+    resolveKey,
+  )
   return (
     <WidgetPropsSheet
       open
@@ -36,6 +50,7 @@ export function CellPropsSheet({
         if (!open) onClose()
       }}
       widgetId={cell.widget}
+      widgetTitle={name.hint ? name.label : undefined}
       schema={schema}
       value={cell.props}
       onApply={(next) => {

package/src/app/builder/DiscardDialog.tsx

@@ -0,0 +1,59 @@
+import { Button } from "../../primitives/button.js"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../primitives/dialog.js"
+import type { LayoutBuilderLabels } from "./labels.js"
+
+// -------------------------------------------------------------------------- //
+// Discard confirmation
+// -------------------------------------------------------------------------- //
+
+/**
+ * Asks before Discard takes the changes out of the view (CI §9: confirm
+ * before an irreversible action). When a saved dashboard holds them
+ * (`changesSaved`), it says so instead of calling them lost. The safe choice
+ * comes first in the DOM, so the dialog opens with focus on "Keep editing";
+ * closing it returns focus to Discard (the kit's `DialogContent` hands it
+ * back to the element that opened it, see `lib/focus-return.ts`).
+ */
+export function DiscardDialog({
+  L,
+  open,
+  onOpenChange,
+  changesSaved,
+  onConfirm,
+}: {
+  L: Required<LayoutBuilderLabels>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** A saved dashboard holds the changes: only the view goes back. */
+  changesSaved: boolean
+  onConfirm: () => void
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{L.discardDialogTitle}</DialogTitle>
+          <DialogDescription>
+            {changesSaved ? L.discardDialogDescriptionSaved : L.discardDialogDescription}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">{L.keepEditing}</Button>
+          </DialogClose>
+          <Button variant="destructive" onClick={onConfirm}>
+            {L.discardConfirm}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}