hotwirebits 0.1.0

data/app/views/hotwirebits/_command_bar.html.erb

@@ -0,0 +1,36 @@
+<%# CommandBar component — ERB partial %>
+<%# Usage: render 'hotwirebits/command_bar', ... %>
+
+<div class="rounded-xl border border-hw-border bg-hw-popover shadow-lg overflow-hidden"
+     data-controller="hw-command-bar"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-3 px-4 border-b border-hw-border">
+    <svg class="h-4 w-4 text-hw-muted-foreground shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+    </svg>
+    <input type="text"
+           placeholder="<%= placeholder %>"
+           class="flex-1 h-11 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none"
+           data-hw-command-bar-target="input"
+           data-action="input->hw-command-bar#filter keydown->hw-command-bar#keydown">
+  </div>
+  <div class="max-h-[300px] overflow-y-auto p-2" data-hw-command-bar-target="list">
+    <% commands.each_with_index do |cmd, idx| %>
+      <button type="button"
+              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-hw-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors cursor-pointer <%= idx == 0 ? 'bg-hw-accent' : '' %>"
+              data-hw-command-bar-target="item"
+              data-action="click->hw-command-bar#select"
+        data-command="<%= cmd[:action] %>">
+        <% if cmd[:icon] %>
+          <span class="h-4 w-4 shrink-0 text-hw-muted-foreground"><%= safe_svg(cmd[:icon]) %></span>
+        <% end %>
+        <span class="flex-1 text-left"><%= cmd[:label] %></span>
+        <% if cmd[:shortcut] %>
+          <kbd class="pointer-events-none h-5 select-none items-center gap-0.5 rounded border border-hw-border bg-hw-muted px-1.5 font-mono text-[10px] font-medium text-hw-muted-foreground flex">
+            <%= cmd[:shortcut] %>
+          </kbd>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/views/hotwirebits/_compare.html.erb

@@ -0,0 +1,24 @@
+<%# Compare component — ERB partial %>
+<%# Usage: render 'hotwirebits/compare', ... %>
+
+<div class="<%= container_classes %>" data-controller="hw-compare" <%= tag.attributes(local_assigns) %>>
+  <div class="relative w-full" style="padding-bottom: 56.25%;">
+    <img src="<%= after_src %>" alt="<%= after_label %>" class="absolute inset-0 h-full w-full object-cover">
+    <div class="absolute inset-0 overflow-hidden" data-hw-compare-target="before" style="width: 50%;">
+      <img src="<%= before_src %>" alt="<%= before_label %>" class="absolute inset-0 h-full w-full object-cover" style="min-width: 100vw; max-width: none;">
+    </div>
+    <input type="range" min="0" max="100" value="50"
+           class="absolute inset-0 z-10 m-0 h-full w-full cursor-ew-resize opacity-0"
+           data-action="input->hw-compare#slide">
+    <div class="absolute top-1/2 z-20 h-full w-0.5 -translate-y-1/2 bg-white shadow-lg"
+         data-hw-compare-target="handle" style="left: 50%;">
+      <div class="absolute top-1/2 left-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-lg">
+        <svg class="h-5 w-5 text-hw-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"/>
+        </svg>
+      </div>
+    </div>
+    <span class="absolute bottom-3 left-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= before_label %></span>
+    <span class="absolute bottom-3 right-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= after_label %></span>
+  </div>
+</div>

data/app/views/hotwirebits/_confirm_dialog.html.erb

@@ -0,0 +1,20 @@
+<%# ConfirmDialog component — ERB partial %>
+<%# Usage: render 'hotwirebits/confirm_dialog', ... %>
+
+<div data-controller="hw-confirm-dialog" data-hw-confirm-dialog-open-value="<%= open %>" <%= tag.attributes(local_assigns) %>>
+  <div class="fixed inset-0 z-50 bg-black/80 hidden" data-hw-confirm-dialog-target="overlay" data-action="click->hw-confirm-dialog#cancel"></div>
+  <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-hw-border bg-hw-background p-6 shadow-lg rounded-lg hidden" data-hw-confirm-dialog-target="panel" role="alertdialog">
+    <div class="flex flex-col space-y-1.5">
+      <h2 class="text-lg font-semibold leading-none tracking-tight"><%= title %></h2>
+    </div>
+    <div class="text-sm text-hw-muted-foreground"><%= message %></div>
+    <div class="flex justify-end gap-2">
+      <button type="button" class="inline-flex h-9 items-center justify-center rounded-md border border-hw-input bg-hw-background px-4 text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-dialog#cancel">
+        <%= cancel_label %>
+      </button>
+      <button type="button" class="<%= confirm_button_classes %>" data-action="click->hw-confirm-dialog#confirm">
+        <%= confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/views/hotwirebits/_confirm_popup.html.erb

