@vielzeug/craftit 1.0.1 → 2.0.0

package/README.md

@@ -1,449 +1,160 @@
 # @vielzeug/craftit
 
-Lightweight, type-safe web component creation library
+> Functional web components with signals, typed props, and template bindings
 
-## What is Craftit?
+[![npm version](https://img.shields.io/npm/v/@vielzeug/craftit)](https://www.npmjs.com/package/@vielzeug/craftit) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**Craftit** is a modern, minimal library for creating web components with reactive state, automatic rendering, and excellent TypeScript support. Build custom elements with the ergonomics of modern frameworks but with native browser APIs.
+**Craftit** provides a compact API for authoring custom elements with fine-grained reactivity. It builds on `@vielzeug/stateit` (re-exported from the main entry) and adds component lifecycle, templating, typed props, context, slots/emits, form-associated helpers, and observer utilities.
 
-### The Problem
+## Installation
 
-Creating web components with vanilla Custom Elements API is verbose and error-prone:
-
-```ts
-// Vanilla Custom Elements - verbose and manual
-class MyCounter extends HTMLElement {
-  #count = 0;
-  #shadow: ShadowRoot;
-
-  constructor() {
-    super();
-    this.#shadow = this.attachShadow({ mode: 'open' });
-    this.render();
-  }
-
-  connectedCallback() {
-    this.#shadow.querySelector('button')?.addEventListener('click', () => {
-      this.#count++;
-      this.render(); // Manual re-render
-    });
-  }
-
-  render() {
-    this.#shadow.innerHTML = `
-      <div>Count: ${this.#count}</div>
-      <button>Increment</button>
-    `; // Loses event listeners!
-  }
-}
-
-customElements.define('my-counter', MyCounter);
-```
-
-### The Solution
-
-```ts
-// Craftit - reactive and automatic
-import { defineElement, html } from '@vielzeug/craftit';
-
-defineElement('my-counter', {
-  state: { count: 0 },
-
-  template: (el) => html`
-    <div>Count: ${el.state.count}</div>
-    <button>Increment</button>
-  `,
-
-  onConnected(el) {
-    el.on('button', 'click', () => {
-      el.state.count++; // Automatic re-render!
-    });
-  },
-});
-```
-
-## ✨ Features
-
-- **🔥 Reactive State** - Automatic re-renders on state changes with Proxy-based reactivity
-- **⚡ Efficient Updates** - Smart DOM reconciliation, only updates what changed
-- **🎯 Event Delegation** - Built-in support for dynamic element event handling
-- **📝 Form Support** - Full ElementInternals integration for form participation
-- **🎨 Shadow DOM** - Encapsulated styles with CSSStyleSheet support
-- **🎭 CSS Variables** - Built-in theming support with `css.var()` and `css.theme()`
-- **🔍 Type-Safe** - Complete TypeScript support with full type inference
-- **📦 Tiny Bundle** - Only **~5 KB gzipped** with zero dependencies
-- **🧪 Testable** - Built-in testing utilities (`attach`, `destroy`, `flush`)
-- **🪝 Lifecycle Hooks** - Full control with `onConnected`, `onDisconnected`, `onUpdated`
-- **🌐 Framework Agnostic** - Use with React, Vue, Svelte, or vanilla JS
-
-## 📦 Installation
-
-::: code-group
-
-```sh [npm]
-npm install @vielzeug/craftit
-```
-
-```sh [yarn]
-yarn add @vielzeug/craftit
-```
-
-```sh [pnpm]
+```sh
 pnpm add @vielzeug/craftit
+# npm install @vielzeug/craftit
+# yarn add @vielzeug/craftit
 ```
 
-:::
-
-## 🚀 Quick Start
-
-### Basic Component
-
-```ts
-import { defineElement, html, css } from '@vielzeug/craftit';
-
-defineElement('hello-world', {
-  template: html`
-    <div class="greeting">
-      <h1>Hello, World!</h1>
-      <p>Welcome to Craftit!</p>
-    </div>
-  `,
-
-  styles: [
-    css`
-      .greeting {
-        padding: 1rem;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border-radius: 8px;
-      }
-    `,
-  ],
-});
-
-// Use in HTML
-// <hello-world></hello-world>
-```
-
-### With State
+## Quick Start
 
 ```ts
-defineElement('user-profile', {
-  state: {
-    name: 'Alice',
-    age: 30,
-    email: 'alice@example.com',
-  },
-
-  template: (el) => html`
-    <div class="profile">
-      <h2>${el.state.name}</h2>
-      <p>Age: ${el.state.age}</p>
-      <p>Email: ${el.state.email}</p>
-    </div>
-  `,
-});
-```
+import { defineComponent, signal, computed, html } from '@vielzeug/craftit';
 
-### Interactive Component
+defineComponent({
+  setup() {
+    const count = signal(0);
+    const doubled = computed(() => count.value * 2);
 
-```ts
-defineElement('click-counter', {
-  state: { count: 0 },
-
-  template: (el) => html`
-    <div>
-      <p>Count: ${el.state.count}</p>
-      <button class="increment">Increment</button>
-      <button class="decrement">Decrement</button>
-      <button class="reset">Reset</button>
-    </div>
-  `,
-
-  onConnected(el) {
-    el.on('.increment', 'click', () => {
-      el.state.count++;
-    });
-
-    el.on('.decrement', 'click', () => {
-      el.state.count--;
-    });
-
-    el.on('.reset', 'click', () => {
-      el.state.count = 0;
-    });
+    return html`
+      <button @click=${() => count.value++}>Count: ${count}</button>
+      <p>Doubled: ${doubled}</p>
+    `;
   },
+  tag: 'my-counter',
 });
 ```
 
-### Form Integration
+## Features
 
-```ts
-defineElement('custom-input', {
-  state: { value: '' },
+- ✅ **Component authoring** — `defineComponent({ tag, props, setup, ... })`
+- ✅ **Signals included** — all `@vielzeug/stateit` exports are re-exported
+- ✅ **Reactive templates** — `html` tagged template with text/attr/prop/event/ref bindings
+- ✅ **Lifecycle helpers** — `onMount`, `onCleanup`, `onError`, `handle`, `watch`, `effect`, `fire.*`
+- ✅ **Typed component APIs** — `defineComponent`, `prop`, `typed`, setup-context `emit` and `slots`
+- ✅ **Context / DI** — `createContext`, `provide`, `inject`, `syncContextProps`
+- ✅ **Form-associated controls** — `defineField` with `ElementInternals`
+- ✅ **Observer utilities** — `observeResize` (main API) + `observeIntersection` / `observeMedia` (`/labs`)
+- ✅ **Directive subpath** — `@vielzeug/craftit/directives`
+- ✅ **Test subpath** — `@vielzeug/craftit/test`
 
-  template: (el) => html`<input type="text" value="${el.state.value}" />`,
+## Entry Points
 
-  formAssociated: true,
-
-  onConnected(el) {
-    el.on('input', 'input', (e) => {
-      const input = e.currentTarget as HTMLInputElement;
-      el.state.value = input.value;
-      el.form?.value(input.value);
-    });
-  },
-});
-
-// Use in forms
-// <form>
-//   <custom-input name="username"></custom-input>
-//   <button type="submit">Submit</button>
-// </form>
-```
+| Entry | Purpose |
+|---|---|
+| `@vielzeug/craftit` | Main API (components + stateit re-exports) |
+| `@vielzeug/craftit/directives` | Directive helpers like `each`, `when`, `bind`, `match`, `until` |
+| `@vielzeug/craftit/test` | Mount/query/event testing utilities |
 
-## 📚 Core Concepts
+## Usage Highlights
 
-### Reactive State
-
-State changes automatically trigger re-renders:
+### Typed props + emits
 
 ```ts
-defineElement('todo-list', {
-  state: {
-    todos: ['Learn Craftit', 'Build component'],
-    filter: 'all',
+import { defineComponent, html } from '@vielzeug/craftit';
+
+defineComponent<
+  { disabled: boolean; label: string },
+  { change: string }
+>({
+  props: {
+    disabled: { default: false },
+    label: { default: 'Name' },
   },
-
-  template: (el) => html`
-    <ul>
-      ${el.state.todos.map((todo) => `<li>${todo}</li>`).join('')}
-    </ul>
-  `,
-
-  onConnected(el) {
-    // Any state change triggers re-render
-    el.state.todos.push('New todo'); // ✅ Automatic re-render
-
-    // Nested objects also reactive
-    el.state.filter = 'completed'; // ✅ Automatic re-render
+  setup({ emit, props }) {
+    return html`
+      <label>${props.label}</label>
+      <input
+        :disabled=${props.disabled}
+        @input=${(e: Event) => emit('change', (e.target as HTMLInputElement).value)}
+      />
+    `;
   },
+  tag: 'name-input',
 });
 ```
 
-### Event Delegation
-
-Handle events on dynamic elements:
+### Directives subpath
 
 ```ts
-defineElement('todo-list', {
-  state: { todos: ['Item 1', 'Item 2'] },
-
-  template: (el) => html`
-    <ul>
-      ${el.state.todos
-        .map(
-          (todo, i) => `
-        <li>
-          ${todo}
-          <button class="delete" data-index="${i}">Delete</button>
-        </li>
-      `,
-        )
-        .join('')}
-    </ul>
-  `,
-
-  onConnected(el) {
-    // Works for dynamically added elements!
-    el.on('.delete', 'click', (e) => {
-      const index = +(e.currentTarget as HTMLElement).dataset.index!;
-      el.state.todos.splice(index, 1);
-    });
+import { defineComponent, signal, html } from '@vielzeug/craftit';
+import { each, when } from '@vielzeug/craftit/directives';
+
+defineComponent({
+  setup() {
+    const todos = signal([{ id: 1, text: 'Write docs', done: false }]);
+
+    return html`
+      ${when(
+        () => todos.value.length > 0,
+        () => html`<ul>${each(todos, (todo) => html`<li>${todo.text}</li>`, () => html``, { key: (t) => t.id })}</ul>`,
+        () => html`<p>No todos</p>`,
+      )}
+    `;
   },
+  tag: 'todo-list',
 });
 ```
 
-### CSS Variables & Theming
-
-Built-in CSS variable helpers with **automatic autocomplete**:
-
-```ts
-import { defineElement, html, css } from '@vielzeug/craftit';
-
-// Create a typed theme
-const theme = css.theme({
-  primaryColor: '#3b82f6',
-  bgColor: '#ffffff',
-  textColor: '#1f2937',
-  spacing: '1rem',
-});
-
-defineElement('themed-button', {
-  template: html`<button>Click Me</button>`,
-
-  styles: [
-    css`
-      /* Inject CSS variables */
-      ${theme}
-
-      button {
-        /* ✨ Autocomplete works! Type theme. to see all properties */
-        background: ${theme.primaryColor};  /* var(--primary-color) */
-        color: ${theme.textColor};          /* var(--text-color) */
-        padding: ${theme.spacing};          /* var(--spacing) */
-        border: none;
-        border-radius: 8px;
-      }
-    `,
-  ],
-});
-```
-
-**Benefits:**
-- ✅ **Autocomplete** - Type `theme.` and see all variables
-- ✅ **Type-safe** - Typos caught at compile time
-- ✅ **Refactoring** - Rename properties safely
-- ✅ **Single import** - Just `import { css }`
-
-### Lifecycle Hooks
+### Form-associated field
 
 ```ts
-defineElement('lifecycle-demo', {
-  template: html`<div>Component</div>`,
+import { defineComponent, defineField, signal, html } from '@vielzeug/craftit';
 
-  onConnected(el) {
-    console.log('Component added to DOM');
-    // Perfect for event listeners, subscriptions
-  },
-
-  onDisconnected(el) {
-    console.log('Component removed from DOM');
-    // Cleanup is automatic!
-  },
-
-  onUpdated(el) {
-    console.log('Component re-rendered');
+defineComponent({
+  formAssociated: true,
+  setup() {
+    const value = signal('');
+    const field = defineField({ value });
+
+    return html`
+      <input
+        type="email"
+        :value=${value}
+        @input=${(e: Event) => {
+          value.value = (e.target as HTMLInputElement).value;
+          field.setCustomValidity(value.value.includes('@') ? '' : 'Invalid email');
+        }}
+      />
+    `;
   },
+  tag: 'email-field',
 });
 ```
 
-## 🎯 API Reference
-
-### `defineElement(name, options)`
-
-Define and register a custom element.
-
-```ts
-defineElement('my-component', {
-  state: {}, // Initial state
-  template: html`...`, // Template (string, Node, or function)
-  styles: [css`...`], // CSS styles (auto-minified)
-  observedAttributes: [], // Attributes to watch
-  formAssociated: false, // Enable form participation
-  onConnected: (el) => {}, // Lifecycle: added to DOM
-  onDisconnected: (el) => {}, // Lifecycle: removed from DOM
-  onUpdated: (el) => {}, // Lifecycle: after render
-  onAttributeChanged: (name, oldVal, newVal, el) => {},
-});
-```
-
-### Component Instance API
-
-```ts
-// State
-el.state.count = 10; // Direct mutation
-await el.set({ count: 10 }); // Batch update
-await el.set((state) => ({ ...state, count: 10 })); // Updater
-
-// DOM Queries
-el.find('.button'); // querySelector
-el.findAll('.item'); // querySelectorAll
-
-// Events
-el.on('.button', 'click', handler); // Event delegation
-el.emit('custom-event', { data }); // Dispatch event
-
-// Utilities
-el.delay(() => {}, 1000); // setTimeout with cleanup
-el.clear(timeoutId); // clearTimeout
-await el.flush(); // Wait for render
-
-// Watchers
-const unwatch = el.watch(
-  (state) => state.count,
-  (val, prev) => console.log(val, prev),
-);
-unwatch(); // Cleanup
-```
-
-## 🔥 Advanced Features
-
-### Async State Updates
-
-```ts
-el.on('.load', 'click', async () => {
-  await el.set(async (state) => {
-    const data = await fetch('/api/data').then((r) => r.json());
-    return { ...state, data };
-  });
-});
-```
-
-### State Watchers
-
-```ts
-const unwatch = el.watch(
-  (state) => state.count,
-  (count, prevCount) => {
-    console.log(`Count changed from ${prevCount} to ${count}`);
-  },
-);
-```
-
-### Testing Utilities
-
-```ts
-import { attach, destroy } from '@vielzeug/craftit';
-
-const el = document.createElement('my-component');
-await attach(el); // Mounts and waits for render
-
-// Test assertions
-expect(el.find('.count')?.textContent).toBe('0');
-
-destroy(el); // Clean removal
-```
-
-## 📖 Documentation
-
-- [**Full Documentation**](https://vielzeug.dev/craftit)
-- [**Usage Guide**](https://vielzeug.dev/craftit/usage)
-- [**API Reference**](https://vielzeug.dev/craftit/api)
-- [**Examples**](https://vielzeug.dev/craftit/examples)
-
-## 🆚 Comparison
-
-| Feature          | Craftit    | Lit      | Stencil   |
-| ---------------- | --------- | -------- | --------- |
-| Bundle Size      | **~6 KB** | ~15 KB   | ~10 KB    |
-| Dependencies     | 0         | 0        | Many      |
-| TypeScript       | Native    | Good     | Excellent |
-| Reactive State   | Built-in  | External | Built-in  |
-| Event Delegation | ✅        | ❌       | ❌        |
-| Form Integration | ✅        | ⚠️       | ✅        |
-| Learning Curve   | Low       | Medium   | High      |
+## API Summary
 
-## 🤝 Contributing
+| Group | Main exports |
+|---|---|
+| Components | `defineComponent`, `DefineComponentOptions`, `DefineComponentSetupContext`, `BuildPropSchema` |
+| Runtime | `onMount`, `onCleanup`, `onError`, `handle`, `aria`, `effect`, `watch`, `fire` |
+| Props | `prop`, `typed`, `PropOptions`, `PropDef`, `InferPropsSignals` |
+| Slots / emits | setup-context `slots`, setup-context `emit`, `onSlotChange`, `Slots`, `EmitFn` |
+| Context | `createContext`, `provide`, `inject`, `syncContextProps`, `InjectionKey` |
+| Form | `defineField`, `FormFieldOptions`, `FormFieldCallbacks`, `FormFieldHandle` |
+| Observers | `observeResize`, `observeIntersection`, `observeMedia` |
+| Utilities | `html`, `css`, `createId`, `createFormIds`, `guard`, `escapeHtml`, `toKebab` |
+| Re-exported from stateit | `signal`, `computed`, `batch`, `untrack`, `readonly`, and more |
 
-Contributions are welcome! Please see the [Contributing Guide](../../CONTRIBUTING.md).
+## Documentation
 
-## 📄 License
+Full docs at **[vielzeug.dev/craftit](https://vielzeug.dev/craftit)**
 
-MIT © [vielzeug](https://github.com/saatkhel/vielzeug)
+| | |
+|---|---|
+| [Overview](https://vielzeug.dev/craftit/) | Install and architecture overview |
+| [Usage Guide](https://vielzeug.dev/craftit/usage) | Practical patterns and subpath usage |
+| [API Reference](https://vielzeug.dev/craftit/api) | Complete signatures and types |
+| [Examples](https://vielzeug.dev/craftit/examples) | End-to-end component examples |
 
-## 🔗 Links
+## License
 
-- [Documentation](https://vielzeug.dev)
-- [GitHub](https://github.com/saatkhel/vielzeug)
-- [NPM](https://www.npmjs.com/package/@vielzeug/craftit)
+MIT © [Helmuth Saatkamp](https://github.com/helmuthdu) — Part of the [Vielzeug](https://github.com/helmuthdu/vielzeug) monorepo.

package/dist/core/component.cjs

@@ -0,0 +1,2 @@
+const e=require(`./internal.cjs`),t=require(`./runtime-lifecycle.cjs`),n=require(`./utilities.cjs`),r=require(`./host.cjs`),i=require(`./template-dom.cjs`);require(`./template-bindings.cjs`),require(`./template-html.cjs`);const a=require(`./template.cjs`);let o=require(`@vielzeug/stateit`);var s=new WeakMap,c=new WeakMap,l=(e,n)=>{let r=t.currentRuntime().el;if(!r.constructor.formAssociated)throw Error(`[craftit:E8] defineField() requires defineComponent({ formAssociated: true })`);let i=c.get(r)??r.attachInternals();c.set(r,i);let a=e.toFormValue??(e=>e==null?``:String(e));return(0,o.effect)(()=>{i.setFormValue(a(e.value.value))}),e.disabled&&(0,o.effect)(()=>{e.disabled.value?i.states.add(`disabled`):i.states.delete(`disabled`)}),n&&s.set(r,{...s.get(r),...n}),{checkValidity:()=>i.checkValidity(),internals:i,reportValidity:()=>i.reportValidity(),setCustomValidity:e=>e?i.setValidity({customError:!0},e):i.setValidity({}),setValidity:i.setValidity.bind(i)}},u=new Set([`default`,`omit`,`parse`,`reflect`,`type`]),d=e=>typeof e!=`object`||!e||!(`default`in e)?!1:Object.keys(e).every(e=>u.has(e)),f=new WeakMap,p=(e,r,i)=>{let a=t.currentRuntime(),s=a.el;f.has(s)||f.set(s,new Map);let c=i?.parse??(e=>i?.type===Boolean?e===``||e===`true`:typeof r==`boolean`?e!==null&&e!==`false`:e==null?r:i?.type===Number||typeof r==`number`?Number(e):e),l=(0,o.signal)(r),u=Object.prototype.hasOwnProperty.call(s,e),d=u?s[e]:void 0,p={parse:c,reflect:i?.reflect??!0,signal:l};if(u?(delete s[e],l.value=d):s.hasAttribute(e)&&(l.value=c(s.getAttribute(e))),f.get(s).set(e,p),Object.defineProperty(s,e,{configurable:!0,enumerable:!0,get:()=>l.value,set:e=>{l.value=e}}),i?.reflect??!0){let t=i?.omit??!1;a.onMount.push(()=>{a.cleanups.push((0,o.effect)(()=>{let r=l.value;r==null||r===!1||t&&r===``?s.removeAttribute(e):n.setAttr(s,e,r)}))})}return l};function m(e){let t={};for(let[r,i]of Object.entries(e)){let e=d(i)?i:{default:i},a={reflect:!(typeof e.default==`object`&&e.default!==null||Array.isArray(e.default)),...e};t[r]=p(n.toKebab(r),e.default,a)}return t}var h=(e,t)=>({...t,default:e}),g=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=f.get(this)?.get(e);if(!r)return;let i=r.parse(n);Object.is(r.signal.peek(),i)||(r.signal.value=i)}disconnectedCallback(){n.runAll(this._runtime.cleanups),this._runtime.cleanups=[],this._runtime.onMount=this._mountFns.slice(),this._appliedHtmlBindings.clear(),this._keyedStates.clear()}formAssociatedCallback(e){s.get(this)?.onAssociated?.(e)}formDisabledCallback(e){s.get(this)?.onDisabled?.(e)}formResetCallback(){s.get(this)?.onReset?.()}formStateRestoreCallback(e,t){s.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,t.runtimeStack.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{t.runtimeStack.pop()}}_init(){let{styles:r}=this._runtime;if(r?.length&&(this.shadow.adoptedStyleSheets=r.map(n.loadStylesheet)),this._template){let t=typeof this._template==`string`?e.htmlResult(this._template):this._template;if(this.shadow.replaceChildren(i.parseHTML(t.__html)),t.__bindings.length){let e=e=>this._runtime.cleanups.push(e);a.applyBindingsInContainer(this.shadow,t.__bindings,e,{onHtml:t=>{this._appliedHtmlBindings.has(t.uid)||(this._appliedHtmlBindings.add(t.uid),a.applyHtmlBinding(this.shadow,t,e,this._keyedStates))}})}}queueMicrotask(()=>{t.runtimeStack.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{t.runtimeStack.pop(),this._runtime.onMount=[]}})}};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 g{static _setup=t;static _options=n;static formAssociated=n.formAssociated??!1;static observedAttributes=n.observedAttrs??[]}return customElements.define(e,r),e}function v(e){let{formAssociated:t,host:i,props:a,setup:o,shadow:s,styles:c,tag:l}=e;return _(l,e=>{let t=a?m(a):{},i=n.createEmitFn(),s=r.createSlots();return o({emit:i,host:e.host,props:t,reflect:t=>r.reflect(e.host,t),shadow:e.shadow,slots:s})},{formAssociated:t,host:i,observedAttrs:a?Object.keys(a).map(n.toKebab):[],shadow:s,styles:c})}exports.defineComponent=v,exports.defineField=l,exports.prop=p,exports.propRegistry=f,exports.typed=h;
+//# sourceMappingURL=component.cjs.map

package/dist/core/component.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.cjs","names":[],"sources":["../../src/core/component.ts"],"sourcesContent":["/**\n * Component authoring API — define, props, lifecycle, and form field functionality.\n *\n * - defineComponent: Main API for building typed custom elements\n * - prop/typed/createProps: Reactive property definitions\n * - defineField: Form field integration\n */\n\nimport {\n  type CleanupFn,\n  type ComputedSignal,\n  type ReadonlySignal,\n  type Signal,\n  signal,\n  effect,\n} from '@vielzeug/stateit';\n\nimport { createSlots, type Slots, type ReflectConfig } from './host';\nimport { reflect } from './host';\nimport { type HTMLResult, htmlResult } from './internal';\nimport { currentRuntime, runtimeStack } from './runtime-lifecycle';\nimport { applyBindingsInContainer, applyHtmlBinding } from './template';\nimport { type RegisterCleanup } from './template-bindings';\nimport { parseHTML } from './template-dom';\nimport { type KeyedNode } from './template-html';\nimport { createEmitFn, type EmitFn, setAttr, toKebab, runAll, loadStylesheet, type CSSResult } from './utilities';\n\n// ─────────────────────────────────────────────────────────────────────────────\n// FORM FIELD API\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** @internal */\nexport const formCallbackRegistry = new WeakMap<HTMLElement, FormFieldCallbacks>();\n/** @internal */\nexport const internalsRegistry = new WeakMap<HTMLElement, ElementInternals>();\n\n/**\n * Callbacks that hook into form lifecycle events. Can be passed directly to {@link defineField}\n * as a second argument to keep all form logic co-located.\n */\nexport type FormFieldCallbacks = {\n  onAssociated?: (form: HTMLFormElement | null) => void;\n  onDisabled?: (disabled: boolean) => void;\n  onReset?: () => void;\n  onStateRestore?: (state: unknown, mode: 'autocomplete' | 'restore') => void;\n};\n\nexport type FormFieldOptions<T = unknown> = {\n  disabled?: Signal<boolean> | ReadonlySignal<boolean> | ComputedSignal<boolean>;\n  toFormValue?: (value: T) => File | FormData | string | null;\n  value: Signal<T> | ReadonlySignal<T>;\n};\n\nexport type FormFieldHandle = {\n  checkValidity: () => boolean;\n  readonly internals: ElementInternals;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n  setValidity: ElementInternals['setValidity'];\n};\n\nexport const defineField = <T = unknown>(\n  options: FormFieldOptions<T>,\n  callbacks?: FormFieldCallbacks,\n): FormFieldHandle => {\n  const rt = currentRuntime();\n  const host = rt.el;\n  const ctor = host.constructor as typeof HTMLElement & { formAssociated?: boolean };\n\n  if (!ctor.formAssociated) {\n    throw new Error('[craftit:E8] defineField() requires defineComponent({ formAssociated: true })');\n  }\n\n  const internals = internalsRegistry.get(host) ?? host.attachInternals();\n\n  internalsRegistry.set(host, internals);\n\n  const toFormValue = options.toFormValue ?? ((v: T) => (v == null ? '' : String(v)));\n\n  effect(() => {\n    internals.setFormValue(toFormValue(options.value.value));\n  });\n\n  if (options.disabled) {\n    effect(() => {\n      if (options.disabled!.value) {\n        internals.states.add('disabled');\n      } else {\n        internals.states.delete('disabled');\n      }\n    });\n  }\n\n  if (callbacks) {\n    formCallbackRegistry.set(host, { ...formCallbackRegistry.get(host), ...callbacks });\n  }\n\n  const checkValidity = () => internals.checkValidity();\n  const reportValidity = () => internals.reportValidity();\n  const setCustomValidity = (message: string) =>\n    message ? internals.setValidity({ customError: true }, message) : internals.setValidity({});\n\n  return {\n    checkValidity,\n    internals,\n    reportValidity,\n    setCustomValidity,\n    setValidity: internals.setValidity.bind(internals),\n  };\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n// PROP SYSTEM\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype PropType<T> = T extends string\n  ? StringConstructor\n  : T extends number\n    ? NumberConstructor\n    : T extends boolean\n      ? BooleanConstructor\n      : T extends unknown[]\n        ? ArrayConstructor\n        : ObjectConstructor;\n\nexport type PropOptions<T> = {\n  /** When `true`, removes the host attribute instead of setting it to `\"\"` when the value is an empty string. */\n  omit?: boolean;\n  parse?: (value: string | null) => T;\n  reflect?: boolean;\n  type?: PropType<T>;\n};\n\nexport type PropDef<T> = PropOptions<T> & { default: T };\nexport type PropInputDefs = Record<string, unknown | PropDef<unknown>>;\n\ntype PropMeta<T = unknown> = {\n  parse: (value: string | null) => T;\n  reflect: boolean;\n  signal: Signal<T>;\n};\n\nconst PROP_DEF_KEYS = new Set(['default', 'omit', 'parse', 'reflect', 'type']);\nconst isPropDef = (value: unknown): value is PropDef<unknown> => {\n  if (typeof value !== 'object' || value === null || !('default' in value)) return false;\n\n  return Object.keys(value).every((key) => PROP_DEF_KEYS.has(key));\n};\n\nexport const propRegistry = new WeakMap<object, Map<string, PropMeta<unknown>>>();\n\nexport const prop = <T>(name: string, defaultValue: T, options?: PropOptions<T>): Signal<T> => {\n  const rt = currentRuntime();\n  const el = rt.el;\n\n  if (!propRegistry.has(el)) propRegistry.set(el, new Map());\n\n  const parse =\n    options?.parse ??\n    ((v: string | null): T => {\n      // Explicit Boolean type: string values 'true' / '' → boolean\n      if (options?.type === Boolean) return (v === '' || v === 'true') as T;\n\n      // Boolean default: treat absent or explicit \"false\" as false, anything else as true.\n      // This handles frameworks (e.g. Vue) that set the attribute to the string \"false\"\n      // when a reactive binding evaluates to false, rather than removing the attribute.\n      if (typeof defaultValue === 'boolean') return (v !== null && v !== 'false') as T;\n\n      if (v == null) return defaultValue;\n\n      // Numeric — inferred from an explicit type option or default value type\n      if (options?.type === Number || typeof defaultValue === 'number') return Number(v) as T;\n\n      return v as unknown as T;\n    });\n  const s = signal<T>(defaultValue);\n  const hasPreUpgradeProperty = Object.prototype.hasOwnProperty.call(el, name);\n  const preUpgradeValue = hasPreUpgradeProperty ? (el as unknown as Record<string, unknown>)[name] : undefined;\n\n  const meta = {\n    parse,\n    reflect: options?.reflect ?? true,\n    signal: s as Signal<unknown>,\n  };\n\n  // Prefer pre-upgrade property values set before defineProperty() (common for\n  // framework/host property bindings), then fall back to attributes.\n  if (hasPreUpgradeProperty) {\n    delete (el as unknown as Record<string, unknown>)[name];\n    s.value = preUpgradeValue as T;\n  } else if (el.hasAttribute(name)) {\n    s.value = parse(el.getAttribute(name)) as T;\n  }\n\n  propRegistry.get(el)!.set(name, meta);\n\n  Object.defineProperty(el, name, {\n    configurable: true,\n    enumerable: true,\n    get: () => s.value,\n    set: (value: T) => {\n      s.value = value;\n    },\n  });\n\n  if (options?.reflect ?? true) {\n    const omit = options?.omit ?? false;\n\n    rt.onMount.push(() => {\n      rt.cleanups.push(\n        effect(() => {\n          const v = s.value;\n\n          if (v == null || v === false || (omit && v === '')) {\n            el.removeAttribute(name);\n          } else {\n            setAttr(el, name, v);\n          }\n        }),\n      );\n    });\n  }\n\n  return s;\n};\n\ntype InferPropValue<T> = T extends object\n  ? Exclude<keyof T, keyof PropDef<unknown>> extends never\n    ? T extends PropDef<infer U>\n      ? U\n      : T\n    : T\n  : T;\n\nexport type InferPropsSignals<T extends PropInputDefs> = {\n  [K in keyof T]: Signal<InferPropValue<T[K]>>;\n};\n\nexport function createProps<D extends PropInputDefs>(defs: D): InferPropsSignals<D> {\n  const result = {} as Record<string, Signal<unknown>>;\n\n  for (const [name, def] of Object.entries(defs)) {\n    const descriptor = isPropDef(def) ? (def as PropDef<unknown>) : { default: def };\n    const hasStructuredDefault =\n      (typeof descriptor.default === 'object' && descriptor.default !== null) || Array.isArray(descriptor.default);\n    const propDef: PropOptions<unknown> = { reflect: !hasStructuredDefault, ...descriptor };\n\n    result[name] = prop(toKebab(name), descriptor.default, propDef);\n  }\n\n  return result as InferPropsSignals<D>;\n}\n\n/**\n * Forces TypeScript to infer the prop signal type from `T` rather than the default\n * value's literal type. Use in `defineComponent({ props: ... })` when the default\n * is `undefined` or when you want an explicit union type.\n *\n * @example\n * defineComponent<ButtonProps>({\n *   props: {\n *     color: typed<ThemeColor | undefined>(undefined),\n *     disabled: { default: false },\n *   },\n *   setup({ props }) {\n *     return html`<button>${props.color}</button>`;\n *   },\n *   tag: 'x-button',\n * });\n */\nexport const typed = <T>(defaultValue: T, options?: PropOptions<T>): PropDef<T> => ({\n  ...options,\n  default: defaultValue,\n});\n\n// ─────────────────────────────────────────────────────────────────────────────\n// COMPONENT SETUP & REGISTRATION\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport type ComponentSetupContext = {\n  /** The host `HTMLElement` instance for this component. */\n  host: HTMLElement;\n  /** Shorthand for `host.shadowRoot` — the component's open shadow root. */\n  shadow: ShadowRoot;\n};\n\nexport type ComponentRegistrationOptions = {\n  /** Indicates if this should be a form-associated element */\n  formAssociated?: boolean;\n  /** Custom options for host element (e.g. for aria-*) */\n  host?: Record<string, string | boolean | number>;\n  /** @internal — list of attribute names to observe via attributeChangedCallback */\n  observedAttrs?: string[];\n  /** Shadow root init options (mode is always 'open') — use e.g. `{ delegatesFocus: true }` for form controls */\n  shadow?: Omit<ShadowRootInit, 'mode'>;\n  /** Component styles applied to the shadow root. Static — set at definition time, not per-render. */\n  styles?: (string | CSSStyleSheet | CSSResult)[];\n};\n\n/**\n * Helper type to build a prop schema from a props interface type.\n * Each property maps to a PropOptions shape with a `default` value.\n */\nexport type BuildPropSchema<T> = {\n  [K in keyof T]-?: PropDef<T[K]>;\n};\n\n/**\n * Unified setup context passed to `defineComponent` setup function.\n * Both Props and Events generics flow through to give full type safety.\n */\nexport type DefineComponentSetupContext<\n  P extends Record<string, PropOptions<any>> = Record<string, never>,\n  E extends Record<string, unknown> = Record<string, never>,\n> = {\n  /** Typed emit function — fully inferred from the Events generic */\n  emit: EmitFn<E>;\n  /** Host element */\n  host: HTMLElement;\n  /** Reactive props as signals — fully inferred from the Props generic */\n  props: InferPropsSignals<P>;\n  /** Reflect reactive attributes, events and classes to the host */\n  reflect: (config: ReflectConfig) => void;\n  /** Shadow root */\n  shadow: ShadowRoot;\n  /** Slots helper */\n  slots: Slots<any>;\n};\n\n/**\n * Configuration object for `defineComponent()`.\n * Note: no `emits` field — declare events via the Events generic instead.\n */\nexport type DefineComponentOptions<\n  PropsSchema extends Record<string, PropDef<any>> = Record<string, never>,\n  Emits extends Record<string, unknown> = Record<string, never>,\n> = {\n  /** Whether this element is form-associated */\n  formAssociated?: boolean;\n  /** Host element attributes */\n  host?: Record<string, string | boolean | number>;\n  /** Property definitions */\n  props?: PropsSchema;\n  /** Setup function — returns a template */\n  setup: (ctx: DefineComponentSetupContext<PropsSchema, Emits>) => string | HTMLResult;\n  /** Shadow root init options */\n  shadow?: Omit<ShadowRootInit, 'mode'>;\n  /** Component styles */\n  styles?: (string | CSSStyleSheet | CSSResult)[];\n  /** Custom element tag name (must include a hyphen) */\n  tag: string;\n};\n\n// ─── Base custom element ──────────────────────────────────────────────────────\n\ntype ComponentRuntime = {\n  cleanups: CleanupFn[];\n  el: HTMLElement;\n  errorHandlers: Array<(err: unknown) => void>;\n  onMount: Array<() => CleanupFn | undefined | void>;\n  styles?: (string | CSSStyleSheet | CSSResult)[];\n};\n\n// Lifecycle methods (connectedCallback, attributeChangedCallback, …) are invoked\n// by the browser runtime, not TypeScript code — suppress false-positive lint warnings.\n\nclass BaseElement extends HTMLElement {\n  static _setup: (ctx: ComponentSetupContext) => string | HTMLResult;\n  static _options?: ComponentRegistrationOptions;\n  static formAssociated = false;\n  static observedAttributes: string[] = [];\n\n  shadow: ShadowRoot;\n  private _keyedStates = new Map<string, Map<string | number, KeyedNode>>();\n  private _mountFns: (() => CleanupFn | undefined | void)[] = [];\n  private _template: string | HTMLResult | null = null;\n  private _appliedHtmlBindings = new Set<string>();\n  private _setupDone = false;\n  private _runtime: ComponentRuntime;\n\n  constructor() {\n    super();\n\n    const options = (this.constructor as typeof BaseElement)._options;\n\n    this.shadow = this.attachShadow({ mode: 'open', ...options?.shadow });\n    this._runtime = {\n      cleanups: [],\n      el: this,\n      errorHandlers: [],\n      onMount: [],\n      styles: options?.styles,\n    };\n  }\n\n  connectedCallback(): void {\n    if (!this._setupDone) this._runSetup();\n\n    this._init();\n  }\n\n  // Fires synchronously on observed attribute change — no MutationObserver needed.\n  // observedAttributes is set at class-definition time from the prop schema.\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) return;\n\n    const meta = propRegistry.get(this)?.get(name);\n\n    if (!meta) return;\n\n    const parsed = meta.parse(newValue);\n\n    if (!Object.is(meta.signal.peek(), parsed)) meta.signal.value = parsed as never;\n  }\n\n  disconnectedCallback(): void {\n    runAll(this._runtime.cleanups);\n    this._runtime.cleanups = [];\n    this._runtime.onMount = this._mountFns.slice(); // restore for reconnect\n    this._appliedHtmlBindings.clear();\n    this._keyedStates.clear();\n  }\n\n  formAssociatedCallback(form: HTMLFormElement | null): void {\n    formCallbackRegistry.get(this)?.onAssociated?.(form);\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    formCallbackRegistry.get(this)?.onDisabled?.(disabled);\n  }\n\n  formResetCallback(): void {\n    formCallbackRegistry.get(this)?.onReset?.();\n  }\n\n  formStateRestoreCallback(state: unknown, mode: 'autocomplete' | 'restore'): void {\n    formCallbackRegistry.get(this)?.onStateRestore?.(state, mode);\n  }\n\n  private _handleError(err: unknown): void {\n    if (this._runtime.errorHandlers.length > 0) {\n      for (const fn of this._runtime.errorHandlers) fn(err);\n    } else {\n      console.error(`[craftit:E3] <${this.localName}>`, err);\n    }\n  }\n\n  private _runSetup(): void {\n    this._setupDone = true;\n    runtimeStack.push(this._runtime as any);\n\n    try {\n      const { host: hostOptions } = (this.constructor as typeof BaseElement)._options ?? {};\n\n      if (hostOptions) {\n        for (const [name, value] of Object.entries(hostOptions)) {\n          if (typeof value === 'boolean') {\n            if (value) {\n              this.setAttribute(name, '');\n            } else {\n              this.removeAttribute(name);\n            }\n          } else {\n            this.setAttribute(name, String(value));\n          }\n        }\n      }\n\n      const res = (this.constructor as typeof BaseElement)._setup({ host: this, shadow: this.shadow });\n\n      if (typeof res === 'string' || (typeof res === 'object' && res !== null && '__html' in res)) {\n        this._template = res as string | HTMLResult;\n      }\n    } catch (err) {\n      this._handleError(err);\n    } finally {\n      runtimeStack.pop();\n    }\n  }\n\n  private _init(): void {\n    const { styles } = this._runtime;\n\n    // Apply styles synchronously before rendering to prevent FOUC.\n    if (styles?.length) this.shadow.adoptedStyleSheets = styles.map(loadStylesheet);\n\n    if (this._template) {\n      const result: HTMLResult = typeof this._template === 'string' ? htmlResult(this._template) : this._template;\n\n      this.shadow.replaceChildren(parseHTML(result.__html));\n\n      if (result.__bindings.length) {\n        const registerCleanup: RegisterCleanup = (fn) => this._runtime.cleanups.push(fn);\n\n        applyBindingsInContainer(this.shadow, result.__bindings, registerCleanup, {\n          onHtml: (b) => {\n            if (!this._appliedHtmlBindings.has(b.uid)) {\n              this._appliedHtmlBindings.add(b.uid);\n              applyHtmlBinding(this.shadow, b, registerCleanup, this._keyedStates);\n            }\n          },\n        });\n      }\n    }\n\n    // Defer onMount callbacks to a microtask for deterministic timing.\n    // Components that depend on layout/paint should schedule rAF inside onMount.\n    queueMicrotask(() => {\n      runtimeStack.push(this._runtime as any);\n\n      try {\n        const fns = this._runtime.onMount;\n\n        this._mountFns = fns.slice(); // snapshot for reconnect\n\n        for (const fn of fns) {\n          const cleanup = fn();\n\n          if (typeof cleanup === 'function') this._runtime.cleanups.push(cleanup);\n        }\n      } catch (err) {\n        this._handleError(err);\n      } finally {\n        runtimeStack.pop();\n        this._runtime.onMount = [];\n      }\n    });\n  }\n}\n\n// ─── Component registration ───────────────────────────────────────────────────\n\n/** @internal — use `defineComponent` instead. */\nexport function registerComponent(\n  tag: string,\n  setup: (ctx: ComponentSetupContext) => string | HTMLResult,\n  options: ComponentRegistrationOptions = {},\n): string {\n  if (!tag) throw new Error('[craftit:E4] registerComponent(tag, ...) requires a tag name');\n\n  if (customElements.get(tag)) {\n    throw new Error(`[craftit:E9] custom element already defined: ${tag}`);\n  }\n\n  class Element extends BaseElement {\n    static override _setup = setup;\n    static override _options = options;\n    static override formAssociated = options.formAssociated ?? false;\n    static override observedAttributes = options.observedAttrs ?? [];\n  }\n\n  customElements.define(tag, Element);\n\n  return tag;\n}\n\n/**\n * Defines a custom element with a cohesive, type-safe API.\n *\n * Pass your Props and Events interfaces as generics — everything in `setup`\n * is fully typed with zero boilerplate.\n *\n * @example\n * ```ts\n * type MyProps = { checked?: boolean; disabled?: boolean };\n * type MyEvents = { change: { checked: boolean } };\n *\n * defineComponent<MyProps, MyEvents>({\n *   tag: 'my-checkbox',\n *   props: {\n *     checked: { default: false },\n *     disabled: { default: false },\n *   },\n *   setup({ props, emit }) {\n *     // props.checked → Signal<boolean>  ✅\n *     // emit('change', { checked: true }) ✅\n *   },\n * });\n * ```\n */\nexport function defineComponent<\n  PropsType = Record<string, never>,\n  EventsType extends Record<string, unknown> = Record<string, never>,\n>(options: DefineComponentOptions<BuildPropSchema<PropsType>, EventsType>): string {\n  const { formAssociated, host: hostOptions, props: propDefs, setup, shadow: shadowOptions, styles, tag } = options;\n\n  // Derive observed attribute names from prop schema at definition time so\n  // attributeChangedCallback fires correctly — no MutationObserver needed.\n  const observedAttrs = propDefs ? Object.keys(propDefs).map(toKebab) : [];\n\n  return registerComponent(\n    tag,\n    (ctx) => {\n      const props = propDefs\n        ? createProps(propDefs as BuildPropSchema<PropsType>)\n        : ({} as InferPropsSignals<BuildPropSchema<PropsType>>);\n      const emit = createEmitFn<EventsType>();\n      const slots = createSlots<any>();\n\n      return setup({\n        emit: emit as EmitFn<EventsType>,\n        host: ctx.host,\n        props,\n        reflect: (config: ReflectConfig) => reflect(ctx.host, config),\n        shadow: ctx.shadow,\n        slots,\n      } as DefineComponentSetupContext<BuildPropSchema<PropsType>, EventsType>);\n    },\n    { formAssociated, host: hostOptions, observedAttrs, shadow: shadowOptions, styles },\n  );\n}\n"],"mappings":"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"}