@quilltap/theme-storybook 1.0.77 → 1.0.79

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.78] - 2026-10-22
+
+### Added
+- The `qt-storyteller-*` family in `qt-components.css`, mirroring the app's `_storyteller.css`: the Salon's Normal / Paused / Storyteller turn-mode control (`.qt-storyteller-mode`, `-option`, `-option-active`, `-option-paused`) and the storyteller's bidding board (`.qt-storyteller-board`, `-board-header`, `.qt-storyteller-cards`, `.qt-storyteller-card` with `-selected` / `-act` / `-destroy` / `-quiet` / `-head` / `-name`, `.qt-storyteller-plan`, `-meta`, `-warning`, `-actions`, `.qt-storyteller-summary`). Every colour reads a `--qt-storyteller-*` hook with a token fallback.
+
 ## [1.0.76] - 2026-10-20
 
 ### Added

package/dist/index.css

@@ -3704,3 +3704,210 @@ body {
   font-size: 0.625rem;
   opacity: 0.85;
 }
+.qt-storyteller-mode {
+  display: flex;
+  width: 100%;
+  border: 1px solid var(--qt-storyteller-mode-border, var(--color-border));
+  border-radius: var(--qt-storyteller-mode-radius, 0.5rem);
+  overflow: hidden;
+}
+.qt-storyteller-mode-option {
+  flex: 1 1 0%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0.375rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  background: var(--qt-storyteller-mode-bg, var(--color-card));
+  color: var(--qt-storyteller-mode-fg, var(--color-muted-foreground));
+  border: none;
+  transition: background-color 150ms, color 150ms;
+}
+.qt-storyteller-mode-option + .qt-storyteller-mode-option {
+  border-left: 1px solid var(--qt-storyteller-mode-border, var(--color-border));
+}
+.qt-storyteller-mode-option:hover {
+  background: var(--qt-storyteller-mode-hover-bg, var(--color-accent));
+  color: var(--qt-storyteller-mode-hover-fg, var(--color-foreground));
+}
+.qt-storyteller-mode-option-active,
+.qt-storyteller-mode-option-active:hover {
+  background: var(--qt-storyteller-mode-active-bg, var(--color-primary));
+  color: var(--qt-storyteller-mode-active-fg, var(--color-primary-foreground));
+}
+.qt-storyteller-mode-option-paused,
+.qt-storyteller-mode-option-paused:hover {
+  background: var(--qt-status-warning-bg, var(--color-warning));
+  color: var(--qt-status-warning-fg, var(--color-warning-foreground));
+}
+.qt-storyteller-board {
+  margin-bottom: 0.5rem;
+  padding: 0.625rem;
+  border: 1px solid var(--qt-storyteller-board-border, var(--color-border));
+  border-radius: var(--qt-storyteller-board-radius, 0.75rem);
+  background: var(--qt-storyteller-board-bg, var(--color-card));
+  color: var(--qt-storyteller-board-fg, var(--color-card-foreground));
+}
+.qt-storyteller-board-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.qt-storyteller-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.5rem;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+.qt-storyteller-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.5rem;
+  border: 1px solid var(--qt-storyteller-card-border, var(--color-border));
+  border-radius: var(--qt-storyteller-card-radius, 0.5rem);
+  background: var(--qt-storyteller-card-bg, var(--color-background));
+  font-size: 0.8125rem;
+}
+.qt-storyteller-card-selected {
+  border-color: var(--qt-storyteller-card-selected-border, var(--color-primary));
+  box-shadow: 0 0 0 1px var(--qt-storyteller-card-selected-border, var(--color-primary));
+}
+.qt-storyteller-card-act {
+  border-color: var(--qt-storyteller-card-act-border, var(--color-warning));
+}
+.qt-storyteller-card-destroy {
+  border-color: var(--qt-status-danger-border, var(--color-destructive));
+  background: var(--qt-storyteller-card-destroy-bg, color-mix(in srgb, var(--color-destructive) 10%, var(--color-background)));
+}
+.qt-storyteller-card-quiet {
+  opacity: 0.65;
+}
+.qt-storyteller-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.qt-storyteller-card-name {
+  flex: 1 1 0%;
+  min-width: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qt-storyteller-plan {
+  font-style: italic;
+  color: var(--qt-storyteller-plan-fg, var(--color-foreground));
+}
+.qt-storyteller-meta {
+  font-size: 0.6875rem;
+  color: var(--qt-storyteller-meta-fg, var(--color-muted-foreground));
+}
+.qt-storyteller-warning {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--qt-storyteller-warning-fg, var(--color-destructive));
+}
+.qt-storyteller-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+}
+.qt-storyteller-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qt-storyteller-meta-fg, var(--color-muted-foreground));
+}
+.qt-intervention {
+  color: var(--qt-intervention-fg, var(--color-foreground));
+}
+.qt-intervention-queue {
+  font-weight: 600;
+  color: var(--qt-intervention-queue-fg, var(--color-primary));
+}
+.qt-intervention-section {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--qt-intervention-section-border, var(--color-border));
+  border-radius: var(--qt-intervention-section-radius, 0.5rem);
+}
+.qt-intervention-section--pinned {
+  border-color: var(--qt-intervention-pinned-border, var(--color-primary));
+}
+.qt-intervention-reset {
+  text-decoration: underline;
+  color: var(--qt-intervention-reset-fg, var(--color-primary));
+  cursor: pointer;
+}
+.qt-intervention-row {
+  display: block;
+  width: 100%;
+  text-align: left;
+  opacity: 0.75;
+  cursor: pointer;
+}
+.qt-intervention-row:hover {
+  opacity: 1;
+}
+.qt-intervention-row--winning {
+  opacity: 1;
+  font-weight: 600;
+  outline: 2px solid var(--qt-intervention-winning-outline, var(--color-primary));
+  outline-offset: 1px;
+}
+.qt-intervention-effect {
+  padding: 0.375rem 0;
+  border-bottom: 1px solid var(--qt-intervention-section-border, var(--color-border));
+}
+.qt-intervention-effect:last-child {
+  border-bottom: none;
+}
+.qt-intervention-note {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--qt-intervention-note-fg, var(--color-warning));
+}
+.qt-intervention-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.25rem;
+  color: var(--qt-intervention-badge-fg, var(--color-muted-foreground));
+}
+.qt-intervention-mark {
+  display: inline-block;
+  flex-shrink: 0;
+  color: var(--qt-intervention-badge-fg, var(--color-muted-foreground));
+}
+.qt-intervene-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
+  border-radius: 0.25rem;
+  color: var(--qt-intervene-toggle-fg, var(--color-primary));
+  background: transparent;
+  cursor: pointer;
+}
+.qt-intervene-toggle:hover {
+  background-color: var(--qt-intervene-toggle-hover-bg, var(--color-accent));
+}
+.qt-intervene-toggle--off {
+  color: var(--qt-intervene-toggle-off-fg, var(--color-muted-foreground));
+  opacity: 0.5;
+}

