seams 0.1.0 → 0.2.0

data/lib/generators/seams/design/templates/app/helpers/design/ui_helper.rb.tt

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Design
+  # The host-wide design-system helper. The only hand-written helper is the one
+  # that isn't a plain "render a component" — currently just ui_icon. Every
+  # public component (one with a preview partial) gets a `ui_<name>` helper
+  # defined automatically (see define_component_helpers!), so adding a component
+  # never means adding a helper.
+  #
+  # Mixed into ActionController::Base by the engine's to_prepare hook, so the
+  # helpers resolve in the host's views AND every other engine's views.
+  module UiHelper
+    # <%%= ui_icon(:close) %> — references the inline sprite by fragment.
+    def ui_icon(name, size: nil)
+      return if name.nil?
+
+      render "ui/icon", name: name, size: size
+    end
+
+    # Define ui_<name>(**locals, &block) for every public component. The block,
+    # if given, is captured and passed as the `content` local — so a component
+    # that takes content declares `content: nil` in its strict locals, and every
+    # other keyword flows straight through (extras land in the partial's trailing
+    # **attrs and are splatted onto its root element).
+    def self.define_component_helpers!
+      Design.component_names.each do |name|
+        method_name = "ui_#{name}"
+        next if instance_methods(false).include?(method_name.to_sym)
+
+        define_method(method_name) do |**locals, &block|
+          locals = locals.merge(content: capture(&block)) if block
+          render "ui/#{name}", **locals
+        end
+      end
+    end
+  end
+end

data/lib/generators/seams/design/templates/app/views/design/dashboard/index.html.erb.tt

@@ -0,0 +1,38 @@
+<%% content_for :title, "Dashboard — <%= app_name %>" %>
+
+<div class="stack-lg">
+  <header class="stack">
+    <p class="eyebrow">Dashboard</p>
+    <h1 class="display">Welcome to <%= app_name %></h1>
+    <p class="lede">
+      This starter dashboard ships with <code>bin/seams design --shell</code>. It is
+      built entirely from <code>ui_*</code> components on the seams design system —
+      replace it with your real home page when you have data to show.
+    </p>
+    <div class="row-wrap">
+      <%%= ui_button(variant: :accent) { "Primary action" } %>
+      <%%= link_to "Component gallery", "/design/guide", class: "btn btn-ghost" if Rails.env.local? %>
+    </div>
+  </header>
+
+  <section class="stack">
+    <h2 class="h2">Add an engine</h2>
+    <p class="small muted">
+      A fresh host has no feature engines yet. Generate one with <code>bin/seams &lt;name&gt;</code>
+      and its styled views render on top of this design system.
+    </p>
+
+    <div class="grid grid-auto">
+      <%% @suggested_engines.each do |name, summary| %>
+        <%%= ui_card do %>
+          <div class="row">
+            <span class="mono small muted">bin/seams <%%= name %></span>
+            <%%= ui_tag(label: "available", status: :neutral) %>
+          </div>
+          <h3 class="h3" style="margin-top:var(--s-2)"><%%= name.capitalize %></h3>
+          <p class="small muted" style="margin-top:var(--s-1)"><%%= summary %></p>
+        <%% end %>
+      <%% end %>
+    </div>
+  </section>
+</div>

data/lib/generators/seams/design/templates/app/views/design/guide/index.html.erb.tt

