hotwirebits 0.1.0

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

@@ -0,0 +1,58 @@
+<%# Dialog component — ERB partial %>
+<%# Usage: render 'hotwirebits/dialog', title: "Confirm", description: "Are you sure?" %>
+
+<%
+  title       = local_assigns[:title]
+  description = local_assigns[:description]
+  size        = local_assigns.fetch(:size, :md)
+  closable    = local_assigns.fetch(:closable, true)
+  open        = local_assigns.fetch(:open, false)
+
+  size_cls = case size
+             when :sm then "max-w-sm"
+             when :lg then "max-w-2xl"
+             when :xl then "max-w-4xl"
+             when :full then "max-w-[calc(100vw-2rem)]"
+             else "max-w-lg"
+             end
+  overlay_cls = "fixed inset-0 z-50 bg-black/80"
+  dialog_cls = "fixed left-[50%] top-[50%] z-50 grid w-full #{size_cls} translate-x-[-50%] translate-y-[-50%] gap-4 border border-hw-border bg-hw-background p-6 shadow-lg sm:rounded-lg"
+%>
+
+<div data-controller="hw-dialog" data-hw-dialog-open-value="<%= open %>">
+  <div class="<%= overlay_cls %>"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       data-action="click->hw-dialog#close"
+       aria-hidden="true"></div>
+  <div class="<%= dialog_cls %>"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="<%= title ? 'dialog-title' : nil %>">
+    <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+      <% if title %>
+        <h2 id="dialog-title" class="text-lg font-semibold leading-none tracking-tight"><%= title %></h2>
+      <% end %>
+      <% if description %>
+        <p class="text-sm text-hw-muted-foreground"><%= description %></p>
+      <% end %>
+    </div>
+    <% if block_given? %>
+      <div class="text-sm text-hw-muted-foreground">
+        <%= yield %>
+      </div>
+    <% end %>
+    <% if closable %>
+      <button type="button"
+              class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-hw-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2 disabled:pointer-events-none"
+              data-action="click->hw-dialog#close">
+        <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"/>
+        </svg>
+        <span class="sr-only">Close</span>
+      </button>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<%# Diff component — ERB partial %>
+<%# Usage: render 'hotwirebits/diff', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="rounded-lg border border-hw-border overflow-hidden">
+    <div class="px-4 py-2 bg-hw-muted border-b border-hw-border">
+      <span class="text-xs font-medium text-hw-destructive"><%= before_label %></span>
+    </div>
+    <div class="p-4 text-sm font-mono">
+      <% if before_slot? %>
+        <%= before_slot %>
+      <% end %>
+    </div>
+  </div>
+  <div class="rounded-lg border border-hw-border overflow-hidden">
+    <div class="px-4 py-2 bg-hw-muted border-b border-hw-border">
+      <span class="text-xs font-medium text-hw-success"><%= after_label %></span>
+    </div>
+    <div class="p-4 text-sm font-mono">
+      <% if after_slot? %>
+        <%= after_slot %>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<%# DiffView component — ERB partial %>
+<%# Usage: render 'hotwirebits/diff_view', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if view == :side_by_side %>
+    <div class="grid grid-cols-2 divide-x divide-hw-border">
+      <div>
+        <div class="bg-hw-destructive/5 px-3 py-1.5 text-xs font-medium text-hw-destructive border-b border-hw-border">Old</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% old_code.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-destructive bg-hw-destructive/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+      <div>
+        <div class="bg-hw-success/5 px-3 py-1.5 text-xs font-medium text-hw-success border-b border-hw-border">New</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% new_code.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-success bg-hw-success/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+    </div>
+  <% else %>
+    <div class="bg-hw-muted/30 px-3 py-1.5 text-xs font-medium text-hw-muted-foreground border-b border-hw-border">
+      Unified Diff — <%= language %>
+    </div>
+    <pre class="p-3 overflow-x-auto text-xs leading-5"><% diff_lines(old_code, new_code).each do |entry|
+      case entry[:type]
+      when :context %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= entry[:old_line] %></span><span class="flex-1"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :removed %><span class="flex bg-hw-destructive/5"><span class="w-8 shrink-0 text-hw-destructive select-none">-</span><span class="flex-1 text-hw-destructive"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :added %><span class="flex bg-hw-success/5"><span class="w-8 shrink-0 text-hw-success select-none">+</span><span class="flex-1 text-hw-success"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% end
+    end %></pre>
+  <% end %>
+</div>

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

