stream_weaver 0.3.0

data/docs/templates.md

@@ -0,0 +1,213 @@
+# StreamWeaver Templates
+
+Templates provide pre-built UI patterns for common interactions. Each template is a single command that handles the full interaction flow and returns JSON.
+
+## Quick Reference
+
+| Template | Purpose | Returns |
+|----------|---------|---------|
+| `wizard` | Multi-step forms with branching | All collected fields |
+| `choices` | Pick one from options | `{"choice": "Selected"}` |
+| `confirm` | Yes/No decision | `{"confirmed": true/false}` |
+| `info` | Show message + pick action | `{"action": "Clicked"}` |
+| `table` | Display data, optional selection | `{"action": "OK"}` or `{"selected_row": N}` |
+| `code` | Show code with line numbers | `{"action": "Apply/Cancel"}` |
+| `diff` | Show changes with highlighting | `{"action": "Apply/Reject"}` |
+
+## For LLMs
+
+### Basic Usage Pattern
+
+```bash
+# All templates follow this pattern:
+./exe/streamweaver template <name> <session> '<json-config>'
+
+# Returns JSON on stdout when user completes interaction
+```
+
+### Wizard - Multi-step Forms
+
+```bash
+# Linear wizard (steps in order)
+./exe/streamweaver template wizard test '{
+  "title": "Project Setup",
+  "steps": [
+    {"title": "Info", "fields": [
+      {"type": "text", "key": "name", "label": "Project name"},
+      {"type": "select", "key": "type", "label": "Type", "options": ["Web", "CLI", "API"]}
+    ]},
+    {"title": "Options", "fields": [
+      {"type": "checkbox", "key": "tests", "label": "Include tests"},
+      {"type": "checkbox", "key": "ci", "label": "CI/CD"}
+    ]}
+  ]
+}'
+# Returns: {"name": "MyApp", "type": "Web", "tests": true, "ci": false}
+```
+
+```bash
+# Branching wizard (different paths based on choices)
+./exe/streamweaver template wizard test '{
+  "title": "Setup",
+  "steps": [
+    {"id": "type", "title": "Type", "fields": [
+      {"type": "select", "key": "project_type", "options": ["Web", "CLI"]}
+    ], "next": {"branch_on": "project_type", "Web": "web_opts", "CLI": "cli_opts"}},
+    {"id": "web_opts", "title": "Web Options", "fields": [
+      {"type": "select", "key": "framework", "options": ["React", "Vue"]}
+    ], "next": "done"},
+    {"id": "cli_opts", "title": "CLI Options", "fields": [
+      {"type": "select", "key": "cli_lib", "options": ["Thor", "Commander"]}
+    ], "next": "done"}
+  ]
+}'
+```
+
+**Field types:**
+- `text` - Text input
+- `select` - Dropdown selection
+- `checkbox` - Boolean toggle
+
+### Choices - Quick Selection
+
+```bash
+./exe/streamweaver template choices test '{
+  "title": "Select Database",
+  "description": "Which database for this project?",
+  "options": ["PostgreSQL", "SQLite", "MySQL"]
+}'
+# Returns: {"choice": "PostgreSQL"}
+```
+
+### Confirm - Yes/No
+
+```bash
+./exe/streamweaver template confirm test '{
+  "title": "Delete files?",
+  "message": "This will permanently remove 3 files.",
+  "yes": "Delete",
+  "no": "Cancel"
+}'
+# Returns: {"confirmed": true} or {"confirmed": false}
+```
+
+### Info - Message with Actions
+
+```bash
+./exe/streamweaver template info test '{
+  "title": "Build Complete",
+  "message": "All tests passed",
+  "details": ["12 specs", "Coverage: 94%"],
+  "actions": ["Deploy", "View Report", "Close"]
+}'
+# Returns: {"action": "Deploy"}
+```
+
+### Table - Data Display
+
+```bash
+./exe/streamweaver template table test '{
+  "title": "Recent Files",
+  "headers": ["File", "Size", "Modified"],
+  "rows": [
+    ["app.rb", "12kb", "2 hours ago"],
+    ["cli.rb", "8kb", "yesterday"]
+  ]
+}'
+# Returns: {"action": "OK"}
+
+# With row selection:
+./exe/streamweaver template table test '{
+  "title": "Select File",
+  "headers": ["File", "Size"],
+  "rows": [["app.rb", "12kb"], ["cli.rb", "8kb"]],
+  "selectable": true
+}'
+# Returns: {"selected_row": 0, "selected_data": ["app.rb", "12kb"]}
+```
+
+### Code - Code Display
+
+```bash
+./exe/streamweaver template code test '{
+  "title": "Generated Code",
+  "filename": "hello.rb",
+  "code": "def hello\n  puts \"Hello\"\nend",
+  "actions": ["Apply", "Edit", "Cancel"]
+}'
+# Returns: {"action": "Apply"}
+```
+
+### Diff - Change Display
+
+```bash
+./exe/streamweaver template diff test '{
+  "title": "Proposed Changes",
+  "filename": "app.rb",
+  "diff": "- old line\n+ new line\n  context",
+  "actions": ["Apply", "Reject"]
+}'
+# Returns: {"action": "Apply"}
+```
+
+## For Humans
+
+### Architecture
+
+Templates are Ruby classes in `lib/stream_weaver/templates/` that:
+1. Push UI to a live session
+2. Wait for user interaction
+3. Return collected data as JSON
+
+Each template clears stale submissions on start and uses unique field IDs to prevent browser autocomplete issues.
+
+### Adding New Templates
+
+1. Create `lib/stream_weaver/templates/your_template.rb`
+2. Inherit common patterns from existing templates
+3. Add to CLI in `lib/stream_weaver/cli.rb` (search for `when 'wizard'`)
+
+### Native DSL Components
+
+Templates can use StreamWeaver's DSL directly:
+
+```ruby
+# In template build_dsl method:
+lines << "header2 \"Title\""
+lines << "table headers: [\"A\", \"B\"], rows: [[\"1\", \"2\"]], striped: true"
+lines << "button \"Submit\""
+```
+
+### Available Table Options
+
+```ruby
+table headers: [...], rows: [...],
+  striped: true,    # Zebra stripes
+  bordered: true,   # Cell borders
+  hoverable: true,  # Highlight on hover
+  compact: true,    # Reduced padding
+  caption: "Title"  # Table caption
+```
+
+## Session Management
+
+```bash
+# Start a live session
+./exe/streamweaver live mysession
+
+# Push content
+./exe/streamweaver push mysession --dsl 'text "Hello"'
+
+# Wait for submission (blocks)
+./exe/streamweaver wait mysession --timeout 60
+
+# Run template (combines push + wait)
+./exe/streamweaver template wizard mysession '{...}'
+```
+
+## Tips
+
+1. **Single command = no permission prompts** - Templates handle the full flow in one bash call
+2. **JSON escaping** - Use single quotes around JSON to avoid shell escaping issues
+3. **Timeout** - Templates default to 300s timeout; user must interact within this window
+4. **Browser** - User needs the live session open at `http://localhost:PORT/live/SESSION`

