@tangle-network/ui 11.43.0 → 11.44.1

package/dist/utils/tool-display.js

@@ -1,4 +1,4 @@
-//#region src/utils/tool-display.ts
+// src/utils/tool-display.ts
 const TOOL_NAME_PREFIX = "tool:";
 function normalizeToolName(tool) {
 	const n = tool?.toLowerCase() ?? "";
@@ -154,5 +154,4 @@ function getToolErrorText(part, fallback) {
 	if (part.state.status !== "error") return void 0;
 	return part.state.error || fallback;
 }
-//#endregion
 export { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.43.0",
+  "version": "11.44.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -130,43 +130,43 @@
   "dependencies": {
     "@pierre/theme": "1.1.0",
     "@pierre/trees": "1.0.0-beta.6",
-    "@radix-ui/react-alert-dialog": "^1.1.23",
-    "@radix-ui/react-avatar": "^1.2.6",
-    "@radix-ui/react-checkbox": "^1.3.11",
-    "@radix-ui/react-collapsible": "^1.1.20",
-    "@radix-ui/react-context-menu": "^2.3.7",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-alert-dialog": "^1.2.1",
+    "@radix-ui/react-avatar": "^1.3.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-collapsible": "^1.2.1",
+    "@radix-ui/react-context-menu": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
     "@radix-ui/react-hover-card": "^1.2.1",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.8",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slider": "^1.4.7",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-progress": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-separator": "^1.2.0",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
-    "lucide-react": "^1.48.0",
-    "marked": "^18.0.14",
-    "motion": "14.1.0",
+    "lucide-react": "^1.61.0",
+    "marked": "^18.1.1",
+    "motion": "14.6.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^4.4.3",
+    "shiki": "^4.5.0",
     "tailwind-merge": "^3.7.0",
     "turndown": "^7.2.4"
   },
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.27.0",
+    "@tangle-network/brand": "^1.27.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -215,24 +215,24 @@
     }
   },
   "devDependencies": {
-    "@hocuspocus/provider": "^4.7.0",
+    "@hocuspocus/provider": "^4.7.1",
     "@nanostores/react": "^2.0.1",
-    "@storybook/react": "^10.6.0",
-    "@tiptap/core": "^3.31.3",
-    "@tiptap/extension-collaboration": "^3.31.3",
-    "@tiptap/extension-collaboration-caret": "^3.31.3",
-    "@tiptap/react": "^3.31.3",
-    "@tiptap/starter-kit": "^3.31.3",
-    "@tiptap/y-tiptap": "^3.0.9",
+    "@storybook/react": "^10.6.3",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-collaboration": "^3.32.0",
+    "@tiptap/extension-collaboration-caret": "^3.32.0",
+    "@tiptap/react": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
+    "@tiptap/y-tiptap": "^3.0.10",
     "@types/react": "^19.3.0",
     "@types/turndown": "^5.0.6",
-    "ajv": "8.17.1",
-    "nanostores": "^1.5.4",
+    "ajv": "8.20.0",
+    "nanostores": "^1.5.5",
     "pdfjs-dist": "^6.4.299",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-router": "^8.4.0",
-    "tsdown": "^0.23.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-router": "^8.5.0",
+    "tsdown": "0.23.1",
     "typescript": "^7.0.2",
     "yjs": "^13.6.33"
   },

package/src/primitives/settings.stories.tsx

@@ -243,6 +243,40 @@ function FieldsExample() {
   );
 }
 
