@tangle-network/sandbox-ui 0.122.3 → 0.123.1

package/dist/styles.css

@@ -5,7 +5,6 @@
   :root, :host {
     --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
-    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
@@ -576,6 +575,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mr-1 {
     margin-right: var(--spacing);
   }
@@ -2178,6 +2180,9 @@
   .border-\[var\(--md3-outline-variant\)\] {
     border-color: var(--md3-outline-variant);
   }
+  .border-\[var\(--md3-surface-container-lowest\)\] {
+    border-color: var(--md3-surface-container-lowest);
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2436,6 +2441,9 @@
   .bg-\[var\(--md3-surface-container\)\] {
     background-color: var(--md3-surface-container);
   }
+  .bg-\[var\(--md3-surface-container-lowest\)\] {
+    background-color: var(--md3-surface-container-lowest);
+  }
   .bg-\[var\(--run-mix-cancelled\)\] {
     background-color: var(--run-mix-cancelled);
   }
@@ -3200,6 +3208,9 @@
   .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
     font-size: var(--font-size-3xl,1.875rem);
   }
+  .text-\[length\:var\(--font-size-base\)\] {
+    font-size: var(--font-size-base);
+  }
   .text-\[length\:var\(--font-size-display\,3rem\)\] {
     font-size: var(--font-size-display,3rem);
   }
@@ -3215,6 +3226,9 @@
   .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
     font-size: var(--font-size-xl,1.25rem);
   }
