@vielzeug/craftit 2.0.1 → 2.1.0

package/dist/directives/attr.cjs

@@ -1,2 +1,2 @@
-require(`../core/internal.cjs`);const e=require(`./spread.cjs`);require(`@vielzeug/stateit`);function t(t){let n={};for(let[e,r]of Object.entries(t))n[`.${e}`]=r;return e.spread(n)}exports.attr=t;
+require(`../internal.cjs`);const e=require(`./spread.cjs`);require(`@vielzeug/stateit`);function t(t){let n={};for(let[e,r]of Object.entries(t))n[`.${e}`]=r;return e.spread(n)}exports.attrs=t;
 //# sourceMappingURL=attr.cjs.map

package/dist/directives/attr.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"attr.cjs","names":[],"sources":["../../src/directives/attr.ts"],"sourcesContent":["import { type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { spread } from './spread';\n\nexport type AttrValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined);\n\n/**\n * Batch DOM property-binding helper.\n *\n * The public name stays `attr(...)` for ergonomics, but the mapped entries are\n * applied as `.property` bindings under the hood.\n *\n * @example\n * html`<input ${attr({ value, disabled, readOnly: readonly })} />`\n */\nexport function attr(map: Record<string, AttrValue>): Directive {\n  const mapped: Record<string, AttrValue> = {};\n\n  for (const [key, value] of Object.entries(map)) {\n    mapped[`.${key}`] = value;\n  }\n\n  return spread(mapped);\n}\n"],"mappings":"6FAuBA,SAAgB,EAAK,EAA2C,CAC9D,IAAM,EAAoC,EAAE,CAE5C,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAO,IAAI,KAAS,EAGtB,OAAO,EAAA,OAAO,EAAO"}
+{"version":3,"file":"attr.cjs","names":[],"sources":["../../src/directives/attr.ts"],"sourcesContent":["import { type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../internal';\nimport { spread } from './spread';\n\nexport type AttrValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined);\n\n/**\n * Batch DOM property-binding helper.\n * Applied as `.property` bindings under the hood.\n *\n * @example\n * html`<input ${attrs({ value, disabled, readOnly: readonly })} />`\n */\nexport function attrs(map: Record<string, AttrValue>): Directive {\n  const mapped: Record<string, AttrValue> = {};\n\n  for (const [key, value] of Object.entries(map)) {\n    mapped[`.${key}`] = value;\n  }\n\n  return spread(mapped);\n}\n"],"mappings":"wFAqBA,SAAgB,EAAM,EAA2C,CAC/D,IAAM,EAAoC,EAAE,CAE5C,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAO,IAAI,KAAS,EAGtB,OAAO,EAAA,OAAO,EAAO"}

package/dist/directives/attr.d.ts

@@ -1,14 +1,12 @@
 import { type ReadonlySignal } from '@vielzeug/stateit';
-import { type Directive } from '../core/internal';
+import { type Directive } from '../internal';
 export type AttrValue = string | number | boolean | null | undefined | ReadonlySignal<string | number | boolean | null | undefined> | (() => string | number | boolean | null | undefined);
 /**
  * Batch DOM property-binding helper.
- *
- * The public name stays `attr(...)` for ergonomics, but the mapped entries are
- * applied as `.property` bindings under the hood.
+ * Applied as `.property` bindings under the hood.
  *
  * @example
- * html`<input ${attr({ value, disabled, readOnly: readonly })} />`
+ * html`<input ${attrs({ value, disabled, readOnly: readonly })} />`
  */
-export declare function attr(map: Record<string, AttrValue>): Directive;
+export declare function attrs(map: Record<string, AttrValue>): Directive;
 //# sourceMappingURL=attr.d.ts.map

package/dist/directives/attr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attr.d.ts","sourceRoot":"","sources":["../../src/directives/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAC5D,CAAC,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEzD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAQ9D"}
+{"version":3,"file":"attr.d.ts","sourceRoot":"","sources":["../../src/directives/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAC5D,CAAC,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEzD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAQ/D"}

package/dist/directives/attr.js

@@ -1,2 +1,2 @@
-import"../core/internal.js";import{spread as e}from"./spread.js";import"@vielzeug/stateit";function t(t){let n={};for(let[e,r]of Object.entries(t))n[`.${e}`]=r;return e(n)}export{t as attr};
+import"../internal.js";import{spread as e}from"./spread.js";import"@vielzeug/stateit";function t(t){let n={};for(let[e,r]of Object.entries(t))n[`.${e}`]=r;return e(n)}export{t as attrs};
 //# sourceMappingURL=attr.js.map

package/dist/directives/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","names":[],"sources":["../../src/directives/attr.ts"],"sourcesContent":["import { type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { spread } from './spread';\n\nexport type AttrValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined);\n\n/**\n * Batch DOM property-binding helper.\n *\n * The public name stays `attr(...)` for ergonomics, but the mapped entries are\n * applied as `.property` bindings under the hood.\n *\n * @example\n * html`<input ${attr({ value, disabled, readOnly: readonly })} />`\n */\nexport function attr(map: Record<string, AttrValue>): Directive {\n  const mapped: Record<string, AttrValue> = {};\n\n  for (const [key, value] of Object.entries(map)) {\n    mapped[`.${key}`] = value;\n  }\n\n  return spread(mapped);\n}\n"],"mappings":"2FAuBA,SAAgB,EAAK,EAA2C,CAC9D,IAAM,EAAoC,EAAE,CAE5C,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAO,IAAI,KAAS,EAGtB,OAAO,EAAO,EAAO"}
+{"version":3,"file":"attr.js","names":[],"sources":["../../src/directives/attr.ts"],"sourcesContent":["import { type ReadonlySignal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../internal';\nimport { spread } from './spread';\n\nexport type AttrValue =\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | ReadonlySignal<string | number | boolean | null | undefined>\n  | (() => string | number | boolean | null | undefined);\n\n/**\n * Batch DOM property-binding helper.\n * Applied as `.property` bindings under the hood.\n *\n * @example\n * html`<input ${attrs({ value, disabled, readOnly: readonly })} />`\n */\nexport function attrs(map: Record<string, AttrValue>): Directive {\n  const mapped: Record<string, AttrValue> = {};\n\n  for (const [key, value] of Object.entries(map)) {\n    mapped[`.${key}`] = value;\n  }\n\n  return spread(mapped);\n}\n"],"mappings":"sFAqBA,SAAgB,EAAM,EAA2C,CAC/D,IAAM,EAAoC,EAAE,CAE5C,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAI,CAC5C,EAAO,IAAI,KAAS,EAGtB,OAAO,EAAO,EAAO"}

package/dist/directives/bind.cjs

@@ -1,2 +1,2 @@
-require(`../core/internal.cjs`);const e=require(`./attr.cjs`);require(`@vielzeug/stateit`);function t(t){return{mount(n,r){let i=n;(i.type===`checkbox`||i.type===`radio`?e.attr({checked:t}):e.attr({value:t})).mount(n,r)}}}exports.bind=t;
+const e=require(`../internal.cjs`),t=require(`./attr.cjs`);require(`@vielzeug/stateit`);var n=e=>{if(typeof e!=`object`||!e||!(`value`in e))return!1;let t=e.value;return typeof t==`object`&&!!t&&`value`in t},r=(e,t)=>t||(e instanceof HTMLInputElement&&(e.type===`checkbox`||e.type===`radio`)?`checked`:`value`),i=(e,t,n)=>n||(t===`checked`||e instanceof HTMLSelectElement?`change`:`input`),a=(e,t)=>{if(t===`checked`){if(!(e instanceof HTMLInputElement)||e.type!==`checkbox`&&e.type!==`radio`)throw Error(`[craftit:bind] mode "checked" requires <input type="checkbox|radio">.`);return}if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement))throw Error(`[craftit:bind] value binding requires <input>, <textarea>, or <select>.`)},o=e=>{if(e.event!==void 0&&e.event.trim()===``)throw Error(`[craftit:bind] options.event must be a non-empty event name.`);if(e.parse!==void 0&&typeof e.parse!=`function`)throw Error(`[craftit:bind] options.parse must be a function when provided.`)},s=(e,t,n,r)=>{let i=t===`checked`?e.checked:e.value;return n.parse?n.parse(i,e,r):t===`checked`?i:typeof n.value.value==`number`?Number(i):i};function c(c){return{mount(l,u){let d=n(c)?c:{value:c};o(d);let f=r(l,d.as);a(l,f);let p=i(l,f,d.event);t.attrs(f===`checked`?{checked:d.value}:{value:d.value}).mount(l,u),u.registerCleanup(e.listen(l,p,e=>{let t=s(l,f,d,e);Object.is(d.value.value,t)||(d.value.value=t)}))}}}exports.bind=c;
 //# sourceMappingURL=bind.cjs.map

