altitude-design 0.2.0 → 0.3.0

package/README.md

@@ -1,9 +1,10 @@
 # Altitude
 
-A React component library where **height is the interface**. Its one idea: the ground is the record. Settled content sits on the ground; anything live rises above it; anything waiting to receive sinks below it.
+A design and HCI framework for agent-built React web applications, with a component foundation where **height is the interface**. Its one idea: the ground is the record. Settled content sits on the ground; anything live rises above it; anything waiting to receive sinks below it.
 
-- **Storybook:** every component, with its guidelines and a live preview in all four schemes: https://richlaconte.github.io/altitude/
-- **The design guide:** [`project/README.md`](https://github.com/richlaconte/altitude/blob/main/project/README.md), then [Elevation](https://github.com/richlaconte/altitude/blob/main/project/Elevation.md), [Motion](https://github.com/richlaconte/altitude/blob/main/project/Motion.md), [Theming](https://github.com/richlaconte/altitude/blob/main/project/Theming.md) and [Research](https://github.com/richlaconte/altitude/blob/main/project/Research.md)
+- **Site:** https://richlaconte.github.io/altitude/
+- **Storybook:** every component, with its guidelines and a live preview in both schemes: https://richlaconte.github.io/altitude/storybook/
+- **The design guide:** [`project/README.md`](https://github.com/richlaconte/altitude/blob/main/project/README.md), then [Elevation](https://github.com/richlaconte/altitude/blob/main/project/Elevation.md), [Motion](https://github.com/richlaconte/altitude/blob/main/project/Motion.md), [Charts](https://github.com/richlaconte/altitude/blob/main/project/Charts.md), [Theming](https://github.com/richlaconte/altitude/blob/main/project/Theming.md), [Fundamentals](https://github.com/richlaconte/altitude/blob/main/project/Fundamentals.md), [Distinctiveness](https://github.com/richlaconte/altitude/blob/main/project/Distinctiveness.md) and [Research](https://github.com/richlaconte/altitude/blob/main/project/Research.md)
 
 ## Install
 
@@ -27,7 +28,7 @@ export function App() {
 }
 ```
 
-Render `AltitudeProvider` once around your app. Schemes are `daylight`, `nightfall`, `mesa` and `alpine`; `accent="#0f8a6b"` swaps in your own colour. The components are client components (`"use client"`), so they work in frameworks with server components.
+Render `AltitudeProvider` once around your app. Schemes are `daylight` and `nightfall`; `accent="#0f8a6b"` swaps in your own colour. The components are client components (`"use client"`), so they work in frameworks with server components.
 
 | Import | What it is |
 |---|---|
@@ -44,17 +45,31 @@ Render `AltitudeProvider` once around your app. Schemes are `daylight`, `nightfa
 project/   the design system itself: guides, tokens.json, components/src/*.tsx, bundle.css,
            and the built bundle.js and previews (the same files as the design system on claude.ai)
 build/     the kit that builds and checks project/ (see build/SETUP.md)
-scripts/   the npm package build and the Storybook story generator
+scripts/   the npm package build, the Storybook story generator and the landing page build
+site/      the landing page (React, built from the components' own sources into site-dist/)
 .storybook/
 ```
 
 There is one source for each thing. Components live in `project/components/src`, styles in `project/components/bundle.css`, tokens in `project/tokens.json`, and each component's preview in `build/previews.txt`. The npm package, the Storybook stories and the design system's own previews are all generated from those.
 
+## Actions in place
+
+[Actions in place](project/ActionsInPlace.md) covers single-value editing with `InlineEdit`, direct actions with real recovery, and targeted confirmation with `Dialog background="stationary"`.
+
+After `npm run storybook`, open the generated examples:
+
+- [Inline editing and its comparison baseline](http://localhost:6006/?path=/story/inputs-inlineedit--preview).
+- [Default and stationary dialog presentation](http://localhost:6006/?path=/story/overlays-dialog--preview).
+- [Act and recover](http://localhost:6006/?path=/story/patterns-actionsinplace--preview). “Open complete Files example” selects the same example's `#files` view.
+
+The [validation record](project/ActionsInPlaceValidation.md) separates engineering checks from outstanding human evaluation.
+
 ## Working on it
 
 ```sh
 npm install && npm install --prefix build
 npm run storybook          # http://localhost:6006
+npm run build-site         # the landing page, into site-dist/index.html
 ```
 
 After changing a component, rebuild the design system's bundle and previews, and commit what they produce:
@@ -67,16 +82,16 @@ CI fails if `project/` doesn't match its sources, so the design system on claude
 
 ## What happens on push
 
-Every push and pull request runs the checks: the bundle and previews are rebuilt and must match what's committed, every preview is rendered in all four schemes with no errors, the interaction checks run, the sources type-check against React 19, and the package and Storybook are built.
+Every push and pull request runs the checks: the bundle and previews are rebuilt and must match what's committed, every preview is rendered in both schemes with no errors, the interaction checks run, the sources type-check against React 19, and the package and Storybook are built.
 
 A push to `main` then also:
 
-- deploys Storybook to GitHub Pages;
+- deploys the landing page to GitHub Pages, with Storybook under `/storybook/`;
 - publishes to npm **if the version in `package.json` isn't published yet**, and tags the commit `v<version>`. To release, bump the version (`npm version patch`, `minor` or `major`) and push.
 
 ## Found a bug, or need something it doesn't do?
 
-Open an issue: **https://github.com/richlaconte/altitude/issues/new/choose**. There are templates for a bug, a new feature for an existing component, and a new component, and [CONTRIBUTING.md](https://github.com/richlaconte/altitude/blob/main/CONTRIBUTING.md) says what makes each one useful.
+Open an issue: **https://github.com/richlaconte/altitude/issues/new/choose**. There are templates for a bug, a new feature for an existing component, and a new component, and [CONTRIBUTING.md](https://github.com/richlaconte/altitude/blob/main/CONTRIBUTING.md) says what makes each one useful, and how work is organised (milestones, priorities, the `ready` label and claiming an issue with a draft pull request).
 
 **If you're an agent using this package** in someone else's project, you're welcome to report problems with it here:
 
@@ -90,3 +105,26 @@ The full guidance for agents is in [AGENTS.md](https://github.com/richlaconte/al
 ## License
 
 [MIT](https://github.com/richlaconte/altitude/blob/main/LICENSE)
+
+## Design and HCI framework
+
+Altitude now joins its component library with task guidance and small workflow APIs for forms, data and processes. The four initial patterns are **edit record**, **async collection**, **consequential action**, and **review and submit**. They are experimental: engineering fixtures cover their contracts; user-effectiveness studies remain outstanding.
+
+```sh
+npm install altitude-design
+npx altitude patterns "edit settings"
+npx altitude init --client codex          # preview exact changes
+npx altitude init --client codex --apply   # apply after reviewing the preview
+# Claude Code: --client claude. Both: --client all.
+npx altitude doctor --json
+```
+
+Setup preserves existing instructions and adds a small versioned pointer to the installed guidance. It never runs on package installation. Preview removal with `npx altitude init --client codex --remove`, then add `--apply` to remove only its managed content. Edited blocks are preserved and require reconciliation. Codex uses a nonempty root `AGENTS.override.md` when present; otherwise `AGENTS.md`. Claude Code uses `CLAUDE.md`. Restart the client after setup. See [setup details](docs/framework/AGENT-SETUP.md).
+
+The compact entry is `node_modules/altitude-design/dist/guidance/README.md`; the public `altitude-design/guidance` export resolves its versioned JSON index, and `altitude-design/guidance/*` exposes focused resources. `altitude explain ALT-EDIT-001` explains a rule, its scope, evidence and verification. Guidance is local and version matched; no hosted service or MCP connection is required.
+
+Import `useEditRecord`, `ErrorSummary`, `WorkflowStatus`, `useAsyncCollection`, `useConsequentialAction` and `useReviewSubmit` from the existing `altitude-design` entry. They share the existing provider/context. [Task contracts and examples](project/framework/README.md) explain application adapters and the corresponding [interactive previews](https://richlaconte.github.io/altitude/storybook/?path=/story/patterns-editrecord--preview).
+
+Framework behavior protects drafts, coordinates applicable states, guards duplicate dispatch and stale responses, and supports accessible error navigation and status feedback. Applications still supply truthful persistence, permissions, business rules, query/history policy, durable recovery and actual undo. `doctor` diagnoses installation and setup; it does not certify accessibility or usability. [Manual review](docs/framework/MANUAL-VALIDATION.md), [migration notes](docs/framework/RELEASE-NOTES.md) and the [evaluation protocol](evals/framework/README.md) state the remaining work.
+
+Run `npm run build && npm run check:framework` for deterministic semantics, workflow, guidance and packed-package consumer checks. Run agent comparisons separately using the evaluation harness; stochastic model behavior does not gate ordinary CI.

package/dist/adapters/codemirror.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// project/components/src/adapter-codemirror.tsx
+var adapter_codemirror_exports = {};
+__export(adapter_codemirror_exports, {
+  altitudeEditorTheme: () => altitudeEditorTheme,
+  altitudeHighlightStyle: () => altitudeHighlightStyle,
+  altitudeTheme: () => altitudeTheme
+});
+module.exports = __toCommonJS(adapter_codemirror_exports);
+var import_view = require("@codemirror/view");
+var import_language = require("@codemirror/language");
+var import_highlight = require("@lezer/highlight");
+var wall = "inset 0 4px 0 0 var(--alt-wall-in), inset 0 7px 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip)";
+var altitudeEditorTheme = import_view.EditorView.theme({
+  "&": {
+    color: "var(--ink)",
+    backgroundColor: "var(--surface-well)",
+    border: "1px solid var(--line-control)",
+    borderRadius: "var(--radius-md)",
+    boxShadow: wall,
+    outline: "1px solid transparent"
+  },
+  "&:hover": { borderColor: "var(--ink-muted)" },
+  "&.cm-focused": { outline: "1px solid transparent", backgroundColor: "var(--surface-raised)" },
+  "&:has(.cm-content:focus-visible)": { borderColor: "var(--alt-rim-held)", outlineColor: "var(--alt-rim-held)" },
+  ".cm-scroller": { fontFamily: "var(--font-mono)", fontSize: "13px", lineHeight: "20px", paddingTop: "4px" },
+  ".cm-content": { caretColor: "var(--ink)", padding: "var(--space-2) 0" },
+  ".cm-line": { padding: "0 var(--space-3)" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--ink)", borderLeftWidth: "2px" },
+  ".cm-gutters": { backgroundColor: "transparent", color: "var(--ink-muted)", border: "none", borderRight: "1px solid var(--line)" },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 var(--space-2) 0 var(--space-3)" },
+  ".cm-activeLine": { backgroundColor: "color-mix(in oklab, var(--accent-soft) 60%, transparent)" },
+  ".cm-activeLineGutter": { backgroundColor: "transparent", color: "var(--ink)" },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: "color-mix(in oklab, var(--accent-ink) 24%, transparent)" },
+  ".cm-matchingBracket, &.cm-focused .cm-matchingBracket": { backgroundColor: "transparent", outline: "1px solid var(--accent-ink)", borderRadius: "2px" },
+  ".cm-searchMatch": { backgroundColor: "color-mix(in oklab, var(--caution) 22%, transparent)", outline: "1px solid var(--caution)" },
+  ".cm-placeholder": { color: "var(--ink-muted)" },
+  ".cm-lintRange-error": { backgroundImage: "none", textDecoration: "underline wavy var(--critical)", textUnderlineOffset: "3px" },
+  ".cm-lintRange-warning": { backgroundImage: "none", textDecoration: "underline wavy var(--caution)", textUnderlineOffset: "3px" },
+  ".cm-lint-marker": { width: "12px", height: "12px", borderRadius: "3px", backgroundImage: "none !important" },
+  ".cm-lint-marker-error": { backgroundColor: "var(--critical-soft)", boxShadow: "var(--trench), inset 0 0 0 1px var(--critical)" },
+  ".cm-lint-marker-warning": { backgroundColor: "var(--caution-soft)", boxShadow: "inset 0 0 0 1px var(--caution)" },
+  ".cm-diagnostic": { padding: "var(--space-1) var(--space-3)", font: "500 13px/18px var(--font-sans)", color: "var(--ink)" },
+  ".cm-diagnostic-error": { borderLeft: "3px solid var(--critical)" },
+  ".cm-diagnostic-warning": { borderLeft: "3px solid var(--caution)" },
+  ".cm-tooltip": { border: "none", borderRadius: "var(--radius-md)", backgroundColor: "var(--surface-floating)", color: "var(--ink)", boxShadow: "var(--elev-3)", overflow: "hidden" },
+  ".cm-tooltip-autocomplete > ul": { fontFamily: "var(--font-mono)", fontSize: "13px" },
+  ".cm-tooltip-autocomplete > ul > li": { padding: "4px var(--space-2)" },
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": { backgroundColor: "var(--accent-soft)", color: "var(--ink)" },
+  ".cm-panels": { backgroundColor: "var(--surface-ground)", color: "var(--ink)" },
+  ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--line)" },
+  ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--line)" },
+  ".cm-foldPlaceholder": { backgroundColor: "var(--surface-raised)", border: "1px solid var(--line)", color: "var(--ink-muted)" },
+  // Nothing here moves, so reduced motion needs no rule: the editor changes state without transitions.
+  "@media (forced-colors: active)": { ".cm-lint-marker-error": { border: "2px dashed CanvasText" }, ".cm-tooltip": { border: "1px solid CanvasText" } }
+});
+var altitudeHighlightStyle = import_language.HighlightStyle.define([
+  { tag: [import_highlight.tags.keyword, import_highlight.tags.operatorKeyword, import_highlight.tags.modifier, import_highlight.tags.controlKeyword], color: "var(--accent-ink)", fontWeight: "600" },
+  { tag: [import_highlight.tags.number, import_highlight.tags.bool, import_highlight.tags.null, import_highlight.tags.atom], color: "var(--accent-ink)" },
+  { tag: [import_highlight.tags.string, import_highlight.tags.special(import_highlight.tags.string), import_highlight.tags.regexp], color: "var(--ink)" },
+  { tag: [import_highlight.tags.propertyName, import_highlight.tags.attributeName, import_highlight.tags.definition(import_highlight.tags.variableName), import_highlight.tags.function(import_highlight.tags.variableName)], color: "var(--ink)", fontWeight: "550" },
+  { tag: [import_highlight.tags.comment, import_highlight.tags.lineComment, import_highlight.tags.blockComment, import_highlight.tags.docComment], color: "var(--ink-muted)", fontStyle: "italic" },
+  { tag: [import_highlight.tags.punctuation, import_highlight.tags.bracket, import_highlight.tags.separator, import_highlight.tags.operator], color: "var(--ink-muted)" },
+  { tag: [import_highlight.tags.typeName, import_highlight.tags.className, import_highlight.tags.tagName], color: "var(--accent-ink)" },
+  { tag: import_highlight.tags.invalid, color: "var(--critical)" }
+]);
+function altitudeTheme() {
+  return [altitudeEditorTheme, (0, import_language.syntaxHighlighting)(altitudeHighlightStyle)];
+}
+//# sourceMappingURL=codemirror.cjs.map

package/dist/adapters/codemirror.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../project/components/src/adapter-codemirror.tsx"],
+  "sourcesContent": ["import { EditorView } from '@codemirror/view';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport type { Extension } from '@codemirror/state';\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CodeMirror adapter \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/*\n * altitude-design/adapters/codemirror: Altitude readings for a CodeMirror 6 editor. Every value is one of the scheme's\n * custom properties, so the editor follows the active scheme, a custom accent and contrast=\"more\" without re-creating\n * it. It imports only CodeMirror (@codemirror/view, @codemirror/language, @lezer/highlight), which your app installs.\n */\nconst wall = 'inset 0 4px 0 0 var(--alt-wall-in), inset 0 7px 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip)';\n\n/**\n * The editor is an opening: a well with its inside wall, the floor lit while focused and a 2px neutral rim for keyboard\n * focus. Gutter and lines are ground; the active line is a tint, never a height; the selection is accent. Lint errors\n * sink their gutter marker into a trench on critical-soft and say the problem in words. Tooltips and completion lists\n * float at level 3.\n */\nexport const altitudeEditorTheme: Extension = EditorView.theme({\n  '&': { color: 'var(--ink)', backgroundColor: 'var(--surface-well)', border: '1px solid var(--line-control)', borderRadius: 'var(--radius-md)',\n    boxShadow: wall, outline: '1px solid transparent' },\n  '&:hover': { borderColor: 'var(--ink-muted)' },\n  '&.cm-focused': { outline: '1px solid transparent', backgroundColor: 'var(--surface-raised)' },\n  '&:has(.cm-content:focus-visible)': { borderColor: 'var(--alt-rim-held)', outlineColor: 'var(--alt-rim-held)' },\n  '.cm-scroller': { fontFamily: 'var(--font-mono)', fontSize: '13px', lineHeight: '20px', paddingTop: '4px' },\n  '.cm-content': { caretColor: 'var(--ink)', padding: 'var(--space-2) 0' },\n  '.cm-line': { padding: '0 var(--space-3)' },\n  '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--ink)', borderLeftWidth: '2px' },\n  '.cm-gutters': { backgroundColor: 'transparent', color: 'var(--ink-muted)', border: 'none', borderRight: '1px solid var(--line)' },\n  '.cm-lineNumbers .cm-gutterElement': { padding: '0 var(--space-2) 0 var(--space-3)' },\n  '.cm-activeLine': { backgroundColor: 'color-mix(in oklab, var(--accent-soft) 60%, transparent)' },\n  '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--ink)' },\n  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: 'color-mix(in oklab, var(--accent-ink) 24%, transparent)' },\n  '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': { backgroundColor: 'transparent', outline: '1px solid var(--accent-ink)', borderRadius: '2px' },\n  '.cm-searchMatch': { backgroundColor: 'color-mix(in oklab, var(--caution) 22%, transparent)', outline: '1px solid var(--caution)' },\n  '.cm-placeholder': { color: 'var(--ink-muted)' },\n  '.cm-lintRange-error': { backgroundImage: 'none', textDecoration: 'underline wavy var(--critical)', textUnderlineOffset: '3px' },\n  '.cm-lintRange-warning': { backgroundImage: 'none', textDecoration: 'underline wavy var(--caution)', textUnderlineOffset: '3px' },\n  '.cm-lint-marker': { width: '12px', height: '12px', borderRadius: '3px', backgroundImage: 'none !important' },\n  '.cm-lint-marker-error': { backgroundColor: 'var(--critical-soft)', boxShadow: 'var(--trench), inset 0 0 0 1px var(--critical)' },\n  '.cm-lint-marker-warning': { backgroundColor: 'var(--caution-soft)', boxShadow: 'inset 0 0 0 1px var(--caution)' },\n  '.cm-diagnostic': { padding: 'var(--space-1) var(--space-3)', font: '500 13px/18px var(--font-sans)', color: 'var(--ink)' },\n  '.cm-diagnostic-error': { borderLeft: '3px solid var(--critical)' },\n  '.cm-diagnostic-warning': { borderLeft: '3px solid var(--caution)' },\n  '.cm-tooltip': { border: 'none', borderRadius: 'var(--radius-md)', backgroundColor: 'var(--surface-floating)', color: 'var(--ink)', boxShadow: 'var(--elev-3)', overflow: 'hidden' },\n  '.cm-tooltip-autocomplete > ul': { fontFamily: 'var(--font-mono)', fontSize: '13px' },\n  '.cm-tooltip-autocomplete > ul > li': { padding: '4px var(--space-2)' },\n  '.cm-tooltip-autocomplete > ul > li[aria-selected]': { backgroundColor: 'var(--accent-soft)', color: 'var(--ink)' },\n  '.cm-panels': { backgroundColor: 'var(--surface-ground)', color: 'var(--ink)' },\n  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid var(--line)' },\n  '.cm-panels.cm-panels-top': { borderBottom: '1px solid var(--line)' },\n  '.cm-foldPlaceholder': { backgroundColor: 'var(--surface-raised)', border: '1px solid var(--line)', color: 'var(--ink-muted)' },\n  // Nothing here moves, so reduced motion needs no rule: the editor changes state without transitions.\n  '@media (forced-colors: active)': { '.cm-lint-marker-error': { border: '2px dashed CanvasText' }, '.cm-tooltip': { border: '1px solid CanvasText' } },\n});\n\n/** Syntax in ink, ink-muted and accent-ink only: code is text to read, not data to compare, so no data-* hues. */\nexport const altitudeHighlightStyle: HighlightStyle = HighlightStyle.define([\n  { tag: [t.keyword, t.operatorKeyword, t.modifier, t.controlKeyword], color: 'var(--accent-ink)', fontWeight: '600' },\n  { tag: [t.number, t.bool, t.null, t.atom], color: 'var(--accent-ink)' },\n  { tag: [t.string, t.special(t.string), t.regexp], color: 'var(--ink)' },\n  { tag: [t.propertyName, t.attributeName, t.definition(t.variableName), t.function(t.variableName)], color: 'var(--ink)', fontWeight: '550' },\n  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: 'var(--ink-muted)', fontStyle: 'italic' },\n  { tag: [t.punctuation, t.bracket, t.separator, t.operator], color: 'var(--ink-muted)' },\n  { tag: [t.typeName, t.className, t.tagName], color: 'var(--accent-ink)' },\n  { tag: t.invalid, color: 'var(--critical)' },\n]);\n\n/** The whole adapter: `new EditorView({ extensions: [altitudeTheme(), \u2026] })`. */\nexport function altitudeTheme(): Extension {\n  return [altitudeEditorTheme, syntaxHighlighting(altitudeHighlightStyle)];\n}\n"],
+  "mappings": "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",
+  "names": ["t"]
+}

