From be663f4e0ccac755ad45336ffb8d832e6e5332ae Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 14:56:14 -0700
Subject: [PATCH] improvement(ui): compose horizontal and credential fields in
 EMCN

---
 .claude/rules/emcn-components.md              |  4 +-
 .cursor/rules/emcn-components.mdc             |  4 +-
 .../[executionId]/resume-page-client.tsx      |  3 +-
 .../client-credential-account-modal.tsx       |  3 +-
 .../mcp-server-form-modal.tsx                 |  3 +-
 .../no-organization-view.tsx                  | 22 +++---
 .../lock-settings-modal.tsx                   |  2 +-
 .../components/chip-input/chip-input.test.tsx |  2 +
 .../components/chip-modal/chip-modal.test.tsx | 63 +++++++++++++++-
 .../src/components/chip-modal/chip-modal.tsx  | 74 +++++++++++++++----
 .../chip-textarea/chip-textarea.tsx           | 16 +++-
 packages/emcn/src/components/index.ts         |  1 +
 12 files changed, 162 insertions(+), 35 deletions(-)

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index 8c8b468d246..0342cadb8cb 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -24,10 +24,10 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
-- **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
+- **`ChipTextarea`** — multi-line sibling. `monospace` for structured text, `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
 - **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
 - **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. `orientation='horizontal'` places a field title beside its control, wraps on narrow surfaces, and keeps error/hint text below the row; vertical is the default. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 75fe49a83e3..9b19e89c154 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -25,10 +25,10 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
-- **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
+- **`ChipTextarea`** — multi-line sibling. `monospace` for structured text, `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
 - **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
 - **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. `orientation='horizontal'` places a field title beside its control, wraps on narrow surfaces, and keeps error/hint text below the row; vertical is the default. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