package/dist/directives/bind.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"bind.cjs","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { attr } from './attr';\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.\n * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.\n * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;\n *   syncs `.checked` via the `change` event.\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind(name)} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind(accepted)} />`\n *\n * const size = signal('');\n * html`<select ${bind(size)}><option value=\"sm\">S</option></select>`\n */\nexport function bind(sig: Signal<boolean>): Directive;\nexport function bind(sig: Signal<string>): Directive;\nexport function bind(sig: Signal<boolean> | Signal<string>): Directive {\n  return {\n    mount(el, context) {\n      const input = el as HTMLInputElement;\n      const isToggle = input.type === 'checkbox' || input.type === 'radio';\n\n      (isToggle ? attr({ checked: sig as Signal<boolean> }) : attr({ value: sig as Signal<string> })).mount!(\n        el,\n        context,\n      );\n    },\n  };\n}\n"],"mappings":"2FAgCA,SAAgB,EAAK,EAAkD,CACrE,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAQ,GACG,EAAM,OAAS,YAAc,EAAM,OAAS,QAEjD,EAAA,KAAK,CAAE,QAAS,EAAwB,CAAC,CAAG,EAAA,KAAK,CAAE,MAAO,EAAuB,CAAC,EAAE,MAC9F,EACA,EACD,EAEJ"}
+{"version":3,"file":"bind.cjs","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive, listen } from '../internal';\nimport { attrs } from './attr';\n\nexport type BindMode = 'checked' | 'value';\n\nexport type BindOptions<T extends boolean | number | string> = {\n  as?: BindMode;\n  event?: string;\n  parse?: (value: boolean | string, element: HTMLElement, event: Event) => T;\n  value: Signal<T>;\n};\n\nconst isBindOptions = <T extends boolean | number | string>(\n  input: Signal<T> | BindOptions<T>,\n): input is BindOptions<T> => {\n  if (typeof input !== 'object' || input === null || !('value' in input)) return false;\n\n  const candidate = (input as BindOptions<T>).value as unknown;\n\n  return typeof candidate === 'object' && candidate !== null && 'value' in (candidate as object);\n};\n\nconst resolveMode = (element: HTMLElement, explicitMode?: BindMode): BindMode => {\n  if (explicitMode) return explicitMode;\n\n  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {\n    return 'checked';\n  }\n\n  return 'value';\n};\n\nconst resolveEventName = (element: HTMLElement, mode: BindMode, explicitEvent?: string): string => {\n  if (explicitEvent) return explicitEvent;\n\n  if (mode === 'checked' || element instanceof HTMLSelectElement) return 'change';\n\n  return 'input';\n};\n\nconst assertBindableTarget = (element: HTMLElement, mode: BindMode): void => {\n  if (mode === 'checked') {\n    if (!(element instanceof HTMLInputElement) || (element.type !== 'checkbox' && element.type !== 'radio')) {\n      throw new Error('[craftit:bind] mode \"checked\" requires <input type=\"checkbox|radio\">.');\n    }\n\n    return;\n  }\n\n  if (\n    !(\n      element instanceof HTMLInputElement ||\n      element instanceof HTMLTextAreaElement ||\n      element instanceof HTMLSelectElement\n    )\n  ) {\n    throw new Error('[craftit:bind] value binding requires <input>, <textarea>, or <select>.');\n  }\n};\n\nconst validateBindOptions = <T extends boolean | number | string>(options: BindOptions<T>): void => {\n  if (options.event !== undefined && options.event.trim() === '') {\n    throw new Error('[craftit:bind] options.event must be a non-empty event name.');\n  }\n\n  if (options.parse !== undefined && typeof options.parse !== 'function') {\n    throw new Error('[craftit:bind] options.parse must be a function when provided.');\n  }\n};\n\nconst readBoundValue = <T extends boolean | number | string>(\n  element: HTMLElement,\n  mode: BindMode,\n  options: BindOptions<T>,\n  event: Event,\n): T => {\n  const raw = mode === 'checked' ? (element as HTMLInputElement).checked : (element as HTMLInputElement).value;\n\n  if (options.parse) return options.parse(raw, element, event);\n\n  if (mode === 'checked') return raw as T;\n\n  if (typeof options.value.value === 'number') return Number(raw) as T;\n\n  return raw as T;\n};\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * Defaults:\n * - Checkbox/radio elements bind `.checked` via `change`\n * - Other form elements bind `.value` via `input`\n * - Select elements bind `.value` via `change`\n * - Number signals default to `Number(el.value)` unless you provide `parse`\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attrs(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind({ value: name })} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind({ value: accepted })} />`\n *\n * const amount = signal(1);\n * html`<input type=\"number\" ${bind({ value: amount })} />`\n */\nexport function bind<T extends boolean | number | string>(value: Signal<T>): Directive;\nexport function bind<T extends boolean | number | string>(options: BindOptions<T>): Directive;\nexport function bind<T extends boolean | number | string>(input: Signal<T> | BindOptions<T>): Directive {\n  return {\n    mount(el, context) {\n      const options = isBindOptions(input) ? input : ({ value: input } as BindOptions<T>);\n\n      validateBindOptions(options);\n\n      const mode = resolveMode(el, options.as);\n\n      assertBindableTarget(el, mode);\n\n      const eventName = resolveEventName(el, mode, options.event);\n\n      attrs(mode === 'checked' ? { checked: options.value } : { value: options.value }).mount!(el, context);\n\n      context.registerCleanup(\n        listen(el, eventName, (event: Event) => {\n          const next = readBoundValue(el, mode, options, event);\n\n          if (!Object.is(options.value.value, next)) options.value.value = next;\n        }),\n      );\n    },\n  };\n}\n"],"mappings":"wFAcA,IAAM,EACJ,GAC4B,CAC5B,GAAI,OAAO,GAAU,WAAY,GAAkB,EAAE,UAAW,GAAQ,MAAO,GAE/E,IAAM,EAAa,EAAyB,MAE5C,OAAO,OAAO,GAAc,YAAY,GAAsB,UAAY,GAGtE,GAAe,EAAsB,IACrC,IAEA,aAAmB,mBAAqB,EAAQ,OAAS,YAAc,EAAQ,OAAS,SACnF,UAGF,SAGH,GAAoB,EAAsB,EAAgB,IAC1D,IAEA,IAAS,WAAa,aAAmB,kBAA0B,SAEhE,SAGH,GAAwB,EAAsB,IAAyB,CAC3E,GAAI,IAAS,UAAW,CACtB,GAAI,EAAE,aAAmB,mBAAsB,EAAQ,OAAS,YAAc,EAAQ,OAAS,QAC7F,MAAU,MAAM,wEAAwE,CAG1F,OAGF,GACE,EACE,aAAmB,kBACnB,aAAmB,qBACnB,aAAmB,mBAGrB,MAAU,MAAM,0EAA0E,EAIxF,EAA4D,GAAkC,CAClG,GAAI,EAAQ,QAAU,IAAA,IAAa,EAAQ,MAAM,MAAM,GAAK,GAC1D,MAAU,MAAM,+DAA+D,CAGjF,GAAI,EAAQ,QAAU,IAAA,IAAa,OAAO,EAAQ,OAAU,WAC1D,MAAU,MAAM,iEAAiE,EAI/E,GACJ,EACA,EACA,EACA,IACM,CACN,IAAM,EAAM,IAAS,UAAa,EAA6B,QAAW,EAA6B,MAQvG,OANI,EAAQ,MAAc,EAAQ,MAAM,EAAK,EAAS,EAAM,CAExD,IAAS,UAAkB,EAE3B,OAAO,EAAQ,MAAM,OAAU,SAAiB,OAAO,EAAI,CAExD,GA+BT,SAAgB,EAA0C,EAA8C,CACtG,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAU,EAAc,EAAM,CAAG,EAAS,CAAE,MAAO,EAAO,CAEhE,EAAoB,EAAQ,CAE5B,IAAM,EAAO,EAAY,EAAI,EAAQ,GAAG,CAExC,EAAqB,EAAI,EAAK,CAE9B,IAAM,EAAY,EAAiB,EAAI,EAAM,EAAQ,MAAM,CAE3D,EAAA,MAAM,IAAS,UAAY,CAAE,QAAS,EAAQ,MAAO,CAAG,CAAE,MAAO,EAAQ,MAAO,CAAC,CAAC,MAAO,EAAI,EAAQ,CAErG,EAAQ,gBACN,EAAA,OAAO,EAAI,EAAY,GAAiB,CACtC,IAAM,EAAO,EAAe,EAAI,EAAM,EAAS,EAAM,CAEhD,OAAO,GAAG,EAAQ,MAAM,MAAO,EAAK,GAAE,EAAQ,MAAM,MAAQ,IACjE,CACH,EAEJ"}

package/dist/directives/bind.d.ts

@@ -1,15 +1,23 @@
 import { type Signal } from '@vielzeug/stateit';
-import { type Directive } from '../core/internal';
+import { type Directive } from '../internal';
+export type BindMode = 'checked' | 'value';
+export type BindOptions<T extends boolean | number | string> = {
+    as?: BindMode;
+    event?: string;
+    parse?: (value: boolean | string, element: HTMLElement, event: Event) => T;
+    value: Signal<T>;
+};
 /**
  * Creates a two-way binding between a writable Signal and a form element.
  *
- * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.
- * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.
- * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;
- *   syncs `.checked` via the `change` event.
+ * Defaults:
+ * - Checkbox/radio elements bind `.checked` via `change`
+ * - Other form elements bind `.value` via `input`
+ * - Select elements bind `.value` via `change`
+ * - Number signals default to `Number(el.value)` unless you provide `parse`
  *
  * Internally this reuses craftit's shared property-binding path, so `.value`,
- * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.
+ * `.checked`, `attrs(...)`, and `spread({ '.value': ... })` stay in sync.
  *
  * Use in spread position on any form element.
  *
@@ -17,14 +25,14 @@ import { type Directive } from '../core/internal';
  * import { bind } from '@vielzeug/craftit/directives';
  *
  * const name = signal('');
- * html`<input ${bind(name)} />`
+ * html`<input ${bind({ value: name })} />`
  *
  * const accepted = signal(false);
- * html`<input type="checkbox" ${bind(accepted)} />`
+ * html`<input type="checkbox" ${bind({ value: accepted })} />`
  *
- * const size = signal('');
- * html`<select ${bind(size)}><option value="sm">S</option></select>`
+ * const amount = signal(1);
+ * html`<input type="number" ${bind({ value: amount })} />`
  */
-export declare function bind(sig: Signal<boolean>): Directive;
-export declare function bind(sig: Signal<string>): Directive;
+export declare function bind<T extends boolean | number | string>(value: Signal<T>): Directive;
+export declare function bind<T extends boolean | number | string>(options: BindOptions<T>): Directive;
 //# sourceMappingURL=bind.d.ts.map

package/dist/directives/bind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../src/directives/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;AACtD,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC"}
+{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../src/directives/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,MAAM,IAAI;IAC7D,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAClB,CAAC;AA6EF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AACvF,wBAAgB,IAAI,CAAC,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC"}

package/dist/directives/bind.js

@@ -1,2 +1,2 @@
-import"../core/internal.js";import{attr as e}from"./attr.js";import"@vielzeug/stateit";function t(t){return{mount(n,r){let i=n;(i.type===`checkbox`||i.type===`radio`?e({checked:t}):e({value:t})).mount(n,r)}}}export{t as bind};
+import{listen as e}from"../internal.js";import{attrs as t}from"./attr.js";import"@vielzeug/stateit";var n=e=>{if(typeof e!=`object`||!e||!(`value`in e))return!1;let t=e.value;return typeof t==`object`&&!!t&&`value`in t},r=(e,t)=>t||(e instanceof HTMLInputElement&&(e.type===`checkbox`||e.type===`radio`)?`checked`:`value`),i=(e,t,n)=>n||(t===`checked`||e instanceof HTMLSelectElement?`change`:`input`),a=(e,t)=>{if(t===`checked`){if(!(e instanceof HTMLInputElement)||e.type!==`checkbox`&&e.type!==`radio`)throw Error(`[craftit:bind] mode "checked" requires <input type="checkbox|radio">.`);return}if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement))throw Error(`[craftit:bind] value binding requires <input>, <textarea>, or <select>.`)},o=e=>{if(e.event!==void 0&&e.event.trim()===``)throw Error(`[craftit:bind] options.event must be a non-empty event name.`);if(e.parse!==void 0&&typeof e.parse!=`function`)throw Error(`[craftit:bind] options.parse must be a function when provided.`)},s=(e,t,n,r)=>{let i=t===`checked`?e.checked:e.value;return n.parse?n.parse(i,e,r):t===`checked`?i:typeof n.value.value==`number`?Number(i):i};function c(c){return{mount(l,u){let d=n(c)?c:{value:c};o(d);let f=r(l,d.as);a(l,f);let p=i(l,f,d.event);t(f===`checked`?{checked:d.value}:{value:d.value}).mount(l,u),u.registerCleanup(e(l,p,e=>{let t=s(l,f,d,e);Object.is(d.value.value,t)||(d.value.value=t)}))}}}export{c as bind};
 //# sourceMappingURL=bind.js.map

package/dist/directives/bind.js.map