@@ -0,0 +1,19 @@
+<%# ConfirmPopup component — ERB partial %>
+<%# Usage: render 'hotwirebits/confirm_popup', ... %>
+
+<div class="relative inline-block" data-controller="hw-confirm-popup" <%= tag.attributes(local_assigns) %>>
+  <div data-action="click->hw-confirm-popup#toggle" data-hw-confirm-popup-target="trigger" class="inline-block">
+    <%= content %>
+  </div>
+  <div class="<%= popup_classes %>" data-hw-confirm-popup-target="panel">
+    <p class="mb-3 text-sm"><%= message %></p>
+    <div class="flex justify-end gap-2">
+      <button type="button" class="inline-flex h-7 items-center justify-center rounded-md border border-hw-input bg-hw-background px-3 text-xs font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-popup#cancel">
+        <%= cancel_label %>
+      </button>
+      <button type="button" class="inline-flex h-7 items-center justify-center rounded-md bg-hw-primary px-3 text-xs font-medium text-hw-primary-foreground ring-offset-hw-background transition-colors hover:bg-hw-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-popup#confirm">
+        <%= confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/views/hotwirebits/_contact_section.html.erb

@@ -0,0 +1,56 @@
+<%# ContactSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/contact_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-2xl">
+    <div class="text-center mb-10">
+      <h2 class="text-2xl md:text-3xl font-bold text-hw-foreground"><%= title %></h2>
+      <% if description %>
+        <p class="mt-3 text-hw-muted-foreground"><%= description %></p>
+      <% end %>
+    </div>
+    <form class="space-y-6">
+      <% fields.each do |field| %>
+        <div>
+          <label for="<%= field[:name] %>" class="block text-sm font-medium text-hw-foreground mb-1.5">
+            <%= field[:label] %>
+            <% if field[:required] %>
+              <span class="text-hw-destructive">*</span>
+            <% end %>
+          </label>
+          <% case field[:type] %>
+          <% when 'textarea' %>
+            <textarea
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              rows="<%= field[:rows] || 4 %>"
+              placeholder="<%= field[:placeholder] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"></textarea>
+          <% when 'select' %>
+            <select
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+              <% (field[:options] || []).each do |opt| %>
+                <option value="<%= opt[:value] %>"><%= opt[:label] %></option>
+              <% end %>
+            </select>
+          <% else %>
+            <input
+              type="<%= field[:type] || 'text' %>"
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              placeholder="<%= field[:placeholder] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+            <% end %>
+          </div>
+        <% end %>
+        <button type="submit" class="w-full inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-11 px-6 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+          <%= submit_label %>
+        </button>
+      </form>
+    </div>
+  </section>

data/app/views/hotwirebits/_container.html.erb

@@ -0,0 +1,21 @@
+<%# Container component — ERB partial %>
+<%# Usage: render 'hotwirebits/container', size: :lg %>
+
+<%
+  size        = local_assigns.fetch(:size, :lg)
+  extra_class = local_assigns[:class]
+
+  size_cls = case size
+             when :sm then "max-w-screen-sm"
+             when :md then "max-w-screen-md"
+             when :xl then "max-w-screen-xl"
+             when :"2xl" then "max-w-screen-2xl"
+             when :full then "max-w-full"
+             else "max-w-screen-lg"
+             end
+  container_cls = ["mx-auto w-full px-4 #{size_cls}", extra_class].compact.join(" ")
+%>
+
+<div class="<%= container_cls %>">
+  <% if block_given? %><%= yield %><% end %>
+</div>

data/app/views/hotwirebits/_context_menu.html.erb

