@fungi.computer/caps 0.3.1 → 0.4.0

package/README.md

@@ -72,7 +72,7 @@ export function NoteComposer() {
       <Composer
         input={
           <input
-            className="input join-item w-full"
+            className="input w-full"
             value={draft}
             onChange={(event) => setDraft(event.target.value)}
             aria-label="Note"
@@ -663,9 +663,12 @@ compose, so color belongs in `variant` or an extra daisyUI class.
 
 ### Composer with an async submit
 
-`Composer` is a layout block. Its input and action are your controls, and so are
-their labels, disabled state, keyboard behaviour and effects. An avatar or other
-leading content goes in the `leading` slot as any React node.
+`Composer` is a layout block: one surface with optional `attachments` on top,
+your `input` typed straight onto the host region, and a bottom row of `toolbar`
+controls with the `action` at its end. It draws no box of its own; the host
+region is the field. Every slot is your control, and so are its labels, disabled
+state, keyboard behaviour and effects. A composer's send key is `SendAction`,
+which turns into a stop key while work runs.
 
 ```tsx
 import { useState, type FormEvent } from "react";
@@ -697,7 +700,7 @@ export function PromptComposer({
       <Composer
         input={
           <input
-            className="input join-item w-full"
+            className="input w-full"
             value={value}
             onChange={(event) => setValue(event.target.value)}
             aria-label="Prompt"
@@ -720,7 +723,7 @@ export function PromptComposer({
 ```
 
 `submit` is your effect. It can call an API, enqueue work or do something local.
-Caps only joins the controls.
+Caps only lays out the controls.
 
 ### Window
 

package/dist/blocks/composer.d.ts

@@ -1,23 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 /** Props accepted by Composer. */
 export type ComposerProps = HTMLAttributes<HTMLDivElement> & {
-    /** The caller-owned primary input control. */
+    /** The caller-owned field, typed into directly: the surface is the field. */
     input: ReactNode;
-    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    /** The caller-owned key at the end of the bottom row, such as a SendAction. */
     action?: ReactNode;
-    /** Optional caller-owned leading slot, such as an avatar. */
-    leading?: ReactNode;
-    /** Classes for the joined row; useful when the host exposes a busy state. */
-    rowClassName?: string;
+    /** Caller-owned controls and readouts along the bottom edge, before the action. */
+    toolbar?: ReactNode;
+    /** Caller-owned items riding with the draft, shown above the text. */
+    attachments?: ReactNode;
 };
-/** Layout and slots only. It never assigns action-control semantics. */
+/**
+ * One composer surface: attachments, then the text, then a slim row along the
+ * bottom edge holding the toolbar and, at its end, the action. It draws no box
+ * of its own: the host region is the field. Layout and slots only; it never
+ * assigns action-control semantics.
+ */
 export declare const Composer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /** The caller-owned primary input control. */
+    /** The caller-owned field, typed into directly: the surface is the field. */
     input: ReactNode;
-    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    /** The caller-owned key at the end of the bottom row, such as a SendAction. */
     action?: ReactNode;
-    /** Optional caller-owned leading slot, such as an avatar. */
-    leading?: ReactNode;
-    /** Classes for the joined row; useful when the host exposes a busy state. */
-    rowClassName?: string;
+    /** Caller-owned controls and readouts along the bottom edge, before the action. */
+    toolbar?: ReactNode;
+    /** Caller-owned items riding with the draft, shown above the text. */
+    attachments?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/composer.js

@@ -1,13 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-/** Layout and slots only. It never assigns action-control semantics. */
-export const Composer = forwardRef(function Composer({ action, className, input, leading, rowClassName, ...rootProps }, ref) {
-    return (_jsx("div", { ...rootProps, ref: ref, className: [
-            "caps-composer flex min-w-0 flex-1 items-end gap-sm",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: _jsxs("div", { className: ["join w-full p-2xs", rowClassName]
-                .filter(Boolean)
-                .join(" "), children: [leading, input, action] }) }));
+import { cn } from "../lib/cn.js";
+/**
+ * One composer surface: attachments, then the text, then a slim row along the
+ * bottom edge holding the toolbar and, at its end, the action. It draws no box
+ * of its own: the host region is the field. Layout and slots only; it never
+ * assigns action-control semantics.
+ */
+export const Composer = forwardRef(function Composer({ action, attachments, className, input, toolbar, ...rootProps }, ref) {
+    return (_jsxs("div", { ...rootProps, ref: ref, className: cn("caps-composer", className), children: [attachments === undefined ? null : (_jsx("div", { className: "caps-composer-attachments", children: attachments })), _jsx("div", { className: "caps-composer-input", children: input }), toolbar === undefined && action === undefined ? null : (_jsxs("div", { className: "caps-composer-bar", children: [_jsx("div", { className: "caps-composer-toolbar", children: toolbar }), action] }))] }));
 });

package/dist/blocks/faq-chat.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useRef, useState, } from "react";
 import { Button } from "../components/button.js";
 import { Input } from "../components/input.js";
+import { InputGroup } from "../components/input-group.js";
 import { cn } from "../lib/cn.js";
-import { Composer } from "./composer.js";
 function words(text) {
     return text.toLowerCase().match(/[a-z0-9$]+/g) ?? [];
 }
@@ -71,7 +71,7 @@ export const FaqChat = forwardRef(function FaqChat({ avatar, className, entries,
     }
     return (_jsxs("section", { ...rootProps, "aria-labelledby": titleId, className: cn("caps-faq-chat", className), ref: ref, children: [_jsxs("header", { className: "caps-faq-chat-header", children: [avatar, _jsxs("div", { className: "caps-faq-chat-heading", children: [_jsx("p", { className: "caps-faq-chat-title", id: titleId, children: title }), note ? _jsx("p", { className: "caps-faq-chat-note", children: note }) : null] })] }), _jsxs("div", { "aria-live": "polite", className: "caps-faq-chat-log", ref: logRef, role: "log", children: [_jsx("div", { className: "caps-faq-chat-agent", children: greeting }), turns.map((turn) => turn.speaker === "user" ? (_jsx("p", { className: "caps-faq-chat-user", children: turn.text }, turn.key)) : (_jsxs("div", { className: "caps-faq-chat-agent", children: [turn.answer, turn.actions ? (_jsx("div", { className: "caps-faq-chat-actions", children: turn.actions })) : null] }, turn.key)))] }), _jsx("ul", { "aria-label": "Suggested questions", className: "caps-faq-chat-suggestions", children: entries.map((entry) => (_jsx("li", { children: _jsx(Button, { onClick: () => {
                             ask(entry.question, entry);
-                        }, size: "xs", type: "button", variant: "outline", children: entry.question }) }, entry.id))) }), _jsx("form", { className: "caps-faq-chat-form", onSubmit: submit, children: _jsx(Composer, { action: _jsx(Button, { className: "join-item", type: "submit", children: submitLabel }), input: _jsx(Input, { "aria-label": inputLabel, className: "join-item", onChange: (event) => {
-                            setDraft(event.target.value);
-                        }, placeholder: placeholder, value: draft }) }) })] }));
+                        }, size: "xs", type: "button", variant: "outline", children: entry.question }) }, entry.id))) }), _jsx("form", { className: "caps-faq-chat-form", onSubmit: submit, children: _jsxs(InputGroup, { children: [_jsx(Input, { "aria-label": inputLabel, onChange: (event) => {
+                                setDraft(event.target.value);
+                            }, placeholder: placeholder, value: draft }), _jsx(Button, { type: "submit", children: submitLabel })] }) })] }));
 });