@@ -0,0 +1,24 @@
+<%# DigitalSignature component — ERB partial %>
+<%# Usage: render 'hotwirebits/digital_signature', ... %>
+
+<div data-controller="hw-signature"
+     data-hw-signature-pen-color-value="<%= pen_color %>"
+     data-hw-signature-pen-width-value="<%= pen_width %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="rounded-lg border border-hw-border bg-hw-background overflow-hidden">
+    <canvas data-hw-signature-target="canvas"
+            width="<%= width %>"
+            height="<%= height %>"
+            class="w-full cursor-crosshair touch-none"
+            data-action="mousedown->hw-signature#startDraw mousemove->hw-signature#draw mouseup->hw-signature#endDraw mouseleave->hw-signature#endDraw touchstart->hw-signature#startDraw touchmove->hw-signature#draw touchend->hw-signature#endDraw"></canvas>
+  </div>
+  <input type="hidden" name="<%= name %>" data-hw-signature-target="input">
+  <div class="flex items-center gap-2 mt-2">
+    <button type="button"
+            class="inline-flex h-8 items-center justify-center rounded-md border border-hw-input bg-hw-background px-3 text-xs font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+            data-action="click->hw-signature#clear">
+      Clear
+    </button>
+    <span class="text-xs text-hw-muted-foreground" data-hw-signature-target="status">Draw your signature above</span>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<%# Divider component — ERB partial %>
+<%# Usage: render 'hotwirebits/divider', orientation: :horizontal %>
+
+<%
+  orientation = local_assigns.fetch(:orientation, :horizontal)
+  label       = local_assigns[:label]
+  with_label  = local_assigns.fetch(:with_label, label.present?)
+  dashed      = local_assigns.fetch(:dashed, false)
+  extra_class = local_assigns[:class]
+%>
+
+<% if with_label && label %>
+  <div class="relative flex items-center <%= orientation == :vertical ? 'flex-col h-full' : '' %><%= " #{extra_class}" if extra_class %>" role="separator">
+    <div class="<%= orientation == :horizontal ? 'flex-1 border-t' : 'flex-1 border-l' %> <%= dashed ? 'border-dashed' : 'border-solid' %> border-hw-border"></div>
+    <span class="<%= orientation == :horizontal ? 'px-3' : 'py-3' %> text-xs text-hw-muted-foreground font-medium">
+      <%= label %>
+    </span>
+    <div class="<%= orientation == :horizontal ? 'flex-1 border-t' : 'flex-1 border-l' %> <%= dashed ? 'border-dashed' : 'border-solid' %> border-hw-border"></div>
+  </div>
+<% else %>
+  <div class="<%= orientation == :vertical ? 'shrink-0 bg-hw-border h-full w-[1px]' : 'shrink-0 bg-hw-border h-[1px] w-full' %><%= " #{extra_class}" if extra_class %>" role="separator"></div>
+<% end %>

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

@@ -0,0 +1,24 @@
+<%# DockMenu component — ERB partial %>
+<%# Usage: render 'hotwirebits/dock_menu', ... %>
+
+<nav class="fixed inset-x-0 bottom-0 z-50 border-t border-hw-border bg-hw-background/95 backdrop-blur supports-[backdrop-filter]:bg-hw-background/60" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto flex h-16 max-w-md items-center justify-around px-6">
+    <% items.each do |item| %>
+      <a href="<%= item[:href] %>"
+         class="<%= merge_classes(
+           'group relative flex flex-col items-center gap-1 text-xs transition-colors',
+           item[:active] ? 'text-hw-primary' : 'text-hw-muted-foreground hover:text-hw-foreground'
+         ) %>">
+  <span class="relative">
+    <% if item[:icon] %>
+      <span class="h-6 w-6"><%= safe_svg(item[:icon]) %></span>
+    <% end %>
+    <% if item[:badge] %>
+      <span class="absolute -right-2 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-hw-primary px-1 text-[10px] font-medium text-hw-primary-foreground"><%= item[:badge] %></span>
+    <% end %>
+  </span>
+  <span class="<%= item[:active] ? 'font-medium' : '' %>"><%= item[:label] %></span>
+</a>
+<% end %>
+</div>
+</nav>

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