@@ -0,0 +1,19 @@
+<%% content_for :title, "Design — component guide" %>
+<main id="main" style="max-width:var(--shell-max);margin:0 auto;padding:var(--s-7) var(--s-5) var(--s-9);font-family:var(--sans);color:var(--ink)">
+  <p style="font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)">Design · living gallery</p>
+  <h1 style="font-family:var(--display);font-size:var(--t-display);margin:var(--s-3) 0 0">Components, rendered from the real partials</h1>
+  <p style="font-size:var(--t-body);color:var(--ink-2);max-width:var(--measure);margin:var(--s-4) 0 0">Every example below is the real <code><%%= "ui_*" %></code> helper rendering its
+    strict-locals partial. This page is built from the components themselves — add one (a partial + a preview under
+    <code>app/views/ui/</code>) and it appears here, with its helper, automatically.</p>
+  <p style="font-size:var(--t-sm);color:var(--muted);margin:var(--s-4) 0 0"><%%= @components.size %> components</p>
+
+  <div style="display:flex;flex-direction:column;gap:var(--s-7);margin-top:var(--s-7)">
+    <%% @components.each do |name| %>
+      <section>
+        <p style="font-size:var(--t-cap);letter-spacing:.04em;color:var(--muted);font-family:var(--mono)">ui_<%%= name %></p>
+        <h2 style="font-size:var(--t-h2);margin:var(--s-2) 0 var(--s-4)"><%%= name.humanize %></h2>
+        <div style="padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)"><%%= render "ui/previews/#{name}" %></div>
+      </section>
+    <%% end %>
+  </div>
+</main>

data/lib/generators/seams/design/templates/app/views/layouts/application.html.erb.tt

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  <head>
+    <title><%%= content_for(:title) || "<%= app_name %>" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+    <%%= yield :head %>
+    <%%# The "tailwind" build is the compiled entrypoint that carries the
+        seams:design @theme tokens + the ui_* component layer. It must be
+        linked, or the host boots unstyled. The "application" manifest is
+        kept so hosts can add their own non-Tailwind styles. %>
+    <%%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%%= javascript_importmap_tags if respond_to?(:javascript_importmap_tags) %>
+  </head>
+
+  <body style="font-family:var(--sans);color:var(--ink);background:var(--paper);min-height:100vh">
+    <a href="#main" class="skip sr-only">Skip to content</a>
+
+    <%%# seams design — icon sprite for ui_* components %>
+    <%%= render "ui/icon_sprite" %>
+
+    <header class="app-header" role="banner">
+      <nav class="app-nav" aria-label="Primary">
+        <a href="/" class="app-brand">
+          <span class="mark" aria-hidden="true"></span>
+          <%= app_name %>
+        </a>
+        <span class="spacer"></span>
+        <%%# A starter account menu, rendered from the ui_menu component. A host
+            with auth swaps this for its real sign-in / account links. %>
+        <%%= ui_button(variant: :ghost, size: :sm) { "Account" } %>
+      </nav>
+    </header>
+
+    <%%# Flash messages, rendered through the banner component's tone variants. %>
+    <%% if flash[:notice].present? %>
+      <div class="shell" style="margin-top:var(--s-4)">
+        <%%= ui_banner(message: flash[:notice], kind: :info, role: "status") %>
+      </div>
+    <%% end %>
+    <%% if flash[:alert].present? %>
+      <div class="shell" style="margin-top:var(--s-4)">
+        <%%= ui_banner(message: flash[:alert], kind: :alert, role: "alert") %>
+      </div>
+    <%% end %>
+
+    <main id="main" class="shell" style="padding-top:var(--s-7);padding-bottom:var(--s-7)">
+      <%%= yield %>
+    </main>
+
+    <footer class="app-foot" role="contentinfo">
+      <div class="shell row-wrap">
+        <span><%= app_name %></span>
+        <span class="spacer"></span>
+        <span class="small muted">Built with the seams design system</span>
+      </div>
+    </footer>
+  </body>
+</html>

data/lib/generators/seams/design/templates/app/views/layouts/design/guide.html.erb.tt

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%%= content_for(:title) || "Design — component guide" %></title>
+  <%%= csrf_meta_tags %>
+  <%%= csp_meta_tag %>
+  <%%# The "tailwind" build is the compiled entrypoint carrying the @theme
+      tokens + ui_* component layer; link it or the guide renders unstyled.
+      The "application" manifest is kept for the host's own styles. %>
+  <%%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" if defined?(stylesheet_link_tag) %>
+  <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" if defined?(stylesheet_link_tag) %>
+</head>
+<body>
+  <%%# The design-system icon sprite, so ui_icon and any sprite-referencing
+      component resolves on the guide page without the host layout. %>
+  <%%= render "ui/icon_sprite" %>
+  <%%= yield %>
+</body>
+</html>

