@quilltap/theme-storybook 1.0.75 → 1.0.76

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.76] - 2026-10-20
+
+### Added
+- `stop-sign` (an octagon) and `hand-raised` in the Icons story's media group, mirroring the app's new registry entries for the Salon composer's Stop and raised-hand buttons.
+- The composer action-button family in `qt-components.css`: `.qt-chat-composer-actions`, `.qt-chat-composer-send`, `.qt-chat-continue-button`, `.qt-chat-stop-button`, and the new `.qt-chat-interrupt-button` / `.qt-chat-interrupt-button-raised` (warning amber, with a pulsing ring while a hand is up). The Chat story's control-buttons section shows the trio.
+
 ## [1.0.75] - 2026-10-19
 
 ### Added

package/dist/{chunk-MZGSNC6E.mjs → chunk-KJAOSO6L.mjs}

@@ -125,7 +125,7 @@ var ICON_GROUPS = [
   },
   {
     category: "Media",
-    names: ["image", "camera", "play", "pause", "stop", "zoom-in", "zoom-out"]
+    names: ["image", "camera", "play", "pause", "stop", "stop-sign", "hand-raised", "zoom-in", "zoom-out"]
   },
   {
     category: "Content & sidebar navigation",
@@ -1979,6 +1979,34 @@ var Chat = () => {
     /* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
       /* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
+      /* @__PURE__ */ jsxs14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem", fontSize: "0.875rem" }, children: [
+        "The composer's action trio while a character is speaking: Send (disabled), the soft interrupt ",
+        /* @__PURE__ */ jsx14("code", { children: ".qt-chat-interrupt-button" }),
+        " (shown idle, then raised with",
+        /* @__PURE__ */ jsx14("code", { children: ".qt-chat-interrupt-button-raised" }),
+        "), and the hard ",
+        /* @__PURE__ */ jsx14("code", { children: ".qt-chat-stop-button" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "qt-chat-composer-actions", style: { marginBottom: "1.5rem" }, children: [
+        /* @__PURE__ */ jsx14("button", { className: "qt-chat-composer-send", "aria-label": "Send message", disabled: true, children: /* @__PURE__ */ jsxs14("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx14("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+          /* @__PURE__ */ jsx14("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+        ] }) }),
+        /* @__PURE__ */ jsx14("button", { className: "qt-chat-composer-send qt-chat-interrupt-button", "aria-label": "Raise your hand to interrupt", children: /* @__PURE__ */ jsxs14("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx14("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ jsx14("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ jsx14("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ jsx14("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ jsx14("button", { className: "qt-chat-composer-send qt-chat-interrupt-button qt-chat-interrupt-button-raised", "aria-label": "Lower your hand", "aria-pressed": true, children: /* @__PURE__ */ jsxs14("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx14("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ jsx14("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ jsx14("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ jsx14("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ jsx14("button", { className: "qt-chat-composer-send qt-chat-stop-button", "aria-label": "Stop", children: /* @__PURE__ */ jsx14("svg", { width: "20", height: "20", fill: "currentColor", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("polygon", { points: "8.36 3.22 15.64 3.22 20.78 8.36 20.78 15.64 15.64 20.78 8.36 20.78 3.22 15.64 3.22 8.36" }) }) })
+      ] }),
       /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ jsxs14("button", { className: "qt-chat-continue-button", children: [
           /* @__PURE__ */ jsxs14("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [

package/dist/index.css

@@ -1727,6 +1727,84 @@ body {
 .qt-chat-composer-input:focus-within {
   outline: none;
 }
+.qt-chat-composer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+@media (max-width: 639px) {
+  .qt-chat-composer-actions {
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .qt-chat-composer-actions .qt-chat-composer-send {
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+}
+.qt-chat-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  transition: all 200ms;
+  cursor: pointer;
+  background: var(--qt-button-primary-bg);
+  color: var(--qt-button-primary-fg);
+  box-shadow: var(--qt-button-primary-shadow);
+}
+.qt-chat-composer-send:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
+}
+.qt-chat-composer-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.qt-chat-composer-send:hover:not(:disabled) {
+  background: var(--qt-button-primary-hover-bg);
+}
+.qt-chat-continue-button {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+.qt-chat-stop-button {
+  background: var(--qt-status-danger-bg);
+  color: var(--qt-status-danger-fg);
+  border: 1px solid var(--qt-status-danger-border);
+}
+.qt-chat-stop-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
+}
+.qt-chat-interrupt-button {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+.qt-chat-interrupt-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
+}
+.qt-chat-interrupt-button-raised {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
+  animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
+}
+@keyframes qt-hand-raised-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .qt-chat-interrupt-button-raised {
+    animation: none;
+  }
+}
 .qt-lexical-contenteditable {
   overflow-y: auto;
   position: relative;

package/dist/index.js

@@ -235,7 +235,7 @@ var ICON_GROUPS = [
   },
   {
     category: "Media",
-    names: ["image", "camera", "play", "pause", "stop", "zoom-in", "zoom-out"]
+    names: ["image", "camera", "play", "pause", "stop", "stop-sign", "hand-raised", "zoom-in", "zoom-out"]
   },
   {
     category: "Content & sidebar navigation",
@@ -2089,6 +2089,34 @@ var Chat = () => {
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem", fontSize: "0.875rem" }, children: [
+        "The composer's action trio while a character is speaking: Send (disabled), the soft interrupt ",
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { children: ".qt-chat-interrupt-button" }),
+        " (shown idle, then raised with",
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { children: ".qt-chat-interrupt-button-raised" }),
+        "), and the hard ",
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { children: ".qt-chat-stop-button" }),
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-chat-composer-actions", style: { marginBottom: "1.5rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-chat-composer-send", "aria-label": "Send message", disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-chat-composer-send qt-chat-interrupt-button", "aria-label": "Raise your hand to interrupt", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-chat-composer-send qt-chat-interrupt-button qt-chat-interrupt-button-raised", "aria-label": "Lower your hand", "aria-pressed": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-chat-composer-send qt-chat-stop-button", "aria-label": "Stop", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { width: "20", height: "20", fill: "currentColor", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("polygon", { points: "8.36 3.22 15.64 3.22 20.78 8.36 20.78 15.64 15.64 20.78 8.36 20.78 3.22 15.64 3.22 8.36" }) }) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "qt-chat-continue-button", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "./chunk-MZGSNC6E.mjs";
+} from "./chunk-KJAOSO6L.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -172,7 +172,7 @@ var ICON_GROUPS = [
   },
   {
     category: "Media",
-    names: ["image", "camera", "play", "pause", "stop", "zoom-in", "zoom-out"]
+    names: ["image", "camera", "play", "pause", "stop", "stop-sign", "hand-raised", "zoom-in", "zoom-out"]
   },
   {
     category: "Content & sidebar navigation",
@@ -2026,6 +2026,34 @@ var Chat = () => {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem", fontSize: "0.875rem" }, children: [
+        "The composer's action trio while a character is speaking: Send (disabled), the soft interrupt ",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { children: ".qt-chat-interrupt-button" }),
+        " (shown idle, then raised with",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { children: ".qt-chat-interrupt-button-raised" }),
+        "), and the hard ",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { children: ".qt-chat-stop-button" }),
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "qt-chat-composer-actions", style: { marginBottom: "1.5rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "qt-chat-composer-send", "aria-label": "Send message", disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "qt-chat-composer-send qt-chat-interrupt-button", "aria-label": "Raise your hand to interrupt", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "qt-chat-composer-send qt-chat-interrupt-button qt-chat-interrupt-button-raised", "aria-label": "Lower your hand", "aria-pressed": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "qt-chat-composer-send qt-chat-stop-button", "aria-label": "Stop", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "20", height: "20", fill: "currentColor", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("polygon", { points: "8.36 3.22 15.64 3.22 20.78 8.36 20.78 15.64 15.64 20.78 8.36 20.78 3.22 15.64 3.22 8.36" }) }) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "qt-chat-continue-button", children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [

package/dist/stories/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "../chunk-MZGSNC6E.mjs";
+} from "../chunk-KJAOSO6L.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/css/qt-components.css

@@ -2098,6 +2098,95 @@
   outline: none;
 }
 
+/* Composer action buttons: Send, the soft interrupt (raise a hand) and the
+   hard Stop. Mirrors app/styles/qt-components/_chat.css. */
+.qt-chat-composer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 639px) {
+  .qt-chat-composer-actions {
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .qt-chat-composer-actions .qt-chat-composer-send {
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+}
+
+.qt-chat-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  transition: all 200ms;
+  cursor: pointer;
+  background: var(--qt-button-primary-bg);
+  color: var(--qt-button-primary-fg);
+  box-shadow: var(--qt-button-primary-shadow);
+}
+
+.qt-chat-composer-send:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
+}
+
+.qt-chat-composer-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.qt-chat-composer-send:hover:not(:disabled) {
+  background: var(--qt-button-primary-hover-bg);
+}
+
+.qt-chat-continue-button {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+
+.qt-chat-stop-button {
+  background: var(--qt-status-danger-bg);
+  color: var(--qt-status-danger-fg);
+  border: 1px solid var(--qt-status-danger-border);
+}
+
+.qt-chat-stop-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
+}
+
+.qt-chat-interrupt-button {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+
+.qt-chat-interrupt-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
+}
+
+.qt-chat-interrupt-button-raised {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
+  animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes qt-hand-raised-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent); }
+  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qt-chat-interrupt-button-raised { animation: none; }
+}
+
 /* Lexical editor rich text node styles */
 .qt-lexical-contenteditable {
   overflow-y: auto;

package/src/stories/components/Chat.tsx

@@ -579,6 +579,40 @@ export const Chat: React.FC = () => {
         <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
           Continue and stop buttons for controlling AI response generation.
         </p>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem', fontSize: '0.875rem' }}>
+          The composer&apos;s action trio while a character is speaking: Send (disabled),
+          the soft interrupt <code>.qt-chat-interrupt-button</code> (shown idle, then raised with
+          <code>.qt-chat-interrupt-button-raised</code>), and the hard <code>.qt-chat-stop-button</code>.
+        </p>
+        <div className="qt-chat-composer-actions" style={{ marginBottom: '1.5rem' }}>
+          <button className="qt-chat-composer-send" aria-label="Send message" disabled>
+            <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+              <line x1="22" y1="2" x2="11" y2="13" />
+              <polygon points="22 2 15 22 11 13 2 9 22 2" />
+            </svg>
+          </button>
+          <button className="qt-chat-composer-send qt-chat-interrupt-button" aria-label="Raise your hand to interrupt">
+            <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+                <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+                <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
+                <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+              </svg>
+          </button>
+          <button className="qt-chat-composer-send qt-chat-interrupt-button qt-chat-interrupt-button-raised" aria-label="Lower your hand" aria-pressed>
+            <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+                <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+                <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
+                <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+              </svg>
+          </button>
+          <button className="qt-chat-composer-send qt-chat-stop-button" aria-label="Stop">
+            <svg width="20" height="20" fill="currentColor" stroke="currentColor" strokeWidth={1.5} strokeLinejoin="round" viewBox="0 0 24 24">
+              <polygon points="8.36 3.22 15.64 3.22 20.78 8.36 20.78 15.64 15.64 20.78 8.36 20.78 3.22 15.64 3.22 8.36" />
+            </svg>
+          </button>
+        </div>
         <div style={{ display: 'flex', gap: '1rem', maxWidth: '32rem' }}>
           <button className="qt-chat-continue-button">
             <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/stories/components/Icons.tsx

@@ -40,7 +40,7 @@ const ICON_GROUPS: IconGroup[] = [
   },
   {
     category: 'Media',
-    names: ['image', 'camera', 'play', 'pause', 'stop', 'zoom-in', 'zoom-out'],
+    names: ['image', 'camera', 'play', 'pause', 'stop', 'stop-sign', 'hand-raised', 'zoom-in', 'zoom-out'],
   },
   {
     category: 'Content & sidebar navigation',