@@ -0,0 +1,19 @@
+<%# DragDropList component — ERB partial %>
+<%# Usage: render 'hotwirebits/drag_drop_list', ... %>
+
+<ul class="<%= list_classes %>"
+    data-controller="hw-drag-drop"
+    <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <li class="flex items-center gap-3 rounded-lg border border-hw-border bg-hw-card p-3 cursor-grab active:cursor-grabbing transition-shadow hover:shadow-md"
+        draggable="true"
+        data-hw-drag-drop-target="item"
+        data-item-id="<%= item[:id] %>"
+        data-action="dragstart->hw-drag-drop#dragStart dragend->hw-drag-drop#dragEnd dragover->hw-drag-drop#dragOver drop->hw-drag-drop#drop">
+      <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="M4 8h16M4 16h16"/>
+      </svg>
+      <span class="text-sm text-hw-foreground"><%= item[:label] %></span>
+    </li>
+  <% end %>
+</ul>

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

@@ -0,0 +1,41 @@
+<%# Drawer component — ERB partial %>
+<%# Usage: render 'hotwirebits/drawer', ... %>
+
+<div data-controller="hw-drawer"
+     data-hw-drawer-open-value="<%= open %>"
+     data-hw-drawer-snap-points-value="<%= snap_points_data %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="fixed inset-0 z-50 bg-black/80"
+       data-hw-drawer-target="overlay"
+       data-action="click->hw-drawer#close"
+    data-state="<%= open ? 'open' : 'closed' %>"
+    aria-hidden="true"></div>
+  <div class="fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-hw-border bg-hw-background"
+       data-hw-drawer-target="panel"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       role="dialog"
+       aria-modal="true">
+    <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-hw-muted cursor-grab"
+         data-hw-drawer-target="handle"
+         data-action="pointerdown->hw-drawer#startDrag"></div>
+    <div class="mx-auto w-full max-w-md">
+      <% if header? %>
+        <div class="p-4 pb-0">
+          <%= header %>
+        </div>
+      <% elsif title %>
+        <div class="p-4 pb-0 text-center">
+          <h2 class="text-lg font-semibold tracking-tight"><%= title %></h2>
+        </div>
+      <% end %>
+      <div class="p-4 overflow-y-auto">
+        <%= content %>
+      </div>
+      <% if footer? %>
+        <div class="p-4 pt-0">
+          <%= footer %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+<%# Dropdown component — ERB partial %>
+<%# Usage: render 'hotwirebits/dropdown', trigger_label: "Menu", items: [{label: "Item", href: "/"}] %>
+
+<%
+  trigger_label = local_assigns.fetch(:trigger_label, "Menu")
+  items         = local_assigns.fetch(:items, [])
+  align         = local_assigns.fetch(:align, :start)
+  extra_class   = local_assigns[:class]
+
+  panel_cls = "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md #{align == :end ? 'right-0' : 'left-0'}"
+%>
+
+<div class="relative inline-block<%= " #{extra_class}" if extra_class %>" data-controller="hw-dropdown">
+  <button type="button"
+          data-action="click->hw-dropdown#toggle click@window->hw-dropdown#closeOnClickOutside"
+          class="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer">
+    <%= trigger_label %>
+    <svg class="ml-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="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div data-hw-dropdown-target="menu" class="<%= panel_cls %> hidden">
+    <% 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="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground"
+           data-action="click->hw-dropdown#close">
+          <span><%= item[:label] %></span>
+        </a>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+<%# Dropzone component — ERB partial %>
+<%# Usage: render 'hotwirebits/dropzone', ... %>
+
+<label class="flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed border-hw-border bg-hw-muted/30 cursor-pointer hover:bg-hw-muted/50 transition-colors" <%= tag.attributes(local_assigns) %>>
+  <svg class="w-8 h-8 mb-2 text-hw-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+  </svg>
+  <p class="text-sm text-hw-foreground font-medium"><%= label %></p>
+  <% if description %>
+    <p class="text-xs text-hw-muted-foreground mt-1"><%= description %></p>
+  <% end %>
+  <input
+    type="file"
+    name="<%= name %>"
+    class="hidden"
+    <%= 'accept="' + accept + '"' if accept %>
+    <%= 'multiple' if multiple %>
+  >
+  </label>

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