data/lib/generators/seams/design/templates/app/views/ui/_banner.html.erb.tt

@@ -0,0 +1,10 @@
+<%%# locals: (message:, kind: :info, content: nil, **attrs) -%>
+<%% icon = kind.to_sym == :alert ? :warning : :info -%>
+<%%= tag.div class: class_names("banner", "banner-#{kind}"), role: "status", **attrs do %>
+  <%%= ui_icon(icon) %>
+  <%%= tag.span message %>
+  <%% if content -%>
+    <%%= tag.span class: "spacer" %>
+    <%%= content %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_breadcrumb.html.erb.tt

@@ -0,0 +1,8 @@
+<%%# locals: (trail:, current:, **attrs) -%>
+<%%= tag.nav class: "crumbs", "aria-label": "Breadcrumb", **attrs do %>
+  <%% trail.each do |label, href| -%>
+    <%%= tag.a label, href: href %>
+    <%%= tag.span "/", class: "sep", "aria-hidden": "true" %>
+  <%% end -%>
+  <%%= tag.b current, "aria-current": "page" %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_build_row.html.erb.tt

@@ -0,0 +1,14 @@
+<%%# locals: (format:, state: :queued, percent: 0, **attrs) -%>
+<%% width = [[percent.to_i, 0].max, 100].min -%>
+<%% status, label = { ready: [:ready, "Ready"], running: [:progress, "Building…"], queued: [:neutral, "Queued"] }.fetch(state, [:neutral, "Queued"]) -%>
+<%%= tag.div class: "buildrow", **attrs do %>
+  <%%= tag.span format, class: "fmt" %>
+  <%%= tag.span class: "meter" do %>
+    <%%= tag.div class: "meter-track", role: "progressbar",
+          "aria-valuenow": width, "aria-valuemin": 0, "aria-valuemax": 100,
+          "aria-label": "#{format} build progress" do %>
+      <%%= tag.div class: class_names("meter-fill", state == :ready ? "at" : nil), style: "width:#{width}%" %>
+    <%% end %>
+  <%% end %>
+  <%%= ui_tag(label: label, status: status) %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_button.html.erb.tt

@@ -0,0 +1,4 @@
+<%%# locals: (variant: :default, size: nil, type: "button", content: nil, **attrs) -%>
+<%%= tag.button type: type,
+      class: class_names("btn", "btn-#{variant}" => variant.to_s != "default", "btn-#{size}" => size.present?),
+      **attrs do %><%%= content %><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_card.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (content: nil, **attrs) -%>
+<%%= tag.div class: "card", **attrs do %><%%= content %><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_chapter_row.html.erb.tt

@@ -0,0 +1,11 @@
+<%%# locals: (index:, title:, status: :neutral, status_label: "Draft", **attrs) -%>
+<%%= tag.li class: "chapter-row", **attrs do %>
+  <%%= tag.span "⠿", class: "drag", "aria-hidden": "true" %>
+  <%%= tag.span format("%02d", index), class: "idx" %>
+  <%%= tag.span title, class: "title" %>
+  <%%= ui_tag(label: status_label, status: status) %>
+  <%%= tag.span class: "moves" do %>
+    <%%= tag.button "▲", type: "button", "aria-label": "Move up" %>
+    <%%= tag.button "▼", type: "button", "aria-label": "Move down" %>
+  <%% end %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_checkbox.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: (label:, name:, value: "1", checked: false, hint: nil, **attrs) -%>
+<%% box_id = "c-#{name.to_s.parameterize}-#{value.to_s.parameterize}" -%>
+<%%= tag.label class: "choice", for: box_id, **attrs do %>
+  <%%= tag.input type: "checkbox", name: name, id: box_id, value: value, checked: checked,
+        "aria-describedby": (hint ? "#{box_id}-hint" : nil) %>
+  <span>
+    <%%= tag.span label, class: "ct" %>
+    <%% if hint -%>
+      <%%= tag.span hint, class: "cd", id: "#{box_id}-hint" %>
+    <%% end -%>
+  </span>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_counter.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (current:, max:, **attrs) -%>
+<%%= tag.span class: class_names("counter", "warn" => current >= max * 0.9 && current < max, "over" => current > max), **attrs do %><%%= current %> / <%%= max %><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_data_table.html.erb.tt