data/docs/testing.md

@@ -0,0 +1,155 @@
+# Testing StreamWeaver Apps
+
+This guide covers testing strategies for StreamWeaver applications.
+
+## Unit Testing with `rebuild_with_state`
+
+Test component logic without running a server:
+
+```ruby
+require 'spec_helper'
+
+RSpec.describe "My App" do
+  let(:my_app) do
+    StreamWeaver::App.new("Test") do
+      text_field :name
+      if state[:name] == "Alice"
+        text "Hello Alice!"
+      end
+    end
+  end
+
+  it "shows greeting when name is Alice" do
+    my_app.rebuild_with_state({ name: "Alice" })
+    expect(my_app.components.length).to eq(2)  # text_field + text
+  end
+
+  it "hides greeting when name is empty" do
+    my_app.rebuild_with_state({ name: "" })
+    expect(my_app.components.length).to eq(1)  # just text_field
+  end
+end
+```
+
+## Integration Testing with Rack::Test
+
+Test HTTP endpoints and button actions without opening a browser:
+
+```ruby
+require 'spec_helper'
+require 'rack/test'
+
+RSpec.describe "My App Integration" do
+  include Rack::Test::Methods
+
+  let(:stream_app) do
+    StreamWeaver.app "Test" do
+      text_field :name
+      button "Greet" do |s|
+        s[:greeted] = true
+        s[:greeting] = "Hello, #{s[:name]}!"
+      end
+    end
+  end
+  let(:app) { stream_app.generate }  # Get Sinatra app for Rack::Test
+
+  it "renders initial form" do
+    get '/'
+    expect(last_response).to be_ok
+    expect(last_response.body).to include('name')
+  end
+
+  it "handles button click with session state" do
+    # Inject state before request
+    env 'rack.session', { streamlit_state: { name: "Alice" } }
+
+    # Simulate button click (button names normalized: lowercase, underscores)
+    post '/action/btn_greet_1', { name: "Alice" }
+
+    # Verify state was updated
+    state = last_request.session[:streamlit_state]
+    expect(state[:greeted]).to be true
+    expect(state[:greeting]).to eq("Hello, Alice!")
+  end
+
+  it "handles form field update" do
+    env 'rack.session', { streamlit_state: { name: "" } }
+    post '/update', { name: "Bob" }
+
+    state = last_request.session[:streamlit_state]
+    expect(state[:name]).to eq("Bob")
+  end
+end
+```
+
+## Key Testing Patterns
+
+| Pattern | Purpose |
+|---------|---------|
+| `rebuild_with_state(hash)` | Re-evaluates DSL block with given state, for testing conditional rendering |
+| `app.generate` | Returns the Sinatra app for Rack::Test |
+| `env 'rack.session', { streamlit_state: {...} }` | Inject state before requests |
+| `last_request.session[:streamlit_state]` | Read state after requests |
+| `POST /action/btn_<name>_<id>` | Button actions (names normalized: lowercase, underscores) |
+| `POST /update` | Form field updates |
+
+## Testing `route_with`
+
+Covered in [`docs/routing.md`](routing.md) § Testing route_with, not here: extract the parser
+and builder into plain functions and test them with a `build(parse(path)) == path` round-trip
+check over every route — no Rack::Test or session harness required. See that doc's Common
+Pitfalls section for the two bug classes this catches.
+
+## Testing Agentic Mode (`run_once!`)
+
+The `/submit` endpoint can be tested directly:
+
+```ruby
+it "handles form submission" do
+  env 'rack.session', { streamlit_state: { name: "Test", priority: "High" } }
+  post '/submit', { name: "Test", priority: "High" }
+  expect(last_response).to be_ok
+end
+```
+
+Note: Testing the full `run_once!` flow (with browser wait loop) requires manual testing or browser automation.
+
+## Session State Notes
+
+State persists in browser cookies across server restarts. For testing:
+- Clear browser cookies for localhost
+- Use incognito mode for fresh sessions
+
+## Smoke test / UAT
+
+`bin/smoke` is an executable UAT battery, not an rspec file. It boots real
+StreamWeaver servers on ephemeral ports and drives them over real HTTP
+(`Net::HTTP`), covering things unit/integration specs don't: the actual
+process boot sequence, the standalone-vs-service seam, and slug/hex URL
+resolution across multiple loaded apps.
+
+It covers, using a small fixture app (`bin/support/smoke_fixture.rb`):
+
+- **Standalone mode** (`ruby app.rb`, driven via `run!`): custom `endpoint`
+  JSON/webhook/CSV responses, the reserved-path boot warning and internal
+  route always winning for `/update`, and 404s for unmapped verbs/paths.
+- **Service mode** (`streamweaver serve`): loading an app via `POST
+  /load-app`, rendering it at both its slug and hex `/apps/:id` URLs,
+  endpoint dispatch scoped under `/apps/:id/...` for both forms, the
+  collision-suffix behavior when two different files derive the same slug,
+  and slug reuse when the same file is reloaded.
+
+Run it locally:
+
+```bash
+bin/smoke
+```
+
+It prints one check/x check line per assertion plus a final `N/M passed`
+summary, and exits non-zero if anything fails (all remaining checks still
+run so a single miss doesn't hide others). Spawned processes are tracked and
+killed (by process group) in an `at_exit` handler, and ports are picked by
+binding to port 0 so it never collides with a `streamweaver` instance you
+already have running. It's wired into CI as the `smoke` job alongside
+`rspec`.
+- Add a reset button: `button "Reset" do |s| s.clear end`

data/docs/theming-hooks.md

@@ -0,0 +1,281 @@
+# Theming hooks
+
+StreamWeaver's structural components emit a stable, `sw-` prefixed class on
+every element you'd want to skin. The contract:
+
+- **`sw-` prefixed classes are a stable public API.** They will not be
+  renamed or removed without a deprecation cycle. Write your CSS against
+  them.
+- **Any other class (internal names, Alpine `x-` attributes, `data-sw-*`
+  attributes) is an implementation detail.** It can change between
+  releases without notice. Don't select on it in production CSS.
+- **`class:`/`style:` on any structural component appends to the element,
+  it never replaces the framework's own classes.** Your class always
+  lands after the framework's, so at equal specificity your rule wins on
+  document order too -- and since stream_weaver-oeo, every framework rule
+  also lives in `@layer stream-weaver`, so your unlayered CSS wins
+  regardless of specificity or order. One stylesheet targeting these
+  hooks is enough to fully re-skin an app; you never need to fight the
+  framework's own styles.
+- **A few components still emit a second, unprefixed legacy class**
+  (`card`, `card-header`, `card-body`, `card-footer`, `status-badge` and
+  its `status-badge-*` siblings, and the `.sidebar-section` utility class)
+  **alongside** the `sw-` hook, for backward compatibility. These generic
+  names are exactly what stream_weaver-lyb was filed over -- they can
+  collide with an app's own class names by coincidence (a real app's
+  `.card` or `.status-badge` is a completely reasonable thing to
+  independently invent). They're deprecated and will be removed at 1.0;
+  new code should target the `sw-` hook only.
+
+## Component -> hooks -> minimal CSS
+
+### Board / Lane / BoardCard
+
+| Element | Hook |
+|---|---|
+| Board container | `.sw-board` |
+| Board with pinned lane headers | `.sw-board--pinned-headers` |
+| Lane container | `.sw-board__lane` |
+| Lane header band | `.sw-board__lane-header`, `.sw-board__lane-header--{tone}` |
+| Lane heading wrapper | `.sw-board__lane-heading` |
+| Lane title | `.sw-board__lane-title` |
+| Lane subtitle | `.sw-board__lane-subtitle` |
+| Lane card count | `.sw-board__lane-count` |
+| Lane body (card stack) | `.sw-board__lane-body` |
+| Lane icon (before the title) | `.sw-board__lane-icon` |
+| Board card | `.sw-board__card`, `.sw-board__card--{tone}` |
+
+```css
+.sw-board { gap: 1.5rem; }
+.sw-board__lane-header--success { background: #16a34a; }
+.sw-board__card { border-radius: 12px; backdrop-filter: blur(4px); }
+```
+
+`tone:` on `lane`/`board_card` is one of `%i[neutral success warning error info]`.
+`board`, `lane`, and `board_card` all accept `class:`/`style:`.
+`board(pinned_headers: true)` adds `.sw-board--pinned-headers` and
+`data-sw-pinned-headers="true"`; its lane header bands remain sticky while the
+board scrolls vertically.
+
+`lane` accepts `icon:` (stream_weaver-oeo) -- an emoji/glyph string, or a
+URL/path (an `App#local_asset` result, `/sw-asset/...`, or any http(s)/data
+URI), rendered before the title. A value is treated as an image when it
+starts with `http://`, `https://`, `/`, or `data:`; anything else renders
+as plain text/emoji. Replaces the `title_prefix` string-concatenation
+workaround (design-parity-fights.md) that both tyrion parity slices used.
+
+### Sidebar
+
+| Element | Hook |
+|---|---|
+| Sidebar container | `.sw-sidebar`, `.sw-sidebar-sticky` (when `sticky: true`) |
+| Header wrapper | `.sw-sidebar-header` |
+| Header title | `.sw-sidebar-title` |
+| Content wrapper | `.sw-sidebar-content` |
+
+```css
+.sw-sidebar { width: 260px; background: #1a1714; }
+.sw-sidebar-title { font-family: 'Cinzel', serif; }
+```
+
+`sidebar` accepts `class:`/`style:`.
+
+### Navbar / NavItem
+
+| Element | Hook |
+|---|---|
+| Navbar container | `.sw-navbar` |
+| Nav item | `.sw-navbar-item` |
+| Active nav item | `.sw-navbar-item-active` |
+| Nav item label (when close chrome is present) | `.sw-navbar-item__label` |
+| Decorative close chrome | `.sw-navbar-item__close` |
+
+```css
+.sw-navbar { border-bottom: 2px solid gold; }
+.sw-navbar-item-active { text-decoration: underline; }
+```
+
+Both `navbar` and `nav_item` accept `class:`/`style:` (nav_item forwarding
+added in stream_weaver-oeo).
+`nav_item(..., close: true)` adds a decorative `×`; pass a string to `close:`
+for a different glyph. This option is visual tab chrome, not an interactive
+close action. Apps that close tabs should wire that behavior through their own
+action component.
+
+### Topbar
+
+App-chrome header bar: brand (icon/glyph + wordmark), a breadcrumb trail,
+and trailing block content (badges/pills/whatever you render in the
+block). Added in stream_weaver-oeo to replace the hand-rolled
+div/phrase topbar both tyrion parity slices needed (design-parity-
+fights.md finding #6).
+
+| Element | Hook |
+|---|---|
+| Container | `.sw-topbar` |
+| Brand wrapper | `.sw-topbar-brand` |
+| Brand icon | `.sw-topbar-icon` |
+| Wordmark | `.sw-topbar-wordmark` |
+| Breadcrumb trail | `.sw-topbar-breadcrumbs` |
+| Breadcrumb item | `.sw-topbar-crumb`, `.sw-topbar-crumb--active` (last item) |
+| Breadcrumb separator | `.sw-topbar-separator` |
+| Trailing content | `.sw-topbar-trailing` |
+
+```css
+.sw-topbar { background: #1a1208; border-bottom: 1px solid #4a3520; }
+.sw-topbar-wordmark { font-family: 'Cinzel', serif; letter-spacing: 0.1em; }
+```
+
+```ruby
+topbar(icon: "🦁", wordmark: "TYRION", breadcrumbs: ["field-ops", "warroom"]) do
+  badge("main")
+end
+```
+
+`icon:` follows the same URL-vs-glyph detection as `lane`'s `icon:`.
+`breadcrumbs:` is a plain array of strings; the last one gets
+`.sw-topbar-crumb--active`. The brand wrapper, breadcrumb trail, and
+trailing wrapper are each omitted from the DOM when they have nothing to
+render (no icon/wordmark, empty breadcrumbs, or an empty block).
+`topbar` accepts `class:`/`style:`.
+
+### AppShell
+
+| Element | Hook |
+|---|---|
+| Shell container | `.sw-app-shell`, `.sw-app-shell-sidebar-{position}` |
+| Main region | `.sw-app-shell-main` |
+| Sidebar region | `.sw-app-shell-sidebar` |
+
+```css
+.sw-app-shell { --sw-shell-sidebar-width: 280px; }
+```
+
+`app_shell` accepts `class:`/`style:` (merged with the framework's own
+`--sw-shell-sidebar-width`/`--sw-shell-gap` custom properties).
+
+### Card
+
+| Element | Hook | Legacy (deprecated) |
+|---|---|---|
+| Card container | `.sw-card`, `.sw-card--{depth}`, `.sw-card--accent-{a\|b\|c}` | `.card` |
+| Corner label | `.sw-card__label` | -- |
+| Header | `.sw-card-header` | `.card-header`, `.card-header--badged` |
+| Header badge | `.card-header__badge` | -- |
+| Header title | `.card-header__title` | -- |
+| Header meta | `.card-header__meta` | -- |
+| Body | `.sw-card-body` | `.card-body` |
+| Footer | `.sw-card-footer` | `.card-footer` |
+
+```css
+.sw-card { border-radius: 16px; }
+.sw-card--hero { box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
+```
+
+`card`, `card_header`, `card_body`, and `card_footer` all accept
+`class:`/`style:` (`card_header`/`card_body`/`card_footer` forwarding
+added in stream_weaver-oeo).
+
+### Table
+
+| Element | Hook |
+|---|---|
+| Table element | `.sw-table` |
+| Variants | `.sw-table-striped`, `.sw-table-bordered`, `.sw-table-hoverable`, `.sw-table-compact`, `.sw-table-sortable`, `.sw-table--alternating`, `.sw-table--hover`, `.sw-table--sticky-header` |
+| Row action cell | `.sw-table__actions` |
+
+```css
+.sw-table { font-family: 'IBM Plex Mono', monospace; }
+.sw-table-striped tr:nth-child(even) { background: #f5f5f0; }
+```
+
+`table` accepts `class:`/`style:` on the `<table>` element itself
+(forwarding added in stream_weaver-oeo; `style:` is appended after the
+framework's own required `width`/`border-collapse` base style).
+
+If the first column's inline accent styling beats your own CSS on cells (not
+the `<table>` element), that's a cell-level concern -- `class:`/`style:`
+above only forwards to the `<table>` tag. Use per-column `style:` (String or
+Proc) for arbitrary cell CSS, per-column `id_style:` to opt a column in or
+out of the accent styling regardless of position, or table-level
+`id_column:` to redirect (or disable) which column gets it on raw
+`headers:`/`rows:` tables. See Table in `docs/components_reference.md` for
+examples.
+
+### Button
+
+| Element | Hook | Legacy (deprecated) |
+|---|---|---|
+| Button | `.sw-button` | `.btn`, `.btn-primary`/`.btn-secondary`, `.btn-quiet`, `.btn-outline`, `.btn-sm` |
+
+```css
+.sw-button { text-transform: uppercase; letter-spacing: 0.05em; }
+```
+
+`.sw-button` is an identifying hook only -- no framework CSS rule targets
+it directly (styling stays keyed off `.btn`/`.btn-primary`/etc. so
+`style: :none`'s "no framework look" contract is unaffected by its
+presence). It's always emitted, including under `style: :none`.
+
+### Modal
+
+| Element | Hook |
+|---|---|
+| Outer wrapper | `.sw-modal-wrapper` |
+| Backdrop | `.sw-modal-backdrop` |
+| Dialog | `.sw-modal`, `.sw-modal-{sm\|md\|lg\|xl}` |
+| Header | `.sw-modal-header` |
+| Title | `.sw-modal-title` |
+| Body | `.sw-modal-body` |
+
+```css
+.sw-modal { border-radius: 8px; border: 2px solid gold; }
+```
+
+`modal` accepts `class:`/`style:` on the dialog element (forwarding added
+in stream_weaver-oeo).
+
+### Badge / Status
+
+| Component | Element | Hook | Legacy (deprecated) |
+|---|---|---|---|
+| `badge` | Pill | `.sw-badge`, `.sw-badge-{variant}`, `.sw-badge-{size}` | -- |
+| `status_dot` | Dot | `.sw-status-dot`, `.sw-status-dot-{status}`, `.sw-status-dot-{size}`, `.sw-status-dot-pulse` | -- |
+| `status_dot` | Label | `.sw-status-dot-label` | -- |
+| `status_badge` | Badge | `.sw-status-badge`, `.sw-status-badge--{strong\|maybe\|skip\|unknown}` | `.status-badge`, `.status-badge-{strong\|maybe\|skip\|unknown}` |
+| `status_badge` | Icon/label/reasoning | `.sw-status-badge__icon`, `.sw-status-badge__label`, `.sw-status-badge__reasoning` | `.status-badge-icon`, `.status-badge-label`, `.status-badge-reasoning` |
+
+```css
+.sw-badge-success { background: #16a34a; }
+.sw-status-badge--strong { background: rgba(16,185,129,0.15); }
+```
+
+### Sidebar-section utility class
+
+`.sidebar-section` is a plain CSS utility (no dedicated component --
+apply it with `class: "sw-sidebar-section"` on any `div`/container). The
+`sw-sidebar-section` hook styles identically; the unprefixed name is kept
+for back-compat only.
+
+```css
+.sw-sidebar-section { background: transparent; }
+```
+
+## Why this exists
+
+Before stream_weaver-oeo, a bespoke skin had two options: fight the
+framework's CSS with specificity bumps (see
+`gsd/analysis/08-design-parity-fights.md` finding #1, and
+`examples/parity/tyrion_warroom_slice.rb`'s header comment for the
+pixel-parity slice that had to invent its own class names entirely to
+avoid the fight), or reverse-engineer whichever internal class happened
+to be attached to the element you wanted to style. Neither scales past a
+one-off demo.
+
+Now: every framework style lives in `@layer stream-weaver`, so any
+unlayered app stylesheet always wins regardless of specificity or
+document order, and every structural component emits one of the `sw-`
+hooks documented above. A bespoke look is "pretty DSL calls + one CSS
+file targeting these hooks" -- see
+`examples/parity/tyrion_warroom_components.rb` +
+`examples/parity/tyrion_components.css` for the proof.