stream_weaver 0.3.0

data/examples/layout/modal_demo.rb

@@ -0,0 +1,215 @@
+# frozen_string_literal: true
+
+# Modal Demo - demonstrates modal dialogs
+#
+# Run with: ruby examples/modal_demo.rb
+
+require_relative '../../lib/stream_weaver'
+
+app = StreamWeaver.app "Modal Demo" do
+  header1 "Modal Dialogs Demo"
+
+  md "This example demonstrates **modal dialogs** with different sizes and use cases."
+
+  # Initialize state
+  state[:items] ||= ["Item 1", "Item 2", "Item 3"]
+  state[:item_to_delete] ||= nil
+  state[:form_submitted] ||= false
+
+  # =========================================
+  # Basic Modal
+  # =========================================
+  header2 "Basic Modal"
+
+  button "Open Basic Modal" do |s|
+    s[:basic_modal_open] = true
+  end
+
+  modal :basic_modal, title: "Welcome!" do
+    text "This is a basic modal dialog."
+    md "Modals are great for:"
+    md "- Confirmations\n- Forms\n- Detailed information\n- Alerts"
+
+    modal_footer do
+      button "Got it!", style: :primary do |s|
+        s[:basic_modal_open] = false
+      end
+    end
+  end
+
+  # =========================================
+  # Confirmation Modal
+  # =========================================
+  header2 "Confirmation Modal"
+  md "Click an item to delete it (with confirmation):"
+
+  card do
+    state[:items].each_with_index do |item, idx|
+      hstack justify: :between, align: :center do
+        text item
+        button "Delete", style: :secondary do |s|
+          s[:item_to_delete] = idx
+          s[:confirm_delete_open] = true
+        end
+      end
+    end
+
+    if state[:items].empty?
+      text "No items. Add some below!"
+    end
+  end
+
+  button "Add Item" do |s|
+    s[:items] << "Item #{s[:items].length + 1}"
+  end
+
+  modal :confirm_delete, title: "Confirm Delete", size: :sm do
+    text "Are you sure you want to delete this item?"
+    text "This action cannot be undone."
+
+    modal_footer do
+      button "Cancel", style: :secondary do |s|
+        s[:confirm_delete_open] = false
+        s[:item_to_delete] = nil
+      end
+      button "Delete" do |s|
+        if s[:item_to_delete]
+          s[:items].delete_at(s[:item_to_delete])
+        end
+        s[:confirm_delete_open] = false
+        s[:item_to_delete] = nil
+      end
+    end
+  end
+
+  # =========================================
+  # Form Modal
+  # =========================================
+  header2 "Form in Modal"
+
+  button "Open Form Modal" do |s|
+    s[:form_modal_open] = true
+    s[:form_submitted] = false
+  end
+
+  if state[:form_submitted]
+    card do
+      text "Form submitted!"
+      text "Name: #{state[:modal_name]}"
+      text "Email: #{state[:modal_email]}"
+    end
+  end
+
+  modal :form_modal, title: "Contact Form", size: :md do
+    text "Fill out the form below:"
+
+    text_field :modal_name, placeholder: "Your name"
+    text_field :modal_email, placeholder: "your@email.com"
+    text_area :modal_message, placeholder: "Your message...", rows: 3
+
+    modal_footer do
+      button "Cancel", style: :secondary do |s|
+        s[:form_modal_open] = false
+      end
+      button "Submit" do |s|
+        s[:form_submitted] = true
+        s[:form_modal_open] = false
+      end
+    end
+  end
+
+  # =========================================
+  # Size Variations
+  # =========================================
+  header2 "Modal Sizes"
+  md "Modals come in four sizes: `:sm`, `:md` (default), `:lg`, and `:xl`"
+
+  hstack spacing: :md do
+    button "Small (sm)" do |s|
+      s[:size_sm_open] = true
+    end
+    button "Medium (md)" do |s|
+      s[:size_md_open] = true
+    end
+    button "Large (lg)" do |s|
+      s[:size_lg_open] = true
+    end
+    button "XL" do |s|
+      s[:size_xl_open] = true
+    end
+  end
+
+  modal :size_sm, title: "Small Modal", size: :sm do
+    text "This is a small modal (400px max width)."
+    text "Good for simple confirmations."
+    modal_footer do
+      button "Close" do |s|
+        s[:size_sm_open] = false
+      end
+    end
+  end
+
+  modal :size_md, title: "Medium Modal", size: :md do
+    text "This is a medium modal (560px max width)."
+    text "The default size, good for most use cases."
+    modal_footer do
+      button "Close" do |s|
+        s[:size_md_open] = false
+      end
+    end
+  end
+
+  modal :size_lg, title: "Large Modal", size: :lg do
+    text "This is a large modal (800px max width)."
+    text "Good for forms with more fields or detailed content."
+    md "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    modal_footer do
+      button "Close" do |s|
+        s[:size_lg_open] = false
+      end
+    end
+  end
+
+  modal :size_xl, title: "Extra Large Modal", size: :xl do
+    text "This is an extra large modal (1140px max width)."
+    text "Good for complex content like data tables or multi-column layouts."
+
+    columns widths: ['50%', '50%'] do
+      column do
+        header4 "Left Column"
+        text "Some content on the left side."
+        text_field :xl_field_1, placeholder: "Field 1"
+      end
+      column do
+        header4 "Right Column"
+        text "Some content on the right side."
+        text_field :xl_field_2, placeholder: "Field 2"
+      end
+    end
+
+    modal_footer do
+      button "Close" do |s|
+        s[:size_xl_open] = false
+      end
+    end
+  end
+
+  # =========================================
+  # Usage notes
+  # =========================================
+  md """
+---
+**How it works:**
+- Modals use state key `:{modal_key}_open` to control visibility
+- Set to `true` to open, `false` to close
+- Close by: clicking backdrop, pressing Escape, or button action
+- Sizes: `:sm` (400px), `:md` (560px), `:lg` (800px), `:xl` (1140px)
+"""
+
+  md "---"
+  button "Reset Demo", style: :secondary do |s|
+    s.clear
+  end
+end
+
+app.run!

