@tangle-network/ui 11.43.0 → 11.44.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.44.0
+
+### Minor Changes
+
+- e19c28a: Add read-only `value` and optional `mono` presentation to SettingsRow while preserving children, the public props interface, and control message wiring. Value rows use the inline layout and stack in narrow cards; rows without a value keep their existing layout.
+
 ## 11.43.0
 
 ### Minor Changes

package/dist/primitives/settings.d.ts

@@ -24,21 +24,25 @@ 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;
 }
 /**
- * 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 declare function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout, disabledReason, children }: SettingsRowProps): React.JSX.Element;
+export declare function SettingsRow(props: SettingsRowProps): React.JSX.Element;
 export interface SettingsSectionProps {
   /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
   id: string;

package/dist/primitives/settings.js

@@ -60,18 +60,20 @@ function describeControl(children, htmlFor, messageId, invalid) {
 	});
 }
 /**
-* 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.
 */
-function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children }) {
+function SettingsRow(props) {
+	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) : void 0;
 	const control = describeControl(children, htmlFor, error != null || disabledReason != null || description != null ? messageId : void 0, error != null);
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		"data-layout": layout,
-		className: cn("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]),
+		className: cn("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[hasValue && layout === "compact" ? "inline" : layout]),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -114,9 +116,13 @@ function SettingsRow({ id, label, description, info, htmlFor, status, error, onR
 				className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
 				children: description
 			})]
-		}), control != null && control !== false && /* @__PURE__ */ jsx("div", {
-			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout]),
-			children: control
+		}), (hasValue || control != null && control !== false) && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout]),
+			children: [hasValue && /* @__PURE__ */ jsx("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"),
+				children: value
+			}), control]
 		})]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.43.0",
+  "version": "11.44.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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>
   );