@cueplusplus/ui 0.20.1 → 0.22.0

package/manifest/components/split-pane.json

@@ -0,0 +1,224 @@
+{
+  "name": "SplitPane",
+  "slug": "split-pane",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A list beside its detail, which stacks into a drill-in when narrow (#102).\n\nThe master-detail opinion on top of {@link PaneSeam}. Side by side while\nthe detail would be at least twice the list, measured on the frame rather\nthan the window, so it works in any column. Below that it stacks the way a\nphone does: the list, or the detail with a Back button, and Escape inside the\ndetail goes back too. `detailOpen` says which shows; selection and the list's\nown keyboard stay with the list.\n\nThe frame measures itself with a `ResizeObserver` and draws side by side\nuntil it has, so a server render and a browser without one get the split.",
+  "props": [
+    {
+      "name": "list",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The master: a list of rows, a tree, a feed. It owns its own keyboard.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "detail",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The detail for whatever the list has selected.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "listLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the list is, in a word or two: `events`. It names the seam (`Resize\nthe events`), the Back button (`Back to events`) and the fold (`Hide\nevents`), so each control says what it acts on.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "listSize",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The list's width in pixels, when the caller holds it.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "defaultListSize",
+      "type": "number",
+      "required": false,
+      "defaultValue": "320",
+      "description": "The list's starting width when nothing controls it. Defaults to 320.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "onListSizeChange",
+      "type": "((size: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with every new list width, clamped to `minListSize` and `maxListSize`.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "minListSize",
+      "type": "number",
+      "required": false,
+      "defaultValue": "200",
+      "description": "The narrowest the list may be dragged, in pixels. Defaults to 200.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "maxListSize",
+      "type": "number",
+      "required": false,
+      "defaultValue": "480",
+      "description": "The widest the list may be dragged, in pixels. Defaults to 480.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "stackBelow",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The frame width, in pixels, below which the panes stack. Unset, they stack\nonce the detail would be narrower than twice the list.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "detailOpen",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Which pane shows when stacked: the detail when `true`, the list when not.\nSide by side, both always show.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onBack",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called by the stacked detail's Back button and by Escape inside it.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "collapsible",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Whether the list can fold to a thin tab while side by side.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "collapsed",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Whether the list is folded, when the caller holds it.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "defaultCollapsed",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Whether the list starts folded when nothing controls it.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onCollapsedChange",
+      "type": "((collapsed: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the list folds (`true`) or opens (`false`).",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-6",
+    "--cue-style-focus-width",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "A list beside its detail, stacking into a drill-in with Back when the frame is narrow.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "const [selected, setSelected] = React.useState<string | null>(null);\n\n<SplitPane\n  listLabel=\"events\"\n  list={<EventFeed events={events} selectedId={selected} onSelect={setSelected} />}\n  detail={selected ? <EventDetail id={selected} /> : <EmptyState title=\"Pick an event\" />}\n  detailOpen={selected !== null}\n  onBack={() => setSelected(null)}\n  collapsible\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/split-pane",
+  "mdUrl": "/docs/components/split-pane.md",
+  "jsonUrl": "/r/components/split-pane.json",
+  "whenToUse": [
+    "A list and an inspector: events, logs, jobs, an inbox, an MCP catalogue.",
+    "One layout for a wide console and a narrow column. It measures its own frame, so it stacks inside a sidebar as readily as on a phone."
+  ],
+  "whenNotToUse": [
+    "Two panes that are equals rather than a list and its detail. Use `Resizable`.",
+    "A single side pane with no stacking. `PaneSeam` alone is lighter."
+  ],
+  "commonMistakes": [
+    "Leaving `detailOpen` true with nothing selected. When stacked, it decides which pane shows, so tie it to the selection.",
+    "Omitting `onBack`. When stacked, Back and Escape are the only ways out of the detail, and both call it.",
+    "A `listLabel` that is a sentence. It is spliced into three controls (`Resize the …`, `Back to …`, `Hide …`), so give it a noun: `events`."
+  ],
+  "specimens": [
+    {
+      "title": "SplitPane",
+      "group": "layout",
+      "components": [
+        "SplitPane"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"side by side\" wide>\n    <SplitPane\n      listLabel=\"cues\"\n      defaultListSize={180}\n      minListSize={140}\n      maxListSize={260}\n      collapsible\n      detailOpen={cue !== null}\n      onBack={() => setCue(null)}\n      list={cueList}\n      detail={cueDetail}\n      className=\"h-[11rem] w-full max-w-[36rem] overflow-hidden rounded-(--radius-surface) border border-border\"\n    />\n  </Specimen>\n  <Specimen label=\"stacked, under twice the list\" wide>\n    <SplitPane\n      listLabel=\"cues\"\n      defaultListSize={180}\n      detailOpen={cue !== null}\n      onBack={() => setCue(null)}\n      list={cueList}\n      detail={cueDetail}\n      className=\"h-[11rem] w-full max-w-[22rem] overflow-hidden rounded-(--radius-surface) border border-border\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A list beside its detail, on PaneSeam. Side by side while the detail is at least twice the list, measured on the frame, not the window; below that it stacks like a phone, the list or the detail with Back. Both specimens share one selection: the wide one splits, and the narrow one is the same split stacked.",
+      "interaction": "pick a cue. In the narrow frame that opens the detail, and Back or Escape returns to the list. In the wide frame drag or arrow the seam, or fold the list to its tab with the chevron."
+    }
+  ]
+}

package/manifest/components/switch.json

@@ -65,9 +65,6 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-space-3",
     "--cue-style-body-weight",
     "--cue-style-check-edge",

package/manifest/components/tags-input.json

@@ -215,6 +215,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-sm",
     "--cue-info",
@@ -268,6 +269,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/textarea.json

@@ -92,6 +92,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/theme-configurator.json

@@ -127,6 +127,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-font-sans",
+    "--cue-ground",
     "--cue-icon-sm",
     "--cue-leading-ui",
     "--cue-paint-rim-width",

package/manifest/components/time-field.json

@@ -80,6 +80,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/toast.json

@@ -78,6 +78,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-info",

package/manifest/components/toggle.json

@@ -103,9 +103,6 @@
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-radius-control",
     "--cue-space-3",
     "--cue-space-4",

package/manifest/components/tool-call.json

@@ -62,13 +62,58 @@
     {
       "name": "running",
       "type": "boolean",
-      "required": true,
+      "required": false,
       "defaultValue": null,
       "description": "When true a spinner replaces the success check on the trigger.",
       "control": {
         "kind": "boolean"
       }
     },
+    {
+      "name": "state",
+      "type": "\"done\" | \"failed\" | \"running\" | \"refused\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where the call got to: `running`, `done`, `failed` or `refused`. Each settled\nstate ends the row with its own mark. Supersedes `running`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "done",
+          "failed",
+          "running",
+          "refused"
+        ]
+      }
+    },
+    {
+      "name": "variant",
+      "type": "\"inline\" | \"card\"",
+      "required": false,
+      "defaultValue": "card",
+      "description": "`card` (the default) or `inline`, a denser row that spans its column, for a\ntranscript of many calls.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "inline",
+          "card"
+        ]
+      }
+    },
+    {
+      "name": "absence",
+      "type": "\"none\" | \"refused\" | \"unanswered\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "What an empty `result` means: `none` (it returned nothing), `refused` or\n`unanswered`. Read only when `result` is empty.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "none",
+          "refused",
+          "unanswered"
+        ]
+      }
+    },
     {
       "name": "open",
       "type": "boolean",
@@ -113,7 +158,6 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
-    "--cue-ok",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-style-focus-width",

package/manifest/components/tool-group.json

@@ -50,10 +50,24 @@
         "kind": "callback",
         "fixture": "callback.log"
       }
