@quilltap/theme-storybook 1.0.43 → 1.0.45

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.44] - 2026-06-14
+
+### Added
+- Roleplay-template style classes: the four high-contrast chips `qt-roleplay-1..4` (with `--qt-roleplay-1..4-bg/fg` tokens themes override), the semantic chips `qt-roleplay-danger/warning/success/info/muted/code`, and the add-on flourish classes (`qt-rp-bold`, `qt-rp-italic`, `qt-rp-reverse`, `qt-rp-underline`, `qt-rp-underline-double`, `qt-rp-border`, `qt-rp-border-dashed`, `qt-rp-font-{sans,serif,mono,display,script}`). Mirrors the app-side definitions.
+- `Chat` story: a "Roleplay-Template Styles" section previewing the four chips, the semantic set, and a row of add-on combinations so theme authors can see them across themes.
+
 ## [1.0.43] - 2026-06-11
 
 ### Added

package/dist/{chunk-MKFVWQPL.mjs → chunk-77W5TNBS.mjs}

@@ -1534,6 +1534,34 @@ var Chat = () => {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay-Template Styles" }),
+      /* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top." }),
+      /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-content", style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "36rem" }, children: [
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-1", children: "Style 1" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-2", children: "Style 2" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-3", children: "Style 3" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-4", children: "Style 4" })
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-danger", children: "Danger" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-warning", children: "Warning" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-success", children: "Success" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-info", children: "Info" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-muted", children: "Muted" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-code", children: "code" })
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-2 qt-rp-bold", children: "Bold" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-3 qt-rp-italic", children: "Italic" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-1 qt-rp-reverse", children: "Reverse" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-4 qt-rp-underline-double", children: "Underline" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-info qt-rp-border-dashed", children: "Dashed border" }),
+          /* @__PURE__ */ jsx13("span", { className: "qt-roleplay-muted qt-rp-font-serif", children: "Serif font" })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
       /* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),

package/dist/index.css

@@ -390,6 +390,14 @@ body {
   --qt-rp-button-internal-fg: hsl(0 0% 100%);
   --qt-rp-button-ooc-bg: hsl(152 60% 28%);
   --qt-rp-button-ooc-fg: hsl(152 60% 80%);
+  --qt-roleplay-1-bg: hsl(217 91% 53%);
+  --qt-roleplay-1-fg: hsl(0 0% 100%);
+  --qt-roleplay-2-bg: hsl(270 65% 55%);
+  --qt-roleplay-2-fg: hsl(0 0% 100%);
+  --qt-roleplay-3-bg: hsl(38 92% 50%);
+  --qt-roleplay-3-fg: hsl(30 45% 12%);
+  --qt-roleplay-4-bg: hsl(168 78% 36%);
+  --qt-roleplay-4-fg: hsl(0 0% 100%);
   --qt-queue-badge-radius: var(--radius-sm);
   --qt-queue-badge-padding-x: 0.375rem;
   --qt-queue-badge-padding-y: 0.125rem;
@@ -2138,3 +2146,121 @@ body {
   background-color: var(--qt-terminal-closed-badge-bg);
   color: var(--qt-terminal-closed-badge-fg);
 }
+.qt-roleplay-1,
+.qt-roleplay-2,
+.qt-roleplay-3,
+.qt-roleplay-4,
+.qt-roleplay-danger,
+.qt-roleplay-warning,
+.qt-roleplay-success,
+.qt-roleplay-info,
+.qt-roleplay-muted,
+.qt-roleplay-code {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.1875rem;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.qt-roleplay-1 {
+  --qt-rp-fg: var(--qt-roleplay-1-fg);
+  --qt-rp-bg: var(--qt-roleplay-1-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-2 {
+  --qt-rp-fg: var(--qt-roleplay-2-fg);
+  --qt-rp-bg: var(--qt-roleplay-2-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-3 {
+  --qt-rp-fg: var(--qt-roleplay-3-fg);
+  --qt-rp-bg: var(--qt-roleplay-3-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-4 {
+  --qt-rp-fg: var(--qt-roleplay-4-fg);
+  --qt-rp-bg: var(--qt-roleplay-4-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-danger {
+  --qt-rp-fg: var(--color-destructive-foreground);
+  --qt-rp-bg: var(--color-destructive);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-warning {
+  --qt-rp-fg: var(--color-warning-foreground);
+  --qt-rp-bg: var(--color-warning);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-success {
+  --qt-rp-fg: var(--color-success-foreground);
+  --qt-rp-bg: var(--color-success);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-info {
+  --qt-rp-fg: var(--color-info-foreground);
+  --qt-rp-bg: var(--color-info);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-muted {
+  --qt-rp-fg: var(--color-muted-foreground);
+  --qt-rp-bg: var(--color-muted);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-roleplay-code {
+  --qt-rp-fg: var(--color-foreground);
+  --qt-rp-bg: var(--color-muted);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-family: var(--font-mono);
+}
+.qt-rp-bold {
+  font-weight: 700;
+}
+.qt-rp-italic {
+  font-style: italic;
+}
+.qt-rp-underline {
+  text-decoration: underline;
+}
+.qt-rp-underline-double {
+  text-decoration: underline;
+  text-decoration-style: double;
+}
+.qt-rp-border {
+  border: 1px solid currentColor;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 0.1875rem;
+}
+.qt-rp-border-dashed {
+  border: 1px dashed currentColor;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 0.1875rem;
+}
+.qt-rp-reverse {
+  color: var(--qt-rp-bg, var(--color-background));
+  background-color: var(--qt-rp-fg, var(--color-foreground));
+}
+.qt-rp-font-sans {
+  font-family: var(--theme-font-sans, ui-sans-serif, system-ui, sans-serif);
+}
+.qt-rp-font-serif {
+  font-family: var(--theme-font-serif, ui-serif, Georgia, "Times New Roman", serif);
+}
+.qt-rp-font-mono {
+  font-family: var(--theme-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
+}
+.qt-rp-font-display {
+  font-family: var(--qt-rp-font-display, var(--theme-font-serif, Georgia, "Times New Roman", serif));
+}
+.qt-rp-font-script {
+  font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive);
+}

package/dist/index.js

@@ -1643,6 +1643,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: "Roleplay-Template Styles" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top." }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "qt-chat-message-content", style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "36rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-1", children: "Style 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-2", children: "Style 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-3", children: "Style 3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-4", children: "Style 4" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-danger", children: "Danger" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-warning", children: "Warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-success", children: "Success" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-info", children: "Info" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-muted", children: "Muted" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-code", children: "code" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-2 qt-rp-bold", children: "Bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-3 qt-rp-italic", children: "Italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-1 qt-rp-reverse", children: "Reverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-4 qt-rp-underline-double", children: "Underline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-info qt-rp-border-dashed", children: "Dashed border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-roleplay-muted qt-rp-font-serif", children: "Serif font" })
+        ] })
+      ] })
+    ] }),
     /* @__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: "Whisper Messages" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),

package/dist/index.mjs

@@ -20,7 +20,7 @@ import {
   Terminal,
   ThemeComparison,
   Typography
-} from "./chunk-MKFVWQPL.mjs";
+} from "./chunk-77W5TNBS.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -1580,6 +1580,34 @@ var Chat = () => {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay-Template Styles" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "qt-chat-message-content", style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "36rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-1", children: "Style 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-2", children: "Style 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-3", children: "Style 3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-4", children: "Style 4" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-danger", children: "Danger" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-warning", children: "Warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-success", children: "Success" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-info", children: "Info" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-muted", children: "Muted" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-code", children: "code" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-2 qt-rp-bold", children: "Bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-3 qt-rp-italic", children: "Italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-1 qt-rp-reverse", children: "Reverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-4 qt-rp-underline-double", children: "Underline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-info qt-rp-border-dashed", children: "Dashed border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "qt-roleplay-muted qt-rp-font-serif", children: "Serif font" })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),

package/dist/stories/index.mjs

@@ -20,7 +20,7 @@ import {
   Terminal,
   ThemeComparison,
   Typography
-} from "../chunk-MKFVWQPL.mjs";
+} from "../chunk-77W5TNBS.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,10 +43,10 @@
     "storybook": ">=8.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^10.4.2",
-    "@types/react": "^19.2.16",
+    "@storybook/react": "^10.4.6",
+    "@types/react": "^19.2.17",
     "react": "^19.2.7",
-    "storybook": "^10.4.2",
+    "storybook": "^10.4.6",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },

package/src/css/qt-components.css

@@ -287,6 +287,17 @@
   --qt-rp-button-ooc-bg: hsl(152 60% 28%);
   --qt-rp-button-ooc-fg: hsl(152 60% 80%);
 
+  /* Roleplay-template palette (qt-roleplay-1..4): four distinct high-contrast
+     chips a delimiter can opt into. Themes override these four pairs to taste. */
+  --qt-roleplay-1-bg: hsl(217 91% 53%);
+  --qt-roleplay-1-fg: hsl(0 0% 100%);
+  --qt-roleplay-2-bg: hsl(270 65% 55%);
+  --qt-roleplay-2-fg: hsl(0 0% 100%);
+  --qt-roleplay-3-bg: hsl(38 92% 50%);
+  --qt-roleplay-3-fg: hsl(30 45% 12%);
+  --qt-roleplay-4-bg: hsl(168 78% 36%);
+  --qt-roleplay-4-fg: hsl(0 0% 100%);
+
   /* Queue badge variables */
   --qt-queue-badge-radius: var(--radius-sm);
   --qt-queue-badge-padding-x: 0.375rem;
@@ -2546,3 +2557,44 @@
   background-color: var(--qt-terminal-closed-badge-bg);
   color: var(--qt-terminal-closed-badge-fg);
 }