+/** Read-only product data beside existing controls; all values here are sample data. */
+function SettingsValuesExample() {
+  const [details, setDetails] = useState(false);
+  return (
+    <div className="mx-auto max-w-4xl space-y-6 p-6">
+      <SettingsSection id="read-only-values" title="Account values">
+        <SettingsRow id="value-zero" label="Active sessions" value={0} layout="compact" />
+        <SettingsRow id="value-empty" label="Empty value" value="" layout="compact" />
+        <SettingsRow id="value-false" label="False value" value={false} layout="compact" />
+        <SettingsRow id="value-null" label="Null value" value={null} layout="compact" />
+        <SettingsRow id="value-undefined" label="Undefined value" value={undefined} layout="compact" />
+        <SettingsRow id="value-mixed" label="Projected monthly cost" value={<>$0.00 <span className="text-muted-foreground">/month</span></>} layout="compact" />
+        <SettingsRow id="value-long" label="Session identifier" value="session_with_a_long_unbroken_identifier_that_must_wrap_inside_its_settings_card_without_hiding_the_label_or_overflowing" mono layout="compact" />
+        <SettingsRow id="value-agent" label="Agent identifier" value="research-agent" mono layout="compact" />
+        <SettingsRow id="value-model" label="Model identifier" value="workspace-model" mono layout="compact" />
+        <SettingsRow id="value-provider" label="Provider identifier" value="workspace-provider" mono layout="compact" />
+        <SettingsRow id="value-stacked" label="Stacked summary" value="Workspace summary" layout="stacked" />
+        <SettingsRow id="value-action" label="Value with action" value="workspace-provider" status={details ? "Details shown" : undefined} layout="compact">
+          <Button type="button" variant="outline" onClick={() => setDetails((shown) => !shown)}>{details ? "Hide details" : "Show details"}</Button>
+        </SettingsRow>
+        <SettingsRow id="value-control" label="Value with input" value="UTC" htmlFor="value-timezone" description="The original input keeps its message wiring.">
+          <Input id="value-timezone" defaultValue="UTC" />
+        </SettingsRow>
+      </SettingsSection>
+      <div className="max-w-sm">
+        <SettingsSection id="narrow-values" title="Narrow card in any window">
+          <SettingsRow id="narrow-value" label="Account email" value="reader@workspace.example" layout="compact" />
+          <SettingsRow id="legacy-compact" label="Daily digest" htmlFor="value-digest" layout="compact"><Switch id="value-digest" defaultChecked /></SettingsRow>
+        </SettingsSection>
+      </div>
+    </div>
+  );
+}
+
 const meta = {
   title: "Primitives/Settings",
   component: SettingsSection,
@@ -265,3 +299,6 @@ export const Bounded: Story = { render: () => <SettingsPage className="mx-auto m
 
 /** The promoted Field: hint, info tip with an aside action, a live error, and a status. */
 export const Fields: Story = { render: () => <FieldsExample /> };
+
+/** Values preserve ReactNode content and coexist with controls; only value rows stack in a narrow compact layout. */
+export const Values: Story = { render: () => <SettingsValuesExample /> };

package/src/primitives/settings.tsx

@@ -67,12 +67,16 @@ export interface SettingsRowProps {
   onRetry?: () => void;
   /**
    * `inline` (default): text left, control right, stacked below 34rem.
-   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons); a row with a value uses `inline`.
    * `stacked`: the control spans the row under the text (textareas, lists).
    */
   layout?: SettingsRowLayout;
   /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
   disabledReason?: React.ReactNode;
+  /** A read-only value before any children; supplying even an empty value keeps its span. */
+  value?: React.ReactNode;
+  /** Use mono for the value, such as an identifier; children keep their own font. */
+  mono?: boolean;
   children?: React.ReactNode;
 }
 
@@ -101,14 +105,16 @@ function describeControl(children: React.ReactNode, htmlFor: string | undefined,
 }
 
 /**
- * One setting: its label, an optional consequence line and its control. The
+ * One setting: its label, an optional consequence line, read-only value and control. The
  * label carries the save status after it; an error or a lock reason replaces
  * the description. Rows inside a {@link SettingsSection} are divided by a
  * hairline and stack when the card is narrower than 34rem.
  */
-export function SettingsRow({
-  id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children,
-}: SettingsRowProps) {
+export function SettingsRow(props: SettingsRowProps) {
+  const {
+    id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, value, mono, children,
+  } = props;
+  const hasValue = Object.hasOwn(props, "value");
   const messageId = htmlFor ? fieldMessageId(htmlFor) : undefined;
   const hasMessage = error != null || disabledReason != null || description != null;
   const control = describeControl(children, htmlFor, hasMessage ? messageId : undefined, error != null);
@@ -120,7 +126,7 @@ export function SettingsRow({
         "grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4",
         SCROLL_OFFSET,
         DIVIDED,
-        ROW_COLUMNS[layout],
+        ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout],
       )}
     >
       <div className="min-w-0">
@@ -142,8 +148,11 @@ export function SettingsRow({
               <div id={messageId} className="mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{description}</div>
             )}
       </div>
-      {control != null && control !== false && (
-        <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout])}>{control}</div>
+      {(hasValue || (control != null && control !== false)) && (
+        <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout])}>
+          {hasValue && <span data-slot="settings-value" className={cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono")}>{value}</span>}
+          {control}
+        </div>
       )}
     </div>
   );