@twobirds/microcomponents 0.11.0 → 0.13.0

package/dist/cli/preview.d.ts

@@ -42,7 +42,9 @@ export declare function createPreviewServer(projectRoot: string, port: number, o
  *
  * @param projectRoot Project root (defaults to the current directory).
  * @param port Preview-server port.
+ * @param host Bind address. Defaults to loopback, so a preview server is not reachable off
+ *   the machine. Pass an interface address to serve the LAN.
  * @returns The process exit code (the server keeps running until killed).
  */
-export declare function runPreview(projectRoot?: string, port?: number): Promise<number>;
+export declare function runPreview(projectRoot?: string, port?: number, host?: string): Promise<number>;
 //# sourceMappingURL=preview.d.ts.map

package/dist/cli/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/cli/preview.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AAMjG;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKvF;AA6BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAW,GAAG,MAAM,CAKhG;AAED;;;;;;GAMG;AAEH,wBAAsB,UAAU,CAC/B,WAAW,GAAE,MAAsB,EACnC,IAAI,GAAE,MAAa,GACjB,OAAO,CAAC,MAAM,CAAC,CAOjB"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/cli/preview.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AAMjG;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKvF;AA6BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAW,GAAG,MAAM,CAKhG;AAED;;;;;;;;GAQG;AAEH,wBAAsB,UAAU,CAC/B,WAAW,GAAE,MAAsB,EACnC,IAAI,GAAE,MAAa,EACnB,IAAI,GAAE,MAAoB,GACxB,OAAO,CAAC,MAAM,CAAC,CAUjB"}

package/dist/cli/writeScaffold.d.ts

@@ -55,12 +55,12 @@ namespace under a project root, creating nested folders as needed.
 const written = await writeProject('mc', 'mc-app');
 console.log(written);
 ```
-@param namespace - 1 to 4 lowercase letters.
+@param namespace - lowercase letters and digits, starting with a letter, any length.
 @param root - Directory to create the project in (e.g. `mc-app`).
 @param options - Whether to overwrite existing files.
 @returns The written file paths, relative to `root`.
-@throws If `namespace` is not 1 to 4 lowercase letters, or a target file exists and
-`force` is false.
+@throws If `namespace` is not lowercase letters and digits starting with a letter, or
+a target file exists and `force` is false.
 */
 export declare function writeProject(namespace: string, root: string, options?: WriteOptions): Promise<string[]>;
 //# sourceMappingURL=writeScaffold.d.ts.map

package/dist/docs/api-external.d.ts

@@ -14,7 +14,9 @@ event delegation is untouched by that.
 ## Talking to micro components from vanilla JS
 
 `on()` and `trigger()` are the two ends of the wire. A custom event name is prefixed
-with `_mc` automatically, so the same name works on both sides:
+with `_mc` automatically, so the same name works on both sides. A project-level prefix
+(`shop:CartUpdate`) is optional here, and worth adding when the dispatching code is not
+yours — it keeps an unrelated `CartUpdate` from the page from reaching your handler:
 
 ```js
 import { on, trigger } from '@twobirds/microcomponents';
@@ -83,11 +85,18 @@ form.subscribe('email', (v) => console.log('email is now', v));
 formValues(form, 'email', document.querySelector('input[name=email]'));
 ```
 
+These are the standalone APIs, for code with no `this` to attach to. Inside a `DC` the
+plugin methods are the API: `observePlugin(DC)` gives `this.subscribe()` / `this.bind()` /
+`this.notify()`, and `formValuePlugin(DC)` gives `this.formValues()` — never call the pure
+functions inside a component.
+
 ## No-build pages
 
 `autoload(true)` makes a page load its own components: an undefined tag in the markup
 resolves to a script URL by the tag-to-path rule (`<shop-header>` → `shop/header.js`)
-and is fetched on demand. A dev page needs only an import map and one call.
+and is fetched on demand. A dev page needs one call and one import of the library URL
+the dev server serves — no import map, because the toolchain resolves the
+`@twobirds/microcomponents` specifier for it.
 
 ## Implementation priority
 

package/dist/docs/api-external.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-external.d.ts","sourceRoot":"","sources":["../../src/docs/api-external.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmGE"}
+{"version":3,"file":"api-external.d.ts","sourceRoot":"","sources":["../../src/docs/api-external.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GE"}

package/dist/docs/cli.d.ts

@@ -101,7 +101,7 @@ mc check
 Reports the version of the installed library, not the version of the project it runs in.
 
 ```sh