+  .text-\[length\:var\(--font-size-xs\)\] {
+    font-size: var(--font-size-xs);
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -3449,12 +3463,6 @@
   .text-\[var\(--code-success\,\#10B981\)\] {
     color: var(--code-success,#10B981);
   }
-  .text-\[var\(--font-size-base\)\] {
-    color: var(--font-size-base);
-  }
-  .text-\[var\(--font-size-xs\)\] {
-    color: var(--font-size-xs);
-  }
   .text-\[var\(--md3-on-primary\)\] {
     color: var(--md3-on-primary);
   }
@@ -3515,6 +3523,9 @@
   .text-\[var\(--text-secondary\)\] {
     color: var(--text-secondary);
   }
+  .text-\[var\(--x\)\] {
+    color: var(--x);
+  }
   .text-\[var\(--x\)\]\/40 {
     color: var(--x);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3632,9 +3643,6 @@
       color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
-  .text-red-200 {
-    color: var(--color-red-200);
-  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -4285,14 +4293,6 @@
         background-color: color-mix(in oklab, hsl(var(--accent)) 40%, transparent);
       }
     }
-    .hover\:bg-accent\/45:hover {
-      background-color: hsl(var(--accent));
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-accent\/45:hover {
-        background-color: color-mix(in oklab, hsl(var(--accent)) 45%, transparent);
-      }
-    }
     .hover\:bg-accent\/50:hover {
       background-color: hsl(var(--accent));
     }
@@ -4434,6 +4434,14 @@
     .hover\:bg-surface-container-highest:hover {
       background-color: var(--md3-surface-container-highest);
     }
+    .hover\:bg-white\/5:hover {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/5:hover {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
     .hover\:bg-yellow-600\/30:hover {
       background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 30%, transparent);
     }
@@ -5330,6 +5338,78 @@
   .\[\&\>\*\]\:min-w-0 > * {
     min-width: 0px;
   }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:ml-0\.5 > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    margin-left: calc(var(--spacing) * 0.5);
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:inline-block > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:h-\[1em\] > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    height: 1em;
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:w-0\.5 > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 0.5);
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:animate-pulse > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    animation: var(--animate-pulse);
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:rounded-full > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    border-radius: var(--radius-full);
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:bg-muted-foreground > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    background-color: hsl(var(--muted-foreground));
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:align-text-bottom > :is(ul, ol):last-child > li:last-child::after {
+    content: var(--tw-content);
+    vertical-align: text-bottom;
+  }
+  .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:content-\[\'\'\] > :is(ul, ol):last-child > li:last-child::after {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:ml-0\.5 > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    margin-left: calc(var(--spacing) * 0.5);
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:inline-block > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:h-\[1em\] > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    height: 1em;
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:w-0\.5 > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 0.5);
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:animate-pulse > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    animation: var(--animate-pulse);
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:rounded-full > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    border-radius: var(--radius-full);
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:bg-muted-foreground > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    background-color: hsl(var(--muted-foreground));
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:align-text-bottom > :last-child:not(ul, ol)::after {
+    content: var(--tw-content);
+    vertical-align: text-bottom;
+  }
+  .\[\&\>\:last-child\:not\(ul\,ol\)\]\:after\:content-\[\'\'\] > :last-child:not(ul, ol)::after {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
   @media (width < 40rem) {
     .max-sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
       border-left-style: var(--tw-border-style);
@@ -5509,11 +5589,11 @@
   --surface-success-bg: #2f5146;
   --surface-success-border: #3c7760;
   --surface-success-text: #5ed7a4;
-  --surface-warning-bg: #6a402c;
-  --surface-warning-border: #916436;
+  --surface-warning-bg: #4b4232;
+  --surface-warning-border: #7a6236;
   --surface-warning-text: #f4c14f;
-  --surface-danger-bg: #733b36;
-  --surface-danger-border: #9a5b56;
+  --surface-danger-bg: #533f3e;
+  --surface-danger-border: #86524e;
   --surface-danger-text: #ffada9;
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
@@ -5521,9 +5601,9 @@
   --surface-teal-bg: #042f2e;
   --surface-teal-border: #134e4a;
   --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #1e1b4b;
-  --surface-violet-border: #3730a3;
-  --surface-violet-text: #B8B2F5;
+  --surface-violet-bg: #403d66;
+  --surface-violet-border: #5f58b8;
+  --surface-violet-text: #c9c4ff;
   --surface-orange-bg: #431407;
   --surface-orange-border: #7c2d12;
   --surface-orange-text: #fb923c;
@@ -5641,7 +5721,7 @@
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
   --code-header-bg: hsl(var(--hsl-background));
-  --syntax-comment: #8b8fbc;
+  --syntax-comment: #9ea2cc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

package/dist/tokens.css

@@ -197,11 +197,11 @@
   --surface-success-bg: #2f5146;
   --surface-success-border: #3c7760;
   --surface-success-text: #5ed7a4;
-  --surface-warning-bg: #6a402c;
-  --surface-warning-border: #916436;
+  --surface-warning-bg: #4b4232;
+  --surface-warning-border: #7a6236;
   --surface-warning-text: #f4c14f;
-  --surface-danger-bg: #733b36;
-  --surface-danger-border: #9a5b56;
+  --surface-danger-bg: #533f3e;
+  --surface-danger-border: #86524e;
   --surface-danger-text: #ffada9;
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
@@ -209,9 +209,9 @@
   --surface-teal-bg: #042f2e;
   --surface-teal-border: #134e4a;
   --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #1e1b4b;
-  --surface-violet-border: #3730a3;
-  --surface-violet-text: #B8B2F5;
+  --surface-violet-bg: #403d66;
+  --surface-violet-border: #5f58b8;
+  --surface-violet-text: #c9c4ff;
   --surface-orange-bg: #431407;
   --surface-orange-border: #7c2d12;
   --surface-orange-text: #fb923c;
@@ -409,7 +409,7 @@
 
   /* Syntax highlighting — the light palette is authored below. */
   --code-header-bg: hsl(var(--hsl-background));
-  --syntax-comment: #8b8fbc;
+  --syntax-comment: #9ea2cc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

package/dist/workflows.d.ts

@@ -1,4 +1,6 @@
 import { a as modelBrandFor, n as ModelBrandStack, t as ModelBrandIdentity } from "./model-brand-B9A4H9pJ.js";
+import { ReactElement } from "react";
+import { LucideIcon } from "lucide-react";
 import "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 //#region src/workflows/model.d.ts
@@ -488,4 +490,167 @@ interface WorkflowGraphProps {
 //#region src/workflows/WorkflowGraphLazy.d.ts
 declare function WorkflowGraph(props: WorkflowGraphProps): import("react").JSX.Element;
 //#endregion
-export { type BuildWorkflowGraphOptions, type ModelBrandIdentity, ModelBrandStack, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };
+//#region src/workflows/node-ui.d.ts
+export declare const STATUS_COLOR: Record<WfNodeStatus, string>;
+export declare const STATUS_LABEL: Record<WfNodeStatus, string>;
+/** Status pill styling — a tinted well in the status color. Built from the
+ *  semantic surface trio (bg/border/text) so the pill keeps its contrast in both
+ *  themes rather than washing out in one of them. */
+export declare const STATUS_PILL: Record<WfNodeStatus, {
+  background: string;
+  color: string;
+  borderColor: string;
+}>;
+export declare const KIND_ICON: Record<string, LucideIcon>;
+/** The status pill in a card's header — the one place the run state is spelled
+ *  out in words. */
+declare function StatusPill({ status }: {
+  status: WfNodeStatus;
+}): import("react").JSX.Element;
+/**
+ * A node's MARK, centered in a tile the caller sizes: the provider's brand logo
+ * when the step runs against a connector — the way n8n makes a node recognizable
+ * before a word of it is read — else the kind's glyph, tinted by tone. Both
+ * densities render the same mark at different sizes, so a node looks like itself
+ * whether it's an icon tile or a full card.
+ */
+export declare function NodeMark({ kind, provider, model, accent, tile }: {
+  kind?: string;
+  provider?: string;
+  /** The model an agent runs, e.g. "anthropic/claude-sonnet-4-5". Its lab/host
+   *  brand mark identifies the node far faster than a generic sparkle. */
+  model?: string;
+  accent: string;
+  /** Edge length of the square the mark is centered in. */
+  tile: number;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/workflows/naming.d.ts
+/**
+ * Human-facing naming for workflow nodes. A definition addresses things by
+ * machine identifier — an action kind (`agent.run`), a hub action path
+ * (`github.pulls.reviews.create`), a profile slug (`pr-reviewer`) — and showing
+ * those verbatim on a node makes the graph read like a config file. These turn
+ * an identifier into the label a person would say out loud.
+ *
+ * Pure and dependency-free so the naming rules are unit-testable without the
+ * YAML parser or a render.
+ */
+/** How the first word of a humanized identifier is cased. An initialism is
+ *  ALWAYS upper-cased whichever is chosen — that is the whole point of the table
+ *  above, and `.toLowerCase()`ing the result afterwards silently undoes it
+ *  ("List API keys" → "list api keys"). */
+type LeadCase = "sentence" | "lower" | "title";
+/**
+ * Humanize a machine identifier: `pr-reviewer` → "PR reviewer", `sandbox.spawn`
+ * → "Sandbox spawn", `postMessage` → "Post message". Known initialisms are
+ * upper-cased wherever they appear; `lead` picks the case of the rest.
+ *
+ *  - `sentence` (default): "Create issue comment" — a label or a title.
+ *  - `lower`: "create issue comment" — a fragment that sits INSIDE a phrase
+ *    ("On pull request"), where a capital would read as a new sentence. An
+ *    initialism still wins: `ci_run_completed` → "CI run completed", never
+ *    "cI run completed".
+ *  - `title`: "Google Sheets" — a brand/proper name.
+ *
+ * An identifier that carries no word characters is returned verbatim rather than
+ * blanked.
+ */
+export declare function humanizeIdentifier(id: string, lead?: LeadCase): string;
+/** A model slug without its provider prefix (`anthropic/claude-sonnet-5` →
+ *  `claude-sonnet-5`) — the vendor is noise on a card whose width is the scarce
+ *  resource, and the full slug stays in the node's config for the detail view. */
+export declare function shortModel(model: string): string;
+/** The parts of a hub action path (`<provider>.<resource…>.<operation>`). */
+interface ActionPathParts {
+  /** The connector the action runs against (`github`). */
+  provider: string;
+  /** The trailing verb (`create`). */
+  operation: string;
+  /** Everything between provider and operation (`pulls.reviews`), when present —
+   *  a two-segment path (`slack.postMessage`) has no resource. */
+  resource?: string;
+}
+/** Split a hub action path into provider / resource / operation. Null when the
+ *  value isn't a dotted path (a `${…}` expression, or a bare word), so callers
+ *  fall back to showing it verbatim instead of inventing structure. */
+export declare function parseActionPath(path: string): ActionPathParts | null;
+/**
+ * The operation label for an action path, in n8n's `operation: resource` shape:
+ * `github.pulls.reviews.create` → "create: pulls.reviews", `slack.postMessage`
+ * → "post message". The provider names the node itself (its title + logo), so
+ * it is deliberately absent here. A path we can't split is shown verbatim.
+ */
+export declare function actionPathLabel(path: string): string;
+//#endregion
+//#region src/workflows/node-output.d.ts
+/** The recovered shape of an output preview. */
+type OutputShape = {
+  kind: "empty";
+} |
+/** A shallow JSON object, flattened to top-level key/value pairs for a
+ *  key-value render. `truncated` when more pairs exist than we kept. */
+{
+  kind: "json";
+  entries: [string, string][];
+  truncated: boolean;
+} |
+/** Structured-looking text we won't key/value render — a JSON array, a nested
+ *  object, or a fragment the host clamped mid-token so it won't parse. Shown in
+ *  monospace so it still reads as data, not prose. */
+{
+  kind: "code";
+  text: string;
+} |
+/** Free-form prose (agent output, a status line, an error message). */
+{
+  kind: "text";
+  text: string;
+};
+/**
+ * Flatten an agent's markdown answer into the sentence a person would read out
+ * of it. On a two-line card preview the syntax IS the noise: a `## Heading` mid
+ * paragraph, a `**bold**` run and a bullet's `-` all survive the clamp while the
+ * words that carry the meaning get pushed past it. Stripping the markup (never
+ * the words) is what turns the preview back into prose — the full text, markup
+ * and all, is still rendered by the node's detail view.
+ *
+ * Structure-only lines (a fence, a table rule) are dropped; everything else keeps
+ * its text and is joined into one flowing line.
+ */
+export declare function condenseText(text: string): string;
+/**
+ * Recover the shape of an output preview string. Only text that *begins* like
+ * JSON (`{`/`[`) is parse-attempted, so ordinary prose starting with a brace-free
+ * sentence is never mis-parsed. A begins-like-JSON string that fails to parse
+ * (the host clamped it mid-value) still renders as `code`, not prose, so it keeps
+ * its monospace/data affordance.
+ *
+ * `condenseMarkdown` says the prose IS markdown and may be flattened for the
+ * preview ({@link condenseText}). It is OFF by default, and the caller must only
+ * turn it on for text an agent actually authored as markdown. Applied to anything
+ * else it does not merely look wrong — it silently REWRITES the text: a stack
+ * trace's `__init__.py` loses its underscores, and a shell glob `src/**` pairs
+ * with a later `**` and both vanish. An error message is the one string a person
+ * reads to find out what broke; it must reach them exactly as it was thrown.
+ */
+export declare function classifyOutput(preview: string | undefined, condenseMarkdown?: boolean): OutputShape;
+/**
+ * Render a classified output preview's CONTENT (no surrounding frame — each node
+ * design supplies its own container/label). `rows` caps the visible lines so the
+ * body stays within a card's reserved output space; `tone="error"` colors it for
+ * a failure message.
+ *
+ * `rows="none"` renders the body UNCLAMPED, for a container that scrolls or is
+ * sized by its content — a drawer, a detail panel, a selection overlay. It is a
+ * word rather than a large number because there is no number that means "do not
+ * clamp": a count outside {@link CLAMP_BY_ROWS} falls back to two lines, so
+ * `rows={99}` asks for everything and silently shows the least.
+ */
+export declare function NodeOutputBody({ shape, rows, tone }: {
+  shape: OutputShape;
+  rows?: number | "none";
+  tone?: "default" | "error";
+}): ReactElement | null;
+//#endregion
+export { type ActionPathParts, type BuildWorkflowGraphOptions, type LeadCase, type ModelBrandIdentity, ModelBrandStack, StatusPill as NodeStatusPill, type OutputShape, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { a as buildWorkflowGraph, c as triggerNodeIndex, i as branchNodeId, n as TRIGGER_NODE_ID, r as actionNodeId, s as triggerNodeId } from "./model-I-NIxeM-.js";
+import { A as actionPathLabel, C as branchNodeId, D as triggerNodeIndex, E as triggerNodeId, M as parseActionPath, N as shortModel, S as actionNodeId, a as NodeMark, c as STATUS_COLOR, f as StatusPill, i as KIND_ICON, j as humanizeIdentifier, l as STATUS_LABEL, n as classifyOutput, r as condenseText, t as NodeOutputBody, u as STATUS_PILL, w as buildWorkflowGraph, x as TRIGGER_NODE_ID } from "./node-output-D-fYilAu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-E2Gqe8sl.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-B4mkYGe3.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -81,4 +81,4 @@ function WorkflowGraph(props) {
 	}, `${props.yaml}::${attempt}`);
 }
 //#endregion
-export { ModelBrandStack, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, branchNodeId, buildWorkflowGraph, modelBrandFor, triggerNodeId, triggerNodeIndex };
+export { KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.122.3",
+  "version": "0.123.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -127,8 +127,8 @@
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0",
-    "@tangle-network/brand": "^1.10.0",
-    "@tangle-network/ui": "^11.15.2",
+    "@tangle-network/brand": "^1.10.2",
+    "@tangle-network/ui": "^11.16.6",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
@@ -213,8 +213,8 @@
     "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "2.13.1",
-    "@tangle-network/brand": "1.10.0",
-    "@tangle-network/ui": "11.15.2",
+    "@tangle-network/brand": "1.10.2",
+    "@tangle-network/ui": "11.16.6",
     "@tanstack/react-query": "^5.104.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",