package/dist/components/send-action.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "./button.js";
+import { type KeycapButtonProps } from "./keycap.js";
 /** Where a composer's send action is: nothing to send, ready, or working. */
 export type SendActionState = "empty" | "ready" | "busy";
 /** Props accepted by SendAction. */
@@ -12,13 +12,14 @@ export type SendActionProps = {
     stopLabel?: string;
     /** Glyph size in pixels. */
     iconSize?: number;
-} & Omit<ButtonProps, "children" | "size" | "loading" | "aria-label">;
+} & Omit<KeycapButtonProps, "label" | "icon" | "readout" | "shortcut" | "pressed" | "expanded" | "aria-label">;
 /**
- * A composer's send key. Empty, it rests disabled; given something to send it
- * wakes with a small pop; sending, its arrow launches away and a working
- * indicator (or, with `onStop`, a stop square) takes its place; when the work
- * ends the arrow drops back in. All timing comes from the theme's motion
- * tokens, and reduced motion keeps short fades only.
+ * A composer's one send key, on the Caps keycap. Empty, it rests disabled;
+ * given something to send it wakes with a small pop; sending, its arrow
+ * launches away and a working indicator (or, with `onStop`, a stop square)
+ * takes its place in the same key; when the work ends the arrow drops back
+ * in. It never grows a second button. All timing comes from the theme's
+ * motion tokens, and reduced motion keeps short fades only.
  */
 export declare const SendAction: import("react").ForwardRefExoticComponent<{
     state: SendActionState;
@@ -30,4 +31,4 @@ export declare const SendAction: import("react").ForwardRefExoticComponent<{
     stopLabel?: string;
     /** Glyph size in pixels. */
     iconSize?: number;
-} & Omit<ButtonProps, "aria-label" | "children" | "size" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & Omit<KeycapButtonProps, "aria-label" | "label" | "icon" | "readout" | "expanded" | "pressed" | "shortcut"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/send-action.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUp, Square } from "lucide-react";
 import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, } from "react";
 import { canAnimate, motionEasing, readMotion, } from "../lib/motion.js";
-import { Button } from "./button.js";
+import { KeycapButton } from "./keycap.js";
 import { Loader } from "./loader.js";
