cursedbelt 5.79.3 → 5.80.0

package/src/react/activity-bar/ActivityBar.tsx

@@ -63,6 +63,14 @@
  * It folds again when the mouse leaves, focus leaves, a touch lands outside it, Escape is
  * pressed, or a control is chosen. {@link ActivityBarProps.expandable} `false` opts out.
  *
+ * ── 🔒 It can be LOCKED open (forge task 3183) ──────────────────────────────────────────
+ * The owner, 2026-10-14: *"add lock button for the left nav menu. when locked it should stay
+ * open and the right collapses to fit screen size. this does not apply to mobile."* Given
+ * {@link ActivityBarProps.onLockedChange}, the rail draws a lock at its floor; locked, it stays
+ * expanded and takes its expanded width IN the layout — the page beside it narrows instead of
+ * being covered, Linear's and Obsidian's pinned sidebar. Under {@link LOCK_MIN_WIDTH} (a phone)
+ * there is no lock and a saved one is ignored: a 15rem rail on a 390px screen is the page.
+ *
  * ── Plain CSS, deliberately ─────────────────────────────────────────────────────────────
  * `activityBar.css` under the `cbab-` prefix, the same convention (and the same reason) as
  * `fileTree.css` and `denseGallery.css`: this mounts inside apps whose Tailwind build cannot
@@ -83,6 +91,7 @@ import {
   useState,
 } from 'react';
 import { Tooltip } from '../components/Tooltip.js';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
 import './activityBar.css';
 import { cn, RAW_BUTTON } from '../lib/cn.js';
 
@@ -169,8 +178,20 @@ export interface ActivityBarProps {
    * icon-only column (a rail whose every control is already named beside it).
    */
   expandable?: boolean;
+  /**
+   * Whether the rail is locked open — see the file header. Controlled: the consumer keeps it
+   * (per device, usually) and hears the lock's presses through {@link onLockedChange}.
+   */
+  locked?: boolean;
+  /** Present ⇒ the rail draws its lock. Ignored when {@link expandable} is `false`. */
+  onLockedChange?: (locked: boolean) => void;
 }
 
+const noop = (): void => {};
+
+/** The narrowest screen the lock works on — below it the rail stays an overlay (a phone). */
+export const LOCK_MIN_WIDTH = 768;
+
 /** How long a mouse rests on the rail before it opens its words. */
 export const EXPAND_HOVER_MS = 350;
 /** How long a touch holds before the rail opens its words — Android's long-press. */
@@ -180,7 +201,15 @@ const PRESS_SLOP_PX = 10;
 
 type ExpandedBy = 'hover' | 'focus' | 'press' | null;
 
