@quilltap/theme-storybook 1.0.97 → 1.0.100

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.100] - 2026-11-03
+
+### Fixed
+- Stories no longer use `qt-*` classes the app does not define. Each demo now uses the class names and markup of the app component it shows:
+  - Badges: the variants are primary, secondary, info, success, warning, destructive and the single `qt-badge-outline` (`qt-badge-default` and `qt-badge-outline-{primary,success,warning,destructive}` never existed). Provider badges are the five embedding providers (`openai`, `ollama`, `openrouter`, `nanogpt`, `builtin`), each class standing alone as in `ProviderBadge`; `anthropic` and `google` never existed. The ThemeComparison badge row follows.
+  - Chat: announcement-bar chevrons are SVG `chevron-right` / `chevron-down` glyphs sized by `qt-chat-system-bar-chevron`, as `AnnouncementChip` renders them (expanded bars, Pascal's included, point down and keep the `qt-chat-system-bar-chevron-down` hook). The "Typing Indicator" (`qt-typing-indicator`) is replaced by the app's writing indicator: the rocking `thinking` quill under `qt-thinking-indicator`, large while a reply is awaited and small after streaming prose. Confirmation badges carry `qt-text-xs`, `type="button"` and an `aria-hidden` glyph, as `ConfirmationBadge` does; `qt-confirmation-badge-label` stays, as an unstyled hook the app also uses.
+  - Tabs: the Navigation Bar demo uses the `_layout.css` structure (`qt-navbar` > `qt-navbar-container` > `qt-navbar-section`), `qt-navbar-link` / `qt-navbar-link-active` links, and `qt-navbar-toggle` icon buttons. A base-layer reset scoped to the demo stands in for Tailwind's preflight, so links no longer underline and buttons no longer show browser chrome, and the actions sit on the right instead of wrapping below the links.
+
+## [1.0.99] - 2026-11-02
+
+### Changed
+- `src/css/qt-components.css` is now generated from the app's `app/styles/qt-components/` by `npm run generate:storybook-css` (Tailwind's compiler, every `@apply` expanded, autoprefixed) instead of hand-mirrored. Never edit it; the app repo's lint fails when it is stale. Section comments at statement level are kept; comments inside rule bodies are not.
+- The file now carries the app's whole component surface: 334 classes the hand copy lacked are added (893 `qt-*` classes in all).
+- Hover rules compile inside `@media (hover: hover)`, as in the app, instead of a bare `:hover`.
+- Rules sit in `@layer components` / `@layer utilities` with a leading `@layer properties, theme, base, components, utilities;`, so unlayered theme CSS overrides them as it does in Quilltap. The file uses CSS nesting as Tailwind emits it.
+- Component variable defaults (`--qt-*`) now live on `[data-theme]` / `[data-theme].dark` as in the app, not on `:root`.
+- `ThemeDecorator` always sets `data-theme` (`"default"` when no theme is chosen), a `light` or `dark` class, and `data-color-mode`, matching how Quilltap marks `<html>`. Without the attribute the `--qt-*` defaults do not apply.
+- The Tabs story's panel follows the app's `EntityTabs`: a `qt-tab-divider` under the tab group and an unstyled panel.
+
+### Fixed
+- Dark mode in Storybook. `quilltap-defaults.css` declared the `--color-*` aliases only on `:root`, where they resolved against the light `--theme-*` values; the decorator's `.dark` on the story container changed `--theme-*` but no alias, so every `var(--color-*)` stayed light. The aliases are now re-declared on `[data-theme]`, `.dark` and `.light` as well.
+
+### Removed
+- Rules that existed only in the hand copy: `qt-dialog-backdrop`, `qt-hamburger`, `qt-left-sidebar-header`, `qt-left-sidebar-mobile-open`, `qt-left-sidebar-overlay`, `qt-left-sidebar-overlay-visible`, `qt-tab-content`; un-scoped copies of `qt-chat-dialogue` / `-narration` / `-ooc` / `-inner-monologue`, `qt-rp-*` and `qt-roleplay-*` (the app scopes them under `.qt-chat-message-content`); `.qt-avatar img`.
+
+## [1.0.98] - 2026-11-02
+
+### Fixed
+- Contrast and focus fixes mirrored from the app's WCAG pass: `.qt-storyteller-mode-option:hover`, `.qt-floating-dialog-close:hover` and `.qt-intervene-toggle:hover` use `--color-accent-foreground` on the accent fill; `.qt-chat-system-bar-time` drops its 0.75 opacity; `.qt-tab-close` rests at 0.8 opacity; `.qt-chat-system-bar`, `.qt-chat-announcement-chip` and `.qt-mention-chip` get a 2px ring on `:focus-visible`.
+
+### Added
+- `.qt-tab-select` (the workspace tab's selectable button) and a focus ring on `.qt-tab-strip .qt-tab:has(.qt-tab-select:focus-visible)`.
+- Families the mirror was missing: alerts (`qt-alert*`, with secondary text and links inheriting the alert colour and links underlined), the footer (`qt-footer*`, path without opacity), settings form shells (`qt-settings-shell*`, `-section-heading`, `-field-group`, `-toggle-row` with an accent-foreground hover) and the settings page's story-background treatment (inactive tab tint 90/10).
+
 ## [1.0.97] - 2026-11-02
 
 ### Fixed

package/README.md

@@ -55,7 +55,7 @@ export default preview;
 
 The package provides two CSS files:
 - `quilltap-defaults.css` - Default theme tokens (colors, fonts, spacing)
-- `qt-components.css` - Component class definitions
+- `qt-components.css` - Component class definitions, generated from Quilltap's own source (see [Where the component rules come from](#where-the-component-rules-come-from))
 
 Import them in your preview or let the preset handle it:
 
@@ -244,7 +244,7 @@ Theme plugins should define these `--theme-*` tokens, which are automatically al
 
 ## Component Classes
 
-All Quilltap components use `qt-*` prefixed classes. Your theme CSS can override these classes to customize component appearance beyond color tokens.
+All Quilltap components use `qt-*` prefixed classes; the lists below are a sample, and `qt-components.css` has the full set. Your theme CSS can override these classes to customize component appearance beyond color tokens.
 
 ### Buttons
 - `.qt-button` - Base button styles
@@ -272,14 +272,12 @@ All Quilltap components use `qt-*` prefixed classes. Your theme CSS can override
 ### Badges
 - `.qt-badge` - Base badge
 - `.qt-badge-primary`, `.qt-badge-secondary`, etc. - Variants
-- `.qt-badge-outline-*` - Outline variants
+- `.qt-badge-outline` - Outline variant
 
 ### Chat
-- `.qt-chat-message` - Message container
 - `.qt-chat-message` - Chat message container
 - `.qt-chat-message-user`, `.qt-chat-message-assistant` - Role variants
-- `.qt-chat-input` - Chat input field
-- `.qt-typing-indicator` - Typing animation
+- `.qt-chat-composer` - Message composer
 
 ### Dialogs
 - `.qt-dialog-overlay` - Modal backdrop
@@ -303,7 +301,7 @@ All Quilltap components use `qt-*` prefixed classes. Your theme CSS can override
 
 ### ThemeDecorator
 
-A Storybook decorator that applies theme classes and handles dark mode:
+A Storybook decorator that marks the story container the way Quilltap marks `<html>`: `data-theme` is always set (`"default"` when no theme is chosen), the colour mode is a `light` or `dark` class, and `data-color-mode` mirrors it. The component variable defaults in `qt-components.css` sit on `[data-theme]` and `[data-theme].dark`, so a custom decorator must set the attribute too.
 
 ```typescript
 import { ThemeDecorator } from '@quilltap/theme-storybook';
@@ -327,6 +325,19 @@ import '@quilltap/theme-storybook/css/quilltap-defaults.css';
 import '@quilltap/theme-storybook/css/qt-components.css';
 ```
 
+## Where the component rules come from
+
+`css/qt-components.css` is not written by hand. It is generated from Quilltap's `app/styles/qt-components/*.css` by `npm run generate:storybook-css` in the [quilltap-server](https://github.com/foundry-9/quilltap-server) repository: Tailwind's compiler expands every `@apply` against the same token map the app uses, and the output is autoprefixed. The repository's lint fails if the committed file is stale, so it always matches the app at the package's version.
+
+What that means for a theme author:
+
+- **Every `qt-*` class the app uses is present**, with the app's values.
+- **Rules are layered as in the app.** Component rules sit in `@layer components` (and the `qt-bg-*` / `qt-text-*` / `qt-border-*` families in `@layer utilities`); your theme CSS, unlayered, overrides them without needing extra specificity.
+- **Hover is media-gated** (`@media (hover: hover)`), as in the app, so touch devices see the same behaviour in Storybook as in Quilltap.
+- **CSS nesting** appears as Tailwind emits it (`&:hover`, nested `@media`).
+- **Section comments are kept; comments inside rules are not.** For the reasoning behind a rule, read the app source named in the section banner.
+- **Icon defaults** (`[data-icon]`) point at `/images/icons/*.svg`, served by Quilltap but not by your Storybook. Serve them yourself if you render `qt-icon` elements in stories.
+
 ## License
 
 MIT - Part of the Quilltap project by Foundry-9 LLC

package/dist/index.d.mts

@@ -14,8 +14,12 @@ import 'react';
 /**
  * Theme decorator that wraps stories with theme context
  *
- * Applies the selected theme and color mode to the story container.
- * Themes are applied via data-theme attribute, color mode via .dark class.
+ * Applies the selected theme and color mode to the story container the way
+ * Quilltap applies them to <html>: data-theme is always set ("default" when no
+ * theme is chosen), the color mode is a .light or .dark class, and
+ * data-color-mode mirrors it. qt-components.css is compiled from the app, so
+ * its variable defaults sit on [data-theme] / [data-theme].dark and need the
+ * attribute present to apply.
  */
 declare const ThemeDecorator: Decorator;
 /**

package/dist/index.d.ts

@@ -14,8 +14,12 @@ import 'react';
 /**
  * Theme decorator that wraps stories with theme context
  *
- * Applies the selected theme and color mode to the story container.
- * Themes are applied via data-theme attribute, color mode via .dark class.
+ * Applies the selected theme and color mode to the story container the way
+ * Quilltap applies them to <html>: data-theme is always set ("default" when no
+ * theme is chosen), the color mode is a .light or .dark class, and
+ * data-color-mode mirrors it. qt-components.css is compiled from the app, so
+ * its variable defaults sit on [data-theme] / [data-theme].dark and need the
+ * attribute present to apply.
  */
 declare const ThemeDecorator: Decorator;
 /**