package/dist/adapters/codemirror.js

@@ -0,0 +1,67 @@
+// project/components/src/adapter-codemirror.tsx
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+var wall = "inset 0 4px 0 0 var(--alt-wall-in), inset 0 7px 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip)";
+var altitudeEditorTheme = EditorView.theme({
+  "&": {
+    color: "var(--ink)",
+    backgroundColor: "var(--surface-well)",
+    border: "1px solid var(--line-control)",
+    borderRadius: "var(--radius-md)",
+    boxShadow: wall,
+    outline: "1px solid transparent"
+  },
+  "&:hover": { borderColor: "var(--ink-muted)" },
+  "&.cm-focused": { outline: "1px solid transparent", backgroundColor: "var(--surface-raised)" },
+  "&:has(.cm-content:focus-visible)": { borderColor: "var(--alt-rim-held)", outlineColor: "var(--alt-rim-held)" },
+  ".cm-scroller": { fontFamily: "var(--font-mono)", fontSize: "13px", lineHeight: "20px", paddingTop: "4px" },
+  ".cm-content": { caretColor: "var(--ink)", padding: "var(--space-2) 0" },
+  ".cm-line": { padding: "0 var(--space-3)" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--ink)", borderLeftWidth: "2px" },
+  ".cm-gutters": { backgroundColor: "transparent", color: "var(--ink-muted)", border: "none", borderRight: "1px solid var(--line)" },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 var(--space-2) 0 var(--space-3)" },
+  ".cm-activeLine": { backgroundColor: "color-mix(in oklab, var(--accent-soft) 60%, transparent)" },
+  ".cm-activeLineGutter": { backgroundColor: "transparent", color: "var(--ink)" },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: "color-mix(in oklab, var(--accent-ink) 24%, transparent)" },
+  ".cm-matchingBracket, &.cm-focused .cm-matchingBracket": { backgroundColor: "transparent", outline: "1px solid var(--accent-ink)", borderRadius: "2px" },
+  ".cm-searchMatch": { backgroundColor: "color-mix(in oklab, var(--caution) 22%, transparent)", outline: "1px solid var(--caution)" },
+  ".cm-placeholder": { color: "var(--ink-muted)" },
+  ".cm-lintRange-error": { backgroundImage: "none", textDecoration: "underline wavy var(--critical)", textUnderlineOffset: "3px" },
+  ".cm-lintRange-warning": { backgroundImage: "none", textDecoration: "underline wavy var(--caution)", textUnderlineOffset: "3px" },
+  ".cm-lint-marker": { width: "12px", height: "12px", borderRadius: "3px", backgroundImage: "none !important" },
+  ".cm-lint-marker-error": { backgroundColor: "var(--critical-soft)", boxShadow: "var(--trench), inset 0 0 0 1px var(--critical)" },
+  ".cm-lint-marker-warning": { backgroundColor: "var(--caution-soft)", boxShadow: "inset 0 0 0 1px var(--caution)" },
+  ".cm-diagnostic": { padding: "var(--space-1) var(--space-3)", font: "500 13px/18px var(--font-sans)", color: "var(--ink)" },
+  ".cm-diagnostic-error": { borderLeft: "3px solid var(--critical)" },
+  ".cm-diagnostic-warning": { borderLeft: "3px solid var(--caution)" },
+  ".cm-tooltip": { border: "none", borderRadius: "var(--radius-md)", backgroundColor: "var(--surface-floating)", color: "var(--ink)", boxShadow: "var(--elev-3)", overflow: "hidden" },
+  ".cm-tooltip-autocomplete > ul": { fontFamily: "var(--font-mono)", fontSize: "13px" },
+  ".cm-tooltip-autocomplete > ul > li": { padding: "4px var(--space-2)" },
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": { backgroundColor: "var(--accent-soft)", color: "var(--ink)" },
+  ".cm-panels": { backgroundColor: "var(--surface-ground)", color: "var(--ink)" },
+  ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--line)" },
+  ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--line)" },
+  ".cm-foldPlaceholder": { backgroundColor: "var(--surface-raised)", border: "1px solid var(--line)", color: "var(--ink-muted)" },
+  // Nothing here moves, so reduced motion needs no rule: the editor changes state without transitions.
+  "@media (forced-colors: active)": { ".cm-lint-marker-error": { border: "2px dashed CanvasText" }, ".cm-tooltip": { border: "1px solid CanvasText" } }
+});
+var altitudeHighlightStyle = HighlightStyle.define([
+  { tag: [t.keyword, t.operatorKeyword, t.modifier, t.controlKeyword], color: "var(--accent-ink)", fontWeight: "600" },
+  { tag: [t.number, t.bool, t.null, t.atom], color: "var(--accent-ink)" },
+  { tag: [t.string, t.special(t.string), t.regexp], color: "var(--ink)" },
+  { tag: [t.propertyName, t.attributeName, t.definition(t.variableName), t.function(t.variableName)], color: "var(--ink)", fontWeight: "550" },
+  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: "var(--ink-muted)", fontStyle: "italic" },
+  { tag: [t.punctuation, t.bracket, t.separator, t.operator], color: "var(--ink-muted)" },
+  { tag: [t.typeName, t.className, t.tagName], color: "var(--accent-ink)" },
+  { tag: t.invalid, color: "var(--critical)" }
+]);
+function altitudeTheme() {
+  return [altitudeEditorTheme, syntaxHighlighting(altitudeHighlightStyle)];
+}
+export {
+  altitudeEditorTheme,
+  altitudeHighlightStyle,
+  altitudeTheme
+};
+//# sourceMappingURL=codemirror.js.map

