ranui 0.2.1-alpha.1 → 0.2.1-alpha.3

package/docs/BUILDER.md

@@ -4,6 +4,13 @@
 SwiftUI/Solid-style fine-grained reactivity. No virtual DOM, no re-render of a
 whole tree — a signal change updates only the exact node bound to it.
 
+> **Principle: build once, update in place.** A view function runs once; state
+> changes flow through fine-grained bindings, never by re-running the view. Pick
+> the primitive that matches the shape — value → getter binding; conditional →
+> [`Show`](#conditionals--show) / [`Switch`](#multi-branch--switch--match); list →
+> [`For`](#keyed-lists--for) / [`Index`](#index-lists--index). A raw getter child
+> is the coarse fallback (rebuilds its whole region on any read).
+
 ```ts
 import {
   View,
@@ -58,8 +65,9 @@ Factories: `View(tag)`, `Div`, `Span`, `Slot`, `ButtonBuilder`, `InputBuilder`,
 | Refs/shadow    | `ref(holder)`, `shadow(opts?)` → `ShadowBuilder`                                                            |
 | Terminal       | `build()`, `serialize()` (SSR HTML string)                                                                  |
 
-`children()` accepts elements, strings, other `ElementBuilder`s, arrays, and
-`null`/`undefined` (skipped) — nest freely:
+`children()` accepts elements, strings, other `ElementBuilder`s, arrays,
+`null`/`undefined` (skipped), **and getters `() => …`** (reactive regions, see
+[Reactive children](#reactive-children)) — nest freely:
 
 ```ts
 Ul()
@@ -79,6 +87,21 @@ Ul()
 .delegate(manager, selector, type, handler) // event delegation on a container
 ```
 
+### Refs (incl. imperative custom-element methods)
+
+`createRef<T>()` + `.ref(holder)` capture the built element. For a custom
+element with imperative methods, **type the ref with the component's element
+class** (each component exports it) — then its methods are typed, no cast:
+
+```ts
+import { Popover } from 'ranui'; // the element class
+import { View, createRef } from 'ranui/builder';
+
+const ref = createRef<Popover>();
+View<Popover>('r-popover').attr('trigger', 'click').ref(ref).children(/* … */).build();
+ref.current?.closePopover(); // typed method, no `as` cast
+```
+
 ---
 
 ## 2. Reactivity
@@ -133,6 +156,136 @@ Div()
   .build();
 ```
 
+### Reactive children
+
+`children()` / `replaceChildren()` also take a **getter** as any argument. The
+getter marks a live region: it re-runs when a signal it reads changes, replacing
+the region — no `createRef` + `createEffect` + `replaceChildren` boilerplate.
+Return a node, a `null` (conditional), or an array (list). Static siblings around
+the getter keep their position.
+
+> **Semantics — this is a full rebuild, not a keyed diff.** On each change the
+> whole region is torn down and re-created; there is no per-item keying, and it
+> re-runs on **every** change the getter reads — even one that doesn't alter the
+> result. It is the coarse escape hatch. Prefer the fine-grained primitives:
+> [`Show`](#conditionals--show) for conditionals (rebuilds only when the branch
+> flips) and [`For`](#keyed-lists--for) for lists (reuses nodes by key). Reach for
+> a raw getter only for content whose shape genuinely changes on every update.
+
+### Conditionals — `Show`
+
+`Show` is a **fine-grained** conditional: it rebuilds a branch only when the
+_truthiness_ of `when` flips, not on every change `when` reads. Content inside a
+branch updates through its own bindings — the branch is built once. (A raw getter
+child, by contrast, tears down and rebuilds on every dependency tick.)
+
+```ts
+import { Show } from 'ranui/builder';
+
+Div().children(
+  Show({
+    when: () => user(), // reads a signal
+    children: (u) => Span().text(() => u().name), // built once; text updates in place
+    fallback: () => Span().text('Signed out'), // optional
+  }),
+);
+```
+
+`children` gets an accessor to the narrowed truthy value — read it inside a
+binding so it updates without rebuilding. `Show` returns a getter, so it slots
+into `children()` anywhere.
+
+### Multi-branch — `Switch` / `Match`
+
+`Switch` is the n-way `Show`: it renders the **first** `Match` whose `when` is
+truthy (else `fallback`), and is equally fine-grained — only the _index_ of the
+winning branch is memoized, so it rebuilds only when the active branch changes.
+Evaluation short-circuits at the first match.
+
+```ts
+import { Switch, Match } from 'ranui/builder';
+
+Div().children(
+  Switch({
+    fallback: () => Span().text('idle'),
+    children: [
+      Match({ when: () => status() === 'loading', children: () => Spinner() }),
+      Match({ when: () => error(), children: (e) => ErrorView(e) }), // e: accessor to the truthy value
+    ],
+  }),
+);
+```
+
+```ts
+// Conditional — toggles a node in/out between static siblings
+Div().children(Header().text('H'), () => (open() ? Div().class('panel').text('body') : null), Footer().text('F'));
+
+// List — reconciles as the array changes
+Ul().children(() => rows().map((r) => Li().text(r.title)));
+```
+
+On **SSR** a getter is evaluated once (static snapshot); reactivity is a
+client-only concern. Like all bindings, reactive children must be built inside a
+`createRoot` so their effects are owned and disposed with the page (see §3 Ownership).
+
+### Keyed lists — `For`
+
+For lists that add/remove/reorder, `For` matches items by `key` and **reuses
+their DOM nodes** — only changed items touch the DOM, so focus, scroll, input
+values and transitions inside surviving rows are preserved (a plain getter child
+would rebuild all of them). Pass the handle straight to `children()`.
+
+```ts
+import { For } from 'ranui/builder';
+
+const [rows, setRows] = signal([{ id: 1, title: 'a' }]);
+
+Ul().children(
+  For({
+    each: () => rows(), // reactive source array
+    key: (r) => r.id, // stable, UNIQUE identity per item
+    render: (r, index) => Li().text(() => `${index()}. ${r.title}`),
+  }),
+);
+```
+
+- `key` **must be unique** — it is how a node is matched to its item across
+  updates. A duplicate key is ignored (only the first item with it renders) and
+  warned in dev. (Don't use the array index as the key — that defeats reuse on
+  reorder.)
+- `each` reads a signal, so update it with a **new array** (`setRows([...])`).
+  Mutating the same array in place and re-setting it is skipped (`Object.is`
+  equality), and the list won't update.
+- `render` runs **once per item**, not on every list change. Drive per-row
+  updates with signals (e.g. `.text(() => …)`); `index` is a **getter** so it
+  stays correct after reorders.
+- Removing an item disposes that row's scope (its effects/cleanups). The whole
+  list is disposed with its owning `createRoot`.
+- **SSR**: rendered once as a static snapshot (no reconciliation).
+
+### Index lists — `Index`
+
+`Index` is the position-keyed counterpart to `For`: the node at index `i` is
+reused across updates and its **item is a signal** — when the value at that
+position changes, it updates in place (the node is not rebuilt); nodes never
+move. Use it when position is the identity (primitive arrays, fixed rows); use
+`For` when items have a stable id and can reorder.
+
+```ts
+import { Index } from 'ranui/builder';
+
+Ul().children(
+  Index({
+    each: () => nums(),
+    render: (n, i) => Li().text(() => `${i}: ${n()}`), // n is an accessor; i is a fixed number
+  }),
+);
+```
+
+Rule of thumb: **`Show`/`Switch` for conditionals; `For` (keyed by id) or `Index`
+(keyed by position) for lists; a raw getter child only for content that changes
+shape on every update.**
+
 A getter binding creates an effect **owned by the current scope** (see below), so
 it is cleaned up automatically when that scope is disposed. Reactivity applies to
 the single-value forms — `style(prop, getter)`, not the `style({...})` /

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.2.1-alpha.1",
+  "version": "0.2.1-alpha.3",
   "description": "A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -205,6 +205,11 @@
       "import": "./dist/math.js",
       "require": "./dist/index.cjs"
     },
+    "./mermaid": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mermaid.js",
+      "require": "./dist/index.cjs"
+    },
     "./checkbox": {
       "types": "./dist/index.d.ts",
       "import": "./dist/checkbox.js",
@@ -282,6 +287,7 @@
     "vitest": "^4.1.10"
   },
   "dependencies": {
+    "mermaid": "^11",
     "ranuts": "^0.2.0-alpha.1"
   },
   "scripts": {

package/dist/button-BfYw0fes.js

@@ -1,117 +0,0 @@
-import { _ as i, a as b, n as l, o as d, s as a, t as h } from "./utils-DBfrRFoE.js";
-import { t as v } from "./events-C59wGdni.js";
-import { _ as u, i as s, p as f } from "./factory-DCrO37si.js";
-import { a as g, n as p } from "./ssr-DSGwPtEd.js";
-var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, opacity var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));background:var(--ran-btn-contain-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-contain-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #006bff));color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-primary-active, #005ff2));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-primary-active, #005ff2))}:host([type="contrast"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-contrast-bg, #171717));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-contrast-bg, #171717));color:var(--ran-btn-content-color, var(--ran-color-contrast-text, #fff))}:host([type="contrast"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, var(--ran-color-contrast-text, #fff) 10%, transparent 10.01%))}:host([type="contrast"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-contrast-bg-active, #4d4d4d));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-contrast-bg-active, #4d4d4d))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-border-hover, #c9c9c9));color:var(--ran-btn-content-hover-color, var(--ran-color-text, #171717))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-primary-hover, #0059ec));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary-hover, #0059ec));color:var(--ran-btn-content-hover-color, #fff)}:host([type="contrast"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-contrast-bg-hover, #383838));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-contrast-bg-hover, #383838));color:var(--ran-btn-content-hover-color, var(--ran-color-contrast-text, #fff))}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,var(--ran-gray-alpha-400, #00000014) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-image-source:var(--ran-btn-content-border-image-source, none);border-image-slice:var(--ran-btn-content-border-image-slice, 8);border-image-width:var(--ran-btn-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-content-border-color, var(--ran-color-border, #eaeaea));color:var(--ran-btn-content-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);font-family:var(--ran-btn-content-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, 2px)}', y = class extends p {
-  _btn;
-  _btnContent;
-  _iconElement;
-  _slot;
-  _shadowDom;
-  _events = new v();
-  debounceTimeId;
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "icon",
-      "effect",
-      "iconSize",
-      "type",
-      "sheet"
-    ];
-  }
-  constructor() {
-    super(), this._shadowDom = l(this, m);
-    const t = h(this._shadowDom, ".ran-btn", () => s().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(s().class("ran-btn-content").attr("part", "content").children(f().class("slot"))).build());
-    this._btn = t, this._btnContent = t.querySelector(".ran-btn-content"), this._slot = t.querySelector("slot");
-  }
-  get sheet() {
-    return this.getAttribute("sheet") || "";
-  }
-  set sheet(t) {
-    this.setAttribute("sheet", t || ""), this.handlerExternalCss();
-  }
-  get disabled() {
-    return a(this);
-  }
-  set disabled(t) {
-    !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
-  }
-  get iconSize() {
-    return this.getAttribute("iconSize") || "";
-  }
-  set iconSize(t) {
-    !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
-  }
-  get icon() {
-    return this.getAttribute("icon") || "";
-  }
-  set icon(t) {
-    !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
-  }
-  get effect() {
-    return this.getAttribute("effect") || "";
-  }
-  set effect(t) {
-    d.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
-  }
-  get type() {
-    return this.getAttribute("type") || "";
-  }
-  set type(t) {
-    t ? this.setAttribute("type", t) : this.removeAttribute("type");
-  }
-  setIcon = () => {
-    if (typeof document > "u" || !this._slot) return;
-    const t = this.icon;
-    if (!t) {
-      this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
-      return;
-    }
-    if (this._iconElement) this._iconElement.setAttribute("name", t);
-    else {
-      let e = this._shadowDom.querySelector("r-icon");
-      e || (e = u("r-icon").attr("color", "currentColor").class("icon").build(), this._slot.insertAdjacentElement("beforebegin", e)), this._iconElement = e, this._iconElement.setAttribute("name", t);
-    }
-    const { width: n, height: r } = this._slot.getBoundingClientRect(), o = Math.min(n, r) || 16, c = this.iconSize || `${o > 5 ? o - 5 : o}`;
-    this._iconElement.setAttribute("size", String(c));
-  };
-  mousedown = (t) => {
-    if (i() === "pc" && !this.disabled) {
-      this.debounceMouseEvent();
-      const { left: n, top: r } = this.getBoundingClientRect();
-      this._btn.style.setProperty("--ran-x", `${t.clientX - n}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - r}px`);
-    }
-  };
-  mouseup = () => {
-    i() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
-      this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
-    }, 600)));
-  };
-  keydown = (t) => {
-    a(this) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
-  };
-  debounceMouseEvent = () => {
-    this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
-  };
-  handlerExternalCss = () => {
-    b(this, this._shadowDom, "sheet", null, this.sheet);
-  };
-  syncA11yState = () => {
-    const t = a(this);
-    this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
-  };
-  connectedCallback() {
-    this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
-  }
-  disconnectedCallback() {
-    this.debounceMouseEvent(), this._events.abort();
-  }
-  attributeChangedCallback(t, n, r) {
-    n !== r && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
-  }
-};
-g("r-button", y);
-export {
-  y as t
-};

