stream_weaver 0.3.0

data/examples/components/lesson_demo.rb

@@ -0,0 +1,53 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+glossary = {
+  "bullish" => {
+    simple: "Expecting prices to go UP",
+    detailed: "A bullish outlook means expecting prices to increase. Investors who are bullish believe the market or a specific asset will rise in value. The term comes from how a bull attacks - thrusting its horns upward."
+  },
+  "bearish" => {
+    simple: "Expecting prices to go DOWN",
+    detailed: "A bearish outlook means expecting prices to decrease. Investors who are bearish believe the market or a specific asset will fall in value. The term comes from how a bear attacks - swiping its paws downward."
+  },
+  "Quad 4" => {
+    simple: "Economic regime: deflation",
+    detailed: "Quad 4 is one of four economic regimes in the Growth-Inflation-Policy (GIP) framework. It occurs when both growth AND inflation are falling - a deflationary environment where bonds typically outperform stocks and cash is king."
+  },
+  "rally" => {
+    simple: "Prices rising quickly",
+    detailed: "A rally is a period of sustained increases in asset prices. During a rally, buying pressure exceeds selling pressure, pushing prices higher. Rallies can last days, weeks, or months."
+  },
+  "duration" => {
+    simple: "How much bonds react to rate changes",
+    detailed: "Duration measures how sensitive a bond's price is to changes in interest rates. A bond with 5-year duration will lose ~5% if rates rise 1%. Longer duration = more sensitivity = more risk/reward."
+  }
+}
+
+App = app "Lesson Demo: Understanding Market Dynamics" do
+  header "Understanding Market Terms"
+  text "Hover over the highlighted terms to see their definitions. Click the tooltip for more detail."
+
+  # Block-based DSL approach
+  lesson_text glossary: glossary do
+    phrase "When analysts are "
+    term "bullish"
+    phrase " on stocks but "
+    term "bearish"
+    phrase " on bonds, it often indicates we're NOT in "
+    term "Quad 4"
+    phrase "."
+  end
+
+  header "Bond Market Dynamics"
+
+  # String-based approach with {term} markers
+  lesson_text "In {Quad 4}, bonds typically {rally} because interest rates fall. This benefits investors holding bonds with high {duration}.", glossary: glossary
+
+  header "Grade Level Selection (Coming Soon)"
+  text "Future versions will support switching between 5th, 8th, and 11th grade explanations."
+end
+
+App.run! if __FILE__ == $0

data/examples/components/markdown_demo.rb

