@esportsplus/ui 0.57.0 → 0.58.0

package/src/shared/scss/position.scss

@@ -1,55 +0,0 @@
-@use 'list';
-@use 'sass:meta';
-
-
-@mixin position($position, $value: null) {
-    position: $position;
-
-    @if $value == bottom {
-        inset: auto 0 0 0;
-    }
-    @else if $value == center {
-        bottom: 50%;
-        right: 50%;
-        translate: 50% 50%;
-    }
-    @else if $value == full {
-        inset: 0 0 0 0;
-    }
-    @else if $value == horizontal {
-        right: 50%;
-        translate: 50%;
-    }
-    @else if $value == left {
-        inset: 0 auto 0 0;
-    }
-    @else if $value == right {
-        inset: 0 0 0 auto;
-    }
-    @else if $value == top {
-        inset: 0 0 auto 0;
-    }
-    @else if $value == vertical {
-        bottom: 50%;
-        translate: 0 50%;
-    }
-    @else if $value and meta.type-of($value) == list {
-        $length: list.length($value);
-
-        @if $length > 0 and list.nth($value, 1) != null {
-            top: list.nth($value, 1);
-        }
-
-        @if $length > 1 and list.nth($value, 2) != null {
-            right: list.nth($value, 2);
-        }
-
-        @if $length > 2 and list.nth($value, 3) != null {
-            bottom: list.nth($value, 3);
-        }
-
-        @if $length > 3 and list.nth($value, 4) != null {
-            left: list.nth($value, 4);
-        }
-    }
-}

package/src/shared/scss/text.scss

@@ -1,31 +0,0 @@
-%text {
-    --border-width: 0px;
-    --color: var(--color-default, inherit);
-    --color-active: var(--color-default);
-    --color-default: var(--color-text-400);
-    --color-hover: var(--color-default);
-    --color-pressed: var(--color-default);
-    --width: auto;
-
-    color: var(--color);
-    display: flex;
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    gap: var(--gap-vertical) var(--gap-horizontal);
-    line-height: var(--line-height);
-    position: relative;
-    transition: color var(--transition-duration) var(--transition-timing-function);
-    width: var(--width);
-
-
-    &.--text-truncate {
-        display: block;
-    }
-}
-
-%text-truncate {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}

package/src/themes/dark/index.ts

@@ -1,3 +0,0 @@
-export { default as input } from './input';
-export { default as select } from './select';
-export { default as textarea } from './textarea';

package/src/themes/dark/input.ts

@@ -1,16 +0,0 @@
-import input from '~/components/input';
-
-
-const themed: typeof input = Object.assign(input.bind({
-    attributes: {
-        class: 'input--primary --border --border-black --color-white',
-        style: `
-            --border-color-active: var(--color-purple-300);
-            --border-color-default: var(--color-black-300);
-            color-scheme: dark;
-        `
-    }
-}), { scrub: input.scrub, tag: input.tag });
-
-
-export default themed;

package/src/themes/dark/select.ts

@@ -1,28 +0,0 @@
-import select from '~/components/select';
-
-
-const themed: typeof select = select.bind({
-    attributes: {
-        class: '--background-black --border-black --color-white',
-        [select.option]: {
-            class: '--background-black --color-white',
-            style: '--color-default: var(--color-grey-500); --padding-horizontal: var(--size-500); white-space: nowrap; width: 100%;'
-        },
-        style: '--border-color-default: var(--color-black-300); --border-width: var(--border-width-400); border: var(--border-width) solid var(--border-color); color-scheme: dark;',
-
-        [select.tooltipContent]: {
-            direction: 'sw',
-            style: `
-                --background: var(--color-black-400);
-                --border-color: var(--color-black-300);
-                --border-radius: var(--border-radius-500);
-                --border-width: var(--border-width-400);
-                border: var(--border-width) solid var(--border-color);
-                color-scheme: dark;
-            `
-        }
-    }
-});
-
-
-export default themed;

package/src/themes/dark/textarea.ts

@@ -1,13 +0,0 @@
-import textarea from '~/components/textarea';
-
-
-export default textarea.bind({
-    attributes: {
-        class: 'textarea--primary --border --border-black --color-white',
-        style: `
-            --border-color-active: var(--color-purple-300);
-            --border-color-default: var(--color-black-300);
-            color-scheme: dark;
-        `
-    }
-});

package/src/tokens/scss/box-shadow.scss

