@jimka/typescript-ui 0.1.0

package/dist/lib/component/editor.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.es.js","names":[],"sources":["../../../src/typescript/lib/component/editor/LanguageRegistry.ts","../../../src/typescript/lib/component/editor/formatters/prettier.ts","../../../src/typescript/lib/component/editor/formatters/sql.ts","../../../src/typescript/lib/component/editor/languages.ts","../../../src/typescript/lib/component/editor/theme.ts","../../../src/typescript/lib/component/editor/CodeEditor.ts","../../../src/typescript/lib/component/editor/markdownTransformers.ts","../../../src/typescript/lib/component/editor/editorNodes.ts","../../../src/typescript/lib/component/editor/editorTheme.ts","../../../src/typescript/lib/component/editor/MarkdownEditor.ts"],"sourcesContent":["// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport type { Extension } from \"@codemirror/state\";\n\n/**\n * Formats `source`, returning the formatted text and a cursor offset mapped\n * (or clamped) into the new document. May return synchronously or via a\n * `Promise` — `CodeEditor.format()` awaits either.\n *\n * @param source - The document text to format.\n * @param cursorOffset - The cursor's current offset into `source`.\n * @returns The formatted text and the mapped/clamped cursor offset.\n */\nexport type Formatter = (\n    source: string,\n    cursorOffset: number,\n) =>\n    | Promise<{ formatted: string; cursorOffset: number }>\n    | { formatted: string; cursorOffset: number };\n\n/**\n * Describes one language {@link CodeEditor} can be configured with: its\n * grammar (a lazily-loaded CodeMirror `Extension`) and, optionally, its\n * formatter.\n *\n * @category Components\n */\nexport interface LanguageDefinition {\n    /** The registry key passed to `CodeEditor.setLanguage` / the `language` option. */\n    id: string;\n    /** Human-readable name, for a consumer building a language picker. */\n    label?: string;\n    /** Dynamically imports and builds the CodeMirror grammar extension. */\n    loadExtension: () => Promise<Extension>;\n    /** Dynamically imports and builds this language's formatter, when one exists. */\n    loadFormatter?: () => Promise<Formatter>;\n}\n\n/** Module-level registry, keyed by {@link LanguageDefinition.id}. */\nconst _registry = new Map<string, LanguageDefinition>();\n\n/**\n * Registers a language definition, replacing any prior registration under the\n * same {@link LanguageDefinition.id}.\n *\n * @param def - The language definition to register.\n */\nexport function registerLanguage(def: LanguageDefinition): void {\n    _registry.set(def.id, def);\n}\n\n/**\n * Looks up a registered language definition by id.\n *\n * @param id - The language id.\n * @returns The definition, or `undefined` when no language is registered\n *   under that id.\n */\nexport function getLanguage(id: string): LanguageDefinition | undefined {\n    return _registry.get(id);\n}\n\n/**\n * Lists every currently registered language definition.\n *\n * @returns A read-only snapshot of the registered definitions.\n */\nexport function listLanguages(): readonly LanguageDefinition[] {\n    return Array.from(_registry.values());\n}\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport type { Plugin } from \"prettier\";\nimport type { Formatter } from \"~/component/editor/LanguageRegistry.js\";\n\n/**\n * Builds a Prettier-backed {@link Formatter} for a given parser id.\n *\n * The returned closure dynamically imports `prettier/standalone` and the\n * caller-supplied plugin set on first invocation, so the (large) Prettier\n * standalone bundle only ever loads behind a `format()` call, never as part\n * of the base editor chunk. This adapter is shared by every Prettier-backed\n * language entry in `languages.ts` — each supplies its own parser id and\n * plugin loader (`babel-ts` + the babel/estree plugins for JS/TS, `json` for\n * JSON, `html` for HTML, `markdown` for Markdown).\n *\n * @param parser - The Prettier parser id (e.g. `\"babel-ts\"`, `\"json\"`).\n * @param loadPlugins - Dynamically imports the Prettier plugin modules the\n *   parser needs.\n * @returns A {@link Formatter} that formats through Prettier's\n *   `formatWithCursor`, which maps the cursor offset through the reformat.\n */\nexport function formatWithPrettier(\n    parser: string,\n    loadPlugins: () => Promise<Plugin[]>,\n): Formatter {\n    return async (source: string, cursorOffset: number) => {\n        const [{ formatWithCursor }, plugins] = await Promise.all([\n            import(\"prettier/standalone\"),\n            loadPlugins(),\n        ]);\n\n        return formatWithCursor(source, { parser, plugins, cursorOffset });\n    };\n}\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport type { Formatter } from \"~/component/editor/LanguageRegistry.js\";\n\n/**\n * SQL formatter adapter backed by `sql-formatter`, dynamically imported on\n * first call so it never lands in the base editor chunk.\n *\n * Unlike Prettier's `formatWithCursor`, `sql-formatter` has no cursor-mapping\n * API, so the old cursor offset is clamped to the formatted document's length\n * rather than mapped to its logically-equivalent position.\n */\nexport const formatWithSql: Formatter = async (source: string, cursorOffset: number) => {\n    const { format } = await import(\"sql-formatter\");\n    const formatted = format(source);\n\n    return { formatted, cursorOffset: Math.min(cursorOffset, formatted.length) };\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\n// Registers the five built-in language definitions as a side effect of\n// importing this module (from the barrel `index.ts`). Every grammar and\n// formatter loader is a dynamic `import()`, so — because the CodeMirror\n// language packages and Prettier/sql-formatter are `external` in the lib\n// build — none of them reach the base editor chunk; each loads only when a\n// consumer actually selects that language or calls `format()`.\n\nimport { registerLanguage } from \"~/component/editor/LanguageRegistry.js\";\nimport { formatWithPrettier } from \"~/component/editor/formatters/prettier.js\";\nimport { formatWithSql } from \"~/component/editor/formatters/sql.js\";\n\n/** Loads the babel + estree plugins Prettier's `babel-ts` and `json` parsers need. */\nasync function loadBabelPlugins() {\n    const [babel, estree] = await Promise.all([\n        import(\"prettier/plugins/babel\"),\n        import(\"prettier/plugins/estree\"),\n    ]);\n\n    return [babel, estree];\n}\n\nregisterLanguage({\n    id: \"javascript\",\n    label: \"JavaScript / TypeScript\",\n    loadExtension: async () => {\n        const { javascript } = await import(\"@codemirror/lang-javascript\");\n\n        return javascript({ typescript: true });\n    },\n    loadFormatter: async () => formatWithPrettier(\"babel-ts\", loadBabelPlugins),\n});\n\nregisterLanguage({\n    id: \"json\",\n    label: \"JSON\",\n    loadExtension: async () => {\n        const { json } = await import(\"@codemirror/lang-json\");\n\n        return json();\n    },\n    loadFormatter: async () => formatWithPrettier(\"json\", loadBabelPlugins),\n});\n\nregisterLanguage({\n    id: \"html\",\n    label: \"HTML\",\n    loadExtension: async () => {\n        const { html } = await import(\"@codemirror/lang-html\");\n\n        return html();\n    },\n    loadFormatter: async () => formatWithPrettier(\"html\", async () => [await import(\"prettier/plugins/html\")]),\n});\n\nregisterLanguage({\n    id: \"sql\",\n    label: \"SQL\",\n    loadExtension: async () => {\n        const { sql } = await import(\"@codemirror/lang-sql\");\n\n        return sql();\n    },\n    loadFormatter: async () => formatWithSql,\n});\n\nregisterLanguage({\n    id: \"markdown\",\n    label: \"Markdown\",\n    loadExtension: async () => {\n        const { markdown } = await import(\"@codemirror/lang-markdown\");\n\n        return markdown();\n    },\n    loadFormatter: async () => formatWithPrettier(\"markdown\", async () => [await import(\"prettier/plugins/markdown\")]),\n});\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { EditorView } from \"@codemirror/view\";\nimport { HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags } from \"@lezer/highlight\";\nimport type { Extension } from \"@codemirror/state\";\n\n// The syntax palette has no dedicated project theme tokens (the framework\n// defines chrome/surface/accent tokens, not a per-token-kind syntax scheme),\n// so it is a fixed, IDE-conventional colour set chosen for light/dark\n// legibility rather than derived from CSS variables — mirroring how\n// `Markdown`'s code-block wash is a neutral constant rather than a token.\nconst SYNTAX_KEYWORD  = \"#2563eb\"; // matches the framework's single accent hue\nconst SYNTAX_STRING   = \"#16a34a\"; // green — conventional \"string\" colour\nconst SYNTAX_COMMENT  = \"#6b7280\"; // muted grey — de-emphasises comments\nconst SYNTAX_LITERAL  = \"#d97706\"; // amber — numbers/booleans/null\nconst SYNTAX_FUNCTION = \"#7c3aed\"; // violet — function/variable definitions\nconst SYNTAX_TYPE     = \"#0891b2\"; // teal — type names\nconst SYNTAX_PROPERTY = \"#be185d\"; // pink — object/attribute property names\n\n/**\n * Builds the editor's theme extension: the chrome (background, gutters,\n * cursor, selection) via `EditorView.theme`, plus syntax-highlighting colours\n * via a `HighlightStyle`.\n *\n * The chrome reads the project's CSS custom-property tokens directly\n * (`--ts-ui-input-bg`, `--ts-ui-text-color`, `--ts-ui-font-mono`,\n * `--ts-ui-border-color`, `--ts-ui-indicator-focus`,\n * `--ts-ui-indicator-selection`), each with a light/dark-safe fallback, so a\n * `ThemeManager.setTheme` toggle recolours the editor with no rebuild — only\n * the underlying CSS variables change.\n *\n * @param dark - Whether the dark theme flag (`--ts-ui-color-scheme: dark`) is\n *   currently active, forwarded to `EditorView.theme`'s `dark` option so\n *   CodeMirror's own dark-mode heuristics (default scrollbar styling, base\n *   theme selection) agree with the project's active theme.\n * @returns The combined chrome + syntax-highlighting extension.\n */\nexport function codeEditorTheme(dark: boolean): Extension {\n    const chrome = EditorView.theme({\n        \"&\": {\n            height:          \"100%\",\n            color:           \"var(--ts-ui-text-color, #1a1a1a)\",\n            backgroundColor: \"var(--ts-ui-input-bg, #ffffff)\",\n        },\n        \".cm-content\": {\n            fontFamily: \"var(--ts-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)\",\n            caretColor: \"var(--ts-ui-indicator-focus, #2563eb)\",\n            cursor:     \"text\",\n        },\n        \".cm-gutters\": {\n            color:           \"var(--ts-ui-text-color, #1a1a1a)\",\n            backgroundColor: \"var(--ts-ui-input-bg, #ffffff)\",\n            borderRight:     \"1px solid var(--ts-ui-border-color, rgba(127, 127, 127, 0.4))\",\n        },\n        \"&.cm-focused .cm-cursor\": {\n            borderLeftColor: \"var(--ts-ui-indicator-focus, #2563eb)\",\n        },\n        \"&.cm-focused .cm-selectionBackground, .cm-selectionBackground\": {\n            backgroundColor: \"var(--ts-ui-indicator-selection, rgba(37, 99, 235, 0.25))\",\n        },\n        \".cm-activeLine, .cm-activeLineGutter\": {\n            backgroundColor: \"rgba(127, 127, 127, 0.08)\",\n        },\n    }, { dark });\n\n    const highlight = syntaxHighlighting(HighlightStyle.define([\n        { tag: tags.keyword,                                                    color: SYNTAX_KEYWORD },\n        { tag: [tags.string, tags.special(tags.string)],                        color: SYNTAX_STRING },\n        { tag: tags.comment,                                                    color: SYNTAX_COMMENT, fontStyle: \"italic\" },\n        { tag: [tags.number, tags.bool, tags.null],                             color: SYNTAX_LITERAL },\n        { tag: [tags.definition(tags.variableName), tags.function(tags.variableName)], color: SYNTAX_FUNCTION },\n        { tag: tags.typeName,                                                   color: SYNTAX_TYPE },\n        { tag: [tags.propertyName, tags.attributeName],                        color: SYNTAX_PROPERTY },\n        { tag: tags.tagName,                                                    color: SYNTAX_KEYWORD },\n        // Markdown constructs (the `markdown` language, e.g. the MarkdownEditor\n        // source surface). The parser tags these; without a style here they\n        // would render as plain text. Headings/links reuse the accent hue; bold\n        // and italic carry weight/slant rather than colour so prose stays\n        // readable; the markup marks (`#`, `**`, `` ` ``, `>`, `-`) and quotes\n        // are muted so the content reads over the syntax.\n        { tag: [tags.heading, tags.heading1, tags.heading2, tags.heading3,\n                tags.heading4, tags.heading5, tags.heading6],                   color: SYNTAX_KEYWORD, fontWeight: \"bold\" },\n        { tag: tags.strong,                                                     fontWeight: \"bold\" },\n        { tag: tags.emphasis,                                                   fontStyle: \"italic\" },\n        { tag: tags.monospace,                                                  color: SYNTAX_STRING },\n        { tag: [tags.link, tags.url],                                           color: SYNTAX_KEYWORD, textDecoration: \"underline\" },\n        { tag: [tags.quote, tags.contentSeparator],                             color: SYNTAX_COMMENT },\n        { tag: tags.processingInstruction,                                      color: SYNTAX_COMMENT },\n    ]));\n\n    return [chrome, highlight];\n}\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Animation } from \"~/core/Animation.js\";\nimport { Component, ComponentOptions } from \"~/core/Component.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport type { Handle } from \"~/core/DOM.js\";\nimport { Event } from \"~/core/Event.js\";\nimport { ListenerBag } from \"~/core/ListenerBag.js\";\nimport { consumeWheel } from \"~/core/SmoothScroller.js\";\nimport { ThemeManager } from \"~/core/Theme.js\";\nimport { callable } from \"~/core/Callable.js\";\nimport { EditorView, keymap, drawSelection, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from \"@codemirror/view\";\nimport { EditorState, Compartment } from \"@codemirror/state\";\nimport type { Extension } from \"@codemirror/state\";\nimport { history, defaultKeymap, historyKeymap } from \"@codemirror/commands\";\nimport { indentOnInput, bracketMatching, indentRange } from \"@codemirror/language\";\nimport { getLanguage } from \"~/component/editor/LanguageRegistry.js\";\nimport { codeEditorTheme } from \"~/component/editor/theme.js\";\n\n/**\n * Payload of {@link CodeEditor}'s `\"change\"` event: the document text after\n * the edit that triggered it.\n *\n * @category Components\n */\nexport interface CodeEditorChange {\n    value: string;\n}\n\n/**\n * The events {@link CodeEditor} exposes through its custom `on` / `off` surface:\n *\n * - `\"change\"` — the document text changed (payload {@link CodeEditorChange}).\n * - `\"readonlyedit\"` — a user edit was rejected because the editor is read-only\n *   (no payload); see {@link CodeEditor.on}.\n */\ntype CodeEditorEvent = \"change\" | \"readonlyedit\";\n\n/**\n * Construction-time options for {@link CodeEditor}.\n *\n * @category Components\n */\nexport interface CodeEditorOptions extends ComponentOptions {\n    /** Initial document text (also accepted as the positional first argument). */\n    value?: string;\n    /** Registered language id (e.g. `\"javascript\"`, `\"json\"`, `\"sql\"`). Unset renders plain text. */\n    language?: string;\n    /** Whether the editor rejects edits. Default `false`. */\n    readOnly?: boolean;\n    /** Construction-time listener bag; the events are `\"change\"` and `\"readonlyedit\"`. */\n    listeners?: { change?: (payload: CodeEditorChange) => void; readonlyedit?: () => void };\n}\n\n/** Duration of the read-only rejection flash, in milliseconds. */\nconst READONLY_FLASH_MS = 300;\n\n/** Peak opacity of the read-only rejection wash — a subtle tint that keeps the text readable. */\nconst READONLY_FLASH_PEAK_OPACITY = 0.16;\n\n/**\n * Fill of the read-only rejection wash: the project's validation-error token,\n * with a light/dark-safe fallback, so the tint follows a `ThemeManager.setTheme`\n * toggle with no rebuild (the CSS variable resolves live).\n */\nconst READONLY_FLASH_COLOR = \"var(--ts-ui-validation-error-border, #dc2626)\";\n\n/**\n * Builds the readOnly-state extension: `EditorState.readOnly` blocks every\n * edit (including programmatic ones) while leaving the content DOM editable, so\n * the caret, cursor navigation, and text selection / copy all keep working —\n * the standard read-only experience. (`EditorView.editable.of(false)` would\n * additionally strip selection by making CodeMirror stop managing a caret in\n * the content, so it is deliberately *not* used here.)\n *\n * @param readOnly - Whether the editor should reject edits.\n * @returns The extension for the readOnly compartment.\n */\nfunction buildReadOnlyExtension(readOnly: boolean): Extension {\n    return EditorState.readOnly.of(readOnly);\n}\n\n/**\n * A syntax-highlighting, formatting code editor wrapping CodeMirror 6.\n *\n * @remarks\n * `CodeEditor` deliberately omits IntelliSense (no autocomplete, no lint, no\n * language service) — its scope is highlighting plus one-command formatting.\n * CodeMirror's `EditorView` is a *foreign live widget*: it takes a real parent\n * element and mutates a whole DOM region it owns directly, exactly like the\n * `CanvasRenderingContext2D` a [`Canvas`](/api/component/display/classes/Canvas)\n * obtains from the seam. So `CodeEditor` is **live-only** — under the modelled\n * test sink it mounts nothing, and every editor operation guards on a `null`\n * view, matching `Canvas` / `WebGLCanvas`.\n *\n * The editor mounts once, in the component's first connected + sized layout\n * (`onFirstLayout`) — CodeMirror needs a real, sized parent to measure its\n * internal scroller correctly. It fills the assigned box and scrolls\n * internally; give it a sized host (a `Fit` panel or an explicit\n * `preferredSize`), the same as `Canvas`.\n *\n * Highlighting grammars and formatters load lazily, per language, through the\n * registry in `LanguageRegistry.ts` (`registerLanguage` / `getLanguage` /\n * `listLanguages`) — see that module and `languages.ts` for the five built-in\n * languages (JavaScript/TypeScript, JSON, HTML, SQL, Markdown).\n *\n * @example\n * ```typescript\n * import { CodeEditor } from '@jimka/typescript-ui/component/editor';\n *\n * const editor = new CodeEditor('const x = 1;', { language: 'javascript' });\n * panel.addComponent(editor);\n * await editor.format();\n * ```\n *\n * @category Components\n */\nclass CodeEditor extends Component<CodeEditorOptions> {\n\n    /** The live CodeMirror view; `null` until mounted (or forever, offline). */\n    private _view: EditorView | null = null;\n\n    /** Overlay flashed on a rejected read-only edit; `null` until mounted (or forever, offline). */\n    private _flashOverlay: Handle | null = null;\n\n    /** Reconfigured by {@link CodeEditor.setLanguage} to swap the active grammar. */\n    private readonly _langCompartment: Compartment = new Compartment();\n\n    /** Reconfigured by {@link CodeEditor.setReadOnly}. */\n    private readonly _readOnlyCompartment: Compartment = new Compartment();\n\n    /** Reconfigured on a theme change to recolour the editor. */\n    private readonly _themeCompartment: Compartment = new Compartment();\n\n    /** Custom-event fan-out for `\"change\"`. */\n    private readonly _listeners: ListenerBag<CodeEditorEvent> = new ListenerBag<CodeEditorEvent>();\n\n    /** Handle to detach the {@link ThemeManager.onThemeChange} listener on {@link CodeEditor.dispose}. */\n    private readonly _unsubscribeTheme: () => void;\n\n    /**\n     * Stable reference for the subtree wheel-claim listener's add (in\n     * {@link CodeEditor.mount}) and remove (in {@link CodeEditor.dispose}); see\n     * {@link CodeEditor.claimScrollableWheel}.\n     */\n    private readonly _onWheelClaim: (e: WheelEvent) => void = (e) => this.claimScrollableWheel(e);\n\n    /**\n     * Constructs a code editor.\n     *\n     * @param value - Initial document text (optional; defaults to \"\").\n     * @param options - Optional construction options.\n     */\n    constructor(value?: string, options?: CodeEditorOptions) {\n        super(options);\n\n        // Positional argument: cache it only when the caller didn't also pass\n        // `options.value` (which the super-time cascade already stored).\n        if (value !== undefined && this._options.value === undefined) {\n            this._options.value = value;\n        }\n\n        this._unsubscribeTheme = ThemeManager.onThemeChange(() => this.onThemeChange());\n\n        this.applyListeners(options?.listeners);\n\n        this.onFirstLayout(() => this.mount());\n    }\n\n    /**\n     * Caches the `value` / `language` / `readOnly` fields onto `_options` after\n     * inherited Component fields cascade through `super.applyOptions`. No view\n     * exists yet at this point (the editor mounts later, in `onFirstLayout`), so\n     * these are pure caches, applied to the freshly-created `EditorState` and\n     * compartments in `mount()`.\n     *\n     * @param options - The options bag carrying the values to apply.\n     * @returns This component, for method chaining.\n     */\n    protected applyOptions(options: CodeEditorOptions): this {\n        super.applyOptions(options);\n\n        if (options.value    !== undefined) this._options.value    = options.value;\n        if (options.language !== undefined) this._options.language = options.language;\n        if (options.readOnly !== undefined) this._options.readOnly = options.readOnly;\n\n        return this;\n    }\n\n    /**\n     * Returns the current document text: read live from the view when mounted,\n     * else the cached pre-mount / offline value.\n     *\n     * @returns The document text, or `\"\"` when unset.\n     */\n    getValue(): string {\n        if (this._view) {\n            return this._view.state.doc.toString();\n        }\n\n        return this._options.value ?? \"\";\n    }\n\n    /**\n     * Replaces the whole document. Caches the value; when a view is mounted,\n     * also dispatches a full-document replace transaction.\n     *\n     * @param value - The new document text.\n     * @returns This component, for method chaining.\n     */\n    setValue(value: string): this {\n        this._options.value = value;\n\n        if (this._view) {\n            this._view.dispatch({\n                changes: { from: 0, to: this._view.state.doc.length, insert: value },\n            });\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns the active language id.\n     *\n     * @returns The registered language id, or `null` when unset.\n     */\n    getLanguage(): string | null {\n        return this._options.language ?? null;\n    }\n\n    /**\n     * Sets (or clears) the active language. Caches the id; when a view is\n     * mounted and the id names a registered language, kicks off the grammar's\n     * lazy `loadExtension()` and reconfigures the grammar compartment once it\n     * resolves — guarded against a stale resolution by re-checking the active\n     * language id, so a rapid double-swap applies only the latest.\n     *\n     * @param id - A registered language id, or `null` to clear highlighting.\n     * @returns This component, for method chaining.\n     */\n    setLanguage(id: string | null): this {\n        this._options.language = id ?? undefined;\n\n        if (!this._view) {\n            return this;\n        }\n\n        if (!id) {\n            this._view.dispatch({ effects: this._langCompartment.reconfigure([]) });\n\n            return this;\n        }\n\n        const def = getLanguage(id);\n\n        if (!def) {\n            return this;\n        }\n\n        void def.loadExtension().then((extension) => {\n            if (this._view && this.getLanguage() === id) {\n                this._view.dispatch({ effects: this._langCompartment.reconfigure(extension) });\n            }\n        });\n\n        return this;\n    }\n\n    /**\n     * Returns whether the editor currently rejects edits.\n     *\n     * @returns The readOnly state.\n     */\n    getReadOnly(): boolean {\n        return this._options.readOnly ?? false;\n    }\n\n    /**\n     * Sets whether the editor rejects edits. Caches the state; when a view is\n     * mounted, also reconfigures the readOnly compartment.\n     *\n     * @param readOnly - Whether the editor should reject edits.\n     * @returns This component, for method chaining.\n     */\n    setReadOnly(readOnly: boolean): this {\n        this._options.readOnly = readOnly;\n\n        if (this._view) {\n            this._view.dispatch({ effects: this._readOnlyCompartment.reconfigure(buildReadOnlyExtension(readOnly)) });\n        }\n\n        return this;\n    }\n\n    /**\n     * Moves keyboard focus into the editor.\n     *\n     * @remarks Overrides {@link Component.focus} because a `CodeEditor`'s own\n     * element is a plain, non-focusable host `<div>` — CodeMirror owns the real\n     * focusable target (its `contentDOM`), so the base `element.focus()` would be\n     * a no-op. When mounted this hands focus to the live view; offline / before\n     * mount it falls back to the base behaviour (also a no-op, matching every\n     * other editor operation's null-view guard). The current selection / caret is\n     * left untouched — pair with {@link CodeEditor.moveCursorToEnd} to also move it.\n     *\n     * @param preventScroll - Forwarded to the base fallback; CodeMirror's own\n     *   `focus()` takes no scroll option, so it is honoured only offline.\n     * @returns This component, for method chaining.\n     */\n    focus(preventScroll: boolean = false): this {\n        if (this._view) {\n            this._view.focus();\n\n            return this;\n        }\n\n        return super.focus(preventScroll);\n    }\n\n    /**\n     * Places the caret at the end of the document (after the last character),\n     * collapsing any selection, and scrolls it into view.\n     *\n     * @remarks A selection-only transaction — it changes no text, so it emits no\n     * `\"change\"`. No-op before the view is mounted (offline / pre-mount), like\n     * every other view operation. Pair with {@link CodeEditor.focus} to land the\n     * caret ready for typing (e.g. on a freshly opened, pre-seeded editor).\n     *\n     * @returns This component, for method chaining.\n     */\n    moveCursorToEnd(): this {\n        if (this._view) {\n            const end = this._view.state.doc.length;\n\n            this._view.dispatch({ selection: { anchor: end }, scrollIntoView: true });\n        }\n\n        return this;\n    }\n\n    /**\n     * Formats the document via the active language's formatter, or re-indents\n     * it (CodeMirror's own indentation service) when the language has none.\n     *\n     * @remarks If the formatter throws (invalid syntax), the rejection\n     * propagates and the document is left **untouched** — the full-document\n     * replace only runs after the formatter resolves successfully, so a\n     * throwing formatter never reaches it. The cursor is preserved through\n     * Prettier's `formatWithCursor` mapping, or clamped to the new document\n     * length for a formatter with no cursor map (sql-formatter).\n     *\n     * @returns A promise that resolves once formatting completes, or rejects\n     *   with the formatter's error.\n     */\n    async format(): Promise<void> {\n        const id  = this.getLanguage();\n        const def = id ? getLanguage(id) : undefined;\n\n        if (!def?.loadFormatter) {\n            this.reindentFallback();\n\n            return;\n        }\n\n        const formatter    = await def.loadFormatter();\n        const source       = this.getValue();\n        const cursorOffset = this._view ? this._view.state.selection.main.head : 0;\n\n        const result = await formatter(source, cursorOffset);\n\n        this._options.value = result.formatted;\n\n        if (this._view) {\n            this._view.dispatch({\n                changes:   { from: 0, to: this._view.state.doc.length, insert: result.formatted },\n                selection: { anchor: Math.min(result.cursorOffset, result.formatted.length) },\n            });\n        }\n    }\n\n    /**\n     * The `format()` fallback for a language with no formatter: re-indents the\n     * whole document via CodeMirror's own indentation service. Factored out\n     * from `format()` so the dispatch decision (formatter vs. this fallback) is\n     * unit-testable by spying on this method — the actual re-indent needs a\n     * live view (guarded below) and is otherwise manual-verify only.\n     */\n    private reindentFallback(): void {\n        if (this._view) {\n            this._view.dispatch({ changes: indentRange(this._view.state, 0, this._view.state.doc.length) });\n        }\n    }\n\n    /**\n     * Registers a listener for the `\"change\"` event, fired whenever the\n     * document changes (including via {@link CodeEditor.format} / {@link CodeEditor.setValue}).\n     *\n     * @param event - Must be `\"change\"`.\n     * @param listener - Invoked with the new document text.\n     * @returns This component, for method chaining.\n     */\n    on(event: \"change\", listener: (payload: CodeEditorChange) => void): this;\n    /**\n     * Registers a listener for the `\"readonlyedit\"` event, fired when a user\n     * edit (typing, paste, drop) is rejected because the editor is read-only.\n     *\n     * @param event - Must be `\"readonlyedit\"`.\n     * @param listener - Invoked with no arguments on each rejected edit.\n     * @returns This component, for method chaining.\n     */\n    on(event: \"readonlyedit\", listener: () => void): this;\n    on(event: CodeEditorEvent, listener: (payload: CodeEditorChange) => void): this {\n        this._listeners.add(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Removes a previously registered `\"change\"` listener.\n     *\n     * @param event - Must be `\"change\"`.\n     * @param listener - The exact callback reference to remove.\n     * @returns This component, for method chaining.\n     */\n    off(event: \"change\", listener: (payload: CodeEditorChange) => void): this;\n    /**\n     * Removes a previously registered `\"readonlyedit\"` listener.\n     *\n     * @param event - Must be `\"readonlyedit\"`.\n     * @param listener - The exact callback reference to remove.\n     * @returns This component, for method chaining.\n     */\n    off(event: \"readonlyedit\", listener: () => void): this;\n    off(event: CodeEditorEvent, listener: (payload: CodeEditorChange) => void): this {\n        this._listeners.remove(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Fans an event out to its registered listeners.\n     *\n     * @param event - The event name.\n     * @param payload - The event payload (`\"change\"` only; `\"readonlyedit\"` has none).\n     */\n    protected emit(event: \"change\", payload: CodeEditorChange): void;\n    protected emit(event: \"readonlyedit\"): void;\n    protected emit(event: CodeEditorEvent, payload?: CodeEditorChange): void {\n        this._listeners.fire(event, ...(payload ? [payload] : []));\n    }\n\n    /**\n     * Detaches the theme-change listener and destroys the live CodeMirror view.\n     * Call before discarding a dynamically-built `CodeEditor`, mirroring\n     * `Markdown.dispose`.\n     */\n    dispose(): void {\n        this._unsubscribeTheme();\n\n        if (this._view) {\n            Event.removeSubtreeListener(this, \"wheel\", this._onWheelClaim);\n        }\n\n        this._view?.destroy();\n    }\n\n    /**\n     * Marks a wheel event consumed (via {@link consumeWheel}) when CodeMirror's\n     * own scroller can move along the gesture's axis — WITHOUT\n     * `preventDefault()`, so CodeMirror still scrolls `.cm-scroller` natively.\n     *\n     * @param e - The wheel event reaching this editor's subtree.\n     *\n     * @remarks A floating overlay installs a wheel trap (see `WheelTrap`) that\n     * `preventDefault()`s any wheel no inner scroller claimed, so an unconsumed\n     * wheel cannot fall through to content behind the overlay. CodeMirror\n     * scrolls natively without going through the framework's eased scroller, so\n     * it never claims the wheel — and the trap, firing last as the outermost\n     * ancestor, would cancel the editor's native scroll. Claiming here (the\n     * subtree walk reaches this inner editor before the outer overlay) lets the\n     * native scroll proceed. Only an axis with somewhere to go is claimed; at a\n     * fits-in-box axis the wheel stays unclaimed so the trap still swallows it.\n     */\n    private claimScrollableWheel(e: WheelEvent): void {\n        const scroller = this._view?.scrollDOM;\n\n        if (!scroller) {\n            return;\n        }\n\n        const extentX = scroller.scrollWidth  > scroller.clientWidth;\n        const extentY = scroller.scrollHeight > scroller.clientHeight;\n\n        // shift+wheel with a bare vertical delta scrolls horizontally (native\n        // behaviour CodeMirror preserves), so it targets the horizontal axis.\n        const targetsHorizontal = e.deltaX !== 0 || (e.shiftKey && e.deltaY !== 0);\n        const targetsVertical   = e.deltaY !== 0 && !e.shiftKey;\n\n        if ((targetsVertical && extentY) || (targetsHorizontal && extentX)) {\n            consumeWheel(e);\n        }\n    }\n\n    /**\n     * Builds the `EditorState` and mounts the CodeMirror view through the DOM\n     * seam's `mountView` escape. Idempotent (guards on an existing view).\n     * Offline / before the element exists, `DOM.sink.mountView` returns `null`,\n     * so `_view` stays `null` and every editor operation continues to no-op.\n     */\n    private mount(): void {\n        if (this._view) {\n            return;\n        }\n\n        const element = this.getElement();\n\n        if (!element) {\n            return;\n        }\n\n        const dark = ThemeManager.getTheme().colorScheme === \"dark\";\n\n        const extensions: Extension[] = [\n            history(),\n            keymap.of([...defaultKeymap, ...historyKeymap]),\n            drawSelection(),\n            lineNumbers(),\n            highlightActiveLine(),\n            highlightActiveLineGutter(),\n            indentOnInput(),\n            bracketMatching(),\n            this._readOnlyCompartment.of(buildReadOnlyExtension(this.getReadOnly())),\n            this._themeCompartment.of(codeEditorTheme(dark)),\n            this._langCompartment.of([]),\n            EditorView.updateListener.of((update) => {\n                if (update.docChanged) {\n                    this._options.value = update.state.doc.toString();\n                    this.emit(\"change\", { value: this._options.value });\n                }\n            }),\n            EditorView.domEventHandlers({\n                // A user edit while read-only is blocked by `EditorState.readOnly`\n                // at the input layer — it never becomes a transaction, so it emits\n                // no \"change\". These hooks surface the rejection as feedback:\n                // typing / IME / delete fire `beforeinput`, while paste and drop are\n                // prevented before `beforeinput` runs, so each needs its own hook.\n                beforeinput: () => this.onEditIntent(),\n                paste:       () => this.onEditIntent(),\n                drop:        () => this.onEditIntent(),\n            }),\n        ];\n\n        const state = EditorState.create({ doc: this._options.value ?? \"\", extensions });\n\n        this._view = DOM.sink.mountView(element, (parent) => new EditorView({ parent, state }));\n\n        if (this._view) {\n            this.mountFlashOverlay(element);\n            // Claim wheels CodeMirror's own scroller will act on, so an\n            // enclosing overlay's wheel trap leaves this editor's native scroll\n            // alone (see claimScrollableWheel). Descendant-first subtree\n            // dispatch reaches this editor before the overlay, so the claim wins.\n            Event.addSubtreeListener(this, \"wheel\", this._onWheelClaim, { passive: false });\n        }\n\n        const language = this.getLanguage();\n\n        if (language) {\n            this.setLanguage(language);\n        }\n    }\n\n    /**\n     * Creates the read-only rejection wash: a pointer-transparent overlay that\n     * fills the editor box and sits above CodeMirror's content, appended after\n     * the view so it paints on top. It rests at `opacity: 0`; {@link CodeEditor.flashReadOnly}\n     * pulses it. Tracked as an owned handle, so the component's teardown releases it.\n     *\n     * @param host - The mounted editor element the overlay fills.\n     */\n    private mountFlashOverlay(host: Handle): void {\n        const overlay = this.trackHandle(DOM.sink.createElement(\"div\"));\n\n        DOM.sink.apply(overlay, {\n            style: {\n                position:      \"absolute\",\n                inset:         \"0\",\n                pointerEvents: \"none\",\n                // Above CodeMirror's sticky line-number gutter (z-index 200) so the\n                // wash covers the gutter too; `.cm-editor` forms no stacking context,\n                // so the gutter would otherwise paint over a lower overlay.\n                zIndex:        \"300\",\n                backgroundColor: READONLY_FLASH_COLOR,\n                opacity:       \"0\",\n            },\n        });\n        DOM.sink.appendChild(host, overlay);\n\n        this._flashOverlay = overlay;\n    }\n\n    /**\n     * Reconfigures the theme compartment when the project theme changes, so\n     * the editor's chrome + syntax colours follow a `ThemeManager.setTheme`\n     * toggle with no rebuild. No-ops before the view exists.\n     */\n    private onThemeChange(): void {\n        if (!this._view) {\n            return;\n        }\n\n        const dark = ThemeManager.getTheme().colorScheme === \"dark\";\n\n        this._view.dispatch({ effects: this._themeCompartment.reconfigure(codeEditorTheme(dark)) });\n    }\n\n    /**\n     * DOM-event hook for the read-only rejection feedback, wired to\n     * `beforeinput` / `paste` / `drop` in {@link CodeEditor.mount}. When the\n     * editor is read-only it surfaces the attempt via\n     * {@link CodeEditor.signalReadOnlyEdit}; it never consumes the event, so\n     * CodeMirror's own `EditorState.readOnly` handling still blocks the edit.\n     *\n     * @returns Always `false` (event left unhandled).\n     */\n    private onEditIntent(): boolean {\n        if (this.getReadOnly()) {\n            this.signalReadOnlyEdit();\n        }\n\n        return false;\n    }\n\n    /**\n     * Emits the `\"readonlyedit\"` event and plays the rejection flash — a\n     * programmatic hook plus a built-in visual cue that an edit was refused\n     * because the editor is read-only.\n     */\n    private signalReadOnlyEdit(): void {\n        this.emit(\"readonlyedit\");\n        this.flashReadOnly();\n    }\n\n    /**\n     * Flashes a brief error-coloured wash over the editor as feedback for a\n     * rejected edit: fades the overlay from a subtle tint back to transparent.\n     * No-op before the overlay is mounted (offline / pre-mount), and — via\n     * {@link Animation.play} — honours `prefers-reduced-motion`: under reduced\n     * motion the `\"readonlyedit\"` event still fires but nothing animates.\n     *\n     * A full-box wash is used rather than a border/ring cue because the editor\n     * is often large and mostly empty, so an edge flash sits far from where the\n     * eye is (the caret) and reads as nothing; the wash covers the content the\n     * user is looking at while staying faint enough to keep the text legible.\n     */\n    private flashReadOnly(): void {\n        if (!this._flashOverlay) {\n            return;\n        }\n\n        Animation.play(this._flashOverlay, {\n            from:       { opacity: String(READONLY_FLASH_PEAK_OPACITY) },\n            to:         { opacity: \"0\" },\n            durationMs: READONLY_FLASH_MS,\n            properties: [\"opacity\"],\n        });\n    }\n}\n\nconst CodeEditorCallable = callable(CodeEditor);\ntype CodeEditorCallable = CodeEditor;\nexport {\n    CodeEditor         as _CodeEditor,\n    CodeEditorCallable as CodeEditor,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport {\n    HEADING,\n    QUOTE,\n    CODE,\n    UNORDERED_LIST,\n    ORDERED_LIST,\n    BOLD_STAR,\n    ITALIC_STAR,\n    INLINE_CODE,\n    LINK,\n} from \"@lexical/markdown\";\nimport type { Transformer } from \"@lexical/markdown\";\n\n/**\n * The curated Markdown transformer array that defines `MarkdownEditor`'s\n * dialect — the exact subset of Markdown the read-only `Markdown` viewer\n * renders.\n *\n * @remarks\n * This is deliberately **not** Lexical's full `TRANSFORMERS` preset. The preset\n * also carries `STRIKETHROUGH`, `HIGHLIGHT`, `CHECK_LIST`, and table/image\n * transformers — constructs the viewer drops to a plain-text fallback. Curating\n * the list down to these nine is the single source of truth that guarantees the\n * editor can never emit Markdown the viewer would fail to render: the same array\n * is passed to the import converter, the export converter, and the\n * markdown-shortcut typing registration, so what the user types, what the editor\n * stores, and what the viewer reads all agree.\n *\n * The mapping to the viewer's supported tokens is:\n *\n * - `HEADING` → `#`…`######` (heading)\n * - `QUOTE` → `> ` (blockquote)\n * - `CODE` → fenced ` ``` ` block (code)\n * - `UNORDERED_LIST` → `- ` (unordered list)\n * - `ORDERED_LIST` → `1. ` (ordered list)\n * - `BOLD_STAR` → `**b**` (strong)\n * - `ITALIC_STAR` → `*i*` (em)\n * - `INLINE_CODE` → `` `c` `` (codespan)\n * - `LINK` → `[t](url)` (link)\n *\n * Star (not underscore) emphasis variants are chosen so bold/italic export is\n * deterministic and matches the viewer's demo output.\n */\nexport const TRANSFORMERS: Transformer[] = [\n    HEADING,\n    QUOTE,\n    CODE,\n    UNORDERED_LIST,\n    ORDERED_LIST,\n    BOLD_STAR,\n    ITALIC_STAR,\n    INLINE_CODE,\n    LINK,\n];\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { HeadingNode, QuoteNode } from \"@lexical/rich-text\";\nimport { ListNode, ListItemNode } from \"@lexical/list\";\nimport { LinkNode } from \"@lexical/link\";\nimport { CodeNode, CodeHighlightNode } from \"@lexical/code\";\nimport type { Klass, LexicalNode } from \"lexical\";\n\n/**\n * The Lexical node classes registered on every `MarkdownEditor`'s editor.\n *\n * @remarks\n * A Lexical editor can only build or parse a node type whose class it was\n * created with, so this set must cover every construct the curated transformer\n * list produces: headings (`HeadingNode`), blockquotes (`QuoteNode`),\n * ordered/unordered lists (`ListNode` + `ListItemNode`), links (`LinkNode`), and\n * fenced code (`CodeNode` + its `CodeHighlightNode` children). The remaining\n * dialect constructs — bold, italic, inline code, paragraphs — are plain text\n * formats on the always-present built-in text/paragraph nodes and need no\n * registration.\n */\nexport const EDITOR_NODES: ReadonlyArray<Klass<LexicalNode>> = [\n    HeadingNode,\n    QuoteNode,\n    ListNode,\n    ListItemNode,\n    LinkNode,\n    CodeNode,\n    CodeHighlightNode,\n];\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { StyleRule } from \"~/core/StyleTarget.js\";\nimport type { EditorThemeClasses } from \"lexical\";\n\n// Class names Lexical stamps onto the rendered nodes. Prefixed `ts-ui-mde-`\n// (markdown editor) so they never collide with the read-only `Markdown`\n// viewer's `ts-ui-md-` rules; the two components replicate rather than share\n// their class rules — the shared contract is the theme-token names below, not\n// the selectors.\nconst HEADING_CLASS     = \"ts-ui-mde-heading\";\nconst QUOTE_CLASS       = \"ts-ui-mde-quote\";\nconst CODE_BLOCK_CLASS  = \"ts-ui-mde-code\";\nconst INLINE_CODE_CLASS = \"ts-ui-mde-inline-code\";\nconst LIST_CLASS        = \"ts-ui-mde-list\";\nconst LINK_CLASS        = \"ts-ui-mde-link\";\nconst BOLD_CLASS        = \"ts-ui-mde-bold\";\nconst ITALIC_CLASS      = \"ts-ui-mde-italic\";\n\n/** Guards the module-singleton class-rule registration in {@link ensureMarkdownEditorClassRules}. */\nlet _classRulesEnsured = false;\n\n/**\n * Registers the shared class rules that style the WYSIWYG editing surface,\n * once per document.\n *\n * @remarks\n * The rules mirror the read-only `Markdown` viewer's constructs and reference\n * the **same** CSS custom-property tokens — `--ts-ui-font-mono` for code,\n * `--ts-ui-border-color` for the quote bar, `--ts-ui-indicator-focus` for links\n * — so the edited rich text looks identical to what the viewer renders (the\n * point of WYSIWYG). Because the rules resolve live CSS variables, a theme\n * toggle recolours the surface with no rebuild and the component needs no\n * theme-change subscription. Each em-relative padding/indent is genuine\n * structural spacing (a code wash, a list-marker gutter, a quote bar), scaling\n * with the surrounding font — not a cosmetic nudge.\n */\nexport function ensureMarkdownEditorClassRules(): void {\n    if (_classRulesEnsured) {\n        return;\n    }\n\n    _classRulesEnsured = true;\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   HEADING_CLASS,\n        // Semibold so headings read as headings independent of any UA reset.\n        styles: { fontWeight: \"600\" },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   QUOTE_CLASS,\n        styles: {\n            // 3px quote bar — the framework's thin-border weight — plus an\n            // em-relative gutter indenting the quoted prose off the bar.\n            borderLeft:  \"3px solid var(--ts-ui-border-color, rgba(127, 127, 127, 0.4))\",\n            paddingLeft: \"1em\",\n            marginLeft:  \"0\",\n        },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   CODE_BLOCK_CLASS,\n        styles: {\n            fontFamily:   \"var(--ts-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)\",\n            // Translucent grey wash reads as \"code\" on light and dark alike.\n            background:   \"rgba(127, 127, 127, 0.16)\",\n            borderRadius: \"var(--ts-ui-border-radius, 3px)\",\n            // Structural inset giving the fenced code frame room.\n            padding:      \"0.6em 0.8em\",\n            whiteSpace:   \"pre-wrap\",\n        },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   INLINE_CODE_CLASS,\n        styles: {\n            fontFamily:   \"var(--ts-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)\",\n            background:   \"rgba(127, 127, 127, 0.16)\",\n            borderRadius: \"var(--ts-ui-border-radius, 3px)\",\n            // Snug padding so the wash hugs the inline-code glyphs.\n            padding:      \"0.1em 0.3em\",\n        },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   LIST_CLASS,\n        // Room for the list marker; structural, em-relative indentation.\n        styles: { paddingLeft: \"1.5em\" },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   LINK_CLASS,\n        // The framework's single accent hue (shared with focus/selection).\n        styles: { color: \"var(--ts-ui-indicator-focus, #2563eb)\" },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   BOLD_CLASS,\n        styles: { fontWeight: \"700\" },\n    });\n\n    new StyleRule({\n        scope:  \"class\",\n        name:   ITALIC_CLASS,\n        styles: { fontStyle: \"italic\" },\n    });\n}\n\n/**\n * The Lexical class-name theme map linking each node type to its shared class\n * rule from {@link ensureMarkdownEditorClassRules}.\n *\n * @remarks\n * Every heading level maps to the one heading rule (the tag itself carries the\n * size); ordered and unordered lists share the indentation rule. Bold, italic,\n * and inline code are text-format entries, and links carry the accent colour.\n */\nexport const EDITOR_THEME: EditorThemeClasses = {\n    heading: {\n        h1: HEADING_CLASS,\n        h2: HEADING_CLASS,\n        h3: HEADING_CLASS,\n        h4: HEADING_CLASS,\n        h5: HEADING_CLASS,\n        h6: HEADING_CLASS,\n    },\n    quote: QUOTE_CLASS,\n    code:  CODE_BLOCK_CLASS,\n    list:  {\n        ul: LIST_CLASS,\n        ol: LIST_CLASS,\n    },\n    text: {\n        bold:   BOLD_CLASS,\n        italic: ITALIC_CLASS,\n        code:   INLINE_CODE_CLASS,\n    },\n    link: LINK_CLASS,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component, ComponentOptions } from \"~/core/Component.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport type { Handle } from \"~/core/DOM.js\";\nimport { Insets } from \"~/primitive/Insets.js\";\nimport { ListenerBag } from \"~/core/ListenerBag.js\";\nimport { callable } from \"~/core/Callable.js\";\nimport { Card } from \"~/layout/Card.js\";\nimport { CodeEditor } from \"~/component/editor/CodeEditor.js\";\nimport type { CodeEditorChange } from \"~/component/editor/CodeEditor.js\";\nimport { createEditor, FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode } from \"lexical\";\nimport type { LexicalEditor, ElementNode } from \"lexical\";\nimport { $convertFromMarkdownString, $convertToMarkdownString, registerMarkdownShortcuts } from \"@lexical/markdown\";\nimport { registerRichText, $createHeadingNode, $createQuoteNode } from \"@lexical/rich-text\";\nimport type { HeadingTagType } from \"@lexical/rich-text\";\nimport { registerList, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND } from \"@lexical/list\";\nimport { $toggleLink } from \"@lexical/link\";\nimport { $createCodeNode } from \"@lexical/code\";\nimport { registerHistory, createEmptyHistoryState } from \"@lexical/history\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { TRANSFORMERS } from \"~/component/editor/markdownTransformers.js\";\nimport { EDITOR_NODES } from \"~/component/editor/editorNodes.js\";\nimport { EDITOR_THEME, ensureMarkdownEditorClassRules } from \"~/component/editor/editorTheme.js\";\n\n/**\n * The coalescing window (ms) for the undo/redo history: edits within this gap\n * merge into a single undo step, matching Lexical's own recommended default.\n */\nconst HISTORY_DELAY_MS = 300;\n\n/**\n * Payload of {@link MarkdownEditor}'s `\"change\"` event: the Markdown string\n * after the edit that triggered it.\n *\n * @category Components\n */\nexport interface MarkdownEditorChange {\n    value: string;\n}\n\n/** The event {@link MarkdownEditor} exposes through its custom `on` / `off` surface. */\ntype MarkdownEditorEvent = \"change\";\n\n/**\n * The editing surface a {@link MarkdownEditor} currently shows: the WYSIWYG\n * rich-text surface, or the raw-Markdown source [`CodeEditor`](/api/component/editor/classes/CodeEditor).\n *\n * @category Components\n */\nexport type MarkdownEditorMode = \"wysiwyg\" | \"source\";\n\n/**\n * A block type accepted by {@link MarkdownEditor.setBlockType}: a paragraph, one\n * of the six heading levels, a blockquote, or a fenced code block.\n *\n * @category Components\n */\nexport type MarkdownBlockType = \"paragraph\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"quote\" | \"code\";\n\n/**\n * Construction-time options for {@link MarkdownEditor}.\n *\n * @category Components\n */\nexport interface MarkdownEditorOptions extends ComponentOptions {\n    /** Initial Markdown source (also accepted as the positional first argument). */\n    value?: string;\n    /** Whether the editor is read-only. Default `false`. */\n    readOnly?: boolean;\n    /** Which surface is shown. Default `\"wysiwyg\"`. */\n    mode?: MarkdownEditorMode;\n    /** Construction-time listener bag; the only event is `\"change\"`. */\n    listeners?: { change?: (payload: MarkdownEditorChange) => void };\n}\n\n/**\n * The `onError` handler for the Lexical editor: rethrows so a node/transform\n * fault surfaces loudly rather than being swallowed.\n *\n * @param error - The error Lexical reports.\n */\nfunction reportEditorError(error: Error): void {\n    throw error;\n}\n\n/**\n * Builds the Lexical block node a {@link MarkdownEditor.setBlockType} call\n * converts the selected blocks into.\n *\n * @param type - The requested block type.\n * @returns A freshly-created element node of that type.\n */\nfunction createBlockNode(type: MarkdownBlockType): ElementNode {\n    switch (type) {\n        case \"quote\": return $createQuoteNode();\n        case \"code\":  return $createCodeNode();\n        case \"paragraph\": return $createParagraphNode();\n        default:      return $createHeadingNode(type satisfies HeadingTagType);\n    }\n}\n\n/**\n * The private WYSIWYG editing surface: the element Lexical's `contenteditable`\n * view mounts into.\n *\n * @remarks\n * Split out from {@link MarkdownEditor} so the coordinator's own element can host\n * *both* this surface and the source {@link CodeEditor} as two [`Card`](/api/layout/classes/Card)\n * children — one DOM element per class, since Lexical's `contenteditable` and\n * CodeMirror's view are two foreign live widgets that each need their own host\n * element. `MarkdownEditor` keeps ownership of the Lexical editor object; only\n * the mount element (and its `contenteditable` / caret plumbing) lives here.\n */\nclass WysiwygSurface extends Component {\n\n    /** Whether this surface's element hosts an editable region (`contenteditable`). */\n    private _contentEditable: boolean = false;\n\n    /** Invoked on the surface's first connected + sized layout — the moment to mount the live view. */\n    private readonly _onReady: () => void;\n\n    /**\n     * Constructs the WYSIWYG surface.\n     *\n     * @param onReady - Called on the surface's first connected + sized layout.\n     */\n    constructor(onReady: () => void) {\n        super();\n\n        this._onReady = onReady;\n\n        this.setContentEditable(true);\n        // Fills its host box and scrolls internally when the document overflows.\n        this.setOverflow(\"auto\");\n        // A few pixels of inset off the padding box: without it the caret sits\n        // flush against the surface's left edge (at column 0 of any line) and\n        // gets clipped to invisibility. The padding is on the scroll container,\n        // so it clears the caret at every edge while overflow scrolling still\n        // reveals the full document. The values match source mode's CodeMirror\n        // text inset so toggling modes doesn't shift the prose: 4px vertical\n        // (CodeMirror's `.cm-content` padding is `4px 0`) and 6px horizontal\n        // (its `.cm-line` padding-left is 6px).\n        this.setPadding(new Insets(4, 6, 4, 6));\n        // Text caret over the whole surface: signals editability, and — paired\n        // with the `user-select: text` Lexical stamps on the root — keeps the\n        // surface select-and-copy-able even in read-only mode. `setCursor` caches\n        // in `_options.cursor`, which `applyStyle` replays, so it survives both\n        // detached construction and Lexical's mount.\n        this.setCursor(\"text\");\n\n        this.onFirstLayout(() => this._onReady());\n    }\n\n    /**\n     * Replays the cached `contenteditable` state onto the freshly-created\n     * element. `setContentEditable` (called during detached construction, before\n     * an element exists) caches into `_contentEditable` but its underlying\n     * `setElementAttribute` is write-through only, so the constructor-time write\n     * is dropped; without this replay the mounted element never becomes editable\n     * and the WYSIWYG view silently behaves read-only.\n     *\n     * The write targets the `element` handle directly — as the base class does\n     * for its own cached attributes — because at init time the element is not yet\n     * in the document, so a `getElement()`-based setter would miss it.\n     *\n     * @param element - Optional element to initialise; falls back to `getElement()`.\n     * @returns This surface, for method chaining.\n     */\n    protected init(element?: Handle): this {\n        super.init(element);\n\n        const el = element ?? this.getElement();\n\n        if (el) {\n            DOM.sink.apply(el, { setAttr: { contenteditable: this._contentEditable ? \"true\" : \"false\" } });\n        }\n\n        return this;\n    }\n\n    /**\n     * Sets whether this surface's element hosts an editable region. Caches the\n     * state in `_contentEditable` and writes the `contenteditable` attribute\n     * through to the element. The underlying `setElementAttribute` is\n     * write-through only, so a call made during detached construction (before the\n     * element exists) is a no-op on the DOM; {@link WysiwygSurface.init} replays\n     * the cached state onto the element once it is created.\n     *\n     * @param contentEditable - Whether the element is contenteditable.\n     * @returns This surface, for method chaining.\n     */\n    setContentEditable(contentEditable: boolean): this {\n        this._contentEditable = contentEditable;\n        this.setElementAttribute(\"contenteditable\", contentEditable ? \"true\" : \"false\");\n\n        return this;\n    }\n\n    /**\n     * Returns whether this surface's element hosts an editable region.\n     *\n     * @returns The contenteditable state.\n     */\n    getContentEditable(): boolean {\n        return this._contentEditable;\n    }\n\n    /**\n     * Mounts the given Lexical editor's editable view into this surface's element\n     * through the DOM seam's `mountView` escape. No-ops when the view is already\n     * mounted, the element is not yet available, or offline (the seam returns\n     * `null`, leaving the editor headless).\n     *\n     * @param editor - The Lexical editor whose view to mount here.\n     */\n    mount(editor: LexicalEditor): void {\n        if (editor.getRootElement()) {\n            return;\n        }\n\n        const element = this.getElement();\n\n        if (!element) {\n            return;\n        }\n\n        ensureMarkdownEditorClassRules();\n\n        // The factory parameter is left unannotated: its `HTMLElement` type is\n        // inferred from the seam signature, so no DOM type is named here and the\n        // `no-raw-dom` *hold* clause stays green. `setRootElement` accepts the\n        // element structurally.\n        DOM.sink.mountView(element, (root) => { editor.setRootElement(root); return root; });\n    }\n}\n\n/**\n * A WYSIWYG rich-text editor whose public value is a Markdown string, with an\n * optional raw-Markdown source mode.\n *\n * @remarks\n * `MarkdownEditor` edits a document as rendered rich text — no visible markup —\n * and reads/writes Markdown through Lexical's bidirectional converters, so it is\n * the editing counterpart to the read-only\n * [`Markdown`](/api/component/display/classes/Markdown) viewer. Its dialect is\n * deliberately the **exact subset** the viewer renders (headings, paragraphs,\n * bold, italic, inline code, ordered/unordered lists, blockquotes, fenced code,\n * links); a curated transformer list — not Lexical's full preset — guarantees\n * the editor can never emit Markdown the viewer would drop to plain text, so an\n * edited document renders identically in the viewer.\n *\n * Formatting is driven three ways, all without a built-in toolbar: Markdown\n * shortcut typing (`# ` → heading, `**b**` → bold, `- ` → list, `> ` → quote,\n * ` ``` ` → code), the default keyboard shortcuts (Ctrl/Cmd+B / +I, undo/redo),\n * and a thin imperative command API (`toggleBold`, `setBlockType`,\n * `toggleUnorderedList`, `toggleLink`, …) a consumer can wire to their own\n * `Button`s.\n *\n * A {@link MarkdownEditor.setMode | mode} (`\"wysiwyg\"` | `\"source\"`) swaps the\n * editing surface between that rich-text view and a raw-Markdown\n * [`CodeEditor`](/api/component/editor/classes/CodeEditor); both are bound to the\n * same Markdown value, so `getValue`/`setValue` and the `\"change\"` event behave\n * identically in either mode and switching modes preserves the document. Like the\n * command API, the mode toggle is **consumer-wired** — there is no built-in\n * chrome — so a consumer drives `setMode` from their own control.\n *\n * Internally the component's own element hosts two swappable child surfaces\n * through a [`Card`](/api/layout/classes/Card) layout: a private WYSIWYG surface owning Lexical's\n * `contenteditable` element (a *foreign live widget*, like the `EditorView`\n * behind `CodeEditor`) and the source `CodeEditor`. Lexical separates its editor\n * **state** (a pure, DOM-free immutable tree) from that view, so the Markdown\n * value get/set/round-trip runs headless: offline neither view attaches, yet\n * `getValue` / `setValue`, the command API, and mode switching still operate on\n * the state. The editor fills its host box and scrolls internally; give it a\n * sized host (a `Fit` panel or an explicit `preferredSize`), the same as\n * `CodeEditor`.\n *\n * @example\n * ```typescript\n * import { MarkdownEditor } from '@jimka/typescript-ui/component/editor';\n *\n * const editor = new MarkdownEditor('# Title\\n\\nSome **bold** text.');\n * panel.addComponent(editor);\n * editor.on('change', ({ value }) => console.log(value));\n * editor.setMode('source'); // switch to raw-Markdown editing\n * ```\n *\n * @category Components\n */\nclass MarkdownEditor extends Component<MarkdownEditorOptions> {\n\n    /**\n     * The Lexical editor, built lazily (headless) on first use or first layout;\n     * `null` until then. The editor is DOM-free until its root element mounts,\n     * so this is non-null and fully usable offline once built.\n     */\n    private _editor: LexicalEditor | null = null;\n\n    /** The `mergeRegister` teardown for the rich-text / list / history / shortcut / update registrations. */\n    private _unregister: (() => void) | null = null;\n\n    /** Custom-event fan-out for `\"change\"`. */\n    private readonly _listeners: ListenerBag<MarkdownEditorEvent> = new ListenerBag<MarkdownEditorEvent>();\n\n    /** The Card layout swapping the visible editing surface between WYSIWYG and source. */\n    private readonly _card: Card;\n\n    /** The WYSIWYG surface hosting Lexical's `contenteditable` view. */\n    private readonly _wysiwyg: WysiwygSurface;\n\n    /** The raw-Markdown source surface, shown in `\"source\"` mode. */\n    private readonly _codeEditor: CodeEditor;\n\n    /**\n     * Constructs a Markdown editor.\n     *\n     * @param value - Initial Markdown source (optional; defaults to `\"\"`).\n     * @param options - Optional construction options.\n     */\n    constructor(value?: string, options?: MarkdownEditorOptions) {\n        super(options);\n\n        // Positional argument: cache it only when the caller didn't also pass\n        // `options.value` (which the super-time cascade already stored).\n        if (value !== undefined && this._options.value === undefined) {\n            this._options.value = value;\n        }\n\n        // The component's own element hosts two swappable surfaces via a Card\n        // (one DOM element per class): the WYSIWYG contenteditable and the source\n        // CodeEditor. The Card shows exactly one at a time.\n        this._card = new Card();\n        this.setLayoutManager(this._card);\n\n        this._wysiwyg = new WysiwygSurface(() => this.mountWysiwyg());\n        this._codeEditor = new CodeEditor(this._options.value ?? \"\", {\n            language:  \"markdown\",\n            readOnly:  this._options.readOnly ?? false,\n            listeners: { change: (payload) => this.handleCodeChange(payload) },\n        });\n\n        this.addComponent(this._wysiwyg);\n        this.addComponent(this._codeEditor);\n\n        // Pick the initial visible child from the mode.\n        this._card.setVisibleComponentId(\n            this.getMode() === \"source\" ? this._codeEditor.getId() : this._wysiwyg.getId());\n\n        this.applyListeners(options?.listeners);\n    }\n\n    /**\n     * Caches the `value` / `readOnly` / `mode` fields onto `_options` after\n     * inherited Component fields cascade through `super.applyOptions`. The editor\n     * is built later (lazily), so these are pure caches applied to the freshly-\n     * created editor state / surfaces in the constructor and `ensureEditor`.\n     *\n     * @param options - The options bag carrying the values to apply.\n     * @returns This component, for method chaining.\n     */\n    protected applyOptions(options: MarkdownEditorOptions): this {\n        super.applyOptions(options);\n\n        if (options.value    !== undefined) this._options.value    = options.value;\n        if (options.readOnly !== undefined) this._options.readOnly = options.readOnly;\n        if (options.mode     !== undefined) this._options.mode     = options.mode;\n\n        return this;\n    }\n\n    /**\n     * Returns the active editing surface mode.\n     *\n     * @returns `\"source\"` when the raw-Markdown surface is shown, else `\"wysiwyg\"`.\n     */\n    getMode(): MarkdownEditorMode {\n        return this._options.mode ?? \"wysiwyg\";\n    }\n\n    /**\n     * Switches the active editing surface. Converts the current document across\n     * the surfaces so no edits are lost — the outgoing surface's Markdown is read\n     * (via {@link MarkdownEditor.getValue}) before the mode flips, then loaded\n     * into the incoming surface — and swaps the visible [`Card`](/api/layout/classes/Card) child.\n     * No-op (no conversion, no `\"change\"`) when already in `mode`.\n     *\n     * @param mode - The surface to show.\n     * @returns This component, for method chaining.\n     */\n    setMode(mode: MarkdownEditorMode): this {\n        if (this.getMode() === mode) {\n            return this;\n        }\n\n        // Read the canonical Markdown from the OUTGOING surface before the flip.\n        const markdown = this.getValue();\n        this._options.mode = mode;\n\n        if (mode === \"source\") {\n            this._codeEditor.setValue(markdown);\n            this._card.setVisibleComponentId(this._codeEditor.getId());\n        } else {\n            this.ensureEditor().update(\n                () => $convertFromMarkdownString(markdown, TRANSFORMERS), { discrete: true });\n            this._card.setVisibleComponentId(this._wysiwyg.getId());\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns the current document as a Markdown string, from whichever surface\n     * is active: the raw source text in `\"source\"` mode, else converted live from\n     * the Lexical editor state (or the cached pre-mount / offline value).\n     *\n     * @returns The Markdown source, or `\"\"` when unset.\n     */\n    getValue(): string {\n        if (this.getMode() === \"source\") {\n            return this._codeEditor.getValue();\n        }\n\n        const editor = this._editor;\n\n        if (editor) {\n            return editor.read(() => $convertToMarkdownString(TRANSFORMERS));\n        }\n\n        return this._options.value ?? \"\";\n    }\n\n    /**\n     * Replaces the whole document from a Markdown string, targeting the active\n     * surface: the source `CodeEditor` in `\"source\"` mode, else the Lexical\n     * editor (building it if needed). A resulting content change fires `\"change\"`.\n     *\n     * @param value - The new Markdown source.\n     * @returns This component, for method chaining.\n     */\n    setValue(value: string): this {\n        if (this.getMode() === \"source\") {\n            this._codeEditor.setValue(value);\n\n            return this;\n        }\n\n        // Discrete forces a synchronous commit, so the resulting `\"change\"`\n        // fires before this returns rather than on a later flush.\n        this.ensureEditor().update(() => $convertFromMarkdownString(value, TRANSFORMERS), { discrete: true });\n\n        return this;\n    }\n\n    /**\n     * Returns whether the editor currently rejects edits.\n     *\n     * @returns The read-only state.\n     */\n    getReadOnly(): boolean {\n        return this._options.readOnly ?? false;\n    }\n\n    /**\n     * Sets whether the editor rejects edits, on **both** surfaces. Caches the\n     * state; when the Lexical editor exists, toggles its editable flag (which\n     * also drops the caret / editing affordances on the mounted view); and\n     * forwards to the source `CodeEditor`.\n     *\n     * @param readOnly - Whether the editor should reject edits.\n     * @returns This component, for method chaining.\n     */\n    setReadOnly(readOnly: boolean): this {\n        this._options.readOnly = readOnly;\n        this._editor?.setEditable(!readOnly);\n        this._codeEditor.setReadOnly(readOnly);\n\n        return this;\n    }\n\n    /**\n     * Moves keyboard focus into the active editing surface, placing a caret\n     * ready for typing: the Lexical contenteditable in WYSIWYG mode (building\n     * and mounting the editor if needed), or the source `CodeEditor` in\n     * `\"source\"` mode.\n     *\n     * Overrides {@link Component.focus}, whose default focuses this component's\n     * own host element — the `Card` wrapper — which would leave the caret out of\n     * the nested contenteditable the typing must land in. In WYSIWYG mode it\n     * defers to Lexical's own `focus`, which both focuses the root element and\n     * sets a selection so a caret appears without a click.\n     *\n     * @param preventScroll - Forwarded to the source `CodeEditor` in `\"source\"`\n     *   mode; ignored in WYSIWYG mode, where Lexical manages its own focus scroll.\n     * @returns This component, for method chaining.\n     */\n    focus(preventScroll: boolean = false): this {\n        if (this.getMode() === \"source\") {\n            this._codeEditor.focus(preventScroll);\n        } else {\n            this.ensureEditor().focus();\n        }\n\n        return this;\n    }\n\n    /**\n     * Toggles bold on the current selection. No-op (without throwing) when there\n     * is no range selection.\n     *\n     * @returns This component, for method chaining.\n     */\n    toggleBold(): this {\n        this.ensureEditor().dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n\n        return this;\n    }\n\n    /**\n     * Toggles italic on the current selection. No-op without a range selection.\n     *\n     * @returns This component, for method chaining.\n     */\n    toggleItalic(): this {\n        this.ensureEditor().dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n\n        return this;\n    }\n\n    /**\n     * Toggles inline code on the current selection. No-op without a range selection.\n     *\n     * @returns This component, for method chaining.\n     */\n    toggleInlineCode(): this {\n        this.ensureEditor().dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n\n        return this;\n    }\n\n    /**\n     * Converts the selected blocks into an unordered (bulleted) list, or out of\n     * one when already a list. No-op without a range selection.\n     *\n     * @returns This component, for method chaining.\n     */\n    toggleUnorderedList(): this {\n        this.ensureEditor().dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n\n        return this;\n    }\n\n    /**\n     * Converts the selected blocks into an ordered (numbered) list, or out of\n     * one when already a list. No-op without a range selection.\n     *\n     * @returns This component, for method chaining.\n     */\n    toggleOrderedList(): this {\n        this.ensureEditor().dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n\n        return this;\n    }\n\n    /**\n     * Wraps the current selection in a link to `url`, or unwraps it when `url`\n     * is `null`. No-op without a range selection.\n     *\n     * @param url - The link target, or `null` to remove the link.\n     * @returns This component, for method chaining.\n     */\n    toggleLink(url: string | null): this {\n        const editor = this.ensureEditor();\n\n        editor.update(() => {\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection)) {\n                $toggleLink(url);\n            }\n        }, { discrete: true });\n\n        return this;\n    }\n\n    /**\n     * Converts the selected blocks to `type` (paragraph, `h1`–`h6`, blockquote,\n     * or fenced code). No-op without a range selection.\n     *\n     * @param type - The target block type.\n     * @returns This component, for method chaining.\n     */\n    setBlockType(type: MarkdownBlockType): this {\n        const editor = this.ensureEditor();\n\n        editor.update(() => {\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection)) {\n                $setBlocksType(selection, () => createBlockNode(type));\n            }\n        }, { discrete: true });\n\n        return this;\n    }\n\n    /**\n     * Registers a listener for the `\"change\"` event, fired whenever the document\n     * content changes (typing, a command, or {@link MarkdownEditor.setValue}) in\n     * whichever surface is active.\n     *\n     * @param event - Must be `\"change\"`.\n     * @param listener - Invoked with the new Markdown value.\n     * @returns This component, for method chaining.\n     */\n    on(event: MarkdownEditorEvent, listener: (payload: MarkdownEditorChange) => void): this {\n        this._listeners.add(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Removes a previously registered `\"change\"` listener.\n     *\n     * @param event - Must be `\"change\"`.\n     * @param listener - The exact callback reference to remove.\n     * @returns This component, for method chaining.\n     */\n    off(event: MarkdownEditorEvent, listener: (payload: MarkdownEditorChange) => void): this {\n        this._listeners.remove(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Fans the `\"change\"` event out to its registered listeners.\n     *\n     * @param event - Must be `\"change\"`.\n     * @param payload - The event payload.\n     */\n    protected emit(event: MarkdownEditorEvent, payload: MarkdownEditorChange): void {\n        this._listeners.fire(event, payload);\n    }\n\n    /**\n     * Sets whether the WYSIWYG surface's element hosts an editable region.\n     * Forwards to the private surface, preserving the public setter.\n     *\n     * @param contentEditable - Whether the element is contenteditable.\n     * @returns This component, for method chaining.\n     */\n    setContentEditable(contentEditable: boolean): this {\n        this._wysiwyg.setContentEditable(contentEditable);\n\n        return this;\n    }\n\n    /**\n     * Returns whether the WYSIWYG surface's element hosts an editable region.\n     *\n     * @returns The contenteditable state.\n     */\n    getContentEditable(): boolean {\n        return this._wysiwyg.getContentEditable();\n    }\n\n    /**\n     * Detaches the Lexical registrations and both surfaces' live views. Call\n     * before discarding a dynamically-built `MarkdownEditor`, mirroring\n     * `CodeEditor.dispose`.\n     */\n    dispose(): void {\n        this._unregister?.();\n        this._editor?.setRootElement(null);\n        this._codeEditor.dispose();\n    }\n\n    /**\n     * Builds the headless Lexical editor on first use. Idempotent: the editor is\n     * built once. Offline the editor stays headless — the state, and every value\n     * / command operation, still work.\n     *\n     * @returns The live (headless-capable) Lexical editor.\n     */\n    private ensureEditor(): LexicalEditor {\n        if (!this._editor) {\n            const editor = createEditor({ nodes: EDITOR_NODES, theme: EDITOR_THEME, onError: reportEditorError });\n\n            // Populate the initial state before registering the update listener,\n            // so loading the cached value does not fire a spurious `\"change\"`.\n            editor.update(() => $convertFromMarkdownString(this._options.value ?? \"\", TRANSFORMERS), { discrete: true });\n            editor.setEditable(!(this._options.readOnly ?? false));\n\n            this._unregister = mergeRegister(\n                registerRichText(editor),\n                registerList(editor),\n                registerHistory(editor, createEmptyHistoryState(), HISTORY_DELAY_MS),\n                registerMarkdownShortcuts(editor, TRANSFORMERS),\n                editor.registerUpdateListener(() => this.handleChange()),\n            );\n\n            this._editor = editor;\n        }\n\n        return this._editor;\n    }\n\n    /**\n     * Builds the headless editor (if needed) and mounts its live view into the\n     * WYSIWYG surface. Driven by the surface's first connected layout, i.e. the\n     * first time it is the visible `Card` child and gets sized.\n     */\n    private mountWysiwyg(): void {\n        this._wysiwyg.mount(this.ensureEditor());\n    }\n\n    /**\n     * Recomputes the Markdown value from the committed editor state after a\n     * Lexical update and, when it differs from the cached value (i.e. the content\n     * — not merely the selection — changed), caches it and emits `\"change\"`.\n     */\n    private handleChange(): void {\n        const editor = this._editor;\n\n        if (!editor) {\n            return;\n        }\n\n        const value = editor.read(() => $convertToMarkdownString(TRANSFORMERS));\n\n        if (value === this._options.value) {\n            return;\n        }\n\n        this._options.value = value;\n        this.emit(\"change\", { value });\n    }\n\n    /**\n     * Recomputes the cached value from a source-surface (`CodeEditor`) edit and,\n     * when it differs from the cached value, caches it and emits `\"change\"`. The\n     * equality guard makes the programmatic `setValue` on a mode switch not\n     * double-emit (it loads the value already equal to `_options.value`).\n     *\n     * @param payload - The `CodeEditor` change payload (the new source text).\n     */\n    private handleCodeChange(payload: CodeEditorChange): void {\n        if (payload.value === this._options.value) {\n            return;\n        }\n\n        this._options.value = payload.value;\n        this.emit(\"change\", { value: payload.value });\n    }\n}\n\nconst MarkdownEditorCallable = callable(MarkdownEditor);\ntype MarkdownEditorCallable = MarkdownEditor;\nexport {\n    MarkdownEditor         as _MarkdownEditor,\n    MarkdownEditorCallable as MarkdownEditor,\n};\n"],"mappings":"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"}

