@quilltap/theme-storybook 1.0.34 → 1.0.35

package/dist/stories/index.mjs

@@ -15,9 +15,10 @@ import {
   Participant,
   Spacing,
   Tabs,
+  Terminal,
   ThemeComparison,
   Typography
-} from "../chunk-C4SJNVAC.mjs";
+} from "../chunk-7CI72GBQ.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,
@@ -36,6 +37,7 @@ export {
   Participant,
   Spacing,
   Tabs,
+  Terminal,
   ThemeComparison,
   Typography
 };

package/package.json

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

@@ -461,6 +461,44 @@
   --qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
   --qt-warning-box-border: color-mix(in srgb, var(--color-warning) 30%, transparent);
   --qt-warning-box-fg: var(--color-warning);
+
+  /* Terminal variables — the terminal carries its own (dark) identity
+     regardless of the surrounding theme's light/dark mode. Themes may
+     override these to make the terminal pane match a parchment scroll,
+     a CRT, etc. */
+  --qt-terminal-bg: #1a1a1a;
+  --qt-terminal-fg: #e6e6e6;
+  --qt-terminal-cursor: #e6e6e6;
+  --qt-terminal-selection: rgba(255, 255, 255, 0.2);
+  --qt-terminal-ansi-black: #000000;
+  --qt-terminal-ansi-red: #cd3131;
+  --qt-terminal-ansi-green: #0dbc79;
+  --qt-terminal-ansi-yellow: #e5e510;
+  --qt-terminal-ansi-blue: #2472c8;
+  --qt-terminal-ansi-magenta: #bc3fbc;
+  --qt-terminal-ansi-cyan: #11a8cd;
+  --qt-terminal-ansi-white: #e5e5e5;
+  --qt-terminal-ansi-bright-black: #666666;
+  --qt-terminal-ansi-bright-red: #f14c4c;
+  --qt-terminal-ansi-bright-green: #23d18b;
+  --qt-terminal-ansi-bright-yellow: #f5f543;
+  --qt-terminal-ansi-bright-blue: #3b8eea;
+  --qt-terminal-ansi-bright-magenta: #d670d6;
+  --qt-terminal-ansi-bright-cyan: #29b8db;
+  --qt-terminal-ansi-bright-white: #e5e5e5;
+
+  --qt-terminal-chrome-bg: color-mix(in srgb, var(--qt-terminal-bg) 78%, var(--qt-terminal-fg) 6%);
+  --qt-terminal-chrome-border: color-mix(in srgb, var(--qt-terminal-bg) 55%, var(--qt-terminal-fg) 22%);
+  --qt-terminal-chrome-fg: var(--qt-terminal-fg);
+  --qt-terminal-chrome-muted-fg: color-mix(in srgb, var(--qt-terminal-fg) 55%, transparent);
+  --qt-terminal-closed-badge-bg: color-mix(in srgb, var(--qt-terminal-bg) 50%, var(--qt-terminal-fg) 18%);
+  --qt-terminal-closed-badge-fg: var(--qt-terminal-fg);
+
+  /* In-chat terminal embed (nests inside chat bubbles, uses surrounding theme) */
+  --qt-terminal-embed-bg: var(--color-card);
+  --qt-terminal-embed-border: var(--color-border);
+  --qt-terminal-embed-header-bg: var(--color-muted);
+  --qt-terminal-embed-header-border: var(--color-border);
 }
 
 /* ==========================================================================
@@ -1406,11 +1444,15 @@
 }
 
 .qt-bg-primary {
-  background-color: var(--color-background);
+  background-color: var(--color-primary);
+}
+
+.qt-bg-accent {
+  background-color: var(--color-accent);
 }
 
 .qt-bg-secondary {
-  background-color: var(--color-muted);
+  background-color: var(--color-secondary);
 }
 
 .qt-bg-card {
@@ -1421,6 +1463,31 @@
   border-color: var(--color-border);
 }
 
+/* Solid status backgrounds (full opacity) — used for severity bars, status pips */
+.qt-bg-success {
+  background-color: var(--color-success);
+}
+
+.qt-bg-warning {
+  background-color: var(--color-warning);
+}
+
+.qt-bg-info {
+  background-color: var(--color-info);
+}
+
+.qt-bg-destructive {
+  background-color: var(--color-destructive);
+}
+
+.qt-bg-muted-foreground {
+  background-color: var(--color-muted-foreground);
+}
+
+.qt-text-on-accent {
+  color: var(--color-accent-foreground);
+}
+
 /* ==========================================================================
    STATUS COLOR UTILITIES (with opacity variants)
    ========================================================================== */