-mc --version      # 0.11.0
+mc --version      # 0.13.0
 ```
 
 ## mc --help

package/dist/docs/installation.d.ts

@@ -4,8 +4,11 @@
 
 `mc create` scaffolds a complete dev environment for a namespace, following the
 three-path chain the library's own demos use. Run it straight with `npx` — no install.
-The namespace (1 to 4 lowercase letters) becomes the `src/<ns>/` folder and the first
-segment of every component tag, so `shop` is the home of tags like `<shop-app>`.
+The namespace (lowercase letters and digits, starting with a letter, any length)
+becomes the `src/<ns>/` folder and the first segment of every component tag, so `shop`
+is the home of tags like `<shop-app>`. The project owns its namespace, so length is
+allowed; past 5 characters `mc create` warns and asks for confirmation (`--yes` skips
+the prompt).
 
 ```sh
 npx @twobirds/microcomponents create --namespace shop
@@ -69,6 +72,8 @@ Companion asset flags:
 | `--html` | html | unvariant light-DOM template |
 
 `--js` emits plain JavaScript for rapid prototyping; `--dry-run` prints the plan without
-touching disk; `--force` overwrites existing files.
+touching disk; `--force` overwrites existing files. A plain `.js` component is copied to
+`build/` verbatim by `mc dev` and `mc bundle` — `tsc` compiles only `.ts`, so it gets no
+type checking and no `.d.ts`, and it autoloads and bundles like a compiled component.
 */
 //# sourceMappingURL=installation.d.ts.map