@@ -0,0 +1,110 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Demo of GitHub Flavored Markdown support
+# Shows the full power of the md component using Kramdown
+
+require_relative '../../lib/stream_weaver'
+
+app "GitHub Flavored Markdown Demo" do
+  header1 "GitHub Flavored Markdown in StreamWeaver"
+
+  text "The md component supports full GFM via Kramdown. The text component renders literally."
+
+  header "1. Text Formatting"
+  md <<~MD
+    **Bold text** and *italic text* and ***bold italic***
+
+    ~~Strikethrough~~ text
+
+    `Inline code` for short snippets
+  MD
+
+  header "2. Links and Images"
+  md <<~MD
+    [Visit GitHub](https://github.com) - regular link
+
+    [Link with title](https://example.com "Example Site") - hover for title
+
+    ![Ruby Logo](https://www.ruby-lang.org/images/header-ruby-logo.png)
+  MD
+
+  header "3. Lists"
+  md <<~MD
+    **Unordered list:**
+    - First item
+    - Second item
+      - Nested item
+      - Another nested
+    - Third item
+
+    **Ordered list:**
+    1. Step one
+    2. Step two
+    3. Step three
+
+    **Task list:**
+    - [x] Completed task
+    - [ ] Incomplete task
+    - [ ] Another todo
+  MD
+
+  header "4. Blockquotes"
+  md <<~MD
+    > This is a blockquote.
+    > It can span multiple lines.
+    >
+    > > Nested blockquotes work too!
+  MD
+
+  header "5. Code Blocks"
+  md <<~MD
+    ```ruby
+    def hello(name)
+      puts "Hello, \#{name}!"
+    end
+
+    hello("World")
+    ```
+
+    ```javascript
+    const greet = (name) => {
+      console.log(`Hello, ${name}!`);
+    };
+    ```
+  MD
+
+  header "6. Tables"
+  md <<~MD
+    | Feature | Supported | Notes |
+    |---------|:---------:|-------|
+    | Bold | ✅ | `**text**` |
+    | Italic | ✅ | `*text*` |
+    | Links | ✅ | `[text](url)` |
+    | Tables | ✅ | GFM style |
+    | Lists | ✅ | Ordered & unordered |
+  MD
+
+  header "7. Horizontal Rules"
+  md <<~MD
+    Content above the rule.
+
+    ---
+
+    Content below the rule.
+  MD
+
+  header "8. Headers in Markdown"
+  md <<~MD
+    ## H2 Header
+    ### H3 Header
+    #### H4 Header
+  MD
+
+  header "9. Dynamic Content"
+  text_field :name, placeholder: "Enter your name"
+
+  if state[:name] && !state[:name].empty?
+    md "Welcome, **#{state[:name]}**! You can use *markdown* in dynamic content too."
+  end
+end.run!

data/examples/components/mermaid_demo.rb

@@ -0,0 +1,166 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Demo of Mermaid diagram support
+# Covers all options: basic, zoom/pan, compact in cards, ELK layout, theme_vars
+
+require_relative '../../lib/stream_weaver'
+
+app "Mermaid Diagram Demo" do
+  header1 "Mermaid Diagrams in StreamWeaver"
+  md "Mermaid.js is loaded lazily from CDN — only when a `mermaid` component is on the page."
+
+  # -----------------------------------------------------------------------
+  # 1. Basic usage
+  # -----------------------------------------------------------------------
+  header2 "1. Basic Usage"
+  md "Pass a string (or heredoc) — any valid Mermaid diagram type."
+
+  mermaid <<~MERMAID
+    graph LR
+      A[Start] --> B{Is it working?}
+      B -- Yes --> C[Ship it]
+      B -- No  --> D[Debug]
+      D --> A
+  MERMAID
+
+  # -----------------------------------------------------------------------
+  # 2. zoom: true — interactive zoom/pan with controls
+  # -----------------------------------------------------------------------
+  header2 "2. Zoom / Pan (zoom: true)"
+  md "Adds +/−/reset buttons and Ctrl+scroll zoom. Useful for large diagrams."
+
+  mermaid <<~MERMAID, zoom: true
+    graph TD
+      Client["Browser / Mobile"]
+      GW["API Gateway"]
+      Auth["Auth Service"]
+      UserDB[("Users DB")]
+      Redis["Token Blacklist (Redis)"]
+      App["Application"]
+
+      Client -->|"POST /auth/login"| GW
+      GW --> Auth
+      Auth -->|"verify"| UserDB
+      Auth -->|"issue JWT"| GW
+      GW -->|"HttpOnly cookie"| Client
+
+      Client -->|"GET /api/data (Bearer)"| GW
+      GW -->|"check blacklist"| Redis
+      GW -->|"forward valid"| App
+      App --> Client
+
+      style Client fill:#dbeafe,stroke:#3b82f6,color:#1e3a5f
+      style Auth   fill:#dcfce7,stroke:#22c55e,color:#166534
+      style Redis  fill:#fef3c7,stroke:#f59e0b,color:#92400e
+      style UserDB fill:#f3e8ff,stroke:#a855f7,color:#6b21a8
+  MERMAID
+
+  # -----------------------------------------------------------------------
+  # 3. compact: true — reduced padding for embedding inside cards
+  # -----------------------------------------------------------------------
+  header2 "3. Compact Mode (compact: true)"
+  md "Reduces diagram padding so it fits naturally inside a `card`. Shown side-by-side here."
+
+  columns widths: ['50%', '50%'] do
+    column do
+      card do
+        header3 "Request Flow"
+        mermaid <<~MERMAID, compact: true
+          sequenceDiagram
+            Client->>+Server: GET /data
+            Server->>+DB: SELECT ...
+            DB-->>-Server: rows
+            Server-->>-Client: 200 JSON
+        MERMAID
+      end
+    end
+    column do
+      card do
+        header3 "Deploy Pipeline"
+        mermaid <<~MERMAID, compact: true
+          graph LR
+            PR[Pull Request] --> CI[CI Tests]
+            CI --> Review[Code Review]
+            Review --> Merge[Merge]
+            Merge --> Deploy[Deploy]
+            Deploy --> Monitor[Monitor]
+        MERMAID
+      end
+    end
+  end
+
+  # -----------------------------------------------------------------------
+  # 4. layout: :elk — ELK layout engine (better for complex graphs)
+  # -----------------------------------------------------------------------
+  header2 "4. ELK Layout Engine (layout: :elk)"
+  md "The ELK layout engine handles dense, complex graphs better than the default Dagre engine. Loaded from CDN only when needed."
+
+  mermaid <<~MERMAID, layout: :elk
+    graph TD
+      Ingress --> ServiceA
+      Ingress --> ServiceB
+      Ingress --> ServiceC
+      ServiceA --> Cache
+      ServiceA --> DB
+      ServiceB --> Queue
+      ServiceB --> DB
+      ServiceC --> Cache
+      ServiceC --> Storage
+      Queue --> Worker1
+      Queue --> Worker2
+      Worker1 --> DB
+      Worker2 --> Storage
+  MERMAID
+
+  # -----------------------------------------------------------------------
+  # 5. theme_vars — per-diagram color overrides
+  # -----------------------------------------------------------------------
+  header2 "5. Theme Variables (theme_vars:)"
+  md "Override Mermaid's `themeVariables` per diagram — useful for brand colors or callout diagrams."
+
+  indigo_theme = {
+    primaryColor: "#6366f1",
+    primaryTextColor: "#ffffff",
+    primaryBorderColor: "#4f46e5",
+    lineColor: "#6366f1",
+    secondaryColor: "#e0e7ff",
+    tertiaryColor: "#f0fdf4"
+  }
+  mermaid <<~MERMAID, theme_vars: indigo_theme
+    graph LR
+      User --> App
+      App --> API
+      API --> DB
+      API --> Cache
+  MERMAID
+
+  # -----------------------------------------------------------------------
+  # 6. Other diagram types
+  # -----------------------------------------------------------------------
+  header2 "6. Other Diagram Types"
+  md "Any Mermaid diagram type works: sequence, pie, gantt, gitgraph, etc."
+
+  columns widths: ['50%', '50%'] do
+    column do
+      header3 "Pie Chart"
+      mermaid <<~MERMAID
+        pie title Test Coverage
+          "Unit" : 65
+          "Integration" : 25
+          "E2E" : 10
+      MERMAID
+    end
+    column do
+      header3 "Sequence Diagram"
+      mermaid <<~MERMAID
+        sequenceDiagram
+          autonumber
+          Alice->>Bob: Hello!
+          Bob-->>Alice: Hi there
+          Alice->>Bob: How are you?
+          Bob-->>Alice: All good, thanks
+      MERMAID
+    end
+  end
+end.run!

data/examples/components/pareto_set.rb

@@ -0,0 +1,64 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Demonstrates the six FAC-P2.2 pareto components together: date_field,
+# accordion/section, chip_group, board/lane/board_card, text tones +
+# callout banners, and columns equal-split/auto-distribution.
+# Run: ruby examples/components/pareto_set.rb
+
+require_relative '../../lib/stream_weaver'
+
+TASKS = {
+  todo: ["Write proposal", "Review PR #42"],
+  doing: ["Ship pareto components"],
+  done: ["Set up CI", "Draft gap catalog"]
+}.freeze
+
+ROLES = %w[Engineer Designer PM Writer Analyst].freeze
+
+App = app "Pareto Components" do
+  header1 "Pareto Component Set (FAC-P2.2)"
+
+  header "1. date_field"
+  date_field :deadline, label: "Deadline", min: "2026-01-01", max: "2027-12-31"
+  if (parsed = StreamWeaver::Components::DateField.to_date(state[:deadline]))
+    text "Parsed as a Date: #{parsed.iso8601}", tone: :muted
+  end
+
+  header "2. accordion / section"
+  accordion do
+    section("What is this?", open: true) do
+      text "Native <details>/<summary> disclosure -- zero JS."
+    end
+    section("Why not expandable_card?") do
+      text "expandable_card needs a state key; this doesn't."
+    end
+  end
+
+  header "3. chip_group"
+  chip_group :tags, %w[Ruby Rails Sinatra Hanami], multi: true
+  text "Selected: #{Array(state[:tags]).join(', ')}", tone: :caption
+
+  header "4. board / lane / board_card"
+  board do
+    TASKS.each do |lane_key, items|
+      lane(lane_key.to_s.capitalize) do
+        items.each { |item| board_card { text item } }
+      end
+    end
+  end
+
+  header "5. text tones + callout"
+  text "Muted helper text.", tone: :muted
+  text "Something went wrong.", tone: :error
+  text "Operation succeeded.", tone: :success
+  callout("Saved successfully.", tone: :success)
+  callout(variant: :warning, title: "Heads up") do
+    text "The block form still works exactly as before."
+  end
+
+  header "6. columns equal-split"
+  columns(3, items: ROLES) { |role| card { text role } }
+end
+
+App.run! if __FILE__ == $0

data/examples/components/prd_demo.rb

@@ -0,0 +1,21 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# PRD document pattern demo — replicates the "Calendar-Driven Travel State" PRD artifact.
+# Loads prd_dsl.rb as its body so standalone and canvas-push stay in content sync.
+# Demonstrates: doc_header, doc_section_header, sidebar_toc, callout, mermaid,
+#   comparison (scope grid), table, code_block, card.
+#
+# Run: ruby examples/components/prd_demo.rb
+# Or for canvas push: streamweaver canvas-push <session> < examples/components/prd_dsl.rb
+
+require_relative "../../lib/stream_weaver"
+
+PRD_DSL_PATH = File.join(__dir__, "prd_dsl.rb")
+
+PrdDemo = app "PRD: Calendar-Driven Travel State", theme: :doc do
+  theme_toggle mode: :light
+  instance_eval(File.read(PRD_DSL_PATH), PRD_DSL_PATH)
+end
+
+PrdDemo.run! if __FILE__ == $0