@@ -0,0 +1,25 @@
+<%%# locals: (columns:, rows:, **attrs) -%>
+<%%= tag.div class: "table-wrap", **attrs do %>
+  <%%= tag.table class: "table" do %>
+    <thead>
+      <tr>
+        <%% columns.each do |col| -%>
+          <%%= tag.th scope: "col",
+                class: class_names("sortable" => col[:sortable], "num" => col[:num]),
+                "aria-sort": col[:sort] do %>
+            <%%= col[:label] %><%% if col[:sortable] %><%%= tag.span "↕", class: "ar", "aria-hidden": "true" %><%% end %>
+          <%% end %>
+        <%% end -%>
+      </tr>
+    </thead>
+    <tbody>
+      <%% rows.each do |row| -%>
+        <tr>
+          <%% row.each_with_index do |cell, i| -%>
+            <%%= tag.td cell, class: class_names("num" => columns[i] && columns[i][:num]) %>
+          <%% end -%>
+        </tr>
+      <%% end -%>
+    </tbody>
+  <%% end %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_dialog.html.erb.tt

@@ -0,0 +1,14 @@
+<%%# locals: (id:, title:, trigger:, destructive: false, content: nil, **attrs) -%>
+<%%= tag.div data: { controller: "ui-dialog" }, **attrs do %>
+  <%%= ui_button(variant: (destructive ? :danger : :default), data: { action: "ui-dialog#open" }) { trigger } %>
+  <%%= tag.dialog id: id, class: "cdialog", "aria-labelledby": "#{id}-title",
+        data: { "ui-dialog-target": "dialog" } do %>
+    <div class="dialog">
+      <div class="dialog-head">
+        <%%= tag.h2 title, id: "#{id}-title" %>
+        <button type="button" class="x" aria-label="Close" data-action="ui-dialog#close"><%%= ui_icon(:close) %></button>
+      </div>
+      <div class="dialog-body"><%%= content %></div>
+    </div>
+  <%% end %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_diff.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: (file:, lines:, **attrs) -%>
+<%%= tag.div class: "diff", **attrs do %>
+  <%%= tag.p file, class: "diff-file" %>
+  <%% lines.each do |kind, text| -%>
+    <%% sign = kind == :add ? "+" : kind == :del ? "−" : " " -%>
+    <%% sign_label = kind == :add ? "added" : kind == :del ? "removed" : nil -%>
+    <%%= tag.div class: class_names("diff-row", "diff-#{kind}") do %>
+      <%%= tag.span sign, class: "diff-sign", "aria-label": sign_label %>
+      <%%= tag.span text, class: "diff-text" %>
+    <%% end %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_drawer.html.erb.tt

@@ -0,0 +1,7 @@
+<%%# locals: (title:, content: nil, **attrs) -%>
+<%%= tag.aside class: "drawer", "aria-label": title, **attrs do %>
+  <div class="drawer-head">
+    <%%= tag.h2 title %>
+  </div>
+  <div class="drawer-body"><%%= content %></div>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_empty.html.erb.tt

@@ -0,0 +1,5 @@
+<%%# locals: (title:, content: nil, **attrs) -%>
+<%%= tag.div class: "empty", **attrs do %>
+  <%%= tag.h3 title, class: "h3" %>
+  <%%= content %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_field.html.erb.tt