package/dist/docs/installation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"installation.d.ts","sourceRoot":"","sources":["../../src/docs/installation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CE"}
+{"version":3,"file":"installation.d.ts","sourceRoot":"","sources":["../../src/docs/installation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CE"}

package/dist/helpers.min.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i,a=!1){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}return n.addEventListener(e(n,r),i,{capture:!1,once:a}),i}}var n=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function r(t,i,a={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>r(e,i,a,o));return}let c=/^_mc/.test(i)?i:e(t,i),l=s||new n,u=new CustomEvent(c,{detail:{data:a,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&r(t.parentElement,c,a,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)r(e,c,a,`ld`)})}function i(){return typeof window<`u`&&window.document!==void 0}function a(e){return typeof e==`object`&&!!e&&e.constructor===Object}function o(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],s=e[i];a(s)?t[i]=o(s):t[i]=s}return t}function s(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=s(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?o(n):n}function c(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!c(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!c(n[t],r[t]))return!1}return!0}function l(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?a(i)?l(r.slice(1),i):void 0:i}function u(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=u(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=l(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>u(e,t));else if(a(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=u(n[e],t))})}return e}function d(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function f(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function p(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function m(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function h(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var g=new WeakMap;function _(e,t){let n=g.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),g.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function v(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:_(document,t[i]);break;case`targetCss`:_(document,t[i]);break;case`shadowCss`:_(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],b(r,e);break;case`targetHtml`:n.innerHTML=t[i],b(n,e);break}})}function y(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function b(e,n){let i=[...e.querySelectorAll(`*`)];for(let e of i){if(!(e instanceof HTMLElement))continue;let i=[...e.attributes];for(let a of i){let i=a.name.toLowerCase();if(!(`on`+i in e))continue;let o=a.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(a.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?t(e,i,()=>n.trigger(c,u)):t(e,i,()=>r(s,c,u))}}}export{b as bindTemplateEvents,h as copyGettersSetters,p as debounce,c as deepEqual,s as flattenObject,m as htmlToElements,_ as injectCSS,i as isBrowser,a as isNativeObject,d as kebabToPascal,y as loadAssets,l as nameSpace,u as parse,f as pascalToKebab,v as processAssets,o as sortObject};

package/dist/mcp/api.json

@@ -1,6 +1,6 @@
 {
-  "libraryVersion": "0.11.0",
-  "exportedCount": 57,
+  "libraryVersion": "0.13.0",
+  "exportedCount": 59,
   "entries": {
     "MC": {
       "name": "MC",
@@ -358,6 +358,16 @@
         }
       ]
     },
+    "makePlaceholders": {
+      "name": "makePlaceholders",
+      "kind": "function",
+      "group": "State",
+      "file": "src/state/placeholders.ts",
+      "signatures": [
+        "export function makePlaceholders(element: HTMLElement | DocumentFragment | ShadowRoot): void {"
+      ],
+      "description": "Applies placeholder support to an element and its descendants.\n\nThis function scans the provided target for elements containing placeholders\nand attaches a `Placeholders` controller instance to each one if not already present."
+    },
     "getMcEventName": {
       "name": "getMcEventName",
       "kind": "function",
@@ -614,6 +624,22 @@
         }
       ]
     },
+    "pascalToKebab": {
+      "name": "pascalToKebab",
+      "kind": "function",
+      "group": "Helpers",
+      "file": "src/utils/helpers.ts",
+      "signatures": [
+        "export function pascalToKebab(str: string) {"
+      ],
+      "description": "Converts a PascalCase string to kebab-case.\nExample: 'MyComponentName' -> 'my-component-name'",
+      "examples": [
+        {
+          "title": "",
+          "code": "console.log(pascalToKebab('MyElement'));"
+        }
+      ]
+    },
     "debounce": {
       "name": "debounce",
       "kind": "function",

package/dist/mcp/concepts/event-system.md

@@ -45,6 +45,26 @@ Pass an object, not a bare string, so the receiver reads named fields (`ev.detai
 and the flow stays readable as the payload grows. Declare the events on the component's event
 map (`EM` on `DC`) so the payload type is inferred at both ends.
 
+## Naming events
+
+Inside a project, event names are plain: `add`, `toggle`, `addToCart`. Nothing else in
+the project dispatches them, so there is nothing to collide with and a namespace buys
+nothing. The runtime's own `_mc` prefix (`getMcEventName`, `trueEventName`) is applied
+for you — it marks the events the library dispatches (`_mcConnected`, `_mcFormReset`) so
+they cannot collide with native names. It is not a project convention.
+
+Namespace a name when a collision is likely:
+
+- **From outside the project** — a framework, a page script, or a third-party addon DC
+  dispatching into your components. `shop:addToCart` keeps an unrelated `addToCart` from
+  landing on the wrong handler.
+- **Several DCs in one component** — two DCs attached to the same host dispatching the
+  same name for different purposes. The namespace is the tie-breaker.
+
+The decision is collision likelihood, not style. An i18n (DOM translation) addon DC in a
+component is almost certainly the only translator there, so `translate` needs no
+namespace; a generic `update` shared by three addons does.
+
 ## Payload & propagation
 
 MC-triggered custom events and lifecycle events are `McEvent<D>` — a `CustomEvent` whose `detail` is `{ data, control }`. The payload is always read from `ev.detail.data`, never `ev.data`.

package/dist/mcp/concepts/mc-types.md

@@ -124,14 +124,15 @@ the namespaced variables of their composed parent.
 Each custom element (`.ts`/`.js`) ships with optional companion files sharing the same
 base name. The suffix encodes the structural sub-pattern (§1a–1b) and the styling target.
 
-| Suffix         | Purpose                                                               | Styling Target                                       |
-| -------------- | --------------------------------------------------------------------- | ---------------------------------------------------- |
-| `.css`         | CSS custom properties (variable defaults) only — no structural styles | N/A (token definitions)                              |
-| `.target.css`  | Structural style rules for target DOM (`innerHTML`)                   | Global document scope via `injectCSS(document, ...)` |
-| `.shadow.css`  | Structural style rules for shadow DOM                                 | Shadow root via `injectCSS(shadowRoot, ...)`         |
-| `.target.html` | HTML template injected into `this.target.innerHTML`                   | N/A (markup)                                         |
-| `.shadow.html` | HTML template injected into `shadowRoot.innerHTML`                    | N/A (markup)                                         |
-| `.json`        | Static data files imported by the component                           | N/A (data)                                           |
+| Suffix         | Purpose                                                                 | Styling Target                                       |
+| -------------- | ----------------------------------------------------------------------- | ---------------------------------------------------- |
+| `.css`         | CSS custom properties (variable defaults) only — no structural styles   | N/A (token definitions)                              |
+| `.target.css`  | Structural style rules for target DOM (`innerHTML`)                     | Global document scope via `injectCSS(document, ...)` |
+| `.shadow.css`  | Structural style rules for shadow DOM                                   | Shadow root via `injectCSS(shadowRoot, ...)`         |
+| `.target.html` | HTML template injected into `this.target.innerHTML`                     | N/A (markup)                                         |
+| `.shadow.html` | HTML template injected into `shadowRoot.innerHTML`                      | N/A (markup)                                         |
+| `.html`        | HTML template loaded as a plain string; the component injects it itself | N/A (markup)                                         |
+| `.json`        | Static data files imported by the component                             | N/A (data)                                           |
 
 Companion files follow the same directory structure as their source file. A component at
 `src/shop/sidebar.ts` has companions at `src/shop/sidebar.target.html`,
@@ -139,6 +140,12 @@ Companion files follow the same directory structure as their source file. A comp
 `loadAssets()` / `processAssets()`; keep the `.ts` source focused on logic only —
 constructor, lifecycle, event handlers, state.
 
+**Declarative attributes are bound by the asset pipeline for `targetHtml` and `shadowHtml`
+only.** `processAssets()` calls `bindTemplateEvents()` after injecting those two. A plain
+`html` asset arrives as a string and is injected by the component, so its `click=` / `change=`
+attributes are inert until the component binds them itself — `oneInit()` calls
+`bindTemplateEvents(this.target, this)` right after the parse, as `<todo-item>` does.
+
 ### Inline Templates — Escape Hatch
 
 A simple `const template` string constant is allowed **only** when the component has no

package/dist/mcp/concepts/no-importmap.md

@@ -0,0 +1,48 @@
+Never write an import map in a Micro Components project. An import map is a table of
+bare specifiers a page has to hand-list. In this library the system resolves imports
+itself, in both delivery modes, so a page carrying an import map is doing the
+system's job by hand.
+
+## Autoload mode
+
+`autoload()` watches the DOM and fetches a component by its tag name. An undefined tag
+in the markup becomes a script request: `<shop-header>` → `./shop/header.js`
+(`resolveComponentPath`, the same rule `mc new` uses to place the file — see
+[custom-element-registry](custom-element-registry.md) §Tag Name to File Path Mapping).
+The page never imports a component, so an import map has nothing to describe: the tag
+in the markup _is_ the import.
+
+The library specifier is resolved by the toolchain, not by the page:
+
+| Context                     | How `@twobirds/microcomponents` resolves                                                               |
+| --------------------------- | ------------------------------------------------------------------------------------------------------ |
+| Vite dev server (the demos) | `resolve.alias` to the library source, set in `demo/dev-server.ts`                                     |
+| `mc dev`                    | the server rewrites the specifier in the JS it serves to `/microcomponents.min.js`                     |
+| `mc bundle`                 | `rewriteLibrarySpecifier` points the import at the `microcomponents.min.js` shipped next to the bundle |
+
+The dev shell imports the library by URL (`/microcomponents.min.js`), so the page needs
+no table of its own. `rewriteLibrarySpecifier` is the single source of truth for the
+rewrite: the bundler passes the relative target, the dev server passes its served URL.
+
+## Bundled mode
+
+`bundle.js` contains every component the barrel registers, with companion assets
+inlined by `mc bundle`. Every tag is in the custom element registry before the page
+renders, so a tag that appears in the DOM is upgraded immediately: its constructor
+runs, its assets are already readable through `this.assets`, and `oneInit()` fires
+synchronously. Nothing is fetched, so nothing is mapped.
+
+A component missing from the barrel `src/<namespace>/bundle.ts` is the one gap: it
+loads in dev through `autoload()` and is absent from `public/bundle.js`. Fix the
+barrel, not the HTML.
+
+## The rule
+
+- A component import is never written by hand. Autoload mode fetches it per tag;
+  bundled mode already contains it.
+- The library specifier is resolved by the toolchain — Vite alias, dev-server rewrite,
+  bundler rewrite — never by an import map in the page.
+- If a page needs an import map, a resolution step is missing. Fix the server, the
+  alias, or the bundle. Do not add a `<script type="importmap">`.
+
+See [project-layout](project-layout.md) for the two shells that carry these modes.

package/dist/mcp/concepts/project-layout.md

@@ -8,8 +8,9 @@ src/  →  (tsc)  →  build/  →  (bundle)  →  public/
   `.target.html` / `.target.css` / `.shadow.css` assets, the dev shell
   (`index-dev.html`) and the production shell (`index.html`).
 - `build/` is the `tsc` output: one `.js` per component at its own autoload path,
-  plus the mirrored companion assets and the dev shell. `mc dev` serves it, so
-  the page loads components on demand through `autoload()` and nothing is bundled.
+  plus the files `tsc` does not compile — mirrored companion assets, plain `.js`
+  components, and the dev shell. `mc dev` serves it, so the page loads components
+  on demand through `autoload()` and nothing is bundled.
 - `public/` is the production site: one `bundle.js` with every companion asset
   inlined by `mc bundle`, the concatenated `bundle.css`, and the production
   shell. A single script tag loads it; the autoloader is not needed.
@@ -28,9 +29,12 @@ entry, so every component must be imported by the barrel `src/<namespace>/bundle
 
 The two shells are deliberately different:
 
-- `index-dev.html` imports the library through an import map (to the served
-  `microcomponents.min.js`) and calls `autoload(true)`, so a tag in the markup
-  pulls its own `.js` from `build/`.
+- `index-dev.html` imports the library from the served `/microcomponents.min.js` and
+  calls `autoload(true)`, so a tag in the markup pulls its own `.js` from `build/`.
+  The page writes no import map: the dev server rewrites the
+  `@twobirds/microcomponents` specifier in the JS it serves to that URL, so a
+  compiled component resolves the library without the page listing any imports.
+  See [no-importmap](no-importmap.md).
 - `index.html` loads `bundle.js` and `bundle.css`, which only exist in `public/`.
 
 `mc dev` redirects `/` to `index-dev.html`; `mc bundle` copies `index.html` next to

package/dist/mcp/concepts/state-management.md

@@ -1,14 +1,20 @@
-State management uses observable objects with reactive binding. Two usage patterns exist:
+State management uses observable objects with reactive binding. Which API you use is
+decided by where the code lives, and that is a rule, not a preference:
 
-**Standalone functions** (outside MC ecosystem):
+**Inside a `DC`** — always the plugin equivalents:
 
-- observe(obj) — wraps properties in Observable wrappers; you manage subscribe/bind/notify manually
-- formValues(obj, prop, dom) — binds form controls to an observable property on the object
+- `observePlugin(DC)` — adds `.notify()`, `.subscribe()`, `.bind()` instance methods that implicitly create observables on demand
+- `formValuePlugin(DC)` — adds `.formValues()` instance method; also pulls in all `observePlugin` methods
 
-**Plugins** (inside DC custom elements):
+**Outside the MC system** — the pure functions, for code with no `this` to attach to
+(vanilla JS, framework lifecycle code, Node):
 
-- observePlugin(DC) — adds .notify(), .subscribe(), .bind() instance methods that implicitly create observables on demand
-- formValuePlugin(DC) — adds .formValues() instance method; also pulls in all observePlugin methods
+- `observe(obj)` — wraps properties in Observable wrappers; you manage subscribe/bind/notify manually
+- `formValues(obj, prop, dom)` — binds form controls to an observable property on the object
+
+Never call `observe()` or `formValues()` inside a `DC`. The plugin methods create the same
+wrapper, chain, and keep the `keyof this & string` typing contract; a pure call inside a
+component puts the observable outside the class's typed surface.
 
 Key behaviors:
 

package/dist/microcomponents.d.ts

@@ -6,4 +6,5 @@ export * from './utils/events.js';
 export * from './core/elements.js';
 export * from './state/observables.js';
 export * from './state/formValues.js';
+export * from './state/placeholders.js';
 //# sourceMappingURL=microcomponents.d.ts.map

package/dist/microcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}

package/dist/microcomponents.js

@@ -2987,4 +2987,4 @@ formValues: function(target, propName) {
 	} });
 }
 //#endregion
