stream_weaver 0.3.0

data/examples/puma_dev/config.ru

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Example config.ru for running StreamWeaver apps with Puma-dev
+#
+# Usage:
+#   1. Create this file in your app directory
+#   2. Symlink to Puma-dev: `puma-dev link`
+#   3. Access at http://[directory-name].test
+#
+# The app will use the PORT environment variable set by Puma-dev
+# and will not auto-open the browser.
+
+require 'bundler/setup'
+require 'stream_weaver'
+
+# Define your StreamWeaver app
+App = app "Hello from Puma-dev" do
+  header1 "Welcome to StreamWeaver on Puma-dev!"
+  
+  text "This app is running on Puma-dev with a memorable URL."
+  
+  text_field :name, placeholder: "Enter your name"
+  
+  if state[:name] && state[:name].strip != ""
+    text "Hello, #{state[:name]}!"
+  end
+  
+  button "Clear" do |state|
+    state[:name] = ""
+  end
+end
+
+# Run the app (browser won't auto-open when PORT env var is set by Puma-dev)
+run App

data/examples/puma_dev/standalone_app.rb

@@ -0,0 +1,34 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Standalone mode example - auto-detects port and opens browser
+#
+# Usage:
+#   ruby standalone_app.rb
+#
+# The app will auto-detect an available port and open the browser.
+
+require 'bundler/setup'
+require 'stream_weaver'
+
+App = app "Standalone Mode Example" do
+  header1 "Running in Standalone Mode"
+  
+  text "This app auto-detected a port and opened the browser."
+  text "Perfect for quick one-off scripts!"
+  
+  text_field :message, placeholder: "Type something..."
+  
+  if state[:message] && !state[:message].empty?
+    div do
+      text "You typed: #{state[:message]}"
+    end
+  end
+  
+  button "Clear" do |state|
+    state[:message] = ""
+  end
+end
+
+# Start the app - browser will open automatically
+App.run! if __FILE__ == $0

data/examples/scaffolding/blog.rb

@@ -0,0 +1,49 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+module PostStore
+  @posts = [
+    { id: '1', title: 'Hello World', body: 'First post',   status: 'published' },
+    { id: '2', title: 'Second Post', body: 'Another post', status: 'draft' }
+  ]
+
+  def self.all;      @posts; end
+  def self.find(id); @posts.find { |p| p[:id] == id }; end
+
+  def self.create(attrs)
+    id = ((@posts.map { |p| p[:id].to_i }.max || 0) + 1).to_s
+    @posts << { id: id, **attrs }
+    id
+  end
+
+  def self.update(id, attrs)
+    post = find(id) or return false
+    post.merge!(attrs)
+    true
+  end
+
+  def self.destroy(id)
+    @posts.reject! { |p| p[:id] == id }
+    true
+  end
+end
+
+app 'Blog' do
+  resource :post, store: PostStore do
+    field :title,  :string
+    field :body,   :text
+    field :status, :enum, values: %w[draft published]
+  end
+
+  navbar do
+    nav_item 'Home',  href: '/',       active: state[:_sw_action] == :home
+    nav_item 'Posts', href: '/posts',  active: state[:_sw_resource] == :post
+  end
+
+  page :home, '/' do
+    header1 'My Blog'
+    text 'Welcome! Check out the posts.'
+  end
+end.run!

data/examples/scaffolding/utf_lite.rb

