@fusion.dev/helix 0.162.1 → 0.163.0

package/types/vue.d.ts

@@ -2674,6 +2674,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.
 
@@ -11964,7 +11971,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. */
@@ -11974,6 +11982,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.
@@ -11990,8 +12010,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.
 
@@ -12079,6 +12098,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;
@@ -14776,6 +14807,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
@@ -14797,6 +14831,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;
@@ -14818,6 +14864,9 @@ export type HelixSandboxPreviewVueEvents = {
 
 /** `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>;
@@ -14885,6 +14934,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
@@ -14958,6 +15015,10 @@ is `preview`. */
 };
 
 export type HelixSandboxVueEvents = {
+  /** A file tab showed its pane, whose `name` `file` now holds. */
+  change: HelixSandboxElementEvent;
+  /** Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown. */
+  "helix-before-change": HelixSandboxHelixBeforeChangeElementEvent;
   /** 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-edit": HelixSandboxHelixBeforeEditElementEvent;
   /** 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. */
@@ -15002,6 +15063,9 @@ export type HelixSandboxSourceVueProps = {
   "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
@@ -21130,6 +21194,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. */
@@ -23966,13 +24034,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'. */
+  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' 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. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
     HelixSandboxPreviewVueEvents
   >;
-  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The event carries the pane's 'name', so one sandbox can hold several panes. 'html' sets the preview's markup, 'css' sets its stylesheet, and 'js' sets a script that runs as a module after the markup. The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The dividers are two nested 'helix-splitter' elements**, which handle the 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.  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 panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
+  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The event carries the pane's 'name', so one sandbox can hold several panes. 'html' sets the preview's markup, 'css' sets its stylesheet, and 'js' sets a script that runs as a module after the markup. The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The dividers are two nested 'helix-splitter' elements**, which handle the 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 panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,

package/types/words.d.ts

@@ -2107,6 +2107,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Resize panes and panel`
        */
       cornerLabel: Message
+      /**
+       * The name of the file tabs, read by screen readers.
+       *
+       * English: `Files`
+       */
+      filesLabel: Message
       /**
        * The name of the panel's divider, read by screen readers.
        *
@@ -2130,6 +2136,20 @@ declare module '@fusion.dev/helix-core' {
        * English: `Preview`
        */
       label: Message
+      /**
+       * The name of the button that opens the example in a new tab, under
+       * `controls`.
+       *
+       * English: `Open preview in a new tab`
+       */
+      openLabel: Message
+      /**
+       * The name of the button that reloads the frame's document, under
+       * `controls`.
+       *
+       * English: `Reload preview`
+       */
+      reloadLabel: Message
     }
     'helix-sandbox-source': {
       /**