RubyGems - seams - Versions diffs - 0.1.0 → 0.2.0 - Mend

seams 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

data/lib/generators/seams/design/templates/README.md.tt ADDED Viewed

@@ -0,0 +1,129 @@
+# Design
+The seams design system, as a callable component library — a faithful
+extraction of quire-saas's proven "Compositor". Strict-locals ERB partials,
+auto-wired `ui_*` helpers, a `Design::FormBuilder`, and a Tailwind v4 `@theme`
+token layer. Generated by `bin/seams design`.
+## What it is
+A component is a strict-locals ERB partial under `app/views/ui/` with a
+companion preview under `app/views/ui/previews/`. The preview is what makes a
+component "public": it gives the auto-wired `ui_<name>` helper and the living
+guide their list.
+```erb
+<%%= ui_button(variant: :primary) { "Save" } %>
+<%%= ui_tag(label: "Built", status: :ready) %>
+<%%= form_with model: @record do |f| %>
+  <%%= f.ui_text_field :title, label: "Title", hint: "Shown on the cover" %>
+<%% end %>
+```
+## Living gallery (dev/test only)
+`/design/guide` renders every component from its real preview, so the docs
+cannot drift from the code. Add a component (a partial + a preview under
+`app/views/ui/`) and it appears in the gallery — with its `ui_<name>` helper —
+automatically. The route is dev/test-only: it is drawn inside an
+`if Rails.env.local?` guard in the host routes, and the controller 404s outside
+`Rails.env.local?`.
+## Non-isolated by design
+Unlike every other canonical seams engine, the design engine is **not**
+`isolate_namespace`d. Its partials live in the host's view paths and its
+`Design::UiHelper` is mixed into `ActionController::Base`, so a component renders
+anywhere — in the host's views and in every other engine's views — without
+ceremony. Ruby constants live under `Design::`; the view + helper surface is
+`ui`.
+## Tailwind v4 is a hard dependency
+The token layer is Tailwind-native `@theme`. The generator injects
+`tailwindcss-rails` and writes the neutral default tokens into the host's
+`app/assets/tailwind/application.css`. **Retheme by overriding those tokens.**
+Nothing else changes.
+```css
+@theme {
+  --color-paper: …; --color-ink: …; --color-accent: …;
+  --font-display: …; --font-sans: …;
+}
+```
+## Host wiring (done by the generator)
+- `tailwindcss-rails` injected into the host Gemfile.
+- The neutral `@theme` token block written into the host
+  `app/assets/tailwind/application.css`.
+- `Design::FormBuilder` set as the host's `default_form_builder`, so every
+  `form_with` / `form_for` gets the `f.ui_*` field methods (the standard
+  `f.text_field` / `f.select` / `f.submit` are untouched).
+- The icon sprite (`<%%= render "ui/icon_sprite" %>`) rendered once near the top
+  of `<body>` in the host layout.
+- The dev/test-only living-gallery route (`/design/guide`) drawn into the host
+  routes, inside an `if Rails.env.local?` guard.
+## Generate
+```
+bin/seams design            # the component system (tokens, ui_* components, gallery, FormBuilder)
+bin/seams design --shell    # the above PLUS an app layout + starter dashboard + route
+```
+`--shell` is opt-in. Without it, no host layout or dashboard is generated — the
+host keeps its own. With it, the generator writes a default
+`app/views/layouts/application.html.erb` (header, nav, flash banners, footer —
+all built from `ui_*` components) and a starter signed-in dashboard
+(`Design::DashboardController`) wired to `root` + `/dashboard`, so the host boots
+looking like a product.
+## Extend — add a component
+```
+rails g design:component badge
+```
+This writes `app/views/ui/_badge.html.erb` (a strict-locals partial) and
+`app/views/ui/previews/_badge.html.erb`. The preview is what makes it public:
+`ui_badge` becomes callable and the component appears in `/design/guide`
+automatically — no registration.
+## Override — eject a component
+Take ownership of a shipped component (to change its markup or copy) without
+forking the engine:
+```
+bin/seams resolve --eject design/app/views/ui/_button.html.erb
+```
+This stamps the host file with an eject header. The generator then skips it on
+every future `bin/seams design`, so your version survives regenerates. The same
+works for the `--shell` layout and dashboard.
+## Retheme — override the tokens
+The `@theme` block in `app/assets/tailwind/application.css` is the single source
+every component reads (via the short `:root` aliases). Override those tokens and
+the whole app reskins — no component, markup, or helper changes.
+The generator ships a worked example, the **quire** theme (warm paper / garnet /
+Spectral), at `app/assets/tailwind/themes/_quire.css`. Apply it with one line in
+`application.css`, after the `seams:design tokens` block:
+```css
+@import "themes/quire";
+```
+Delete the line to return to the neutral default. See
+`doc/design-system/DESIGN_SYSTEM_THEMING.md` for the full token surface and how to author your
+own theme.
+## Run the engine specs
+```
+bin/rails seams:test[design]
+```