data/examples/layout/navigation_demo.rb

@@ -0,0 +1,227 @@
+# frozen_string_literal: true
+
+# Navigation Components Demo
+# Demonstrates Tabs, Breadcrumbs, and Dropdown/Menu components
+#
+# Run with: ruby -r ./lib/stream_weaver examples/navigation_demo.rb
+
+require_relative '../../lib/stream_weaver'
+
+app "Navigation Components", layout: :wide do
+  header "Navigation Components Demo"
+  text "This demo showcases the Phase 2 navigation components: Tabs, Breadcrumbs, and Dropdown menus."
+
+  # =========================================
+  # Breadcrumbs
+  # =========================================
+  header2 "Breadcrumbs"
+  text "Navigate hierarchical content with breadcrumb trails."
+
+  breadcrumbs do
+    crumb "Home", href: "/"
+    crumb "Products", href: "/products"
+    crumb "Electronics", href: "/products/electronics"
+    crumb "Laptops"  # Current page - no href
+  end
+
+  text "Custom separator:"
+  breadcrumbs separator: ">" do
+    crumb "Dashboard", href: "/dashboard"
+    crumb "Settings", href: "/settings"
+    crumb "Profile"
+  end
+
+  # =========================================
+  # Tabs - Line Variant (default)
+  # =========================================
+  header2 "Tabs - Line Variant"
+  text "Classic underline tabs - clean and minimal."
+
+  tabs :demo_tabs, variant: :line do
+    tab "Overview" do
+      card do
+        card_header "Overview Tab"
+        card_body do
+          text "This is the overview content. Tabs maintain state on the server, so switching tabs persists across page refreshes."
+          text_field :overview_input, placeholder: "Type something here..."
+        end
+      end
+    end
+
+    tab "Details" do
+      card do
+        card_header "Details Tab"
+        card_body do
+          text "Here are the details. Each tab can contain any StreamWeaver components."
+          vstack spacing: :sm do
+            checkbox :detail_option1, "Enable feature A"
+            checkbox :detail_option2, "Enable feature B"
+          end
+        end
+      end
+    end
+
+    tab "Settings" do
+      card do
+        card_header "Settings Tab"
+        card_body do
+          text "Configure your preferences here."
+          select :theme, ["Light", "Dark", "System"], default: "System"
+        end
+      end
+    end
+  end
+
+  # =========================================
+  # Tabs - Enclosed Variant
+  # =========================================
+  header2 "Tabs - Enclosed Variant"
+  text "Traditional boxed tabs with borders."
+
+  tabs :enclosed_tabs, variant: :enclosed do
+    tab "First" do
+      text "Content for the first enclosed tab."
+    end
+    tab "Second" do
+      text "Content for the second enclosed tab."
+    end
+    tab "Third" do
+      text "Content for the third enclosed tab."
+    end
+  end
+
+  # =========================================
+  # Tabs - Soft Rounded Variant
+  # =========================================
+  header2 "Tabs - Soft Rounded Variant"
+  text "Modern pill-style tabs with rounded backgrounds."
+
+  tabs :rounded_tabs, variant: :"soft-rounded" do
+    tab "All" do
+      text "Showing all items."
+    end
+    tab "Active" do
+      text "Showing only active items."
+    end
+    tab "Archived" do
+      text "Showing archived items."
+    end
+  end
+
+  # =========================================
+  # Dropdown Menu
+  # =========================================
+  header2 "Dropdown Menu"
+  text "Click the button to reveal a dropdown menu with actions."
+
+  hstack spacing: :md, align: :center do
+    dropdown do
+      trigger do
+        button "Actions", style: :primary
+      end
+
+      menu do
+        menu_item "Edit" do |s|
+          s[:last_action] = "Edit clicked"
+        end
+        menu_item "Duplicate" do |s|
+          s[:last_action] = "Duplicate clicked"
+        end
+        menu_divider
+        menu_item "Archive" do |s|
+          s[:last_action] = "Archive clicked"
+        end
+        menu_item "Delete", style: :destructive do |s|
+          s[:last_action] = "Delete clicked"
+        end
+      end
+    end
+
+    dropdown do
+      trigger do
+        button "More Options", style: :secondary
+      end
+
+      menu do
+        menu_item "View Profile" do |s|
+          s[:last_action] = "View Profile clicked"
+        end
+        menu_item "Account Settings" do |s|
+          s[:last_action] = "Account Settings clicked"
+        end
+        menu_divider
+        menu_item "Sign Out", style: :destructive do |s|
+          s[:last_action] = "Sign Out clicked"
+        end
+      end
+    end
+
+    text -> (s) { s[:last_action] ? "Last action: #{s[:last_action]}" : "Click a menu item..." }
+  end
+
+  # =========================================
+  # Combined Example
+  # =========================================
+  header2 "Combined Example"
+  text "Navigation components work together seamlessly."
+
+  breadcrumbs do
+    crumb "App", href: "/"
+    crumb "Users", href: "/users"
+    crumb "John Doe"
+  end
+
+  hstack spacing: :md, justify: :between, align: :center do
+    header3 "User Profile"
+
+    dropdown do
+      trigger do
+        button "User Actions", style: :secondary
+      end
+
+      menu do
+        menu_item "Edit Profile" do |s|
+          s[:profile_action] = "editing"
+        end
+        menu_item "Change Password" do |s|
+          s[:profile_action] = "password"
+        end
+        menu_divider
+        menu_item "Deactivate Account", style: :destructive do |s|
+          s[:profile_action] = "deactivate"
+        end
+      end
+    end
+  end
+
+  tabs :user_tabs do
+    tab "Info" do
+      vstack spacing: :sm do
+        text "Name: John Doe"
+        text "Email: john@example.com"
+        text "Role: Administrator"
+      end
+    end
+
+    tab "Activity" do
+      text "Recent activity will be shown here."
+    end
+
+    tab "Permissions" do
+      checkbox_group :permissions, select_all: "Select All", select_none: "Clear" do
+        item "read" do
+          text "Read - View content"
+        end
+        item "write" do
+          text "Write - Create and edit content"
+        end
+        item "delete" do
+          text "Delete - Remove content"
+        end
+        item "admin" do
+          text "Admin - Full access"
+        end
+      end
+    end
+  end
+end.run!

