@quilltap/theme-storybook 1.0.59 → 1.0.61

package/dist/{chunk-4XVTTTDV.mjs → chunk-XSNC4J5T.mjs}

@@ -1773,7 +1773,7 @@ var Chat = () => {
           /* @__PURE__ */ jsx14("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
           /* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-summary", children: [
             /* @__PURE__ */ jsx14("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
-            /* @__PURE__ */ jsx14("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
+            /* @__PURE__ */ jsx14("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear), Marcel Waves (hair)" })
           ] })
         ] }),
         /* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-notice", children: [

package/dist/index.css

@@ -286,6 +286,10 @@ body {
   --qt-status-danger-bg: color-mix(in srgb, var(--color-destructive) 85%, transparent);
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
+  --qt-badge-primary-bg: var(--color-primary);
+  --qt-badge-primary-fg: var(--color-primary-foreground);
+  --qt-badge-secondary-bg: var(--color-secondary);
+  --qt-badge-secondary-fg: var(--color-secondary-foreground);
   --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
   --qt-alert-success-fg: hsl(142 76% 30%);
   --qt-alert-success-border: hsl(142 76% 36% / 0.3);
@@ -312,6 +316,18 @@ body {
   --qt-badge-message-fg: hsl(45 70% 35%);
   --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
   --qt-badge-project-fg: hsl(185 80% 30%);
+  --qt-badge-wardrobe-top-bg: hsl(220 60% 55% / 0.12);
+  --qt-badge-wardrobe-top-fg: hsl(220 60% 42%);
+  --qt-badge-wardrobe-bottom-bg: hsl(152 50% 38% / 0.12);
+  --qt-badge-wardrobe-bottom-fg: hsl(152 50% 30%);
+  --qt-badge-wardrobe-footwear-bg: hsl(38 70% 48% / 0.12);
+  --qt-badge-wardrobe-footwear-fg: hsl(38 70% 38%);
+  --qt-badge-wardrobe-accessories-bg: hsl(270 45% 55% / 0.12);
+  --qt-badge-wardrobe-accessories-fg: hsl(270 45% 42%);
+  --qt-badge-wardrobe-hair-bg: hsl(345 55% 55% / 0.12);
+  --qt-badge-wardrobe-hair-fg: hsl(345 55% 42%);
+  --qt-badge-wardrobe-shared-bg: hsl(240 50% 55% / 0.12);
+  --qt-badge-wardrobe-shared-fg: hsl(240 50% 42%);
   --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
   --qt-badge-enabled-fg: hsl(142 76% 30%);
   --qt-badge-disabled-bg: var(--color-muted);
@@ -876,6 +892,84 @@ body {
   color: var(--color-foreground);
   border: 1px solid var(--color-border);
 }
+.qt-badge-provider-openai,
+.qt-badge-provider-ollama,
+.qt-badge-provider-openrouter,
+.qt-badge-provider-nanogpt,
+.qt-badge-provider-builtin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+.qt-badge-provider-openai {
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
+}
+.qt-badge-provider-ollama {
+  background: var(--qt-badge-secondary-bg);
+  color: var(--qt-badge-secondary-fg);
+  border: 1px solid var(--qt-badge-secondary-border);
+}
+.qt-badge-provider-openrouter {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+.qt-badge-provider-nanogpt {
+  background: var(--qt-badge-primary-bg);
+  color: var(--qt-badge-primary-fg);
+  border: 1px solid var(--qt-badge-primary-border);
+}
+.qt-badge-provider-builtin {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+.qt-badge-wardrobe-top,
+.qt-badge-wardrobe-bottom,
+.qt-badge-wardrobe-footwear,
+.qt-badge-wardrobe-accessories,
+.qt-badge-wardrobe-hair,
+.qt-badge-wardrobe-shared {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+.qt-badge-wardrobe-top {
+  background-color: var(--qt-badge-wardrobe-top-bg);
+  color: var(--qt-badge-wardrobe-top-fg);
+}
+.qt-badge-wardrobe-bottom {
+  background-color: var(--qt-badge-wardrobe-bottom-bg);
+  color: var(--qt-badge-wardrobe-bottom-fg);
+}
+.qt-badge-wardrobe-footwear {
+  background-color: var(--qt-badge-wardrobe-footwear-bg);
+  color: var(--qt-badge-wardrobe-footwear-fg);
+}
+.qt-badge-wardrobe-accessories {
+  background-color: var(--qt-badge-wardrobe-accessories-bg);
+  color: var(--qt-badge-wardrobe-accessories-fg);
+}
+.qt-badge-wardrobe-hair {
+  background-color: var(--qt-badge-wardrobe-hair-bg);
+  color: var(--qt-badge-wardrobe-hair-fg);
+}
+.qt-badge-wardrobe-shared {
+  background-color: var(--qt-badge-wardrobe-shared-bg);
+  color: var(--qt-badge-wardrobe-shared-fg);
+}
 .qt-avatar {
   display: inline-flex;
   align-items: center;
@@ -2495,6 +2589,18 @@ body {
   --qt-badge-message-fg: hsl(45 70% 68%);
   --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
   --qt-badge-project-fg: hsl(185 80% 70%);
+  --qt-badge-wardrobe-top-bg: hsl(220 60% 58% / 0.25);
+  --qt-badge-wardrobe-top-fg: hsl(220 60% 72%);
+  --qt-badge-wardrobe-bottom-bg: hsl(152 50% 40% / 0.25);
+  --qt-badge-wardrobe-bottom-fg: hsl(152 50% 62%);
+  --qt-badge-wardrobe-footwear-bg: hsl(38 70% 50% / 0.25);
+  --qt-badge-wardrobe-footwear-fg: hsl(38 70% 68%);
+  --qt-badge-wardrobe-accessories-bg: hsl(270 45% 58% / 0.25);
+  --qt-badge-wardrobe-accessories-fg: hsl(270 45% 72%);
+  --qt-badge-wardrobe-hair-bg: hsl(345 55% 58% / 0.25);
+  --qt-badge-wardrobe-hair-fg: hsl(345 55% 72%);
+  --qt-badge-wardrobe-shared-bg: hsl(240 50% 58% / 0.25);
+  --qt-badge-wardrobe-shared-fg: hsl(240 50% 72%);
   --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
   --qt-badge-enabled-fg: hsl(142 76% 65%);
   --qt-badge-related-bg: hsl(270 70% 60% / 0.3);

package/dist/index.js

@@ -1883,7 +1883,7 @@ var Chat = () => {
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-chat-wardrobe-summary", children: [
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear), Marcel Waves (hair)" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-chat-wardrobe-notice", children: [

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "./chunk-4XVTTTDV.mjs";
+} from "./chunk-XSNC4J5T.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -1820,7 +1820,7 @@ var Chat = () => {
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "qt-chat-wardrobe-summary", children: [
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear), Marcel Waves (hair)" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "qt-chat-wardrobe-notice", children: [

package/dist/stories/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "../chunk-4XVTTTDV.mjs";
+} from "../chunk-XSNC4J5T.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

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

@@ -160,6 +160,12 @@
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
 
+  /* Badge palette tokens - referenced by the provider badges */
+  --qt-badge-primary-bg: var(--color-primary);
+  --qt-badge-primary-fg: var(--color-primary-foreground);
+  --qt-badge-secondary-bg: var(--color-secondary);
+  --qt-badge-secondary-fg: var(--color-secondary-foreground);
+
   /* Alert tokens - semi-transparent backgrounds with readable text */
   --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
   --qt-alert-success-fg: hsl(142 76% 30%);