-export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, nameSpace, observe, observePlugin, off, on, one, parse, pascalToKebab, processAssets, sortObject, trigger, trueEventName };
+export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, makePlaceholders, nameSpace, observe, observePlugin, off, on, one, parse, pascalToKebab, processAssets, sortObject, trigger, trueEventName };

package/dist/microcomponents.min.js

@@ -1 +1 @@
-function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?c(i)?f(r.slice(1),i):void 0:i}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>p(e,t));else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function g(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var v=new WeakMap;function y(e,t){let n=v.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),v.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function b(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:y(document,t[i]);break;case`targetCss`:y(document,t[i]);break;case`shadowCss`:y(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],S(r,e);break;case`targetHtml`:n.innerHTML=t[i],S(n,e);break}})}function x(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function S(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function C(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function te(e,t,n={}){let r=e;`_mc`in e||(r._mc=new O(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function ne(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function w(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function T(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function re(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function E(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var D=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof O&&this.constructor!==O&&T(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=x(t._originalTag||(this instanceof O?this.target.tagName.toLowerCase():h(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},ie=class extends D{constructor(e){super(e)}},O=class e extends D{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){b(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{b(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),w(this)}):w(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return te(e,t,n)}static remove(e,t){ne(e,t)}static get(e,t,n){if(!C(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=E(this.target,e);for(;n;)t.push(n),n=E(n.target,e);return t}closest(e){return E(this.target,e)}children(e){let t=re(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function k(e){return e.split(`-`).join(`/`)}function A(e){return`./`+k(e)+`.js`}var j=new Set;function M(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc~="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{O.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!C(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function N(e){if(j.has(e))return;j.add(e);let t=A(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(M(e)),n.addEventListener(`load`,t=>{j.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,n=>{console.error(`could not load DC code from`,t),j.delete(e)}),document.head.append(n)}function P(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!j.has(e.tagName.toLowerCase())).forEach(e=>{N(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!j.has(e)&&!t?N(e):t&&M(e)()})})}var F=null,I=null;function L(e=!0){return e?F?!0:(F=new MutationObserver(P),I=setTimeout(()=>{I=null,F&&(F.observe(document.body,{childList:!0,subtree:!0}),P())},5),window.autoload??=L,!0):(I&&=(clearTimeout(I),null),F&&=(F.disconnect(),null),j.clear(),!1)}L.state=j;function ae(e,t){return Object.defineProperty(t,"name",{value:e})}function oe(e){return class extends e{constructor(...e){super(...e)}}}function R(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof D))return customElements.define(e,t),t;let o=ae(a,class extends oe(i){constructor(e){super(),r||this.attachInternals(),O.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return r||(o.formAssociated=!0),customElements.define(e,o,{extends:r}),R.list||=[],R.list.push(e),o}function z(e){return customElements.get(e)}function B(){return R.list??[]}function V(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var H=[`INPUT`,`SELECT`,`TEXTAREA`],U=class extends O{data={};#e=``;#t=!1;constructor(e){super(e),V(e).forEach(e=>this.data[e]=``),X(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!H.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function W(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!V(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function G(e){W(e).forEach(e=>{e?._mc?._placeholders||O.add(e,`_placeholders`,new U(e))})}function K(e){return typeof e==`object`&&!!e}var q={};function se(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],K(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!s())return this;if(K(this.valueOf())){G(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=K(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return q[n]=r,r}function J(e){return q[e.constructor.name]||se(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(K(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(K(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(O);var ce=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]].filter(t=>t.getAttribute(`value`)===e).shift();t&&(t.checked=!0)}},ue=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},de=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},fe=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},pe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},me=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(ce(e)){case`input`:switch(e.type){case`radio`:r=new le(e);break;case`checkbox`:r=new ue(e);break;default:r=new de(e)}break;case`select`:r=new fe(e);break;case`textarea`:r=new pe(e);break}if(r){let i=r;O.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=me(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function he(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,O as DC,ie as MC,D as McBase,L as autoload,S as bindTemplateEvents,_ as copyGettersSetters,g as debounce,d as deepEqual,R as defineCE,u as flattenObject,he as formValuePlugin,$ as formValues,z as getCE,e as getMcEventName,ee as htmlToElements,y as injectCSS,Y as isAlreadyObserved,s as isBrowser,C as isMcHost,c as isNativeObject,m as kebabToPascal,B as listCE,x as loadAssets,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,h as pascalToKebab,b as processAssets,l as sortObject,o as trigger,t as trueEventName};
+function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?c(i)?f(r.slice(1),i):void 0:i}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>p(e,t));else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function g(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var v=new WeakMap;function y(e,t){let n=v.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),v.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function b(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:y(document,t[i]);break;case`targetCss`:y(document,t[i]);break;case`shadowCss`:y(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],S(r,e);break;case`targetHtml`:n.innerHTML=t[i],S(n,e);break}})}function x(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function S(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function C(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function w(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function te(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function T(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function E(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function ne(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function D(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var O=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof k&&this.constructor!==k&&E(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=x(t._originalTag||(this instanceof k?this.target.tagName.toLowerCase():h(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},re=class extends O{constructor(e){super(e)}},k=class e extends O{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){b(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{b(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),T(this)}):T(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return w(e,t,n)}static remove(e,t){te(e,t)}static get(e,t,n){if(!C(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=D(this.target,e);for(;n;)t.push(n),n=D(n.target,e);return t}closest(e){return D(this.target,e)}children(e){let t=ne(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function A(e){return e.split(`-`).join(`/`)}function j(e){return`./`+A(e)+`.js`}var M=new Set;function N(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc~="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!C(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function P(e){if(M.has(e))return;M.add(e);let t=j(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(N(e)),n.addEventListener(`load`,t=>{M.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,n=>{console.error(`could not load DC code from`,t),M.delete(e)}),document.head.append(n)}function F(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!M.has(e.tagName.toLowerCase())).forEach(e=>{P(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!M.has(e)&&!t?P(e):t&&N(e)()})})}var I=null,L=null;function R(e=!0){return e?I?!0:(I=new MutationObserver(F),L=setTimeout(()=>{L=null,I&&(I.observe(document.body,{childList:!0,subtree:!0}),F())},5),window.autoload??=R,!0):(L&&=(clearTimeout(L),null),I&&=(I.disconnect(),null),M.clear(),!1)}R.state=M;function ie(e,t){return Object.defineProperty(t,"name",{value:e})}function ae(e){return class extends e{constructor(...e){super(...e)}}}function z(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof O))return customElements.define(e,t),t;let o=ie(a,class extends ae(i){constructor(e){super(),r||this.attachInternals(),k.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return r||(o.formAssociated=!0),customElements.define(e,o,{extends:r}),z.list||=[],z.list.push(e),o}function oe(e){return customElements.get(e)}function B(){return z.list??[]}function V(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var H=[`INPUT`,`SELECT`,`TEXTAREA`],U=class extends k{data={};#e=``;#t=!1;constructor(e){super(e),V(e).forEach(e=>this.data[e]=``),X(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!H.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function W(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!V(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function G(e){W(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new U(e))})}function K(e){return typeof e==`object`&&!!e}var q={};function se(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],K(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!s())return this;if(K(this.valueOf())){G(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=K(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return q[n]=r,r}function J(e){return q[e.constructor.name]||se(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(K(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(K(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(k);var ce=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]].filter(t=>t.getAttribute(`value`)===e).shift();t&&(t.checked=!0)}},ue=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},de=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},fe=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},pe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},me=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(ce(e)){case`input`:switch(e.type){case`radio`:r=new le(e);break;case`checkbox`:r=new ue(e);break;default:r=new de(e)}break;case`select`:r=new fe(e);break;case`textarea`:r=new pe(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=me(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function he(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,re as MC,O as McBase,R as autoload,S as bindTemplateEvents,_ as copyGettersSetters,g as debounce,d as deepEqual,z as defineCE,u as flattenObject,he as formValuePlugin,$ as formValues,oe as getCE,e as getMcEventName,ee as htmlToElements,y as injectCSS,Y as isAlreadyObserved,s as isBrowser,C as isMcHost,c as isNativeObject,m as kebabToPascal,B as listCE,x as loadAssets,G as makePlaceholders,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,h as pascalToKebab,b as processAssets,l as sortObject,o as trigger,t as trueEventName};

package/dist/placeholders.min.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function f(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var p=new WeakMap;function m(e,t){let n=p.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),p.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function h(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:m(document,t[i]);break;case`targetCss`:m(document,t[i]);break;case`shadowCss`:m(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],_(r,e);break;case`targetHtml`:n.innerHTML=t[i],_(n,e);break}})}function g(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function _(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function v(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function y(e,t,n={}){let r=e;`_mc`in e||(r._mc=new E(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function b(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function x(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function S(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function C(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function w(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var T=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof E&&this.constructor!==E&&S(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=g(t._originalTag||(this instanceof E?this.target.tagName.toLowerCase():d(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},E=class e extends T{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){h(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{h(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),x(this)}):x(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return y(e,t,n)}static remove(e,t){b(e,t)}static get(e,t,n){if(!v(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=w(this.target,e);for(;n;)t.push(n),n=w(n.target,e);return t}closest(e){return w(this.target,e)}children(e){let t=C(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function D(e){return typeof e==`object`&&!!e}var O={};function k(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],D(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!o())return this;if(D(this.valueOf())){L(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=D(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return O[n]=r,r}function A(e){return O[e.constructor.name]||k(e)}function j(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function M(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!j(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(A(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(D(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(D(a.valueOf())&&!(a.valueOf()instanceof Array))j(a)||(a=new(A(e))(structuredClone(Object.assign({},e))),f(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(A(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function N(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var P=[`INPUT`,`SELECT`,`TEXTAREA`],F=class extends E{data={};#e=``;#t=!1;constructor(e){super(e),N(e).forEach(e=>this.data[e]=``),M(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!P.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function I(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!N(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function L(e){I(e).forEach(e=>{e?._mc?._placeholders||E.add(e,`_placeholders`,new F(e))})}export{L as makePlaceholders};

package/dist/state/index.d.ts

@@ -7,4 +7,6 @@ export { observe, observePlugin, isAlreadyObserved } from './observables.js';
 export type { Observable, Callback, Observed, ObservedKey, Unobserved } from './observables.js';
 /** @group State */
 export { formValues, formValuePlugin } from './formValues.js';
+/** @group State */
+export { makePlaceholders } from './placeholders.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;EAEE;AACF,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,mBAAmB;AACnB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;EAEE;AACF,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,mBAAmB;AACnB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}