@fusion.dev/helix-sandbox 0.223.1 → 0.225.0

package/api.json

@@ -1 +1 @@
-{"families":[{"contributes":true,"elements":[{"attributes":[{"description":"Accessible name for the editable region.","name":"field-label","type":"string"},{"description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","name":"language","type":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},{"description":"Which source this pane holds, echoed in every change.","name":"name","type":"string"},{"description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","name":"readonly","type":"boolean"},{"description":"The source being edited.","name":"value","type":"string"}],"cssParts":[{"description":"The element CodeMirror is mounted into.","name":"editor","type":""}],"cssProperties":[],"cssStates":[{"description":"While the source differs from the source the editor was given, until `reset()` or a new `value`.","name":"modified","type":""},{"description":"Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.","name":"settled","type":""}],"description":"CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,\nnumber its lines, or say where the cursor is, and a status bar reading line\nand column has to ask something.\n\n**On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the\npackage's root exports its class as a type only, because CodeMirror is most\nof what the package weighs over the wire. A sandbox with no editable pane\npays for none, and neither does a site that registers its elements once.\n\n`language` names the grammar by the name a file or a sandbox pane carries:\n`css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor\ndoes not read draws the source plain, and the console says so once.\n\nEach edit a reader makes is `helix-before-edit` first, which you can cancel\nto refuse the edit, and `helix-edit` once the source holds it, as\n`helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and\nsends neither. **The editor is `:state(modified)` while its source differs\nfrom the source it was given**, the first `value` or the last one set from\noutside, and `reset()` puts that source back as an edit.\n\nThe view is built once and reconfigured, not rebuilt. Replacing it on every\nchange would throw away the undo history, the scroll position, and the\nselection, which is most of what an editor is.","entry":"editor","events":[{"bubbles":true,"description":"Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.","name":"helix-before-edit","reactProp":"onhelix-before-edit","type":"HelixBeforeEditEvent"},{"bubbles":true,"description":"Fired when the cursor moves, with its line and column.","name":"helix-caret","reactProp":"onhelix-caret","type":"HelixCaretEvent"},{"bubbles":true,"description":"Fired after the source was edited, with the new source.","name":"helix-edit","reactProp":"onhelix-edit","type":"HelixEditEvent"}],"label":"Sandbox Editor","methods":[{"description":"Puts back the source the editor was given, as an edit: `helix-before-edit`\nis sent first and can refuse it, and a sandbox passes it to its preview.","name":"reset","type":"() => void"},{"description":"Moves focus into the text, not onto the host.\n\nThe host is not focusable: what a reader types into is CodeMirror's\ncontenteditable, several nodes down inside this shadow root. Without this,\n`editor.focus()` from outside silently does nothing.","name":"focus","type":"() => void"}],"package":"@fusion.dev/helix-sandbox","part":"Editor","properties":[{"default":"'Example source'","description":"Accessible name for the editable region.","name":"fieldLabel","readonly":false,"references":[],"type":"string"},{"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","name":"language","readonly":false,"references":[],"type":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},{"default":"'html'","description":"Which source this pane holds, echoed in every change.","name":"name","readonly":false,"references":[],"type":"string"},{"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","name":"readOnly","readonly":false,"references":[],"type":"boolean"},{"default":"''","description":"The source being edited.","name":"value","readonly":false,"references":[],"type":"string"},{"default":"","description":"Whether the source differs from the source the editor was given: its\nfirst `value`, or the last one set from outside.","name":"modified","readonly":true,"references":[],"type":"boolean"},{"default":"","description":"Where the cursor is, counted from one, as an editor reports it.","name":"caret","readonly":true,"references":[],"type":"CaretDetail"},{"default":"new Promise<void>((resolve) => { this.resolveSettled = resolve })","description":"Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.","name":"whenSettled","readonly":true,"references":[],"type":"Promise<void>"}],"slots":[],"specifier":"@fusion.dev/helix-sandbox/editor","status":"experimental","summary":"An editable pane of source, with highlighting and line numbers.","tagName":"helix-sandbox-editor","tier":"styled","words":["fieldLabel"]}],"label":"Sandbox","package":"@fusion.dev/helix","slug":"sandbox"}],"package":"@fusion.dev/helix-sandbox"}
+{"families":[{"contributes":true,"elements":[{"attributes":[{"description":"Accessible name for the editable region.","name":"field-label","type":"string"},{"description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","name":"language","type":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},{"description":"Which source this pane holds, echoed in every change.","name":"name","type":"string"},{"description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","name":"readonly","type":"boolean"},{"description":"The source being edited.","name":"value","type":"string"}],"cssParts":[{"description":"The element CodeMirror is mounted into.","name":"editor","type":""}],"cssProperties":[],"cssStates":[{"description":"While the source differs from the source the editor was given, until `reset()` or a new `value`.","name":"modified","type":""},{"description":"Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.","name":"settled","type":""}],"description":"CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,\nnumber its lines, or say where the cursor is, and a status bar reading line\nand column has to ask something.\n\n**On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the\npackage's root exports its class as a type only, because CodeMirror is most\nof what the package weighs over the wire. A sandbox with no editable pane\npays for none, and neither does a site that registers its elements once.\n\n`language` names the grammar by the name a file or a sandbox pane carries:\n`css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor\ndoes not read draws the source plain, and the console says so once.\n\nEach edit a reader makes is `helix-before-edit` first, which you can cancel\nto refuse the edit, and `helix-edit` once the source holds it, as\n`helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and\nsends neither. **The editor is `:state(modified)` while its source differs\nfrom the source it was given**, the first `value` or the last one set from\noutside, and `reset()` puts that source back as an edit.\n\nThe view is built once and reconfigured, not rebuilt. Replacing it on every\nchange would throw away the undo history, the scroll position, and the\nselection, which is most of what an editor is.","entry":"editor","events":[{"description":"Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.","name":"helix-before-edit","reactProp":"onhelix-before-edit","type":"HelixBeforeEditEvent"},{"description":"Fired when the cursor moves, with its line and column.","name":"helix-caret","reactProp":"onhelix-caret","type":"HelixCaretEvent"},{"description":"Fired after the source was edited, with the new source.","name":"helix-edit","reactProp":"onhelix-edit","type":"HelixEditEvent"}],"label":"Sandbox Editor","methods":[{"description":"Puts back the source the editor was given, as an edit: `helix-before-edit`\nis sent first and can refuse it, and a sandbox passes it to its preview.","name":"reset","type":"() => void"},{"description":"Moves focus into the text, not onto the host.\n\nThe host is not focusable: what a reader types into is CodeMirror's\ncontenteditable, several nodes down inside this shadow root. Without this,\n`editor.focus()` from outside silently does nothing.","name":"focus","type":"() => void"}],"package":"@fusion.dev/helix-sandbox","part":"Editor","properties":[{"default":"'Example source'","description":"Accessible name for the editable region.","name":"fieldLabel","readonly":false,"references":[],"type":"string"},{"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","name":"language","readonly":false,"references":[],"type":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},{"default":"'html'","description":"Which source this pane holds, echoed in every change.","name":"name","readonly":false,"references":[],"type":"string"},{"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","name":"readOnly","readonly":false,"references":[],"type":"boolean"},{"default":"''","description":"The source being edited.","name":"value","readonly":false,"references":[],"type":"string"},{"default":"","description":"Whether the source differs from the source the editor was given: its\nfirst `value`, or the last one set from outside.","name":"modified","readonly":true,"references":[],"type":"boolean"},{"default":"","description":"Where the cursor is, counted from one, as an editor reports it.","name":"caret","readonly":true,"references":[],"type":"CaretDetail"},{"default":"new Promise<void>((resolve) => { this.resolveSettled = resolve })","description":"Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.","name":"whenSettled","readonly":true,"references":[],"type":"Promise<void>"}],"slots":[],"specifier":"@fusion.dev/helix-sandbox/editor","status":"experimental","summary":"An editable pane of source, with highlighting and line numbers.","tagName":"helix-sandbox-editor","tier":"styled","words":["fieldLabel"]}],"label":"Sandbox","package":"@fusion.dev/helix","slug":"sandbox"}],"package":"@fusion.dev/helix-sandbox"}

package/custom-elements.json