@@ -0,0 +1,30 @@
+<%# ContextMenu component — ERB partial %>
+<%# Usage: render 'hotwirebits/context_menu', ... %>
+
+<div class="<%= container_classes %>" data-controller="hw-context-menu" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+  <div class="fixed z-50 hidden min-w-[10rem] rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md"
+       data-hw-context-menu-target="menu"
+       data-action="click->hw-context-menu#close contextmenuwindow->hw-context-menu#close">
+    <% items.each do |item| %>
+      <% if item[:separator] %>
+        <div class="-mx-1 my-1 h-px bg-hw-border"></div>
+      <% else %>
+        <a href="<%= item[:href] || '#' %>"
+           class="<%= merge_classes(
+             'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+             item[:destructive] ? 'text-hw-destructive hover:bg-hw-destructive/10' : 'hover:bg-hw-accent hover:text-hw-accent-foreground'
+           ) %>"
+           data-action="click->hw-context-menu#close">
+          <% if item[:icon] %>
+            <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+          <% end %>
+          <span class="flex-1"><%= item[:label] %></span>
+          <% if item[:shortcut] %>
+            <span class="ml-auto text-xs tracking-widest text-hw-muted-foreground"><%= item[:shortcut] %></span>
+          <% end %>
+        </a>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/hotwirebits/_cookie_consent.html.erb

@@ -0,0 +1,26 @@
+<%# CookieConsent component — ERB partial %>
+<%# Usage: render 'hotwirebits/cookie_consent', ... %>
+
+<div class="<%= container_classes %>"
+     data-controller="hw-cookie-consent"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-4xl rounded-xl border border-hw-border bg-hw-card p-4 shadow-lg">
+    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+      <div class="flex-1">
+        <p class="text-sm text-hw-foreground"><%= message %></p>
+      </div>
+      <div class="flex items-center gap-2 shrink-0">
+        <button type="button"
+                class="rounded-lg border border-hw-border bg-hw-background h-9 px-4 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors"
+                data-action="click->hw-cookie-consent#settings">
+          <%= settings_label %>
+        </button>
+        <button type="button"
+                class="rounded-lg bg-hw-primary text-hw-primary-foreground h-9 px-4 text-sm font-medium hover:bg-hw-primary/90 transition-colors"
+                data-action="click->hw-cookie-consent#accept">
+          <%= accept_label %>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/hotwirebits/_cookie_settings.html.erb

@@ -0,0 +1,51 @@
+<%# CookieSettings component — ERB partial %>
+<%# Usage: render 'hotwirebits/cookie_settings', ... %>
+
+<div class="rounded-xl border border-hw-border bg-hw-card p-6 max-w-lg"
+     data-controller="hw-cookie-settings"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between mb-6">
+    <h3 class="text-lg font-semibold text-hw-foreground">Cookie Preferences</h3>
+    <svg class="h-5 w-5 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+    </svg>
+  </div>
+  <div class="space-y-4">
+    <% categories.each do |cat| %>
+      <div class="flex items-start justify-between gap-4 p-3 rounded-lg bg-hw-muted/50">
+        <div class="flex-1">
+          <p class="text-sm font-medium text-hw-foreground"><%= cat[:name] %></p>
+          <% if cat[:description] %>
+            <p class="text-xs text-hw-muted-foreground mt-0.5"><%= cat[:description] %></p>
+          <% end %>
+        </div>
+        <% if cat[:required] %>
+          <span class="shrink-0 inline-flex items-center rounded-full bg-hw-muted px-2 py-0.5 text-[10px] font-medium text-hw-muted-foreground">Required</span>
+        <% else %>
+          <button type="button"
+                  class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors <%= cat[:enabled] ? 'bg-hw-primary' : 'bg-hw-muted' %>"
+                  data-hw-cookie-settings-target="toggle"
+                  data-category="<%= cat[:name] %>"
+                  data-action="click->hw-cookie-settings#toggle"
+            role="switch"
+            aria-checked="<%= cat[:enabled] %>">
+            <span class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform <%= cat[:enabled] ? 'translate-x-4.5' : 'translate-x-0.5' %>"></span>
+          </button>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-center gap-3 mt-6 pt-6 border-t border-hw-border">
+    <button type="button"
+            class="flex-1 inline-flex h-9 items-center justify-center rounded-md border border-hw-input bg-hw-background px-4 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+            data-action="click->hw-cookie-settings#rejectAll">
+      Reject All
+    </button>
+    <button type="button"
+            class="flex-1 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors cursor-pointer"
+            data-action="click->hw-cookie-settings#acceptSelected">
+      Accept Selected
+    </button>
+  </div>
+</div>

