rori 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 32d92384953e7fc7af8e9f2fc5e70aed475154cbb70b0e283419ec5e8516af47
+  data.tar.gz: a1a13b88264f163a1678ac6f576bb6564c53c888cb47a2536ac4efde460d4d71
+SHA512:
+  metadata.gz: 1dcbd2c85a36c19fce60a63a840ca7906f59884b525a3f70c862c409d57a3e369811c6e442f0fa3dd7577f44007e2d8d9dc859e8566fe5fbbc88aa0171fc6624
+  data.tar.gz: 8c4c1ba90c1ddd0a6aaeeb24de45a91fb793e82a480319a61c8ee8ebccf830b72d85461c4afe69c1abf28bbafb176628b1cfd29bad1c73bf81fe624c6d4d4582

data/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+Notable changes to rori, newest first. Each entry names who it's for:
+**Users** (people working in the desk) and **Developers** (apps building on
+it). History before the gem got its own repository lives in
+[rori-demo's changelog](https://github.com/varyform/rori-demo/blob/main/CHANGELOG.md).
+
+## 0.1.0 (2026-09-26)
+
+The first release.
+
+### The desk
+- **Users:** every page opens as a window in endlessly scrolling column strips, one strip per workspace, stacked vertically: keyboard focus and moves, column widths, stacking, full width, centring, an overview and a column minimap. The layout survives a reload.
+- **Users:** ⌘K palette and a drop-down terminal (`` ` ``) over one command tree — pages, recent records, desk actions, UI settings — with fuzzy matching across nested lists (`uthen` → UI › Theme › Nord), frecency, shortcuts shown next to commands, Tab completion and history in the terminal.
+- **Users:** Blender-style hover keys (opt-in): bare keys act on the window under the pointer while the cursor stays in your field — `W` close, `U` reopen, `R` width, `F` full, `C` centre, `[` `]` stack, `1–9` switch workspace, `⇧1–9` move the column there and follow it.
+- **Users:** a keyboard shortcuts modal (`⌥?`) generated from the live keymap; closed windows reopen where they were (`⌥⇧T`); unsaved forms ask before closing.
+- **Users:** 14 bundled Ghostty colour themes with live preview; optional Unsplash wallpapers (safe / cover menu bar / off, next, pin); the menu bar at the top or bottom.
+- **Users:** notifications in the desk's corner for server-side commands and background work.
+
+### For host apps
+- **Developers:** `bin/rails g rori:install` wires an app up: initializer, `Rori::Windowed`, `draw :rori`, the root route and the Stimulus registration.
+- **Developers:** pages declare how they're shown (`window size:, mode:, workspace:, key:`); windows with the same key are reused; broadcast refreshes reload only the windows showing the changed data.
+- **Developers:** `Rori.records` lists recent records in ⌘K; a labelled parameterless GET route becomes a command; `Rori.commands` adds entries; `Rori.command :name, confirm: true do … end` runs code on the server, and `Rori.notify` reports back from anywhere (e.g. a job).
+- **Developers:** one keymap (`Rori.keymap`, `Mod` = `Rori.modifier`), a native-shell modifier by user agent (`Rori.native_user_agent`, `Rori.native_modifier`, `Rori.keymap_overrides`).
+- **Developers:** self-contained CSS in one `rori` cascade layer with `--rori-*` tokens that fall back to the host's tokens; `rori-` prefixed classes; `Rori.themes_folder` and `Rori.wallpapers_folder` for the app's own themes and photos.

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Oleh Khomei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,279 @@
+# Rori
+
+[![CI](https://github.com/varyform/rori/actions/workflows/ci.yml/badge.svg)](https://github.com/varyform/rori/actions/workflows/ci.yml)
+
+A niri-style window manager for Rails pages — a "desk" of windows. Every
+page opens as a window in endlessly scrolling column strips, one strip per workspace; ⌘K and a
+drop-down terminal (`` ` ``) run one fuzzy-matched command tree; a keymap
+with a configurable modifier (⌘ in a native shell) and optional hover keys
+drive the windows. Ghostty themes and Unsplash wallpapers included.
+
+![From an empty desk: ⌘K opens pages as windows, focus moves along the strip, the overview zooms out, and the terminal switches the theme](docs/demo.webp)
+
+A Rails engine (not isolated): it wraps the host's own controllers and views.
+
+See it wired into a small app in [rori-demo](https://github.com/varyform/rori-demo):
+configuration, window options on pages, a server-side command with a
+background job, and a Tauri macOS wrapper.
+
+## A tour
+
+**Windows in strips**: columns of any width, windows stacked inside them, the
+strip running off the edges; one strip per workspace.
+
+![A workspace with a users list, two users stacked in one column, and a service running off the right edge](docs/screenshots/desk.webp)
+
+**⌘K** matches whole paths through nested lists: `uthen` finds UI › Theme › Nord.
+
+![The command palette with "uthen" matching theme entries](docs/screenshots/palette.webp)
+
+**The terminal** (`` ` ``) runs the same commands as words, with Tab completion
+and history. Server-side commands can ask first and report back as
+notifications.
+
+![The drop-down terminal after a confirmed Reindex search, with its notification](docs/screenshots/terminal.webp)
+
+**Overview** (⌥O) zooms out to every workspace.
+
+![Overview of three workspaces](docs/screenshots/overview.webp)
+
+**Hover keys** (opt-in): point at an inactive window and bare keys act on it
+(`W` closes, `R` cycles its width, `⇧1–9` sends it to a workspace) while the
+cursor stays in the field you're typing in.
+
+![A window marked "keys → here" beside a form whose field has focus](docs/screenshots/hover-keys.webp)
+
+**Themes**: bundled Ghostty palettes, or your own theme files.
+
+![The same desk in Rosé Pine Dawn](docs/screenshots/theme-light.webp)
+
+**Every shortcut** in one place (⌥?), generated from the live keymap.
+
+![The keyboard shortcuts modal](docs/screenshots/shortcuts.webp)
+
+## Requirements
+
+Rails 8 with Propshaft, importmap, Turbo and Stimulus.
+
+Your app's views stay whatever they are — ERB, Phlex, anything. Only the
+engine's own views are written in HAML, so the `haml` gem comes along as a
+dependency; you never have to write a line of it.
+
+> **Why HAML?** The desk's views are nothing but nesting, and HAML makes
+> nesting the syntax: no closing tags, no towers of `<% end %>`. The ERB
+> version had more angle brackets than a Rust signature with lifetimes —
+> `fn render<'a, T: View + 'a>(v: &'a T) -> Result<Box<dyn Html + 'a>, Error>`
+> — and nobody should have to read that at 2 a.m.
+
+## Wiring it into an app
+
+```ruby
+# Gemfile
+gem "rori"
+```
+
+```sh
+bundle install
+bin/rails g rori:install
+```
+
+The generator adds `config/initializers/rori.rb`, includes `Rori::Windowed`
+in `ApplicationController`, draws the desk's routes (and makes the blank desk
+the root, unless you have one), and registers the Stimulus controllers. Run
+it again any time; steps already in place are skipped. By hand, that's:
+
+```ruby
+# app/controllers/application_controller.rb — every page renders as a window
+class ApplicationController < ActionController::Base
+  include Rori::Windowed
+end
+
+# config/routes.rb
+Rails.application.routes.draw do
+  draw :rori                  # ⌘K / terminal command lists
+  root "rori/desktops#show"   # the blank desk
+end
+
+# config/initializers/rori.rb
+Rori.configure do |rori|
+  rori.records = %w[ User Project ]   # recent records listed in ⌘K
+end
+```
+
+```js
+// app/javascript/controllers/index.js
+import { registerRori } from "rori"
+registerRori(application)
+```
+
+Pages declare how they're shown with `window size:, mode:, workspace:, key:`
+(see `Rori::WindowHelper`); links that should open a window use
+`rori_link_to`. A parameterless GET route shows up in ⌘K once it has a
+label under `rori.commands.routes.<controller>.<action>` in the app's locale.
+
+## CSS
+
+The desk's CSS lives in its own cascade layer, `rori` (sub-layers
+`rori.reset`, `rori.tokens`, `rori.base`, `rori.layout`, `rori.components`,
+`rori.themes`), so it never mixes into the host's layers. Place it among
+yours with one name:
+
+```css
+@layer reset, base, rori, layout, components, utilities;
+```
+
+Unmentioned, it lands after your layers (it loads later).
+
+It needs nothing from the host: its components use only `--rori-*` tokens,
+each falling back from a host token when present — `--color-canvas`,
+`--color-surface`, `--color-ink`, `--color-ink-muted`, `--color-line`,
+`--color-primary`, `--color-on-primary`, `--color-success`, `--color-danger`,
+`--color-hover`, `--color-backdrop`, `--gap`, `--radius`, `--radius-sm`,
+`--ease`, `--motion`, `--font-sans`, `--font-mono` — to a built-in default.
+Themes set those host tokens, so they re-colour the host's pages as well.
+
+## What the host provides
+
+- **Page styles** (buttons, forms, tables); the desk styles only its chrome.
+- **Head tags** (favicons…): override `app/views/layouts/rori/_head.html.haml`.
+
+## Configuration
+
+See `lib/rori.rb` for everything: `app_name`, `records`, `commands`, `keymap`,
+`modifier` / `native_modifier` / `native_user_agent`, `hover_keys`,
+`terminal_key`, `wallpapers`, theme and wallpaper files and cookies.
+
+### Records in ⌘K
+
+```ruby
+Rori.configure do |rori|
+  rori.records = %w[ User Project ]
+  rori.record_limit = 25   # the default
+end
+```
+
+Each time ⌘K opens (and when the terminal loads its commands), the desk lists
+the `record_limit` most recently updated records of every model named here,
+so typing “ada” jumps straight to that user. An entry is labelled with
+`record.to_s`, grouped by `Model.model_name.human`, and opens
+`polymorphic_path(record)` in a window. Each model therefore needs:
+
+- an `updated_at` column (the list is ordered by it);
+- a show route, e.g. `resources :users` (`polymorphic_path` raises without one);
+- a meaningful `to_s`, or the label reads `#<User:0x…>`.
+
+It's a shortcut to recent work, not a search: older records don't appear, and
+each model costs one query per open. Leaving a model out only drops its
+records from ⌘K; its pages still open from links, and its index can still be
+listed through a route label (`rori.commands.routes.<controller>.index`).
+
+### Server-side commands and notifications
+
+```ruby
+Rori.configure do |rori|
+  rori.command :reindex_search, confirm: true do
+    SearchReindexJob.perform_later
+    I18n.t("search.reindex_started")   # optional: the notification's text (default "Done")
+  end
+end
+```
+
+```yaml
+en:
+  rori:
+    commands:
+      custom:
+        reindex_search: Reindex search
+```
+
+The command shows up in ⌘K and the terminal under **Run**. Picking it POSTs
+to `/rori/commands/runs`, runs the block and shows the result as a corner
+notification (errors stay until dismissed). `confirm: true` asks first: ↵
+twice in ⌘K, `y` in the terminal. The block runs inside the request, so
+hand slow work to a job, which can report back from anywhere:
+
+```ruby
+Rori.notify "Search reindexed", "1,204 records", kind: :success   # :info, :success, :error
+```
+
+`Rori.notify` broadcasts over Action Cable to `Rori.notifications_stream`,
+which every open desk subscribes to — all users see it, so keep it to
+single-user or admin desks.
+
+### Your own themes and wallpapers
+
+```ruby
+Rori.configure do |rori|
+  rori.themes_folder = "config/themes"   # Ghostty theme files (relative to Rails.root)
+  rori.wallpapers = true
+  rori.wallpapers_folder = "wallpapers"  # app/assets/images/wallpapers/*.{jpg,png,webp,avif}
+end
+```
+
+- **Themes:** any Ghostty theme file (e.g. from
+  [iTerm2-Color-Schemes/ghostty](https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/ghostty))
+  dropped into the folder shows up in UI › Theme next to the bundled ones; a
+  file with a bundled theme's name replaces it. No build step — their CSS is
+  rendered into the page.
+- **Wallpapers:** the folder is a path inside the app's asset load path, so
+  images are fingerprinted and served by Propshaft. When set, its images
+  replace the bundled Unsplash photos.
+- UI › Wallpaper › **Next wallpaper** swaps the photo in place; **Pin
+  wallpaper** keeps the current one across launches (toggle).
+
+The bundled themes are compiled into the gem's `themes.css`; after changing
+`Rori.themes_directory`, run `bin/rails rori:themes:build`.
+
+## Customising the look
+
+The desk's chrome reads only its own `--rori-*` tokens, and each one defaults
+to your token of the same meaning. So there are three levels, from broad to
+precise:
+
+1. **Your design tokens** — set them as usual; the desk follows:
+   ```css
+   :root { --radius: 4px; --radius-sm: 2px; --gap: 8px; --font-sans: "Inter", sans-serif; }
+   ```
+   Supported: `--color-canvas|surface|ink|ink-muted|line|primary|on-primary|success|danger|hover|backdrop`,
+   `--gap`, `--radius`, `--radius-sm`, `--ease`, `--motion`, `--font-sans`, `--font-mono`.
+2. **Desk-only tokens** — change the desk without touching your pages:
+   ```css
+   @layer overrides {        /* any layer AFTER `rori`, or unlayered */
+     :root { --rori-radius: 0; --rori-gap: 16px; }
+   }
+   ```
+3. **Components** — every chrome element has a `rori-` class
+   (`.rori-win`, `.rori-win__bar`, `.rori-menubar`, `.rori-minimap`,
+   `.rori-palette`, `.rori-terminal`, `.rori-col`…):
+   ```css
+   @layer overrides {
+     .rori-win { border-radius: 0; box-shadow: none; }
+     .rori-win__bar { height: 26px; }
+   }
+   ```
+
+**The one rule: overrides must come after the `rori` layer.** Cascade layers
+beat specificity, so a rule in a layer *before* `rori` loses even with a more
+specific selector — and so does a `--rori-*` token set there, since
+`rori.tokens` defines them on `:root` too. Put overrides in a later layer
+(`components`, `utilities`, a dedicated `overrides`) or leave them unlayered.
+Overriding your own tokens (level 1) works from any layer, because the desk
+only reads them.
+
+Themes set the `--color-*` tokens, so a theme picked in UI › Theme wins over
+level-1 colours; use level 2 (`--rori-ink`, `--rori-surface`…) for colours a
+theme mustn't change.
+
+## Development
+
+```sh
+bundle install
+bundle exec rake test     # models, controllers, the generator, against test/dummy
+bundle exec rubocop
+bin/rails server          # the dummy app, for poking at the desk
+```
+
+To work on the gem inside a real app, use the GitHub source in the app's
+Gemfile (`gem "rori", github: "varyform/rori", branch: "main"`) and point
+Bundler at your checkout: `bundle config set --local local.rori /path/to/rori`.
+Releases: see `RELEASING.md`.

data/app/assets/stylesheets/rori/_init.css

@@ -0,0 +1,79 @@
+/* The desk's CSS lives in one `desk` layer with its own sub-layers, so it never
+   mixes into the host's layers. Hosts position it with one name, e.g.
+     @layer reset, base, rori, layout, components, utilities;
+   Unmentioned, it lands after the host's layers (it loads later). Keep it
+   after the host's token layer: desk.themes overrides the host's colours. */
+@layer rori {
+  @layer reset, tokens, base, layout, components, themes;
+}
+
+/* Rori tokens: the host's semantic tokens when it has them, standalone
+   defaults otherwise. Components use only --rori-*. Computed on :root, so
+   themes (which set the host names on :root) flow through. */
+@layer rori.tokens {
+  :root {
+    --rori-gap: var(--gap, 12px);
+    --rori-radius: var(--radius, 10px);
+    --rori-radius-sm: var(--radius-sm, 6px);
+    --rori-ease: var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+    --rori-motion: var(--motion, 320ms);
+    --rori-font-sans: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+    --rori-font-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+
+    --rori-canvas: var(--color-canvas, light-dark(oklch(0.95 0 0), oklch(0.14 0 0)));
+    --rori-surface: var(--color-surface, light-dark(oklch(0.995 0 0), oklch(0.195 0 0)));
+    --rori-ink: var(--color-ink, light-dark(oklch(0.2 0 0), oklch(0.94 0 0)));
+    --rori-ink-muted: var(--color-ink-muted, color-mix(in oklch, var(--rori-ink) 60%, var(--rori-surface)));
+    --rori-line: var(--color-line, color-mix(in oklch, var(--rori-ink) 14%, var(--rori-surface)));
+    --rori-primary: var(--color-primary, var(--rori-ink));
+    --rori-on-primary: var(--color-on-primary, var(--rori-surface));
+    --rori-success: var(--color-success, light-dark(oklch(0.55 0.12 150), oklch(0.74 0.1 150)));
+    --rori-danger: var(--color-danger, light-dark(oklch(0.55 0.16 27), oklch(0.7 0.13 25)));
+    --rori-hover: var(--color-hover, color-mix(in oklch, var(--rori-ink) 6%, transparent));
+    --rori-backdrop: var(--color-backdrop, color-mix(in oklch, oklch(0 0 0) 45%, transparent));
+    --rori-shadow: var(--shadow, 0 8px 24px color-mix(in oklch, oklch(0 0 0) 22%, transparent));
+  }
+}
+
+/* Just enough reset for the desk's own chrome, whatever the host resets.
+   :where() keeps it at zero specificity; window content is left to the host. */
+@layer rori.reset {
+  :where(.rori-menubar, .rori-viewport, .rori-palette, .rori-terminal, .rori-shortcuts, .rori-notifications) :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
+
+  :where(.rori-menubar, .rori-palette, .rori-terminal, .rori-win__bar, .rori-wallpaper, .rori-shortcuts, .rori-notifications) :where(button, input:not([type="checkbox"]), ul, p, dl, dd, label) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    list-style: none;
+  }
+
+  :where(.rori-menubar, .rori-viewport, .rori-palette, .rori-terminal) [hidden] {
+    display: none !important;
+  }
+}
+
+/* The shell owns the page: its type and colours come from the tokens (so from
+   the host's, when set). */
+@layer rori.base {
+  html {
+    background: var(--rori-canvas);
+    color: var(--rori-ink);
+    font: 13px/1.45 var(--rori-font-sans);
+  }
+
+  body {
+    margin: 0;
+  }
+
+  :where(.rori-menubar, .rori-palette, .rori-terminal, .rori-wallpaper) kbd {
+    padding: 0 4px;
+    border: 1px solid var(--rori-line);
+    font: 12px var(--rori-font-mono);
+  }
+}

data/app/assets/stylesheets/rori/layout.css

@@ -0,0 +1,162 @@
+@layer rori.layout {
+
+  /* minmax(0, 1fr): an implicit `auto` column would grow to the widest bar's
+     content (e.g. the unwrapped status hint) and push the viewport past the
+     window on narrow or zoomed screens, leaving focused columns cut off. */
+  /* A two-finger swipe that overscrolls the page is history navigation in
+     Chrome and Safari ("back" on a leftward swipe). Sideways swipes belong to
+     the strip, and the desk manages windows itself, so the page never lets
+     overscroll through — nor pull-to-refresh or rubber-banding. */
+  html,
+  body {
+    overscroll-behavior: none;
+  }
+
+  body {
+    height: 100vh;
+    display: grid;
+    grid-template-rows: 32px 1fr;
+    grid-template-columns: minmax(0, 1fr);
+    overflow: hidden;
+  }
+
+  /* Rows are assigned explicitly: other body children (turbo-cable-stream-source,
+     a host's own elements) fall into implicit rows after them instead of
+     taking the bar's row. */
+  .rori-menubar {
+    grid-row: 1;
+  }
+
+  .rori-viewport {
+    grid-row: 2;
+  }
+
+  /* UI › Menu bar › Bottom. */
+  body.bars-bottom {
+    grid-template-rows: 1fr 32px;
+  }
+
+  body.bars-bottom .rori-menubar {
+    grid-row: 2;
+  }
+
+  body.bars-bottom .rori-viewport {
+    grid-row: 1;
+  }
+
+  /* Workspaces stack vertically; each is an endless horizontal strip of columns.
+     rori_controller.js sets column widths and the strip/stack transforms. */
+  /* clip, not hidden: dialog.show() focuses the window and would scroll a
+     hidden-overflow box behind the transforms' back. */
+  .rori-viewport {
+    position: relative;
+    overflow: clip;
+  }
+
+  .rori-stack {
+    position: absolute;
+    inset: 0;
+    transform-origin: 0 0;
+    transition: transform var(--rori-motion) var(--rori-ease);
+  }
+
+  .rori-workspace {
+    height: 100%;
+    overflow: clip;
+  }
+
+  .is-overview .rori-workspace {
+    overflow: visible;
+  }
+
+  .rori-strip {
+    display: flex;
+    gap: var(--rori-gap);
+    width: max-content;
+    height: 100%;
+    padding: var(--rori-gap);
+    transition: transform var(--rori-motion) var(--rori-ease);
+  }
+
+  .rori-col {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--rori-gap);
+    min-width: 0;
+    transition: width var(--rori-motion) var(--rori-ease);
+  }
+
+  /* Loading windows wait here unseen; modals live here in the top layer. */
+  .rori-floating {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .rori-floating>.rori-win:not(:modal) {
+    display: none;
+  }
+
+  .is-booting :is(.rori-stack, .rori-strip, .rori-col),
+  .is-scrolling .rori-strip {
+    transition: none;
+  }
+
+  .is-overview .rori-workspace {
+    outline: 1px dashed var(--rori-line);
+    outline-offset: -1px;
+  }
+
+  .is-overview .rori-win {
+    cursor: pointer;
+  }
+
+  .is-overview .rori-win__body {
+    pointer-events: none;
+  }
+
+  /* A centred panel, so the dismiss button sits by the text. Above the (empty)
+     stack so the button takes clicks; the panel itself lets them through. */
+  .rori-wallpaper {
+    position: absolute;
+    z-index: 1;
+    inset: 50% auto auto 50%;
+    translate: -50% -50%;
+    display: grid;
+    gap: 6px;
+    padding: 14px 36px;
+    border-radius: var(--rori-radius);
+    text-align: center;
+    color: var(--rori-ink-muted);
+    pointer-events: none;
+  }
+
+  .rori-viewport:not(.is-empty) .rori-wallpaper,
+  .hint-hidden .rori-wallpaper {
+    display: none;
+  }
+
+  .rori-wallpaper__dismiss {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    color: var(--rori-ink-muted);
+    line-height: 1;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .rori-wallpaper__dismiss:hover {
+    background: var(--rori-hover);
+    color: var(--rori-ink);
+  }
+
+  .rori-wallpaper__title {
+    font-weight: 600;
+    color: var(--rori-ink);
+  }
+}

data/app/assets/stylesheets/rori/menubar.css

@@ -0,0 +1,117 @@
+@layer rori.components {
+
+  /* The desk's only bar: brand, workspaces, the column minimap (takes the
+     slack), search, shortcuts, clock. */
+  .rori-menubar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    padding: 0 var(--rori-gap);
+  }
+
+  .rori-menubar .rori-minimap {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .rori-menubar__shortcuts {
+    flex: none;
+    color: var(--rori-ink-muted);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .rori-menubar__shortcuts:hover {
+    color: var(--rori-ink);
+  }
+
+  .rori-menubar__brand {
+    font: 600 12px var(--rori-font-mono);
+  }
+
+  .rori-menubar__search {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    height: 22px;
+    min-width: 18rem;
+    padding: 0 4px 0 10px;
+    border: 1px solid var(--rori-line);
+    border-radius: var(--rori-radius-sm);
+    color: var(--rori-ink-muted);
+    cursor: pointer;
+  }
+
+  .rori-menubar__search:hover {
+    border-color: var(--rori-ink-muted);
+    color: var(--rori-ink);
+  }
+
+  .rori-menubar__search kbd {
+    margin-left: auto;
+  }
+
+  .rori-menubar__clock {
+    font: 12px var(--rori-font-mono);
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-workspaces {
+    display: flex;
+    gap: 4px;
+  }
+
+  .rori-workspace-button {
+    height: 18px;
+    padding: 0 7px;
+    border-radius: 4px;
+    font: 11px var(--rori-font-mono);
+    color: var(--rori-ink-muted);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .rori-workspace-button:hover {
+    background: var(--rori-hover);
+  }
+
+  .rori-workspace-button[aria-current] {
+    background: var(--rori-primary);
+    color: var(--rori-on-primary);
+  }
+
+  .rori-minimap {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .rori-minimap__col {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    height: 20px;
+    padding: 2px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: width var(--rori-motion) var(--rori-ease);
+  }
+
+  .rori-minimap__col.is-visible {
+    border-color: var(--rori-line);
+  }
+
+  .rori-minimap__col span {
+    flex: 1;
+    border-radius: 2px;
+    background: var(--rori-line);
+  }
+
+  .rori-minimap__col span.is-focused {
+    background: var(--rori-ink);
+  }
+}