@quilltap/theme-storybook 1.0.84 → 1.0.85

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.85] - 2026-10-26
+
+### Added
+- The diagram lightbox in `qt-components.css`, mirroring the app's `_content.css`: a zoom-in cursor and focus ring on a clickable `.qt-diagram-canvas[role="button"]`, the full-window `.qt-diagram-lightbox` with its toolbar (`-bar`, `-group`, `-button` with hover / pressed / disabled / focus states, `-zoom` readout, `-check` for the Transparent toggle), the pan-and-zoom `-viewport`, the drawing's `-sheet` (with a checkerboard under `[data-transparent="true"]`) and the `-hint` line. Colours read new `--qt-diagram-lightbox-*` variables, defaulting to the `--qt-overlay-*` tokens.
+
 ## [1.0.84] - 2026-10-25
 
 ### Added

package/dist/index.css

@@ -548,6 +548,15 @@ body {
     "Chalkboard SE",
     "Marker Felt",
     cursive;
+  --qt-diagram-lightbox-backdrop: var(--qt-overlay-bg);
+  --qt-diagram-lightbox-fg: var(--qt-overlay-fg);
+  --qt-diagram-lightbox-muted-fg: var(--qt-overlay-muted-fg);
+  --qt-diagram-lightbox-button-bg: var(--qt-overlay-btn-bg);
+  --qt-diagram-lightbox-button-hover-bg: var(--qt-overlay-btn-hover-bg);
+  --qt-diagram-lightbox-pressed-border: var(--qt-overlay-muted-fg);
+  --qt-diagram-lightbox-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
+  --qt-diagram-lightbox-check-a: #ffffff;
+  --qt-diagram-lightbox-check-b: #d4d4d8;
   --qt-link-color: var(--color-primary);
   --qt-link-hover-color: color-mix(in srgb, var(--color-primary) 80%, black);
   --qt-link-decoration: none;
@@ -3374,6 +3383,127 @@ body {
   white-space: pre-wrap;
   word-break: break-word;
 }
+.qt-diagram-canvas[role=button] {
+  cursor: zoom-in;
+  border-radius: var(--radius-sm);
+}
+.qt-diagram-canvas[role=button]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.qt-diagram-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  background: var(--qt-diagram-lightbox-backdrop);
+  backdrop-filter: blur(4px);
+  color: var(--qt-diagram-lightbox-fg);
+  outline: none;
+}
+.qt-diagram-lightbox-bar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+.qt-diagram-lightbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+.qt-diagram-lightbox-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: var(--qt-diagram-lightbox-button-bg);
+  color: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms;
+}
+.qt-diagram-lightbox-button:hover,
+.qt-diagram-lightbox-button[aria-pressed=true] {
+  background: var(--qt-diagram-lightbox-button-hover-bg);
+}
+.qt-diagram-lightbox-button[aria-pressed=true] {
+  border-color: var(--qt-diagram-lightbox-pressed-border);
+}
+.qt-diagram-lightbox-button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+.qt-diagram-lightbox-button:focus-visible,
+.qt-diagram-lightbox-check:focus-within {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+.qt-diagram-lightbox-zoom {
+  min-width: 3.5rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--qt-diagram-lightbox-muted-fg);
+}
+.qt-diagram-lightbox-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.qt-diagram-lightbox-check > input {
+  accent-color: var(--color-primary);
+}
+.qt-diagram-lightbox-viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: grab;
+}
+.qt-diagram-lightbox-viewport:active {
+  cursor: grabbing;
+}
+.qt-diagram-lightbox-sheet {
+  position: absolute;
+  border-radius: var(--qt-diagram-radius);
+  background: var(--qt-diagram-bg);
+  color: var(--qt-diagram-fg);
+  box-shadow: var(--qt-diagram-lightbox-shadow);
+}
+.qt-diagram-lightbox-sheet[data-transparent=true] {
+  background-color: var(--qt-diagram-lightbox-check-a);
+  background-image:
+    conic-gradient(
+      var(--qt-diagram-lightbox-check-b) 25%,
+      transparent 0 50%,
+      var(--qt-diagram-lightbox-check-b) 0 75%,
+      transparent 0);
+  background-size: 16px 16px;
+}
+.qt-diagram-lightbox-hint {
+  margin: 0;
+  padding: 0.5rem 1rem 0.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--qt-diagram-lightbox-muted-fg);
+}
 .qt-wikilink {
   color: var(--color-primary);
   font-weight: 500;

package/package.json

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

@@ -472,6 +472,17 @@
   --qt-diagram-placeholder-height: 8rem;
   --qt-diagram-font: var(--font-sans);
   --qt-diagram-hand-font: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Marker Felt", cursive;
+  /* The lightbox: the overlay's backdrop and glass buttons, a lifted sheet,
+     and the checkerboard behind a transparent copy. */
+  --qt-diagram-lightbox-backdrop: var(--qt-overlay-bg);
+  --qt-diagram-lightbox-fg: var(--qt-overlay-fg);
+  --qt-diagram-lightbox-muted-fg: var(--qt-overlay-muted-fg);
+  --qt-diagram-lightbox-button-bg: var(--qt-overlay-btn-bg);
+  --qt-diagram-lightbox-button-hover-bg: var(--qt-overlay-btn-hover-bg);
+  --qt-diagram-lightbox-pressed-border: var(--qt-overlay-muted-fg);
+  --qt-diagram-lightbox-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
+  --qt-diagram-lightbox-check-a: #ffffff;
+  --qt-diagram-lightbox-check-b: #d4d4d8;
 
   /* Link variables */
   --qt-link-color: var(--color-primary);
@@ -4219,6 +4230,151 @@
   word-break: break-word;
 }
 
