@ixfx/components 0.8.2 → 0.8.4

package/bundle/index.js

@@ -3,8 +3,8 @@ import { customElement, eventOptions, property, query, queryAssignedElements, st
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Fzf } from "fzf";
-import { Colour } from "@ixfx/visual";
 import { createCommandRegistry } from "@clinth/ui-commands";
+import { Colour } from "@ixfx/visual";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
@@ -1290,6 +1290,22 @@ const _themeFallbacksCss = i$3`
     inherits: true;
     initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);
   }
+  @property --deboss-3 {
+    syntax: '*';
+    inherits: true;
+    initial-value:
+      inset 1px 1px 1px 1px color-mix(in oklch, oklch(8% 0.02 240) 60%, transparent),
+      inset -1px -1px 1px 1px color-mix(in oklch, oklch(15% 0.02 240) 50%, transparent),
+      -2px -2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);
+  }
+  @property --emboss-3 {
+    syntax: '*';
+    inherits: true;
+    initial-value:
+      inset 1px 1px 1px 1px color-mix(in oklch, oklch(22% 0.02 240) 30%, transparent),
+      inset -1px -1px 1px 1px color-mix(in oklch, oklch(12% 0.02 240) 20%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);
+  }
   @property --item-bg {
     syntax: '<color>';
     inherits: true;
@@ -3896,6 +3912,1123 @@ __decorate([state()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
 __decorate([state()], AcTokenElement.prototype, "_isOpen", void 0);
 AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
 //#endregion
+//#region src/styles/handle.ts
+/**
+* Shared drag / resize **handle** styling.
+*
+* A handle is the grab affordance for moving or resizing an object. Apply the
+* `.ixfx-handle` class to a small decorative element inside your drag / resize
+* hit-zone and choose a look with two independent attributes:
+*
+* - `data-handle` — texture: `flat` (default) · `dotted` · `dimpled` · `grated`
+* - `data-shape`  — topology: `horizontal` (default) · `vertical` · `spot`
+*
+* - **flat** — a solid rounded capsule (bar) or dot (`spot`), filled with
+*   `--ixfx-handle-color`.
+* - **dotted** — marks in the [Lucide *grip*](https://lucide.dev/icons/grip)
+*   arrangement: three in a row (`horizontal`), three in a column (`vertical`) or a
+*   3×3 block (`spot`). Tinted by `--ixfx-handle-color`. Each mark's corner
+*   rounding is `--ixfx-handle-radius` (→ the theme `--radius-l`), so a flat,
+*   squared-off theme renders them as **squares** instead of circles.
+* - **dimpled** — that same layout, but each bar mark is pressed in: a lighter
+*   copy peeking out above-left and a darker copy below-right of the base mark.
+* - **grated** — fine 45° knurling: each ridge is a lit edge, the base colour,
+*   then a shaded edge. `spot` is the same hatch on a square crop.
+*
+* `dotted` / `dimpled` / `grated` are texture only — no plate, box or border; the
+* gaps are transparent so the surface behind shows through. The base colour is
+* `--ixfx-handle-color` (a theme token); the deboss edges default to that colour
+* lightened / darkened.
+*
+* The handle is `pointer-events: none` — bind pointer handlers to the surrounding
+* hit-zone. It reaches its "active" look (`--ixfx-handle-opacity-active`, and for
+* `flat` / `dotted` the `--ixfx-handle-color-active` tint) when its immediate
+* parent (the hit-zone) is `:hover` / `:focus-visible` / `[data-active]`, or when
+* the handle itself is. Set `[data-active]` on the hit-zone yourself while a drag
+* is live so the handle stays lit after the pointer leaves it.
+*
+* ```ts
+* import { handleStyles } from '../styles/handle.js';
+*
+* static styles = [themeFallbacks, handleStyles, css`...`];
+* ```
+* ```html
+* <div class="hit-zone" @pointerdown=${this.#onDown}>
+*   <span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
+* </div>
+* ```
+*
+* ## CSS variables (defaults shown; override on the element or any ancestor)
+* - `--ixfx-handle-color`          `var(--surface-muted-text)` — `flat` / `dotted` fill
+* - `--ixfx-handle-color-active`   `var(--accent)`             — `flat` / `dotted` hover / focus
+* - `--ixfx-handle-thickness`      `6px`  — cross-axis size of a bar
+* - `--ixfx-handle-length`         `44px` — long-axis size of a bar (`100%` to fill)
+* - `--ixfx-handle-spot-size`      `14px` — width = height of a `spot`
+* - `--ixfx-handle-radius`         `var(--radius-l)` — `flat` capsule / dotted & dimpled mark rounding
+* - `--ixfx-handle-opacity`        `0.55` — rest opacity
+* - `--ixfx-handle-opacity-active` `1`
+* - `--ixfx-handle-dot-size`       `3px`  — mark size (dotted / dimpled)
+* - `--ixfx-handle-dot-gap`        `length/4` (bar) · `spot/3` — mark centre-to-centre step
+* - `--ixfx-handle-tile`           `5px`  — knurl period (grated)
+* - `--ixfx-handle-highlight`      `color-mix(currentColor 35%, #fff)` — lit deboss edge
+* - `--ixfx-handle-shadow`         `color-mix(currentColor 60%, #000)` — shaded deboss edge
+*/
+const handleStyles = i$3`
+  .ixfx-handle {
+    /* Bridge: public --ixfx-handle-* (element or ancestor) → internal alias → fallback. */
+    --_handle-color: var(--ixfx-handle-color, var(--surface-3-text));
+    --_handle-color-active: var(--ixfx-handle-color-active, var(--surface-3-text));
+    --_handle-thickness: var(--ixfx-handle-thickness, 6px);
+    --_handle-length: var(--ixfx-handle-length, 44px);
+    --_handle-spot: var(--ixfx-handle-spot-size, 14px);
+    --_handle-radius: var(--ixfx-handle-radius, var(--radius-l));
+    --_handle-opacity: var(--ixfx-handle-opacity, 0.55);
+    --_handle-opacity-active: var(--ixfx-handle-opacity-active, 1);
+    --_handle-dot: var(--ixfx-handle-dot-size, 3px);
+    --_handle-tile: var(--ixfx-handle-tile, 5px);
+    /* Centre-to-centre step of the dotted / dimpled marks (a length). Defaults to
+       a share of the long axis; a bar shows ~3 marks. */
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-length) / 4));
+    /* How far a dimpled mark's highlight / shadow copy is offset. */
+    --_dimple-off: calc(var(--_handle-dot) * 0.15);
+    /* The mark colour lightened / darkened for the two deboss edges. */
+    --_handle-hi: var(--ixfx-handle-highlight, color-mix(in oklch, var(--surface-4) 50%, var(--_handle-color)));
+    --_handle-lo: var(--ixfx-handle-shadow, color-mix(in oklch, var(--surface-2) 40%, var(--_handle-color)));
+
+    box-sizing: border-box;
+    display: inline-block;
+    flex: none;
+    width: var(--_handle-length);
+    height: var(--_handle-thickness);
+    color: var(--_handle-color);
+    opacity: var(--_handle-opacity);
+    pointer-events: none;
+    transition:
+      color var(--transition, 0.15s ease-out),
+      opacity var(--transition, 0.15s ease-out);
+  }
+
+  .ixfx-handle[data-shape='vertical'] {
+    width: var(--_handle-thickness);
+    height: var(--_handle-length);
+  }
+
+  .ixfx-handle[data-shape='spot'] {
+    width: var(--_handle-spot);
+    height: var(--_handle-spot);
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-spot) / 3));
+  }
+
+  .ixfx-handle:hover,
+  .ixfx-handle:focus-visible,
+  .ixfx-handle[data-active],
+  :hover > .ixfx-handle,
+  :focus-visible > .ixfx-handle,
+  [data-active] > .ixfx-handle {
+    color: var(--_handle-color-active);
+    opacity: var(--_handle-opacity-active);
+  }
+
+  /* ── flat: solid capsule / dot ────────────────────────────────────────── */
+  .ixfx-handle[data-handle='flat'] {
+    background: currentColor;
+    border-radius: var(--_handle-radius);
+  }
+  .ixfx-handle[data-handle='flat'][data-shape='spot'] {
+    border-radius: 50%;
+  }
+
+  /* ── dotted / dimpled: 3 marks in a row / column (or 3×3 for spot), drawn as
+        one ::before mark whose border-radius follows the theme — round normally,
+        square in a flat / squared-off theme (--radius-l: 0). box-shadow paints
+        the rest of the marks. ─────────────────────────────────────────────── */
+  .ixfx-handle[data-handle='dotted'],
+  .ixfx-handle[data-handle='dimpled'] {
+    position: relative;
+  }
+  .ixfx-handle[data-handle='dotted']::before,
+  .ixfx-handle[data-handle='dimpled']::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--_handle-dot);
+    height: var(--_handle-dot);
+    transform: translate(-50%, -50%);
+    border-radius: var(--_handle-radius);
+    background: currentColor;
+  }
+
+  /* dotted — the two other marks are plain copies along the axis. */
+  .ixfx-handle[data-handle='dotted']::before {
+    box-shadow:
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      var(--_handle-gap) 0 0 0 currentColor;
+  }
+  .ixfx-handle[data-handle='dotted'][data-shape='vertical']::before {
+    box-shadow:
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      0 var(--_handle-gap) 0 0 currentColor;
+  }
+  .ixfx-handle[data-handle='dotted'][data-shape='spot']::before,
+  .ixfx-handle[data-handle='dimpled'][data-shape='spot']::before {
+    box-shadow:
+      calc(-1 * var(--_handle-gap)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      var(--_handle-gap) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      var(--_handle-gap) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) var(--_handle-gap) 0 0 currentColor,
+      0 var(--_handle-gap) 0 0 currentColor,
+      var(--_handle-gap) var(--_handle-gap) 0 0 currentColor;
+  }
+
+  /* dimpled — each bar mark also gets a lighter copy up-left and a darker copy
+     down-right (spot stays plain — the 3D is imperceptible at that size). */
+  .ixfx-handle[data-handle='dimpled']:not([data-shape='spot'])::before {
+    box-shadow:
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) - var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      var(--_handle-gap) 0 0 0 currentColor,
+      calc(var(--_handle-gap) - var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo);
+  }
+  .ixfx-handle[data-handle='dimpled'][data-shape='vertical']::before {
+    box-shadow:
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) var(--_dimple-off) 0 0 var(--_handle-lo),
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) - var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 var(--_handle-gap) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(var(--_handle-gap) - var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo);
+  }
+
+  /* ── grated: fine 45° knurling — each ridge is a lit edge, the base colour,
+        then a shaded edge. Same hatch at every shape (spot is a square crop). ── */
+  .ixfx-handle[data-handle='grated'] {
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--_handle-hi) 0 0.9px,
+      currentColor 0.9px 1.6px,
+      var(--_handle-lo) 1.6px 2.5px,
+      transparent 2.5px var(--_handle-tile)
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ixfx-handle {
+      transition: none;
+    }
+  }
+`;
+//#endregion
+//#region src/titlebar/titlebar.ts
+let TitlebarElement = class TitlebarElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.title = ``;
+		this.iconName = ``;
+		this.orientation = `horizontal`;
+		this.variant = `titlebar`;
+		this.closable = false;
+		this.collapsible = false;
+		this.collapsed = false;
+		this.toggleInteraction = `implicit`;
+	}
+	_onToggleClick() {
+		if (!this.collapsible) return;
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(new CustomEvent(`toggle`, {
+			detail: { collapsed: this.collapsed },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onCloseClick() {
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_getCaretIcon() {
+		return `chevron-down`;
+	}
+	render() {
+		const caretIcon = this._getCaretIcon();
+		const isVertical = this.orientation === `vertical`;
+		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
+		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
+		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
+		return b`
+      <div
+        class="bar"
+        role="toolbar"
+        @click=${implicitToggle ? this._onToggleClick : A}
+      >
+        ${treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
+        <div class="title-text-wrapper">
+          ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
+          <span class="title-text">${this.title}</span>
+        </div>
+
+        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
+          <slot name="toolbar"></slot>
+          ${this.closable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close panel"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+          ${!treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    :host {
+      --titlebar-background: var(--surface-4);
+
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .bar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--space-s) var(--space-m);
+      background: var(--titlebar-background);
+      color: var(--surface-3-text);
+      min-height: 2em;
+      height: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    :host([orientation="vertical"]) .bar {
+      flex-direction: row;
+      min-width: 2em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    .caret-btn,
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: var(--space-xs);
+      margin: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--radius-s);
+      transition: background var(--transition);
+      opacity: var(--prominence-idle-opacity);
+    }
+
+    .caret-btn:hover,
+    .close-btn:hover {
+      background: var(--surface-5);
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    .caret-btn:focus-visible,
+    .close-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }
+
+    ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      transition: transform var(--transition);
+    }
+
+    .title-icon {
+      flex-shrink: 0;
+    }
+
+    .title-text {
+      flex: 1;
+      padding-left: 1ch;
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      white-space: nowrap;
+      overflow: hidden;
+      align-self: center;
+      text-overflow: ellipsis;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([collapsible][toggle-interaction="implicit"]) .bar {
+      cursor: pointer;
+    }
+
+    :host([orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      padding-left: 0;
+      padding-bottom: 1ch;
+      text-orientation: mixed;
+      transform: rotate(180deg);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      margin-left: auto;
+    }
+
+    :host([orientation="vertical"]) .toolbar {
+      flex-direction: column;
+      margin-left: 0;
+      margin-top: auto;
+      writing-mode: horizontal-tb;
+    }
+
+    slot[name="toolbar"] {
+      display: contents;
+    }
+
+    ::slotted(slot[name="toolbar"]) {
+      display: contents;
+    }
+
+    .title-text-wrapper {
+      display: flex;
+      padding: 0 var(--space-s);
+    }
+
+    /* === Midline variant === */
+
+    :host([variant="midline"]) .bar {
+      background: transparent;
+      padding: var(--space-xs) var(--space-m);
+      min-height: unset;
+      position: relative;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .bar {
+      padding: var(--space-m) var(--space-xs);
+      min-width: unset;
+    }
+
+    :host([variant="midline"]) .title-text-wrapper {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      background: var(--surface-3);
+    }
+
+    :host([variant="midline"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0 0.5ch 0 0.5ch;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="midline"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="midline"]) .caret-btn {
+      position: relative;
+      z-index: 1;
+      background: var(--surface-3);
+      opacity: 1;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .title-text {
+      transform: rotate(180deg);
+      padding: 0.5ch 0 0.5ch 0ch;
+    }
+
+    :host([variant="midline"]) .toolbar {
+      position: relative;
+      z-index: 2;
+      background: var(--surface-3);
+      margin-left: 0;
+    }
+
+    :host([variant="midline"][orientation="horizontal"]) .toolbar {
+      margin-left: auto;
+    }
+
+    /* Debossed line runs from after title-text to before toolbar */
+    :host([variant="midline"]) .bar::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      transform: translateY(-50%);
+      background: var(--surface-2);
+      box-shadow:
+        0 -1px 0 var(--surface-5),
+        0 1px 0 var(--surface-1);
+      z-index: 0;
+    }
+
+    /* For vertical midline, line runs vertically */
+    :host([variant="midline"][orientation="vertical"]) .bar::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      right: unset;
+      width: 1px;
+      height: 100%;
+      transform: translateX(-50%);
+      box-shadow:
+        -1px 0 0 var(--surface-5),
+        1px 0 0 var(--surface-1);
+    }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], TitlebarElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], TitlebarElement.prototype, "iconName", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`,
+	reflect: true
+})], TitlebarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `variant`,
+	reflect: true
+})], TitlebarElement.prototype, "variant", void 0);
+__decorate([property({ type: Boolean })], TitlebarElement.prototype, "closable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsed", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], TitlebarElement.prototype, "toggleInteraction", void 0);
+TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarElement);
+//#endregion
+//#region src/bottom-drawer/bottom-drawer.ts
+/** Builds the command id for a named drawer's command, e.g. `inspector.expand`. */
+function bottomDrawerCommandId(name, command) {
+	return `${name.trim()}.${command}`;
+}
+function clampRange(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+let BottomDrawerElement = class BottomDrawerElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.height = 320;
+		this.minHeight = 160;
+		this.dismissThreshold = 96;
+		this.maxHeightRatio = .85;
+		this.label = `Drawer`;
+		this.iconName = ``;
+		this.closable = true;
+		this.collapsible = true;
+		this.maintainHandle = false;
+		this.name = ``;
+		this.#dragStartY = 0;
+		this.#dragStartHeight = 0;
+		this.#collapsedDragging = false;
+		this.#commandName = ``;
+		this.#commandIds = [];
+		this.#onResizeStart = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const edge = event.currentTarget;
+			edge.setPointerCapture(event.pointerId);
+			if (!this.open) {
+				this.#collapsedDragging = false;
+				this.#dragStartY = event.clientY;
+				this.#dragStartHeight = this.dismissThreshold;
+				edge.addEventListener(`pointermove`, this.#onTabPointerMove);
+				edge.addEventListener(`pointerup`, this.#onTabPointerUp, { once: true });
+				edge.addEventListener(`pointercancel`, this.#onTabPointerUp, { once: true });
+				return;
+			}
+			this.#dragStartY = event.clientY;
+			this.#dragStartHeight = this.#displayHeight();
+			this._dragHeight = this.#dragStartHeight;
+			this.toggleAttribute(`resizing`, true);
+			edge.addEventListener(`pointermove`, this.#onResizeMove);
+			edge.addEventListener(`pointerup`, this.#onResizeEnd, { once: true });
+			edge.addEventListener(`pointercancel`, this.#onResizeEnd, { once: true });
+		};
+		this.#onResizeMove = (event) => {
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onResizeEnd = (event) => {
+			const edge = event.currentTarget;
+			edge.removeEventListener(`pointermove`, this.#onResizeMove);
+			edge.removeEventListener(`pointerup`, this.#onResizeEnd);
+			edge.removeEventListener(`pointercancel`, this.#onResizeEnd);
+			if (edge.hasPointerCapture(event.pointerId)) edge.releasePointerCapture(event.pointerId);
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onResizeKeyDown = (event) => {
+			if (!this.open) {
+				if (event.key === `ArrowUp` || event.key === `Enter` || event.key === ` ` || event.key === `Home` || event.key === `End`) {
+					event.preventDefault();
+					this.show();
+				}
+				return;
+			}
+			const delta = event.shiftKey ? 64 : 16;
+			if (event.key === `ArrowUp`) {
+				event.preventDefault();
+				this.#setHeight(this.height + delta);
+			} else if (event.key === `ArrowDown`) {
+				event.preventDefault();
+				if (this.height - delta < this.dismissThreshold) this.close();
+				else this.#setHeight(this.height - delta);
+			} else if (event.key === `Home`) {
+				event.preventDefault();
+				this.#setHeight(this.minHeight);
+			} else if (event.key === `End`) {
+				event.preventDefault();
+				this.#setHeight(this.#maxHeight());
+			}
+		};
+		this.#onTabPointerMove = (event) => {
+			const delta = this.#dragStartY - event.clientY;
+			if (!this.#collapsedDragging) {
+				if (delta < 4) return;
+				this.#collapsedDragging = true;
+				this.show();
+				this.toggleAttribute(`resizing`, true);
+			}
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onTabPointerUp = (event) => {
+			const target = event.currentTarget;
+			target.removeEventListener(`pointermove`, this.#onTabPointerMove);
+			target.removeEventListener(`pointerup`, this.#onTabPointerUp);
+			target.removeEventListener(`pointercancel`, this.#onTabPointerUp);
+			if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+			if (!this.#collapsedDragging) {
+				this.show();
+				return;
+			}
+			this.#collapsedDragging = false;
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onDrawerKeyDown = (event) => {
+			if (event.key !== `Escape`) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.close();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
+    :host {
+      --bottom-drawer-background: color-mix(in srgb, var(--surface-2) 84%, transparent);
+      --bottom-drawer-border: 1px solid color-mix(in srgb, var(--surface-2-text) 14%, transparent);
+      --bottom-drawer-radius: var(--radius-l);
+      --bottom-drawer-blur: 18px;
+      --bottom-drawer-shadow: var(--shadow-l);
+      --bottom-drawer-collapsed-width: 96px;
+
+      display: block;
+      position: relative;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .content {
+      position: absolute;
+      inset: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+    .content ::slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+    .drawer {
+      --m: 0;
+      position: absolute;
+      z-index: 2;
+      right: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      bottom: 0;
+      left: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      height: var(--bottom-drawer-height);
+      max-height: 100%;
+      min-height: 0;
+      color: var(--surface-2-text);
+      background: var(--bottom-drawer-background);
+      border: var(--bottom-drawer-border);
+      border-bottom: 0;
+      border-radius: var(--bottom-drawer-radius) var(--bottom-drawer-radius) 0 0;
+      box-shadow: var(--bottom-drawer-shadow);
+      backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      -webkit-backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      opacity: 0;
+      transform: translateY(100%);
+      visibility: hidden;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition),
+        visibility 0s linear 0.16s;
+      will-change: transform, opacity;
+    }
+    :host([open]) .drawer {
+      opacity: var(--bottom-drawer-opacity, 1);
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([resizing]) {
+      cursor: ns-resize;
+      user-select: none;
+    }
+    :host([resizing]) .drawer {
+      transition: none;
+    }
+    .resize-edge {
+      position: absolute;
+      z-index: 1;
+      top: -5px;
+      right: 0;
+      left: 0;
+      height: 11px;
+      cursor: ns-resize;
+      touch-action: none;
+      outline: none;
+    }
+    .resize-edge .ixfx-handle {
+      position: absolute;
+      top: 7px;
+      left: 50%;
+      transform: translateX(-50%);
+      --ixfx-handle-length: 44px;
+      --ixfx-handle-thickness: 3px;
+      --ixfx-handle-radius: 999px;
+    }
+    /* Inner content fades as the drawer morphs into its collapsed tab. */
+    ixfx-titlebar,
+    .body {
+      opacity: calc(1 - var(--m, 0));
+      transition: opacity var(--transition);
+    }
+    :host([resizing]) ixfx-titlebar,
+    :host([resizing]) .body {
+      transition: none;
+    }
+    /* Collapsed tab: docked to the bottom edge, narrowed to handle width. */
+    :host([maintain-handle]:not([open])) .drawer {
+      --m: 1;
+      height: 20px;
+      opacity: 1;
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([maintain-handle]:not([open])) ixfx-titlebar,
+    :host([maintain-handle]:not([open])) .body {
+      display: none;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge {
+      top: 0;
+      height: 100%;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge .ixfx-handle {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    ixfx-titlebar {
+      flex: none;
+      --titlebar-background: var(--bottom-drawer-title-background, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--surface-2-text) 10%, transparent);
+    }
+    .body {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+    .body ::slotted(*) {
+      box-sizing: border-box;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .drawer,
+      ixfx-titlebar,
+      .body {
+        transition-duration: 0s;
+      }
+    }
+  `
+		];
+	}
+	#dragStartY;
+	#dragStartHeight;
+	#collapsedDragging;
+	#ownedRegistry;
+	#commandTarget;
+	#commandName;
+	#commandIds;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#syncCommands();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#teardownCommands();
+		if (this.#ownedRegistry !== void 0) {
+			if (this.registry === this.#ownedRegistry) this.registry = void 0;
+			this.#ownedRegistry = void 0;
+		}
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`name`) || changed.has(`registry`)) this.#syncCommands();
+	}
+	show() {
+		this.open = true;
+	}
+	close() {
+		if (!this.open) return;
+		this.open = false;
+		this.dispatchEvent(new CustomEvent(`drawer-close`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	toggle() {
+		if (this.open) this.close();
+		else this.show();
+	}
+	#syncCommands() {
+		const name = this.name.trim();
+		const target = this.registry ?? this.#ownedRegistry;
+		if (name !== `` && this.isConnected && target !== void 0 && this.#commandTarget === target && this.#commandName === name) return;
+		this.#teardownCommands();
+		if (name === `` || !this.isConnected) return;
+		const resolved = this.registry ?? (this.#ownedRegistry ??= createCommandRegistry());
+		if (this.#ownedRegistry !== void 0 && resolved !== this.#ownedRegistry) this.#ownedRegistry = void 0;
+		if (this.registry === void 0) this.registry = resolved;
+		const registered = [];
+		const commands = [
+			{
+				command: `expand`,
+				label: `Expand ${this.label}`,
+				description: `Open the ${this.label} drawer`,
+				execute: () => this.show()
+			},
+			{
+				command: `collapse`,
+				label: `Collapse ${this.label}`,
+				description: `Close the ${this.label} drawer`,
+				execute: () => this.close()
+			},
+			{
+				command: `toggle`,
+				label: `Toggle ${this.label}`,
+				description: `Open the ${this.label} drawer if closed, close it if open`,
+				execute: () => this.toggle()
+			}
+		];
+		for (const { command, label, description, execute } of commands) {
+			const id = bottomDrawerCommandId(name, command);
+			if (resolved.has(id)) continue;
+			resolved.register({
+				id,
+				label,
+				description,
+				execute
+			});
+			registered.push(id);
+		}
+		this.#commandTarget = resolved;
+		this.#commandName = name;
+		this.#commandIds = registered;
+	}
+	#teardownCommands() {
+		if (this.#commandTarget !== void 0) {
+			for (const id of this.#commandIds) this.#commandTarget.unregister(id);
+			this.#commandTarget = void 0;
+			this.#commandName = ``;
+			this.#commandIds = [];
+		}
+	}
+	_onTitlebarToggle(event) {
+		event.stopPropagation();
+		if (event.detail.collapsed) this.close();
+		else this.open = true;
+	}
+	_onTitlebarClose(event) {
+		event.stopPropagation();
+		this.close();
+	}
+	render() {
+		const raw = this.#displayHeight();
+		const max = this.#maxHeight();
+		const morph = this.#morphProgress(raw);
+		const height = this.open ? raw * (1 - morph) + 20 * morph : 20;
+		const opacity = this.maintainHandle && this.open ? 1 : this.#dragOpacity(raw);
+		return b`
+      <div class="content"><slot></slot></div>
+      <section
+        class="drawer"
+        style=${`--bottom-drawer-height: ${height}px; --bottom-drawer-opacity: ${opacity}; --m: ${morph}`}
+        role="region"
+        aria-label=${this.label}
+        @keydown=${this.#onDrawerKeyDown}
+      >
+        <div
+          class="resize-edge"
+          role="separator"
+          tabindex="0"
+          aria-label=${`${this.open ? `Resize` : `Expand`} ${this.label}`}
+          aria-orientation="horizontal"
+          aria-valuemin=${this.minHeight}
+          aria-valuemax=${max}
+          aria-valuenow=${Math.round(raw)}
+          @pointerdown=${this.#onResizeStart}
+          @keydown=${this.#onResizeKeyDown}
+        ><span class="ixfx-handle" data-handle="dimpled" data-shape="horizontal" part="handle"></span></div>
+        <ixfx-titlebar
+          .title=${this.label}
+          .iconName=${this.iconName}
+          .closable=${this.closable}
+          .collapsible=${this.collapsible}
+          .collapsed=${!this.open}
+          ?inert=${!this.open}
+          @toggle=${this._onTitlebarToggle}
+          @close=${this._onTitlebarClose}
+        >
+          <slot name="toolbar" slot="toolbar"></slot>
+        </ixfx-titlebar>
+        <div class="body" ?inert=${!this.open}><slot name="drawer"></slot></div>
+      </section>
+    `;
+	}
+	#maxHeight() {
+		const availableHeight = this.clientHeight || this.height;
+		return Math.max(this.minHeight, availableHeight * clampRange(this.maxHeightRatio, 0, 1));
+	}
+	#displayHeight() {
+		return clampRange(this._dragHeight ?? this.height, 0, this.#maxHeight());
+	}
+	#dragOpacity(height) {
+		if (this._dragHeight === void 0 || height >= this.minHeight) return 1;
+		const fadeRange = this.minHeight - this.dismissThreshold;
+		if (fadeRange <= 0) return height >= this.dismissThreshold ? 1 : 0;
+		return clampRange((height - this.dismissThreshold) / fadeRange, 0, 1);
+	}
+	#morphProgress(raw) {
+		if (!this.open) return this.maintainHandle ? 1 : 0;
+		if (this._dragHeight === void 0 || !this.maintainHandle) return 0;
+		const range = this.minHeight - this.dismissThreshold;
+		if (range <= 0) return raw < this.dismissThreshold ? 1 : 0;
+		return clampRange((this.minHeight - raw) / range, 0, 1);
+	}
+	#setHeight(height) {
+		this.height = clampRange(height, this.minHeight, this.#maxHeight());
+		this.dispatchEvent(new CustomEvent(`drawer-resize`, {
+			detail: { height: this.height },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onResizeStart;
+	#onResizeMove;
+	#onResizeEnd;
+	#onResizeKeyDown;
+	#onTabPointerMove;
+	#onTabPointerUp;
+	#onDrawerKeyDown;
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], BottomDrawerElement.prototype, "open", void 0);
+__decorate([property({ type: Number })], BottomDrawerElement.prototype, "height", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-height`
+})], BottomDrawerElement.prototype, "minHeight", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `dismiss-threshold`
+})], BottomDrawerElement.prototype, "dismissThreshold", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-height-ratio`
+})], BottomDrawerElement.prototype, "maxHeightRatio", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], BottomDrawerElement.prototype, "iconName", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "closable", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `maintain-handle`,
+	reflect: true
+})], BottomDrawerElement.prototype, "maintainHandle", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "name", void 0);
+__decorate([property({ attribute: false })], BottomDrawerElement.prototype, "registry", void 0);
+__decorate([state()], BottomDrawerElement.prototype, "_dragHeight", void 0);
+BottomDrawerElement = __decorate([safeCustomElement(`ixfx-bottom-drawer`)], BottomDrawerElement);
+//#endregion
 //#region src/icons/defaults.ts
 /**
 * Chevron pointing down. Used for split-button dropdown toggle.
@@ -4562,6 +5695,306 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/list-drag-select-controller.ts
+const DEFAULT_POINTER_TYPES = [`mouse`, `pen`];
+const DEFAULT_THRESHOLD = 4;
+/** Pointer distance (px) from an edge that triggers auto-scroll. */
+const EDGE_ZONE = 28;
+/** Max auto-scroll speed in px per frame. */
+const MAX_SCROLL_SPEED = 16;
+/**
+* Shared pointer-drag (marquee / rubber-band) selection for list components.
+*
+* Owns all pointer plumbing and rectangle state; knows nothing about DOM
+* geometry or the selection model — those are host callbacks. Mirrors the
+* `TickledController` attach pattern (`new ListDragSelectController(this, …)`).
+*
+* Behaviour: `pointerdown` on the surface records a start point; once the
+* pointer moves past `threshold`, the surface captures the pointer and every
+* move recomputes the rect, hit-tests, and calls `onPreview`. On release the
+* final set is delivered once via `onCommit`. A press that never crosses the
+* threshold does nothing (the normal `@click` path runs).
+*/
+var ListDragSelectController = class {
+	#host;
+	#config;
+	#boundSurface;
+	#pointerId;
+	#startClientX = 0;
+	#startClientY = 0;
+	#startX = 0;
+	#startY = 0;
+	#currentClientX = 0;
+	#currentClientY = 0;
+	#lastModifiers = {
+		shiftKey: false,
+		ctrlKey: false,
+		metaKey: false
+	};
+	#dragging = false;
+	#suppressClick = false;
+	/** Selection as it was when the drag started — the combine baseline. */
+	#base = /* @__PURE__ */ new Set();
+	/** Combine mode of the most recent preview (drives the commit flag). */
+	#lastMode = `replace`;
+	#preview = /* @__PURE__ */ new Set();
+	#raf = 0;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	/** `true` while a drag is in progress or its trailing click is still pending. */
+	get isDragging() {
+		return this.#dragging || this.#suppressClick;
+	}
+	/** `true` once the press has crossed the threshold and a rect is live. */
+	get isActive() {
+		return this.#dragging;
+	}
+	hostConnected() {
+		this.#bindSurface();
+		window.addEventListener(`pointermove`, this.#onPointerMove);
+		window.addEventListener(`pointerup`, this.#onPointerUp);
+		window.addEventListener(`pointercancel`, this.#onPointerCancel);
+	}
+	hostDisconnected() {
+		this.#unbindSurface();
+		window.removeEventListener(`pointermove`, this.#onPointerMove);
+		window.removeEventListener(`pointerup`, this.#onPointerUp);
+		window.removeEventListener(`pointercancel`, this.#onPointerCancel);
+		this.#stopAutoScroll();
+		this.#reset();
+	}
+	/** Re-bind when the surface element appears/changes (e.g. first render). */
+	hostUpdated() {
+		if ((this.#safeSurface() ?? this.#host) !== this.#boundSurface) this.#bindSurface();
+	}
+	#safeSurface() {
+		try {
+			return this.#config.getSurface();
+		} catch {
+			return;
+		}
+	}
+	#bindSurface() {
+		const next = this.#safeSurface() ?? this.#host;
+		if (next === this.#boundSurface) return;
+		this.#unbindSurface();
+		this.#boundSurface = next;
+		next.addEventListener(`pointerdown`, this.#onPointerDown);
+	}
+	#unbindSurface() {
+		this.#boundSurface?.removeEventListener(`pointerdown`, this.#onPointerDown);
+		this.#boundSurface = void 0;
+	}
+	#enabledTypes() {
+		return this.#config.pointerTypes ?? DEFAULT_POINTER_TYPES;
+	}
+	#threshold() {
+		return this.#config.threshold ?? DEFAULT_THRESHOLD;
+	}
+	#onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (!this.#enabledTypes().includes(event.pointerType)) return;
+		let enabled = false;
+		try {
+			enabled = this.#config.isEnabled();
+		} catch {
+			return;
+		}
+		if (!enabled) return;
+		const target = event.target;
+		if (target instanceof Element && typeof target.closest === `function`) {
+			if (target.closest(`input,button,a,select,textarea,[contenteditable]`)) return;
+		}
+		if (this.#config.shouldStart) try {
+			if (!this.#config.shouldStart(event)) return;
+		} catch {
+			return;
+		}
+		const box = (this.#safeSurface() ?? this.#host).getBoundingClientRect();
+		this.#pointerId = event.pointerId;
+		this.#startClientX = event.clientX;
+		this.#startClientY = event.clientY;
+		this.#currentClientX = event.clientX;
+		this.#currentClientY = event.clientY;
+		this.#startX = Math.min(Math.max(event.clientX - box.left, 0), Math.max(0, box.width));
+		this.#startY = Math.min(Math.max(event.clientY - box.top, 0), Math.max(0, box.height));
+		this.#dragging = false;
+		this.#suppressClick = false;
+		this.#base = /* @__PURE__ */ new Set();
+		this.#lastMode = `replace`;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+	};
+	/** Combine mode for the current modifiers: Shift adds, Cmd/Ctrl inverts. */
+	#modeFor(modifiers) {
+		if (modifiers.metaKey || modifiers.ctrlKey) return `invert`;
+		if (modifiers.shiftKey) return `add`;
+		return `replace`;
+	}
+	#onPointerMove = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#currentClientX = event.clientX;
+		this.#currentClientY = event.clientY;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		const moved = Math.hypot(event.clientX - this.#startClientX, event.clientY - this.#startClientY);
+		if (!this.#dragging) {
+			if (moved < this.#threshold()) return;
+			this.#dragging = true;
+			try {
+				this.#base = new Set(this.#config.getBaseSelection());
+			} catch {
+				this.#base = /* @__PURE__ */ new Set();
+			}
+			const surface = this.#safeSurface() ?? this.#host;
+			try {
+				if (typeof surface.setPointerCapture === `function`) surface.setPointerCapture(event.pointerId);
+			} catch {}
+		}
+		try {
+			event.preventDefault?.();
+		} catch {}
+		this.#updatePreview();
+		this.#kickAutoScroll();
+	};
+	#surfaceBox() {
+		const surface = this.#safeSurface() ?? this.#host;
+		try {
+			return surface.getBoundingClientRect();
+		} catch {
+			return;
+		}
+	}
+	#currentRect() {
+		const box = this.#surfaceBox();
+		if (!box) return void 0;
+		const cx = Math.min(Math.max(this.#currentClientX - box.left, 0), Math.max(0, box.width));
+		const cy = Math.min(Math.max(this.#currentClientY - box.top, 0), Math.max(0, box.height));
+		return {
+			x: Math.min(this.#startX, cx),
+			y: Math.min(this.#startY, cy),
+			width: Math.abs(cx - this.#startX),
+			height: Math.abs(cy - this.#startY)
+		};
+	}
+	#updatePreview() {
+		const rect = this.#currentRect();
+		if (!rect) return;
+		let hit = [];
+		try {
+			hit = this.#config.hitTest(rect);
+		} catch {
+			hit = [];
+		}
+		const mode = this.#modeFor(this.#lastModifiers);
+		this.#lastMode = mode;
+		const hitSet = new Set(hit);
+		let preview;
+		if (mode === `add`) preview = /* @__PURE__ */ new Set([...this.#base, ...hitSet]);
+		else if (mode === `invert`) {
+			const toggled = new Set(this.#base);
+			for (const item of hitSet) if (toggled.has(item)) toggled.delete(item);
+			else toggled.add(item);
+			preview = toggled;
+		} else preview = hitSet;
+		this.#preview = preview;
+		try {
+			this.#config.onPreview(preview, rect);
+		} catch {}
+	}
+	#onPointerUp = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		const wasDragging = this.#dragging;
+		const surface = this.#safeSurface() ?? this.#host;
+		try {
+			if (typeof surface.hasPointerCapture === `function` && typeof surface.releasePointerCapture === `function` && surface.hasPointerCapture(event.pointerId)) surface.releasePointerCapture(event.pointerId);
+		} catch {}
+		this.#stopAutoScroll();
+		this.#pointerId = void 0;
+		if (!wasDragging) {
+			this.#reset();
+			return;
+		}
+		this.#dragging = false;
+		const final = this.#preview;
+		try {
+			this.#config.onCommit(final, { additive: this.#lastMode !== `replace` });
+		} catch {}
+		try {
+			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
+		} catch {}
+		this.#preview = /* @__PURE__ */ new Set();
+		this.#suppressClick = true;
+		window.setTimeout(() => {
+			this.#suppressClick = false;
+		}, 0);
+	};
+	#onPointerCancel = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#stopAutoScroll();
+		this.#pointerId = void 0;
+		this.#dragging = false;
+		this.#preview = /* @__PURE__ */ new Set();
+		try {
+			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
+		} catch {}
+		this.#suppressClick = false;
+	};
+	#kickAutoScroll() {
+		if (!this.#config.autoScroll || this.#raf !== 0) return;
+		this.#raf = requestAnimationFrame(this.#autoScrollTick);
+	}
+	#autoScrollTick = () => {
+		this.#raf = 0;
+		if (!this.#dragging || this.#pointerId === void 0) return;
+		const box = this.#surfaceBox();
+		if (!box) return;
+		const px = this.#currentClientX - box.left;
+		const py = this.#currentClientY - box.top;
+		let dx = 0;
+		let dy = 0;
+		if (px < EDGE_ZONE) dx = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, px) / EDGE_ZONE));
+		else if (px > box.width - EDGE_ZONE) dx = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.width - px) / EDGE_ZONE));
+		if (py < EDGE_ZONE) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, py) / EDGE_ZONE));
+		else if (py > box.height - EDGE_ZONE) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.height - py) / EDGE_ZONE));
+		if (dx === 0 && dy === 0) return;
+		const autoScroll = this.#config.autoScroll;
+		if (!autoScroll) return;
+		try {
+			autoScroll(dx, dy);
+		} catch {}
+		this.#updatePreview();
+		this.#raf = requestAnimationFrame(this.#autoScrollTick);
+	};
+	#stopAutoScroll() {
+		if (this.#raf !== 0) {
+			cancelAnimationFrame(this.#raf);
+			this.#raf = 0;
+		}
+	}
+	#reset() {
+		this.#dragging = false;
+		this.#suppressClick = false;
+		this.#base = /* @__PURE__ */ new Set();
+		this.#lastMode = `replace`;
+		this.#preview = /* @__PURE__ */ new Set();
+	}
+};
+//#endregion
 //#region src/interaction/list-item-animation.ts
 /**
 * Shared insertion / removal animation for the list & tree components.
@@ -4800,6 +6233,31 @@ var ListSelectionController = class {
 		this.#anchor = [...next].at(-1);
 		this.#apply(next);
 	}
+	/**
+	* Whether a drag / marquee gesture may build a selection in the current
+	* modes: `selectionMode="multiple"`, or a multi interaction mode
+	* (`checked` / `sticky` / `vscode`) outside `selectionMode="none"`.
+	* Stricter than `canSelectMultiple()` — `single` + `standard` does not
+	* qualify (a drag there would be a surprising multi-select).
+	*/
+	canDragSelect() {
+		return this.#config.getModes().selectionMode !== `none` && this.#effectiveMulti();
+	}
+	/**
+	* Replace the selection with `items` from a drag / marquee gesture. Like
+	* `selectMany` but gated on `canDragSelect()` instead of throwing, and a
+	* no-op in single/none modes. Non-selectable items are dropped; the anchor
+	* moves to the last item. Fires `onChange` once. An empty result clears a
+	* non-empty selection (e.g. a Cmd-drag that toggles everything off) but is
+	* a no-op when nothing is selected.
+	*/
+	applyDragSelection(items) {
+		if (!this.canDragSelect()) return;
+		const next = new Set([...items].filter((t) => this.#config.isSelectable(t)));
+		if (next.size === 0 && this.#selected.size === 0) return;
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
 	/** Remove a single item from the selection. */
 	deselect(item) {
 		if (!this.#selected.has(item)) return;
@@ -11892,6 +13350,7 @@ let DataGridElement = class DataGridElement extends i {
 	static {
 		this.styles = [
 			themeFallbacks,
+			handleStyles,
 			tickledStyles,
 			tickledItemStyles,
 			listItemFadeKeyframes,
@@ -11935,7 +13394,8 @@ let DataGridElement = class DataGridElement extends i {
     .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .sort-icon { font-size: 10px; opacity: 0.7; }
     .resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
-    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; }
+    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; display: inline-flex; align-items: center; }
+    .reorder-handle .ixfx-handle { --ixfx-handle-spot-size: 14px; --ixfx-handle-dot-size: 3px; }
     .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
     .viewport { flex: 1; overflow: auto; position: relative; }
     .spacer { position: relative; }
@@ -12841,7 +14301,7 @@ let DataGridElement = class DataGridElement extends i {
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? b`<span class="reorder-handle" draggable="false"
                   @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
-                >⠿</span>` : A}
+                ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="reorder-handle"></span></span>` : A}
                 <span class="header-label">${col.label}</span>
                 ${this.sortState?.key === col.key ? b`<span class="sort-icon">${this.sortState.direction === `asc` ? `▲` : `▼`}</span>` : A}
                 ${col.resizable !== false ? b`<span class="resize-handle" @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
@@ -13429,7 +14889,28 @@ let DetailListElement = class DetailListElement extends i {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap
+			itemWrap: this.itemWrap,
+			hoverDisabled: () => this.#dragSelect.isDragging
+		});
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.renderRoot.querySelector(`.container`),
+			isEnabled: () => this.selection.canDragSelect() && this._getVisibleItems().length > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueeRect = rect;
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-marquee`, preview.has(el));
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-marquee`);
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, _dy) => {
+				if (this._listEl) this._listEl.scrollLeft += dx;
+			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR$3,
@@ -13506,6 +14987,7 @@ let DetailListElement = class DetailListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#dragSelect.isDragging) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this.focus();
@@ -13532,6 +15014,30 @@ let DetailListElement = class DetailListElement extends i {
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
+	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
+	#marqueeRect;
+	#dragSelect;
+	/** Collect visible items whose surface-relative box intersects `rect`. */
+	#marqueeHitTest(rect) {
+		const surface = this.renderRoot.querySelector(`.container`);
+		if (!surface) return [];
+		const box = surface.getBoundingClientRect();
+		const rx0 = rect.x;
+		const ry0 = rect.y;
+		const rx1 = rect.x + rect.width;
+		const ry1 = rect.y + rect.height;
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const r = el.getBoundingClientRect();
+			const left = r.left - box.left;
+			const top = r.top - box.top;
+			if (left <= rx1 && left + r.width >= rx0 && top <= ry1 && top + r.height >= ry0) out.push(el);
+		}
+		return out;
+	}
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	/** Command registry carrying this list's `list.search.*` commands. */
@@ -14304,6 +15810,22 @@ let DetailListElement = class DetailListElement extends i {
       outline-offset: -2px;
     }
 
+    /* Drag-select (marquee) rectangle + covered-row preview.
+       Style hooks: part="marquee", --detail-list-marquee-border,
+       --detail-list-marquee-fill. */
+    .marquee {
+      position: absolute;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid var(--detail-list-marquee-border, var(--accent));
+      background: var(--detail-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+    }
+
+    ::slotted([data-marquee]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+    }
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -14344,6 +15866,7 @@ let DetailListElement = class DetailListElement extends i {
         <ul part="list" class="scroll-fade-x">
           <slot></slot>
         </ul>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
         <div class="loading" part="loading" ?hidden=${!loading}>
           ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : A}
         </div>
@@ -15997,16 +17520,20 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         style="cursor: ${cursor}; grid-column: ${gridColumn}; grid-row: ${gridRow};"
         @pointerdown=${(e) => this._onGutterPointerDown(e, groupId, index)}
       >
-        <div class="grab-handle">
-          <span class="dot"></span>
-          <span class="dot"></span>
-          <span class="dot"></span>
-        </div>
+        <span
+          class="ixfx-handle"
+          part="grip"
+          data-handle="dimpled"
+          data-shape=${isRow ? `vertical` : `horizontal`}
+        ></span>
       </div>
     `;
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
       :host {
         display: block;
         width: 100%;
@@ -16017,10 +17544,10 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         --split-gutter-active-color: var(--accent);
         --split-collapsed-size: 0px;
         --split-snap: 24px;
-        --split-grab-color: var(--border-subtle-color);
-        --split-grab-dot-size: 3px;
-        --split-grab-size: 16px;
-        --split-grab-thickness: 8px;
+
+        /* Gutter grip — shared handle primitive (docs/infra-handle.md). */
+        --ixfx-handle-length: 16px;
+        --ixfx-handle-thickness: 8px;
       }
 
       * {
@@ -16082,31 +17609,15 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         user-select: none;
       }
 
-      .grab-handle .dot {
-        width: var(--split-grab-dot-size);
-        height: var(--split-grab-dot-size);
-        border-radius: 50%;
-        background: var(--split-grab-color);
-      }
-
-      :host([direction="row"]) .grab-handle {
-        flex-direction: column;
-        gap: var(--split-grab-dot-size);
-      }
-
-      :host([direction="column"]) .grab-handle {
-        flex-direction: row;
-        gap: var(--split-grab-dot-size);
-      }
-
-      :host([data-dragging]) .grab-handle {
+      :host([data-dragging]) .gutter .ixfx-handle {
         display: none;
       }
 
-      :host(:not([data-dragging])) .gutter:hover .grab-handle {
-        display: flex;
+      :host(:not([data-dragging])) .gutter:hover .ixfx-handle {
+        display: none;
       }
-    `];
+    `
+		];
 	}
 };
 __decorate([property({
@@ -17053,404 +18564,6 @@ __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 __decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
-//#region src/titlebar/titlebar.ts
-let TitlebarElement = class TitlebarElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.title = ``;
-		this.iconName = ``;
-		this.orientation = `horizontal`;
-		this.variant = `titlebar`;
-		this.closable = false;
-		this.collapsible = false;
-		this.collapsed = false;
-		this.toggleInteraction = `implicit`;
-	}
-	_onToggleClick() {
-		if (!this.collapsible) return;
-		this.collapsed = !this.collapsed;
-		this.dispatchEvent(new CustomEvent(`toggle`, {
-			detail: { collapsed: this.collapsed },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_onCloseClick() {
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_getCaretIcon() {
-		return `chevron-down`;
-	}
-	render() {
-		const caretIcon = this._getCaretIcon();
-		const isVertical = this.orientation === `vertical`;
-		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
-		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
-		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
-		const treeVariant = this.variant === `tree`;
-		return b`
-      <div
-        class="bar"
-        role="toolbar"
-        @click=${implicitToggle ? this._onToggleClick : A}
-      >
-        ${treeVariant && showCaret ? b`
-          <button
-            class="caret-btn"
-            type="button"
-            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
-            @click=${this._onToggleClick}
-          >
-            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
-          </button>
-          ` : A}
-        <div class="title-text-wrapper">
-          ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
-          <span class="title-text">${this.title}</span>
-        </div>
-
-        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
-          <slot name="toolbar"></slot>
-          ${this.closable ? b`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close panel"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : A}
-          ${!treeVariant && showCaret ? b`
-          <button
-            class="caret-btn"
-            type="button"
-            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
-            @click=${this._onToggleClick}
-          >
-            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
-          </button>
-          ` : A}
-        </div>
-      </div>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    :host {
-      display: block;
-      box-sizing: border-box;
-    }
-
-    .bar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--space-s) var(--space-m);
-      background: var(--surface-4);
-      color: var(--surface-3-text);
-      min-height: 2em;
-      height: 100%;
-      flex-shrink: 0;
-      box-sizing: border-box;
-    }
-
-    :host([orientation="vertical"]) .bar {
-      flex-direction: row;
-      min-width: 2em;
-      writing-mode: vertical-rl;
-      text-orientation: mixed;
-    }
-
-    .caret-btn,
-    .close-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      margin: 0;
-      cursor: pointer;
-      color: inherit;
-      border-radius: var(--radius-s);
-      transition: background var(--transition);
-      opacity: var(--prominence-idle-opacity);
-    }
-
-    .caret-btn:hover,
-    .close-btn:hover {
-      background: var(--surface-5);
-      opacity: var(--prominence-tickled-opacity);
-    }
-
-    .caret-btn:focus-visible,
-    .close-btn:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 1px;
-    }
-
-    ixfx-icon {
-      width: 1.25em;
-      height: 1.25em;
-      transition: transform var(--transition);
-    }
-
-    .title-icon {
-      flex-shrink: 0;
-    }
-
-    .title-text {
-      flex: 1;
-      padding-left: 1ch;
-      font-family: var(--font-family);
-      font-size: var(--text-m);
-      font-weight: var(--font-weight-bold, 600);
-      white-space: nowrap;
-      overflow: hidden;
-      align-self: center;
-      text-overflow: ellipsis;
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    :host([collapsible][toggle-interaction="implicit"]) .bar {
-      cursor: pointer;
-    }
-
-    :host([orientation="vertical"]) .title-text {
-      writing-mode: vertical-rl;
-      padding-left: 0;
-      padding-bottom: 1ch;
-      text-orientation: mixed;
-      transform: rotate(180deg);
-    }
-
-    .toolbar {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-      margin-left: auto;
-    }
-
-    :host([orientation="vertical"]) .toolbar {
-      flex-direction: column;
-      margin-left: 0;
-      margin-top: auto;
-      writing-mode: horizontal-tb;
-    }
-
-    slot[name="toolbar"] {
-      display: contents;
-    }
-
-    ::slotted(slot[name="toolbar"]) {
-      display: contents;
-    }
-
-    .title-text-wrapper {
-      display: flex;
-      padding: 0 var(--space-s);
-    }
-
-    /* === Midline variant === */
-
-    :host([variant="midline"]) .bar {
-      background: transparent;
-      padding: var(--space-xs) var(--space-m);
-      min-height: unset;
-      position: relative;
-    }
-
-    :host([variant="midline"][orientation="vertical"]) .bar {
-      padding: var(--space-m) var(--space-xs);
-      min-width: unset;
-    }
-
-    :host([variant="midline"]) .title-text-wrapper {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      gap: var(--space-s);
-      background: var(--surface-3);
-    }
-
-    :host([variant="midline"]) .title-text {
-      font-weight: normal;
-      color: var(--surface-3-text);
-      padding: 0 0.5ch 0 0.5ch;
-      background: transparent;
-      box-shadow: none;
-      flex: unset;
-      width: auto;
-      white-space: nowrap;
-    }
-
-    :host([variant="midline"]) .title-icon {
-      background: transparent;
-      flex-shrink: 0;
-    }
-
-    :host([variant="midline"]) .caret-btn {
-      position: relative;
-      z-index: 1;
-      background: var(--surface-3);
-      opacity: 1;
-    }
-
-    :host([variant="midline"][orientation="vertical"]) .title-text {
-      transform: rotate(180deg);
-      padding: 0.5ch 0 0.5ch 0ch;
-    }
-
-    :host([variant="midline"]) .toolbar {
-      position: relative;
-      z-index: 2;
-      background: var(--surface-3);
-      margin-left: 0;
-    }
-
-    :host([variant="midline"][orientation="horizontal"]) .toolbar {
-      margin-left: auto;
-    }
-
-    /* Debossed line runs from after title-text to before toolbar */
-    :host([variant="midline"]) .bar::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 1px;
-      transform: translateY(-50%);
-      background: var(--surface-2);
-      box-shadow:
-        0 -1px 0 var(--surface-5),
-        0 1px 0 var(--surface-1);
-      z-index: 0;
-    }
-
-    /* For vertical midline, line runs vertically */
-    :host([variant="midline"][orientation="vertical"]) .bar::after {
-      top: 0;
-      bottom: 0;
-      left: 50%;
-      right: unset;
-      width: 1px;
-      height: 100%;
-      transform: translateX(-50%);
-      box-shadow:
-        -1px 0 0 var(--surface-5),
-        1px 0 0 var(--surface-1);
-    }
-
-    /* === Tree variant: VS Code explorer / Outline style === */
-    :host([variant="tree"]) .bar {
-      background: transparent;
-      padding: 0 var(--space-xs);
-      min-height: unset;
-      gap: var(--space-xs);
-    }
-
-    :host([variant="tree"][orientation="vertical"]) .bar {
-      padding: var(--space-xs) 0;
-      flex-direction: column;
-      min-width: unset;
-      writing-mode: horizontal-tb;
-    }
-
-    :host([variant="tree"]) .title-text-wrapper {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-xs);
-      padding: 0;
-      background: transparent;
-    }
-
-    :host([variant="tree"]) .title-icon {
-      background: transparent;
-      flex-shrink: 0;
-    }
-
-    :host([variant="tree"]) .title-text {
-      font-weight: normal;
-      color: var(--surface-3-text);
-      padding: 0;
-      background: transparent;
-      box-shadow: none;
-      flex: unset;
-      width: auto;
-      white-space: nowrap;
-    }
-
-    :host([variant="tree"][orientation="vertical"]) .title-text {
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
-      padding: 0;
-    }
-
-    :host([variant="tree"]) .caret-btn {
-      background: transparent;
-      opacity: var(--prominence-idle-opacity);
-      padding: 0;
-    }
-
-    :host([variant="tree"]) .caret-btn:hover {
-      background: transparent;
-      opacity: var(--prominence-tickled-opacity);
-    }
-
-    :host([variant="tree"]) .toolbar {
-      margin-left: auto;
-    }
-
-    :host([variant="tree"][orientation="vertical"]) .toolbar {
-      flex-direction: row;
-      margin-left: 0;
-      margin-top: auto;
-    }
-
-    :host([variant="tree"]) ixfx-icon {
-      width: 1em;
-      height: 1em;
-    }
-  `];
-	}
-};
-__decorate([property({ type: String })], TitlebarElement.prototype, "title", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], TitlebarElement.prototype, "iconName", void 0);
-__decorate([property({
-	type: String,
-	attribute: `orientation`,
-	reflect: true
-})], TitlebarElement.prototype, "orientation", void 0);
-__decorate([property({
-	type: String,
-	attribute: `variant`,
-	reflect: true
-})], TitlebarElement.prototype, "variant", void 0);
-__decorate([property({ type: Boolean })], TitlebarElement.prototype, "closable", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], TitlebarElement.prototype, "collapsible", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], TitlebarElement.prototype, "collapsed", void 0);
-__decorate([property({
-	type: String,
-	attribute: `toggle-interaction`
-})], TitlebarElement.prototype, "toggleInteraction", void 0);
-TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarElement);
-//#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
 const DRAG_THRESHOLD_PX$3 = 5;
@@ -18690,7 +19803,7 @@ let DockHostElement = class DockHostElement extends i {
           role="separator"
           aria-label="Resize adjacent panels"
           @pointerdown=${(e) => this._onJunctionPointerDown(e, junction)}
-        ></div>
+        ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="junction-handle"></span></div>
       `)}
       </div>
       <slot @slotchange=${this._onPoolSlotChange}></slot>
@@ -18784,7 +19897,10 @@ let DockHostElement = class DockHostElement extends i {
 		};
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
       :host {
         display: block;
         width: 100%;
@@ -18912,26 +20028,23 @@ let DockHostElement = class DockHostElement extends i {
         border-radius: 50%;
         cursor: nwse-resize;
         pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-      .junction-handle::after {
-        content: '';
-        position: absolute;
-        inset: 4px;
-        border-radius: 50%;
-        background: var(--dock-junction-color, var(--accent));
-        opacity: 0;
-        transition: opacity var(--transition);
-      }
-
-      .junction-handle:hover::after {
-        opacity: 0.9;
+      .junction-handle .ixfx-handle {
+        --ixfx-handle-spot-size: 12px;
+        --ixfx-handle-dot-size: 3px;
+        --ixfx-handle-opacity: 0;
+        --ixfx-handle-opacity-active: 0.9;
       }
 
       slot:not([name]) {
         display: none;
       }
-    `];
+    `
+		];
 	}
 };
 __decorate([property({
@@ -20401,6 +21514,233 @@ var DataGridListSource = class {
 	}
 };
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const END_DWELL = 2e3;
+const RESET_DURATION = 400;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this.mode = `hover`;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._loopTimer = 0;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering || this._loopAtEnd) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+			if (this._loopActive && this.mode === `loop` && !this.disabled && overflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+			if (!overflowing && this._loopAtEnd) {
+				this._loopAtEnd = false;
+				this.requestUpdate();
+			}
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+		if (this.mode === `loop`) this.startLoop();
+	}
+	updated(changed) {
+		if (changed.has(`mode`)) {
+			if (this.mode === `loop`) this.startLoop();
+			else this.stopLoop();
+		}
+		if (changed.has(`disabled`) && this.disabled) this.stopLoop();
+		this._measure();
+	}
+	/**
+	* Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
+	*/
+	get looping() {
+		return this._loopActive;
+	}
+	/**
+	* Begin looping: pan to the end, dwell there for 2 seconds, reset to the
+	* start and pan again, repeating until `stopLoop()` is called. A no-op when
+	* `disabled`, when there is nothing to reveal, or under reduced-motion.
+	*/
+	startLoop() {
+		if (this.disabled || this._prefersReducedMotion()) return;
+		this._loopActive = true;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+		if (this._isOverflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+	}
+	/**
+	* Stop a loop started with `startLoop()` and snap back to the rest position.
+	*/
+	stopLoop() {
+		if (!this._loopActive && !this._loopAtEnd && this._loopTimer === 0) return;
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+	}
+	_prefersReducedMotion() {
+		return globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches ?? false;
+	}
+	_panDuration() {
+		return Math.max(1.5, (this._overflow + END_PADDING) / SPEED);
+	}
+	_clearLoopTimer() {
+		if (this._loopTimer !== 0) {
+			clearTimeout(this._loopTimer);
+			this._loopTimer = 0;
+		}
+	}
+	_scheduleLoopPan(delay) {
+		this._clearLoopTimer();
+		this._loopTimer = window.setTimeout(() => {
+			this._loopTimer = 0;
+			if (!this._loopActive || this.disabled || !this._isOverflowing) return;
+			this._loopAtEnd = true;
+			this.requestUpdate();
+			const dwell = this._panDuration() * 1e3 + END_DWELL;
+			this._loopTimer = window.setTimeout(() => {
+				this._loopTimer = 0;
+				if (!this._loopActive) return;
+				this._loopAtEnd = false;
+				this.requestUpdate();
+				this._scheduleLoopPan(700);
+			}, dwell);
+		}, delay);
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._loopActive && this.mode === `loop`) {
+			if (this._loopAtEnd) return [
+				`transform: translateX(${hoverX}px)`,
+				`transition: transform ${duration}s ${PAN_EASING}`,
+				`overflow: visible`,
+				`text-overflow: clip`
+			].join(`; `);
+			return [
+				`transform: translateX(${restX}px)`,
+				`transition: transform ${RESET_DURATION}ms ${PAN_EASING}`,
+				revealEnd ? `` : `overflow: visible; text-overflow: clip`
+			].filter(Boolean).join(`; `);
+		}
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return b`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	attribute: `mode`,
+	reflect: true
+})], PanTextElement.prototype, "mode", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopActive", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopAtEnd", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -20496,6 +21836,7 @@ let GridListElement = class GridListElement extends i {
 		this.captionBackdrop = `scrim`;
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -20532,11 +21873,56 @@ let GridListElement = class GridListElement extends i {
 				enabled: this.#source.isSelectable(i)
 			})),
 			onTickle: (k) => {
+				this.#stopActiveCaptionPan();
 				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap,
-			hoverDisabled: () => this.disableHoverTickle
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+		});
+		this.#marqueePreview = /* @__PURE__ */ new Set();
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.#postDragSuppressTimer = 0;
+		this.#activeCaptionPan = null;
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.#viewportRef.value,
+			isEnabled: () => this.selection.canDragSelect() && this.#source.count > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueePreview = preview;
+				this.#marqueeRect = rect;
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				this.#marqueePreview = /* @__PURE__ */ new Set();
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, dy) => {
+				const vp = this.#viewportRef.value;
+				if (!vp) return;
+				if (dx !== 0) {
+					vp.scrollLeft += dx;
+					this._scrollLeft = vp.scrollLeft;
+				}
+				if (dy !== 0) {
+					vp.scrollTop += dy;
+					this._scrollTop = vp.scrollTop;
+				}
+			},
+			shouldStart: (event) => {
+				if (!this.itemsDraggable) return true;
+				const cell = event.composedPath()[0]?.closest?.(`.cell`);
+				if (!cell) return true;
+				const key = cell.dataset.key;
+				if (!key) return true;
+				const index = this.#source.indexOfKey(key);
+				if (index < 0) return true;
+				return !this.#source.isSelectable(index);
+			}
 		});
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
@@ -20549,6 +21935,32 @@ let GridListElement = class GridListElement extends i {
 				this.#emitViewportChange();
 			});
 		};
+		this.#onDragStart = (e, key) => {
+			if (!this.itemsDraggable) return;
+			const index = this.#source.indexOfKey(key);
+			if (index < 0 || !this.#source.isSelectable(index)) return;
+			if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
+			const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
+			const detail = {
+				key,
+				index: this.#source.indexOfKey(key),
+				item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
+				selectedKeys
+			};
+			if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
+				e.preventDefault();
+				return;
+			}
+			this.#nativeDragging = true;
+			this.#dragOriginKey = key;
+			this.toggleAttribute(`data-native-dragging`, true);
+			const count = selectedKeys.length;
+			this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+		};
+		this.#onDragEnd = () => {
+			this.#clearNativeDragState();
+			this.#startPostDragSuppressTimer();
+		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -20618,6 +22030,7 @@ let GridListElement = class GridListElement extends i {
 					break;
 				}
 				case `Escape`:
+					if (this.#nativeDragging) this.#clearNativeDragState();
 					this.selection.clear();
 					break;
 				default: return;
@@ -20719,6 +22132,7 @@ let GridListElement = class GridListElement extends i {
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        draggable: false;
       }
       .thumb ::slotted(*:empty)::after {
         content: "Empty";
@@ -20768,6 +22182,18 @@ let GridListElement = class GridListElement extends i {
       }
       :host([caption-align="left"]) .caption { text-align: left; }
       :host([caption-align="right"]) .caption { text-align: right; }
+      /* Tickled captions swap their plain label for an ixfx-pan-text in loop
+         mode so a truncated label scrolls instead of staying an ellipsis. The
+         pan fills the caption band (flex in 'separate', block otherwise) and
+         inherits its alignment. */
+      .caption ixfx-pan-text {
+        display: block;
+        flex: 1;
+        min-width: 0;
+        max-width: 100%;
+        font: inherit;
+        color: inherit;
+      }
 
       /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
              single selection outline ---- */
@@ -20911,6 +22337,26 @@ let GridListElement = class GridListElement extends i {
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
         .cell.entering { animation: none; }
       }
+
+      /* Drag-select (marquee) rectangle + covered-cell preview. The preview
+         reuses the selection wash so covered cells read as "about to be
+         selected". Style hooks: part="marquee", --grid-list-marquee-border,
+         --grid-list-marquee-fill. */
+      .marquee {
+        position: absolute;
+        pointer-events: none;
+        z-index: 5;
+        border: 1px solid var(--grid-list-marquee-border, var(--accent));
+        background: var(--grid-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+      }
+      .cell.marquee .thumb::after {
+        opacity: var(--grid-list-thumb-selection-wash-opacity, 0.18);
+      }
+
+      /* Native item drag origin cell. */
+      .cell.dragging-origin {
+        opacity: 0.6;
+      }
     `
 		];
 	}
@@ -20943,6 +22389,62 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#sourceElement;
 	#source;
+	/** Live drag-select preview: covered keys + the surface-relative rect. */
+	#marqueePreview;
+	#marqueeRect;
+	/** Native item drag state: true while a drag is active. */
+	#nativeDragging;
+	/** Key of the cell that originated the native drag. */
+	#dragOriginKey;
+	/** Timer handle for post-drag click suppression. */
+	#postDragSuppressTimer;
+	/**
+	* The single caption pan-text currently scrolling. At most one caption is
+	* a pan-text in loop mode at a time — when tickle moves, the old one is
+	* stopped before the new one starts (see `#activateTickledPan`).
+	*/
+	#activeCaptionPan;
+	#dragSelect;
+	/**
+	* Map a surface-relative (viewport-visible) rect to covered item keys using
+	* the same `computeGridWindow` geometry the renderer uses — pure arithmetic,
+	* so virtualized off-screen items are covered without DOM measurement.
+	*/
+	#marqueeHitTest(rect) {
+		const count = this.#source.count;
+		if (count === 0) return [];
+		const horizontal = this.orientation === `row`;
+		const win = computeGridWindow(count, this.itemSize, this.#rowHeight(), this.gap, Math.max(1, this._viewportWidth), Math.max(1, this._viewportHeight), horizontal ? this._scrollLeft : this._scrollTop, this.orientation, 0);
+		const out = [];
+		if (horizontal) {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const lo = Math.max(0, Math.floor(x0 / win.colStride));
+			const hi = Math.min(count - 1, Math.floor(x1 / win.colStride));
+			for (let i = lo; i <= hi; i++) out.push(i);
+		} else {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const y0 = rect.y + this._scrollTop;
+			const y1 = y0 + rect.height;
+			const colLo = Math.max(0, Math.floor(x0 / win.colStride));
+			const colHi = Math.min(win.cols - 1, Math.floor(x1 / win.colStride));
+			const rowLo = Math.max(0, Math.floor(y0 / win.rowStride));
+			const rowHi = Math.floor(y1 / win.rowStride);
+			for (let row = rowLo; row <= rowHi; row++) for (let col = colLo; col <= colHi; col++) {
+				const index = row * win.cols + col;
+				if (index >= 0 && index < count) out.push(index);
+			}
+		}
+		const keys = [];
+		for (const index of out) {
+			const key = this.#source.keyAt(index);
+			if (!key || isSyntheticKey(key)) continue;
+			if (!this.#source.isSelectable(index)) continue;
+			keys.push(key);
+		}
+		return keys;
+	}
 	#searchMode;
 	#searchFilterKeys;
 	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
@@ -21015,6 +22517,7 @@ let GridListElement = class GridListElement extends i {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#stopActiveCaptionPan();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -21027,6 +22530,7 @@ let GridListElement = class GridListElement extends i {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
+		if (this.#nativeDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -21214,6 +22718,7 @@ let GridListElement = class GridListElement extends i {
 			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
 		}
 		this.#applyZoomAnchor();
+		this.#activateTickledPan();
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
 	#applyZoomAnchor() {
@@ -21544,15 +23049,19 @@ let GridListElement = class GridListElement extends i {
 			element
 		});
 	}
-	_dispatch(name, detail) {
-		this.dispatchEvent(new CustomEvent(name, {
+	_dispatch(name, detail, cancelable = false) {
+		return this.dispatchEvent(new CustomEvent(name, {
 			detail,
 			bubbles: true,
-			composed: true
+			composed: true,
+			cancelable
 		}));
 	}
 	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
 	#selectedSnapshot;
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	render() {
 		const win = this.#currentWindow();
 		this.#selectedSnapshot = this.selection.selectedKeys;
@@ -21569,6 +23078,7 @@ let GridListElement = class GridListElement extends i {
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
         </div>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
       </div>
       ${this.search?.renderField()}
     `;
@@ -21580,7 +23090,10 @@ let GridListElement = class GridListElement extends i {
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
@@ -21591,24 +23104,69 @@ let GridListElement = class GridListElement extends i {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return b`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @dragstart=${(e) => this.#onDragStart(e, key)}
+        @dragend=${() => this.#onDragEnd()}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
+	/**
+	* A tickled cell swaps its plain label for an `ixfx-pan-text` in loop mode
+	* so a truncated label scrolls instead of staying an ellipsis. Unticked
+	* cells keep the cheap plain-text caption.
+	*/
+	#renderCaption(caption, captionCss, tickled) {
+		if (tickled) return b`<div class="caption" part="caption" style=${captionCss} title=${caption}><ixfx-pan-text mode="loop">${caption}</ixfx-pan-text></div>`;
+		return b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>`;
+	}
+	/** Stop the active caption pan, if any, and forget it. */
+	#stopActiveCaptionPan() {
+		const active = this.#activeCaptionPan;
+		this.#activeCaptionPan = null;
+		try {
+			active?.stopLoop?.();
+		} catch {}
+	}
+	/**
+	* Enforce a single scrolling caption: the tickled cell's pan-text loops,
+	* every other pan-text is stopped. The pan-text also auto-starts when
+	* `mode="loop"` is set; this covers the case where the element was already
+	* connected before overflow was measured.
+	*/
+	#activateTickledPan() {
+		const tickledCell = this.renderRoot.querySelector(`.cell[data-tickled]`);
+		const pans = [...this.renderRoot.querySelectorAll(`ixfx-pan-text[mode="loop"]`)];
+		const current = tickledCell?.querySelector(`ixfx-pan-text[mode="loop"]`) ?? null;
+		for (const pan of pans) if (pan !== current) try {
+			pan.stopLoop?.();
+		} catch {}
+		const active = this.#activeCaptionPan;
+		if (active && active !== current) try {
+			active.stopLoop?.();
+		} catch {}
+		if (!current) {
+			this.#activeCaptionPan = null;
+			return;
+		}
+		this.#activeCaptionPan = current;
+		current.startLoop?.();
+	}
 	#renderElementCells(win) {
 		const slice = this.#items.slice(win.startIndex, win.endIndex);
 		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
@@ -21616,8 +23174,11 @@ let GridListElement = class GridListElement extends i {
 	#renderCell(el, index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#captionFor(el);
@@ -21629,23 +23190,27 @@ let GridListElement = class GridListElement extends i {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return b`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @dragstart=${(e) => this.#onDragStart(e, key)}
+        @dragend=${() => this.#onDragEnd()}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
         </div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
@@ -21657,9 +23222,24 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	#onCellClick(e, key) {
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	#onDragStart;
+	#onDragEnd;
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
+	#clearNativeDragState() {
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.removeAttribute(`aria-label`);
+	}
 	#onCellActivate(key) {
 		if (this.interactionMode !== `manual`) this.selection.replace(key);
 		this.#emitItemEvent(`list-activate`, key);
@@ -21717,6 +23297,11 @@ __decorate([property({
 })], GridListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], GridListElement.prototype, "itemsDraggable", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -23603,7 +25188,29 @@ let VerticalListElement = class VerticalListElement extends i {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap
+			itemWrap: this.itemWrap,
+			hoverDisabled: () => this.#dragSelect.isDragging
+		});
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.renderRoot.querySelector(`.container`),
+			isEnabled: () => this.selection.canDragSelect() && this._getVisibleItems().length > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueeRect = rect;
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-marquee`, preview.has(el));
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-marquee`);
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (_dx, dy) => {
+				const list = this.renderRoot.querySelector(`ul`);
+				if (list) list.scrollTop += dy;
+			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR,
@@ -23664,6 +25271,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#dragSelect.isDragging) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this._dispatch(`list-item-click`, { item });
@@ -23680,6 +25288,30 @@ let VerticalListElement = class VerticalListElement extends i {
 	#itemObserver;
 	/** Items that have already played (or been skipped for) their enter animation. */
 	#animatedItems;
+	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
+	#marqueeRect;
+	#dragSelect;
+	/** Collect visible items whose surface-relative box intersects `rect`. */
+	#marqueeHitTest(rect) {
+		const surface = this.renderRoot.querySelector(`.container`);
+		if (!surface) return [];
+		const box = surface.getBoundingClientRect();
+		const rx0 = rect.x;
+		const ry0 = rect.y;
+		const rx1 = rect.x + rect.width;
+		const ry1 = rect.y + rect.height;
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const r = el.getBoundingClientRect();
+			const left = r.left - box.left;
+			const top = r.top - box.top;
+			if (left <= rx1 && left + r.width >= rx0 && top <= ry1 && top + r.height >= ry0) out.push(el);
+		}
+		return out;
+	}
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	/** Command registry carrying this list's `list.search.*` commands. */
@@ -24150,6 +25782,22 @@ let VerticalListElement = class VerticalListElement extends i {
       outline-offset: -2px;
     }
 
+    /* Drag-select (marquee) rectangle + covered-row preview.
+       Style hooks: part="marquee", --vertical-list-marquee-border,
+       --vertical-list-marquee-fill. */
+    .marquee {
+      position: absolute;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid var(--vertical-list-marquee-border, var(--accent));
+      background: var(--vertical-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+    }
+
+    ::slotted([data-marquee]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -24171,6 +25819,7 @@ let VerticalListElement = class VerticalListElement extends i {
         <ul part="list">
           <slot></slot>
         </ul>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
         ${this.search.renderField()}
       </div>
     `;
@@ -30864,136 +32513,6 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
-//#region src/pan-text/pan-text.ts
-const SPEED = 45;
-const END_PADDING = 4;
-const START_DELAY = 300;
-const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
-let PanTextElement = class PanTextElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.direction = `end`;
-		this.disabled = false;
-		this._isOverflowing = false;
-		this._isHovering = false;
-		this._overflow = 0;
-		this._resizeObserver = null;
-		this._onMouseEnter = () => {
-			this._isHovering = true;
-		};
-		this._onMouseLeave = () => {
-			this._isHovering = false;
-		};
-		this._measure = () => {
-			if (this._isHovering) return;
-			const el = this._textEl;
-			if (!el) return;
-			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
-			const overflowing = this._overflow > 0;
-			this.classList.toggle(`is-overflowing`, overflowing);
-			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(() => this._measure());
-		this.addEventListener(`mouseenter`, this._onMouseEnter);
-		this.addEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = null;
-		this.removeEventListener(`mouseenter`, this._onMouseEnter);
-		this.removeEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	firstUpdated() {
-		this._measure();
-		this._resizeObserver?.observe(this);
-		document.fonts?.ready.then(() => this._measure());
-	}
-	updated() {
-		this._measure();
-	}
-	_textStyle() {
-		if (!this._isOverflowing) return ``;
-		const distance = this._overflow + END_PADDING;
-		const duration = Math.max(1.5, distance / SPEED);
-		const revealEnd = this.direction === `end`;
-		const restX = revealEnd ? 0 : -distance;
-		const hoverX = revealEnd ? -distance : 0;
-		if (this._isHovering) return [
-			`transform: translateX(${hoverX}px)`,
-			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
-			`overflow: visible`,
-			`text-overflow: clip`
-		].join(`; `);
-		return [
-			`transform: translateX(${restX}px)`,
-			`transition: transform 400ms ${PAN_EASING}`,
-			revealEnd ? `` : `overflow: visible; text-overflow: clip`
-		].filter(Boolean).join(`; `);
-	}
-	render() {
-		const textClasses = {
-			"is-overflowing": this._isOverflowing,
-			"is-hovering": this._isHovering
-		};
-		return b`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    /* Renders like plain inline text: no colours, border, padding or margin
-       of its own — it only adds the clipping needed to pan on hover. */
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 100%;
-      box-sizing: border-box;
-      font: inherit;
-      color: inherit;
-    }
-
-    :host([disabled]) {
-      opacity: var(--disabled-opacity, 0.5);
-      pointer-events: none;
-    }
-
-    .text {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      will-change: transform;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .text {
-        transition: none !important;
-        transform: none !important;
-      }
-    }
-  `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `direction`
-})], PanTextElement.prototype, "direction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `disabled`
-})], PanTextElement.prototype, "disabled", void 0);
-__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
-__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
-__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
-PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
-//#endregion
 //#region src/panel/panel-group.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
 const DRAG_THRESHOLD_PX = 5;
@@ -38230,7 +39749,10 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
 		};
 	}
 	static {
-		this.styles = i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
     :host {
       display: flex;
       align-items: center;
@@ -38257,13 +39779,13 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
     .handle {
       display: none;
       cursor: grab;
-      padding: 0 4px;
-      opacity: 0.5;
-      font-size: 0.65rem;
+      margin: 0 4px;
+      --ixfx-handle-spot-size: 12px;
+      --ixfx-handle-dot-size: 3px;
     }
 
     :host([reorderable]) .handle {
-      display: block;
+      display: inline-block;
     }
 
     .label {
@@ -38272,7 +39794,8 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
       text-overflow: ellipsis;
       padding: 0 8px;
     }
-  `;
+  `
+		];
 	}
 	#dragging;
 	#startScreenY;
@@ -38297,7 +39820,7 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
 	}
 	render() {
 		return b`
-      <span class="handle">\u2630</span>
+      <span class="handle ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
       <span class="label">${this.label}</span>
     `;
 	}
@@ -40174,29 +41697,29 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? b`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
       <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
-        ${this.showGrabHandle ? b`
-          <div class="grab-handle">
-            <span class="dot"></span>
-            <span class="dot"></span>
-            <span class="dot"></span>
-          </div>
-        ` : ``}
+        ${this.showGrabHandle ? b`<span
+              class="ixfx-handle"
+              part="grip"
+              data-handle="dimpled"
+              data-shape=${this.layout === `horizontal` ? `horizontal` : `vertical`}
+            ></span>` : ``}
       </div>
       <slot style=${sizeB} name="b"></slot>
     </div>`;
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
   :host {
       --handle-size: 2px;
       --handle-colour: transparent;
       --handle-hover-colour: var(--surface-6);
       --handle-active-colour: var(--accent);
-      --handle-bg: var(--handle-colour);
-      --handle-grab-colour: var(--border-subtle-color);
-      --handle-grab-dot-size: 3px;
-      --handle-grab-size: 16px;
-      --handle-grab-thickness: 8px;
+      /* Grip — shared handle primitive (docs/infra-handle.md). */
+      --ixfx-handle-length: 16px;
+      --ixfx-handle-thickness: 8px;
 
       display: block;
       box-sizing: border-box;
@@ -40239,40 +41762,14 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
       to { background-color: var(--handle-hover-colour); }
     }
 
-    .grab-handle {
+    .split-bar .ixfx-handle {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--handle-grab-dot-size);
-      background: var(--handle-bg);
-      border-radius: var(--radius-s);
     }
 
-    .grab-handle .dot {
-      width: var(--handle-grab-dot-size);
-      height: var(--handle-grab-dot-size);
-      border-radius: 50%;
-      background: var(--handle-grab-colour);
-      flex-shrink: 0;
-    }
-
-    :host([layout="vertical"]) .grab-handle {
-      flex-direction: column;
-      width: var(--handle-grab-thickness);
-      height: var(--handle-grab-size);
-    }
-
-    :host([layout="horizontal"]) .grab-handle {
-      flex-direction: row;
-      width: var(--handle-grab-size);
-      height: var(--handle-grab-thickness);
-    }
-
-    #zone.user-resizing .grab-handle {
+    #zone.user-resizing .ixfx-handle {
       display: none;
     }
     #zone.user-resizing {
@@ -40325,7 +41822,8 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
     :host([data-collapsed-b]) slot[name="b"] {
       display: none;
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "layout", void 0);
@@ -40877,6 +42375,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map