@quilltap/theme-storybook 1.0.95 → 1.0.96

package/dist/index.css

@@ -1616,8 +1616,9 @@ body {
 .qt-chat-message-established-fact {
   font-size: 0.75rem;
   font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--qt-alert-info-fg);
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+  color: inherit;
   margin-bottom: 0.25rem;
 }
 .qt-chat-system-bar.qt-chat-established-fact,
@@ -1637,6 +1638,42 @@ body {
   border-left: 3px solid var(--color-ring);
   box-shadow: none;
 }
+.qt-chat-established-fact-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
+  color: var(--color-foreground);
+  cursor: pointer;
+  opacity: 0.85;
+  transition:
+    opacity 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+.qt-chat-established-fact-toggle:hover,
+.qt-chat-established-fact-toggle:focus-visible {
+  opacity: 1;
+}
+.qt-chat-established-fact-toggle:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 1px;
+}
+.qt-chat-established-fact-toggle[aria-pressed=true] {
+  opacity: 1;
+  border-color: var(--color-ring);
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+}
+.qt-chat-established-fact-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 .qt-chat-message-silent {
   background: var(--qt-chat-silent-bg);
   color: var(--qt-chat-silent-fg);

package/package.json

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

@@ -1958,11 +1958,15 @@
   background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
 }
 
+/* The ribbon sits on whatever the theme paints the speaker's bubble, so it
+   takes the bubble's own text colour (every theme pairs those) and stands
+   apart by weight and small caps rather than by a hue of its own. */
 .qt-chat-message-established-fact {
   font-size: 0.75rem;
   font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--qt-alert-info-fg);
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+  color: inherit;
   margin-bottom: 0.25rem;
 }
 
@@ -1986,6 +1990,47 @@
   box-shadow: none;
 }
 
+/* The toggle that arms Deus Ex Machina, seated in the corner of the composer's
+   "speaking as" portrait. A small frosted tile at rest; armed, it wears the
+   composer frame's own ring and tint so the two read as one state. */
+.qt-chat-established-fact-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
+  color: var(--color-foreground);
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.qt-chat-established-fact-toggle:hover,
+.qt-chat-established-fact-toggle:focus-visible {
+  opacity: 1;
+}
+
+.qt-chat-established-fact-toggle:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 1px;
+}
+
+.qt-chat-established-fact-toggle[aria-pressed="true"] {
+  opacity: 1;
+  border-color: var(--color-ring);
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+}
+
+.qt-chat-established-fact-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 /**
  * Silent message — inner thoughts and actions from character in silent mode.
  * Distinguished from whispers by a dotted border (vs dashed) and sage/teal tones.