basis-design 0.1.0 → 0.1.1

package/server/workspace.ts

@@ -4,7 +4,7 @@ import { readdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { DEFAULT_DESIGN, parseDesignText, type Design } from "../shared/design.ts";
 import { fixedColorFindings } from "../shared/fixed-colors.ts";
-import type { DesignState, HistoryEntry, Snapshot } from "../shared/protocol.ts";
+import type { DesignState, HistoryEntry, Snapshot, TemplateUpdate } from "../shared/protocol.ts";
 import { REVIEW_FILE, type ReviewState } from "../shared/review.ts";
 import { git, lines, typecheck } from "./exec.ts";
 import { commitToHistory, describeSource, loadHistory, type EntryMeta, type Source } from "./history.ts";
@@ -12,6 +12,7 @@ import { DESIGN_FILE, isSourcePath, PRODUCT_FILE, relativeInside, SOURCE_DIRS }
 import { reachedSpecimens } from "./reach.ts";
 import { Reviews } from "./reviews.ts";
 import { claimWorkspaceFormat, seedWorkspace, writeGeneratedFiles } from "./setup.ts";
+import { recordTemplateVersion, templateUpdate, writeTemplateCopy } from "./template.ts";
 import { Snapshots } from "./snapshots.ts";
 
 const DIFF_LIMIT = 400_000;
@@ -46,6 +47,8 @@ export class Workspace extends EventEmitter<Events> {
   /** A hand edit being checked and recorded (see onFsEvent); close() waits for it. */
   private settling: Promise<void> = Promise.resolve();
   private closed = false;
+  /** A newer starter template this workspace has not caught up with (see server/template.ts). */
+  private template: TemplateUpdate | null = null;
   /** True while an agent turn runs; its changes are committed once, when the turn ends. */
   agentActive = false;
 
@@ -73,6 +76,8 @@ export class Workspace extends EventEmitter<Events> {
     const hasCommits = (await git(this.dir, ["rev-list", "-n", "1", "--all"]).catch(() => "")).trim() !== "";
     await this.commit(hasCommits ? (note ? "upgrade" : "external") : "init", note ? { label: note } : {});
     this.history = await loadHistory(this.dir);
+    this.template = await templateUpdate(this.dir);
+    if (this.template) await writeTemplateCopy(this.dir);
     // Copies of past versions from earlier runs, except the open review's starting point.
     await this.snapshots.prune(this.reviews.state?.baseline);
     await this.readReviewRequest();
@@ -101,9 +106,22 @@ export class Workspace extends EventEmitter<Events> {
       reviewErrors: this.reviews.errors,
       colorFindings: this.colorFindings,
       workspace: this.dir,
+      templateUpdate: this.template,
     };
   }
 
+  get templateUpdate(): TemplateUpdate | null {
+    return this.template;
+  }
+
+  /** Records the newer template as caught up with, whether its changes were brought in or skipped. */
+  async settleTemplateUpdate(): Promise<void> {
+    if (!this.template) return;
+    await recordTemplateVersion(this.dir, this.template.to);
+    this.template = null;
+    this.emit("design", this.state);
+  }
+
   get entries(): HistoryEntry[] {
     return this.history;
   }

package/shared/protocol.ts

@@ -126,6 +126,17 @@ export interface DesignState {
   /** Colours in tokens and stylesheets that stay the same in both themes (see shared/fixed-colors.ts). */
   colorFindings: string[];
   workspace: string;
+  /** A newer starter template whose changes the agent can bring into this workspace; null when caught up. */
+  templateUpdate: TemplateUpdate | null;
+}
+
+/** A newer starter template the workspace has not caught up with (see server/template.ts). */
+export interface TemplateUpdate {
+  /** The template version the workspace last caught up with (0: before versions were recorded). */
+  from: number;
+  to: number;
+  /** Starter files the workspace has changed, which differ from the current template. */
+  files: string[];
 }
 
 /** A past version materialised for a review: its tokens, and where the preview can import its source. */
@@ -223,4 +234,8 @@ export type ClientMessage =
    */
   | { type: "project-repo"; id: string; repo: string | null; bringIn?: boolean }
   /** Starts the guided turn that brings the open project's product repo design system into the workspace. */
-  | { type: "import-design" };
+  | { type: "import-design" }
+  /** Starts the guided turn that brings the newer starter template's changes into the workspace. */
+  | { type: "template-update" }
+  /** Marks the newer template as seen without bringing its changes in. */
+  | { type: "template-skip" };

package/src/Workbench.tsx

@@ -214,9 +214,10 @@ export function Workbench({ state, send }: { state: BridgeState; send: (message:
         picking={picking}
         onTogglePick={() => (picking ? finishPicking() : setPicking(true))}
         reviewing={Boolean(review)}
+        resizer={!chatHidden && <ChatResizer width={chatWidth} onResize={setChatWidth} />}
       />
-      {!chatHidden && <ChatResizer width={chatWidth} onResize={setChatWidth} />}
       <main className={styles.main}>
+        <h1 className="visually-hidden">Basis</h1>
         <TopBar
           chatHidden={chatHidden}
           onToggleChat={() => setChatHidden((hidden) => !hidden)}
@@ -236,6 +237,7 @@ export function Workbench({ state, send }: { state: BridgeState; send: (message:
               projects={state.projects}
               agentBusy={state.agent?.status === "busy"}
               error={state.projectError}
+              templateUpdate={state.design?.templateUpdate ?? null}
               send={send}
             />
           }

package/src/chat/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, type ReactNode } from "react";
 import type { Annotation } from "../../shared/annotations.ts";
 import {
   AGENT_IDS,
@@ -38,6 +38,8 @@ interface ChatPanelProps {
   onTogglePick: () => void;
   /** True while a review is open. */
   reviewing: boolean;
+  /** The handle that resizes the panel; inside it, so it belongs to the panel's landmark. */
+  resizer?: ReactNode;
 }
 
 const STATUS_TEXT: Record<AgentState["status"], string> = {
@@ -58,6 +60,7 @@ export function ChatPanel({
   onDraft,
   send,
   composerRef,
+  resizer,
   ...composer
 }: ChatPanelProps) {
   const scroller = useRef<HTMLDivElement>(null);
@@ -116,9 +119,14 @@ export function ChatPanel({
         </div>
       )}
 
+      {/* Focusable, so the conversation scrolls from the keyboard too; not role="log", which would read the
+          streamed reply aloud as it arrives. */}
       <div
         ref={scroller}
         className={styles.log}
+        role="region"
+        aria-label="Conversation"
+        tabIndex={0}
         onScroll={(event) => {
           const el = event.currentTarget;
           pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
@@ -213,6 +221,7 @@ export function ChatPanel({
         }}
         {...composer}
       />
+      {resizer}
     </aside>
   );
 }

package/src/shell/ProjectMenu.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ClientMessage, ProjectEntry } from "../../shared/protocol.ts";
+import type { ClientMessage, ProjectEntry, TemplateUpdate } from "../../shared/protocol.ts";
 import styles from "./Shell.module.css";
 
 interface ProjectMenuProps {
@@ -9,6 +9,8 @@ interface ProjectMenuProps {
   agentBusy: boolean;
   /** The server's answer to the last failed project request. */
   error: { message: string } | null;
+  /** A newer starter template the open project can bring in. */
+  templateUpdate: TemplateUpdate | null;
   send: (message: ClientMessage) => void;
 }
 
@@ -18,7 +20,7 @@ type Dialog = "create" | "open" | "repo" | null;
  * The open project, where the brand used to be, with the list of projects:
  * switch to one, start a new one, or open a workspace folder from elsewhere.
  */
-export function ProjectMenu({ project, projects, agentBusy, error, send }: ProjectMenuProps) {
+export function ProjectMenu({ project, projects, agentBusy, error, templateUpdate, send }: ProjectMenuProps) {
   const [open, setOpen] = useState(false);
   const [dialog, setDialog] = useState<Dialog>(null);
   /** The error when the last request went out; a different one (even with the same text) is the answer to it. */
@@ -66,6 +68,11 @@ export function ProjectMenu({ project, projects, agentBusy, error, send }: Proje
       >
         <span className={styles.brandMark} aria-hidden />
         <span className={styles.projectName}>{project?.name ?? "Basis"}</span>
+        {templateUpdate && (
+          <span className={styles.updateDot}>
+            <span className="visually-hidden">, starter template update available</span>
+          </span>
+        )}
         <svg viewBox="0 0 16 16" aria-hidden>
           <path d="m4.5 6.5 3.5 3.5 3.5-3.5" />
         </svg>
@@ -154,6 +161,34 @@ export function ProjectMenu({ project, projects, agentBusy, error, send }: Proje
               </div>
             </div>
           )}
+          {templateUpdate && (
+            <div className={styles.projectRepo}>
+              <span className={styles.projectRepoHint}>
+                Basis' starter components have improved since this project began. Files nobody changed are already up to
+                date; the agent brings the improvements into{" "}
+                {templateUpdate.files.length === 1
+                  ? "the one changed file"
+                  : `${templateUpdate.files.length} changed files`}
+                , in a review.
+              </span>
+              <div className={styles.projectRepoActions}>
+                <button
+                  type="button"
+                  className={styles.chromeButton}
+                  disabled={agentBusy}
+                  onClick={() => {
+                    setOpen(false);
+                    send({ type: "template-update" });
+                  }}
+                >
+                  Bring them in
+                </button>
+                <button type="button" className={styles.chromeButton} onClick={() => send({ type: "template-skip" })}>
+                  Skip
+                </button>
+              </div>
+            </div>
+          )}
           <div className={styles.projectActions}>
             <button
               type="button"
@@ -255,7 +290,7 @@ function ProjectDialog({ mode, current, error, onSubmit, onClose }: ProjectDialo
             <h2>{mode === "create" ? "New project" : mode === "repo" ? "Link a product repo" : "Open a folder"}</h2>
             <p>
               {mode === "create"
-                ? "A design system of its own, with its own history and chat. It lives in Basis' workspaces folder."
+                ? "A design system of its own, with its own history and chat. It is saved in ~/.basis/workspaces (or BASIS_HOME)."
                 : mode === "repo"
                   ? `The repo ${current?.name ?? "this project"} designs for. The agent reads it to match the product's look, components and terms; it never writes there.`
                   : "A Basis workspace anywhere on this computer, or an empty or new folder (inside a product repo, say) for Basis to set up."}

package/src/shell/Shell.module.css

@@ -904,6 +904,15 @@ a.primaryButton {
   background: var(--app-ink-2);
 }
 
+/* A newer starter template is waiting in the project menu. */
+.updateDot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--app-signal);
+}
+
 .projectButton svg {
   flex: none;
   width: 14px;

package/template/CHANGES.md

@@ -0,0 +1,25 @@
+# Starter template changes
+
+What changed in Basis' starter components, patterns and views, by template version. Basis updates the files a
+workspace never changed by itself; the agent brings these changes into the ones it did change, keeping the
+design system's own look.
+
+## 1
+
+- Reduced motion in every component and pattern: under `@media (prefers-reduced-motion: reduce)` nothing slides,
+  zooms, shimmers or loops (presses do not shrink, cards do not lift, the indeterminate progress bar and the
+  skeleton stand still, tooltips, toasts and dialogs only fade, the tab indicator and underlines jump). Spinners
+  keep turning, since they are the only sign that work goes on. See the `@media (prefers-reduced-motion: reduce)`
+  block at the end of each stylesheet.
+- Field: the label is a `<label for>` above the control, then the hint, then the error, then the control. The hint
+  and the error are tied to the control with `aria-describedby`, the control gets `aria-invalid` from the Field's
+  error (through a React context, so TextInput, Textarea and Select need no extra props), and the error has an
+  icon as well as the danger colour.
+- Navbar responds to its own width, as a size container: from 1024px everything sits in the bar; from 800px the
+  search becomes a button that opens the field below the bar, with focus in it; under 800px the links, the search
+  and the actions move into a menu behind a menu button. `compact` still forces the narrow layout, and the menu
+  keeps its own open state unless `menuOpen` is given.
+- AppShell is a size container named `app-shell`; SidebarNav becomes its icon rail inside a narrow one (under
+  640px). The rail's grid column is pinned so its icons stay centred.
+- Small text that used `textSubtle` (SidebarNav section titles, StatCard hints) uses `textMuted`, since subtle is
+  held to 3:1 and small text needs 4.5:1.

package/template/components/Field.module.css

@@ -23,9 +23,19 @@
 }
 
 .error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
   color: var(--color-danger);
 }
 
+.errorIcon {
+  flex: none;
+  width: 1.15em;
+  height: 1.15em;
+  margin-top: 0.1em;
+}
+
 .input {
   width: 100%;
   min-width: 0;

package/template/components/Field.tsx

@@ -31,6 +31,12 @@ export function Field({ label, hint, error, children }: FieldProps) {
       )}
       {error && (
         <span id={errorId} className={styles.error}>
+          {/* An icon as well as the colour, so the error does not rely on colour alone. */}
+          <svg className={styles.errorIcon} viewBox="0 0 16 16" aria-hidden>
+            <circle cx="8" cy="8" r="6.25" fill="none" stroke="currentColor" strokeWidth="1.5" />
+            <path d="M8 4.75v3.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            <circle cx="8" cy="11.1" r="0.9" fill="currentColor" />
+          </svg>
           {error}
         </span>
       )}

package/template/history.json

@@ -0,0 +1,122 @@
+{
+  "components/Button.module.css": [
+    "2d8464bdd6324a9283902a51948359659223a1d14a14699ec05db3c48a1e6f5e",
+    "e1089f131e089edbea8c96cfd932e999b65e5987e7aa46ffa6ec1771bcc58913"
+  ],
+  "components/Button.specimen.tsx": [
+    "78be211c4ebe57be4d3e8fbda178aa1ea4a50874427f50918d5b519b30f1366d"
+  ],
+  "components/Controls.module.css": [
+    "11cd2a14dff9b941386b1e3f73904021501b5d11b92e2c2a5c7db740ccdebf78",
+    "6180d0705587ce7c9d721367b3a93968be63620470ca8053842cc9b97416c17f"
+  ],
+  "components/Controls.specimen.tsx": [
+    "44d057760788eafde4648ff245bc88757148aea950d784679a9013929b2fd3f6"
+  ],
+  "components/Controls.tsx": [
+    "bf2dcb69e0d11f2ff9c79be769689c1d2be4425824ecc2aafdbb9d4e916cc7a2"
+  ],
+  "components/Display.module.css": [
+    "5911e1d5ca62edb6baaca2b887a92f7f75e3f71c59d333bc4bffc35d5581481e"
+  ],
+  "components/Display.specimen.tsx": [
+    "4a00e90b3e9e18031132c36b3e9e2f2e338abe59901f99b3418cce9122de72a2",
+    "f833c9458080cf9cb05aca5f61b1e314ed2069466f5567f3a36add6c5f33cb53"
+  ],
+  "components/Display.tsx": [
+    "88ad53b91e4faccf1c85d8e60f7f8c5a98cca4b2061ac583ee3a87796ac92661",
+    "f676585a048fea80de64e2be1cd2032d63547d6891011deec9cf3540763a039f"
+  ],
+  "components/Field.module.css": [
+    "8a02df76c308cbe1c731cd5cfca4c2c7d5f1ae2492c4266d11a60c24143281d9"
+  ],
+  "components/Field.tsx": [
+    "170d7e50605f5bc342fe03a0f6fcb72e24e7ad4481ddd7b73402fbb62272bb2d",
+    "9c278ae0f37efe55fd73b03204c0e3f6997d6c3c7873856798efc8ce95222ef0",
+    "ebb3f7ed65f00184d71a0697871181d8f2fb8d723dc28d94171b11e0cc44ebe7"
+  ],
+  "components/Overlay.module.css": [
+    "15f18fe8494bb008e85f06a8ebd2d491826e565ddb16a6a01b270e115977838b",
+    "f1bae693a614018f19d7f9cdb2f5d9b950a711016d2639ba0ea03acbe05ef797"
+  ],
+  "components/Tabs.module.css": [
+    "f794ecc0a17aea3390c72851f56a005a16b9a5c532809c57b0bd597f49faf7cc"
+  ],
+  "components/Tabs.specimen.tsx": [
+    "0c871b0745e9206a6301025b0fc2e49b15b6798c8fe34499a04fe212cb0ca8d3"
+  ],
+  "components/Tabs.tsx": [
+    "7a3178fd1fce2697329049a23581ed40a018777b9a8d121e92b6cf0bbb20beb1"
+  ],
+  "components/index.ts": [
+    "c8e48a994b9283dbfba7cf83d15f8ccb327ea4b09f1138f84153dcd206262626"
+  ],
+  "components/specimen.ts": [
+    "03370daf9bba1c4329d3dac7b76199970cab9c11a6ea2d23e1a484ead80d36d6",
+    "1f826f8c8f183e311fd20cca0e5e3c138ac2775c4e156862600c24e9dad7cf7d",
+    "e04c6fc2a3e85090b7672d229d95ca8c5a42009f6397332230d324357b993169"
+  ],
+  "patterns/AppShell.module.css": [
+    "8327a6a221d3822f31e2413ea2d83978e89dc5ed093ab348efbc3fb74659a76b"
+  ],
+  "patterns/AppShell.specimen.tsx": [
+    "bbf6e40b1eb59ab81faec7d298daedf964721210acd319518370d654828e61b5"
+  ],
+  "patterns/DataTable.specimen.tsx": [
+    "07ddde9be4ff6b5fbe080145b59cb98719ebf17665efea5168ce653e45e52328",
+    "fef38e643e27c8515167d03b2f9578c4f490dc3c472f39db5ec8a3f8de5b0405"
+  ],
+  "patterns/DataTable.tsx": [
+    "bee57f1686bbbfeb08670475c687c18f8e33b19b09b804d2e3b857c9575f4227"
+  ],
+  "patterns/EmptyState.tsx": [
+    "7b9f3ad1ad9467b537154426823da185062d99f9b5481329ec87c8e21edefe19"
+  ],
+  "patterns/FormSection.specimen.tsx": [
+    "947b384b3ff7b0874fd7210b2db767623ba980142e33f6daf98261b5c725b363"
+  ],
+  "patterns/Navbar.module.css": [
+    "7a4c07e69235c8b0667424a3794a7ca927fb6c1a852b174fed9c445d3ce31b05",
+    "a3d8cdfd7817bee2deca487115863b8e9a904159ccf1a62a4252269f9a00974b"
+  ],
+  "patterns/Navbar.specimen.tsx": [
+    "c5dca4b21abd2fb9e6a3dc6c881dd946691eb4b193030355897cf4837c1fbd33",
+    "e0db053892604c3e48fe688481f2d7659179aa37f15f7a1733c65eaf58d2037b",
+    "ff2ef3ab16212f5d49952a425d4a55b5c1a23bbf0273032fcbf309ef4cc42425"
+  ],
+  "patterns/Navbar.tsx": [
+    "629e3a72fac39fbddcef20ee2761b20637ac6ecf931e7c40ec497fb5717c76b5",
+    "a519ebc213b050332897d49ca3d3f218e0f81657b45dfeabf12ba4851e27ea9d",
+    "c30d7c50eca1d5f5403bfe279f82c0fc0892c3ec7c117eba529a2c4d67011e85"
+  ],
+  "patterns/PageHeader.specimen.tsx": [
+    "ed1adf47bc0873aa2888e3f344b4e6d8949cdcbe4d5932a05c014e6552872107"
+  ],
+  "patterns/SidebarNav.module.css": [
+    "c5c61ad5ef76d19fdafdd62c3e7d2762c8f4e65a659d79630679cc77143c6fcf"
+  ],
+  "patterns/SidebarNav.specimen.tsx": [
+    "5ebc259eaec7004cd0836c3f108e6f26e4c209f1722a5102971edd3048bffcb4"
+  ],
+  "patterns/SidebarNav.tsx": [
+    "e11bb61819ea9ff36d963eec2b92f1d7cf2b4e2b14e74edc7a9ab001338a4fc8"
+  ],
+  "patterns/StatCard.module.css": [
+    "30c76bf5527125a41d5237b01aba8d7f3575df6732edc1b0636a1086e4304c45"
+  ],
+  "patterns/StatCard.specimen.tsx": [
+    "1841a58bce6c35b23f8715bb00c04b641381c9c7d829accb9a2900d49bf9709d"
+  ],
+  "patterns/StatCard.tsx": [
+    "55a9c20673d8a8a191ac2ee70fa27a0ec9ac65f4ea1cf8af5a7be654209e31c8"
+  ],
+  "patterns/icons.tsx": [
+    "5a7c631c8ad5195f82b852814c850af74c3807e09aff1dafec465ce92adc364c"
+  ],
+  "patterns/index.ts": [
+    "06b2fe73440972fbd91e9c64d8a3f4a5cf37e1f2d749cc6a821ce59f9b9d8c02"
+  ],
+  "patterns/specimen-data.ts": [
+    "4e355b5dc7eeaed260e6092f88cf85194a9377bce6accce5e9db6e97e22761e3"
+  ]
+}

package/template/patterns/Navbar.module.css

@@ -87,7 +87,8 @@
 .link:focus-visible,
 .link[data-force="focus"],
 .menuLink:focus-visible,
-.menuButton:focus-visible {
+.menuButton:focus-visible,
+.searchButton:focus-visible {
   outline: var(--focus-ring-width) solid var(--color-focus-ring);
   outline-offset: calc(var(--focus-ring-width) * -1);
 }
@@ -155,7 +156,8 @@
   display: inline-flex;
 }
 
-.menuButton {
+.menuButton,
+.searchButton {
   display: none;
   flex: none;
   place-items: center;
@@ -170,7 +172,8 @@
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
 
-.menuButton:hover {
+.menuButton:hover,
+.searchButton:hover {
   background: var(--color-secondary);
 }
 
@@ -187,32 +190,55 @@
   gap: 2px;
 }
 
-/* Narrow layout, forced by compact or when the bar is under 960px wide: the links, the search and the actions
-   move into the menu behind the menu button. */
-.navbar[data-compact] .menuButton {
-  display: grid;
+/* Three layouts by the bar's own width. From 1024px everything sits in the bar. From 800px the search becomes a
+   button that opens it below the bar. Under 800px, or with compact, the links, the search and the actions move
+   into the menu behind the menu button. */
+@container (width < 1024px) {
+  .bar .search {
+    display: none;
+  }
+
+  .searchButton,
+  .menu {
+    display: grid;
+  }
+
+  .menu :is(.actions, .menuLinks) {
+    display: none;
+  }
 }
 
-.navbar[data-compact] .menu {
+.navbar[data-compact] .menuButton,
+.navbar[data-compact] .menu,
+.navbar[data-compact] .menu .menuLinks {
   display: grid;
 }
 
-.navbar[data-compact] .bar :is(.links, .search, .actions) {
+.navbar[data-compact] .menu .actions {
+  display: flex;
+}
+
+.navbar[data-compact] .bar :is(.links, .search, .actions, .searchButton) {
   display: none;
 }
 
-@container (width < 960px) {
+@container (width < 800px) {
   .bar {
     gap: var(--space-3);
     padding-inline: var(--space-3);
   }
 
   .menuButton,
-  .menu {
+  .menu,
+  .menu .menuLinks {
     display: grid;
   }
 
-  .bar :is(.links, .search, .actions) {
+  .menu .actions {
+    display: flex;
+  }
+
+  .bar :is(.links, .search, .actions, .searchButton) {
     display: none;
   }
 }

package/template/patterns/Navbar.specimen.tsx

@@ -101,7 +101,7 @@ export default defineSpecimen({
     },
     {
       kind: "block",
-      title: "Narrow · under 960px the links and search move behind the menu",
+      title: "Narrow · under 800px the links and search move behind the menu",
       render: () => (
         <div style={{ ...frame, maxWidth: 380 }}>
           <Navbar

package/template/patterns/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useId, useState, type ReactNode } from "react";
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { Avatar } from "../components/index.ts";
 import { Icon } from "./icons.tsx";
 import styles from "./Navbar.module.css";
@@ -25,7 +25,7 @@ export interface NavbarProps {
   elevated?: boolean;
   /**
    * Forces the narrow layout, where links, search and actions move behind a menu button. Without it the bar switches by
-   * itself when it is narrower than 960px.
+   * itself: under 1024px the search becomes a button, under 800px everything moves behind the menu button.
    */
   compact?: boolean;
   /** Controls the menu from outside; otherwise the bar keeps its own open state. */
@@ -51,6 +51,18 @@ export function Navbar({
   const [ownOpen, setOwnOpen] = useState(false);
   const open = menuOpen ?? ownOpen;
   const toggle = onMenuToggle ?? (() => setOwnOpen((value) => !value));
+  const menu = useRef<HTMLDivElement>(null);
+  // The search button opens the panel below the bar; the field there gets focus, so typing can start at once.
+  const focusSearch = useRef(false);
+  const openSearch = () => {
+    focusSearch.current = !open;
+    toggle();
+  };
+  useEffect(() => {
+    if (!open || !focusSearch.current) return;
+    focusSearch.current = false;
+    menu.current?.querySelector("input")?.focus();
+  }, [open]);
 
   const search = searchPlaceholder && (
     <label className={styles.search}>
@@ -102,6 +114,18 @@ export function Navbar({
         </nav>
         <div className={styles.end}>
           {search}
+          {searchPlaceholder && (
+            <button
+              type="button"
+              className={styles.searchButton}
+              aria-expanded={open}
+              aria-controls={menuId}
+              aria-label="Search"
+              onClick={openSearch}
+            >
+              <Icon name="search" size={18} />
+            </button>
+          )}
           {actions && <div className={styles.actions}>{actions}</div>}
           {user && (
             <span className={styles.user} title={user.name}>
@@ -111,7 +135,7 @@ export function Navbar({
         </div>
       </div>
       {open && (
-        <div id={menuId} className={styles.menu}>
+        <div id={menuId} ref={menu} className={styles.menu}>
           {search}
           {actions && <div className={styles.actions}>{actions}</div>}
           <nav className={styles.menuLinks} aria-label="Main">