data/app/views/hotwirebits/_countdown.html.erb

@@ -0,0 +1,11 @@
+<%# Countdown component — ERB partial %>
+<%# Usage: render 'hotwirebits/countdown', ... %>
+
+<span data-controller="hw-countdown"
+      data-hw-countdown-value-value="<%= value %>"
+      data-hw-countdown-target-value="<%= target %>"
+      data-hw-countdown-duration-value="<%= duration %>"
+      class="tabular-nums"
+      <%= tag.attributes(local_assigns) %>>
+  <%= prefix %><span data-hw-countdown-target="output"><%= value %></span><%= suffix %>
+</span>

data/app/views/hotwirebits/_cta_section.html.erb

@@ -0,0 +1,36 @@
+<%# CtaSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/cta_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl rounded-2xl bg-hw-accent p-8 md:p-12">
+    <div class="flex flex-col <%= variant == :with_image && image_url ? 'md:flex-row items-center gap-8' : 'items-center text-center' %>">
+      <div class="flex-1 <%= 'max-w-xl' unless variant == :with_image %>">
+        <h2 class="text-2xl md:text-3xl font-bold text-hw-accent-foreground"><%= title %></h2>
+        <% if description %>
+          <p class="mt-3 text-hw-accent-foreground/80"><%= description %></p>
+        <% end %>
+        <% if primary_cta || secondary_cta %>
+          <div class="mt-6 flex flex-wrap gap-3 <%= 'justify-center' unless variant == :with_image %>">
+            <% if primary_cta %>
+              <a href="<%= primary_cta[:href] %>"
+                 class="inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-11 px-6 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+                <%= primary_cta[:label] %>
+              </a>
+            <% end %>
+            <% if secondary_cta %>
+              <a href="<%= secondary_cta[:href] %>"
+                 class="inline-flex items-center justify-center rounded-lg border border-hw-border bg-hw-background h-11 px-6 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors">
+                <%= secondary_cta[:label] %>
+              </a>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% if variant == :with_image && image_url %>
+        <div class="w-full md:w-1/3 shrink-0">
+          <img src="<%= image_url %>" alt="" class="rounded-xl w-full object-cover">
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/hotwirebits/_dashboard_card.html.erb

@@ -0,0 +1,35 @@
+<%# DashboardCard component — ERB partial %>
+<%# Usage: render 'hotwirebits/dashboard_card', ... %>
+
+<div class="rounded-xl border border-hw-border bg-hw-card p-5" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between mb-3">
+    <p class="text-sm font-medium text-hw-muted-foreground"><%= title %></p>
+    <% if icon %>
+      <div class="h-9 w-9 inline-flex items-center justify-center rounded-lg bg-hw-muted text-hw-muted-foreground">
+        <%= safe_svg(icon) %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-end justify-between">
+    <div>
+      <p class="text-2xl font-bold text-hw-foreground"><%= value %></p>
+      <% if trend && trend_value %>
+        <div class="flex items-center gap-1 mt-1">
+          <% if trend == :up %>
+            <svg class="h-3.5 w-3.5 <%= trend_color %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
+          <% elsif trend == :down %>
+            <svg class="h-3.5 w-3.5 <%= trend_color %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
+          <% end %>
+          <span class="text-xs font-medium <%= trend_color %>"><%= trend_value %></span>
+        </div>
+      <% end %>
+    </div>
+    <% if chart_data %>
+      <div class="h-10 w-20">
+        <svg viewBox="0 0 80 40" class="h-full w-full">
+          <polyline fill="none" stroke="currentColor" stroke-width="2" class="text-hw-primary" points="<%= chart_data.each_with_index.map { |v, i| "#{i * (80.0 / ([chart_data.size - 1, 1].max))},#{40 - (v.to_f / chart_data.max * 38)}" }.join(' ') %>"/>
+        </svg>
+      </div>
+    <% end %>
+  </div>
+          </div>

data/app/views/hotwirebits/_data_table.html.erb

