@ecsplico/editor 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matthias Ortegro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,234 @@
-# Temporary Holding Version
+# @ecsplico/editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Vue and React editor library on TipTap v3. Editors are assembled from **features**: the *simple* editor is the core feature alone (formatting, headings, lists, quotes, code, undo/redo) and needs no backend, no Yjs and no feature code; the *advanced* editor composes every feature (media, mentions, transcripts, composites, authors, comments, AI, collaboration, block UI, site-wide Obsidian themes and their integrations) on both surfaces. The framework-free `./core` holds the feature model, and every feature's logic is framework-free too (`./<feature>`): a feature is built from a typed **UI binding** (`<x>FeatureCore(ui)`) that the Vue layer (`./<feature>/vue`, Nuxt UI chrome) and the React layer (`./<feature>/react`, shadcn/ui on Radix and Tailwind) fill with their components, node views and notice seam. Toolbar, settings panel and modal, outline, AI sidebar, comments margin, composite table and inspector, and the file browser are components you place anywhere beside an editor; both layers ship the simple editor (`./vue/simple`, `./react/simple`) and the advanced editor (`./vue/advanced`, `./react/advanced`).
+
+## Prerequisites
+
+- Node ≥ 22 and [Bun](https://bun.sh) (the repository is a Bun workspace: `packages/*`, `examples/*`).
+- A Vite- or Nuxt-based app (`@vitejs/plugin-vue` / `@vitejs/plugin-react`, or Nuxt). The published package is a **built ESM package**: every `exports` subpath resolves to `dist/**/*.js` with `.d.ts` (Vue SFCs are compiled, React `.tsx` is compiled to JSX-runtime JS), the CSS sheets are copied, and the source maps embed the sources (`src` itself is not published). Output is one module per source file, so entries stay tree-shakeable.
+- Required peer dependencies (install them in the consuming app so the host and the library share one instance of each): `@tiptap/core`, `@tiptap/pm`, `yjs`, `@hocuspocus/provider`. Yjs and the provider are required peers because shared prop types in the `.d.ts` reference them; a simple-editor bundle does not contain their implementation (proven below). Per layer (all optional peers): **Vue** `vue`, `@nuxt/ui`, `@tiptap/vue-3`; **React** `react`, `react-dom`, `@tiptap/react`, `@iconify/react`; **code surface** (`/code`) `@codemirror/state`, `@codemirror/view`, `@codemirror/language`, `@codemirror/commands`, `@codemirror/search`, `@lezer/highlight`, plus the `@codemirror/lang-*` packs you register (the package ships none).
+- Tailwind CSS 4 (`tailwindcss`) for the Nuxt UI theme (Vue) or the shadcn classes (React), and the icon collection `@iconify-json/lucide`. React hosts also need `tw-animate-css` (enter/exit animations of the dialog, dropdown and tooltip).
+
+## Install
+
+From npmjs (public, no token and no `.npmrc` needed):
+
+```sh
+npm install @ecsplico/editor      # or: bun add @ecsplico/editor / pnpm add @ecsplico/editor
+```
+
+Inside this repository the package is a workspace member, so consumers there declare `"@ecsplico/editor": "workspace:*"`.
+
+### Nuxt quick start
+
+Install the peers next to the package (`vue`, `@nuxt/ui`, `@tiptap/core`, `@tiptap/pm`, `@tiptap/vue-3`, `yjs`, `@hocuspocus/provider`, `tailwindcss`, `@iconify-json/lucide`), then register the module **after** `@nuxt/ui`:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  ssr: false, // TipTap renders on the client only
+  modules: ['@nuxt/ui', '@ecsplico/editor/nuxt'],
+  css: ['~/assets/main.css'],
+})
+```
+
+```css
+/* app/assets/main.css */
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
+Wrap the app in `<UApp>` (`app/app.vue`: `<UApp><NuxtPage /></UApp>`) and mount an editor on a page (the simple editor needs no backend):
+
+```vue
+<script setup lang="ts">
+import { SimpleEditor } from '@ecsplico/editor/vue/simple'
+import { ref } from 'vue'
+const content = ref()
+</script>
+
+<template>
+  <SimpleEditor v-model="content" />
+</template>
+```
+
+The module's API routes call the host's `EditorAdapter` (identity and storage). Register one in a Nitro plugin; without it the client logs „Einstellungen konnten nicht geladen werden“ and every route answers 500. This minimal adapter keeps settings in the browser and everything else in memory, and lets any visitor in (replace `authenticate` and the storage with yours):
+
+```ts
+// server/plugins/editor-adapter.ts
+import type { JSONContent } from '@tiptap/core'
+import { type EditorAdapter, setEditorAdapter } from '@ecsplico/editor/server'
+
+export default defineNitroPlugin(() => {
+  const contents = new Map<string, JSONContent>()
+  const states = new Map<string, Uint8Array>()
+  const assets = new Map<string, Parameters<EditorAdapter['storeAsset']>[1]>()
+  setEditorAdapter({
+    authenticate: async () => ({ id: 'demo', username: 'demo' }), // `null` = 401 on API routes; on /collab the socket is closed with 4401 (HTTP 401 at the upgrade with `collab.authenticateUpgrade`)
+    loadContent: async id => contents.get(id) ?? null,
+    storeContent: async (id, content) => { contents.set(id, content) },
+    listUsers: async () => [],
+    listContents: async () => [...contents].map(([id, content]) => ({ id, content })),
+    loadState: async id => states.get(id) ?? null,
+    storeState: async (id, state) => { states.set(id, state) },
+    removeState: async (id) => { states.delete(id) },
+    storeAsset: async (id, asset) => { assets.set(`${id}/${asset.name}`, asset) },
+    loadAsset: async (id, name) => {
+      const asset = assets.get(`${id}/${name}`)
+      if (!asset) return null
+      const { data, ...record } = asset
+      return { record, data }
+    },
+  })
+})
+```
+
+The advanced editor, every adapter method, collaboration and AI are covered in the [guide for coding agents](./docs/llms.md#minimal-integration-nuxt) and the [integration guide](./docs/integration.md).
+
+### Building and developing in this repository
+
+`bun run build:editor` (`tsdown`, config `packages/editor/tsdown.config.ts`) writes `packages/editor/dist`: ESM plus `.d.ts` for every `exports` subpath (the entries are read from the `skaile-source` condition of `package.json#exports`, so a new export is built as soon as it is declared), unbundled one module per source file, source maps with embedded sources, CSS copied, and the Nuxt runtime directory (`dist/nuxt/runtime`: plugin, server routes, utils) as separate files next to the module that Nuxt and Nitro compile in the host. Dependencies and peers are never bundled.
+
+Each `exports` entry carries a custom **`skaile-source`** condition first (pointing at `src`) followed by `types`/`import` (or `default`) pointing into `dist`. This repository's Nuxt app (`nuxt.config.ts`) and the examples (`examples/*/vite.config.ts`, `tsconfig.json#customConditions`) enable that condition for Vite, Nitro and the type checker, so **editing the library needs no build step in dev**. Consumers outside the repository never set the condition and get `dist`. `bun run check:editor-entries` builds first and judges the **built** output through `exports` (no `skaile-source`), so it proves what is published; `bun run check:editor-composition` builds first and loads the built entries; `bun run typecheck:editor` resolves through `src` (`customConditions: ["skaile-source"]` in `packages/editor/tsconfig.json`).
+
+## Public exports
+
+Every entry is an explicit subpath of `package.json#exports`; there is no wildcard into internal folders and no runtime umbrella barrel. Importing an entry registers nothing globally.
+
+| Import | Contents |
+|---|---|
+| `@ecsplico/editor` | Type-only: `EditorSettings`, `EditorFeature`, `EditorPreset`, `FeatureContext`, `AnchorResolver`, `ToolbarGroup`, `ToolbarItem`, `BlockAction`, `SlashCommandItem`, `AbilitiesOptions`, `EditorMetadata`, `MetadataItem`, `AuthorIdentity`, … |
+| `@ecsplico/editor/vue` | The Vue layer (Nuxt UI chrome): `createEditor` (Vue plugin around `createEditorContext`), `EDITOR_CONTEXT`, `useEditorContext`, `useEditorSettings`, `useNotifier`, `trackedStore`, `useStoreRef`, `useWritableStoreRef`, `storeFromRef`, `EDITOR_UI`, `useEditorUi` (`openSettings`, `toggleSidebar`, `toggleComments`, `commentsOpen`), `vueSuggestionRenderer`, the components `EditorSurface`, `EditorToolbar`, `EditorSettingsPanel`, `EditorSettingsModal`, `SettingsSection`, `SuggestionList`, and the types `VueFeature`, `VuePreset` (the preset components are the two entries below) |
+| `@ecsplico/editor/vue/simple` | `SimpleEditor` component |
+| `@ecsplico/editor/vue/advanced` | `AdvancedEditor` component (every feature, optional collaboration session) and `advancedEditor(options): VuePreset` (the preset for `EditorToolbar`/`EditorSettingsPanel`/`EditorSettingsModal` beside it, and the base for own feature lists) |
+| `@ecsplico/editor/react` | The React layer (shadcn/ui chrome; Vue-free): `EditorContextProvider`, `useEditorContext`, the components `EditorSurface` (ref handle `EditorSurfaceHandle`: `editor`, `openSettings`), `EditorToolbar`, `EditorSettingsPanel`, `EditorSettingsModal`, `SettingsSection`, `SuggestionList`, `Icon`, the hooks `useEditorSettings` (`settings`, `update`, `set`, `ready`, `synced`), `useEditorUi`, `useNotifier`, `useStore`, `EditorUiContext`, `reactSuggestionRenderer`, the notice seam `reactNotifier` and sonner's `Toaster` (mount it once per page), the `cn` class helper, and the types `ReactFeature`, `ReactPreset`, `EditorSurfaceProps`, `EditorSurfaceHandle`, `SuggestionListHandle`. Presets are `defineEditor({ features })` from `/core` over the `/<feature>/react` bindings and framework-free features, or `advancedEditor()` from `/react/advanced` |
+| `@ecsplico/editor/react/simple` | `SimpleEditor` component (core feature only), `SimpleEditorProps` |
+| `@ecsplico/editor/react/advanced` | `AdvancedEditor` component (every feature and integration with its React binding, optional collaboration session; props `AdvancedEditorProps` = `EditorSurface`'s except `preset`, plus `compositeKinds`) and `advancedEditor(options): ReactPreset`; mount `Toaster` from `/react` beside it |
+| `@ecsplico/editor/react/styles/ui-vars.css` | Maps the shadcn tokens (`--primary`, `--background`, …) to the `--ui-*` variables the feature sheets read; import it before `core.css` |
+| `@ecsplico/editor/react/styles/advanced.css` | One import for React hosts of the advanced editor: `ui-vars.css`, `core.css`, every feature sheet and `themes.css` (with the shadcn bridge for Obsidian themes), in the order the Nuxt module registers them |
+| `@ecsplico/editor/presets/simple` | `simpleEditor(): EditorPreset` (core feature only) |
+| `@ecsplico/editor/presets/advanced` | Framework-free: `ADVANCED_FEATURE_IDS` (feature ids in schema order: `core`, `media`, `transcript`, `composites`, `mentions`, `authors`, `comments`, `ai`, `collab`, `block-ui`, `composite-media`, `composite-ai`, `transcript-ai`, `themes`), `advancedEditorCore(bound, options)` (assembles that list: the layer binds only the UI-bound features, `AdvancedFeatures<C>`; core, mentions and the three integrations are added here), `AdvancedEditorOptions`. The ready presets are `advancedEditor` of `/vue/advanced` and `/react/advanced` |
+| `@ecsplico/editor/core` | Framework-free (Tiptap/ProseMirror only; imports no `vue`, `@tiptap/vue-3`, `@nuxt/ui` or React): `defineEditor`, `coreFeature`, `createEditorContext` (settings context and the translator `ctx.t`, options `locale: 'de' | 'en'` and partial `messages`; with `createStore` `createStore`, `derived`, `Store`, `ReadonlyStore`), the notice seam (`Notice`, `Notifier`, `silentNotifier`), the suggestion renderer seam (`SuggestionPopup`, `suggestionPopupOf`, `SuggestionListProps`, `SuggestionPopupHandle`, `SuggestionPopupRenderer`), `registerEditor`, `Abilities` and ability helpers, `BlockFlash`, `SlashCommand`, `Metadata`, `parseBlocks` / `DEFAULT_BLOCK_PIPELINE`, generic helpers `downloadText` and `fetchErrorMessage`, the feature/toolbar/extension-point types (`EditorFeature<C>`, `FeatureContext`, `ToolbarItem`, `MenuItem`, …), `commandItem` / `mergeToolbarGroups`, and the block-conversion engine for own features (`ConversionProvider`, `ConvertTarget` with its `custom` member for host blocks, `createConverter`, `convertCoreBlocks`, `finishConversion`) |
+| `@ecsplico/editor/core/schema` | Vue-free base schema: `coreSchemaExtensions()`, `EMPTY_EDITOR_CONTENT`, `StrikeX`, `BlockId` helpers (`BLOCK_ID_TYPES`, `blockIdOf`, `findBlockById`, `assignBlockIds`), `NodeFlags` (copies the node flags `editorBlockContainer`, `editorChrome` and `editorBlock` onto the node spec; `editorBlock: true` gives an own node block IDs), `isEditorBlock`, `isBlockContainer`, `isChromeNode`, the ability vocabulary (`ABILITY`, `ROOT_ABILITIES`) |
+| `@ecsplico/editor/schema/simple` | Vue-free `simpleSchemaExtensions()` for servers and validators |
+| `@ecsplico/editor/settings` | `EditorSettings`, `EDITOR_SETTINGS_VERSION`, `EDITOR_SETTINGS_DEFAULTS`, `editorSettingsSchema`, `parseEditorSettings`, inert value constants (`MODEL_SLOTS`, `STRUCTURE_MODES`, `TREE_ROOTS`, `KIND_ICON_VISIBILITIES`, `DRAG_HANDLE_VISIBILITIES`, `AI_LANGUAGES`, `AUTHOR_COLOR_STYLES`, `COMMENTS_LAYOUTS`, …) |
+| `@ecsplico/editor/outline`, `/outline/vue`, `/outline/react` | `/vue` and `/react`: `EditorOutline`; framework-free: `headingOutline`, `revealBlockInEditor`, `HeadingOutlineNode` (imports no tree and no composite code) |
+| `@ecsplico/editor/tree`, `/tree/vue`, `/tree/react`, `/tree/types` | File browser. `/vue` and `/react`: `DocumentTree` (Vue: props `store`, `editor`, `v-model:selectedFolder`, slot `document-actions`; React: props `store`, `editor`, `selectedFolder`/`onSelectedFolderChange` (uncontrolled when omitted), `documentActions`, `className`; needs `EditorContextProvider` and a mounted `Toaster`), `useTreeView` (Vue: `nodeFilters`/`expanded` as refs; React: as values); framework-free: `DocumentStore` (store-based: `tree`, `documents`, `activeId` are `ReadonlyStore`s plus the host's operations), `createTreeView`, `treeView(context)` (the per-app view state: node filters, expanded folders), `TreeViewModel`, `NodeFilters`, `TreeFolder`, `DocumentSummary`; `/vue` also `useStoreRef` and `storeFromRef` (adapters from Vue refs to the store shape). Depends on core, outline, composites and media; see the [integration guide](./docs/integration.md#10-the-file-browser-and-documentstore). `/tree/types` has the `TreeFolder`/`DocumentSummary` types alone, for servers whose typecheck has no DOM |
+| `@ecsplico/editor/media`, `/media/vue`, `/media/react`, `/media/schema` | `/vue` and `/react`: `mediaFeature`, `useFileImport`, `AudioRecorderModal`, `useAudioRecorder`; framework-free: `mediaFeatureCore`, `fileImport`, `createAudioRecorder`, `pickFiles`, `openAudioRecorder`, `postUpload`, `mediaSchemaExtensions()`, `MEDIA_TYPES`, `MAX_MEDIA_BYTES`, asset helpers |
+| `@ecsplico/editor/mentions`, `/mentions/schema` | `mentionsFeature`, `mentionSuggestion`, `tagSuggestion`; Vue-free: `mentionsSchemaExtensions()`, `MentionNode`, `TagNode`, `mentionsFromText`, `tagsFromText`, `normalizeTagName` |
+| `@ecsplico/editor/tables`, `/tables/schema` | `tablesFeature()` (GFM tables and task lists: the nodes, toolbar group `table` with insert 3×3, add/delete row, add/delete column, delete table, slash entries `table.insert` and `task.insert`; no components, so it fits both framework layers); Vue-free: `tablesSchemaExtensions()` (also part of `/schema/simple` and `/schema/advanced`) |
+| `@ecsplico/editor/markdown`, `/markdown/vue`, `/markdown/react` | Framework-free: `splitFrontmatter(text)` / `joinFrontmatter(frontmatter, body)` (YAML block at offset 0 only, kept verbatim), `markdownToContent(editor, body, { policy? }): { content, diagnostics }` (policy `{ allowHtml?, allowDataUrls? }`: raw HTML, links and media with unsafe URLs are dropped and reported as `MarkdownDiagnostic`s — `raw-html`, `unsafe-url`, `unknown-fence` (info), `unclosed-fence` and `invalid-fence-meta` (errors); `hasFatalDiagnostics`), `contentToMarkdown(editor)`, `MarkdownClipboard.configure({ policy })` (an extension: pastes `text/markdown` and plain text with block syntax as blocks, sanitizes pasted HTML, copies and cuts as `text/markdown` next to `text/html` and `text/plain`), `createSourceMode({ getEditor, toMarkdown?, fromMarkdown?, policy? }): SourceMode` (`state` store `{ mode: 'visual' \| 'source', source, diagnostics }`, `enter()`, `edit(text)`, `commit(): boolean` — false with the editor untouched on a fatal diagnostic or a document the schema rejects —, `cancel()`). Unknown `::: kind` fences are `OpaqueFence` nodes (in `coreSchemaExtensions()`) that are written back byte for byte; kinds a composite feature registers parse first. Vue: `MarkdownSurface` (`v-model` is the Markdown string, frontmatter included; props, emits and slots of `EditorSurface` forwarded; an incoming value equal to the last emitted one is ignored; prop `policy` (also configures the `MarkdownClipboard` it installs), prop `sourceMode` (a `SourceMode`: while its state is `source` the surface shows the draft in a text area with the diagnostics of a rejected commit and Apply/Cancel, `sourceLabels` for their texts), event `diagnostics`). React: `MarkdownSurface` (`value` / `onChange` / `onFrontmatterChange` / `onDiagnostics`, prop `policy` (also configures the installed `MarkdownClipboard`), the `EditorSurface` props forwarded, same semantics; no source view). Neither imports CodeMirror |
+| `@ecsplico/editor/code`, `/code/vue`, `/code/react` | CodeMirror 6 on a string, themed by the shared `--sk-*` tokens (`styles/tokens.css`; fallbacks are the token defaults). Framework-free: `createCodeEditor({ parent, doc?, readOnly?, wordWrap?, language?, onSaveShortcut?, onChange? })`, `setReadOnly`, `setWordWrap`, `setLanguage(view, support)`, `loadLanguage(view, id)`, `setDocument(view, text)` (a host text, not an edit), `registerLanguage(id, loader, { core? })` / `resolveLanguage(id)` / `isCoreLang(id)` (language packs are the host's: register the `@codemirror/lang-*` packs you depend on; `jsonl` is built in), `formatJsonInEditor(view)`, `formatJsonText`, `jsonlLanguage`, `kindOf(path, mime?)` (`'markdown' \| 'code' \| 'binary'`), `languageOf(path)`. `/code/vue`: `CodeSurface` (`v-model` string, `editable`, `language`, `wordWrap`; emits `update:modelValue`, `save` on Mod-S, `ready(view)`). `/code/react`: `CodeSurface` (`value`, `onChange`, `onSave`, `onReady`, same flags). No ProseMirror or TipTap is reachable from these entries |
+| `@ecsplico/editor/document/vue`, `/document/react` | `DocumentSurface`: `MarkdownSurface` for `kindOf(path, mime) === 'markdown'` (props `markdown`: the Markdown surface's own props, `preset` at least), `CodeSurface` for text (language from `languageOf(path)` unless `language` is given), a `binary` slot (Vue) / `binary(path)` render prop (React) otherwise. `ready` carries `{ kind: 'markdown', editor }` or `{ kind: 'code', view }`. These entries reach both editors; use `/markdown/*` or `/code/*` alone to keep one out of a bundle |
+| `@ecsplico/editor/transcript`, `/transcript/vue`, `/transcript/react`, `/transcript/schema` | `/vue` and `/react`: `transcriptFeature`, `TranscriptSegmentView`; framework-free: `transcriptFeatureCore`, `transcriptSegment`, `speakerConversions`, `segmentSpeakerLines`, `transcriptSchemaExtensions()`, `speakerParagraphsToSegments`, `lastSpeaker`, `speakersIn` |
+| `@ecsplico/editor/authors`, `/authors/vue`, `/authors/react`, `/authors/schema` | `/vue` and `/react`: `authorsFeature`, `AuthorColorsPanel`, `AuthorColorsButton`, `SettingsAuthorsTab`; framework-free: `authorsFeatureCore`, `currentAuthor`, `AuthorAttribution`, `authorsSchemaExtensions()`, `AuthorMark`, `documentAuthors`, `AuthorIdentity`, `AUTHOR_COLOR_STYLES`, `AuthorColorStyle` |
+| `@ecsplico/editor/themes`, `/themes/vue`, `/themes/react`, `/themes/schema` | `/vue` and `/react`: `themesFeature()` (site-wide Obsidian themes: its `setup` hook starts the theme runtime and returns its teardown, its `appearance` settings tab picks the theme), `SettingsAppearanceTab`; framework-free: `themesFeatureCore`, `startObsidianTheme(ctx)` (reference-counted per app, returns the release), `scopeThemeCss`, `THEME_SCOPE_CLASS`; Vue-free schema: `ThemeRecord`, `ThemeManifest`, `themeManifestSchema`, `THEME_ID`, `MAX_THEME_BYTES`. Needs an adapter with `listThemes`/`loadTheme`; see the [usage guide](./docs/usage.md#themes-obsidian) |
+| `@ecsplico/editor/comments`, `/comments/vue`, `/comments/react`, `/comments/schema` | `/vue` and `/react`: `commentsFeature` (requires `collab`), `useComments`, `CommentsMargin`, `CommentsPopover`, `CommentsListMenu`, `CommentThreadView`, `CommentComposer`, `CommentBubble`, `SettingsCommentsTab` (`/vue` also the type `CommentsStore`); framework-free: `commentsFeatureCore`, `createCommentsModel`, `Comments` plugin helpers, `commentsSchemaExtensions()`, `CommentMark`, `CommentThread`, `CommentReply`, `COMMENT_LIMITS`, `COMMENTS_LAYOUTS`, `CommentsLayout` |
+| `@ecsplico/editor/composites/vue`, `/composites/react` | `compositeFeature()` (Vue: Nuxt UI, React: shadcn), the host-placed `CompositeTable` and `CompositeInspector`, `SettingsEditingTab`, `CompositeChrome`, `CompositeDetails`, `CompositeView` and editors, `useCompositeRows`, `useCompositeAnchors` |
+| `@ecsplico/editor/composites`, `/composites/schema` | Framework-free: `compositeFeatureCore`, `Composite`, `defaultCompositeKinds`, `compositeKind`, `compositeOutline`, `moveBlockInto`, `canMoveBlockInto`, `headingsMarkdown`, `documentCompositeMarkdown`, `Structure`, `createCompositeRows`, `observeCompositeAnchors`, `compositeRows`, `setCompositeMetaField`, `setCompositeTags`, `setCompositeDescription`, `compositeDescriptionText`, `compositeSchemaExtensions()`, `compositeJSON`, `blocksFromMarkdown`, `splitCompositeFences`, `migrateLegacyContent`, conversions and heading↔composite transforms |
+| `@ecsplico/editor/ai`, `/ai/protocol` | Framework-free: `aiFeatureCore`, `modelProfiles(app)`, `createAiAssistant`, `createDocumentChat`, `createAgentOpReview({ notify, t })` (host-driven agent edit review), `notifyAiRateLimited(notify, t)`, review/apply helpers (`startAiReview`, `applyAiResult`, …) and the protocol (`AI_TASKS`, `ModelRef`, `AGENT_OP_TYPES`, `CHAT_LIMITS`, …), importable alone from `/ai/protocol`; the model-facing agent texts (`checkAgentOps`, `agentShownMessage`, `agentFeedbackText`, `agentRetryMessage`) take a `locale: 'de' \| 'en'` option (default `de`), and `agentRetryMessage(problems, scoped, { locale, tool })` names the `tool` the model must call again (default `edit_document`) |
+| `@ecsplico/editor/ai/vue`, `/ai/react` | `aiFeature()`, `AiSidebar`, `ModelQuickSwitch`, `AiReviewBar`, `AiSelectionMenu`, `SettingsAiTab`, `SettingsModelProfiles`; `/ai/vue` also `useAiAssistant`, `useDocumentChat`, `useModelProfiles` (thin hooks over the models) |
+| `@ecsplico/editor/integrations/composite-ai` | Framework-free: `compositeAiFeature` (requires `composites`, `ai`, `media`), `fillComposite`, `summarizeComposite`, `transcribeDocument`, `compositeSourceText`, `mediaAssetOf` |
+| `@ecsplico/editor/integrations/composite-media` | Framework-free: `compositeMediaFeature` (requires `composites`, `media`): imported files become `document` composites |
+| `@ecsplico/editor/integrations/transcript-ai`, `/transcript-ai/protocol` | Framework-free: `transcriptAiFeature` (requires `transcript`, `ai`), `createTranscriptCleanup`, `hasTranscriptSegments`; server contract: `TRANSCRIPT_CLEANUP_LIMITS`, `transcriptCleanupRequestSchema`, `transcriptCleanupMessages`, `transcriptCleanupChunks`, `parseTranscriptCleanup` |
+| `@ecsplico/editor/collab`, `/collab/vue`, `/collab/react` | Framework-free: `collabFeatureCore(ui?)` (Yjs `Collaboration`/`CollaborationCaret`, active only with a `collaboration` session on the surface), `yjsAnchorResolver`; `/vue` and `/react`: `collabFeature()` (the Vue one adds the `@tiptap/vue-3` state-sync workaround, the React one needs none) |
+| `@ecsplico/editor/block-ui`, `/block-ui/vue`, `/block-ui/react` | `/vue` and `/react`: `blockUiFeature()`, `BlockUi`, `BlockActionsOverlay`; framework-free: `blockUiFeatureCore`, `blockActionsFor`, `effectiveTarget`: drag handle, hover targeting and block actions (opt-in; the simple editor never includes it) |
+| `@ecsplico/editor/schema/advanced` | Vue-free `advancedSchemaExtensions()`: the advanced schema for servers, validators and migrations |
+| `@ecsplico/editor/server`, `/server/handlers`, `/server/node`, `/nuxt` | Server side without a web framework: `createCollabServer`, `createAiModels`, `createRateLimiter`, `EditorAdapter`, one request handler per route (`/server/handlers`), `listenCollab` for a plain Node script (`/server/node`); the Nitro registry `setEditorAdapter`, `forgetCollabDocument`, `liveContent`, `collabStats`; the Nuxt module (config key `tiptapEditor`) wraps the same core. See the [integration guide](./docs/integration.md) |
+| `@ecsplico/editor/styles/core.css` (required), `/composites.css`, `/media.css`, `/mentions.css`, `/tables.css`, `/authors.css`, `/comments.css`, `/transcript.css`, `/ai.css`, `/collab.css`, `/block-ui.css`, `/themes.css` | Feature CSS (import after Tailwind, Nuxt UI (Vue) or `ui-vars.css` (React) and `core.css`; `themes.css` after the feature sheets). The Nuxt module adds all of them itself |
+
+Nuxt apps use the same entries; the Nuxt client plugin (`src/nuxt/runtime/plugins/editor-context-<kit>.client.ts`, one file per `kit` option so an app never bundles the UI library it does not use) installs the editor context with account-synced settings.
+
+## Presets and features
+
+| Preset | Features | Backend / Yjs | Bundle isolation (`check:editor-entries`) |
+|---|---|---|---|
+| `simple` (`SimpleEditor`, `simpleEditor()`) | `core` | none | no feature, integration, AI SDK, Yjs, y-tiptap, Hocuspocus, Nuxt or server modules in the emitted chunks |
+| React `SimpleEditor` + `EditorToolbar` (`./react/simple`, `./react`) | `core` | none | no `vue`, `@vue`, `@tiptap/vue-3`, Nuxt UI or Vue-layer module in the emitted chunks (`react-simple` fixture); the headless core (`core-headless` fixture) contains no Vue, React or layer module at all |
+| `core` + `mediaFeature()` | `core`, `media` | uploads only (or a host `upload` function) | no composite, AI, Yjs, Nuxt or sibling-feature modules |
+| `core` + `mentionsFeature()` | `core`, `mentions` | built-in `@`/`#` lists only (or host lists) | same |
+| `core` + `transcriptFeature()` | `core`, `transcript` | none | same |
+| `core` + `authorsFeature()` | `core`, `authors` | none | same |
+| `core` + `themesFeature()` | `core`, `themes` | `/api/editor/themes[/:id]` (adapter `listThemes`/`loadTheme`) | no composite, AI, media, mentions, transcript, authors, comments, collaboration, block-UI, integration, Yjs or Nuxt modules |
+| `core` + `collabFeature()` + `commentsFeature()` | `core`, `collab`, `comments` | `/collab/:id` websocket (comments live in the Y.Doc) | no composite, AI, media, mentions, transcript, authors, block-UI, integration or Nuxt modules; Yjs is bundled |
+| `core` + `aiFeature()` | `core`, `ai` | `/api/ai/{models,generate,chat,complete}` (see the usage guide) | no composite, transcript, media, mentions, collaboration, integration, Yjs or Nuxt modules |
+| `core` + `media` + `composites` + `aiFeature()` + `compositeAiFeature()` | `core`, `media`, `composites`, `ai`, `composite-ai` | AI endpoints plus `/api/ai/transcribe` | no transcript, mentions, collaboration, other integration, Yjs or Nuxt modules |
+| `core` + `transcriptFeature()` + `aiFeature()` + `transcriptAiFeature()` | `core`, `transcript`, `ai`, `transcript-ai` | AI endpoints plus `/api/ai/transcript-cleanup` | no composites, media, mentions, collaboration, other integration, Yjs or Nuxt modules |
+| `core` + `collabFeature()` | `core`, `collab` | `/collab/:id` websocket (Nuxt module) or any Hocuspocus server on the advanced schema | no composite, AI, media, mentions, block-UI, integration or Nuxt modules; Yjs is bundled |
+| `core` + `blockUiFeature()` | `core`, `block-ui` | none | no composite, AI, media, mentions, collab-feature or Nuxt modules (the drag handle's upstream package bundles Yjs support code) |
+| `core` + `compositeFeature()` | `core`, `composites` | none | no AI, media, transcript, mentions, collaboration, block-UI, integration, Yjs or Nuxt modules |
+| `core` + `media` + `composites` + `compositeMediaFeature()` | `core`, `media`, `composites`, `composite-media` | uploads only | no AI, transcript, mentions, collaboration, other integration, Yjs or Nuxt modules |
+| `DocumentTree` (`./tree/vue` or `./tree/react`) beside `core` + `media` + `composites` | tree, `core`, `media`, `composites` | the host's `DocumentStore` | no AI, transcript, mentions, collaboration, block-UI, integration, Yjs or Nuxt modules; the `simple` bundle never contains the tree; the React tree contains no Vue module (`tree-react` fixture), the framework-free `./tree` no Vue and no React (`headless-tree` fixture) |
+| `advancedEditor()` / `AdvancedEditor` (`./vue/advanced`) | every feature (including `themes`) and integration, Vue bindings | `/collab/:id`, AI endpoints, assets, users/tags, themes (Nuxt module plus a host adapter, or a host server) | requires all feature and integration modules; no React, `sonner`, Nuxt, `nitropack`, `h3`, vue-router or server code in the browser bundle (`advanced` fixture) |
+| `advancedEditor()` / `AdvancedEditor` (`./react/advanced`) | every feature (including `themes`) and integration, React bindings | the same endpoints, through the Nuxt host or a host server (`examples/react-advanced` proxies `/api` and `/collab` to the Nuxt app) | requires all feature and integration modules; no `vue`, `@vue`, `@tiptap/vue-3`, Nuxt UI, Vue-layer or `.vue` module, no Nuxt or server code (`advanced-react` fixture) |
+| Any feature on one layer (`<x>/vue`, `<x>/react`, `<x>` alone) | `core` + that feature | as listed above | `<x>-react` fixtures contain no Vue or Nuxt UI module; the Vue fixtures no React, `react-dom` or `sonner`; the framework-free `headless-<x>` fixtures neither framework |
+
+Settings are stored as one inert, versioned JSON object shared by all editors of an app (`EditorSettings`); a simple editor installs no feature that reads the non-core parts.
+
+## CSS and UI-provider requirements
+
+- Design tokens: `@ecsplico/editor/styles/tokens.css` declares the shared `--sk-*` variables (`--sk-bg`, `--sk-fg`, `--sk-muted`, `--sk-border`, `--sk-primary`, `--sk-primary-fg`, `--sk-success`, `--sk-warning`, `--sk-danger`, `--sk-radius`, `--sk-font`) with light defaults under `:where(:root)` and dark values under `:where(.dark)`. Every feature stylesheet reads them; a UI kit maps them onto its own variables (Nuxt UI: `vue/kit/nuxt-ui.css`, PrimeVue: `vue/kit/primevue.css`, React/shadcn: `react/styles/ui-vars.css`), a host may override them once.
+
+- Vue UI kit: the Vue chrome renders through the kit handed to `createEditor({ kit })`. `nuxtUiKit()` (`@ecsplico/editor/vue/kit/nuxt-ui`, needs `@nuxt/ui`, stylesheet `@ecsplico/editor/vue/kit/nuxt-ui.css`) is the demo default; `primeVueKit()` (`@ecsplico/editor/vue/kit/primevue`, needs `primevue` + `@iconify/vue`, stylesheet `@ecsplico/editor/vue/kit/primevue.css`) works with the host's `app.use(PrimeVue)`, `ToastService` and a mounted `<Toast />`. `@ecsplico/editor/vue/kit` holds the `VueUiKit` contract and `useUiKit()`. Only those two entries import their UI library. The Nuxt module option `kit: 'nuxt-ui' | 'primevue'` (default `'nuxt-ui'`) selects the kit and the stylesheet; the `ui.css` patch runs only for `'nuxt-ui'`. `examples/vue-primevue` mounts the editor with PrimeVue.
+
+- Import the core CSS **after** Tailwind and Nuxt UI, and let Tailwind see the library's classes:
+
+  ```css
+  @import "tailwindcss";
+  @import "@nuxt/ui";
+  @import "@ecsplico/editor/styles/core.css";
+  @source "../../../packages/editor/src"; /* relative path from this CSS file to the package's src */
+  ```
+
+  The Nuxt module needs none of this: it adds `core.css` and every feature sheet to `css` (`themes.css` last) and appends the package to Tailwind's `@source` list. In plain Vue also import the sheet of each feature you use, e.g. `@ecsplico/editor/styles/media.css`, after `core.css`.
+
+- Plain Vue: Vite plugins `vue()` and `ui({ router: false })` from `@nuxt/ui/vite`, `app.use(ui)` with `import ui from '@nuxt/ui/vue-plugin'`, and the editor context `app.use(createEditor())` (`createEditor` from `@ecsplico/editor/vue`). Wrap the page in `<UApp>` (overlays, toasts, tooltips).
+- React: Vite with `@vitejs/plugin-react` and `@tailwindcss/vite`. The CSS needs Tailwind, `tw-animate-css`, `@ecsplico/editor/react/styles/ui-vars.css`, `core.css` (plus the sheet of each feature you use, e.g. `mentions.css`), the shadcn theme block (`:root`/`.dark` tokens and `@theme inline`; `bunx shadcn@latest init` generates it) and `@source` for the library's `src/react`. For the advanced editor import `@ecsplico/editor/react/styles/advanced.css` instead of those three library sheets: it bundles `ui-vars.css`, `core.css`, every feature sheet and `themes.css` (last). Preload the icons with `addCollection(lucide)` from `@iconify/react`, wrap the tree in `<EditorContextProvider context={createEditorContext({ notify: reactNotifier })}>` and mount `<Toaster />` (sonner, from `@ecsplico/editor/react`) once so notices show up; see the [usage guide](./docs/usage.md#simple-editor-in-react), [Advanced editor in React](./docs/usage.md#advanced-editor-in-react), [`examples/react-simple`](../../examples/react-simple) and [`examples/react-advanced`](../../examples/react-advanced).
+- Icons: Nuxt UI resolves `i-lucide-*` names at build time. A workspace library lies outside the Vite root that Nuxt UI scans, so list its icons for the client bundle (see how `examples/vue-simple/vite.config.ts` collects them) to avoid Iconify API requests at runtime.
+- The editor context is mandatory: Vue `EditorSurface`, `SimpleEditor` and `EditorToolbar` throw a descriptive error without `createEditor()`, the React components without `<EditorContextProvider>`. Both wrap the framework-free `createEditorContext()` from `@ecsplico/editor/core`; the host owns the React context and may call `context.dispose()` itself.
+
+## Runnable examples
+
+- **Plain Vue, no backend:** [`examples/vue-simple`](../../examples/vue-simple) — `SimpleEditor` with a sibling toolbar and heading outline, JSON `v-model`, read-only toggle, external replacement, host `/datum` command and an own block, the „Hinweis“ callout, added through the `extensions` and `slashCommands` props (`/hinweis`, `Mod-Shift-h`, tone select, `!!!` Markdown form). A sample picker loads five demo documents (Start, Formatierung, Gliederung, Hinweise, and „Ungültig (Baustein-JSON)“, which the simple schema rejects through `contentError`); next to the editor the JSON (with block IDs) and the Markdown of the document are shown.
+- **Plain React, no backend:** [`examples/react-simple`](../../examples/react-simple) — the same document picker, read-only toggle and JSON/Markdown panes with the React layer: `EditorToolbar` beside `EditorSurface` over `defineEditor({ features: [coreFeature(), mentionsFeature()] })`, the host `/` commands, `@` mentions from `metadata`, and rejected content through `onContentError`. Vite, Tailwind 4 and shadcn tokens, no Nuxt UI.
+- **Advanced, Nuxt:** this repository's application (`bun run dev`, port 3031) — collaborative documents under switchable demo users (no login: `server/middleware/demo-session.ts` signs every API request into a demo user, `server/api/auth/switch.post.ts` switches it; `app/pages/documents/[id].vue`), the file drawer with `DocumentTree` and a host `DocumentStore` (`app/components/AppDocumentTree.vue`, `app/composables/useDocumentStore.ts`), and a playground with two independent editors, switched in the page header together with the shown editor's sample (`app/pages/playground.vue`, panes in `app/components/PlaygroundPane.vue`, each opening its settings in the `EditorSettingsModal` popup). Editor A is an `AdvancedEditor` with host props (metadata, abilities, a hover action, a `/` command, an own composite kind) on the „Überblick“, „Gliederung“, „Transkript“ and „Leer“ samples; Editor B is an `EditorSurface` on `advancedEditor().features` plus an own feature, the callout (`app/editor/callout/`: toolbar button, `/hinweis`, a tone menu on hover, „Umwandeln in Hinweis“, Markdown form), with a „Markdown einfügen“ button. The „Darstellung“ settings tab switches the whole site between „Standard“ and the seven builtin Obsidian themes (`server/themes/`: Nord, Things, Minimal, Catppuccin, Border, Blue Topaz, Tokyo Night) or an uploaded one, served by the adapter in `server/plugins/editor-adapter.ts`. Walkthrough: [Advanced Nuxt example](./docs/usage.md#advanced-nuxt-example). How to add a block of your own: the [extending guide](./docs/extending.md).
+- **Advanced, React:** [`examples/react-advanced`](../../examples/react-advanced) (`bun run --cwd examples/react-advanced dev`, port 3043; needs the Nuxt app running, Vite proxies `/api` and `/collab` to it) — the React counterpart of the Nuxt document page: a document picker over the host's `/api/documents`, a collaborative `AdvancedEditor` over `HocuspocusProvider` as the demo session's user, `EditorToolbar`, `EditorSettingsModal`, `CommentsMargin`, `CompositeTable`/`CompositeInspector`, `EditorOutline`, `AiSidebar`, `DocumentTree` over an `/api` adapter of `DocumentStore`, and `Toaster`. Vite, Tailwind 4 and shadcn tokens, no Nuxt UI, no Vue.
+
+## Commands
+
+From the repository root, after `bun install`:
+
+```sh
+bun run dev                                   # Nuxt demo app, http://localhost:3031
+bun run typecheck                             # nuxt typecheck of the demo app
+bun run --cwd examples/vue-simple dev        # http://localhost:3040
+bun run --cwd examples/vue-simple build      # prepares the Nuxt UI theme aliases the library typecheck needs
+bun run --cwd examples/vue-simple typecheck
+bun run --cwd examples/react-simple dev     # http://localhost:3041
+bun run --cwd examples/react-simple typecheck
+bun run --cwd examples/react-advanced dev   # http://localhost:3043, needs `bun run dev` (Nuxt host, port 3031)
+bun run --cwd examples/react-advanced typecheck
+bun run --cwd examples/vue-primevue dev     # http://localhost:3044, the Vue surface on primeVueKit() (no Nuxt UI)
+bun run --cwd examples/vue-markdown dev     # http://localhost:3045, MarkdownSurface with frontmatter, tables and source mode
+bun run typecheck:editor                      # vue-tsc --noEmit -p packages/editor/tsconfig.json (no Nuxt globals)
+bun run check:editor-entries                  # production build per fixture, module-graph isolation rules
+bun run check:editor-markdown-clipboard       # MarkdownClipboard paste/copy cases (HTML, Markdown, plain text, data-URL opt-in) in happy-dom
+bun run check:editor-composition              # defineEditor rejects missing `requires`; accepted compositions; one formatAiResult contributor
+```
+
+On a clean checkout run the example build once before `typecheck:editor`.
+
+### Bundle isolation proof
+
+`bun run check:editor-entries` builds each fixture in `packages/editor/checks/fixtures/<name>/` as its own production Vite app, collects the module IDs of every emitted chunk and fails on forbidden modules (or on a missing required one, so exported factories cannot be tree-shaken away unnoticed). Last result for `simple`: 325 modules, JS 1082.5 kB (gzip 331.1 kB), CSS 194.5 kB (gzip 25.2 kB); for `tree`: 433 modules, JS 1314.5 kB (gzip 389.2 kB), CSS 197.6 kB (gzip 25.7 kB). The `code-only` and `code-only-react` fixtures prove the code surface carries CodeMirror and no ProseMirror or TipTap (and nothing of this package outside `src/code`), and the `markdown-vue` and `tables` fixtures prove the Markdown entries contain no CodeMirror. The check also bundles the advanced schema for Node and compares it with a snapshot (`checks/schema.ts`).
+
+## For LLMs and coding agents
+
+Start with the [guide for LLM coding agents](./docs/llms.md): what the package is, which entry to import for what, a minimal Nuxt integration, how to choose presets and features, how to contribute a custom feature (`defineEditor`, `setup`, settings tabs, toolbar), the `EditorAdapter`, settings and themes, the pitfalls that break integrations (CSS order, `<UApp>`, `createEditor()`, SSR, bundle isolation, `settingsUi`) and the verification commands. It links the three detail guides instead of repeating them.
+
+## Documentation
+
+- [Guide for LLM coding agents](./docs/llms.md): task-oriented orientation with copyable snippets, invariants and the verification commands.
+- [Integration guide](./docs/integration.md): feature composition and the per-feature entries, the UI binding contract, notices and `setup` teardown, browser versus schema/server entries, settings persistence and app lifetime, Nuxt module, `EditorAdapter`, routes and authentication, storage ownership, AI secrets and env names, collaboration on the client, block UI, the Vue-free advanced schema, the file browser and `DocumentStore`, production, migration from `#tiptap-editor` and the dependency rules.
+- [Extending guide](./docs/extending.md): add a block of your own, with the runnable „Hinweis“ callout as the example — through the `extensions`/`slashCommands` props or as a full feature (toolbar, `/` command, hover action, „Umwandeln in …“, Markdown form), what the `editorBlock` flag and custom abilities do, and what collaboration servers and AI need.
+- [Usage guide](./docs/usage.md): plain Vue setup and the `SimpleEditor`, the React setup (`EditorContextProvider`, `EditorSurface`, `EditorToolbar`, `SimpleEditor`, `Toaster`), media/mentions/transcript, authors and comments, themes, composites and the settings UI, file import, AI and its integrations, the file browser, the advanced editor in React (`./react/advanced`), and the Advanced Nuxt example (a walkthrough of this repository's app).

package/dist/code/CodeSurface.d.ts

@@ -0,0 +1,24 @@
+import { EditorView } from "@codemirror/view";
+//#region src/code/CodeSurface.d.ts
+export interface CodeSurfaceProps {
+  /** The document text (the React spelling of the Vue surface's `modelValue`). */
+  value?: string;
+  /** The whole text after every edit (Vue: `update:modelValue`). */
+  onChange?: (text: string) => void;
+  /** Mod-S, with the current text (Vue: `save`). */
+  onSave?: (text: string) => void;
+  /** The editor exists (Vue: `ready`). */
+  onReady?: (view: EditorView) => void;
+  editable?: boolean;
+  /** A language id: `languageOf(path)` or an id of `registerLanguage`. Absent or unknown: plain text. */
+  language?: string;
+  wordWrap?: boolean;
+  className?: string;
+}
+export interface CodeSurfaceHandle {
+  view: EditorView | null;
+}
+/** CodeMirror over a string. Client only: it builds the editor in an effect, server rendering yields the empty container. */
+export declare const CodeSurface: import("react").ForwardRefExoticComponent<CodeSurfaceProps & import("react").RefAttributes<CodeSurfaceHandle>>;
+//#endregion
+//# sourceMappingURL=CodeSurface.d.ts.map

package/dist/code/CodeSurface.js

@@ -0,0 +1,57 @@
+import { createCodeEditor, loadLanguage, setDocument, setReadOnly, setWordWrap } from "./editor-factory.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/code/CodeSurface.tsx
+/** CodeMirror over a string. Client only: it builds the editor in an effect, server rendering yields the empty container. */
+const CodeSurface = forwardRef(function CodeSurface(props, ref) {
+	const { value = "", editable = true, language, wordWrap = true, className } = props;
+	const element = useRef(null);
+	const viewRef = useRef(null);
+	const latest = useRef(props);
+	latest.current = props;
+	useImperativeHandle(ref, () => ({ get view() {
+		return viewRef.current;
+	} }), []);
+	useEffect(() => {
+		const current = latest.current;
+		const view = createCodeEditor({
+			parent: element.current,
+			doc: current.value ?? "",
+			readOnly: !(current.editable ?? true),
+			wordWrap: current.wordWrap ?? true,
+			onChange: (v) => latest.current.onChange?.(v.state.doc.toString()),
+			onSaveShortcut: () => latest.current.onSave?.(view.state.doc.toString())
+		});
+		viewRef.current = view;
+		latest.current.onReady?.(view);
+		return () => {
+			view.destroy();
+			viewRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		if (viewRef.current) setDocument(viewRef.current, value);
+	}, [value]);
+	useEffect(() => {
+		if (viewRef.current) setReadOnly(viewRef.current, !editable);
+	}, [editable]);
+	useEffect(() => {
+		if (viewRef.current) setWordWrap(viewRef.current, wordWrap);
+	}, [wordWrap]);
+	useEffect(() => {
+		if (viewRef.current) loadLanguage(viewRef.current, language);
+	}, [language]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: element,
+		className: className ? `sk-code-surface ${className}` : "sk-code-surface",
+		style: {
+			height: "100%",
+			minHeight: 0,
+			overflow: "hidden"
+		}
+	});
+});
+//#endregion
+export { CodeSurface };
+
+//# sourceMappingURL=CodeSurface.js.map

package/dist/code/CodeSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSurface.js","names":[],"sources":["../../src/code/CodeSurface.tsx"],"sourcesContent":["import type { EditorView } from '@codemirror/view'\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'\nimport { createCodeEditor, loadLanguage, setDocument, setReadOnly, setWordWrap } from './editor-factory'\n\nexport interface CodeSurfaceProps {\n  /** The document text (the React spelling of the Vue surface's `modelValue`). */\n  value?: string\n  /** The whole text after every edit (Vue: `update:modelValue`). */\n  onChange?: (text: string) => void\n  /** Mod-S, with the current text (Vue: `save`). */\n  onSave?: (text: string) => void\n  /** The editor exists (Vue: `ready`). */\n  onReady?: (view: EditorView) => void\n  editable?: boolean\n  /** A language id: `languageOf(path)` or an id of `registerLanguage`. Absent or unknown: plain text. */\n  language?: string\n  wordWrap?: boolean\n  className?: string\n}\n\nexport interface CodeSurfaceHandle {\n  view: EditorView | null\n}\n\n/** CodeMirror over a string. Client only: it builds the editor in an effect, server rendering yields the empty container. */\nexport const CodeSurface = forwardRef<CodeSurfaceHandle, CodeSurfaceProps>(function CodeSurface(props, ref) {\n  const { value = '', editable = true, language, wordWrap = true, className } = props\n  const element = useRef<HTMLDivElement>(null)\n  const viewRef = useRef<EditorView | null>(null)\n  // The editor is built once; its callbacks read the latest props.\n  const latest = useRef(props)\n  latest.current = props\n\n  useImperativeHandle(ref, () => ({ get view() { return viewRef.current } }), [])\n\n  useEffect(() => {\n    const current = latest.current\n    const view = createCodeEditor({\n      parent: element.current!,\n      doc: current.value ?? '',\n      readOnly: !(current.editable ?? true),\n      wordWrap: current.wordWrap ?? true,\n      onChange: v => latest.current.onChange?.(v.state.doc.toString()),\n      onSaveShortcut: () => latest.current.onSave?.(view.state.doc.toString()),\n    })\n    viewRef.current = view\n    latest.current.onReady?.(view)\n    // The language is applied by the effect below, which runs right after this one.\n    return () => {\n      view.destroy()\n      viewRef.current = null\n    }\n  }, [])\n\n  // The host's text (a loaded file, a reset) is not an edit: no `onChange`. The text the surface itself just emitted\n  // comes back equal and changes nothing.\n  useEffect(() => {\n    if (viewRef.current) setDocument(viewRef.current, value)\n  }, [value])\n  useEffect(() => {\n    if (viewRef.current) setReadOnly(viewRef.current, !editable)\n  }, [editable])\n  useEffect(() => {\n    if (viewRef.current) setWordWrap(viewRef.current, wordWrap)\n  }, [wordWrap])\n  useEffect(() => {\n    if (viewRef.current) void loadLanguage(viewRef.current, language)\n  }, [language])\n\n  return <div ref={element} className={className ? `sk-code-surface ${className}` : 'sk-code-surface'} style={{ height: '100%', minHeight: 0, overflow: 'hidden' }} />\n})\n"],"mappings":";;;;;AAyBA,MAAa,cAAc,WAAgD,SAAS,YAAY,OAAO,KAAK;CAC1G,MAAM,EAAE,QAAQ,IAAI,WAAW,MAAM,UAAU,WAAW,MAAM,cAAc;CAC9E,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,UAAU,OAA0B,IAAI;CAE9C,MAAM,SAAS,OAAO,KAAK;CAC3B,OAAO,UAAU;CAEjB,oBAAoB,YAAY,EAAE,IAAI,OAAO;EAAE,OAAO,QAAQ;CAAQ,EAAE,IAAI,CAAC,CAAC;CAE9E,gBAAgB;EACd,MAAM,UAAU,OAAO;EACvB,MAAM,OAAO,iBAAiB;GAC5B,QAAQ,QAAQ;GAChB,KAAK,QAAQ,SAAS;GACtB,UAAU,EAAE,QAAQ,YAAY;GAChC,UAAU,QAAQ,YAAY;GAC9B,WAAU,MAAK,OAAO,QAAQ,WAAW,EAAE,MAAM,IAAI,SAAS,CAAC;GAC/D,sBAAsB,OAAO,QAAQ,SAAS,KAAK,MAAM,IAAI,SAAS,CAAC;EACzE,CAAC;EACD,QAAQ,UAAU;EAClB,OAAO,QAAQ,UAAU,IAAI;EAE7B,aAAa;GACX,KAAK,QAAQ;GACb,QAAQ,UAAU;EACpB;CACF,GAAG,CAAC,CAAC;CAIL,gBAAgB;EACd,IAAI,QAAQ,SAAS,YAAY,QAAQ,SAAS,KAAK;CACzD,GAAG,CAAC,KAAK,CAAC;CACV,gBAAgB;EACd,IAAI,QAAQ,SAAS,YAAY,QAAQ,SAAS,CAAC,QAAQ;CAC7D,GAAG,CAAC,QAAQ,CAAC;CACb,gBAAgB;EACd,IAAI,QAAQ,SAAS,YAAY,QAAQ,SAAS,QAAQ;CAC5D,GAAG,CAAC,QAAQ,CAAC;CACb,gBAAgB;EACd,IAAI,QAAQ,SAAS,aAAkB,QAAQ,SAAS,QAAQ;CAClE,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAS,WAAW,YAAY,mBAAmB,cAAc;EAAmB,OAAO;GAAE,QAAQ;GAAQ,WAAW;GAAG,UAAU;EAAS;CAAI,CAAA;AACrK,CAAC"}

package/dist/code/CodeSurface.vue.d.ts

@@ -0,0 +1,29 @@
+import { EditorView } from "@codemirror/view";
+//#region src/code/CodeSurface.vue.d.ts
+type __VLS_Props = {
+  /** The document text. */
+  modelValue?: string;
+  editable?: boolean;
+  /** A language id: `languageOf(path)` or an id of `registerLanguage`. Absent or unknown: plain text. */
+  language?: string;
+  wordWrap?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+  view: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  ready: (view: EditorView) => any;
+  "update:modelValue": (text: string) => any;
+  save: (text: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+  onReady?: ((view: EditorView) => any) | undefined;
+  "onUpdate:modelValue"?: ((text: string) => any) | undefined;
+  onSave?: ((text: string) => any) | undefined;
+}>, {
+  modelValue: string;
+  editable: boolean;
+  wordWrap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=CodeSurface.vue.d.ts.map

package/dist/code/CodeSurface2.js

@@ -0,0 +1,75 @@
+import { createCodeEditor, loadLanguage, setDocument, setReadOnly, setWordWrap } from "./editor-factory.js";
+import { createElementBlock, defineComponent, onBeforeUnmount, onMounted, openBlock, shallowRef, watch } from "vue";
+//#region src/code/CodeSurface.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CodeSurface",
+	props: {
+		modelValue: { default: "" },
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		language: {},
+		wordWrap: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"save",
+		"ready"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const element = shallowRef();
+		const view = shallowRef();
+		onMounted(() => {
+			const instance = createCodeEditor({
+				parent: element.value,
+				doc: props.modelValue,
+				readOnly: !props.editable,
+				wordWrap: props.wordWrap,
+				...props.language !== void 0 && { language: props.language },
+				onChange: (v) => emit("update:modelValue", v.state.doc.toString()),
+				onSaveShortcut: () => emit("save", instance.state.doc.toString())
+			});
+			view.value = instance;
+			emit("ready", instance);
+		});
+		onBeforeUnmount(() => {
+			view.value?.destroy();
+			view.value = void 0;
+		});
+		watch(() => props.modelValue, (text) => {
+			if (view.value) setDocument(view.value, text);
+		});
+		watch(() => props.editable, (editable) => {
+			if (view.value) setReadOnly(view.value, !editable);
+		});
+		watch(() => props.wordWrap, (wrap) => {
+			if (view.value) setWordWrap(view.value, wrap);
+		});
+		watch(() => props.language, (language) => {
+			if (view.value) loadLanguage(view.value, language);
+		});
+		__expose({ view });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				class: "sk-code-surface",
+				style: {
+					"height": "100%",
+					"min-height": "0",
+					"overflow": "hidden"
+				}
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CodeSurface2.js.map

package/dist/code/CodeSurface2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSurface2.js","names":["_openBlock","_createElementBlock"],"sources":["../../src/code/CodeSurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EditorView } from '@codemirror/view'\nimport { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport { createCodeEditor, loadLanguage, setDocument, setReadOnly, setWordWrap } from './editor-factory'\n\n// CodeMirror renders on the client only: on the server this is an empty container, the editor is built on mount.\nconst props = withDefaults(defineProps<{\n  /** The document text. */\n  modelValue?: string\n  editable?: boolean\n  /** A language id: `languageOf(path)` or an id of `registerLanguage`. Absent or unknown: plain text. */\n  language?: string\n  wordWrap?: boolean\n}>(), { modelValue: '', editable: true, wordWrap: true })\n\nconst emit = defineEmits<{\n  /** The whole text after every edit. */\n  'update:modelValue': [text: string]\n  /** Mod-S, with the current text. */\n  'save': [text: string]\n  /** The editor exists. */\n  'ready': [view: EditorView]\n}>()\n\nconst element = shallowRef<HTMLElement>()\nconst view = shallowRef<EditorView>()\n\nonMounted(() => {\n  const instance = createCodeEditor({\n    parent: element.value!,\n    doc: props.modelValue,\n    readOnly: !props.editable,\n    wordWrap: props.wordWrap,\n    ...(props.language !== undefined && { language: props.language }),\n    onChange: v => emit('update:modelValue', v.state.doc.toString()),\n    onSaveShortcut: () => emit('save', instance.state.doc.toString()),\n  })\n  view.value = instance\n  emit('ready', instance)\n})\n\nonBeforeUnmount(() => {\n  view.value?.destroy()\n  view.value = undefined\n})\n\n// The host's text (a loaded file, a reset): not an edit, so no `update:modelValue`. The text the surface itself just\n// emitted comes back equal and changes nothing.\nwatch(() => props.modelValue, (text) => {\n  if (view.value) setDocument(view.value, text)\n})\nwatch(() => props.editable, (editable) => {\n  if (view.value) setReadOnly(view.value, !editable)\n})\nwatch(() => props.wordWrap, (wrap) => {\n  if (view.value) setWordWrap(view.value, wrap)\n})\nwatch(() => props.language, (language) => {\n  if (view.value) void loadLanguage(view.value, language)\n})\n\ndefineExpose({ view })\n</script>\n\n<template>\n  <div ref=\"element\" class=\"sk-code-surface\" style=\"height: 100%; min-height: 0; overflow: hidden\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EASd,MAAM,OAAO;EASb,MAAM,UAAU,WAAwB;EACxC,MAAM,OAAO,WAAuB;EAEpC,gBAAgB;GACd,MAAM,WAAW,iBAAiB;IAChC,QAAQ,QAAQ;IAChB,KAAK,MAAM;IACX,UAAU,CAAC,MAAM;IACjB,UAAU,MAAM;IAChB,GAAI,MAAM,aAAa,KAAA,KAAa,EAAE,UAAU,MAAM,SAAS;IAC/D,WAAU,MAAK,KAAK,qBAAqB,EAAE,MAAM,IAAI,SAAS,CAAC;IAC/D,sBAAsB,KAAK,QAAQ,SAAS,MAAM,IAAI,SAAS,CAAC;GAClE,CAAC;GACD,KAAK,QAAQ;GACb,KAAK,SAAS,QAAQ;EACxB,CAAC;EAED,sBAAsB;GACpB,KAAK,OAAO,QAAQ;GACpB,KAAK,QAAQ,KAAA;EACf,CAAC;EAID,YAAY,MAAM,aAAa,SAAS;GACtC,IAAI,KAAK,OAAO,YAAY,KAAK,OAAO,IAAI;EAC9C,CAAC;EACD,YAAY,MAAM,WAAW,aAAa;GACxC,IAAI,KAAK,OAAO,YAAY,KAAK,OAAO,CAAC,QAAQ;EACnD,CAAC;EACD,YAAY,MAAM,WAAW,SAAS;GACpC,IAAI,KAAK,OAAO,YAAY,KAAK,OAAO,IAAI;EAC9C,CAAC;EACD,YAAY,MAAM,WAAW,aAAa;GACxC,IAAI,KAAK,OAAO,aAAkB,KAAK,OAAO,QAAQ;EACxD,CAAC;EAED,SAAa,EAAE,KAAK,CAAC;;GAInB,OAAAA,UAAA,GAAAC,mBAAmG,OAAA;IAA1F,SAAA;IAAJ,KAAI;IAAU,OAAM;IAAkB,OAAA;KAAA,UAAA;KAAA,cAAA;KAAA,YAAA;IAAA"}

package/dist/code/chrome-theme.js

@@ -0,0 +1,76 @@
+import { EditorView } from "@codemirror/view";
+//#region src/code/chrome-theme.ts
+/**
+* Editor chrome (gutter, scroll container, selection, search panel). Token colours are not here, they live in
+* `skaileHighlightStyle`. Everything reads the shared `--sk-*` tokens (`styles/tokens.css`); the fallbacks are the
+* token defaults, so the surface also renders in a page that did not load the stylesheet. A host styles the surface by
+* mapping the tokens once.
+*/
+const bg = "var(--sk-bg, #ffffff)";
+const fg = "var(--sk-fg, #18181b)";
+const muted = "var(--sk-muted, #71717a)";
+const border = "var(--sk-border, #e4e4e7)";
+const primary = "var(--sk-primary, #2563eb)";
+const raised = `color-mix(in oklab, ${fg} 5%, ${bg})`;
+const skaileChromeTheme = EditorView.theme({
+	"&": {
+		backgroundColor: bg,
+		color: fg,
+		height: "100%",
+		fontSize: "0.8125rem",
+		lineHeight: "1.5"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": { overflow: "auto" },
+	".cm-content": {
+		fontFamily: "ui-monospace, SFMono-Regular, \"Menlo\", \"Monaco\", \"Cascadia Mono\", \"Consolas\", monospace",
+		padding: "12px 16px 12px 0",
+		caretColor: fg
+	},
+	".cm-gutters": {
+		backgroundColor: raised,
+		color: muted,
+		border: "none"
+	},
+	".cm-lineNumbers .cm-gutterElement": {
+		padding: "0 0.75rem",
+		minWidth: "2.5em",
+		textAlign: "right"
+	},
+	".cm-foldGutter .cm-gutterElement > *": {
+		opacity: "0",
+		transition: "opacity 120ms ease-out"
+	},
+	".cm-gutters:hover .cm-foldGutter .cm-gutterElement > *": { opacity: "1" },
+	".cm-activeLine": { backgroundColor: `color-mix(in oklab, ${fg} 6%, transparent)` },
+	".cm-activeLineGutter": {
+		backgroundColor: `color-mix(in oklab, ${fg} 8%, ${bg})`,
+		color: fg
+	},
+	"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, ::selection": { backgroundColor: `color-mix(in oklab, ${primary} 28%, transparent) !important` },
+	".cm-panels": {
+		backgroundColor: raised,
+		color: fg,
+		borderColor: border
+	},
+	".cm-panels.cm-panels-top": { borderBottom: `1px solid ${border}` },
+	".cm-textfield": {
+		backgroundColor: bg,
+		color: fg,
+		border: `1px solid ${border}`
+	},
+	".cm-button": {
+		backgroundImage: "none",
+		backgroundColor: raised,
+		color: fg,
+		border: `1px solid ${border}`
+	},
+	".cm-searchMatch": { backgroundColor: `color-mix(in oklab, var(--sk-warning, #d97706) 30%, transparent)` },
+	".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: `color-mix(in oklab, var(--sk-warning, #d97706) 55%, transparent)` },
+	"&.cm-skaile-readonly .cm-cursor": { display: "none" },
+	"&.cm-skaile-readonly .cm-content": { caretColor: "transparent" }
+});
+//#endregion
+export { skaileChromeTheme };
+
+//# sourceMappingURL=chrome-theme.js.map

package/dist/code/chrome-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome-theme.js","names":[],"sources":["../../src/code/chrome-theme.ts"],"sourcesContent":["import { EditorView } from '@codemirror/view'\n\n/**\n * Editor chrome (gutter, scroll container, selection, search panel). Token colours are not here, they live in\n * `skaileHighlightStyle`. Everything reads the shared `--sk-*` tokens (`styles/tokens.css`); the fallbacks are the\n * token defaults, so the surface also renders in a page that did not load the stylesheet. A host styles the surface by\n * mapping the tokens once.\n */\nconst bg = 'var(--sk-bg, #ffffff)'\nconst fg = 'var(--sk-fg, #18181b)'\nconst muted = 'var(--sk-muted, #71717a)'\nconst border = 'var(--sk-border, #e4e4e7)'\nconst primary = 'var(--sk-primary, #2563eb)'\nconst raised = `color-mix(in oklab, ${fg} 5%, ${bg})`\n\nexport const skaileChromeTheme = EditorView.theme({\n  '&': {\n    backgroundColor: bg,\n    color: fg,\n    height: '100%',\n    fontSize: '0.8125rem',\n    lineHeight: '1.5',\n  },\n  '&.cm-focused': { outline: 'none' },\n  '.cm-scroller': { overflow: 'auto' },\n  '.cm-content': {\n    fontFamily: 'ui-monospace, SFMono-Regular, \"Menlo\", \"Monaco\", \"Cascadia Mono\", \"Consolas\", monospace',\n    // Right padding so long lines do not touch the container edge; the left side is the gutter's.\n    padding: '12px 16px 12px 0',\n    caretColor: fg,\n  },\n  '.cm-gutters': {\n    backgroundColor: raised,\n    color: muted,\n    border: 'none',\n  },\n  '.cm-lineNumbers .cm-gutterElement': {\n    // On the gutter element (not the container) so the active-line highlight covers the gap to the content.\n    padding: '0 0.75rem',\n    minWidth: '2.5em',\n    textAlign: 'right',\n  },\n  // Fold markers are noise while unused: revealed on gutter hover. The marker's inner element fades, the gutter\n  // element keeps its background (it carries the active-line highlight across the fold column).\n  '.cm-foldGutter .cm-gutterElement > *': { opacity: '0', transition: 'opacity 120ms ease-out' },\n  '.cm-gutters:hover .cm-foldGutter .cm-gutterElement > *': { opacity: '1' },\n  '.cm-activeLine': { backgroundColor: `color-mix(in oklab, ${fg} 6%, transparent)` },\n  '.cm-activeLineGutter': { backgroundColor: `color-mix(in oklab, ${fg} 8%, ${bg})`, color: fg },\n  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, ::selection': {\n    backgroundColor: `color-mix(in oklab, ${primary} 28%, transparent) !important`,\n  },\n  '.cm-panels': { backgroundColor: raised, color: fg, borderColor: border },\n  '.cm-panels.cm-panels-top': { borderBottom: `1px solid ${border}` },\n  '.cm-textfield': { backgroundColor: bg, color: fg, border: `1px solid ${border}` },\n  '.cm-button': { backgroundImage: 'none', backgroundColor: raised, color: fg, border: `1px solid ${border}` },\n  '.cm-searchMatch': { backgroundColor: `color-mix(in oklab, var(--sk-warning, #d97706) 30%, transparent)` },\n  '.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: `color-mix(in oklab, var(--sk-warning, #d97706) 55%, transparent)` },\n  // A viewer, not an editor: no caret while read-only. The class is toggled with the read-only state.\n  '&.cm-skaile-readonly .cm-cursor': { display: 'none' },\n  '&.cm-skaile-readonly .cm-content': { caretColor: 'transparent' },\n})\n"],"mappings":";;;;;;;;AAQA,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,SAAS,uBAAuB,GAAG,OAAO,GAAG;AAEnD,MAAa,oBAAoB,WAAW,MAAM;CAChD,KAAK;EACH,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,UAAU;EACV,YAAY;CACd;CACA,gBAAgB,EAAE,SAAS,OAAO;CAClC,gBAAgB,EAAE,UAAU,OAAO;CACnC,eAAe;EACb,YAAY;EAEZ,SAAS;EACT,YAAY;CACd;CACA,eAAe;EACb,iBAAiB;EACjB,OAAO;EACP,QAAQ;CACV;CACA,qCAAqC;EAEnC,SAAS;EACT,UAAU;EACV,WAAW;CACb;CAGA,wCAAwC;EAAE,SAAS;EAAK,YAAY;CAAyB;CAC7F,0DAA0D,EAAE,SAAS,IAAI;CACzE,kBAAkB,EAAE,iBAAiB,uBAAuB,GAAG,mBAAmB;CAClF,wBAAwB;EAAE,iBAAiB,uBAAuB,GAAG,OAAO,GAAG;EAAI,OAAO;CAAG;CAC7F,kHAAkH,EAChH,iBAAiB,uBAAuB,QAAQ,+BAClD;CACA,cAAc;EAAE,iBAAiB;EAAQ,OAAO;EAAI,aAAa;CAAO;CACxE,4BAA4B,EAAE,cAAc,aAAa,SAAS;CAClE,iBAAiB;EAAE,iBAAiB;EAAI,OAAO;EAAI,QAAQ,aAAa;CAAS;CACjF,cAAc;EAAE,iBAAiB;EAAQ,iBAAiB;EAAQ,OAAO;EAAI,QAAQ,aAAa;CAAS;CAC3G,mBAAmB,EAAE,iBAAiB,mEAAmE;CACzG,2CAA2C,EAAE,iBAAiB,mEAAmE;CAEjI,mCAAmC,EAAE,SAAS,OAAO;CACrD,oCAAoC,EAAE,YAAY,cAAc;AAClE,CAAC"}

package/dist/code/compartments.js

@@ -0,0 +1,19 @@
+import { Compartment } from "@codemirror/state";
+//#region src/code/compartments.ts
+/**
+* Compartments allow live reconfiguration of specific extension slots without tearing down the `EditorState`. Each one
+* owns one toggleable slice:
+*
+* - `readOnlyCompartment`: `EditorState.readOnly` + `EditorView.editable`
+* - `languageCompartment`: the active `LanguageSupport` (swapped when a language resolves)
+* - `wrapCompartment`: `EditorView.lineWrapping` (or nothing)
+*
+* A compartment is a key, not state: one instance serves every view.
+*/
+const readOnlyCompartment = new Compartment();
+const languageCompartment = new Compartment();
+const wrapCompartment = new Compartment();
+//#endregion
+export { languageCompartment, readOnlyCompartment, wrapCompartment };
+
+//# sourceMappingURL=compartments.js.map