+
+/* ==========================================================================
+   ROLEPLAY-TEMPLATE STYLES
+   The chips + add-on flourishes a roleplay-template delimiter can opt into. In
+   the app these are scoped under .qt-chat-message-content to override prose; the
+   stylebook has no prose layer, so they are declared plainly here for preview.
+   ========================================================================== */
+.qt-roleplay-1, .qt-roleplay-2, .qt-roleplay-3, .qt-roleplay-4,
+.qt-roleplay-danger, .qt-roleplay-warning, .qt-roleplay-success,
+.qt-roleplay-info, .qt-roleplay-muted, .qt-roleplay-code {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.1875rem;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.qt-roleplay-1 { --qt-rp-fg: var(--qt-roleplay-1-fg); --qt-rp-bg: var(--qt-roleplay-1-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-2 { --qt-rp-fg: var(--qt-roleplay-2-fg); --qt-rp-bg: var(--qt-roleplay-2-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-3 { --qt-rp-fg: var(--qt-roleplay-3-fg); --qt-rp-bg: var(--qt-roleplay-3-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-4 { --qt-rp-fg: var(--qt-roleplay-4-fg); --qt-rp-bg: var(--qt-roleplay-4-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+
+.qt-roleplay-danger { --qt-rp-fg: var(--color-destructive-foreground); --qt-rp-bg: var(--color-destructive); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-warning { --qt-rp-fg: var(--color-warning-foreground); --qt-rp-bg: var(--color-warning); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-success { --qt-rp-fg: var(--color-success-foreground); --qt-rp-bg: var(--color-success); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-info { --qt-rp-fg: var(--color-info-foreground); --qt-rp-bg: var(--color-info); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-muted { --qt-rp-fg: var(--color-muted-foreground); --qt-rp-bg: var(--color-muted); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-code { --qt-rp-fg: var(--color-foreground); --qt-rp-bg: var(--color-muted); color: var(--qt-rp-fg); background: var(--qt-rp-bg); font-family: var(--font-mono); }
+
+/* Add-on flourishes (composed on top of any base style). */
+.qt-rp-bold { font-weight: 700; }
+.qt-rp-italic { font-style: italic; }
+.qt-rp-underline { text-decoration: underline; }
+.qt-rp-underline-double { text-decoration: underline; text-decoration-style: double; }
+.qt-rp-border { border: 1px solid currentColor; padding: 0.0625rem 0.25rem; border-radius: 0.1875rem; }
+.qt-rp-border-dashed { border: 1px dashed currentColor; padding: 0.0625rem 0.25rem; border-radius: 0.1875rem; }
+.qt-rp-reverse { color: var(--qt-rp-bg, var(--color-background)); background-color: var(--qt-rp-fg, var(--color-foreground)); }
+.qt-rp-font-sans { font-family: var(--theme-font-sans, ui-sans-serif, system-ui, sans-serif); }
+.qt-rp-font-serif { font-family: var(--theme-font-serif, ui-serif, Georgia, "Times New Roman", serif); }
+.qt-rp-font-mono { font-family: var(--theme-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); }
+.qt-rp-font-display { font-family: var(--qt-rp-font-display, var(--theme-font-serif, Georgia, "Times New Roman", serif)); }
+.qt-rp-font-script { font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive); }

package/src/stories/components/Chat.tsx

@@ -193,6 +193,40 @@ export const Chat: React.FC = () => {
         </div>
       </section>
 
+      {/* Roleplay-Template Styles */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Roleplay-Template Styles
+        </h3>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top.
+        </p>
+        <div className="qt-chat-message-content" style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '36rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-1">Style 1</span>
+            <span className="qt-roleplay-2">Style 2</span>
+            <span className="qt-roleplay-3">Style 3</span>
+            <span className="qt-roleplay-4">Style 4</span>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-danger">Danger</span>
+            <span className="qt-roleplay-warning">Warning</span>
+            <span className="qt-roleplay-success">Success</span>
+            <span className="qt-roleplay-info">Info</span>
+            <span className="qt-roleplay-muted">Muted</span>
+            <span className="qt-roleplay-code">code</span>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-2 qt-rp-bold">Bold</span>
+            <span className="qt-roleplay-3 qt-rp-italic">Italic</span>
+            <span className="qt-roleplay-1 qt-rp-reverse">Reverse</span>
+            <span className="qt-roleplay-4 qt-rp-underline-double">Underline</span>
+            <span className="qt-roleplay-info qt-rp-border-dashed">Dashed border</span>
+            <span className="qt-roleplay-muted qt-rp-font-serif">Serif font</span>
+          </div>
+        </div>
+      </section>
+
       {/* Whisper Messages */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>