data/lib/generators/seams/design/templates/app/assets/tailwind/_tokens.css ADDED Viewed

@@ -0,0 +1,322 @@
+/* ---------------------------------------------------------------------------
+   seams:design tokens — the neutral default design tokens, owned by Tailwind @theme.
+   This is the SINGLE SOURCE every ui_* component reads. Retheme the whole system
+   by overriding these values; nothing else changes. (seams design)
+   One strong, neutral default: refined paper/ink surfaces, a single restrained
+   indigo accent, and a clean type pairing. Every text token below is WCAG-AA on
+   the surfaces it sits on (faint is decorative-only / AA-large).
+   Type: Inter is named first but is NOT self-hosted — it degrades gracefully to
+   the system sans stack, so the default boots with zero web-font requests. Host
+   Inter (or any pairing) by adding it to the bundle and it takes over; the token
+   stays the single switch. --------------------------------------------------- */
+@theme {
+  --color-paper:#ffffff; --color-paper-raised:#f5f6f8; --color-card:#ffffff;
+  --color-ink:#15171c; --color-ink-2:#3a3f48; --color-muted:#5c636f; --color-faint:#767d8a;
+  --color-line:#e6e8ec; --color-line-2:#d2d6dd;
+  --color-accent:#2456c7; --color-accent-deep:#1b3f96;
+  --color-ready:#0f6b41; --color-ready-bg:#e7f3ec; --color-ready-line:#a7d3bd;
+  --color-progress:#8a5208; --color-progress-bg:#fbf1e0; --color-progress-line:#eccf97;
+  --color-alert:#b81d31; --color-alert-bg:#fbecee; --color-alert-line:#f1b6bd;
+  --font-display:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
+}
+/* Short token aliases the component layer references (value lives once, in @theme).
+   Components read `var(--ink)`, `var(--accent)`, `var(--s-4)` …; theming the
+   system means overriding the @theme block above, never these aliases. */
+:root{
+  --paper:var(--color-paper); --paper-raised:var(--color-paper-raised); --card:var(--color-card);
+  --ink:var(--color-ink); --ink-2:var(--color-ink-2); --muted:var(--color-muted); --faint:var(--color-faint);
+  --line:var(--color-line); --line-2:var(--color-line-2);
+  --accent:var(--color-accent); --accent-deep:var(--color-accent-deep);
+  --ready:var(--color-ready); --ready-bg:var(--color-ready-bg); --ready-line:var(--color-ready-line);
+  --progress:var(--color-progress); --progress-bg:var(--color-progress-bg); --progress-line:var(--color-progress-line);
+  --alert:var(--color-alert); --alert-bg:var(--color-alert-bg); --alert-line:var(--color-alert-line);
+  --focus:var(--color-accent);
+  --display:var(--font-display); --sans:var(--font-sans); --mono:var(--font-mono);
+  --t-display-xl:44px; --t-display:34px; --t-h1:27px; --t-h2:21px; --t-h3:17px; --t-body:16px; --t-sm:14px; --t-cap:12.5px;
+  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
+  --r-sm:5px; --r:9px; --r-lg:14px; --r-pill:999px;
+  --shadow-sm:0 1px 2px rgba(21,23,28,.05); --shadow:0 6px 20px -10px rgba(21,23,28,.18); --shadow-pop:0 28px 64px -24px rgba(21,23,28,.40);
+  --ease:cubic-bezier(.2,.6,.2,1); --fast:120ms; --med:190ms;
+  --measure:68ch; --shell-max:1180px;
+  --z-base:0; --z-raised:10; --z-sticky:40; --z-popover:70; --z-overlay:80; --z-toast:95;
+  --bp-sm:680px; --bp-md:860px; --bp-lg:1080px;
+}
+/* Base bits Tailwind preflight doesn't cover (preflight owns the rest). */
+@layer base{
+  ::selection{background:var(--ink);color:var(--paper)}
+  :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
+  .skip{position:absolute;left:-9999px;top:var(--s-2);z-index:80;background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-4);border-radius:var(--r);font-weight:600}
+  .skip:focus{left:var(--s-2)}
+}
+/* ---------------------------------------------------------------------------
+   The ui_* component layer — the visual half of the single source.
+   Every `ui_<name>` partial renders these classes (`.btn`, `.card`, `.field`,
+   `.tag` …). Like the tokens above, this layer is theme-agnostic: it reads ONLY
+   the short aliases (`var(--ink)`, `var(--accent)`, `var(--s-4)` …), so
+   overriding the @theme block at the top reskins every component — no rule below
+   names a literal colour or font. This is what makes "retheme = token override"
+   true (see the example theme + theming guide). It is a neutral extraction of
+   quire-saas's proven Compositor component CSS, with every brand-specific
+   colour and font replaced by a token alias. -------------------------------- */
+@layer components{
+/* Type roles */
+.display-xl{font-family:var(--display);font-size:var(--t-display-xl);line-height:1.06;letter-spacing:-.02em;font-weight:600}
+.display{font-family:var(--display);font-size:var(--t-display);line-height:1.12;letter-spacing:-.015em;font-weight:600}
+.h1{font-family:var(--display);font-size:var(--t-h1);line-height:1.2;font-weight:600}
+.h2{font-size:var(--t-h2);line-height:1.3;font-weight:600;letter-spacing:-.01em}
+.h3{font-size:var(--t-h3);line-height:1.4;font-weight:600}
+.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:var(--measure);font-weight:400}
+.prose{max-width:var(--measure)}
+.prose p+p{margin-top:var(--s-4)}
+.small{font-size:var(--t-sm)}
+.muted{color:var(--muted)}
+.mono{font-family:var(--mono)}
+.tnum{font-variant-numeric:tabular-nums}
+.eyebrow{font-family:var(--mono);font-size:var(--t-cap);letter-spacing:.14em;
+  text-transform:uppercase;color:var(--muted);display:inline-flex;gap:var(--s-2);align-items:center}
+.eyebrow::before{content:"";width:18px;height:1px;background:var(--line-2)}
+/* Layout primitives */
+.shell{max-width:var(--shell-max);margin:0 auto;padding:0 var(--s-5)}
+.stack>*+*{margin-top:var(--s-5)}
+.stack-lg>*+*{margin-top:var(--s-7)}
+.row{display:flex;gap:var(--s-3);align-items:center}
+.row-wrap{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
+.spacer{flex:1}
+.grid{display:grid;gap:var(--s-4)}
+.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
+.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
+.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
+.section{padding:var(--s-8) 0}
+.center{text-align:center}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
+@media(max-width:680px){.grid{grid-template-columns:1fr !important}}
+/* Keycaps */
+.kbd{font-family:var(--mono);font-size:11px;line-height:18px;min-width:18px;text-align:center;display:inline-block;
+  background:var(--paper-raised);border:1px solid var(--line-2);border-bottom-width:2px;
+  border-radius:var(--r-sm);padding:0 5px;color:var(--ink-2)}
+/* Buttons */
+.btn{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--sans);
+  font-size:var(--t-sm);font-weight:600;line-height:1;border:1px solid var(--line-2);
+  background:var(--card);color:var(--ink);border-radius:var(--r);padding:9px 14px;cursor:pointer;text-decoration:none;
+  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
+.btn:hover{border-color:var(--ink)}
+.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
+.btn-primary:hover{background:#000}
+.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
+.btn-accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
+.btn-ghost{border-color:transparent;background:transparent}
+.btn-ghost:hover{background:var(--paper-raised);border-color:transparent}
+.btn-danger{color:var(--alert);border-color:var(--alert-line)}
+.btn-danger:hover{background:var(--alert-bg);border-color:var(--alert)}
+.btn-sm{padding:6px 10px;font-size:var(--t-cap)}
+.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
+/* Surfaces: card / panel / note */
+.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5)}
+.panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5)}
+.note{background:var(--paper-raised);border-left:3px solid var(--accent);
+  padding:var(--s-3) var(--s-4);border-radius:0 var(--r) var(--r) 0;font-size:var(--t-sm);color:var(--ink-2)}
+/* Tags / status pills */
+.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-cap);font-weight:600;
+  border-radius:var(--r-pill);padding:2px 9px;border:1px solid transparent}
+.tag::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}
+.tag-ready{background:var(--ready-bg);color:var(--ready);border-color:var(--ready-line)}
+.tag-progress{background:var(--progress-bg);color:var(--progress);border-color:var(--progress-line)}
+.tag-alert{background:var(--alert-bg);color:var(--alert);border-color:var(--alert-line)}
+.tag-neutral{background:var(--paper-raised);color:var(--ink-2);border-color:var(--line-2)}
+.tag-plain::before{display:none}
+/* Forms */
+.field{display:block}
+.field>.label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:6px}
+.field>.hint{font-size:var(--t-cap);color:var(--muted);margin-top:6px}
+.input,.textarea,.select{width:100%;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);
+  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;line-height:1.4}
+.input::placeholder,.textarea::placeholder{color:var(--faint)}
+.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
+.textarea{min-height:96px;resize:vertical}
+.field-error .input,.field-error .textarea{border-color:var(--alert)}
+.field-error>.hint{color:var(--alert)}
+.choice{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer;font-size:var(--t-sm)}
+.choice input[type=checkbox],.choice input[type=radio]{appearance:auto;accent-color:var(--ink);
+  width:17px;height:17px;margin:1px 0 0;flex:none;cursor:pointer}
+.choice .ct{display:block}
+.choice .cd{display:block;color:var(--muted);font-size:var(--t-cap);margin-top:2px}
+.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-sm)}
+.switch input{position:absolute;opacity:0;width:0;height:0}
+.switch .track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-2);
+  position:relative;transition:background var(--fast) var(--ease);flex:none}
+.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-pill);
+  background:var(--card);box-shadow:var(--shadow-sm);transition:transform var(--fast) var(--ease)}
+.switch input:checked+.track{background:var(--ready)}
+.switch input:checked+.track::after{transform:translateX(16px)}
+.switch input:focus-visible+.track{outline:2px solid var(--focus);outline-offset:2px}
+.input-group{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--card)}
+.input-group:focus-within{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
+.input-group .affix{display:flex;align-items:center;padding:0 11px;background:var(--paper-raised);
+  color:var(--muted);font-size:var(--t-sm);border-right:1px solid var(--line)}
+.input-group .affix.suffix{border-right:0;border-left:1px solid var(--line)}
+.input-group .input{border:0;border-radius:0;outline:0}
+.counter{font-family:var(--mono);font-size:var(--t-cap);color:var(--muted)}
+.counter.warn{color:var(--progress)}
+.counter.over{color:var(--alert)}
+/* Tables */
+.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto}
+.table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
+.table th,.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
+.table th{font-size:var(--t-cap);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
+.table tr:hover td{background:var(--paper-raised)}
+.table .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
+.table th.sortable{cursor:pointer;user-select:none}
+.table th.sortable .ar{color:var(--faint);margin-left:4px;font-size:10px}
+.table th[aria-sort="ascending"] .ar,.table th[aria-sort="descending"] .ar{color:var(--ink)}
+/* Empty state */
+.empty{text-align:center;padding:var(--s-8) var(--s-5);border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--card)}
+.empty .h3{margin-bottom:6px}
+.empty p{color:var(--muted);max-width:46ch;margin:0 auto var(--s-4)}
+/* Icons */
+.ic{width:20px;height:20px;display:inline-block;vertical-align:-.18em;flex:none;
+  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
+.ic-sm{width:16px;height:16px}
+.ic-lg{width:24px;height:24px}
+/* Navigation: breadcrumb / pagination / menu / segmented / stepper / toolbar / outline */
+.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--muted);min-width:0;list-style:none;margin:0;padding:0}
+.crumbs a{color:var(--muted);text-decoration:none;white-space:nowrap}
+.crumbs a:hover{color:var(--ink)}
+.crumbs .sep{color:var(--faint)}
+.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}
+.pagination{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
+.pagination a,.pagination span{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);
+  border-radius:var(--r-sm);background:var(--card);font-size:var(--t-sm);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;text-decoration:none}
+.pagination a:hover{border-color:var(--ink)}
+.pagination [aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink);cursor:default}
+.menu{min-width:180px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
+  box-shadow:var(--shadow);padding:6px;list-style:none;margin:0}
+.menu .menu-label{font-size:var(--t-cap);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px}
+.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
+  padding:7px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font-size:var(--t-sm);cursor:pointer;text-decoration:none}
+.menu a:hover,.menu button:hover{background:var(--paper-raised);color:var(--ink)}
+.menu .menu-sep{height:1px;background:var(--line);margin:6px 0;border:0}
+.menu .danger{color:var(--alert)}
+.seg{display:inline-flex;background:var(--paper-raised);border:1px solid var(--line-2);border-radius:var(--r);padding:2px;gap:2px}
+.seg button{border:0;background:none;border-radius:6px;padding:5px 12px;font:600 var(--t-sm)/1 var(--sans);color:var(--ink-2);cursor:pointer}
+.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
+.stepper{display:flex;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap}
+.stepper li{display:flex;align-items:center;gap:8px;padding:0 16px 8px 0;color:var(--muted);font-size:var(--t-sm)}
+.stepper .dot{width:24px;height:24px;border-radius:var(--r-pill);border:1px solid var(--line-2);display:grid;
+  place-items:center;font-family:var(--mono);font-size:12px;background:var(--card);color:var(--muted)}
+.stepper li.done .dot{background:var(--ready);border-color:var(--ready);color:#fff}
+.stepper li.current .dot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
+.stepper li.current{color:var(--ink);font-weight:600}
+.toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
+.toolbar .tool{display:grid;place-items:center;width:30px;height:30px;border:1px solid transparent;
+  border-radius:var(--r-sm);background:none;cursor:pointer;color:var(--ink-2)}
+.toolbar .tool:hover{background:var(--paper-raised);border-color:var(--line)}
+.toolbar .tool-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
+.outline{font-size:var(--t-sm);border-left:1px solid var(--line);list-style:none;margin:0;padding:0}
+.outline a{display:block;padding:4px 0 4px 14px;color:var(--ink-2);text-decoration:none;
+  border-left:2px solid transparent;margin-left:-1px}
+.outline a:hover{color:var(--ink)}
+.outline a[aria-current="true"]{border-left-color:var(--accent);color:var(--ink);font-weight:600}
+.outline a.l2{padding-left:28px;color:var(--muted)}
+.outline a.l3{padding-left:42px;color:var(--muted)}
+/* Meter */
+.meter{display:block;min-width:0}
+.meter-label{display:flex;justify-content:space-between;font-size:var(--t-cap);color:var(--muted);margin-bottom:5px}
+.meter-track{height:8px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
+.meter-fill{height:100%;background:var(--ink);border-radius:var(--r-pill)}
+.meter-fill.under{background:var(--progress)}
+.meter-fill.at{background:var(--ready)}
+.meter-fill.over{background:var(--accent)}
+/* Savestate */
+.savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-cap);color:var(--muted)}
+.savestate::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--ready);flex:none}
+.savestate.saving{color:var(--progress)}.savestate.saving::before{background:var(--progress)}
+.savestate.unsaved{color:var(--ink-2)}.savestate.unsaved::before{background:var(--faint)}
+/* Diff */
+.diff{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-family:var(--mono);font-size:12.5px}
+.diff-file{background:var(--paper);border-bottom:1px solid var(--line);padding:8px 12px;font-family:var(--sans);font-size:var(--t-sm);font-weight:600}
+.diff-row{display:grid;grid-template-columns:34px 1fr;border-top:1px solid var(--line)}
+.diff-sign{text-align:center;color:var(--faint);background:var(--paper-raised);user-select:none}
+.diff-text{padding:2px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
+.diff-add{background:var(--ready-bg)}.diff-add .diff-sign{color:var(--ready)}
+.diff-del{background:var(--alert-bg)}.diff-del .diff-sign{color:var(--alert)}
+.diff-ctx .diff-text{color:var(--muted)}
+/* Build + chapter rows */
+.buildrow{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:var(--s-4);
+  padding:12px var(--s-4);border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
+.buildrow .fmt{font-family:var(--mono);font-size:var(--t-cap);font-weight:600;letter-spacing:.04em}
+.chapter-row{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:var(--s-3);
+  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);list-style:none}
+.chapter-row .drag{cursor:grab;color:var(--faint)}
+.chapter-row .idx{font-family:var(--mono);font-size:var(--t-cap);color:var(--faint)}
+.chapter-row .title{font-size:var(--t-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.chapter-row .moves{display:flex;gap:2px}
+.chapter-row .moves button{width:24px;height:24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);cursor:pointer;color:var(--ink-2)}
+/* Overlays: dialog / drawer / popover */
+.cdialog{padding:0;border:0;background:transparent;max-width:480px;width:calc(100% - 2rem)}
+.cdialog::backdrop{background:rgba(21,23,28,.34)}
+.dialog{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line-2);
+  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;max-height:80vh}
+.dialog-head{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-5) var(--s-5) var(--s-3)}
+.dialog-head h2{font-family:var(--display);font-size:19px}
+.dialog-head .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);padding:2px;border-radius:var(--r-sm)}
+.dialog-head .x:hover{color:var(--ink)}
+.dialog-body{padding:0 var(--s-5) var(--s-4);overflow:auto;color:var(--ink-2);font-size:var(--t-sm)}
+.drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;z-index:var(--z-overlay);
+  background:var(--card);border-left:1px solid var(--line-2);box-shadow:var(--shadow-pop);display:flex;flex-direction:column}
+.drawer-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
+.drawer-head h2{font-family:var(--display);font-size:18px}
+.drawer-body{padding:var(--s-5);overflow:auto;flex:1}
+.popover{position:relative;display:inline-block;background:var(--ink);color:var(--paper);
+  font-size:var(--t-cap);padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--shadow);max-width:240px}
+/* Feedback: toast + banner */
+.toast{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line-2);
+  border-left-width:3px;border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;font-size:var(--t-sm)}
+.toast .body{flex:1;min-width:0}
+.toast .t{font-weight:600}
+.toast-ok{border-left-color:var(--ready)}.toast-ok .ic{color:var(--ready)}
+.toast-alert{border-left-color:var(--alert)}.toast-alert .ic{color:var(--alert)}
+.toast-info{border-left-color:var(--ink)}.toast-info .ic{color:var(--ink)}
+.banner{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-5);
+  border:1px solid var(--line);border-radius:var(--r);font-size:var(--t-sm)}
+.banner .spacer{flex:1}
+.banner .ic{flex:none}
+.banner-info{background:var(--paper-raised);border-color:var(--line-2);color:var(--ink-2)}
+.banner-warn{background:var(--progress-bg);border-color:var(--progress-line);color:var(--progress)}
+.banner-alert{background:var(--alert-bg);border-color:var(--alert-line);color:var(--alert)}
+.banner-promo{background:var(--ink);border-color:var(--ink);color:var(--paper)}
+/* App shell chrome (the --shell layout) */
+.app-header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 86%,transparent);
+  backdrop-filter:saturate(1.1) blur(8px);position:sticky;top:0;z-index:var(--z-sticky)}
+.app-nav{max-width:var(--shell-max);margin:0 auto;display:flex;align-items:center;
+  gap:var(--s-4);padding:var(--s-3) var(--s-5)}
+.app-brand{display:flex;align-items:center;gap:var(--s-2);font-family:var(--display);
+  font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
+.app-brand .mark{width:13px;height:26px;flex:none;border-radius:2px;background:var(--accent)}
+.app-foot{border-top:1px solid var(--line);margin-top:var(--s-9);padding:var(--s-6) 0;color:var(--muted);font-size:var(--t-sm)}
+}

