flowbook 0.2.5 → 0.2.7

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "flowbook",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "bin": {
-    "flowbook": "./dist/cli.js"
+    "flowbook": "dist/cli.js"
   },
   "files": [
     "dist",

package/src/client/App.tsx

@@ -2,12 +2,11 @@ import { useState, useMemo } from "react";
 import data from "virtual:flowbook-data";
 import { Sidebar } from "./components/Sidebar";
 import { FlowView } from "./components/FlowView";
-import { Header } from "./components/Header";
 import { EmptyState } from "./components/EmptyState";
 
 export function App() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery] = useState("");
 
   const filteredFlows = useMemo(() => {
     if (!searchQuery) return data.flows;
@@ -27,25 +26,35 @@ export function App() {
   );
 
   return (
-    <div className="h-screen flex flex-col bg-zinc-950 text-zinc-100">
-      <Header
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        flowCount={data.flows.length}
-      />
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          flows={filteredFlows}
-          selectedId={selectedId}
-          onSelect={setSelectedId}
-        />
-        <main className="flex-1 overflow-auto">
-          {selectedFlow ? (
-            <FlowView flow={selectedFlow} />
-          ) : (
-            <EmptyState flowCount={data.flows.length} />
-          )}
-        </main>
+    <div className="h-screen flex items-center justify-center p-6" style={{ background: 'var(--fb-bg-outer)' }}>
+      <div className="w-full max-w-6xl rounded-xl overflow-hidden shadow-2xl" style={{ background: 'var(--fb-bg-window)', border: '1px solid var(--fb-border)' }}>
+        {/* macOS-style title bar */}
+        <div className="flex items-center px-4 py-3 border-b" style={{ background: 'var(--fb-bg-titlebar)', borderColor: 'var(--fb-border)' }}>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
+            <div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
+            <div className="w-3 h-3 rounded-full bg-[#27C93F]" />
+          </div>
+          <span className="ml-4 text-sm font-mono" style={{ color: 'var(--fb-text-muted)' }}>
+            flowbook — localhost:6200
+          </span>
+        </div>
+
+        {/* Content area */}
+        <div className="flex" style={{ height: '520px' }}>
+          <Sidebar
+            flows={filteredFlows}
+            selectedId={selectedId}
+            onSelect={setSelectedId}
+          />
+          <main className="flex-1 overflow-auto" style={{ background: 'var(--fb-bg-content)' }}>
+            {selectedFlow ? (
+              <FlowView flow={selectedFlow} />
+            ) : (
+              <EmptyState flowCount={data.flows.length} />
+            )}
+          </main>
+        </div>
       </div>
     </div>
   );

package/src/client/components/EmptyState.tsx

@@ -7,7 +7,8 @@ export function EmptyState({ flowCount }: EmptyStateProps) {
     <div className="flex items-center justify-center h-full">
       <div className="text-center max-w-lg px-4">
         <svg
-          className="w-16 h-16 text-zinc-800 mx-auto mb-6"
+          className="w-16 h-16 mx-auto mb-6"
+          style={{ color: '#1e293b' }}
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -21,20 +22,26 @@ export function EmptyState({ flowCount }: EmptyStateProps) {
           <path d="M6.5 10v1.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V10" />
           <path d="M11.5 12.5V14" />
         </svg>
-        <h2 className="text-xl font-semibold text-zinc-400 mb-2">
+        <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--fb-text-secondary)' }}>
           {flowCount > 0 ? "Select a flow" : "No flows found"}
         </h2>
-        <p className="text-zinc-600 text-sm leading-relaxed">
+        <p className="text-sm leading-relaxed" style={{ color: 'var(--fb-text-muted)' }}>
           {flowCount > 0
             ? "Choose a flow from the sidebar to view its diagram."
             : "Create .flow.md or .flowchart.md files with mermaid diagrams to get started."}
         </p>
         {flowCount === 0 && (
-          <div className="mt-8 bg-zinc-900 border border-zinc-800 rounded-xl p-5 text-left">
-            <p className="text-xs text-zinc-500 mb-3 font-medium">
-              Example: <code>auth/login.flow.md</code>
+          <div
+            className="mt-8 rounded-xl p-5 text-left border"
+            style={{
+              background: 'rgba(255,255,255,0.03)',
+              borderColor: 'var(--fb-border)',
+            }}
+          >
+            <p className="text-xs mb-3 font-medium" style={{ color: 'var(--fb-text-muted)' }}>
+              Example: <code style={{ color: 'var(--fb-accent-violet)' }}>auth/login.flow.md</code>
             </p>
-            <pre className="text-xs text-zinc-400 font-mono leading-relaxed whitespace-pre overflow-x-auto">
+            <pre className="text-xs font-mono leading-relaxed whitespace-pre overflow-x-auto" style={{ color: 'var(--fb-text-secondary)' }}>
               {`---
 title: Login Flow
 category: Authentication

package/src/client/components/FlowView.tsx

@@ -8,50 +8,30 @@ interface FlowViewProps {
 export function FlowView({ flow }: FlowViewProps) {
   return (
     <div className="p-8 max-w-5xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center gap-2 mb-3 flex-wrap">
-          <span className="text-xs font-medium text-violet-300 bg-violet-500/10 border border-violet-500/20 px-2.5 py-0.5 rounded-full">
-            {flow.category}
-          </span>
-          {flow.tags.map((tag) => (
-            <span
-              key={tag}
-              className="text-xs text-zinc-400 bg-zinc-800/80 px-2 py-0.5 rounded-full"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-        <h2 className="text-2xl font-bold text-zinc-50 tracking-tight">
-          {flow.title}
-        </h2>
-        {flow.description && (
-          <p className="mt-2 text-zinc-400 leading-relaxed">
-            {flow.description}
-          </p>
-        )}
-        <p className="mt-2 text-xs text-zinc-600 font-mono">{flow.filePath}</p>
-      </div>
-
       {/* Diagrams */}
       <div className="space-y-6">
         {flow.mermaidBlocks.map((block, i) => (
           <div
             key={i}
-            className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 backdrop-blur-sm"
+            className="flex items-center justify-center min-h-[400px]"
           >
             <MermaidRenderer code={block} />
           </div>
         ))}
 
         {flow.mermaidBlocks.length === 0 && (
-          <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-12 text-center">
-            <p className="text-zinc-500">
+          <div
+            className="rounded-xl p-12 text-center border"
+            style={{
+              background: 'rgba(255,255,255,0.03)',
+              borderColor: 'var(--fb-border)',
+            }}
+          >
+            <p style={{ color: 'var(--fb-text-muted)' }}>
               No mermaid diagrams found in this file.
             </p>
-            <p className="text-zinc-600 text-sm mt-1">
-              Add a <code className="text-violet-400">```mermaid</code> code
+            <p className="text-sm mt-1" style={{ color: 'var(--fb-text-muted)' }}>
+              Add a <code style={{ color: 'var(--fb-accent-violet)' }}>```mermaid</code> code
               block to see it rendered here.
             </p>
           </div>

package/src/client/components/MermaidRenderer.tsx

@@ -9,23 +9,27 @@ function ensureInit() {
     startOnLoad: false,
     theme: "dark",
     securityLevel: "loose",
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, monospace",
+    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
     themeVariables: {
       darkMode: true,
-      background: "#18181b",
-      mainBkg: "#27272a",
-      primaryColor: "#7c3aed",
-      primaryTextColor: "#f4f4f5",
-      primaryBorderColor: "#6d28d9",
-      secondaryColor: "#3f3f46",
-      secondaryTextColor: "#d4d4d8",
-      secondaryBorderColor: "#52525b",
-      tertiaryColor: "#27272a",
-      tertiaryTextColor: "#a1a1aa",
-      tertiaryBorderColor: "#3f3f46",
-      lineColor: "#71717a",
-      textColor: "#e4e4e7",
-      nodeTextColor: "#f4f4f5",
+      background: "#131a2b",
+      mainBkg: "#1e2740",
+      primaryColor: "#6366f1",
+      primaryTextColor: "#e2e8f0",
+      primaryBorderColor: "#4f46e5",
+      secondaryColor: "#1e293b",
+      secondaryTextColor: "#cbd5e1",
+      secondaryBorderColor: "#334155",
+      tertiaryColor: "#1e2740",
+      tertiaryTextColor: "#94a3b8",
+      tertiaryBorderColor: "#334155",
+      lineColor: "#6366f1",
+      textColor: "#e2e8f0",
+      nodeTextColor: "#e2e8f0",
+      nodeBorder: "#4f46e5",
+      clusterBkg: "#0f172a",
+      clusterBorder: "#1e293b",
+      edgeLabelBackground: "#131a2b",
     },
   });
   initialized = true;
@@ -71,13 +75,17 @@ export function MermaidRenderer({ code, className }: Props) {
   if (error) {
     return (
       <div
-        className={`bg-red-500/10 border border-red-500/20 rounded-lg p-4 ${className ?? ""}`}
+        className={`rounded-lg p-4 border ${className ?? ""}`}
+        style={{
+          background: 'rgba(239, 68, 68, 0.08)',
+          borderColor: 'rgba(239, 68, 68, 0.2)',
+        }}
       >
-        <p className="text-red-400 text-sm font-medium mb-2">
+        <p className="text-sm font-medium mb-2" style={{ color: '#f87171' }}>
           Render error
         </p>
-        <p className="text-red-300/70 text-xs font-mono mb-3">{error}</p>
-        <pre className="text-xs text-zinc-500 overflow-x-auto whitespace-pre-wrap">
+        <p className="text-xs font-mono mb-3" style={{ color: 'rgba(248, 113, 113, 0.7)' }}>{error}</p>
+        <pre className="text-xs overflow-x-auto whitespace-pre-wrap" style={{ color: 'var(--fb-text-muted)' }}>
           {code}
         </pre>
       </div>
@@ -89,7 +97,7 @@ export function MermaidRenderer({ code, className }: Props) {
       <div
         className={`flex items-center justify-center py-12 ${className ?? ""}`}
       >
-        <div className="w-5 h-5 border-2 border-violet-500/30 border-t-violet-500 rounded-full animate-spin" />
+        <div className="w-5 h-5 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(99, 102, 241, 0.3)', borderTopColor: '#6366f1' }} />
       </div>
     );
   }

package/src/client/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { FlowEntry } from "../../types";
 
 interface SidebarProps {
@@ -8,10 +8,6 @@ interface SidebarProps {
 }
 
 export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
-  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
-    new Set(),
-  );
-
   const categories = useMemo(() => {
     const map = new Map<string, FlowEntry[]>();
     for (const flow of flows) {
@@ -22,67 +18,59 @@ export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
     return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
   }, [flows]);
 
-  function toggleCategory(cat: string) {
-    setCollapsedCategories((prev) => {
-      const next = new Set(prev);
-      if (next.has(cat)) next.delete(cat);
-      else next.add(cat);
-      return next;
-    });
+  const selectedFlow = flows.find((f) => f.id === selectedId);
+  const selectedCategory = selectedFlow?.category ?? null;
+
+  function handleCategoryClick(items: FlowEntry[]) {
+    if (items.length > 0) {
+      onSelect(items[0].id);
+    }
   }
 
   return (
-    <aside className="w-64 border-r border-zinc-800 overflow-y-auto shrink-0 bg-zinc-950/50">
-      <nav className="p-3 space-y-1">
-        {categories.map(([category, items]) => {
-          const isCollapsed = collapsedCategories.has(category);
+    <aside
+      className="w-64 overflow-y-auto shrink-0 border-r"
+      style={{
+        background: 'var(--fb-bg-sidebar)',
+        borderColor: 'var(--fb-border)',
+      }}
+    >
+      <div className="p-5">
+        <h2
+          className="text-xs font-bold uppercase tracking-widest mb-5"
+          style={{ color: 'var(--fb-text-primary)' }}
+        >
+          Categories
+        </h2>
+        <nav className="space-y-1">
+          {categories.map(([category, items]) => {
+            const isActive = selectedCategory === category;
 
-          return (
-            <div key={category}>
+            return (
               <button
-                onClick={() => toggleCategory(category)}
-                className="w-full flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-zinc-400 uppercase tracking-wider hover:text-zinc-300 transition-colors"
+                key={category}
+                onClick={() => handleCategoryClick(items)}
+                className={`w-full text-left px-4 py-2.5 rounded-lg text-sm transition-colors ${
+                  isActive
+                    ? "font-medium"
+                    : "hover:bg-white/5"
+                }`}
+                style={{
+                  color: isActive ? 'var(--fb-accent-green)' : 'var(--fb-text-secondary)',
+                  background: isActive ? 'rgba(74, 222, 128, 0.08)' : undefined,
+                }}
               >
-                <svg
-                  className={`w-3 h-3 transition-transform ${isCollapsed ? "" : "rotate-90"}`}
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M8 5l8 7-8 7z" />
-                </svg>
                 {category}
-                <span className="ml-auto text-zinc-600 font-normal normal-case">
-                  {items.length}
-                </span>
               </button>
-              {!isCollapsed && (
-                <ul className="ml-2 space-y-0.5">
-                  {items.map((flow) => (
-                    <li key={flow.id}>
-                      <button
-                        onClick={() => onSelect(flow.id)}
-                        className={`w-full text-left px-3 py-1.5 rounded-md text-sm transition-colors truncate ${
-                          selectedId === flow.id
-                            ? "bg-violet-500/15 text-violet-300 font-medium"
-                            : "text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200"
-                        }`}
-                        title={flow.title}
-                      >
-                        {flow.title}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          );
-        })}
-        {categories.length === 0 && (
-          <p className="text-sm text-zinc-600 px-2 py-4 text-center">
-            No flows match your search
-          </p>
-        )}
-      </nav>
+            );
+          })}
+          {categories.length === 0 && (
+            <p className="text-sm px-2 py-4 text-center" style={{ color: 'var(--fb-text-muted)' }}>
+              No flows found
+            </p>
+          )}
+        </nav>
+      </div>
     </aside>
   );
 }

package/src/client/styles/globals.css

@@ -2,15 +2,27 @@
 
 :root {
   color-scheme: dark;
+  --fb-bg-outer: #0b0e17;
+  --fb-bg-window: #111827;
+  --fb-bg-titlebar: #161b28;
+  --fb-bg-content: #131a2b;
+  --fb-bg-sidebar: #111827;
+  --fb-border: #1e293b;
+  --fb-text-primary: #e2e8f0;
+  --fb-text-secondary: #94a3b8;
+  --fb-text-muted: #64748b;
+  --fb-accent-green: #4ade80;
+  --fb-accent-violet: #8b5cf6;
 }
 
 body {
   margin: 0;
   font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, sans-serif;
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: var(--fb-bg-outer);
 }
 
 /* Mermaid SVG sizing */
@@ -30,10 +42,10 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #3f3f46;
+  background: #1e293b;
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #52525b;
+  background: #334155;
 }