zephyr_rb 1.0.1 → 1.0.2

data/src/components.rb

@@ -0,0 +1,934 @@
+# frozen_string_literal: true
+require "js"
+
+# =============================================================================
+# BUTTON COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-button') do
+  observed_attributes :label, :disabled, :variant
+
+  on_connect do
+    set_state(:label, self['label'] || '')
+    set_state(:disabled, self['disabled'] == 'true')
+    set_state(:variant, self['variant'] || 'default')
+  end
+
+  template do |b|
+    comp = self
+    label = comp.state[:label] || comp['label'] || ''
+    disabled = comp.state[:disabled]
+    variant = comp.state[:variant] || 'default'
+
+    bg_color = case variant
+               when 'primary' then '#4f46e5'
+               when 'danger' then '#ef4444'
+               when 'success' then '#10b981'
+               else '#ffffff'
+               end
+
+    text_color = variant == 'default' ? '#000000' : '#ffffff'
+    border = variant == 'default' ? '1px solid #e5e7eb' : 'none'
+
+    b.button(
+      disabled: disabled,
+      style: {
+        padding: '6px 10px',
+        border_radius: '8px',
+        border: border,
+        background: bg_color,
+        color: text_color,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? '0.6' : '1',
+        font_size: '14px',
+        font_weight: '500'
+      },
+      on_click: ->(e) {
+        return if comp.state[:disabled]
+        event = JS.global[:CustomEvent].new(
+          'button-click',
+          { bubbles: true, composed: true }.to_js
+        )
+        comp.element.call(:dispatchEvent, event)
+      }
+    ) { b.text(label) }
+  end
+end
+
+# =============================================================================
+# INPUT COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-input') do
+  observed_attributes :value, :type, :placeholder, :required, :disabled, :error, :label
+
+  on_connect do
+    set_state(:value, self['value'] || '')
+    set_state(:type, self['type'] || 'text')
+    set_state(:error, self['error'])
+  end
+
+  template do |b|
+    comp = self
+    value = comp.state[:value] || ''
+    input_type = comp.state[:type] || 'text'
+    placeholder = comp['placeholder'] || ''
+    disabled = comp.hasAttribute('disabled')
+    error = comp.state[:error] || comp['error']
+    label_text = comp['label']
+
+    b.div(style: { display: 'block', margin_bottom: error ? '4px' : '12px' }) do
+      # Label
+      if label_text
+        b.tag(:label, style: {
+          display: 'block',
+          margin_bottom: '4px',
+          font_size: '14px',
+          font_weight: '500',
+          color: '#374151'
+        }) { b.text(label_text) }
+      end
+
+      # Input
+      b.tag(:input,
+            type: input_type,
+            value: value,
+            placeholder: placeholder,
+            disabled: disabled,
+            style: {
+              width: '100%',
+              padding: '8px 12px',
+              border: error ? '1px solid #ef4444' : '1px solid #e5e7eb',
+              border_radius: '6px',
+              font_size: '14px',
+              outline: 'none',
+              background: disabled ? '#f9fafb' : 'white',
+              color: disabled ? '#9ca3af' : 'black',
+              box_sizing: 'border-box'
+            },
+            on_input: ->(e) {
+              new_value = e[:target][:value].to_s
+              comp.set_state(:value, new_value)
+              comp['value'] = new_value
+
+              event = JS.global[:CustomEvent].new(
+                'input-change',
+                { bubbles: true, composed: true, detail: { value: new_value }.to_js }.to_js
+              )
+              comp.element.call(:dispatchEvent, event)
+            }
+      )
+
+      # Error message
+      if error && !error.empty?
+        b.div(style: {
+          font_size: '12px',
+          color: '#ef4444',
+          margin_top: '4px'
+        }) { b.text(error) }
+      end
+    end
+  end
+end
+
+# =============================================================================
+# SELECT COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-select') do
+  observed_attributes :value, :options, :placeholder, :disabled, :label
+
+  on_connect do
+    set_state(:value, self['value'] || '')
+    set_state(:options, parse_options)
+  end
+
+  def parse_options
+    options_attr = self['options']
+    return [] unless options_attr
+
+    begin
+      JSON.parse(options_attr)
+    rescue
+      []
+    end
+  end
+
+  template do |b|
+    comp = self
+    value = comp.state[:value] || ''
+    options = comp.state[:options] || []
+    placeholder = comp['placeholder']
+    disabled = comp.hasAttribute('disabled')
+    label_text = comp['label']
+
+    b.div(style: { display: 'block', margin_bottom: '12px' }) do
+      # Label
+      if label_text
+        b.tag(:label, style: {
+          display: 'block',
+          margin_bottom: '4px',
+          font_size: '14px',
+          font_weight: '500',
+          color: '#374151'
+        }) { b.text(label_text) }
+      end
+
+      # Select
+      b.tag(:select,
+            disabled: disabled,
+            style: {
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #e5e7eb',
+              border_radius: '6px',
+              font_size: '14px',
+              outline: 'none',
+              background: disabled ? '#f9fafb' : 'white',
+              color: disabled ? '#9ca3af' : 'black',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              box_sizing: 'border-box'
+            },
+            on_change: ->(e) {
+              new_value = e[:target][:value].to_s
+              comp.set_state(:value, new_value)
+              comp['value'] = new_value
+
+              event = JS.global[:CustomEvent].new(
+                'select-change',
+                { bubbles: true, composed: true, detail: { value: new_value }.to_js }.to_js
+              )
+              comp.element.call(:dispatchEvent, event)
+            }
+      ) do
+        # Placeholder option
+        if placeholder
+          b.tag(:option, value: '', disabled: true, selected: value.empty?) do
+            b.text(placeholder)
+          end
+        end
+
+        # Options
+        options.each do |opt|
+          opt_value = opt['value'] || opt[:value]
+          opt_label = opt['label'] || opt[:label] || opt_value
+          b.tag(:option, value: opt_value, selected: opt_value == value) do
+            b.text(opt_label)
+          end
+        end
+      end
+    end
+  end
+end
+
+# =============================================================================
+# CHECKBOX COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-checkbox') do
+  observed_attributes :checked, :label, :disabled
+
+  on_connect do
+    set_state(:checked, self['checked'] == 'true')
+  end
+
+  template do |b|
+    comp = self
+    checked = comp.state[:checked]
+    label_text = comp['label'] || ''
+    disabled = comp.hasAttribute('disabled')
+
+    b.div(style: {
+      display: 'flex',
+      align_items: 'center',
+      gap: '8px',
+      margin_bottom: '12px'
+    }) do
+      b.tag(:input,
+            type: 'checkbox',
+            checked: checked,
+            disabled: disabled,
+            style: {
+              width: '16px',
+              height: '16px',
+              cursor: disabled ? 'not-allowed' : 'pointer'
+            },
+            on_change: ->(e) {
+              new_checked = !!e[:target][:checked]
+              comp.set_state(:checked, new_checked)
+              comp['checked'] = new_checked.to_s
+
+              event = JS.global[:CustomEvent].new(
+                'checkbox-change',
+                { bubbles: true, composed: true, detail: { checked: new_checked }.to_js }.to_js
+              )
+              comp.element.call(:dispatchEvent, event)
+            }
+      )
+
+      if label_text && !label_text.empty?
+        b.tag(:label, style: {
+          font_size: '14px',
+          color: disabled ? '#9ca3af' : '#374151',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          user_select: 'none'
+        }) { b.text(label_text) }
+      end
+    end
+  end
+end
+
+# =============================================================================
+# TEXTAREA COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-textarea') do
+  observed_attributes :value, :placeholder, :rows, :disabled, :label
+
+  on_connect do
+    set_state(:value, self['value'] || '')
+  end
+
+  template do |b|
+    comp = self
+    value = comp.state[:value] || ''
+    placeholder = comp['placeholder'] || ''
+    rows = (comp['rows'] || '3').to_i
+    disabled = comp.hasAttribute('disabled')
+    label_text = comp['label']
+
+    b.div(style: { display: 'block', margin_bottom: '12px' }) do
+      # Label
+      if label_text
+        b.tag(:label, style: {
+          display: 'block',
+          margin_bottom: '4px',
+          font_size: '14px',
+          font_weight: '500',
+          color: '#374151'
+        }) { b.text(label_text) }
+      end
+
+      # Textarea
+      b.tag(:textarea,
+            placeholder: placeholder,
+            disabled: disabled,
+            style: {
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #e5e7eb',
+              border_radius: '6px',
+              font_size: '14px',
+              outline: 'none',
+              background: disabled ? '#f9fafb' : 'white',
+              color: disabled ? '#9ca3af' : 'black',
+              font_family: 'inherit',
+              resize: 'vertical',
+              min_height: "#{rows * 24}px",
+              box_sizing: 'border-box'
+            },
+            on_input: ->(e) {
+              new_value = e[:target][:value].to_s
+              comp.set_state(:value, new_value)
+              comp['value'] = new_value
+
+              event = JS.global[:CustomEvent].new(
+                'textarea-change',
+                { bubbles: true, composed: true, detail: { value: new_value }.to_js }.to_js
+              )
+              comp.element.call(:dispatchEvent, event)
+            }
+      ) { b.text(value) }
+    end
+  end
+end
+
+# =============================================================================
+# CARD COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-card') do
+  observed_attributes :variant, :elevated, :bordered
+
+  on_connect do
+    set_state(:variant, self['variant'] || 'default')
+  end
+
+  template do |b|
+    comp = self
+    variant = comp.state[:variant] || 'default'
+    elevated = comp.hasAttribute('elevated')
+    bordered = comp.hasAttribute('bordered')
+
+    border_style = case variant
+                   when 'primary' then '2px solid #3b82f6'
+                   when 'success' then '2px solid #10b981'
+                   when 'warning' then '2px solid #f59e0b'
+                   when 'danger' then '2px solid #ef4444'
+                   else bordered ? '1px solid #e5e7eb' : 'none'
+                   end
+
+    bg_color = case variant
+               when 'primary' then '#eff6ff'
+               when 'success' then '#ecfdf5'
+               when 'warning' then '#fffbeb'
+               when 'danger' then '#fef2f2'
+               else '#ffffff'
+               end
+
+    b.div(style: {
+      background: bg_color,
+      border: border_style,
+      border_radius: '8px',
+      padding: '20px',
+      box_shadow: elevated ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : 'none',
+      transition: 'all 0.2s ease'
+    }) do
+      # Render slotted content
+      b.tag(:slot)
+    end
+  end
+end
+
+# =============================================================================
+# TABS COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-tabs') do
+  observed_attributes :active
+
+  on_connect do
+    set_state(:active, self['active'] || 'tab1')
+    set_state(:tabs, [
+      { id: 'tab1', label: 'Tab 1', content: 'Content for Tab 1' },
+      { id: 'tab2', label: 'Tab 2', content: 'Content for Tab 2' },
+      { id: 'tab3', label: 'Tab 3', content: 'Content for Tab 3' }
+    ])
+  end
+
+  template do |b|
+    comp = self
+    active = comp.state[:active]
+    tabs = comp.state[:tabs] || []
+
+    b.div(style: { display: 'flex', flex_direction: 'column', width: '100%' }) do
+      # Tab list
+      b.div(
+        role: 'tablist',
+        style: {
+          display: 'flex',
+          border_bottom: '1px solid #e5e7eb',
+          background: '#f9fafb'
+        }
+      ) do
+        tabs.each do |tab|
+          is_active = tab[:id] == active
+          b.button(
+            role: 'tab',
+            style: {
+              background: is_active ? 'white' : 'transparent',
+              border: 'none',
+              border_bottom: is_active ? '2px solid #4f46e5' : '2px solid transparent',
+              padding: '12px 16px',
+              cursor: 'pointer',
+              font_size: '14px',
+              font_weight: '500',
+              color: is_active ? '#111827' : '#6b7280',
+              transition: 'all 0.15s ease'
+            },
+            on_click: ->(_e) {
+              comp.set_state(:active, tab[:id])
+              comp['active'] = tab[:id]
+
+              event = JS.global[:CustomEvent].new(
+                'tab-change',
+                { bubbles: true, composed: true, detail: { tab: tab[:id] }.to_js }.to_js
+              )
+              comp.element.call(:dispatchEvent, event)
+            }
+          ) { b.text(tab[:label]) }
+        end
+      end
+
+      # Tab content
+      b.div(style: { padding: '20px', background: 'white' }) do
+        active_tab = tabs.find { |t| t[:id] == active }
+        if active_tab
+          b.div { b.text(active_tab[:content]) }
+        end
+      end
+    end
+  end
+end
+
+# =============================================================================
+# ACCORDION COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-accordion') do
+  observed_attributes :expanded
+
+  on_connect do
+    set_state(:expanded, (self['expanded'] || '').split(',').map(&:strip))
+    set_state(:sections, [
+      { id: 'section1', title: 'Section 1', content: 'Content for section 1' },
+      { id: 'section2', title: 'Section 2', content: 'Content for section 2' },
+      { id: 'section3', title: 'Section 3', content: 'Content for section 3' }
+    ])
+  end
+
+  template do |b|
+    comp = self
+    expanded = comp.state[:expanded] || []
+    sections = comp.state[:sections] || []
+
+    b.div(style: {
+      border: '1px solid #e5e7eb',
+      border_radius: '8px',
+      overflow: 'hidden'
+    }) do
+      sections.each_with_index do |section, index|
+        is_expanded = expanded.include?(section[:id])
+
+        # Header
+        b.button(
+          style: {
+            width: '100%',
+            background: is_expanded ? 'white' : '#f9fafb',
+            border: 'none',
+            border_bottom: index < sections.length - 1 ? '1px solid #e5e7eb' : 'none',
+            padding: '16px 20px',
+            text_align: 'left',
+            cursor: 'pointer',
+            font_size: '14px',
+            font_weight: '500',
+            display: 'flex',
+            justify_content: 'space-between',
+            align_items: 'center',
+            transition: 'background 0.15s ease'
+          },
+          on_click: ->(_e) {
+            new_expanded = expanded.dup
+            if is_expanded
+              new_expanded.delete(section[:id])
+            else
+              new_expanded << section[:id]
+            end
+            comp.set_state(:expanded, new_expanded)
+            comp['expanded'] = new_expanded.join(',')
+          }
+        ) do
+          b.span { b.text(section[:title]) }
+          b.span(style: {
+            transform: is_expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s ease'
+          }) { b.text('▼') }
+        end
+
+        # Content
+        if is_expanded
+          b.div(style: {
+            padding: '20px',
+            border_bottom: index < sections.length - 1 ? '1px solid #e5e7eb' : 'none'
+          }) { b.text(section[:content]) }
+        end
+      end
+    end
+  end
+end
+
+# =============================================================================
+# DIALOG/MODAL COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-dialog') do
+  observed_attributes :open, :title
+
+  on_connect do
+    set_state(:open, self['open'] == 'true')
+  end
+
+  template do |b|
+    comp = self
+    is_open = comp.state[:open]
+    title = comp['title'] || 'Dialog'
+
+    if is_open
+      # Backdrop
+      b.div(
+        style: {
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          background: 'rgba(0, 0, 0, 0.5)',
+          display: 'flex',
+          align_items: 'center',
+          justify_content: 'center',
+          z_index: '1000'
+        },
+        on_click: ->(e) {
+          if e[:target] == e[:currentTarget]
+            comp.set_state(:open, false)
+            comp['open'] = 'false'
+          end
+        }
+      ) do
+        # Dialog
+        b.div(
+          role: 'dialog',
+          style: {
+            background: 'white',
+            border_radius: '8px',
+            box_shadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            max_width: '90vw',
+            max_height: '90vh',
+            width: '600px',
+            display: 'flex',
+            flex_direction: 'column'
+          },
+          on_click: ->(e) { e.call(:stopPropagation) }
+        ) do
+          # Header
+          b.div(style: {
+            padding: '16px 20px',
+            border_bottom: '1px solid #e5e7eb',
+            display: 'flex',
+            justify_content: 'space-between',
+            align_items: 'center'
+          }) do
+            b.tag(:h2, style: {
+              margin: '0',
+              font_size: '18px',
+              font_weight: '600'
+            }) { b.text(title) }
+
+            b.button(
+              style: {
+                background: 'none',
+                border: 'none',
+                font_size: '18px',
+                cursor: 'pointer',
+                padding: '4px',
+                border_radius: '4px'
+              },
+              on_click: ->(_e) {
+                comp.set_state(:open, false)
+                comp['open'] = 'false'
+              }
+            ) { b.text('×') }
+          end
+
+          # Content
+          b.div(style: {
+            padding: '20px',
+            overflow_y: 'auto',
+            flex: '1'
+          }) do
+            b.tag(:slot)
+          end
+        end
+      end
+    end
+  end
+end
+
+# =============================================================================
+# BREADCRUMB COMPONENT
+# =============================================================================
+ZephyrWasm.component('x-breadcrumb') do
+  observed_attributes :path
+
+  on_connect do
+    set_state(:items, parse_path)
+  end
+
+  def parse_path
+    path_attr = self['path']
+    return [] unless path_attr
+
+    begin
+      JSON.parse(path_attr)
+    rescue
+      path_attr.split(',').map { |item| { label: item.strip } }
+    end
+  end
+
+  template do |b|
+    comp = self
+    items = comp.state[:items] || []
+
+    b.tag(:nav, style: { padding: '8px 0' }) do
+      b.tag(:ol, style: {
+        display: 'flex',
+        align_items: 'center',
+        list_style: 'none',
+        margin: '0',
+        padding: '0',
+        gap: '8px'
+      }) do
+        items.each_with_index do |item, index|
+          is_last = index == items.length - 1
+
+          b.tag(:li, style: {
+            display: 'flex',
+            align_items: 'center',
+            gap: '8px'
+          }) do
+            if item['href'] && !is_last
+              b.tag(:a,
+                    href: item['href'],
+                    style: {
+                      color: '#4f46e5',
+                      text_decoration: 'none',
+                      padding: '4px 8px',
+                      border_radius: '4px'
+                    }
+              ) { b.text(item['label'] || item[:label]) }
+            else
+              b.span(style: {
+                color: is_last ? '#374151' : '#6b7280',
+                font_weight: is_last ? '500' : '400',
+                padding: '4px 8px'
+              }) { b.text(item['label'] || item[:label]) }
+            end
+
+            unless is_last
+              b.span(style: { color: '#9ca3af' }) { b.text('/') }
+            end
+          end
+        end
+      end
+    end
+  end
+end
+
+# =============================================================================
+# VIRTUAL LIST COMPONENT (Simplified)
+# =============================================================================
+ZephyrWasm.component('x-virtual-list') do
+  observed_attributes 'item-count', 'item-height'
+
+  on_connect do
+    item_count = (self['item-count'] || '0').to_i
+    item_height = (self['item-height'] || '24').to_i
+
+    set_state(:item_count, item_count)
+    set_state(:item_height, item_height)
+    set_state(:scroll_top, 0)
+  end
+
+  template do |b|
+    comp = self
+    item_count = comp.state[:item_count] || 0
+    item_height = comp.state[:item_height] || 24
+    scroll_top = comp.state[:scroll_top] || 0
+
+    viewport_height = 400
+    start_index = [0, (scroll_top / item_height).floor - 3].max
+    visible_count = [(viewport_height / item_height).ceil + 6, item_count - start_index].min
+
+    b.div(
+      style: {
+        overflow: 'auto',
+        height: '400px',
+        position: 'relative'
+      },
+      on_scroll: ->(e) {
+        comp.set_state(:scroll_top, e[:target][:scrollTop].to_i)
+      }
+    ) do
+      b.div(style: {
+        height: "#{item_count * item_height}px",
+        position: 'relative'
+      }) do
+        visible_count.times do |i|
+          index = start_index + i
+          break if index >= item_count
+
+          b.div(style: {
+            position: 'absolute',
+            top: "#{index * item_height}px",
+            left: '0',
+            right: '0',
+            height: "#{item_height}px",
+            padding: '8px',
+            border_bottom: '1px solid #eee',
+            background: index % 2 == 0 ? '#f9f9f9' : 'white'
+          }) { b.text("Item #{index}") }
+        end
+      end
+    end
+  end
+end
+
+# Counter component - demonstrates state management
+ZephyrWasm.component('x-counter') do
+  observed_attributes :initial
+
+  on_connect do
+    count = (self['initial'] || '0').to_i
+    set_state(:count, count)
+  end
+
+  template do |b|
+    comp = self
+
+    b.div(class: 'counter-container') do
+      b.button(
+        class: 'btn btn-decrement',
+        on_click: ->(_e) {
+          current = comp.state[:count] || 0
+          comp.set_state(:count, current - 1)
+        }
+      ) { b.text('-') }
+
+      b.span(class: 'counter-value') { b.text(comp.state[:count] || 0) }
+
+      b.button(
+        class: 'btn btn-increment',
+        on_click: ->(_e) {
+          current = comp.state[:count] || 0
+          comp.set_state(:count, current + 1)
+        }
+      ) { b.text('+') }
+    end
+  end
+end
+
+# Toggle button component
+ZephyrWasm.component('x-toggle') do
+  observed_attributes :label, :checked
+
+  on_connect do
+    set_state(:checked, self['checked'] == 'true')
+  end
+
+  template do |b|
+    comp = self
+    btn_class  = comp.state[:checked] ? 'toggle active' : 'toggle'
+    label_text = comp['label'] || 'Toggle'
+
+    b.div(class: 'toggle-wrapper') do
+      b.button(
+        class: btn_class,
+        on_click: ->(_e) {
+          new_state = !comp.state[:checked]
+          comp.set_state(:checked, new_state)
+          comp['checked'] = new_state.to_s
+
+          event = JS.global[:CustomEvent].new(
+            'toggle-change',
+            { bubbles: true, detail: { checked: new_state }.to_js }.to_js
+          )
+          comp.element.call(:dispatchEvent, event)
+        }
+      ) { b.text(label_text) }
+    end
+  end
+end
+
+# Todo list component - demonstrates list rendering
+ZephyrWasm.component('x-todo-list') do
+  on_connect do
+    set_state(:todos, [])
+    set_state(:input_value, '')
+  end
+
+  template do |b|
+    comp = self
+
+    b.div(class: 'todo-list') do
+      b.div(class: 'todo-input-group') do
+        b.tag(:input,
+              type: 'text',
+              placeholder: 'Enter a task...',
+              value: comp.state[:input_value] || '',
+              on_input: ->(e) {
+                comp.set_state(:input_value, e[:target][:value].to_s)
+              }
+        )
+
+        b.button(
+          class: 'btn btn-primary',
+          on_click: ->(_e) {
+            value = comp.state[:input_value]&.strip
+            if value && !value.empty?
+              todos = (comp.state[:todos] || []).dup
+              todos << { id: JS.global[:Date].new.call(:getTime), text: value, done: false }
+              comp.set_state(:todos, todos)
+              comp.set_state(:input_value, '')
+            end
+          }
+        ) { b.text('Add') }
+      end
+
+      b.tag(:ul, class: 'todo-items') do
+        todos = comp.state[:todos] || []
+        b.render_each(todos) do |todo|
+          b.tag(:li, class: todo[:done] ? 'done' : '') do
+            b.tag(:input,
+                  type: 'checkbox',
+                  checked: !!todo[:done],
+                  on_change: ->(e) {
+                    todos = (comp.state[:todos] || []).map { |t|
+                      if t[:id] == todo[:id]
+                        { **t, done: !!e[:target][:checked] }
+                      else
+                        t
+                      end
+                    }
+                    comp.set_state(:todos, todos)
+                  }
+            )
+            b.span { b.text(todo[:text]) }
+            b.button(
+              class: 'btn-delete',
+              on_click: ->(_e) {
+                todos = (comp.state[:todos] || []).reject { |t| t[:id] == todo[:id] }
+                comp.set_state(:todos, todos)
+              }
+            ) { b.text('×') }
+          end
+        end
+      end
+    end
+  end
+end
+
+# Tabs component - demonstrates more complex UI
+ZephyrWasm.component('x-tabs') do
+  observed_attributes :active
+
+  on_connect do
+    set_state(:active, self['active'] || 'tab1')
+    set_state(:tabs, [
+      { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+      { id: 'tab2', label: 'Tab 2', content: 'Content 2' },
+      { id: 'tab3', label: 'Tab 3', content: 'Content 3' }
+    ])
+  end
+
+  template do |b|
+    comp = self
+
+    b.div(class: 'tabs-container') do
+      # Tab list
+      b.div(class: 'tab-list', role: 'tablist') do
+        tabs   = comp.state[:tabs] || []
+        active = comp.state[:active]
+        b.render_each(tabs) do |tab|
+          b.button(
+            class: tab[:id] == active ? 'tab-button active' : 'tab-button',
+            role: 'tab',
+            on_click: ->(_e) {
+              comp.set_state(:active, tab[:id])
+              comp['active'] = tab[:id]
+            }
+          ) { b.text(tab[:label]) }
+        end
+      end
+
+      # Tab content
+      b.div(class: 'tab-content') do
+        tabs = comp.state[:tabs] || []
+        active_tab = tabs.find { |t| t[:id] == comp.state[:active] }
+        if active_tab
+          b.div(class: 'tab-panel') { b.text(active_tab[:content]) }
+        end
+      end
+    end
+  end
+end