@@ -1 +1 @@
-{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/code-block/code-block-highlight.ts","declarations":[{"kind":"function","name":"codeBlockHighlighter","return":{"type":{"text":"string | undefined"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"language","type":{"text":"string"}}],"description":"Highlights a block's code by its `language`, in any case and by any name\n`languageOf` reads, such as `ts`, `TypeScript` or `bash`, or returns\n`undefined` for a language no grammar here reads, which the block then\ndraws plain.\n\n**In the editor's own style**, so a snippet in a block and the same snippet\nopen in the sandbox are colored by one source: the classes are the ones\n`syntaxHighlighter` gives each token, and `codeBlockSheet` holds the rules\nfor them, in the `--helix-color-syntax-*` tokens."},{"kind":"variable","name":"codeBlockSheet","type":{"text":"CSSResult"},"description":"The rules that color `codeBlockHighlighter`'s classes, for a block to adopt."}],"exports":[{"kind":"js","name":"codeBlockHighlighter","declaration":{"name":"codeBlockHighlighter","module":"src/code-block/code-block-highlight.ts"}},{"kind":"js","name":"codeBlockSheet","declaration":{"name":"codeBlockSheet","module":"src/code-block/code-block-highlight.ts"}}]},{"kind":"javascript-module","path":"src/code-block/index.ts","declarations":[],"exports":[{"kind":"js","name":"codeBlockHighlighter","declaration":{"name":"codeBlockHighlighter","module":"./code-block-highlight.js"}},{"kind":"js","name":"codeBlockSheet","declaration":{"name":"codeBlockSheet","module":"./code-block-highlight.js"}}]},{"kind":"javascript-module","path":"src/editor/index.ts","declarations":[],"exports":[{"kind":"js","name":"*","declaration":{"name":"*","module":"src/sandbox/editor/sandbox-editor.js"}}]},{"kind":"javascript-module","path":"src/highlight/highlight.ts","declarations":[{"kind":"function","name":"highlight","return":{"type":{"text":"string"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"language","type":{"text":"HighlightLanguage"}},{"name":"highlighter","default":"classHighlighter","type":{"text":"Highlighter"}}],"description":"Highlights a snippet, returning HTML with one span per token.\n\n**A parser, and no editor.** Lezer's grammars are parsers, and parsing is a\npure function of the text: `highlightCode` walks a tree and hands back\ntokens. Nothing is mounted, no document is created, and this runs on a server\nwith no DOM at all, which is what lets a static page ship highlighted code\nwith no client JavaScript spent on it.\n\n**`CodeBlock` holds no parser.** A `dependencies` entry is paid by every\nconsumer whether or not they import it, so the grammars are in this package,\nbeside the editor that reads them too. `CodeBlock` renders a `<slot>`, so the\noutput of this drops straight into one. A snippet on a reference page and the\nsame snippet open in the sandbox are then colored by one source.\n\n`classHighlighter` emits Lezer's own `tok-` class names. Mapping those to\ncolors is yours, because the classes are stable and a palette is not: the\nFusion site paints them from `--helix-color-syntax-*`. Pass another\n`highlighter` for other classes, such as `syntaxHighlighter`, the editor's\nown, whose rules are `syntaxRules`."}],"exports":[{"kind":"js","name":"highlight","declaration":{"name":"highlight","module":"src/highlight/highlight.ts"}}]},{"kind":"javascript-module","path":"src/highlight/index.ts","declarations":[],"exports":[{"kind":"js","name":"highlight","declaration":{"name":"highlight","module":"./highlight.js"}},{"kind":"js","name":"HighlightLanguage","declaration":{"name":"HighlightLanguage","module":"./language.js"}},{"kind":"js","name":"languageOf","declaration":{"name":"languageOf","module":"./language.js"}},{"kind":"js","name":"syntaxHighlighter","declaration":{"name":"syntaxHighlighter","module":"./syntax.js"}},{"kind":"js","name":"syntaxRules","declaration":{"name":"syntaxRules","module":"./syntax.js"}}]},{"kind":"javascript-module","path":"src/highlight/language.ts","declarations":[{"kind":"function","name":"languageOf","return":{"type":{"text":"HighlightLanguage | undefined"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"The language a name stands for, in any case: `TypeScript`, `bash` or `mjs`.\n`undefined` for a name no grammar here reads."}],"exports":[{"kind":"js","name":"languageOf","declaration":{"name":"languageOf","module":"src/highlight/language.ts"}}]},{"kind":"javascript-module","path":"src/highlight/shell.ts","declarations":[{"kind":"variable","name":"shellMode","type":{"text":"StreamParser<ShellState>"},"default":"{ ...(shell as StreamParser<ShellState>), startState(indent) { const state = (shell as StreamParser<ShellState>).startState?.(indent) ?? ({} as ShellState) state.helixHead = true return state }, token(stream, state) { if (stream.sol()) { state.helixHead = true } const head = state.helixHead const from = stream.pos const token = (shell as StreamParser<ShellState>).token(stream, state) const text = stream.string.slice(from, stream.pos) /* Whitespace decides nothing: it neither is a command nor ends the position a command could be in, so it passes through without touching the flag. */ if (text.trim() === '') { return token } if (OPENS.test(text.trim())) { state.helixHead = true return token } state.helixHead = false return token === null && head && /^[A-Za-z_][\\w.@/-]*$/.test(text) ? 'command' : token }, }","description":"The sh mode, with the command named."},{"kind":"variable","name":"shellTokens","type":{"text":"Record<string, Tag>"},"default":"{ command: tags.keyword }","description":"What `shellMode`'s own token name is drawn as, for its `tokenTable`."}],"exports":[{"kind":"js","name":"shellMode","declaration":{"name":"shellMode","module":"src/highlight/shell.ts"}},{"kind":"js","name":"shellTokens","declaration":{"name":"shellTokens","module":"src/highlight/shell.ts"}}]},{"kind":"javascript-module","path":"src/highlight/stream.ts","declarations":[{"kind":"function","name":"highlightStream","return":{"type":{"text":"void"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"mode","type":{"text":"StreamParser<State>"}},{"name":"table","type":{"text":"Record<string, Tag | readonly Tag[]>"}},{"name":"highlighter","type":{"text":"Highlighter"}},{"name":"put","type":{"text":"(text: string, classes: string) => void"}},{"name":"putBreak","type":{"text":"() => void"}}],"description":"Highlights `code` with a mode, in the shape `highlightCode` from\n`@lezer/highlight` uses: `put` for each run of text with its classes, and\n`putBreak` between lines. Neighboring tokens with the same classes are one\nrun, as they are there."}],"exports":[{"kind":"js","name":"highlightStream","declaration":{"name":"highlightStream","module":"src/highlight/stream.ts"}}]},{"kind":"javascript-module","path":"src/highlight/syntax.ts","declarations":[{"kind":"variable","name":"syntaxHighlighter","type":{"text":"Highlighter"},"description":"Gives each token the class of the rule that colors it, a `helix-syntax-`\nclass such as `helix-syntax-keyword`. Pass it to `highlight`, and put\n`syntaxRules` where the result is drawn."},{"kind":"variable","name":"syntaxRules","type":{"text":"string"},"description":"The CSS for `syntaxHighlighter`'s classes, which colors them from the `--helix-color-syntax-*` tokens."}],"exports":[{"kind":"js","name":"syntaxHighlighter","declaration":{"name":"syntaxHighlighter","module":"src/highlight/syntax.ts"}},{"kind":"js","name":"syntaxRules","declaration":{"name":"syntaxRules","module":"src/highlight/syntax.ts"}}]},{"kind":"javascript-module","path":"src/index.ts","declarations":[],"exports":[{"kind":"js","name":"CaretDetail","declaration":{"name":"CaretDetail","package":"@fusion.dev/helix-core"}},{"kind":"js","name":"HelixBeforeEditEvent","declaration":{"name":"HelixBeforeEditEvent","package":"@fusion.dev/helix-core"}},{"kind":"js","name":"HelixCaretEvent","declaration":{"name":"HelixCaretEvent","package":"@fusion.dev/helix-core"}},{"kind":"js","name":"HelixEditEvent","declaration":{"name":"HelixEditEvent","package":"@fusion.dev/helix-core"}},{"kind":"js","name":"*","declaration":{"name":"*","module":"src/highlight/index.js"}},{"kind":"js","name":"EditorLanguage","declaration":{"name":"EditorLanguage","module":"./sandbox/editor/sandbox-editor.js"}},{"kind":"js","name":"HelixSandboxEditor","declaration":{"name":"HelixSandboxEditor","module":"./sandbox/editor/sandbox-editor.js"}}]},{"kind":"javascript-module","path":"src/sandbox/editor/sandbox-editor.css.ts","declarations":[{"kind":"variable","name":"styles"}],"exports":[{"kind":"js","name":"styles","declaration":{"name":"styles","module":"src/sandbox/editor/sandbox-editor.css.ts"}}]},{"kind":"javascript-module","path":"src/sandbox/editor/sandbox-editor.ts","declarations":[{"kind":"class","description":"CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,\nnumber its lines, or say where the cursor is, and a status bar reading line\nand column has to ask something.\n\n**On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the\npackage's root exports its class as a type only, because CodeMirror is most\nof what the package weighs over the wire. A sandbox with no editable pane\npays for none, and neither does a site that registers its elements once.\n\n`language` names the grammar by the name a file or a sandbox pane carries:\n`css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor\ndoes not read draws the source plain, and the console says so once.\n\nEach edit a reader makes is `helix-before-edit` first, which you can cancel\nto refuse the edit, and `helix-edit` once the source holds it, as\n`helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and\nsends neither. **The editor is `:state(modified)` while its source differs\nfrom the source it was given**, the first `value` or the last one set from\noutside, and `reset()` puts that source back as an edit.\n\nThe view is built once and reconfigured, not rebuilt. Replacing it on every\nchange would throw away the undo history, the scroll position, and the\nselection, which is most of what an editor is.","name":"HelixSandboxEditor","cssParts":[{"description":"The element CodeMirror is mounted into.","name":"editor"}],"members":[{"kind":"field","name":"words","type":{"text":"string"},"static":true,"default":"'helix-sandbox-editor'","description":"The key the editor's words are registered under, its tag:\n`registerWords('de', { 'helix-sandbox-editor': { fieldLabel: 'Quelltext' } })`."},{"kind":"field","name":"fieldLabel","type":{"text":"string"},"default":"'Example source'","description":"Accessible name for the editable region.","attribute":"field-label","helix":{"words":true}},{"kind":"field","name":"language","type":{"text":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","attribute":"language"},{"kind":"field","name":"name","type":{"text":"string"},"default":"'html'","description":"Which source this pane holds, echoed in every change.","attribute":"name"},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","attribute":"readonly","reflects":true,"helix":{"boolean":"present"}},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The source being edited.","attribute":"value"},{"kind":"field","name":"readOnly$","privacy":"private","readonly":true,"default":"new Compartment()"},{"kind":"field","name":"view","type":{"text":"EditorView | undefined"},"privacy":"private"},{"kind":"field","name":"language$","privacy":"private","readonly":true,"default":"new Compartment()"},{"kind":"field","name":"name$","privacy":"private","readonly":true,"default":"new Compartment()","description":"The editable region's name, which follows `field-label` and the words registered for it."},{"kind":"field","name":"baseline","type":{"text":"string"},"privacy":"private","default":"''","description":"The source the editor was given: its first `value`, or the last one set from outside."},{"kind":"field","name":"edited","type":{"text":"string | undefined"},"privacy":"private","description":"The source the last edit left, while `value` still holds it."},{"kind":"field","name":"unread","type":{"text":"string | undefined"},"privacy":"private","description":"The `language` last reported as one the editor does not read."},{"kind":"field","name":"modified","type":{"text":"boolean"},"description":"Whether the source differs from the source the editor was given: its\nfirst `value`, or the last one set from outside.","readonly":true},{"kind":"method","name":"reset","return":{"type":{"text":"void"}},"description":"Puts back the source the editor was given, as an edit: `helix-before-edit`\nis sent first and can refuse it, and a sandbox passes it to its preview.","type":{"text":"reset() => void"}},{"kind":"method","name":"grammar","privacy":"private","return":{"type":{"text":"Extension"}},"description":"What `language` turns on: its grammar, or nothing for a name the editor\ndoes not read, which it reports once for each name."},{"kind":"field","name":"caret","type":{"text":"CaretDetail"},"description":"Where the cursor is, counted from one, as an editor reports it.","readonly":true},{"kind":"field","name":"mount","type":{"text":"HTMLElement | null"},"privacy":"private","readonly":true},{"kind":"method","name":"create","privacy":"private","return":{"type":{"text":"void"}},"description":"Builds the view once the mount exists.\n\n`root` is the shadow root rather than the document, or CodeMirror puts its\nstylesheet where this element cannot see it and the editor renders unstyled."},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"description":"Moves focus into the text, not onto the host.\n\nThe host is not focusable: what a reader types into is CodeMirror's\ncontenteditable, several nodes down inside this shadow root. Without this,\n`editor.focus()` from outside silently does nothing.","type":{"text":"focus() => void"}},{"kind":"field","name":"tier","type":{"text":"string"},"static":true,"default":"'helix-headless-'","description":"The prefix this tier registers its elements under.\n\n**A component that renders another renders its own tier's version of it**,\nso `helix-headless-pagination-size` composes `helix-headless-select` and\n`helix-pagination-size` composes `helix-select`. One template says\n`${this.tag('select')}` and each tier answers with its own name.\n\n**The public tag may not be the composed one, in either tier.** Using it\ncosts three things: the name means two different things depending on what a\nconsumer imported, the headless tier composes an element it does not ship,\nand the composition cannot be tested there at all, because there is no\n`helix-select` on that tier to test it against.\n\n**A prefix rather than an override per composition**, which was the first\nplan and does not compile. An override re-renders the fragment from the\nsubclass, and the fragment reads members the base keeps private:\n`PaginationSize` alone would have had to widen `options`, `current` and\n`handleChange` to `protected` so a subclass could say the same thing again.\nSixteen families of that is a lot of encapsulation spent on saying one\nword differently.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"tag","privacy":"protected","return":{"type":{"text":"StaticValue"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"One composed tag, as a static value a template can interpolate.\n\nWhat `unsafeStatic` returns, safe by construction: the name is a literal in\nour own source and the prefix is one of two strings this class defines.\nCalled per render and not cached, which costs nothing, because\n`static-html` keys its template cache on the joined string rather than on\nthe object.\n\n**Written out rather than imported, for every element that never renders\none.** `lit/static-html.js` declares no side effects, so importing\n`unsafeStatic` alone kept the module's three `withStatic` calls in every\nbundle: about 210 bytes gzipped on each of the families that compose no\ntag, Divider and Badge among them. The value is lit's cross-copy protocol,\nkeyed by `Symbol.for('')` so that two copies of lit on a page read each\nother's, and a spec holds it equal to `unsafeStatic`'s.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"partNamed","privacy":"protected","return":{"type":{"text":"T | null"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"One of this element's own parts, by name, or null where it is not rendered.\n\nNot `part`, which every element already has: `Element.part` is the\n`DOMTokenList` of the names the element itself carries, and a method under\nthat name is a type error on every subclass.\n\n**One guard for every lookup.** Lit's server shim has no `querySelector`\non the render root, so a lookup reached during a server render, from a\ngetter a template reads or from `willUpdate`, throws there and nowhere\nelse. Four spellings of the same guard had grown across the library, and\na fifth site with none. Null on the server, which is what the rest of the\ncode already treats a part that has not rendered as.\n\n**`~=` and not `=`.** A part drawn in a state carries a second name while\nthe state holds, `part=\"page page-current\"`, and an exact match stops\nfinding it for exactly as long as it is the one that matters.\n\n`helix component`'s `selectors` reads these calls the way it reads a\n`querySelector('[part=\"x\"]')`, so a name nothing renders is a finding\nrather than a null an optional chain swallows.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"internals","type":{"text":"ElementInternals"},"privacy":"protected","readonly":true,"description":"The element's semantics, set without touching the DOM.\n\n`ElementInternals` sets the implicit role, which an author's own `role`\nattribute still overrides, and it writes no attribute. Setting `role` on the\nhost directly would: that is an attribute the element gives itself after it\nupgrades, which a React consumer's server markup never had, and hydration\nreports it as a mismatch.\n\nAvailable during server rendering. Lit's shim implements `attachInternals`,\nso nothing here needs a guard.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"toggleState","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"name","type":{"text":"string"}},{"name":"on","type":{"text":"boolean"}}],"description":"Records a boolean fact about this element as a custom state.\n\n**The host belongs to whoever rendered it, and a component's own\nbookkeeping may not be kept there.** An attribute written on the first\nupdate is markup a consumer's server never sent, so a React consumer\nhydrates a DOM that has gained attributes since and reports a mismatch it\nwill not patch up. A custom state is not in the DOM at all: it carries the\nfact to a stylesheet through `:state()` and leaves the markup alone, so the\nserver's output and the client's agree by construction.\n\n`SETTLED` carries the long version of that argument; `checked`, `open`,\n`invalid` and `has-label` are recorded the same way, each of them a state a\n`default-*` attribute resolves before React reaches the node.\n\n**Deferring the definitions is not a fix and could not be.** Importing them\nfrom an effect so the upgrades fall the other side of hydration works only\nwhile hydration is one pass: anything that splits it, a streamed segment or\na suspended boundary, puts an upgrade back inside the window. Timing cannot\nbe the guarantee when the fact is kept somewhere React reconciles.\n\nFeature-tested rather than assumed, the way `hostAria` tests element\nreferences. An engine without `CustomStateSet` records nothing and keeps\nwhatever the resting rule draws, which is the safe direction to fail.\n\n**The engines the test is for are browsers**: Safari below 17.4 and Firefox\nbelow 126, where the write is a `TypeError`, so a component bypassing this\nfails to render rather than rendering without whatever the state draws.\nLit's server shim sets `states`, so the guard passes there and records a\nstate nothing reads, which is harmless.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"whenSettled","type":{"text":"Promise<void>"},"readonly":true,"description":"Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.","default":"new Promise<void>((resolve) => { this.resolveSettled = resolve })","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"resolveSettled","type":{"text":"() => void"},"privacy":"private","description":"Resolves `whenSettled`, once, from the frame that records the state.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"fromServer","type":{"text":"boolean"},"privacy":"private","default":"false","description":"Whether the shadow root was a server's, parsed from declarative shadow DOM.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"hydrating","type":{"text":"boolean"},"privacy":"protected","description":"Whether this update is hydrating a server's markup, and so has to render\nexactly what the server rendered.\n\n**Lit hydrates by assuming the markup already shows the first render.** A\nvalue that differs is recorded and never written, so the page keeps the\nserver's, and a template that differs throws. The server has no children,\nso anything a component reads from its children waits for the update after\nhydration, which `finishHydration` asks for. Without a server's markup the\nfirst render reads them and there is one render.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"serverRendered","type":{"text":"boolean"},"privacy":"protected","description":"Whether this element hydrated a server's markup rather than rendering its own.\n\nFor what happened before hydration and cannot be heard after it: an image\nthe parser fetched fires `load` or `error` before any listener exists, so a\ncomponent asks the image instead, once, when this is true.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"finishHydration","privacy":"protected","return":{"type":{"text":"void"}},"description":"Asks for the update a hydration put off, so the reads it skipped happen.\n\nCalled from `firstUpdated`, the end of the hydrating update. The render it\nschedules can only follow that one, which is the exception Lit's\nchange-in-update warning names, and it happens only on a page a server\nrendered.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"childrenKnown","type":{"text":"boolean"},"privacy":"protected","description":"Whether this render can know the children.\n\nA server cannot: its element shim carries attributes and no tree, so\n`children` is undefined there. A render hydrating what a server sent must\nnot, because it has to be the server's render. Anywhere else it can. A\ncomponent whose render depends on its children reads them through\n`knownChildren`, and treats \"not known\" as its own answer rather than as\n\"none\": a list that renders its empty state because nobody has looked yet is\nthe one thing an empty state must never do.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"knownChildren","type":{"text":"Element[]"},"privacy":"protected","description":"The children a render may read: all of them where they are known, and none otherwise.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"assignsByName","type":{"text":"boolean"},"privacy":"protected","description":"Whether this element's slots route by name although it asked to assign them\nby hand.\n\n**A declarative shadow root is always the by-name kind.** HTML has no way to\nask for manual assignment, so a component that assigns by hand and hydrates\na server's root gets one where `slot.assign()` does nothing, and its\nchildren land wherever their `slot` attribute sends them. The way through is\nto write that attribute, which is what `route` does. Only there: on a root\nthis element made, assignment stays manual and the consumer's markup is\nnever touched, which is what a React consumer's hydration requires.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"route","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"child","type":{"text":"Element"}},{"name":"name","type":{"text":"string | undefined"}}],"description":"Sends a child to a slot by name, on a root that routes by name.\n\n`undefined` is the default slot. Written only when it differs, so routing\nthe same child again on every update writes nothing.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"stopInner","privacy":"protected","readonly":true,"description":"Stops an inner control's own announcement at this element's boundary.\n\n**A composed control is one control to a consumer, and the natives had no\nequivalent of the stop the prefixed events already get.** `<helix-select>`\nrenders a `<helix-listbox>`, and both announce: the listbox dispatches\n`input` and `change` from its own host, `input` is composed by\nspecification, and a consumer listening on the select therefore heard one\nchoice twice. Measured before this existed, on the styled tier, one choice\non the inner listbox: select `input` twice and `change` three times,\ncombobox, date input, time input and color input twice each. `Command` was\nthe only one that was right, because it happened to reach for\n`stopImmediatePropagation` for a different reason.\n\nBound on the child in the parent's template, so it runs while the event is\nstill at the child and before it can cross. The guard is for the case where\na component binds this on itself: an element must never stop its own\nannouncement, which is the one it exists to make.\n\nThis is the same job the `helix-before-*` handlers do with their own\n`stopPropagation`, and it is separate rather than folded into them because\na consumer may legitimately refuse a request without the notification ever\nhappening: the two travel at different times and one can be absent.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"relayNativeEvent","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}},{"name":"init","optional":true,"type":{"text":"EventInit"}}],"description":"Re-emits a native event from the host, under its own name.\n\nA native event fired by an inner `<input>` or `<textarea>` is not composed,\nso it stops at the shadow boundary and a consumer listening on\n`<helix-input>` hears nothing. Re-dispatching it from the host is what\nmakes the component behave like the control it wraps.\n\nThe relayed event keeps the native name deliberately. `change` is `change`,\nwhich is what a consumer already knows to listen for, and it is what\nreaches React: its synthetic system claims `onChange` and wires it to that\nname, so a prefixed one would never arrive.\n\n`composed` is not forced. It defaults to the original event's own value, so\na relayed `change` stops at the next shadow boundary exactly as a native\none would. Pass it explicitly only where escaping is the intent, and say so\nwhere you do.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"markRules","type":{"text":"readonly string[]"},"privacy":"protected","static":true,"default":"[]","description":"The rules from `mark-rules.ts` for the marks this element writes in its\nown shadow root: `data-scroller`, `data-virtual`, `data-spoken`,\n`data-mirror` and `data-touches`.\n\nA component that writes a mark names its rule here, and a subclass\ninherits the list. One that writes none takes only the three rules every\nshadow root gets, which is what keeps the other four out of a Button.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"finalizeStyles","privacy":"protected","static":true,"return":{"type":{"text":"CSSResultOrNative[]"}},"parameters":[{"name":"styles","optional":true,"type":{"text":"CSSResultOrNative | CSSResultOrNative[]"}}],"description":"Prepends the shadow-root reset to every subclass's styles, so no component\nhas to remember to include it, with the rules for the marks it writes.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"performUpdate","privacy":"protected","return":{"type":{"text":"void"}},"description":"The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"reactApplied","type":{"text":"boolean | undefined"},"privacy":"private","description":"Whether the first update found React's props, where it looked before the\nrender. See `willUpdate`.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}}],"events":[{"type":{"text":"HelixBeforeEditEvent"},"description":"Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.","name":"helix-before-edit","reactProp":"onhelix-before-edit"},{"type":{"text":"HelixCaretEvent"},"description":"Fired when the cursor moves, with its line and column.","name":"helix-caret","reactProp":"onhelix-caret"},{"type":{"text":"HelixEditEvent"},"description":"Fired after the source was edited, with the new source.","name":"helix-edit","reactProp":"onhelix-edit"}],"attributes":[{"name":"field-label","type":{"text":"string"},"default":"'Example source'","description":"Accessible name for the editable region.","fieldName":"fieldLabel"},{"name":"language","type":{"text":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","fieldName":"language"},{"name":"name","type":{"text":"string"},"default":"'html'","description":"Which source this pane holds, echoed in every change.","fieldName":"name"},{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","fieldName":"readOnly"},{"name":"value","type":{"text":"string"},"default":"''","description":"The source being edited.","fieldName":"value"}],"cssStates":[{"description":"While the source differs from the source the editor was given, until `reset()` or a new `value`.","name":"modified"},{"description":"Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.","name":"settled","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}}],"superclass":{"name":"HelixElement","package":"@fusion.dev/helix-core"},"summary":"An editable pane of source, with highlighting and line numbers.","helix":{"category":"tooling","since":"0.1.0","status":"experimental","documentation":"https://fusion.dev/helix/components/sandbox","aliases":["Code editor","Source pane"],"family":"sandbox","tier":"styled","group":"Sandbox","part":"Editor"},"tagName":"helix-sandbox-editor","customElement":true,"modulePath":"src/sandbox/editor/sandbox-editor.ts","definitionPath":"src/sandbox/editor/sandbox-editor.ts"}],"exports":[{"kind":"js","name":"HelixSandboxEditor","declaration":{"name":"HelixSandboxEditor","module":"src/sandbox/editor/sandbox-editor.ts"}},{"kind":"custom-element-definition","name":"helix-sandbox-editor","declaration":{"name":"HelixSandboxEditor","module":"src/sandbox/editor/sandbox-editor.ts"}}]}],"helix":{"package":"@fusion.dev/helix-sandbox","version":"0.223.1"}}
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/code-block/code-block-highlight.ts","declarations":[{"kind":"function","name":"codeBlockHighlighter","return":{"type":{"text":"string | undefined"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"language","type":{"text":"string"}}],"description":"Highlights a block's code by its `language`, in any case and by any name\n`languageOf` reads, such as `ts`, `TypeScript` or `bash`, or returns\n`undefined` for a language no grammar here reads, which the block then\ndraws plain.\n\n**In the editor's own style**, so a snippet in a block and the same snippet\nopen in the sandbox are colored by one source: the classes are the ones\n`syntaxHighlighter` gives each token, and `codeBlockSheet` holds the rules\nfor them, in the `--helix-color-syntax-*` tokens."},{"kind":"variable","name":"codeBlockSheet","type":{"text":"CSSResult"},"description":"The rules that color `codeBlockHighlighter`'s classes, for a block to adopt."}],"exports":[{"kind":"js","name":"codeBlockHighlighter","declaration":{"name":"codeBlockHighlighter","module":"src/code-block/code-block-highlight.ts"}},{"kind":"js","name":"codeBlockSheet","declaration":{"name":"codeBlockSheet","module":"src/code-block/code-block-highlight.ts"}}]},{"kind":"javascript-module","path":"src/code-block/index.ts","declarations":[],"exports":[{"kind":"js","name":"codeBlockHighlighter","declaration":{"name":"codeBlockHighlighter","module":"./code-block-highlight.js"}},{"kind":"js","name":"codeBlockSheet","declaration":{"name":"codeBlockSheet","module":"./code-block-highlight.js"}}]},{"kind":"javascript-module","path":"src/editor/index.ts","declarations":[],"exports":[{"kind":"js","name":"*","declaration":{"name":"*","module":"src/sandbox/editor/sandbox-editor.js"}}]},{"kind":"javascript-module","path":"src/highlight/highlight.ts","declarations":[{"kind":"function","name":"highlight","return":{"type":{"text":"string"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"language","type":{"text":"HighlightLanguage"}},{"name":"highlighter","default":"classHighlighter","type":{"text":"Highlighter"}}],"description":"Highlights a snippet, returning HTML with one span per token.\n\n**A parser, and no editor.** Lezer's grammars are parsers, and parsing is a\npure function of the text: `highlightCode` walks a tree and hands back\ntokens. Nothing is mounted, no document is created, and this runs on a server\nwith no DOM at all, which is what lets a static page ship highlighted code\nwith no client JavaScript spent on it.\n\n**`CodeBlock` holds no parser.** A `dependencies` entry is paid by every\nconsumer whether or not they import it, so the grammars are in this package,\nbeside the editor that reads them too. `CodeBlock` renders a `<slot>`, so the\noutput of this drops straight into one. A snippet on a reference page and the\nsame snippet open in the sandbox are then colored by one source.\n\n`classHighlighter` emits Lezer's own `tok-` class names. Mapping those to\ncolors is yours, because the classes are stable and a palette is not: the\nFusion site paints them from `--helix-color-syntax-*`. Pass another\n`highlighter` for other classes, such as `syntaxHighlighter`, the editor's\nown, whose rules are `syntaxRules`."}],"exports":[{"kind":"js","name":"highlight","declaration":{"name":"highlight","module":"src/highlight/highlight.ts"}}]},{"kind":"javascript-module","path":"src/highlight/index.ts","declarations":[],"exports":[{"kind":"js","name":"highlight","declaration":{"name":"highlight","module":"./highlight.js"}},{"kind":"js","name":"HighlightLanguage","declaration":{"name":"HighlightLanguage","module":"./language.js"}},{"kind":"js","name":"languageOf","declaration":{"name":"languageOf","module":"./language.js"}},{"kind":"js","name":"syntaxHighlighter","declaration":{"name":"syntaxHighlighter","module":"./syntax.js"}},{"kind":"js","name":"syntaxRules","declaration":{"name":"syntaxRules","module":"./syntax.js"}}]},{"kind":"javascript-module","path":"src/highlight/language.ts","declarations":[{"kind":"function","name":"languageOf","return":{"type":{"text":"HighlightLanguage | undefined"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"The language a name stands for, in any case: `TypeScript`, `bash` or `mjs`.\n`undefined` for a name no grammar here reads."}],"exports":[{"kind":"js","name":"languageOf","declaration":{"name":"languageOf","module":"src/highlight/language.ts"}}]},{"kind":"javascript-module","path":"src/highlight/shell.ts","declarations":[{"kind":"variable","name":"shellMode","type":{"text":"StreamParser<ShellState>"},"default":"{ ...(shell as StreamParser<ShellState>), startState(indent) { const state = (shell as StreamParser<ShellState>).startState?.(indent) ?? ({} as ShellState) state.helixHead = true return state }, token(stream, state) { if (stream.sol()) { state.helixHead = true } const head = state.helixHead const from = stream.pos const token = (shell as StreamParser<ShellState>).token(stream, state) const text = stream.string.slice(from, stream.pos) /* Whitespace decides nothing: it neither is a command nor ends the position a command could be in, so it passes through without touching the flag. */ if (text.trim() === '') { return token } if (OPENS.test(text.trim())) { state.helixHead = true return token } state.helixHead = false return token === null && head && /^[A-Za-z_][\\w.@/-]*$/.test(text) ? 'command' : token }, }","description":"The sh mode, with the command named."},{"kind":"variable","name":"shellTokens","type":{"text":"Record<string, Tag>"},"default":"{ command: tags.keyword }","description":"What `shellMode`'s own token name is drawn as, for its `tokenTable`."}],"exports":[{"kind":"js","name":"shellMode","declaration":{"name":"shellMode","module":"src/highlight/shell.ts"}},{"kind":"js","name":"shellTokens","declaration":{"name":"shellTokens","module":"src/highlight/shell.ts"}}]},{"kind":"javascript-module","path":"src/highlight/stream.ts","declarations":[{"kind":"function","name":"highlightStream","return":{"type":{"text":"void"}},"parameters":[{"name":"code","type":{"text":"string"}},{"name":"mode","type":{"text":"StreamParser<State>"}},{"name":"table","type":{"text":"Record<string, Tag | readonly Tag[]>"}},{"name":"highlighter","type":{"text":"Highlighter"}},{"name":"put","type":{"text":"(text: string, classes: string) => void"}},{"name":"putBreak","type":{"text":"() => void"}}],"description":"Highlights `code` with a mode, in the shape `highlightCode` from\n`@lezer/highlight` uses: `put` for each run of text with its classes, and\n`putBreak` between lines. Neighboring tokens with the same classes are one\nrun, as they are there."}],"exports":[{"kind":"js","name":"highlightStream","declaration":{"name":"highlightStream","module":"src/highlight/stream.ts"}}]},{"kind":"javascript-module","path":"src/highlight/syntax.ts","declarations":[{"kind":"variable","name":"syntaxHighlighter","type":{"text":"Highlighter"},"description":"Gives each token the class of the rule that colors it, a `helix-syntax-`\nclass such as `helix-syntax-keyword`. Pass it to `highlight`, and put\n`syntaxRules` where the result is drawn."},{"kind":"variable","name":"syntaxRules","type":{"text":"string"},"description":"The CSS for `syntaxHighlighter`'s classes, which colors them from the `--helix-color-syntax-*` tokens."}],"exports":[{"kind":"js","name":"syntaxHighlighter","declaration":{"name":"syntaxHighlighter","module":"src/highlight/syntax.ts"}},{"kind":"js","name":"syntaxRules","declaration":{"name":"syntaxRules","module":"src/highlight/syntax.ts"}}]},{"kind":"javascript-module","path":"src/index.ts","declarations":[],"exports":[{"kind":"js","name":"CaretDetail","declaration":{"name":"CaretDetail","package":"@fusion.dev/helix/sandbox/events"}},{"kind":"js","name":"HelixBeforeEditEvent","declaration":{"name":"HelixBeforeEditEvent","package":"@fusion.dev/helix/sandbox/events"}},{"kind":"js","name":"HelixCaretEvent","declaration":{"name":"HelixCaretEvent","package":"@fusion.dev/helix/sandbox/events"}},{"kind":"js","name":"HelixEditEvent","declaration":{"name":"HelixEditEvent","package":"@fusion.dev/helix/sandbox/events"}},{"kind":"js","name":"*","declaration":{"name":"*","module":"src/highlight/index.js"}},{"kind":"js","name":"EditorLanguage","declaration":{"name":"EditorLanguage","module":"./sandbox/editor/sandbox-editor.js"}},{"kind":"js","name":"HelixSandboxEditor","declaration":{"name":"HelixSandboxEditor","module":"./sandbox/editor/sandbox-editor.js"}}]},{"kind":"javascript-module","path":"src/sandbox/editor/sandbox-editor.css.ts","declarations":[{"kind":"variable","name":"styles"}],"exports":[{"kind":"js","name":"styles","declaration":{"name":"styles","module":"src/sandbox/editor/sandbox-editor.css.ts"}}]},{"kind":"javascript-module","path":"src/sandbox/editor/sandbox-editor.ts","declarations":[{"kind":"class","description":"CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,\nnumber its lines, or say where the cursor is, and a status bar reading line\nand column has to ask something.\n\n**On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the\npackage's root exports its class as a type only, because CodeMirror is most\nof what the package weighs over the wire. A sandbox with no editable pane\npays for none, and neither does a site that registers its elements once.\n\n`language` names the grammar by the name a file or a sandbox pane carries:\n`css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor\ndoes not read draws the source plain, and the console says so once.\n\nEach edit a reader makes is `helix-before-edit` first, which you can cancel\nto refuse the edit, and `helix-edit` once the source holds it, as\n`helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and\nsends neither. **The editor is `:state(modified)` while its source differs\nfrom the source it was given**, the first `value` or the last one set from\noutside, and `reset()` puts that source back as an edit.\n\nThe view is built once and reconfigured, not rebuilt. Replacing it on every\nchange would throw away the undo history, the scroll position, and the\nselection, which is most of what an editor is.","name":"HelixSandboxEditor","cssParts":[{"description":"The element CodeMirror is mounted into.","name":"editor"}],"members":[{"kind":"field","name":"words","type":{"text":"string"},"static":true,"default":"'helix-sandbox-editor'","description":"The key the editor's words are registered under, its tag:\n`registerWords('de', { 'helix-sandbox-editor': { fieldLabel: 'Quelltext' } })`."},{"kind":"field","name":"fieldLabel","type":{"text":"string"},"default":"'Example source'","description":"Accessible name for the editable region.","attribute":"field-label","helix":{"words":true}},{"kind":"field","name":"language","type":{"text":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","attribute":"language"},{"kind":"field","name":"name","type":{"text":"string"},"default":"'html'","description":"Which source this pane holds, echoed in every change.","attribute":"name"},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","attribute":"readonly","reflects":true,"helix":{"boolean":"present"}},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The source being edited.","attribute":"value"},{"kind":"field","name":"readOnly$","privacy":"private","readonly":true,"default":"new Compartment()"},{"kind":"field","name":"view","type":{"text":"EditorView | undefined"},"privacy":"private"},{"kind":"field","name":"language$","privacy":"private","readonly":true,"default":"new Compartment()"},{"kind":"field","name":"name$","privacy":"private","readonly":true,"default":"new Compartment()","description":"The editable region's name, which follows `field-label` and the words registered for it."},{"kind":"field","name":"baseline","type":{"text":"string"},"privacy":"private","default":"''","description":"The source the editor was given: its first `value`, or the last one set from outside."},{"kind":"field","name":"edited","type":{"text":"string | undefined"},"privacy":"private","description":"The source the last edit left, while `value` still holds it."},{"kind":"field","name":"unread","type":{"text":"string | undefined"},"privacy":"private","description":"The `language` last reported as one the editor does not read."},{"kind":"field","name":"modified","type":{"text":"boolean"},"description":"Whether the source differs from the source the editor was given: its\nfirst `value`, or the last one set from outside.","readonly":true},{"kind":"method","name":"reset","return":{"type":{"text":"void"}},"description":"Puts back the source the editor was given, as an edit: `helix-before-edit`\nis sent first and can refuse it, and a sandbox passes it to its preview.","type":{"text":"reset() => void"}},{"kind":"method","name":"grammar","privacy":"private","return":{"type":{"text":"Extension"}},"description":"What `language` turns on: its grammar, or nothing for a name the editor\ndoes not read, which it reports once for each name."},{"kind":"field","name":"caret","type":{"text":"CaretDetail"},"description":"Where the cursor is, counted from one, as an editor reports it.","readonly":true},{"kind":"field","name":"mount","type":{"text":"HTMLElement | null"},"privacy":"private","readonly":true},{"kind":"method","name":"create","privacy":"private","return":{"type":{"text":"void"}},"description":"Builds the view once the mount exists.\n\n`root` is the shadow root rather than the document, or CodeMirror puts its\nstylesheet where this element cannot see it and the editor renders unstyled."},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"description":"Moves focus into the text, not onto the host.\n\nThe host is not focusable: what a reader types into is CodeMirror's\ncontenteditable, several nodes down inside this shadow root. Without this,\n`editor.focus()` from outside silently does nothing.","type":{"text":"focus() => void"}},{"kind":"field","name":"tier","type":{"text":"string"},"static":true,"default":"'helix-headless-'","description":"The prefix this tier registers its elements under.\n\n**A component that renders another renders its own tier's version of it**,\nso `helix-headless-pagination-size` composes `helix-headless-select` and\n`helix-pagination-size` composes `helix-select`. One template says\n`${this.tag('select')}` and each tier answers with its own name.\n\n**The public tag may not be the composed one, in either tier.** Using it\ncosts three things: the name means two different things depending on what a\nconsumer imported, the headless tier composes an element it does not ship,\nand the composition cannot be tested there at all, because there is no\n`helix-select` on that tier to test it against.\n\n**A prefix rather than an override per composition**, which was the first\nplan and does not compile. An override re-renders the fragment from the\nsubclass, and the fragment reads members the base keeps private:\n`PaginationSize` alone would have had to widen `options`, `current` and\n`handleChange` to `protected` so a subclass could say the same thing again.\nSixteen families of that is a lot of encapsulation spent on saying one\nword differently.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"tag","privacy":"protected","return":{"type":{"text":"StaticValue"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"One composed tag, as a static value a template can interpolate.\n\nWhat `unsafeStatic` returns, safe by construction: the name is a literal in\nour own source and the prefix is one of two strings this class defines.\nCalled per render and not cached, which costs nothing, because\n`static-html` keys its template cache on the joined string rather than on\nthe object.\n\n**Written out rather than imported, for every element that never renders\none.** `lit/static-html.js` declares no side effects, so importing\n`unsafeStatic` alone kept the module's three `withStatic` calls in every\nbundle: about 210 bytes gzipped on each of the families that compose no\ntag, Divider and Badge among them. The value is lit's cross-copy protocol,\nkeyed by `Symbol.for('')` so that two copies of lit on a page read each\nother's, and a spec holds it equal to `unsafeStatic`'s.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"partNamed","privacy":"protected","return":{"type":{"text":"T | null"}},"parameters":[{"name":"name","type":{"text":"string"}}],"description":"One of this element's own parts, by name, or null where it is not rendered.\n\nNot `part`, which every element already has: `Element.part` is the\n`DOMTokenList` of the names the element itself carries, and a method under\nthat name is a type error on every subclass.\n\n**One guard for every lookup.** Lit's server shim has no `querySelector`\non the render root, so a lookup reached during a server render, from a\ngetter a template reads or from `willUpdate`, throws there and nowhere\nelse. Four spellings of the same guard had grown across the library, and\na fifth site with none. Null on the server, which is what the rest of the\ncode already treats a part that has not rendered as.\n\n**`~=` and not `=`.** A part drawn in a state carries a second name while\nthe state holds, `part=\"page page-current\"`, and an exact match stops\nfinding it for exactly as long as it is the one that matters.\n\n`helix component`'s `selectors` reads these calls the way it reads a\n`querySelector('[part=\"x\"]')`, so a name nothing renders is a finding\nrather than a null an optional chain swallows.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"toggleState","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"name","type":{"text":"string"}},{"name":"on","type":{"text":"boolean"}}],"description":"Records a boolean fact about this element as a custom state.\n\n**The host belongs to whoever rendered it, and a component's own\nbookkeeping may not be kept there.** An attribute written on the first\nupdate is markup a consumer's server never sent, so a React consumer\nhydrates a DOM that has gained attributes since and reports a mismatch it\nwill not patch up. A custom state is not in the DOM at all: it carries the\nfact to a stylesheet through `:state()` and leaves the markup alone, so the\nserver's output and the client's agree by construction.\n\n`SETTLED` carries the long version of that argument; `checked`, `open`,\n`invalid` and `has-label` are recorded the same way, each of them a state a\n`default-*` attribute resolves before React reaches the node.\n\n**Deferring the definitions is not a fix and could not be.** Importing them\nfrom an effect so the upgrades fall the other side of hydration works only\nwhile hydration is one pass: anything that splits it, a streamed segment or\na suspended boundary, puts an upgrade back inside the window. Timing cannot\nbe the guarantee when the fact is kept somewhere React reconciles.\n\nFeature-tested rather than assumed, the way `hostAria` tests element\nreferences. An engine without `CustomStateSet` records nothing and keeps\nwhatever the resting rule draws, which is the safe direction to fail.\n\n**The engines the test is for are browsers**: Safari below 17.4 and Firefox\nbelow 126, where the write is a `TypeError`, so a component bypassing this\nfails to render rather than rendering without whatever the state draws.\nLit's server shim sets `states`, so the guard passes there and records a\nstate nothing reads, which is harmless.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"whenSettled","type":{"text":"Promise<void>"},"readonly":true,"description":"Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.","default":"new Promise<void>((resolve) => { this.resolveSettled = resolve })","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"resolveSettled","type":{"text":"() => void"},"privacy":"private","description":"Resolves `whenSettled`, once, from the frame that records the state.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"fromServer","type":{"text":"boolean"},"privacy":"private","default":"false","description":"Whether the shadow root was a server's, parsed from declarative shadow DOM.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"hydrating","type":{"text":"boolean"},"privacy":"protected","description":"Whether this update is hydrating a server's markup, and so has to render\nexactly what the server rendered.\n\n**Lit hydrates by assuming the markup already shows the first render.** A\nvalue that differs is recorded and never written, so the page keeps the\nserver's, and a template that differs throws. The server has no children,\nso anything a component reads from its children waits for the update after\nhydration, which `finishHydration` asks for. Without a server's markup the\nfirst render reads them and there is one render.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"serverRendered","type":{"text":"boolean"},"privacy":"protected","description":"Whether this element hydrated a server's markup rather than rendering its own.\n\nFor what happened before hydration and cannot be heard after it: an image\nthe parser fetched fires `load` or `error` before any listener exists, so a\ncomponent asks the image instead, once, when this is true.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"finishHydration","privacy":"protected","return":{"type":{"text":"void"}},"description":"Asks for the update a hydration put off, so the reads it skipped happen.\n\nCalled from `firstUpdated`, the end of the hydrating update. The render it\nschedules can only follow that one, which is the exception Lit's\nchange-in-update warning names, and it happens only on a page a server\nrendered.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"childrenKnown","type":{"text":"boolean"},"privacy":"protected","description":"Whether this render can know the children.\n\nA server cannot: its element shim carries attributes and no tree, so\n`children` is undefined there. A render hydrating what a server sent must\nnot, because it has to be the server's render. Anywhere else it can. A\ncomponent whose render depends on its children reads them through\n`knownChildren`, and treats \"not known\" as its own answer rather than as\n\"none\": a list that renders its empty state because nobody has looked yet is\nthe one thing an empty state must never do.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"knownChildren","type":{"text":"Element[]"},"privacy":"protected","description":"The children a render may read: all of them where they are known, and none otherwise.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"assignsByName","type":{"text":"boolean"},"privacy":"protected","description":"Whether this element's slots route by name although it asked to assign them\nby hand.\n\n**A declarative shadow root is always the by-name kind.** HTML has no way to\nask for manual assignment, so a component that assigns by hand and hydrates\na server's root gets one where `slot.assign()` does nothing, and its\nchildren land wherever their `slot` attribute sends them. The way through is\nto write that attribute, which is what `route` does. Only there: on a root\nthis element made, assignment stays manual and the consumer's markup is\nnever touched, which is what a React consumer's hydration requires.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"route","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"child","type":{"text":"Element"}},{"name":"name","type":{"text":"string | undefined"}}],"description":"Sends a child to a slot by name, on a root that routes by name.\n\n`undefined` is the default slot. Written only when it differs, so routing\nthe same child again on every update writes nothing.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"stopInner","privacy":"protected","readonly":true,"description":"Stops an inner control's own announcement at this element's boundary.\n\n**A composed control is one control to a consumer, and the natives had no\nequivalent of the stop the prefixed events already get.** `<helix-select>`\nrenders a `<helix-listbox>`, and both announce: the listbox dispatches\n`input` and `change` from its own host, `input` is composed by\nspecification, and a consumer listening on the select therefore heard one\nchoice twice. Measured before this existed, on the styled tier, one choice\non the inner listbox: select `input` twice and `change` three times,\ncombobox, date input, time input and color input twice each. `Command` was\nthe only one that was right, because it happened to reach for\n`stopImmediatePropagation` for a different reason.\n\nBound on the child in the parent's template, so it runs while the event is\nstill at the child and before it can cross. The guard is for the case where\na component binds this on itself: an element must never stop its own\nannouncement, which is the one it exists to make.\n\nThis is the same job the `helix-before-*` handlers do with their own\n`stopPropagation`, and it is separate rather than folded into them because\na consumer may legitimately refuse a request without the notification ever\nhappening: the two travel at different times and one can be absent.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"relayNativeEvent","privacy":"protected","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}},{"name":"init","optional":true,"type":{"text":"EventInit"}}],"description":"Re-emits a native event from the host, under its own name.\n\nA native event fired by an inner `<input>` or `<textarea>` is not composed,\nso it stops at the shadow boundary and a consumer listening on\n`<helix-input>` hears nothing. Re-dispatching it from the host is what\nmakes the component behave like the control it wraps.\n\nThe relayed event keeps the native name deliberately. `change` is `change`,\nwhich is what a consumer already knows to listen for, and it is what\nreaches React: its synthetic system claims `onChange` and wires it to that\nname, so a prefixed one would never arrive.\n\n`composed` is not forced. It defaults to the original event's own value, so\na relayed `change` stops at the next shadow boundary exactly as a native\none would. Pass it explicitly only where escaping is the intent, and say so\nwhere you do.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"markRules","type":{"text":"readonly string[]"},"privacy":"protected","static":true,"default":"[]","description":"The rules from `mark-rules.ts` for the marks this element writes in its\nown shadow root: `data-scroller`, `data-virtual`, `data-spoken`,\n`data-mirror` and `data-touches`.\n\nA component that writes a mark names its rule here, and a subclass\ninherits the list. One that writes none takes only the three rules every\nshadow root gets, which is what keeps the other four out of a Button.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"observedAttributes","type":{"text":"string[]"},"static":true,"description":"Each attribute Lit observes, and each camelCase property's name in lower\ncase.\n\nReact writes an attribute for a prop on an element that is not defined yet,\nand on a server, and HTML lowers its name. So `defaultPosition={16}` arrives\nas `defaultposition`, which names no property Lit knows, and the value was\ndropped with no error. `attributeChangedCallback` reads the lowered name as\nthe property's own attribute, so either spelling works in either order.","readonly":true,"inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"finalizeStyles","privacy":"protected","static":true,"return":{"type":{"text":"CSSResultOrNative[]"}},"parameters":[{"name":"styles","optional":true,"type":{"text":"CSSResultOrNative | CSSResultOrNative[]"}}],"description":"Prepends the shadow-root reset to every subclass's styles, so no component\nhas to remember to include it, with the rules for the marks it writes.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"method","name":"performUpdate","privacy":"protected","return":{"type":{"text":"void"}},"description":"The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}},{"kind":"field","name":"reactApplied","type":{"text":"boolean | undefined"},"privacy":"private","description":"Whether the first update found React's props, where it looked before the\nrender. See `willUpdate`.","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}}],"events":[{"type":{"text":"HelixBeforeEditEvent"},"description":"Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.","name":"helix-before-edit","reactProp":"onhelix-before-edit"},{"type":{"text":"HelixCaretEvent"},"description":"Fired when the cursor moves, with its line and column.","name":"helix-caret","reactProp":"onhelix-caret"},{"type":{"text":"HelixEditEvent"},"description":"Fired after the source was edited, with the new source.","name":"helix-edit","reactProp":"onhelix-edit"}],"attributes":[{"name":"field-label","type":{"text":"string"},"default":"'Example source'","description":"Accessible name for the editable region.","fieldName":"fieldLabel"},{"name":"language","type":{"text":"'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'mjs' | 'sh' | 'ts' | 'tsx'"},"default":"'html'","description":"The language of the source, which decides how it is highlighted. A name\nthe editor does not read draws the source plain.","fieldName":"language"},{"name":"name","type":{"text":"string"},"default":"'html'","description":"Which source this pane holds, echoed in every change.","fieldName":"name"},{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Whether the text can be changed.\n\n`EditorState.readOnly` rather than removing the editor's focus or its\nkeymap: a reader still needs to select the text, scroll it, and put a\ncursor in it to read a long line. What it stops is the typing.","fieldName":"readOnly"},{"name":"value","type":{"text":"string"},"default":"''","description":"The source being edited.","fieldName":"value"}],"cssStates":[{"description":"While the source differs from the source the editor was given, until `reset()` or a new `value`.","name":"modified"},{"description":"Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.","name":"settled","inheritedFrom":{"name":"HelixElement","module":"src/helix-element/helix-element.ts"}}],"superclass":{"name":"HelixElement","package":"@fusion.dev/helix-core"},"summary":"An editable pane of source, with highlighting and line numbers.","helix":{"category":"tooling","since":"0.1.0","status":"experimental","documentation":"https://fusion.dev/helix/components/sandbox","aliases":["Code editor","Source pane"],"family":"sandbox","tier":"styled","group":"Sandbox","part":"Editor"},"tagName":"helix-sandbox-editor","customElement":true,"modulePath":"src/sandbox/editor/sandbox-editor.ts","definitionPath":"src/sandbox/editor/sandbox-editor.ts"}],"exports":[{"kind":"js","name":"HelixSandboxEditor","declaration":{"name":"HelixSandboxEditor","module":"src/sandbox/editor/sandbox-editor.ts"}},{"kind":"custom-element-definition","name":"helix-sandbox-editor","declaration":{"name":"HelixSandboxEditor","module":"src/sandbox/editor/sandbox-editor.ts"}}]}],"helix":{"package":"@fusion.dev/helix-sandbox","version":"0.225.0"}}

package/dist/index.d.ts

@@ -14,6 +14,6 @@
  * and the editor's class and events as types, which the framework typings
  * import from here. Importing it loads no editor.
  */
-export type { CaretDetail, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, } from '@fusion.dev/helix-core';
+export type { CaretDetail, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, } from '@fusion.dev/helix/sandbox/events';
 export * from './highlight/index.js';
 export type { EditorLanguage, HelixSandboxEditor } from './sandbox/editor/sandbox-editor.js';

package/dist/sandbox/editor/sandbox-editor.d.ts

@@ -1,4 +1,5 @@
-import { type CaretDetail, HelixElement } from '@fusion.dev/helix-core';
+import { type CaretDetail } from '@fusion.dev/helix/sandbox/events';
+import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * A language the editor knows, by the name a file or a sandbox pane carries.

package/dist/sandbox/editor/sandbox-editor.js

@@ -12,7 +12,8 @@ import { json } from '@codemirror/lang-json';
 import { indentUnit, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { Annotation, Compartment, EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers } from '@codemirror/view';
-import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, reportRuntime, words, } from '@fusion.dev/helix-core';
+import { HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, } from '@fusion.dev/helix/sandbox/events';
+import { customElement, HelixElement, reportRuntime, words } from '@fusion.dev/helix-core';
 import { html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { languageOf } from '../../highlight/language.js';

package/lint.json

@@ -1 +1 @@
-{"package":"@fusion.dev/helix-sandbox","tags":{"helix-sandbox-editor":{"attributes":{"field-label":null,"language":["css","html","javascript","js","json","jsx","mjs","sh","ts","tsx"],"name":null,"readonly":null,"value":null},"booleans":["readonly"],"family":"sandbox","hooks":[],"parts":["editor"],"reflected":["readonly"],"slots":[],"written":["readOnly$","read-only$","language$","name$","modified","caret","mount","internals","whenSettled","when-settled","hydrating","serverRendered","server-rendered","childrenKnown","children-known","knownChildren","known-children","assignsByName","assigns-by-name","stopInner","stop-inner"]}},"version":"0.223.1"}
+{"package":"@fusion.dev/helix-sandbox","tags":{"helix-sandbox-editor":{"attributes":{"field-label":null,"language":["css","html","javascript","js","json","jsx","mjs","sh","ts","tsx"],"name":null,"readonly":null,"value":null},"booleans":["readonly"],"family":"sandbox","hooks":[],"parts":["editor"],"reflected":["readonly"],"slots":[],"written":["readOnly$","read-only$","language$","name$","modified","caret","mount","whenSettled","when-settled","hydrating","serverRendered","server-rendered","childrenKnown","children-known","knownChildren","known-children","assignsByName","assigns-by-name","stopInner","stop-inner"]}},"version":"0.225.0"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@fusion.dev/helix-sandbox",
   "description": "A CodeMirror source pane for the Helix sandbox, and a code highlighter for Code Block.",
-  "version": "0.223.1",
+  "version": "0.225.0",
   "license": "MIT",
-  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
+  "author": "Fusion Development Group",
   "repository": {
     "directory": "helix/sandbox",
     "type": "git",
@@ -72,10 +72,10 @@
     "@codemirror/language": "^6.13.1",
     "@codemirror/legacy-modes": "^6.5.5",
     "@codemirror/state": "^6.7.6",
-    "@codemirror/view": "^6.43.14",
-    "@fusion.dev/helix-core": "0.223.1",
-    "@fusion.dev/helix-headless": "0.223.1",
-    "@fusion.dev/helix-styles": "0.223.1",
+    "@codemirror/view": "^6.43.15",
+    "@fusion.dev/helix-core": "0.225.0",
+    "@fusion.dev/helix-headless": "0.225.0",
+    "@fusion.dev/helix-styles": "0.225.0",
     "@lezer/css": "^1.3.9",
     "@lezer/highlight": "^1.2.5",
     "@lezer/html": "^1.3.13",
@@ -83,13 +83,13 @@
     "@lezer/json": "^1.0.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix": "0.223.1",
-    "@fusion.dev/helix-cem": "0.223.1",
-    "@fusion.dev/helix-testing": "0.223.1",
+    "@fusion.dev/helix": "0.225.0",
+    "@fusion.dev/helix-cem": "0.225.0",
+    "@fusion.dev/helix-testing": "0.225.0",
     "@fusion.dev/scripts": "0.0.0-dev",
-    "@happy-dom/global-registrator": "^21.0.1",
+    "@happy-dom/global-registrator": "^21.0.4",
     "@lit-labs/ssr": "^4.1.0",
-    "@types/bun": "^1.4.3",
+    "@types/bun": "^1.4.4",
     "lit": "^3.2.1"
   },
   "homepage": "https://fusion.dev",
@@ -104,7 +104,7 @@
     "web-components"
   ],
   "peerDependencies": {
-    "@fusion.dev/helix": "0.223.1",
+    "@fusion.dev/helix": "0.225.0",
     "lit": "^3.2.1"
   },
   "peerDependenciesMeta": {
@@ -113,6 +113,6 @@
     }
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   }
 }