@@ -193,6 +199,20 @@
   --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
   --qt-badge-project-fg: hsl(185 80% 30%);
 
+  /* Wardrobe slot badge colors */
+  --qt-badge-wardrobe-top-bg: hsl(220 60% 55% / 0.12);
+  --qt-badge-wardrobe-top-fg: hsl(220 60% 42%);
+  --qt-badge-wardrobe-bottom-bg: hsl(152 50% 38% / 0.12);
+  --qt-badge-wardrobe-bottom-fg: hsl(152 50% 30%);
+  --qt-badge-wardrobe-footwear-bg: hsl(38 70% 48% / 0.12);
+  --qt-badge-wardrobe-footwear-fg: hsl(38 70% 38%);
+  --qt-badge-wardrobe-accessories-bg: hsl(270 45% 55% / 0.12);
+  --qt-badge-wardrobe-accessories-fg: hsl(270 45% 42%);
+  --qt-badge-wardrobe-hair-bg: hsl(345 55% 55% / 0.12);
+  --qt-badge-wardrobe-hair-fg: hsl(345 55% 42%);
+  --qt-badge-wardrobe-shared-bg: hsl(240 50% 55% / 0.12);
+  --qt-badge-wardrobe-shared-fg: hsl(240 50% 42%);
+
   /* Status badge colors */
   --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
   --qt-badge-enabled-fg: hsl(142 76% 30%);
@@ -905,6 +925,153 @@
   border: 1px solid var(--color-border);
 }
 