@@ -0,0 +1,14 @@
+<%%# locals: (label:, name:, type: "text", hint: nil, error: nil, value: nil, id: nil, **attrs) -%>
+<%% field_id = id || "f-#{name.to_s.parameterize}" -%>
+<%% described_by = error ? "#{field_id}-error" : (hint ? "#{field_id}-hint" : nil) -%>
+<div class="field<%%= " field-error" if error %>">
+  <%%= tag.label label, class: "label", for: field_id %>
+  <%%= tag.input class: "input", type: type, name: name, id: field_id, value: value,
+        "aria-invalid": (error ? "true" : nil), "aria-describedby": described_by, **attrs %>
+  <%% if hint && !error -%>
+    <%%= tag.p hint, class: "hint", id: "#{field_id}-hint" %>
+  <%% end -%>
+  <%% if error -%>
+    <%%= tag.p error, class: "hint", id: "#{field_id}-error" %>
+  <%% end -%>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/_icon.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (name:, size: nil) -%>
+<%%= tag.svg class: class_names("ic", "ic-#{size}" => size.present?), "aria-hidden": "true" do %><use href="#ui-icon-<%%= name %>"></use><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_icon_sprite.html.erb.tt

@@ -0,0 +1,22 @@
+<%%# locals: () -%>
+<%%# The design-system icon sprite, injected once per page. Components reference
+    symbols by fragment (<use href="#ui-icon-NAME">) so they work without an
+    external request. Render this once near the top of <body>. -%>
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+  <symbol id="ui-icon-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><line x1="20" y1="20" x2="15.5" y2="15.5"/></symbol>
+  <symbol id="ui-icon-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></symbol>
+  <symbol id="ui-icon-bell" viewBox="0 0 24 24"><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 0 0 4 0"/></symbol>
+  <symbol id="ui-icon-plus" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol>
+  <symbol id="ui-icon-trash" viewBox="0 0 24 24"><polyline points="4 7 20 7"/><path d="M6 7l1 13h10l1-13"/><path d="M9 7V4h6v3"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></symbol>
+  <symbol id="ui-icon-chevron-up" viewBox="0 0 24 24"><polyline points="6 15 12 9 18 15"/></symbol>
+  <symbol id="ui-icon-chevron-down" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></symbol>
+  <symbol id="ui-icon-chevron-right" viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></symbol>
+  <symbol id="ui-icon-check" viewBox="0 0 24 24"><polyline points="5 12 10 17 19 7"/></symbol>
+  <symbol id="ui-icon-close" viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></symbol>
+  <symbol id="ui-icon-warning" viewBox="0 0 24 24"><path d="M12 3l9 16H3z"/><line x1="12" y1="9" x2="12" y2="14"/><circle cx="12" cy="16.8" r="0.6" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ui-icon-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="8" r="0.7" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ui-icon-upload" viewBox="0 0 24 24"><path d="M7 18a4 4 0 0 1-.8-7.9A5 5 0 0 1 16 9a3.5 3.5 0 0 1 1 6.9"/><polyline points="9 13.5 12 10.5 15 13.5"/><line x1="12" y1="10.5" x2="12" y2="19"/></symbol>
+  <symbol id="ui-icon-download" viewBox="0 0 24 24"><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/><polyline points="8 11 12 15 16 11"/><line x1="12" y1="4" x2="12" y2="15"/></symbol>
+  <symbol id="ui-icon-edit" viewBox="0 0 24 24"><path d="M4 20l4-1L19 8l-3-3L5 16z"/><line x1="14.5" y1="6.5" x2="17.5" y2="9.5"/></symbol>
+  <symbol id="ui-icon-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol>
+</svg>

data/lib/generators/seams/design/templates/app/views/ui/_input_group.html.erb.tt

