@quilltap/theme-storybook 1.0.23 → 1.0.25

package/README.md

@@ -261,6 +261,7 @@ All Quilltap components use `qt-*` prefixed classes. Your theme CSS can override
 - `.qt-card-title`, `.qt-card-description` - Card text
 - `.qt-card-interactive` - Hoverable card
 - `.qt-entity-card` - Character/entity list card
+- `.qt-character-card` - Compact character card (homepage grid)
 - `.qt-panel` - Panel variant
 
 ### Inputs

package/dist/{chunk-45RKCZL3.mjs → chunk-VCF2M2TP.mjs}

@@ -542,6 +542,23 @@ var Cards = () => {
         ] })
       ] }) }, name)) })
     ] }),
+    /* @__PURE__ */ jsxs5("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ jsx5("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Cards" }),
+      /* @__PURE__ */ jsx5("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Compact cards used on the homepage grid. Centered layout with avatar, name, title, provider badge, and action." }),
+      /* @__PURE__ */ jsx5("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 140px))", gap: "0.75rem" }, children: [
+        { name: "Alice", title: "The Adventurer", provider: "Claude Sonnet" },
+        { name: "Bob", title: "The Keeper of Many Long Titles", provider: "GPT-4o" },
+        { name: "Carol", title: "Scribe", provider: "Gemini Pro" }
+      ].map((char) => /* @__PURE__ */ jsxs5("div", { className: "qt-character-card", children: [
+        /* @__PURE__ */ jsx5("div", { className: "qt-avatar", style: { width: "3rem", height: "3rem" }, children: /* @__PURE__ */ jsx5("div", { className: "qt-avatar-fallback", children: char.name[0] }) }),
+        /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center", width: "100%", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx5("p", { className: "qt-card-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: char.name }),
+          /* @__PURE__ */ jsx5("p", { className: "qt-card-subtitle", style: { fontStyle: "italic", minHeight: "2.5rem" }, children: char.title }),
+          /* @__PURE__ */ jsx5("span", { style: { fontSize: "0.75rem", opacity: 0.6 }, children: char.provider })
+        ] }),
+        /* @__PURE__ */ jsx5("button", { className: "qt-button-success qt-button-sm", style: { marginTop: "auto", width: "100%" }, children: "Chat" })
+      ] }, char.name)) })
+    ] }),
     /* @__PURE__ */ jsxs5("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ jsx5("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Card Grid" }),
       /* @__PURE__ */ jsxs5("div", { className: "qt-card-grid-3", children: [

package/dist/index.css

@@ -666,6 +666,24 @@ body {
   border-color: var(--color-primary);
   box-shadow: var(--qt-card-shadow-hover);
 }
+.qt-character-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: var(--qt-character-card-padding, 0.75rem);
+  border-radius: var(--qt-card-radius);
+  background-color: var(--qt-card-bg);
+  color: var(--qt-card-fg);
+  border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
+  box-shadow: var(--qt-card-shadow);
+  transition: var(--qt-card-transition);
+}
+.qt-character-card:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--qt-card-shadow-hover);
+}
 .qt-panel {
   background-color: var(--qt-card-bg);
   border: 1px solid var(--qt-card-border);

package/dist/index.js

@@ -648,6 +648,23 @@ var Cards = () => {
         ] })
       ] }) }, name)) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Cards" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Compact cards used on the homepage grid. Centered layout with avatar, name, title, provider badge, and action." }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 140px))", gap: "0.75rem" }, children: [
+        { name: "Alice", title: "The Adventurer", provider: "Claude Sonnet" },
+        { name: "Bob", title: "The Keeper of Many Long Titles", provider: "GPT-4o" },
+        { name: "Carol", title: "Scribe", provider: "Gemini Pro" }
+      ].map((char) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-character-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "qt-avatar", style: { width: "3rem", height: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "qt-avatar-fallback", children: char.name[0] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { textAlign: "center", width: "100%", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "qt-card-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: char.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "qt-card-subtitle", style: { fontStyle: "italic", minHeight: "2.5rem" }, children: char.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.6 }, children: char.provider })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "qt-button-success qt-button-sm", style: { marginTop: "auto", width: "100%" }, children: "Chat" })
+      ] }, char.name)) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Card Grid" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-card-grid-3", children: [

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   Tabs,
   ThemeComparison,
   Typography
-} from "./chunk-45RKCZL3.mjs";
+} from "./chunk-VCF2M2TP.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -585,6 +585,23 @@ var Cards = () => {
         ] })
       ] }) }, name)) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Cards" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Compact cards used on the homepage grid. Centered layout with avatar, name, title, provider badge, and action." }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 140px))", gap: "0.75rem" }, children: [