package/types/jsx.d.ts

@@ -1,9 +1,6 @@
-import type {
-  HelixBeforeEditEvent,
-  HelixCaretEvent,
-  HelixEditEvent,
-  HelixSandboxEditor,
-} from '@fusion.dev/helix-sandbox';
+// Generated by `helix-cem` from this package's manifest. Do not edit.
+
+import type { HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixSandboxEditor } from "@fusion.dev/helix-sandbox";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -21,7 +18,7 @@ import type {
  * }
  * ```
  *
- * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ * @deprecated Runtime scoped elements result in duplicate types and can be confusing for developers.
  */
 export type ScopedElements<
   Prefix extends string = "",
@@ -31,9 +28,9 @@ export type ScopedElements<
 };
 
 /**
- * A generic type for strongly typing custom events with their targets
- * @template T - The type of the event target (extends EventTarget)
- * @template D - The type of the detail payload for the custom event
+ * A generic type for strongly typing events with their targets.
+ * @template T - The type of the event target
+ * @template E - The type of the event
  */
 type TypedEvent<T extends EventTarget, E = Event> = E & {
   target: T;
@@ -53,10 +50,7 @@ type TypedEvent<T extends EventTarget, E = Event> = E & {
  */
 type Framework = "other" | "preact" | "react" | "solid";
 
-/**
- * `ref` as each framework types it, and the generator's shape for the rest,
- * which is Solid's own.
- */
+/** `ref` as each framework types it, and the plain shape for the rest, which is Solid's own. */
 type FrameworkRef<T extends HTMLElement, F extends Framework> = F extends "react"
   ? // @ts-ignore: React's types, read only by React's JSX.
     import('react').Ref<T>
@@ -83,52 +77,50 @@ type BaseProps<T extends HTMLElement, F extends Framework = "other"> = {
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
-  class?: (string) | undefined;
+  class?: string | undefined;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
-  className?: (string) | undefined;
+  className?: string | undefined;
   /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
-  classList?: (Record<string, boolean | undefined>) | undefined;
+  classList?: Record<string, boolean | undefined> | undefined;
   /** Specifies the text direction of the element. */
-  dir?: ("ltr" | "rtl") | undefined;
+  dir?: "ltr" | "rtl" | undefined;
   /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
-  exportparts?: (string) | undefined;
+  exportparts?: string | undefined;
   /** For <label> and <output>, lets you associate the label with some control. */
-  htmlFor?: (string) | undefined;
+  htmlFor?: string | undefined;
   /** Specifies whether the element should be hidden. */
-  hidden?: (boolean | string) | undefined;
+  hidden?: boolean | string | undefined;
   /** A unique identifier for the element. */
-  id?: (string) | undefined;
+  id?: string | undefined;
   /** Keys tell React which array item each component corresponds to */
-  key?: (string | number) | undefined;
+  key?: string | number | undefined;
   /** Specifies the language of the element. */
-  lang?: (string) | undefined;
+  lang?: string | undefined;
   /** Defines the element's semantic role for accessibility APIs. */
-  role?: (string) | undefined;
+  role?: string | undefined;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
-  part?: (string) | undefined;
+  part?: string | undefined;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
-  ref?: (FrameworkRef<T, F>) | undefined;
+  ref?: FrameworkRef<T, F> | undefined;
   /** Adds a reference for a custom element slot */
-  slot?: (string) | undefined;
+  slot?: string | undefined;
   /** Prop for setting inline styles */
-  style?: (FrameworkStyle<F>) | undefined;
+  style?: FrameworkStyle<F> | undefined;
   /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
-  tabIndex?: (number) | undefined;
+  tabIndex?: number | undefined;
   /** Specifies the tooltip text for the element. */
-  title?: (string) | undefined;
+  title?: string | undefined;
   /** Passing 'no' excludes the element content from being translated. */
-  translate?: ("yes" | "no") | undefined;
+  translate?: "yes" | "no" | undefined;
   /** The popover global attribute is used to designate an element as a popover element. */
-  popover?: ("auto" | "hint" | "manual") | undefined;
-  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
-  popovertarget?: (string) | undefined;
+  popover?: "auto" | "hint" | "manual" | undefined;
+  /** Turns an element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: string | undefined;
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
-  popovertargetaction?: ("show" | "hide" | "toggle") | undefined;
+  popovertargetaction?: "show" | "hide" | "toggle" | undefined;
 };
 
 type BaseEvents<T = HTMLElement> = {
-  // Mouse Events
-
   /** Triggered when the element is clicked by the user by mouse or keyboard. */
   onClick?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when the context menu is triggered, often by right-clicking. */
@@ -165,23 +157,14 @@ type BaseEvents<T = HTMLElement> = {
   onMouseOver?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when a mouse button is released on the element. */
   onMouseUp?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
-
-  // Keyboard Events
-
   /** Fired when a key is pressed down. */
   onKeyDown?: ((event: KeyboardEvent & { currentTarget: T }) => void) | undefined;
-  /** Fired when a key is released.. */
+  /** Fired when a key is released. */
   onKeyUp?: ((event: KeyboardEvent & { currentTarget: T }) => void) | undefined;
-
-  // Focus Events
-
   /** Fired when the element receives focus, often triggered by tab navigation. */
   onFocus?: ((event: FocusEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when the element loses focus. */
   onBlur?: ((event: FocusEvent & { currentTarget: T }) => void) | undefined;
-
-  // Form Events
-
   /** Fired when the value of an input element changes, such as with text inputs or select elements. */
   onChange?: ((event: Event & { currentTarget: T }) => void) | undefined;
   /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
@@ -190,40 +173,22 @@ type BaseEvents<T = HTMLElement> = {
   onSubmit?: ((event: Event & { currentTarget: T }) => void) | undefined;
   /** Fired when a form is reset. */
   onReset?: ((event: Event & { currentTarget: T }) => void) | undefined;
-
-  // UI Events
-
   /** Fired when the content of an element is scrolled. */
   onScroll?: ((event: UIEvent & { currentTarget: T }) => void) | undefined;
-
-  // Wheel Events
-
   /** Fired when the mouse wheel is scrolled while the element is focused. */
   onWheel?: ((event: WheelEvent & { currentTarget: T }) => void) | undefined;
-
-  // Animation Events
-
   /** Fired when a CSS animation starts. */
   onAnimationStart?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when a CSS animation completes. */
   onAnimationEnd?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when a CSS animation completes one iteration. */
   onAnimationIteration?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
-
-  // Transition Events
-
   /** Fired when a CSS transition has completed. */
   onTransitionEnd?: ((event: TransitionEvent & { currentTarget: T }) => void) | undefined;
-
-  // Media Events
-
-  /** Fired when an element (usually an image) finishes loading */
+  /** Fired when an element (usually an image) finishes loading. */
   onLoad?: ((event: Event & { currentTarget: T }) => void) | undefined;
   /** Fired when an error occurs during the loading of an element, like an image not being found. */
   onError?: ((event: Event & { currentTarget: T }) => void) | undefined;
-
-  // Clipboard Events
-
   /** Fires when the user initiates a copy action through the browser's user interface. */
   onCopy?: ((event: ClipboardEvent & { currentTarget: T }) => void) | undefined;
   /** Fired when the user has initiated a "cut" action through the browser's user interface. */
@@ -261,49 +226,36 @@ type BaseEvents<T = HTMLElement> = {
 };
 
 /** `HelixSandboxEditor` component event */
-export type HelixSandboxEditorElementEvent<E = Event> = TypedEvent<
-  HelixSandboxEditor,
-  E
->;
+export type HelixSandboxEditorElementEvent<E = Event> = TypedEvent<HelixSandboxEditor, E>;
 /** `helix-before-edit` event type */
-export type HelixSandboxEditorHelixBeforeEditElementEvent =
-  HelixSandboxEditorElementEvent<HelixBeforeEditEvent>;
+export type HelixSandboxEditorHelixBeforeEditElementEvent = HelixSandboxEditorElementEvent<HelixBeforeEditEvent>;
 /** `helix-caret` event type */
-export type HelixSandboxEditorHelixCaretElementEvent =
-  HelixSandboxEditorElementEvent<HelixCaretEvent>;
+export type HelixSandboxEditorHelixCaretElementEvent = HelixSandboxEditorElementEvent<HelixCaretEvent>;
 /** `helix-edit` event type */
-export type HelixSandboxEditorHelixEditElementEvent =
-  HelixSandboxEditorElementEvent<HelixEditEvent>;
+export type HelixSandboxEditorHelixEditElementEvent = HelixSandboxEditorElementEvent<HelixEditEvent>;
 
 export type HelixSandboxEditorProps = {
   /** Accessible name for the editable region. */
-  "field-label"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  "field-label"?: HelixSandboxEditor["fieldLabel"] | undefined;
   /** Accessible name for the editable region. */
-  fieldLabel?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  "fieldLabel"?: HelixSandboxEditor["fieldLabel"] | undefined;
   /** The language of the source, which decides how it is highlighted. A name
 the editor does not read draws the source plain. */
-  language?: (HelixSandboxEditor["language"]) | undefined;
+  "language"?: HelixSandboxEditor["language"] | undefined;
   /** Which source this pane holds, echoed in every change. */
-  name?: (HelixSandboxEditor["name"]) | undefined;
+  "name"?: HelixSandboxEditor["name"] | undefined;
   /** Whether the text can be changed.
 
 `EditorState.readOnly` rather than removing the editor's focus or its
 keymap: a reader still needs to select the text, scroll it, and put a
 cursor in it to read a long line. What it stops is the typing. */
-  readonly?: (HelixSandboxEditor["readOnly"]) | undefined;
-  /** Whether the text can be changed.
-
-`EditorState.readOnly` rather than removing the editor's focus or its
-keymap: a reader still needs to select the text, scroll it, and put a
-cursor in it to read a long line. What it stops is the typing. */
-  readOnly?: (HelixSandboxEditor["readOnly"]) | undefined;
+  "readonly"?: HelixSandboxEditor["readOnly"] | undefined;
+  /** Whether the text can be changed. */
+  "readOnly"?: HelixSandboxEditor["readOnly"] | undefined;
   /** The source being edited. */
-  value?: (HelixSandboxEditor["value"]) | undefined;
-
+  "value"?: HelixSandboxEditor["value"] | undefined;
   /** Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves. */
-  "onhelix-before-edit"?: ((
-    e: HelixSandboxEditorHelixBeforeEditElementEvent,
-  ) => void) | undefined;
+  "onhelix-before-edit"?: ((e: HelixSandboxEditorHelixBeforeEditElementEvent) => void) | undefined;
   /** Fired when the cursor moves, with its line and column. */
   "onhelix-caret"?: ((e: HelixSandboxEditorHelixCaretElementEvent) => void) | undefined;
   /** Fired after the source was edited, with the new source. */
@@ -312,44 +264,33 @@ cursor in it to read a long line. What it stops is the typing. */
 
 export type HelixSandboxEditorSolidJsProps = {
   /** Accessible name for the editable region. */
-  "attr:field-label"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  "attr:field-label"?: HelixSandboxEditor["fieldLabel"] | undefined;
   /** Accessible name for the editable region. */
-  "prop:fieldLabel"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
-  /** The language of the source, which decides how it is highlighted. A name
-the editor does not read draws the source plain. */
-  "prop:language"?: (HelixSandboxEditor["language"]) | undefined;
+  "prop:fieldLabel"?: HelixSandboxEditor["fieldLabel"] | undefined;
+  /** The language of the source, which decides how it is highlighted. A name the editor does not read draws the source plain. */
+  "prop:language"?: HelixSandboxEditor["language"] | undefined;
   /** Which source this pane holds, echoed in every change. */
-  "prop:name"?: (HelixSandboxEditor["name"]) | undefined;
-  /** Whether the text can be changed.
-
-`EditorState.readOnly` rather than removing the editor's focus or its
-keymap: a reader still needs to select the text, scroll it, and put a
-cursor in it to read a long line. What it stops is the typing. */
-  "bool:readonly"?: (HelixSandboxEditor["readOnly"]) | undefined;
-  /** Whether the text can be changed.
-
-`EditorState.readOnly` rather than removing the editor's focus or its
-keymap: a reader still needs to select the text, scroll it, and put a
-cursor in it to read a long line. What it stops is the typing. */
-  "prop:readOnly"?: (HelixSandboxEditor["readOnly"]) | undefined;
+  "prop:name"?: HelixSandboxEditor["name"] | undefined;
+  /** Whether the text can be changed. */
+  "bool:readonly"?: HelixSandboxEditor["readOnly"] | undefined;
+  /** Whether the text can be changed. */
+  "prop:readOnly"?: HelixSandboxEditor["readOnly"] | undefined;
   /** The source being edited. */
-  "prop:value"?: (HelixSandboxEditor["value"]) | undefined;
+  "prop:value"?: HelixSandboxEditor["value"] | undefined;
   /** Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves. */
-  "on:helix-before-edit"?: ((
-    e: HelixSandboxEditorHelixBeforeEditElementEvent,
-  ) => void) | undefined;
+  "on:helix-before-edit"?: ((e: HelixSandboxEditorHelixBeforeEditElementEvent) => void) | undefined;
   /** Fired when the cursor moves, with its line and column. */
   "on:helix-caret"?: ((e: HelixSandboxEditorHelixCaretElementEvent) => void) | undefined;
   /** Fired after the source was edited, with the new source. */
   "on:helix-edit"?: ((e: HelixSandboxEditorHelixEditElementEvent) => void) | undefined;
-
   /** Set the innerHTML of the element */
-  innerHTML?: (string) | undefined;
+  innerHTML?: string | undefined;
   /** Set the textContent of the element */
-  textContent?: (string | number) | undefined;
+  textContent?: string | number | undefined;
 };
 
-export type CustomElements<F extends Framework = "other"> = {
+/** Every tag this package declares, with its class and its props in each spelling. */
+interface Tags {
   /**
    * CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,
    * number its lines, or say where the cursor is, and a status bar reading line
@@ -377,186 +318,51 @@ export type CustomElements<F extends Framework = "other"> = {
    *
    * ## Attributes & Properties
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
    * - `field-label`/`fieldLabel`: Accessible name for the editable region.
-   * - `language`: The language of the source, which decides how it is highlighted. A name
-   * the editor does not read draws the source plain.
+   * - `language`: The language of the source, which decides how it is highlighted. A name the editor does not read draws the source plain.
    * - `name`: Which source this pane holds, echoed in every change.
    * - `readonly`/`readOnly`: Whether the text can be changed.
-   *
-   * `EditorState.readOnly` rather than removing the editor's focus or its
-   * keymap: a reader still needs to select the text, scroll it, and put a
-   * cursor in it to read a long line. What it stops is the typing.
    * - `value`: The source being edited.
-   * - `modified`: Whether the source differs from the source the editor was given: its
-   * first `value`, or the last one set from outside. (property only) (readonly)
-   * - `caret`: Where the cursor is, counted from one, as an editor reports it. (property only) (readonly)
-   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
-   *
-   * **Named `whenSettled` because `settled` is taken four times over**, by
-   * Image, Splitter and both color controls, none of them about transitions. A
-   * base class takes the name every subclass then cannot use.
-   *
-   * **The state it reports cannot be watched, which is why this exists.** A
-   * custom state is deliberately not in the DOM, so there is no
-   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
-   * instead.
-   *
-   * Separate from `updateComplete`, which resolves in the microtask checkpoint
-   * the suppression is still active in. That is the distinction `readyToMove`
-   * in `@fusion.dev/helix-testing` is written around.
-   *
-   * It never resolves where `requestAnimationFrame` never fires, which is a
-   * server, a hidden tab, and happy-dom. Callers that must not hang there race
-   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
-   * browser harness's awaits it alone: a browser always runs the frame, and a
-   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
    *
    * ## Events
    *
-   * Events that will be emitted by the component.
-   *
    * - `helix-before-edit`: Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-caret`: Fired when the cursor moves, with its line and column.
    * - `helix-edit`: Fired after the source was edited, with the new source.
    *
    * ## Methods
    *