package/dist/adapters/codemirror.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../project/components/src/adapter-codemirror.tsx"],
+  "sourcesContent": ["import { EditorView } from '@codemirror/view';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport type { Extension } from '@codemirror/state';\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CodeMirror adapter \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/*\n * altitude-design/adapters/codemirror: Altitude readings for a CodeMirror 6 editor. Every value is one of the scheme's\n * custom properties, so the editor follows the active scheme, a custom accent and contrast=\"more\" without re-creating\n * it. It imports only CodeMirror (@codemirror/view, @codemirror/language, @lezer/highlight), which your app installs.\n */\nconst wall = 'inset 0 4px 0 0 var(--alt-wall-in), inset 0 7px 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip)';\n\n/**\n * The editor is an opening: a well with its inside wall, the floor lit while focused and a 2px neutral rim for keyboard\n * focus. Gutter and lines are ground; the active line is a tint, never a height; the selection is accent. Lint errors\n * sink their gutter marker into a trench on critical-soft and say the problem in words. Tooltips and completion lists\n * float at level 3.\n */\nexport const altitudeEditorTheme: Extension = EditorView.theme({\n  '&': { color: 'var(--ink)', backgroundColor: 'var(--surface-well)', border: '1px solid var(--line-control)', borderRadius: 'var(--radius-md)',\n    boxShadow: wall, outline: '1px solid transparent' },\n  '&:hover': { borderColor: 'var(--ink-muted)' },\n  '&.cm-focused': { outline: '1px solid transparent', backgroundColor: 'var(--surface-raised)' },\n  '&:has(.cm-content:focus-visible)': { borderColor: 'var(--alt-rim-held)', outlineColor: 'var(--alt-rim-held)' },\n  '.cm-scroller': { fontFamily: 'var(--font-mono)', fontSize: '13px', lineHeight: '20px', paddingTop: '4px' },\n  '.cm-content': { caretColor: 'var(--ink)', padding: 'var(--space-2) 0' },\n  '.cm-line': { padding: '0 var(--space-3)' },\n  '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--ink)', borderLeftWidth: '2px' },\n  '.cm-gutters': { backgroundColor: 'transparent', color: 'var(--ink-muted)', border: 'none', borderRight: '1px solid var(--line)' },\n  '.cm-lineNumbers .cm-gutterElement': { padding: '0 var(--space-2) 0 var(--space-3)' },\n  '.cm-activeLine': { backgroundColor: 'color-mix(in oklab, var(--accent-soft) 60%, transparent)' },\n  '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--ink)' },\n  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: 'color-mix(in oklab, var(--accent-ink) 24%, transparent)' },\n  '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': { backgroundColor: 'transparent', outline: '1px solid var(--accent-ink)', borderRadius: '2px' },\n  '.cm-searchMatch': { backgroundColor: 'color-mix(in oklab, var(--caution) 22%, transparent)', outline: '1px solid var(--caution)' },\n  '.cm-placeholder': { color: 'var(--ink-muted)' },\n  '.cm-lintRange-error': { backgroundImage: 'none', textDecoration: 'underline wavy var(--critical)', textUnderlineOffset: '3px' },\n  '.cm-lintRange-warning': { backgroundImage: 'none', textDecoration: 'underline wavy var(--caution)', textUnderlineOffset: '3px' },\n  '.cm-lint-marker': { width: '12px', height: '12px', borderRadius: '3px', backgroundImage: 'none !important' },\n  '.cm-lint-marker-error': { backgroundColor: 'var(--critical-soft)', boxShadow: 'var(--trench), inset 0 0 0 1px var(--critical)' },\n  '.cm-lint-marker-warning': { backgroundColor: 'var(--caution-soft)', boxShadow: 'inset 0 0 0 1px var(--caution)' },\n  '.cm-diagnostic': { padding: 'var(--space-1) var(--space-3)', font: '500 13px/18px var(--font-sans)', color: 'var(--ink)' },\n  '.cm-diagnostic-error': { borderLeft: '3px solid var(--critical)' },\n  '.cm-diagnostic-warning': { borderLeft: '3px solid var(--caution)' },\n  '.cm-tooltip': { border: 'none', borderRadius: 'var(--radius-md)', backgroundColor: 'var(--surface-floating)', color: 'var(--ink)', boxShadow: 'var(--elev-3)', overflow: 'hidden' },\n  '.cm-tooltip-autocomplete > ul': { fontFamily: 'var(--font-mono)', fontSize: '13px' },\n  '.cm-tooltip-autocomplete > ul > li': { padding: '4px var(--space-2)' },\n  '.cm-tooltip-autocomplete > ul > li[aria-selected]': { backgroundColor: 'var(--accent-soft)', color: 'var(--ink)' },\n  '.cm-panels': { backgroundColor: 'var(--surface-ground)', color: 'var(--ink)' },\n  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid var(--line)' },\n  '.cm-panels.cm-panels-top': { borderBottom: '1px solid var(--line)' },\n  '.cm-foldPlaceholder': { backgroundColor: 'var(--surface-raised)', border: '1px solid var(--line)', color: 'var(--ink-muted)' },\n  // Nothing here moves, so reduced motion needs no rule: the editor changes state without transitions.\n  '@media (forced-colors: active)': { '.cm-lint-marker-error': { border: '2px dashed CanvasText' }, '.cm-tooltip': { border: '1px solid CanvasText' } },\n});\n\n/** Syntax in ink, ink-muted and accent-ink only: code is text to read, not data to compare, so no data-* hues. */\nexport const altitudeHighlightStyle: HighlightStyle = HighlightStyle.define([\n  { tag: [t.keyword, t.operatorKeyword, t.modifier, t.controlKeyword], color: 'var(--accent-ink)', fontWeight: '600' },\n  { tag: [t.number, t.bool, t.null, t.atom], color: 'var(--accent-ink)' },\n  { tag: [t.string, t.special(t.string), t.regexp], color: 'var(--ink)' },\n  { tag: [t.propertyName, t.attributeName, t.definition(t.variableName), t.function(t.variableName)], color: 'var(--ink)', fontWeight: '550' },\n  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: 'var(--ink-muted)', fontStyle: 'italic' },\n  { tag: [t.punctuation, t.bracket, t.separator, t.operator], color: 'var(--ink-muted)' },\n  { tag: [t.typeName, t.className, t.tagName], color: 'var(--accent-ink)' },\n  { tag: t.invalid, color: 'var(--critical)' },\n]);\n\n/** The whole adapter: `new EditorView({ extensions: [altitudeTheme(), \u2026] })`. */\nexport function altitudeTheme(): Extension {\n  return [altitudeEditorTheme, syntaxHighlighting(altitudeHighlightStyle)];\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/adapters/react-flow.css

@@ -0,0 +1,102 @@
+/* altitude-design/adapters/react-flow.css: Altitude readings for a React Flow (@xyflow/react 12) node-and-edge canvas.
+   Import it after altitude.css and after React Flow's own stylesheet (base.css or style.css). It sets React Flow's
+   --xy-* properties from the active scheme and styles its elements; it imports nothing.
+   - The canvas is ground, with a dot grid in line.
+   - Nodes are Cards at level 1; a node that can be selected lifts one level when pointed at; a dragged node is in your
+     hand at level 3. Selection is a rim, never extra height.
+   - Ports (handles) are small openings that deepen under an edge being drawn, and take the accent rim where it can
+     land. The edge being drawn is a dashed line-control stroke; edges are line-control, a selected edge accent-ink.
+   - Give a node className "alt-node-pending" while its work runs (it hovers, as a pending write) or "alt-node-failed"
+     when it failed (it drops into a trench). Say the state in the node's words too.
+   - The minimap is a well with a raised lens (the ChartBrush build); controls are a raised toolbar.
+   React Flow's keyboard support and ARIA are untouched. ── */
+.react-flow {
+  --xy-background-color: var(--surface-ground);
+  --xy-background-pattern-dots-color: var(--line-control);
+  --xy-background-pattern-color: var(--line-control);
+  --xy-node-color: var(--ink);
+  --xy-node-background-color: var(--surface-raised);
+  --xy-node-border: 0;
+  --xy-node-border-radius: var(--radius-lg);
+  --xy-node-boxshadow-hover: var(--elev-2);
+  --xy-node-boxshadow-selected: var(--elev-1), 0 0 0 2px var(--accent-ink);
+  --xy-node-group-background-color: color-mix(in oklab, var(--surface-well) 60%, transparent);
+  --xy-edge-stroke: var(--line-control);
+  --xy-edge-stroke-width: 1.5;
+  --xy-edge-stroke-selected: var(--accent-ink);
+  --xy-connectionline-stroke: var(--ink-muted);
+  --xy-connectionline-stroke-width: 1.5;
+  --xy-edge-label-background-color: var(--surface-ground);
+  --xy-edge-label-color: var(--ink-muted);
+  --xy-handle-background-color: var(--surface-well);
+  --xy-handle-border-color: var(--line-control);
+  --xy-selection-background-color: color-mix(in oklab, var(--accent-soft) 50%, transparent);
+  --xy-selection-border: 1px dashed var(--accent-ink);
+  --xy-minimap-background-color: var(--surface-well);
+  --xy-minimap-mask-background-color: color-mix(in oklab, var(--surface-well) 72%, transparent);
+  --xy-minimap-mask-stroke-color: var(--line-control);
+  --xy-minimap-mask-stroke-width: 1;
+  --xy-minimap-node-background-color: var(--line-control);
+  --xy-controls-button-background-color: var(--surface-raised);
+  --xy-controls-button-background-color-hover: var(--surface-lifted);
+  --xy-controls-button-color: var(--ink);
+  --xy-controls-button-color-hover: var(--ink);
+  --xy-controls-button-border-color: var(--line);
+  --xy-controls-box-shadow: var(--elev-1);
+  --xy-attribution-background-color: transparent;
+  color: var(--ink); font-family: var(--font-sans);
+}
+
+/* Nodes: Cards at level 1. */
+.react-flow .react-flow__node-default, .react-flow .react-flow__node-input, .react-flow .react-flow__node-output, .react-flow .alt-node {
+  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink);
+  max-width: 220px; box-shadow: var(--elev-1); font: 500 13px/18px var(--font-sans); text-align: start; overflow-wrap: break-word;
+  transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise);
+}
+.react-flow .react-flow__node.selectable:hover:not(.dragging) { box-shadow: var(--elev-2); }
+.react-flow .react-flow__node.selectable.selected, .react-flow .react-flow__node.selectable.selected:hover:not(.dragging) { box-shadow: var(--elev-1), 0 0 0 2px var(--accent-ink); }
+.react-flow .react-flow__node.selectable:focus-visible { outline: 2px solid var(--alt-rim-held); outline-offset: 2px; box-shadow: var(--elev-1); }
+/* Possession: a dragged node is in your hand. */
+.react-flow .react-flow__node.dragging { box-shadow: var(--elev-3); cursor: grabbing; }
+/* Status: running hovers as a pending write; failed drops into a trench. */
+.react-flow .react-flow__node.alt-node-pending { box-shadow: var(--elev-2); animation: alt-flow-hover var(--dur-hover) ease-in-out var(--dur-grace) infinite alternate both; cursor: progress; }
+@keyframes alt-flow-hover { from { box-shadow: var(--elev-2); } to { box-shadow: var(--elev-3); } }
+.react-flow .react-flow__node.alt-node-failed { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+
+/* Ports: small openings that deepen to receive an edge. */
+.react-flow .react-flow__handle {
+  width: 10px; height: 10px; border: 1px solid var(--line-control); border-radius: 50%; background: var(--surface-well);
+  box-shadow: inset 0 1.5px 0 0 var(--alt-wall-in); transition: box-shadow var(--dur-travel-1) var(--ease-settle), background-color var(--dur-travel-1);
+}
+.react-flow .react-flow__handle.connectionindicator:hover, .react-flow .react-flow__handle.connectingfrom { box-shadow: inset 0 3px 0 0 var(--alt-wall-in); }
+.react-flow .react-flow__handle.connectingto { background: var(--surface-trench); box-shadow: var(--trench); }
+.react-flow .react-flow__handle.connectingto.valid { border-color: var(--accent-ink); box-shadow: var(--trench), 0 0 0 2px var(--accent-ink); }
+
+/* Edges */
+.react-flow .react-flow__connection-path { stroke-dasharray: 5 4; }
+.react-flow .react-flow__edge-text { font: 500 12px/16px var(--font-sans); fill: var(--ink-muted); }
+.react-flow .react-flow__edge-textbg { fill: var(--surface-ground); }
+.react-flow .react-flow__edge.alt-edge-failed .react-flow__edge-path { stroke: var(--critical); stroke-dasharray: 4 3; }
+
+/* Minimap: a well with a raised lens. Controls: a raised toolbar. */
+.react-flow .react-flow__minimap { border-radius: var(--radius-md); box-shadow: inset 0 2px 0 0 var(--alt-wall-in), 0 0 0 1px var(--line-control); overflow: hidden; }
+.react-flow .react-flow__controls { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elev-1); }
+.react-flow .react-flow__controls-button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
+.react-flow .react-flow__controls-button:last-child { border-bottom: 0; }
+.react-flow .react-flow__controls-button:hover { background: var(--surface-lifted); }
+.react-flow .react-flow__controls-button svg { width: 12px; height: 12px; }
+.react-flow .react-flow__controls-button svg { fill: currentColor; }
+.react-flow .react-flow__controls-button:focus-visible { outline: 2px solid var(--alt-rim-held); outline-offset: -2px; }
+.react-flow .react-flow__attribution a { color: var(--ink-muted); }
+
+@media (prefers-reduced-motion: reduce) { .react-flow .react-flow__node, .react-flow .react-flow__handle { transition: none; } .react-flow .react-flow__node.alt-node-pending { animation: none; } }
+[data-motion="reduced"] .react-flow .react-flow__node, [data-motion="reduced"] .react-flow .react-flow__handle { transition: none; }
+[data-motion="reduced"] .react-flow .react-flow__node.alt-node-pending { animation: none; }
+@media (forced-colors: active) {
+  .react-flow .react-flow__node { border: 1px solid CanvasText; }
+  .react-flow .react-flow__node.selected { outline: 2px solid Highlight; }
+  .react-flow .react-flow__node.alt-node-pending { border-style: dotted; border-width: 2px; }
+  .react-flow .react-flow__node.alt-node-failed { border: 2px dashed CanvasText; }
+  .react-flow .react-flow__handle { border-color: CanvasText; }
+  .react-flow .react-flow__edge-path, .react-flow .react-flow__connection-path { stroke: CanvasText; }
+}

