@vielzeug/craftit 1.0.1 → 2.0.1

package/dist/craftit.js

@@ -1,580 +1,2 @@
-const d = /* @__PURE__ */ new Map(), b = (r) => {
-  if (d.has(r)) return d.get(r);
-  const t = r.replace(/-([a-z])/g, (e, s) => s.toUpperCase());
-  return d.set(r, t), t;
-}, f = /* @__PURE__ */ new Map(), l = (r) => {
-  if (f.has(r)) return f.get(r);
-  const t = r.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
-  return f.set(r, t), t;
-}, y = (r) => {
-  const t = document.createElement("template");
-  return t.innerHTML = r.trim(), t.content;
-}, g = async (r) => {
-  if (r instanceof CSSStyleSheet) return r;
-  const t = new CSSStyleSheet();
-  return await t.replace(r), t;
-}, p = (r, t) => {
-  const e = { ...r }, s = /* @__PURE__ */ new WeakMap(), i = (n) => {
-    if (n == null || typeof n != "object" || n instanceof Node)
-      return n;
-    const o = s.get(n);
-    if (o)
-      return o;
-    const a = new Proxy(n, {
-      get(c, h) {
-        const u = Reflect.get(c, h);
-        return i(u);
-      },
-      set(c, h, u) {
-        if (Reflect.get(c, h) === u) return !0;
-        const m = Reflect.set(c, h, u);
-        return typeof h == "string" && !h.startsWith("_") && t(), m;
-      }
-    });
-    return s.set(n, a), a;
-  };
-  return new Proxy(e, {
-    get(n, o) {
-      const a = Reflect.get(n, o);
-      return i(a);
-    },
-    set(n, o, a) {
-      if (Reflect.get(n, o) === a) return !0;
-      const h = Reflect.set(n, o, a);
-      return typeof o == "string" && !o.startsWith("_") && t(), h;
-    }
-  });
-};
-class A extends HTMLElement {
-  shadow;
-  state;
-  value;
-  #r = new AbortController();
-  #i = /* @__PURE__ */ new Set();
-  #a = !1;
-  #e = !1;
-  #t;
-  #s;
-  #o;
-  #n;
-  #c = /* @__PURE__ */ new Map();
-  #h = 0;
-  constructor(t) {
-    super(), this.#t = t, this.shadow = this.attachShadow({ mode: "open" }), this.state = p(t.state || {}, () => {
-      this.render(), this.notifyWatchers();
-    }), t.formAssociated && "attachInternals" in this && (this.#s = this.attachInternals()), this.initStyles(), this.initAttributes();
-  }
-  get root() {
-    return this.shadow.firstElementChild;
-  }
-  get internals() {
-    return this.#s;
-  }
-  get form() {
-    if (this.#s)
-      return {
-        /**
-         * Set validity state
-         * @example component.form.valid({ valueMissing: true }, 'Required')
-         */
-        valid: (t, e, s) => {
-          !t || Object.keys(t).length === 0 ? this.#s.setValidity({}) : this.#s.setValidity(t, e, s);
-        },
-        /**
-         * Set form value and sync with ElementInternals
-         * @example component.form.value('new value')
-         */
-        value: (t, e) => {
-          typeof t == "string" && (this.value = t), this.#s.setFormValue(t, e);
-        }
-      };
-  }
-  async initStyles() {
-    if (!this.#t.styles?.length) return;
-    const t = await Promise.all(this.#t.styles.map(g));
-    this.shadow.adoptedStyleSheets = t;
-  }
-  initAttributes() {
-    const t = this.#t.observedAttributes;
-    if (t?.length)
-      for (const e of t) {
-        const s = b(e);
-        s in this || Object.defineProperty(this, s, {
-          configurable: !0,
-          enumerable: !0,
-          get: () => {
-            const i = this.getAttribute(e);
-            return i === "" ? !0 : i;
-          },
-          set: (i) => {
-            i == null || i === !1 ? this.removeAttribute(e) : this.setAttribute(e, i === !0 ? "" : String(i));
-          }
-        });
-      }
-  }
-  notifyWatchers() {
-    for (const [, t] of this.#c)
-      try {
-        const e = t.selector(this.state);
-        e !== t.lastValue && (t.callback(e, t.lastValue), t.lastValue = e);
-      } catch {
-      }
-  }
-  /* ==================== Lifecycle Callbacks ==================== */
-  connectedCallback() {
-    this.#r.signal.aborted && (this.#r = new AbortController()), this.shadow.hasChildNodes() || this.performRender(), this.#t.onConnected?.(this);
-  }
-  disconnectedCallback() {
-    this.#t.onDisconnected?.(this), this.#r.abort();
-    for (const t of this.#i)
-      clearTimeout(t);
-    this.#i.clear();
-  }
-  attributeChangedCallback(t, e, s) {
-    e !== s && (this.#t.onAttributeChanged?.(t, e, s, this), this.render());
-  }
-  /* ==================== Form Callbacks ==================== */
-  formDisabledCallback(t) {
-    this.#t.onFormDisabled?.(t, this);
-  }
-  formResetCallback() {
-    this.#t.onFormReset?.(this);
-  }
-  formStateRestoreCallback(t, e) {
-    this.#t.onFormStateRestore?.(t, e, this);
-  }
-  /* ==================== Public API ==================== */
-  /**
-   * Schedule a render in the next animation frame
-   */
-  render() {
-    this.#a || this.#e || (this.#a = !0, this.#n || (this.#n = new Promise((t) => {
-      this.#o = t;
-    })), requestAnimationFrame(() => {
-      this.#a = !1, this.performRender(), this.#o?.(), this.#n = void 0, this.#o = void 0;
-    }));
-  }
-  /**
-   * Wait for pending render to complete
-   * @returns Promise that resolves after render finishes
-   * @example
-   * component.set({ count: 10 });
-   * await component.flush();
-   * expect(component.find('.count')?.textContent).toBe('10');
-   */
-  async flush() {
-    this.#n && await this.#n;
-  }
-  /**
-   * Update component state
-   * @param patchOrUpdater - State patch object or updater function
-   * @param options - Update options
-   * @param options.replace - Replace entire state instead of merging
-   * @param options.silent - Update without triggering render
-   * @returns Promise that resolves after update completes
-   * @example
-   * // Merge state
-   * component.set({ count: 1 });
-   *
-   * // Replace state
-   * component.set({ count: 1 }, { replace: true });
-   *
-   * // Updater function (sync)
-   * component.set(state => ({ ...state, count: state.count + 1 }));
-   *
-   * // Updater function (async)
-   * await component.set(async state => {
-   *   const data = await fetch('/api').then(r => r.json());
-   *   return { ...state, data };
-   * });
-   */
-  async set(t, e) {
-    if (typeof t == "function") {
-      const i = await Promise.resolve(t(this.state));
-      this.#e = !0;
-      for (const n of Object.keys(this.state))
-        delete this.state[n];
-      Object.assign(this.state, i), this.#e = !1, e?.silent || (this.render(), await this.flush());
-      return;
-    }
-    const s = t;
-    if (e?.replace) {
-      this.#e = !0;
-      for (const i of Object.keys(this.state))
-        delete this.state[i];
-      Object.assign(this.state, s), this.#e = !1, e.silent || this.render();
-    } else
-      e?.silent ? (this.#e = !0, Object.assign(this.state, s), this.#e = !1) : Object.assign(this.state, s);
-  }
-  /**
-   * Watch a state slice and react to changes
-   * @param selector - Function to select a slice of state
-   * @param callback - Function called when selected value changes
-   * @returns Unsubscribe function
-   * @example
-   * const unwatch = component.watch(
-   *   state => state.count,
-   *   (count, prevCount) => console.log('Count changed:', count, prevCount)
-   * );
-   * unwatch(); // Stop watching
-   */
-  watch(t, e) {
-    const s = ++this.#h, i = t(this.state);
-    this.#c.set(s, {
-      callback: e,
-      lastValue: i,
-      selector: t
-    });
-    try {
-      e(i, i);
-    } catch {
-    }
-    return () => this.#c.delete(s);
-  }
-  /**
-   * Find single element in shadow DOM
-   * @param selector - CSS selector
-   * @returns First matching element or null
-   * @example component.find<HTMLInputElement>('input[name="email"]')
-   */
-  find(t) {
-    return this.shadow.querySelector(t);
-  }
-  /**
-   * Find all matching elements in shadow DOM
-   * @param selector - CSS selector
-   * @returns Array of matching elements
-   * @example component.findAll<HTMLButtonElement>('button')
-   */
-  findAll(t) {
-    return Array.from(this.shadow.querySelectorAll(t));
-  }
-  /**
-   * Add event listener with automatic cleanup
-   *
-   * Supports event delegation for dynamic elements:
-   * - If target is a string selector, uses delegation on shadow root
-   * - Events bubble up and handler is called when target matches selector
-   * - Works for elements added after registration
-   *
-   * @param target - CSS selector or EventTarget
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @param options - Event listener options
-   *
-   * @example
-   * // Direct element binding
-   * const button = component.find('button')!;
-   * component.on(button, 'click', () => console.log('clicked'));
-   *
-   * // Delegated binding (works for dynamic elements)
-   * component.on('button', 'click', (e) => {
-   *   console.log('Button clicked:', e.target);
-   * });
-   *
-   * // Delegated with event filtering
-   * component.on('.todo-item', 'click', (e) => {
-   *   const item = e.target as HTMLElement;
-   *   console.log('Todo clicked:', item.dataset.id);
-   * });
-   */
-  on(t, e, s, i) {
-    if (typeof t == "string") {
-      const n = t, o = (a) => {
-        const c = a.target;
-        if (!c?.matches) return;
-        const h = c.matches(n) ? c : c.closest(n);
-        h && this.shadow.contains(h) && (Object.defineProperty(a, "currentTarget", {
-          configurable: !0,
-          value: h
-        }), s.call(h, a));
-      };
-      this.shadow.addEventListener(e, o, {
-        ...i,
-        signal: this.#r.signal
-      });
-    } else
-      t.addEventListener(e, s, {
-        ...i,
-        signal: this.#r.signal
-      });
-  }
-  /**
-   * Dispatch custom event
-   * @param name - Event name
-   * @param detail - Event detail data
-   * @param options - CustomEvent options
-   */
-  emit(t, e, s) {
-    this.dispatchEvent(
-      new CustomEvent(t, {
-        bubbles: !0,
-        composed: !0,
-        detail: e,
-        ...s
-      })
-    );
-  }
-  /**
-   * Set timeout with automatic cleanup
-   * @param callback - Function to call after delay
-   * @param ms - Delay in milliseconds
-   * @returns Timeout ID
-   */
-  delay(t, e) {
-    const s = setTimeout(() => {
-      this.#i.delete(s), t();
-    }, e);
-    return this.#i.add(s), s;
-  }
-  /**
-   * Clear a scheduled timeout
-   * @param id - Timeout ID returned from delay()
-   */
-  clear(t) {
-    clearTimeout(t), this.#i.delete(t);
-  }
-  /* ==================== Rendering ==================== */
-  /**
-   * Perform rendering with error handling and node cloning
-   */
-  performRender() {
-    const { template: t } = this.#t;
-    try {
-      let e;
-      typeof t == "function" ? e = t(this) : e = t;
-      let s;
-      if (typeof e == "string")
-        s = Array.from(y(e).childNodes);
-      else if (e instanceof DocumentFragment) {
-        const i = e.cloneNode(!0);
-        s = Array.from(i.childNodes);
-      } else
-        s = [e.cloneNode(!0)];
-      this.reconcile(this.shadow, s), this.#t.onUpdated?.(this);
-    } catch (e) {
-      const s = e instanceof Error ? e.message : String(e), i = e instanceof Error ? e.stack : "";
-      console.error("[craftit] Render error:", e), this.shadow.innerHTML = `
-        <div style="color: red; padding: 1rem; border: 1px solid red; border-radius: 4px; font-family: monospace;" data-debug="render-error">
-          <strong>Render Error</strong>
-          <p style="margin: 0.5rem 0;">${s}</p>
-          ${i ? `<details style="margin: 0.5rem 0;"><summary>Stack Trace</summary><pre style="overflow: auto; font-size: 0.8em;">${i}</pre></details>` : ""}
-          <button onclick="this.getRootNode().host.render()" style="margin-top: 0.5rem; padding: 0.25rem 0.5rem; cursor: pointer;">
-            Retry Render
-          </button>
-        </div>
-      `;
-    }
-  }
-  /**
-   * Reconcile DOM nodes using index-based diffing
-   * @remarks Works well for static/append-only lists. For frequently reordered lists,
-   * consider keyed diffing libraries (lit-html, uhtml).
-   */
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: DOM reconciliation requires conditional logic
-  reconcile(t, e) {
-    const s = Array.from(t.childNodes), i = Math.max(s.length, e.length);
-    for (let n = 0; n < i; n++) {
-      const o = s[n], a = e[n];
-      if (!o && a) {
-        t.appendChild(a);
-        continue;
-      }
-      if (o && !a) {
-        t.removeChild(o);
-        continue;
-      }
-      if (o && a) {
-        if (o.nodeType !== a.nodeType) {
-          t.replaceChild(a, o);
-          continue;
-        }
-        if (o.nodeType === Node.TEXT_NODE) {
-          o.textContent !== a.textContent && (o.textContent = a.textContent);
-          continue;
-        }
-        if (o instanceof Element && a instanceof Element) {
-          if (o.tagName !== a.tagName) {
-            t.replaceChild(a, o);
-            continue;
-          }
-          this.updateElement(o, a);
-        }
-      }
-    }
-  }
-  /**
-   * Update element attributes and children
-   */
-  updateElement(t, e) {
-    const s = Array.from(t.attributes), i = Array.from(e.attributes);
-    for (const { name: n } of s)
-      e.hasAttribute(n) || t.removeAttribute(n);
-    for (const { name: n, value: o } of i)
-      t.getAttribute(n) !== o && t.setAttribute(n, o);
-    t instanceof HTMLInputElement ? this.updateInputElement(t, e) : t instanceof HTMLTextAreaElement ? this.updateTextAreaElement(t, e) : t instanceof HTMLSelectElement && this.updateSelectElement(t, e), this.reconcile(t, Array.from(e.childNodes));
-  }
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Form element syncing requires handling multiple input types
-  updateInputElement(t, e) {
-    if (t.type === "checkbox" || t.type === "radio") {
-      const n = e.hasAttribute("checked");
-      t.checked !== n && (t.checked = n);
-    } else {
-      if (t.type === "file")
-        return;
-      if (e.hasAttribute("value")) {
-        const n = e.getAttribute("value") || "";
-        t.value !== n && (t.value = n);
-      } else t.value !== "" && (t.value = "");
-    }
-    const s = e.hasAttribute("disabled");
-    t.disabled !== s && (t.disabled = s);
-    const i = e.hasAttribute("readonly");
-    t.readOnly !== i && (t.readOnly = i);
-  }
-  updateTextAreaElement(t, e) {
-    const s = e.textContent || "";
-    t.value !== s && (t.value = s);
-    const i = e.hasAttribute("disabled");
-    t.disabled !== i && (t.disabled = i);
-    const n = e.hasAttribute("readonly");
-    t.readOnly !== n && (t.readOnly = n);
-  }
-  updateSelectElement(t, e) {
-    const s = e.hasAttribute("disabled");
-    if (t.disabled !== s && (t.disabled = s), e.hasAttribute("value")) {
-      const i = e.getAttribute("value") || "";
-      t.value !== i && (t.value = i);
-    }
-  }
-}
-const v = (r) => {
-  class t extends A {
-    static formAssociated = r.formAssociated;
-    static get observedAttributes() {
-      return r.observedAttributes || [];
-    }
-    constructor() {
-      super(r);
-    }
-  }
-  return t;
-}, C = (r, t) => {
-  if (customElements.get(r)) {
-    console.warn(`[craftit] Element "${r}" already defined`);
-    return;
-  }
-  customElements.define(r, v(t));
-}, w = (r, t) => (C(r, t), customElements.get(r)), $ = (r, ...t) => r.reduce((e, s, i) => {
-  const n = t[i] ?? "";
-  return e + s + n;
-}, ""), x = Object.assign(
-  (r, ...t) => r.reduce((e, s, i) => {
-    const n = t[i] ?? "";
-    return e + s + n;
-  }, ""),
-  {
-    /**
-     * Create a typed theme with CSS variables and autocomplete
-     *
-     * Single theme mode:
-     * Returns a typed proxy with autocomplete for all theme properties
-     *
-     * Light/dark mode:
-     * Returns the same typed proxy - CSS handles which theme applies via media queries
-     * You reference variables the same way regardless of theme mode
-     *
-     * @param light - Theme variables (or light theme for dual-mode)
-     * @param dark - Optional dark theme variables
-     * @param options - Configuration options
-     * @param options.selector - CSS selector (default: ':host')
-     * @param options.attribute - Attribute for manual override (default: 'data-theme')
-     * @returns Typed proxy with autocomplete
-     *
-     * @example
-     * // Single theme
-     * const theme = css.theme({
-     *   primaryColor: '#3b82f6',
-     *   spacing: '1rem',
-     * });
-     *
-     * css`
-     *   ${theme}
-     *   .button {
-     *     color: ${theme.primaryColor};  // Autocomplete!
-     *     padding: ${theme.spacing};
-     *   }
-     * `
-     *
-     * @example
-     * // Light/dark theme - same variable references!
-     * const theme = css.theme(
-     *   { bg: '#fff', text: '#000' },  // Light
-     *   { bg: '#000', text: '#fff' }   // Dark
-     * );
-     *
-     * css`
-     *   ${theme}
-     *   .card {
-     *     background: ${theme.bg};    // Autocomplete! CSS handles light/dark
-     *     color: ${theme.text};       // Same variable for both themes
-     *   }
-     * `
-     */
-    theme: ((r, t, e) => {
-      const s = e?.selector ?? ":host", i = (o) => Object.entries(o).map(([a, c]) => `${a.startsWith("--") ? a : `--${l(a)}`}: ${c};`).join(" ");
-      let n;
-      if (!t)
-        n = `${s} { ${i(r)} }`;
-      else {
-        const o = e?.attribute ?? "data-theme", a = i(r), c = i(t);
-        n = `
-${s} { ${a} }
-@media (prefers-color-scheme: dark) {
-  ${s}:not([${o}="light"]) { ${c} }
-}
-${s}[${o}="dark"] { ${c} }
-${s}[${o}="light"] { ${a} }
-      `.trim();
-      }
-      return new Proxy({}, {
-        get(o, a) {
-          if (a === "toString" || a === Symbol.toPrimitive)
-            return () => n;
-          if (typeof a == "string" && a in r)
-            return `var(${a.startsWith("--") ? a : `--${l(a)}`})`;
-        }
-      });
-    }),
-    /**
-     * Reference a CSS custom property with var()
-     * Automatically converts camelCase to --kebab-case
-     * @param name - Variable name (with or without --)
-     * @param fallback - Optional fallback value
-     * @returns var() function string
-     * @example css.var('primaryColor') // "var(--primary-color)"
-     */
-    var: (r, t) => {
-      const e = r.startsWith("--") ? r : `--${l(r)}`;
-      return t !== void 0 ? `var(${e}, ${t})` : `var(${e})`;
-    }
-  }
-), k = (r) => Object.entries(r).filter(([, t]) => t).map(([t]) => t).join(" "), R = (r) => Object.entries(r).filter(([, t]) => t != null).map(([t, e]) => `${l(t)}: ${e}`).join("; ");
-async function V(r, t = document.body) {
-  return t.appendChild(r), "flush" in r && typeof r.flush == "function" ? await r.flush() : await new Promise((e) => requestAnimationFrame(e)), r;
-}
-function T(r) {
-  r.remove();
-}
-export {
-  V as attach,
-  k as classMap,
-  v as createComponent,
-  x as css,
-  C as defineElement,
-  T as destroy,
-  w as element,
-  $ as html,
-  R as styleMap
-};
-//# sourceMappingURL=craftit.js.map
+import{batch as e,computed as t,effect as n,isSignal as r,onCleanup as i,signal as a,untrack as o,watch as s}from"@vielzeug/stateit";export*from"@vielzeug/stateit";var c=0,l=e=>{for(let t of e)t()},u=(e,t,n)=>{/^on/i.test(t)||n==null||!1===n?e.removeAttribute(t):!0===n?e.setAttribute(t,``):e.setAttribute(t,String(n))},d=(e,t,n,r)=>{let i=n;return e.addEventListener(t,i,r),()=>e.removeEventListener(t,i,r)},f=e=>`${e?`${e}-`:`cft-`}${++c}`,p=(e,t)=>{let n=`${e}-${t&&t.trim()?t:f(e)}`;return{errorId:`error-${n}`,fieldId:n,helperId:`helper-${n}`,labelId:`label-${n}`}},m=(e,t)=>n=>{e()&&t(n)},h=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),g={"'":`&#39;`,'"':`&quot;`,"&":`&amp;`,"<":`&lt;`,">":`&gt;`},_=e=>String(e).replace(/[&<>"']/g,e=>g[e]),v=function(){return this.content},ee=(e,...t)=>{let n=``;for(let r=0;r<e.length;r++)if(n+=e[r],r<t.length){let e=t[r];n+=e&&typeof e==`object`&&`content`in e?e.content:e??``}return{content:n.trim(),toString:v}},y=new Map,te=e=>{if(e instanceof CSSStyleSheet)return e;let t=typeof e==`string`?e:e.content,n=y.get(t);if(n)return n;let r=new CSSStyleSheet;try{r.replaceSync(t),y.set(t,r)}catch(e){console.error(`[craftit:E2] style replace failed`,e)}return r},b=[],x=()=>{let e=b[b.length-1];if(!e)throw Error(`[craftit:E1] lifecycle outside setup`);return e},S=e=>{x().onMount.push(e)},C=e=>{b.length>0?x().cleanups.push(e):i(e)},ne=e=>{x().errorHandlers.push(e)},w=e=>{b.length>0&&C(e)},T=(e,t)=>{let r=n(e,t);return w(r),r};function re(e,t,r){if(Array.isArray(e)){let i=r,a=!1,s=!1,c=n(()=>{for(let t of e)t.value;if(a)o(t),i?.once&&c();else if(a=!0,i?.immediate&&(o(t),i.once))return void(s=!0)});return w(c),s&&c(),c}let i=s(e,t,r);return w(i),i}function E(e,t,n,r){e&&(e.addEventListener(t,n,r),C(()=>e.removeEventListener(t,n,r)))}var D={bubbles:!0,cancelable:!0,composed:!0},O={basic:(e,t,n={})=>e.dispatchEvent(new Event(t,{...D,...n})),custom:(e,t,n={})=>e.dispatchEvent(new CustomEvent(t,{...D,...n})),event:(e,t)=>e.dispatchEvent(t),focus:(e,t,n={})=>e.dispatchEvent(new FocusEvent(t,{...D,...n})),keyboard:(e,t,n={})=>e.dispatchEvent(new KeyboardEvent(t,{...D,...n})),mouse:(e,t,n={})=>e.dispatchEvent(new MouseEvent(t,{...D,...n})),touch:(e,t,n={})=>typeof TouchEvent<`u`?e.dispatchEvent(new TouchEvent(t,{...D,...n})):e.dispatchEvent(new CustomEvent(t,{...D,...n}))};function ie(e,t){let n=t===void 0?x().el:e,r=Object.entries(t===void 0?e:t).map(([e,t])=>T(()=>((e,t)=>{let r=`aria-${e}`,i=typeof t==`function`?t():t;i==null||!1===i?n.removeAttribute(r):n.setAttribute(r,String(i))})(e,t)));if(t!==void 0)return()=>{for(let e of r)e()}}var k=new WeakMap,ae=(e,t)=>{let n=x().el;k.has(n)||k.set(n,new Map),k.get(n).set(e,t)};function oe(e,...t){let n=x().el;for(;n;){if(n instanceof HTMLElement){let t=k.get(n)?.get(e);if(t!==void 0)return t}let t=n.getRootNode();n=n.parentElement??(t instanceof ShadowRoot?t.host:null)}return t.length>0?t[0]:void 0}function se(e){return Symbol(e)}var ce=(e,t,n)=>{e&&S(()=>{T(()=>{for(let r of n){let n=e[r]?.value;n!==void 0&&(t[r].value=n)}})})},le=new Set,ue=(e,t,n)=>{let r=`${n}:${e.localName}:${t||`default`}`;le.has(r)||(le.add(r),console.warn(`[craftit:E10] ${n} could not find a matching <slot${t?` name="${t}"`:``}> in <${e.localName}>. Render the slot before using ${n}.`))},de=(e,t)=>{let n=x().el,r=e===`default`?``:e,i=r?`slot[name="${r}"]`:`slot:not([name])`,a=n.shadowRoot?.querySelector(i);if(!a)return void ue(n,r,`onSlotChange()`);let o=()=>t(a.assignedElements({flatten:!0}));o(),a.addEventListener(`slotchange`,o),C(()=>a.removeEventListener(`slotchange`,o))};function A(e,t){for(let[n,r]of Object.entries(t))if(n===`classMap`)pe(e,r);else if(n.startsWith(`on`)&&n.length>2&&typeof r==`function`){let t=n.slice(2);E(e,t[0].toLowerCase()+t.slice(1),r)}else fe(e,n,r)}function fe(e,t,n){typeof n==`function`?T(()=>u(e,t,n())):u(e,t,n)}function pe(e,t){let n=new Set;T(()=>{let r=new Set(Object.entries(t()).filter(([,e])=>e).map(([e])=>e));for(let t of n)r.has(t)||e.classList.remove(t);for(let t of r)n.has(t)||e.classList.add(t);n=r})}var j=Symbol(`craftit.htmlResultBrand`);function me(){return{value:null}}function he(){return[]}function M(e,t=[]){let n={__bindings:t,__html:e,toString:()=>e};return Object.defineProperty(n,j,{configurable:!1,enumerable:!1,value:!0,writable:!1}),n}var N=e=>typeof e==`object`&&!!e&&!0===e[j],P=Symbol(`craftit.eachSignal`),F=e=>r(e)?e:typeof e==`function`?t(e):void 0,ge=e=>{if(!r(e))return!1;let t=Object.getPrototypeOf(e);for(;t;){let e=Object.getOwnPropertyDescriptor(t,`value`);if(e)return typeof e.set==`function`;t=Object.getPrototypeOf(t)}return!1},I=(e,t)=>{if(!Object.is(e.value,t))try{e.value=t}catch{}},L=new Map,R=e=>(e=>{let t=L.get(e);if(!t){if(t=document.createElement(`template`),t.innerHTML=e,L.size>=1e3){let e=L.keys().next().value;e!==void 0&&L.delete(e)}L.set(e,t)}return t})(e).content.cloneNode(!0),z=(e,t)=>{if(e.nodeType===Node.COMMENT_NODE){let n=e.nodeValue;n&&t.comments.set(n,e);return}if(e.nodeType!==Node.ELEMENT_NODE)return;let n=e.getAttribute(`u`);n&&t.elements.set(n,e)},B=e=>{let t={comments:new Map,elements:new Map};for(let n of e){let e=document.createTreeWalker(n,NodeFilter.SHOW_COMMENT|NodeFilter.SHOW_ELEMENT);for(z(n,t);e.nextNode();)z(e.currentNode,t)}return t},V=e=>Array.from(R(e).childNodes),H=(e,t,n)=>{if(e.parentNode)for(let r of t)e.parentNode.insertBefore(r,n)},U=e=>Array.isArray(e)||typeof e==`object`&&!!e,W=(e,t,n)=>{n(T(()=>t(e.value)))},_e=(e,t,n)=>{let r=n=>{let r=$.get(e)?.get(t.name);if(!r&&U(n))return void(e[t.name]=n);if(r&&!r.reflect||(t.mode===`bool`?e.toggleAttribute(t.name,!!n):u(e,t.name,n)),!r)return;let i=U(n)?n:r.parse(t.mode===`bool`?n?``:null:n==null||!1===n?null:String(n));Object.is(r.signal.peek(),i)||(r.signal.value=i)};t.signal?W(t.signal,r,n):r(t.value)},ve=(e,t,n)=>{let r=n=>{e[t.name]=n};t.signal?W(t.signal,r,n):r(t.value),((e,t,n,r)=>{n&&(t===`value`?(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)&&r(d(e,e instanceof HTMLSelectElement?`change`:`input`,()=>{I(n,e.value)})):t===`checked`&&e instanceof HTMLInputElement&&r(d(e,`change`,()=>{I(n,e.checked)})))})(e,t.name,t.model,n)},ye=(e,t,n)=>{let{modifiers:r}=t,i=r?{capture:!!r.capture,once:!!r.once,passive:!!r.passive}:void 0;n(d(e,t.name,e=>{r?.self&&e.target!==e.currentTarget||(r?.stop&&e.stopPropagation(),r?.prevent&&!r?.passive&&e.preventDefault(),t.handler(e))},i))},be=(e,t,n)=>{let{ref:r}=t;typeof r==`function`?(r(e),n(()=>r(null))):Array.isArray(r)?(r.push(e),n(()=>{let t=r.indexOf(e);t!==-1&&r.splice(t,1)})):(r.value=e,n(()=>{r.value=null}))},G=(e,t,n,r)=>{let i=new Map;for(let a of e){let e=a.uid;if(a.type===`text`){let r=n.comments.get(e);if(r){let i=document.createTextNode(``);r.replaceWith(i),n.comments.delete(e),W(a.signal,e=>{i.textContent=String(e)},t)}}else a.type===`html`?r?.onHtml?.(a):(i.has(e)||i.set(e,[]),i.get(e).push(a))}for(let[e,r]of i){let i=n.elements.get(e);if(i){i.removeAttribute(`u`),n.elements.delete(e);for(let e of r)switch(e.type){case`attr`:_e(i,e,t);break;case`callback`:e.apply(i,t);break;case`event`:ye(i,e,t);break;case`prop`:ve(i,e,t);break;case`ref`:be(i,e,t)}}}},K=(e,t,n,r)=>{let i=F(r);return i?{mode:e,name:t,signal:i,type:`attr`,uid:n}:{mode:e,name:t,type:`attr`,uid:n,value:r}},xe=(e,t,n)=>{let r=F(n);return r?{model:ge(n)?n:void 0,name:e,signal:r,type:`prop`,uid:t}:{name:e,type:`prop`,uid:t,value:n}},Se=RegExp(`u="([^"]+)"`,`g`),Ce=[{kind:`event`,regex:/\s+@([a-zA-Z_][-a-zA-Z0-9_.]*)\s*=\s*["']?$/},{kind:`ref`,regex:/\s+ref\s*=\s*["']?$/},{kind:`specialAttr`,regex:/\s+([:?])([a-zA-Z_][-a-zA-Z0-9_]*)\s*=\s*["']?$/},{kind:`prop`,regex:/\.([a-zA-Z_][-a-zA-Z0-9_]*)\s*=\s*["']?$/},{kind:`plainAttr`,regex:/\s+([a-zA-Z_][-a-zA-Z0-9_]*)\s*=\s*["']?$/}],q=new WeakMap,we=e=>{let[t,...n]=e.split(`.`),r={};for(let e of n)e===`capture`?r.capture=!0:e===`once`?r.once=!0:e===`passive`?r.passive=!0:e===`prevent`?r.prevent=!0:e===`self`?r.self=!0:e===`stop`&&(r.stop=!0);return{modifiers:Object.keys(r).length?r:void 0,name:t}},J=()=>{let e=0;return()=>String(e++)},Y=(e,t)=>{let n=new Map,r=e=>{let r=n.get(e);if(r)return r;let i=t();return n.set(e,i),i};return{bindings:e.__bindings.map(e=>({...e,uid:r(e.uid)})),html:e.__html.replace(Se,(e,t)=>`u="${r(t)}"`).replace(/<!--(\d+)-->/g,(e,t)=>`\x3c!--${r(t)}--\x3e`)}},X=e=>typeof e==`string`?_(e):e==null?``:N(e)?e.__html:_(String(e)),Te=(e,n)=>{let i=(e=>typeof e==`object`&&e&&P in e?e[P]:null)(e);if(i)return{keyed:!0,signal:i};if(typeof e==`function`&&!r(e)){let{signal:t}=((e,t)=>{let n={bindings:[],html:``},r=a(n);return t(()=>{let t=e(),i=Array.isArray(t)?t:[t],a=J(),o=``,s=[];for(let e of i)if(N(e)){let t=Y(e,a);o+=t.html,s.push(...t.bindings)}else o+=X(e);let c=s.length!==n.bindings.length||s.some((e,t)=>e!==n.bindings[t]);(o!==n.html||c)&&(n={bindings:s,html:o},r.value=n)}),{bindings:[],signal:r}})(e,n);return{keyed:!1,signal:t}}return r(e)&&N(e.value)?{keyed:!1,signal:t(()=>{let t=e.value;if(!N(t))return{bindings:[],html:X(t)};let n=Y(t,J());return{bindings:n.bindings,html:n.html}})}:null},Ee=e=>{l(e.cleanups);for(let t of e.nodes)t.remove()},Z=(e,t,n=B(e))=>{let r=[];return G(t,e=>r.push(e),n),r},De=(t,r,i,a,s)=>{let c=((e,t)=>{let n=document.createTreeWalker(e,NodeFilter.SHOW_COMMENT);for(;n.nextNode();){let e=n.currentNode;if(e.nodeValue===t)return e}return null})(t,r.uid);if(!c)return;let u=document.createComment(`html-binding`);c.replaceWith(u);let d=[],f=e=>d.push(e),p=()=>{l(d),d=[]},m=null,h=[];i(n(()=>{e(()=>{let n=r.signal.value;if(!r.keyed&&n.html===m)return;m=n.html,p();let{bindings:i,html:c,keys:d}=n;r.keyed&&!a.has(r.uid)&&a.set(r.uid,new Map);let g=r.keyed?a.get(r.uid):null,_=u.parentElement||t,v=!1;o(()=>{e(()=>{if(g&&d?.length&&n.items?.length===d.length){if(v=!0,g.size===0&&h.length>0){for(let e of h)e.remove();h=[]}let e=new Map;for(let t=0;t<d.length;t++){let r=d[t],i=n.items[t],a=g.get(r),o=t>0?e.get(d[t-1])?.nodes:null,s=o?.length?o[o.length-1].nextSibling:u.nextSibling;if(a?.html===i.html){a.nodes[0]&&H(u,a.nodes,s),l(a.cleanups);let t=B(a.nodes),n=Z(a.nodes,i.bindings,t);e.set(r,{...a,bindings:i.bindings,cleanups:n,targets:t})}else if(a){l(a.cleanups);let t=V(i.html),n=B(t);H(u,t,s);let o=Z(t,i.bindings,n);e.set(r,{bindings:i.bindings,cleanups:o,html:i.html,nodes:t,targets:n});for(let e of a.nodes)e.remove()}else{let t=V(i.html),n=B(t);H(u,t,s);let a=Z(t,i.bindings,n);e.set(r,{bindings:i.bindings,cleanups:a,html:i.html,nodes:t,targets:n})}}for(let[t,n]of g)e.has(t)||Ee(n);a.set(r.uid,e)}else{if(r.keyed&&g&&g.size>0)for(let[,e]of g)Ee(e);else for(let e of h)e.remove();let e=R(c);h=Array.from(e.childNodes),u.after(e),r.keyed&&a.set(r.uid,new Map)}}),v||s(_,i,f,{onHtml:e=>De(_,e,f,a,s)})})})})),i(p),r.keyed&&i(()=>a.delete(r.uid))},Oe=(e,t,n,r)=>{G(t,n,(e=>{let t={comments:new Map,elements:new Map},n=document.createTreeWalker(e,NodeFilter.SHOW_COMMENT|NodeFilter.SHOW_ELEMENT);for(z(e,t);n.nextNode();)z(n.currentNode,t);return t})(e),r)},ke=(e,...t)=>((e,t,n)=>{let i=(e=>{let t=q.get(e);return t||(t=(e=>{let t=[];for(let n=0;n<e.length-1;n++){let r=e[n],i=!1;for(let e of Ce){let n=e.regex.exec(r);if(!n)continue;let a=r.slice(0,-n[0].length);if(i=!0,e.kind===`event`){let e=we(n[1]);t.push({kind:`event`,modifiers:e.modifiers,name:e.name,prefix:a,raw:r})}else e.kind===`ref`?t.push({kind:`ref`,prefix:a,raw:r}):e.kind===`specialAttr`?t.push({kind:`specialAttr`,mode:n[1]===`?`?`bool`:`attr`,name:n[2],prefix:a,raw:r}):e.kind===`prop`?t.push({kind:`prop`,name:n[1],prefix:a,raw:r}):e.kind===`plainAttr`&&t.push({kind:`plainAttr`,name:n[1],prefix:a,raw:r});break}i||t.push({kind:`node`,prefix:r,raw:r})}return{slots:t,tail:e[e.length-1]??``}})(e),q.set(e,t)),t})(e),o=``,s=[],c=null,l=J(),u=e=>(c&&!(e=>e.lastIndexOf(`<`)>e.lastIndexOf(`>`))(e)||(c=l()),c),d=()=>{c=null};for(let e=0;e<i.slots.length;e++){let c=i.slots[e],f=t[e];if(c.kind===`event`){if(typeof f==`function`){let e=u(c.prefix);o+=`${c.prefix} u="${e}"`,s.push({handler:f,modifiers:c.modifiers,name:c.name,type:`event`,uid:e})}else o+=c.raw;continue}if(c.kind===`ref`){if(f){let e=u(c.prefix);o+=`${c.prefix} u="${e}"`,s.push({ref:f,type:`ref`,uid:e})}else o+=c.raw;continue}if(c.kind===`specialAttr`){let e=u(c.prefix);o+=`${c.prefix} u="${e}"`,s.push(K(c.mode,c.name,e,f));continue}if(c.kind===`prop`){let e=u(c.prefix);o+=`${c.prefix} u="${e}"`,s.push(xe(c.name,e,f));continue}if(c.kind===`plainAttr`){let e=u(c.prefix);o+=`${c.prefix} u="${e}"`,s.push(K(`attr`,c.name,e,f));continue}if(typeof f==`object`&&f&&(`mount`in f||`render`in f)){let e=`render`in f,t=e?l():u(c.raw);o+=e?`${c.raw}\x3c!--${t}--\x3e`:`${c.raw} u="${t}"`;let r=f.mount?.bind(f);if(r&&s.push({apply:(e,t)=>{r(e,{registerCleanup:t})},type:`callback`,uid:t}),e){let e=f.render.bind(f),r={bindings:[],html:``},i=a(r);n(()=>{let t=e(),n=Array.isArray(t)?t:[t],a=J(),o=``,s=[];for(let e of n)if(N(e)){let t=Y(e,a);o+=t.html,s.push(...t.bindings)}else o+=X(e);let c=s.length!==r.bindings.length||s.some((e,t)=>e!==r.bindings[t]);(o!==r.html||c)&&(r={bindings:s,html:o},i.value=r)}),s.push({keyed:!1,signal:i,type:`html`,uid:t})}continue}d();let p=Te(f,n);if(p){let e=l();o+=`${c.raw}\x3c!--${e}--\x3e`,s.push({keyed:p.keyed,signal:p.signal,type:`html`,uid:e});continue}if(Array.isArray(f)){let e=``;for(let t of f)if(N(t)){let n=Y(t,l);e+=n.html,s.push(...n.bindings)}else e+=X(t);o+=c.raw+e;continue}if(r(f)){let e=l();o+=`${c.raw}\x3c!--${e}--\x3e`,s.push({signal:f,type:`text`,uid:e})}else if(N(f)){let e=Y(f,l);o+=c.raw+e.html,s.push(...e.bindings)}else o+=c.raw+X(f)}return o+=i.tail,M((e=>e.replace(/>\s+</g,`><`).trim())(o),s)})(e,t,T),Q=new WeakMap,Ae=new WeakMap,je=(e,t)=>{let r=x().el;if(!r.constructor.formAssociated)throw Error(`[craftit:E8] defineField() requires defineComponent({ formAssociated: true })`);let i=Ae.get(r)??r.attachInternals();Ae.set(r,i);let a=e.toFormValue??(e=>e==null?``:String(e));return n(()=>{i.setFormValue(a(e.value.value))}),e.disabled&&n(()=>{e.disabled.value?i.states.add(`disabled`):i.states.delete(`disabled`)}),t&&Q.set(r,{...Q.get(r),...t}),{checkValidity:()=>i.checkValidity(),internals:i,reportValidity:()=>i.reportValidity(),setCustomValidity:e=>e?i.setValidity({customError:!0},e):i.setValidity({}),setValidity:i.setValidity.bind(i)}},Me=new Set([`default`,`omit`,`parse`,`reflect`,`type`]),Ne=e=>typeof e==`object`&&!!e&&`default`in e&&Object.keys(e).every(e=>Me.has(e)),$=new WeakMap,Pe=(e,t,r)=>{let i=x(),o=i.el;$.has(o)||$.set(o,new Map);let s=r?.parse??(e=>r?.type===Boolean?e===``||e===`true`:typeof t==`boolean`?e!==null&&e!==`false`:e==null?t:r?.type===Number||typeof t==`number`?Number(e):e),c=a(t),l=Object.prototype.hasOwnProperty.call(o,e),d=l?o[e]:void 0,f={parse:s,reflect:r?.reflect??!0,signal:c};if(l?(delete o[e],c.value=d):o.hasAttribute(e)&&(c.value=s(o.getAttribute(e))),$.get(o).set(e,f),Object.defineProperty(o,e,{configurable:!0,enumerable:!0,get:()=>c.value,set:e=>{c.value=e}}),r?.reflect??1){let t=r?.omit??!1;i.onMount.push(()=>{i.cleanups.push(n(()=>{let n=c.value;n==null||!1===n||t&&n===``?o.removeAttribute(e):u(o,e,n)}))})}return c},Fe=(e,t)=>({...t,default:e}),Ie=class extends HTMLElement{static _setup;static _options;static formAssociated=!1;static observedAttributes=[];shadow;_keyedStates=new Map;_mountFns=[];_template=null;_appliedHtmlBindings=new Set;_setupDone=!1;_runtime;constructor(){super();let e=this.constructor._options;this.shadow=this.attachShadow({mode:`open`,...e?.shadow}),this._runtime={cleanups:[],el:this,errorHandlers:[],onMount:[],styles:e?.styles}}connectedCallback(){this._setupDone||this._runSetup(),this._init()}attributeChangedCallback(e,t,n){if(t===n)return;let r=$.get(this)?.get(e);if(!r)return;let i=r.parse(n);Object.is(r.signal.peek(),i)||(r.signal.value=i)}disconnectedCallback(){l(this._runtime.cleanups),this._runtime.cleanups=[],this._runtime.onMount=this._mountFns.slice(),this._appliedHtmlBindings.clear(),this._keyedStates.clear()}formAssociatedCallback(e){Q.get(this)?.onAssociated?.(e)}formDisabledCallback(e){Q.get(this)?.onDisabled?.(e)}formResetCallback(){Q.get(this)?.onReset?.()}formStateRestoreCallback(e,t){Q.get(this)?.onStateRestore?.(e,t)}_handleError(e){if(this._runtime.errorHandlers.length>0)for(let t of this._runtime.errorHandlers)t(e);else console.error(`[craftit:E3] <${this.localName}>`,e)}_runSetup(){this._setupDone=!0,b.push(this._runtime);try{let{host:e}=this.constructor._options??{};if(e)for(let[t,n]of Object.entries(e))typeof n==`boolean`?n?this.setAttribute(t,``):this.removeAttribute(t):this.setAttribute(t,String(n));let t=this.constructor._setup({host:this,shadow:this.shadow});(typeof t==`string`||typeof t==`object`&&t&&`__html`in t)&&(this._template=t)}catch(e){this._handleError(e)}finally{b.pop()}}_init(){let{styles:e}=this._runtime;if(e?.length&&(this.shadow.adoptedStyleSheets=e.map(te)),this._template){let e=typeof this._template==`string`?M(this._template):this._template;if(this.shadow.replaceChildren(R(e.__html)),e.__bindings.length){let t=e=>this._runtime.cleanups.push(e);Oe(this.shadow,e.__bindings,t,{onHtml:e=>{this._appliedHtmlBindings.has(e.uid)||(this._appliedHtmlBindings.add(e.uid),((e,t,n,r)=>{De(e,t,n,r,Oe)})(this.shadow,e,t,this._keyedStates))}})}}queueMicrotask(()=>{b.push(this._runtime);try{let e=this._runtime.onMount;this._mountFns=e.slice();for(let t of e){let e=t();typeof e==`function`&&this._runtime.cleanups.push(e)}}catch(e){this._handleError(e)}finally{b.pop(),this._runtime.onMount=[]}})}};function Le(e){let{formAssociated:t,host:n,props:r,setup:i,shadow:o,styles:s,tag:c}=e;return function(e,t,n={}){if(!e)throw Error(`[craftit:E4] registerComponent(tag, ...) requires a tag name`);if(customElements.get(e))throw Error(`[craftit:E9] custom element already defined: ${e}`);class r extends Ie{static _setup=t;static _options=n;static formAssociated=n.formAssociated??!1;static observedAttributes=n.observedAttrs??[]}return customElements.define(e,r),e}(c,e=>{let t=r?function(e){let t={};for(let[n,r]of Object.entries(e)){let e=Ne(r)?r:{default:r},i={reflect:!(typeof e.default==`object`&&e.default!==null||Array.isArray(e.default)),...e};t[n]=Pe(h(n),e.default,i)}return t}(r):{},n=(()=>{let e=x().el;return(t,...n)=>{O.custom(e,String(t),n.length>0?{detail:n[0]}:void 0)}})(),o=(()=>{let e=x().el,t=new Map;return{has:n=>(n=>{if(t.has(n))return t.get(n);let r=a(!1);return t.set(n,r),S(()=>{let t=n?`slot[name="${n}"]`:`slot:not([name])`,i=e.shadowRoot?.querySelector(t);if(!i)return void ue(e,n,`slots.has()`);let a=()=>{r.value=i.assignedNodes().length>0};return a(),i.addEventListener(`slotchange`,a),()=>i.removeEventListener(`slotchange`,a)}),r})(n===`default`?``:String(n))}})();return i({emit:n,host:e.host,props:t,reflect:t=>A(e.host,t),shadow:e.shadow,slots:o})},{formAssociated:t,host:n,observedAttrs:r?Object.keys(r).map(h):[],shadow:o,styles:s})}var Re=e=>{let t=a({height:0,width:0}),n=new ResizeObserver(([e])=>{if(!e)return;let n=e.contentBoxSize[0];n&&(t.value={height:n.blockSize,width:n.inlineSize})});return n.observe(e),C(()=>n.disconnect()),t};export{ie as aria,se as createContext,p as createFormIds,f as createId,ee as css,Le as defineComponent,je as defineField,T as effect,_ as escapeHtml,O as fire,m as guard,E as handle,ke as html,oe as inject,Re as observeResize,C as onCleanup,ne as onError,S as onMount,de as onSlotChange,Pe as prop,ae as provide,me as ref,A as reflect,he as refs,ce as syncContextProps,h as toKebab,Fe as typed,re as watch};
+//# sourceMappingURL=craftit.js.map