@@ -0,0 +1,11 @@
+<%%# locals: (name:, value: nil, prefix: nil, suffix: nil, placeholder: nil, **attrs) -%>
+<%% input_id = "ig-#{name.to_s.parameterize}" -%>
+<div class="input-group">
+  <%% if prefix -%>
+    <%%= tag.span prefix, class: "affix" %>
+  <%% end -%>
+  <%%= tag.input class: "input", type: "text", name: name, id: input_id, value: value, placeholder: placeholder, **attrs %>
+  <%% if suffix -%>
+    <%%= tag.span suffix, class: "affix suffix" %>
+  <%% end -%>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/_kbd.html.erb.tt

@@ -0,0 +1,4 @@
+<%%# locals: (keys:, **attrs) -%>
+<%%= tag.span **attrs do -%>
+<%%= safe_join(keys.map { |key| tag.span(key, class: "kbd") }, " ") %>
+<%% end -%>

data/lib/generators/seams/design/templates/app/views/ui/_menu.html.erb.tt

@@ -0,0 +1,18 @@
+<%%# locals: (items:, label: nil, **attrs) -%>
+<%%= tag.div class: "menu", role: "menu", **attrs do %>
+  <%% if label.present? -%>
+    <%%= tag.p label, class: "menu-label" %>
+  <%% end -%>
+  <%% items.each do |item| -%>
+    <%% if item[:separator_before] -%>
+      <%%= tag.div "", class: "menu-sep" %>
+    <%% end -%>
+    <%% if item[:href].present? -%>
+      <%%= tag.a item[:label], href: item[:href], role: "menuitem",
+            class: class_names("danger" => item[:danger]) %>
+    <%% else -%>
+      <%%= tag.button item[:label], type: "button", role: "menuitem",
+            class: class_names("danger" => item[:danger]) %>
+    <%% end -%>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_meter.html.erb.tt

@@ -0,0 +1,15 @@
+<%%# locals: (value:, max:, state: nil, label: nil, **attrs) -%>
+<%% pct = [(value.to_f / max * 100).round, 100].min -%>
+<%%= tag.div class: "meter", **attrs do %>
+  <%% if label -%>
+    <div class="meter-label">
+      <%%= tag.span label %>
+      <%%= tag.span "#{value} / #{max}", class: "tnum" %>
+    </div>
+  <%% end -%>
+  <%%= tag.div class: "meter-track", role: "progressbar",
+        "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max,
+        "aria-label": label do %>
+    <%%= tag.div class: class_names("meter-fill", state), style: "width: #{pct}%" %>
+  <%% end %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_note.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (content: nil, **attrs) -%>
+<%%= tag.div class: "note", **attrs do %><%%= content %><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_outline.html.erb.tt

@@ -0,0 +1,9 @@
+<%%# locals: (items:, **attrs) -%>
+<%%= tag.nav class: "outline", "aria-label": "Outline", **attrs do %>
+  <%% items.each do |item| -%>
+    <%% level = item.fetch(:level, 1) -%>
+    <%%= tag.a item[:label], href: item.fetch(:href, "#"),
+          class: class_names("l#{level}" => level > 1),
+          "aria-current": (item[:current] ? "true" : nil) %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_pagination.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: (current:, total:, **attrs) -%>
+<%%= tag.nav class: "pagination", "aria-label": "Pagination", **attrs do %>
+  <%%= tag.button "‹", type: "button", "aria-label": "Previous page",
+        disabled: (current <= 1) %>
+  <%% (1..total).each do |page| -%>
+    <%%= tag.button page, type: "button",
+          "aria-current": (page == current ? "page" : nil),
+          "aria-label": "Page #{page}" %>
+  <%% end -%>
+  <%%= tag.button "›", type: "button", "aria-label": "Next page",
+        disabled: (current >= total) %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_panel.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (content: nil, **attrs) -%>
+<%%= tag.div class: "panel", **attrs do %><%%= content %><%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_popover.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (content: nil, **attrs) -%>
+<%%= tag.div content, class: "popover", role: "note", **attrs %>

