@quilltap/theme-storybook 1.0.44 → 1.0.46

package/dist/stories/index.mjs

@@ -19,8 +19,9 @@ import {
   Tabs,
   Terminal,
   ThemeComparison,
-  Typography
-} from "../chunk-77W5TNBS.mjs";
+  Typography,
+  Workspace
+} from "../chunk-ENP3AWD5.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,
@@ -43,5 +44,6 @@ export {
   Tabs,
   Terminal,
   ThemeComparison,
-  Typography
+  Typography,
+  Workspace
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,10 +43,10 @@
     "storybook": ">=8.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^10.4.2",
-    "@types/react": "^19.2.16",
+    "@storybook/react": "^10.4.6",
+    "@types/react": "^19.2.17",
     "react": "^19.2.7",
-    "storybook": "^10.4.2",
+    "storybook": "^10.4.6",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },

package/src/css/qt-components.css

@@ -2427,6 +2427,134 @@
   border-top: 1px solid var(--qt-tab-divider-color);
 }
 
+/* ==========================================================================
+   WORKSPACE  (tabbed two-pane shell — strip, divider, drop-zone)
+
+   Every accented surface derives from one hook, --qt-workspace-accent, which
+   falls back to --color-primary. Set it at your [data-theme="…"] root to
+   re-tint the active tab, the pane divider, and the split drop-zone in one
+   move. Finer control: the individual --qt-workspace-tab-* / -divider-* /
+   --qt-tab-drop-zone-* hooks below.
+   ========================================================================== */
+
+.qt-tab-strip {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--qt-tab-group-gap, 0.25rem);
+  padding: 0.375rem 0.5rem 0;
+  overflow-x: auto;
+  background: var(--qt-workspace-chrome-bg, var(--qt-panel-bg, var(--color-card)));
+  border-bottom: 1px solid var(--qt-workspace-chrome-border, var(--color-border));
+
+  --qt-tab-bg: var(--qt-workspace-tab-bg,
+    color-mix(in srgb, var(--color-muted) 86%, var(--color-foreground) 8%));
+  --qt-tab-fg: var(--qt-workspace-tab-fg,
+    color-mix(in srgb, var(--color-foreground) 75%, transparent));
+  --qt-tab-border: var(--qt-workspace-tab-border,
+    color-mix(in srgb, var(--color-foreground) 34%, transparent));
+  --qt-tab-active-bg: var(--qt-workspace-tab-active-bg,
+    color-mix(in srgb, var(--qt-workspace-accent, var(--color-primary)) 24%, var(--color-card)));
+  --qt-tab-active-fg: var(--qt-workspace-tab-active-fg, var(--color-foreground));
+  --qt-tab-active-border: var(--qt-workspace-tab-active-border,
+    var(--qt-workspace-accent, var(--color-primary)));
+}
+
+.qt-tab-strip .qt-tab {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  border-width: var(--qt-workspace-tab-border-width, 2px);
+  border-bottom-width: 0;
+  border-style: solid;
+  border-color: var(--qt-tab-border);
+  font-weight: 500;
+}
+
+.qt-tab-strip .qt-tab-active {
+  font-weight: 700;
+  border-color: var(--qt-tab-active-border);
+  box-shadow: 0 3px 0 0 var(--qt-tab-active-border) inset;
+}
+
+.qt-tab-label {
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qt-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  margin-left: 0.125rem;
+  border-radius: 0.25rem;
+  opacity: 0.55;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+
+.qt-tab-close:hover {
+  opacity: 1;
+  background: var(--qt-tab-close-hover-bg,
+    color-mix(in srgb, var(--color-muted-foreground) 22%, transparent));
+}
+
+.qt-tab-close-icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.qt-workspace-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  background: var(--qt-workspace-divider-bg, var(--color-border));
+  transition: background 0.15s ease;
+}
+
+.qt-workspace-divider:hover,
+.qt-workspace-divider:focus-visible {
+  background: var(--qt-workspace-divider-active-bg,
+    color-mix(in srgb, var(--qt-workspace-accent, var(--color-primary)) 60%, transparent));
+  outline: none;
+}
+
+.qt-workspace-divider-grip {
+  width: 2px;
+  height: 2rem;
+  border-radius: 9999px;
+  background: var(--qt-workspace-divider-grip,
+    color-mix(in srgb, var(--color-muted-foreground) 60%, transparent));
+}
+
+.qt-tab-drop-zone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 42%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--qt-tab-drop-zone-bg,
+    color-mix(in srgb, var(--qt-workspace-accent, var(--color-primary)) 14%, transparent));
+  border-left: 2px dashed var(--qt-tab-drop-zone-border,
+    color-mix(in srgb, var(--qt-workspace-accent, var(--color-primary)) 70%, transparent));
+}
+
+.qt-tab-drop-zone-hint {
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-foreground);
+  background: var(--color-background);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-foreground) 15%, transparent);
+}
+
 /* ==========================================================================
    DIALOG OVERLAY
    ========================================================================== */