package/dist/lib/component/input.es.js

@@ -0,0 +1,2 @@
+import{a as e,l as t,n,u as r}from"../Position-B-WfZYAJ.js";import{_ as i,f as a,h as o,t as s,y as c}from"../Component-BR2f0Itb.js";import{t as l}from"../ListenerBag-WPdKuuds.js";import{a as ee}from"../Scrollbar-DchfiFKC.js";import{t as u}from"../Glyph-WUqTF_Z9.js";import{t as d}from"../AnimatedDropdown-BbGCs70E.js";import{t as f}from"../Fit-CFIr4P9R.js";import{t as p}from"../Text-D1RrBY52.js";import{t as m}from"../AbstractInput-DD-NpicS.js";import{t as h}from"../AbstractBooleanInput-C3rj7sje.js";import{t as g}from"../HBox-Q8y1PHlk.js";import{t as te}from"../RadioButton-eI3-vXn3.js";import{n as _}from"../VBox-D5B9ecw0.js";import{t as v}from"../Button-DEUtBqK4.js";import{n as y,t as b}from"../Slider-xRxNSjFN.js";import{a as x,c as ne,d as S,f as C,g as w,h as T,i as E,l as D,m as O,n as k,o as A,p as j,r as M,s as N,t as P,u as F}from"../ComboBox-GOBOAJ1N.js";import{calendar as I}from"../glyphs/solid/calendar.es.js";import{t as L}from"../List-D-GhoVgB.js";import{chevron_down as R}from"../glyphs/solid/chevron_down.es.js";import{chevron_up as z}from"../glyphs/solid/chevron_up.es.js";u.register(I);var DateField=class extends S{constructor(e){super(e),this._button.setGlyph(`calendar`),this._options.value!==void 0&&this.setValue(this._options.value)}applyOptions(e){return super.applyOptions(e),e.value!==void 0&&(this._options.value=e.value),e.minDate!==void 0&&(this._options.minDate=e.minDate),e.maxDate!==void 0&&(this._options.maxDate=e.maxDate),this}formatValue(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}parseRaw(e){let t=new Date(e+`T00:00:00`);return isNaN(t.getTime())?null:t}createDropdown(){return new A(e=>this.onDropdownSelected(e),{minDate:this._options.minDate??null,maxDate:this._options.maxDate??null})}onDropdownSelected(e){this.setValue(e),this.closeDropdown(),this._input.focus(),c.fireEvent(this._input,`input`)}getPreferredWidth(){return 160}},B=a(DateField);u.register(I);var DateTimeField=class extends S{constructor(e){super(e),this._button.setGlyph(`calendar`),this._options.showSeconds!==void 0&&(this._showSeconds=this._options.showSeconds),this._options.value!==void 0&&this.setValue(this._options.value)}applyOptions(e){return super.applyOptions(e),e.showSeconds!==void 0&&(this._options.showSeconds=e.showSeconds),e.value!==void 0&&(this._options.value=e.value),e.minDate!==void 0&&(this._options.minDate=e.minDate),e.maxDate!==void 0&&(this._options.maxDate=e.maxDate),this}formatValue(e){let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,`0`),r=String(e.getDate()).padStart(2,`0`),i=String(e.getHours()).padStart(2,`0`),a=String(e.getMinutes()).padStart(2,`0`);return this._showSeconds?`${t}-${n}-${r} ${i}:${a}:${String(e.getSeconds()).padStart(2,`0`)}`:`${t}-${n}-${r} ${i}:${a}`}parseRaw(e){let[t,n]=e.trim().split(/\s+/);if(!t||!n)return null;let r=new Date(`${t}T${n}`);return isNaN(r.getTime())?null:r}createDropdown(){return new M(e=>this.onDropdownSelected(e),{showSeconds:this._showSeconds,minDate:this._options.minDate??null,maxDate:this._options.maxDate??null})}onDropdownSelected(e){this.setValue(e),c.fireEvent(this._input,`input`)}getPreferredWidth(){return 200}},V=a(DateTimeField),H={padding:new n(3,3,3,3),cursor:`text`,backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`},PasswordField=class extends T{constructor(e){super(e,H),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),this.setType(`password`),this._options.name===void 0&&this.setName(`password`),this._options.autoComplete===void 0&&this.setAutoComplete(e?.newPassword?`new-password`:`current-password`)}updateHeight(){let e=t.singleLineBoxHeight(this.getInsets(),this.getPadding(),this.getBorderSize());this.setPreferredSize(200,e),this.setMaxSize(2**53-1,e),this.setMinSize(0,e)}},U=a(PasswordField),re={cursor:`text`,padding:new n(3,3,3,3),backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`},UsernameField=class extends T{constructor(e){super(e,re),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),this.setType(`text`),this._options.name===void 0&&this.setName(`username`),this._options.autoComplete===void 0&&this.setAutoComplete(e?.email?`email`:`username`)}updateHeight(){let e=t.singleLineBoxHeight(this.getInsets(),this.getPadding(),this.getBorderSize());this.setPreferredSize(200,e),this.setMaxSize(2**53-1,e),this.setMinSize(0,e)}},W=a(UsernameField),G={tag:`textarea`,cursor:`text`,overflow:`auto`,padding:new n(3,3,3,3),preferredSize:{width:200,height:200},minSize:{width:100,height:100},backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`,foregroundColor:`var(--ts-ui-text-color, black)`},TextArea=class extends T{constructor(e=``,t){super(e?{text:e,...t}:t,G),this.setElementCSSRules({resize:`none`})}applyOptions(e){return super.applyOptions(e),e.rows!==void 0&&this.setRows(e.rows),e.cols!==void 0&&this.setCols(e.cols),e.wrap!==void 0&&this.setWrap(e.wrap),this}getRows(){return this._options.rows??null}setRows(e){return this._options.rows=e,this.setElementAttribute(`rows`,String(e)),this}clearRows(){return this._options.rows===void 0?this:(this._options.rows=void 0,this.removeElementAttribute(`rows`),this)}getCols(){return this._options.cols??null}setCols(e){return this._options.cols=e,this.setElementAttribute(`cols`,String(e)),this}clearCols(){return this._options.cols===void 0?this:(this._options.cols=void 0,this.removeElementAttribute(`cols`),this)}getWrap(){return this._options.wrap??null}setWrap(e){return this._options.wrap=e,this.setElementAttribute(`wrap`,e),this}clearWrap(){return this._options.wrap===void 0?this:(this._options.wrap=void 0,this.removeElementAttribute(`wrap`),this)}getBaseline(){return this.wrapInnerBaseline(t.measureTextBaseline())}init(e){super.init(e);let t=e||this.getElement();return this._options.rows!==void 0&&r.sink.apply(t,{setAttr:{rows:String(this._options.rows)}}),this._options.cols!==void 0&&r.sink.apply(t,{setAttr:{cols:String(this._options.cols)}}),this._options.wrap!==void 0&&r.sink.apply(t,{setAttr:{wrap:this._options.wrap}}),this}},K=a(TextArea),Toggle=class extends h{_track;_thumb;constructor(e){super({...e??{}}),this.setLayoutManager(new g),this._track=new s,this._track.setBackgroundColor(`var(--ts-ui-toggle-track-bg-off, rgb(200, 200, 200))`),this._track.setBorderRadius(`999px`),this._track.setPreferredSize(36,20),this._track.setMinSize(36,20),this._track.setMaxSize(36,20),this._track.setCursor(`pointer`),this._thumb=new s,this._thumb.setBackgroundColor(`var(--ts-ui-toggle-thumb-bg, rgb(255, 255, 255))`),this._thumb.setBorderRadius(`999px`),this._thumb.setPreferredSize(16,16),this._thumb.setMaxSize(16,16),this._thumb.setSize({width:16,height:16}),this._thumb.setShadow(`0 1px 2px rgba(0, 0, 0, 0.25)`),this._thumb.setX(2),this._thumb.setY(2),this._thumb.setPointerEvents(`none`),o.isReducedMotion()||(this._thumb.setTransition(`transform 120ms ease-out`),this._track.setTransition(`background-color 120ms ease-out`)),this._track.addComponent(this._thumb),super.addComponent(this._track),this.getAria().setRole(`switch`),this.getAria().setTabIndex(0),this.getAria().setChecked(!1),this.setOutline(`none`),c.addListener(this._track,`click`,()=>this.activateFromPointer()),this.installKeyboard(),this._options.value!==void 0&&this.applyValue(this._options.value),this._options.label!==void 0&&this.applyLabel(this._options.label),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.value!==void 0&&(this._options.value=e.value),e.label!==void 0&&(this._options.label=e.label),e.enabled!==void 0&&(this._options.enabled=e.enabled),e.readOnly!==void 0&&(this._options.readOnly=e.readOnly),this}activate(){this.setValue(!this.getValue())}getInteractiveSurface(){return this._track}activationKeys(){return[` `,`Enter`]}getValue(){return this._options.value??!1}setValue(e){let t=!!e;return t===this.getValue()?this:(this._options.value=t,this.applyValue(t),this.notifyChange(t),this)}clearValue(){return this.setValue(!1)}getBaseline(){let e=this._label;if(e===null)return null;let t=e.getBaseline();return t===null?null:this.wrapInnerBaseline(t+this.labelCenterOffset())}labelCenterOffset(){if(this._label===null)return 0;let e=this._track.getPreferredSize()?.height??0,t=this._label.getPreferredSize()?.height??e;return Math.max(0,Math.round((e-t)/2))}doLayout(){super.doLayout();let e=this._label,t=this.labelCenterOffset();return e!==null&&t>0&&e.setY(e.getY()+t),this}applyValue(e){this.getAria().setChecked(e),this._thumb.setTransform(e?`translateX(16px)`:`translateX(0px)`),this._track.setBackgroundColor(e?`var(--ts-ui-toggle-track-bg-on, rgb(30, 100, 200))`:`var(--ts-ui-toggle-track-bg-off, rgb(200, 200, 200))`)}},q=a(Toggle),J=22,Y={durationMs:100,backgroundColor:`var(--ts-ui-autocomplete-bg, rgb(255, 255, 255))`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,shadow:`var(--ts-ui-autocomplete-shadow, 2px 4px 8px rgba(0,0,0,0.15))`};new i({scope:`selector`,name:`.AutoCompleteDropdown .List:focus::after`,styles:{content:`none`}});var AutoCompleteDropdown=class extends d{_list;_onSelect;_onHide;constructor(e,t,n){super(n,Y),this._onSelect=e,this._onHide=t,this.setContain(`layout`),this.setLayoutManager(new f),this._list=new L,this._list.setBorder(`none`),this._list.setBorderRadius(`0`),this._list.setFocusOnRowClick(!1),this._list.setSelectFollowsFocus(!1),this.addComponent(this._list),this._list.on(`action`,()=>{let e=this._list.getValue();e&&this._onSelect(e)})}show(e,t){this.getElement(!0),this.pauseLayout(),this._list.setItemsArray(t.map(e=>({key:e,label:e}))),this.resumeLayout();let n=this.getPerimeterSize(),i=n.top+n.bottom,a=r.source.getElementRect(e);return this.setWidth(a.width),this.setHeight(t.length*J+i),this.placeAnchored(a),this.setAnchorElement(e),this.showAnimated(),this.doLayout(),this}hide(){return this.hideAnimated(),this}handleKey(e){return this._list.handleKey(e)}getFocusedRowId(){return this._list.getFocusedRowId()}getList(){return this._list}onHideComplete(){this._onHide()}},X=a(AutoCompleteDropdown);C(`.AutoCompleteField`);var AutoCompleteField=class extends m{_textField;_dropdown;_debounceTimer=null;_selectBag=new l;constructor(e){super(),this.setBorder(`var(--ts-ui-input-border)`),this.setBorderRadius(`var(--ts-ui-border-radius, 4px)`),this._textField=new F,this._textField.setBorder(`none`),this._textField.setBorderRadius(`0`),this._textField.setOutline(`none`),this.addComponent(this._textField),this.syncSizeFromTextField(),this.subscribeTheme(()=>this.syncSizeFromTextField()),this._dropdown=new X(e=>this.onSuggestionSelected(e),()=>this.onDropdownHidden()),this._textField.getAria().setRole(`combobox`),this._textField.getAria().setAutoComplete(`list`),this._textField.getAria().setExpanded(!1),this._textField.getAria().setControls(this._dropdown.getId()),this._textField.getAria().setActiveDescendant(``),c.addListener(this._textField,`input`,()=>this.onInput()),c.addListener(this._textField,`keydown`,e=>this.onKeyDown(e)),c.addListener(this._textField,`blur`,()=>this.onBlur()),this._textField.on(`change`,e=>this.notifyChange(e)),e&&this.applyOptions(e),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.suggestions!==void 0&&this.setSuggestions(e.suggestions),e.minChars!==void 0&&this.setMinChars(e.minChars),e.debounceMs!==void 0&&this.setDebounceMs(e.debounceMs),e.maxSuggestions!==void 0&&this.setMaxSuggestions(e.maxSuggestions),e.matchMode!==void 0&&this.setMatchMode(e.matchMode),e.placeholder!==void 0&&this.setPlaceholder(e.placeholder),e.store!==void 0&&e.displayField!==void 0?this.setStore(e.store,e.displayField):(e.store!==void 0&&(this._options.store=e.store),e.displayField!==void 0&&(this._options.displayField=e.displayField)),this}syncSizeFromTextField(){let e=this._textField.getPreferredSize(),t=this._textField.getMaxSize(),n=this._textField.getMinSize();e&&this.setPreferredSize(e.width,e.height),t&&this.setMaxSize(t.width,t.height),n&&this.setMinSize(n.width,n.height)}getBaseline(){return this.wrapInnerBaseline(this._textField.getBaseline())}doLayout(){return super.doLayout(),this._textField.setX(0),this._textField.setY(0),this._textField.setWidth(this.getWidth()),this._textField.setHeight(this.getHeight()),this}setValue(e){return this._textField.setValue(e),this}getValue(){return this._textField.getValue()}applyEnabled(e){this._textField.setEnabled(e)}applyReadOnly(e){this._textField.setReadOnly(e)}setSuggestions(e){return this._options.suggestions=e,this}setStore(e,t){return this._options.store=e,this._options.displayField=t,this}setMinChars(e){return this._options.minChars=e,this}setDebounceMs(e){return this._options.debounceMs=e,this}setMaxSuggestions(e){return this._options.maxSuggestions=e,this}setMatchMode(e){return this._options.matchMode=e,this}setPlaceholder(e){return this._options.placeholder=e,this._textField.setPlaceholder(e),this}on(e,t){return e===`select`?(this._selectBag.add(`select`,t),this):super.on(e,t)}off(e,t){return e===`select`?(this._selectBag.remove(`select`,t),this):super.off(e,t)}addSelectListener(e){this.on(`select`,e)}onInput(){this._debounceTimer!==null&&clearTimeout(this._debounceTimer);let e=this._options.minChars??1,t=this.getValue();if(t.length<e){this._dropdown.hide();return}this._debounceTimer=setTimeout(()=>this.querySuggestions(t),this._options.debounceMs??200)}onKeyDown(e){if(this._dropdown.isOpen()&&(e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`)&&this._dropdown.handleKey(e)){e.preventDefault(),this.updateActiveDescendant();return}switch(e.key){case`ArrowDown`:e.preventDefault(),this.querySuggestions(this.getValue());break;case`Escape`:this._dropdown.hide(),this._textField.focus();break;case`Tab`:this._dropdown.hide();break;default:break}}onBlur(){setTimeout(()=>{let e=r.source.getActiveElement(),t=this._dropdown.getElement();t&&r.source.contains(t,e)||this._dropdown.hide()},150)}matches(e,t){let n=this._options.matchMode??`contains`,r=n===`containsCaseSensitive`||n===`startsWithCaseSensitive`,i=n===`startsWith`||n===`startsWithCaseSensitive`,a=r?e:e.toLowerCase(),o=r?t:t.toLowerCase();return i?a.startsWith(o):a.includes(o)}querySuggestions(e){let t=this._options.maxSuggestions??10,n=this._options.matchMode??`contains`,r=this._options.suggestions,i=this._options.store,a=this._options.displayField;if(r!==void 0){let n=r.filter(t=>this.matches(t,e)).slice(0,t);e===this.getValue()&&this.showSuggestions(n);return}if(i!==void 0&&a!==void 0){let r=n===`containsCaseSensitive`||n===`startsWithCaseSensitive`,o=n===`startsWith`||n===`startsWithCaseSensitive`?`startsWith`:`contains`;i.clearFilter(),i.filterBy({type:o,field:a,value:e,caseSensitive:r});let s=i.getRecords().map(e=>String(e.get(a))).slice(0,t);e===this.getValue()&&this.showSuggestions(s)}}showSuggestions(e){if(e.length===0){this._dropdown.hide();return}this._dropdown.show(this._textField.getElement(!0),e),this._textField.getAria().setExpanded(!0)}onDropdownHidden(){this._textField.getAria().setExpanded(!1),this._textField.getAria().setActiveDescendant(``)}updateActiveDescendant(){this._textField.getAria().setActiveDescendant(this._dropdown.getFocusedRowId()??``)}onSuggestionSelected(e){this.setValue(e),this._selectBag.fire(`select`,e),this._dropdown.hide(),this._textField.focus()}},ie=a(AutoCompleteField);u.register(z,R);var ae={border:`none`,borderRadius:`0`,insets:new n(0,0,0,0)},SpinButton=class extends v{_listeners=new l;_repeat;constructor(e,t){super(void 0,t,{...ae,glyph:e===`▲`?`chevron-up`:`chevron-down`}),this.updateSize(),this.subscribeTheme(()=>this.updateSize()),t?.shadow===void 0&&this.clearShadow(),t?.pressedShadow===void 0&&this.clearPressedShadow(),this.pinGlyphSize(8),this.getGlyph()?.setTranslate(0,-1),this._repeat=new ee({initialDelay:400,decay:.75,floor:40,onTick:()=>this.emit(`tick`)}),c.addListener(this,`mousedown`,()=>this.onMouseDown()),c.addViewportListener(this,`mouseup`,()=>this.onMouseUp()),c.addViewportListener(this,`mouseleave`,()=>this.onMouseUp()),this.applyListeners(t?.listeners)}updateSize(){let e=t.lineHeightPx()+6+2,n=Math.floor((e-2)/2);this.setPreferredSize(18,n),this.setMinSize(18,n),this.setMaxSize(18,n)}on(e,t){return e===`action`?c.addListener(this,`click`,t):this._listeners.add(e,t),this}off(e,t){return e===`action`?c.removeListener(this,`click`,t):this._listeners.remove(e,t),this}emit(e,...t){this._listeners.fire(e,...t)}onMouseDown(){this._repeat.start()}onMouseUp(){this._repeat.isRunning()&&this._repeat.stop()}},Z=a(SpinButton);C(`.NumberSpinner`),new i({scope:`selector`,name:`.NumberSpinner .TextField:focus`,styles:{boxShadow:`none`}});var oe={insets:new n(0,0,0,0),border:`1px solid var(--ts-ui-button-border, rgb(200, 200, 200))`,borderRadius:`var(--ts-ui-border-radius, 4px)`,backgroundColor:`var(--ts-ui-input-bg, rgb(255, 255, 255))`},NumberSpinner=class extends m{_input;_upBtn;_downBtn;_btnBox;constructor(e){super(e,oe),this._input=new F,this._input.setTextAlign(`right`),this._input.setBorder(`none`),this._input.setBorderRadius(`0`),this._input.setOutline(`none`),this._input.setText(this.formatValue(0)),this._upBtn=new Z(`▲`),this._downBtn=new Z(`▼`),this._upBtn.setBorder({borderTop:`1px solid transparent`}),this._upBtn.setBorderRadius(`0`),this._downBtn.setBorder({borderTop:`1px solid var(--ts-ui-spinner-divider, rgb(180, 180, 180))`}),this._downBtn.setBorderRadius(`0`),this._btnBox=new s;let t=new _;t.setComponentSpacing(0),this._btnBox.setLayoutManager(t),this._btnBox.setInsets(new n(0,0,0,0)),this._btnBox.addComponent(this._upBtn),this._btnBox.addComponent(this._downBtn);let r=new g;r.setComponentSpacing(0),r.setStretching(!0),this.setLayoutManager(r),this.addComponent(this._input,{weight:1}),this.addComponent(this._btnBox),this._upBtn.on(`tick`,()=>this.applyValue(this.getValue()+this.getStep())),this._downBtn.on(`tick`,()=>this.applyValue(this.getValue()-this.getStep())),c.addListener(this._input,`blur`,()=>this.onBlur()),c.addListener(this._input,`keydown`,e=>this.onKeyDown(e)),this.updateHeight(),this.subscribeTheme(()=>this.updateHeight()),this.getAria().setRole(`spinbutton`),this.getAria().setValueNow(0),this._options.min!==void 0&&this.setMin(this._options.min),this._options.max!==void 0&&this.setMax(this._options.max),this._options.step!==void 0&&this.setStep(this._options.step),this._options.precision!==void 0&&this.setPrecision(this._options.precision),this._options.value!==void 0&&this.setValue(this._options.value),this._options.enabled!==void 0&&this.setEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.setReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.min!==void 0&&(this._options.min=e.min),e.max!==void 0&&(this._options.max=e.max),e.step!==void 0&&(this._options.step=e.step),e.precision!==void 0&&(this._options.precision=e.precision),e.value!==void 0&&(this._options.value=e.value),e.enabled!==void 0&&(this._options.enabled=e.enabled),this}getBaseline(){return this.wrapInnerBaseline(this._input.getBaseline())}updateHeight(){let n=t.singleLineBoxHeight(this.getInsets(),this._input.getPadding(),this.getBorderSize());this.setPreferredSize(120,n),this.setMaxSize(e,n),this.setMinSize(0,n)}getValue(){return this._options.value??0}setValue(e){return this._setValueSilent(e),this}getMin(){return this._options.min??-1/0}setMin(e){return this._options.min=e,this.getAria().setValueMin(isFinite(e)?e:null),this}getMax(){return this._options.max??1/0}setMax(e){return this._options.max=e,this.getAria().setValueMax(isFinite(e)?e:null),this}getStep(){return this._options.step??1}setStep(e){return this._options.step=e,this}getPrecision(){return this._options.precision??null}setPrecision(e){return this._options.precision=e,this._input.setText(this.formatValue(this.getValue())),this}applyEnabled(e){e?(this._input.setDisabledAttribute(!1),this._upBtn.setPointerEvents(`auto`),this._downBtn.setPointerEvents(`auto`),this.clearOpacity()):(this._input.setDisabledAttribute(!0),this._upBtn.setPointerEvents(`none`),this._downBtn.setPointerEvents(`none`),this.setOpacity(.5))}applyReadOnly(e){this._input.setReadOnly(e)}applyValue(e){if(!this.isEnabled())return;let t=this.normalize(e);if(t===this.getValue()){this._input.setText(this.formatValue(t));return}this._options.value=t,this._input.setText(this.formatValue(t)),this.getAria().setValueNow(t),this.notifyChange(t)}_setValueSilent(e){let t=this.normalize(e);this._options.value=t,this._input.setText(this.formatValue(t)),this.getAria().setValueNow(t)}normalize(e){let t=Math.min(this.getMax(),Math.max(this.getMin(),e));return t=Math.round(t/this.getStep())*this.getStep(),t=parseFloat(t.toFixed(this.derivePrecision())),t}onBlur(){let e=parseFloat(this._input.getText().valueOf());if(isNaN(e)){this._input.setText(this.formatValue(this.getValue()));return}this.applyValue(e)}onKeyDown(e){if(e.key===`ArrowUp`){e.preventDefault(),this.applyValue(this.getValue()+this.getStep());return}if(e.key===`ArrowDown`){e.preventDefault(),this.applyValue(this.getValue()-this.getStep());return}e.key===`Enter`&&this.onBlur()}formatValue(e){return e.toFixed(this.derivePrecision())}derivePrecision(){let e=this._options.precision??null;if(e!==null)return e;let t=String(this.getStep()),n=t.indexOf(`.`);return n>=0?t.length-n-1:0}},se=a(NumberSpinner),Q=3,$=`no file selected`,HiddenFileInput=class extends s{_type=null;_multiple=!1;_accept=null;constructor(){super({tag:`input`}),this.setDisplayed(!1),this.setType(`file`)}getType(){return this._type}setType(e){this._type=e,this.setElementAttribute(`type`,e)}setMultipleAttribute(e){this._multiple=e,e?this.setElementAttribute(`multiple`,``):this.removeElementAttribute(`multiple`)}setAcceptAttribute(e){this._accept=e,this.setElementAttribute(`accept`,e)}setDisabled(e){this.setDisabledAttribute(e)}openPicker(){let e=this.getElement();e&&r.sink.click(e)}getFiles(){let e=this.getElement();return e?r.source.getFiles(e):null}clearFiles(){let e=this.getElement();e&&r.sink.setValue(e,``)}init(e){super.init(e);let t=e??this.getElement();return t?(this._type!==null&&r.sink.apply(t,{setAttr:{type:this._type}}),this._multiple&&r.sink.apply(t,{setAttr:{multiple:``}}),this._accept!==null&&r.sink.apply(t,{setAttr:{accept:this._accept}}),this):this}},FileField=class extends m{_button;_label;_input;_droppedFiles=[];constructor(e){super({...e??{}}),this.setLayoutManager(new g),this._button=new v(this.defaultButtonText()),this._button.on(`action`,()=>this.openPicker()),this._label=new p($,{truncate:!0}),this._label.setForegroundColor(`var(--ts-ui-form-text, inherit)`),this._input=new HiddenFileInput,c.addListener(this._input,`change`,()=>this.onNativeChange()),super.addComponent(this._button),super.addComponent(this._label,{weight:1}),super.addComponent(this._input),this._options.multiple!==void 0&&this.setMultiple(this._options.multiple),this._options.accept!==void 0&&this.setAccept(this._options.accept),this._options.buttonText!==void 0&&this._button.setText(this._options.buttonText),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.multiple!==void 0&&(this._options.multiple=e.multiple),e.accept!==void 0&&(this._options.accept=e.accept),e.buttonText!==void 0&&(this._options.buttonText=e.buttonText),this}defaultButtonText(){return this.isMultiple()?`Choose files…`:`Choose file…`}openPicker(){!this.isEnabled()||this.isReadOnly()||this._input.openPicker()}onNativeChange(){this._droppedFiles=[];let e=this.getValue();this.updateLabel(e),this.notifyChange(e)}acceptDroppedFiles(e){this._droppedFiles=Array.from(e);let t=this.getValue();this.updateLabel(t),this.notifyChange(t)}getValue(){if(this._droppedFiles.length>0)return this._droppedFiles;let e=this._input.getFiles();return e?Array.from(e):[]}setValue(e){return e&&e.length>0?(console.warn(`FileField '`+this.getId()+`' setValue ignored a non-empty File[]: the browser security model forbids programmatically populating a file input. Only setValue([]) (clearing) is supported.`),this):this.clearValue()}clearValue(){this._droppedFiles=[],this._input.clearFiles();let e=this.getValue();return this.updateLabel(e),this.notifyChange(e),this}isMultiple(){return this._options.multiple??!1}setMultiple(e){return this._options.multiple=!!e,this._input.setMultipleAttribute(this._options.multiple),this._options.buttonText===void 0&&this._button.setText(this.defaultButtonText()),this}getAccept(){return this._options.accept??null}setAccept(e){return this._options.accept=e,this._input.setAcceptAttribute(e),this}updateLabel(e){e.length===0?this._label.setText($):e.length===1?this._label.setText(e[0].name):e.length>Q?this._label.setText(e.length+` files`):this._label.setText(e.map(e=>e.name).join(`, `))}applyEnabled(e){this._button.setEnabled(e),this._input.setDisabled(!e)}applyReadOnly(e){this._button.setEnabled(!e&&this.isEnabled()),this.getAria().setReadOnly(e)}},ce=a(FileField),le=`var(--ts-ui-filedropzone-border, 2px dashed rgba(80, 140, 240, 0.40))`,ue=`var(--ts-ui-filedropzone-bg, rgba(80, 140, 240, 0.06))`,de=`var(--ts-ui-filedropzone-active-border, 2px dashed rgba(80, 140, 240, 0.80))`,fe=`var(--ts-ui-filedropzone-active-bg, rgba(80, 140, 240, 0.18))`,pe=`Drop files here or click to browse`,FileDropZone=class extends m{_prompt;_field;_dragDepth=0;constructor(e){super({...e??{}}),this.setLayoutManager(new _),this._prompt=new p(this._options.promptText??pe),this._prompt.setForegroundColor(`var(--ts-ui-form-text, inherit)`),this._field=new FileField(this.fieldOptions()),this._field.on(`change`,e=>this.notifyChange(e)),super.addComponent(this._prompt),super.addComponent(this._field),this.setActive(!1),this.setBorderRadius(`var(--ts-ui-border-radius, 4px)`),c.addSubtreeListener(this,`dragenter`,e=>this.onDragEnter(e)),c.addSubtreeListener(this,`dragover`,e=>this.onDragOver(e)),c.addSubtreeListener(this,`dragleave`,e=>this.onDragLeave(e)),c.addSubtreeListener(this,`drop`,e=>this.onDrop(e)),this._options.enabled!==void 0&&this.applyEnabled(this._options.enabled),this._options.readOnly!==void 0&&this.applyReadOnly(this._options.readOnly)}applyOptions(e){return super.applyOptions(e),e.promptText!==void 0&&(this._options.promptText=e.promptText),this}fieldOptions(){return{multiple:this._options.multiple,accept:this._options.accept,buttonText:this._options.buttonText}}setActive(e){this.setBorder(e?de:le),this.setBackgroundColor(e?fe:ue)}onDragEnter(e){e.preventDefault(),this._dragDepth++,this._dragDepth===1&&this.setActive(!0)}onDragOver(e){e.preventDefault()}onDragLeave(e){e.preventDefault(),this._dragDepth=Math.max(0,this._dragDepth-1),this._dragDepth===0&&this.setActive(!1)}onDrop(e){if(e.preventDefault(),this._dragDepth=0,this.setActive(!1),!this.isEnabled()||this.isReadOnly())return;let t=e.dataTransfer?.files;!t||t.length===0||this._field.acceptDroppedFiles(t)}getValue(){return this._field.getValue()}setValue(e){return this._field.setValue(e),this}clearValue(){return this._field.clearValue(),this}applyEnabled(e){this._field.setEnabled(e)}applyReadOnly(e){this._field.setReadOnly(e)}},me=a(FileDropZone);export{h as AbstractBooleanInput,m as AbstractInput,S as AbstractPickerField,ie as AutoCompleteField,k as Checkbox,P as ComboBox,B as DateField,A as DatePickerDropdown,V as DateTimeField,M as DateTimePickerDropdown,me as FileDropZone,ce as FileField,y as Label,w as Link,se as NumberSpinner,U as PasswordField,j as PickerButton,N as PickerCell,ne as PickerCellList,D as PickerColumn,O as PickerInput,te as RadioButton,b as Slider,Z as SpinButton,p as Text,K as TextArea,F as TextField,T as TextInput,E as TimeField,x as TimePickerDropdown,q as Toggle,W as UsernameField};
+//# sourceMappingURL=input.es.js.map