@fusion.dev/helix-sandbox 0.0.0-dev

package/types/jsx.d.ts

@@ -0,0 +1,638 @@
+import type {
+  HelixBeforeEditEvent,
+  HelixCaretEvent,
+  HelixEditEvent,
+  HelixSandboxEditor,
+} from '@fusion.dev/helix-sandbox';
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = "",
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+
+/**
+ * The JSX a tag is written in. React, Preact, and Solid each read a tag map
+ * with their own name, and every other framework reads it as `"other"`.
+ *
+ * **Each framework's types are imported only on its own branch below.** Every
+ * framework loads this file, the Svelte typings included, and a project has
+ * only its own framework's types installed. A reference to a module that is
+ * not installed is an error in any file the program loads, under
+ * `skipLibCheck: false`, so the comment above each import keeps a project
+ * without that module compiling. Where the module is installed, the import
+ * resolves as written.
+ */
+type Framework = "other" | "preact" | "react" | "solid";
+
+/**
+ * `ref` as each framework types it, and the generator's shape for the rest,
+ * which is Solid's own.
+ */
+type FrameworkRef<T extends HTMLElement, F extends Framework> = F extends "react"
+  ? // @ts-ignore: React's types, read only by React's JSX.
+    import('react').Ref<T>
+  : F extends "preact"
+    ? // @ts-ignore: Preact's types, read only by Preact's JSX.
+      import('preact').Ref<T>
+    : T | ((e: T) => void);
+
+/** `style` as each framework types it on a `<div>`, and any object for the rest. */
+type FrameworkStyle<F extends Framework> = F extends "react"
+  ? // @ts-ignore: React's types, read only by React's JSX.
+    import('react').CSSProperties
+  : F extends "preact"
+    ? // @ts-ignore: Preact's types, read only by Preact's JSX.
+      import('preact').JSX.IntrinsicElements["div"]["style"]
+    : F extends "solid"
+      ? // @ts-ignore: Solid's types, read only by Solid's JSX.
+        import('solid-js').JSX.IntrinsicElements["div"]["style"]
+      : Record<string, string | number>;
+
+type BaseProps<T extends HTMLElement, F extends Framework = "other"> = {
+  /** Skips the hydration check for an element whose DOM is written by something other than React, which a custom element writing its own state attributes is. React takes it, and no other framework does. */
+  suppressHydrationWarning?: (F extends "react" ? boolean : never) | undefined;
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: (string) | undefined;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: (string) | undefined;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: (Record<string, boolean | undefined>) | undefined;
+  /** Specifies the text direction of the element. */
+  dir?: ("ltr" | "rtl") | undefined;
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: (string) | undefined;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: (string) | undefined;
+  /** Specifies whether the element should be hidden. */
+  hidden?: (boolean | string) | undefined;
+  /** A unique identifier for the element. */
+  id?: (string) | undefined;
+  /** Keys tell React which array item each component corresponds to */
+  key?: (string | number) | undefined;
+  /** Specifies the language of the element. */
+  lang?: (string) | undefined;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: (string) | undefined;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: (string) | undefined;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: (FrameworkRef<T, F>) | undefined;
+  /** Adds a reference for a custom element slot */
+  slot?: (string) | undefined;
+  /** Prop for setting inline styles */
+  style?: (FrameworkStyle<F>) | undefined;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: (number) | undefined;
+  /** Specifies the tooltip text for the element. */
+  title?: (string) | undefined;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: ("yes" | "no") | undefined;
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: ("auto" | "hint" | "manual") | undefined;
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: (string) | undefined;
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: ("show" | "hide" | "toggle") | undefined;
+};
+
+type BaseEvents<T = HTMLElement> = {
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: ((event: DragEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: ((event: MouseEvent & { currentTarget: T }) => void) | undefined;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: ((event: KeyboardEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a key is released.. */
+  onKeyUp?: ((event: KeyboardEvent & { currentTarget: T }) => void) | undefined;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: ((event: FocusEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the element loses focus. */
+  onBlur?: ((event: FocusEvent & { currentTarget: T }) => void) | undefined;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: ((event: Event & { currentTarget: T }) => void) | undefined;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: ((event: Event & { currentTarget: T }) => void) | undefined;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: ((event: Event & { currentTarget: T }) => void) | undefined;
+  /** Fired when a form is reset. */
+  onReset?: ((event: Event & { currentTarget: T }) => void) | undefined;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: ((event: UIEvent & { currentTarget: T }) => void) | undefined;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: ((event: WheelEvent & { currentTarget: T }) => void) | undefined;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: ((event: AnimationEvent & { currentTarget: T }) => void) | undefined;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: ((event: TransitionEvent & { currentTarget: T }) => void) | undefined;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: ((event: Event & { currentTarget: T }) => void) | undefined;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: ((event: Event & { currentTarget: T }) => void) | undefined;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: ((event: ClipboardEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: ((event: ClipboardEvent & { currentTarget: T }) => void) | undefined;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: ((event: ClipboardEvent & { currentTarget: T }) => void) | undefined;
+};
+
+/** `HelixSandboxEditor` component event */
+export type HelixSandboxEditorElementEvent<E = Event> = TypedEvent<
+  HelixSandboxEditor,
+  E
+>;
+/** `helix-before-edit` event type */
+export type HelixSandboxEditorHelixBeforeEditElementEvent =
+  HelixSandboxEditorElementEvent<HelixBeforeEditEvent>;
+/** `helix-caret` event type */
+export type HelixSandboxEditorHelixCaretElementEvent =
+  HelixSandboxEditorElementEvent<HelixCaretEvent>;
+/** `helix-edit` event type */
+export type HelixSandboxEditorHelixEditElementEvent =
+  HelixSandboxEditorElementEvent<HelixEditEvent>;
+
+export type HelixSandboxEditorProps = {
+  /** Accessible name for the editable region. */
+  "field-label"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  /** Accessible name for the editable region. */
+  fieldLabel?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  /** The language of the source, which decides how it is highlighted. A name
+the editor does not read draws the source plain. */
+  language?: (HelixSandboxEditor["language"]) | undefined;
+  /** Which source this pane holds, echoed in every change. */
+  name?: (HelixSandboxEditor["name"]) | undefined;
+  /** Whether the text can be changed.
+
+`EditorState.readOnly` rather than removing the editor's focus or its
+keymap: a reader still needs to select the text, scroll it, and put a
+cursor in it to read a long line. What it stops is the typing. */
+  readonly?: (HelixSandboxEditor["readOnly"]) | undefined;
+  /** Whether the text can be changed.
+
+`EditorState.readOnly` rather than removing the editor's focus or its
+keymap: a reader still needs to select the text, scroll it, and put a
+cursor in it to read a long line. What it stops is the typing. */
+  readOnly?: (HelixSandboxEditor["readOnly"]) | undefined;
+  /** The source being edited. */
+  value?: (HelixSandboxEditor["value"]) | undefined;
+
+  /** Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves. */
+  "onhelix-before-edit"?: ((
+    e: HelixSandboxEditorHelixBeforeEditElementEvent,
+  ) => void) | undefined;
+  /** Fired when the cursor moves, with its line and column. */
+  "onhelix-caret"?: ((e: HelixSandboxEditorHelixCaretElementEvent) => void) | undefined;
+  /** Fired after the source was edited, with the new source. */
+  "onhelix-edit"?: ((e: HelixSandboxEditorHelixEditElementEvent) => void) | undefined;
+};
+
+export type HelixSandboxEditorSolidJsProps = {
+  /** Accessible name for the editable region. */
+  "attr:field-label"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  /** Accessible name for the editable region. */
+  "prop:fieldLabel"?: (HelixSandboxEditor["fieldLabel"]) | undefined;
+  /** The language of the source, which decides how it is highlighted. A name
+the editor does not read draws the source plain. */
+  "prop:language"?: (HelixSandboxEditor["language"]) | undefined;
+  /** Which source this pane holds, echoed in every change. */
+  "prop:name"?: (HelixSandboxEditor["name"]) | undefined;
+  /** Whether the text can be changed.
+
+`EditorState.readOnly` rather than removing the editor's focus or its
+keymap: a reader still needs to select the text, scroll it, and put a
+cursor in it to read a long line. What it stops is the typing. */
+  "bool:readonly"?: (HelixSandboxEditor["readOnly"]) | undefined;
+  /** Whether the text can be changed.
+
+`EditorState.readOnly` rather than removing the editor's focus or its
+keymap: a reader still needs to select the text, scroll it, and put a
+cursor in it to read a long line. What it stops is the typing. */
+  "prop:readOnly"?: (HelixSandboxEditor["readOnly"]) | undefined;
+  /** The source being edited. */
+  "prop:value"?: (HelixSandboxEditor["value"]) | undefined;
+  /** Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves. */
+  "on:helix-before-edit"?: ((
+    e: HelixSandboxEditorHelixBeforeEditElementEvent,
+  ) => void) | undefined;
+  /** Fired when the cursor moves, with its line and column. */
+  "on:helix-caret"?: ((e: HelixSandboxEditorHelixCaretElementEvent) => void) | undefined;
+  /** Fired after the source was edited, with the new source. */
+  "on:helix-edit"?: ((e: HelixSandboxEditorHelixEditElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
+export type CustomElements<F extends Framework = "other"> = {
+  /**
+   * CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,
+   * number its lines, or say where the cursor is, and a status bar reading line
+   * and column has to ask something.
+   *
+   * **On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the
+   * package's root exports its class as a type only, because CodeMirror is most
+   * of what the package weighs over the wire. A sandbox with no editable pane
+   * pays for none, and neither does a site that registers its elements once.
+   *
+   * `language` names the grammar by the name a file or a sandbox pane carries:
+   * `css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor
+   * does not read draws the source plain, and the console says so once.
+   *
+   * Each edit a reader makes is `helix-before-edit` first, which you can cancel
+   * to refuse the edit, and `helix-edit` once the source holds it, as
+   * `helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and
+   * sends neither. **The editor is `:state(modified)` while its source differs
+   * from the source it was given**, the first `value` or the last one set from
+   * outside, and `reset()` puts that source back as an edit.
+   *
+   * The view is built once and reconfigured, not rebuilt. Replacing it on every
+   * change would throw away the undo history, the scroll position, and the
+   * selection, which is most of what an editor is.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `field-label`/`fieldLabel`: Accessible name for the editable region.
+   * - `language`: The language of the source, which decides how it is highlighted. A name
+   * the editor does not read draws the source plain.
+   * - `name`: Which source this pane holds, echoed in every change.
+   * - `readonly`/`readOnly`: Whether the text can be changed.
+   *
+   * `EditorState.readOnly` rather than removing the editor's focus or its
+   * keymap: a reader still needs to select the text, scroll it, and put a
+   * cursor in it to read a long line. What it stops is the typing.
+   * - `value`: The source being edited.
+   * - `modified`: Whether the source differs from the source the editor was given: its
+   * first `value`, or the last one set from outside. (property only) (readonly)
+   * - `caret`: Where the cursor is, counted from one, as an editor reports it. (property only) (readonly)
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-before-edit`: Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-caret`: Fired when the cursor moves, with its line and column.
+   * - `helix-edit`: Fired after the source was edited, with the new source.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `reset() => void`: Puts back the source the editor was given, as an edit: `helix-before-edit`
+   * is sent first and can refuse it, and a sandbox passes it to its preview.
+   * - `focus() => void`: Moves focus into the text, not onto the host.
+   *
+   * The host is not focusable: what a reader types into is CodeMirror's
+   * contenteditable, several nodes down inside this shadow root. Without this,
+   * `editor.focus()` from outside silently does nothing.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `editor`: The element CodeMirror is mounted into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `modified`: While the source differs from the source the editor was given, until `reset()` or a new `value`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-sandbox-editor": Partial<
+    HelixSandboxEditorProps & BaseProps<HelixSandboxEditor, F> & BaseEvents<HelixSandboxEditor>
+  >;
+};
+
+export type CustomElementsSolidJs = {
+  /**
+   * CodeMirror, not a `<textarea>`. A textarea cannot highlight what it holds,
+   * number its lines, or say where the cursor is, and a status bar reading line
+   * and column has to ask something.
+   *
+   * **On its own path.** This is `@fusion.dev/helix-sandbox/editor`, and the
+   * package's root exports its class as a type only, because CodeMirror is most
+   * of what the package weighs over the wire. A sandbox with no editable pane
+   * pays for none, and neither does a site that registers its elements once.
+   *
+   * `language` names the grammar by the name a file or a sandbox pane carries:
+   * `css`, `html`, `js`, `jsx`, `mjs`, `sh`, `ts` or `tsx`. A name the editor
+   * does not read draws the source plain, and the console says so once.
+   *
+   * Each edit a reader makes is `helix-before-edit` first, which you can cancel
+   * to refuse the edit, and `helix-edit` once the source holds it, as
+   * `helix-sandbox-source` sends them. A `value` set from outside is the source the editor is given, and
+   * sends neither. **The editor is `:state(modified)` while its source differs
+   * from the source it was given**, the first `value` or the last one set from
+   * outside, and `reset()` puts that source back as an edit.
+   *
+   * The view is built once and reconfigured, not rebuilt. Replacing it on every
+   * change would throw away the undo history, the scroll position, and the
+   * selection, which is most of what an editor is.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `field-label`/`fieldLabel`: Accessible name for the editable region.
+   * - `language`: The language of the source, which decides how it is highlighted. A name
+   * the editor does not read draws the source plain.
+   * - `name`: Which source this pane holds, echoed in every change.
+   * - `readonly`/`readOnly`: Whether the text can be changed.
+   *
+   * `EditorState.readOnly` rather than removing the editor's focus or its
+   * keymap: a reader still needs to select the text, scroll it, and put a
+   * cursor in it to read a long line. What it stops is the typing.
+   * - `value`: The source being edited.
+   * - `modified`: Whether the source differs from the source the editor was given: its
+   * first `value`, or the last one set from outside. (property only) (readonly)
+   * - `caret`: Where the cursor is, counted from one, as an editor reports it. (property only) (readonly)
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-before-edit`: Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-caret`: Fired when the cursor moves, with its line and column.
+   * - `helix-edit`: Fired after the source was edited, with the new source.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `reset() => void`: Puts back the source the editor was given, as an edit: `helix-before-edit`
+   * is sent first and can refuse it, and a sandbox passes it to its preview.
+   * - `focus() => void`: Moves focus into the text, not onto the host.
+   *
+   * The host is not focusable: what a reader types into is CodeMirror's
+   * contenteditable, several nodes down inside this shadow root. Without this,
+   * `editor.focus()` from outside silently does nothing.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `editor`: The element CodeMirror is mounted into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `modified`: While the source differs from the source the editor was given, until `reset()` or a new `value`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-sandbox-editor": Partial<
+    HelixSandboxEditorProps &
+      HelixSandboxEditorSolidJsProps &
+      BaseProps<HelixSandboxEditor, "solid"> &
+      BaseEvents<HelixSandboxEditor>
+  >;
+};
+
+export type CustomCssProperties = {};
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements<"react"> {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements<"react"> {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "react/jsx-dev-runtime" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements<"react"> {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements<"preact"> {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@builder.io/qwik" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@stencil/core" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "hono/jsx" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "react-native" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "solid-js/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+}
+
+/**
+ * A prop as Solid's JSX takes it without the compiler, with
+ * `jsxImportSource: "solid-js/h"`. `h` calls a function given to a prop for
+ * the prop's value, and calls it again when a signal it read changes, so each
+ * prop takes its value or a function that returns it. `ref`, `children`, and
+ * the props named `on…` are taken as they are, as `h` takes them. A property
+ * whose value is a function takes only a function that returns it, because
+ * `h` calls any function it is given. A prop typed `any` stays `any`.
+ */
+type SolidHProp<K, V> = K extends "children" | "ref" | `on${string}`
+  ? V
+  : 0 extends 1 & V
+    ? V
+    : [Exclude<V, undefined>] extends [(...args: never[]) => unknown]
+      ? (() => V) | undefined
+      : V | (() => V);
+
+/** One tag's props as Solid's JSX takes them without the compiler. */
+type SolidHProps<P> = { [K in keyof P]: SolidHProp<K, P[K]> };
+
+/** The tag map Solid's JSX reads without the compiler: `CustomElementsSolidJs`, each prop as `SolidHProp` takes it. */
+export type CustomElementsSolidH = {
+  [Tag in keyof CustomElementsSolidJs]: SolidHProps<CustomElementsSolidJs[Tag]>;
+};
+
+declare module "solid-js/h/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidH {}
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}

package/types/svelte.d.ts

@@ -0,0 +1,36 @@
+// Generated by `helix-svelte-types`. Do not edit.
+//
+// Svelte binds a handler as `onhelix-input={…}`, which is the shape the JSX
+// types already describe, so this augments `SvelteHTMLElements` with them
+// rather than emitting a second copy that could disagree.
+import type { CustomElements } from '@fusion.dev/helix-sandbox/jsx'
+import type { HTMLAttributes } from 'svelte/elements'
+
+// React's spellings, which Svelte reads another way or not at all.
+type ReactOnly = 'className' | 'htmlFor' | 'key' | 'ref' | 'suppressHydrationWarning'
+
+// The element a tag makes, where the DOM lib knows it.
+type ElementOf<Tag extends string> = Tag extends keyof HTMLElementTagNameMap
+  ? HTMLElementTagNameMap[Tag]
+  : HTMLElement
+
+// Svelte's attributes and lowercase events, then the Helix props and
+// `onhelix-*` handlers Svelte's do not name. `onClick` and the other
+// camel-case handlers are React's, and Svelte would read each as an event
+// with a capital letter.
+type Helix<Tag extends keyof CustomElements> = HTMLAttributes<ElementOf<Tag>> & {
+  [Key in keyof CustomElements[Tag] as Key extends
+    | keyof HTMLAttributes<ElementOf<Tag>>
+    | ReactOnly
+    | `on${Uppercase<string>}${string}`
+    ? never
+    : Key]: CustomElements[Tag][Key]
+}
+
+declare module 'svelte/elements' {
+  interface SvelteHTMLElements {
+    'helix-sandbox-editor': Helix<'helix-sandbox-editor'>
+  }
+}
+
+export {}