data/lib/generators/seams/design/templates/app/views/ui/_radio.html.erb.tt

@@ -0,0 +1,5 @@
+<%%# locals: (label:, name:, value:, checked: false, **attrs) -%>
+<%%= tag.label class: "choice", **attrs do %>
+  <%%= tag.input type: "radio", name: name, value: value, checked: checked %>
+  <%%= tag.span label, class: "ct" %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_savestate.html.erb.tt

@@ -0,0 +1,5 @@
+<%%# locals: (state: :saved, text: nil, **attrs) -%>
+<%% default = { "saved" => "All changes saved", "saving" => "Saving…", "unsaved" => "Unsaved" }[state.to_s] -%>
+<%%= tag.span (text || default),
+      class: class_names("savestate", "saving" => state.to_s == "saving", "unsaved" => state.to_s == "unsaved"),
+      role: "status", **attrs %>

data/lib/generators/seams/design/templates/app/views/ui/_segmented.html.erb.tt

@@ -0,0 +1,7 @@
+<%%# locals: (name:, options:, selected: nil, label: nil, **attrs) -%>
+<%%= tag.div class: "seg", role: "group", "aria-label": label, **attrs do %>
+  <%% options.each do |value, option_label| -%>
+    <%%= tag.button option_label, type: "button", name: name, value: value,
+          "aria-pressed": (value.to_s == selected.to_s).to_s %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_stepper.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: (steps:, current: 1, **attrs) -%>
+<%%= tag.ol class: "stepper", **attrs do %>
+  <%% steps.each_with_index do |label, idx| -%>
+    <%% i = idx + 1 -%>
+    <%% done = i < current -%>
+    <%%= tag.li class: class_names("done" => done, "current" => i == current),
+          "aria-current": (i == current ? "step" : nil) do %>
+      <%%= tag.span class: "dot" do %><%% if done %><%%= ui_icon(:check, size: :sm) %><span class="sr-only">Completed</span><%% else %><%%= i %><%% end %><%% end %>
+      <%%= label %>
+    <%% end %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_switch.html.erb.tt

@@ -0,0 +1,6 @@
+<%%# locals: (label:, name:, checked: false, **attrs) -%>
+<%%= tag.label class: "switch", **attrs do %>
+  <%%= tag.input type: "checkbox", name: name, checked: checked, role: "switch" %>
+  <%%= tag.span class: "track" %>
+  <%%= tag.span label %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_tag.html.erb.tt

@@ -0,0 +1,2 @@
+<%%# locals: (label:, status: :neutral, dot: true, **attrs) -%>
+<%%= tag.span label, class: class_names("tag", "tag-#{status}", "tag-plain" => !dot), **attrs %>

data/lib/generators/seams/design/templates/app/views/ui/_toast.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: (message:, kind: :info, title: nil, **attrs) -%>
+<%% icon = { ok: :check, alert: :warning, info: :info }.fetch(kind, :info) -%>
+<%%= tag.div class: class_names("toast", "toast-#{kind}"), role: (kind == :alert ? "alert" : "status"), **attrs do %>
+  <%%= ui_icon(icon) %>
+  <div class="body">
+    <%% if title.present? -%>
+      <%%= tag.div title, class: "t" %>
+    <%% end -%>
+    <%%= tag.div message %>
+  </div>
+  <%%= tag.button class: "x", type: "button", "aria-label": "Dismiss" do %><%%= ui_icon(:close) %><%% end %>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/_toolbar.html.erb.tt

@@ -0,0 +1,15 @@
+<%%# locals: (items:, label: "Formatting", **attrs) -%>
+<%%= tag.div class: "toolbar", role: "toolbar", "aria-label": label, **attrs do %>
+  <%% items.each do |item| -%>
+    <%% if item[:sep_before] -%>
+      <%%= tag.span class: "tool-sep", "aria-hidden": "true" %>
+    <%% end -%>
+    <%%= tag.button type: "button", class: "tool", "aria-label": item[:label] do %>
+      <%% if item[:icon] -%>
+        <%%= ui_icon(item[:icon]) %>
+      <%% else -%>
+        <%%= item[:label] %>
+      <%% end -%>
+    <%% end %>
+  <%% end -%>
+<%% end %>

