@quilltap/theme-storybook 1.0.78 → 1.0.80

package/dist/index.css

@@ -3763,6 +3763,11 @@ body {
   font-size: 0.8125rem;
   font-weight: 600;
 }
+.qt-storyteller-board-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .qt-storyteller-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
@@ -3794,6 +3799,30 @@ body {
 .qt-storyteller-card-quiet {
   opacity: 0.65;
 }
+.qt-storyteller-card-draggable {
+  cursor: grab;
+}
+.qt-storyteller-card-dragging {
+  position: relative;
+  z-index: 10;
+  cursor: grabbing;
+  opacity: 0.85;
+  box-shadow: var(--qt-storyteller-card-dragging-shadow, 0 4px 12px rgb(0 0 0 / 0.25));
+}
+.qt-storyteller-card-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  background: var(--qt-storyteller-card-order-bg, var(--color-primary));
+  color: var(--qt-storyteller-card-order-fg, var(--color-primary-foreground));
+}
 .qt-storyteller-card-head {
   display: flex;
   align-items: center;
@@ -3835,3 +3864,79 @@ body {
   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.78",
+  "version": "1.0.80",
   "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

@@ -4672,6 +4672,12 @@
   font-weight: 600;
 }
 
+.qt-storyteller-board-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .qt-storyteller-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
@@ -4709,6 +4715,35 @@
   opacity: 0.65;
 }
 
+/* A bid card can be dragged to set the running order. */
+.qt-storyteller-card-draggable {
+  cursor: grab;
+}
+
+.qt-storyteller-card-dragging {
+  position: relative;
+  z-index: 10;
+  cursor: grabbing;
+  opacity: 0.85;
+  box-shadow: var(--qt-storyteller-card-dragging-shadow, 0 4px 12px rgb(0 0 0 / 0.25));
+}
+
+/* Its place in the running order, once the operator has arranged the board. */
+.qt-storyteller-card-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  background: var(--qt-storyteller-card-order-bg, var(--color-primary));
+  color: var(--qt-storyteller-card-order-fg, var(--color-primary-foreground));
+}
+
 .qt-storyteller-card-head {
   display: flex;
   align-items: center;
@@ -4756,3 +4791,113 @@
   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;
+}