rori 0.1.0

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

@@ -0,0 +1,120 @@
+/* Corner notifications (rori/_notifications), next to the menu bar with the
+   newest nearest it. The stack is a manual popover, so it sits above modal
+   windows too. Each notification fades out after a while (the animation's end
+   removes it, rori-notifications#expire); the pointer on the stack pauses
+   them. Sticky ones (errors) wait for ×. */
+@layer rori.components {
+  .rori-notifications {
+    position: fixed;
+    inset: 40px 8px auto auto;
+    width: min(22rem, calc(100vw - 16px));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    overflow: visible;
+  }
+
+  .rori-notifications:popover-open {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 8px;
+  }
+
+  .bars-bottom .rori-notifications {
+    inset: auto 8px 40px auto;
+  }
+
+  .bars-bottom .rori-notifications:popover-open {
+    flex-direction: column;
+  }
+
+  .rori-notification {
+    position: relative;
+    display: grid;
+    gap: 2px;
+    padding: 10px 36px 10px 14px;
+    border: 1px solid var(--rori-line);
+    border-left: 3px solid var(--rori-primary);
+    border-radius: var(--rori-radius);
+    background: color-mix(in oklch, var(--rori-surface) 88%, transparent);
+    backdrop-filter: blur(16px) saturate(1.4);
+    box-shadow: var(--rori-shadow);
+    color: var(--rori-ink);
+    /* Out after 6s: the delay is the notification's life, so pausing it holds. */
+    animation:
+      rori-notification-in 220ms var(--rori-ease),
+      rori-notification-out 300ms var(--rori-ease) 6s forwards;
+  }
+
+  .rori-notification--success {
+    border-left-color: var(--rori-success);
+  }
+
+  .rori-notification--error {
+    border-left-color: var(--rori-danger);
+  }
+
+  .rori-notification--sticky {
+    animation: rori-notification-in 220ms var(--rori-ease);
+  }
+
+  .rori-notifications:hover .rori-notification {
+    animation-play-state: paused;
+  }
+
+  .rori-notification__title {
+    font-weight: 600;
+  }
+
+  .rori-notification__body {
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-notification__close {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    color: var(--rori-ink-muted);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 120ms;
+  }
+
+  .rori-notification:hover .rori-notification__close,
+  .rori-notification__close:focus-visible {
+    opacity: 1;
+  }
+
+  .rori-notification__close:hover {
+    background: var(--rori-hover);
+    color: var(--rori-ink);
+  }
+
+  @keyframes rori-notification-in {
+    from {
+      opacity: 0;
+      translate: 24px 0;
+    }
+  }
+
+  @keyframes rori-notification-out {
+    to {
+      opacity: 0;
+      translate: 24px 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rori-notification {
+      animation: rori-notification-out 1ms 6s forwards;
+    }
+
+    .rori-notification--sticky {
+      animation: none;
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+@layer rori.components {
+  .rori-palette {
+    width: min(36rem, calc(100vw - 2rem));
+    margin: 12vh auto auto;
+    padding: 0;
+    border: 1px solid var(--rori-ink);
+    border-radius: var(--rori-radius);
+    background: var(--rori-surface);
+    color: var(--rori-ink);
+  }
+
+  .rori-palette::backdrop {
+    background: var(--rori-backdrop);
+  }
+
+  .rori-palette__field {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--rori-line);
+  }
+
+  .rori-palette__crumbs {
+    padding-left: 16px;
+    font: 12px var(--rori-font-mono);
+    color: var(--rori-ink-muted);
+    white-space: nowrap;
+  }
+
+  .rori-palette__input {
+    flex: 1;
+    min-width: 0;
+    padding: 14px 16px;
+    font-size: 15px;
+    outline: none;
+  }
+
+  .rori-palette__crumbs:not([hidden])+.rori-palette__input {
+    padding-left: 8px;
+  }
+
+  .rori-palette__input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .rori-palette__results {
+    display: block;
+    max-height: 22rem;
+    overflow: auto;
+  }
+
+  .rori-palette__list {
+    padding: 4px;
+  }
+
+  .rori-palette__item {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 7px 12px;
+    border-radius: var(--rori-radius-sm);
+    cursor: pointer;
+  }
+
+  .rori-palette__item[aria-selected="true"] {
+    background: var(--rori-primary);
+    color: var(--rori-on-primary);
+  }
+
+  .rori-palette__label {
+    flex: 1;
+  }
+
+  .rori-palette__group {
+    font-size: 12px;
+    opacity: 0.6;
+  }
+
+  /* The command's keyboard shortcut, before its group. currentColor keeps it
+     legible on the inverted selected row too. */
+  .rori-palette__shortcut {
+    align-self: center;
+    padding: 0 5px;
+    border: 1px solid color-mix(in oklch, currentColor 30%, transparent);
+    border-radius: 4px;
+    color: inherit;
+    opacity: 0.75;
+    white-space: nowrap;
+  }
+
+  /* A command that asks first, armed by the first ↵ (rori-palette#arm). */
+  .rori-palette__confirm {
+    align-self: center;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .rori-palette__more,
+  .rori-palette__check {
+    margin: 0 4px;
+  }
+
+  .rori-palette__empty {
+    padding: 16px;
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-palette__hint {
+    padding: 8px 12px;
+    border-top: 1px solid var(--rori-line);
+    color: var(--rori-ink-muted);
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,110 @@
+/* The keyboard shortcuts modal (rori/_shortcuts). */
+@layer rori.components {
+  .rori-shortcuts {
+    width: min(52rem, calc(100vw - 2rem));
+    max-height: min(85vh, 44rem);
+    margin: auto;
+    padding: 0;
+    border: 1px solid var(--rori-ink);
+    border-radius: var(--rori-radius);
+    background: var(--rori-surface);
+    color: var(--rori-ink);
+  }
+
+  .rori-shortcuts[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rori-shortcuts::backdrop {
+    background: var(--rori-backdrop);
+  }
+
+  .rori-shortcuts__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--rori-line);
+  }
+
+  .rori-shortcuts__head h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .rori-shortcuts__close {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .rori-shortcuts__close:hover {
+    background: var(--rori-hover);
+  }
+
+  .rori-shortcuts__body {
+    overflow: auto;
+    padding: 12px 16px 16px;
+    columns: 2 18rem;
+    column-gap: 32px;
+  }
+
+  .rori-shortcuts__section {
+    break-inside: avoid;
+    margin-bottom: 16px;
+  }
+
+  .rori-shortcuts__section h3 {
+    margin: 0 0 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-shortcuts__section dl {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 4px 12px;
+    margin: 0;
+  }
+
+  .rori-shortcuts__section dd {
+    display: flex;
+    gap: 4px;
+    justify-content: end;
+    margin: 0;
+  }
+
+  .rori-shortcuts__note {
+    margin: 0 0 6px;
+    color: var(--rori-ink-muted);
+    font-size: 12px;
+  }
+
+  .rori-shortcuts kbd {
+    padding: 0 5px;
+    border: 1px solid var(--rori-line);
+    border-radius: 4px;
+    font: 12px var(--rori-font-mono);
+    white-space: nowrap;
+  }
+
+  .rori-shortcuts__foot {
+    padding: 10px 16px;
+    border-top: 1px solid var(--rori-line);
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-shortcuts__foot label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,98 @@
+/* Quake-style drop-down under the menubar (rori-terminal). Fixed, so it stays
+   out of the body grid; slides in via @starting-style. */
+@layer rori.components {
+  .rori-terminal {
+    position: fixed;
+    inset: 32px 0 auto;
+    z-index: 20;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto auto;
+    height: min(44vh, 28rem);
+    border-bottom: 1px solid var(--rori-ink);
+    background: var(--rori-surface);
+    color: var(--rori-ink);
+    font: 12px/1.6 var(--rori-font-mono);
+    translate: 0;
+    transition: translate 160ms var(--rori-ease);
+  }
+
+  @starting-style {
+    .rori-terminal {
+      translate: 0 -100%;
+    }
+  }
+
+  /* Menu bar at the bottom: the terminal rises from it instead. */
+  .bars-bottom .rori-terminal {
+    inset: auto 0 32px;
+    border-top: 1px solid var(--rori-ink);
+    border-bottom: 0;
+  }
+
+  @starting-style {
+    .bars-bottom .rori-terminal {
+      translate: 0 100%;
+    }
+  }
+
+  .rori-terminal__output {
+    overflow: auto;
+    padding: 10px var(--rori-gap) 4px;
+    white-space: pre-wrap;
+  }
+
+  .rori-terminal__entry--muted,
+  .rori-terminal__entry--item {
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-terminal__entry--ok {
+    color: var(--rori-success);
+  }
+
+  .rori-terminal__entry--error {
+    color: var(--rori-danger);
+  }
+
+  .rori-terminal__line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px var(--rori-gap);
+    border-top: 1px solid var(--rori-line);
+  }
+
+  .rori-terminal__prompt {
+    color: var(--rori-success);
+    white-space: nowrap;
+  }
+
+  .rori-terminal__input {
+    flex: 1;
+    min-width: 0;
+    outline: none;
+    caret-color: var(--rori-success);
+  }
+
+  .rori-terminal__suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 16px;
+    min-height: 26px;
+    padding: 0 var(--rori-gap) 6px;
+    color: var(--rori-ink-muted);
+  }
+
+  .rori-terminal__suggestion {
+    display: flex;
+    gap: 6px;
+  }
+
+  .rori-terminal__suggestion[aria-selected] {
+    color: var(--rori-ink);
+  }
+
+  .rori-terminal__group {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,156 @@
+/* Generated by `bin/rails rori:themes:build` from vendor/themes/ghostty — do not edit. */
+@layer rori.themes {
+  :root[data-theme="catppuccin-latte"] {
+    color-scheme: light;
+    --color-canvas: oklch(0.9178 0.0058 264.53);
+    --color-surface: oklch(0.9578 0.0058 264.53);
+    --color-ink: oklch(0.4355 0.0430 279.33);
+    --color-danger: oklch(0.5505 0.2155 19.81);
+    --color-success: oklch(0.6250 0.1772 140.44);
+    --color-warning: oklch(0.7140 0.1494 67.78);
+    --color-info: oklch(0.5586 0.2255 262.09);
+  }
+
+  :root[data-theme="catppuccin-mocha"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2029 0.0304 283.91);
+    --color-surface: oklch(0.2429 0.0304 283.91);
+    --color-ink: oklch(0.8787 0.0426 272.28);
+    --color-danger: oklch(0.7556 0.1297 2.76);
+    --color-success: oklch(0.8577 0.1092 142.72);
+    --color-warning: oklch(0.9193 0.0704 86.53);
+    --color-info: oklch(0.7664 0.1113 259.88);
+  }
+
+  :root[data-theme="everforest-dark-med"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2399 0.0123 232.92);
+    --color-surface: oklch(0.2799 0.0123 232.92);
+    --color-ink: oklch(0.8299 0.0405 86.05);
+    --color-danger: oklch(0.7086 0.1285 19.62);
+    --color-success: oklch(0.7732 0.0906 125.78);
+    --color-warning: oklch(0.8081 0.0863 83.70);
+    --color-info: oklch(0.7487 0.0631 185.49);
+  }
+
+  :root[data-theme="flexoki-light"] {
+    color-scheme: light;
+    --color-canvas: oklch(0.9501 0.0161 95.22);
+    --color-surface: oklch(0.9901 0.0161 95.22);
+    --color-ink: oklch(0.1696 0.0017 0.00);
+    --color-danger: oklch(0.5042 0.1648 27.84);
+    --color-success: oklch(0.5593 0.1335 122.92);
+    --color-warning: oklch(0.6333 0.1295 85.81);
+    --color-info: oklch(0.4818 0.1315 254.79);
+  }
+
+  :root[data-theme="github-dark-dimmed"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2308 0.0149 256.80);
+    --color-surface: oklch(0.2708 0.0149 256.80);
+    --color-ink: oklch(0.7829 0.0235 248.13);
+    --color-danger: oklch(0.7017 0.1642 26.07);
+    --color-success: oklch(0.6687 0.1421 144.47);
+    --color-warning: oklch(0.6888 0.1313 79.12);
+    --color-info: oklch(0.6841 0.1520 255.12);
+  }
+
+  :root[data-theme="gruvbox-material-dark"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2368 0.0000 0.00);
+    --color-surface: oklch(0.2768 0.0000 0.00);
+    --color-ink: oklch(0.8106 0.0567 81.23);
+    --color-danger: oklch(0.6768 0.1615 25.42);
+    --color-success: oklch(0.7478 0.1066 116.53);
+    --color-warning: oklch(0.7558 0.1133 77.04);
+    --color-info: oklch(0.7128 0.0546 179.19);
+  }
+
+  :root[data-theme="kanagawa-wave"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2033 0.0170 285.06);
+    --color-surface: oklch(0.2433 0.0170 285.06);
+    --color-ink: oklch(0.8755 0.0391 99.09);
+    --color-danger: oklch(0.5594 0.1670 23.09);
+    --color-success: oklch(0.6322 0.0698 136.92);
+    --color-warning: oklch(0.7290 0.0780 82.02);
+    --color-info: oklch(0.6937 0.0951 263.66);
+  }
+
+  :root[data-theme="melange-dark"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2278 0.0081 59.31);
+    --color-surface: oklch(0.2678 0.0081 59.31);
+    --color-ink: oklch(0.9157 0.0181 64.92);
+    --color-danger: oklch(0.6644 0.0746 17.07);
+    --color-success: oklch(0.6492 0.0586 146.44);
+    --color-warning: oklch(0.7491 0.1175 59.90);
+    --color-info: oklch(0.6544 0.0536 262.47);
+  }
+
+  :root[data-theme="nord"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2844 0.0229 264.18);
+    --color-surface: oklch(0.3244 0.0229 264.18);
+    --color-ink: oklch(0.8993 0.0164 262.75);
+    --color-danger: oklch(0.6061 0.1206 15.34);
+    --color-success: oklch(0.7683 0.0749 131.06);
+    --color-warning: oklch(0.8549 0.0892 84.09);
+    --color-info: oklch(0.6965 0.0591 248.69);
+  }
+
+  :root[data-theme="rose-pine-dawn"] {
+    color-scheme: light;
+    --color-canvas: oklch(0.9299 0.0113 71.90);
+    --color-surface: oklch(0.9699 0.0113 71.90);
+    --color-ink: oklch(0.4597 0.0629 289.56);
+    --color-danger: oklch(0.5989 0.1071 2.66);
+    --color-success: oklch(0.4909 0.0770 228.00);
+    --color-warning: oklch(0.7555 0.1459 69.74);
+    --color-info: oklch(0.6289 0.0661 210.12);
+  }
+
+  :root[data-theme="rose-pine-moon"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2204 0.0390 287.73);
+    --color-surface: oklch(0.2604 0.0390 287.73);
+    --color-ink: oklch(0.9088 0.0299 289.97);
+    --color-danger: oklch(0.6977 0.1565 4.22);
+    --color-success: oklch(0.6138 0.0926 228.00);
+    --color-warning: oklch(0.8429 0.1100 74.60);
+    --color-info: oklch(0.8219 0.0543 209.56);
+  }
+
+  :root[data-theme="tokyonight-storm"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2419 0.0355 274.75);
+    --color-surface: oklch(0.2819 0.0355 274.75);
+    --color-ink: oklch(0.8456 0.0611 274.76);
+    --color-danger: oklch(0.7227 0.1589 10.28);
+    --color-success: oklch(0.7953 0.1395 130.14);
+    --color-warning: oklch(0.7839 0.1057 75.43);
+    --color-info: oklch(0.7190 0.1322 264.20);
+  }
+
+  :root[data-theme="tomorrow-night-eighties"] {
+    color-scheme: dark;
+    --color-canvas: oklch(0.2572 0.0000 0.00);
+    --color-surface: oklch(0.2972 0.0000 0.00);
+    --color-ink: oklch(0.8452 0.0000 0.00);
+    --color-danger: oklch(0.7126 0.1515 20.16);
+    --color-success: oklch(0.7960 0.0889 144.68);
+    --color-warning: oklch(0.8707 0.1325 82.74);
+    --color-info: oklch(0.6676 0.0939 249.39);
+  }
+
+  :root[data-theme="zenbones-light"] {
+    color-scheme: light;
+    --color-canvas: oklch(0.9081 0.0035 39.48);
+    --color-surface: oklch(0.9481 0.0035 39.48);
+    --color-ink: oklch(0.3261 0.0172 234.39);
+    --color-danger: oklch(0.5016 0.1526 12.03);
+    --color-success: oklch(0.4940 0.0922 130.75);
+    --color-warning: oklch(0.4930 0.1115 43.62);
+    --color-info: oklch(0.4797 0.0823 236.95);
+  }
+}

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

@@ -0,0 +1,56 @@
+/* A green "<input>" tag on the window whose field has focus — keys type there
+   instead of reaching the desk (same field list as FIELDS in rori_controller.js).
+   Pure CSS: the window becomes the anchor through :has(:focus); the badges sit
+   in the untransformed viewport, so the window's overflow doesn't clip them and
+   anchor positioning follows the strip's transforms. */
+@layer rori.components {
+  .rori-col:not([data-w="1"])>.rori-win:has(:is(input, textarea, select, [contenteditable]):focus) {
+    anchor-name: --rori-typing;
+  }
+
+  /* Full-width columns have no room beside them: tag the inside corner instead. */
+  .rori-col[data-w="1"]>.rori-win:has(:is(input, textarea, select, [contenteditable]):focus) {
+    anchor-name: --rori-typing-inside;
+  }
+
+  .rori-typing-badge {
+    position: absolute;
+    z-index: 2;
+    display: none;
+    border-radius: 4px;
+    background: var(--rori-success);
+    color: var(--rori-surface);
+    font: 600 10px/1 var(--rori-font-mono);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  /* Hangs off the window's left edge into the gutter, below the title bar;
+     flips to the right edge when the window touches the viewport's left. */
+  .rori-typing-badge--side {
+    position-anchor: --rori-typing;
+    position-area: left span-bottom;
+    position-try-fallbacks: flip-inline;
+    margin-top: 40px;
+    padding: 6px 3px;
+    writing-mode: vertical-rl;
+  }
+
+  .rori-typing-badge--inside {
+    position-anchor: --rori-typing-inside;
+    position-area: center;
+    align-self: end;
+    justify-self: start;
+    margin: 0 0 10px 10px;
+    padding: 3px 6px;
+  }
+
+  .rori-viewport:has(.rori-col:not([data-w="1"]) > .rori-win :is(input, textarea, select, [contenteditable]):focus) .rori-typing-badge--side,
+  .rori-viewport:has(.rori-col[data-w="1"] > .rori-win :is(input, textarea, select, [contenteditable]):focus) .rori-typing-badge--inside {
+    display: block;
+  }
+
+  .is-overview .rori-typing-badge {
+    display: none;
+  }
+}

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

@@ -0,0 +1,52 @@
+/* Optional photo (Rori.wallpapers; UI › Wallpaper picks the mode). Windows are
+   opaque, so it shows through the gutters and on an empty desk. `safe` keeps it
+   inside the desk; `wallpaper-cover` runs it behind the menu bar too. */
+@layer rori.layout {
+
+  body.has-wallpaper:not(.wallpaper-cover) .rori-viewport,
+  body.has-wallpaper.wallpaper-cover {
+    background: var(--rori-wallpaper) center / cover no-repeat;
+  }
+
+  /* Tinted toward the theme's canvas so light and dark themes both stay calm
+     and the empty-desk hint stays readable. */
+  body.has-wallpaper .rori-viewport::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: color-mix(in oklch, var(--rori-canvas) 35%, transparent);
+    pointer-events: none;
+  }
+
+  body.has-wallpaper.wallpaper-cover .rori-menubar {
+    background: color-mix(in oklch, var(--rori-canvas) 72%, transparent);
+  }
+
+  body.has-wallpaper .rori-wallpaper {
+    background: color-mix(in oklch, var(--rori-surface) 88%, transparent);
+  }
+
+  /* The photo credit, in the desk's bottom-right corner (right above the menu
+     bar when that sits at the bottom). Small enough for the gutter under the
+     windows, so it stays above them without covering one. */
+  .rori-wallpaper-credit {
+    position: absolute;
+    z-index: 1;
+    right: 6px;
+    bottom: 3px;
+    color: var(--rori-ink-muted);
+    font-size: 10px;
+    line-height: 1;
+    text-shadow: 0 0 4px var(--rori-canvas);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .rori-wallpaper-credit:hover {
+    color: var(--rori-ink);
+  }
+
+  body:not(.has-wallpaper) .rori-wallpaper-credit {
+    display: none;
+  }
+}