-   * Methods that can be called to access component functionality.
-   *
-   * - `reset() => void`: Puts back the source the editor was given, as an edit: `helix-before-edit`
-   * is sent first and can refuse it, and a sandbox passes it to its preview.
+   * - `reset() => void`: Puts back the source the editor was given, as an edit: `helix-before-edit` is sent first and can refuse it, and a sandbox passes it to its preview.
    * - `focus() => void`: Moves focus into the text, not onto the host.
    *
-   * The host is not focusable: what a reader types into is CodeMirror's
-   * contenteditable, several nodes down inside this shadow root. Without this,
-   * `editor.focus()` from outside silently does nothing.
-   *
    * ## CSS Parts
    *
-   * Custom selectors for styling elements within the component.
-   *
    * - `editor`: The element CodeMirror is mounted into.
    *
    * ## CSS States
    *
-   * These can be used to apply styling when a component is in a given state.
-   *
    * - `modified`: While the source differs from the source the editor was given, until `reset()` or a new `value`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
-  "helix-sandbox-editor": Partial<
-    HelixSandboxEditorProps & BaseProps<HelixSandboxEditor, F> & BaseEvents<HelixSandboxEditor>
-  >;
+  "helix-sandbox-editor": { element: HelixSandboxEditor; props: HelixSandboxEditorProps; solid: HelixSandboxEditorSolidJsProps };
+}
+
+export type CustomElements<F extends Framework = "other"> = {
+  [Tag in keyof Tags]: Tags[Tag]["props"] &
+    BaseProps<Tags[Tag]["element"], F> &
+    BaseEvents<Tags[Tag]["element"]>;
 };
 
 export type CustomElementsSolidJs = {
-  /**
-   * CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,
-   * number its lines, or say where the cursor is, and a status bar reading line
-   * and column has to ask something.
-   *
-   * **On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the
-   * package's root exports its class as a type only, because CodeMirror is most
-   * of what the package weighs over the wire. A sandbox with no editable pane
-   * pays for none, and neither does a site that registers its elements once.
-   *
-   * `language` names the grammar by the name a file or a sandbox pane carries:
-   * `css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor
-   * does not read draws the source plain, and the console says so once.
-   *
-   * Each edit a reader makes is `helix-before-edit` first, which you can cancel
-   * to refuse the edit, and `helix-edit` once the source holds it, as
-   * `helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and
-   * sends neither. **The editor is `:state(modified)` while its source differs
-   * from the source it was given**, the first `value` or the last one set from
-   * outside, and `reset()` puts that source back as an edit.
-   *
-   * The view is built once and reconfigured, not rebuilt. Replacing it on every
-   * change would throw away the undo history, the scroll position, and the
-   * selection, which is most of what an editor is.
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `field-label`/`fieldLabel`: Accessible name for the editable region.
-   * - `language`: The language of the source, which decides how it is highlighted. A name
-   * the editor does not read draws the source plain.
-   * - `name`: Which source this pane holds, echoed in every change.
-   * - `readonly`/`readOnly`: Whether the text can be changed.
-   *
-   * `EditorState.readOnly` rather than removing the editor's focus or its
-   * keymap: a reader still needs to select the text, scroll it, and put a
-   * cursor in it to read a long line. What it stops is the typing.
-   * - `value`: The source being edited.
-   * - `modified`: Whether the source differs from the source the editor was given: its
-   * first `value`, or the last one set from outside. (property only) (readonly)
-   * - `caret`: Where the cursor is, counted from one, as an editor reports it. (property only) (readonly)
-   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
-   *
-   * **Named `whenSettled` because `settled` is taken four times over**, by
-   * Image, Splitter and both color controls, none of them about transitions. A
-   * base class takes the name every subclass then cannot use.
-   *
-   * **The state it reports cannot be watched, which is why this exists.** A
-   * custom state is deliberately not in the DOM, so there is no
-   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
-   * instead.
-   *
-   * Separate from `updateComplete`, which resolves in the microtask checkpoint
-   * the suppression is still active in. That is the distinction `readyToMove`
-   * in `@fusion.dev/helix-testing` is written around.
-   *
-   * It never resolves where `requestAnimationFrame` never fires, which is a
-   * server, a hidden tab, and happy-dom. Callers that must not hang there race
-   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
-   * browser harness's awaits it alone: a browser always runs the frame, and a
-   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
-   *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `helix-before-edit`: Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
-   * - `helix-caret`: Fired when the cursor moves, with its line and column.
-   * - `helix-edit`: Fired after the source was edited, with the new source.
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `reset() => void`: Puts back the source the editor was given, as an edit: `helix-before-edit`
-   * is sent first and can refuse it, and a sandbox passes it to its preview.
-   * - `focus() => void`: Moves focus into the text, not onto the host.
-   *
-   * The host is not focusable: what a reader types into is CodeMirror's
-   * contenteditable, several nodes down inside this shadow root. Without this,
-   * `editor.focus()` from outside silently does nothing.
-   *
-   * ## CSS Parts
-   *
-   * Custom selectors for styling elements within the component.
-   *
-   * - `editor`: The element CodeMirror is mounted into.
-   *
-   * ## CSS States
-   *
-   * These can be used to apply styling when a component is in a given state.
-   *
-   * - `modified`: While the source differs from the source the editor was given, until `reset()` or a new `value`.
-   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
-   */
-  "helix-sandbox-editor": Partial<
-    HelixSandboxEditorProps &
-      HelixSandboxEditorSolidJsProps &
-      BaseProps<HelixSandboxEditor, "solid"> &
-      BaseEvents<HelixSandboxEditor>
-  >;
+  [Tag in keyof Tags]: Tags[Tag]["props"] &
+    Tags[Tag]["solid"] &
+    BaseProps<Tags[Tag]["element"], "solid"> &
+    BaseEvents<Tags[Tag]["element"]>;
 };
 
