@quilltap/theme-storybook 1.0.52 → 1.0.54

package/dist/{chunk-TD4WYZZI.mjs → chunk-3RAUK5HZ.mjs}

@@ -1683,7 +1683,7 @@ 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: "Staff Announcements" }),
-      /* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls." }),
+      /* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls. An announcement whispered to named participants carries the whisper\u2019s border colour and names its audience, so a private aside is distinguishable from a public one without expanding it." }),
       /* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ jsxs14("button", { type: "button", className: "qt-chat-system-bar", children: [
           /* @__PURE__ */ jsx14("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-high", "aria-hidden": "true" }),
@@ -1713,7 +1713,23 @@ var Chat = () => {
             /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-kind", children: "project information" }),
             /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-time", children: "4:14 PM" }),
             /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
+          ] }),
+          /* @__PURE__ */ jsxs14("button", { type: "button", className: "qt-chat-announcement-chip qt-chat-announcement-chip-whisper", children: [
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-whisper", children: "to Amy" }),
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+            /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("button", { type: "button", className: "qt-chat-system-bar qt-chat-system-bar-expanded", children: [
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-whisper", children: "to Amy, Bartholomew" }),
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+          /* @__PURE__ */ jsx14("span", { className: "qt-chat-system-bar-chevron qt-chat-system-bar-chevron-down", "aria-hidden": "true", children: "\u203A" })
         ] })
       ] })
     ] }),

package/dist/index.css

@@ -429,7 +429,7 @@ body {
   --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #9b8ec4 40%);
   --qt-chat-whisper-fg: var(--qt-chat-assistant-fg);
   --qt-chat-whisper-border: #9b8ec4;
-  --qt-chat-whisper-label-fg: #7c6fa0;
+  --qt-chat-whisper-label-fg: #5c447e;
   --qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
   --qt-chat-silent-fg: var(--qt-chat-assistant-fg);
   --qt-chat-silent-border: #7a9e8e;
@@ -1146,6 +1146,15 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.qt-chat-system-bar-whisper {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--qt-chat-whisper-label-fg);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .qt-chat-system-bar-time {
   color: var(--qt-chat-system-bar-fg);
   opacity: 0.75;
@@ -1196,6 +1205,12 @@ body {
   flex: 0 1 auto;
   max-width: 22ch;
 }
+.qt-chat-announcement-chip .qt-chat-system-bar-whisper {
+  max-width: 18ch;
+}
+.qt-chat-announcement-chip-whisper {
+  border-color: var(--qt-chat-whisper-label-fg);
+}
 .qt-chat-announcement-dot {
   flex-shrink: 0;
   width: 0.5rem;
@@ -2127,7 +2142,7 @@ body {
 .dark {
   --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
   --qt-chat-whisper-border: #6b5b95;
-  --qt-chat-whisper-label-fg: #a89cc8;
+  --qt-chat-whisper-label-fg: #b5a9d1;
   --qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);
   --qt-chat-silent-border: #4a7a6a;
   --qt-chat-silent-label-fg: #8ab8a4;

package/dist/index.js

@@ -1793,7 +1793,7 @@ 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: "Staff Announcements" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls." }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls. An announcement whispered to named participants carries the whisper\u2019s border colour and names its audience, so a private aside is distinguishable from a public one without expanding it." }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "qt-chat-system-bar", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-high", "aria-hidden": "true" }),
@@ -1823,7 +1823,23 @@ var Chat = () => {
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-kind", children: "project information" }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:14 PM" }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "qt-chat-announcement-chip qt-chat-announcement-chip-whisper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-whisper", children: "to Amy" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
           ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "qt-chat-system-bar qt-chat-system-bar-expanded", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-whisper", children: "to Amy, Bartholomew" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-chat-system-bar-chevron qt-chat-system-bar-chevron-down", "aria-hidden": "true", children: "\u203A" })
         ] })
       ] })
     ] }),

package/dist/index.mjs

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

package/dist/stories/index.js

@@ -1730,7 +1730,7 @@ 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: "Staff Announcements" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls." }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages authored by a personified feature rather than a character. Each collapses to a one-line bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an importance tier \u2014 filled for high and medium, hollow for low \u2014 so the eye lands on the file changes and arrivals and skims past the time calls. An announcement whispered to named participants carries the whisper\u2019s border colour and names its audience, so a private aside is distinguishable from a public one without expanding it." }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: "qt-chat-system-bar", children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-high", "aria-hidden": "true" }),
@@ -1760,7 +1760,23 @@ var Chat = () => {
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-kind", children: "project information" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:14 PM" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: "qt-chat-announcement-chip qt-chat-announcement-chip-whisper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-whisper", children: "to Amy" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-chevron", "aria-hidden": "true", children: "\u203A" })
           ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: "qt-chat-system-bar qt-chat-system-bar-expanded", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-announcement-dot qt-chat-announcement-dot-medium", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-sender", children: "The Host" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-kind", children: "announcement" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-whisper", children: "to Amy, Bartholomew" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-time", children: "4:15 PM" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-chat-system-bar-chevron qt-chat-system-bar-chevron-down", "aria-hidden": "true", children: "\u203A" })
         ] })
       ] })
     ] }),

package/dist/stories/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "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

@@ -334,7 +334,9 @@
   --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #9b8ec4 40%);
   --qt-chat-whisper-fg: var(--qt-chat-assistant-fg);
   --qt-chat-whisper-border: #9b8ec4;
-  --qt-chat-whisper-label-fg: #7c6fa0;
+  /* Deep enough to clear WCAG AA (4.5:1) against --qt-chat-whisper-bg at this
+     label's 0.75rem size; it also tints .qt-chat-system-bar-whisper. */
+  --qt-chat-whisper-label-fg: #5c447e;
 
   /* Chat: Silent messages — inner thoughts/actions from characters in silent mode */
   --qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
@@ -1257,6 +1259,21 @@
   white-space: nowrap;
 }
 
+/**
+ * Whisper audience on an announcement bar or chip ("to Alice, Bob"). Wears the
+ * same ink as the message body's whisper label so a private aside reads the
+ * same whether it is collapsed to a chip or opened in full.
+ */
+.qt-chat-system-bar-whisper {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--qt-chat-whisper-label-fg);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .qt-chat-system-bar-time {
   color: var(--qt-chat-system-bar-fg);
   opacity: 0.75;
@@ -1330,6 +1347,18 @@
   max-width: 22ch;
 }
 
+/* Same cap for a long audience list — a whisper to five people must not push
+   the timestamp and chevron off the chip. */
+.qt-chat-announcement-chip .qt-chat-system-bar-whisper {
+  max-width: 18ch;
+}
+
+/* A whispered announcement carries the whisper's border colour, so a private
+   aside is distinguishable from a public one before it is ever expanded. */
+.qt-chat-announcement-chip-whisper {
+  border-color: var(--qt-chat-whisper-label-fg);
+}
+
 /**
  * Importance dot before the sender name. Filled for high/medium, hollow for
  * low, so the eye lands on what matters and skims past the low-noise chatter.
@@ -2562,7 +2591,7 @@
   /* Chat: Whisper messages — dark mode */
   --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
   --qt-chat-whisper-border: #6b5b95;
-  --qt-chat-whisper-label-fg: #a89cc8;
+  --qt-chat-whisper-label-fg: #b5a9d1;
 
   /* Chat: Silent messages — darker mode variants */
   --qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);

package/src/stories/components/Chat.tsx

@@ -291,7 +291,9 @@ export const Chat: React.FC = () => {
           Messages authored by a personified feature rather than a character. Each collapses to a one-line
           bar; a run of consecutive ones packs into a row of content-width chips. The leading dot carries an
           importance tier — filled for high and medium, hollow for low — so the eye lands on the
-          file changes and arrivals and skims past the time calls.
+          file changes and arrivals and skims past the time calls. An announcement whispered to named
+          participants carries the whisper’s border colour and names its audience, so a private aside
+          is distinguishable from a public one without expanding it.
         </p>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '32rem' }}>
           <button type="button" className="qt-chat-system-bar">
@@ -324,7 +326,25 @@ export const Chat: React.FC = () => {
               <span className="qt-chat-system-bar-time">4:14 PM</span>
               <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
             </button>
+            <button type="button" className="qt-chat-announcement-chip qt-chat-announcement-chip-whisper">
+              <span className="qt-chat-announcement-dot qt-chat-announcement-dot-medium" aria-hidden="true" />
+              <span className="qt-chat-system-bar-sender">The Host</span>
+              <span className="qt-chat-system-bar-kind">announcement</span>
+              <span className="qt-chat-system-bar-whisper">to Amy</span>
+              <span className="qt-chat-system-bar-time">4:15 PM</span>
+              <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+            </button>
           </div>
+
+          {/* Whispered announcement as a full-width expanded bar. */}
+          <button type="button" className="qt-chat-system-bar qt-chat-system-bar-expanded">
+            <span className="qt-chat-announcement-dot qt-chat-announcement-dot-medium" aria-hidden="true" />
+            <span className="qt-chat-system-bar-sender">The Host</span>
+            <span className="qt-chat-system-bar-kind">announcement</span>
+            <span className="qt-chat-system-bar-whisper">to Amy, Bartholomew</span>
+            <span className="qt-chat-system-bar-time">4:15 PM</span>
+            <span className="qt-chat-system-bar-chevron qt-chat-system-bar-chevron-down" aria-hidden="true">&rsaquo;</span>
+          </button>
         </div>
       </section>