@@ -0,0 +1,105 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+require 'cgi'
+
+# Inline GoalStore — hardcoded fixtures, no YAML file dependencies
+module GoalStore
+  @goals = [
+    { id: '1', title: 'Ship Resource DSL',    horizon: 'month' },
+    { id: '2', title: 'Launch UTF Dashboard', horizon: 'quarter' },
+    { id: '3', title: 'Automate SDRD cycle',  horizon: 'year' }
+  ]
+
+  def self.all;      @goals; end
+  def self.find(id); @goals.find { |g| g[:id] == id }; end
+
+  def self.create(attrs)
+    id = ((@goals.map { |g| g[:id].to_i }.max || 0) + 1).to_s
+    @goals << { id: id, **attrs }
+    id
+  end
+
+  def self.update(id, attrs)
+    goal = find(id) or return false
+    goal.merge!(attrs)
+    true
+  end
+
+  def self.destroy(id)
+    @goals.reject! { |g| g[:id] == id }
+    true
+  end
+end
+
+# Inline InitiativeStore — hardcoded fixtures, no YAML file dependencies
+module InitiativeStore
+  @initiatives = [
+    { id: '1', title: 'Write resource DSL specs', status: 'active',    horizon: 'month' },
+    { id: '2', title: 'Build UTF Lite example',   status: 'active',    horizon: 'month' },
+    { id: '3', title: 'Playwright smoke tests',   status: 'paused',    horizon: 'quarter' }
+  ]
+
+  def self.all;      @initiatives; end
+  def self.find(id); @initiatives.find { |i| i[:id] == id }; end
+
+  def self.create(attrs)
+    id = ((@initiatives.map { |i| i[:id].to_i }.max || 0) + 1).to_s
+    @initiatives << { id: id, **attrs }
+    id
+  end
+
+  def self.update(id, attrs)
+    initiative = find(id) or return false
+    initiative.merge!(attrs)
+    true
+  end
+
+  def self.destroy(id)
+    @initiatives.reject! { |i| i[:id] == id }
+    true
+  end
+end
+
+app 'UTF Lite', layout: :wide, theme: :dashboard do
+  resource :goal, store: GoalStore do
+    field :title,   :string
+    field :horizon, :enum, values: %w[month quarter year]
+
+    index do |goals|
+      header1 'Goals'
+      goals.group_by { |g| g[:horizon] }.each do |horizon, gs|
+        header3 horizon.to_s.capitalize
+        table gs, markdown: true do
+          column :title do |g| CGI.escape_html(g[:title].to_s) end
+          column(:actions, header: '') do |g|
+            eid = CGI.escape(g[:id].to_s)
+            "[View](/goal/#{eid}) [Edit](/goal/#{eid}/edit) [Delete](/goal/#{eid}/delete)"
+          end
+        end
+      end
+    end
+  end
+
+  resource :initiative, store: InitiativeStore do
+    field :title,   :string
+    field :status,  :enum, values: %w[active paused completed]
+    field :horizon, :string
+    edit_view :page
+  end
+
+  navbar do
+    nav_item 'Home',        href: '/',             active: state[:_sw_action] == :home
+    nav_item 'Goals',       href: '/goals',        active: state[:_sw_resource] == :goal
+    nav_item 'Initiatives', href: '/initiatives',  active: state[:_sw_resource] == :initiative
+  end
+
+  page :home, '/' do
+    header1 'UTF Dashboard Lite'
+    columns widths: ['50%', '50%'] do
+      column { card { header3 'Goals';       text "#{GoalStore.all.size} tracked" } }
+      column { card { header3 'Initiatives'; text "#{InitiativeStore.all.size} active" } }
+    end
+  end
+end.run!

data/examples/styling/feedback_demo.rb