@@ -1 +1 @@
-{"version":3,"file":"bind.js","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive } from '../core/internal';\nimport { attr } from './attr';\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * - **`Signal<string>`** (`<input>`, `<textarea>`): syncs `.value` via the `input` event.\n * - **`Signal<string>`** (`<select>`): syncs `.value` via the `change` event.\n * - **`Signal<boolean>`** (checkbox/radio): auto-detected from the element's `type` attribute;\n *   syncs `.checked` via the `change` event.\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attr(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind(name)} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind(accepted)} />`\n *\n * const size = signal('');\n * html`<select ${bind(size)}><option value=\"sm\">S</option></select>`\n */\nexport function bind(sig: Signal<boolean>): Directive;\nexport function bind(sig: Signal<string>): Directive;\nexport function bind(sig: Signal<boolean> | Signal<string>): Directive {\n  return {\n    mount(el, context) {\n      const input = el as HTMLInputElement;\n      const isToggle = input.type === 'checkbox' || input.type === 'radio';\n\n      (isToggle ? attr({ checked: sig as Signal<boolean> }) : attr({ value: sig as Signal<string> })).mount!(\n        el,\n        context,\n      );\n    },\n  };\n}\n"],"mappings":"uFAgCA,SAAgB,EAAK,EAAkD,CACrE,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAQ,GACG,EAAM,OAAS,YAAc,EAAM,OAAS,QAEjD,EAAK,CAAE,QAAS,EAAwB,CAAC,CAAG,EAAK,CAAE,MAAO,EAAuB,CAAC,EAAE,MAC9F,EACA,EACD,EAEJ"}
+{"version":3,"file":"bind.js","names":[],"sources":["../../src/directives/bind.ts"],"sourcesContent":["import { type Signal } from '@vielzeug/stateit';\n\nimport { type Directive, listen } from '../internal';\nimport { attrs } from './attr';\n\nexport type BindMode = 'checked' | 'value';\n\nexport type BindOptions<T extends boolean | number | string> = {\n  as?: BindMode;\n  event?: string;\n  parse?: (value: boolean | string, element: HTMLElement, event: Event) => T;\n  value: Signal<T>;\n};\n\nconst isBindOptions = <T extends boolean | number | string>(\n  input: Signal<T> | BindOptions<T>,\n): input is BindOptions<T> => {\n  if (typeof input !== 'object' || input === null || !('value' in input)) return false;\n\n  const candidate = (input as BindOptions<T>).value as unknown;\n\n  return typeof candidate === 'object' && candidate !== null && 'value' in (candidate as object);\n};\n\nconst resolveMode = (element: HTMLElement, explicitMode?: BindMode): BindMode => {\n  if (explicitMode) return explicitMode;\n\n  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {\n    return 'checked';\n  }\n\n  return 'value';\n};\n\nconst resolveEventName = (element: HTMLElement, mode: BindMode, explicitEvent?: string): string => {\n  if (explicitEvent) return explicitEvent;\n\n  if (mode === 'checked' || element instanceof HTMLSelectElement) return 'change';\n\n  return 'input';\n};\n\nconst assertBindableTarget = (element: HTMLElement, mode: BindMode): void => {\n  if (mode === 'checked') {\n    if (!(element instanceof HTMLInputElement) || (element.type !== 'checkbox' && element.type !== 'radio')) {\n      throw new Error('[craftit:bind] mode \"checked\" requires <input type=\"checkbox|radio\">.');\n    }\n\n    return;\n  }\n\n  if (\n    !(\n      element instanceof HTMLInputElement ||\n      element instanceof HTMLTextAreaElement ||\n      element instanceof HTMLSelectElement\n    )\n  ) {\n    throw new Error('[craftit:bind] value binding requires <input>, <textarea>, or <select>.');\n  }\n};\n\nconst validateBindOptions = <T extends boolean | number | string>(options: BindOptions<T>): void => {\n  if (options.event !== undefined && options.event.trim() === '') {\n    throw new Error('[craftit:bind] options.event must be a non-empty event name.');\n  }\n\n  if (options.parse !== undefined && typeof options.parse !== 'function') {\n    throw new Error('[craftit:bind] options.parse must be a function when provided.');\n  }\n};\n\nconst readBoundValue = <T extends boolean | number | string>(\n  element: HTMLElement,\n  mode: BindMode,\n  options: BindOptions<T>,\n  event: Event,\n): T => {\n  const raw = mode === 'checked' ? (element as HTMLInputElement).checked : (element as HTMLInputElement).value;\n\n  if (options.parse) return options.parse(raw, element, event);\n\n  if (mode === 'checked') return raw as T;\n\n  if (typeof options.value.value === 'number') return Number(raw) as T;\n\n  return raw as T;\n};\n\n/**\n * Creates a two-way binding between a writable Signal and a form element.\n *\n * Defaults:\n * - Checkbox/radio elements bind `.checked` via `change`\n * - Other form elements bind `.value` via `input`\n * - Select elements bind `.value` via `change`\n * - Number signals default to `Number(el.value)` unless you provide `parse`\n *\n * Internally this reuses craftit's shared property-binding path, so `.value`,\n * `.checked`, `attrs(...)`, and `spread({ '.value': ... })` stay in sync.\n *\n * Use in spread position on any form element.\n *\n * @example\n * import { bind } from '@vielzeug/craftit/directives';\n *\n * const name = signal('');\n * html`<input ${bind({ value: name })} />`\n *\n * const accepted = signal(false);\n * html`<input type=\"checkbox\" ${bind({ value: accepted })} />`\n *\n * const amount = signal(1);\n * html`<input type=\"number\" ${bind({ value: amount })} />`\n */\nexport function bind<T extends boolean | number | string>(value: Signal<T>): Directive;\nexport function bind<T extends boolean | number | string>(options: BindOptions<T>): Directive;\nexport function bind<T extends boolean | number | string>(input: Signal<T> | BindOptions<T>): Directive {\n  return {\n    mount(el, context) {\n      const options = isBindOptions(input) ? input : ({ value: input } as BindOptions<T>);\n\n      validateBindOptions(options);\n\n      const mode = resolveMode(el, options.as);\n\n      assertBindableTarget(el, mode);\n\n      const eventName = resolveEventName(el, mode, options.event);\n\n      attrs(mode === 'checked' ? { checked: options.value } : { value: options.value }).mount!(el, context);\n\n      context.registerCleanup(\n        listen(el, eventName, (event: Event) => {\n          const next = readBoundValue(el, mode, options, event);\n\n          if (!Object.is(options.value.value, next)) options.value.value = next;\n        }),\n      );\n    },\n  };\n}\n"],"mappings":"oGAcA,IAAM,EACJ,GAC4B,CAC5B,GAAI,OAAO,GAAU,WAAY,GAAkB,EAAE,UAAW,GAAQ,MAAO,GAE/E,IAAM,EAAa,EAAyB,MAE5C,OAAO,OAAO,GAAc,YAAY,GAAsB,UAAY,GAGtE,GAAe,EAAsB,IACrC,IAEA,aAAmB,mBAAqB,EAAQ,OAAS,YAAc,EAAQ,OAAS,SACnF,UAGF,SAGH,GAAoB,EAAsB,EAAgB,IAC1D,IAEA,IAAS,WAAa,aAAmB,kBAA0B,SAEhE,SAGH,GAAwB,EAAsB,IAAyB,CAC3E,GAAI,IAAS,UAAW,CACtB,GAAI,EAAE,aAAmB,mBAAsB,EAAQ,OAAS,YAAc,EAAQ,OAAS,QAC7F,MAAU,MAAM,wEAAwE,CAG1F,OAGF,GACE,EACE,aAAmB,kBACnB,aAAmB,qBACnB,aAAmB,mBAGrB,MAAU,MAAM,0EAA0E,EAIxF,EAA4D,GAAkC,CAClG,GAAI,EAAQ,QAAU,IAAA,IAAa,EAAQ,MAAM,MAAM,GAAK,GAC1D,MAAU,MAAM,+DAA+D,CAGjF,GAAI,EAAQ,QAAU,IAAA,IAAa,OAAO,EAAQ,OAAU,WAC1D,MAAU,MAAM,iEAAiE,EAI/E,GACJ,EACA,EACA,EACA,IACM,CACN,IAAM,EAAM,IAAS,UAAa,EAA6B,QAAW,EAA6B,MAQvG,OANI,EAAQ,MAAc,EAAQ,MAAM,EAAK,EAAS,EAAM,CAExD,IAAS,UAAkB,EAE3B,OAAO,EAAQ,MAAM,OAAU,SAAiB,OAAO,EAAI,CAExD,GA+BT,SAAgB,EAA0C,EAA8C,CACtG,MAAO,CACL,MAAM,EAAI,EAAS,CACjB,IAAM,EAAU,EAAc,EAAM,CAAG,EAAS,CAAE,MAAO,EAAO,CAEhE,EAAoB,EAAQ,CAE5B,IAAM,EAAO,EAAY,EAAI,EAAQ,GAAG,CAExC,EAAqB,EAAI,EAAK,CAE9B,IAAM,EAAY,EAAiB,EAAI,EAAM,EAAQ,MAAM,CAE3D,EAAM,IAAS,UAAY,CAAE,QAAS,EAAQ,MAAO,CAAG,CAAE,MAAO,EAAQ,MAAO,CAAC,CAAC,MAAO,EAAI,EAAQ,CAErG,EAAQ,gBACN,EAAO,EAAI,EAAY,GAAiB,CACtC,IAAM,EAAO,EAAe,EAAI,EAAM,EAAS,EAAM,CAEhD,OAAO,GAAG,EAAQ,MAAM,MAAO,EAAK,GAAE,EAAQ,MAAM,MAAQ,IACjE,CACH,EAEJ"}

package/dist/directives/choose.cjs

@@ -1,2 +1,2 @@
-let e=require(`@vielzeug/stateit`);function t(t,n,r){let i=e=>{let t=n.find(([t])=>t===e);return t?t[1]():r?.()??``};return(0,e.isSignal)(t)?()=>i(t.value):typeof t==`function`?()=>i(t()):i(t)}exports.choose=t;
+let e=require(`@vielzeug/stateit`);var t=e=>{if(!Array.isArray(e.cases))throw Error(`[craftit:choose] options.cases must be an array of [key, templateFn] entries.`);for(let t=0;t<e.cases.length;t++){let n=e.cases[t];if(!Array.isArray(n)||n.length!==2||typeof n[1]!=`function`)throw Error(`[craftit:choose] Invalid case at index ${t}. Expected [key, templateFn].`)}if(e.fallback!==void 0&&typeof e.fallback!=`function`)throw Error(`[craftit:choose] options.fallback must be a function when provided.`)};function n(n){t(n);let i=new Map(n.cases),a=e=>(i.get(e)??n.fallback??r)(),{value:o}=n;return(0,e.isSignal)(o)?()=>a(o.value):typeof o==`function`?()=>a(o()):a(o)}var r=()=>``;exports.choose=n;
 //# sourceMappingURL=choose.cjs.map

package/dist/directives/choose.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"choose.cjs","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose(section, [\n *   ['home',  () => html`<h1>Home</h1>`],\n *   ['about', () => html`<h1>About</h1>`],\n * ], () => html`<h1>Not found</h1>`)}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose(tab, [\n *   ['home',  () => html`<home-panel>`],\n *   ['about', () => html`<about-panel>`],\n * ])}`\n *\n * // Reactive getter\n * html`${choose(() => props.view.value, cases)}`\n */\nexport function choose<T extends PropertyKey>(\n  value: ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): TemplateFn;\nexport function choose<T extends PropertyKey>(\n  value: T,\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult;\nexport function choose<T extends PropertyKey>(\n  value: T | ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult | TemplateFn {\n  const pick = (v: T): string | HTMLResult => {\n    const entry = cases.find(([key]) => key === v);\n\n    return entry ? entry[1]() : (defaultFn?.() ?? '');\n  };\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n"],"mappings":"mCA2CA,SAAgB,EACd,EACA,EACA,EACkC,CAClC,IAAM,EAAQ,GAA8B,CAC1C,IAAM,EAAQ,EAAM,MAAM,CAAC,KAAS,IAAQ,EAAE,CAE9C,OAAO,EAAQ,EAAM,IAAI,CAAI,KAAa,EAAI,IAWhD,OARA,EAAA,EAAA,UAAa,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW"}
+{"version":3,"file":"choose.cjs","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\nexport type ChooseOptions<T extends PropertyKey> = {\n  cases: ReadonlyArray<CaseEntry<T>>;\n  fallback?: TemplateFn;\n  value: T | ReadonlySignal<T> | (() => T);\n};\n\nconst validateChooseOptions = <T extends PropertyKey>(options: ChooseOptions<T>): void => {\n  if (!Array.isArray(options.cases)) {\n    throw new Error('[craftit:choose] options.cases must be an array of [key, templateFn] entries.');\n  }\n\n  for (let i = 0; i < options.cases.length; i++) {\n    const entry = options.cases[i] as unknown;\n\n    if (!Array.isArray(entry) || entry.length !== 2 || typeof entry[1] !== 'function') {\n      throw new Error(`[craftit:choose] Invalid case at index ${i}. Expected [key, templateFn].`);\n    }\n  }\n\n  if (options.fallback !== undefined && typeof options.fallback !== 'function') {\n    throw new Error('[craftit:choose] options.fallback must be a function when provided.');\n  }\n};\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose({\n *   value: section,\n *   cases: [\n *     ['home', () => html`<h1>Home</h1>`],\n *     ['about', () => html`<h1>About</h1>`],\n *   ],\n *   fallback: () => html`<h1>Not found</h1>`,\n * })}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose({ value: tab, cases: [['home', () => html`<home-panel>`], ['about', () => html`<about-panel>`]] })}`\n *\n * // Reactive getter\n * html`${choose({ value: () => props.view.value, cases })}`\n */\nexport function choose<T extends PropertyKey>(options: ChooseOptions<T>): string | HTMLResult | TemplateFn {\n  validateChooseOptions(options);\n\n  const caseMap = new Map(options.cases);\n  const pick = (value: T): string | HTMLResult => (caseMap.get(value) ?? options.fallback ?? emptyTemplate)();\n  const { value } = options;\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n\nconst emptyTemplate = (): string => '';\n"],"mappings":"mCAaA,IAAM,EAAgD,GAAoC,CACxF,GAAI,CAAC,MAAM,QAAQ,EAAQ,MAAM,CAC/B,MAAU,MAAM,gFAAgF,CAGlG,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,MAAM,OAAQ,IAAK,CAC7C,IAAM,EAAQ,EAAQ,MAAM,GAE5B,GAAI,CAAC,MAAM,QAAQ,EAAM,EAAI,EAAM,SAAW,GAAK,OAAO,EAAM,IAAO,WACrE,MAAU,MAAM,0CAA0C,EAAE,+BAA+B,CAI/F,GAAI,EAAQ,WAAa,IAAA,IAAa,OAAO,EAAQ,UAAa,WAChE,MAAU,MAAM,sEAAsE,EA+B1F,SAAgB,EAA8B,EAA6D,CACzG,EAAsB,EAAQ,CAE9B,IAAM,EAAU,IAAI,IAAI,EAAQ,MAAM,CAChC,EAAQ,IAAmC,EAAQ,IAAI,EAAM,EAAI,EAAQ,UAAY,IAAgB,CACrG,CAAE,SAAU,EAUlB,OARA,EAAA,EAAA,UAAa,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW,CAGzB,IAAM,MAA8B"}

