@quilltap/theme-storybook 1.0.88 → 1.0.90

package/dist/index.css

@@ -19,11 +19,11 @@
   --theme-border: hsl(225 10% 87%);
   --theme-input: hsl(225 10% 87%);
   --theme-ring: hsl(225 65% 48%);
-  --theme-success: hsl(152 60% 38%);
+  --theme-success: hsl(152 60% 31%);
   --theme-success-foreground: hsl(0 0% 100%);
-  --theme-warning: hsl(38 90% 46%);
-  --theme-warning-foreground: hsl(0 0% 10%);
-  --theme-info: hsl(210 75% 48%);
+  --theme-warning: hsl(38 90% 32%);
+  --theme-warning-foreground: hsl(0 0% 100%);
+  --theme-info: hsl(210 75% 44.5%);
   --theme-info-foreground: hsl(0 0% 100%);
   --theme-chat-user: hsl(225 62% 50%);
   --theme-chat-user-foreground: hsl(0 0% 100%);
@@ -76,20 +76,20 @@
   --theme-secondary: hsl(225 14% 17%);
   --theme-secondary-foreground: hsl(225 10% 85%);
   --theme-muted: hsl(225 12% 14%);
-  --theme-muted-foreground: hsl(225 8% 56%);
+  --theme-muted-foreground: hsl(225 8% 58%);
   --theme-accent: hsl(225 14% 18%);
   --theme-accent-foreground: hsl(225 10% 85%);
-  --theme-destructive: hsl(0 60% 54%);
-  --theme-destructive-foreground: hsl(0 0% 100%);
+  --theme-destructive: hsl(0 60% 62%);
+  --theme-destructive-foreground: hsl(225 18% 9%);
   --theme-border: hsl(225 12% 20%);
   --theme-input: hsl(225 12% 20%);
   --theme-ring: hsl(225 55% 60%);
   --theme-success: hsl(152 55% 44%);
-  --theme-success-foreground: hsl(0 0% 100%);
+  --theme-success-foreground: hsl(225 18% 9%);
   --theme-warning: hsl(38 85% 52%);
   --theme-warning-foreground: hsl(0 0% 10%);
   --theme-info: hsl(210 70% 58%);
-  --theme-info-foreground: hsl(0 0% 100%);
+  --theme-info-foreground: hsl(225 18% 9%);
   --theme-chat-user: hsl(225 60% 56%);
   --theme-chat-user-foreground: hsl(0 0% 100%);
 }
