@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Prompt/Prompt.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Prompt",
-  "description": "Multi-line input with toolbar for AI/chat interfaces",
+  "description": "Collects multi-line input for AI and chat interfaces.",
   "category": "ai",
-  "tags": [
-    "prompt",
-    "chat",
-    "ai",
-    "input",
-    "textarea",
-    "form"
-  ],
+  "tags": ["prompt", "chat", "ai", "input", "textarea", "form"],
   "status": "stable",
   "sourcePath": "src/components/Prompt/index.tsx",
   "exportName": "Prompt",
@@ -27,8 +20,8 @@
     "maxRows: number (default: 8)",
     "autoResize: boolean (default: true)",
     "submitOnEnter: boolean (default: true)",
-    "variant: default|fixed|sticky (default: default)",
-    "appearance: panel|seamless (default: panel)",
+    "placement: inline|fixed|sticky (default: inline)",
+    "variant: outline|ghost (default: outline)",
     "onFiles: function",
     "accept: string"
   ],
@@ -101,16 +94,12 @@
       "default": "true",
       "required": false
     },
-    "variant": {
+    "placement": {
       "type": "enum",
-      "description": "Visual/positioning variant",
-      "default": "default",
+      "description": "Where the card sits: inline in the flow, fixed to the viewport bottom, or sticky to the content area (offset by --fui-prompt-inset-left)",
+      "default": "inline",
       "required": false,
-      "values": [
-        "default",
-        "fixed",
-        "sticky"
-      ]
+      "values": ["inline", "fixed", "sticky"]
     },
     "onFiles": {
       "type": "function",
@@ -122,42 +111,35 @@
       "description": "accept filter for the attach button's picker, e.g. \"image/*\"",
       "required": false
     },
-    "appearance": {
+    "variant": {
       "type": "enum",
-      "description": "How the card is divided up. \"panel\" keeps the toolbar as a filled footer under a rule; \"seamless\" makes the whole card one writing surface with the controls floating on it.",
-      "default": "panel",
+      "description": "Card chrome. \"outline\" keeps the toolbar as a filled footer under a rule; \"ghost\" makes the whole card one writing surface with the controls floating on it.",
+      "default": "outline",
       "required": false,
-      "values": [
-        "panel",
-        "seamless"
-      ]
+      "values": ["outline", "ghost"]
     }
   },
   "usage": {
     "when": [
-      "Building chat or AI assistant interfaces",
-      "Need multi-line input with submit action",
-      "Require toolbar with actions like attachments or model selection"
+      "Chat and AI assistant interfaces",
+      "Multi-line input with a submit action",
+      "Toolbars carrying attachments or a model picker"
     ],
     "whenNot": [
-      "Simple single-line text input (use Input)",
-      "Basic multi-line without toolbar (use Textarea)",
-      "Search-only interface (use Input with search variant)"
+      "Single-line text (use Input)",
+      "Multi-line with no toolbar (use Textarea)",
+      "Search-only fields (use Input with the search variant)"
     ],
     "guidelines": [
-      "Always provide an onSubmit handler",
-      "Use loading state during API calls",
-      "Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)",
-      "Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior",
-      "Use appearance=\"seamless\" for agent composers where the controls should float on the writing surface rather than sit in a footer",
-      "Seamless controls share the dense 32px token scale with body-sized labels and standard glyphs so mixed Prompt.Select, Prompt.Attach and Prompt.Submit rows remain optically aligned",
-      "Seamless secondary controls keep transparent hover and open states so they read as inline tools; only Prompt.Submit carries a persistent filled shape",
-      "Seamless Prompt.Submit mirrors the trailing ink gutter established by Prompt.Attach at the leading edge",
-      "Prompt.Submit uses a neutral inverse surface by default so the primary action stays visible without consuming semantic brand color",
-      "Use Prompt.ModeButton for a setting you toggle and Prompt.Select for one you pick from a list",
-      "Wire onFiles once: the attach button, pasting a screenshot and dropping on the card all go through it",
-      "Render Prompt.Attachments above Prompt.Textarea — attachments are part of the message, not a setting on it",
-      "Consider showing usage/token limits for AI contexts"
+      "Always pass an onSubmit handler",
+      "Set loading while the request is in flight to block duplicate sends",
+      "Prompt.Textarea forwards native textarea props and composes your own handlers",
+      "variant=\"ghost\" floats the controls on the writing surface instead of a footer",
+      "Seamless secondary controls stay transparent; only Prompt.Submit keeps a filled shape",
+      "Prompt.Submit uses a neutral inverse surface, never semantic brand color",
+      "Prompt.ModeButton toggles a setting; Prompt.Select picks one from a list",
+      "Wire onFiles once — the attach button, paste, and drop all route through it",
+      "Render Prompt.Attachments above Prompt.Textarea; they are part of the message"
     ],
     "accessibility": [
       "Enter submits, Shift+Enter for newline",
@@ -168,32 +150,37 @@
   "examples": [
     {
       "name": "Basic",
-      "description": "Simple prompt with submit button",
+      "description": "A textarea and a submit button, nothing else.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions />\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "With Actions",
-      "description": "Prompt with attachment and mode buttons",
+      "description": "Attach and mode controls sit to the left of submit.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "With Usage",
-      "description": "Shows token usage indicator",
+      "description": "A quota readout sits beside the submit button.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton active>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "Agent Composer",
-      "description": "Seamless surface with the scope of the run chosen on the toolbar",
-      "code": "<Prompt\n  appearance=\"seamless\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
+      "description": "Controls float on the writing surface instead of a footer.",
+      "code": "<Prompt\n  variant=\"ghost\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
+    },
+    {
+      "name": "With Attachments",
+      "description": "Staged files list above the text they belong to.",
+      "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Attachments\n    items={[\n      { id: '1', name: 'findings-export.csv', size: 20480 },\n      { id: '2', name: 'dashboard.png', size: 153600 },\n    ]}\n    onRemove={(id) => console.log(id)}\n  />\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "Loading State",
-      "description": "During API submission",
+      "description": "Input locks and submit spins while the request runs.",
       "code": "<Prompt\n  onSubmit={(value) => console.log(value)}\n  loading\n  defaultValue=\"Tell me about the weather...\"\n>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive prompt",
+      "description": "Everything dims and stops responding to input.",
       "code": "<Prompt onSubmit={(value) => console.log(value)} disabled>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     }
   ],
@@ -220,10 +207,7 @@
       "submitOnEnter: boolean - Enter key behavior (default: true)",
       "Prompt.Textarea accepts native textarea props and optional aria-label override"
     ],
-    "a11yRules": [
-      "A11Y_TEXTAREA_LABEL",
-      "A11Y_BUTTON_LABEL"
-    ]
+    "a11yRules": ["A11Y_TEXTAREA_LABEL", "A11Y_BUTTON_LABEL"]
   },
   "ai": {
     "compositionPattern": "compound",

package/src/components/Prompt/Prompt.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/target" as target;
@@ -29,7 +30,7 @@
 
   // Gradient layer (behind everything)
   &::before {
-    inset: -1px;
+    inset: calc(-1 * var(--fui-stroke-hairline, #{$fui-stroke-hairline}));
     z-index: 0;
     background: conic-gradient(
       from var(--beam-angle, 0deg) at 50% 50%,
@@ -42,14 +43,16 @@
       transparent 75%,
       transparent 100%
     );
-    animation: beam-rotate 4s linear infinite;
-    opacity: 0.6;
+    // Ambient loop: twice the shimmer beat, kept on the token scale.
+    animation: beam-rotate calc(var(--fui-duration-shimmer, #{$fui-duration-shimmer}) * 2) linear
+      infinite;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
     transition: opacity var(--fui-transition-normal, $fui-transition-normal);
   }
 
   // Mask layer — covers the interior, leaving only the 1px border visible
   &::after {
-    inset: 1px;
+    inset: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     z-index: 1;
     background: var(--fui-bg-elevated, $fui-bg-elevated);
   }
@@ -65,12 +68,13 @@
   }
 
   &[data-disabled] {
-    opacity: 0.5;
+    @include disabled-state;
+
     pointer-events: none;
 
     &::before {
       animation-play-state: paused;
-      opacity: 0.2;
+      opacity: calc(var(--fui-opacity-disabled, #{$fui-opacity-disabled}) * var(--fui-opacity-disabled, #{$fui-opacity-disabled}));
     }
   }
 }
@@ -90,7 +94,7 @@
   inherits: false;
 }
 
-// Fixed variant - for viewport-fixed prompts (centered to page)
+// Fixed placement - for viewport-fixed prompts (centered to page)
 .fixed {
   position: fixed;
   bottom: var(--fui-space-4, $fui-space-4);
@@ -102,7 +106,7 @@
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 }
 
-// Sticky variant - for content-area fixed prompts (accounts for sidebar)
+// Sticky placement - for content-area fixed prompts (accounts for sidebar)
 // Use --fui-prompt-inset-left CSS variable to offset from sidebar
 .sticky {
   position: fixed;
@@ -122,7 +126,7 @@
 }
 
 // ============================================
-// Seamless appearance
+// Ghost variant
 // ============================================
 
 // One continuous writing surface instead of a field with a footer.
@@ -133,12 +137,13 @@
 // resting on it — which is what makes the text you are writing the only thing
 // with any weight. Each selector below is one class deeper than the rule it
 // replaces, so this wins wherever the stylesheet happens to land.
+// (`variant="ghost"`; the default `outline` card is the rules above.)
 //
 // One gutter runs down the card. `--_gutter` is the distance from the card's
 // edge to the ink of everything in it, and every child is padded from it
 // rather than given a number of its own, so the placeholder, the first glyph
 // in the toolbar and any attachment chip all sit on the same line.
-.seamless {
+.ghost {
   --_gutter: var(--fui-space-3, #{$fui-space-3});
   // Every band is inset by its own children's padding, so what lands on the
   // gutter is the ink — the first character of the placeholder, the first glyph
@@ -152,7 +157,7 @@
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
 
   // The beam draws a 1px animated border by painting a gradient and masking
-  // out everything but the edge. Seamless has no edge to draw, so both layers
+  // out everything but the edge. Ghost has no edge to draw, so both layers
   // go and the card paints its own surface instead of borrowing the mask's.
   &::before,
   &::after {
@@ -168,7 +173,7 @@
   .toolbar {
     background-color: transparent;
     border-top: none;
-    padding: 0 calc(var(--_gutter) - var(--_control-padding)) var(--_gutter);
+    padding: var(--fui-raw-space-0, #{measurements.raw-space(0)}) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_control-padding, var(--fui-space-2, #{$fui-space-2}))) var(--_gutter, var(--fui-space-3, #{$fui-space-3}));
   }
 
   // The message is the content of the card, not a field in it. The bottom is
@@ -176,11 +181,11 @@
   // footer under it, and the top is tight for the same reason when a scope
   // band sits above.
   .textarea {
-    padding: var(--_gutter) var(--_gutter) var(--fui-space-1, $fui-space-1);
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) var(--_gutter, var(--fui-space-3, #{$fui-space-3})) var(--fui-space-1, $fui-space-1);
   }
 
   .attachments {
-    padding: var(--_gutter) calc(var(--_gutter) - var(--_chip-padding)) 0;
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_chip-padding, var(--fui-space-1, #{$fui-space-1}))) var(--fui-raw-space-0, #{measurements.raw-space(0)});
     gap: var(--fui-space-1, $fui-space-1);
   }
 
@@ -191,22 +196,22 @@
     padding-top: var(--fui-space-1, $fui-space-1);
   }
 
-  // In a panel the tabs are a strip the card is docked to, so they are centred
-  // and bordered like a folder tab. Seamless has no card edge for them to dock
+  // In an outline card the tabs are a strip the card is docked to, so they are centred
+  // and bordered like a folder tab. Ghost has no card edge for them to dock
   // against, so they become the top band of the one surface: left-aligned on
   // the gutter with the rest of it, and stripped of the chrome that only made
   // sense as an edge.
   .tabs {
-    margin-bottom: 0;
+    margin-bottom: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     justify-content: flex-start;
-    padding: var(--_gutter) calc(var(--_gutter) - var(--_control-padding)) 0;
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_control-padding, var(--fui-space-2, #{$fui-space-2}))) var(--fui-raw-space-0, #{measurements.raw-space(0)});
   }
 
   .tabsInner {
     background-color: transparent;
     border: none;
-    border-radius: 0;
-    padding: 0;
+    border-radius: var(--fui-radius-none, #{$fui-radius-none});
+    padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     gap: var(--fui-space-1, $fui-space-1);
   }
 
@@ -222,7 +227,7 @@
   // the placeholder above it starts, and costs only a wider hover.
   .attach {
     width: auto;
-    padding-inline: var(--_control-padding);
+    padding-inline: var(--_control-padding, var(--fui-space-2, #{$fui-space-2}));
 
     svg {
       width: var(--fui-icon-md, $fui-icon-md);
@@ -230,7 +235,7 @@
     }
   }
 
-  // Labels and glyphs share the body scale inside a seamless composer. The
+  // Labels and glyphs share the body scale inside a ghost composer. The
   // trigger still truncates at its cap, but no longer looks like caption text
   // floating between larger attach and submit affordances.
   .select,
@@ -287,7 +292,7 @@
   // padding. Give the filled Submit shape the same inset at the trailing edge
   // so the two visible affordances balance across the toolbar.
   .submit {
-    margin-inline-end: var(--_control-padding);
+    margin-inline-end: var(--_control-padding, var(--fui-space-2, #{$fui-space-2}));
   }
 }
 
@@ -299,6 +304,8 @@
   @include button-reset;
   @include typography.role("body-compact");
 
+  // button-reset marks pressables select-none; typed text must stay selectable.
+  user-select: text;
   display: block;
   width: 100%;
   min-height: var(--fui-input-height, $fui-input-height);
@@ -340,9 +347,10 @@
   display: inline-flex;
   gap: var(--fui-space-px, $fui-space-px);
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) 0 0;
-  padding: var(--fui-space-0-75, $fui-space-0-75) var(--fui-space-0-75, $fui-space-0-75) 0;
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-space-0-75, $fui-space-0-75) var(--fui-space-0-75, $fui-space-0-75) var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-bottom: none;
 }
 
@@ -351,7 +359,8 @@
   @include action.base;
   @include action.size("sm");
 
-  border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0 0;
+  border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -361,11 +370,14 @@
   &:hover {
     color: var(--fui-text-primary, $fui-text-primary);
   }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
 }
 
 .tabButtonActive {
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  color: var(--fui-text-primary, $fui-text-primary);
+  @include segmented-selection;
 }
 
 // ============================================
@@ -379,7 +391,7 @@
   gap: var(--fui-space-2, $fui-space-2);
   padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // ============================================
@@ -453,8 +465,7 @@
 }
 
 .modeButtonActive {
-  color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  @include segmented-selection;
 }
 
 // ============================================
@@ -486,11 +497,6 @@
     background-color: var(--fui-bg-active, $fui-bg-active);
   }
 
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   svg {
     @include action.glyph("sm");
   }
@@ -504,8 +510,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--fui-space-1, $fui-space-1);
-  margin: 0;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3) 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3) var(--fui-raw-space-0, #{measurements.raw-space(0)});
   list-style: none;
 }
 
@@ -520,14 +526,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
-  height: var(--_chip-height);
+  height: var(--_chip-height, #{action.track("sm")});
   max-width: layout.measure("composer-item");
   padding-inline: var(--fui-space-1, $fui-space-1);
   // Outlined rather than filled. A chip sits on whatever surface the prompt is
   // using, and on an elevated card the raised fill is the same value as the
   // card itself — so the object would disappear exactly where it is most
   // likely to be used. An edge reads on any of them.
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
@@ -539,8 +545,8 @@
 // chip's height less the padding, which keeps it square without a second
 // number to keep in step.
 .attachmentThumb {
-  width: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
-  height: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
+  width: calc(var(--_chip-height, #{action.track("sm")}) - var(--fui-space-1, #{$fui-space-1}));
+  height: calc(var(--_chip-height, #{action.track("sm")}) - var(--fui-space-1, #{$fui-space-1}));
   flex-shrink: 0;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   object-fit: cover;
@@ -637,11 +643,6 @@
     background-color: var(--fui-text-tertiary, #{$fui-text-tertiary});
   }
 
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   svg {
     @include action.glyph("md");
   }

package/src/components/Prompt/index.tsx

@@ -9,9 +9,9 @@ import { Select, type SelectOption, type SelectValue } from '../Select';
 // Types
 // ============================================
 
-export type PromptVariant = 'default' | 'fixed' | 'sticky';
+export type PromptPlacement = 'inline' | 'fixed' | 'sticky';
 
-export type PromptAppearance = 'panel' | 'seamless';
+export type PromptVariant = 'outline' | 'ghost';
 
 export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'defaultValue'> {
   children: React.ReactNode;
@@ -43,13 +43,15 @@ export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onFiles?: (files: File[]) => void;
   /** `accept` for the attach button's picker, e.g. `"image/*"`. */
   accept?: string;
-  /** Visual variant - "fixed" for bottom-fixed elevated prompt */
+  /** Where the card sits: `inline` in the flow, `fixed` to the viewport bottom,
+   * `sticky` to the content area (offset by `--fui-prompt-inset-left`).
+   * @default "inline" */
+  placement?: PromptPlacement;
+  /** Card chrome. `outline` keeps the toolbar as a filled footer under a rule;
+   * `ghost` makes the whole card one writing surface with the controls floating
+   * on it — the shape most agent composers use.
+   * @default "outline" */
   variant?: PromptVariant;
-  /** How the card is divided up. `panel` keeps the toolbar as a filled footer
-   * under a rule; `seamless` makes the whole card one writing surface with the
-   * controls floating on it — the shape most agent composers use.
-   * @default "panel" */
-  appearance?: PromptAppearance;
 }
 
 export interface PromptTextareaProps extends Omit<
@@ -307,8 +309,8 @@ function PromptRoot({
   maxRows = 8,
   autoResize = true,
   submitOnEnter = true,
-  variant = 'default',
-  appearance = 'panel',
+  placement = 'inline',
+  variant = 'outline',
   onFiles,
   accept,
   className,
@@ -386,9 +388,9 @@ function PromptRoot({
 
   const classes = [
     styles.prompt,
-    variant === 'fixed' && styles.fixed,
-    variant === 'sticky' && styles.sticky,
-    appearance === 'seamless' && styles.seamless,
+    placement === 'fixed' && styles.fixed,
+    placement === 'sticky' && styles.sticky,
+    variant === 'ghost' && styles.ghost,
     dragging && styles.dragging,
     disabled && styles.disabled,
     loading && styles.loading,
@@ -403,8 +405,8 @@ function PromptRoot({
         className={classes}
         data-disabled={disabled || undefined}
         data-loading={loading || undefined}
+        data-placement={placement}
         data-variant={variant}
-        data-appearance={appearance}
         data-dragging={dragging || undefined}
       >
         {children}
@@ -780,7 +782,7 @@ function PromptSubmit({
       {loading ? (
         <Loading
           size="sm"
-          variant="spinner"
+          kind="spinner"
           color="current"
           label="Submitting"
           className={styles.submitSpinner}