data/examples/layout/route_tabs_demo.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# Route tabs demo: two url: true tab groups (bookmarkable, back/forward-aware)
+# plus a deferred form to exercise the morph-does-not-revert-the-tab behavior.
+#
+#   PORT=4573 ruby examples/layout/route_tabs_demo.rb
+#   open http://127.0.0.1:4573/?view=2&panel=1
+require_relative "../../lib/stream_weaver"
+
+app = StreamWeaver.app "Route Tabs Demo" do
+  header1 "Route Tabs Demo"
+
+  tabs :view, url: true do
+    tab "Overview" do
+      header3 "Overview"
+      text "The overview panel. Bookmark me with ?view=0."
+    end
+    tab "Findings" do
+      header3 "Findings"
+      text "The findings panel. Bookmark me with ?view=1."
+    end
+    tab "Details" do
+      header3 "Details"
+      text "The details panel. Bookmark me with ?view=2."
+      form :notes_form do
+        text_field :note, placeholder: "Add a note"
+        submit "Save note" do |values|
+          state[:last_note] = values[:note]
+        end
+      end
+      md "Last saved note: **#{state[:last_note] || '(none)'}**"
+    end
+  end
+
+  # Read BELOW the tabs declaration: above it, state[:view] still holds the raw
+  # pre-authority param (or stale session value) -- the resolved integer only
+  # exists once the group has applied URL authority.
+  md "Active view index (server-resolved): **#{state[:view].inspect}**"
+
+  md "---"
+
+  tabs :panel, url: true, variant: :enclosed do
+    tab "Alpha" do
+      text "Second group, panel Alpha (?panel=0)."
+    end
+    tab "Beta" do
+      text "Second group, panel Beta (?panel=1)."
+    end
+  end
+end
+
+app.run!(open_browser: false) if __FILE__ == $PROGRAM_NAME