package/dist/factory-DCrO37si.js

@@ -1,334 +0,0 @@
-import { c as u, n as H } from "./mocks-CMGoftIc.js";
-var f = 0, C = 1, d = 2, o = null, i = null, c = 0, h = /* @__PURE__ */ new Set(), v = !1;
-function T(e, t) {
-  const r = t?.equals ?? Object.is, s = {
-    value: e,
-    observers: /* @__PURE__ */ new Set()
-  };
-  return [() => (m(s), s.value), (p) => {
-    const w = typeof p == "function" ? p(s.value) : p;
-    if (!r(s.value, w)) {
-      s.value = w;
-      for (const z of s.observers) b(z, d);
-      c === 0 && O();
-    }
-  }];
-}
-function j(e, t) {
-  const r = g(e, !1, t?.equals);
-  return E(r), () => (r.disposed || (y(r), m(r)), r.value);
-}
-function k(e) {
-  const t = g(e, !0);
-  return E(t), A(t), () => S(t);
-}
-function I(e) {
-  c++;
-  try {
-    e();
-  } finally {
-    c--, c === 0 && O();
-  }
-}
-function R(e) {
-  const t = o;
-  o = null;
-  try {
-    return e();
-  } finally {
-    o = t;
-  }
-}
-function M(e) {
-  const t = {
-    owned: [],
-    cleanups: [],
-    owner: i
-  }, r = i, s = o;
-  i = t, o = null;
-  try {
-    return e(() => q(t));
-  } finally {
-    i = r, o = s;
-  }
-}
-function $(e) {
-  i && i.cleanups.push(e);
-}
-function P() {
-  return i;
-}
-function V(e, t) {
-  const r = i, s = o;
-  i = e, o = null;
-  try {
-    return t();
-  } finally {
-    i = r, o = s;
-  }
-}
-function g(e, t, r) {
-  return {
-    fn: e,
-    sources: /* @__PURE__ */ new Set(),
-    isEffect: t,
-    running: !1,
-    disposed: !1,
-    state: d,
-    observers: /* @__PURE__ */ new Set(),
-    value: void 0,
-    equals: r ?? Object.is,
-    owned: [],
-    cleanups: [],
-    owner: i
-  };
-}
-function E(e) {
-  i && i.owned.push(e);
-}
-function m(e) {
-  o && (o.sources.add(e), e.observers.add(o));
-}
-function b(e, t) {
-  if (e.disposed || e.state >= t) return;
-  const r = e.state === f;
-  if (e.state = t, e.isEffect) h.add(e);
-  else if (r) for (const s of e.observers) b(s, C);
-}
-function O() {
-  if (!(c > 0 || v)) {
-    v = !0;
-    try {
-      for (; h.size > 0; ) {
-        const e = [...h];
-        h.clear();
-        for (const t of e) t.disposed || y(t);
-      }
-    } finally {
-      v = !1;
-    }
-  }
-}
-function y(e) {
-  if (!(e.disposed || e.state === f)) {
-    if (e.state === C)
-      for (const t of e.sources) "fn" in t && y(t);
-    e.state === d && A(e), e.state = f;
-  }
-}
-function A(e) {
-  if (e.running) throw new Error("ranui reactivity: cyclic dependency detected (a computation triggered itself).");
-  L(e);
-  const t = o, r = i;
-  o = e, i = e, e.running = !0, e.state = f;
-  try {
-    const s = e.fn();
-    if (e.isEffect)
-      typeof s == "function" && e.cleanups.push(s);
-    else {
-      const n = e.value;
-      if (e.value = s, e.observers.size > 0 && !e.equals(n, s)) for (const l of e.observers) b(l, d);
-    }
-  } finally {
-    e.running = !1, o = t, i = r;
-  }
-}
-function L(e) {
-  for (const t of e.owned) S(t);
-  e.owned.length = 0;
-  for (const t of e.cleanups) t();
-  e.cleanups.length = 0;
-  for (const t of e.sources) t.observers.delete(e);
-  e.sources.clear();
-}
-function S(e) {
-  e.disposed || (e.disposed = !0, L(e), e.observers.clear());
-}
-function q(e) {
-  for (const t of e.owned) S(t);
-  e.owned.length = 0;
-  for (const t of e.cleanups) t();
-  e.cleanups.length = 0;
-}
-var W = () => ({ current: null }), B = class N {
-  el;
-  constructor(t) {
-    this.el = u ? new H(t) : document.createElement(t);
-  }
-  id(t) {
-    return this.el.setAttribute("id", t), this;
-  }
-  bind(t, r) {
-    typeof t == "function" ? k(() => r(t())) : r(t);
-  }
-  class(t) {
-    return this.bind(t, (r) => {
-      u ? this.el.attributes.set("class", r) : this.el.className = r;
-    }), this;
-  }
-  addClass(...t) {
-    return t.forEach((r) => this.el.classList.add(r)), this;
-  }
-  removeClass(...t) {
-    return t.forEach((r) => this.el.classList.remove(r)), this;
-  }
-  attr(t, r) {
-    return this.bind(r, (s) => this.el.setAttribute(t, s)), this;
-  }
-  attrs(t) {
-    return Object.entries(t).forEach(([r, s]) => {
-      s != null && this.el.setAttribute(r, String(s));
-    }), this;
-  }
-  boolAttr(t, r, s = "") {
-    return this.bind(r, (n) => {
-      n ? this.el.setAttribute(t, s) : this.el.removeAttribute(t);
-    }), this;
-  }
-  part(t) {
-    return this.attr("part", t);
-  }
-  data(t, r) {
-    return this.attr(`data-${t}`, r);
-  }
-  style(t, r) {
-    return typeof t == "string" ? this.bind(r ?? "", (s) => this.el.style.setProperty(t, s)) : Object.entries(t).forEach(([s, n]) => this.el.style.setProperty(s, n)), this;
-  }
-  cssVar(t, r) {
-    const s = t.startsWith("--") ? t : `--${t}`;
-    return this.style(s, r);
-  }
-  aria(t, r) {
-    return this.attr(`aria-${t}`, r);
-  }
-  role(t) {
-    return this.attr("role", t);
-  }
-  tabIndex(t) {
-    return this.attr("tabindex", String(t));
-  }
-  label(t) {
-    return this.aria("label", t);
-  }
-  labelledBy(t) {
-    return this.aria("labelledby", t);
-  }
-  describedBy(t) {
-    return this.aria("describedby", t);
-  }
-  ariaHidden(t = !0) {
-    return this.aria("hidden", String(t));
-  }
-  on(t, r, s) {
-    return this.el.addEventListener(t, r, s), this;
-  }
-  listen(t, r, s, n) {
-    return t.on(this.el, r, s, n), this;
-  }
-  delegate(t, r, s, n, l) {
-    return t.delegate(this.el, r, s, n, l), this;
-  }
-  children(...t) {
-    const r = (s) => s.reduce((n, l) => Array.isArray(l) ? n.concat(r(l)) : n.concat(l), []);
-    return r(t).forEach((s) => {
-      s != null && (s instanceof N ? this.el.appendChild(s.build()) : typeof s == "string" ? u ? this.el.appendChild(s) : this.el.appendChild(document.createTextNode(s)) : this.el.appendChild(s));
-    }), this;
-  }
-  replaceChildren(...t) {
-    if (u) {
-      const r = this.el;
-      r.childrenList = [];
-    } else this.el.replaceChildren();
-    return this.children(...t);
-  }
-  text(t) {
-    return this.bind(t, (r) => {
-      this.el.textContent = r;
-    }), this;
-  }
-  ref(t) {
-    return t.current = this.el, this;
-  }
-  shadow(t = { mode: "closed" }) {
-    const r = this.el.attachShadow(t);
-    return new x(this.el, r, t);
-  }
-  build() {
-    return this.el;
-  }
-  serialize() {
-    if (u) return this.el.serialize();
-    const t = document.createElement("div");
-    return t.appendChild(this.el.cloneNode(!0)), t.innerHTML;
-  }
-}, x = class {
-  root;
-  hostEl;
-  options;
-  constructor(e, t, r) {
-    this.hostEl = e, this.root = t, this.options = r;
-  }
-  children(...e) {
-    const t = (r) => r.reduce((s, n) => Array.isArray(n) ? s.concat(t(n)) : s.concat(n), []);
-    return t(e).forEach((r) => {
-      r != null && (r instanceof B ? this.root.appendChild(r.build()) : typeof r == "string" ? u ? this.root.appendChild(r) : this.root.appendChild(document.createTextNode(r)) : this.root.appendChild(r));
-    }), this;
-  }
-  adoptSheet(...e) {
-    return this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, ...e], this;
-  }
-  css(e) {
-    if (u)
-      return this.root.adoptedStyleSheets.push(e), this;
-    if (typeof CSSStyleSheet < "u") try {
-      const r = new CSSStyleSheet();
-      return r.replaceSync(e), this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, r], this;
-    } catch {
-    }
-    const t = document.createElement("style");
-    return t.textContent = e, this.root.appendChild(t), this;
-  }
-  done() {
-    return {
-      host: this.hostEl,
-      shadow: this.root
-    };
-  }
-  serialize() {
-    return u ? this.root.serialize() : this.root.innerHTML;
-  }
-}, a = (e) => new B(e), F = () => a("div"), K = () => a("span"), U = () => a("slot"), Y = () => a("button"), G = () => a("input"), J = () => a("style"), Q = () => a("label"), X = () => a("ul"), Z = () => a("li"), _ = () => a("section"), tt = () => a("article"), et = () => a("nav"), rt = () => a("header"), st = () => a("footer"), nt = () => a("main"), it = (e = "open", t = !1) => {
-  const r = a("template");
-  return r.attr("shadowrootmode", e), t && r.attr("shadowrootdelegatesfocus", ""), r;
-};
-export {
-  k as C,
-  V as D,
-  $ as E,
-  T as O,
-  j as S,
-  P as T,
-  a as _,
-  st as a,
-  W as b,
-  Q as c,
-  et as d,
-  _ as f,
-  X as g,
-  J as h,
-  F as i,
-  R as k,
-  Z as l,
-  K as m,
-  Y as n,
-  rt as o,
-  U as p,
-  it as r,
-  G as s,
-  tt as t,
-  nt as u,
-  B as v,
-  M as w,
-  I as x,
-  x as y
-};