+    },
+    {
+      "name": "variant",
+      "type": "\"inline\" | \"card\"",
+      "required": false,
+      "defaultValue": "card",
+      "description": "`card` (the default) or `inline`, a row in its column without the paper, for a\ntranscript of many groups.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "inline",
+          "card"
+        ]
+      }
     }
   ],
   "typeReferences": [
-    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"label\" | \"tools\" | \"open\" | \"onOpenChange\"\n> & {\n  /** What the group did, as one line. */\n  label: string;\n  /**\n   * Calls issued together. The header summarizes them: progress while any run,\n   * failures if any failed, otherwise the count.\n   */\n  tools: readonly GroupedTool[];\n  /** Whether the per-call list is expanded. */\n  open: boolean;\n  /** Called when the group is expanded or collapsed. */\n  onOpenChange?: (open: boolean) => void;\n}"
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"label\" | \"tools\" | \"open\" | \"onOpenChange\"\n> & {\n  /** What the group did, as one line. */\n  label: string;\n  /**\n   * Calls issued together. The header summarizes them: progress while any run,\n   * failures if any failed, otherwise the count.\n   */\n  tools: readonly GroupedTool[];\n  /** Whether the per-call list is expanded. */\n  open: boolean;\n  /** Called when the group is expanded or collapsed. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (the default) or `inline`, a row in its column without the paper, for a\n   * transcript of many groups.\n   */\n  variant?: \"card\" | \"inline\";\n}"
   ],
   "subcomponents": [],
   "parts": [],