@@ -0,0 +1,22 @@
+<%# EmptyCart component — ERB partial %>
+<%# Usage: render 'hotwirebits/empty_cart', ... %>
+
+<div class="flex flex-col items-center justify-center rounded-lg border border-dashed border-hw-border p-12 text-center" <%= tag.attributes(local_assigns) %>>
+  <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground">
+    <% if icon %>
+      <%= safe_svg(icon) %>
+    <% else %>
+      <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-5.98.572m5.98-.572h9m-9 0a3 3 0 01-5.98.572M17.25 14.25a3 3 0 005.98.572m-5.98-.572h-9m9 0a3 3 0 015.98.572M3.75 6.75h16.5l-1.5 9H5.25l-1.5-9z"/>
+      </svg>
+    <% end %>
+  </div>
+  <h3 class="text-lg font-semibold text-hw-foreground"><%= message %></h3>
+  <p class="mt-1.5 text-sm text-hw-muted-foreground max-w-sm">Looks like you haven't added any items to your cart yet.</p>
+  <% if action_href %>
+    <a href="<%= action_href %>"
+       class="mt-6 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-6 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors">
+      <%= action_label %>
+    </a>
+  <% end %>
+</div>

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

@@ -0,0 +1,29 @@
+<%# EmptyState component — ERB partial %>
+<%# Usage: render 'hotwirebits/empty_state', title: "Nothing here", description: "Create something" %>
+
+<%
+  title        = local_assigns[:title]
+  description  = local_assigns[:description]
+  icon         = local_assigns[:icon]
+  action_label = local_assigns[:action_label]
+  action_href  = local_assigns[:action_href]
+  extra_class  = local_assigns[:class]
+%>
+
+<div class="flex flex-col items-center justify-center rounded-lg border border-dashed border-hw-border p-8 text-center<%= " #{extra_class}" if extra_class %>">
+  <% if icon %>
+    <div class="mb-3 text-hw-muted-foreground"><%= icon %></div>
+  <% end %>
+  <% if title %>
+    <h3 class="text-lg font-semibold tracking-tight"><%= title %></h3>
+  <% end %>
+  <% if description %>
+    <p class="mt-1.5 text-sm text-hw-muted-foreground max-w-sm"><%= description %></p>
+  <% end %>
+  <% if action_label && action_href %>
+    <a href="<%= action_href %>"
+       class="mt-4 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 py-2 text-sm 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">
+      <%= action_label %>
+    </a>
+  <% end %>
+</div>

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

@@ -0,0 +1,17 @@
+<%# ErrorPage component — ERB partial %>
+<%# Usage: render 'hotwirebits/error_page', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <p class="text-8xl font-bold text-hw-muted-foreground/30"><%= code %></p>
+  <h1 class="mt-4 text-2xl font-bold text-hw-foreground"><%= title %></h1>
+  <p class="mt-2 text-hw-muted-foreground max-w-md"><%= description %></p>
+  <% if action_label %>
+    <a href="<%= action_href %>"
+       class="mt-6 inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-10 px-5 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+      <svg class="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+      </svg>
+      <%= action_label %>
+    </a>
+  <% end %>
+</div>

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

