stream_weaver 0.3.0

data/examples/charts/stacked_bar_chart_demo.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Stacked bar chart demonstration
+app "Stacked Bar Chart Demo" do
+  header2 "StreamWeaver Charts - Phase 3"
+
+  # Example 1: Array of hashes (most common format)
+  card do
+    header3 "Daily Timing by Phase"
+    stacked_bar_chart data: [
+      { label: "Mon", calendar: 45, news: 120, tasks: 30 },
+      { label: "Tue", calendar: 50, news: 100, tasks: 35 },
+      { label: "Wed", calendar: 40, news: 140, tasks: 25 },
+      { label: "Thu", calendar: 55, news: 90, tasks: 40 },
+      { label: "Fri", calendar: 35, news: 110, tasks: 45 }
+    ], title: "Time Breakdown (seconds)"
+  end
+
+  columns widths: ['50%', '50%'] do
+    column do
+      # Example 2: Grouped (not stacked)
+      card do
+        header3 "Grouped Bars"
+        stacked_bar_chart data: [
+          { label: "Q1", sales: 100, costs: 60 },
+          { label: "Q2", sales: 120, costs: 70 },
+          { label: "Q3", sales: 140, costs: 75 },
+          { label: "Q4", sales: 180, costs: 90 }
+        ], stack: false, height: "200px"
+      end
+    end
+
+    column do
+      # Example 3: Horizontal stacked
+      card do
+        header3 "Horizontal Stacked"
+        stacked_bar_chart data: [
+          { label: "Team A", frontend: 40, backend: 35, devops: 25 },
+          { label: "Team B", frontend: 30, backend: 45, devops: 25 },
+          { label: "Team C", frontend: 50, backend: 30, devops: 20 }
+        ], horizontal: true, height: "200px"
+      end
+    end
+  end
+
+  # Example 4: Hash of series format
+  card do
+    header3 "Series Format (Hash of Arrays)"
+    stacked_bar_chart data: {
+      "Revenue" => [100, 120, 140, 160, 180],
+      "Expenses" => [60, 70, 75, 80, 90],
+      "Profit" => [40, 50, 65, 80, 90]
+    }, title: "Financial Overview"
+  end
+
+  # Example 5: Custom colors
+  card do
+    header3 "Custom Colors"
+    stacked_bar_chart data: [
+      { label: "Jan", a: 30, b: 20, c: 10 },
+      { label: "Feb", a: 35, b: 25, c: 15 },
+      { label: "Mar", a: 40, b: 30, c: 20 }
+    ], colors: ["#1e40af", "#3b82f6", "#93c5fd"], height: "180px"
+  end
+
+  text "Stacked bar charts compare distributions across categories. Use stack: false for grouped bars."
+end.run!

data/examples/claude_code/README.md

@@ -0,0 +1,85 @@
+# Claude Code Integration Examples
+
+Interactive canvas workflows powered by Claude Code slash commands.
+
+## Examples
+
+### [codebreaker/](codebreaker/)
+**Operation: CODEBREAKER** - Spy/hacker-themed code intelligence tool.
+
+Claude Code analyzes codebases using its native tools (Glob, Grep, Read) and presents findings through an interactive dark-themed dashboard. Demonstrates Claude-native approach where Claude IS the intelligence.
+
+```bash
+cd codebreaker && claude
+# /infiltrate
+```
+
+### [verification_flow/](verification_flow/)
+**Account Verification Flow** - Multi-step form workflow.
+
+Realistic 2FA-style flow demonstrating forms, status pages, toasts, and canvas_continue for spinner feedback. Shows canvas + terminal interplay.
+
+```bash
+cd verification_flow && claude
+# /verify
+```
+
+### [tutorial/](tutorial/)
+**StreamWeaver Canvas Tutorial** - Freeform, conversational learning.
+
+Unlike the standalone `tutorial.rb`, this is Claude-guided exploration. Ask questions naturally, see code + rendered output, iterate with modifications. No fixed order.
+
+```bash
+cd tutorial && claude
+# /learn
+```
+
+## Architecture
+
+All examples follow the same pattern:
+
+```
+example/
+├── .claude/
+│   ├── commands/
+│   │   └── command.md    # Slash command instructions
+│   └── settings.local.json  # Pre-allowed streamweaver permissions
+└── README.md
+```
+
+## Key Concepts
+
+### Claude-Native Approach
+Claude Code IS the intelligence. Don't delegate to external scripts.
+
+- **4 external commands**: `panel`, `canvas-push`, `canvas-wait`, `canvas-close`
+- **Claude does the rest**: Generates DSL, analyzes code, interprets results
+
+### Canvas Commands
+
+| Command | Purpose |
+|---------|---------|
+| `streamweaver panel <name> [--fresh]` | Open browser in iTerm split pane |
+| `streamweaver canvas-push <name>` | Push DSL content (stdin) |
+| `streamweaver canvas-wait <name>` | Wait for user input, returns JSON |
+| `streamweaver canvas-toast <name> <msg>` | Show notification overlay |
+| `streamweaver canvas-close <name>` | Close session and browser pane |
+
+### Pre-configured Permissions
+
+Each example includes `.claude/settings.local.json` with pre-allowed streamweaver commands so Claude can run without prompting:
+
+```json
+{
+  "permissions": {
+    "allow": ["Bash(streamweaver *)"]
+  }
+}
+```
+
+## Creating Your Own
+
+1. Create directory with `.claude/commands/yourcommand.md`
+2. Write instructions with canvas-push heredocs and canvas-wait
+3. Add `.claude/settings.local.json` for permissions
+4. Run with `/yourcommand` in Claude Code