data/examples/layout/routing_demo.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# URL Routing Demo
+# Shows deep-linking, bookmarkable URLs, and browser back/forward
+#
+# Run with: ruby -r ./lib/stream_weaver examples/layout/routing_demo.rb
+#
+# Try:
+#   - Click nav items and watch the URL bar update
+#   - Visit /dashboard or /settings directly
+#   - Press back/forward in the browser
+
+require_relative '../../lib/stream_weaver'
+
+app "URL Routing Demo" do
+  route_by :page, home: "/", dashboard: "/dashboard", settings: "/settings"
+
+  state[:page] ||= :home
+
+  navbar do
+    nav_item "Home",      href: "/",          active: state[:page] == :home
+    nav_item "Dashboard", href: "/dashboard",  active: state[:page] == :dashboard
+    nav_item "Settings",  href: "/settings",   active: state[:page] == :settings
+  end
+
+  case state[:page]
+  when :home
+    header "Home"
+    text "Welcome! Click the nav links above — the URL bar updates and each page is bookmarkable."
+    text "Try visiting /dashboard or /settings directly."
+    button "Go to Dashboard" do |s|
+      s[:page] = :dashboard
+    end
+
+  when :dashboard
+    header "Dashboard"
+    text "You navigated to /dashboard. Bookmark this URL and come back — it'll load right here."
+    text_field :dashboard_note, label: "Notes", placeholder: "Type something..."
+    button "Go to Settings" do |s|
+      s[:page] = :settings
+    end
+
+  when :settings
+    header "Settings"
+    text "You're at /settings. Press the browser Back button to go back."
+    checkbox :notifications, "Enable notifications"
+    checkbox :dark_mode, "Dark mode"
+    button "Back to Home" do |s|
+      s[:page] = :home
+    end
+  end
+end.run!

data/examples/layout/scroll_box_demo.rb

