@quilltap/theme-storybook 1.0.94 → 1.0.96

package/dist/index.css

@@ -1608,6 +1608,72 @@ body {
 .qt-chat-announcement-chip.qt-pascal-result--info {
   border-left-color: var(--qt-alert-info-border);
 }
+.qt-chat-composer-established-fact .qt-chat-composer-input {
+  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-message-established-fact {
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+  color: inherit;
+  margin-bottom: 0.25rem;
+}
+.qt-chat-system-bar.qt-chat-established-fact,
+.qt-chat-announcement-chip.qt-chat-established-fact {
+  border-left-width: 3px;
+  border-left-color: var(--color-ring);
+  padding-left: 0.75rem;
+}
+.qt-chat-established-fact-row {
+  width: 100%;
+  max-width: none;
+}
+.qt-chat-established-fact-band {
+  width: 100%;
+  background: var(--qt-alert-info-bg);
+  border: 1px solid var(--qt-alert-info-border);
+  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.94",
+  "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

@@ -1936,6 +1936,101 @@
   border-left-color: var(--qt-alert-info-border);
 }
 
+/**
+ * Deus Ex Machina — established facts in the Salon.
+ *
+ * Mirrors app/styles/qt-components/_chat.css. Built on existing tokens only (the --qt-alert-info-* family and --color-ring,
+ * the focus-ring colour), so every bundled theme renders it without per-theme
+ * work and the armed frame holds the focus ring's own contrast.
+ *
+ * - .qt-chat-composer-established-fact: the composer's editor wrapper while
+ *   `/deus` is armed — a frame and a faint tint, so the operator can see the
+ *   next line will be posted as fact.
+ * - .qt-chat-message-established-fact: the small ribbon on an operator line
+ *   posted as fact.
+ * - .qt-chat-established-fact: the accent on a machine fact's bar/chip.
+ * - .qt-chat-established-fact-row / -band: a machine fact renders as a
+ *   full-width band (no avatar) rather than a speech bubble.
+ */
+.qt-chat-composer-established-fact .qt-chat-composer-input {
+  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));
+}
+
+/* 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;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+  color: inherit;
+  margin-bottom: 0.25rem;
+}
+
+.qt-chat-system-bar.qt-chat-established-fact,
+.qt-chat-announcement-chip.qt-chat-established-fact {
+  border-left-width: 3px;
+  border-left-color: var(--color-ring);
+  padding-left: 0.75rem;
+}
+
+.qt-chat-established-fact-row {
+  width: 100%;
+  max-width: none;
+}
+
+.qt-chat-established-fact-band {
+  width: 100%;
+  background: var(--qt-alert-info-bg);
+  border: 1px solid var(--qt-alert-info-border);
+  border-left: 3px solid var(--color-ring);
+  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.