@@ -0,0 +1,229 @@
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+app = StreamWeaver::App.new("Feedback Components Demo") do
+  header1 "Feedback Components"
+  text "Demonstrating alerts, toasts, progress bars, and spinners."
+
+  # =========================================
+  # Alerts Section
+  # =========================================
+  header2 "Alerts"
+  text "Static feedback messages with different variants."
+
+  alert(variant: :info) do
+    text "This is an informational alert. Use it for general messages."
+  end
+
+  alert(variant: :success, title: "Success!") do
+    text "Your changes have been saved successfully."
+  end
+
+  alert(variant: :warning, title: "Warning") do
+    text "Your session will expire in 5 minutes."
+  end
+
+  alert(variant: :error, title: "Error") do
+    text "Unable to connect to the server. Please try again."
+  end
+
+  header3 "Dismissible Alerts"
+
+  alert(variant: :info, title: "Tip", dismissible: true) do
+    text "Click the X to dismiss this alert. It's only removed client-side."
+  end
+
+  alert(variant: :success, dismissible: true) do
+    text "You can dismiss me too!"
+  end
+
+  # =========================================
+  # Toast Notifications Section
+  # =========================================
+  header2 "Toast Notifications"
+  text "Temporary notifications that stack and auto-dismiss. Click buttons to add multiple toasts!"
+
+  # Add a toast container - this is where toasts will appear
+  toast_container position: :top_right, duration: 4000
+
+  state[:toast_count] ||= 0
+
+  hstack(spacing: :sm) do
+    button "Info Toast" do |s|
+      s[:toast_count] += 1
+      show_toast("Info message ##{s[:toast_count]}", variant: :info)
+    end
+
+    button "Success Toast" do |s|
+      s[:toast_count] += 1
+      show_toast("Success! Operation ##{s[:toast_count]} completed.", variant: :success)
+    end
+
+    button "Warning Toast" do |s|
+      s[:toast_count] += 1
+      show_toast("Warning: Check item ##{s[:toast_count]}", variant: :warning)
+    end
+
+    button "Error Toast" do |s|
+      s[:toast_count] += 1
+      show_toast("Error ##{s[:toast_count]}: Something went wrong!", variant: :error)
+    end
+  end
+
+  hstack(spacing: :sm) do
+    button "Add 3 Toasts", style: :secondary do |s|
+      show_toast("First notification", variant: :info)
+      show_toast("Second notification", variant: :success)
+      show_toast("Third notification", variant: :warning)
+    end
+
+    button "Clear All", style: :secondary do |s|
+      clear_toasts
+      s[:toast_count] = 0
+    end
+  end
+
+  text -> (s) { "Total toasts shown: #{s[:toast_count]}" }
+
+  # =========================================
+  # Progress Bars Section
+  # =========================================
+  header2 "Progress Bars"
+  text "Visual indicators for progress and completion."
+
+  header3 "Static Progress"
+
+  text "Default (25%):"
+  progress_bar value: 25
+
+  text "Success variant (50%):"
+  progress_bar value: 50, variant: :success
+
+  text "Warning variant (75%):"
+  progress_bar value: 75, variant: :warning
+
+  text "Error variant (90%):"
+  progress_bar value: 90, variant: :error
+
+  header3 "With Labels"
+
+  text "Progress with label:"
+  progress_bar value: 65, show_label: true
+
+  header3 "Animated"
+
+  text "Animated striped progress:"
+  progress_bar value: 80, animated: true, variant: :success
+
+  header3 "Dynamic Progress"
+  text "Click buttons to change progress:"
+
+  # Initialize progress state
+  state[:progress] ||= 30
+
+  progress_bar value: :progress, show_label: true, variant: :success
+
+  hstack(spacing: :sm) do
+    button "- 10", style: :secondary do |s|
+      s[:progress] = [0, s[:progress] - 10].max
+    end
+
+    button "+ 10" do |s|
+      s[:progress] = [100, s[:progress] + 10].min
+    end
+
+    button "Reset", style: :secondary do |s|
+      s[:progress] = 0
+    end
+
+    button "Complete" do |s|
+      s[:progress] = 100
+    end
+  end
+
+  # =========================================
+  # Spinners Section
+  # =========================================
+  header2 "Spinners"
+  text "Loading indicators for async operations."
+
+  header3 "Sizes"
+
+  hstack(spacing: :lg, align: :center) do
+    vstack(align: :center) do
+      spinner size: :sm
+      text "Small"
+    end
+
+    vstack(align: :center) do
+      spinner size: :md
+      text "Medium"
+    end
+
+    vstack(align: :center) do
+      spinner size: :lg
+      text "Large"
+    end
+  end
+
+  header3 "With Labels"
+
+  spinner size: :md, label: "Loading data..."
+  spinner size: :sm, label: "Processing..."
+
+  # =========================================
+  # Combined Example
+  # =========================================
+  header2 "Combined Example: File Upload Simulation"
+
+  state[:upload_status] ||= :idle
+  state[:upload_progress] ||= 0
+
+  card do
+    card_header "Upload Status"
+    card_body do
+      case state[:upload_status]
+      when :idle
+        text "Select a file to upload."
+        button "Start Upload" do |s|
+          s[:upload_status] = :uploading
+          s[:upload_progress] = 0
+        end
+
+      when :uploading
+        hstack(align: :center, spacing: :sm) do
+          spinner size: :sm, label: "Uploading..."
+        end
+        progress_bar value: :upload_progress, show_label: true, animated: true
+
+        hstack(spacing: :sm) do
+          button "+ Progress" do |s|
+            s[:upload_progress] += 20
+            if s[:upload_progress] >= 100
+              s[:upload_status] = :complete
+              s[:upload_progress] = 100
+            end
+          end
+
+          button "Cancel", style: :secondary do |s|
+            s[:upload_status] = :idle
+            s[:upload_progress] = 0
+          end
+        end
+
+      when :complete
+        alert(variant: :success, title: "Upload Complete!") do
+          text "Your file has been uploaded successfully."
+        end
+
+        button "Upload Another", style: :secondary do |s|
+          s[:upload_status] = :idle
+          s[:upload_progress] = 0
+        end
+      end
+    end
+  end
+end
+
+app.generate.run!

