@quilltap/theme-storybook 1.0.97 → 1.0.100

package/src/css/quilltap-defaults.css

@@ -124,10 +124,17 @@
 
 /* ==========================================================================
    SEMANTIC ALIASES
-   These map theme tokens to --color-* variables used by components
+   These map theme tokens to --color-* variables used by components.
+   A var() in a custom property resolves where it is declared, so the aliases
+   are re-declared on the decorated story container ([data-theme], .dark,
+   .light) as well as :root; otherwise a .dark below :root would change the
+   --theme-* tokens and leave every --color-* alias on its light value.
    ========================================================================== */
 
-:root {
+:root,
+[data-theme],
+.dark,
+.light {
   --color-background: var(--theme-background);
   --color-foreground: var(--theme-foreground);
   --color-card: var(--theme-card);

package/src/stories/components/Badges.tsx

@@ -17,9 +17,9 @@ export const Badges: React.FC = () => {
           Badge Variants
         </h3>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
-          <span className="qt-badge qt-badge-default">Default</span>
           <span className="qt-badge qt-badge-primary">Primary</span>
           <span className="qt-badge qt-badge-secondary">Secondary</span>
+          <span className="qt-badge qt-badge-info">Info</span>
           <span className="qt-badge qt-badge-success">Success</span>
           <span className="qt-badge qt-badge-warning">Warning</span>
           <span className="qt-badge qt-badge-destructive">Destructive</span>
@@ -29,14 +29,16 @@ export const Badges: React.FC = () => {
       {/* Outline Badges */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
-          Outline Badges
+          Outline Badge
         </h3>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          There is one outline variant, used for quiet labels beside an item &mdash; a Workbench tool&apos;s
+          roll form, an Inventory kit, a scenario already in this chat.
+        </p>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
-          <span className="qt-badge qt-badge-outline">Outline</span>
-          <span className="qt-badge qt-badge-outline-primary">Primary</span>
-          <span className="qt-badge qt-badge-outline-success">Success</span>
-          <span className="qt-badge qt-badge-outline-warning">Warning</span>
-          <span className="qt-badge qt-badge-outline-destructive">Destructive</span>
+          <span className="qt-badge qt-badge-outline">dice</span>
+          <span className="qt-badge qt-badge-outline">kit</span>
+          <span className="qt-badge qt-badge-outline">in this chat</span>
         </div>
       </section>
 
@@ -46,13 +48,15 @@ export const Badges: React.FC = () => {
           Provider Badges
         </h3>
         <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
-          Used to identify AI provider sources.
+          Identify an embedding profile&apos;s provider. Each class stands alone (no <code>qt-badge</code>{' '}
+          beside it), one per embedding provider.
         </p>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
-          <span className="qt-badge qt-badge-provider-openai">OpenAI</span>
-          <span className="qt-badge qt-badge-provider-anthropic">Anthropic</span>
-          <span className="qt-badge qt-badge-provider-google">Google</span>
-          <span className="qt-badge qt-badge-provider-openrouter">OpenRouter</span>
+          <span className="qt-badge-provider-openai">OPENAI</span>
+          <span className="qt-badge-provider-ollama">OLLAMA</span>
+          <span className="qt-badge-provider-openrouter">OPENROUTER</span>
+          <span className="qt-badge-provider-nanogpt">NANOGPT</span>
+          <span className="qt-badge-provider-builtin">BUILTIN</span>
         </div>
       </section>
 

package/src/stories/components/Chat.tsx

@@ -7,6 +7,58 @@
 
 import React from 'react';
 
+/**
+ * The announcement bar's chevron. The app renders its `chevron-right` /
+ * `chevron-down` icon (sized by `.qt-chat-system-bar-chevron`); an expanded bar
+ * also carries `qt-chat-system-bar-chevron-down`, a hook with no rule of its own —
+ * the glyph itself points down. Inline SVG here, since a theme's Storybook does
+ * not serve the app's `/images/icons/` files.
+ */
+const BarChevron: React.FC<{ expanded?: boolean }> = ({ expanded = false }) => (
+  <svg
+    className={`qt-chat-system-bar-chevron${expanded ? ' qt-chat-system-bar-chevron-down' : ''}`}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points={expanded ? '6 9 12 15 18 9' : '9 18 15 12 9 6'} />
+  </svg>
+);
+
+/**
+ * The app's QuillAnimation: the `thinking` glyph rocking under
+ * `.qt-thinking-indicator`, in a box of 3rem (`lg`, awaiting a reply) or 1rem
+ * (`sm`, trailing streamed prose).
+ */
+const QuillAnimation: React.FC<{ size?: 'lg' | 'sm'; style?: React.CSSProperties }> = ({ size = 'lg', style }) => {
+  const box = size === 'lg' ? '3rem' : '1rem';
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: box, height: box, ...style }}>
+      <svg
+        className="qt-thinking-indicator"
+        width={box}
+        height={box}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        role="img"
+        aria-label="Writing…"
+      >
+        <path d="M21 3.5c-7.5 1.5-12 6-13.5 13.5 7.5-1.5 12-6 13.5-13.5Z" />
+        <path d="M19 5.5 9.5 15" />
+        <path d="m3 21 4.5-4.5" />
+      </svg>
+    </span>
+  );
+};
+
 export const Chat: React.FC = () => {
   return (
     <div style={{ padding: '1.5rem' }}>
@@ -301,7 +353,7 @@ export const Chat: React.FC = () => {
             <span className="qt-chat-system-bar-sender">The Librarian</span>
             <span className="qt-chat-system-bar-kind">edited by character</span>
             <span className="qt-chat-system-bar-time">4:12 PM</span>
-            <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+            <BarChevron />
           </button>
 
           <div className="qt-chat-announcement-group" style={{ width: '100%', margin: 0 }}>
@@ -310,21 +362,21 @@ export const Chat: React.FC = () => {
               <span className="qt-chat-system-bar-sender">The Host</span>
               <span className="qt-chat-system-bar-kind">status change</span>
               <span className="qt-chat-system-bar-time">4:13 PM</span>
-              <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+              <BarChevron />
             </button>
             <button type="button" className="qt-chat-announcement-chip">
               <span className="qt-chat-announcement-dot qt-chat-announcement-dot-medium" aria-hidden="true" />
               <span className="qt-chat-system-bar-sender">The Lantern</span>
               <span className="qt-chat-system-bar-kind">background</span>
               <span className="qt-chat-system-bar-time">4:14 PM</span>
-              <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+              <BarChevron />
             </button>
             <button type="button" className="qt-chat-announcement-chip">
               <span className="qt-chat-announcement-dot qt-chat-announcement-dot-low" aria-hidden="true" />
               <span className="qt-chat-system-bar-sender">Prospero</span>
               <span className="qt-chat-system-bar-kind">project information</span>
               <span className="qt-chat-system-bar-time">4:14 PM</span>
-              <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+              <BarChevron />
             </button>
             <button type="button" className="qt-chat-announcement-chip qt-chat-announcement-chip-whisper">
               <span className="qt-chat-announcement-dot qt-chat-announcement-dot-medium" aria-hidden="true" />
@@ -332,7 +384,7 @@ export const Chat: React.FC = () => {
               <span className="qt-chat-system-bar-kind">announcement</span>
               <span className="qt-chat-system-bar-whisper">to Amy</span>
               <span className="qt-chat-system-bar-time">4:15 PM</span>
-              <span className="qt-chat-system-bar-chevron" aria-hidden="true">&rsaquo;</span>
+              <BarChevron />
             </button>
           </div>
 
@@ -343,7 +395,7 @@ export const Chat: React.FC = () => {
             <span className="qt-chat-system-bar-kind">announcement</span>
             <span className="qt-chat-system-bar-whisper">to Amy, Bartholomew</span>
             <span className="qt-chat-system-bar-time">4:15 PM</span>
-            <span className="qt-chat-system-bar-chevron qt-chat-system-bar-chevron-down" aria-hidden="true">&rsaquo;</span>
+            <BarChevron expanded />
           </button>
         </div>
       </section>
@@ -374,7 +426,7 @@ export const Chat: React.FC = () => {
                 <span className="qt-chat-system-bar-sender">Pascal</span>
                 <span className="qt-chat-system-bar-kind">{tool}</span>
                 <span className="qt-chat-system-bar-time">4:15 PM</span>
-                <span className="qt-chat-system-bar-chevron" aria-hidden="true">&and;</span>
+                <BarChevron expanded />
               </button>
               <div className={`qt-chat-message-body qt-chat-message-assistant qt-pascal-result qt-pascal-result--${state}`}>
                 <p>🎲 <strong>{tool}</strong> &mdash; {message}</p>
@@ -552,20 +604,31 @@ export const Chat: React.FC = () => {
         </div>
       </section>
 
-      {/* Typing Indicator */}
+      {/* Writing Indicator */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
-          Typing Indicator
+          Writing Indicator
         </h3>
-        <div style={{ display: 'flex', gap: '0.5rem', maxWidth: '32rem' }}>
-          <div className="qt-avatar qt-avatar-sm">
-            <div className="qt-avatar-fallback">AI</div>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          The rocking quill (<code>.qt-thinking-indicator</code>, tuned by the <code>--qt-thinking-*</code>{' '}
+          properties): large while a reply is awaited, small at the tail of prose still streaming in.
+        </p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '32rem' }}>
+          {/* Awaiting the first token */}
+          <div className="qt-chat-message-row qt-chat-message-row-assistant">
+            <div className="qt-chat-message-body">
+              <div className="qt-text-secondary">
+                <QuillAnimation size="lg" />
+              </div>
+            </div>
           </div>
-          <div className="qt-chat-message qt-chat-message-assistant">
-            <div className="qt-typing-indicator">
-              <span></span>
-              <span></span>
-              <span></span>
+          {/* Streaming */}
+          <div className="qt-chat-message-row qt-chat-message-row-assistant">
+            <div className="qt-chat-message-body qt-chat-message-assistant">
+              <p>
+                The merchant counts the coins twice, then a third time
+                <QuillAnimation size="sm" style={{ marginLeft: '0.5rem' }} />
+              </p>
             </div>
           </div>
         </div>
@@ -733,22 +796,24 @@ export const Chat: React.FC = () => {
         <p style={{ fontSize: '0.875rem', color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
           The fact-checker&apos;s verdict on a message, shown among the message action icons. Quiet by
           design; the discrepancy notes live in a tooltip. Hover one to see its hover state.
+          Same markup as the app: <code>qt-confirmation-badge qt-text-xs</code>, a glyph and a label.{' '}
+          <code>qt-confirmation-badge-label</code> has no rule in the app; it is a hook a theme may style.
         </p>
         <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
-          <button className="qt-confirmation-badge" data-confirmation-state="vouched">
-            <span className="qt-confirmation-badge-glyph">✓</span>
+          <button type="button" className="qt-confirmation-badge qt-text-xs" data-confirmation-state="vouched">
+            <span aria-hidden="true" className="qt-confirmation-badge-glyph">✓</span>
             <span className="qt-confirmation-badge-label">Vouched</span>
           </button>
-          <button className="qt-confirmation-badge" data-confirmation-state="amended">
-            <span className="qt-confirmation-badge-glyph">✎</span>
+          <button type="button" className="qt-confirmation-badge qt-text-xs" data-confirmation-state="amended">
+            <span aria-hidden="true" className="qt-confirmation-badge-glyph">✎</span>
             <span className="qt-confirmation-badge-label">Amended</span>
           </button>
-          <button className="qt-confirmation-badge" data-confirmation-state="stood-by">
-            <span className="qt-confirmation-badge-glyph">!</span>
+          <button type="button" className="qt-confirmation-badge qt-text-xs" data-confirmation-state="stood-by">
+            <span aria-hidden="true" className="qt-confirmation-badge-glyph">!</span>
             <span className="qt-confirmation-badge-label">Stood by</span>
           </button>
-          <button className="qt-confirmation-badge" data-confirmation-state="unvetted">
-            <span className="qt-confirmation-badge-glyph">—</span>
+          <button type="button" className="qt-confirmation-badge qt-text-xs" data-confirmation-state="unvetted">
+            <span aria-hidden="true" className="qt-confirmation-badge-glyph">—</span>
             <span className="qt-confirmation-badge-label">Unvetted</span>
           </button>
         </div>

package/src/stories/components/Tabs.tsx

@@ -38,9 +38,11 @@ export const Tabs: React.FC = () => {
             Notifications
           </button>
         </div>
-        <div>
+        {/* Same shape as the app's EntityTabs: the panel itself carries no qt-* class. */}
+        <div className="qt-tab-divider" />
+        <div role="tabpanel" style={{ padding: '1rem 0' }}>
           {activeTab === 'tab1' && (
-            <div className="qt-tab-content">
+            <div>
               <h4 style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Account Settings</h4>
               <p style={{ color: 'var(--color-muted-foreground)' }}>
                 Manage your account settings and preferences.
@@ -48,7 +50,7 @@ export const Tabs: React.FC = () => {
             </div>
           )}
           {activeTab === 'tab2' && (
-            <div className="qt-tab-content">
+            <div>
               <h4 style={{ fontWeight: 600, marginBottom: '0.5rem' }}>General Settings</h4>
               <p style={{ color: 'var(--color-muted-foreground)' }}>
                 Configure general application settings.
@@ -56,7 +58,7 @@ export const Tabs: React.FC = () => {
             </div>
           )}
           {activeTab === 'tab3' && (
-            <div className="qt-tab-content">
+            <div>
               <h4 style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Notification Preferences</h4>
               <p style={{ color: 'var(--color-muted-foreground)' }}>
                 Choose how you want to receive notifications.
@@ -99,26 +101,58 @@ export const Tabs: React.FC = () => {
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
           Navigation Bar
         </h3>
-        <div className="qt-navbar">
-          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-            <div style={{ fontWeight: 700, fontSize: '1.125rem' }}>Quilltap</div>
-            <nav style={{ display: 'flex', gap: '0.25rem' }}>
-              <a href="#" className="qt-navbar-link qt-navbar-link-active">Dashboard</a>
-              <a href="#" className="qt-navbar-link">Characters</a>
-              <a href="#" className="qt-navbar-link">Chats</a>
-              <a href="#" className="qt-navbar-link">Settings</a>
-            </nav>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-            <button className="qt-button-icon" aria-label="Notifications">
-              <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-              </svg>
-            </button>
-            <div className="qt-avatar qt-avatar-sm">
-              <div className="qt-avatar-fallback">U</div>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          The <code>qt-navbar</code> family from <code>_layout.css</code>: the bar holds a{' '}
+          <code>qt-navbar-container</code>, which lays out <code>qt-navbar-section</code> groups end to end.
+          Links are <code>qt-navbar-link</code> / <code>qt-navbar-link-active</code>; icon buttons are{' '}
+          <code>qt-navbar-toggle</code> (with <code>qt-navbar-toggle-active</code> when pressed), as in the
+          app&apos;s content-width toggle.
+        </p>
+        {/* Quilltap runs on Tailwind's preflight, which strips the browser's link
+            underline and button chrome before any qt-* rule applies. Storybook has
+            no preflight, so this demo restores just that much — in the base layer,
+            beneath the qt-* component rules, so they still win. */}
+        <style>{`
+          @layer base {
+            .sb-navbar-demo a { color: inherit; text-decoration: inherit; }
+            .sb-navbar-demo button { background: transparent; border: 0; padding: 0; font: inherit; color: inherit; }
+          }
+        `}</style>
+        <div className="sb-navbar-demo">
+          <header className="qt-navbar">
+            <div className="qt-navbar-container">
+              <div className="qt-navbar-section">
+                <span className="qt-font-brand">Quilltap</span>
+                <nav aria-label="Main" className="qt-navbar-section" style={{ gap: '0.25rem' }}>
+                  <a href="#" className="qt-navbar-link-active" aria-current="page">Salon</a>
+                  <a href="#" className="qt-navbar-link">Aurora</a>
+                  <a href="#" className="qt-navbar-link">Scriptorium</a>
+                  <a href="#" className="qt-navbar-link">Settings</a>
+                </nav>
+              </div>
+              <div className="qt-navbar-section" style={{ gap: '0.5rem' }}>
+                <button type="button" className="qt-navbar-toggle" aria-label="Notifications" title="Notifications">
+                  <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                  </svg>
+                </button>
+                <button
+                  type="button"
+                  className="qt-navbar-toggle qt-navbar-toggle-active"
+                  aria-label="Switch to narrow layout"
+                  title="Switch to narrow layout"
+                  aria-pressed={true}
+                >
+                  <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9L4 4m0 0v4m0-4h4m6 5l5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4m6-5l5 5m0 0v-4m0 4h-4" />
+                  </svg>
+                </button>
+                <div className="qt-avatar qt-avatar-sm">
+                  <div className="qt-avatar-fallback">U</div>
+                </div>
+              </div>
             </div>
-          </div>
+          </header>
         </div>
       </section>
     </div>

package/src/stories/components/ThemeComparison.tsx

@@ -183,9 +183,9 @@ export const ThemeComparison: React.FC = () => {
         <div style={{ marginBottom: '1.5rem' }}>
           <h4 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.75rem', color: 'var(--color-muted-foreground)' }}>Badges</h4>
           <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
-            <span className="qt-badge qt-badge-default">Default</span>
             <span className="qt-badge qt-badge-primary">Primary</span>
             <span className="qt-badge qt-badge-secondary">Secondary</span>
+            <span className="qt-badge qt-badge-info">Info</span>
             <span className="qt-badge qt-badge-success">Success</span>
             <span className="qt-badge qt-badge-warning">Warning</span>
             <span className="qt-badge qt-badge-destructive">Destructive</span>