package/dist/directives/choose.d.ts

@@ -1,7 +1,12 @@
 import { type ReadonlySignal } from '@vielzeug/stateit';
-import type { HTMLResult } from '../core/internal';
+import type { HTMLResult } from '../internal';
 type TemplateFn = () => string | HTMLResult;
 type CaseEntry<T> = readonly [T, TemplateFn];
+export type ChooseOptions<T extends PropertyKey> = {
+    cases: ReadonlyArray<CaseEntry<T>>;
+    fallback?: TemplateFn;
+    value: T | ReadonlySignal<T> | (() => T);
+};
 /**
  * Renders the template matching the current value — like a type-safe `switch`.
  * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).
@@ -13,22 +18,22 @@ type CaseEntry<T> = readonly [T, TemplateFn];
  * import { choose } from '@vielzeug/craftit/directives';
  *
  * // Static
- * html`${choose(section, [
- *   ['home',  () => html`<h1>Home</h1>`],
- *   ['about', () => html`<h1>About</h1>`],
- * ], () => html`<h1>Not found</h1>`)}`
+ * html`${choose({
+ *   value: section,
+ *   cases: [
+ *     ['home', () => html`<h1>Home</h1>`],
+ *     ['about', () => html`<h1>About</h1>`],
+ *   ],
+ *   fallback: () => html`<h1>Not found</h1>`,
+ * })}`
  *
  * // Reactive signal — updates on change
  * const tab = signal('home');
- * html`${choose(tab, [
- *   ['home',  () => html`<home-panel>`],
- *   ['about', () => html`<about-panel>`],
- * ])}`
+ * html`${choose({ value: tab, cases: [['home', () => html`<home-panel>`], ['about', () => html`<about-panel>`]] })}`
  *
  * // Reactive getter
- * html`${choose(() => props.view.value, cases)}`
+ * html`${choose({ value: () => props.view.value, cases })}`
  */
-export declare function choose<T extends PropertyKey>(value: ReadonlySignal<T> | (() => T), cases: ReadonlyArray<CaseEntry<T>>, defaultFn?: TemplateFn): TemplateFn;
-export declare function choose<T extends PropertyKey>(value: T, cases: ReadonlyArray<CaseEntry<T>>, defaultFn?: TemplateFn): string | HTMLResult;
+export declare function choose<T extends PropertyKey>(options: ChooseOptions<T>): string | HTMLResult | TemplateFn;
 export {};
 //# sourceMappingURL=choose.d.ts.map

package/dist/directives/choose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choose.d.ts","sourceRoot":"","sources":["../../src/directives/choose.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,KAAK,UAAU,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC;AAC5C,KAAK,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAC1C,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EACpC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAClC,SAAS,CAAC,EAAE,UAAU,GACrB,UAAU,CAAC;AACd,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAC1C,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAClC,SAAS,CAAC,EAAE,UAAU,GACrB,MAAM,GAAG,UAAU,CAAC"}
+{"version":3,"file":"choose.d.ts","sourceRoot":"","sources":["../../src/directives/choose.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,UAAU,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC;AAC5C,KAAK,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI;IACjD,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,KAAK,EAAE,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;CAC1C,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAgBzG"}

package/dist/directives/choose.js

@@ -1,2 +1,2 @@
-import{isSignal as e}from"@vielzeug/stateit";function t(t,n,r){let i=e=>{let t=n.find(([t])=>t===e);return t?t[1]():r?.()??``};return e(t)?()=>i(t.value):typeof t==`function`?()=>i(t()):i(t)}export{t as choose};
+import{isSignal as e}from"@vielzeug/stateit";var t=e=>{if(!Array.isArray(e.cases))throw Error(`[craftit:choose] options.cases must be an array of [key, templateFn] entries.`);for(let t=0;t<e.cases.length;t++){let n=e.cases[t];if(!Array.isArray(n)||n.length!==2||typeof n[1]!=`function`)throw Error(`[craftit:choose] Invalid case at index ${t}. Expected [key, templateFn].`)}if(e.fallback!==void 0&&typeof e.fallback!=`function`)throw Error(`[craftit:choose] options.fallback must be a function when provided.`)};function n(n){t(n);let i=new Map(n.cases),a=e=>(i.get(e)??n.fallback??r)(),{value:o}=n;return e(o)?()=>a(o.value):typeof o==`function`?()=>a(o()):a(o)}var r=()=>``;export{n as choose};
 //# sourceMappingURL=choose.js.map

package/dist/directives/choose.js.map

@@ -1 +1 @@
-{"version":3,"file":"choose.js","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose(section, [\n *   ['home',  () => html`<h1>Home</h1>`],\n *   ['about', () => html`<h1>About</h1>`],\n * ], () => html`<h1>Not found</h1>`)}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose(tab, [\n *   ['home',  () => html`<home-panel>`],\n *   ['about', () => html`<about-panel>`],\n * ])}`\n *\n * // Reactive getter\n * html`${choose(() => props.view.value, cases)}`\n */\nexport function choose<T extends PropertyKey>(\n  value: ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): TemplateFn;\nexport function choose<T extends PropertyKey>(\n  value: T,\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult;\nexport function choose<T extends PropertyKey>(\n  value: T | ReadonlySignal<T> | (() => T),\n  cases: ReadonlyArray<CaseEntry<T>>,\n  defaultFn?: TemplateFn,\n): string | HTMLResult | TemplateFn {\n  const pick = (v: T): string | HTMLResult => {\n    const entry = cases.find(([key]) => key === v);\n\n    return entry ? entry[1]() : (defaultFn?.() ?? '');\n  };\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n"],"mappings":"6CA2CA,SAAgB,EACd,EACA,EACA,EACkC,CAClC,IAAM,EAAQ,GAA8B,CAC1C,IAAM,EAAQ,EAAM,MAAM,CAAC,KAAS,IAAQ,EAAE,CAE9C,OAAO,EAAQ,EAAM,IAAI,CAAI,KAAa,EAAI,IAWhD,OARI,EAAS,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW"}
+{"version":3,"file":"choose.js","names":[],"sources":["../../src/directives/choose.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../internal';\n\ntype TemplateFn = () => string | HTMLResult;\ntype CaseEntry<T> = readonly [T, TemplateFn];\n\nexport type ChooseOptions<T extends PropertyKey> = {\n  cases: ReadonlyArray<CaseEntry<T>>;\n  fallback?: TemplateFn;\n  value: T | ReadonlySignal<T> | (() => T);\n};\n\nconst validateChooseOptions = <T extends PropertyKey>(options: ChooseOptions<T>): void => {\n  if (!Array.isArray(options.cases)) {\n    throw new Error('[craftit:choose] options.cases must be an array of [key, templateFn] entries.');\n  }\n\n  for (let i = 0; i < options.cases.length; i++) {\n    const entry = options.cases[i] as unknown;\n\n    if (!Array.isArray(entry) || entry.length !== 2 || typeof entry[1] !== 'function') {\n      throw new Error(`[craftit:choose] Invalid case at index ${i}. Expected [key, templateFn].`);\n    }\n  }\n\n  if (options.fallback !== undefined && typeof options.fallback !== 'function') {\n    throw new Error('[craftit:choose] options.fallback must be a function when provided.');\n  }\n};\n\n/**\n * Renders the template matching the current value — like a type-safe `switch`.\n * Cases are `[value, templateFn]` pairs evaluated with strict equality (`===`).\n *\n * The discriminant can be a static value, a reactive Signal, or a getter function.\n * When reactive, the rendered output updates automatically when the value changes.\n *\n * @example\n * import { choose } from '@vielzeug/craftit/directives';\n *\n * // Static\n * html`${choose({\n *   value: section,\n *   cases: [\n *     ['home', () => html`<h1>Home</h1>`],\n *     ['about', () => html`<h1>About</h1>`],\n *   ],\n *   fallback: () => html`<h1>Not found</h1>`,\n * })}`\n *\n * // Reactive signal — updates on change\n * const tab = signal('home');\n * html`${choose({ value: tab, cases: [['home', () => html`<home-panel>`], ['about', () => html`<about-panel>`]] })}`\n *\n * // Reactive getter\n * html`${choose({ value: () => props.view.value, cases })}`\n */\nexport function choose<T extends PropertyKey>(options: ChooseOptions<T>): string | HTMLResult | TemplateFn {\n  validateChooseOptions(options);\n\n  const caseMap = new Map(options.cases);\n  const pick = (value: T): string | HTMLResult => (caseMap.get(value) ?? options.fallback ?? emptyTemplate)();\n  const { value } = options;\n\n  if (isSignal(value)) {\n    return () => pick((value as ReadonlySignal<T>).value);\n  }\n\n  if (typeof value === 'function') {\n    return () => pick((value as () => T)());\n  }\n\n  return pick(value as T);\n}\n\nconst emptyTemplate = (): string => '';\n"],"mappings":"6CAaA,IAAM,EAAgD,GAAoC,CACxF,GAAI,CAAC,MAAM,QAAQ,EAAQ,MAAM,CAC/B,MAAU,MAAM,gFAAgF,CAGlG,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,MAAM,OAAQ,IAAK,CAC7C,IAAM,EAAQ,EAAQ,MAAM,GAE5B,GAAI,CAAC,MAAM,QAAQ,EAAM,EAAI,EAAM,SAAW,GAAK,OAAO,EAAM,IAAO,WACrE,MAAU,MAAM,0CAA0C,EAAE,+BAA+B,CAI/F,GAAI,EAAQ,WAAa,IAAA,IAAa,OAAO,EAAQ,UAAa,WAChE,MAAU,MAAM,sEAAsE,EA+B1F,SAAgB,EAA8B,EAA6D,CACzG,EAAsB,EAAQ,CAE9B,IAAM,EAAU,IAAI,IAAI,EAAQ,MAAM,CAChC,EAAQ,IAAmC,EAAQ,IAAI,EAAM,EAAI,EAAQ,UAAY,IAAgB,CACrG,CAAE,SAAU,EAUlB,OARI,EAAS,EAAM,KACJ,EAAM,EAA4B,MAAM,CAGnD,OAAO,GAAU,eACN,EAAM,GAAmB,CAAC,CAGlC,EAAK,EAAW,CAGzB,IAAM,MAA8B"}

package/dist/directives/each.cjs