@@ -0,0 +1,56 @@
+<%# DataTable component — ERB partial %>
+<%# Usage: render 'hotwirebits/data_table', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="relative w-full overflow-auto">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-b border-hw-border bg-hw-muted/50">
+          <% columns.each do |col| %>
+            <th class="h-10 px-4 text-left align-middle font-medium text-hw-muted-foreground">
+              <% if col[:sortable] %>
+                <a href="?sort_by=<%= col[:key] %>&sort_direction=<%= next_sort_direction(col[:key]) %>"
+                   class="inline-flex items-center gap-1 hover:text-hw-foreground transition-colors">
+                  <%= col[:label] %>
+                  <span class="text-xs"><%= sort_icon(col[:key]) %></span>
+                </a>
+              <% else %>
+                <%= col[:label] %>
+              <% end %>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% rows.each do |row| %>
+          <tr class="border-b border-hw-border transition-colors hover:bg-hw-muted/50">
+            <% columns.each do |col| %>
+              <td class="p-4 align-middle"><%= row[col[:key]] %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <% if current_page && total_pages %>
+    <div class="flex items-center justify-between px-4 py-3 border-t border-hw-border">
+      <span class="text-sm text-hw-muted-foreground">
+        Page <%= current_page %> of <%= total_pages %>
+      </span>
+      <div class="flex gap-1">
+        <% if current_page > 1 %>
+          <a href="?page=<%= current_page - 1 %>"
+             class="px-3 py-1 text-sm rounded-md border border-hw-border hover:bg-hw-muted transition-colors">
+            Prev
+          </a>
+        <% end %>
+        <% if current_page < total_pages %>
+          <a href="?page=<%= current_page + 1 %>"
+             class="px-3 py-1 text-sm rounded-md border border-hw-border hover:bg-hw-muted transition-colors">
+            Next
+          </a>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/hotwirebits/_data_view.html.erb

@@ -0,0 +1,24 @@
+<%# DataView component — ERB partial %>
+<%# Usage: render 'hotwirebits/data_view', ... %>
+
+<div class="space-y-4" data-controller="hw-data-view" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <span class="text-sm text-hw-muted-foreground">Sort:</span>
+      <span class="text-sm font-medium text-hw-foreground"><%= sort_by || 'Default' %></span>
+    </div>
+    <div class="inline-flex rounded-md border border-hw-input">
+      <button type="button" class="<%= merge_classes('inline-flex items-center justify-center h-8 w-8 rounded-l-md transition-colors', view == :grid ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground') %>" data-action="click->hw-data-view#switch" data-view="grid">
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
+      </button>
+      <button type="button" class="<%= merge_classes('inline-flex items-center justify-center h-8 w-8 rounded-r-md -ml-px transition-colors', view == :list ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground') %>" data-action="click->hw-data-view#switch" data-view="list">
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+    </div>
+  </div>
+  <div class="<%= view == :grid ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' : 'space-y-2' %>" data-hw-data-view-target="content">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+</div>

data/app/views/hotwirebits/_date_picker.html.erb

@@ -0,0 +1,11 @@
+<%# DatePicker component — ERB partial %>
+<%# Usage: render 'hotwirebits/date_picker', ... %>
+
+<div class="relative" data-controller="hw-datepicker">
+  <div class="relative">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+    </div>
+    <input type="date" name="<%= name %>" value="<%= value %>" min="<%= min %>" max="<%= max %>" <%= 'disabled' if disabled %> class="flex w-full rounded-md border border-hw-input bg-hw-background text-hw-foreground ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 h-9 pl-9 text-sm" <%= tag.attributes(local_assigns) %>>
+  </div>
+</div>

data/app/views/hotwirebits/_date_range_picker.html.erb

@@ -0,0 +1,31 @@
+<%# DateRangePicker component — ERB partial %>
+<%# Usage: render 'hotwirebits/date_range_picker', ... %>
+
+<div class="relative" data-controller="hw-date-range" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-2">
+    <div class="relative flex-1">
+      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <input type="date"
+             name="<%= name_start %>"
+             value="<%= start_date %>"
+             placeholder="<%= placeholder %>"
+             class="w-full h-9 rounded-md border border-hw-input bg-hw-background pl-10 pr-3 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"
+             data-hw-date-range-target="startInput"
+             data-action="change->hw-date-range#update">
+    </div>
+    <span class="text-hw-muted-foreground text-sm">to</span>
+    <div class="relative flex-1">
+      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <input type="date"
+             name="<%= name_end %>"
+             value="<%= end_date %>"
+             class="w-full h-9 rounded-md border border-hw-input bg-hw-background pl-10 pr-3 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"
+             data-hw-date-range-target="endInput"
+             data-action="change->hw-date-range#update">
+    </div>
+  </div>
+</div>