data/lib/generators/seams/design/templates/app/assets/tailwind/themes/_quire.css ADDED Viewed

@@ -0,0 +1,42 @@
+/* ---------------------------------------------------------------------------
+   Example theme: "quire" — warm paper / garnet / Spectral + IBM Plex.
+   The worked proof that retheming the whole seams design system is a TOKEN
+   OVERRIDE and nothing more. This file overrides ONLY the @theme tokens the
+   neutral default declared; it touches no component CSS, no markup, no helper.
+   Every ui_* component reskins because each reads the short aliases (var(--ink),
+   var(--accent) …), which resolve to these overridden @theme values.
+   To apply it, add ONE line to app/assets/tailwind/application.css, AFTER the
+   "seams:design tokens" block (so these win):
+       @import "themes/quire";
+   To go back to the neutral default, delete that line. That is the entire
+   retheme surface. See doc/design-system/DESIGN_SYSTEM_THEMING.md.
+   Lineage: this is quire-saas's original Compositor palette + type pairing, the
+   design system this engine was extracted from. --------------------------- */
+@theme {
+  --color-paper:#fbf8f3; --color-paper-raised:#f4efe7; --color-card:#ffffff;
+  --color-ink:#1a1714; --color-ink-2:#423b33; --color-muted:#72675b; --color-faint:#797166;
+  --color-line:#e7ded2; --color-line-2:#d8ccba;
+  /* The neutral default's accent -> quire's garnet. The component layer reads
+     var(--accent) (aliased from --color-accent), so this is the only colour
+     swap the accent needs. */
+  --color-accent:#7a1f1f; --color-accent-deep:#591616;
+  --color-ready:#047857; --color-ready-bg:#e6f4ec; --color-ready-line:#a7d8bd;
+  --color-progress:#aa4e08; --color-progress-bg:#fbf1e0; --color-progress-line:#eccf97;
+  --color-alert:#cb2323; --color-alert-bg:#fbeceb; --color-alert-line:#f1b6b3;
+  /* Display face -> Spectral (a serif); UI + data -> IBM Plex. Self-host the
+     faces or load them in the host layout; the token is the single switch. */
+  --color-focus:#1a1714;
+  --font-display:"Spectral",Georgia,"Times New Roman",serif;
+  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+/* quire pinned the focus ring to ink rather than the accent. The alias layer
+   reads --focus, so override that one alias to match. (Everything else inherits
+   from the @theme overrides above.) */
+:root{ --focus:var(--color-ink); }

data/lib/generators/seams/design/templates/app/controllers/design/dashboard_controller.rb.tt ADDED Viewed

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+# The starter signed-in dashboard shipped by `bin/seams design --shell`.
+#
+# It is intentionally a thin, host-owned starting point: it subclasses the
+# host's ApplicationController (so any auth / account / tenancy filters the host
+# adds later apply automatically), and renders an empty-state built from the
+# ui_* components that lists the canonical seams engines the host could add.
+#
+# Replace this with your real home page; it exists so a freshly generated host
+# boots to a styled, signed-in screen instead of bare markup. The route + root
+# the generator drew into the host point here.
+module Design
+  class DashboardController < ApplicationController
+    def index
+      # The canonical seams engines a host can generate next. Each entry is the
+      # `bin/seams <name>` verb plus a one-line summary, rendered as the
+      # dashboard's empty-state list. Static on purpose — a host replaces this
+      # controller with its real dashboard once it has data to show.
+      @suggested_engines = [
+        ["auth",          "Sign-in, sessions, password reset, OAuth"],
+        ["accounts",      "User accounts + the Current attributes"],
+        ["teams",         "Teams, memberships, invitations"],
+        ["billing",       "Plans, subscriptions, invoices"],
+        ["notifications", "In-app + email notifications"],
+        ["admin",         "A back-office for the above"]
+      ]
+    end
+  end
+end

data/lib/generators/seams/design/templates/app/controllers/design/guide_controller.rb.tt ADDED Viewed

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+module Design
+  # The living gallery: renders every component from its preview partial, so the
+  # documentation cannot drift from the implementation and a newly added
+  # component (a partial + a preview under app/views/ui/) appears here with no
+  # extra wiring.
+  #
+  # Dev/test only — `guide_available?` returns 404 outside Rails.env.local?, so
+  # the page never ships to production. It subclasses ActionController::Base
+  # (NOT the host's ApplicationController) so it carries no auth, account or
+  # tenancy filters: the guide is a pure render of the design system.
+  class GuideController < ActionController::Base
+    layout "design/guide"
+    before_action :guide_available?
+    def index
+      @components = Design.component_names
+    end
+    private
+    def guide_available?
+      head :not_found unless Rails.env.local?
+    end
+  end
+end

data/lib/generators/seams/design/templates/app/form_builders/design/form_builder.rb.tt ADDED Viewed

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+module Design
+  # The design-system form builder. Subclasses the standard Rails builder and
+  # only ADDS ui_* methods — f.text_field / f.select / f.submit are untouched —
+  # so it is safe to make the app-wide default (see
+  # config.action_view.default_form_builder), and you never pass `builder:` per
+  # form.
+  #
+  # Each method wires the form object's name, value and validation error into the
+  # ui/field markup, so the accessibility (label association, aria-invalid,
+  # aria-describedby) is baked in and cannot drift. Arbitrary HTML options —
+  # including data-* attributes for Stimulus — pass straight through to the
+  # control, so Hotwire keeps working untouched.
+  #
+  # Phase 1 ships the field helpers + the shared accessible wrapper; #19 ships
+  # the ui/field partial and the rest of the form-component set.
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # f.ui_text_field :title, label: "Book title", hint: "Shown on the cover"
+    # (+ _email_field / _url_field / _tel_field / _number_field / _password_field)
+    %i[text email url tel number password].each do |kind|
+      define_method(:"ui_#{kind}_field") do |method, label:, hint: nil, **opts|
+        @template.render("ui/field",
+                         label: label,
+                         name:  field_name(method),
+                         id:    field_id(method),
+                         type:  kind.to_s,
+                         value: object_value(method),
+                         hint:  error_for(method) ? nil : hint,
+                         error: error_for(method),
+                         **opts)
+      end
+    end
+    # f.ui_text_area :notes, label: "Notes", hint: "Optional"
+    def ui_text_area(method, label:, hint: nil, **opts)
+      ui_control(method, label:, hint:) do |ids|
+        @template.text_area(@object_name, method,
+                            class: "textarea", id: ids[:id],
+                            "aria-invalid": ids[:invalid], "aria-describedby": ids[:described],
+                            **opts)
+      end
+    end
+    # f.ui_select :marketplace, %w[UK US], label: "Primary marketplace"
+    def ui_select(method, choices = nil, options = {}, label:, hint: nil, **html)
+      ui_control(method, label:, hint:) do |ids|
+        @template.select(@object_name, method, choices, options,
+                         { class: "select", id: ids[:id],
+                           "aria-invalid": ids[:invalid], "aria-describedby": ids[:described] }.merge(html))
+      end
+    end
+    # f.ui_submit "Create" — primary by default; pass variant: for others.
+    def ui_submit(value = nil, variant: :primary, **opts)
+      classes = ["btn", ("btn-#{variant}" unless variant.to_s == "default"), opts.delete(:class)].compact.join(" ")
+      submit(value, class: classes, **opts)
+    end
+    private
+    # Shared, accessible .field wrapper for controls the field partial doesn't
+    # render itself (textarea, select). Keeps the label/error/aria wiring in one
+    # place.
+    def ui_control(method, label:, hint:)
+      error = error_for(method)
+      input_id = field_id(method)
+      described = error ? "#{input_id}-error" : (hint ? "#{input_id}-hint" : nil)
+      ids = { id: input_id, invalid: (error ? "true" : nil), described: described }
+      @template.content_tag(:div, class: ["field", ("field-error" if error)].compact.join(" ")) do
+        parts = [@template.label(@object_name, method, label, class: "label", for: input_id)]
+        parts << yield(ids)
+        parts << @template.content_tag(:p, hint, class: "hint", id: "#{input_id}-hint") if hint && !error
+        parts << @template.content_tag(:p, error, class: "hint", id: "#{input_id}-error") if error
+        @template.safe_join(parts)
+      end
+    end
+    def object_value(method)
+      object.respond_to?(method) ? object.public_send(method) : nil
+    end
+    def error_for(method)
+      return nil unless object.respond_to?(:errors)
+      object.errors[method].first
+    end
+  end
+end