@fusion.dev/helix 0.116.0 → 0.117.0

package/types/jsx.d.ts

@@ -82,6 +82,10 @@ import type {
   HelixFlex,
   HelixFormElement,
   HelixFormatDate,
+  HelixGraph,
+  HelixGraphPanEvent,
+  HelixGraphReadyEvent,
+  HelixGraphZoomEvent,
   HelixGrid,
   HelixHeadlessFilterField,
   HelixHeadlessSplitter,
@@ -11000,6 +11004,422 @@ Empty is the runtime's own. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixGraph` component event */
+export type HelixGraphElementEvent<E = Event> = TypedEvent<HelixGraph, E>;
+/** `helix-activate` event type */
+export type HelixGraphHelixActivateElementEvent =
+  HelixGraphElementEvent<HelixActivateEvent>;
+/** `helix-before-activate` event type */
+export type HelixGraphHelixBeforeActivateElementEvent =
+  HelixGraphElementEvent<HelixBeforeActivateEvent>;
+/** `helix-graph-pan` event type */
+export type HelixGraphHelixGraphPanElementEvent =
+  HelixGraphElementEvent<HelixGraphPanEvent>;
+/** `helix-graph-ready` event type */
+export type HelixGraphHelixGraphReadyElementEvent =
+  HelixGraphElementEvent<HelixGraphReadyEvent>;
+/** `helix-graph-zoom` event type */
+export type HelixGraphHelixGraphZoomElementEvent =
+  HelixGraphElementEvent<HelixGraphZoomEvent>;
+
+export type HelixGraphProps = {
+  /** Which controls to show, as a list such as `pan zoom fullscreen`, or
+`none`. A family can add words of its own.
+
+**A list rather than a switch, because the overlap is not symmetric.** A
+surface a consumer brings often has zoom controls of its own and almost
+never has pan buttons, so a single switch would make them choose between
+a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where what was
+slotted already has controls a reader can find: what this argues for is
+that *a* findable control exists, never that it is ours. The methods stay
+public either way, so a consumer drawing their own chrome can still drive
+the surface.
+
+Absent is whatever the family rests at, which is this library's rule that
+a resting value is an attribute's absence: zoom, the compass and
+fullscreen for a map, whose pan buttons a page asks for, and zoom and
+fullscreen for a board, which a reader drags and whose pad took a third
+of the frame. The
+stylesheet lays the cluster out by which buttons are in it rather than by
+this attribute, so the two defaults need no rule each. */
+  controls?: (HelixGraph["controls"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "controls-label"?: (HelixGraph["controlsLabel"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  controlsLabel?: (HelixGraph["controlsLabel"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "controls-placement"?: (HelixGraph["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  controlsPlacement?: (HelixGraph["controlsPlacement"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixGraph["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixGraph["fullscreenLabel"]) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "idle-delay"?: (HelixGraph["idleDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  idleDelay?: (HelixGraph["idleDelay"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "pan-down-label"?: (HelixGraph["panDownLabel"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  panDownLabel?: (HelixGraph["panDownLabel"]) | undefined;
+  /** The pan left button's label. */
+  "pan-left-label"?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan left button's label. */
+  panLeftLabel?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan right button's label. */
+  "pan-right-label"?: (HelixGraph["panRightLabel"]) | undefined;
+  /** The pan right button's label. */
+  panRightLabel?: (HelixGraph["panRightLabel"]) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "pan-step"?: (HelixGraph["panStep"] | `${number}`) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  panStep?: (HelixGraph["panStep"]) | undefined;
+  /** The pan up button's label. */
+  "pan-up-label"?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The pan up button's label. */
+  panUpLabel?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "zoom-in-label"?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom in button's label. */
+  zoomInLabel?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "zoom-out-label"?: (HelixGraph["zoomOutLabel"]) | undefined;
+  /** The zoom out button's label. */
+  zoomOutLabel?: (HelixGraph["zoomOutLabel"]) | undefined;
+  /** The `value` of the current item.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  active?: (HelixGraph["active"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "default-active"?: (HelixGraph["defaultActive"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  defaultActive?: (HelixGraph["defaultActive"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  "count-label"?: (HelixGraph["countLabel"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  countLabel?: (HelixGraph["countLabel"]) | undefined;
+  /** How many links from the selected note to show, for its local graph. Unset
+shows every note. The list holds what the drawing shows. */
+  depth?: (HelixGraph["depth"]) | undefined;
+  /** The graph's name, read by screen readers, such as "Research notes".
+Required. */
+  label?: (HelixGraph["label"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  linkedBothLabel?: (HelixGraph["linkedBothLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "linked-from-label"?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  linkedFromLabel?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  linksToLabel?: (HelixGraph["linksToLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "notes-label"?: (HelixGraph["notesLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  notesLabel?: (HelixGraph["notesLabel"]) | undefined;
+  /** The search field's name. */
+  "search-label"?: (HelixGraph["searchLabel"]) | undefined;
+  /** The search field's name. */
+  searchLabel?: (HelixGraph["searchLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  selectedLabel?: (HelixGraph["selectedLabel"]) | undefined;
+  /** The links between notes, each from `source` to `target`. A property, never an attribute. */
+  links?: (HelixGraph["links"]) | undefined;
+  /** The notes. A property, never an attribute. */
+  nodes?: (HelixGraph["nodes"]) | undefined;
+
+  /** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
+  "onhelix-activate"?: ((e: HelixGraphHelixActivateElementEvent) => void) | undefined;
+  /** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
+  "onhelix-before-activate"?: ((
+    e: HelixGraphHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** A pan button or arrow key was pressed. Move the drawing. */
+  "onhelix-graph-pan"?: ((e: HelixGraphHelixGraphPanElementEvent) => void) | undefined;
+  /** The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not. */
+  "onhelix-graph-ready"?: ((e: HelixGraphHelixGraphReadyElementEvent) => void) | undefined;
+  /** A zoom button or key was pressed. Zoom the drawing. */
+  "onhelix-graph-zoom"?: ((e: HelixGraphHelixGraphZoomElementEvent) => void) | undefined;
+};
+
+export type HelixGraphSolidJsProps = {
+  /** Which controls to show, as a list such as `pan zoom fullscreen`, or
+`none`. A family can add words of its own.
+
+**A list rather than a switch, because the overlap is not symmetric.** A
+surface a consumer brings often has zoom controls of its own and almost
+never has pan buttons, so a single switch would make them choose between
+a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where what was
+slotted already has controls a reader can find: what this argues for is
+that *a* findable control exists, never that it is ours. The methods stay
+public either way, so a consumer drawing their own chrome can still drive
+the surface.
+
+Absent is whatever the family rests at, which is this library's rule that
+a resting value is an attribute's absence: zoom, the compass and
+fullscreen for a map, whose pan buttons a page asks for, and zoom and
+fullscreen for a board, which a reader drags and whose pad took a third
+of the frame. The
+stylesheet lays the cluster out by which buttons are in it rather than by
+this attribute, so the two defaults need no rule each. */
+  "prop:controls"?: (HelixGraph["controls"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "attr:controls-label"?: (HelixGraph["controlsLabel"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "prop:controlsLabel"?: (HelixGraph["controlsLabel"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "attr:controls-placement"?: (HelixGraph["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "prop:controlsPlacement"?: (HelixGraph["controlsPlacement"]) | undefined;
+  /** The fullscreen button's label. */
+  "attr:fullscreen-label"?: (HelixGraph["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "prop:fullscreenLabel"?: (HelixGraph["fullscreenLabel"]) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "attr:idle-delay"?: (HelixGraph["idleDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "prop:idleDelay"?: (HelixGraph["idleDelay"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "attr:pan-down-label"?: (HelixGraph["panDownLabel"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "prop:panDownLabel"?: (HelixGraph["panDownLabel"]) | undefined;
+  /** The pan left button's label. */
+  "attr:pan-left-label"?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan left button's label. */
+  "prop:panLeftLabel"?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan right button's label. */
+  "attr:pan-right-label"?: (HelixGraph["panRightLabel"]) | undefined;
+  /** The pan right button's label. */
+  "prop:panRightLabel"?: (HelixGraph["panRightLabel"]) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "attr:pan-step"?: (HelixGraph["panStep"] | `${number}`) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "prop:panStep"?: (HelixGraph["panStep"]) | undefined;
+  /** The pan up button's label. */
+  "attr:pan-up-label"?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The pan up button's label. */
+  "prop:panUpLabel"?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "attr:zoom-in-label"?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "prop:zoomInLabel"?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "attr:zoom-out-label"?: (HelixGraph["zoomOutLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "prop:zoomOutLabel"?: (HelixGraph["zoomOutLabel"]) | undefined;
+  /** The `value` of the current item.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  "prop:active"?: (HelixGraph["active"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "attr:default-active"?: (HelixGraph["defaultActive"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "prop:defaultActive"?: (HelixGraph["defaultActive"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  "attr:count-label"?: (HelixGraph["countLabel"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  "prop:countLabel"?: (HelixGraph["countLabel"]) | undefined;
+  /** How many links from the selected note to show, for its local graph. Unset
+shows every note. The list holds what the drawing shows. */
+  "prop:depth"?: (HelixGraph["depth"]) | undefined;
+  /** The graph's name, read by screen readers, such as "Research notes".
+Required. */
+  "prop:label"?: (HelixGraph["label"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "attr:linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "prop:linkedBothLabel"?: (HelixGraph["linkedBothLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "attr:linked-from-label"?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "prop:linkedFromLabel"?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "attr:links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "prop:linksToLabel"?: (HelixGraph["linksToLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "attr:notes-label"?: (HelixGraph["notesLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "prop:notesLabel"?: (HelixGraph["notesLabel"]) | undefined;
+  /** The search field's name. */
+  "attr:search-label"?: (HelixGraph["searchLabel"]) | undefined;
+  /** The search field's name. */
+  "prop:searchLabel"?: (HelixGraph["searchLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "attr:selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "prop:selectedLabel"?: (HelixGraph["selectedLabel"]) | undefined;
+  /** The links between notes, each from `source` to `target`. A property, never an attribute. */
+  "prop:links"?: (HelixGraph["links"]) | undefined;
+  /** The notes. A property, never an attribute. */
+  "prop:nodes"?: (HelixGraph["nodes"]) | undefined;
+  /** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
+  "on:helix-activate"?: ((e: HelixGraphHelixActivateElementEvent) => void) | undefined;
+  /** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
+  "on:helix-before-activate"?: ((
+    e: HelixGraphHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** A pan button or arrow key was pressed. Move the drawing. */
+  "on:helix-graph-pan"?: ((e: HelixGraphHelixGraphPanElementEvent) => void) | undefined;
+  /** The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not. */
+  "on:helix-graph-ready"?: ((e: HelixGraphHelixGraphReadyElementEvent) => void) | undefined;
+  /** A zoom button or key was pressed. Zoom the drawing. */
+  "on:helix-graph-zoom"?: ((e: HelixGraphHelixGraphZoomElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 export type HelixGridProps = {
   /** How each cell aligns within its row. Sets `align-items`.
 
@@ -34788,6 +35208,220 @@ export type CustomElements = {
     HelixFormatDateProps & BaseProps<HelixFormatDate> & BaseEvents<HelixFormatDate>
   >;
 
+  /**
+   * The styled frame: the drawing with its zoom and fullscreen buttons, and the
+   * list of notes beside it, which moves below the drawing where the frame is
+   * narrower than 40rem. The selected note leads the list on a surface of its
+   * own, and the notes linked to it are named by how they link.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
+   * `none`. A family can add words of its own.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.** A
+   * surface a consumer brings often has zoom controls of its own and almost
+   * never has pan buttons, so a single switch would make them choose between
+   * a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where what was
+   * slotted already has controls a reader can find: what this argues for is
+   * that *a* findable control exists, never that it is ours. The methods stay
+   * public either way, so a consumer drawing their own chrome can still drive
+   * the surface.
+   *
+   * Absent is whatever the family rests at, which is this library's rule that
+   * a resting value is an attribute's absence: zoom, the compass and
+   * fullscreen for a map, whose pan buttons a page asks for, and zoom and
+   * fullscreen for a board, which a reader drags and whose pad took a third
+   * of the frame. The
+   * stylesheet lays the cluster out by which buttons are in it rather than by
+   * this attribute, so the two defaults need no rule each.
+   * - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers.
+   *
+   * Absent is the family's own name for it, "Map controls" or "Board
+   * controls", which names what the controls drive rather than the
+   * mechanism. Written here to say it in another language, which every other
+   * string this surface speaks already allowed and this one did not.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, which is a collision
+   * rather than a taste: whatever a consumer slots may put its own controls
+   * in any corner, and every library that draws some made this a setting for
+   * the same reason.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule. Absent is the top end, a
+   * resting value being an attribute's absence: a default that reflected
+   * would write an attribute onto every host that no server sent.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `idle-delay`/`idleDelay`: How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+   *
+   * Zero keeps it up, which is the default: these controls are how a keyboard
+   * reader operates the surface, and chrome that hid itself by default would
+   * be the component undoing its own argument. Set it for a display nobody
+   * drives.
+   * - `pan-down-label`/`panDownLabel`: The pan down button's label.
+   *
+   * **A label for each way rather than one with the way filled in**, which is
+   * what this was: `Pan {way}` filled in with `left`, so a page that said it
+   * in French read out "Déplacer left". The word for a direction is as much
+   * the translator's as the word for panning, and a language can put it
+   * anywhere in the phrase.
+   * - `pan-left-label`/`panLeftLabel`: The pan left button's label.
+   * - `pan-right-label`/`panRightLabel`: The pan right button's label.
+   * - `pan-step`/`panStep`: How far one press pans the view, as a fraction of its size.
+   *
+   * A fraction rather than a distance, because this surface does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture
+   * at any zoom, and a consumer who wants their own units multiplies by them.
+   * - `pan-up-label`/`panUpLabel`: The pan up button's label.
+   * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
+   * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `active`: The `value` of the current item.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
+   *
+   * Ignored once `active` is written.
+   * - `count-label`/`countLabel`: What the list says of a note's count, with `{count}`.
+   * - `depth`: How many links from the selected note to show, for its local graph. Unset
+   * shows every note. The list holds what the drawing shows.
+   * - `label`: The graph's name, read by screen readers, such as "Research notes".
+   * Required.
+   * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
+   * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
+   * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
+   * - `notes-label`/`notesLabel`: The list's name, read by screen readers.
+   * - `search-label`/`searchLabel`: The search field's name.
+   * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
+   * - `nodes`: The notes. A property, never an attribute. (property only)
+   * - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (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-activate`: A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
+   * - `helix-before-activate`: A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
+   * - `helix-graph-pan`: A pan button or arrow key was pressed. Move the drawing.
+   * - `helix-graph-ready`: The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
+   * - `helix-graph-zoom`: A zoom button or key was pressed. Zoom the drawing.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The renderer's box, which the drawing is made in.
+   * - `filter-icon`: The icon in the search field. Defaults to a magnifying glass.
+   * - `footer`: Content below the graph.
+   * - `header`: Content above the graph.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
+   * - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
+   * - `toggleFullscreen() => void`: Turns fullscreen on or off.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   * - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
+   * is. Call it when the renderer's layout has settled and the graph is
+   * finished. The first call after
+   * the graph was not drawn sends `helix-graph-ready` and turns on
+   * `:state(ready)`.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--graph-background-color`: The color behind the drawing while it loads. (default: `undefined`)
+   * - `--graph-block-size`: The frame's height, as a length. (default: `undefined`)
+   * - `--graph-border-color`: The frame's border color. (default: `undefined`)
+   * - `--graph-panel-size`: The list's width beside the drawing. (default: `undefined`)
+   * - `--viewport-control-background-color`: The background of the zoom and fullscreen buttons. Map and Canvas use the same property. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
+   * - `before`: The room the notes before those drawn would take.
+   * - `body`: The drawing beside the list, or above it where the frame is narrow.
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
+   * - `filter-icon`: The icon beside the search field.
+   * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
+   * - `footer`: The strip below the graph.
+   * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `header`: The strip above the graph.
+   * - `list`: The list of notes, which draws only the rows in view.
+   * - `live`: What screen readers hear when a search changes how many notes there are.
+   * - `note`: One note in the list.
+   * - `note-cursor`: The note the keyboard is on in the list.
+   * - `note-linked`: A note linked to or from the selected one.
+   * - `note-name`: A note's name in the list.
+   * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
+   * - `note-selected`: The selected note, first in the list.
+   * - `pan-down`: The button that moves the graph down.
+   * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
+   * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
+   * - `pan-up`: The button that moves the graph up.
+   * - `panel`: The search field and the list, beside the drawing or below it.
+   * - `region`: The frame: the drawing, its controls and the list.
+   * - `search`: The bar holding the icon, the search field and the count.
+   * - `search-field`: The field that finds a note by its name.
+   * - `stage`: The drawing and its controls.
+   * - `viewport`: The box the renderer draws in.
+   * - `zoom-in`: The zoom in button.
+   * - `zoom-out`: The zoom out button.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: The graph fills the screen.
+   * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-graph": Partial<HelixGraphProps & BaseProps<HelixGraph> & BaseEvents<HelixGraph>>;
+
   /**
    * Set columns in one of two ways:
    *
@@ -56774,6 +57408,225 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixFormatDate>
   >;
 
+  /**
+   * The styled frame: the drawing with its zoom and fullscreen buttons, and the
+   * list of notes beside it, which moves below the drawing where the frame is
+   * narrower than 40rem. The selected note leads the list on a surface of its
+   * own, and the notes linked to it are named by how they link.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
+   * `none`. A family can add words of its own.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.** A
+   * surface a consumer brings often has zoom controls of its own and almost
+   * never has pan buttons, so a single switch would make them choose between
+   * a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where what was
+   * slotted already has controls a reader can find: what this argues for is
+   * that *a* findable control exists, never that it is ours. The methods stay
+   * public either way, so a consumer drawing their own chrome can still drive
+   * the surface.
+   *
+   * Absent is whatever the family rests at, which is this library's rule that
+   * a resting value is an attribute's absence: zoom, the compass and
+   * fullscreen for a map, whose pan buttons a page asks for, and zoom and
+   * fullscreen for a board, which a reader drags and whose pad took a third
+   * of the frame. The
+   * stylesheet lays the cluster out by which buttons are in it rather than by
+   * this attribute, so the two defaults need no rule each.
+   * - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers.
+   *
+   * Absent is the family's own name for it, "Map controls" or "Board
+   * controls", which names what the controls drive rather than the
+   * mechanism. Written here to say it in another language, which every other
+   * string this surface speaks already allowed and this one did not.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, which is a collision
+   * rather than a taste: whatever a consumer slots may put its own controls
+   * in any corner, and every library that draws some made this a setting for
+   * the same reason.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule. Absent is the top end, a
+   * resting value being an attribute's absence: a default that reflected
+   * would write an attribute onto every host that no server sent.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `idle-delay`/`idleDelay`: How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+   *
+   * Zero keeps it up, which is the default: these controls are how a keyboard
+   * reader operates the surface, and chrome that hid itself by default would
+   * be the component undoing its own argument. Set it for a display nobody
+   * drives.
+   * - `pan-down-label`/`panDownLabel`: The pan down button's label.
+   *
+   * **A label for each way rather than one with the way filled in**, which is
+   * what this was: `Pan {way}` filled in with `left`, so a page that said it
+   * in French read out "Déplacer left". The word for a direction is as much
+   * the translator's as the word for panning, and a language can put it
+   * anywhere in the phrase.
+   * - `pan-left-label`/`panLeftLabel`: The pan left button's label.
+   * - `pan-right-label`/`panRightLabel`: The pan right button's label.
+   * - `pan-step`/`panStep`: How far one press pans the view, as a fraction of its size.
+   *
+   * A fraction rather than a distance, because this surface does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture
+   * at any zoom, and a consumer who wants their own units multiplies by them.
+   * - `pan-up-label`/`panUpLabel`: The pan up button's label.
+   * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
+   * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `active`: The `value` of the current item.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
+   *
+   * Ignored once `active` is written.
+   * - `count-label`/`countLabel`: What the list says of a note's count, with `{count}`.
+   * - `depth`: How many links from the selected note to show, for its local graph. Unset
+   * shows every note. The list holds what the drawing shows.
+   * - `label`: The graph's name, read by screen readers, such as "Research notes".
+   * Required.
+   * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
+   * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
+   * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
+   * - `notes-label`/`notesLabel`: The list's name, read by screen readers.
+   * - `search-label`/`searchLabel`: The search field's name.
+   * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
+   * - `nodes`: The notes. A property, never an attribute. (property only)
+   * - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (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-activate`: A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
+   * - `helix-before-activate`: A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
+   * - `helix-graph-pan`: A pan button or arrow key was pressed. Move the drawing.
+   * - `helix-graph-ready`: The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
+   * - `helix-graph-zoom`: A zoom button or key was pressed. Zoom the drawing.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The renderer's box, which the drawing is made in.
+   * - `filter-icon`: The icon in the search field. Defaults to a magnifying glass.
+   * - `footer`: Content below the graph.
+   * - `header`: Content above the graph.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
+   * - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
+   * - `toggleFullscreen() => void`: Turns fullscreen on or off.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   * - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
+   * is. Call it when the renderer's layout has settled and the graph is
+   * finished. The first call after
+   * the graph was not drawn sends `helix-graph-ready` and turns on
+   * `:state(ready)`.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--graph-background-color`: The color behind the drawing while it loads. (default: `undefined`)
+   * - `--graph-block-size`: The frame's height, as a length. (default: `undefined`)
+   * - `--graph-border-color`: The frame's border color. (default: `undefined`)
+   * - `--graph-panel-size`: The list's width beside the drawing. (default: `undefined`)
+   * - `--viewport-control-background-color`: The background of the zoom and fullscreen buttons. Map and Canvas use the same property. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
+   * - `before`: The room the notes before those drawn would take.
+   * - `body`: The drawing beside the list, or above it where the frame is narrow.
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
+   * - `filter-icon`: The icon beside the search field.
+   * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
+   * - `footer`: The strip below the graph.
+   * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `header`: The strip above the graph.
+   * - `list`: The list of notes, which draws only the rows in view.
+   * - `live`: What screen readers hear when a search changes how many notes there are.
+   * - `note`: One note in the list.
+   * - `note-cursor`: The note the keyboard is on in the list.
+   * - `note-linked`: A note linked to or from the selected one.
+   * - `note-name`: A note's name in the list.
+   * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
+   * - `note-selected`: The selected note, first in the list.
+   * - `pan-down`: The button that moves the graph down.
+   * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
+   * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
+   * - `pan-up`: The button that moves the graph up.
+   * - `panel`: The search field and the list, beside the drawing or below it.
+   * - `region`: The frame: the drawing, its controls and the list.
+   * - `search`: The bar holding the icon, the search field and the count.
+   * - `search-field`: The field that finds a note by its name.
+   * - `stage`: The drawing and its controls.
+   * - `viewport`: The box the renderer draws in.
+   * - `zoom-in`: The zoom in button.
+   * - `zoom-out`: The zoom out button.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: The graph fills the screen.
+   * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-graph": Partial<
+    HelixGraphProps &
+      HelixGraphSolidJsProps &
+      BaseProps<HelixGraph> &
+      BaseEvents<HelixGraph>
+  >;
+
   /**
    * Set columns in one of two ways:
    *
@@ -70948,6 +71801,14 @@ export type CustomCssProperties = {
   "--filter-input-shadow"?: (string) | undefined;
   /** The height of the empty field. The field grows from this height. */
   "--filter-input-size"?: (string) | undefined;
+  /** The color behind the drawing while it loads. */
+  "--graph-background-color"?: (string) | undefined;
+  /** The frame's height, as a length. */
+  "--graph-block-size"?: (string) | undefined;
+  /** The frame's border color. */
+  "--graph-border-color"?: (string) | undefined;
+  /** The list's width beside the drawing. */
+  "--graph-panel-size"?: (string) | undefined;
   /** An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set. */
   "--grid-columns"?: (string) | undefined;
   /** How tall a cell is. One row of tall, narrow cells looks like a status page. */