@@ -0,0 +1,29 @@
+<%# FaqSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/faq_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-3xl">
+    <% if title %>
+      <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground text-center mb-10"><%= title %></h2>
+    <% end %>
+    <div class="divide-y divide-hw-border rounded-lg border border-hw-border" data-controller="hw-accordion">
+      <% items.each_with_index do |item, index| %>
+        <div>
+          <button type="button"
+                  class="flex w-full items-center justify-between px-6 py-4 text-left hover:bg-hw-muted/50 transition-colors"
+                  data-action="click->hw-accordion#toggle"
+            data-hw-accordion-target="trigger">
+            <span class="text-base font-medium text-hw-foreground pr-4"><%= item[:question] %></span>
+            <svg class="h-5 w-5 shrink-0 text-hw-muted-foreground transition-transform duration-200" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </button>
+          <div class="hidden px-6 pb-4 text-sm text-hw-muted-foreground leading-relaxed" data-hw-accordion-target="content">
+            <%= item[:answer] %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,30 @@
+<%# FeatureSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/feature_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if title || subtitle %>
+      <div class="text-center mb-12">
+        <% if title %>
+          <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground"><%= title %></h2>
+        <% end %>
+        <% if subtitle %>
+          <p class="mt-3 text-lg text-hw-muted-foreground max-w-2xl mx-auto"><%= subtitle %></p>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% features.each do |feature| %>
+        <div class="flex flex-col gap-3 rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if feature[:icon] %>
+            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-hw-accent text-hw-accent-foreground shrink-0">
+              <span class="h-5 w-5"><%= safe_svg(feature[:icon]) %></span>
+            </div>
+          <% end %>
+          <h3 class="text-base font-semibold text-hw-foreground"><%= feature[:title] %></h3>
+          <p class="text-sm text-hw-muted-foreground leading-relaxed"><%= feature[:description] %></p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,54 @@
+<%# Feedback component — ERB partial %>
+<%# Usage: render 'hotwirebits/feedback', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-card p-4" data-controller="hw-feedback" <%= tag.attributes(local_assigns) %>>
+  <% if question %>
+    <p class="mb-3 text-sm font-medium"><%= question %></p>
+  <% end %>
+  <% case type %>
+  <% when :thumbs %>
+    <div class="flex items-center gap-2">
+      <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="up"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-sm transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground">
+        <svg class="h-5 w-5" 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="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"/>
+        </svg>
+      </button>
+      <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="down"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-sm transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground">
+        <svg class="h-5 w-5" 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="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H5.904c-.889 0-1.713.518-1.972 1.368a11.976 11.976 0 00-.521 3.507c0 1.553.295 3.036.831 4.398.393.837.999 1.287 1.605 1.287h3.126c1.026 0 1.945-.694 2.054-1.715.045-.422.068-.85.068-1.285a11.95 11.95 0 00-2.649-7.521c-.388-.482-.107-1.282.725-1.282h3.126z"/>
+        </svg>
+      </button>
+    </div>
+  <% when :stars %>
+    <div class="flex items-center gap-1" data-hw-feedback-target="starContainer">
+      <% 5.times do |i| %>
+        <button type="button" data-action="click->hw-feedback#selectStar" data-value="<%= i + 1 %>"
+          class="text-hw-muted-foreground transition-colors hover:text-hw-warning">
+          <svg class="h-6 w-6" 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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
+          </svg>
+        </button>
+      <% end %>
+    </div>
+  <% when :emoji %>
+    <div class="flex items-center gap-1">
+      <% emoji_options.each_with_index do |emoji, i| %>
+        <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="<%= i + 1 %>"
+          class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-lg transition-colors hover:bg-hw-accent">
+          <%= emoji %>
+        </button>
+      <% end %>
+    </div>
+  <% when :nps %>
+    <div class="flex items-center gap-1">
+      <% nps_range.each do |n| %>
+        <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="<%= n %>"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-hw-input bg-hw-background text-xs font-medium transition-colors hover:bg-hw-primary hover:text-hw-primary-foreground">
+          <%= n %>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+<%# Fieldset component — ERB partial %>
+<%# Usage: render 'hotwirebits/fieldset', ... %>
+
+<fieldset class="<%= fieldset_classes %>" <%= 'disabled' if disabled %> <%= tag.attributes(local_assigns) %>>
+  <% if legend %>
+    <legend class="text-sm font-medium text-hw-foreground"><%= legend %></legend>
+  <% end %>
+  <% if description %>
+    <p class="text-xs text-hw-muted-foreground mt-1 mb-3"><%= description %></p>
+  <% end %>
+  <div class="space-y-3">
+    <%= content %>
+  </div>
+</fieldset>

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