+import { cn } from "../lib/cn.js";
 function lift(face, motion) {
     // The arrow launches upward and away: the prompt has gone.
     return face.animate(motion.reduced
@@ -57,13 +58,14 @@ function charge(button, motion) {
     });
 }
 /**
- * A composer's send key. Empty, it rests disabled; given something to send it
- * wakes with a small pop; sending, its arrow launches away and a working
- * indicator (or, with `onStop`, a stop square) takes its place; when the work
- * ends the arrow drops back in. All timing comes from the theme's motion
- * tokens, and reduced motion keeps short fades only.
+ * A composer's one send key, on the Caps keycap. Empty, it rests disabled;
+ * given something to send it wakes with a small pop; sending, its arrow
+ * launches away and a working indicator (or, with `onStop`, a stop square)
+ * takes its place in the same key; when the work ends the arrow drops back
+ * in. It never grows a second button. All timing comes from the theme's
+ * motion tokens, and reduced motion keeps short fades only.
  */
-export const SendAction = forwardRef(function SendAction({ state, onStop, stopLabel = "Stop", iconSize = 20, onClick, disabled, "aria-label": label, ...props }, ref) {
+export const SendAction = forwardRef(function SendAction({ state, onStop, stopLabel = "Stop", iconSize = 20, onClick, disabled, className, tone = "primary", "aria-label": label, ...props }, ref) {
     const node = useRef(null);
     useImperativeHandle(ref, () => node.current);
     const previous = useRef(state);
@@ -92,5 +94,5 @@ export const SendAction = forwardRef(function SendAction({ state, onStop, stopLa
     }, [state]);
     const busy = state === "busy";
     const stoppable = busy && onStop !== undefined;
-    return (_jsx(Button, { ...props, ref: node, "aria-busy": busy ? true : undefined, "aria-label": stoppable ? stopLabel : label, "data-send-state": state, disabled: disabled === true || state === "empty" || (busy && !stoppable), onClick: stoppable ? onStop : onClick, size: "icon", children: _jsxs("span", { className: "caps-send-glyph", "data-state": state, children: [_jsx("span", { "data-glyph": "arrow", children: _jsx(ArrowUp, { "aria-hidden": "true", size: iconSize }) }), _jsx("span", { "data-glyph": "busy", children: onStop === undefined ? (_jsx(Loader, { decorative: true, size: "sm" })) : (_jsx(Square, { "aria-hidden": "true", fill: "currentColor", size: Math.round(iconSize * 0.7) })) })] }) }));
+    return (_jsx(KeycapButton, { ...props, ref: node, className: cn("caps-send-action", className), tone: tone, "aria-busy": busy ? true : undefined, "aria-label": stoppable ? stopLabel : label, "data-send-state": state, disabled: disabled === true || state === "empty" || (busy && !stoppable), onClick: stoppable ? onStop : onClick, label: null, icon: _jsxs("span", { className: "caps-send-glyph", "data-state": state, children: [_jsx("span", { "data-glyph": "arrow", children: _jsx(ArrowUp, { "aria-hidden": "true", size: iconSize }) }), _jsx("span", { "data-glyph": "busy", children: onStop === undefined ? (_jsx(Loader, { decorative: true, size: "sm" })) : (_jsx(Square, { "aria-hidden": "true", fill: "currentColor", size: Math.round(iconSize * 0.7) })) })] }) }));
 });

package/dist/styles.css

@@ -6166,9 +6166,6 @@
       margin-block-end: calc(var(--spacing-sm) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .self-stretch {
-    align-self: stretch;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -6180,9 +6177,6 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-visible {
-    overflow: visible;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -6225,10 +6219,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .badge-outline {
     @layer daisyui.l1.l2 {
       color: var(--badge-color);
@@ -6370,9 +6360,6 @@
   .p-2xl {
     padding: var(--spacing-2xl);
   }
-  .p-2xs {
-    padding: var(--spacing-2xs);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -8740,6 +8727,20 @@
       white-space: nowrap;
     }
   }
+  .caps-app-status-bar .badge {
+    height: auto;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--stipe-fg-muted);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+  .caps-app-status-bar .badge-warning {
+    color: var(--color-warning);
+  }
   .caps-status-bar-picker-list {
     min-width: min(18rem, calc(100vw - 1.5rem));
   }
@@ -10990,17 +10991,61 @@
     color: var(--color-base-content);
     font-size: 0.875rem;
   }
-  .caps-composer > .join {
-    border: var(--border) solid var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border: var(--border) solid color-mix(in oklab, var(--color-base-content) 12%, var(--color-base-300));
-    }
-    border-radius: var(--radius-box);
-    background: var(--color-base-200);
-    box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) var(--color-base-content), 0 calc(var(--depth) * 1px) 0 var(--color-base-100) );
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 12%), transparent ), 0 calc(var(--depth) * 1px) 0 color-mix( in oklab, var(--color-base-100) calc(var(--depth) * 60%), transparent ) );
-    }
+  .caps-composer {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-input {
+    position: relative;
+    min-width: 0;
+  }
+  .caps-composer-input :is(textarea, input), .caps-composer-input :is(textarea, input):focus, .caps-composer-input :is(textarea, input):focus-visible {
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+    padding-inline: 0;
+  }
+  .caps-composer-bar {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar > .caps-status-tray {
+    flex: 1;
+    min-width: 0;
+    --caps-status-tray-row-wrap: wrap;
+    --caps-status-tray-chips-display: contents;
+    --caps-status-tray-key-height: calc(var(--size-field) * 8);
+    --caps-status-tray-chip-height: var(--caps-status-tray-key-height);
+    --caps-status-tray-width: 28rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-row :is(.caps-keycap-button, .caps-status-tray-chip, .caps-select) {
+    height: var(--caps-status-tray-key-height);
+    min-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-label {
+    display: flex;
+    align-items: center;
   }
   .caps-alert[data-tone="error"] h3 {
     color: var(--color-error);
@@ -12643,6 +12688,13 @@
     padding: var(--spacing-md);
     text-align: center;
   }
+  .caps-send-action {
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-padding: 0;
+    --caps-keycap-min-width: var(--caps-keycap-height, 2.5rem);
+    flex: none;
+  }
   .caps-send-glyph {
     display: inline-grid;
     place-items: center;
@@ -13587,15 +13639,15 @@
     isolation: var(--caps-button-outline-isolation, auto);
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--caps-button-outline-face, revert-layer);
-    color: var(--caps-button-outline-ink, revert-layer);
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
   }
   .caps-button.btn-outline:is(:disabled, [aria-disabled="true"]) {
     background-color: var( --caps-button-outline-disabled-face, var(--color-base-200) );
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):hover {
-    background-color: var( --caps-button-outline-hover-face, var(--caps-button-outline-face, revert-layer) );
-    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, revert-layer) );
+    background-color: var( --caps-button-outline-hover-face, var(--caps-keycap-hover-face, var(--caps-key-face)) );
+    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, var(--color-base-content)) );
   }
   .caps-button.btn-outline::before {
     content: var(--caps-button-outline-inset-content, none);
@@ -13608,21 +13660,36 @@
   .caps-button.btn-outline:hover::before {
     background: var(--color-base-content);
   }
-  .caps-button.btn-outline {
-    --btn-border: var(--color-base-content);
+  .caps-keycap-button, .caps-button-filled, .caps-button.btn-outline {
+    --caps-key-lip: calc(var(--depth) * 1px);
+    --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face);
     @supports (color: color-mix(in lab, red, red)) {
-      --btn-border: color-mix(
-      in oklab,
-      var(--color-base-content) 24%,
-      transparent
-    );
+      --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        color-mix(
+          in oklab,
+          var(--caps-key-face),
+          var(--caps-key-lip-ink, var(--color-base-content)) 14%
+        );
     }
+    --caps-key-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent;
+  }
+  .caps-button.btn-outline {
+    --btn-border: var(--stipe-linework);
+    --caps-key-face: var(--caps-button-outline-face, var(--color-base-200));
     font-weight: var(--caps-button-weight, 500);
-    box-shadow: var(--caps-button-outline-drop, var(--caps-button-drop, none));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop, var(--caps-key-rest-shadow)) );
+    transition-property: background-color, border-color, box-shadow, translate;
+    transition-duration: var(--stipe-motion-fast);
+    transition-timing-function: ease-out;
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):active {
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
-    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, none) );
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, var(--caps-key-pressed-shadow)) );
   }
   .caps-button.btn-ghost {
     font-weight: 500;
@@ -13632,6 +13699,9 @@
   }
   .caps-button-filled {
     --btn-bg: var(--btn-color);
+    --caps-key-face: var(--btn-color);
+    --caps-key-lip-ink: black;
+    --caps-key-top-edge: 0.06;
     --caps-button-filled-edge: var(
       --caps-button-border-color,
       var(--btn-bg)
@@ -13641,7 +13711,7 @@
       --caps-button-border-color,
       color-mix(
         in oklab,
-        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 8%)),
+        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 6%)),
         var(--stipe-linework)
           calc((1 - var(--depth)) * var(--caps-button-linework, 100%))
       )