package/dist/adapters/tiptap.css

@@ -0,0 +1,71 @@
+/* altitude-design/adapters/tiptap.css: Altitude readings for a Tiptap (ProseMirror) rich text editor.
+   Import it after altitude.css. It styles Tiptap's own elements; it doesn't import Tiptap, which your app installs.
+   - The editor is an opening, built like Textarea: an empty editor is a well showing its inside wall; once it holds
+     content the floor rises flush; focus lights the floor, and keyboard focus adds the 2px neutral rim.
+   - Content follows Altitude's type: links are .alt-link, inline code a mono plate, code blocks CodeBlock's ground,
+     mentions a flush Tag plate.
+   - The formatting bar is yours to render with Toolbar and ToolbarToggle (latched toggles). The mention list is yours
+     to render too: give it class "alt-rte-mentions" (role listbox, options with aria-selected) and it floats at level 3
+     like Combobox's list.
+   Tiptap's keyboard support and ARIA are untouched. ── */
+.tiptap {
+  --w: 4px; --n: 0; --wc: var(--alt-wall-in); --wd: calc(var(--w) + var(--n) * 2px);
+  position: relative; min-height: 120px; padding: calc(var(--space-2) + var(--wd) * 0.5) var(--space-3) var(--space-2);
+  border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-well); color: var(--ink);
+  font: 400 15px/23px var(--font-sans); overflow-wrap: break-word; cursor: text;
+  box-shadow: inset 0 var(--wd) 0 0 var(--wc), inset 0 calc(var(--wd) + 3px) 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip);
+  outline: 1px solid transparent; outline-offset: 0;
+  transition: background-color var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-settle), border-color var(--dur-travel-1) var(--ease-rise),
+    outline-color var(--dur-travel-1) var(--ease-rise), padding var(--dur-travel-2) var(--ease-settle);
+}
+.tiptap:hover { border-color: var(--ink-muted); }
+/* Filled: anything but a single empty paragraph. The floor rises flush with the page. */
+.tiptap:not(:has(> p:only-child > br.ProseMirror-trailingBreak:only-child)):not(:has(> p:only-child:empty)) { --w: 0px; background: var(--surface-raised); }
+.tiptap.ProseMirror-focused, .tiptap:focus { background: var(--surface-raised); --n: var(--alt-travel); }
+.tiptap:focus-visible { border-color: var(--alt-rim-held); outline-color: var(--alt-rim-held); }
+.tiptap[contenteditable="false"] { --w: 0px; --n: 0; background: var(--surface-ground); border-color: var(--line); cursor: default; }
+.tiptap[aria-invalid="true"] { --w: 6px; --n: 0; --wc: color-mix(in oklab, var(--critical-soft), var(--critical) 34%); background: var(--critical-soft); border-color: var(--critical); }
+
+/* Placeholder (Tiptap's Placeholder extension): ink-muted, never the value. */
+.tiptap p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--ink-muted); pointer-events: none; }
+
+/* Content */
+.tiptap > :first-child { margin-top: 0; }
+.tiptap > :last-child { margin-bottom: 0; }
+.tiptap p { margin: 0 0 var(--space-2); }
+.tiptap h1, .tiptap h2, .tiptap h3 { margin: var(--space-4) 0 var(--space-2); font-weight: 600; letter-spacing: -0.01em; }
+.tiptap h1 { font-size: 21px; line-height: 28px; } .tiptap h2 { font-size: 18px; line-height: 25px; } .tiptap h3 { font-size: 16px; line-height: 23px; }
+.tiptap ul, .tiptap ol { margin: 0 0 var(--space-2); padding-inline-start: 22px; }
+.tiptap li > p { margin: 0; }
+.tiptap li::marker { color: var(--ink-muted); }
+.tiptap blockquote { margin: 0 0 var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--line-control); color: var(--ink-muted); }
+.tiptap hr { margin: var(--space-3) 0; border: 0; border-top: 1px solid var(--line); }
+.tiptap a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
+.tiptap code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--surface-well); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.88em/1 var(--font-mono); }
+.tiptap pre { margin: 0 0 var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-ground); overflow-x: auto; }
+.tiptap pre code { padding: 0; background: none; box-shadow: none; font: 400 13px/20px var(--font-mono); }
+.tiptap strong { font-weight: 600; }
+.tiptap ::selection { background: var(--accent-soft); }
+.tiptap .mention, .tiptap [data-type="mention"] {
+  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); vertical-align: baseline;
+  background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); color: var(--ink); font: 550 0.9em/1 var(--font-sans);
+  box-shadow: inset 0 1px 1.5px color-mix(in oklab, var(--ink) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent);
+}
+.tiptap .ProseMirror-selectednode { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.tiptap .ProseMirror-gapcursor::after { border-top-color: var(--ink); }
+
+/* The mention list: your markup, floating at level 3 like Combobox's list. */
+.alt-rte-mentions { min-width: 200px; max-height: 260px; padding: var(--space-1); overflow-y: auto; border-radius: var(--radius-lg); background: var(--surface-floating); box-shadow: var(--elev-3); }
+.alt-rte-mentions [role="option"] { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
+.alt-rte-mentions [role="option"][aria-selected="true"] { background: var(--accent-soft); }
+
+@media (prefers-reduced-motion: reduce) { .tiptap { transition: none; } }
+[data-motion="reduced"] .tiptap { transition: none; }
+@media (forced-colors: active) {
+  .tiptap { border: 1px solid CanvasText; }
+  .tiptap:has(> p:only-child > br.ProseMirror-trailingBreak:only-child) { border-style: dashed; }
+  .tiptap:focus-visible { outline: 2px solid Highlight; }
+  .tiptap .mention, .tiptap [data-type="mention"] { border: 1px solid CanvasText; }
+  .alt-rte-mentions { border: 1px solid CanvasText; }
+  .alt-rte-mentions [role="option"][aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
+}