@@ -1,2 +1,2 @@
-const e=require(`../core/internal.cjs`),t=require(`../core/utilities.cjs`);let n=require(`@vielzeug/stateit`);var r=RegExp(`u="(\\d+)"`,`g`),i=e.htmlResult(``),a=[],o=(n,r)=>e.isHtmlResult(n)?c(n,r):{bindings:a,html:t.escapeHtml(n)},s=n=>e.isHtmlResult(n)?n:e.htmlResult(t.escapeHtml(n));function c(e,t){let n=new Map,i=[];for(let r of e.__bindings){let e=r.uid,a=n.get(e)??String(t.n++);n.has(e)||n.set(e,a),i.push({...r,uid:a})}return{bindings:i,html:e.__html.replace(r,(e,t)=>`u="${n.get(t)??t}"`).replace(/<!--(\d+)-->/g,(e,t)=>`<!--${n.get(t)??t}-->`)}}function l(e,t,n){let r=``,i=[],a=[],s=[],c={n:0};for(let l=0;l<e.length;l++){a.push(n(e[l],l));let u=o(t(e[l],l),c);r+=u.html,i.push(...u.bindings),s.push(u)}return{bindings:i,html:r,keys:a,rendered:s}}function u(e,t){let n=``,r=[],i={n:0};for(let a=0;a<e.length;a++){let s=o(t(e[a],a),i);n+=s.html,r.push(...s.bindings)}return{bindings:r,html:n}}function d(t,r,a,o){let c=typeof a==`function`,d=c?a:void 0,f=(c?o:o??a)??{},p=f.select;if(Array.isArray(t)){let n=p?t.filter(p):t;if(!n.length){if(d){let t=e.extractResult(s(d()));return e.htmlResult(t.html,t.bindings)}return i}let{bindings:a,html:o}=u(n,r);return e.htmlResult(o,a)}let m=f.key;if(!m)throw Error(`[craftit:each] Reactive each() requires options.key for stable reconciliation.`);let h=(0,n.isSignal)(t)?()=>t.value:t;return{[e.EACH_SIGNAL]:(0,n.computed)(()=>{let t=h(),n=p?t.filter(p):t;if(!n.length){let t=d?s(d()):void 0;return t?{...e.extractResult(t),items:[],keys:[]}:{bindings:[],html:``,items:[],keys:[]}}let{bindings:i,html:a,keys:o,rendered:c}=l(n,r,m);return{bindings:i,html:a,items:c,keys:o}})}}exports.each=d;
+const e=require(`../internal.cjs`);let t=require(`@vielzeug/stateit`);var n=RegExp(`u="(\\d+)"`,`g`),r=e.htmlResult(``),i=[],a=(t,n)=>e.isHtmlResult(t)?s(t,n):{bindings:i,html:e.escapeHtml(t)},o=t=>e.isHtmlResult(t)?t:e.htmlResult(e.escapeHtml(t));function s(e,t){let r=new Map,i=[];for(let n of e.__bindings){let e=n.uid,a=r.get(e)??String(t.n++);r.has(e)||r.set(e,a),i.push({...n,uid:a})}return{bindings:i,html:e.__html.replace(n,(e,t)=>`u="${r.get(t)??t}"`).replace(/<!--(\d+)-->/g,(e,t)=>`<!--${r.get(t)??t}-->`)}}function c(e,t,n){let r=``,i=[],o=[],s=new Set,c=[],l={n:0};for(let u=0;u<e.length;u++){let d=n(e[u],u);if(s.has(d))throw Error(`[craftit:each] Duplicate key "${String(d)}" at index ${u}.`);s.add(d),o.push(d);let f=a(t(e[u],u),l);r+=f.html,i.push(...f.bindings),c.push(f)}return{bindings:i,html:r,keys:o,rendered:c}}function l(e,t){let n=``,r=[],i={n:0};for(let o=0;o<e.length;o++){let s=a(t(e[o],o),i);n+=s.html,r.push(...s.bindings)}return{bindings:r,html:n}}var u=e=>typeof e==`function`,d=e=>{if(!u(e.render))throw Error(`[craftit:each] options.render must be a function.`);if(e.key!==void 0&&!u(e.key))throw Error(`[craftit:each] options.key must be a function when provided.`);if(e.select!==void 0&&!u(e.select))throw Error(`[craftit:each] options.select must be a function when provided.`);if(e.fallback!==void 0&&!u(e.fallback))throw Error(`[craftit:each] options.fallback must be a function when provided.`)},f=e=>{if(Array.isArray(e))return e;throw Error(`[craftit:each] source must resolve to an array.`)};function p(n,i){d(i);let{fallback:a,key:s,render:u,select:p}=i;if(Array.isArray(n)){let t=p?n.filter(p):n;if(!t.length){if(a){let t=e.extractResult(o(a()));return e.htmlResult(t.html,t.bindings)}return r}let{bindings:i,html:s}=l(t,u);return e.htmlResult(s,i)}if(!s)throw Error(`[craftit:each] Reactive each() requires options.key for stable reconciliation.`);let m=(0,t.isSignal)(n)?()=>n.value:n;return{[e.EACH_SIGNAL]:(0,t.computed)(()=>{let t=f(m()),n=p?t.filter(p):t;if(!n.length){let t=a?o(a()):void 0;return t?{...e.extractResult(t),items:[],keys:[]}:{bindings:[],html:``,items:[],keys:[]}}let{bindings:r,html:i,keys:l,rendered:d}=c(n,u,s);return{bindings:r,html:i,items:d,keys:l}})}}exports.each=p;
 //# sourceMappingURL=each.cjs.map