@@ -13649,7 +13719,7 @@
     }
     --caps-button-filled-drop: var(
       --caps-button-drop,
-      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18))
+      var(--caps-key-rest-shadow)
     );
     background-color: var(--btn-bg);
     color: var(--btn-fg);
@@ -13692,9 +13762,9 @@
     @supports (color: color-mix(in lab, red, red)) {
       --btn-bg: color-mix(in oklab, var(--btn-color) 92%, black);
     }
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     scale: var(--stipe-press-scale);
-    box-shadow: var( --caps-button-drop-active, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)) );
+    box-shadow: var(--caps-button-drop-active, var(--caps-key-pressed-shadow));
     transition-duration: var(--stipe-motion-squish);
   }
   .caps-button.caps-button-menubar {
@@ -14675,7 +14745,7 @@
     scale: none;
   }
   .caps-button-filled:not(:disabled):not([aria-disabled="true"]):active {
-    translate: var(--caps-button-press-reduced, none);
+    translate: var(--caps-button-press-reduced, 0 var(--caps-key-lip));
   }
   .caps-gooey-motion, .caps-gooey-motion::before, .caps-switch, .caps-radio, .caps-checkbox, .caps-checkbox-track, .caps-input, .caps-status-bead {
     animation: none !important;
@@ -15860,7 +15930,7 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .caps-keycap, .caps-keycap-button {
+  .caps-keycap, .caps-keycap-button, .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -15931,7 +16001,21 @@
     height: 0.625rem;
   }
   .caps-keycap-button {
-    --caps-keycap-lip: calc(var(--depth) * 1px);
+    --caps-key-face: var(--caps-keycap-face, var(--color-base-200));
+    --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        color-mix(in oklab, var(--caps-key-face), var(--color-base-content) 14%),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    }
+    --caps-keycap-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)),
+      0 0 0 transparent, 0 0 0 transparent;
     display: flex;
     width: var(--caps-keycap-width, 100%);
     min-width: var(--caps-keycap-min-width, 0);