@@ -1,23 +0,0 @@
-$box-shadow: (
-    100: 0 1px 2px 0 oklch(from var(--color-black-300) l c h / 0.04),
-    200: #{
-        0 1px 2px 0 oklch(from var(--color-black-300) l c h / 0.04),
-        0 2px 6px -2px oklch(from var(--color-black-300) l c h / 0.05)
-    },
-    300: #{
-        0 2px 3px -2px oklch(from var(--color-black-300) l c h / 0.06),
-        0 4px 12px -4px oklch(from var(--color-black-300) l c h / 0.06)
-    },
-    400: #{
-        0 4px 8px -4px oklch(from var(--color-black-300) l c h / 0.07),
-        0 8px 24px -8px oklch(from var(--color-black-300) l c h / 0.07)
-    },
-    500: #{
-        0 8px 16px -8px oklch(from var(--color-black-300) l c h / 0.08),
-        0 12px 32px -12px oklch(from var(--color-black-300) l c h / 0.08)
-    },
-    600: #{
-        0 12px 24px -12px oklch(from var(--color-black-300) l c h / 0.09),
-        0 24px 48px -16px oklch(from var(--color-black-300) l c h / 0.09)
-    }
-);

package/src/tokens/scss/font-family.scss

@@ -1,5 +0,0 @@
-// Geist Mono ships with the library ('css-utilities/font/geist') but loads only when a host imports it; without it the
-// stack falls back to each platform's own UI monospace.
-$font-family: (
-    mono: ('Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)
-);

package/storage/code.md

@@ -1,180 +0,0 @@
-# Editor family plan
-
-Everything editor-related lives under `src/components/editor/` and is exported as one namespace:
-
-```ts
-import { editor } from '@esportsplus/ui/components';
-
-editor.code(...)       // code editor (was codeEditor)
-editor.markdown(...)   // markdown editor (was codeEditor.markdown)
-editor.tree(...)       // file tree (was fileTree)
-editor.workspace(...)  // explorer, tabs, toolbar, status bar (was codeEditor.workspace)
-editor.diffs(...)      // diff viewer (new)
-editor.diffs.merge(...) // three-way merge editor (new)
-```
-
-There are no aliases for the old names. CSS class names are unchanged (`.code-editor`, `.markdown-editor`,
-`.code-workspace`, `.file-tree`). New components use `.diffs` and `.diffs-merge`.
-
-## Layout
-
-```
-src/components/editor/
-├── index.ts          namespace + public re-exports
-├── code/             core editor: document, view, syntax, layout, minimap, keymap, services/ (language server)
-├── markdown/         rendered markdown editor, built on code/
-├── tree/             file tree
-├── workspace/        composes code, markdown, tree, diffs
-└── diffs/            diff viewer and merge editor; engine.ts is the shared Myers line diff
-```
-
-`diffs/engine.ts` (`diffLines`, `diffSequences`, `changes`) ships in the base commit. The code editor's git gutter
-and the diff component both use it.
-
-## Work split
-
-Work is split by folder. Each agent works in its own git worktree and only edits files it owns:
-- its `src/components/editor/<folder>/`;
-- its docs example folder;
-- its own new test file under `scripts/`.
-
-Shared files are off limits to every agent; the orchestrator merges them:
-- `src/components/editor/index.ts`
-- `src/components/index.ts`
-- `docs/src/examples/groups.ts`
-- `README.md`
-
-Each agent lists the lines to add to those files in its report.
-
-The work runs in two phases:
-- **Phase 1:** `code`, `tree` and `diffs` run in parallel, against the contracts below.
-- **Phase 2:** `workspace` runs on top of the merged phase 1, wiring everything together.
-
-The gate for every agent:
-- `npx tsc --noEmit -p tsconfig.json` and `npx tsc --noEmit -p docs/tsconfig.json` must be clean (the existing
-  `animation.ts` analyzer note is fine);
-- `node --test scripts/*.test.mjs` must pass;
-- the coding standards in CLAUDE.md apply.
-
----
-
-## Phase 1A: `editor/code`
-
-New options (`Options` in `code/view.ts`). Every one is optional and off or neutral by default unless noted:
-
-| Option | Behaviour |
-| --- | --- |
-| `sticky?: boolean \| number` | Sticky scroll: the headers of the enclosing folds stay pinned at the top while scrolling. `true` = up to 5 lines; a number sets the cap. Clicking a pinned header scrolls to it. Uses the existing fold structure (`folding.ts`). |
-| `colors?: boolean` | Colour swatches: a small swatch before each CSS colour literal (hex, `rgb()`/`hsl()`/`oklch()`, named colours) in CSS, SCSS, HTML and string literals. Clicking it opens the library `colorPicker` in a tooltip; picking replaces the literal as one undoable edit. |
-| `links?: boolean \| ((url: string) => void)` | Clickable links: URLs (and `file://` / relative paths when a handler is given) are underlined on Mod+hover and open on Mod+click. The default handler opens `noopener` in a new tab. |
-| `unicode?: boolean` (default `true`) | Unicode warnings: invisible characters (zero-width, NBSP, soft hyphen), bidirectional controls, and confusables (non-ASCII letters that look like ASCII in otherwise ASCII identifiers) get a box mark; hovering explains which code point it is. |
-| `rulers?: readonly number[]` | Vertical rulers drawn at those columns. Colour is `--ruler-color`. |
-| `baseline?: string \| null` | Git gutter: diff the document against this text (for example HEAD), via `diffLines`. Gutter bars show added, modified and deleted lines (`--gutter-added-color` etc.). Clicking a bar opens an inline peek of the original lines with Revert and Next/Previous. Recomputed after edits, debounced and incremental where cheap. |
-| `keybindings?: Readonly<Record<string, Command \| null>>` | User keybinding overrides merged over the defaults: a key chord maps to a command, and `null` unbinds a default chord. |
-| `onMerge?: (conflict: Conflict) => void` | Called from the conflict lens's "Compare" action (below). |
-
-Conflict markers: blocks between `<<<<<<<`, `=======` and `>>>>>>>` (and `|||||||` for the base) are tinted current,
-base and incoming, with a lens row above each block: **Accept current · Accept incoming · Accept both · Compare**.
-The accepts are single undoable edits; Compare calls `onMerge`.
-
-New commands (in `keymap.ts` `Command`, with default bindings):
-
-| Command | Default |
-| --- | --- |
-| `nextChange` / `previousChange` | Alt+F5 / Shift+Alt+F5 (needs `baseline`) |
-| `nextProblem` / `previousProblem` | F8 / Shift+F8 (diagnostics from services), each showing the message inline |
-| `nextConflict` / `previousConflict` | Alt+F8 / Shift+Alt+F8 |
-
-New exports from `code/index.ts` (the workspace depends on these):
-
-```ts
-// Every command with its label and default chords, for keybinding editors.
-export const commands: readonly { id: Command; label: string; keys: readonly string[] }[];
-export type { Command, Conflict };
-// Conflict = { start: number; end: number; current: string; base: string | null; incoming: string; line: number }
-```
-
-New `Controller` methods: `nextChange()`, `previousChange()`, `nextProblem()`, `previousProblem()`,
-`conflicts(): Conflict[]`, `resolveConflict(conflict, 'current' | 'incoming' | 'both' | string)`,
-`setBaseline(text: string | null)`.
-
-`Snapshot` (`controller.state`) gains `selections: number`, `lineEnding: 'crlf' | 'lf'` (detected), `indent:
-{ size: number; tabs: boolean }` (detected unless options set it), `problems: { errors: number; warnings: number }`
-and `language: Language`. These drive the workspace status bar.
-
-Docs: extend `docs/src/examples/code-editor/index.ts` with examples or toggles for each option, plus a conflict
-sample. Tests: `scripts/code-editor-features.test.mjs` covers conflict parsing and resolution, colour literal
-detection, unicode detection, keybinding override merging and the baseline change ranges.
-
-## Phase 1B: `editor/tree`
-
-| Feature | API |
-| --- | --- |
-| Drop from the OS | New `operations.import?: (target: Element \| null, entries: readonly ImportEntry[]) => void \| Promise<void>`, with `ImportEntry = { path: string; file: File \| null }`. `path` is relative inside dropped folders, and `file` is null for a directory. Folders are walked with `webkitGetAsEntry`. Drop-target highlighting and folders that open on hover work the same as for internal drags. Without `operations.import`, OS drops are ignored. |
-| Drag out to the OS | New `export?: (element: Element) => { name: string; type?: string; url?: string; text?: string } \| null`. Sets `DownloadURL` (Chromium), `text/uri-list` and `text/plain` on the native drag so a file can be dropped on the desktop or into another app. Internal moves keep working. |
-| Next and previous change or problem | `Controller.next(kind)` and `Controller.previous(kind)`, with `kind: 'change' \| 'problem'`. They walk visible order, expanding and loading folders as needed, wrap around, and use decorations (git status for changes; problem counts for problems). Shortcuts: Alt+F5 / Shift+Alt+F5 for changes and F8 / Shift+F8 for problems, while the tree has focus. |
-| Preview and pinned | Already supported (`preview`, `open(element, { mode })`); no tree work. |
-
-Docs: add examples to `docs/src/examples/file-tree/index.ts` for drop from the OS (it logs the imported entries into
-the in-memory store), drag out (text files as data URLs), and change and problem navigation. Tests:
-`scripts/file-tree-features.test.mjs` for the navigation order and the import entry flattening.
-
-## Phase 1C: `editor/diffs`
-
-A new component, adapting the t3code reference (`G:/t3code/packages/diffs/src`: hunks, segments, render/split,
-unified, virtual and whitespace) to this repo's template, reactivity, SCSS and coding standards.
-
-`editor.diffs(attributes)`:
-- `original: string`, `modified: string`, `language?: Language` (syntax colours through `../code/syntax`), and
-  `filename?` with a header showing the +additions and −deletions.
-- `mode?: 'split' | 'unified'` (default split), `wordDiff?` (character and word highlights inside changed lines,
-  default `true`), `ignoreWhitespace?`, and `context?` (default 3) with expandable "N hidden lines" rows.
-- Virtualised rows for large files, line numbers on both sides, and next/previous change (Alt+F5 and Shift+Alt+F5,
-  plus buttons).
-- `onaccept?(change)` / `onrevert?(change)` per hunk when given (a change carries ranges on both sides and the
-  texts).
-- `controller?` with `next()`, `previous()`, `setMode()`, `setTexts(original, modified)`.
-
-`editor.diffs.merge(attributes)` is a three-way merge editor:
-- `base: string | null`, `current: string`, `incoming: string`, `language?`, and `onresolve(result: string)`.
-- Layout: incoming and current read-only on top (`editor.diffs`-style highlighting), and an editable result below
-  using `editor.code` (seeded with conflict markers, or by auto-merging non-conflicting hunks against the base).
-- Each conflict has Accept current, Accept incoming and Accept both, plus next/previous conflict, a remaining count,
-  and Complete merge (enabled once no markers remain).
-- It may build `diff3` on `engine.ts`.
-
-Docs: a new `docs/src/examples/diffs/index.ts` (split, unified, word diff, large file, merge) with `name: 'diffs'`.
-Report any docs registration it needs. Tests: `scripts/diffs.test.mjs` already covers the engine; extend it for
-hunks with context, word segments and the three-way merge.
-
----
-
-## Phase 2: `editor/workspace`
-
-This phase runs after phase 1 is merged and committed, and wires everything in.
-
-| Feature | Behaviour |
-| --- | --- |
-| Preview and pinned tabs | Single-click opens reuse one preview tab (italic) until it's edited, double-clicked or pinned. Pinned tabs sort first with a pin icon and are kept by "close others". The tab context menu has Pin/Unpin, Close, Close others, Close to the right, Close saved, Copy path and Reveal in explorer. |
-| Auto save | Preference `autoSave: 'off' \| 'delay' \| 'focus'` and `autoSaveDelay` (ms, default 1000), toggled from the toolbar or menu. While it's on, the save button is replaced by an inline-edit-style status (unsaved → saving spinner → saved check, then "Saved"), reusing `inline-edit/status`. |
-| Keybinding editor | Overlay (command palette entry and Mod+K Mod+S) listing `commands` from `editor/code`, with a search box, recording a new chord (the `shortcut-recorder` component), conflict warnings, and reset per command or all. Stored in preferences as `keybindings` and passed to every editor as `editorOptions.keybindings`. |
-| Status bar items | Ln/Col (exists), selections, problems (errors and warnings; click goes to the next problem), language (click picks one), indentation (click picks tabs or spaces and the size), line ending (click converts LF ↔ CRLF as one undoable edit), and auto save state. Encoding is shown as UTF-8, read-only. |
-| Persisted session | Optional `WorkspaceHost.session?: { get(): Promise<WorkspaceSession \| null>; set(session: WorkspaceSession): Promise<void> }`. It stores open tabs (path, pinned, preview), the active tab, each tab's selection, scroll and folds, the explorer's expansion and scroll, and unsaved drafts (hot exit), restored on load. Writes are debounced. |
-| Git gutter | Optional `WorkspaceHost.baseline?(cwd, path): Promise<string \| null>` feeds `options.baseline` per tab, refreshed on save and on watch events. |
-| OS drag and drop | `WorkspaceHost.import?(cwd, target, entries)` wired to the tree's `operations.import`; `WorkspaceHost.export?` to the tree's `export`. |
-| Next change or problem | Workspace-level commands that move across files, using the tree's `next`/`previous` and then the editor's. |
-| Merge | When an editor reports `onMerge`, or a file with conflict markers is opened through "Merge", open `editor.diffs.merge` in place of the editor tab, and write the result back on completion. |
-| Compare | A tree context action "Compare with selected" opens `editor.diffs` in a tab. |
-
-Docs: extend `docs/src/examples/code-editor/workspace-example.ts` and the in-memory host fixture
-(`fixtures/workspace.ts`) with `session` (localStorage), `baseline` (a fixed HEAD map), `import` and `export`.
-Tests: extend `scripts/code-editor-workspace.test.mjs`.
-
-## Merge and commit
-
-After each phase:
-1. Apply each worktree's diff to main.
-2. Merge the shared-file additions.
-3. Run the gate and spot-check the docs.
-4. Commit by component as semantic commits: `feat(editor/code): …`, `feat(editor/tree): …`, `feat(editor/diffs): …`,
-   `feat(editor/workspace): …`.

package/storage/editor-features.md

@@ -1,227 +0,0 @@
-# Editor and file tree features we don't have yet
-
-Features from other code editors that `code-editor`, `code-editor/workspace` and `file-tree` don't offer yet.
-
-Editors surveyed:
-
-- VS Code and Monaco
-- JetBrains IDEs (WebStorm, IntelliJ, Fleet)
-- Zed
-- Sublime Text
-- Nova
-- Helix
-- Neovim file explorers (neo-tree, nvim-tree, oil.nvim)
-- Emacs
-- CodeMirror 6
-
-Features we already ship are left out. On the editor side these include:
-
-- multiple cursors, Alt+click and box selection, occurrence selection, and selection undo;
-- line move, copy and delete, comments, indent and reindent;
-- folding, bracket jump and pair selection, and auto-close and surround;
-- find and replace with regex, case and whole word;
-- minimap, wrap and visible whitespace;
-- completion, hover and diagnostics over a language server;
-- tabs, quick open, breadcrumbs and save in the workspace.
-
-On the file tree side these include:
-
-- compact folders, sticky folders, filtering, type-to-find and typeahead;
-- sort modes, git and diagnostic decorations, and colour scopes;
-- multiple roots, lazy loading and preview opening;
-- drag and drop with Alt to copy and folders that open on hover;
-- cut, copy, paste and duplicate, rename and create in place, and trash or permanent delete;
-- undo and redo, shortcuts, and screen-reader labels.
-
-## File tree
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| File nesting | Groups related files under a parent: `index.ts` → `index.test.ts`, `index.d.ts`; `package.json` → lockfiles. Driven by configurable patterns. | VS Code, JetBrains |
-| Compare selected | Marks two files and opens a diff of them, or compares one with the clipboard or its saved version. | VS Code, Zed |
-| Drop from the OS | Accepts files and folders dragged in from the desktop or file manager and copies them into the target folder. | VS Code, Zed, JetBrains |
-| Drag out to the OS | Dragging a row out of the tree hands the file to the desktop or another app. | VS Code (desktop), Nova |
-| Next and previous change or problem | Moves the cursor to the next or previous entry with a git change or a diagnostic. | Zed |
-| Open editors list | A section listing the open tabs, with close, save and reorder actions and dirty markers. | VS Code |
-| Outline view | A panel listing the active file's symbols, with follow-cursor and sorting by position, name or kind. | VS Code, JetBrains (Structure), Zed |
-| Timeline and local history | Each file's saves, git commits and file operations over time, with restore and compare against any entry. | VS Code, JetBrains |
-| Favorites and bookmarks | Pins files or folders to a persistent section at the top so they're quick to reach. | JetBrains, Nova |
-| Scratch files | Temporary files outside the project tree, kept across sessions, each with its own language. | JetBrains |
-| Find in folder | Starts a project-wide text search scoped to the selected folder. | VS Code, Zed, JetBrains |
-| Edit the tree as text | Opens a folder as an editable list of names: renaming lines renames files, deleting lines deletes them, all applied on save. | oil.nvim, Emacs `wdired` |
-| Bulk rename | Renames many selected files at once with a pattern or a find and replace, with a preview first. | JetBrains, VS Code extensions, Nova |
-| Image and media preview | Shows a thumbnail on hover, or an image carousel for media files, without opening an editor. | VS Code, Nova |
-| Alternative sources | The same tree shows other data: open buffers, a git status view, remote file systems, diagnostics. | neo-tree |
-| Folder-level stats | Totals for a folder, such as file count and total size, in a tooltip or column. | Nova, JetBrains |
-
-## Editing
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Expand and shrink selection | Grows the selection to the enclosing syntax node (word → string → argument → call → statement → block) and shrinks it back. | VS Code, JetBrains, Zed, Helix |
-| Text objects | Commands that act on a function, class, argument, comment or test by its structure: select, delete, change, jump. | Helix, Neovim |
-| Join lines | Joins the next line onto the current one with the whitespace normalised, at every caret. | JetBrains, Sublime, VS Code |
-| Sort, reverse and dedupe lines | Sorts, reverses or deduplicates the selected lines, optionally ignoring case. | JetBrains, Sublime, VS Code |
-| Case transforms | Upper, lower, title, camel, snake and kebab case for the selection. | VS Code, JetBrains, Sublime |
-| Overtype mode | Insert toggles typing over existing characters, with its own caret style. | VS Code |
-| Smart paste | Re-indents pasted code to the target's indentation and escapes it when pasted into a string. | JetBrains, VS Code |
-| Clipboard history | Paste any of the last N copied snippets from a picker. | JetBrains, Sublime |
-| Paste as plain text | Paste that skips any reformatting or escaping. | JetBrains |
-| User snippets | Named templates with tab stops, placeholders, choices and variables (`$TM_FILENAME`, `$CLIPBOARD`), triggered by prefix. | VS Code, JetBrains (live templates), Sublime |
-| Postfix completion | Typing `.if`, `.not` or `.log` after an expression wraps it in that construct. | JetBrains |
-| Complete statement | Adds the missing closing brackets and semicolon and moves to the next line. | JetBrains |
-| Unwrap and remove | Removes an enclosing `if`, `try` or block and keeps its body. | JetBrains |
-| Linked editing | Editing an HTML or JSX opening tag renames the closing tag too. | VS Code, JetBrains |
-| Emmet | Expands abbreviations such as `div.card>ul>li*3` into markup. | VS Code, JetBrains, Sublime, Nova |
-| Increment and decrement numbers | Bumps the number under the caret up or down, at every caret. | Helix, Neovim, Sublime |
-| Duplicate selection | Duplicates the selection itself rather than whole lines. | JetBrains, Sublime |
-| Trim trailing whitespace and final newline | Removes trailing whitespace and ensures a single final newline, on save or by command. | VS Code, Sublime, JetBrains |
-| Convert indentation | Converts the file between tabs and spaces, and changes the indent width. | VS Code, Sublime |
-| Toggle a line comment per line | A comment toggle that works on each line on its own when the selected lines are mixed. | Sublime, Zed |
-| Format document and selection | Runs a formatter on the whole file, the selection, on type, on paste or on save. | VS Code, JetBrains, Zed |
-
-## Selection and carets
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Skip occurrence | While adding next-occurrence carets, skips the current match and moves on. | VS Code, Sublime, Zed |
-| Split selection into lines | Turns a multi-line selection into one caret at the end of each line. | VS Code, Sublime |
-| Select within a selection | Keeps only the regex matches inside the current selections, each as its own selection. | Helix, Kakoune |
-| Align carets | Inserts padding so every caret lines up in one column. | Sublime (packages), Helix |
-| Sub-word movement | Moves and deletes by camelCase and snake_case parts. | VS Code, JetBrains, Sublime |
-| Caret history | Jumps back and forward through earlier caret positions, across files. | VS Code, JetBrains, Zed |
-
-## Find and replace
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Find in selection | Limits find and replace to the selected range. | VS Code, Sublime, JetBrains |
-| Preserve case | Replacing `foo` with `bar` turns `Foo` into `Bar` and `FOO` into `BAR`. | VS Code |
-| Regex case modifiers | `\u`, `\l`, `\U` and `\L` in the replacement change the case of the captured groups. | VS Code |
-| Find history | Earlier queries and replacements one keypress away, kept across sessions. | VS Code, JetBrains |
-| Seed from selection | Opening find fills in the selected text or the word at the caret. | VS Code, Sublime |
-| Search across files | Searches the whole workspace with include and exclude globs, then replaces with a preview. | VS Code, Zed, JetBrains, Sublime |
-| Search editor and multibuffer | Shows project results as one editable document; edits go back to the source files. | VS Code (Search Editor), Zed (multibuffer) |
-| Matches in the scrollbar | Marks every match, the selection and diagnostics along the scrollbar track. | VS Code, JetBrains, Sublime |
-
-## Navigation
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Go to symbol | A picker of the file's or the workspace's symbols, filtered fuzzily, with `@` and `#` prefixes. | VS Code, Sublime, Zed, JetBrains |
-| Combined quick open | One input for files, `:line`, `@symbol` and `>commands`. | VS Code, Sublime |
-| Recent files | A list of the most recently used files, with switching tabs in that order (Ctrl+Tab). | VS Code, JetBrains, Zed |
-| Go to definition, type and implementation | Ctrl+click or F12 opens a symbol's definition, its type, or its implementations. | VS Code, Zed, JetBrains |
-| Peek | An inline panel with the definition or references, editable in place. | VS Code |
-| Find references | Lists every use of a symbol, grouped by file. | VS Code, Zed, JetBrains |
-| Breadcrumb symbols | Breadcrumbs go past the file into the symbol path, and each crumb opens a picker of its siblings. | VS Code, Zed |
-| Bookmarks | Toggleable line markers with a list and next and previous jumps. | JetBrains, Sublime, VS Code extensions |
-| Go to last edit | Jumps to where the document was last changed. | VS Code, JetBrains |
-| Go to next problem | Moves to the next diagnostic and shows its message inline. | VS Code, Zed |
-| Structural jumps | Next and previous function, class, parameter or test. | Helix, Neovim |
-
-## Language intelligence
-
-These need the transport we already have to carry more language-server methods.
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Signature help | Shows the call's parameters and highlights the current one while typing arguments. | VS Code, JetBrains, Zed |
-| Rename symbol | Renames a symbol everywhere, with a preview of the edits. | VS Code, Zed, JetBrains |
-| Code actions and quick fixes | A light bulb with fixes and refactorings for the caret or the diagnostic. | VS Code, Zed, JetBrains |
-| Inlay hints | Inline parameter names and inferred types, revealed with a modifier key. | VS Code, JetBrains, Zed |
-| Code lens | Clickable notes above declarations, such as reference counts or "run test". | VS Code, JetBrains (Code Vision) |
-| Semantic highlighting | Colours from the language server, so parameters, constants and types are told apart. | VS Code, Zed |
-| Document highlight | Highlights other uses of the symbol under the caret, separating reads from writes. | VS Code, JetBrains |
-| Server folding ranges | Folding ranges from the server for languages without a bracket structure. | VS Code |
-| Call and type hierarchy | Trees of a function's callers and callees, or of a type's supertypes and subtypes. | VS Code, JetBrains |
-| Inline completions | Grey ghost text suggesting the rest of a line or block, accepted with Tab. | VS Code, Monaco, Zed, JetBrains |
-| Next edit suggestions | Predicts the next edit somewhere else in the file and offers to apply it. | VS Code, Cursor, Zed |
-
-## Display
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Indent guides | Vertical lines at each indent level, with the active scope's guide emphasised. | VS Code, Sublime, JetBrains, Zed |
-| Bracket pair colours | Matching brackets coloured by depth, with guides linking each pair. | VS Code, JetBrains, Zed |
-| Sticky scroll | The enclosing function, class and block headers stay pinned at the top while scrolling. | VS Code, JetBrains, Zed |
-| Vertical rulers | Lines at chosen columns, such as 80 and 120. | VS Code, Sublime, JetBrains |
-| Git gutter | Added, modified and deleted markers beside line numbers, with an inline diff on click and revert per change. | VS Code, Zed, JetBrains, Sublime |
-| Inline blame | The last commit's author and date at the end of the caret's line. | Zed, VS Code (GitLens), JetBrains |
-| Colour swatches | Swatches and a picker beside CSS colour values. | VS Code, JetBrains, Zed |
-| Clickable links | URLs and file paths become links, opened with Ctrl/Cmd+click. | VS Code, JetBrains |
-| Unicode warnings | Flags invisible, confusable and bidirectional characters. | VS Code |
-| Font ligatures and zoom | Opt-in ligatures, plus zooming the editor font in and out. | VS Code, JetBrains, Zed |
-| Smooth caret | Animated caret movement and blink styles. | VS Code |
-
-## Folding
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Fold to a level | Folds every region at nesting level N. | VS Code |
-| Fold recursively | Folds or unfolds a region and everything inside it. | VS Code, JetBrains |
-| Fold comments and imports | Folds every block comment, or the import section, in one command. | VS Code, JetBrains |
-| Region markers | `// #region` and `// #endregion` comments define named foldable regions. | VS Code, JetBrains |
-| Fold the selection | Folds any selected range by hand, independent of the syntax. | VS Code, JetBrains |
-
-## Files, saving and documents
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Auto save | Saves after a delay, on focus change or on window change. | VS Code, JetBrains, Zed |
-| Hot exit | Unsaved drafts survive closing and reloading, and come back on reopen. | VS Code, Sublime, Zed |
-| Conflict on save | When the file changed on disk, offers compare, overwrite or reload instead of silently overwriting. | VS Code, JetBrains |
-| Line endings | Shows and converts LF and CRLF per file. | VS Code, Sublime, JetBrains |
-| Encoding | Shows, reopens with and saves with a chosen encoding. | VS Code, Sublime, JetBrains |
-| Indent detection | Detects tabs or spaces and the indent width from the file's contents. | VS Code, Sublime |
-| EditorConfig | Applies `.editorconfig` indentation, line-ending and charset rules. | VS Code (extension), JetBrains, Zed, Sublime |
-| Large file mode | Opens very large files with expensive features such as highlighting and folding turned off. | VS Code, JetBrains |
-| Read-only toggle | Locks a file against edits from the tab or status bar. | JetBrains, VS Code |
-
-## Diff and merge
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Diff editor | Side-by-side or inline diff with character-level highlights, next and previous change, and accept or revert per change. | VS Code, Monaco, JetBrains, CodeMirror merge |
-| Three-way merge editor | Resolves conflicts with incoming, current and result panes. | VS Code, JetBrains |
-| Conflict markers | Inline "accept current / incoming / both" actions on `<<<<<<<` blocks. | VS Code, Zed |
-
-## Workspace and layout
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Split editors and groups | Two or more editors side by side or stacked, with tabs draggable between them. | VS Code, Zed, JetBrains, Sublime |
-| Preview tabs | A single-click open reuses one italic tab until it's edited or pinned. | VS Code, Zed |
-| Pinned tabs | Pinned tabs stay first, shrink to an icon, and survive "close others". | VS Code, JetBrains |
-| Tab context actions | Close others, close to the right, close saved, copy path and reveal in the tree. | VS Code, JetBrains, Zed |
-| Reopen closed tab | Reopens the most recently closed tab (Ctrl/Cmd+Shift+T). | VS Code, JetBrains, Zed |
-| Zen and centered layout | A distraction-free full-width mode, and a centred column of text. | VS Code, Sublime |
-| Command palette for editor commands | Every editor and workspace command, searchable, with its shortcut shown. | VS Code, Sublime, Zed, JetBrains |
-| Keybinding editor | Lets users view and remap shortcuts and see conflicts. | VS Code, JetBrains, Zed |
-| Status bar items | Caret, selection count, language, indentation, line ending and encoding, each clickable to change. | VS Code, Sublime, JetBrains |
-| Persisted session | Restores open tabs, layout, scroll and folds across reloads. | VS Code, Sublime, Zed |
-
-## Collaboration and input
-
-| Feature | What it does | Seen in |
-| --- | --- | --- |
-| Real-time collaboration | Shared editing with remote carets, selections and following. | Zed, VS Code Live Share, JetBrains Code With Me, CodeMirror collab |
-| Vim and modal keymaps | A Vim or Helix-style keymap, as an option next to the Emacs-style bindings. | Zed, VS Code, JetBrains, Sublime |
-| Inline AI assistant | Prompt-driven edits of the selection, shown as a diff to accept or reject. | Zed, Cursor, VS Code, JetBrains |
-
-## Sources
-
-- [Zed project panel](https://zed.dev/docs/project-panel)
-- [Zed features](https://zed.dev/features)
-- [VS Code user interface](https://code.visualstudio.com/docs/getstarted/userinterface)
-- [VS Code basic editing](https://code.visualstudio.com/docs/editing/codebasics)
-- [VS Code editor features overview](https://www.mintlify.com/Microsoft/vscode/features/editor)
-- [WebStorm project tool window](https://jetbrains.com/help/webstorm/project-tool-window.html)
-- [WebStorm source code editing](https://www.jetbrains.com/help/webstorm/working-with-source-code.html)
-- [Sublime Text](https://wikipedia.com/wiki/SublimeText)
-- [Helix text objects](https://docs.helix-editor.com/textobjects.html)
-- [Neovim file explorers](https://pawelgrzybek.com/neovim-file-explorers/)
-- [Nova sidebar](https://help.panic.com/nova/sidebar)
-- [Nova file browser](https://library.panic.com/nova/file-browser)
-- [CodeMirror extensions](https://codemirror.net/docs/extensions)
-- [Monaco changelog](https://cdn.jsdelivr.net/npm/monaco-editor@0.56.0/CHANGELOG.md)

package/src/{shared/scss → css-utilities}/anchor.scss

@@ -21,6 +21,12 @@ $placements: ('e', 'n', 'ne', 'nw', 's', 'se', 'sw', 'w');
     --translate-y: 0px;
 
 
+    &--e {
+        --stack-translate: calc(var(--stack-shift) * -1) 0;
+        --translate-x: calc(100% + var(--margin-horizontal));
+        --translate-y: 0px;
+    }
+
     &--e,
     &--n,
     &--ne,
@@ -33,12 +39,6 @@ $placements: ('e', 'n', 'ne', 'nw', 's', 'se', 'sw', 'w');
         --stack-span: 100%;
     }
 
-    &--e {
-        --stack-translate: calc(var(--stack-shift) * -1) 0;
-        --translate-x: calc(100% + var(--margin-horizontal));
-        --translate-y: 0px;
-    }
-
     &--n,
     &--ne,
     &--nw {