@@ -1478,6 +1545,32 @@
   background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
 }
 
+.qt-bg-destructive\/60 {
+  background-color: color-mix(in srgb, var(--color-destructive) 60%, transparent);
+}
+
+/* Success backgrounds — extra opacity steps */
+.qt-bg-success\/40 {
+  background-color: color-mix(in srgb, var(--color-success) 40%, transparent);
+}
+
+.qt-bg-success\/60 {
+  background-color: color-mix(in srgb, var(--color-success) 60%, transparent);
+}
+
+/* Muted-foreground backgrounds with opacity — used for inactive pips */
+.qt-bg-muted-foreground\/30 {
+  background-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
+}
+
+.qt-bg-muted-foreground\/60 {
+  background-color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent);
+}
+
+.hover\:qt-bg-muted-foreground\/60:hover {
+  background-color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent);
+}
+
 /* Text color utilities */
 .qt-text-warning {
   color: var(--color-warning);
@@ -1533,6 +1626,14 @@
   border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
 }
 
+.qt-border-success\/20 {
+  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
+}
+
+.qt-border-success\/40 {
+  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
+}
+
 /* Hover utilities */
 .hover\:qt-bg-destructive\/10:hover {
   background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
@@ -2287,3 +2388,83 @@
   background-color: var(--qt-navbar-link-active-bg);
   color: var(--color-primary);
 }
+
+/* ==========================================================================
+   TERMINAL COMPONENTS
+   In-chat embed, pop-out page, and Terminal Mode pane.
+   Themes can override --qt-terminal-* and --qt-terminal-chrome-* tokens.
+   ========================================================================== */
+
+.qt-terminal-surface {
+  background-color: var(--qt-terminal-bg);
+}
+
+.qt-terminal-embed {
+  background-color: var(--qt-terminal-embed-bg);
+  border: 1px solid var(--qt-terminal-embed-border);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.qt-terminal-embed-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: var(--qt-terminal-embed-header-bg);
+  border-bottom: 1px solid var(--qt-terminal-embed-header-border);
+}
+
+.qt-terminal-embed-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  background-color: var(--qt-terminal-embed-header-bg);
+  border-top: 1px solid var(--qt-terminal-embed-header-border);
+}
+
+.qt-terminal-popout-page {
+  background-color: var(--qt-terminal-bg);
+  color: var(--qt-terminal-chrome-fg);
+}
+
+.qt-terminal-popout-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: var(--qt-terminal-chrome-bg);
+  border-bottom: 1px solid var(--qt-terminal-chrome-border);
+  color: var(--qt-terminal-chrome-fg);
+}
+
+.qt-terminal-popout-link {
+  color: var(--qt-terminal-chrome-fg);
+}
+
+.qt-terminal-popout-link:hover {
+  text-decoration: underline;
+}
+
+.qt-terminal-popout-title {
+  color: var(--qt-terminal-chrome-fg);
+  font-weight: 500;
+}
+
+.qt-terminal-popout-separator {
+  color: var(--qt-terminal-chrome-muted-fg);
+}
+
+.qt-terminal-closed-badge {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--qt-terminal-closed-badge-bg);
+  color: var(--qt-terminal-closed-badge-fg);
+}

package/src/stories/components/Terminal.tsx