@@ -15940,7 +16024,10 @@
     justify-content: var(--caps-keycap-justify, space-between);
     gap: var(--spacing-sm);
     padding: var(--caps-keycap-padding, var(--spacing-xs) var(--spacing-sm));
-    border: var( --caps-keycap-context-border, var(--border) solid var(--caps-keycap-edge, var(--stipe-linework)) );
+    border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, var(--stipe-linework) ) );
+    @supports (color: color-mix(in lab, red, red)) {
+      border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, color-mix(in oklab, var(--stipe-linework) 80%, var(--caps-key-face)) ) );
+    }
     font-size: var(--caps-keycap-font-size, inherit);
     font-weight: var( --caps-keycap-context-weight, var(--caps-keycap-font-weight, inherit) );
     border-radius: var(--radius-field);
@@ -15949,12 +16036,28 @@
       var(--caps-keycap-face, var(--color-base-200))
     );
     background-color: var(--caps-keycap-painted-face);
-    --caps-keycap-default-image: none;
-    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
-    box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 var(--caps-keycap-face, var(--color-base-200)) );
+    --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      var(--caps-keycap-painted-face),
+      var(--caps-keycap-painted-face)
+    );
     @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 color-mix( in oklab, var(--caps-keycap-face, var(--color-base-200)), var(--color-base-content) 14% ) );
+      --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        white calc(var(--depth) * 3%)
+      ),
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        black calc(var(--depth) * 3%)
+      )
+    );
     }
+    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
+    box-shadow: var( --caps-keycap-context-shadow, var(--caps-keycap-rest-shadow) );
     color: var(--caps-keycap-ink, var(--color-base-content));
     text-align: left;
     cursor: pointer;
@@ -15963,8 +16066,8 @@
     transition-timing-function: ease-out;
   }
   .caps-keycap-button:active {
-    translate: 0 var(--caps-keycap-context-travel, var(--caps-keycap-lip));
-    box-shadow: var( --caps-keycap-active-shadow, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent );
+    translate: 0 var(--caps-keycap-context-travel, var(--caps-key-lip));
+    box-shadow: var( --caps-keycap-active-shadow, var(--caps-keycap-pressed-shadow) );
   }
   .caps-keycap-button:focus-visible {
     outline: 2px solid var(--caps-keycap-focus-ink, var(--color-base-content));
@@ -16011,6 +16114,28 @@
     --caps-keycap-ink: var(--color-neutral-content);
     --caps-keycap-edge: var(--color-neutral);
   }