+/* The drawing is also the way in: click (or Enter) to enlarge. */
+.qt-diagram-canvas[role="button"] {
+  cursor: zoom-in;
+  border-radius: var(--radius-sm);
+}
+
+.qt-diagram-canvas[role="button"]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* The lightbox: one diagram, full-window, to zoom into and copy as PNG
+   (components/chat/diagrams/DiagramLightbox.tsx). */
+.qt-diagram-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  background: var(--qt-diagram-lightbox-backdrop);
+  backdrop-filter: blur(4px);
+  color: var(--qt-diagram-lightbox-fg);
+  outline: none;
+}
+
+/* Zoom controls on the left; Transparent, Copy PNG and Close on the right. */
+.qt-diagram-lightbox-bar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+
+.qt-diagram-lightbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.qt-diagram-lightbox-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: var(--qt-diagram-lightbox-button-bg);
+  color: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms;
+}
+
+.qt-diagram-lightbox-button:hover,
+.qt-diagram-lightbox-button[aria-pressed="true"] {
+  background: var(--qt-diagram-lightbox-button-hover-bg);
+}
+
+.qt-diagram-lightbox-button[aria-pressed="true"] {
+  border-color: var(--qt-diagram-lightbox-pressed-border);
+}
+
+.qt-diagram-lightbox-button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.qt-diagram-lightbox-button:focus-visible,
+.qt-diagram-lightbox-check:focus-within {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+
+.qt-diagram-lightbox-zoom {
+  min-width: 3.5rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--qt-diagram-lightbox-muted-fg);
+}
+
+.qt-diagram-lightbox-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.qt-diagram-lightbox-check > input {
+  accent-color: var(--color-primary);
+}
+
+/* The pan-and-zoom surface. Touch gestures are all ours here. */
+.qt-diagram-lightbox-viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  cursor: grab;
+}
+
+.qt-diagram-lightbox-viewport:active {
+  cursor: grabbing;
+}
+
+/* The drawing on its own card. Sized (not transformed) by the zoom, so the
+   vector is redrawn sharp at every scale. */
+.qt-diagram-lightbox-sheet {
+  position: absolute;
+  border-radius: var(--qt-diagram-radius);
+  background: var(--qt-diagram-bg);
+  color: var(--qt-diagram-fg);
+  box-shadow: var(--qt-diagram-lightbox-shadow);
+}
+
+/* Transparent ticked: show what the PNG will carry — nothing behind it. */
+.qt-diagram-lightbox-sheet[data-transparent="true"] {
+  background-color: var(--qt-diagram-lightbox-check-a);
+  background-image: conic-gradient(
+    var(--qt-diagram-lightbox-check-b) 25%,
+    transparent 0 50%,
+    var(--qt-diagram-lightbox-check-b) 0 75%,
+    transparent 0
+  );
+  background-size: 16px 16px;
+}
+
+.qt-diagram-lightbox-hint {
+  margin: 0;
+  padding: 0.5rem 1rem 0.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--qt-diagram-lightbox-muted-fg);
+}
+
 /* ==========================================================================
    WIKILINK COMPONENTS
    ========================================================================== */