data/examples/styling/style_showcase.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+# Style Showcase - Comprehensive test of StreamWeaver styling
+#
+# Tests:
+# - All header levels h1-h6
+# - Typography (bold, italic, code, links)
+# - Long content overflow handling
+# - Form elements
+# - Cards and layouts
+# - Layout modes (default/wide/full)
+#
+# Usage: ruby examples/style_showcase.rb
+
+require_relative '../../lib/stream_weaver'
+
+LAYOUT = (ARGV[0] || 'wide').to_sym  # Pass layout as argument: ruby style_showcase.rb fluid
+
+StreamWeaver.app "Style Showcase", layout: LAYOUT do
+  theme_switcher position: :inline
+  header1 "StreamWeaver Style Showcase"
+  md "**Current layout: `#{LAYOUT}`**"
+  md "Options: `default` (900px) | `wide` (1100px) | `full` (1400px) | `fluid` (100%)"
+  md "Test: `ruby style_showcase.rb fluid`"
+
+  # Typography Section
+  header2 "Typography Hierarchy"
+
+  card do
+    header1 "Header 1 - Page Title (2.25rem)"
+    header2 "Header 2 - Section (1.625rem)"
+    header3 "Header 3 - Subsection (1.25rem)"
+    header4 "Header 4 - Group (1.1rem)"
+    header5 "Header 5 - Minor (1rem)"
+    header6 "Header 6 - Label (0.9rem uppercase)"
+  end
+
+  header2 "Text Formatting"
+
+  card do
+    md "**Bold text** for emphasis."
+    md "*Italic text* for subtle emphasis."
+    md "`Inline code` for technical terms."
+    md "[Links](https://example.com) for navigation."
+    md "Regular paragraph text with good line height for readability. This should be easy to read even in longer blocks of content. The font is Source Sans 3 at 17px."
+  end
+
+  # Overflow Handling Section
+  header2 "Overflow & Long Content"
+
+  card do
+    header3 "Long URL"
+    text "https://example.com/this/is/a/very/long/url/path/that/should/wrap/properly/instead/of/breaking/the/layout/or/causing/horizontal/scroll"
+  end
+
+  card do
+    header3 "Long Word"
+    text "Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis should wrap properly."
+  end
+
+  card do
+    header3 "Wide Content"
+    text "Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8"
+    text "Data that might be wider than expected in some cases with lots of information packed in."
+  end
+
+  # Form Elements Section
+  header2 "Form Elements"
+
+  header3 "Text Inputs"
+  text_field :name, placeholder: "Enter your name"
+  text_area :bio, placeholder: "Enter a longer description..."
+
+  header3 "Selection Controls"
+  checkbox :enabled, "Enable feature"
+  select :color, ["Red", "Green", "Blue"], default: "Green"
+
+  header3 "Radio Group"
+  radio_group :size, ["Small", "Medium", "Large"]
+
+  header3 "Buttons"
+  columns do
+    column do
+      button "Primary Action" do |s|
+        s[:clicked] = "primary"
+      end
+    end
+    column do
+      button "Secondary Action", style: :secondary do |s|
+        s[:clicked] = "secondary"
+      end
+    end
+  end
+
+  # Cards Section
+  header2 "Cards"
+
+  card do
+    header3 "Simple Card"
+    text "Cards provide visual grouping with a subtle terracotta accent bar."
+  end
+
+  card do
+    header3 "Card with Form"
+    form :card_form do
+      text_field :card_input, placeholder: "Input inside a card"
+      submit "Submit"
+    end
+  end
+
+  # Columns Layout Section
+  header2 "Column Layouts"
+
+  header3 "Equal Width Columns"
+  columns do
+    column do
+      card do
+        header4 "Column 1"
+        text "Equal width via flexbox."
+      end
+    end
+    column do
+      card do
+        header4 "Column 2"
+        text "Also equal width."
+      end
+    end
+    column do
+      card do
+        header4 "Column 3"
+        text "Three columns total."
+      end
+    end
+  end
+
+  header3 "Custom Width Columns"
+  columns widths: ['30%', '70%'] do
+    column do
+      card do
+        header4 "Sidebar (30%)"
+        text "Narrower column for navigation or metadata."
+      end
+    end
+    column do
+      card do
+        header4 "Main Content (70%)"
+        text "Wider column for primary content. This layout is useful for detail pages with a sidebar."
+      end
+    end
+  end
+
+  # Collapsible Section
+  header2 "Collapsible Sections"
+
+  collapsible "Click to expand details" do
+    text "This content is hidden by default and revealed on click."
+    text "Useful for progressive disclosure of complex information."
+  end
+
+  collapsible "Already expanded section", expanded: true do
+    text "This section starts open."
+  end
+
+  # Current State Display
+  header2 "Current State"
+  text "Name: #{state[:name]}"
+  text "Bio: #{state[:bio]}"
+  text "Enabled: #{state[:enabled]}"
+  text "Color: #{state[:color]}"
+  text "Size: #{state[:size]}"
+  text "Last clicked: #{state[:clicked] || '(none)'}"
+end.run!