+  .caps-keycap-button.caps-send-action[data-tone="primary"] {
+    --caps-keycap-face: var(--color-primary);
+    --caps-keycap-ink: var(--color-primary-content);
+    --caps-keycap-edge: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-edge: color-mix(in oklab, var(--color-primary) 82%, black);
+    }
+    --caps-keycap-hover-face: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-hover-face: color-mix(
+      in oklab,
+      var(--color-primary) 92%,
+      black
+    );
+    }
+  }
+  .caps-keycap-button.caps-send-action[data-send-state="empty"] {
+    --caps-keycap-face: var(--color-base-200);
+    --caps-keycap-ink: var(--color-base-content);
+    --caps-keycap-edge: var(--stipe-linework);
+    --caps-keycap-hover-face: var(--color-base-200);
+  }
   .caps-keycap-button[data-tone="destructive"]:is(:hover, :focus-visible) {
     --caps-keycap-ink: var(--color-error);
     --caps-keycap-edge: var(--color-error);

package/docs/api/blocks/composer.md

@@ -20,12 +20,12 @@ Props accepted by Composer.
 
 #### Type Declaration
 
-| Name            | Type        | Description                                                                                   |
-| --------------- | ----------- | --------------------------------------------------------------------------------------------- |
-| `input`         | `ReactNode` | The caller-owned primary input control.                                                       |
-| `action?`       | `ReactNode` | The caller-owned action control. Its disabled state and accessible name stay on that control. |
-| `leading?`      | `ReactNode` | Optional caller-owned leading slot, such as an avatar.                                        |
-| `rowClassName?` | `string`    | Classes for the joined row; useful when the host exposes a busy state.                        |
+| Name           | Type        | Description                                                                  |
+| -------------- | ----------- | ---------------------------------------------------------------------------- |
+| `input`        | `ReactNode` | The caller-owned field, typed into directly: the surface is the field.       |
+| `action?`      | `ReactNode` | The caller-owned key at the end of the bottom row, such as a SendAction.     |
+| `toolbar?`     | `ReactNode` | Caller-owned controls and readouts along the bottom edge, before the action. |
+| `attachments?` | `ReactNode` | Caller-owned items riding with the draft, shown above the text.              |
 
 ## Variables
 
@@ -37,4 +37,7 @@ const Composer: ForwardRefExoticComponent<
 >;
 ```
 
-Layout and slots only. It never assigns action-control semantics.
+One composer surface: attachments, then the text, then a slim row along the
+bottom edge holding the toolbar and, at its end, the action. It draws no box of
+its own: the host region is the field. Layout and slots only; it never assigns
+action-control semantics.

package/docs/api/components/send-action.md

@@ -24,7 +24,16 @@ Where a composer's send action is: nothing to send, ready, or working.
 
 ```ts
 type SendActionProps = object &
-  Omit<ButtonProps, "children" | "size" | "loading" | "aria-label">;
+  Omit<
+    KeycapButtonProps,
+    | "label"
+    | "icon"
+    | "readout"
+    | "shortcut"
+    | "pressed"
+    | "expanded"
+    | "aria-label"
+  >;
 ```
 
 Props accepted by SendAction.
@@ -46,13 +55,23 @@ Props accepted by SendAction.
 ```ts
 const SendAction: ForwardRefExoticComponent<
   object &
-    Omit<ButtonProps, "aria-label" | "children" | "size" | "loading"> &
+    Omit<
+      KeycapButtonProps,
+      | "aria-label"
+      | "label"
+      | "icon"
+      | "readout"
+      | "expanded"
+      | "pressed"
+      | "shortcut"
+    > &
     RefAttributes<HTMLButtonElement>
 >;
 ```
 
-A composer's send key. Empty, it rests disabled; given something to send it
-wakes with a small pop; sending, its arrow launches away and a working indicator
-(or, with `onStop`, a stop square) takes its place; when the work ends the arrow
-drops back in. All timing comes from the theme's motion tokens, and reduced
+A composer's one send key, on the Caps keycap. Empty, it rests disabled; given
+something to send it wakes with a small pop; sending, its arrow launches away
+and a working indicator (or, with `onStop`, a stop square) takes its place in
+the same key; when the work ends the arrow drops back in. It never grows a
+second button. All timing comes from the theme's motion tokens, and reduced
 motion keeps short fades only.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",

package/src/app-status-bar.css

@@ -134,6 +134,27 @@
     }
   }
 
+  /*
+   * A count in a bar key is a quiet readout beside its label: plain muted
+   * numerals below the label's cap height, never a filled pill as tall as
+   * the key. Every key's CountBadge draws this way.
+   */
+  .caps-app-status-bar .badge {
+    height: auto;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--stipe-fg-muted);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .caps-app-status-bar .badge-warning {
+    color: var(--color-warning);
+  }
+
   .caps-status-bar-picker-list {
     min-width: min(18rem, calc(100vw - 1.5rem));
   }

package/src/styles.css

@@ -2422,26 +2422,73 @@
     color: var(--color-base-content);
     font-size: 0.875rem;
   }
-  .caps-composer > .join {
-    border: var(--border) solid
-      color-mix(in oklab, var(--color-base-content) 12%, var(--color-base-300));
-    border-radius: var(--radius-box);
-    background: var(--color-base-200);
-    box-shadow: var(
-      --stipe-shadow-inset,
-      inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px)
-        color-mix(
-          in oklab,
-          var(--color-base-content) calc(var(--depth) * 12%),
-          transparent
-        ),
-      0 calc(var(--depth) * 1px) 0
-        color-mix(
-          in oklab,
-          var(--color-base-100) calc(var(--depth) * 60%),
-          transparent
-        )
-    );
+  /* The composer is a surface, not a box inside a panel: the host region is
+     the field, and the text sits directly on the host's face. A slim row along
+     the bottom edge carries the toolbar and, at its end, the action key. */
+  .caps-composer {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-input {
+    position: relative;
+    min-width: 0;
+  }
+  .caps-composer-input :is(textarea, input),
+  .caps-composer-input :is(textarea, input):focus,
+  .caps-composer-input :is(textarea, input):focus-visible {
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+    padding-inline: 0;
+  }
+  .caps-composer-bar {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  /* A StatusTray seated as the composer's toolbar: one wrapping row of keys,
+     selects and chips on the theme's field-size grid, the same in every App. */
+  .caps-composer-toolbar > .caps-status-tray {
+    flex: 1;
+    min-width: 0;
+    --caps-status-tray-row-wrap: wrap;
+    --caps-status-tray-chips-display: contents;
+    --caps-status-tray-key-height: calc(var(--size-field) * 8);
+    --caps-status-tray-chip-height: var(--caps-status-tray-key-height);
+    --caps-status-tray-width: 28rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar
+    > .caps-status-tray
+    .caps-status-tray-row
+    :is(.caps-keycap-button, .caps-status-tray-chip, .caps-select) {
+    height: var(--caps-status-tray-key-height);
+    min-height: var(--caps-status-tray-key-height);
+  }
+  /* A chip label is a flex row, so an inline label box adds no text strut
+     and chip text shares the keys' baseline. */
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-label {
+    display: flex;
+    align-items: center;
   }
   .caps-alert[data-tone="error"] h3 {
     color: var(--color-error);
@@ -4221,6 +4268,14 @@
     text-align: center;
   }
   /* SendAction: the arrow and the working glyph share one cell. */
+  /* The send key: one square keycap whose glyph changes, never a second key. */
+  .caps-send-action {
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-padding: 0;
+    --caps-keycap-min-width: var(--caps-keycap-height, 2.5rem);
+    flex: none;
+  }
   .caps-send-glyph {
     display: inline-grid;
     place-items: center;
@@ -5333,8 +5388,8 @@
     isolation: var(--caps-button-outline-isolation, auto);
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--caps-button-outline-face, revert-layer);
-    color: var(--caps-button-outline-ink, revert-layer);
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
   }
   .caps-button.btn-outline:is(:disabled, [aria-disabled="true"]) {
     background-color: var(
@@ -5345,11 +5400,11 @@
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):hover {
     background-color: var(
       --caps-button-outline-hover-face,
-      var(--caps-button-outline-face, revert-layer)
+      var(--caps-keycap-hover-face, var(--caps-key-face))
     );
     color: var(
       --caps-button-outline-hover-ink,
-      var(--caps-button-outline-ink, revert-layer)
+      var(--caps-button-outline-ink, var(--color-base-content))
     );
   }
   /* A cut outline uses an inset face; an ordinary outline needs no extra face. */
@@ -5365,24 +5420,48 @@
     background: var(--color-base-content);
   }
 
-  /* An outline button is a hairline frame with a medium label: no drop in
-     any state, unless a theme's finish asks for one. */
+  /* The Caps key material: a flat face on a 1px lip shaded toward the ink,
+     a faint top edge, and a press that settles the face onto its lip. Every
+     Button reads it; KeycapButton reads its face and lip and raises its own
+     finish on them. Everything scales with --depth, so flat themes keep a
+     flat linework key, and a theme's --caps-button-drop/-press still win. */
+  .caps-keycap-button,
+  .caps-button-filled,
   .caps-button.btn-outline {
-    --btn-border: color-mix(
-      in oklab,
-      var(--color-base-content) 24%,
-      transparent
-    );
+    --caps-key-lip: calc(var(--depth) * 1px);
+    --caps-key-rest-shadow:
+      inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        color-mix(
+          in oklab,
+          var(--caps-key-face),
+          var(--caps-key-lip-ink, var(--color-base-content)) 14%
+        );
+    --caps-key-pressed-shadow:
+      inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent;
+  }
+
+  /* An outline button is the neutral key: a base-200 face on linework. */
+  .caps-button.btn-outline {
+    --btn-border: var(--stipe-linework);
+    --caps-key-face: var(--caps-button-outline-face, var(--color-base-200));
 
     font-weight: var(--caps-button-weight, 500);
-    box-shadow: var(--caps-button-outline-drop, var(--caps-button-drop, none));
+    box-shadow: var(
+      --caps-button-outline-drop,
+      var(--caps-button-drop, var(--caps-key-rest-shadow))
+    );
+    transition-property: background-color, border-color, box-shadow, translate;
+    transition-duration: var(--stipe-motion-fast);
+    transition-timing-function: ease-out;
   }
 
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):active {
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     box-shadow: var(
       --caps-button-outline-drop,
-      var(--caps-button-drop-active, none)
+      var(--caps-button-drop-active, var(--caps-key-pressed-shadow))
     );
   }
 
@@ -5394,25 +5473,28 @@
     --radius-field: var(--radius-button);
   }
 
-  /* A filled button is a flat key: one solid fill, a hairline edge a step
-     darker than the fill, and at most a faint 1px top highlight. Flat themes
-     edge it in linework instead; a theme sets --caps-button-linework: 0% to
-     edge it in its own fill. Press feel comes from the theme's
-     --stipe-press-depth and --stipe-press-scale. */
+  /* A filled button is the same key in its role colour: one solid fill with
+     no lighter ring, an edge a hair darker than the fill, a quiet lip shaded
+     darker still, and only a very faint top edge. Flat themes edge it in
+     linework instead; a theme sets --caps-button-linework: 0% to edge it in
+     its own fill. */
   .caps-button-filled {
     --btn-bg: var(--btn-color);
+    --caps-key-face: var(--btn-color);
+    --caps-key-lip-ink: black;
+    --caps-key-top-edge: 0.06;
     --caps-button-filled-edge: var(
       --caps-button-border-color,
       color-mix(
         in oklab,
-        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 8%)),
+        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 6%)),
         var(--stipe-linework)
           calc((1 - var(--depth)) * var(--caps-button-linework, 100%))
       )
     );
     --caps-button-filled-drop: var(
       --caps-button-drop,
-      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18))
+      var(--caps-key-rest-shadow)
     );
 
     background-color: var(--btn-bg);
@@ -5470,12 +5552,9 @@
     ) {
     --btn-bg: color-mix(in oklab, var(--btn-color) 92%, black);
 
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     scale: var(--stipe-press-scale);
-    box-shadow: var(
-      --caps-button-drop-active,
-      inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08))
-    );
+    box-shadow: var(--caps-button-drop-active, var(--caps-key-pressed-shadow));
     transition-duration: var(--stipe-motion-squish);
   }
 
@@ -6686,8 +6765,9 @@
     scale: none;
   }
 
+  /* The press is a state, not motion: a key still settles onto its lip. */
   .caps-button-filled:not(:disabled):not([aria-disabled="true"]):active {
-    translate: var(--caps-button-press-reduced, none);
+    translate: var(--caps-button-press-reduced, 0 var(--caps-key-lip));
   }
 
   .caps-gooey-motion,
@@ -7990,7 +8070,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .caps-keycap,
-  .caps-keycap-button {
+  .caps-keycap-button,
+  .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -8071,11 +8152,23 @@
   .caps-game-meter .progress {
     height: 0.625rem;
   }
-  /* A key: a flat face on a 1px lip, with a faint top highlight. The lip and
-     press travel scale with --depth, so flat themes keep a flat linework key.
-     A host or theme picks the face through --caps-keycap-face/-ink/-edge. */
+  /* A key: today's flat key on a 1px lip, a touch richer. The face carries a
+     faint ±3% grade, the top edge is 0.18, a small soft drop sits under the
+     lip, and the linework edge is softened 20% toward the face. It reads its
+     face and lip from the Caps key material; everything scales with --depth,
+     so flat themes keep a flat linework key. A host or theme picks the face
+     through --caps-keycap-face/-ink/-edge. */
   .caps-keycap-button {
-    --caps-keycap-lip: calc(var(--depth) * 1px);
+    --caps-key-face: var(--caps-keycap-face, var(--color-base-200));
+    --caps-keycap-rest-shadow:
+      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        color-mix(in oklab, var(--caps-key-face), var(--color-base-content) 14%),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    --caps-keycap-pressed-shadow:
+      inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)),
+      0 0 0 transparent, 0 0 0 transparent;
     display: flex;
     width: var(--caps-keycap-width, 100%);
     min-width: var(--caps-keycap-min-width, 0);
@@ -8086,7 +8179,11 @@
     padding: var(--caps-keycap-padding, var(--spacing-xs) var(--spacing-sm));
     border: var(
       --caps-keycap-context-border,
-      var(--border) solid var(--caps-keycap-edge, var(--stipe-linework))
+      var(--border) solid
+        var(
+          --caps-keycap-edge,
+          color-mix(in oklab, var(--stipe-linework) 80%, var(--caps-key-face))
+        )
     );
     font-size: var(--caps-keycap-font-size, inherit);
     font-weight: var(
@@ -8099,20 +8196,26 @@
       var(--caps-keycap-face, var(--color-base-200))
     );
     background-color: var(--caps-keycap-painted-face);
-    --caps-keycap-default-image: none;
+    --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        white calc(var(--depth) * 3%)
+      ),
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        black calc(var(--depth) * 3%)
+      )
+    );
     background-image: var(
       --caps-keycap-context-image,
       var(--caps-keycap-default-image)
     );
     box-shadow: var(
       --caps-keycap-context-shadow,
-      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)),
-      0 var(--caps-keycap-lip) 0
-        color-mix(
-          in oklab,
-          var(--caps-keycap-face, var(--color-base-200)),
-          var(--color-base-content) 14%
-        )
+      var(--caps-keycap-rest-shadow)
     );
     color: var(--caps-keycap-ink, var(--color-base-content));
     text-align: left;
@@ -8123,11 +8226,10 @@
     transition-timing-function: ease-out;
   }
   .caps-keycap-button:active {
-    translate: 0 var(--caps-keycap-context-travel, var(--caps-keycap-lip));
+    translate: 0 var(--caps-keycap-context-travel, var(--caps-key-lip));
     box-shadow: var(
       --caps-keycap-active-shadow,
-      inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)),
-      0 0 0 transparent
+      var(--caps-keycap-pressed-shadow)
     );
   }
   .caps-keycap-button:focus-visible {
@@ -8164,6 +8266,25 @@
     --caps-keycap-ink: var(--color-neutral-content);
     --caps-keycap-edge: var(--color-neutral);
   }
+  /* The send key is a filled key in its role colour, like a filled Button:
+     a solid face and a hairline edge one step darker, no light rim. With
+     nothing to send it rests as a calm neutral key. */
+  .caps-keycap-button.caps-send-action[data-tone="primary"] {
+    --caps-keycap-face: var(--color-primary);
+    --caps-keycap-ink: var(--color-primary-content);
+    --caps-keycap-edge: color-mix(in oklab, var(--color-primary) 82%, black);
+    --caps-keycap-hover-face: color-mix(
+      in oklab,
+      var(--color-primary) 92%,
+      black
+    );
+  }
+  .caps-keycap-button.caps-send-action[data-send-state="empty"] {
+    --caps-keycap-face: var(--color-base-200);
+    --caps-keycap-ink: var(--color-base-content);
+    --caps-keycap-edge: var(--stipe-linework);
+    --caps-keycap-hover-face: var(--color-base-200);
+  }
   /* Destructive keys stay quiet until the pointer or focus is on them. */
   .caps-keycap-button[data-tone="destructive"]:is(:hover, :focus-visible) {
     --caps-keycap-ink: var(--color-error);