+        { name: "Alice", title: "The Adventurer", provider: "Claude Sonnet" },
+        { name: "Bob", title: "The Keeper of Many Long Titles", provider: "GPT-4o" },
+        { name: "Carol", title: "Scribe", provider: "Gemini Pro" }
+      ].map((char) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "qt-character-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "qt-avatar", style: { width: "3rem", height: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "qt-avatar-fallback", children: char.name[0] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { textAlign: "center", width: "100%", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "qt-card-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: char.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "qt-card-subtitle", style: { fontStyle: "italic", minHeight: "2.5rem" }, children: char.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.6 }, children: char.provider })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "qt-button-success qt-button-sm", style: { marginTop: "auto", width: "100%" }, children: "Chat" })
+      ] }, char.name)) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Card Grid" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "qt-card-grid-3", children: [

package/dist/stories/index.mjs

@@ -17,7 +17,7 @@ import {
   Tabs,
   ThemeComparison,
   Typography
-} from "../chunk-45RKCZL3.mjs";
+} from "../chunk-VCF2M2TP.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,12 +43,12 @@
     "storybook": ">=8.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^10.2.17",
-    "@types/react": "^18.2.0",
-    "react": "^19.0.0",
-    "storybook": "^10.2.17",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.0"
+    "@storybook/react": "^10.3.1",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "storybook": "^10.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "keywords": [
     "quilltap",

package/src/css/qt-components.css

@@ -628,6 +628,26 @@
   box-shadow: var(--qt-card-shadow-hover);
 }
 
+.qt-character-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: var(--qt-character-card-padding, 0.75rem);
+  border-radius: var(--qt-card-radius);
+  background-color: var(--qt-card-bg);
+  color: var(--qt-card-fg);
+  border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
+  box-shadow: var(--qt-card-shadow);
+  transition: var(--qt-card-transition);
+}
+
+.qt-character-card:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--qt-card-shadow-hover);
+}
+
 .qt-panel {
   background-color: var(--qt-card-bg);
   border: 1px solid var(--qt-card-border);

package/src/stories/components/Cards.tsx

@@ -72,6 +72,35 @@ export const Cards: React.FC = () => {
         </div>
       </section>
 
+      {/* Character Cards */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Character Cards
+        </h3>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          Compact cards used on the homepage grid. Centered layout with avatar, name, title, provider badge, and action.
+        </p>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 140px))', gap: '0.75rem' }}>
+          {[
+            { name: 'Alice', title: 'The Adventurer', provider: 'Claude Sonnet' },
+            { name: 'Bob', title: 'The Keeper of Many Long Titles', provider: 'GPT-4o' },
+            { name: 'Carol', title: 'Scribe', provider: 'Gemini Pro' },
+          ].map((char) => (
+            <div key={char.name} className="qt-character-card">
+              <div className="qt-avatar" style={{ width: '3rem', height: '3rem' }}>
+                <div className="qt-avatar-fallback">{char.name[0]}</div>
+              </div>
+              <div style={{ textAlign: 'center', width: '100%', minWidth: 0 }}>
+                <p className="qt-card-title" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{char.name}</p>
+                <p className="qt-card-subtitle" style={{ fontStyle: 'italic', minHeight: '2.5rem' }}>{char.title}</p>
+                <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>{char.provider}</span>
+              </div>
+              <button className="qt-button-success qt-button-sm" style={{ marginTop: 'auto', width: '100%' }}>Chat</button>
+            </div>
+          ))}
+        </div>
+      </section>
+
       {/* Card Grid */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>

package/src/stories/components/Inputs.tsx

@@ -24,7 +24,7 @@ export const Inputs: React.FC = () => {
           <div>
             <label className="qt-label">With Hint</label>
             <input className="qt-input" type="text" placeholder="Enter email..." />
-            <span className="qt-hint">We'll never share your email.</span>
+            <span className="qt-hint">We&apos;ll never share your email.</span>
           </div>
           <div>
             <label className="qt-label">With Value</label>