+/* ==========================================================================
+   PROVIDER BADGES
+   ========================================================================== */
+
+/**
+ * Shared geometry for the provider badges (embedding-profile provider chips).
+ * These do NOT build on .qt-badge in the app — they carry their own box, so
+ * the rule below is self-contained (and, mirroring the app, sets no
+ * line-height).
+ */
+.qt-badge-provider-openai,
+.qt-badge-provider-ollama,
+.qt-badge-provider-openrouter,
+.qt-badge-provider-nanogpt,
+.qt-badge-provider-builtin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+
+/**
+ * OpenAI provider badge (green/success semantic)
+ */
+.qt-badge-provider-openai {
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
+}
+
+/**
+ * Ollama provider badge (secondary/muted)
+ * Mirrors the app, quirk included: --qt-badge-secondary-border has no default
+ * definition, so the border only renders in themes that define it.
+ */
+.qt-badge-provider-ollama {
+  background: var(--qt-badge-secondary-bg);
+  color: var(--qt-badge-secondary-fg);
+  border: 1px solid var(--qt-badge-secondary-border);
+}
+
+/**
+ * OpenRouter provider badge (warning/orange semantic)
+ */
+.qt-badge-provider-openrouter {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+
+/**
+ * NanoGPT provider badge (primary/accent semantic)
+ * Same border quirk as the ollama badge: --qt-badge-primary-border has no
+ * default definition.
+ */
+.qt-badge-provider-nanogpt {
+  background: var(--qt-badge-primary-bg);
+  color: var(--qt-badge-primary-fg);
+  border: 1px solid var(--qt-badge-primary-border);
+}
+
+/**
+ * Built-in provider badge (info/blue semantic)
+ */
+.qt-badge-provider-builtin {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+
+/* ==========================================================================
+   WARDROBE SLOT BADGES
+   ========================================================================== */
+
+/**
+ * Shared geometry for the wardrobe slot chips. These do NOT build on
+ * .qt-badge in the app — they carry their own box, so the rule below is
+ * self-contained (and, mirroring the app, sets no line-height).
+ */
+.qt-badge-wardrobe-top,
+.qt-badge-wardrobe-bottom,
+.qt-badge-wardrobe-footwear,
+.qt-badge-wardrobe-accessories,
+.qt-badge-wardrobe-hair,
+.qt-badge-wardrobe-shared {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+
+/**
+ * Wardrobe top badge (blue)
+ */
+.qt-badge-wardrobe-top {
+  background-color: var(--qt-badge-wardrobe-top-bg);
+  color: var(--qt-badge-wardrobe-top-fg);
+}
+
+/**
+ * Wardrobe bottom badge (green)
+ */
+.qt-badge-wardrobe-bottom {
+  background-color: var(--qt-badge-wardrobe-bottom-bg);
+  color: var(--qt-badge-wardrobe-bottom-fg);
+}
+
+/**
+ * Wardrobe footwear badge (amber)
+ */
+.qt-badge-wardrobe-footwear {
+  background-color: var(--qt-badge-wardrobe-footwear-bg);
+  color: var(--qt-badge-wardrobe-footwear-fg);
+}
+
+/**
+ * Wardrobe accessories badge (purple)
+ */
+.qt-badge-wardrobe-accessories {
+  background-color: var(--qt-badge-wardrobe-accessories-bg);
+  color: var(--qt-badge-wardrobe-accessories-fg);
+}
+
+/**
+ * Wardrobe hair badge (rose)
+ */
+.qt-badge-wardrobe-hair {
+  background-color: var(--qt-badge-wardrobe-hair-bg);
+  color: var(--qt-badge-wardrobe-hair-fg);
+}
+
+/**
+ * Wardrobe shared/archetype badge (indigo)
+ */
+.qt-badge-wardrobe-shared {
+  background-color: var(--qt-badge-wardrobe-shared-bg);
+  color: var(--qt-badge-wardrobe-shared-fg);
+}
+
 /* ==========================================================================
    AVATAR COMPONENTS
    ========================================================================== */
@@ -3053,6 +3220,20 @@
   --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
   --qt-badge-project-fg: hsl(185 80% 70%);
 
+  /* Wardrobe slot badge tokens - brighter for dark backgrounds */
+  --qt-badge-wardrobe-top-bg: hsl(220 60% 58% / 0.25);
+  --qt-badge-wardrobe-top-fg: hsl(220 60% 72%);
+  --qt-badge-wardrobe-bottom-bg: hsl(152 50% 40% / 0.25);
+  --qt-badge-wardrobe-bottom-fg: hsl(152 50% 62%);
+  --qt-badge-wardrobe-footwear-bg: hsl(38 70% 50% / 0.25);
+  --qt-badge-wardrobe-footwear-fg: hsl(38 70% 68%);
+  --qt-badge-wardrobe-accessories-bg: hsl(270 45% 58% / 0.25);
+  --qt-badge-wardrobe-accessories-fg: hsl(270 45% 72%);
+  --qt-badge-wardrobe-hair-bg: hsl(345 55% 58% / 0.25);
+  --qt-badge-wardrobe-hair-fg: hsl(345 55% 72%);
+  --qt-badge-wardrobe-shared-bg: hsl(240 50% 58% / 0.25);
+  --qt-badge-wardrobe-shared-fg: hsl(240 50% 72%);
+
   /* Status badge tokens */
   --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
   --qt-badge-enabled-fg: hsl(142 76% 65%);

package/src/stories/components/Chat.tsx

@@ -399,7 +399,10 @@ export const Chat: React.FC = () => {
             <div className="qt-chat-wardrobe-label">Wardrobe</div>
             <div className="qt-chat-wardrobe-summary">
               <div>Equipped &ldquo;Crimson Evening Gown&rdquo; in the top slot.</div>
-              <div>Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)</div>
+              <div>
+                Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear), Marcel
+                Waves (hair)
+              </div>
             </div>
           </div>