@@ -0,0 +1,129 @@
+/**
+ * Terminal Story Component
+ *
+ * Previews the in-chat terminal embed, pop-out page, and Terminal Mode pane
+ * surfaces. The terminal carries its own (dark) identity by default — themes
+ * can override --qt-terminal-* and --qt-terminal-chrome-* tokens to retint
+ * the whole stack (e.g. a parchment terminal, a CRT terminal, etc).
+ */
+
+import React from 'react';
+
+const sampleOutput = `$ git status
+On branch main
+Your branch is up to date with 'origin/main'.
+
+nothing to commit, working tree clean
+$ npm run dev
+> next dev
+  ▲ Next.js 16.0.0
+  - Local:        http://localhost:3000
+  - ready started server on 0.0.0.0:3000`;
+
+export const Terminal: React.FC = () => {
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem' }}>
+        Terminal Components
+      </h2>
+      <p style={{ marginBottom: '1.5rem', color: 'var(--color-muted-foreground)' }}>
+        The terminal carries its own identity. By default it stays dark in both
+        light and dark themes — but a theme can override{' '}
+        <code>--qt-terminal-bg</code>, <code>--qt-terminal-fg</code>, and the
+        <code>--qt-terminal-chrome-*</code> tokens to reskin every surface below.
+      </p>
+
+      {/* In-chat embed */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          In-chat embed
+        </h3>
+        <p style={{ marginBottom: '0.75rem', fontSize: '0.875rem', color: 'var(--color-muted-foreground)' }}>
+          <code>.qt-terminal-embed</code> wraps the embed card; the header and
+          footer strips inherit the surrounding theme so they nest cleanly with
+          chat bubbles.
+        </p>
+        <div className="qt-terminal-embed" style={{ maxWidth: '36rem' }}>
+          <div className="qt-terminal-embed-header">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <h4 style={{ fontSize: '0.875rem', fontWeight: 500, margin: 0 }}>
+                Terminal — zsh
+              </h4>
+            </div>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <button className="qt-button-icon" type="button">Pop out</button>
+              <button className="qt-button-icon qt-text-destructive" type="button">Kill</button>
+            </div>
+          </div>
+          <div className="qt-terminal-surface" style={{ padding: '0.75rem', fontFamily: 'var(--qt-font-mono, monospace)', color: 'var(--qt-terminal-fg)', fontSize: '0.8125rem', whiteSpace: 'pre-wrap' }}>
+            {sampleOutput}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer state */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Embed footer (handed off to Terminal Mode pane)
+        </h3>
+        <div className="qt-terminal-embed" style={{ maxWidth: '36rem' }}>
+          <div className="qt-terminal-embed-header">
+            <h4 style={{ fontSize: '0.875rem', fontWeight: 500, margin: 0 }}>
+              Terminal — zsh
+            </h4>
+          </div>
+          <div className="qt-terminal-embed-footer">
+            <span className="qt-text-secondary">Showing in Terminal Mode pane.</span>
+            <button className="qt-button-secondary" type="button" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }}>
+              Go to pane →
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Pop-out page */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Pop-out page chrome
+        </h3>
+        <p style={{ marginBottom: '0.75rem', fontSize: '0.875rem', color: 'var(--color-muted-foreground)' }}>
+          The full-screen pop-out page uses{' '}
+          <code>.qt-terminal-popout-page</code> as the outer canvas and{' '}
+          <code>.qt-terminal-popout-header</code> for the breadcrumb bar.
+        </p>
+        <div className="qt-terminal-popout-page" style={{ borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--color-border)', height: '240px', display: 'flex', flexDirection: 'column' }}>
+          <div className="qt-terminal-popout-header">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+              <button className="qt-button-icon" type="button" style={{ color: 'inherit' }}>←</button>
+              <a href="#" className="qt-terminal-popout-link" style={{ fontSize: '0.875rem' }}>Chat</a>
+              <span className="qt-terminal-popout-separator">/</span>
+              <h1 className="qt-terminal-popout-title" style={{ fontSize: '1rem', margin: 0 }}>
+                Terminal — zsh
+              </h1>
+            </div>
+            <button className="qt-button-destructive" type="button" style={{ fontSize: '0.875rem' }}>
+              Kill Session
+            </button>
+          </div>
+          <div style={{ flex: 1, padding: '0.75rem', fontFamily: 'var(--qt-font-mono, monospace)', color: 'var(--qt-terminal-fg)', fontSize: '0.8125rem', whiteSpace: 'pre-wrap' }}>
+            {sampleOutput}
+          </div>
+        </div>
+      </section>
+
+      {/* Closed badge */}
+      <section>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Session-exited overlay
+        </h3>
+        <p style={{ marginBottom: '0.75rem', fontSize: '0.875rem', color: 'var(--color-muted-foreground)' }}>
+          When the PTY exits but the terminal stays mounted, the{' '}
+          <code>.qt-terminal-closed-badge</code> overlay marks it.
+        </p>
+        <div className="qt-terminal-surface" style={{ position: 'relative', height: '120px', borderRadius: '0.5rem' }}>
+          <span className="qt-terminal-closed-badge">Closed</span>
+        </div>
+      </section>
+    </div>
+  );
+};

package/src/stories/index.ts

@@ -17,6 +17,7 @@ export * from './components/Avatars';
 export * from './components/Dialogs';
 export * from './components/Tabs';
 export * from './components/Chat';
+export * from './components/Terminal';
 export * from './components/FilePreview';
 export * from './components/ThemeComparison';
 export * from './components/EmptyState';