@@ -445,7 +445,7 @@ body {
   --qt-queue-badge-memory-fg: hsl(0 0% 100%);
   --qt-queue-badge-embedding-bg: hsl(270 50% 48%);
   --qt-queue-badge-embedding-fg: hsl(0 0% 100%);
-  --qt-queue-badge-summary-bg: hsl(152 55% 38%);
+  --qt-queue-badge-summary-bg: hsl(152 55% 33.5%);
   --qt-queue-badge-summary-fg: hsl(0 0% 100%);
   --qt-queue-badge-danger-bg: hsl(0 60% 48%);
   --qt-queue-badge-danger-fg: hsl(0 0% 100%);
@@ -2748,6 +2748,18 @@ body {
 .qt-text-danger {
   color: var(--color-destructive);
 }
+.qt-text-success-foreground {
+  color: var(--color-success-foreground);
+}
+.qt-text-warning-foreground {
+  color: var(--color-warning-foreground);
+}
+.qt-text-info-foreground {
+  color: var(--color-info-foreground);
+}
+.qt-text-destructive-foreground {
+  color: var(--color-destructive-foreground);
+}
 .qt-border-primary {
   border-color: var(--color-primary);
 }
@@ -3148,6 +3160,53 @@ body {
   min-width: 0;
   height: 100%;
 }
+.qt-page-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: var(--qt-app-header-bg);
+  backdrop-filter: var(--qt-app-header-blur);
+  -webkit-backdrop-filter: var(--qt-app-header-blur);
+}
+.qt-page-toolbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 2.5rem;
+}
+.qt-page-toolbar-center {
+  flex: 1 1 0%;
+  display: flex;
+  justify-content: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  max-width: 32rem;
+}
+.qt-page-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 2.5rem;
+  justify-content: flex-end;
+}
+@media (min-width: 768px) {
+  .qt-page-toolbar-left {
+    min-width: 0;
+  }
+}
+@media (max-width: 639px) {
+  .qt-page-toolbar {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
+  .qt-page-toolbar-right {
+    flex-basis: 100%;
+    justify-content: center;
+  }
+}
 .qt-app-header {
   display: flex;
   align-items: center;
@@ -3610,7 +3669,7 @@ body {
 .dark {
   --qt-queue-badge-memory-bg: hsl(225 55% 55%);
   --qt-queue-badge-embedding-bg: hsl(270 50% 55%);
-  --qt-queue-badge-summary-bg: hsl(152 50% 42%);
+  --qt-queue-badge-summary-bg: hsl(152 50% 34.5%);
   --qt-queue-badge-danger-bg: hsl(0 60% 52%);
   --qt-queue-badge-story-bg: hsl(225 12% 44%);
   --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
@@ -3716,6 +3775,24 @@ body {
 .qt-tab-divider {
   border-top: 1px solid var(--qt-tab-divider-color);
 }
+.qt-skip-link {
+  position: absolute;
+  left: 0.5rem;
+  top: -10rem;
+  z-index: 60;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+.qt-skip-link:focus {
+  top: 0.5rem;
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
 .qt-tab-strip {
   display: flex;
   align-items: flex-end;
@@ -3758,9 +3835,9 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.15rem;
-  height: 1.15rem;
-  margin-left: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: -0.175rem -0.25rem -0.175rem 0;
   border-radius: 0.25rem;
   opacity: 0.55;
   transition: opacity 0.15s ease, background 0.15s ease;
@@ -4391,3 +4468,12 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
       currentColor calc(50% + 0.75px),
       transparent calc(50% + 0.75px));
 }
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/package.json

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

@@ -348,7 +348,7 @@
   --qt-queue-badge-memory-fg: hsl(0 0% 100%);
   --qt-queue-badge-embedding-bg: hsl(270 50% 48%);
   --qt-queue-badge-embedding-fg: hsl(0 0% 100%);
-  --qt-queue-badge-summary-bg: hsl(152 55% 38%);
+  --qt-queue-badge-summary-bg: hsl(152 55% 33.5%);
   --qt-queue-badge-summary-fg: hsl(0 0% 100%);
   --qt-queue-badge-danger-bg: hsl(0 60% 48%);
   --qt-queue-badge-danger-fg: hsl(0 0% 100%);
@@ -3414,6 +3414,23 @@
   color: var(--color-destructive);
 }
 
+/* Text on a status fill */
+.qt-text-success-foreground {
+  color: var(--color-success-foreground);
+}
+
+.qt-text-warning-foreground {
+  color: var(--color-warning-foreground);
+}
+
+.qt-text-info-foreground {
+  color: var(--color-info-foreground);
+}
+
+.qt-text-destructive-foreground {
+  color: var(--color-destructive-foreground);
+}
+
 /* Border utilities */
 .qt-border-primary {
   border-color: var(--color-primary);
@@ -3954,6 +3971,66 @@
   height: 100%;
 }
 
+/* Page toolbar - top toolbar with search and actions */
+.qt-page-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: var(--qt-app-header-bg);
+  backdrop-filter: var(--qt-app-header-blur);
+  -webkit-backdrop-filter: var(--qt-app-header-blur);
+}
+
+.qt-page-toolbar-left {
+  display: flex;
+  align-items: center;
+  /* Reserve space for hamburger on mobile, empty on desktop */
+  min-width: 2.5rem;
+}
+
+.qt-page-toolbar-center {
+  flex: 1 1 0%;
+  display: flex;
+  justify-content: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  max-width: 32rem;
+}
+
+.qt-page-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  /* Balance with left section */
+  min-width: 2.5rem;
+  justify-content: flex-end;
+}
+
+/* On desktop, hide the left placeholder when hamburger is hidden */
+@media (min-width: 768px) {
+  .qt-page-toolbar-left {
+    min-width: 0;
+  }
+}
+
+/* Phone widths: the queue badges take a row of their own rather than
+   sliding under the search button (WCAG 1.4.10 reflow). */
+@media (max-width: 639px) {
+  .qt-page-toolbar {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
+
+  .qt-page-toolbar-right {
+    flex-basis: 100%;
+    justify-content: center;
+  }
+}
+
 .qt-app-header {
   display: flex;
   align-items: center;
@@ -4530,7 +4607,7 @@
   /* Queue status badges — dark mode */
   --qt-queue-badge-memory-bg: hsl(225 55% 55%);
   --qt-queue-badge-embedding-bg: hsl(270 50% 55%);
-  --qt-queue-badge-summary-bg: hsl(152 50% 42%);
+  --qt-queue-badge-summary-bg: hsl(152 50% 34.5%);
   --qt-queue-badge-danger-bg: hsl(0 60% 52%);
   --qt-queue-badge-story-bg: hsl(225 12% 44%);
 
@@ -4684,6 +4761,27 @@
   border-top: 1px solid var(--qt-tab-divider-color);
 }
 
+/* Skip link - first stop for the keyboard, hidden until focused (WCAG 2.4.1) */
+.qt-skip-link {
+  position: absolute;
+  left: 0.5rem;
+  top: -10rem;
+  z-index: 60; /* above the sticky toolbar and the sidebar rail */
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.qt-skip-link:focus {
+  top: 0.5rem;
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
 /* ==========================================================================
    WORKSPACE  (tabbed two-pane shell — strip, divider, drop-zone)
 
@@ -4744,9 +4842,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.15rem;
-  height: 1.15rem;
-  margin-left: 0.125rem;
+  /* 24px: the WCAG 2.5.8 minimum target. The negative margin keeps the tab's footprint. */
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: -0.175rem -0.25rem -0.175rem 0;
   border-radius: 0.25rem;
   opacity: 0.55;
   transition: opacity 0.15s ease, background 0.15s ease;
@@ -5450,3 +5549,16 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
     transparent calc(50% + 0.75px)
   );
 }
+
+/* ============================================================================
+   REDUCED MOTION — every theme honours the OS setting
+   ============================================================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/src/css/quilltap-defaults.css

@@ -54,11 +54,11 @@
   --theme-ring: hsl(225 65% 48%);
 
   /* Status colors */
-  --theme-success: hsl(152 60% 38%);
+  --theme-success: hsl(152 60% 31%);
   --theme-success-foreground: hsl(0 0% 100%);
-  --theme-warning: hsl(38 90% 46%);
-  --theme-warning-foreground: hsl(0 0% 10%);
-  --theme-info: hsl(210 75% 48%);
+  --theme-warning: hsl(38 90% 32%);
+  --theme-warning-foreground: hsl(0 0% 100%);
+  --theme-info: hsl(210 75% 44.5%);
   --theme-info-foreground: hsl(0 0% 100%);
 
   /* Chat-specific colors */
@@ -99,24 +99,24 @@
   --theme-secondary-foreground: hsl(225 10% 85%);
 
   --theme-muted: hsl(225 12% 14%);
-  --theme-muted-foreground: hsl(225 8% 56%);
+  --theme-muted-foreground: hsl(225 8% 58%);
 
   --theme-accent: hsl(225 14% 18%);
   --theme-accent-foreground: hsl(225 10% 85%);
 
-  --theme-destructive: hsl(0 60% 54%);
-  --theme-destructive-foreground: hsl(0 0% 100%);
+  --theme-destructive: hsl(0 60% 62%);
+  --theme-destructive-foreground: hsl(225 18% 9%);
 
   --theme-border: hsl(225 12% 20%);
   --theme-input: hsl(225 12% 20%);
   --theme-ring: hsl(225 55% 60%);
 
   --theme-success: hsl(152 55% 44%);
-  --theme-success-foreground: hsl(0 0% 100%);
+  --theme-success-foreground: hsl(225 18% 9%);
   --theme-warning: hsl(38 85% 52%);
   --theme-warning-foreground: hsl(0 0% 10%);
   --theme-info: hsl(210 70% 58%);
-  --theme-info-foreground: hsl(0 0% 100%);
+  --theme-info-foreground: hsl(225 18% 9%);
 
   --theme-chat-user: hsl(225 60% 56%);
   --theme-chat-user-foreground: hsl(0 0% 100%);