hotwirebits 0.1.0

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

@@ -0,0 +1,53 @@
+<%# Alert component — ERB partial %>
+<%# Usage: render 'hotwirebits/alert', type: :info, title: "Note", message: "Hello" %>
+
+<%
+  type        = local_assigns.fetch(:type, :info)
+  title       = local_assigns[:title]
+  message     = local_assigns[:message]
+  icon        = local_assigns.fetch(:icon, true)
+  dismissible = local_assigns.fetch(:dismissible, false)
+
+  type_icons = {
+    info:    "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z",
+    success: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+    warning: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z",
+    error:   "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+  }
+
+  variant_classes = case type
+                    when :success then "border-green-200 bg-green-50 text-green-800"
+                    when :warning then "border-yellow-200 bg-yellow-50 text-yellow-800"
+                    when :error, :destructive then "border-red-200 bg-red-50 text-red-800"
+                    else "border-blue-200 bg-blue-50 text-blue-800"
+                    end
+  alert_cls = "relative w-full rounded-lg border p-4 #{variant_classes}"
+%>
+
+<div class="<%= alert_cls %>" data-controller="hw-alert" role="alert">
+  <div class="flex items-start gap-3">
+    <% if icon %>
+      <svg class="mt-0.5 h-5 w-5 shrink-0" 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="<%= type_icons.fetch(type, type_icons[:info]) %>"/>
+      </svg>
+    <% end %>
+    <div class="flex-1">
+      <% if title %>
+        <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
+      <% end %>
+      <% if message %>
+        <div class="text-sm opacity-90"><%= message %></div>
+      <% end %>
+    </div>
+    <% if dismissible %>
+      <button type="button"
+          class="shrink-0 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"
+          data-action="click->hw-alert#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>
+        <span class="sr-only">Dismiss</span>
+      </button>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+<%# AlertDialog component — ERB partial %>
+<%# Usage: render 'hotwirebits/alert_dialog', ... %>
+
+<div data-controller="hw-dialog"
+     data-hw-dialog-open-value="<%= open %>">
+  <div class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       aria-hidden="true"></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 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="alertdialog"
+       aria-modal="true"
+       <%= tag.attributes(local_assigns) %>>
+    <div class="flex flex-col space-y-2 text-center sm:text-left">
+      <% if title %>
+        <h2 class="text-lg font-semibold tracking-tight"><%= title %></h2>
+      <% end %>
+      <% if description %>
+        <p class="text-sm text-hw-muted-foreground"><%= description %></p>
+      <% end %>
+    </div>
+    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+      <button type="button" class="<%= cancel_classes %>" data-action="click->hw-dialog#close">
+        <%= cancel_action? ? cancel_action : cancel_label %>
+      </button>
+      <button type="button" class="<%= confirm_classes %>">
+        <%= confirm_action? ? confirm_action : confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+<%# Anchor component — ERB partial %>
+<%# Usage: render 'hotwirebits/anchor', ... %>
+
+<a href="<%= href %>" class="inline-flex items-center gap-1.5 text-sm text-hw-primary hover:text-hw-primary/80 transition-colors scroll-smooth" <%= tag.attributes(local_assigns) %>>
+  <% if icon %>
+    <span class="h-4 w-4"><%= safe_svg(icon) %></span>
+<% end %>
+<% if label %>
+  <span><%= label %></span>
+<% end %>
+<%= content if content %>
+</a>

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

@@ -0,0 +1,12 @@
+<%# AngleSlider component — ERB partial %>
+<%# Usage: render 'hotwirebits/angle_slider', ... %>
+
+<div class="<%= container_classes %>" data-controller="hw-angle-slider" data-hw-angle-slider-value-value="<%= value %>" <%= tag.attributes(local_assigns) %>>
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-angle-slider-target="hidden">
+  <svg width="120" height="120" viewBox="0 0 120 120" class="cursor-pointer" data-hw-angle-slider-target="svg" data-action="mousedown->hw-angle-slider#startDrag touchstart->hw-angle-slider#startDrag">
+    <circle cx="60" cy="60" r="50" fill="none" class="stroke-hw-muted" stroke-width="4"/>
+    <circle cx="60" cy="60" r="50" fill="none" class="stroke-hw-primary" stroke-width="4" stroke-dasharray="<%= (2 * Math::PI * 50 * value / 360.0).round(2) %> <%= (2 * Math::PI * 50).round(2) %>" stroke-linecap="round" transform="rotate(-90 60 60)"/>
+    <circle cx="<%= (60 + 50 * Math.cos(radians)).round(2) %>" cy="<%= (60 + 50 * Math.sin(radians)).round(2) %>" r="8" fill="currentColor" class="text-hw-primary drop-shadow-sm" data-hw-angle-slider-target="handle"/>
+  </svg>
+  <span class="text-sm font-medium text-hw-foreground" data-hw-angle-slider-target="label"><%= value %>°</span>
+    </div>

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

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

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

@@ -0,0 +1,25 @@
+<%# AppShell component — ERB partial %>
+<%# Usage: render 'hotwirebits/app_shell', ... %>
+
+<div class="flex h-screen flex-col" <%= tag.attributes(local_assigns) %>>
+  <% if header? %>
+    <header class="shrink-0 border-b border-hw-border bg-hw-background">
+      <%= header %>
+    </header>
+  <% end %>
+  <div class="flex flex-1 overflow-hidden">
+    <% if sidebar? %>
+      <aside class="<%= sidebar_collapsed ? 'w-16' : 'w-64' %> shrink-0 border-r border-hw-border bg-hw-background overflow-y-auto transition-[width] duration-200">
+        <%= sidebar %>
+      </aside>
+    <% end %>
+    <main class="flex-1 overflow-y-auto bg-hw-background">
+      <%= content %>
+    </main>
+  </div>
+  <% if footer? %>
+    <footer class="shrink-0 border-t border-hw-border bg-hw-background">
+      <%= footer %>
+    </footer>
+  <% end %>
+</div>

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

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

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

@@ -0,0 +1,66 @@
+<%# AuthBlock component — ERB partial %>
+<%# Usage: render 'hotwirebits/auth_block', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="rounded-xl border border-hw-border bg-hw-card p-8 shadow-sm">
+    <div class="text-center mb-6">
+      <h2 class="text-2xl font-bold text-hw-foreground">
+        <%= sign_up? ? 'Create an account' : 'Welcome back' %>
+      </h2>
+      <p class="mt-1 text-sm text-hw-muted-foreground">
+        <%= sign_up? ? 'Sign up to get started' : 'Sign in to your account' %>
+      </p>
+    </div>
+    <% if providers.any? %>
+      <div class="space-y-2 mb-6">
+        <% providers.each do |provider| %>
+          <button type="button"
+                  class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-hw-border bg-hw-background h-10 px-4 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors">
+            <%= safe_svg(provider_icon(provider)) %>
+            Continue with <%= provider.to_s.capitalize %>
+          </button>
+        <% end %>
+      </div>
+      <div class="relative mb-6">
+        <div class="absolute inset-0 flex items-center">
+          <div class="w-full border-t border-hw-border"></div>
+        </div>
+        <div class="relative flex justify-center text-xs"><span class="bg-hw-card px-2 text-hw-muted-foreground">or continue with email</span></div>
+      </div>
+    <% end %>
+    <form action="<%= action_url %>" method="post" class="space-y-4">
+      <% if sign_up? %>
+        <div>
+          <label for="name" class="block text-sm font-medium text-hw-foreground mb-1.5">Name</label>
+          <input type="text" name="name" id="name" placeholder="Your name"
+                 class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+        </div>
+      <% end %>
+      <div>
+        <label for="email" class="block text-sm font-medium text-hw-foreground mb-1.5">Email</label>
+        <input type="email" name="email" id="email" placeholder="youexample.com" required
+               class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+      </div>
+      <div>
+        <div class="flex items-center justify-between mb-1.5">
+          <label for="password" class="block text-sm font-medium text-hw-foreground">Password</label>
+          <% if show_forgot && !sign_up? %>
+            <a href="/users/password/new" class="text-xs text-hw-primary hover:underline">Forgot password?</a>
+          <% end %>
+        </div>
+        <input type="password" name="password" id="password" placeholder="••••••••" required
+               class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+      </div>
+      <button type="submit"
+              class="w-full inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-10 px-4 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+        <%= sign_up? ? 'Create account' : 'Sign in' %>
+      </button>
+    </form>
+    <p class="mt-6 text-center text-sm text-hw-muted-foreground">
+      <%= sign_up? ? 'Already have an account?' : "Don't have an account?" %>
+      <a href="<%= sign_up? ? '/users/sign_in' : '/users/sign_up' %>" class="text-hw-primary hover:underline font-medium">
+        <%= sign_up? ? 'Sign in' : 'Sign up' %>
+      </a>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<%# Autocomplete component — ERB partial %>
+<%# Usage: render 'hotwirebits/autocomplete', ... %>
+
+<div class="relative" data-controller="hw-autocomplete" data-hw-autocomplete-url-value="<%= url %>" data-hw-autocomplete-min-chars-value="<%= min_chars %>" <%= tag.attributes(local_assigns) %>>
+  <input type="text" placeholder="<%= placeholder %>" value="<%= value %>" <%= 'disabled' if disabled %> autocomplete="off" class="flex w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm text-hw-foreground ring-offset-hw-background placeholder:text-hw-muted-foreground 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" data-hw-autocomplete-target="input" data-action="input->hw-autocomplete#search keydown->hw-autocomplete#keydown">
+  <ul class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-hw-border bg-hw-popover shadow-md hidden" role="listbox" data-hw-autocomplete-target="results"></ul>
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-autocomplete-target="hidden">
+</div>

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

@@ -0,0 +1,32 @@
+<%# Avatar component — ERB partial %>
+<%# Usage: render 'hotwirebits/avatar', initials: "JD", size: :md %>
+
+<%
+  src      = local_assigns[:src]
+  alt      = local_assigns.fetch(:alt, "")
+  initials = local_assigns[:initials]
+  size     = local_assigns.fetch(:size, :md)
+  status   = local_assigns[:status]
+
+  sizes = { xs: "h-6 w-6 text-xs", sm: "h-8 w-8 text-xs", md: "h-10 w-10 text-sm", lg: "h-14 w-14 text-base", xl: "h-20 w-20 text-lg" }
+  size_cls = sizes.fetch(size, "h-10 w-10 text-sm")
+%>
+
+<div class="relative inline-flex">
+  <% if src %>
+    <img src="<%= src %>" alt="<%= alt %>" class="<%= size_cls %> rounded-full object-cover">
+  <% elsif initials %>
+    <div class="<%= size_cls %> rounded-full bg-hw-muted flex items-center justify-center font-medium text-hw-muted-foreground">
+      <%= initials %>
+    </div>
+  <% else %>
+    <div class="<%= size_cls %> rounded-full bg-hw-muted flex items-center justify-center text-hw-muted-foreground">
+      <svg class="h-[60%] w-[60%]" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    </div>
+  <% end %>
+  <% if status %>
+    <span class="absolute block h-2.5 w-2.5 rounded-full ring-2 ring-white <%= status == :online ? 'bg-hw-success' : status == :busy ? 'bg-hw-destructive' : status == :away ? 'bg-hw-warning' : 'bg-hw-muted-foreground/60' %> -bottom-0.5 -right-0.5"></span>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<%# BackgroundImage component — ERB partial %>
+<%# Usage: render 'hotwirebits/background_image', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="absolute inset-0 bg-no-repeat" style="background-image: url('<%= src %>'); background-size: <%= size %>; background-position: <%= position %>;"></div>
+  <% if overlay %>
+    <div class="absolute inset-0 bg-black/40"></div>
+  <% end %>
+  <div class="relative">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<%# Badge component — ERB partial %>
+<%# Usage: render 'hotwirebits/badge', label: "New", variant: :default %>
+
+<%
+  label     = local_assigns.fetch(:label, "")
+  variant   = local_assigns.fetch(:variant, :default)
+  removable = local_assigns.fetch(:removable, false)
+  dot       = local_assigns.fetch(:dot, false)
+
+  variant_classes = case variant
+                    when :secondary then "bg-hw-secondary text-hw-secondary-foreground"
+                    when :destructive then "bg-hw-destructive text-hw-destructive-foreground"
+                    when :outline then "border border-hw-border text-hw-foreground"
+                    else "bg-hw-primary text-hw-primary-foreground"
+                    end
+  base = "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors"
+  badge_cls = [base, variant_classes].join(" ")
+%>
+
+<div class="<%= badge_cls %>" <%= 'data-controller="hw-badge"'.html_safe if removable %>>
+  <% if dot %>
+    <span class="h-1.5 w-1.5 rounded-full bg-current mr-1"></span>
+  <% end %>
+  <%= label %>
+  <% if removable %>
+    <button type="button" class="ml-1 -mr-0.5 h-3.5 w-3.5 rounded-full p-0.5 hover:bg-white/20 focus:outline-none" data-action="click->hw-badge#dismiss">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-2.5 w-2.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,52 @@
+<%# Banner component — ERB partial %>
+<%# Usage: render 'hotwirebits/banner', type: :info, message: "Notice", dismissible: true %>
+
+<%
+  type        = local_assigns.fetch(:type, :info)
+  message     = local_assigns.fetch(:message, "")
+  dismissible = local_assigns.fetch(:dismissible, false)
+  cta         = local_assigns[:cta]
+  extra_class = local_assigns[:class]
+
+  type_icons = {
+    info:    "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z",
+    success: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+    warning: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z",
+    error:   "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+  }
+  variant_cls = case type
+                when :success then "border-green-200 bg-green-50 text-green-800"
+                when :warning then "border-yellow-200 bg-yellow-50 text-yellow-800"
+                when :error then "border-red-200 bg-red-50 text-red-800"
+                else "border-blue-200 bg-blue-50 text-blue-800"
+                end
+  banner_cls = ["relative w-full border-b px-4 py-3 #{variant_cls}", extra_class].compact.join(" ")
+%>
+
+<div class="<%= banner_cls %>" data-controller="hw-banner" role="banner">
+  <div class="mx-auto flex max-w-7xl items-center justify-between gap-2">
+    <div class="flex items-center gap-2">
+      <svg class="h-5 w-5 shrink-0" 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="<%= type_icons.fetch(type, type_icons[:info]) %>"/>
+      </svg>
+      <p class="text-sm font-medium"><%= message %></p>
+    </div>
+    <div class="flex items-center gap-3">
+      <% if cta.is_a?(Hash) %>
+        <a href="<%= cta[:url] %>" class="text-sm font-semibold underline underline-offset-4 hover:opacity-80">
+          <%= cta[:label] %>
+        </a>
+      <% end %>
+      <% if dismissible %>
+        <button type="button"
+            class="shrink-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            data-action="click->hw-banner#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>
+          <span class="sr-only">Dismiss</span>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+<%# BentoGrid component — ERB partial %>
+<%# Usage: render 'hotwirebits/bento_grid', ... %>
+
+<div class="<%= grid_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <div class="<%= item.item_classes %>">
+      <%= item %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,38 @@
+<%# BlogSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/blog_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if title %>
+      <h2 class="text-2xl md:text-3xl font-bold text-hw-foreground text-center mb-12"><%= title %></h2>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% posts.each do |post| %>
+        <a href="<%= post[:href] || '#' %>" class="group flex flex-col rounded-lg border border-hw-border bg-hw-card overflow-hidden hover:shadow-md transition-shadow">
+          <% if post[:image] %>
+            <div class="aspect-video overflow-hidden">
+              <img src="<%= post[:image] %>" alt="<%= post[:title] %>" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300">
+            </div>
+          <% end %>
+          <div class="flex flex-col flex-1 p-5">
+            <h3 class="text-base font-semibold text-hw-foreground group-hover:text-hw-primary transition-colors"><%= post[:title] %></h3>
+            <% if post[:excerpt] %>
+              <p class="mt-2 text-sm text-hw-muted-foreground leading-relaxed line-clamp-3"><%= post[:excerpt] %></p>
+            <% end %>
+            <div class="mt-auto pt-4 flex items-center gap-2 text-xs text-hw-muted-foreground">
+              <% if post[:author] %>
+                <span><%= post[:author] %></span>
+              <% end %>
+              <% if post[:author] && post[:date] %>
+                <span>&middot;</span>
+              <% end %>
+              <% if post[:date] %>
+                <time><%= post[:date] %></time>
+              <% end %>
+            </div>
+          </div>
+        </a>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,24 @@
+<%# BottomNavigation component — ERB partial %>
+<%# Usage: render 'hotwirebits/bottom_navigation', ... %>
+
+<nav class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto flex max-w-lg items-center justify-around px-2 py-1">
+    <% items.each do |item| %>
+      <a href="<%= item[:href] %>"
+         class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-xs transition-colors
+                <%= item_active?(item) ? 'text-hw-primary' : 'text-hw-muted-foreground hover:text-hw-foreground' %>">
+  <% if item[:icon] %>
+    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="<%= item_active?(item) ? '2' : '1.5' %>" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="<%= item[:icon] %>"/>
+          </svg>
+        <% end %>
+        <span><%= item[:label] %></span>
+      <% if item[:badge] %>
+        <span class="absolute -top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-hw-destructive px-1 text-[10px] font-bold text-hw-primary-foreground">
+          <%= item[:badge] %>
+        </span>
+      <% end %>
+    </a>
+  <% end %>
+</div>
+</nav>

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

@@ -0,0 +1,6 @@
+<%# Box component — ERB partial %>
+<%# Usage: render 'hotwirebits/box', ... %>
+
+<%= tag.public_send(as, class: box_classes, **extra_attrs) do %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,28 @@
+<%# Breadcrumb component — ERB partial %>
+<%# Usage: render 'hotwirebits/breadcrumb', items: [{label: "Home", href: "/"}, {label: "Page"}] %>
+
+<%
+  items       = local_assigns.fetch(:items, [])
+  separator   = local_assigns.fetch(:separator, "/")
+  extra_class = local_assigns[:class]
+  nav_cls     = ["flex items-center text-sm text-hw-muted-foreground", extra_class].compact.join(" ")
+%>
+
+<nav aria-label="Breadcrumb" class="<%= nav_cls %>">
+  <ol class="flex items-center space-x-2">
+    <% items.each_with_index do |item, idx| %>
+      <% if idx > 0 %>
+        <li class="text-hw-muted-foreground/50"><%= separator %></li>
+      <% end %>
+      <li>
+        <% if item[:active] %>
+          <span class="font-medium text-hw-foreground" aria-current="page"><%= item[:label] %></span>
+        <% elsif item[:href] %>
+          <a href="<%= item[:href] %>" class="hover:text-hw-foreground transition-colors"><%= item[:label] %></a>
+        <% else %>
+          <span><%= item[:label] %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,56 @@
+<%# BreadcrumbAdvanced component — ERB partial %>
+<%# Usage: render 'hotwirebits/breadcrumb_advanced', ... %>
+
+<nav aria-label="Breadcrumb" <%= tag.attributes(local_assigns) %>>
+  <ol class="flex items-center flex-wrap gap-1.5 text-sm">
+    <% visible_items.each_with_index do |item, idx| %>
+      <li class="flex items-center gap-1.5">
+  <% if idx > 0 %>
+    <% if separator == :chevron %>
+      <svg class="h-3.5 w-3.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="M9 5l7 7-7 7"/></svg>
+    <% else %>
+      <span class="text-hw-muted-foreground"><%= separator_char %></span>
+    <% end %>
+  <% end %>
+  <% if item[:collapsed] %>
+    <div class="relative" data-controller="hw-dropdown">
+      <button type="button"
+                    class="h-6 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground cursor-pointer"
+                    data-action="click->hw-dropdown#toggle click@window->hw-dropdown#closeOnClickOutside">
+        ...
+      </button>
+      <div data-hw-dropdown-target="menu" class="hidden absolute left-0 top-full mt-1 z-50 min-w-[8rem] rounded-md border border-hw-border bg-hw-popover p-1 shadow-md">
+        <% items[1..items.size - (max_items || 2)].each do |collapsed_item| %>
+          <a href="<%= collapsed_item[:href] %>" class="block rounded-sm px-2 py-1.5 text-sm hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+            <%= collapsed_item[:label] %>
+          </a>
+        <% end %>
+      </div>
+    </div>
+  <% elsif item[:children]&.any? %>
+    <div class="relative" data-controller="hw-dropdown">
+      <button type="button"
+                    class="inline-flex items-center gap-1 rounded hover:bg-hw-accent px-1 py-0.5 text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer"
+                    data-action="click->hw-dropdown#toggle click@window->hw-dropdown#closeOnClickOutside">
+        <%= item[:label] %>
+        <svg class="h-3 w-3" 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="hidden absolute left-0 top-full mt-1 z-50 min-w-[8rem] rounded-md border border-hw-border bg-hw-popover p-1 shadow-md">
+        <% item[:children].each do |child| %>
+          <a href="<%= child[:href] %>" class="block rounded-sm px-2 py-1.5 text-sm hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+            <%= child[:label] %>
+          </a>
+        <% end %>
+      </div>
+    </div>
+  <% elsif item[:href] && idx != visible_items.size - 1 %>
+    <a href="<%= item[:href] %>" class="text-hw-muted-foreground hover:text-hw-foreground transition-colors">
+      <%= item[:label] %>
+    </a>
+  <% else %>
+    <span class="font-medium text-hw-foreground" <%= 'aria-current="page"' if idx == visible_items.size - 1 %>><%= item[:label] %></span>
+    <% end %>
+  </li>
+<% end %>
+</ol>
+</nav>

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

@@ -0,0 +1,25 @@
+<%# BrowserMockup component — ERB partial %>
+<%# Usage: render 'hotwirebits/browser_mockup', ... %>
+
+<div class="rounded-lg border border-hw-border overflow-hidden bg-white shadow-lg" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-3 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>
+    <% if url %>
+      <div class="flex-1 flex items-center">
+        <div class="flex items-center gap-1.5 rounded-md bg-white border border-neutral-200 px-3 py-1 w-full max-w-sm">
+          <svg class="h-3 w-3 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+          </svg>
+          <span class="text-xs text-hw-muted-foreground truncate"><%= url %></span>
+        </div>
+      </div>
+    <% else %>
+      <div class="flex-1 bg-white rounded h-6 border border-neutral-200"></div>
+    <% end %>
+  </div>
+  <div class="min-h-[200px]"><%= content %></div>
+</div>

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

@@ -0,0 +1,23 @@
+<%# Burger component — ERB partial %>
+<%# Usage: render 'hotwirebits/burger', ... %>
+
+<button type="button"
+        class="<%= button_classes %>"
+        data-controller="hw-burger"
+        data-hw-burger-open-value="<%= open %>"
+        data-action="click->hw-burger#toggle"
+  aria-label="Toggle menu"
+  aria-expanded="<%= open %>"
+  <%= tag.attributes(local_assigns) %>>
+  <span class="relative flex flex-col items-center justify-center gap-1">
+    <span class="<%= line_classes %>"
+          data-hw-burger-target="top"
+          style="<%= open ? 'transform: translateY(6px) rotate(45deg)' : '' %>"></span>
+    <span class="<%= line_classes %>"
+          data-hw-burger-target="middle"
+          style="<%= open ? 'opacity: 0' : '' %>"></span>
+    <span class="<%= line_classes %>"
+          data-hw-burger-target="bottom"
+          style="<%= open ? 'transform: translateY(-6px) rotate(-45deg)' : '' %>"></span>
+  </span>
+</button>