index bb09919dc63..d032a28cf95 100644
--- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -1020,7 +1020,8 @@ export default function ResumeExecutionPage({
                             placeholder='{"example": "value"}'
                             rows={6}
                             spellCheck={false}
-                            className='min-h-[180px] font-mono'
+                            monospace
+                            className='min-h-[180px]'
                           />
                         </div>
                       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
index d01953901f4..959e9a3e6aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
@@ -275,7 +275,8 @@ function ClientCredentialAccountModalForm({
                     value={value}
                     onChange={(event) => setField(field.id, event.target.value)}
                     placeholder={field.placeholder}
-                    className='min-h-[120px] font-mono'
+                    monospace
+                    className='min-h-[120px]'
                     // Browser spell-check and autofill ship textarea contents to
                     // third-party services — an exfiltration route for a pasted
                     // private key. `ChipModalField type='textarea'` exposes none
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index d1d3ceb4b4c..155a417f5bc 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -763,7 +763,8 @@ export function McpServerFormModal({
               type='button'
               variant='ghost'
               onClick={() => setShowAdvanced((v) => !v)}
-              className='gap-1 self-start py-0 text-small'
+              size='inline'
+              className='gap-1 self-start'
             >
               {showAdvanced ? (
                 <ChevronDown className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
index 82c1009e63d..9e00fc9c38a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -83,18 +83,16 @@ export function NoOrganizationView({
 
             <div>
               <Label htmlFor='orgSlug'>Team URL</Label>
-              <div className='mt-1 flex items-center'>
-                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-3 py-1.5 text-[var(--text-muted)] text-small'>
-                  sim.ai/team/
-                </div>
-                <ChipInput
-                  id='orgSlug'
-                  value={orgSlug}
-                  onChange={(e) => setOrgSlug(e.target.value)}
-                  placeholder='my-team'
-                  className='rounded-l-none'
-                />
-              </div>
+              <ChipInput
+                id='orgSlug'
+                value={orgSlug}
+                onChange={(e) => setOrgSlug(e.target.value)}
+                placeholder='my-team'
+                className='mt-1'
+                startAdornment={
+                  <span className='shrink-0 text-[var(--text-muted)] text-small'>sim.ai/team/</span>
+                }
+              />
             </div>
 
             <div className='flex flex-col gap-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
index e72cdce34ad..694361bc085 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
@@ -95,7 +95,7 @@ export function LockSettingsModal({
           <ChipModalField
             key={field.key}
             type='custom'
-            className='flex-row items-center justify-between'
+            orientation='horizontal'
             title={
               <span className='inline-flex items-center gap-1.5'>
                 {field.label}
diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
index a1d70082ff6..542ce50f165 100644
--- a/packages/emcn/src/components/chip-input/chip-input.test.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -95,6 +95,7 @@ describe('chip form controls', () => {
         <ChipTextarea
           ref={textareaRef}
           name='description'
+          monospace
           rows={3}
           className='min-h-[80px]'
           defaultValue='Description'
@@ -109,6 +110,7 @@ describe('chip form controls', () => {
     expect(input.parentElement?.className).toContain('h-9')
     expect(input.parentElement?.className).toContain('border-[var(--text-error)]')
     expect(textareaRef.current?.rows).toBe(3)
+    expect(textareaRef.current?.className).toContain('font-mono')
     expect(textareaRef.current?.className).toContain('min-h-[80px]')
     act(() => container?.querySelector('button')?.click())
     expect(submit).not.toHaveBeenCalled()
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.test.tsx b/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
index 69f8ab0793e..d741405d056 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
@@ -280,6 +280,61 @@ describe('ChipModalBody', () => {
   })
 })
 
+describe('ChipModalField composition', () => {
+  it.each(['vertical', 'horizontal'] as const)(
+    'retains labels and feedback in %s fields',
+    (orientation) => {
+      mount(
+        <ChipModalField
+          type='input'
+          title='Name'
+          titleActions={<button type='button'>Help</button>}
+          orientation={orientation}
+          value='Review'
+          onChange={() => {}}
+          required
+          error='Enter a valid name'
+          hint='Hidden while invalid'
+        />
+      )
+      const input = container!.querySelector('input')!
+      expect(input.labels?.[0].textContent).toBe('Name*')
+      expect(input.getAttribute('aria-required')).toBe('true')
+      expect(input.getAttribute('aria-invalid')).toBe('true')
+      const error = document.getElementById(input.getAttribute('aria-describedby')!)!
+      expect(error.textContent).toBe('Enter a valid name')
+      expect(error.getAttribute('role')).toBe('alert')
+      expect(container!.textContent).not.toContain('Hidden while invalid')
+      expect(input.labels?.[0].contains(buttonByText('Help'))).toBe(false)
+      act(() => input.focus())
+      expect(document.activeElement).toBe(input)
+    }
+  )
+
+  it('forwards monospace and height settings to a labeled textarea', () => {
+    mount(
+      <ChipModalField
+        type='textarea'
+        title='JSON'
+        value='{}'
+        onChange={() => {}}
+        mono
+        minHeight={120}
+        rows={4}
+        hint='Enter JSON'
+      />
+    )
+    const textarea = container!.querySelector('textarea')!
+    expect(textarea.labels?.[0].textContent).toBe('JSON')
+    expect(textarea.className).toContain('font-mono')
+    expect(textarea.style.minHeight).toBe('120px')
+    expect(textarea.rows).toBe(4)
+    expect(document.getElementById(textarea.getAttribute('aria-describedby')!)?.textContent).toBe(
+      'Enter JSON'
+    )
+  })
+})
+
 describe('ChipModalField file actions', () => {
   it('names each upload action with its field title', () => {
     mount(
@@ -501,7 +556,13 @@ describe('ChipModal default actions', () => {
       <ChipModal open onOpenChange={() => {}} srTitle='Visible action'>
         <ChipModalHeader onClose={() => {}}>Visible action</ChipModalHeader>
         <ChipModalBody>
-          <ChipModalField type='input' title='Name' value='Canary' onChange={() => {}} />
+          <ChipModalField
+            type='input'
+            title='Name'
+            orientation='horizontal'
+            value='Canary'
+            onChange={() => {}}
+          />
         </ChipModalBody>
         <div aria-hidden='true'>
           <ChipModalFooter
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 9bedfd58d4e..63fa7408ffd 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -39,6 +39,7 @@
 'use client'
 
 import * as React from 'react'
+import { cva } from 'class-variance-authority'
 import { Eye, EyeOff, Loader, X } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Button } from '../button/button'
@@ -524,8 +525,10 @@ export type ChipModalDropdownOption = ChipSelectOption
  * Props shared by every {@link ChipModalField} branch.
  */
 interface ChipModalFieldBaseProps {
-  /** Field title rendered above the control. Replaces the legacy `label` slot. */
+  /** Field title rendered above or beside the control. Replaces the legacy `label` slot. */
   title: React.ReactNode
+  /** Places the title beside the control, wrapping when space is limited. Defaults to vertical. */
+  orientation?: 'vertical' | 'horizontal'
   /** Optional field actions beside the title, outside its label. */
   titleActions?: React.ReactNode
   /**
@@ -765,6 +768,21 @@ export type ChipModalFieldProps =
   | ChipModalEmailsFieldProps
   | ChipModalCustomFieldProps
 
+/** Shared field orientation and gutter geometry. */
+const chipModalFieldVariants = cva('gap-y-[9px]', {
+  variants: {
+    orientation: {
+      vertical: 'flex flex-col',
+      horizontal: 'flex flex-wrap items-center justify-between gap-x-3',
+    },
+    flush: {
+      true: 'px-0',
+      false: 'px-2',
+    },
+  },
+  defaultVariants: { orientation: 'vertical', flush: false },
+})
+
 /**
  * Declarative labeled field row. The `type` discriminator selects which
  * control renders, and the field owns all chrome internally — consumers
@@ -781,7 +799,17 @@ function ChipModalField(props: ChipModalFieldProps) {
   const id = React.useId()
   const errorId = `${id}-error`
   const hintId = `${id}-hint`
-  const { title, titleActions, required, error, hint, flush = false, className } = props
+  const {
+    title,
+    titleActions,
+    required,
+    error,
+    hint,
+    flush = false,
+    orientation = 'vertical',
+    className,
+  } = props
+  const horizontal = orientation === 'horizontal'
   const associatesLabel =
     props.type === 'input' ||
     props.type === 'email' ||
@@ -803,28 +831,47 @@ function ChipModalField(props: ChipModalFieldProps) {
     </Label>
   )
 
+  const titleContent = titleActions ? (
+    <div className='flex flex-wrap items-center justify-between gap-2'>
+      {label}
+      {titleActions}
+    </div>
+  ) : (
+    label
+  )
+  const control = renderChipModalControl(props, id, errorId, hintId)
+
   return (
     <div
-      className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}
+      className={cn(chipModalFieldVariants({ orientation, flush }), className)}
       data-chip-modal-enter-owner={
         props.type === 'custom' && props.submitOnEnter === false ? '' : undefined
       }
     >
-      {titleActions ? (
-        <div className='flex flex-wrap items-center justify-between gap-2'>
-          {label}
-          {titleActions}
-        </div>
+      {horizontal ? (
+        <>
+          <div className='min-w-0 flex-[1_1_10rem] [overflow-wrap:anywhere]'>{titleContent}</div>
+          <div className='min-w-0 max-w-full'>{control}</div>
+        </>
       ) : (
-        label
+        <>
+          {titleContent}
+          {control}
+        </>
       )}
-      {renderChipModalControl(props, id, errorId, hintId)}
       {error && props.type !== 'emails' ? (
-        <p id={errorId} role='alert' className={CHIP_MODAL_FIELD_ERROR_CLASS}>
+        <p
+          id={errorId}
+          role='alert'
+          className={cn(CHIP_MODAL_FIELD_ERROR_CLASS, horizontal && 'basis-full')}
+        >
           {error}
         </p>
       ) : hint ? (
-        <p id={hintId} className='text-[var(--text-muted)] text-caption'>
+        <p
+          id={hintId}
+          className={cn('text-[var(--text-muted)] text-caption', horizontal && 'basis-full')}
+        >
           {hint}
         </p>
       ) : null}
@@ -903,7 +950,7 @@ function renderChipModalControl(
           disabled={props.disabled}
           viewOnly={props.viewOnly}
           resizable={props.resizable}
-          className={props.mono ? 'font-mono' : undefined}
+          monospace={props.mono}
           style={props.minHeight ? { minHeight: props.minHeight } : undefined}
           {...aria}
         />
@@ -1815,6 +1862,7 @@ export {
   ChipModalBody,
   ChipModalError,
   ChipModalField,
+  chipModalFieldVariants,
   ChipModalFooter,
   ChipModalHeader,
   ChipModalPromptBody,
diff --git a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
index 8f891a11031..471d3eed28a 100644
--- a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
+++ b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
@@ -27,6 +27,8 @@ export interface ChipTextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
   /** Marks the field invalid; swaps the border to the error token. */
   error?: boolean
+  /** Uses the shared monospace font for JSON, keys, and other structured text. */
+  monospace?: boolean
   /** Allows vertical user resizing. Off by default. */
   resizable?: boolean
   /**
@@ -41,7 +43,18 @@ export interface ChipTextareaProps
 
 /** Forwards its ref to the underlying `<textarea>`, exactly like a native textarea. */
 export const ChipTextarea = React.forwardRef<HTMLTextAreaElement, ChipTextareaProps>(
-  ({ className, error, resizable = false, viewOnly = false, readOnly, ...props }, ref) => (
+  (
+    {
+      className,
+      error,
+      monospace = false,
+      resizable = false,
+      viewOnly = false,
+      readOnly,
+      ...props
+    },
+    ref
+  ) => (
     <textarea
       ref={ref}
       readOnly={viewOnly || readOnly}
@@ -49,6 +62,7 @@ export const ChipTextarea = React.forwardRef<HTMLTextAreaElement, ChipTextareaPr
         'w-full px-2 py-1.5 disabled:cursor-not-allowed disabled:opacity-50',
         chipFieldSurfaceClass,
         chipFieldTextClass,
+        monospace && 'font-mono',
         error ? 'border-[var(--text-error)]' : undefined,
         resizable ? 'resize-y' : 'resize-none',
         viewOnly && 'cursor-default',
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index b194122e642..a1d88b15c9c 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -96,6 +96,7 @@ export {
   type ChipModalTab,
   ChipModalTabs,
   type ChipModalTabsProps,
+  chipModalFieldVariants,
   focusChipModalContent,
 } from './chip-modal/chip-modal'
 export { ChipSelect, type ChipSelectOption, type ChipSelectProps } from './chip-select/chip-select'