@quilltap/theme-storybook 1.0.77 → 1.0.78

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,134 @@ 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));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "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,161 @@
   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));
+}