package/src/stories/components/Workspace.tsx

@@ -0,0 +1,139 @@
+/**
+ * Workspace Story Component
+ *
+ * The tabbed workspace chrome: the per-pane tab strip (active / inactive /
+ * close), the resizable pane divider with its grip, and the split drop-zone.
+ *
+ * Every accented surface here derives from a single theme hook,
+ * `--qt-workspace-accent` (it falls back to `--color-primary`). A theme re-tints
+ * the whole workspace by setting that one token at its `[data-theme="…"]` root —
+ * e.g. Madman's Box points it at cyan rather than its amber primary. The
+ * individual `--qt-workspace-tab-*` / `--qt-workspace-divider-*` /
+ * `--qt-tab-drop-zone-*` hooks remain for finer control.
+ *
+ * @module @quilltap/theme-storybook/stories/components/Workspace
+ */
+
+import React, { useState } from 'react';
+
+const SectionHeading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <h3
+    style={{
+      fontSize: '1.125rem',
+      fontWeight: 700,
+      marginBottom: '1rem',
+      borderBottom: '1px solid var(--color-border)',
+      paddingBottom: '0.5rem',
+    }}
+  >
+    {children}
+  </h3>
+);
+
+const CloseGlyph: React.FC = () => (
+  <svg className="qt-tab-close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+/** A single workspace tab (extends the base `.qt-tab` with strip affordances). */
+const WorkspaceTab: React.FC<{
+  label: string;
+  active?: boolean;
+  closeable?: boolean;
+}> = ({ label, active, closeable = true }) => (
+  <div
+    className={`qt-tab ${active ? 'qt-tab-active' : ''}`}
+    style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}
+  >
+    <span className="qt-tab-label">{label}</span>
+    {closeable && (
+      <span className="qt-tab-close" role="button" aria-label={`Close ${label}`}>
+        <CloseGlyph />
+      </span>
+    )}
+  </div>
+);
+
+export const Workspace: React.FC = () => {
+  const [active, setActive] = useState('salon');
+
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '0.5rem' }}>Workspace</h2>
+      <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1.5rem', maxWidth: '46rem' }}>
+        The tabbed two-pane shell. Set <code>--qt-workspace-accent</code> in your theme to re-tint the
+        active tab, the pane divider, and the split drop-zone in one move.
+      </p>
+
+      {/* Tab strip */}
+      <section style={{ marginBottom: '2rem' }}>
+        <SectionHeading>Tab strip — active &amp; inactive</SectionHeading>
+        <div className="qt-tab-strip" role="tablist" style={{ borderRadius: '0.5rem 0.5rem 0 0' }}>
+          {[
+            { id: 'home', label: 'Home' },
+            { id: 'salon', label: 'The Salon — Bertie' },
+            { id: 'aurora', label: 'Aurora' },
+            { id: 'scriptorium', label: 'The Scriptorium' },
+          ].map((t) => (
+            <div key={t.id} onClick={() => setActive(t.id)}>
+              <WorkspaceTab label={t.label} active={active === t.id} closeable={t.id !== 'home'} />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Pane divider */}
+      <section style={{ marginBottom: '2rem' }}>
+        <SectionHeading>Pane divider</SectionHeading>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '0.75rem' }}>
+          Resizable split between the two panes. Hover (or focus) to see the accent.
+        </p>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 8px 1fr',
+            height: '120px',
+            border: '1px solid var(--color-border)',
+            borderRadius: '0.5rem',
+            overflow: 'hidden',
+          }}
+        >
+          <div className="qt-panel" style={{ display: 'grid', placeItems: 'center' }}>
+            Left pane
+          </div>
+          <div className="qt-workspace-divider" tabIndex={0} role="separator" aria-label="Resize panes">
+            <div className="qt-workspace-divider-grip" />
+          </div>
+          <div className="qt-panel" style={{ display: 'grid', placeItems: 'center' }}>
+            Right pane
+          </div>
+        </div>
+      </section>
+
+      {/* Split drop-zone */}
+      <section>
+        <SectionHeading>Split drop-zone</SectionHeading>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '0.75rem' }}>
+          Shown while a tab is dragged toward a pane edge to create the split.
+        </p>
+        <div
+          style={{
+            position: 'relative',
+            height: '120px',
+            border: '1px solid var(--color-border)',
+            borderRadius: '0.5rem',
+            overflow: 'hidden',
+          }}
+        >
+          <div className="qt-panel" style={{ height: '100%', display: 'grid', placeItems: 'center' }}>
+            Pane
+          </div>
+          <div className="qt-tab-drop-zone">
+            <span className="qt-tab-drop-zone-hint">Drop to split</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};

package/src/stories/index.ts

@@ -18,6 +18,7 @@ export * from './components/Surfaces';
 export * from './components/Avatars';
 export * from './components/Dialogs';
 export * from './components/Tabs';
+export * from './components/Workspace';
 export * from './components/Chat';
 export * from './components/Terminal';
 export * from './components/FilePreview';