@nonoun/native-ui 0.2.8 → 0.2.10

package/dist/kernel.js

@@ -1,16 +1,16 @@
-import { n as e, t } from "./uid.js";
-import { i as n, n as r, r as i, t as a } from "./define.js";
+import { Gt as e, It as t, Kt as n, Wt as r, qt as i } from "./components.js";
+import { G as a } from "./core.js";
 var o = class {
 	#e = /* @__PURE__ */ new Map();
 	#t = [];
 	#n = [];
-	#r = n(null);
-	#i = n(!1);
-	#a = n(null);
+	#r = i(null);
+	#i = i(!1);
+	#a = i(null);
 	#o = 0;
-	lastCommand = i(() => this.#r.value);
-	dispatching = i(() => this.#i.value);
-	errors = i(() => this.#a.value);
+	lastCommand = n(() => this.#r.value);
+	dispatching = n(() => this.#i.value);
+	errors = n(() => this.#a.value);
 	on(e, t) {
 		if (typeof e == "string") {
 			let n = e, r = this.#e.get(n);
@@ -77,13 +77,13 @@ function s() {
 	return new o();
 }
 var c = class {
-	#e = n([]);
-	#t = n([]);
+	#e = i([]);
+	#t = i([]);
 	#n = 100;
-	undoStack = i(() => this.#e.value);
-	redoStack = i(() => this.#t.value);
-	canUndo = i(() => this.#e.value.length > 0);
-	canRedo = i(() => this.#t.value.length > 0);
+	undoStack = n(() => this.#e.value);
+	redoStack = n(() => this.#t.value);
+	canUndo = n(() => this.#e.value.length > 0);
+	canRedo = n(() => this.#t.value.length > 0);
 	push(e) {
 		e.meta?.undoType && r(() => {
 			let t = [...this.#e.value, e];
@@ -132,11 +132,11 @@ function l(e) {
 	return e !== void 0 && t.setMaxSize(e), t;
 }
 var u = 1e3, d = 10, f = class {
-	#e = n([]);
+	#e = i([]);
 	#t = !1;
 	#n = /* @__PURE__ */ new Map();
-	stack = i(() => this.#e.value);
-	topOverlay = i(() => {
+	stack = n(() => this.#e.value);
+	topOverlay = n(() => {
 		let e = this.#e.value;
 		return e.length > 0 ? e[e.length - 1] : null;
 	});
@@ -214,9 +214,9 @@ function p() {
 }
 var m = 0, h = class {
 	#e = [];
-	#t = n(["global"]);
+	#t = i(["global"]);
 	#n = !1;
-	activeScope = i(() => {
+	activeScope = n(() => {
 		let e = this.#t.value;
 		return e[e.length - 1];
 	});
@@ -398,10 +398,10 @@ function se(e) {
 	return new oe(e);
 }
 var ce = class {
-	#e = n([]);
+	#e = i([]);
 	#t = 1e3;
-	entries = i(() => this.#e.value);
-	size = i(() => this.#e.value.length);
+	entries = n(() => this.#e.value);
+	size = n(() => this.#e.value.length);
 	log(e) {
 		let n = Object.freeze({
 			id: t("log"),
@@ -463,9 +463,9 @@ function le(e) {
 	return e !== void 0 && t.setMaxSize(e), t;
 }
 var v = class {
-	#e = n([]);
+	#e = i([]);
 	#t = 500;
-	samples = i(() => this.#e.value);
+	samples = n(() => this.#e.value);
 	measure(e, t) {
 		let n = performance.now();
 		try {
@@ -522,31 +522,31 @@ function pe(e) {
 var y = class {
 	#e = /* @__PURE__ */ new Map();
 	#t = /* @__PURE__ */ new Map();
-	#n = n(!1);
-	#r = n(null);
+	#n = i(!1);
+	#r = i(null);
 	#i = 0;
-	loading = i(() => this.#n.value);
-	error = i(() => this.#r.value);
+	loading = n(() => this.#n.value);
+	error = n(() => this.#r.value);
 	query(e) {
 		let t = pe(e), r = e.cacheTtl ?? 0, a = this.#e.get(t);
-		if (a && r > 0 && Date.now() - a.entry.timestamp < r) return i(() => a.signal.value);
+		if (a && r > 0 && Date.now() - a.entry.timestamp < r) return n(() => a.signal.value);
 		let o = a;
 		return o || (o = {
 			entry: {
 				data: null,
 				timestamp: 0
 			},
-			signal: n(null)
-		}, this.#e.set(t, o)), this.#a(e, t), i(() => o.signal.value);
+			signal: i(null)
+		}, this.#e.set(t, o)), this.#a(e, t), n(() => o.signal.value);
 	}
 	async mutate(e, t) {
-		let i, a;
-		if (t) if (a = this.#e.get(t.key), i = a?.signal.peek() ?? null, a) a.signal.value = t.value, a.entry = Object.freeze({
+		let n, a;
+		if (t) if (a = this.#e.get(t.key), n = a?.signal.peek() ?? null, a) a.signal.value = t.value, a.entry = Object.freeze({
 			data: t.value,
 			timestamp: Date.now()
 		});
 		else {
-			let e = n(t.value);
+			let e = i(t.value);
 			a = {
 				entry: Object.freeze({
 					data: t.value,
@@ -556,29 +556,29 @@ var y = class {
 			}, this.#e.set(t.key, a);
 		}
 		try {
-			let i = await this.#s(e), a = pe(e);
+			let n = await this.#s(e), a = pe(e);
 			return r(() => {
 				let e = Object.freeze({
-					data: i,
+					data: n,
 					timestamp: Date.now()
 				}), r = this.#e.get(a);
-				if (r ? (r.signal.value = i, r.entry = e) : this.#e.set(a, {
+				if (r ? (r.signal.value = n, r.entry = e) : this.#e.set(a, {
 					entry: e,
-					signal: n(i)
+					signal: i(n)
 				}), t && t.key !== a) {
-					let n = this.#e.get(t.key);
-					n && (n.signal.value = i, n.entry = e);
+					let r = this.#e.get(t.key);
+					r && (r.signal.value = n, r.entry = e);
 				}
-			}), i;
+			}), n;
 		} catch (e) {
 			t && a && r(() => {
-				a.signal.value = i, a.entry = Object.freeze({
-					data: i,
+				a.signal.value = n, a.entry = Object.freeze({
+					data: n,
 					timestamp: Date.now()
 				});
 			});
-			let n = e instanceof Error ? e : Error(String(e));
-			throw this.#r.value = n, n;
+			let i = e instanceof Error ? e : Error(String(e));
+			throw this.#r.value = i, i;
 		}
 	}
 	invalidate(e) {
@@ -611,15 +611,15 @@ var y = class {
 	async #a(e, t) {
 		this.#c();
 		try {
-			let i = await this.#o(e);
+			let n = await this.#o(e);
 			r(() => {
 				let e = Object.freeze({
-					data: i,
+					data: n,
 					timestamp: Date.now()
 				}), r = this.#e.get(t);
-				r ? (r.signal.value = i, r.entry = e) : this.#e.set(t, {
+				r ? (r.signal.value = n, r.entry = e) : this.#e.set(t, {
 					entry: e,
-					signal: n(i)
+					signal: i(n)
 				}), this.#r.value = null;
 			});
 		} catch (e) {
@@ -1066,15 +1066,15 @@ function E(e, t) {
 	return !1;
 }
 var D = class {
-	#e = n([]);
-	#t = n([]);
+	#e = i([]);
+	#t = i([]);
 	#n = /* @__PURE__ */ new Map();
-	#r = n(null);
-	#i = n(0);
-	capabilities = i(() => this.#e.value);
-	rules = i(() => this.#t.value);
-	lastDecision = i(() => this.#r.value);
-	deniedCount = i(() => this.#i.value);
+	#r = i(null);
+	#i = i(0);
+	capabilities = n(() => this.#e.value);
+	rules = n(() => this.#t.value);
+	lastDecision = n(() => this.#r.value);
+	deniedCount = n(() => this.#i.value);
 	grant(e) {
 		let n = t("cap"), r = Object.freeze({
 			id: n,
@@ -1759,48 +1759,48 @@ var L = class {
 	#t;
 	#n;
 	#r = /* @__PURE__ */ new Map();
-	#i = n(0);
-	surfaceCount = i(() => this.#i.value);
+	#i = i(0);
+	surfaceCount = n(() => this.#i.value);
 	constructor(e, t, n) {
 		this.#e = e, this.#t = t, this.#n = n ?? null;
 	}
 	handleMessage(e, t) {
 		Ye(e) ? this.#a(e, t) : Xe(e) ? this.#o(e, t) : Ze(e) ? this.#l(e) : Qe(e) && this.#u(e);
 	}
-	#a(e, r) {
-		let { surfaceId: i, catalogId: a, theme: o } = e.createSurface, s = this.#r.get(i);
+	#a(e, n) {
+		let { surfaceId: r, catalogId: a, theme: o } = e.createSurface, s = this.#r.get(r);
 		if (s) {
 			s.catalogId = a, s.theme = o;
 			return;
 		}
 		let c = {
-			surfaceId: i,
+			surfaceId: r,
 			planId: t("a2ui-plan"),
 			catalogId: a,
 			theme: o,
-			container: r ?? document.createElement("div"),
+			container: n ?? document.createElement("div"),
 			components: [],
-			dataModel: n({}),
+			dataModel: i({}),
 			bindings: /* @__PURE__ */ new Map(),
 			bindingDisposers: [],
 			actionDisposer: null,
 			rendered: !1
 		};
-		this.#r.set(i, c), this.#i.value = this.#r.size;
+		this.#r.set(r, c), this.#i.value = this.#r.size;
 	}
-	#o(e, r) {
-		let { surfaceId: i, components: a } = e.updateComponents, o = this.#r.get(i);
-		o ? r && (o.container = r) : (o = {
-			surfaceId: i,
+	#o(e, n) {
+		let { surfaceId: r, components: a } = e.updateComponents, o = this.#r.get(r);
+		o ? n && (o.container = n) : (o = {
+			surfaceId: r,
 			planId: t("a2ui-plan"),
-			container: r ?? document.createElement("div"),
+			container: n ?? document.createElement("div"),
 			components: [],
-			dataModel: n({}),
+			dataModel: i({}),
 			bindings: /* @__PURE__ */ new Map(),
 			bindingDisposers: [],
 			actionDisposer: null,
 			rendered: !1
-		}, this.#r.set(i, o), this.#i.value = this.#r.size), o.rendered ? (this.#c(o, a), o.components = [...a]) : (o.components = [...a], this.#s(o)), o.rendered && this.#n?.(o.surfaceId, o.container);
+		}, this.#r.set(r, o), this.#i.value = this.#r.size), o.rendered ? (this.#c(o, a), o.components = [...a]) : (o.components = [...a], this.#s(o)), o.rendered && this.#n?.(o.surfaceId, o.container);
 	}
 	#s(e) {
 		let t = P(e.components, { surfaceId: e.surfaceId });
@@ -2122,10 +2122,10 @@ var Et = class {
 	perf;
 	data;
 	policy;
-	#e = n(/* @__PURE__ */ new Map());
+	#e = i(/* @__PURE__ */ new Map());
 	#t;
 	#n = null;
-	registry = i(() => this.#e.value);
+	registry = n(() => this.#e.value);
 	/** Lazy-initialized A2UI protocol adapter. Only created on first access. */
 	get a2ui() {
 		return this.#n ||= new R(this), this.#n;
@@ -2187,7 +2187,7 @@ var kt = 200, At = class e {
 	history;
 	running;
 	constructor(e, t) {
-		this.#e = e, this.#t = t, this.#n = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#c(e.states, void 0), this.#i = n(e.initial), this.#a = n(e.context ? Object.freeze({ ...e.context }) : Object.freeze({})), this.#o = n(Object.freeze([])), this.#s = n(!1), this.currentState = i(() => this.#i.value), this.context = i(() => this.#a.value), this.history = i(() => this.#o.value), this.running = i(() => this.#s.value);
+		this.#e = e, this.#t = t, this.#n = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#c(e.states, void 0), this.#i = i(e.initial), this.#a = i(e.context ? Object.freeze({ ...e.context }) : Object.freeze({})), this.#o = i(Object.freeze([])), this.#s = i(!1), this.currentState = n(() => this.#i.value), this.context = n(() => this.#a.value), this.history = n(() => this.#o.value), this.running = n(() => this.#s.value);
 	}
 	#c(e, t) {
 		for (let n of e) this.#n.set(n.id, n), t !== void 0 && this.#r.set(n.id, t), n.children && this.#c(n.children, n.id);
@@ -2451,10 +2451,10 @@ function zt(e) {
 }
 var Bt = class {
 	#e;
-	#t = n([]);
+	#t = i([]);
 	#n = /* @__PURE__ */ new Map();
 	#r = /* @__PURE__ */ new Map();
-	activeBindings = i(() => this.#t.value);
+	activeBindings = n(() => this.#t.value);
 	constructor(e) {
 		this.#e = e;
 	}

package/dist/native-ui-lean.css

@@ -1374,21 +1374,6 @@
 
 
 
-  /* ── Popover Anchor Positioning ──
-     Shared anchor-to-trigger positioning for dropdown popovers.
-     Coordinators (select, combobox) use this for their popover listbox. */
-
-  :where(ui-select) > :where(ui-listbox[popover]),
-  :where(ui-combobox) > :where(ui-listbox[popover]) {
-    position: fixed;
-    position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-block;
-    margin: var(--ui-popover-gap) 0 0;
-    min-width: anchor-size(inline);
-    max-height: var(--ui-popover-max-height);
-    overflow-y: auto;
-  }
-
   /* ── Container-Level Disabled ──
      Containers that disable all children use aria-disabled="true".
      Disabled colors propagate via inheritance — children inherit the muted text.
@@ -1510,6 +1495,7 @@
     /* Popover (select / combobox / command) */
     --ui-popover-max-height: calc(100dvh - 2rem);
     --ui-popover-gap: 0.25rem;
+    --ui-popover-viewport-margin: 0.5rem;
 
     /* Drawer */
     --ui-drawer-width: 24rem;
@@ -3218,6 +3204,23 @@
     cursor: text;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-combobox) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -3878,6 +3881,39 @@
     display: none;
   }
 
+  /* ── Popover Animation ──
+     WHY: Shared entry/exit transition for all popover listboxes.
+     Context CSS overrides --_popover-origin and --_popover-from
+     to match the popover's anchor direction (e.g. sidebar flyouts
+     open to the right → rotateY instead of rotateX). */
+
+  :where(ui-listbox[popover]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transform-origin: var(--_popover-origin);
+    opacity: 0;
+    transform: var(--_popover-from);
+
+    transition:
+      opacity var(--_duration) var(--_easing),
+      transform var(--_duration) var(--_easing),
+      display var(--_duration) var(--_easing) allow-discrete,
+      overlay var(--_duration) var(--_easing) allow-discrete;
+  }
+
+  :where(ui-listbox[popover]):popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    :where(ui-listbox[popover]):popover-open {
+      opacity: 0;
+      transform: var(--_popover-from);
+    }
+  }
+
   /* ── Option / Command Item Base ── */
 
   :where(ui-option, ui-command-item, [role="option"]) {
@@ -4258,10 +4294,14 @@
      instead of expanding the <details>. Same pattern as sidebar-trigger menus. */
 
   :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --nav-flyout-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -4272,6 +4312,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --nav-flyout-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Nav components own their own collapsed behavior via @container.
      The sidebar aside declares container-name: sidebar. When it shrinks
@@ -4315,6 +4359,14 @@
       font-size: var(--_font-size, 1rem);
     }
 
+    /* WHY: In collapsed mode the group is a small icon — centering
+       the flyout vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
+    }
+
     /* Collapse inter-group spacing in icon rail. */
     :where(ui-nav-group) + :where(ui-nav-group) {
       margin-block-start: 0;
@@ -4548,6 +4600,8 @@
     min-width: 0;
     align-items: center;
     position: relative;
+    /* WHY: Isolate internal z-index (thumb z-index: 1) from parent stacking context */
+    isolation: isolate;
 
     min-height: var(--_track-height);
 
@@ -4829,6 +4883,23 @@
     display: contents;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-select) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -5955,7 +6026,7 @@
     /* Default placement: above the anchor */
     position-area: block-start;
     position-try-fallbacks: flip-block, flip-inline;
-    margin: 0;
+    margin: var(--ui-popover-viewport-margin);
 
     max-width: var(--ui-tooltip-max-width);
     padding-block: calc(var(--_space) * 1.5);
@@ -5977,8 +6048,12 @@
     inset: unset;
     overflow: visible;
 
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
+
+    transform-origin: var(--_popover-origin);
     opacity: 0;
-    transform: scale(0.96);
+    transform: var(--_popover-from);
     transition:
       opacity var(--_duration) var(--_easing),
       transform var(--_duration) var(--_easing),
@@ -5990,35 +6065,43 @@
 
   :where(ui-tooltip[popover]):popover-open {
     opacity: 1;
-    transform: scale(1);
+    transform: none;
   }
 
   /* Starting style for entry animation */
   @starting-style {
     :where(ui-tooltip[popover]):popover-open {
       opacity: 0;
-      transform: scale(0.96);
+      transform: var(--_popover-from);
     }
   }
 
   /* ── Placement Variants ── */
 
   :where(ui-tooltip[placement="top"]) {
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
     position-area: block-start;
     margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-10deg);
     position-area: block-end;
     margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
+    --_popover-origin: right center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(-10deg);
     position-area: inline-start;
     margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(10deg);
     position-area: inline-end;
     margin-inline-start: calc(var(--_space) * 2);
   }
@@ -7007,10 +7090,14 @@
      Flip: bottom-aligned, grows upward (span-block-start). */
 
   :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --sidebar-item-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -7021,6 +7108,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --sidebar-item-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Each component owns its own collapsed behavior via @container.
      The aside is the container (container-name: sidebar). When it shrinks
@@ -7061,6 +7152,14 @@
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
       display: none;
     }
+
+    /* WHY: In collapsed mode the sidebar item is a small icon — centering
+       the popover vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
+    }
   }
 
 }