-export type CustomCssProperties = {};
+export type CustomCssProperties = {
+
+};
 
 declare module "react" {
   namespace JSX {

package/types/svelte.d.ts

@@ -1,4 +1,4 @@
-// Generated by `helix-svelte-types`. Do not edit.
+// Generated by `helix-cem` from this package's manifest. Do not edit.
 //
 // Svelte binds a handler as `onhelix-input={…}`, which is the shape the JSX
 // types already describe, so this augments `SvelteHTMLElements` with them

package/types/vue.d.ts

@@ -1,16 +1,13 @@
-import type {
-  HelixSandboxEditor,
-  HelixBeforeEditEvent,
-  HelixCaretEvent,
-  HelixEditEvent,
-} from "@fusion.dev/helix-sandbox";
+// Generated by `helix-cem` from this package's manifest. Do not edit.
+
+import type { HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixSandboxEditor } from "@fusion.dev/helix-sandbox";
+
 import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
 
-/** This file was autogenerated by @wc-toolkit/vuejs-types */
 /**
- * A generic type for strongly typing custom events with their targets
- * @template T - The type of the event target (extends EventTarget)
- * @template D - The type of the detail payload for the custom event
+ * A generic type for strongly typing events with their targets.
+ * @template T - The type of the event target
+ * @template E - The type of the event
  */
 type TypedEvent<T extends EventTarget, E = Event> = E & {
   target: T;
@@ -44,44 +41,34 @@ export type DefineCustomElement<
 };
 
 /** `HelixSandboxEditor` component event */
-export type HelixSandboxEditorElementEvent<E = Event> = TypedEvent<
-  HelixSandboxEditor,
-  E
->;
+export type HelixSandboxEditorElementEvent<E = Event> = TypedEvent<HelixSandboxEditor, E>;
 /** `helix-before-edit` event type */
-export type HelixSandboxEditorHelixBeforeEditElementEvent =
-  HelixSandboxEditorElementEvent<HelixBeforeEditEvent>;
+export type HelixSandboxEditorHelixBeforeEditElementEvent = HelixSandboxEditorElementEvent<HelixBeforeEditEvent>;
 /** `helix-caret` event type */
-export type HelixSandboxEditorHelixCaretElementEvent =
-  HelixSandboxEditorElementEvent<HelixCaretEvent>;
+export type HelixSandboxEditorHelixCaretElementEvent = HelixSandboxEditorElementEvent<HelixCaretEvent>;
 /** `helix-edit` event type */
-export type HelixSandboxEditorHelixEditElementEvent =
-  HelixSandboxEditorElementEvent<HelixEditEvent>;
+export type HelixSandboxEditorHelixEditElementEvent = HelixSandboxEditorElementEvent<HelixEditEvent>;
 
 export type HelixSandboxEditorVueProps = {
   /** Accessible name for the editable region. */
-  "field-label"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  "field-label"?: HelixSandboxEditor["fieldLabel"] | undefined;
   /** Accessible name for the editable region. */
-  fieldLabel?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  "fieldLabel"?: HelixSandboxEditor["fieldLabel"] | undefined;
   /** The language of the source, which decides how it is highlighted. A name
 the editor does not read draws the source plain. */
-  language?: (HelixSandboxEditor["language"]) | undefined;
+  "language"?: HelixSandboxEditor["language"] | undefined;
   /** Which source this pane holds, echoed in every change. */
-  name?: (HelixSandboxEditor["name"]) | undefined;
+  "name"?: HelixSandboxEditor["name"] | undefined;
   /** Whether the text can be changed.
 
 `EditorState.readOnly` rather than removing the editor's focus or its
 keymap: a reader still needs to select the text, scroll it, and put a
 cursor in it to read a long line. What it stops is the typing. */
-  readonly?: (HelixSandboxEditor["readOnly"]) | undefined;
-  /** Whether the text can be changed.
-
-`EditorState.readOnly` rather than removing the editor's focus or its
-keymap: a reader still needs to select the text, scroll it, and put a
-cursor in it to read a long line. What it stops is the typing. */
-  readOnly?: (HelixSandboxEditor["readOnly"]) | undefined;
+  "readonly"?: HelixSandboxEditor["readOnly"] | undefined;
+  /** Whether the text can be changed. */
+  "readOnly"?: HelixSandboxEditor["readOnly"] | undefined;
   /** The source being edited. */
-  value?: (HelixSandboxEditor["value"]) | undefined;
+  "value"?: HelixSandboxEditor["value"] | undefined;
 };
 
 export type HelixSandboxEditorVueEvents = {
@@ -93,41 +80,63 @@ export type HelixSandboxEditorVueEvents = {
   "helix-edit": HelixSandboxEditorHelixEditElementEvent;
 };
 
-export type CustomCssProperties = {};
+export type CustomCssProperties = {
+
+};
 
 // Vue SFC template type-checking (GlobalComponents) for non-Vue custom elements.
-// Note: Some tooling expects this augmentation under "@vue/runtime-core", while
-// other docs/examples use "vue". We emit both for compatibility.
-export interface WcToolkitVueGlobalComponents {
-  /** CodeMirror, not a '<textarea>'. A textarea cannot highlight what it holds, number its lines, or say where the cursor is, and a status bar reading line and column has to ask something.  **On its own path.** This is '@fusion.dev/helix-sandbox/editor', and the package's root exports its class as a type only, because CodeMirror is most of what the package weighs over the wire. A sandbox with no editable pane pays for none, and neither does a site that registers its elements once.  'language' names the grammar by the name a file or a sandbox pane carries: 'css', 'html', 'js', 'jsx', 'mjs', 'sh', 'ts' or 'tsx'. A name the editor does not read draws the source plain, and the console says so once.  Each edit a reader makes is 'helix-before-edit' first, which you can cancel to refuse the edit, and 'helix-edit' once the source holds it, as 'helix-sandbox-source' sends them. A 'value' set from outside is the source the editor is given, and sends neither. **The editor is ':state(modified)' while its source differs from the source it was given**, the first 'value' or the last one set from outside, and 'reset()' puts that source back as an edit.  The view is built once and reconfigured, not rebuilt. Replacing it on every change would throw away the undo history, the scroll position, and the selection, which is most of what an editor is. */
-  "helix-sandbox-editor": DefineCustomElement<
-    HelixSandboxEditor,
-    HelixSandboxEditorVueProps,
-    HelixSandboxEditorVueEvents
-  >;
+// Some tooling expects this augmentation under "@vue/runtime-core", while other
+// docs and examples use "vue", so it is written under both.
+export interface HelixVueGlobalComponents {
+  /**
+   * CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,
+   * number its lines, or say where the cursor is, and a status bar reading line
+   * and column has to ask something.
+   *
+   * **On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the
+   * package's root exports its class as a type only, because CodeMirror is most
+   * of what the package weighs over the wire. A sandbox with no editable pane
+   * pays for none, and neither does a site that registers its elements once.
+   *
+   * `language` names the grammar by the name a file or a sandbox pane carries:
+   * `css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor
+   * does not read draws the source plain, and the console says so once.
+   *
+   * Each edit a reader makes is `helix-before-edit` first, which you can cancel
+   * to refuse the edit, and `helix-edit` once the source holds it, as
+   * `helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and
+   * sends neither. **The editor is `:state(modified)` while its source differs
+   * from the source it was given**, the first `value` or the last one set from
+   * outside, and `reset()` puts that source back as an edit.
+   *
+   * The view is built once and reconfigured, not rebuilt. Replacing it on every
+   * change would throw away the undo history, the scroll position, and the
+   * selection, which is most of what an editor is.
+   */
+  "helix-sandbox-editor": DefineCustomElement<HelixSandboxEditor, HelixSandboxEditorVueProps, HelixSandboxEditorVueEvents>;
 }
 
 declare module "@vue/runtime-core" {
-  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+  interface GlobalComponents extends HelixVueGlobalComponents {}
 }
 
 declare module "@vue/runtime-dom" {
-  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+  interface GlobalComponents extends HelixVueGlobalComponents {}
 
   // Needed for named slots on native elements when using Web Components.
   // Vue templates otherwise reject: <span slot="icon" />
   interface HTMLAttributes {
-    slot?: (string) | undefined;
+    slot?: string | undefined;
   }
 }
 
 declare module "vue" {
-  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+  interface GlobalComponents extends HelixVueGlobalComponents {}
 
   // Some package managers (notably pnpm) may not make "@vue/runtime-dom" directly
   // resolvable from the consuming project, so we also augment via "vue".
   interface HTMLAttributes {
-    slot?: (string) | undefined;
+    slot?: string | undefined;
   }
 
   interface CSSProperties extends CustomCssProperties {}

package/types/words.d.ts

@@ -1,4 +1,4 @@
-// Generated by `helix-words-types` from this package manifest. Do not edit.
+// Generated by `helix-cem` from this package's manifest. Do not edit.
 //
 // `registerWords`, and the words each family lets you register with it, keyed
 // by the family tag. Import it from here, which types your calls: