@fusion.dev/helix 0.162.1 → 0.163.0

package/types/jsx.d.ts

@@ -4748,6 +4748,13 @@ zoom as a percentage, written the way the element's locale writes one. */
   /** What screen readers hear after a zoom button or key, with `{zoom}` for the
 zoom as a percentage, written the way the element's locale writes one. */
   zoomedLabel?: (HelixCanvas["zoomedLabel"]) | undefined;
+  /** Draws every connection's line: a function from where it leaves and
+arrives, and the sides it does, to its SVG path and where its label sits.
+
+Absent, or returning nothing for a connection, draws the board's own
+route. A function that throws draws the board's own too, and the error is
+reported to the page as an uncaught one. Set it as a property. */
+  edgeRoute?: (HelixCanvas["edgeRoute"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -5204,6 +5211,13 @@ zoom as a percentage, written the way the element's locale writes one. */
   /** What screen readers hear after a zoom button or key, with `{zoom}` for the
 zoom as a percentage, written the way the element's locale writes one. */
   "prop:zoomedLabel"?: (HelixCanvas["zoomedLabel"]) | undefined;
+  /** Draws every connection's line: a function from where it leaves and
+arrives, and the sides it does, to its SVG path and where its label sits.
+
+Absent, or returning nothing for a connection, draws the board's own
+route. A function that throws draws the board's own too, and the error is
+reported to the page as an uncaught one. Set it as a property. */
+  "prop:edgeRoute"?: (HelixCanvas["edgeRoute"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -23314,7 +23328,8 @@ was never tickable look identical from here. Announcing only the ticked one
 as a checkbox tells a reader its siblings are commands, which is the one
 thing they are not.
 
-`checked` implies it, so a row that is on never has to say both.
+`checked` and `exclusive` imply it, so a row that is on, or one of a set,
+never has to say both.
 
 Choosing the row checks or unchecks it, after a `helix-before-toggle` that
 you can cancel. */
@@ -23324,6 +23339,18 @@ you can cancel. */
 The row changes it when it is chosen. Not reflected: the attribute is the
 state you start the row in, and `:state(checked)` carries the current one. */
   checked?: (HelixMenuItem["checked"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "close-on-select"?: (HelixMenuItem["closeOnSelect"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  closeOnSelect?: (HelixMenuItem["closeOnSelect"]) | undefined;
   /** Whether the row is disabled, so it cannot be chosen. */
   disabled?: (HelixMenuItem["disabled"]) | undefined;
   /** Whether the link downloads the file when the row is chosen.
@@ -23340,8 +23367,7 @@ that row and unchecks the others. Choosing the row that is checked leaves
 it checked. `menuitemradio` tells a reader which kind of set they are in,
 where `menuitemcheckbox` says every row is independent.
 
-Meaningless without `checkable`, since a row that cannot be ticked is not
-one of a set of anything. */
+It makes the row a choice, so it needs no `checkable` beside it. */
   exclusive?: (HelixMenuItem["exclusive"]) | undefined;
   /** The URL the row links to. Setting it renders the row as a link.
 
@@ -23388,7 +23414,8 @@ was never tickable look identical from here. Announcing only the ticked one
 as a checkbox tells a reader its siblings are commands, which is the one
 thing they are not.
 
-`checked` implies it, so a row that is on never has to say both.
+`checked` and `exclusive` imply it, so a row that is on, or one of a set,
+never has to say both.
 
 Choosing the row checks or unchecks it, after a `helix-before-toggle` that
 you can cancel. */
@@ -23398,6 +23425,18 @@ you can cancel. */
 The row changes it when it is chosen. Not reflected: the attribute is the
 state you start the row in, and `:state(checked)` carries the current one. */
   "prop:checked"?: (HelixMenuItem["checked"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "bool:close-on-select"?: (HelixMenuItem["closeOnSelect"]) | undefined;
+  /** Whether choosing the row closes the menu.
+
+Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+open after a Space on a choice row. Write `close-on-select="false"` for a
+row that changes something the reader is watching, such as a zoom step. */
+  "prop:closeOnSelect"?: (HelixMenuItem["closeOnSelect"]) | undefined;
   /** Whether the row is disabled, so it cannot be chosen. */
   "prop:disabled"?: (HelixMenuItem["disabled"]) | undefined;
   /** Whether the link downloads the file when the row is chosen.
@@ -23414,8 +23453,7 @@ that row and unchecks the others. Choosing the row that is checked leaves
 it checked. `menuitemradio` tells a reader which kind of set they are in,
 where `menuitemcheckbox` says every row is independent.
 
-Meaningless without `checkable`, since a row that cannot be ticked is not
-one of a set of anything. */
+It makes the row a choice, so it needs no `checkable` beside it. */
   "prop:exclusive"?: (HelixMenuItem["exclusive"]) | undefined;
   /** The URL the row links to. Setting it renders the row as a link.
 
@@ -23507,6 +23545,18 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "back-label"?: (HelixMenu["backLabel"]) | undefined;
   /** The text of the row that returns from a submenu. */
   backLabel?: (HelixMenu["backLabel"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "close-on-select"?: (HelixMenu["closeOnSelect"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  closeOnSelect?: (HelixMenu["closeOnSelect"]) | undefined;
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixMenu["context"]) | undefined;
@@ -23586,6 +23636,18 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "attr:back-label"?: (HelixMenu["backLabel"]) | undefined;
   /** The text of the row that returns from a submenu. */
   "prop:backLabel"?: (HelixMenu["backLabel"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "bool:close-on-select"?: (HelixMenu["closeOnSelect"]) | undefined;
+  /** Whether choosing a row closes the menu.
+
+On by default, and a Space on a choice row leaves the menu open either way.
+Write `close-on-select="false"` to keep the menu open after every choice, as
+Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
+  "prop:closeOnSelect"?: (HelixMenu["closeOnSelect"]) | undefined;
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   "prop:context"?: (HelixMenu["context"]) | undefined;
@@ -28779,6 +28841,9 @@ keyed on this attribute, and of the 56 tokens that differ by scheme the
 theme engine emits 19. The other 37 would stay light in a dark preview,
 including every one of the 24 series colors a chart reads. */
   colorMode?: (HelixSandboxPreview["colorMode"]) | undefined;
+  /** Whether the preview draws a reload button and a button that opens the
+example in a new tab, in its corner. */
+  controls?: (HelixSandboxPreview["controls"]) | undefined;
   /** Writing direction inside the frame.
 
 Not reflected. It is payload for the render message and nothing selects on
@@ -28800,6 +28865,18 @@ Not reflected, for `direction`'s reason: the placement is applied by the
 document inside the frame, against its own root, so no rule on this side
 could read it. */
   layout?: (HelixSandboxPreview["layout"]) | undefined;
+  /** The name of the button that opens the example in a new tab, under
+`controls`. */
+  "open-label"?: (HelixSandboxPreview["openLabel"]) | undefined;
+  /** The name of the button that opens the example in a new tab, under
+`controls`. */
+  openLabel?: (HelixSandboxPreview["openLabel"]) | undefined;
+  /** The name of the button that reloads the frame's document, under
+`controls`. */
+  "reload-label"?: (HelixSandboxPreview["reloadLabel"]) | undefined;
+  /** The name of the button that reloads the frame's document, under
+`controls`. */
+  reloadLabel?: (HelixSandboxPreview["reloadLabel"]) | undefined;
   /** A script to run as a module after the markup, on every render of new
 source. A sandbox writes its `js` pane here. */
   script?: (HelixSandboxPreview["script"]) | undefined;
@@ -28846,6 +28923,9 @@ keyed on this attribute, and of the 56 tokens that differ by scheme the
 theme engine emits 19. The other 37 would stay light in a dark preview,
 including every one of the 24 series colors a chart reads. */
   "prop:colorMode"?: (HelixSandboxPreview["colorMode"]) | undefined;
+  /** Whether the preview draws a reload button and a button that opens the
+example in a new tab, in its corner. */
+  "prop:controls"?: (HelixSandboxPreview["controls"]) | undefined;
   /** Writing direction inside the frame.
 
 Not reflected. It is payload for the render message and nothing selects on
@@ -28867,6 +28947,18 @@ Not reflected, for `direction`'s reason: the placement is applied by the
 document inside the frame, against its own root, so no rule on this side
 could read it. */
   "prop:layout"?: (HelixSandboxPreview["layout"]) | undefined;
+  /** The name of the button that opens the example in a new tab, under
+`controls`. */
+  "attr:open-label"?: (HelixSandboxPreview["openLabel"]) | undefined;
+  /** The name of the button that opens the example in a new tab, under
+`controls`. */
+  "prop:openLabel"?: (HelixSandboxPreview["openLabel"]) | undefined;
+  /** The name of the button that reloads the frame's document, under
+`controls`. */
+  "attr:reload-label"?: (HelixSandboxPreview["reloadLabel"]) | undefined;
+  /** The name of the button that reloads the frame's document, under
+`controls`. */
+  "prop:reloadLabel"?: (HelixSandboxPreview["reloadLabel"]) | undefined;
   /** A script to run as a module after the markup, on every render of new
 source. A sandbox writes its `js` pane here. */
   "prop:script"?: (HelixSandboxPreview["script"]) | undefined;
@@ -28890,6 +28982,9 @@ Empty loads the built-in document, which defines no element. */
 
 /** `HelixSandbox` component event */
 export type HelixSandboxElementEvent<E = Event> = TypedEvent<HelixSandbox, E>;
+/** `helix-before-change` event type */
+export type HelixSandboxHelixBeforeChangeElementEvent =
+  HelixSandboxElementEvent<HelixBeforeChangeEvent>;
 /** `helix-before-edit` event type */
 export type HelixSandboxHelixBeforeEditElementEvent =
   HelixSandboxElementEvent<HelixBeforeEditEvent>;
@@ -28957,6 +29052,14 @@ sandbox back to the size it already was.
 Declared rather than captured, so it is a number a consumer states and can
 change, and it needs no first frame to be read on. */
   defaultSplit?: (HelixSandbox["defaultSplit"]) | undefined;
+  /** The `name` of the source pane shown, where the sandbox holds several.
+
+Unset, or a name no pane has, shows the first. */
+  file?: (HelixSandbox["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "files-label"?: (HelixSandbox["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  filesLabel?: (HelixSandbox["filesLabel"]) | undefined;
   /** Which pane comes first, before the divider.
 
 A sandbox is read in one of two directions and the two are not a
@@ -29028,6 +29131,12 @@ divider's value is, so each is a whole sentence: "Resize source pane" or
 is `preview`. */
   split?: (HelixSandbox["split"]) | undefined;
 
+  /** A file tab showed its pane, whose `name` `file` now holds. */
+  onchange?: ((e: HelixSandboxElementEvent) => void) | undefined;
+  /** Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown. */
+  "onhelix-before-change"?: ((
+    e: HelixSandboxHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
   /** Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged. */
   "onhelix-before-edit"?: ((e: HelixSandboxHelixBeforeEditElementEvent) => void) | undefined;
   /** Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height. */
@@ -29093,6 +29202,14 @@ sandbox back to the size it already was.
 Declared rather than captured, so it is a number a consumer states and can
 change, and it needs no first frame to be read on. */
   "prop:defaultSplit"?: (HelixSandbox["defaultSplit"]) | undefined;
+  /** The `name` of the source pane shown, where the sandbox holds several.
+
+Unset, or a name no pane has, shows the first. */
+  "prop:file"?: (HelixSandbox["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "attr:files-label"?: (HelixSandbox["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "prop:filesLabel"?: (HelixSandbox["filesLabel"]) | undefined;
   /** Which pane comes first, before the divider.
 
 A sandbox is read in one of two directions and the two are not a
@@ -29163,6 +29280,12 @@ divider's value is, so each is a whole sentence: "Resize source pane" or
   /** Percentage of the sandbox given to the lead pane: the source, unless `lead`
 is `preview`. */
   "prop:split"?: (HelixSandbox["split"]) | undefined;
+  /** A file tab showed its pane, whose `name` `file` now holds. */
+  "on:change"?: ((e: HelixSandboxElementEvent) => void) | undefined;
+  /** Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown. */
+  "on:helix-before-change"?: ((
+    e: HelixSandboxHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
   /** Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged. */
   "on:helix-before-edit"?: ((e: HelixSandboxHelixBeforeEditElementEvent) => void) | undefined;
   /** Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height. */
@@ -29218,6 +29341,9 @@ export type HelixSandboxSourceProps = {
   "keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
   keysDescription?: (HelixSandboxSource["keysDescription"]) | undefined;
+  /** The pane's file name, such as `index.html`, on its tab where a sandbox
+holds several panes. Empty puts the pane's `name` on the tab. */
+  label?: (HelixSandboxSource["label"]) | undefined;
   /** Which source this pane holds. Every `helix-before-edit` event includes it.
 
 `html` and `css` are what the sandbox root routes on; any other name is
@@ -29263,6 +29389,9 @@ export type HelixSandboxSourceSolidJsProps = {
   "attr:keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
   "prop:keysDescription"?: (HelixSandboxSource["keysDescription"]) | undefined;
+  /** The pane's file name, such as `index.html`, on its tab where a sandbox
+holds several panes. Empty puts the pane's `name` on the tab. */
+  "prop:label"?: (HelixSandboxSource["label"]) | undefined;
   /** Which source this pane holds. Every `helix-before-edit` event includes it.
 
 `html` and `css` are what the sandbox root routes on; any other name is
@@ -43897,6 +44026,12 @@ export type CustomElements = {
    * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
    * - `zoomed-label`/`zoomedLabel`: What screen readers hear after a zoom button or key, with `{zoom}` for the
    * zoom as a percentage, written the way the element's locale writes one.
+   * - `edgeRoute`: Draws every connection's line: a function from where it leaves and
+   * arrives, and the sides it does, to its SVG path and where its label sits.
+   *
+   * Absent, or returning nothing for a connection, draws the board's own
+   * route. A function that throws draws the board's own too, and the error is
+   * reported to the page as an uncaught one. Set it as a property. (property only)
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -44009,6 +44144,8 @@ export type CustomElements = {
    * - `--canvas-label-color`: The color of the label on a connection.
    * - `--canvas-label-editor-inline-size`: The width of the field for editing a label.
    * - `--canvas-label-font-size`: The size of the label on a connection.
+   * - `--canvas-minimap-block-size`: The height of the minimap, under `controls="minimap"`.
+   * - `--canvas-minimap-inline-size`: The width of the minimap, under `controls="minimap"`.
    * - `--canvas-radius`: The frame's corners.
    * - `--canvas-selected-color`: The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.
    * - `--viewport-control-background-color`: The background of the pan and zoom buttons. `Map` uses the same property.
@@ -44035,6 +44172,9 @@ export type CustomElements = {
    * - `label-editor`: The field for editing a connection's label or a group's name, placed over that text.
    * - `live`: A live region that screen readers announce while a connection is being made.
    * - `marquee`: The box a Shift-drag across the empty board draws, which selects the cards it touches.
+   * - `minimap`: The picture of the whole board, under `controls="minimap"`.
+   * - `minimap-node`: One card in the minimap.
+   * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
@@ -56191,7 +56331,8 @@ export type CustomElements = {
    * as a checkbox tells a reader its siblings are commands, which is the one
    * thing they are not.
    *
-   * `checked` implies it, so a row that is on never has to say both.
+   * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+   * never has to say both.
    *
    * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
    * you can cancel.
@@ -56199,6 +56340,11 @@ export type CustomElements = {
    *
    * The row changes it when it is chosen. Not reflected: the attribute is the
    * state you start the row in, and `:state(checked)` carries the current one.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing the row closes the menu.
+   *
+   * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+   * open after a Space on a choice row. Write `close-on-select="false"` for a
+   * row that changes something the reader is watching, such as a zoom step.
    * - `disabled`: Whether the row is disabled, so it cannot be chosen.
    * - `download`: Whether the link downloads the file when the row is chosen.
    *
@@ -56213,8 +56359,7 @@ export type CustomElements = {
    * it checked. `menuitemradio` tells a reader which kind of set they are in,
    * where `menuitemcheckbox` says every row is independent.
    *
-   * Meaningless without `checkable`, since a row that cannot be ticked is not
-   * one of a set of anything.
+   * It makes the row a choice, so it needs no `checkable` beside it.
    * - `href`: The URL the row links to. Setting it renders the row as a link.
    *
    * **The row itself becomes an `<a>`, and the role goes with it.** A
@@ -56376,6 +56521,11 @@ export type CustomElements = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `back-label`/`backLabel`: The text of the row that returns from a submenu.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing a row closes the menu.
+   *
+   * On by default, and a Space on a choice row leaves the menu open either way.
+   * Write `close-on-select="false"` to keep the menu open after every choice, as
+   * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
    * - `label`: Accessible name for the surface.
@@ -60548,6 +60698,15 @@ export type CustomElements = {
    * reports. A page draws its own spinner or message from either, such as a
    * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
    *
+   * **A failed preview shows the error over the example**, in the `error` part,
+   * until the next source is sent. The terminal says it too, so the part is not
+   * announced. Hide it with `::part(error) { display: none }` where the page
+   * draws its own.
+   *
+   * **`controls` draws two buttons in the preview's corner**: one reloads the
+   * frame's document, as `reload()` does, and one opens the example in a new
+   * tab, as `open()` does. The tab runs it in a frame sandboxed as this one is.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -60565,6 +60724,8 @@ export type CustomElements = {
    * keyed on this attribute, and of the 56 tokens that differ by scheme the
    * theme engine emits 19. The other 37 would stay light in a dark preview,
    * including every one of the 24 series colors a chart reads.
+   * - `controls`: Whether the preview draws a reload button and a button that opens the
+   * example in a new tab, in its corner.
    * - `direction`: Writing direction inside the frame.
    *
    * Not reflected. It is payload for the render message and nothing selects on
@@ -60583,6 +60744,10 @@ export type CustomElements = {
    * Not reflected, for `direction`'s reason: the placement is applied by the
    * document inside the frame, against its own root, so no rule on this side
    * could read it.
+   * - `open-label`/`openLabel`: The name of the button that opens the example in a new tab, under
+   * `controls`.
+   * - `reload-label`/`reloadLabel`: The name of the button that reloads the frame's document, under
+   * `controls`.
    * - `script`: A script to run as a module after the markup, on every render of new
    * source. A sandbox writes its `js` pane here.
    * - `source`: Markup to render.
@@ -60621,6 +60786,17 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `open() => Window | null`: Opens the example in a new tab, and returns the tab's window, or `null`
+   * where the browser refused to open one.
+   *
+   * **The tab runs the example as this preview does**: in a frame that fills
+   * it, with this frame's `sandbox`, loading `src` or the built-in document,
+   * and sent the example once it loads. The example stays on an opaque origin,
+   * and the tab's `opener` is cleared, so it cannot reach this page. The tab
+   * shows the example as it was when it opened, and edits after that do not
+   * reach it. A short inline script in the tab sends the example, so on a page
+   * whose Content Security Policy refuses inline scripts the tab opens empty,
+   * as the built-in document does there.
    * - `reload() => void`: Loads the frame's document again, and re-sends the example to it.
    *
    * For a bundle that has changed underneath a page nobody reloaded. The frame
@@ -60638,7 +60814,11 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `controls`: The buttons in the preview's corner, under `controls`.
+   * - `error`: The error the example threw and did not catch, shown over it while the preview is `failed`.
    * - `frame`: The iframe.
+   * - `open`: The button that opens the example in a new tab, under `controls`.
+   * - `reload`: The button that reloads the frame's document, under `controls`.
    *
    * ## CSS States
    *
@@ -60668,6 +60848,20 @@ export type CustomElements = {
    * pointer, the keyboard, and the corner. The inner splitter holds the panes and
    * the outer one holds the panel, so the panel spans the full width.
    *
+   * **Several source panes are files**, one shown at a time under a row of
+   * tabs, each named by the pane's `label` or, without one, its `name`. `file`
+   * holds the `name` of the pane shown. The tabs are a tab list: the arrow keys
+   * move between them and show each pane, and `Home` and `End` go to the first
+   * and the last. Choosing one sends `helix-before-change` with the pane's
+   * `name`, which you can cancel, and `change` once `file` holds it. The panes
+   * not shown carry `hidden`. One pane draws no tabs.
+   *
+   * **Any editor can be the source pane**: an element in the `source` slot with
+   * a `name` that dispatches `helix-before-edit` with its text, which bubbles.
+   * A wrapper around CodeMirror or Monaco sends one on each change and is a pane
+   * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
+   * preview. Dispatch `helix-caret` from it too for the status bar's position.
+   *
    * On a focused divider, the arrow keys move it, and `Home` and `End` move it
    * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
    * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -60694,6 +60888,10 @@ export type CustomElements = {
    *
    * Declared rather than captured, so it is a number a consumer states and can
    * change, and it needs no first frame to be read on.
+   * - `file`: The `name` of the source pane shown, where the sandbox holds several.
+   *
+   * Unset, or a name no pane has, shows the first.
+   * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
    * - `lead`: Which pane comes first, before the divider.
    *
    * A sandbox is read in one of two directions and the two are not a
@@ -60760,6 +60958,8 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A file tab showed its pane, whose `name` `file` now holds.
+   * - `helix-before-change`: Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown.
    * - `helix-before-edit`: Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged.
    * - `helix-before-panel-resize`: Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height.
    * - `helix-before-split`: Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
@@ -60794,6 +60994,8 @@ export type CustomElements = {
    *
    * - `body`: The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
    * - `corner`: The handle where the two dividers cross.
+   * - `file`: One file tab, `aria-selected` while its pane is shown.
+   * - `files`: The file tabs over the source panes, where there are several.
    * - `pane`: Either pane.
    * - `panel`: The box that holds the slotted panel.
    * - `panes`: The splitter holding the source and preview panes. `::part(panes):state(dragging)` matches while its divider is held.
@@ -60836,6 +61038,8 @@ export type CustomElements = {
    *
    * - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
    * - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
+   * - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
+   * holds several panes. Empty puts the pane's `name` on the tab.
    * - `name`: Which source this pane holds. Every `helix-before-edit` event includes it.
    *
    * `html` and `css` are what the sandbox root routes on; any other name is
@@ -72840,6 +73044,12 @@ export type CustomElementsSolidJs = {
    * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
    * - `zoomed-label`/`zoomedLabel`: What screen readers hear after a zoom button or key, with `{zoom}` for the
    * zoom as a percentage, written the way the element's locale writes one.
+   * - `edgeRoute`: Draws every connection's line: a function from where it leaves and
+   * arrives, and the sides it does, to its SVG path and where its label sits.
+   *
+   * Absent, or returning nothing for a connection, draws the board's own
+   * route. A function that throws draws the board's own too, and the error is
+   * reported to the page as an uncaught one. Set it as a property. (property only)
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -72952,6 +73162,8 @@ export type CustomElementsSolidJs = {
    * - `--canvas-label-color`: The color of the label on a connection.
    * - `--canvas-label-editor-inline-size`: The width of the field for editing a label.
    * - `--canvas-label-font-size`: The size of the label on a connection.
+   * - `--canvas-minimap-block-size`: The height of the minimap, under `controls="minimap"`.
+   * - `--canvas-minimap-inline-size`: The width of the minimap, under `controls="minimap"`.
    * - `--canvas-radius`: The frame's corners.
    * - `--canvas-selected-color`: The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.
    * - `--viewport-control-background-color`: The background of the pan and zoom buttons. `Map` uses the same property.
@@ -72978,6 +73190,9 @@ export type CustomElementsSolidJs = {
    * - `label-editor`: The field for editing a connection's label or a group's name, placed over that text.
    * - `live`: A live region that screen readers announce while a connection is being made.
    * - `marquee`: The box a Shift-drag across the empty board draws, which selects the cards it touches.
+   * - `minimap`: The picture of the whole board, under `controls="minimap"`.
+   * - `minimap-node`: One card in the minimap.
+   * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
@@ -85320,7 +85535,8 @@ export type CustomElementsSolidJs = {
    * as a checkbox tells a reader its siblings are commands, which is the one
    * thing they are not.
    *
-   * `checked` implies it, so a row that is on never has to say both.
+   * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+   * never has to say both.
    *
    * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
    * you can cancel.
@@ -85328,6 +85544,11 @@ export type CustomElementsSolidJs = {
    *
    * The row changes it when it is chosen. Not reflected: the attribute is the
    * state you start the row in, and `:state(checked)` carries the current one.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing the row closes the menu.
+   *
+   * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+   * open after a Space on a choice row. Write `close-on-select="false"` for a
+   * row that changes something the reader is watching, such as a zoom step.
    * - `disabled`: Whether the row is disabled, so it cannot be chosen.
    * - `download`: Whether the link downloads the file when the row is chosen.
    *
@@ -85342,8 +85563,7 @@ export type CustomElementsSolidJs = {
    * it checked. `menuitemradio` tells a reader which kind of set they are in,
    * where `menuitemcheckbox` says every row is independent.
    *
-   * Meaningless without `checkable`, since a row that cannot be ticked is not
-   * one of a set of anything.
+   * It makes the row a choice, so it needs no `checkable` beside it.
    * - `href`: The URL the row links to. Setting it renders the row as a link.
    *
    * **The row itself becomes an `<a>`, and the role goes with it.** A
@@ -85508,6 +85728,11 @@ export type CustomElementsSolidJs = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `back-label`/`backLabel`: The text of the row that returns from a submenu.
+   * - `close-on-select`/`closeOnSelect`: Whether choosing a row closes the menu.
+   *
+   * On by default, and a Space on a choice row leaves the menu open either way.
+   * Write `close-on-select="false"` to keep the menu open after every choice, as
+   * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
    * - `context`: Whether the menu is the trigger's context menu: it opens where the reader
    * asks for one, with a right-click, a long press, Shift+F10 or the menu key.
    * - `label`: Accessible name for the surface.
@@ -89759,6 +89984,15 @@ export type CustomElementsSolidJs = {
    * reports. A page draws its own spinner or message from either, such as a
    * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
    *
+   * **A failed preview shows the error over the example**, in the `error` part,
+   * until the next source is sent. The terminal says it too, so the part is not
+   * announced. Hide it with `::part(error) { display: none }` where the page
+   * draws its own.
+   *
+   * **`controls` draws two buttons in the preview's corner**: one reloads the
+   * frame's document, as `reload()` does, and one opens the example in a new
+   * tab, as `open()` does. The tab runs it in a frame sandboxed as this one is.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -89776,6 +90010,8 @@ export type CustomElementsSolidJs = {
    * keyed on this attribute, and of the 56 tokens that differ by scheme the
    * theme engine emits 19. The other 37 would stay light in a dark preview,
    * including every one of the 24 series colors a chart reads.
+   * - `controls`: Whether the preview draws a reload button and a button that opens the
+   * example in a new tab, in its corner.
    * - `direction`: Writing direction inside the frame.
    *
    * Not reflected. It is payload for the render message and nothing selects on
@@ -89794,6 +90030,10 @@ export type CustomElementsSolidJs = {
    * Not reflected, for `direction`'s reason: the placement is applied by the
    * document inside the frame, against its own root, so no rule on this side
    * could read it.
+   * - `open-label`/`openLabel`: The name of the button that opens the example in a new tab, under
+   * `controls`.
+   * - `reload-label`/`reloadLabel`: The name of the button that reloads the frame's document, under
+   * `controls`.
    * - `script`: A script to run as a module after the markup, on every render of new
    * source. A sandbox writes its `js` pane here.
    * - `source`: Markup to render.
@@ -89832,6 +90072,17 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `open() => Window | null`: Opens the example in a new tab, and returns the tab's window, or `null`
+   * where the browser refused to open one.
+   *
+   * **The tab runs the example as this preview does**: in a frame that fills
+   * it, with this frame's `sandbox`, loading `src` or the built-in document,
+   * and sent the example once it loads. The example stays on an opaque origin,
+   * and the tab's `opener` is cleared, so it cannot reach this page. The tab
+   * shows the example as it was when it opened, and edits after that do not
+   * reach it. A short inline script in the tab sends the example, so on a page
+   * whose Content Security Policy refuses inline scripts the tab opens empty,
+   * as the built-in document does there.
    * - `reload() => void`: Loads the frame's document again, and re-sends the example to it.
    *
    * For a bundle that has changed underneath a page nobody reloaded. The frame
@@ -89849,7 +90100,11 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `controls`: The buttons in the preview's corner, under `controls`.
+   * - `error`: The error the example threw and did not catch, shown over it while the preview is `failed`.
    * - `frame`: The iframe.
+   * - `open`: The button that opens the example in a new tab, under `controls`.
+   * - `reload`: The button that reloads the frame's document, under `controls`.
    *
    * ## CSS States
    *
@@ -89882,6 +90137,20 @@ export type CustomElementsSolidJs = {
    * pointer, the keyboard, and the corner. The inner splitter holds the panes and
    * the outer one holds the panel, so the panel spans the full width.
    *
+   * **Several source panes are files**, one shown at a time under a row of
+   * tabs, each named by the pane's `label` or, without one, its `name`. `file`
+   * holds the `name` of the pane shown. The tabs are a tab list: the arrow keys
+   * move between them and show each pane, and `Home` and `End` go to the first
+   * and the last. Choosing one sends `helix-before-change` with the pane's
+   * `name`, which you can cancel, and `change` once `file` holds it. The panes
+   * not shown carry `hidden`. One pane draws no tabs.
+   *
+   * **Any editor can be the source pane**: an element in the `source` slot with
+   * a `name` that dispatches `helix-before-edit` with its text, which bubbles.
+   * A wrapper around CodeMirror or Monaco sends one on each change and is a pane
+   * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
+   * preview. Dispatch `helix-caret` from it too for the status bar's position.
+   *
    * On a focused divider, the arrow keys move it, and `Home` and `End` move it
    * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
    * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -89908,6 +90177,10 @@ export type CustomElementsSolidJs = {
    *
    * Declared rather than captured, so it is a number a consumer states and can
    * change, and it needs no first frame to be read on.
+   * - `file`: The `name` of the source pane shown, where the sandbox holds several.
+   *
+   * Unset, or a name no pane has, shows the first.
+   * - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
    * - `lead`: Which pane comes first, before the divider.
    *
    * A sandbox is read in one of two directions and the two are not a
@@ -89974,6 +90247,8 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: A file tab showed its pane, whose `name` `file` now holds.
+   * - `helix-before-change`: Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown.
    * - `helix-before-edit`: Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged.
    * - `helix-before-panel-resize`: Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height.
    * - `helix-before-split`: Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
@@ -90008,6 +90283,8 @@ export type CustomElementsSolidJs = {
    *
    * - `body`: The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
    * - `corner`: The handle where the two dividers cross.
+   * - `file`: One file tab, `aria-selected` while its pane is shown.
+   * - `files`: The file tabs over the source panes, where there are several.
    * - `pane`: Either pane.
    * - `panel`: The box that holds the slotted panel.
    * - `panes`: The splitter holding the source and preview panes. `::part(panes):state(dragging)` matches while its divider is held.
@@ -90053,6 +90330,8 @@ export type CustomElementsSolidJs = {
    *
    * - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
    * - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
+   * - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
+   * holds several panes. Empty puts the pane's `name` on the tab.
    * - `name`: Which source this pane holds. Every `helix-before-edit` event includes it.
    *
    * `html` and `css` are what the sandbox root routes on; any other name is
@@ -99199,6 +99478,10 @@ export type CustomCssProperties = {
   "--canvas-label-editor-inline-size"?: (string) | undefined;
   /** The size of the label on a connection. */
   "--canvas-label-font-size"?: (string) | undefined;
+  /** The height of the minimap, under `controls="minimap"`. */
+  "--canvas-minimap-block-size"?: (string) | undefined;
+  /** The width of the minimap, under `controls="minimap"`. */
+  "--canvas-minimap-inline-size"?: (string) | undefined;
   /** The frame's corners. */
   "--canvas-radius"?: (string) | undefined;
   /** The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select. */