jq79 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,14 @@
+
 # jq79
 
-A mini reactive component library in a single file. Single-file components (template + `<script :setup>` + `<style>`), Svelte-style reactive scripts, fine-grained DOM updates via proxy-based dependency tracking — no compiler, no virtual DOM, no dependencies.
+<img src="assets/Component79.svg" alt="jq79 logo" width="100" align="right">
+
+[![npm](https://jgermade.github.io/jq79/badges/npm.svg)](https://www.npmjs.com/package/jq79)
+[![coverage](https://jgermade.github.io/jq79/badges/coverage.svg)](https://jgermade.github.io/jq79/coverage/)
+
+A mini reactive component library that ships as a single file. Svelte-style reactive scripts, fine-grained DOM updates via proxy-based dependency tracking
+
+> no compiler, no virtual DOM, no dependencies.
 
 ## Installation
 
@@ -14,6 +22,26 @@ npm install jq79
 import { Component79, $, $$ } from "jq79"
 ```
 
+### Vite
+
+With the bundled plugin, `.html` component files import as modules — no
+runtime fetch, with HMR in dev:
+
+```js
+// vite.config.js
+import { jq79 } from "jq79/vite"
+export default { plugins: [jq79()] }
+```
+
+```js
+import UserCard from "./UserCard.html"
+UserCard.mount("#app")
+```
+
+The plugin is a pure loader (nothing inside the component is transformed), so
+the same file keeps working from `public/` via `Component79.fetch` — see
+[the Vite plugin docs](docs/vite-plugin.md).
+
 ### CDN
 
 Once published to npm, the package is automatically served by every major CDN — no separate publishing step:
@@ -24,25 +52,28 @@ Once published to npm, the package is automatically served by every major CDN
   import { Component79 } from "https://esm.sh/jq79"
   // or: https://cdn.jsdelivr.net/npm/jq79/+esm
   // or: https://unpkg.com/jq79?module
+  // or, straight from this repo's GitHub Pages (latest release):
+  //     https://jgermade.github.io/jq79/jq79.js
 </script>
 
 <!-- or as a classic script exposing window.jq79 -->
 <script src="https://cdn.jsdelivr.net/npm/jq79/dist/jq79.global.js"></script>
+<!-- or: <script src="https://jgermade.github.io/jq79/jq79.global.js"></script> -->
 <script>
   const { Component79 } = jq79
 </script>
 ```
 
-Pin a version in production: `https://cdn.jsdelivr.net/npm/jq79@0.1.0/...`.
+Pin a version in production: `https://cdn.jsdelivr.net/npm/jq79@0.1.0/...` (the GitHub Pages copy always tracks the latest release).
 
-Or grab [`src/jq79.ts`](src/jq79.ts) directly — the whole library is one file.
+The source is small enough to read in a sitting: the core (parsing, rendering, components) lives in [`src/jq79.ts`](src/jq79.ts), with three leaf helpers — [`dom.ts`](src/dom.ts), [`reactive.ts`](src/reactive.ts) and [`transform.ts`](src/transform.ts). The published build is a single dependency-free file.
 
 ## Quick start
 
 ```js
 import { Component79 } from "jq79"
 
-const jq79 = new Component79(`
+const jq79 = new Component79(html`
   <script :setup>
     let firstName = null
     let lastName = null
@@ -68,274 +99,15 @@ jq79.mount("#app")
 
 When the fetch resolves, the assignments to `firstName`/`lastName` re-run the `$:` declaration, which flips the `:if` and renders the span — no manual wiring.
 
-## Components
-
-### Lifecycle
-
-```js
-const jq79 = new Component79(src)      // src: string, or { template, scripts, styles }
-
-jq79.on("submit", (e, payload) => {})  // subscribe to the component's $emit events
-   .off("submit", listener)           // unsubscribe
-
-jq79.mount(el, data)                   // render (reactive DOM, setup scripts, styles) + attach
-                                      // el: Element or selector string; data is optional
-
-jq79.detach()                          // detach, keeping state — mount(el) re-attaches, with
-                                      // any updates that happened while detached applied
-   .destroy()                         // dispose all effects and remove injected styles
-```
-
-- `mount(el, data?)` renders on the first mount, and re-renders fresh whenever `data` is passed. `mount(el)` on an already-rendered component just re-attaches, keeping its state — the `detach()`/`mount()` round trip. Styles go into `document.head`.
-- `mountShadow(el, data?)` instead attaches a shadow root to the target and injects content and styles there, so CSS stays scoped to the component.
-- `render(data)` / `renderShadow(data)` are also available standalone, for rendering while detached (effects keep the detached DOM up to date; a later `mount(el)` attaches it).
-- `jq79.data` is the live reactive store — mutate it from outside and the DOM follows.
-
-### Loading remote components
-
-```js
-const jq79 = await Component79.fetch("/components/user-card.html")
-jq79.mount("#app", { userId: 42 })
-```
-
-## Template syntax
-
-### Interpolation
-
-Any JS expression between `{{ }}`:
-
-```html
-<span>{{ user.name }}</span>
-<span>{{ price * quantity }} €</span>
-```
-
-### `:bind` — dynamic attributes
-
-Evaluates to an object; each entry becomes an attribute. `null`, `undefined` and `false` values remove the attribute.
-
-```html
-<button :bind="{ disabled: isSaving, title: tooltip }">Save</button>
-```
-
-### `:if` / `:elseif` / `:else` — conditionals
-
-Consecutive siblings form one chain; only the active branch is in the DOM.
-
-```html
-<div :if="score > 8">great</div>
-<div :elseif="score > 4">ok</div>
-<div :else>bad</div>
-```
-
-### `:each` / `:key` — lists
-
-```html
-<li :each="user in users" :key="user.id">{{ $index }}: {{ user.name }}</li>
-```
-
-The list is diffed by key: unchanged items keep their DOM (and state) when the array is reordered, filtered or extended. Without `:key`, position is used — fine for append-only lists, wasteful for reordering. `$index` is available inside each item.
-
-### `:with` — narrowed scope
-
-Evaluates to an object whose properties become directly addressable inside the element; anything else still resolves from the outer scope:
-
-```html
-<div :each="item in items">
-  <div>{{ item.name }}</div>
-  <div :with="item">
-    Another way to get: {{ name }}
-    Items total: {{ items.length }}
-  </div>
-</div>
-```
-
-- Applies to the element's own bindings (`:bind`, `@events`) and its whole subtree; object properties shadow same-named outer scope names.
-- Fully reactive: mutating a property of the object, or replacing the object itself (`user = other`), updates exactly what depends on it — the subtree is not rebuilt.
-- Assignments to names the object owns write through to it (`@click="name = 'x'"` inside `:with="user"` sets `user.name`, reactively).
-- If the expression isn't an object (`null`, still loading, …), names simply resolve from the outer scope.
-- Combines with `:each`/`:if` on the same element: those evaluate in the outer scope first, then `:with` wraps the subtree — so `:with="item"` on the `:each` element itself works.
-
-### `@event` — listeners
-
-```html
-<button @click="onClick">…</button>
-<form @submit.prevent="$event => onSubmit($event)">…</form>
-<button @click="count = count + 1">clicked {{ count }} times</button>
-```
-
-The attribute value is evaluated on every event with `$event` in scope; if it evaluates to a function, that function is called with the event. So all three styles work: a handler reference, an inline arrow, or an inline statement that mutates reactive data.
-
-Modifiers (chainable, e.g. `@click.stop.once`):
-
-| modifier   | effect                                   |
-| ---------- | ---------------------------------------- |
-| `.prevent` | `event.preventDefault()`                 |
-| `.stop`    | `event.stopPropagation()`                |
-| `.self`    | only fire when `event.target` is the element itself |
-| `.once`    | listener runs at most once               |
-| `.capture` | listen in the capture phase              |
-
-### Nested components
-
-A tag matching a **PascalCase scope variable** renders as a child component. Components reach the scope through render data, `:setup` props, or an `await import(...)` in the setup script:
-
-```html
-<script :setup="{ user, NestedComponent }">
-  const ImportedComponent = await import('/components/foobar.html')
-</script>
-
-<div>
-  <NestedComponent :user :title="'Hardcoded title'" />
-  <ImportedComponent :user="user" />
-</div>
-```
-
-```html
-<!-- /components/foobar.html -->
-<script :setup="{ user }"></script>
-<div>User: {{ user.firstName }}</div>
-```
-
-- Props: `:name="expr"` evaluates in the parent scope; `:name` alone is shorthand for `:name="name"`; plain attributes pass as literal strings.
-- Props are **live**: when a parent expression's dependencies change (deeply), the new value is written into the child's store.
-- HTML lowercases everything, so matching ignores case and dashes: `<NestedComponent>` and `<nested-component>` both resolve `NestedComponent`, and `:user-name` becomes the `userName` prop.
-- `await import('/x.html')` returns a `Component79` (non-`.html` URLs fall through to native `import()`). While the promise is pending nothing renders; the child appears when it resolves.
-- Each usage site gets its own instance (own store, effects and DOM); instances are destroyed with their parent. Identical `<style>` blocks are refcounted, so N instances inject one tag.
-- Self-closing tags work: jq79 expands `<MyComponent />` (and `<div />`) into explicit open+close pairs before HTML parsing, since the HTML parser would otherwise treat them as unclosed. Void elements (`<img />`, `<br />`) and `<script>`/`<style>` contents are left untouched.
-
-## Setup scripts
-
-`<script :setup>` blocks run against the component's reactive scope, Svelte-style:
-
-```html
-<script :setup="{ fname, lname }">
-  let count = 0                    // top-level let/var/const become reactive scope vars
-  const greeting = `Hi ${fname}`   // initialized once, visible to the template
-
-  $: doubled = count * 2           // re-runs whenever `count` changes
-
-  setInterval(() => { count++ }, 1000)   // assignments from callbacks work too
-</script>
-```
-
-- Top-level `let` / `var` / `const` declarations become properties of the reactive store (also reachable from outside via `jq79.data`).
-- `$: x = expr` is a reactive declaration: it re-runs whenever anything it reads changes.
-- Assignments — including from `.then()` callbacks, timers, and event handlers — go through the reactive proxy and update the DOM.
-- Globals (`fetch`, `console`, `Promise`, …) resolve normally; assignments to names you never declared stay on the component scope instead of leaking to `globalThis`.
-- The [DOM helpers](#dom-helpers) `$`, `$$` and `$create`, plus [`$reactive`](#reactive-data), are automatically available in every setup script — no import or declaration needed, same as `$emit` and `$mounted`. Like globals, they are shadowed by same-named scope properties.
-- `$emit(eventName, payload)` dispatches a native bubbling `CustomEvent` (with `payload` as `event.detail`) from the component's position in the DOM. Listen from a parent component with `@event-name` on any wrapping element, or with plain `addEventListener` on the mount target:
-
-```html
-<!-- child -->
-<script :setup>
-  const save = () => $emit("saved", { id: 42 })
-</script>
-<button @click="save">Save</button>
-
-<!-- parent -->
-<div @saved="lastSaved = $event.detail.id">
-  <ChildForm />
-</div>
-```
-
-  From JS, subscribe on the instance itself with `on(eventName, (event, payload) => …)` — `payload` is the same value as `event.detail`. `on`/`off` are chainable, can be called before mounting, and survive re-renders:
-
-```js
-new Component79(src)
-  .on("saved", (e, payload) => console.log(payload.id))
-  .on("cancelled", () => console.log("cancelled"))
-  .mount("#app")
-```
-
-  Events emitted before the component is mounted have no ancestors to bubble to, so no DOM listener hears them (`$emit` is meant for handlers and async code, not synchronous top-level setup) — but instance `on()` listeners are notified even while detached.
-
-- `await $mounted()` suspends the script until the component is attached to the DOM, so everything below it can use `querySelector` (or `$`/`$$`) directly:
-
-```html
-<script :setup>
-  let items = await fetchItems()   // runs before render
-
-  await $mounted()
-
-  let height = $(".list").offsetHeight   // real DOM access — still reactive
-</script>
-<ul class="list">
-  <li :each="item in items">{{ item }}</li>
-</ul>
-```
-
-  Reactivity is unaffected by where a declaration sits: variables declared after the `await` are pre-declared on the store before the first render (as `undefined`), so the template can bind to them from the start and updates when the assignment runs. If the component is never mounted, the code after `await $mounted()` never runs.
-
-  To defer a whole script until mount, add `:mounted` to the tag — it behaves as if `await $mounted()` were its first line:
-
-```html
-<script :setup :mounted>
-  $self(".list").focus()   // the component is already in the DOM
-</script>
-```
-
-- `$self(selector)` and `$$self(selector)` are component-scoped versions of [`$` / `$$`](#dom-helpers): they only search this component instance's own rendered nodes, so they can't accidentally match another component (or anything else in the page). They work even while the component is rendered but not yet mounted — but remember the template renders *after* the synchronous part of the script, so call them from post-`await $mounted()` code or from handlers/callbacks.
-
-Only top-level code is rewritten; declarations inside callbacks/blocks behave as plain JS. `let a = 1, b = 2` multi-declarators are not supported — one declaration per statement.
-
-## Reactive data
-
-The store used by components is available standalone:
-
-```js
-import { $reactive } from "jq79"   // also injected into setup scripts
-
-const data = $reactive({ user: { address: { city: "NYC" } } })
-
-data.$on("user.address.city", (value, dotKey) => { … }, { immediate: true })
-data.$onAny((dotKey, value) => { … })
-const stop = data.$effect(() => {
-  // re-runs whenever anything it *read* changes (fine-grained, deep)
-  console.log(data.user.address.city)
-})
-
-data.user.address.city = "LA"   // deep mutations notify with the full dot path
-stop()                          // effects/listeners return an unsubscribe fn
-```
-
-## DOM helpers
-
-```js
-import { $, $$, $create } from "jq79"
-
-$(".card")            // document.querySelector
-$(el, ".card")        // scoped querySelector
-$$(".card")           // querySelectorAll, as a real Array
-$$(el, ".card")       // scoped
-
-$create("div", {      // document.createElement + attrs
-  className: ["card", "active"],   // string or array
-  textContent: "hi",
-  children: [$create("span")],
-  "data-id": "42",                 // anything else via setAttribute
-})
-```
-
-## Development
-
-```sh
-npm install
-npm test         # vitest + jsdom
-npm run build    # tsup → dist/ (ESM + CJS + IIFE + .d.ts)
-```
-
-## Publishing
-
-Releases are automated via GitHub Actions ([release.yml](.github/workflows/release.yml)):
-
-```sh
-npm version patch|minor|major   # bumps package.json and creates the vX.Y.Z tag
-git push --follow-tags
-```
-
-Pushing the tag runs tests + build, creates the GitHub release with the `dist/` files attached, and publishes to npm with provenance. Requires an `NPM_TOKEN` repository secret (npm automation token). CDNs (unpkg, jsDelivr, esm.sh) pick the new version up from npm automatically.
+## Documentation
 
-Every push/PR to `main` also runs tests + build ([ci.yml](.github/workflows/ci.yml)).
+- [Components](docs/components.md) — lifecycle (`mount`, `mountShadow`, `detach`, `destroy`), instance events (`on`/`off`), loading remote components with `Component79.fetch`.
+- [Template syntax](docs/template-syntax.md) — `{{ }}` interpolation, `:bind`, `:if`/`:elseif`/`:else`, `:each`/`:key`, `:with`, `@event` listeners and modifiers, nested components.
+- [Setup scripts](docs/setup-scripts.md) — `<script :setup>` reactive scripts, `$:` declarations, `$emit`, `await $mounted()`, `$self`/`$$self`, and `export default` factory scripts (plain-JS alternative).
+- [Reactive data](docs/reactive-data.md) — the standalone `$reactive` store: `$on`, `$onAny`, `$effect`.
+- [DOM helpers](docs/dom-helpers.md) — `$`, `$$` and `$create`.
+- [Vite plugin](docs/vite-plugin.md) — importing `.html` components as bundled modules, HMR, options.
+- [Development](docs/development.md) — running tests, building, publishing releases.
 
 ## License
 

package/assets/Component79.svg

@@ -0,0 +1,8 @@
+<svg width="100%" viewBox="0 0 410 410" xmlns="http://www.w3.org/2000/svg" role="img" style="">
+<title style="fill:rgb(0, 0, 0);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto">Component79 logo</title>
+<desc style="fill:rgb(0, 0, 0);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto">A square logo with a royalblue background, with "jq" in white and "79" in JS-yellow in the bottom right corner</desc>
+<rect x="0" y="0" width="400" height="400" fill="royalblue" style="fill:rgb(65, 105, 225);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
+<text x="372" y="340" text-anchor="end" font-family="Arial, Helvetica, sans-serif" font-weight="700" font-size="96" style="fill:rgb(0, 0, 0);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:Arial, Helvetica, sans-serif;font-size:96px;font-weight:700;text-anchor:end;dominant-baseline:auto">
+<tspan fill="#FFFFFF" style="fill:rgb(255, 255, 255);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:Arial, Helvetica, sans-serif;font-size:96px;font-weight:700;text-anchor:end;dominant-baseline:auto">jq</tspan><tspan fill="#F7DF1E" style="fill:rgb(247, 223, 30);stroke:none;color:rgb(11, 11, 11);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:Arial, Helvetica, sans-serif;font-size:96px;font-weight:700;text-anchor:end;dominant-baseline:auto">79</tspan>
+</text>
+</svg>

package/dist/dom.d.ts

@@ -0,0 +1,3 @@
+export declare const $: (selectorOrEl: string | Element, selector?: string) => Element | null;
+export declare const $$: (selectorOrEl: string | Element, selector?: string) => Element[];
+export declare const $create: (tag: string, attrs?: Record<string, any>) => HTMLElement;

package/dist/jq79.cjs

@@ -1,6 +1,10 @@
-var N=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.prototype.hasOwnProperty;var ne=(t,e,n)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var se=(t,e)=>{for(var n in e)N(t,n,{get:e[n],enumerable:!0})},re=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ee(e))!te.call(t,r)&&r!==n&&N(t,r,{get:()=>e[r],enumerable:!(s=Q(e,r))||s.enumerable});return t};var oe=t=>re(N({},"__esModule",{value:!0}),t);var E=(t,e,n)=>ne(t,typeof e!="symbol"?e+"":e,n);var Ae={};se(Ae,{$:()=>v,$$:()=>H,$create:()=>z,$reactive:()=>D,Component79:()=>C,parseComponent:()=>Oe,renderComponent:()=>ye});module.exports=oe(Ae);var v=(t,e)=>typeof t=="string"?document.querySelector(t):t.querySelector(e||""),H=(t,e)=>Array.from(typeof t=="string"?document.querySelectorAll(t):t.querySelectorAll(e||"")),z=(t,e={})=>{let n=document.createElement(t);for(let[s,r]of Object.entries(e))if(s==="className")n.className=Array.isArray(r)?r.join(" "):r;else if(s==="textContent")n.textContent=r;else if(s==="children")for(let o of r)n.appendChild(o);else n.setAttribute(s,r);return n},V=t=>Object.fromEntries(Array.from(t.attributes).map(e=>[e.name,e.value])),Z=t=>({tag:t.tagName.toLowerCase(),attrs:V(t),children:Array.from(t.childNodes).flatMap(e=>{if(e.nodeType===Node.TEXT_NODE){let n=e.textContent?.trim()??"";return n?[n]:[]}return e.nodeType===Node.ELEMENT_NODE?[Z(e)]:[]})}),S=(t,e,n)=>{try{return new Function("$scope",...Object.keys(n??{}),`with ($scope) { return (${t}); }`)(e,...Object.values(n??{}))}catch{return}},ie=(t,e)=>t.replace(/{{\s*(.+?)\s*}}/g,(n,s)=>S(s,e)??""),ce=(t,e)=>e.split(".").reduce((n,s)=>n?.[s],t),M=t=>{if(Array.isArray(t))return!0;let e=Object.getPrototypeOf(t);return e===Object.prototype||e===null},K=(t,e,n)=>{Object.entries(t).forEach(([s,r])=>{let o=e?`${e}.${s}`:s;r&&typeof r=="object"&&M(r)?K(r,o,n):n(o,r)})},ae=(t,e)=>t===e||t.startsWith(`${e}.`)||e.startsWith(`${t}.`),x=[],le=t=>{x.push(new Set);try{return t()}finally{x.pop()}},D=t=>{let e=new Map,n=new Set,s=new Set,r=new WeakSet,o=(c,u)=>{e.get(c)?.forEach(h=>h(u,c)),n.forEach(h=>h(c,u)),s.forEach(h=>{Array.from(h.deps).some(d=>ae(d,c))&&h.run()})},i=(c,u)=>{if(r.has(c))return c;Object.entries(c).forEach(([d,f])=>{f&&typeof f=="object"&&M(f)&&(c[d]=i(f,u?`${u}.${d}`:d))});let h=new Proxy(c,{get(d,f,p){return typeof f=="string"&&x[x.length-1]?.add(u?`${u}.${f}`:f),Reflect.get(d,f,p)},set(d,f,p,b){if(b!==h&&!Object.prototype.hasOwnProperty.call(d,f))return Reflect.set(d,f,p,b);let w=u?`${u}.${f}`:f;return p&&typeof p=="object"&&M(p)&&(p=i(p,w)),d[f]=p,o(w,p),!0}});return r.add(h),h},a=i(t,""),l=(c,u,{immediate:h=!1}={})=>(e.has(c)||e.set(c,new Set),e.get(c).add(u),h&&u(ce(a,c),c),()=>e.get(c)?.delete(u)),m=(c,{immediate:u=!1}={})=>(n.add(c),u&&K(a,"",(h,d)=>c(h,d)),()=>n.delete(c)),g=c=>{let u={deps:new Set,run:()=>{let h=new Set;x.push(h);try{c()}finally{x.pop(),u.deps=h}}};return s.add(u),u.run(),()=>{s.delete(u)}};return Object.defineProperty(a,"$on",{value:l,enumerable:!1}),Object.defineProperty(a,"$onAny",{value:m,enumerable:!1}),Object.defineProperty(a,"$effect",{value:g,enumerable:!1}),a},G=new Set([":bind",":if",":elseif",":else",":each",":key",":with"]),de=/^\s*(\w+)\s+in\s+(.+)$/,T=t=>{let e=[];return{effect:n=>{e.push(t.$effect(n))},onDispose:n=>{e.push(n)},dispose:()=>{e.splice(0).forEach(n=>n())}}},ue=(t,e,n,s)=>{let[r,...o]=e.slice(1).split("."),i=new Set(o);t.addEventListener(r,a=>{if(i.has("self")&&a.target!==t)return;i.has("prevent")&&a.preventDefault(),i.has("stop")&&a.stopPropagation();let l=S(n,s,{$event:a});typeof l=="function"&&l.call(t,a)},{once:i.has("once"),capture:i.has("capture")})},B=t=>t.replace(/-(\w)/g,(e,n)=>n.toUpperCase()),fe=(t,e)=>{let n=e.replace(/-/g,"").toLowerCase();for(let s=t;s&&s!==Object.prototype;s=Object.getPrototypeOf(s))for(let r of Object.keys(s))if(/^[A-Z]/.test(r)&&r.replace(/-/g,"").toLowerCase()===n)return r;return null},pe=(t,e,n,s)=>{let r=document.createComment(t),o=document.createDocumentFragment();o.appendChild(r);let i={};Object.entries(e.attrs).forEach(([g,c])=>{if(!(G.has(g)||g.startsWith("@")))if(g.startsWith(":")){let u=B(g.slice(1));i[u]=c||u}else i[B(g)]=JSON.stringify(c)});let a=null,l=null,m=null;return s.effect(()=>{let g=S(t,n),c=g instanceof C?g:null;if(c===l||(m?.dispose(),m=null,a?.destroy(),a=null,l=c,!c))return;let u=new C({template:c.template,scripts:c.scripts,styles:c.styles}),h=le(()=>Object.fromEntries(Object.entries(i).map(([p,b])=>[p,S(b,n)]))),d=document.createDocumentFragment();u.render(h).mount(d),r.parentNode.insertBefore(d,r.nextSibling);let f=T(n);Object.entries(i).forEach(([p,b])=>{f.effect(()=>{u.data[p]=S(b,n)})}),m=f,a=u}),s.onDispose(()=>{m?.dispose(),a?.destroy()}),o},he=(t,e)=>{let n=()=>{let s=S(t,e);return s!==null&&typeof s=="object"?s:null};return new Proxy(e,{has(s,r){let o=n();return o!==null&&Reflect.has(o,r)||Reflect.has(s,r)},get(s,r){let o=n();return o!==null&&Reflect.has(o,r)?o[r]:Reflect.get(s,r)},set(s,r,o){let i=n();return i!==null&&Reflect.has(i,r)?(i[r]=o,!0):Reflect.set(s,r,o)}})},_=(t,e,n)=>{let s=t.attrs[":with"],r=s!==void 0?he(s,e):e,o=fe(r,t.tag);if(o)return pe(o,t,r,n);let i=document.createElement(t.tag);Object.entries(t.attrs).forEach(([l,m])=>{l.startsWith("@")?ue(i,l,m,r):G.has(l)||i.setAttribute(l,m)});let a=t.attrs[":bind"];if(a!==void 0){let l=[];n.effect(()=>{l.forEach(g=>i.removeAttribute(g));let m=S(a,r);l=m&&typeof m=="object"?Object.keys(m):[],l.forEach(g=>{let c=m[g];c!=null&&c!==!1&&i.setAttribute(g,String(c))})})}return i.appendChild(k(t.children,r,n)),i},me=(t,e,n)=>{let s=document.createComment("if"),r=document.createDocumentFragment();r.appendChild(s);let o=null,i=null,a=null;return n.effect(()=>{let l=t.find(m=>m.expr===void 0||S(m.expr,e))??null;l!==i&&(a?.dispose(),o&&o.parentNode?.removeChild(o),o=null,i=l,l&&(a=T(e),o=_(l.node,e,a),s.parentNode.insertBefore(o,s.nextSibling)))}),r},j=(t,e,n)=>{Object.defineProperty(t,e,{value:n,writable:!0,enumerable:!0,configurable:!0})},ge=(t,e,n)=>{let s=t.attrs[":each"].match(de);if(!s)return document.createComment(`invalid :each expression "${t.attrs[":each"]}"`);let[,r,o]=s,i=t.attrs[":key"],{[":each"]:a,[":key"]:l,...m}=t.attrs,g={...t,attrs:m},c=document.createComment("each"),u=document.createDocumentFragment();u.appendChild(c);let h=[];return n.effect(()=>{let d=S(o,e),f=Array.isArray(d)?d:[],p=new Map(h.map(y=>[y.key,y])),b=f.map((y,A)=>{let $=Object.create(e);j($,r,y),j($,"$index",A);let P=i!==void 0?S(i,$):A,R=p.get(P);if(R&&Object.is(R.item,y))return j(R.scope,"$index",A),R;R?.fx.dispose(),R?.node.parentNode?.removeChild(R.node);let F=T(e);return{key:P,item:y,scope:$,fx:F,node:_(g,$,F)}}),w=new Set(b.map(y=>y.key));h.forEach(y=>{w.has(y.key)||(y.fx.dispose(),y.node.parentNode?.removeChild(y.node))});let O=c;b.forEach(y=>{O.nextSibling!==y.node&&c.parentNode.insertBefore(y.node,O.nextSibling),O=y.node}),h=b}),u},k=(t,e,n)=>{let s=document.createDocumentFragment(),r=0;for(;r<t.length;){let o=t[r];if(typeof o=="string"){let i=document.createTextNode("");n.effect(()=>{i.textContent=ie(o,e)}),s.appendChild(i),r++;continue}if(":each"in o.attrs){s.appendChild(ge(o,e,n)),r++;continue}if(":if"in o.attrs){let i=[{expr:o.attrs[":if"],node:o}];for(r++;r<t.length&&typeof t[r]!="string"&&":elseif"in t[r].attrs;){let a=t[r];i.push({expr:a.attrs[":elseif"],node:a}),r++}r<t.length&&typeof t[r]!="string"&&":else"in t[r].attrs&&(i.push({node:t[r]}),r++),s.appendChild(me(i,e,n));continue}s.appendChild(_(o,e,n)),r++}return s},ye=(t,e)=>k(t.template,e,T(e)),Ee=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),be=/<([A-Za-z][\w-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)\/>/g,Se=/(<script[\s\S]*?<\/script\s*>|<style[\s\S]*?<\/style\s*>)/gi,we=t=>t.split(Se).map((e,n)=>n%2===1?e:e.replace(be,(s,r,o)=>Ee.has(r.toLowerCase())?s:`<${r}${o}></${r}>`)).join(""),Re=t=>{let n=new DOMParser().parseFromString(`<template>${we(t)}</template>`,"text/html").querySelector("template"),s=[],r=[],o=[];return Array.from(n.content.children).forEach(i=>{let a={attrs:V(i),content:i.textContent??""};i.tagName==="SCRIPT"?s.push(a):i.tagName==="STYLE"?r.push(a):o.push(Z(i))}),{template:o,scripts:s,styles:r}},W=/(?:let|var|const)\s+([A-Za-z_$][\w$]*)/y,I=/\$:\s*/y,q=/import(?=\s*\()/y,U=/\$:\s*([A-Za-z_$][\w$]*)\s*=(?!=)/y,J=(t,e)=>{let n=t[e],s=e+1;for(;s<t.length;){if(t[s]==="\\"){s+=2;continue}if(t[s]===n)return s+1;s++}return t.length},X=(t,e)=>{let n=t.indexOf(`
-`,e);return n===-1?t.length:n},Y=(t,e)=>{let n=t.indexOf("*/",e+2);return n===-1?t.length:n+2},Ce=(t,e)=>{let n=0,s=e;for(;s<t.length;){let r=t[s];if(r==="'"||r==='"'||r==="`"){s=J(t,s);continue}if(r==="/"&&t[s+1]==="/"){s=X(t,s);continue}if(r==="/"&&t[s+1]==="*"){s=Y(t,s);continue}if("([{".includes(r))n++;else if(")]}".includes(r))n--;else if(n<=0&&(r===`
-`||r===";"))return s;s++}return t.length},xe=t=>{let e=[],n="",s=0,r=0,o=!0;for(;s<t.length;){let i=t[s],a=t[s+1];if(i==="'"||i==='"'||i==="`"){let l=J(t,s);n+=t.slice(s,l),s=l,o=!1;continue}if(i==="/"&&(a==="/"||a==="*")){let l=a==="/"?X(t,s):Y(t,s);n+=t.slice(s,l),s=l;continue}if(i==="i"&&(s===0||!/[\w$.]/.test(t[s-1]))&&(q.lastIndex=s,q.test(t))){n+="$__import",s+=6,o=!1;continue}if(r===0&&o){W.lastIndex=s;let l=W.exec(t);if(l){e.push(l[1]),n+=l[1],s+=l[0].length,o=!1;continue}I.lastIndex=s;let m=I.exec(t);if(m){U.lastIndex=s;let g=U.exec(t);g&&e.push(g[1]);let c=s+m[0].length,u=Ce(t,c);n+=`$__effect(() => { ${t.slice(c,u)} });`,s=u;continue}}"([{".includes(i)?r++:")]}".includes(i)&&(r=Math.max(0,r-1)),i===`
-`||i===";"||i==="}"?o=!0:/\s/.test(i)||(o=!1),n+=i,s++}return{vars:e,code:n}},$e=t=>/\.html?([?#]|$)/.test(t)?C.fetch(t):import(t),L=new Map,Te=t=>{let e=L.get(t);if(!e){let n=document.createElement("style");n.textContent=t,document.head.appendChild(n),e={el:n,count:0},L.set(t,e)}e.count++},Ne=t=>{let e=L.get(t);e&&--e.count<=0&&(e.el.remove(),L.delete(t))},ve={$:v,$$:H,$create:z,$reactive:D},Le=(t,e,n,s={})=>{let r={...ve,...s},o=new Proxy(e,{has:(a,l)=>l!=="$__effect"&&l!=="$__import"&&(Reflect.has(a,l)||!(l in globalThis)&&!(l in r))});new Function("$scope","$__effect","$__import",...Object.keys(r),`return (async () => { with ($scope) { ${t} } })()`)(o,n,$e,...Object.values(r)).catch(a=>console.error("jq79: error in :setup script",a))},C=class t{constructor(e){E(this,"template");E(this,"scripts");E(this,"styles");E(this,"data",null);E(this,"fx",null);E(this,"content",null);E(this,"startMarker",null);E(this,"endMarker",null);E(this,"styleEls",[]);E(this,"ownsSharedStyles",!1);E(this,"useShadow",!1);E(this,"mountRoot",null);E(this,"resolveMounted",null);E(this,"emitListeners",new Map);let{template:n,scripts:s,styles:r}=typeof e=="string"?Re(e):e;this.template=n,this.scripts=s,this.styles=r}static async fetch(e){let n=await fetch(e);if(!n.ok)throw new Error(`failed to fetch component from ${e}: ${n.status}`);return new t(await n.text())}on(e,n){return this.emitListeners.has(e)||this.emitListeners.set(e,new Set),this.emitListeners.get(e).add(n),this}off(e,n){return this.emitListeners.get(e)?.delete(n),this}render(e={}){return this.renderWith(e,!1)}renderShadow(e={}){return this.renderWith(e,!0)}renderWith(e,n){this.destroy();let s=D({...e}),r=T(s);this.data=s,this.fx=r,this.useShadow=n,this.startMarker=document.createComment("jq79"),this.endMarker=document.createComment("/jq79");let o=this.startMarker,i=(d,f)=>{let p=new CustomEvent(d,{detail:f,bubbles:!0,composed:!0}),b=o.dispatchEvent(p);return o===this.startMarker&&this.emitListeners.get(d)?.forEach(w=>w(p,f)),b},a,l=new Promise(d=>{a=d});this.resolveMounted=a;let m=()=>l,g=this.endMarker,c=d=>{let f=[];for(let p=o.nextSibling;p&&p!==g;p=p.nextSibling)p instanceof Element&&(p.matches(d)&&f.push(p),f.push(...Array.from(p.querySelectorAll(d))));return f},u=d=>c(d)[0]??null;this.scripts.forEach(d=>{let{vars:f,code:p}=xe(d.content);f.forEach(w=>{w in s||(s[w]=void 0)});let b=":mounted"in d.attrs?`await $mounted();
-${p}`:p;Le(b,s,r.effect,{$emit:i,$mounted:m,$self:u,$$self:c})});let h=document.createDocumentFragment();return h.append(this.startMarker,k(this.template,s,r),this.endMarker),this.content=h,n?this.styleEls=this.styles.map(d=>{let f=document.createElement("style");return f.textContent=d.content,f}):(this.styles.forEach(d=>Te(d.content)),this.ownsSharedStyles=!0),this}mount(e,n){let s=typeof e=="string"?v(e):e;if(!s)throw new Error(`mount target not found: ${e}`);return(!this.content||n!==void 0)&&this.renderWith(n??{},this.useShadow),this.attach(s)}mountShadow(e,n){let s=typeof e=="string"?v(e):e;if(!s)throw new Error(`mount target not found: ${e}`);return(!this.content||n!==void 0||!this.useShadow)&&this.renderWith(n??{},!0),this.attach(s)}attach(e){this.mountRoot&&this.detach();let n=this.useShadow&&e instanceof Element?e.shadowRoot??e.attachShadow({mode:"open"}):e;return this.useShadow&&this.styleEls.forEach(s=>n.appendChild(s)),n.appendChild(this.content),this.mountRoot=n,this.resolveMounted?.(),this}detach(){if(!this.mountRoot||!this.content||!this.startMarker||!this.endMarker)return this;let e=this.startMarker;for(;e;){let n=e.nextSibling;if(this.content.appendChild(e),e===this.endMarker)break;e=n}return this.mountRoot=null,this}destroy(){return this.detach(),this.fx?.dispose(),this.fx=null,this.styleEls.forEach(e=>e.parentNode?.removeChild(e)),this.styleEls=[],this.ownsSharedStyles&&(this.styles.forEach(e=>Ne(e.content)),this.ownsSharedStyles=!1),this.content=null,this.startMarker=null,this.endMarker=null,this.data=null,this.resolveMounted=null,this}},Oe=t=>new C(t);0&&(module.exports={$,$$,$create,$reactive,Component79,parseComponent,renderComponent});
+var L=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var dt=Object.prototype.hasOwnProperty;var ft=(t,e,n)=>e in t?L(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var ut=(t,e)=>{for(var n in e)L(t,n,{get:e[n],enumerable:!0})},pt=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of lt(e))!dt.call(t,r)&&r!==n&&L(t,r,{get:()=>e[r],enumerable:!(s=at(e,r))||s.enumerable});return t};var ht=t=>pt(L({},"__esModule",{value:!0}),t);var S=(t,e,n)=>ft(t,typeof e!="symbol"?e+"":e,n);var Ft={};ut(Ft,{$:()=>T,$$:()=>A,$create:()=>j,$reactive:()=>O,Component79:()=>C,parseComponent:()=>kt,renderComponent:()=>Tt});module.exports=ht(Ft);var T=(t,e)=>typeof t=="string"?document.querySelector(t):t.querySelector(e||""),A=(t,e)=>Array.from(typeof t=="string"?document.querySelectorAll(t):t.querySelectorAll(e||"")),j=(t,e={})=>{let n=document.createElement(t);for(let[s,r]of Object.entries(e))if(s==="className")n.className=Array.isArray(r)?r.join(" "):r;else if(s==="textContent")n.textContent=r;else if(s==="children")for(let o of r)n.appendChild(o);else n.setAttribute(s,r);return n};var mt=(t,e)=>e.split(".").reduce((n,s)=>n?.[s],t),P=t=>{if(Array.isArray(t))return!0;let e=Object.getPrototypeOf(t);return e===Object.prototype||e===null},K=(t,e,n)=>{Object.entries(t).forEach(([s,r])=>{let o=e?`${e}.${s}`:s;r&&typeof r=="object"&&P(r)?K(r,o,n):n(o,r)})},gt=(t,e)=>t===e||t.startsWith(`${e}.`)||e.startsWith(`${t}.`),v=[],V=t=>{v.push(new Set);try{return t()}finally{v.pop()}},O=t=>{let e=new Map,n=new Set,s=new Set,r=new WeakSet,o=(a,p,m=!1)=>{e.get(a)?.forEach(h=>h(p,a)),n.forEach(h=>h(a,p)),s.forEach(h=>{(m||Array.from(h.deps).some(g=>gt(g,a)))&&h.run()})},i=(a,p)=>{if(r.has(a))return a;Object.entries(a).forEach(([h,g])=>{g&&typeof g=="object"&&P(g)&&(a[h]=i(g,p?`${p}.${h}`:h))});let m=new Proxy(a,{get(h,g,u){return typeof g=="string"&&v[v.length-1]?.add(p?`${p}.${g}`:g),Reflect.get(h,g,u)},set(h,g,u,y){if(y!==m&&!Object.prototype.hasOwnProperty.call(h,g))return Reflect.set(h,g,u,y);let b=p?`${p}.${g}`:g;u&&typeof u=="object"&&P(u)&&(u=i(u,b));let R=!Object.prototype.hasOwnProperty.call(h,g);return h[g]=u,o(b,u,R),!0}});return r.add(m),m},c=i(t,""),l=(a,p,{immediate:m=!1}={})=>(e.has(a)||e.set(a,new Set),e.get(a).add(p),m&&p(mt(c,a),a),()=>e.get(a)?.delete(p)),d=(a,{immediate:p=!1}={})=>(n.add(a),p&&K(c,"",(m,h)=>a(m,h)),()=>n.delete(a)),f=a=>{let p={deps:new Set,run:()=>{let m=new Set;v.push(m);try{a()}finally{v.pop(),p.deps=m}}};return s.add(p),p.run(),()=>{s.delete(p)}};return Object.defineProperty(c,"$on",{value:l,enumerable:!1}),Object.defineProperty(c,"$onAny",{value:d,enumerable:!1}),Object.defineProperty(c,"$effect",{value:f,enumerable:!1}),c},N=t=>{let e=[];return{effect:n=>{e.push(t.$effect(n))},onDispose:n=>{e.push(n)},dispose:()=>{e.splice(0).forEach(n=>n())}}};var Z=/(?:let|var|const)\s+([A-Za-z_$][\w$]*)/y,G=/\$:\s*/y,D=/import(?=\s*\()/y,J=/\$:\s*([A-Za-z_$][\w$]*)\s*=(?!=)/y,k=(t,e)=>{let n=t[e],s=e+1;for(;s<t.length;){if(t[s]==="\\"){s+=2;continue}if(t[s]===n)return s+1;s++}return t.length},F=(t,e)=>{let n=t.indexOf(`
+`,e);return n===-1?t.length:n},B=(t,e)=>{let n=t.indexOf("*/",e+2);return n===-1?t.length:n+2},yt=(t,e)=>{let n=0,s=e;for(;s<t.length;){let r=t[s];if(r==="'"||r==='"'||r==="`"){s=k(t,s);continue}if(r==="/"&&t[s+1]==="/"){s=F(t,s);continue}if(r==="/"&&t[s+1]==="*"){s=B(t,s);continue}if("([{".includes(r))n++;else if(")]}".includes(r))n--;else if(n<=0&&(r===`
+`||r===";"))return s;s++}return t.length},Q=t=>{let e=[],n="",s=0,r=0,o=!0;for(;s<t.length;){let i=t[s],c=t[s+1];if(i==="'"||i==='"'||i==="`"){let l=k(t,s);n+=t.slice(s,l),s=l,o=!1;continue}if(i==="/"&&(c==="/"||c==="*")){let l=c==="/"?F(t,s):B(t,s);n+=t.slice(s,l),s=l;continue}if(i==="i"&&(s===0||!/[\w$.]/.test(t[s-1]))&&(D.lastIndex=s,D.test(t))){n+="$__import",s+=6,o=!1;continue}if(r===0&&o){Z.lastIndex=s;let l=Z.exec(t);if(l){e.push(l[1]),n+=l[1],s+=l[0].length,o=!1;continue}G.lastIndex=s;let d=G.exec(t);if(d){J.lastIndex=s;let f=J.exec(t);f&&e.push(f[1]);let a=s+d[0].length,p=yt(t,a);n+=`$__effect(() => { ${t.slice(a,p)} });`,s=p;continue}}"([{".includes(i)?r++:")]}".includes(i)&&(r=Math.max(0,r-1)),i===`
+`||i===";"||i==="}"?o=!0:/\s/.test(i)||(o=!1),n+=i,s++}return{vars:e,code:n}},X=/export\s+default(?![\w$])/y,Y=/import\s*(?:([\w$\s,{}*]+?)\s*from\s*)?(["'])([^"'\n]+)\2/y,Et=t=>{let e=[],n=0,s=0;for(let r=0;r<=t.length;r++){let o=t[r];if(o==="{")n++;else if(o==="}")n--;else if(r===t.length||o===","&&n===0){let i=t.slice(s,r).trim();i&&e.push(i),s=r+1}}return e},bt=(t,e,n)=>{let s=`await $__import(${JSON.stringify(e)})`;if(t===void 0)return s;let r=Et(t),o=[],i=s;if(r.length>1){let c=`$__mod${n}`;o.push(`${c} = ${s}`),i=c}for(let c of r)c.startsWith("{")?o.push(`${c.replace(/\s+as\s+/g,": ")} = ${i}`):c.startsWith("*")?o.push(`${c.replace(/^\*\s*as\s+/,"")} = ${i}`):o.push(`${c} = $__default(${i})`);return`const ${o.join(", ")}`},tt=t=>{let e="",n=0,s=0,r=!0,o=!1,i=0;for(;n<t.length;){let c=t[n],l=t[n+1],d=n===0||!/[\w$.]/.test(t[n-1]);if(c==="'"||c==='"'||c==="`"){let f=k(t,n);e+=t.slice(n,f),n=f,r=!1;continue}if(c==="/"&&(l==="/"||l==="*")){let f=l==="/"?F(t,n):B(t,n);e+=t.slice(n,f),n=f;continue}if(c==="i"&&d){if(D.lastIndex=n,D.test(t)){e+="$__import",n+=6,r=!1;continue}if(s===0&&r){Y.lastIndex=n;let f=Y.exec(t);if(f){e+=bt(f[1],f[3],i++),n+=f[0].length,r=!1;continue}}}if(c==="e"&&d&&s===0&&r){X.lastIndex=n;let f=X.exec(t);if(f){o=!0,e+="$__exports.default =",n+=f[0].length,r=!1;continue}}"([{".includes(c)?s++:")]}".includes(c)&&(s=Math.max(0,s-1)),c===`
+`||c===";"||c==="}"?r=!0:/\s/.test(c)||(r=!1),e+=c,n++}return o?e:null};var rt=t=>Object.fromEntries(Array.from(t.attributes).map(e=>[e.name,e.value])),ot=t=>({tag:t.tagName.toLowerCase(),attrs:rt(t),children:Array.from(t.childNodes).flatMap(e=>{if(e.nodeType===Node.TEXT_NODE){let n=e.textContent?.trim()??"";return n?[n]:[]}return e.nodeType===Node.ELEMENT_NODE?[ot(e)]:[]})}),w=(t,e,n)=>{try{return new Function("$scope",...Object.keys(n??{}),`with ($scope) { return (${t}); }`)(e,...Object.values(n??{}))}catch{return}},St=(t,e)=>t.replace(/{{\s*(.+?)\s*}}/g,(n,s)=>w(s,e)??""),it=new Set([":bind",":if",":elseif",":else",":each",":key",":with"]),$t=/^\s*(\w+)\s+in\s+(.+)$/,wt=(t,e,n,s)=>{let[r,...o]=e.slice(1).split("."),i=new Set(o);t.addEventListener(r,c=>{if(i.has("self")&&c.target!==t)return;i.has("prevent")&&c.preventDefault(),i.has("stop")&&c.stopPropagation();let l=w(n,s,{$event:c});typeof l=="function"&&l.call(t,c)},{once:i.has("once"),capture:i.has("capture")})},et=t=>t.replace(/-(\w)/g,(e,n)=>n.toUpperCase()),nt=(t,e)=>{let n=e.replace(/-/g,"").toLowerCase();for(let s=t;s&&s!==Object.prototype;s=Object.getPrototypeOf(s))for(let r of Object.keys(s))if(/^[A-Z]/.test(r)&&r.replace(/-/g,"").toLowerCase()===n)return r;return null},st=(t,e,n,s)=>{let r=document.createComment(t),o=document.createDocumentFragment();o.appendChild(r);let i={};Object.entries(e.attrs).forEach(([f,a])=>{if(!(it.has(f)||f.startsWith("@")))if(f.startsWith(":")){let p=et(f.slice(1));i[p]=a||p}else i[et(f)]=JSON.stringify(a)});let c=null,l=null,d=null;return s.effect(()=>{let f=w(t,n),a=f instanceof C?f:null;if(a===l||(d?.dispose(),d=null,c?.destroy(),c=null,l=a,!a))return;let p=new C({template:a.template,scripts:a.scripts,styles:a.styles,modules:a.modules}),m=V(()=>Object.fromEntries(Object.entries(i).map(([u,y])=>[u,w(y,n)]))),h=document.createDocumentFragment();p.render(m).mount(h),r.parentNode.insertBefore(h,r.nextSibling);let g=N(n);Object.entries(i).forEach(([u,y])=>{g.effect(()=>{p.data[u]=w(y,n)})}),d=g,c=p}),s.onDispose(()=>{d?.dispose(),c?.destroy()}),o},Rt=(t,e)=>{let n=()=>{let s=w(t,e);return s!==null&&typeof s=="object"?s:null};return new Proxy(e,{has(s,r){let o=n();return o!==null&&Reflect.has(o,r)||Reflect.has(s,r)},get(s,r){let o=n();return o!==null&&Reflect.has(o,r)?o[r]:Reflect.get(s,r)},set(s,r,o){let i=n();return i!==null&&Reflect.has(i,r)?(i[r]=o,!0):Reflect.set(s,r,o)}})},W=(t,e,n)=>{let s=t.attrs[":with"],r=s!==void 0?Rt(s,e):e,o=nt(r,t.tag);if(o)return st(o,t,r,n);let i=document.createElement(t.tag);if(i instanceof HTMLUnknownElement||t.tag.includes("-")){let l=!1;n.effect(()=>{if(l)return;let d=nt(r,t.tag);d&&(l=!0,i.replaceWith(st(d,t,r,n)))})}Object.entries(t.attrs).forEach(([l,d])=>{l.startsWith("@")?wt(i,l,d,r):it.has(l)||i.setAttribute(l,d)});let c=t.attrs[":bind"];if(c!==void 0){let l=[];n.effect(()=>{l.forEach(f=>i.removeAttribute(f));let d=w(c,r);l=d&&typeof d=="object"?Object.keys(d):[],l.forEach(f=>{let a=d[f];a!=null&&a!==!1&&i.setAttribute(f,String(a))})})}return i.appendChild(U(t.children,r,n)),i},xt=(t,e,n)=>{let s=document.createComment("if"),r=document.createDocumentFragment();r.appendChild(s);let o=null,i=null,c=null;return n.effect(()=>{let l=t.find(d=>d.expr===void 0||w(d.expr,e))??null;l!==i&&(c?.dispose(),o&&o.parentNode?.removeChild(o),o=null,i=l,l&&(c=N(e),o=W(l.node,e,c),s.parentNode.insertBefore(o,s.nextSibling)))}),r},I=(t,e,n)=>{Object.defineProperty(t,e,{value:n,writable:!0,enumerable:!0,configurable:!0})},Ct=(t,e,n)=>{let s=t.attrs[":each"].match($t);if(!s)return document.createComment(`invalid :each expression "${t.attrs[":each"]}"`);let[,r,o]=s,i=t.attrs[":key"],{[":each"]:c,[":key"]:l,...d}=t.attrs,f={...t,attrs:d},a=document.createComment("each"),p=document.createDocumentFragment();p.appendChild(a);let m=[];return n.effect(()=>{let h=w(o,e),g=Array.isArray(h)?h:[],u=new Map(m.map(E=>[E.key,E])),y=g.map((E,_)=>{let $=Object.create(e);I($,r,E),I($,"$index",_);let H=i!==void 0?w(i,$):_,x=u.get(H);if(x&&Object.is(x.item,E))return I(x.scope,"$index",_),x;x?.fx.dispose(),x?.node.parentNode?.removeChild(x.node);let z=N(e);return{key:H,item:E,scope:$,fx:z,node:W(f,$,z)}}),b=new Set(y.map(E=>E.key));m.forEach(E=>{b.has(E.key)||(E.fx.dispose(),E.node.parentNode?.removeChild(E.node))});let R=a;y.forEach(E=>{R.nextSibling!==E.node&&a.parentNode.insertBefore(E.node,R.nextSibling),R=E.node}),m=y}),p},U=(t,e,n)=>{let s=document.createDocumentFragment(),r=0;for(;r<t.length;){let o=t[r];if(typeof o=="string"){let i=document.createTextNode("");n.effect(()=>{i.textContent=St(o,e)}),s.appendChild(i),r++;continue}if(":each"in o.attrs){s.appendChild(Ct(o,e,n)),r++;continue}if(":if"in o.attrs){let i=[{expr:o.attrs[":if"],node:o}];for(r++;r<t.length&&typeof t[r]!="string"&&":elseif"in t[r].attrs;){let c=t[r];i.push({expr:c.attrs[":elseif"],node:c}),r++}r<t.length&&typeof t[r]!="string"&&":else"in t[r].attrs&&(i.push({node:t[r]}),r++),s.appendChild(xt(i,e,n));continue}s.appendChild(W(o,e,n)),r++}return s},Tt=(t,e)=>U(t.template,e,N(e)),vt=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),Nt=/<([A-Za-z][\w-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)\/>/g,_t=/(<script[\s\S]*?<\/script\s*>|<style[\s\S]*?<\/style\s*>)/gi,Ot=t=>t.split(_t).map((e,n)=>n%2===1?e:e.replace(Nt,(s,r,o)=>vt.has(r.toLowerCase())?s:`<${r}${o}></${r}>`)).join(""),Lt=t=>{let n=new DOMParser().parseFromString(`<template>${Ot(t)}</template>`,"text/html").querySelector("template"),s=[],r=[],o=[];return Array.from(n.content.children).forEach(i=>{let c={attrs:rt(i),content:i.textContent??""};i.tagName==="SCRIPT"?s.push(c):i.tagName==="STYLE"?r.push(c):o.push(ot(i))}),{template:o,scripts:s,styles:r}},q=t=>/\.html?([?#]|$)/.test(t)?C.fetch(t):import(t),M=new Map,At=t=>{let e=M.get(t);if(!e){let n=document.createElement("style");n.textContent=t,document.head.appendChild(n),e={el:n,count:0},M.set(t,e)}e.count++},jt=t=>{let e=M.get(t);e&&--e.count<=0&&(e.el.remove(),M.delete(t))},ct={$:T,$$:A,$create:j,$reactive:O},Dt=(t,e,n,s={},r=q)=>{let o={...ct,...s},i=new Proxy(e,{has:(l,d)=>d!=="$__effect"&&d!=="$__import"&&(Reflect.has(l,d)||!(d in globalThis)&&!(d in o))});new Function("$scope","$__effect","$__import",...Object.keys(o),`return (async () => { with ($scope) { ${t} } })()`)(i,n,r,...Object.values(o)).catch(l=>console.error("jq79: error in :setup script",l))},Mt=t=>t&&t.default!==void 0?t.default:t,Pt=(t,e,n,s={},r=q)=>{let o={...ct,...s},i={},c=new Function("$__exports","$__default","$__import",...Object.keys(o),`return (async () => { "use strict";
+${t}
+;$__exports.done = true })()`)(i,Mt,r,...Object.values(o)),l=a=>console.error("jq79: error in factory script",a),d=!1,f=()=>{if(d)return;d=!0;let a=i.default;if(typeof a!="function")return;let p=h=>{h&&typeof h=="object"&&Object.assign(e,h)},m=a({$data:e,$effect:n,...s});m instanceof Promise?m.then(p).catch(l):p(m)};c.then(f,l),i.done&&f()},C=class t{constructor(e,n={}){S(this,"template");S(this,"scripts");S(this,"styles");S(this,"modules");S(this,"data",null);S(this,"fx",null);S(this,"content",null);S(this,"startMarker",null);S(this,"endMarker",null);S(this,"styleEls",[]);S(this,"ownsSharedStyles",!1);S(this,"useShadow",!1);S(this,"mountRoot",null);S(this,"resolveMounted",null);S(this,"emitListeners",new Map);let s=typeof e=="string"?Lt(e):e;this.template=s.template,this.scripts=s.scripts,this.styles=s.styles,this.modules=n.modules??(typeof e=="string"?void 0:e.modules)}static async fetch(e){let n=await fetch(e);if(!n.ok)throw new Error(`failed to fetch component from ${e}: ${n.status}`);return new t(await n.text())}on(e,n){return this.emitListeners.has(e)||this.emitListeners.set(e,new Set),this.emitListeners.get(e).add(n),this}off(e,n){return this.emitListeners.get(e)?.delete(n),this}render(e={}){return this.renderWith(e,!1)}renderShadow(e={}){return this.renderWith(e,!0)}renderWith(e,n){this.destroy();let s=O({...e}),r=N(s);this.data=s,this.fx=r,this.useShadow=n,this.startMarker=document.createComment("jq79"),this.endMarker=document.createComment("/jq79");let o=this.startMarker,i=(u,y)=>{let b=new CustomEvent(u,{detail:y,bubbles:!0,composed:!0}),R=o.dispatchEvent(b);return o===this.startMarker&&this.emitListeners.get(u)?.forEach(E=>E(b,y)),R},c,l=new Promise(u=>{c=u});this.resolveMounted=c;let d=()=>l,f=this.endMarker,a=u=>{let y=[];for(let b=o.nextSibling;b&&b!==f;b=b.nextSibling)b instanceof Element&&(b.matches(u)&&y.push(b),y.push(...Array.from(b.querySelectorAll(u))));return y},p=u=>a(u)[0]??null,m=this.modules,h=u=>m&&u in m?Promise.resolve(m[u]):q(u);this.scripts.forEach(u=>{let y={$emit:i,$mounted:d,$self:p,$$self:a},b=tt(u.content);if(b!==null){let $=":mounted"in u.attrs?`await $mounted();
+${b}`:b;Pt($,s,r.effect,y,h);return}let{vars:R,code:E}=Q(u.content);R.forEach($=>{$ in s||(s[$]=void 0)});let _=":mounted"in u.attrs?`await $mounted();
+${E}`:E;Dt(_,s,r.effect,y,h)});let g=document.createDocumentFragment();return g.append(this.startMarker,U(this.template,s,r),this.endMarker),this.content=g,n?this.styleEls=this.styles.map(u=>{let y=document.createElement("style");return y.textContent=u.content,y}):(this.styles.forEach(u=>At(u.content)),this.ownsSharedStyles=!0),this}mount(e,n){let s=typeof e=="string"?T(e):e;if(!s)throw new Error(`mount target not found: ${e}`);return(!this.content||n!==void 0)&&this.renderWith(n??{},this.useShadow),this.attach(s)}mountShadow(e,n){let s=typeof e=="string"?T(e):e;if(!s)throw new Error(`mount target not found: ${e}`);return(!this.content||n!==void 0||!this.useShadow)&&this.renderWith(n??{},!0),this.attach(s)}attach(e){this.mountRoot&&this.detach();let n=this.useShadow&&e instanceof Element?e.shadowRoot??e.attachShadow({mode:"open"}):e;return this.useShadow&&this.styleEls.forEach(s=>n.appendChild(s)),n.appendChild(this.content),this.mountRoot=n,this.resolveMounted?.(),this}detach(){if(!this.mountRoot||!this.content||!this.startMarker||!this.endMarker)return this;let e=this.startMarker;for(;e;){let n=e.nextSibling;if(this.content.appendChild(e),e===this.endMarker)break;e=n}return this.mountRoot=null,this}destroy(){return this.detach(),this.fx?.dispose(),this.fx=null,this.styleEls.forEach(e=>e.parentNode?.removeChild(e)),this.styleEls=[],this.ownsSharedStyles&&(this.styles.forEach(e=>jt(e.content)),this.ownsSharedStyles=!1),this.content=null,this.startMarker=null,this.endMarker=null,this.data=null,this.resolveMounted=null,this}},kt=t=>new C(t);0&&(module.exports={$,$$,$create,$reactive,Component79,parseComponent,renderComponent});
 //# sourceMappingURL=jq79.cjs.map