@@ -0,0 +1,38 @@
+<%# FileBrowser component — ERB partial %>
+<%# Usage: render 'hotwirebits/file_browser', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-card overflow-hidden font-mono text-sm"
+     data-controller="hw-file-browser"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="p-3 border-b border-hw-border bg-hw-muted/50">
+    <p class="text-xs font-medium text-hw-muted-foreground uppercase tracking-wide">Files</p>
+  </div>
+  <div class="p-2">
+    <%= render_file_tree(files, 0) %>
+  </div>
+</div>
+<% def render_file_tree(files, depth) %>
+<% files.each do |file| %>
+  <div class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-pointer hover:bg-hw-accent transition-colors <%= selected == file[:name] ? 'bg-hw-accent text-hw-accent-foreground' : 'text-hw-foreground' %>"
+         style="padding-left: <%= depth * 16 + 8 %>px;"
+         data-action="click->hw-file-browser#select"
+    data-file-name="<%= file[:name] %>">
+    <% if file[:type] == 'folder' %>
+      <svg class="h-4 w-4 text-yellow-500 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+      </svg>
+    <% else %>
+      <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+      </svg>
+    <% end %>
+    <span class="truncate"><%= file[:name] %></span>
+    <% if file[:size] %>
+      <span class="ml-auto text-[10px] text-hw-muted-foreground shrink-0"><%= file[:size] %></span>
+    <% end %>
+  </div>
+  <% if file[:type] == 'folder' && file[:children]&.any? %>
+    <%= render_file_tree(file[:children], depth + 1) %>
+  <% end %>
+<% end %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# FileInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/file_input', ... %>
+
+<label class="<%= label_classes %>">
+  <input type="file" name="<%= name %>" accept="<%= accept %>" <%= 'multiple' if multiple %> <%= 'disabled' if disabled %> class="sr-only" <%= tag.attributes(local_assigns) %>>
+  <span class="flex items-center gap-2">
+    <svg class="h-4 w-4 text-hw-muted-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
+    <span class="text-sm"><%= label %></span>
+  </span>
+</label>

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

@@ -0,0 +1,29 @@
+<%# FileUploadProgress component — ERB partial %>
+<%# Usage: render 'hotwirebits/file_upload_progress', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-card p-4" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-3 mb-3">
+    <%= safe_svg(status_icon) %>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-hw-foreground truncate"><%= file_name %></p>
+      <p class="text-xs text-hw-muted-foreground">
+        <% case status %>
+        <% when :complete %>
+          Upload complete
+        <% when :error %>
+          Upload failed
+        <% else %>
+          Uploading... <%= progress %>%
+        <% end %>
+      </p>
+    </div>
+    <% unless status == :uploading %>
+      <button type="button" class="h-7 w-7 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground cursor-pointer" aria-label="Dismiss">
+        <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    <% end %>
+  </div>
+  <div class="w-full overflow-hidden rounded-full bg-hw-muted h-2">
+    <div class="h-full rounded-full transition-all duration-300 <%= bar_color %>" style="width: <%= progress %>%;"></div>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<%# Flex component — ERB partial %>
+<%# Usage: render 'hotwirebits/flex', ... %>
+
+<div class="<%= flex_classes %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</div>

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

@@ -0,0 +1,7 @@
+<%# FloatLabel component — ERB partial %>
+<%# Usage: render 'hotwirebits/float_label', ... %>
+
+<div class="relative" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+  <label for="<%= name %>" class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-hw-muted-foreground transition-all pointer-events-none peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-2 peer-focus:text-xs peer-focus:text-hw-primary peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs"><%= label %></label>
+</div>

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

@@ -0,0 +1,6 @@
+<%# Fluid component — ERB partial %>
+<%# Usage: render 'hotwirebits/fluid', ... %>
+
+<div class="<%= fluid_classes %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</div>