@@ -61,10 +75,8 @@
   "defaultVariants": {},
   "tokensUsed": [
     "--cue-border",
-    "--cue-danger",
     "--cue-fg-muted",
     "--cue-fg-subtle",
-    "--cue-ok",
     "--cue-radius-overlay",
     "--cue-surface-1",
     "--cue-text-body"

package/manifest/components/tooltip.json

@@ -146,6 +146,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/unsupported-request-card.json

@@ -0,0 +1,117 @@
+{
+  "name": "UnsupportedRequestCard",
+  "slug": "unsupported-request-card",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A request this client cannot answer, said plainly, with no answer offered.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the agent asked for, in its words: `Pick a file`, `Open a browser`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "kind",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The request's kind as the protocol names it, printed in mono so it can be reported.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "detail",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "A supporting line: which agent asked, or what it was doing.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onDismiss",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the person clears the card. Dismiss is drawn only when this is set.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "labels",
+      "type": "Partial<UnsupportedRequestLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace any of the card's own copy.",
+      "control": {
+        "kind": "opaque"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A request this app cannot answer, said plainly, with no answer offered.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { UnsupportedRequestCard } from \"@cueplusplus/ui/elements\";\n\n<UnsupportedRequestCard\n  title=\"Pick a file\"\n  kind=\"file-picker\"\n  detail=\"Asked by the coding agent\"\n  onDismiss={() => dismiss(request.id)}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/unsupported-request-card",
+  "mdUrl": "/docs/components/unsupported-request-card.md",
+  "jsonUrl": "/r/components/unsupported-request-card.json",
+  "whenToUse": [
+    "An agent request your client has no way to fulfil: a file picker, a browser session, or a request kind newer than the client.",
+    "Keeping the transcript honest. The request stays visible, and `kind` names it so the person can report it."
+  ],
+  "whenNotToUse": [
+    "A request you can answer but have not built yet. Answer it with `ApprovalCard`, `QuestionCard` or `ElicitationForm` rather than calling it unsupported."
+  ],
+  "commonMistakes": [
+    "Drawing an unsupported request as an approval or a question. A button the client cannot deliver is a false statement.",
+    "Leaving `kind` off. It is the one detail the person can pass on to whoever runs the agent."
+  ],
+  "specimens": [
+    {
+      "title": "UnsupportedRequestCard",
+      "group": "elements",
+      "components": [
+        "UnsupportedRequestCard"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"with dismiss\" wide>\n    <UnsupportedRequestCard\n      title=\"Pick a show file\"\n      kind=\"file-picker\"\n      detail=\"Asked by the patcher\"\n      onDismiss={() => {}}\n    />\n  </Specimen>\n  <Specimen label=\"nothing to press\" wide>\n    <UnsupportedRequestCard title=\"Open a browser\" kind=\"browser-session\" />\n  </Specimen>\n</Specimens>",
+      "note": "A request this app cannot answer, said plainly and with nothing offered. A card drawn as an approval or a question would invite an answer nothing can deliver. The request's kind is printed in mono, so a reader can name it to whoever runs the agent.",
+      "interaction": "Dismiss is drawn only when the caller can clear the card."
+    }
+  ]
+}

package/manifest/fixtures.json

@@ -686,6 +686,22 @@
         "readonly QueuedFollowUp[]"
       ]
     },
+    {
+      "id": "agents.feed",
+      "kind": "array",
+      "label": "5 run events",
+      "accepts": [
+        "readonly FeedEvent[]"
+      ]
+    },
+    {
+      "id": "agents.feed-event",
+      "kind": "opaque",
+      "label": "One run event",
+      "accepts": [
+        "FeedEvent"
+      ]
+    },
     {
       "id": "composer.attachment",
       "kind": "opaque",