package/package.json

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

@@ -4598,3 +4598,271 @@
   font-size: 0.625rem;
   opacity: 0.85;
 }
+
+/**
+ * Storyteller mode — the Salon's turn-mode control and the bidding board.
+ * Mirrors app/styles/qt-components/_storyteller.css.
+ */
+/* The turn-mode control: Normal / Paused / Storyteller, one segmented row. */
+.qt-storyteller-mode {
+  display: flex;
+  width: 100%;
+  border: 1px solid var(--qt-storyteller-mode-border, var(--color-border));
+  border-radius: var(--qt-storyteller-mode-radius, 0.5rem);
+  overflow: hidden;
+}
+
+.qt-storyteller-mode-option {
+  flex: 1 1 0%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0.375rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  background: var(--qt-storyteller-mode-bg, var(--color-card));
+  color: var(--qt-storyteller-mode-fg, var(--color-muted-foreground));
+  border: none;
+  transition: background-color 150ms, color 150ms;
+}
+
+.qt-storyteller-mode-option + .qt-storyteller-mode-option {
+  border-left: 1px solid var(--qt-storyteller-mode-border, var(--color-border));
+}
+
+.qt-storyteller-mode-option:hover {
+  background: var(--qt-storyteller-mode-hover-bg, var(--color-accent));
+  color: var(--qt-storyteller-mode-hover-fg, var(--color-foreground));
+}
+
+.qt-storyteller-mode-option-active,
+.qt-storyteller-mode-option-active:hover {
+  background: var(--qt-storyteller-mode-active-bg, var(--color-primary));
+  color: var(--qt-storyteller-mode-active-fg, var(--color-primary-foreground));
+}
+
+.qt-storyteller-mode-option-paused,
+.qt-storyteller-mode-option-paused:hover {
+  background: var(--qt-status-warning-bg, var(--color-warning));
+  color: var(--qt-status-warning-fg, var(--color-warning-foreground));
+}
+
+/* The board: a panel above the composer while a round is open. */
+.qt-storyteller-board {
+  margin-bottom: 0.5rem;
+  padding: 0.625rem;
+  border: 1px solid var(--qt-storyteller-board-border, var(--color-border));
+  border-radius: var(--qt-storyteller-board-radius, 0.75rem);
+  background: var(--qt-storyteller-board-bg, var(--color-card));
+  color: var(--qt-storyteller-board-fg, var(--color-card-foreground));
+}
+
+.qt-storyteller-board-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.qt-storyteller-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.5rem;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.qt-storyteller-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.5rem;
+  border: 1px solid var(--qt-storyteller-card-border, var(--color-border));
+  border-radius: var(--qt-storyteller-card-radius, 0.5rem);
+  background: var(--qt-storyteller-card-bg, var(--color-background));
+  font-size: 0.8125rem;
+}
+
+.qt-storyteller-card-selected {
+  border-color: var(--qt-storyteller-card-selected-border, var(--color-primary));
+  box-shadow: 0 0 0 1px var(--qt-storyteller-card-selected-border, var(--color-primary));
+}
+
+.qt-storyteller-card-act {
+  border-color: var(--qt-storyteller-card-act-border, var(--color-warning));
+}
+
+.qt-storyteller-card-destroy {
+  border-color: var(--qt-status-danger-border, var(--color-destructive));
+  background: var(--qt-storyteller-card-destroy-bg, color-mix(in srgb, var(--color-destructive) 10%, var(--color-background)));
+}
+
+.qt-storyteller-card-quiet {
+  opacity: 0.65;
+}
+
+.qt-storyteller-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.qt-storyteller-card-name {
+  flex: 1 1 0%;
+  min-width: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qt-storyteller-plan {
+  font-style: italic;
+  color: var(--qt-storyteller-plan-fg, var(--color-foreground));
+}
+
+.qt-storyteller-meta {
+  font-size: 0.6875rem;
+  color: var(--qt-storyteller-meta-fg, var(--color-muted-foreground));
+}
+
+.qt-storyteller-warning {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--qt-storyteller-warning-fg, var(--color-destructive));
+}
+
+.qt-storyteller-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+}
+
+.qt-storyteller-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qt-storyteller-meta-fg, var(--color-muted-foreground));
+}
+
+/**
+ * Pascal operator intervention — the hold dialog, the Workbench's hand toggles,
+ * and the "adjusted" badge on a Pascal chip.
+ * Mirrors app/styles/qt-components/_intervention.css.
+ */
+/* The hold dialog's body. */
+.qt-intervention {
+  color: var(--qt-intervention-fg, var(--color-foreground));
+}
+
+/* "2 more waiting." beside the header line. */
+.qt-intervention-queue {
+  font-weight: 600;
+  color: var(--qt-intervention-queue-fg, var(--color-primary));
+}
+
+/* One part of the run: parameters, roll, consult, outcome… */
+.qt-intervention-section {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--qt-intervention-section-border, var(--color-border));
+  border-radius: var(--qt-intervention-section-radius, 0.5rem);
+}
+
+/* A section the operator has changed. */
+.qt-intervention-section--pinned {
+  border-color: var(--qt-intervention-pinned-border, var(--color-primary));
+}
+
+/* The reset control: unpins the section. */
+.qt-intervention-reset {
+  text-decoration: underline;
+  color: var(--qt-intervention-reset-fg, var(--color-primary));
+  cursor: pointer;
+}
+
+/* One outcome row; click to force it. Wears the .qt-pascal-result accent. */
+.qt-intervention-row {
+  display: block;
+  width: 100%;
+  text-align: left;
+  opacity: 0.75;
+  cursor: pointer;
+}
+
+.qt-intervention-row:hover {
+  opacity: 1;
+}
+
+/* The row that wins under the current settings. */
+.qt-intervention-row--winning {
+  opacity: 1;
+  font-weight: 600;
+  outline: 2px solid var(--qt-intervention-winning-outline, var(--color-primary));
+  outline-offset: 1px;
+}
+
+/* One declared effect, with its Auto / On / Off control. */
+.qt-intervention-effect {
+  padding: 0.375rem 0;
+  border-bottom: 1px solid var(--qt-intervention-section-border, var(--color-border));
+}
+
+.qt-intervention-effect:last-child {
+  border-bottom: none;
+}
+
+/* An advisory note: a stale answer, a forced row, a clamped parameter. */
+.qt-intervention-note {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--qt-intervention-note-fg, var(--color-warning));
+}
+
+/* The "adjusted" hand beside a Pascal chip's label. */
+.qt-intervention-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.25rem;
+  color: var(--qt-intervention-badge-fg, var(--color-muted-foreground));
+}
+
+/* The hand on an intervenable tool in the Workbench library. */
+.qt-intervention-mark {
+  display: inline-block;
+  flex-shrink: 0;
+  color: var(--qt-intervention-badge-fg, var(--color-muted-foreground));
+}
+
+/* The Workbench's per-field hand toggle: shown in the hold dialog, or not. */
+.qt-intervene-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
+  border-radius: 0.25rem;
+  color: var(--qt-intervene-toggle-fg, var(--color-primary));
+  background: transparent;
+  cursor: pointer;
+}
+
+.qt-intervene-toggle:hover {
+  background-color: var(--qt-intervene-toggle-hover-bg, var(--color-accent));
+}
+
+/* A field the author has hidden from the dialog. */
+.qt-intervene-toggle--off {
+  color: var(--qt-intervene-toggle-off-fg, var(--color-muted-foreground));
+  opacity: 0.5;
+}