data/lib/generators/seams/design/templates/app/views/ui/previews/_banner.html.erb.tt

@@ -0,0 +1,8 @@
+<%%# locals: () -%>
+<div class="stack">
+  <%%= ui_banner(message: "A new version is available", kind: :info) %>
+  <%%= ui_banner(message: "Something went wrong — please try again", kind: :alert) %>
+  <%%= ui_banner(message: "Scheduled maintenance Sunday 02:00 UTC", kind: :info) do %>
+    <%%= ui_button(variant: :primary, size: :sm) { "Learn more" } %>
+  <%% end %>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/previews/_breadcrumb.html.erb.tt

@@ -0,0 +1,5 @@
+<%%# locals: () -%>
+<%%= ui_breadcrumb(
+      trail: [["Home", "/"], ["Settings", "/settings"]],
+      current: "Profile"
+    ) %>

data/lib/generators/seams/design/templates/app/views/ui/previews/_build_row.html.erb.tt

@@ -0,0 +1,6 @@
+<%%# locals: () -%>
+<div class="buildlist">
+  <%%= ui_build_row(format: "HTML", state: :ready, percent: 100) %>
+  <%%= ui_build_row(format: "PDF", state: :running, percent: 72) %>
+  <%%= ui_build_row(format: "ZIP", state: :queued, percent: 0) %>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/previews/_button.html.erb.tt

@@ -0,0 +1,9 @@
+<%%# locals: () -%>
+<div class="row-wrap">
+  <%%= ui_button(variant: :primary) { "Primary" } %>
+  <%%= ui_button { "Default" } %>
+  <%%= ui_button(variant: :ghost) { "Ghost" } %>
+  <%%= ui_button(variant: :danger) { "Danger" } %>
+  <%%= ui_button(variant: :primary, size: :sm) { "Small" } %>
+  <%%= ui_button(disabled: true) { "Disabled" } %>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/previews/_card.html.erb.tt

@@ -0,0 +1,12 @@
+<%%# locals: () -%>
+<div class="stack">
+  <%%= ui_card do %>
+    <h3 class="h3">Project settings</h3>
+    <p class="small muted">Control how this project is configured.</p>
+  <%% end %>
+
+  <%%= ui_card(id: "card-export", data: { panel: "export" }) do %>
+    <h3 class="h3">Output formats</h3>
+    <p class="small muted">Files are generated on every change.</p>
+  <%% end %>
+</div>

data/lib/generators/seams/design/templates/app/views/ui/previews/_chapter_row.html.erb.tt

@@ -0,0 +1,6 @@
+<%%# locals: () -%>
+<ul class="chapter-list">
+  <%%= ui_chapter_row(index: 1, title: "Getting started", status: :ready, status_label: "Saved") %>
+  <%%= ui_chapter_row(index: 2, title: "Core concepts", status: :progress, status_label: "Editing") %>
+  <%%= ui_chapter_row(index: 3, title: "Advanced usage", status: :neutral, status_label: "Draft") %>
+</ul>

data/lib/generators/seams/design/templates/app/views/ui/previews/_checkbox.html.erb.tt

@@ -0,0 +1,6 @@
+<%%# locals: () -%>
+<div class="stack">
+  <%%= ui_checkbox(label: "Email", name: "channels[]", value: "email", checked: true) %>
+  <%%= ui_checkbox(label: "SMS", name: "channels[]", value: "sms", checked: true) %>
+  <%%= ui_checkbox(label: "Webhook", name: "channels[]", value: "webhook", hint: "POSTs a JSON payload") %>
+</div>