@@ -0,0 +1,154 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Demonstrates the scroll_box component for constraining vertical space.
+#
+# Use cases shown:
+# 1. Static long content  - Terms & conditions, documentation
+# 2. Live log output      - Auto-scrolling log tail via SSE timers
+# 3. Chat/message history - Scrollable message list
+# 4. Data list            - Long lists constrained to a fixed height
+#
+# Run with: bundle exec ruby examples/layout/scroll_box_demo.rb
+
+require_relative "../../lib/stream_weaver"
+
+# Simulated log messages for the live demo
+LOG_MESSAGES = [
+  "INFO  -- : Request GET /api/v2/users completed in 42ms",
+  "INFO  -- : Cache HIT for key session:abc123",
+  "DEBUG -- : SQL (1.2ms) SELECT * FROM users WHERE active = true",
+  "INFO  -- : Request POST /api/v2/orders completed in 118ms",
+  "WARN  -- : Slow query detected (>100ms) on orders#index",
+  "INFO  -- : Background job ProcessEmailJob enqueued",
+  "INFO  -- : WebSocket connection opened for channel:dashboard",
+  "ERROR -- : Redis connection timeout after 5000ms, retrying...",
+  "INFO  -- : Redis reconnected successfully",
+  "DEBUG -- : Cache MISS for key metrics:daily, computing...",
+  "INFO  -- : Request GET /health returned 200 in 2ms",
+  "WARN  -- : Rate limit approaching for IP 192.168.1.42 (85/100)",
+  "INFO  -- : Deploy webhook received, version v2.14.3",
+  "INFO  -- : Asset compilation completed in 3.2s",
+  "ERROR -- : Failed to send notification email: SMTP timeout",
+].freeze
+
+CHAT_MESSAGES = [
+  { user: "Alice", text: "Has anyone seen the latency spike on the API gateway?" },
+  { user: "Bob", text: "Yeah, I'm looking into it now. Seems like a connection pool issue." },
+  { user: "Carol", text: "We saw something similar last week. Check the pgbouncer config." },
+  { user: "Alice", text: "Good call. The max_client_conn was set too low." },
+  { user: "Bob", text: "Bumped it to 200, deploying now." },
+  { user: "Carol", text: "Keep an eye on memory usage after that change." },
+  { user: "Bob", text: "Will do. Monitoring dashboard is up." },
+  { user: "Alice", text: "Latency is back to normal. Nice work!" },
+].freeze
+
+TERMS = <<~TERMS
+  1. ACCEPTANCE OF TERMS. By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.
+
+  2. PROVISION OF SERVICE. The service is provided "as is" and on an "as available" basis. We make no warranties, expressed or implied, and hereby disclaim all warranties including without limitation, implied warranties of merchantability and fitness for a particular purpose.
+
+  3. USER CONDUCT. You agree not to use the service for any unlawful purpose or in any way that could damage, disable, or impair the service. You agree not to attempt to gain unauthorized access to any part of the service.
+
+  4. INTELLECTUAL PROPERTY. All content included in the service, such as text, graphics, logos, and software, is the property of the service provider and is protected by copyright and other intellectual property laws.
+
+  5. PRIVACY POLICY. Your use of the service is also governed by our Privacy Policy, which is incorporated into these terms by reference. Please review our Privacy Policy to understand our practices.
+
+  6. LIMITATION OF LIABILITY. In no event shall the service provider be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of the service.
+
+  7. MODIFICATIONS TO TERMS. We reserve the right to modify these terms at any time. Continued use of the service after changes constitutes acceptance of the new terms.
+
+  8. GOVERNING LAW. These terms shall be governed by and construed in accordance with the laws of the applicable jurisdiction, without regard to conflict of law provisions.
+
+  9. TERMINATION. We may terminate or suspend your access to the service at any time, without prior notice, for conduct that we believe violates these terms or is harmful to other users.
+
+  10. CONTACT. If you have questions about these terms, please contact us through the appropriate channels provided on our website.
+TERMS
+
+App = app "ScrollBox Demo", layout: :wide do
+  hstack(justify: :between, align: :center) do
+    header1 "ScrollBox Component Demo"
+    theme_switcher
+  end
+  md "The `scroll_box` constrains content to a fixed height with vertical scrolling."
+
+  columns widths: ["50%", "50%"] do
+    # ---- Left column ----
+    column do
+      # Use case 1: Static long content
+      header2 "Terms & Conditions"
+      text "A classic scroll_box use case - long legal text in a constrained area:"
+
+      scroll_box max_height: "200px" do
+        md TERMS
+      end
+
+      # Use case 2: Data list
+      header2 "File Browser"
+      text "Long lists constrained to avoid page bloat:"
+
+      scroll_box max_height: "250px" do
+        vstack spacing: :xs, divider: true do
+          50.times do |i|
+            ext = %w[.rb .js .yml .md .json].sample
+            size = rand(1..500)
+            hstack spacing: :sm, justify: :between, align: :center do
+              phrase "app/models/file_#{i + 1}#{ext}"
+              badge "#{size} KB", size: :sm
+            end
+          end
+        end
+      end
+    end
+
+    # ---- Right column ----
+    column do
+      # Use case 3: Chat messages
+      header2 "Team Chat"
+      text "Message history in a scrollable container:"
+
+      scroll_box max_height: "200px" do
+        vstack spacing: :sm do
+          CHAT_MESSAGES.each do |msg|
+            div do
+              md "**#{msg[:user]}**: #{msg[:text]}"
+            end
+          end
+        end
+      end
+
+      # Use case 4: Live log output (SSE-updated)
+      header2 "Live Application Log"
+      text "Log entries arrive via SSE and accumulate in the scroll_box:"
+
+      scroll_box max_height: "250px" do
+        div id: "log-output" do
+          text "[#{Time.now.strftime('%H:%M:%S')}] Log stream started..."
+        end
+      end
+    end
+  end
+
+  # --- Live log timer ---
+  every(2) do |streamer|
+    msg = LOG_MESSAGES.sample
+    timestamp = Time.now.strftime("%H:%M:%S.%L")
+    level_color = if msg.start_with?("ERROR")
+      "color: #ef4444"
+    elsif msg.start_with?("WARN")
+      "color: #eab308"
+    elsif msg.start_with?("DEBUG")
+      "color: #6b7280"
+    else
+      "color: #a3a3a3"
+    end
+
+    streamer.append("#log-output") do
+      div style: "font-family: monospace; font-size: 0.85rem; padding: 2px 0; #{level_color}" do
+        text "[#{timestamp}] #{msg}"
+      end
+    end
+  end
+end
+
+App.run! if __FILE__ == $0