@quilltap/theme-storybook 1.0.93 → 1.0.95

package/dist/index.css

@@ -1608,6 +1608,35 @@ 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;
+  letter-spacing: 0.02em;
+  color: var(--qt-alert-info-fg);
+  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-message-silent {
   background: var(--qt-chat-silent-bg);
   color: var(--qt-chat-silent-fg);
@@ -3184,10 +3213,14 @@ body {
 .qt-page-toolbar-left {
   display: flex;
   align-items: center;
+  flex: 1 1 0%;
   min-width: 2.5rem;
 }
+.qt-page-toolbar-left:empty {
+  flex: 0 1 auto;
+}
 .qt-page-toolbar-center {
-  flex: 1 1 0%;
+  flex: 0 1 32rem;
   display: flex;
   justify-content: center;
   padding-left: 1rem;
@@ -3198,6 +3231,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   min-width: 2.5rem;
   justify-content: flex-end;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "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,56 @@
   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));
+}
+
+.qt-chat-message-established-fact {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--qt-alert-info-fg);
+  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;
+}
+
 /**
  * Silent message — inner thoughts and actions from character in silent mode.
  * Distinguished from whispers by a dotted border (vs dashed) and sage/teal tones.
@@ -3996,15 +4046,24 @@
   -webkit-backdrop-filter: var(--qt-app-header-blur);
 }
 
+/* With page content, the left section takes whatever the search bar and the
+   right section leave over — never the other way round — so a crowded
+   breadcrumb compacts itself instead of squeezing the search bar. */
 .qt-page-toolbar-left {
   display: flex;
   align-items: center;
+  flex: 1 1 0%;
   /* Reserve space for hamburger on mobile, empty on desktop */
   min-width: 2.5rem;
 }
 
+/* Empty, it claims no spare room, so the search bar sits where it always has. */
+.qt-page-toolbar-left:empty {
+  flex: 0 1 auto;
+}
+
 .qt-page-toolbar-center {
-  flex: 1 1 0%;
+  flex: 0 1 32rem;
   display: flex;
   justify-content: center;
   padding-left: 1rem;
@@ -4016,6 +4075,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   /* Balance with left section */
   min-width: 2.5rem;
   justify-content: flex-end;