-function ActivityButton({ item, onChosen }: { item: ActivityBarItem; onChosen: () => void }): JSX.Element {
+function ActivityButton({
+  item,
+  onChosen,
+  className,
+}: {
+  item: ActivityBarItem;
+  onChosen: () => void;
+  className?: string;
+}): JSX.Element {
   const disabled = item.unavailableReason !== undefined;
   const button = (
     <button
@@ -189,7 +218,7 @@ function ActivityButton({ item, onChosen }: { item: ActivityBarItem; onChosen: (
       // layer, which fights `.cbab-btn`'s fixed 48px column geometry on cascade order rather
       // than composing with it — the same split `GalleryActionButton` records.
       type='button'
-      className={cn(RAW_BUTTON, 'cbab-btn')}
+      className={cn(RAW_BUTTON, 'cbab-btn', className)}
       data-active={item.active || undefined}
       onClick={
         disabled
@@ -233,6 +262,16 @@ function ActivityButton({ item, onChosen }: { item: ActivityBarItem; onChosen: (
   );
 }
 
+/** The lock's glyph — a padlock, its shackle shut while the rail is locked open. */
+function LockGlyph({ locked }: { locked: boolean }): JSX.Element {
+  return (
+    <svg aria-hidden='true' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='1.7' strokeLinecap='round' strokeLinejoin='round'>
+      <rect x='5' y='11' width='14' height='10' rx='2' />
+      <path d={locked ? 'M8 11V7a4 4 0 0 1 8 0v4' : 'M8 11V7a4 4 0 0 1 7.6-1.7'} />
+    </svg>
+  );
+}
+
 function Group({ items, onChosen }: { items: readonly ActivityBarItem[]; onChosen: () => void }): JSX.Element | null {
   if (items.length === 0) return null;
   return (
@@ -379,8 +418,14 @@ export function ActivityBar({
   ariaLabel = 'Views and settings',
   className,
   expandable = true,
+  locked = false,
+  onLockedChange,
 }: ActivityBarProps): JSX.Element {
-  const { root, by, handlers, collapse } = useExpand(expandable);
+  const wide = useMediaQuery(`(min-width: ${LOCK_MIN_WIDTH}px)`);
+  const lockable = expandable && onLockedChange !== undefined && wide;
+  const isLocked = lockable && locked;
+  // Locked, there is nothing to open or fold: the hover, focus and hold machinery stands down.
+  const { root, by, handlers, collapse } = useExpand(expandable && !isLocked);
   return (
     /*
      * A `<fieldset>`, matching `DenseGalleryShell`'s `cbgd-order` next to it — a group of
@@ -393,7 +438,8 @@ export function ActivityBar({
       className={className ? `cbab ${className}` : 'cbab'}
       aria-label={ariaLabel}
       data-expandable={expandable || undefined}
-      data-expanded={by ?? undefined}
+      data-expanded={isLocked ? 'locked' : (by ?? undefined)}
+      data-locked={isLocked || undefined}
       {...handlers}
     >
       {/* The panel is what widens; the fieldset keeps its 48px track, so expanding is an
@@ -405,6 +451,23 @@ export function ActivityBar({
             starts its top group at the top instead of centring it. */}
         <div className='cbab-spacer' />
         <Group items={bottom} onChosen={collapse} />
+        {lockable && onLockedChange ? (
+          <div className='cbab-group'>
+            <ActivityButton
+              className='cbab-lock'
+              // A stable name with the state in aria-pressed — ActivityBarItem.label's own rule.
+              item={{
+                id: 'cbab-lock',
+                label: 'Keep the menu open',
+                title: isLocked ? 'Let the menu fold away again' : 'Keep the menu open — the page beside it makes room',
+                icon: <LockGlyph locked={isLocked} />,
+                active: isLocked,
+                onSelect: () => onLockedChange(!isLocked),
+              }}
+              onChosen={noop}
+            />
+          </div>
+        ) : null}
       </div>
     </fieldset>
   );

package/src/react/activity-bar/activityBar.css

@@ -56,6 +56,26 @@
 	box-shadow: var(--shadow-overlay);
 }
 
+/*
+ * 🔒 Locked open (forge task 3183): the TRACK takes the expanded width, so the page beside the
+ * rail narrows to fit instead of being covered — no overlay shadow, no lift over its neighbours.
+ * The component only sets `data-locked` on a screen at least LOCK_MIN_WIDTH wide.
+ */
+.cbab[data-locked] {
+	inline-size: var(--cbab-expanded);
+	flex-basis: var(--cbab-expanded);
+	z-index: auto;
+}
+
+.cbab[data-locked] .cbab-panel {
+	box-shadow: none;
+}
+
+/* The lock is a toggle, not a place: pressed, it is lit, without the "you are here" hairline. */
+.cbab .cbab-lock[data-active]::before {
+	content: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
 	.cbab-panel {
 		transition: none;

package/src/react/code-editor/CodeEditor.tsx

@@ -9,7 +9,7 @@
 // RHF via Controller:
 //   <Controller control={control} name='query'
 //     render={({ field }) => <CodeEditor value={field.value} onChange={field.onChange} language='sql' />} />
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -20,12 +20,19 @@ import {
 } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
 import { Compartment, EditorState, Transaction } from '@codemirror/state';
-import { EditorView, keymap, lineNumbers as lineNumbersExt, placeholder as placeholderExt } from '@codemirror/view';
+import {
+  drawSelection,
+  EditorView,
+  keymap,
+  lineNumbers as lineNumbersExt,
+  placeholder as placeholderExt,
+} from '@codemirror/view';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
 import type { CodeLanguage } from './languages.js';
 import { loadLanguageExtension } from './languages.js';
-import { lineKeyBindings } from './lineAbove.js';
+import { editorKeyBindings } from './keys.js';
+import { plainInput } from './plainInput.js';
 import { cbEditorTheme, cbSyntaxHighlighting } from './theme.js';
 
 export interface CodeEditorProps {
@@ -45,7 +52,11 @@ export interface CodeEditorProps {
   lineWrapping?: boolean;
   /** Text shown, dimmed, while the document is empty. */
   placeholder?: string;
-  /** Let the browser spell-check the text — prose like markdown wants it, source does not. Default: false. */
+  /**
+   * Let the browser spell-check the text — prose like markdown wants it, source does not. Default:
+   * false. Only the red underline: autocorrect stays CodeMirror's `off` either way, because an OS
+   * that rewrites `--` to `—` or `"` to `“` rewrites the syntax (forge task 3184, `plainInput`).
+   */
   spellCheck?: boolean;
   /**
    * Called once with the live `EditorView` after it mounts — the seam for imperative work a
@@ -67,9 +78,15 @@ export interface CodeEditorProps {
   'aria-label'?: string;
 }
 
-// Fixed extensions shared across all instances — created once.
+// Fixed extensions shared across all instances — created once. Several cursors, as in VS Code:
+// ⌥-click adds one, ⌥⌘↑ / ⌥⌘↓ (`defaultKeymap`) one above or below, ⌘D the next match, Esc
+// back to one — `drawSelection` is what paints the cursors past the browser's single caret.
 const FIXED_EXTENSIONS: Extension[] = [
   history(),
+  EditorState.allowMultipleSelections.of(true),
+  drawSelection(),
+  EditorView.clickAddsSelectionRange.of((event) => event.altKey),
+  plainInput,
   indentOnInput(),
   bracketMatching(),
   syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
@@ -125,7 +142,7 @@ export function CodeEditor({
   const dynExtensions = useMemo<Extension[]>(() => {
     const exts: Extension[] = [
       indentUnit.of(' '.repeat(tabSize)),
-      keymap.of([...lineKeyBindings, ...defaultKeymap, ...historyKeymap, indentWithTab]),
+      keymap.of(editorKeyBindings),
     ];
     if (showLineNumbers) exts.push(lineNumbersExt());
     if (showFoldGutter) exts.push(foldGutterExt());
@@ -133,7 +150,7 @@ export function CodeEditor({
     if (placeholder) exts.push(placeholderExt(placeholder));
     // The name belongs on the element that takes focus — the textbox — not only on the wrapper.
     if (ariaLabel) exts.push(EditorView.contentAttributes.of({ 'aria-label': ariaLabel }));
-    if (spellCheck) exts.push(EditorView.contentAttributes.of({ spellcheck: 'true', autocorrect: 'on', autocapitalize: 'on' }));
+    if (spellCheck) exts.push(EditorView.contentAttributes.of({ spellcheck: 'true' }));
     if (readOnly) exts.push(EditorState.readOnly.of(true));
     if (langExtension) exts.push(langExtension);
     exts.push(...extraExtensions);

package/src/react/code-editor/keys.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from 'bun:test';
+import { EditorSelection, EditorState, type Transaction } from '@codemirror/state';
+import type { KeyBinding } from '@codemirror/view';
+import { editorKeyBindings } from './keys.js';
+import { selectAllOccurrences, selectNextOccurrence } from './occurrences.js';
+
+/** The command the editor runs for `key` on a Mac — the first binding that names it, as `keymap` resolves. */
+function macCommand(key: string): KeyBinding['run'] {
+  const named = (b: KeyBinding) => b.mac === key || (!b.mac && b.key === key.replace('Cmd-', 'Mod-'));
+  return editorKeyBindings.find(named)?.run;
+}
+
+function press(key: string, doc: string, at: number) {
+  let state = EditorState.create({ doc, selection: EditorSelection.cursor(at) });
+  const run = macCommand(key);
+  run?.({ state, dispatch: (tr: Transaction) => { state = tr.state; } } as never);
+  return { doc: state.doc.toString(), caret: state.selection.main.head };
+}
+
+describe('CodeEditor keys — VS Code on a Mac (forge task 3182)', () => {
+  test('⌘↑ / ⌘↓ jump to the top or bottom and leave the line where it is', () => {
+    expect(press('Cmd-ArrowUp', 'one\ntwo\nthree', 6)).toEqual({ doc: 'one\ntwo\nthree', caret: 0 });
+    expect(press('Cmd-ArrowDown', 'one\ntwo\nthree', 1)).toEqual({ doc: 'one\ntwo\nthree', caret: 13 });
+  });
+
+  test('⌥↑ / ⌥↓ move the line', () => {
+    expect(press('Alt-ArrowUp', 'one\ntwo', 5)).toEqual({ doc: 'two\none', caret: 1 });
+    expect(press('Alt-ArrowDown', 'one\ntwo', 1)).toEqual({ doc: 'two\none', caret: 5 });
+  });
+});
+
+describe('⌘D and ⇧⌘L — several cursors on the same word', () => {
+  const multi = EditorState.allowMultipleSelections.of(true);
+  function run(command: typeof selectNextOccurrence, state: EditorState): EditorState {
+    let next = state;
+    command({ state, dispatch: (tr: Transaction) => { next = tr.state; } });
+    return next;
+  }
+  const spans = (state: EditorState) => state.selection.ranges.map((r) => [r.from, r.to]);
+
+  test('⌘D takes the word under the caret, then each next match, wrapping, then stops', () => {
+    let state = EditorState.create({ doc: 'ab x ab y ab', selection: EditorSelection.cursor(6), extensions: multi });
+    state = run(selectNextOccurrence, state);
+    expect(spans(state)).toEqual([[5, 7]]);
+    state = run(selectNextOccurrence, state);
+    expect(spans(state)).toEqual([[5, 7], [10, 12]]);
+    state = run(selectNextOccurrence, state);
+    expect(spans(state)).toEqual([[0, 2], [5, 7], [10, 12]]);
+    expect(selectNextOccurrence({ state, dispatch: () => {} })).toBe(false);
+  });
+
+  test('⇧⌘L selects every match at once', () => {
+    const state = run(selectAllOccurrences, EditorState.create({ doc: 'ab x ab', selection: EditorSelection.cursor(1), extensions: multi }));
+    expect(spans(state)).toEqual([[0, 2], [5, 7]]);
+  });
+
+  test('they sit in front of defaultKeymap, on VS Code\'s keys', () => {
+    expect(macCommand('Cmd-d')).toBe(selectNextOccurrence);
+    expect(macCommand('Shift-Cmd-l')).toBe(selectAllOccurrences);
+  });
+});

package/src/react/code-editor/keys.ts

@@ -0,0 +1,17 @@
+import { defaultKeymap, historyKeymap, indentWithTab } from '@codemirror/commands';
+import type { KeyBinding } from '@codemirror/view';
+import { lineKeyBindings } from './lineAbove.js';
+import { occurrenceBindings } from './occurrences.js';
+
+/**
+ * Every key `CodeEditor` answers, first match wins: cb's VS Code additions IN FRONT of
+ * CodeMirror's `defaultKeymap`, which is already VS Code's for the rest. Nothing here may shadow
+ * a `defaultKeymap` key VS Code means the same way — `keys.spec.ts` holds ⌘↑ / ⌘↓ to the jump.
+ */
+export const editorKeyBindings: readonly KeyBinding[] = [
+  ...lineKeyBindings,
+  ...occurrenceBindings,
+  ...defaultKeymap,
+  ...historyKeymap,
+  indentWithTab,
+];

package/src/react/code-editor/languages.ts

@@ -9,6 +9,7 @@
 // and a snippet shown WITHOUT highlighting is the plain <pre> this component
 // exists to replace.
 import type { Extension } from '@codemirror/state';
+import { markdownRules } from './markdownRules.js';
 
 /** Supported language identifiers. `text` (the default) means no highlighting. */
 export type CodeLanguage =
@@ -397,10 +398,11 @@ export async function loadLanguageExtension(language: CodeLanguage): Promise<Ext
     case 'diff':
       return stream((await import('@codemirror/legacy-modes/mode/diff')).diff);
     // The one Lezer grammar past the first six: a markdown fence highlights its own
-    // code, and `#`, `**` and `[](…)` read as structure rather than as punctuation.
+    // code, and `#`, `**` and `[](…)` read as structure rather than as punctuation. A `---`
+    // rule is drawn as one while the caret is off its line (`markdownRules`).
     case 'markdown': {
       const { markdown } = await import('@codemirror/lang-markdown');
-      return markdown();
+      return [markdown(), markdownRules];
     }
     case 'scala':
       return stream((await import('@codemirror/legacy-modes/mode/clike')).scala);

package/src/react/code-editor/lineAbove.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 import { EditorSelection, EditorState, type Transaction } from '@codemirror/state';
-import { insertBlankLineAbove, lineKeyBindings } from './lineAbove.js';
+import { insertBlankLineAbove } from './lineAbove.js';
 
 function run(doc: string, at: number): { doc: string; caret: number } {
   let state = EditorState.create({ doc, selection: EditorSelection.cursor(at) });
@@ -19,18 +19,3 @@ describe('insertBlankLineAbove — ⇧⌘↵ in CodeEditor', () => {
     expect(insertBlankLineAbove({ state, dispatch: () => {} })).toBe(false);
   });
 });
-
-describe('lineKeyBindings — ⌘↑ / ⌘↓ in CodeEditor', () => {
-  function press(key: string, doc: string, at: number): { doc: string; caret: number } {
-    let state = EditorState.create({ doc, selection: EditorSelection.cursor(at) });
-    const binding = lineKeyBindings.find((b) => b.key === key);
-    // moveLineUp/Down are StateCommands at heart; they read only `state` and `dispatch`.
-    binding?.run?.({ state, dispatch: (tr: Transaction) => { state = tr.state; } } as never);
-    return { doc: state.doc.toString(), caret: state.selection.main.head };
-  }
-
-  test('⌘↑ moves the line up and ⌘↓ moves it down, the caret riding with it', () => {
-    expect(press('Mod-ArrowUp', 'one\ntwo', 5)).toEqual({ doc: 'two\none', caret: 1 });
-    expect(press('Mod-ArrowDown', 'one\ntwo', 1)).toEqual({ doc: 'two\none', caret: 5 });
-  });
-});

package/src/react/code-editor/lineAbove.ts

@@ -1,4 +1,3 @@
-import { moveLineDown, moveLineUp } from '@codemirror/commands';
 import { EditorSelection, type StateCommand } from '@codemirror/state';
 import type { KeyBinding } from '@codemirror/view';
 
@@ -23,13 +22,10 @@ export const insertBlankLineAbove: StateCommand = ({ state, dispatch }) => {
 };
 
 /**
- * The line keys `CodeEditor` adds IN FRONT of `defaultKeymap`: ⇧⌘↵ above, and ⌘↑ / ⌘↓ moving the
- * line — the owner's chord (2026-10-05), which in `defaultKeymap` is the Mac's jump to the top or
- * bottom. ⌥↑ / ⌥↓, VS Code's own move, is already in `defaultKeymap`, and so is ⇧⌘↑ (select to
- * the top), which stays. The same keys in a `<textarea>` are `cursedbelt/react/line-keys`.
+ * The line keys `CodeEditor` adds IN FRONT of `defaultKeymap`: ⇧⌘↵ above. Everything else VS Code
+ * binds for lines `defaultKeymap` already has — ⌥↑ / ⌥↓ move, ⇧⌥↑ / ⇧⌥↓ copy, ⌘↑ / ⌘↓ the jump to
+ * the top or bottom with the line left where it is. ⌘↑ / ⌘↓ moved the line here from 2026-10-05
+ * until the owner asked for VS Code's meaning back (2026-10-14, forge task 3182); the same keys
+ * in a `<textarea>` are `cursedbelt/react/line-keys`.
  */
-export const lineKeyBindings: readonly KeyBinding[] = [
-  { key: 'Shift-Mod-Enter', run: insertBlankLineAbove },
-  { key: 'Mod-ArrowUp', run: moveLineUp },
-  { key: 'Mod-ArrowDown', run: moveLineDown },
-];
+export const lineKeyBindings: readonly KeyBinding[] = [{ key: 'Shift-Mod-Enter', run: insertBlankLineAbove }];

package/src/react/code-editor/markdownRules.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'bun:test';
+import { markdown } from '@codemirror/lang-markdown';
+import { ensureSyntaxTree } from '@codemirror/language';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { ruleLines } from './markdownRules.js';
+
+function rules(doc: string, caret: number): number[] {
+  const state = EditorState.create({ doc, selection: EditorSelection.cursor(caret), extensions: markdown() });
+  ensureSyntaxTree(state, state.doc.length, 5000);
+  return ruleLines(state, [{ from: 0, to: state.doc.length }]);
+}
+
+describe('markdownRules — `---` drawn as a rule while writing (forge task 3184)', () => {
+  test('a rule line is drawn, the caret elsewhere', () => {
+    expect(rules('one\n\n---\n\ntwo', 0)).toEqual([5]);
+    expect(rules('***\n\n___', 0)).toEqual([5]);
+  });
+
+  test('with the caret on it, the dashes show', () => {
+    expect(rules('one\n\n---\n\ntwo', 7)).toEqual([]);
+  });
+
+  test('`---` under text is that text\'s heading underline, not a rule — as the preview reads it', () => {
+    expect(rules('Title\n---\n', 0)).toEqual([]);
+  });
+});

package/src/react/code-editor/markdownRules.ts

@@ -0,0 +1,73 @@
+import { syntaxTree } from '@codemirror/language';
+import type { EditorState, Extension, Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+/**
+ * A markdown rule (`---`, `***`, `___`) drawn as a rule while you write, the dashes coming back
+ * when the caret is on its line — Obsidian's live preview of the same thing. The owner, 2026-10-14
+ * (forge task 3184): "it should show as a solid line in editing and in view". Only a rule the
+ * grammar agrees is one: `---` under a line of text is that line's heading underline, and the
+ * preview reads it the same way.
+ */
+const rule = Decoration.line({ class: 'cb-md-rule' });
+
+/** The line starts of every rule in the visible ranges, less any line a selection touches. */
+export function ruleLines(state: EditorState, ranges: readonly { from: number; to: number }[]): number[] {
+  const starts: number[] = [];
+  const tree = syntaxTree(state);
+  for (const { from, to } of ranges) {
+    tree.iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== 'HorizontalRule') return;
+        const line = state.doc.lineAt(node.from);
+        const touched = state.selection.ranges.some((r) => r.from <= line.to && r.to >= line.from);
+        if (!touched && starts.at(-1) !== line.from) starts.push(line.from);
+      },
+    });
+  }
+  return starts;
+}
+
+function build(view: EditorView): DecorationSet {
+  const marks: Range<Decoration>[] = ruleLines(view.state, view.visibleRanges).map((at) => rule.range(at));
+  return Decoration.set(marks);
+}
+
+const rulePlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = build(view);
+    }
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.selectionSet ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) !== syntaxTree(update.state)
+      )
+        this.decorations = build(update.view);
+    }
+  },
+  { decorations: (plugin) => plugin.decorations },
+);
+
+const ruleTheme = EditorView.baseTheme({
+  // The rule is the line's background, centred, the width of the text column; the dashes stay
+  // in the document (and under the caret's click), just not painted.
+  '.cb-md-rule': {
+    backgroundImage: 'linear-gradient(var(--border), var(--border))',
+    backgroundSize: '100% 1px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundOrigin: 'content-box',
+    backgroundClip: 'content-box',
+  },
+  '.cb-md-rule, .cb-md-rule *': {
+    color: 'transparent !important',
+  },
+});
+
+export const markdownRules: Extension = [rulePlugin, ruleTheme];

package/src/react/code-editor/occurrences.ts

@@ -0,0 +1,69 @@
+import { EditorSelection, type EditorState, type SelectionRange, type StateCommand } from '@codemirror/state';
+import type { KeyBinding } from '@codemirror/view';
+
+/**
+ * VS Code's ⌘D and ⇧⌘L — the two multi-cursor keys `defaultKeymap` leaves to `@codemirror/search`,
+ * which `CodeEditor` does not load (its find panel would fight the app's own find). Exact text,
+ * case-sensitive; a caret with nothing selected first takes the word it is in, as in VS Code.
+ */
+
+/** The text the commands look for: the main selection, or the word under an empty caret. */
+function queryOf(state: EditorState): { query: string; range: SelectionRange } | null {
+  const main = state.selection.main;
+  const range = main.empty ? state.wordAt(main.head) : main;
+  if (!range || range.empty) return null;
+  return { query: state.sliceDoc(range.from, range.to), range: EditorSelection.range(range.from, range.to) };
+}
+
+/** Where `query` starts in `text`, matches never overlapping. */
+function matchesOf(text: string, query: string): number[] {
+  const starts: number[] = [];
+  for (let at = text.indexOf(query); at !== -1; at = text.indexOf(query, at + query.length)) starts.push(at);
+  return starts;
+}
+
+function isSelected(state: EditorState, from: number, to: number): boolean {
+  return state.selection.ranges.some((r) => r.from === from && r.to === to);
+}
+
+/** ⌘D — select the word under the caret, then add the next match of it, wrapping at the end. */
+export const selectNextOccurrence: StateCommand = ({ state, dispatch }) => {
+  const found = queryOf(state);
+  if (!found) return false;
+  const { query, range } = found;
+  if (state.selection.main.empty) {
+    dispatch(state.update({ selection: state.selection.replaceRange(range), scrollIntoView: true, userEvent: 'select' }));
+    return true;
+  }
+  // Every match, the ones after the selection first, then from the top — the first not yet selected.
+  const starts = matchesOf(state.doc.toString(), query);
+  const at = [...starts.filter((a) => a >= range.to), ...starts.filter((a) => a < range.to)].find(
+    (a) => !isSelected(state, a, a + query.length),
+  );
+  if (at === undefined) return false;
+  dispatch(
+    state.update({
+      selection: state.selection.addRange(EditorSelection.range(at, at + query.length)),
+      scrollIntoView: true,
+      userEvent: 'select',
+    }),
+  );
+  return true;
+};
+
+/** ⇧⌘L — every match of the selection (or the word under the caret) selected at once. */
+export const selectAllOccurrences: StateCommand = ({ state, dispatch }) => {
+  const found = queryOf(state);
+  if (!found) return false;
+  const { query, range } = found;
+  const starts = matchesOf(state.doc.toString(), query);
+  const ranges = starts.map((at) => EditorSelection.range(at, at + query.length));
+  const main = Math.max(0, starts.indexOf(range.from));
+  dispatch(state.update({ selection: EditorSelection.create(ranges, main), userEvent: 'select' }));
+  return true;
+};
+
+export const occurrenceBindings: readonly KeyBinding[] = [
+  { key: 'Mod-d', run: selectNextOccurrence, preventDefault: true },
+  { key: 'Shift-Mod-l', run: selectAllOccurrences, preventDefault: true },
+];

package/src/react/code-editor/plainInput.spec.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'bun:test';
+import { unsmarten } from './plainInput.js';
+
+describe('unsmarten — the OS\'s smart punctuation, put back (forge task 3184)', () => {
+  test('a dash the OS made of typed hyphens is the hyphens again', () => {
+    expect(unsmarten('-', '—')).toBe('--');
+    expect(unsmarten('--', '—')).toBe('---');
+    expect(unsmarten('-', '–')).toBe('--');
+  });
+
+  test('a curly quote where a straight one was pressed is straight', () => {
+    expect(unsmarten('', '“')).toBe('"');
+    expect(unsmarten('', '’')).toBe("'");
+    expect(unsmarten('"', '”')).toBe('"');
+  });
+
+  test('anything else is typing, left alone', () => {
+    expect(unsmarten('', '—')).toBeNull();
+    expect(unsmarten('a', '—')).toBeNull();
+    expect(unsmarten('', '-')).toBeNull();
+    expect(unsmarten('x', '“')).toBeNull();
+  });
+});

package/src/react/code-editor/plainInput.ts

@@ -0,0 +1,35 @@
+import { EditorView } from '@codemirror/view';
+
+/**
+ * What the OS's "smart punctuation" types into a source editor, put back to what the keys said.
+ *
+ * iOS (and a Mac with Edit ▸ Substitutions on) rewrites `--` to `—` and `"` to `“` as you type —
+ * in markdown that eats a rule's dashes and a code span's quotes (the owner, 2026-10-14, forge
+ * task 3184: "when typing three dashes … it shifts and deletes some dashes … please fix all other
+ * syntax errors that may be similar"). `CodeEditor` already asks the browser for no autocorrect;
+ * this is the half that holds where the OS does not listen. VS Code substitutes nothing, either.
+ *
+ * Only a substitution is undone: a dash replacing the `-` (or `--`) the keys just typed, or a
+ * curly quote arriving where a straight one was pressed. A `—` pasted in is a paste, never seen here.
+ */
+const QUOTES: Record<string, string> = { '“': '"', '”': '"', '‘': "'", '’': "'" };
+
+/** The text the keys meant, or null when `text` replacing `replaced` is not a substitution. */
+export function unsmarten(replaced: string, text: string): string | null {
+  if ((text === '—' || text === '–') && /^-{1,2}$/.test(replaced)) return text === '—' && replaced === '-' ? '--' : `${replaced}-`;
+  const quote = QUOTES[text];
+  if (quote !== undefined && (replaced === '' || replaced === quote)) return quote;
+  return null;
+}
+
+export const plainInput = EditorView.inputHandler.of((view, from, to, text) => {
+  const meant = unsmarten(view.state.sliceDoc(from, to), text);
+  if (meant === null) return false;
+  view.dispatch({
+    changes: { from, to, insert: meant },
+    selection: { anchor: from + meant.length },
+    scrollIntoView: true,
+    userEvent: 'input.type',
+  });
+  return true;
+});

package/src/react/code-editor/theme.ts

@@ -21,6 +21,11 @@ export const cbEditorTheme = EditorView.theme({
   '.cm-content': {
     caretColor: 'var(--foreground)',
     padding: '0.5rem 0',
+    // Every character drawn as itself — VS Code's `editor.fontLigatures: false`. A ligature font
+    // (JetBrains Mono, desk's) joins `--` and `---` into one glyph that redraws as each dash
+    // lands, and turns `!=`, `=>` and `<=` into symbols that are not what was typed (forge task 3184).
+    fontVariantLigatures: 'none',
+    fontFeatureSettings: '"calt" 0, "liga" 0',
   },
   // CodeMirror's own recipe for a minimum height: give it to the content AND the gutter, so the
   // line-number rail runs the editor's full height instead of stopping under the last line