package/dist/directives/each.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"each.cjs","names":[],"sources":["../../src/directives/each.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport {\n  CF_ID_ATTR,\n  EACH_SIGNAL,\n  extractResult,\n  htmlResult,\n  isHtmlResult,\n  type Binding,\n  type Directive,\n  type HTMLResult,\n} from '../core/internal';\nimport { escapeHtml } from '../core/utilities';\n\nconst ATTR_ID_RE = new RegExp(`${CF_ID_ATTR}=\"(\\\\d+)\"`, 'g');\n\n/* immutable — shared singleton for empty static lists */\nconst EMPTY = htmlResult('');\nconst NO_BINDINGS: Binding[] = [];\n\nconst toResultEntry = (value: string | HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } =>\n  isHtmlResult(value) ? renumber(value, c) : { bindings: NO_BINDINGS, html: escapeHtml(value) };\n\nconst toHtmlResult = (value: string | HTMLResult): HTMLResult =>\n  isHtmlResult(value) ? value : htmlResult(escapeHtml(value));\n\nfunction renumber(res: HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } {\n  const map = new Map<string, string>();\n  const nb: Binding[] = [];\n\n  for (const b of res.__bindings) {\n    const oldId = b.uid;\n    const newId = map.get(oldId) ?? String(c.n++);\n\n    if (!map.has(oldId)) map.set(oldId, newId);\n\n    nb.push({ ...b, uid: newId });\n  }\n\n  return {\n    bindings: nb,\n    html: res.__html\n      // Re-map element binding ids.\n      .replace(ATTR_ID_RE, (_, id) => `${CF_ID_ATTR}=\"${map.get(id) ?? id}\"`)\n      // Re-map numeric comment markers used by text/html placeholders.\n      .replace(/<!--(\\d+)-->/g, (_, id) => `<!--${map.get(id) ?? id}-->`),\n  };\n}\n\n/** Render loop used by the reactive path (keys + rendered metadata required for reconciliation). */\nfunction renderKeyed<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  keyFn: (item: T, index: number) => string | number,\n): {\n  bindings: Binding[];\n  html: string;\n  keys: (string | number)[];\n  rendered: Array<{ bindings: Binding[]; html: string }>;\n} {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const keys: (string | number)[] = [];\n  const rendered: Array<{ bindings: Binding[]; html: string }> = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    keys.push(keyFn(items[i], i));\n\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n    rendered.push(entry);\n  }\n\n  return { bindings: allBindings, html, keys, rendered };\n}\n\n/** Render loop used by the static path — no key/reconciliation metadata needed. */\nfunction renderStatic<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n): { bindings: Binding[]; html: string } {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n  }\n\n  return { bindings: allBindings, html };\n}\n\n/**\n * Options accepted by `each()`.\n */\nexport interface EachOptions<T> {\n  /**\n   * Key extractor for stable DOM reconciliation.\n   * Receives the item and its **filtered** array index (after `select` is applied).\n   *\n   * Required when `source` is reactive (Signal/getter).\n   * Optional for static arrays (render-once path).\n   */\n  key?: (item: T, index: number) => string | number;\n  /**\n   * Filter predicate. Receives the item and its **original** array index.\n   * Only items for which `select` returns `true` are rendered.\n   *\n   * @example\n   * each(items, item => html`<li>${item.name}</li>`, undefined, { select: item => item.active })\n   */\n  select?: (item: T, index: number) => boolean;\n}\n\ntype ReactiveSource<T> = ReadonlySignal<T[]> | (() => T[]);\ntype EachSignalResult = Directive & {\n  [EACH_SIGNAL]: ReadonlySignal<{\n    bindings: Binding[];\n    html: string;\n    items?: Array<{ bindings: Binding[]; html: string }>;\n    keys?: (string | number)[];\n  }>;\n};\n\n/**\n * Renders a reactive list with keyed DOM reconciliation for efficient updates.\n * Use inside `html` tagged templates.\n *\n * For reactive sources (Signal/getter), you must provide a stable `key` function.\n *\n * For dynamic lists with click handlers, prefer event delegation on a parent node\n * (`@click` + `closest(...)`) over per-item handlers inside `each()`.\n *\n * @example\n * import { each } from '@vielzeug/craftit/directives';\n *\n * // Static array (key optional):\n * html`${each([1, 2, 3], item => html`<li>${item}</li>`)}`\n *\n * // Reactive source (key required):\n * html`${each(items, item => html`<li>${item.name}</li>`, undefined, { key: item => item.id })}`\n *\n * // Full example:\n * html`${each(items, item => html`<li>${item.name}</li>`, () => html`<p>No items</p>`, {\n *   key: item => item.id,\n *   select: item => item.active,\n * })}`\n */\nexport function each<T>(\n  source: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  empty?: () => string | HTMLResult,\n  options?: EachOptions<T>,\n): HTMLResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  empty: (() => string | HTMLResult) | undefined,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(\n  source: T[] | ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  emptyOrOptions?: (() => string | HTMLResult) | EachOptions<T>,\n  options?: EachOptions<T>,\n): HTMLResult | EachSignalResult {\n  const hasEmptyFn = typeof emptyOrOptions === 'function';\n  const empty = hasEmptyFn ? emptyOrOptions : undefined;\n  const resolvedOptions = (hasEmptyFn ? options : (options ?? emptyOrOptions)) ?? {};\n  const select = resolvedOptions.select;\n\n  if (Array.isArray(source)) {\n    const filtered = select ? source.filter(select) : source;\n\n    if (!filtered.length) {\n      if (empty) {\n        const er = extractResult(toHtmlResult(empty()));\n\n        return htmlResult(er.html, er.bindings);\n      }\n\n      return EMPTY;\n    }\n\n    const { bindings, html } = renderStatic(filtered, template);\n\n    return htmlResult(html, bindings);\n  }\n\n  const keyFn = resolvedOptions.key;\n\n  if (!keyFn) {\n    throw new Error('[craftit:each] Reactive each() requires options.key for stable reconciliation.');\n  }\n\n  const getItems = isSignal(source) ? () => (source as ReadonlySignal<T[]>).value : (source as () => T[]);\n\n  return {\n    [EACH_SIGNAL]: computed(() => {\n      const raw = getItems();\n      const filtered = select ? raw.filter(select) : raw;\n\n      if (!filtered.length) {\n        const er = empty ? toHtmlResult(empty()) : undefined;\n\n        return er ? { ...extractResult(er), items: [], keys: [] } : { bindings: [], html: '', items: [], keys: [] };\n      }\n\n      const { bindings, html, keys, rendered } = renderKeyed(filtered, template, keyFn);\n\n      return { bindings, html, items: rendered, keys };\n    }),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"each.cjs","names":[],"sources":["../../src/directives/each.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport {\n  CF_ID_ATTR,\n  EACH_SIGNAL,\n  escapeHtml,\n  extractResult,\n  htmlResult,\n  isHtmlResult,\n  type Binding,\n  type Directive,\n  type HTMLResult,\n} from '../internal';\n\nconst ATTR_ID_RE = new RegExp(`${CF_ID_ATTR}=\"(\\\\d+)\"`, 'g');\n\n/* immutable — shared singleton for empty static lists */\nconst EMPTY = htmlResult('');\nconst NO_BINDINGS: Binding[] = [];\n\nconst toResultEntry = (value: string | HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } =>\n  isHtmlResult(value) ? renumber(value, c) : { bindings: NO_BINDINGS, html: escapeHtml(value) };\n\nconst toHtmlResult = (value: string | HTMLResult): HTMLResult =>\n  isHtmlResult(value) ? value : htmlResult(escapeHtml(value));\n\nfunction renumber(res: HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } {\n  const map = new Map<string, string>();\n  const nb: Binding[] = [];\n\n  for (const b of res.__bindings) {\n    const oldId = b.uid;\n    const newId = map.get(oldId) ?? String(c.n++);\n\n    if (!map.has(oldId)) map.set(oldId, newId);\n\n    nb.push({ ...b, uid: newId });\n  }\n\n  return {\n    bindings: nb,\n    html: res.__html\n      // Re-map element binding ids.\n      .replace(ATTR_ID_RE, (_, id) => `${CF_ID_ATTR}=\"${map.get(id) ?? id}\"`)\n      // Re-map numeric comment markers used by text/html placeholders.\n      .replace(/<!--(\\d+)-->/g, (_, id) => `<!--${map.get(id) ?? id}-->`),\n  };\n}\n\n/** Render loop used by the reactive path (keys + rendered metadata required for reconciliation). */\nfunction renderKeyed<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  keyFn: (item: T, index: number) => string | number,\n): {\n  bindings: Binding[];\n  html: string;\n  keys: (string | number)[];\n  rendered: Array<{ bindings: Binding[]; html: string }>;\n} {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const keys: (string | number)[] = [];\n  const seenKeys = new Set<string | number>();\n  const rendered: Array<{ bindings: Binding[]; html: string }> = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const nextKey = keyFn(items[i], i);\n\n    if (seenKeys.has(nextKey)) {\n      throw new Error(`[craftit:each] Duplicate key \"${String(nextKey)}\" at index ${i}.`);\n    }\n\n    seenKeys.add(nextKey);\n    keys.push(nextKey);\n\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n    rendered.push(entry);\n  }\n\n  return { bindings: allBindings, html, keys, rendered };\n}\n\n/** Render loop used by the static path — no key/reconciliation metadata needed. */\nfunction renderStatic<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n): { bindings: Binding[]; html: string } {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n  }\n\n  return { bindings: allBindings, html };\n}\n\ntype ReactiveSource<T> = ReadonlySignal<T[]> | (() => T[]);\ntype EachSignalResult = Directive & {\n  [EACH_SIGNAL]: ReadonlySignal<{\n    bindings: Binding[];\n    html: string;\n    items?: Array<{ bindings: Binding[]; html: string }>;\n    keys?: (string | number)[];\n  }>;\n};\n\nexport interface EachOptions<T> {\n  fallback?: () => string | HTMLResult;\n  key?: (item: T, index: number) => string | number;\n  render: (item: T, index: number) => string | HTMLResult;\n  /**\n   * Filter predicate. Receives the item and its original array index.\n   * Only items for which `select` returns `true` are rendered.\n   */\n  select?: (item: T, index: number) => boolean;\n}\n\nconst isFunction = (value: unknown): value is (...args: any[]) => any => typeof value === 'function';\n\nconst validateEachOptions = <T>(options: EachOptions<T>): void => {\n  if (!isFunction(options.render)) {\n    throw new Error('[craftit:each] options.render must be a function.');\n  }\n\n  if (options.key !== undefined && !isFunction(options.key)) {\n    throw new Error('[craftit:each] options.key must be a function when provided.');\n  }\n\n  if (options.select !== undefined && !isFunction(options.select)) {\n    throw new Error('[craftit:each] options.select must be a function when provided.');\n  }\n\n  if (options.fallback !== undefined && !isFunction(options.fallback)) {\n    throw new Error('[craftit:each] options.fallback must be a function when provided.');\n  }\n};\n\nconst assertArrayResult = <T>(value: T[] | unknown): T[] => {\n  if (Array.isArray(value)) return value as T[];\n\n  throw new Error('[craftit:each] source must resolve to an array.');\n};\n\n/**\n * Renders a list with keyed DOM reconciliation for reactive sources.\n * Use inside `html` tagged templates.\n *\n * For reactive sources (Signal/getter), you must provide a stable `key` function.\n *\n * For dynamic lists with click handlers, prefer event delegation on a parent node\n * (`@click` + `closest(...)`) over per-item handlers inside `each()`.\n *\n * @example\n * import { each } from '@vielzeug/craftit/directives';\n *\n * // Static array (key optional):\n * html`${each([1, 2, 3], { render: (item) => html`<li>${item}</li>` })}`\n *\n * // Reactive source (key required):\n * html`${each(items, { key: item => item.id, render: (item) => html`<li>${item.name}</li>` })}`\n *\n * // Full example:\n * html`${each(items, {\n *   fallback: () => html`<p>No items</p>`,\n *   key: item => item.id,\n *   render: (item) => html`<li>${item.name}</li>`,\n *   select: item => item.active,\n * })}`\n */\nexport function each<T>(source: T[], options: EachOptions<T>): HTMLResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(source: T[] | ReactiveSource<T>, options: EachOptions<T>): HTMLResult | EachSignalResult {\n  validateEachOptions(options);\n\n  const { fallback, key, render, select } = options;\n\n  if (Array.isArray(source)) {\n    const filtered = select ? source.filter(select) : source;\n\n    if (!filtered.length) {\n      if (fallback) {\n        const er = extractResult(toHtmlResult(fallback()));\n\n        return htmlResult(er.html, er.bindings);\n      }\n\n      return EMPTY;\n    }\n\n    const { bindings, html } = renderStatic(filtered, render);\n\n    return htmlResult(html, bindings);\n  }\n\n  if (!key) {\n    throw new Error('[craftit:each] Reactive each() requires options.key for stable reconciliation.');\n  }\n\n  const getItems = isSignal(source) ? () => (source as ReadonlySignal<T[]>).value : (source as () => T[]);\n\n  return {\n    [EACH_SIGNAL]: computed(() => {\n      const raw = assertArrayResult<T>(getItems());\n      const filtered = select ? raw.filter(select) : raw;\n\n      if (!filtered.length) {\n        const er = fallback ? toHtmlResult(fallback()) : undefined;\n\n        return er ? { ...extractResult(er), items: [], keys: [] } : { bindings: [], html: '', items: [], keys: [] };\n      }\n\n      const { bindings, html, keys, rendered } = renderKeyed(filtered, render, key);\n\n      return { bindings, html, items: rendered, keys };\n    }),\n  };\n}\n"],"mappings":"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"}

package/dist/directives/each.d.ts

@@ -1,26 +1,5 @@
 import { type ReadonlySignal } from '@vielzeug/stateit';
-import { EACH_SIGNAL, type Binding, type Directive, type HTMLResult } from '../core/internal';
-/**
- * Options accepted by `each()`.
- */
-export interface EachOptions<T> {
-    /**
-     * Key extractor for stable DOM reconciliation.
-     * Receives the item and its **filtered** array index (after `select` is applied).
-     *
-     * Required when `source` is reactive (Signal/getter).
-     * Optional for static arrays (render-once path).
-     */
-    key?: (item: T, index: number) => string | number;
-    /**
-     * Filter predicate. Receives the item and its **original** array index.
-     * Only items for which `select` returns `true` are rendered.
-     *
-     * @example
-     * each(items, item => html`<li>${item.name}</li>`, undefined, { select: item => item.active })
-     */
-    select?: (item: T, index: number) => boolean;
-}
+import { EACH_SIGNAL, type Binding, type Directive, type HTMLResult } from '../internal';
 type ReactiveSource<T> = ReadonlySignal<T[]> | (() => T[]);
 type EachSignalResult = Directive & {
     [EACH_SIGNAL]: ReadonlySignal<{
@@ -33,8 +12,18 @@ type EachSignalResult = Directive & {
         keys?: (string | number)[];
     }>;
 };
+export interface EachOptions<T> {
+    fallback?: () => string | HTMLResult;
+    key?: (item: T, index: number) => string | number;
+    render: (item: T, index: number) => string | HTMLResult;
+    /**
+     * Filter predicate. Receives the item and its original array index.
+     * Only items for which `select` returns `true` are rendered.
+     */
+    select?: (item: T, index: number) => boolean;
+}
 /**
- * Renders a reactive list with keyed DOM reconciliation for efficient updates.
+ * Renders a list with keyed DOM reconciliation for reactive sources.
  * Use inside `html` tagged templates.
  *
  * For reactive sources (Signal/getter), you must provide a stable `key` function.
@@ -46,22 +35,21 @@ type EachSignalResult = Directive & {
  * import { each } from '@vielzeug/craftit/directives';
  *
  * // Static array (key optional):
- * html`${each([1, 2, 3], item => html`<li>${item}</li>`)}`
+ * html`${each([1, 2, 3], { render: (item) => html`<li>${item}</li>` })}`
  *
  * // Reactive source (key required):
- * html`${each(items, item => html`<li>${item.name}</li>`, undefined, { key: item => item.id })}`
+ * html`${each(items, { key: item => item.id, render: (item) => html`<li>${item.name}</li>` })}`
  *
  * // Full example:
- * html`${each(items, item => html`<li>${item.name}</li>`, () => html`<p>No items</p>`, {
+ * html`${each(items, {
+ *   fallback: () => html`<p>No items</p>`,
  *   key: item => item.id,
+ *   render: (item) => html`<li>${item.name}</li>`,
  *   select: item => item.active,
  * })}`
  */
-export declare function each<T>(source: T[], template: (item: T, index: number) => string | HTMLResult, empty?: () => string | HTMLResult, options?: EachOptions<T>): HTMLResult;
-export declare function each<T>(source: ReactiveSource<T>, template: (item: T, index: number) => string | HTMLResult, options: EachOptions<T> & {
-    key: (item: T, index: number) => string | number;
-}): EachSignalResult;
-export declare function each<T>(source: ReactiveSource<T>, template: (item: T, index: number) => string | HTMLResult, empty: (() => string | HTMLResult) | undefined, options: EachOptions<T> & {
+export declare function each<T>(source: T[], options: EachOptions<T>): HTMLResult;
+export declare function each<T>(source: ReactiveSource<T>, options: EachOptions<T> & {
     key: (item: T, index: number) => string | number;
 }): EachSignalResult;
 export {};

package/dist/directives/each.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"each.d.ts","sourceRoot":"","sources":["../../src/directives/each.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAEL,WAAW,EAIX,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuF1B;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAClD;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C;AAED,KAAK,cAAc,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAC3D,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,CAAC,WAAW,CAAC,EAAE,cAAc,CAAC;QAC5B,QAAQ,EAAE,OAAO,EAAE,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;YAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACrD,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;KAC5B,CAAC,CAAC;CACJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EACpB,MAAM,EAAE,CAAC,EAAE,EACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,UAAU,EACzD,KAAK,CAAC,EAAE,MAAM,MAAM,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,UAAU,CAAC;AACd,wBAAgB,IAAI,CAAC,CAAC,EACpB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,UAAU,EACzD,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CAAE,GAC7E,gBAAgB,CAAC;AACpB,wBAAgB,IAAI,CAAC,CAAC,EACpB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,UAAU,EACzD,KAAK,EAAE,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,SAAS,EAC9C,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CAAE,GAC7E,gBAAgB,CAAC"}
+{"version":3,"file":"each.d.ts","sourceRoot":"","sources":["../../src/directives/each.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAEL,WAAW,EAKX,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,aAAa,CAAC;AA8FrB,KAAK,cAAc,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAC3D,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,CAAC,WAAW,CAAC,EAAE,cAAc,CAAC;QAC5B,QAAQ,EAAE,OAAO,EAAE,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;YAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACrD,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;KAC5B,CAAC,CAAC;CACJ,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,MAAM,GAAG,UAAU,CAAC;IACrC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,UAAU,CAAC;IACxD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC;AAC1E,wBAAgB,IAAI,CAAC,CAAC,EACpB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CAAE,GAC7E,gBAAgB,CAAC"}

package/dist/directives/each.js

@@ -1,2 +1,2 @@
-import{EACH_SIGNAL as e,extractResult as t,htmlResult as n,isHtmlResult as r}from"../core/internal.js";import{escapeHtml as i}from"../core/utilities.js";import{computed as a,isSignal as o}from"@vielzeug/stateit";var s=RegExp(`u="(\\d+)"`,`g`),c=n(``),l=[],u=(e,t)=>r(e)?f(e,t):{bindings:l,html:i(e)},d=e=>r(e)?e:n(i(e));function f(e,t){let n=new Map,r=[];for(let i of e.__bindings){let e=i.uid,a=n.get(e)??String(t.n++);n.has(e)||n.set(e,a),r.push({...i,uid:a})}return{bindings:r,html:e.__html.replace(s,(e,t)=>`u="${n.get(t)??t}"`).replace(/<!--(\d+)-->/g,(e,t)=>`<!--${n.get(t)??t}-->`)}}function p(e,t,n){let r=``,i=[],a=[],o=[],s={n:0};for(let c=0;c<e.length;c++){a.push(n(e[c],c));let l=u(t(e[c],c),s);r+=l.html,i.push(...l.bindings),o.push(l)}return{bindings:i,html:r,keys:a,rendered:o}}function m(e,t){let n=``,r=[],i={n:0};for(let a=0;a<e.length;a++){let o=u(t(e[a],a),i);n+=o.html,r.push(...o.bindings)}return{bindings:r,html:n}}function h(r,i,s,l){let u=typeof s==`function`,f=u?s:void 0,h=(u?l:l??s)??{},g=h.select;if(Array.isArray(r)){let e=g?r.filter(g):r;if(!e.length){if(f){let e=t(d(f()));return n(e.html,e.bindings)}return c}let{bindings:a,html:o}=m(e,i);return n(o,a)}let _=h.key;if(!_)throw Error(`[craftit:each] Reactive each() requires options.key for stable reconciliation.`);let v=o(r)?()=>r.value:r;return{[e]:a(()=>{let e=v(),n=g?e.filter(g):e;if(!n.length){let e=f?d(f()):void 0;return e?{...t(e),items:[],keys:[]}:{bindings:[],html:``,items:[],keys:[]}}let{bindings:r,html:a,keys:o,rendered:s}=p(n,i,_);return{bindings:r,html:a,items:s,keys:o}})}}export{h as each};
+import{EACH_SIGNAL as e,escapeHtml as t,extractResult as n,htmlResult as r,isHtmlResult as i}from"../internal.js";import{computed as a,isSignal as o}from"@vielzeug/stateit";var s=RegExp(`u="(\\d+)"`,`g`),c=r(``),l=[],u=(e,n)=>i(e)?f(e,n):{bindings:l,html:t(e)},d=e=>i(e)?e:r(t(e));function f(e,t){let n=new Map,r=[];for(let i of e.__bindings){let e=i.uid,a=n.get(e)??String(t.n++);n.has(e)||n.set(e,a),r.push({...i,uid:a})}return{bindings:r,html:e.__html.replace(s,(e,t)=>`u="${n.get(t)??t}"`).replace(/<!--(\d+)-->/g,(e,t)=>`<!--${n.get(t)??t}-->`)}}function p(e,t,n){let r=``,i=[],a=[],o=new Set,s=[],c={n:0};for(let l=0;l<e.length;l++){let d=n(e[l],l);if(o.has(d))throw Error(`[craftit:each] Duplicate key "${String(d)}" at index ${l}.`);o.add(d),a.push(d);let f=u(t(e[l],l),c);r+=f.html,i.push(...f.bindings),s.push(f)}return{bindings:i,html:r,keys:a,rendered:s}}function m(e,t){let n=``,r=[],i={n:0};for(let a=0;a<e.length;a++){let o=u(t(e[a],a),i);n+=o.html,r.push(...o.bindings)}return{bindings:r,html:n}}var h=e=>typeof e==`function`,g=e=>{if(!h(e.render))throw Error(`[craftit:each] options.render must be a function.`);if(e.key!==void 0&&!h(e.key))throw Error(`[craftit:each] options.key must be a function when provided.`);if(e.select!==void 0&&!h(e.select))throw Error(`[craftit:each] options.select must be a function when provided.`);if(e.fallback!==void 0&&!h(e.fallback))throw Error(`[craftit:each] options.fallback must be a function when provided.`)},_=e=>{if(Array.isArray(e))return e;throw Error(`[craftit:each] source must resolve to an array.`)};function v(t,i){g(i);let{fallback:s,key:l,render:u,select:f}=i;if(Array.isArray(t)){let e=f?t.filter(f):t;if(!e.length){if(s){let e=n(d(s()));return r(e.html,e.bindings)}return c}let{bindings:i,html:a}=m(e,u);return r(a,i)}if(!l)throw Error(`[craftit:each] Reactive each() requires options.key for stable reconciliation.`);let h=o(t)?()=>t.value:t;return{[e]:a(()=>{let e=_(h()),t=f?e.filter(f):e;if(!t.length){let e=s?d(s()):void 0;return e?{...n(e),items:[],keys:[]}:{bindings:[],html:``,items:[],keys:[]}}let{bindings:r,html:i,keys:a,rendered:o}=p(t,u,l);return{bindings:r,html:i,items:o,keys:a}})}}export{v as each};
 //# sourceMappingURL=each.js.map

package/dist/directives/each.js.map

@@ -1 +1 @@
-{"version":3,"file":"each.js","names":[],"sources":["../../src/directives/each.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport {\n  CF_ID_ATTR,\n  EACH_SIGNAL,\n  extractResult,\n  htmlResult,\n  isHtmlResult,\n  type Binding,\n  type Directive,\n  type HTMLResult,\n} from '../core/internal';\nimport { escapeHtml } from '../core/utilities';\n\nconst ATTR_ID_RE = new RegExp(`${CF_ID_ATTR}=\"(\\\\d+)\"`, 'g');\n\n/* immutable — shared singleton for empty static lists */\nconst EMPTY = htmlResult('');\nconst NO_BINDINGS: Binding[] = [];\n\nconst toResultEntry = (value: string | HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } =>\n  isHtmlResult(value) ? renumber(value, c) : { bindings: NO_BINDINGS, html: escapeHtml(value) };\n\nconst toHtmlResult = (value: string | HTMLResult): HTMLResult =>\n  isHtmlResult(value) ? value : htmlResult(escapeHtml(value));\n\nfunction renumber(res: HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } {\n  const map = new Map<string, string>();\n  const nb: Binding[] = [];\n\n  for (const b of res.__bindings) {\n    const oldId = b.uid;\n    const newId = map.get(oldId) ?? String(c.n++);\n\n    if (!map.has(oldId)) map.set(oldId, newId);\n\n    nb.push({ ...b, uid: newId });\n  }\n\n  return {\n    bindings: nb,\n    html: res.__html\n      // Re-map element binding ids.\n      .replace(ATTR_ID_RE, (_, id) => `${CF_ID_ATTR}=\"${map.get(id) ?? id}\"`)\n      // Re-map numeric comment markers used by text/html placeholders.\n      .replace(/<!--(\\d+)-->/g, (_, id) => `<!--${map.get(id) ?? id}-->`),\n  };\n}\n\n/** Render loop used by the reactive path (keys + rendered metadata required for reconciliation). */\nfunction renderKeyed<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  keyFn: (item: T, index: number) => string | number,\n): {\n  bindings: Binding[];\n  html: string;\n  keys: (string | number)[];\n  rendered: Array<{ bindings: Binding[]; html: string }>;\n} {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const keys: (string | number)[] = [];\n  const rendered: Array<{ bindings: Binding[]; html: string }> = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    keys.push(keyFn(items[i], i));\n\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n    rendered.push(entry);\n  }\n\n  return { bindings: allBindings, html, keys, rendered };\n}\n\n/** Render loop used by the static path — no key/reconciliation metadata needed. */\nfunction renderStatic<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n): { bindings: Binding[]; html: string } {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n  }\n\n  return { bindings: allBindings, html };\n}\n\n/**\n * Options accepted by `each()`.\n */\nexport interface EachOptions<T> {\n  /**\n   * Key extractor for stable DOM reconciliation.\n   * Receives the item and its **filtered** array index (after `select` is applied).\n   *\n   * Required when `source` is reactive (Signal/getter).\n   * Optional for static arrays (render-once path).\n   */\n  key?: (item: T, index: number) => string | number;\n  /**\n   * Filter predicate. Receives the item and its **original** array index.\n   * Only items for which `select` returns `true` are rendered.\n   *\n   * @example\n   * each(items, item => html`<li>${item.name}</li>`, undefined, { select: item => item.active })\n   */\n  select?: (item: T, index: number) => boolean;\n}\n\ntype ReactiveSource<T> = ReadonlySignal<T[]> | (() => T[]);\ntype EachSignalResult = Directive & {\n  [EACH_SIGNAL]: ReadonlySignal<{\n    bindings: Binding[];\n    html: string;\n    items?: Array<{ bindings: Binding[]; html: string }>;\n    keys?: (string | number)[];\n  }>;\n};\n\n/**\n * Renders a reactive list with keyed DOM reconciliation for efficient updates.\n * Use inside `html` tagged templates.\n *\n * For reactive sources (Signal/getter), you must provide a stable `key` function.\n *\n * For dynamic lists with click handlers, prefer event delegation on a parent node\n * (`@click` + `closest(...)`) over per-item handlers inside `each()`.\n *\n * @example\n * import { each } from '@vielzeug/craftit/directives';\n *\n * // Static array (key optional):\n * html`${each([1, 2, 3], item => html`<li>${item}</li>`)}`\n *\n * // Reactive source (key required):\n * html`${each(items, item => html`<li>${item.name}</li>`, undefined, { key: item => item.id })}`\n *\n * // Full example:\n * html`${each(items, item => html`<li>${item.name}</li>`, () => html`<p>No items</p>`, {\n *   key: item => item.id,\n *   select: item => item.active,\n * })}`\n */\nexport function each<T>(\n  source: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  empty?: () => string | HTMLResult,\n  options?: EachOptions<T>,\n): HTMLResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  empty: (() => string | HTMLResult) | undefined,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(\n  source: T[] | ReactiveSource<T>,\n  template: (item: T, index: number) => string | HTMLResult,\n  emptyOrOptions?: (() => string | HTMLResult) | EachOptions<T>,\n  options?: EachOptions<T>,\n): HTMLResult | EachSignalResult {\n  const hasEmptyFn = typeof emptyOrOptions === 'function';\n  const empty = hasEmptyFn ? emptyOrOptions : undefined;\n  const resolvedOptions = (hasEmptyFn ? options : (options ?? emptyOrOptions)) ?? {};\n  const select = resolvedOptions.select;\n\n  if (Array.isArray(source)) {\n    const filtered = select ? source.filter(select) : source;\n\n    if (!filtered.length) {\n      if (empty) {\n        const er = extractResult(toHtmlResult(empty()));\n\n        return htmlResult(er.html, er.bindings);\n      }\n\n      return EMPTY;\n    }\n\n    const { bindings, html } = renderStatic(filtered, template);\n\n    return htmlResult(html, bindings);\n  }\n\n  const keyFn = resolvedOptions.key;\n\n  if (!keyFn) {\n    throw new Error('[craftit:each] Reactive each() requires options.key for stable reconciliation.');\n  }\n\n  const getItems = isSignal(source) ? () => (source as ReadonlySignal<T[]>).value : (source as () => T[]);\n\n  return {\n    [EACH_SIGNAL]: computed(() => {\n      const raw = getItems();\n      const filtered = select ? raw.filter(select) : raw;\n\n      if (!filtered.length) {\n        const er = empty ? toHtmlResult(empty()) : undefined;\n\n        return er ? { ...extractResult(er), items: [], keys: [] } : { bindings: [], html: '', items: [], keys: [] };\n      }\n\n      const { bindings, html, keys, rendered } = renderKeyed(filtered, template, keyFn);\n\n      return { bindings, html, items: rendered, keys };\n    }),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"each.js","names":[],"sources":["../../src/directives/each.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport {\n  CF_ID_ATTR,\n  EACH_SIGNAL,\n  escapeHtml,\n  extractResult,\n  htmlResult,\n  isHtmlResult,\n  type Binding,\n  type Directive,\n  type HTMLResult,\n} from '../internal';\n\nconst ATTR_ID_RE = new RegExp(`${CF_ID_ATTR}=\"(\\\\d+)\"`, 'g');\n\n/* immutable — shared singleton for empty static lists */\nconst EMPTY = htmlResult('');\nconst NO_BINDINGS: Binding[] = [];\n\nconst toResultEntry = (value: string | HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } =>\n  isHtmlResult(value) ? renumber(value, c) : { bindings: NO_BINDINGS, html: escapeHtml(value) };\n\nconst toHtmlResult = (value: string | HTMLResult): HTMLResult =>\n  isHtmlResult(value) ? value : htmlResult(escapeHtml(value));\n\nfunction renumber(res: HTMLResult, c: { n: number }): { bindings: Binding[]; html: string } {\n  const map = new Map<string, string>();\n  const nb: Binding[] = [];\n\n  for (const b of res.__bindings) {\n    const oldId = b.uid;\n    const newId = map.get(oldId) ?? String(c.n++);\n\n    if (!map.has(oldId)) map.set(oldId, newId);\n\n    nb.push({ ...b, uid: newId });\n  }\n\n  return {\n    bindings: nb,\n    html: res.__html\n      // Re-map element binding ids.\n      .replace(ATTR_ID_RE, (_, id) => `${CF_ID_ATTR}=\"${map.get(id) ?? id}\"`)\n      // Re-map numeric comment markers used by text/html placeholders.\n      .replace(/<!--(\\d+)-->/g, (_, id) => `<!--${map.get(id) ?? id}-->`),\n  };\n}\n\n/** Render loop used by the reactive path (keys + rendered metadata required for reconciliation). */\nfunction renderKeyed<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n  keyFn: (item: T, index: number) => string | number,\n): {\n  bindings: Binding[];\n  html: string;\n  keys: (string | number)[];\n  rendered: Array<{ bindings: Binding[]; html: string }>;\n} {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const keys: (string | number)[] = [];\n  const seenKeys = new Set<string | number>();\n  const rendered: Array<{ bindings: Binding[]; html: string }> = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const nextKey = keyFn(items[i], i);\n\n    if (seenKeys.has(nextKey)) {\n      throw new Error(`[craftit:each] Duplicate key \"${String(nextKey)}\" at index ${i}.`);\n    }\n\n    seenKeys.add(nextKey);\n    keys.push(nextKey);\n\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n    rendered.push(entry);\n  }\n\n  return { bindings: allBindings, html, keys, rendered };\n}\n\n/** Render loop used by the static path — no key/reconciliation metadata needed. */\nfunction renderStatic<T>(\n  items: T[],\n  template: (item: T, index: number) => string | HTMLResult,\n): { bindings: Binding[]; html: string } {\n  let html = '';\n  const allBindings: Binding[] = [];\n  const c = { n: 0 };\n\n  for (let i = 0; i < items.length; i++) {\n    const entry = toResultEntry(template(items[i], i), c);\n\n    html += entry.html;\n    allBindings.push(...entry.bindings);\n  }\n\n  return { bindings: allBindings, html };\n}\n\ntype ReactiveSource<T> = ReadonlySignal<T[]> | (() => T[]);\ntype EachSignalResult = Directive & {\n  [EACH_SIGNAL]: ReadonlySignal<{\n    bindings: Binding[];\n    html: string;\n    items?: Array<{ bindings: Binding[]; html: string }>;\n    keys?: (string | number)[];\n  }>;\n};\n\nexport interface EachOptions<T> {\n  fallback?: () => string | HTMLResult;\n  key?: (item: T, index: number) => string | number;\n  render: (item: T, index: number) => string | HTMLResult;\n  /**\n   * Filter predicate. Receives the item and its original array index.\n   * Only items for which `select` returns `true` are rendered.\n   */\n  select?: (item: T, index: number) => boolean;\n}\n\nconst isFunction = (value: unknown): value is (...args: any[]) => any => typeof value === 'function';\n\nconst validateEachOptions = <T>(options: EachOptions<T>): void => {\n  if (!isFunction(options.render)) {\n    throw new Error('[craftit:each] options.render must be a function.');\n  }\n\n  if (options.key !== undefined && !isFunction(options.key)) {\n    throw new Error('[craftit:each] options.key must be a function when provided.');\n  }\n\n  if (options.select !== undefined && !isFunction(options.select)) {\n    throw new Error('[craftit:each] options.select must be a function when provided.');\n  }\n\n  if (options.fallback !== undefined && !isFunction(options.fallback)) {\n    throw new Error('[craftit:each] options.fallback must be a function when provided.');\n  }\n};\n\nconst assertArrayResult = <T>(value: T[] | unknown): T[] => {\n  if (Array.isArray(value)) return value as T[];\n\n  throw new Error('[craftit:each] source must resolve to an array.');\n};\n\n/**\n * Renders a list with keyed DOM reconciliation for reactive sources.\n * Use inside `html` tagged templates.\n *\n * For reactive sources (Signal/getter), you must provide a stable `key` function.\n *\n * For dynamic lists with click handlers, prefer event delegation on a parent node\n * (`@click` + `closest(...)`) over per-item handlers inside `each()`.\n *\n * @example\n * import { each } from '@vielzeug/craftit/directives';\n *\n * // Static array (key optional):\n * html`${each([1, 2, 3], { render: (item) => html`<li>${item}</li>` })}`\n *\n * // Reactive source (key required):\n * html`${each(items, { key: item => item.id, render: (item) => html`<li>${item.name}</li>` })}`\n *\n * // Full example:\n * html`${each(items, {\n *   fallback: () => html`<p>No items</p>`,\n *   key: item => item.id,\n *   render: (item) => html`<li>${item.name}</li>`,\n *   select: item => item.active,\n * })}`\n */\nexport function each<T>(source: T[], options: EachOptions<T>): HTMLResult;\nexport function each<T>(\n  source: ReactiveSource<T>,\n  options: EachOptions<T> & { key: (item: T, index: number) => string | number },\n): EachSignalResult;\nexport function each<T>(source: T[] | ReactiveSource<T>, options: EachOptions<T>): HTMLResult | EachSignalResult {\n  validateEachOptions(options);\n\n  const { fallback, key, render, select } = options;\n\n  if (Array.isArray(source)) {\n    const filtered = select ? source.filter(select) : source;\n\n    if (!filtered.length) {\n      if (fallback) {\n        const er = extractResult(toHtmlResult(fallback()));\n\n        return htmlResult(er.html, er.bindings);\n      }\n\n      return EMPTY;\n    }\n\n    const { bindings, html } = renderStatic(filtered, render);\n\n    return htmlResult(html, bindings);\n  }\n\n  if (!key) {\n    throw new Error('[craftit:each] Reactive each() requires options.key for stable reconciliation.');\n  }\n\n  const getItems = isSignal(source) ? () => (source as ReadonlySignal<T[]>).value : (source as () => T[]);\n\n  return {\n    [EACH_SIGNAL]: computed(() => {\n      const raw = assertArrayResult<T>(getItems());\n      const filtered = select ? raw.filter(select) : raw;\n\n      if (!filtered.length) {\n        const er = fallback ? toHtmlResult(fallback()) : undefined;\n\n        return er ? { ...extractResult(er), items: [], keys: [] } : { bindings: [], html: '', items: [], keys: [] };\n      }\n\n      const { bindings, html, keys, rendered } = renderKeyed(filtered, render, key);\n\n      return { bindings, html, items: rendered, keys };\n    }),\n  };\n}\n"],"mappings":"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"}

package/dist/directives/index.d.ts

@@ -1,9 +1,8 @@
-export { attr } from './attr';
+export { attrs } from './attr';
 export { bind } from './bind';
 export { choose } from './choose';
 export { classes } from './classes';
 export { each } from './each';
-export { match } from './match';
 export { memo } from './memo';
 export { on } from './on';
 export { raw } from './raw';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/directives/memo.cjs

@@ -1,2 +1,2 @@
-let e=require(`@vielzeug/stateit`);function t(t,n){let r=``,i=[],a=!1;return()=>{let o=t.map(t=>(0,e.isSignal)(t)?t.value:t);return(!a||o.length!==i.length||o.some((e,t)=>!Object.is(e,i[t])))&&(r=n(),i=o,a=!0),r}}exports.memo=t;
+let e=require(`@vielzeug/stateit`);function t(t){let n=(0,e.computed)(()=>{for(let n of t.deps??[])(0,e.isSignal)(n)&&Reflect.get(n,`value`);return(0,e.untrack)(t.render)});return()=>n.value}exports.memo=t;
 //# sourceMappingURL=memo.cjs.map

package/dist/directives/memo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"memo.cjs","names":[],"sources":["../../src/directives/memo.ts"],"sourcesContent":["import { isSignal, type ReadonlySignal } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../core/internal';\n\ntype Dep = unknown | ReadonlySignal<unknown>;\n\n/**\n * Memoizes a template fragment — `templateFn` is only re-called when at least\n * one entry in `deps` has changed (compared with `Object.is`).\n *\n * Signal values in `deps` are automatically unwrapped and tracked, so changing a\n * dep signal triggers a re-evaluation. This is useful for skipping expensive\n * sub-tree renders when only unrelated state changes.\n *\n * @example\n * import { memo } from '@vielzeug/craftit/directives';\n *\n * // Only re-renders the table when `rows` actually changes\n * html`${memo([rows], () => html`<big-table :data=${rows}></big-table>`)}`\n *\n * // Multiple deps — re-renders when either changes\n * html`${memo([locale, theme], () => html`<themed-chart :locale=${locale}></themed-chart>`)}`\n */\nexport function memo(deps: ReadonlyArray<Dep>, templateFn: () => string | HTMLResult): () => string | HTMLResult {\n  let cached: string | HTMLResult = '';\n  let lastDeps: unknown[] = [];\n  let initialized = false;\n\n  return (): string | HTMLResult => {\n    const current = deps.map((d) => (isSignal(d) ? (d as ReadonlySignal<unknown>).value : d));\n    const changed =\n      !initialized || current.length !== lastDeps.length || current.some((v, i) => !Object.is(v, lastDeps[i]));\n\n    if (changed) {\n      cached = templateFn();\n      lastDeps = current;\n      initialized = true;\n    }\n\n    return cached;\n  };\n}\n"],"mappings":"mCAuBA,SAAgB,EAAK,EAA0B,EAAkE,CAC/G,IAAI,EAA8B,GAC9B,EAAsB,EAAE,CACxB,EAAc,GAElB,UAAkC,CAChC,IAAM,EAAU,EAAK,IAAK,IAAA,EAAA,EAAA,UAAgB,EAAE,CAAI,EAA8B,MAAQ,EAAG,CAUzF,OARE,CAAC,GAAe,EAAQ,SAAW,EAAS,QAAU,EAAQ,MAAM,EAAG,IAAM,CAAC,OAAO,GAAG,EAAG,EAAS,GAAG,CAAC,IAGxG,EAAS,GAAY,CACrB,EAAW,EACX,EAAc,IAGT"}
+{"version":3,"file":"memo.cjs","names":[],"sources":["../../src/directives/memo.ts"],"sourcesContent":["import { computed, isSignal, type ReadonlySignal, untrack } from '@vielzeug/stateit';\n\nimport type { HTMLResult } from '../internal';\n\ntype Dep = unknown | ReadonlySignal<unknown>;\n\nexport type MemoOptions = {\n  deps?: ReadonlyArray<Dep>;\n  render: () => string | HTMLResult;\n};\n\n/**\n * Memoizes a template fragment — `templateFn` is only re-called when at least\n * one entry in `deps` has changed (compared with `Object.is`).\n *\n * Signal values in `deps` are automatically unwrapped and tracked, so changing a\n * dep signal triggers a re-evaluation. This is useful for skipping expensive\n * sub-tree renders when only unrelated state changes.\n *\n * @example\n * import { memo } from '@vielzeug/craftit/directives';\n *\n * // Only re-renders the table when `rows` actually changes\n * html`${memo({ deps: [rows], render: () => html`<big-table :data=${rows}></big-table>` })}`\n *\n * // Multiple deps — re-renders when either changes\n * html`${memo({ deps: [locale, theme], render: () => html`<themed-chart :locale=${locale}></themed-chart>` })}`\n */\nexport function memo(options: MemoOptions): () => string | HTMLResult {\n  const renderSignal = computed(() => {\n    for (const dep of options.deps ?? []) {\n      if (isSignal(dep)) Reflect.get(dep, 'value');\n    }\n\n    return untrack(options.render);\n  });\n\n  return () => renderSignal.value;\n}\n"],"mappings":"mCA4BA,SAAgB,EAAK,EAAiD,CACpE,IAAM,GAAA,EAAA,EAAA,cAA8B,CAClC,IAAK,IAAM,KAAO,EAAQ,MAAQ,EAAE,EAClC,EAAA,EAAA,UAAa,EAAI,EAAE,QAAQ,IAAI,EAAK,QAAQ,CAG9C,OAAA,EAAA,EAAA,SAAe,EAAQ,OAAO,EAC9B,CAEF,UAAa,EAAa"}