@ixfx/components 0.17.1 → 0.18.1

package/dist/index.js

@@ -9,28 +9,27 @@ import { TitlebarElement } from "./titlebar.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-BOX1dfyd.js";
 import { t as prominenceStyles } from "./prominence-BOOQVWF-.js";
 import { t as IxfxIconElement } from "./icon-DvTQuylG.js";
-import "./menu-item-BSxhlWnW.js";
+import "./menu-item-CbywH4Xo.js";
 import { Checkbox } from "./checkbox.js";
-import { t as CheckedSelect } from "./checked-select-BmwqpgGr.js";
+import { t as CheckedSelect } from "./checked-select-CC-qSO1P.js";
 import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-_6ELsqLb.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-D8g-bTSF.js";
 import { t as DataController } from "./data-controller-q-rXRMzJ.js";
 import { t as collectDataResult } from "./data-provider-C6ZNAcaT.js";
 import { a as toGroupKey, i as resolveGroupKey, n as defaultGroupLabel, o as toggleInSet, r as partitionByGroup, t as EMPTY_GROUP_LABEL } from "./grouping-kENdqzSV.js";
-import { a as listItemFadeKeyframes, c as captionForEntry, i as animateListItemOut, l as createDefaultListDragPreview, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController } from "./list-native-drag-controller-ByftBooJ.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-C3rgEEmm.js";
 import { i as ListDragSelectController, n as gestureOf, r as isMultiMode, t as ListSelectionController } from "./list-selection-controller-Dkh3m3hX.js";
 import { a as capKeys, c as keysAsFlags, d as partitionKeys, f as withoutFlag, i as capFlags, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, r as MAX_PENDING_KEYS, s as flagsToRecord, t as EMPTY_FLAGS, u as partitionFlags } from "./pending-Afl4LT64.js";
 import { i as sameKeySet, n as applyPartialAttributes, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-D4l_ede_.js";
 import { n as createScrollHoverGuard, t as SCROLL_HOVER_SUPPRESS_ATTR } from "./scroll-hover-guard-BGAjtyXT.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-BP5fxvEX.js";
-import { t as CrumbNavigationElement } from "./crumb-navigation-D7dAC0H-.js";
+import { t as CrumbNavigationElement } from "./crumb-navigation-C78edQGt.js";
 import { t as popupSurfaceStyles } from "./popup-D8IxN1Eq.js";
 import { t as scrollFadeStyles } from "./scroll-fade-DH8OXSqL.js";
 import { DataDisplayComponent } from "./data-display.js";
-import { t as DataGridElement } from "./data-grid-BcO3SMac.js";
-import "./interaction-8Kbbf6xN.js";
+import { t as DataGridElement } from "./data-grid-CJrbLzLr.js";
+import "./interaction-DNuFnTm0.js";
 import { DateInputElement, formatDateInput, parseDateInput } from "./date-input.js";
-import { t as DetailListElement } from "./detail-list-vPVwE1CP.js";
+import { t as DetailListElement } from "./detail-list-Dk9oSvAZ.js";
 import { t as createDragGhost } from "./drag-ghost-DNWu_RyN.js";
 import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-BMN_s6d7.js";
 import { t as TabListElement } from "./tab-list-CFJy3hVm.js";
@@ -38,12 +37,12 @@ import { EditableLabel } from "./editable-label.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CfRKd5kC.js";
 import { FlatListElement } from "./flat-list.js";
 import { n as formStyles, r as adoptLightDomStyles, t as FormElement } from "./form-Cxx2sO8_.js";
-import { t as GridListElement } from "./grid-list-D2hinM64.js";
+import { t as GridListElement } from "./grid-list-0wC2xGBS.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
-import { t as VerticalListElement } from "./vertical-list-B9z1lbjM.js";
+import { t as VerticalListElement } from "./vertical-list-By-yuhkw.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-DephDhuu.js";
-import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, f as createDataListSearchAdapter, g as createFuzzySearch, h as createAcCompletionProvider, i as ListSearchController, l as KeyedElementIndex, m as createIncrSearch, n as listSearchStyles, o as registerListSearchCommands, p as IncrSearchTreeController, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-C5114RxZ.js";
-import { t as TickledController } from "./tickled-controller-BVhGKzjZ.js";
+import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, f as createDataListSearchAdapter, g as createFuzzySearch, h as createAcCompletionProvider, i as ListSearchController, l as KeyedElementIndex, m as createIncrSearch, n as listSearchStyles, o as registerListSearchCommands, p as IncrSearchTreeController, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-Bk4acsCM.js";
+import { t as TickledController } from "./tickled-controller-BsFFr_1N.js";
 import { a as resolveKeyPath, i as reconcileSelection$1, n as reconcileCursor, t as pathFromJson } from "./tree-DUc-iQcg.js";
 import { a as restoreElementScroll, c as VIEW_STATE_VERSION, i as onUserScrollIntent, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, s as VIEW_STATE_CHANGE, t as ViewStateController } from "./view-state-controller-DiPAPiA7.js";
 import "./icons.js";
@@ -51,11 +50,12 @@ import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { LedElement } from "./led.js";
 import { ListGroupHeaderElement } from "./list-group-header.js";
-import { a as menuFromTreeToElements, t as menu_exports } from "./menu-C3DhTjHx.js";
-import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-DqDEaXqT.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-CgT60B3-.js";
+import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-Dyv4UM7k.js";
 import { a as iconBus, c as setIconFont, i as hasIcon, l as svgToDataUri, n as getIconEntry, o as registerFontIcon, r as getIconFont, s as registerIcon, t as getIcon } from "./registry-DcF0fO7l.js";
+import { _ as sameTags, a as listItemFadeKeyframes, c as captionForEntry, d as ItemTagResolver, f as TAG_PART_PREFIX, g as sameTagKeys, h as resolveTagFlags, i as animateListItemOut, l as createDefaultListDragPreview, m as collectTags, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, p as applyTagAttributes, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController, u as DEFAULT_ITEM_TAG_FLAGS, v as tagPartTokens, y as tagsAttribute } from "./list-native-drag-controller-B_INa6_G.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
-import { $ as forceState, A as marqueeStyle, At as outDegreeOf, B as NODE_SHAPES, C as zoomAt, Ct as edgeId, D as MARQUEE_THRESHOLD_PX, Dt as inDegreeOf, E as NodeDragController, Et as hasWire, F as findSnapTarget, Ft as toEdges, G as resizeRect, H as shapeSpec, I as proximityFactor, It as toNodeGraph, J as blinkPeriodSeconds, K as GraphPortElement, L as settled, M as rectFromPoints, Mt as portId, N as rectsIntersect, Nt as removeNode, O as MarqueeController, Ot as incomingEdge, P as wantsMarquee, Pt as removeWire, Q as forcePositions, R as smoothStep, S as screenToFlow, St as cycleBlockedNodes, T as DRAG_THRESHOLD_PX, Tt as fromEdges, U as RESIZE_HANDLES, V as isNodeShape, W as isResizeHandle, X as forceMovement, Y as DEFAULT_FORCE_OPTIONS, Z as forcePin, _ as clampZoom, _t as normaliseConnection, a as selectionAfterNodePress, at as edgeShape, b as flowToScreen, bt as addWire, c as collapsedOffset, ct as polylinePath, d as sanitizeFlowSpeed, dt as EASY_CONNECT_MARGIN, et as forceStep, f as withEntry, ft as inEasyConnectZone, g as boundsOf, gt as findValidWire, h as isEditableTarget, ht as canConnect, i as selectionAfterEdgeClick, it as edgePath, j as nodesInRect, jt as parsePortId, k as combineSelection, kt as incomingEdges, l as measureNode, lt as polylineShape, m as PanZoomController, mt as removeNodes, n as renderWires, nt as defaultSide, o as findProximityConnection, ot as extendFromSide, p as withWireFlow, pt as pickStartPort, q as MAX_BLINK_HZ, r as WireDragController, rt as edgeMidpoint, s as rectGap, st as polylineMidpoint, t as NodeGraphElement, tt as EDGE_CORNER_RADIUS, u as MAX_FLOW_SPEED, ut as stepPoints, v as fitBounds, vt as resolveConnection, w as nodeGraphStyles, wt as ensurePort, x as panBy, xt as connectContext, y as fitRects, yt as typesCompatible, z as GraphNodeElement } from "./node-graph-DqEGv5QR.js";
+import { $ as forceState, A as marqueeStyle, At as outDegreeOf, B as NODE_SHAPES, C as zoomAt, Ct as edgeId, D as MARQUEE_THRESHOLD_PX, Dt as inDegreeOf, E as NodeDragController, Et as hasWire, F as findSnapTarget, Ft as toEdges, G as resizeRect, H as shapeSpec, I as proximityFactor, It as toNodeGraph, J as blinkPeriodSeconds, K as GraphPortElement, L as settled, M as rectFromPoints, Mt as portId, N as rectsIntersect, Nt as removeNode, O as MarqueeController, Ot as incomingEdge, P as wantsMarquee, Pt as removeWire, Q as forcePositions, R as smoothStep, S as screenToFlow, St as cycleBlockedNodes, T as DRAG_THRESHOLD_PX, Tt as fromEdges, U as RESIZE_HANDLES, V as isNodeShape, W as isResizeHandle, X as forceMovement, Y as DEFAULT_FORCE_OPTIONS, Z as forcePin, _ as clampZoom, _t as normaliseConnection, a as selectionAfterNodePress, at as edgeShape, b as flowToScreen, bt as addWire, c as collapsedOffset, ct as polylinePath, d as sanitizeFlowSpeed, dt as EASY_CONNECT_MARGIN, et as forceStep, f as withEntry, ft as inEasyConnectZone, g as boundsOf, gt as findValidWire, h as isEditableTarget, ht as canConnect, i as selectionAfterEdgeClick, it as edgePath, j as nodesInRect, jt as parsePortId, k as combineSelection, kt as incomingEdges, l as measureNode, lt as polylineShape, m as PanZoomController, mt as removeNodes, n as renderWires, nt as defaultSide, o as findProximityConnection, ot as extendFromSide, p as withWireFlow, pt as pickStartPort, q as MAX_BLINK_HZ, r as WireDragController, rt as edgeMidpoint, s as rectGap, st as polylineMidpoint, t as NodeGraphElement, tt as EDGE_CORNER_RADIUS, u as MAX_FLOW_SPEED, ut as stepPoints, v as fitBounds, vt as resolveConnection, w as nodeGraphStyles, wt as ensurePort, x as panBy, xt as connectContext, y as fitRects, yt as typesCompatible, z as GraphNodeElement } from "./node-graph-yrbOLbYo.js";
 import { NotificationPillElement } from "./notifier.js";
 import { t as PanTextElement } from "./pan-text-DrJYKQKN.js";
 import { PanelElement } from "./panel.js";
@@ -71,7 +71,7 @@ import { t as WheelNudgeMixin } from "./wheel-nudge-DgJzrL28.js";
 import { t as SliderInputElement } from "./slider-input-C3mbUBZi.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
-import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-C-FuZB5z.js";
+import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-CJdznPzN.js";
 import { SwipeElement } from "./swipe.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-Br5JIeLI.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
@@ -1014,6 +1014,11 @@ let SplitButton = class SplitButton extends ButtonElement {
 		super(..._args);
 		this.mode = `default`;
 		this.defaultValue = ``;
+		this.popoverTarget = ``;
+		this._hasPopoverSlot = false;
+		this._popoverOpen = false;
+		this.#caretWasOpenOnPress = false;
+		this.#buildingPopover = false;
 		this._selectedCommand = ``;
 		this._selectedLabel = ``;
 		this._selectedIcon = ``;
@@ -1021,6 +1026,12 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._dynamicItems = [];
 		this._loadingItems = false;
 		this._menuHasItems = false;
+		this._onPopoverSlotChange = (e) => {
+			this._hasPopoverSlot = e.target.assignedElements({ flatten: true }).length > 0;
+		};
+		this._onPopoverToggle = (e) => {
+			this._popoverOpen = e.newState === `open`;
+		};
 		this._onDefaultMenuSlotChange = (e) => {
 			const slot = e.target;
 			this._menuHasItems = slot.assignedElements({ flatten: true }).length > 0;
@@ -1059,6 +1070,17 @@ let SplitButton = class SplitButton extends ButtonElement {
 		};
 		this._handleCaretClick = async (e) => {
 			e.stopPropagation();
+			if (this._popoverMode) {
+				const wasOpen = this.#caretWasOpenOnPress;
+				this.#caretWasOpenOnPress = false;
+				if (wasOpen) {
+					const el = this._resolvePopover();
+					if (el?.matches(`:popover-open`)) el.hidePopover();
+					return;
+				}
+				await this._showPopover(true);
+				return;
+			}
 			if (this._menuTrigger?.isOpen) {
 				this._menuTrigger.closeMenu();
 				return;
@@ -1084,25 +1106,21 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._handlePrimaryKeyDown = (e) => {
 			if (e.key === `ArrowDown`) {
 				e.preventDefault();
-				this._menuTrigger?.openMenu();
+				this._openOverlay();
 			}
 		};
 		this._handleCaretKeyDown = (e) => {
 			if (e.key === `ArrowDown`) {
 				e.preventDefault();
-				this._menuTrigger?.openMenu();
+				this._openOverlay();
 			}
 		};
+		this._handleCaretPointerDown = () => {
+			this.#caretWasOpenOnPress = this._resolvePopover()?.matches(`:popover-open`) ?? false;
+		};
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._menuTrigger?.removeEventListener(`menu-command`, this._handleSwitcherMenuCommand);
-	}
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			this._menuTrigger?.addEventListener(`menu-command`, this._handleSwitcherMenuCommand);
-		});
-	}
+	#caretWasOpenOnPress;
+	#buildingPopover;
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if ((changedProperties.has(`items`) || changedProperties.has(`mode`)) && this.items && !this.itemsProvider) this._applyItems(this.items);
@@ -1145,11 +1163,41 @@ let SplitButton = class SplitButton extends ButtonElement {
 	}
 	/** True when there is (or will be) popup content. Used to dim the caret visually. */
 	get _caretHasContent() {
+		if (this._popoverMode) return true;
 		if (this.itemsProvider) return true;
 		if (this.items && this.items.length > 0) return true;
 		if (this.mode === `switcher`) return this._switcherItems.length > 1;
 		return this._menuHasItems;
 	}
+	/** The caret toggles a popover (slotted content, `popover-target` or `popoverProvider`) rather than the menu. */
+	get _popoverMode() {
+		return this.popoverTarget !== `` || this.popoverProvider !== void 0 || this._hasPopoverSlot;
+	}
+	_resolvePopover() {
+		if (this.popoverTarget !== ``) {
+			const el = this.getRootNode().getElementById?.(this.popoverTarget);
+			return el instanceof HTMLElement && el.popover !== null ? el : void 0;
+		}
+		return this._popoverPanel;
+	}
+	/** Show the popover (building its content first). `toggle`: hide it instead when already open. */
+	async _showPopover(toggle) {
+		const el = this._resolvePopover();
+		if (!el || this.#buildingPopover) return;
+		if (el.matches(`:popover-open`)) {
+			if (toggle) el.hidePopover();
+			return;
+		}
+		if (this.popoverProvider) {
+			this.#buildingPopover = true;
+			try {
+				await this.popoverProvider(el);
+			} finally {
+				this.#buildingPopover = false;
+			}
+		}
+		el.showPopover({ source: this._caretEl });
+	}
 	_applySwitcherItems(items) {
 		this._switcherItems = items;
 		if (!this._selectedCommand && items.length > 0) {
@@ -1159,6 +1207,10 @@ let SplitButton = class SplitButton extends ButtonElement {
 			this._selectedIcon = picked.icon;
 		}
 	}
+	_openOverlay() {
+		if (this._popoverMode) this._showPopover(false);
+		else this._menuTrigger?.openMenu();
+	}
 	render() {
 		return this.mode === `switcher` ? this._renderSwitcher() : this._renderDefault();
 	}
@@ -1171,13 +1223,36 @@ let SplitButton = class SplitButton extends ButtonElement {
         part="caret"
         ?disabled=${this.disabled}
         ?data-empty=${empty}
-        aria-haspopup="true"
+        aria-haspopup=${this._popoverMode ? `dialog` : `true`}
+        aria-expanded=${this._popoverMode ? String(this._popoverOpen) : nothing}
         aria-label=${ariaLabel}
+        @pointerdown=${this._handleCaretPointerDown}
         @click=${this._handleCaretClick}
         @keydown=${this._handleCaretKeyDown}
       >
         <ixfx-icon name="${iconName}"></ixfx-icon>
       </button>
+    `;
+	}
+	/** The caret with its overlay: the popover panel in popover mode, otherwise the menu trigger + menu. */
+	_renderCaretArea(iconName, ariaLabel, menuContent) {
+		const panel = html`
+      <div class="popover-panel" part="popover" popover="auto" @toggle=${this._onPopoverToggle}>
+        <slot name="popover" @slotchange=${this._onPopoverSlotChange}></slot>
+      </div>
+    `;
+		if (this._popoverMode) return html`
+        <div class="caret-area">
+          ${this._renderCaret(iconName, ariaLabel)}
+          ${this.popoverTarget === `` ? panel : nothing}
+        </div>
+      `;
+		return html`
+      <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager} @menu-command=${this._handleSwitcherMenuCommand}>
+        ${this._renderCaret(iconName, ariaLabel)}
+        ${menuContent}
+      </ixfx-menu-trigger>
+      ${panel}
     `;
 	}
 	_renderLoadingOrItems(items) {
@@ -1208,10 +1283,7 @@ let SplitButton = class SplitButton extends ButtonElement {
         >
           ${this._renderIcon()}${label}
         </button>
-        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
-          ${this._renderCaret(`chevron-down`, `Open menu`)}
-          ${menuContent}
-        </ixfx-menu-trigger>
+        ${this._renderCaretArea(`chevron-down`, `Open menu`, menuContent)}
       </div>
     `;
 	}
@@ -1238,12 +1310,11 @@ let SplitButton = class SplitButton extends ButtonElement {
         >
           ${primaryIcon}${primaryLabel}
         </button>
-        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
-          ${this._renderCaret(`chevron-right`, `Choose action`)}
+        ${this._renderCaretArea(`chevron-right`, `Choose action`, html`
           <ixfx-menu-container slot="menu">
             ${popupItems}
           </ixfx-menu-container>
-        </ixfx-menu-trigger>
+        `)}
       </div>
     `;
 	}
@@ -1386,10 +1457,33 @@ let SplitButton = class SplitButton extends ButtonElement {
         background: color-mix(in oklch, var(--surface-3, #ccc) 70%, transparent);
       }
 
-      ixfx-menu-trigger {
+      ixfx-menu-trigger,
+      .caret-area {
         display: inline-flex;
         align-items: stretch;
       }
+
+      button.caret {
+        anchor-name: --split-caret;
+      }
+
+      .popover-panel {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        position-anchor: --split-caret;
+        top: calc(anchor(bottom) + var(--space-s, 4px));
+        right: anchor(right);
+        position-try-fallbacks: flip-block, flip-inline;
+        padding: var(--space-m, 8px);
+        background: var(--surface-3, #ccc);
+        color: var(--surface-3-text, #000);
+        border: var(--border, 1px solid #999);
+        border-radius: var(--radius-l, 8px);
+        box-shadow: 0 4px 16px color-mix(in oklch, black 30%, transparent);
+        max-width: min(90vw, var(--ixfx-split-button-popover-max-width, 40ch));
+        overflow: auto;
+      }
     `
 		];
 	}
@@ -1403,7 +1497,16 @@ __decorate([property({
 })], SplitButton.prototype, "defaultValue", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "items", void 0);
+__decorate([property({
+	type: String,
+	attribute: `popover-target`
+})], SplitButton.prototype, "popoverTarget", void 0);
+__decorate([property({ attribute: false })], SplitButton.prototype, "popoverProvider", void 0);
 __decorate([query(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
+__decorate([query(`.popover-panel`)], SplitButton.prototype, "_popoverPanel", void 0);
+__decorate([query(`button.caret`)], SplitButton.prototype, "_caretEl", void 0);
+__decorate([state()], SplitButton.prototype, "_hasPopoverSlot", void 0);
+__decorate([state()], SplitButton.prototype, "_popoverOpen", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedCommand", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedLabel", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedIcon", void 0);
@@ -1538,6 +1641,11 @@ var CrumbPathController = class {
 };
 // src/crumbs/crumb-path.ts
 const INVALID_ANCHOR_CHARS_RE = /[^\w-]/g;
+/**
+* Internal delimiter for cumulative-path keys (`data-cumulative`, sibling
+* cache). Deliberately not the display `separator`, so a label may contain it.
+*/
+const KEY_SEP = `\u001F`;
 let CrumbPathElement = class CrumbPathElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -1559,6 +1667,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._hintSegments = null;
 		this.#uid = Math.random().toString(36).slice(2, 8);
 		this.#clickSuppressUntil = 0;
+		this.#hintValues = [];
 		this.#onPopoverToggle = (e) => {
 			if (e.newState === `closed` && this._openIdx !== null) {
 				this._openIdx = null;
@@ -1614,8 +1723,10 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#uid;
 	/** Clicks within this window after a drag are ignored (post-drag click-through guard). */
 	#clickSuppressUntil;
+	/** Values parallel to `_hintSegments`, recorded in structured mode. */
+	#hintValues;
 	#anchorName(cumPath) {
-		return `--cp-${this.#uid}-${cumPath.replaceAll(this.separator, `-`).replaceAll(` `, `-`).replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
+		return `--cp-${this.#uid}-${cumPath.replaceAll(KEY_SEP, `-`).replaceAll(this.separator, `-`).replaceAll(` `, `-`).replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
 	}
 	#closeDropdown() {
 		if (this._openIdx !== null) {
@@ -1660,7 +1771,41 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			this.#pendingIndex = void 0;
 		}
 	}
+	willUpdate(changed) {
+		if (changed.has(`segments`) && this.segments !== void 0) {
+			const text = this.segments.map((seg) => seg.label).join(this.separator);
+			if (text !== this.path) this.path = text;
+		}
+	}
+	/** Structured segments, or the text path parsed into value-less segments. */
+	getSegments() {
+		return this.segments ? this.segments.map((seg) => ({ ...seg })) : this.#getSegments().map((label) => ({ label }));
+	}
+	/**
+	* Apply a new relative path. In structured mode also rebuilds `segments`,
+	* reusing existing/hinted values where the label at that index is unchanged
+	* and taking `tailValue` for the final segment.
+	*/
+	#assignPath(labels, hadLeading, tailValue) {
+		const joined = labels.join(this.separator);
+		if (this.segments === void 0) {
+			this.path = hadLeading ? this.separator + joined : joined;
+			return joined;
+		}
+		const previous = this.segments;
+		this.segments = labels.map((label, i) => {
+			let value = previous[i]?.label === label ? previous[i].value : this.#hintValues[i];
+			if (i === labels.length - 1 && tailValue !== void 0) value = tailValue;
+			return value === void 0 ? { label } : {
+				label,
+				value
+			};
+		});
+		this.path = joined;
+		return joined;
+	}
 	#getSegments() {
+		if (this.segments) return this.segments.map((seg) => seg.label);
 		const fullPath = this.path;
 		if (this.pathRoot.length > 0 && fullPath.startsWith(this.pathRoot)) return fullPath.slice(this.pathRoot.length).split(this.separator).filter((p) => p.length > 0);
 		return this.path.split(this.separator).filter((p) => p.length > 0);
@@ -1672,8 +1817,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#getCumulativePath(index, isRoot) {
 		const segments = this.#getSegments();
 		const rootSegments = this.#getRootSegments();
-		if (isRoot) return rootSegments.slice(0, index + 1).join(this.separator);
-		return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
+		if (isRoot) return rootSegments.slice(0, index + 1).join(KEY_SEP);
+		return [...rootSegments, ...segments.slice(0, index + 1)].join(KEY_SEP);
 	}
 	#resolveFullPathSegments(index, isRoot) {
 		const rootSegments = this.#getRootSegments();
@@ -1703,21 +1848,28 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#recordHintOnShorten(oldSegments, newSegments) {
 		if (!this.hintPrevious) return;
 		const hint = this._hintSegments;
-		if (!(hint !== null && this.#isSegmentPrefix(newSegments, hint))) this._hintSegments = oldSegments;
+		if (!(hint !== null && this.#isSegmentPrefix(newSegments, hint))) {
+			this._hintSegments = oldSegments;
+			this.#hintValues = this.segments?.map((seg) => seg.value) ?? [];
+		}
 	}
 	#resolveSegmentIcon(fullPathSegments, index) {
 		const direct = this.segmentIconLookup?.(fullPathSegments, index);
 		if (typeof direct === `string` && direct.length > 0) return direct;
 		const label = fullPathSegments[index];
 		if (label === void 0) return;
-		const parentKey = fullPathSegments.slice(0, index).join(this.separator);
+		const parentKey = fullPathSegments.slice(0, index).join(KEY_SEP);
 		return (this._cachedSiblings.get(parentKey)?.find((s) => s.label === label))?.icon;
 	}
 	setPath(newPath) {
 		this.#cleanupPending();
 		if (this.pathRoot.length > 0 && !newPath.startsWith(this.pathRoot)) newPath = this.pathRoot;
-		if (newPath === this.path) return;
-		this.path = newPath;
+		if (newPath === this.path && this.segments === void 0) return;
+		if (this.segments !== void 0) {
+			const labels = newPath.split(this.separator).filter((p) => p.length > 0);
+			if (labels.join(this.separator) === this.path) return;
+			this.#assignPath(labels, false);
+		} else this.path = newPath;
 		this._cachedSiblings = /* @__PURE__ */ new Map();
 		this._openIdx = null;
 		this._leafSegmentIndex = null;
@@ -1732,6 +1884,10 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	getPath() {
 		return this.path;
 	}
+	/** `{ segments }` event-detail fragment in structured mode, else nothing. */
+	#segmentsDetail() {
+		return this.segments ? { segments: this.getSegments() } : {};
+	}
 	#onCaretClick(index, event) {
 		event.preventDefault();
 		event.stopPropagation();
@@ -1745,7 +1901,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._dropdownActiveIndex = -1;
 		const segments = this.#getSegments();
 		const rootSegments = this.#getRootSegments();
-		const pathSegments = cumPath ? cumPath.split(this.separator).filter((p) => p.length > 0) : index === -1 ? rootSegments : segments.slice(0, index + 1);
+		const pathSegments = cumPath ? cumPath.split(KEY_SEP).filter((p) => p.length > 0) : index === -1 ? rootSegments : segments.slice(0, index + 1);
 		const cacheKey = cumPath ?? String(index);
 		if (!this._cachedSiblings.has(cacheKey) && this.siblingLookup) {
 			this.#cleanupPending();
@@ -1915,8 +2071,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		const truncatedSegments = segments.slice(0, index + 1);
 		this.#recordHintOnShorten(segments, truncatedSegments);
 		const hadLeading = this.path.startsWith(this.separator);
-		const newPath = truncatedSegments.join(this.separator);
-		this.path = hadLeading ? this.separator + newPath : newPath;
+		const newPath = this.#assignPath(truncatedSegments, hadLeading);
 		this._cachedSiblings = /* @__PURE__ */ new Map();
 		this._leafSegmentIndex = null;
 		const parentPath = truncatedSegments.slice(0, -1).join(this.separator);
@@ -1925,7 +2080,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 				index,
 				label: truncatedSegments[index],
 				parentPath,
-				fullPath: newPath
+				fullPath: newPath,
+				...this.#segmentsDetail()
 			},
 			bubbles: true,
 			composed: true
@@ -1940,8 +2096,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		if (!hint) return;
 		const truncatedSegments = hint.slice(0, hintIndex + 1);
 		const hadLeading = this.path.startsWith(this.separator);
-		const newPath = truncatedSegments.join(this.separator);
-		this.path = hadLeading ? this.separator + newPath : newPath;
+		const newPath = this.#assignPath(truncatedSegments, hadLeading);
 		this._cachedSiblings = /* @__PURE__ */ new Map();
 		this._leafSegmentIndex = null;
 		const parentPath = truncatedSegments.slice(0, -1).join(this.separator);
@@ -1950,7 +2105,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 				index: hintIndex,
 				label: truncatedSegments[hintIndex],
 				parentPath,
-				fullPath: newPath
+				fullPath: newPath,
+				...this.#segmentsDetail()
 			},
 			bubbles: true,
 			composed: true
@@ -1962,7 +2118,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		const segments = this.#getSegments();
 		const rootSegments = this.#getRootSegments();
 		let newSegments;
-		if (cumPath) newSegments = [...cumPath.split(this.separator).filter((p) => p.length > 0), segment.label];
+		if (cumPath) newSegments = [...cumPath.split(KEY_SEP).filter((p) => p.length > 0), segment.label];
 		else if (this.pathRoot.length > 0 && index < rootSegments.length) newSegments = [...rootSegments.slice(0, index + 1), segment.label];
 		else newSegments = [
 			...rootSegments,
@@ -1970,8 +2126,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			segment.label
 		];
 		const hadLeading = this.path.startsWith(this.separator);
-		const newPath = newSegments.join(this.separator);
-		this.path = hadLeading ? this.separator + newPath : newPath;
+		const newPath = this.#assignPath(newSegments, hadLeading, segment.value);
 		this._cachedSiblings = /* @__PURE__ */ new Map();
 		const leafIndex = segment.isLeaf ? newSegments.length - 1 : null;
 		this._leafSegmentIndex = leafIndex;
@@ -1982,7 +2137,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 				index,
 				label: segment.label,
 				parentPath,
-				fullPath: newPath
+				fullPath: newPath,
+				...this.#segmentsDetail()
 			},
 			bubbles: true,
 			composed: true
@@ -2147,7 +2303,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#onAcChange(e) {
 		e.stopPropagation();
 		const newPath = e.detail.value;
-		this.path = newPath;
+		this.#applyEditedText(newPath);
 		this._cachedSiblings = /* @__PURE__ */ new Map();
 		this._leafSegmentIndex = newPath.endsWith(this.separator) ? null : newPath.split(this.separator).filter((p) => p.length > 0).length - 1;
 		this._editing = false;
@@ -2161,7 +2317,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			if (!this._editingCancelled) {
 				const newPath = (this.shadowRoot?.querySelector(`ixfx-ac-text`))?.value ?? this.path;
 				if (newPath !== this.path) {
-					this.path = newPath;
+					this.#applyEditedText(newPath);
 					this._cachedSiblings = /* @__PURE__ */ new Map();
 					this._leafSegmentIndex = newPath.endsWith(this.separator) ? null : newPath.split(this.separator).filter((p) => p.length > 0).length - 1;
 					this.#dispatchChangeEvent(newPath);
@@ -2171,15 +2327,24 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			this._editStartIndex = null;
 		}
 	}
+	/** Edited text is split on the separator; in structured mode this rebuilds `segments`. */
+	#applyEditedText(text) {
+		if (this.segments === void 0) {
+			this.path = text;
+			return;
+		}
+		this.#assignPath(text.split(this.separator).filter((p) => p.length > 0), false);
+	}
 	#dispatchChangeEvent(newPath) {
-		const segments = newPath.split(this.separator).filter((p) => p.length > 0);
+		const segments = this.segments ? this.segments.map((seg) => seg.label) : newPath.split(this.separator).filter((p) => p.length > 0);
 		const label = segments.at(-1) ?? ``;
 		const parentPath = segments.slice(0, -1).join(this.separator);
 		this.dispatchEvent(new CustomEvent(`change`, {
 			detail: {
 				label,
 				parentPath,
-				fullPath: newPath
+				fullPath: newPath,
+				...this.#segmentsDetail()
 			},
 			bubbles: true,
 			composed: true
@@ -2450,6 +2615,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	}
 };
 __decorate([property({ type: String })], CrumbPathElement.prototype, "path", void 0);
+__decorate([property({ attribute: false })], CrumbPathElement.prototype, "segments", void 0);
 __decorate([property({ type: String })], CrumbPathElement.prototype, "separator", void 0);
 __decorate([property({
 	type: String,
@@ -11009,6 +11175,7 @@ var MulticolColumnController = class {
 		if (this.#listerEl) {
 			this.#pushItems();
 			this.#restoreAfterSync();
+			this.#applyTags();
 		}
 		if (r.changed) this.#onSelectionChange(this.id, r.selected, r.restored ? `restore` : `data`);
 	}
@@ -11047,6 +11214,38 @@ var MulticolColumnController = class {
 	#applyPartialKeys() {
 		if (!this.#listerEl) return;
 		for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) list.partialKeys = this.#partialKeys;
+		this.#applyTags();
+	}
+	#tagKeys;
+	#tagHook;
+	#tagBehaviour;
+	/**
+	* Item tags for this column: `keys` (by item key) merged with `hook` results,
+	* and the behaviour per tag. Forwarded to the column's inner lists.
+	*/
+	setTags(keys, hook, behaviour) {
+		this.#tagKeys = keys;
+		this.#tagHook = hook;
+		this.#tagBehaviour = behaviour;
+		this.#applyTags();
+	}
+	#applyTags() {
+		if (!this.#listerEl) return;
+		let merged = this.#tagKeys;
+		if (this.#tagHook) {
+			const byTag = /* @__PURE__ */ new Map();
+			for (const [tag, keys] of this.#tagKeys ?? []) byTag.set(tag, new Set(keys));
+			for (const item of this.#lastItems) for (const tag of this.#tagHook(item, this.id) ?? []) {
+				const set = byTag.get(tag) ?? /* @__PURE__ */ new Set();
+				set.add(item.key);
+				byTag.set(tag, set);
+			}
+			merged = byTag;
+		}
+		for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) {
+			list.tagBehaviour = this.#tagBehaviour;
+			list.tagKeys = merged;
+		}
 	}
 	#handleSelect = () => {
 		if (this.#syncingSelection || this.#syncsInFlight > 0) return;
@@ -11595,6 +11794,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`categories`)) this.#resolvePendingColumns();
+		if (changedProperties.has(`tags`)) this.refreshTags();
 		const seedCategory = flattenCategories(this.categories)[0];
 		if (!this._autoSeeded && this._columns.length === 0 && seedCategory) {
 			this._autoSeeded = true;
@@ -11666,6 +11866,30 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	_getCategoryTooltip(key) {
 		return findCategory(this.categories, key)?.description ?? `Change category`;
 	}
+	#tagKeys;
+	#tagBehaviour;
+	/** Tags by item key, in every column with an item of that key: tag name → keys. */
+	get tagKeys() {
+		return this.#tagKeys;
+	}
+	set tagKeys(value) {
+		if (sameTagKeys(value, this.#tagKeys)) return;
+		this.#tagKeys = value;
+		this.refreshTags();
+	}
+	/** Interaction flags per tag name (`selectable`, `focusable`, `draggable`, `searchable`); the most restrictive flag wins. */
+	get tagBehaviour() {
+		return this.#tagBehaviour;
+	}
+	set tagBehaviour(value) {
+		if (value === this.#tagBehaviour) return;
+		this.#tagBehaviour = value;
+		this.refreshTags();
+	}
+	/** Re-evaluate every column's tags. */
+	refreshTags() {
+		for (const col of this._columns) col.setTags(this.#tagKeys, this.tags, this.#tagBehaviour);
+	}
 	#partialKeys;
 	#columnPartialKeys;
 	/**
@@ -11712,6 +11936,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	#createController(id, category) {
 		const controller = this.#createColumnController(id, category);
 		controller.setPartialKeys(this.#partialFor(id));
+		controller.setTags(this.#tagKeys, this.tags, this.#tagBehaviour);
 		return controller;
 	}
 	#createColumnController(id, category) {
@@ -12078,6 +12303,7 @@ __decorate([state()], MulticolListElement.prototype, "_resizingColumnId", void 0
 __decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0);
 __decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
 __decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "tags", void 0);
 MulticolListElement = __decorate([safeCustomElement(`ixfx-multicol-list`)], MulticolListElement);
 function withoutKey(map, key) {
 	const next = new Map(map);
@@ -12276,58 +12502,104 @@ function createPillRenderer(options = {}) {
 	};
 }
 // src/notifier/manager.ts
-const options = {
-	renderer: void 0,
-	timeout: 4e3,
-	timeoutError: 8e3,
-	queue: true,
-	queueSize: 3,
-	tapBehaviour: `dismiss`,
-	tapHandlerDefault: void 0
-};
-/** Rank-ordered, index 0 = oldest/first (next to be evicted or timed out). Length never exceeds queueSize (or 1 when queuing is disabled). */
-const visible = [];
-let renderer = null;
-let defaultRenderer = null;
-function getDefaultRenderer() {
-	defaultRenderer ??= createPillRenderer({ position: `top-right` });
-	return defaultRenderer;
-}
-function getRenderer() {
-	return renderer ?? getDefaultRenderer();
-}
-function syncRenderer() {
-	getRenderer().setNotifications([...visible], options.queueSize);
-}
-function clearTimer(managed) {
-	if (managed.timer !== null) {
-		clearTimeout(managed.timer);
-		managed.timer = null;
+const DEFAULT_HISTORY_LIMIT = 100;
+function createNotificationManager(initial = {}) {
+	const options = {
+		renderer: void 0,
+		timeout: 4e3,
+		timeoutError: 8e3,
+		queue: true,
+		queueSize: 3,
+		tapBehaviour: `dismiss`,
+		tapHandlerDefault: void 0,
+		historyLimit: DEFAULT_HISTORY_LIMIT
+	};
+	/** Rank-ordered, index 0 = oldest/first (next to be evicted or timed out). Length never exceeds queueSize (or 1 when queuing is disabled). */
+	const visible = [];
+	const history = [];
+	const listeners = /* @__PURE__ */ new Set();
+	let renderer = null;
+	let defaultRenderer = null;
+	function getDefaultRenderer() {
+		defaultRenderer ??= createPillRenderer({ position: `top-right` });
+		return defaultRenderer;
+	}
+	function getRenderer() {
+		return renderer ?? getDefaultRenderer();
+	}
+	function syncRenderer() {
+		getRenderer().setNotifications([...visible], options.queueSize);
+	}
+	function emitHistory() {
+		if (listeners.size === 0) return;
+		const snapshot = getHistory();
+		for (const listener of [...listeners]) try {
+			listener(snapshot);
+		} catch (err) {
+			console.error(`Notification history listener failed:`, err);
+		}
 	}
-}
-/**
-* A message shown alone takes the full timeout. A message that joined a
-* non-empty queue at arrival time is permanently "wasQueued" and gets
-* 1/queueSize of the timeout once it reaches the front. The timer for a
-* given message is only ever started once - when it first becomes front.
-*/
-function startTimer(managed) {
-	const base = managed.type === `error` ? options.timeoutError : options.timeout;
-	const duration = managed.wasQueued ? base / options.queueSize : base;
-	managed.timer = window.setTimeout(dismiss, duration, managed.id);
-}
-function ensureFrontTimer() {
-	const front = visible[0];
-	if (front && front.timer === null) startTimer(front);
-}
-const NotificationManager = {
-	configure(opts) {
+	function getHistory() {
+		return history.map((entry) => ({ ...entry }));
+	}
+	function historyEntry(id) {
+		return history.find((entry) => entry.id === id);
+	}
+	function markDismissed(id) {
+		const entry = historyEntry(id);
+		if (entry && entry.dismissedAt === void 0) {
+			entry.dismissedAt = Date.now();
+			emitHistory();
+		}
+	}
+	function clearTimer(managed) {
+		if (managed.timer !== null) {
+			clearTimeout(managed.timer);
+			managed.timer = null;
+		}
+	}
+	/** Remove from the visible queue (timer + history bookkeeping), without rendering. */
+	function evict(managed) {
+		clearTimer(managed);
+		markDismissed(managed.id);
+	}
+	/**
+	* A message shown alone takes the full timeout. A message that joined a
+	* non-empty queue at arrival time is permanently "wasQueued" and gets
+	* 1/queueSize of the timeout once it reaches the front. The timer for a
+	* given message is only ever started once - when it first becomes front.
+	*/
+	function startTimer(managed) {
+		const base = managed.type === `error` ? options.timeoutError : options.timeout;
+		const duration = managed.wasQueued ? base / options.queueSize : base;
+		managed.timer = window.setTimeout(dismiss, duration, managed.id);
+	}
+	function ensureFrontTimer() {
+		const front = visible[0];
+		if (front && front.timer === null) startTimer(front);
+	}
+	function dismiss(id) {
+		const idx = visible.findIndex((m) => m.id === id);
+		if (idx === -1) return;
+		evict(visible.splice(idx, 1)[0]);
+		ensureFrontTimer();
+		syncRenderer();
+	}
+	function markRead(id) {
+		const entry = historyEntry(id);
+		if (entry && !entry.read) {
+			entry.read = true;
+			emitHistory();
+		}
+	}
+	function configure(opts) {
 		if (opts.renderer !== void 0) {
 			renderer?.detach?.();
 			renderer = opts.renderer;
 			renderer.attach({ onTap(id) {
 				const notification = visible.find((n) => n.id === id);
 				if (!notification) return;
+				markRead(id);
 				if (notification.onTap) notification.onTap(id);
 				else options.tapHandlerDefault?.(notification);
 				if (options.tapBehaviour === `dismiss`) dismiss(id);
@@ -12339,14 +12611,21 @@ const NotificationManager = {
 		if (opts.queue !== void 0) options.queue = opts.queue;
 		if (opts.queueSize !== void 0) {
 			options.queueSize = Math.max(1, opts.queueSize);
-			while (visible.length > options.queueSize) clearTimer(visible.shift());
+			while (visible.length > options.queueSize) evict(visible.shift());
 			ensureFrontTimer();
 			syncRenderer();
 		}
 		if (opts.tapBehaviour !== void 0) options.tapBehaviour = opts.tapBehaviour;
 		if (opts.tapHandlerDefault !== void 0) options.tapHandlerDefault = opts.tapHandlerDefault;
-	},
-	notify(content) {
+		if (opts.historyLimit !== void 0) {
+			options.historyLimit = Math.max(0, Math.floor(opts.historyLimit));
+			if (history.length > options.historyLimit) {
+				history.splice(0, history.length - options.historyLimit);
+				emitHistory();
+			}
+		}
+	}
+	function notify(content) {
 		const id = crypto.randomUUID();
 		const now = Date.now();
 		const icon = content.icon ?? (content.type === `error` ? `error` : void 0);
@@ -12360,44 +12639,114 @@ const NotificationManager = {
 			wasQueued: false
 		};
 		if (options.queue) {
-			if (visible.length >= options.queueSize) clearTimer(visible.shift());
+			if (visible.length >= options.queueSize) evict(visible.shift());
 			managed.wasQueued = visible.length > 0;
 			visible.push(managed);
 		} else {
-			while (visible.length > 0) clearTimer(visible.pop());
+			while (visible.length > 0) evict(visible.pop());
 			visible.push(managed);
 		}
+		if (options.historyLimit > 0) {
+			const { timer: _timer, wasQueued: _wasQueued, ...record } = managed;
+			history.push({
+				...record,
+				read: false
+			});
+			if (history.length > options.historyLimit) history.splice(0, history.length - options.historyLimit);
+			emitHistory();
+		}
 		ensureFrontTimer();
 		syncRenderer();
 		return id;
-	},
-	update(id, content) {
+	}
+	function update(id, content) {
 		const managed = visible.find((n) => n.id === id);
-		if (!managed) return;
-		Object.assign(managed, content);
-		managed.updatedAt = Date.now();
-		if (visible[0] === managed) {
-			clearTimer(managed);
-			startTimer(managed);
+		if (managed) {
+			Object.assign(managed, content);
+			managed.updatedAt = Date.now();
+			if (visible[0] === managed) {
+				clearTimer(managed);
+				startTimer(managed);
+			}
+			syncRenderer();
 		}
+		const entry = historyEntry(id);
+		if (entry) {
+			Object.assign(entry, content);
+			entry.updatedAt = Date.now();
+			emitHistory();
+		}
+	}
+	function dismissAll() {
+		for (const m of visible) evict(m);
+		visible.length = 0;
 		syncRenderer();
+	}
+	function markAllRead() {
+		let changed = false;
+		for (const entry of history) if (!entry.read) {
+			entry.read = true;
+			changed = true;
+		}
+		if (changed) emitHistory();
+	}
+	function clearHistory() {
+		if (history.length === 0) return;
+		history.length = 0;
+		emitHistory();
+	}
+	function destroy() {
+		dismissAll();
+		history.length = 0;
+		listeners.clear();
+		renderer?.detach?.();
+		renderer = null;
+	}
+	configure(initial);
+	return {
+		configure,
+		notify,
+		update,
+		dismiss,
+		dismissAll,
+		getHistory,
+		get unreadCount() {
+			return history.reduce((n, entry) => entry.read ? n : n + 1, 0);
+		},
+		markRead,
+		markAllRead,
+		clearHistory,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		destroy
+	};
+}
+const scopes = /* @__PURE__ */ new Map();
+const defaultManager = createNotificationManager();
+/**
+* The default, app-wide manager. Also a registry of named, independent
+* scopes: `NotificationManager.scope('lister-1', { renderer })`.
+*/
+const NotificationManager = {
+	...defaultManager,
+	get unreadCount() {
+		return defaultManager.unreadCount;
 	},
-	dismiss(id) {
-		dismiss(id);
+	scope(name, opts) {
+		let instance = scopes.get(name);
+		if (!instance) {
+			instance = createNotificationManager(opts);
+			scopes.set(name, instance);
+		}
+		return instance;
 	},
-	dismissAll() {
-		for (const m of visible) clearTimer(m);
-		visible.length = 0;
-		syncRenderer();
+	releaseScope(name) {
+		scopes.get(name)?.destroy();
+		scopes.delete(name);
 	}
 };
-function dismiss(id) {
-	const idx = visible.findIndex((m) => m.id === id);
-	if (idx === -1) return;
-	clearTimer(visible.splice(idx, 1)[0]);
-	ensureFrontTimer();
-	syncRenderer();
-}
 // src/panel/panel-group.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
 const DRAG_THRESHOLD_PX$2 = 5;
@@ -17807,4 +18156,4 @@ function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
 function init() {
 	console.log(`Init`);
 }
-export { AGE_UNITS, AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_FORCE_OPTIONS, DEFAULT_SIBLING_SPACING, DRAG_THRESHOLD_PX, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DateInputElement, DetailListElement, DockHostElement, DockPanelElement, EASY_CONNECT_MARGIN, EDGE_CORNER_RADIUS, EMPTY_FLAGS, EMPTY_GROUP_LABEL, EMPTY_KEYS, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GraphNodeElement, GraphPortElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, MARQUEE_THRESHOLD_PX, MAX_BLINK_HZ, MAX_FLOW_SPEED, MAX_PENDING_KEYS, MarqueeController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NODE_SHAPES, NarrowedTextElement, NodeDragController, NodeGraphElement, NotificationManager, NotificationPillElement, PARTIAL_DESCRIPTION, PanTextElement, PanZoomController, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RESIZE_HANDLES, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SCROLL_HOVER_SUPPRESS_ATTR, SIZE_UNITS, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, UnitInputElement, VIEW_STATE_CHANGE, VIEW_STATE_VERSION, VerticalListElement, ViewStateController, WireDragController, XyPad, addPanelToStack, addWire, anchorFromRow, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applyPartialAttributes, applySnapshot, applyTreeDrop, attachTimelineInteractions, bestUnit, bindViewState, blinkPeriodSeconds, bottomDrawerCommandId, boundsOf, buildHighlightTargets, buildModel, canConnect, capFlags, capKeys, captionForEntry, captureElementScroll, clampToDisk, clampZoom, clearHighlights, collapsedOffset, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, combineSelection, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeSunburstLayout, computeTreemapLayout, connectContext, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createScrollHoverGuard, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, cycleBlockedNodes, decomposeViewIsometry, defaultGroupLabel, defaultSide, defaultSunburstValueAccessor, distribute, dropTargetFor, edgeId, edgeMidpoint, edgePath, edgeShape, ensurePort, euclideanRadiusForHyperbolicDistance, extendFromSide, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleKeyPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findProximityConnection, findSnapTarget, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, findTreemapNode, findTreemapPath, findValidWire, fitBounds, fitRects, flagsFromRecord, flagsToRecord, flowToScreen, forceMovement, forcePin, forcePositions, forceState, forceStep, formatDateInput, fromEdges, geodesicInterpolate, geodesicPath, geodesicSegment, gestureOf, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hasWire, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, inDegreeOf, inEasyConnectZone, incomingEdge, incomingEdges, init, insertBeside, invertIsometry, isDragging, isEditableTarget, isHyperbolicDescendantId, isMultiMode, isNodeShape, isPartialKey, isResizeHandle, isSplit, isStack, isSunburstAncestorId, isViewStateful, keyForElement, keysAsFlags, keysToArray, listItemFadeKeyframes, listSearchStyles, marqueeStyle, measureNode, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, nodeGraphStyles, nodesInRect, norm, normalise, normaliseConnection, normaliseValue, normalize, onUserScrollIntent, outDegreeOf, panBy, panelGapIndex, parseColourScaleAttr, parseDateInput, parseLayout, parsePortId, partitionByGroup, partitionFlags, partitionKeys, pickStartPort, poincareDistance, pointerOverAnyHost, polylineMidpoint, polylinePath, polylineShape, portId, prefersReducedMotion, preserveRestoreWeights, proximityFactor, pruneDraggedDescendants, readBaseColour, rectFromPoints, rectGap, rectsIntersect, registerFontIcon, registerIcon, registerListSearchCommands, removeNode, removeNodes, removePanelFromStack, removeWire, renderWires, resizeRect, resolveConnection, resolveCssVars, resolveGrid, resolveGroupKey, resolveIcicleKeyPath, resolveLeafPath, resolveTracks, restoreElementScroll, rotationIsometry, sameKeySet, sanitizeFlowSpeed, screenToFlow, scrollToOffset, selectionAfterEdgeClick, selectionAfterNodePress, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, settled, shapeSpec, smoothStep, snapshotNonEmptyStacks, startListItemOutAnimation, stepPoints, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toBase, toEdges, toGroupKey, toNodeGraph, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, typesCompatible, viewIsometry, walk, wantsMarquee, withEntry, withWireFlow, withoutFlag, wrapRoot, zoomAt };
+export { AGE_UNITS, AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_FORCE_OPTIONS, DEFAULT_ITEM_TAG_FLAGS, DEFAULT_SIBLING_SPACING, DRAG_THRESHOLD_PX, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DateInputElement, DetailListElement, DockHostElement, DockPanelElement, EASY_CONNECT_MARGIN, EDGE_CORNER_RADIUS, EMPTY_FLAGS, EMPTY_GROUP_LABEL, EMPTY_KEYS, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GraphNodeElement, GraphPortElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, ItemTagResolver, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, MARQUEE_THRESHOLD_PX, MAX_BLINK_HZ, MAX_FLOW_SPEED, MAX_PENDING_KEYS, MarqueeController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NODE_SHAPES, NarrowedTextElement, NodeDragController, NodeGraphElement, NotificationManager, NotificationPillElement, PARTIAL_DESCRIPTION, PanTextElement, PanZoomController, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RESIZE_HANDLES, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SCROLL_HOVER_SUPPRESS_ATTR, SIZE_UNITS, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, SwipeElement, TAG_PART_PREFIX, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, UnitInputElement, VIEW_STATE_CHANGE, VIEW_STATE_VERSION, VerticalListElement, ViewStateController, WireDragController, XyPad, addPanelToStack, addWire, anchorFromRow, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applyPartialAttributes, applySnapshot, applyTagAttributes, applyTreeDrop, attachTimelineInteractions, bestUnit, bindViewState, blinkPeriodSeconds, bottomDrawerCommandId, boundsOf, buildHighlightTargets, buildModel, canConnect, capFlags, capKeys, captionForEntry, captureElementScroll, clampToDisk, clampZoom, clearHighlights, collapsedOffset, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, collectTags, combineSelection, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeSunburstLayout, computeTreemapLayout, connectContext, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createNotificationManager, createPillRenderer, createScrollHoverGuard, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, cycleBlockedNodes, decomposeViewIsometry, defaultGroupLabel, defaultSide, defaultSunburstValueAccessor, distribute, dropTargetFor, edgeId, edgeMidpoint, edgePath, edgeShape, ensurePort, euclideanRadiusForHyperbolicDistance, extendFromSide, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleKeyPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findProximityConnection, findSnapTarget, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, findTreemapNode, findTreemapPath, findValidWire, fitBounds, fitRects, flagsFromRecord, flagsToRecord, flowToScreen, forceMovement, forcePin, forcePositions, forceState, forceStep, formatDateInput, fromEdges, geodesicInterpolate, geodesicPath, geodesicSegment, gestureOf, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hasWire, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, inDegreeOf, inEasyConnectZone, incomingEdge, incomingEdges, init, insertBeside, invertIsometry, isDragging, isEditableTarget, isHyperbolicDescendantId, isMultiMode, isNodeShape, isPartialKey, isResizeHandle, isSplit, isStack, isSunburstAncestorId, isViewStateful, keyForElement, keysAsFlags, keysToArray, listItemFadeKeyframes, listSearchStyles, marqueeStyle, measureNode, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, nodeGraphStyles, nodesInRect, norm, normalise, normaliseConnection, normaliseValue, normalize, onUserScrollIntent, outDegreeOf, panBy, panelGapIndex, parseColourScaleAttr, parseDateInput, parseLayout, parsePortId, partitionByGroup, partitionFlags, partitionKeys, pickStartPort, poincareDistance, pointerOverAnyHost, polylineMidpoint, polylinePath, polylineShape, portId, prefersReducedMotion, preserveRestoreWeights, proximityFactor, pruneDraggedDescendants, readBaseColour, rectFromPoints, rectGap, rectsIntersect, registerFontIcon, registerIcon, registerListSearchCommands, removeNode, removeNodes, removePanelFromStack, removeWire, renderWires, resizeRect, resolveConnection, resolveCssVars, resolveGrid, resolveGroupKey, resolveIcicleKeyPath, resolveLeafPath, resolveTagFlags, resolveTracks, restoreElementScroll, rotationIsometry, sameKeySet, sameTagKeys, sameTags, sanitizeFlowSpeed, screenToFlow, scrollToOffset, selectionAfterEdgeClick, selectionAfterNodePress, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, settled, shapeSpec, smoothStep, snapshotNonEmptyStacks, startListItemOutAnimation, stepPoints, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tagPartTokens, tagsAttribute, tickledItemStyles, tickledStyles, timelineStyles, toBase, toEdges, toGroupKey, toNodeGraph, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, typesCompatible, viewIsometry, walk, wantsMarquee, withEntry, withWireFlow, withoutFlag, wrapRoot, zoomAt };