data/app/views/hotwirebits/_device_frame.html.erb

@@ -0,0 +1,43 @@
+<%# DeviceFrame component — ERB partial %>
+<%# Usage: render 'hotwirebits/device_frame', ... %>
+
+<div class="inline-block" <%= tag.attributes(local_assigns) %>>
+  <% case device %>
+  <% when :phone %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[280px] h-[560px]">
+      <div class="relative h-full">
+        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-b-2xl z-10"></div>
+        <div class="h-full pt-6"><%= content %></div>
+      </div>
+    </div>
+  <% when :tablet %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[500px] h-[360px]">
+      <div class="relative h-full">
+        <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+        <div class="h-full pt-4"><%= content %></div>
+      </div>
+    </div>
+  <% when :desktop %>
+    <div>
+      <div class="<%= frame_classes %> <%= border_color %>">
+        <div class="flex items-center gap-2 px-4 py-2.5 bg-hw-muted border-b border-neutral-200">
+          <div class="flex gap-1.5">
+            <div class="h-3 w-3 rounded-full bg-red-400"></div>
+            <div class="h-3 w-3 rounded-full bg-yellow-400"></div>
+            <div class="h-3 w-3 rounded-full bg-green-400"></div>
+          </div>
+        </div>
+        <div class="min-h-[300px]"><%= content %></div>
+      </div>
+      <div class="mx-auto w-24 h-3 bg-hw-muted rounded-b-lg"></div>
+    </div>
+  <% when :watch %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[180px] h-[220px]">
+      <div class="relative h-full">
+        <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-6 h-2 bg-hw-foreground/70 rounded-t-sm"></div>
+        <div class="absolute top-1/4 -right-1 w-1.5 h-6 bg-hw-foreground/70 rounded-r-sm"></div>
+        <div class="h-full"><%= content %></div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/hotwirebits/_device_mockup.html.erb

@@ -0,0 +1,54 @@
+<%# DeviceMockup component — ERB partial %>
+<%# Usage: render 'hotwirebits/device_mockup', ... %>
+
+<div class="inline-block" <%= tag.attributes(local_assigns) %>>
+  <% if type == :browser %>
+    <div class="flex items-center gap-2 px-4 py-2 bg-hw-foreground/90 rounded-t-lg">
+      <div class="flex gap-1.5">
+        <div class="w-3 h-3 rounded-full bg-hw-destructive"></div>
+        <div class="w-3 h-3 rounded-full bg-hw-warning"></div>
+        <div class="w-3 h-3 rounded-full bg-hw-success"></div>
+      </div>
+      <div class="flex-1 mx-4">
+        <div class="bg-hw-foreground/80 rounded h-5 w-full max-w-xs"></div>
+      </div>
+    </div>
+    <div class="<%= frame_classes %> rounded-t-none">
+      <%= content %>
+    </div>
+  <% elsif type == :phone %>
+    <div class="<%= frame_classes %>">
+      <% if device == :iphone %>
+        <div class="relative">
+          <div class="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-black rounded-b-2xl z-10"></div>
+          <div class="pt-6">
+            <%= content %>
+          </div>
+        </div>
+      <% else %>
+        <div class="relative">
+          <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+          <%= content %>
+        </div>
+      <% end %>
+    </div>
+  <% elsif type == :tablet %>
+    <div class="<%= frame_classes %>">
+      <div class="relative">
+        <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+        <%= content %>
+      </div>
+    </div>
+  <% else %>
+    <div class="<%= frame_classes %>">
+      <div class="flex items-center gap-2 px-4 py-2 bg-hw-foreground/90">
+        <div class="flex gap-1.5">
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-destructive"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-warning"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-success"></div>
+        </div>
+      </div>
+      <%= content %>
+    </div>
+  <% end %>
+</div>