ilha 0.4.4 → 0.6.0

package/README.md

@@ -326,40 +326,6 @@ An error thrown inside an `.onError()` handler does not break other registered h
 
 ---
 
-### `.bind(selector, stateKey | externalSignal)`
-
-Two-way binds a form element to a state key or an external signal. Handles `input`, `select`, `textarea`, `checkbox`, `radio`, and `number` inputs automatically.
-
-```ts
-ilha
-  .state("name", "")
-  .state("agreed", false)
-  .bind("input.name", "name")
-  .bind("input[type=checkbox]", "agreed")
-  .render(
-    ({ state }) => html`
-      <form>
-        <input class="name" value="${state.name}" />
-        <input type="checkbox" />
-        <p>Hello, ${state.name}! Agreed: ${state.agreed}</p>
-      </form>
-    `,
-  );
-```
-
-You can also bind to an external signal — either a free-standing one created with `signal()` or a named global one created with `context()`:
-
-```ts
-import { signal, context } from "ilha";
-
-const username = signal("");
-const theme = context("app.theme", "light");
-
-ilha.bind("input.name", username).bind("select.theme", theme).render(/* … */);
-```
-
----
-
 ### `.css(strings, ...values)`
 
 Attaches scoped styles to the island. Accepts a tagged template literal or a plain string. The CSS is automatically wrapped in a `@scope` rule bounded to the island host, so styles are contained within the island and do not leak into child islands.
@@ -616,7 +582,7 @@ const Footer = ilha.render(() => html`<footer>Logged in as ${username()}</footer
 username("alice");
 ```
 
-Pairs naturally with `.bind()` for two-way form bindings against module-level state.
+Works naturally with `bind:` template syntax for two-way form bindings against module-level state.
 
 ---
 
@@ -635,7 +601,7 @@ theme("dark"); // → sets to "dark"
 
 Safe to call in both SSR and browser environments.
 
-> **`signal()` vs `context()`** — both return the same accessor shape and can be passed to `.bind()`. Use `signal()` for one-off shared state where you'd hold the reference yourself; use `context()` when you want a name-keyed registry so the same signal can be looked up from anywhere by string key.
+> **`signal()` vs `context()`** — both return the same accessor shape and can be used with `bind:` template syntax. Use `signal()` for one-off shared state where you'd hold the reference yourself; use `context()` when you want a name-keyed registry so the same signal can be looked up from anywhere by string key.
 
 ---
 
@@ -713,6 +679,32 @@ Interpolation rules:
 | Island / Island call | Emitted as `data-ilha-slot` host element    |
 | Array                | Each item processed recursively (no commas) |
 
+**Template bindings** — use `bind:property=${signal}` inside `html\`\`` to create two-way bindings between form elements and signals:
+
+```ts
+ilha.state("name", "").render(
+  ({ state }) => html`
+    <input bind:value=${state.name} />
+    <p>Hello, ${state.name()}!</p>
+  `,
+);
+```
+
+Supported bindings:
+
+| Binding              | Element                                           | Bound property      | Trigger event |
+| -------------------- | ------------------------------------------------- | ------------------- | ------------- |
+| `bind:value`         | `<input>`, `<textarea>`, `<select>`               | `value`             | `input`       |
+| `bind:valueAsNumber` | `<input type="number">`                           | `valueAsNumber`     | `input`       |
+| `bind:valueAsDate`   | `<input type="date">`                             | `valueAsDate`       | `input`       |
+| `bind:checked`       | `<input type="checkbox">`                         | `checked`           | `change`      |
+| `bind:group`         | `<input type="radio">`, `<input type="checkbox">` | `checked` / `value` | `change`      |
+| `bind:open`          | `<details>`                                       | `open`              | `toggle`      |
+| `bind:files`         | `<input type="file">`                             | `files`             | `change`      |
+| `bind:this`          | Any element                                       | element reference   | —             |
+
+`bind:group` connects multiple inputs to a single signal — radio buttons hold the selected `value`, checkboxes hold an array of checked values. `bind:this` writes the DOM element into a signal on mount and `null` on unmount. External signals from `signal()` or `context()` work as binding targets too, enabling shared state across islands.
+
 **List rendering pattern:**
 
 ```ts

package/dist/index.d.ts

@@ -55,6 +55,14 @@ interface MarkedSignalAccessor<T> {
 }
 declare function ilhaRaw(value: string): RawHtml;
 declare function ilhaCss(strings: TemplateStringsArray | string, ...values: (string | number)[]): string;
+type JsxChild = unknown;
+type JsxProps = Record<string, unknown> | null | undefined;
+type JsxType = string | ((props: Record<string, unknown>) => unknown);
+declare function ilhaJsx(type: JsxType, props: JsxProps, ...children: JsxChild[]): RawHtml;
+declare function ilhaFragment(props: {
+  children?: JsxChild;
+} | null, ...children: JsxChild[]): RawHtml;
+declare function ilhaJsxDEV(type: JsxType, props: JsxProps): RawHtml;
 declare function ilhaHtml(strings: TemplateStringsArray, ...values: unknown[]): RawHtml;
 type ContextSignal<T> = {
   (): T;
@@ -64,7 +72,8 @@ declare function ilhaContext<T>(key: string, initial: T): ContextSignal<T>;
 /**
  * Create a free-standing reactive signal that lives outside any island.
  * Useful for sharing state across islands without prop drilling, or for
- * binding form inputs to module-level state via `.bind(selector, signal)`.
+ * binding form inputs to module-level state via the `bind:value=${signal}`
+ * template syntax.
  *
  * The returned accessor is a getter when called with no arguments and a
  * setter when called with one. Reading it inside a `.derived()`, `.effect()`,
@@ -106,16 +115,12 @@ interface DerivedEntry<TInput, TStateMap extends Record<string, unknown>> {
   fn: DerivedFn<TInput, TStateMap, unknown>;
 }
 type IslandDerived<TDerivedMap extends Record<string, unknown>> = { readonly [K in keyof TDerivedMap]: DerivedValue<TDerivedMap[K]> };
-type ExternalSignal<T = unknown> = {
+interface ExternalSignal<T = unknown> {
   (): T;
   (value: T): void;
-};
-interface BindEntry<TStateMap extends Record<string, unknown>> {
-  selector: string;
-  target: (keyof TStateMap & string) | ExternalSignal;
 }
 type SignalAccessor<T> = MarkedSignalAccessor<T>;
-type MergeState<TStateMap extends Record<string, unknown>, K extends string, V> = { [P in keyof TStateMap as P extends K ? never : P]-?: TStateMap[P] } & Record<K, V>;
+type MergeState<TStateMap extends Record<string, unknown>, K extends string, V> = Omit<TStateMap, K> & Record<K, V>;
 type IslandState<TStateMap extends Record<string, unknown>> = { readonly [K in keyof TStateMap]-?: SignalAccessor<TStateMap[K]> };
 interface HydratableOptions {
   name: string;
@@ -156,14 +161,14 @@ type EffectContext<TInput, TStateMap extends Record<string, unknown>> = {
    */
   signal: AbortSignal;
 };
-type OnMountContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<string, never>> = {
+type OnMountContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> = {
   state: IslandState<TStateMap>;
   derived: IslandDerived<TDerivedMap>;
   input: TInput;
   host: Element;
   hydrated: boolean;
 };
-type HandlerContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<string, never>> = {
+type HandlerContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> = {
   state: IslandState<TStateMap>;
   derived: IslandDerived<TDerivedMap>;
   input: TInput;
@@ -180,17 +185,15 @@ type HandlerContext<TInput, TStateMap extends Record<string, unknown>, TDerivedM
    */
   signal: AbortSignal;
 };
-type HTMLEventName = keyof HTMLElementEventMap & string;
-type Modifier = "once" | "capture" | "passive" | "abortable";
-type WithModifiers<E extends string> = E | `${E}:${Modifier}` | `${E}:${Modifier}:${Modifier}` | `${E}:${Modifier}:${Modifier}:${Modifier}`;
-type OnSelectorString = `@${WithModifiers<HTMLEventName>}` | `${string}@${WithModifiers<HTMLEventName>}`;
-type HandlerContextFor<TInput, TStateMap extends Record<string, unknown>, TEventName extends string, TDerivedMap extends Record<string, unknown> = Record<string, never>> = {
+type HTMLEventFor<E extends string> = E extends keyof HTMLElementEventMap ? HTMLElementEventMap[E] : Event;
+type HTMLTargetFor<E extends string> = E extends keyof HTMLElementEventMap ? NonNullable<HTMLElementEventMap[E]["target"]> extends Element ? NonNullable<HTMLElementEventMap[E]["target"]> : Element : Element;
+type HandlerContextFor<TInput, TStateMap extends Record<string, unknown>, TEventName extends string, TDerivedMap extends Record<string, unknown> = Record<never, never>> = {
   state: IslandState<TStateMap>;
   derived: IslandDerived<TDerivedMap>;
   input: TInput;
   host: Element;
-  target: TEventName extends keyof HTMLElementEventMap ? HTMLElementEventMap[TEventName]["target"] extends Element | null ? NonNullable<HTMLElementEventMap[TEventName]["target"]> : Element : Element;
-  event: TEventName extends keyof HTMLElementEventMap ? HTMLElementEventMap[TEventName] : Event;
+  target: HTMLTargetFor<TEventName>;
+  event: HTMLEventFor<TEventName>;
   /**
    * AbortSignal that fires when the island unmounts. If the handler's selector
    * was registered with the `:abortable` modifier, the signal is also aborted
@@ -203,7 +206,7 @@ interface StateEntry<TInput> {
   key: string;
   init: StateInit<TInput, unknown>;
 }
-interface OnEntry<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<string, never>> {
+interface OnEntry<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> {
   selector: string;
   event: string;
   options: AddEventListenerOptions;
@@ -217,7 +220,7 @@ interface EffectEntry<TInput, TStateMap extends Record<string, unknown>> {
  *  from `.on()` handlers; `"effect"` covers sync throws from `.effect()` runs
  *  (async work spawned inside an effect is not awaited by the runtime). */
 type ErrorSource = "on" | "effect";
-type ErrorContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<string, never>> = {
+type ErrorContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> = {
   error: Error;
   source: ErrorSource;
   state: IslandState<TStateMap>;
@@ -251,20 +254,16 @@ interface BuilderConfig<TInput, TStateMap extends Record<string, unknown>, TDeri
   onMounts: OnMountEntry<TInput, TStateMap, TDerivedMap>[];
   onErrors: OnErrorEntry<TInput, TStateMap, TDerivedMap>[];
   transition: TransitionOptions | null;
-  binds: BindEntry<TStateMap>[];
   css: string | null;
 }
-declare class IlhaBuilder<TInput extends Record<string, unknown>, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<string, never>> {
+declare class IlhaBuilder<TInput extends Record<string, unknown>, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> {
   readonly _cfg: BuilderConfig<TInput, TStateMap, TDerivedMap>;
   constructor(cfg: BuilderConfig<TInput, TStateMap, TDerivedMap>);
-  input<T extends Record<string, unknown>>(): IlhaBuilder<T, Record<string, never>, Record<string, never>>;
-  input<S extends StandardSchemaV1>(schema: S): IlhaBuilder<StandardSchemaV1.InferOutput<S> & Record<string, unknown>, Record<string, never>, Record<string, never>>;
+  input<T extends Record<string, unknown>>(): IlhaBuilder<T, Record<never, never>, Record<never, never>>;
+  input<S extends StandardSchemaV1>(schema: S): IlhaBuilder<StandardSchemaV1.InferOutput<S> & Record<string, unknown>, Record<never, never>, Record<never, never>>;
   state<V = undefined, K extends string = string>(key: K, init?: StateInit<TInput, V> | undefined): IlhaBuilder<TInput, MergeState<TStateMap, K, V>, TDerivedMap>;
   derived<K extends string, V>(key: K, fn: DerivedFn<TInput, TStateMap, V>): IlhaBuilder<TInput, TStateMap, TDerivedMap & Record<K, V>>;
-  bind(selector: string, stateKey: keyof TStateMap & string): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
-  bind<T>(selector: string, externalSignal: ExternalSignal<T>): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
-  on<S extends OnSelectorString>(selectorOrCombined: S, handler: (ctx: S extends `${string}@${infer E}:${string}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : S extends `${string}@${infer E}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : HandlerContext<TInput, TStateMap, TDerivedMap>) => void | Promise<void>): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
-  on(selectorOrCombined: string, handler: (ctx: HandlerContext<TInput, TStateMap, TDerivedMap>) => void | Promise<void>): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
+  on<S extends string>(selectorOrCombined: S, handler: (ctx: S extends `${string}@${infer E}:${string}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : S extends `${string}@${infer E}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : HandlerContext<TInput, TStateMap, TDerivedMap>) => void | Promise<void>): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   effect(fn: (ctx: EffectContext<TInput, TStateMap>) => (() => void) | void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   onMount(fn: (ctx: OnMountContext<TInput, TStateMap, TDerivedMap>) => (() => void) | void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   onError(fn: (ctx: ErrorContext<TInput, TStateMap, TDerivedMap>) => void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
@@ -275,9 +274,13 @@ declare class IlhaBuilder<TInput extends Record<string, unknown>, TStateMap exte
 declare function ilhaFrom<TInput, TStateMap extends Record<string, unknown>>(selector: string | Element, island: Island<TInput, TStateMap>, props?: Partial<TInput>): (() => void) | null;
 type IslandRegistry = Record<string, AnyIsland>;
 declare function mountAll(registry: IslandRegistry, options?: MountOptions): MountResult;
-declare const ilha: IlhaBuilder<Record<string, unknown>, Record<string, never>, Record<string, never>> & {
+declare const ilha: IlhaBuilder<Record<string, unknown>, Record<never, never>, Record<never, never>> & {
   html: typeof ilhaHtml;
   raw: typeof ilhaRaw;
+  jsx: typeof ilhaJsx;
+  jsxs: typeof ilhaJsx;
+  jsxDEV: typeof ilhaJsxDEV;
+  Fragment: typeof ilhaFragment;
   mount: typeof mountAll;
   from: typeof ilhaFrom;
   context: typeof ilhaContext;
@@ -287,9 +290,13 @@ declare const ilha: IlhaBuilder<Record<string, unknown>, Record<string, never>,
 };
 declare const html: typeof ilhaHtml;
 declare const raw: typeof ilhaRaw;
+declare const jsx: typeof ilhaJsx;
+declare const jsxs: typeof ilhaJsx;
+declare const jsxDEV: typeof ilhaJsxDEV;
+declare const Fragment: typeof ilhaFragment;
 declare const css: typeof ilhaCss;
 declare const mount: typeof mountAll;
 declare const from: typeof ilhaFrom;
 declare const context: typeof ilhaContext;
 //#endregion
-export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, Fragment, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

package/dist/index.js

@@ -109,7 +109,8 @@ function pushRenderCtx(liveHost, asyncChildren) {
 		slots: /* @__PURE__ */ new Map(),
 		positional: 0,
 		liveHost,
-		pending: asyncChildren ? /* @__PURE__ */ new Map() : void 0
+		pending: asyncChildren ? /* @__PURE__ */ new Map() : void 0,
+		binds: []
 	};
 	renderCtxStack.push(ctx);
 	return ctx;
@@ -190,8 +191,120 @@ function ilhaCss(strings, ...values) {
 	}
 	return result;
 }
+const SAFE_NAME_RE = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
+const SAFE_BIND_LOCAL_RE = /^[A-Za-z][A-Za-z0-9]*$/;
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const SAFE_CSS_PROP_RE = /^(-{2}[a-zA-Z][a-zA-Z0-9-]*|-?[a-zA-Z][a-zA-Z0-9-]*)$/;
+const URL_ATTRS = new Set([
+	"href",
+	"src",
+	"action",
+	"formaction",
+	"cite",
+	"data",
+	"poster"
+]);
+const SAFE_URL_RE = /^(?!javascript:|data:text\/html|data:text\/xml|data:application\/xhtml\+xml|data:image\/svg|vbscript:)/i;
+function normalizeClass(value) {
+	if (Array.isArray(value)) return value.filter(Boolean).join(" ");
+	if (value && typeof value === "object") return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
+	return String(value);
+}
+function normalizeJsxChildren(props, children) {
+	const propChildren = props && "children" in props ? props.children : void 0;
+	return (children.length > 0 ? children : propChildren === void 0 ? [] : [propChildren]).flat(1);
+}
+function serializeStyle(value) {
+	return Object.entries(value).map(([k, v]) => {
+		if (!SAFE_CSS_PROP_RE.test(k)) return "";
+		const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		let safeV = String(v).replace(/["<>{};]/g, "");
+		if (/expression\(/i.test(safeV) || /^javascript:/i.test(safeV)) return "";
+		return `${prop}:${safeV}`;
+	}).filter(Boolean).join(";");
+}
+function pushJsxAttr(chunks, values, name, value) {
+	if (value == null || value === false || name === "children" || name === "key") return;
+	if (name === "__proto__" || name === "constructor" || name === "prototype") return;
+	if (name.startsWith("bind:")) {
+		const [prefix, localName, ...rest] = name.split(":");
+		if (prefix !== "bind" || rest.length > 0 || !localName || !SAFE_BIND_LOCAL_RE.test(localName)) return;
+		if (!isSignalAccessor(value)) return;
+		const safeName = `${prefix}:${localName}`;
+		chunks[chunks.length - 1] += ` ${safeName}=`;
+		values.push(value);
+		chunks.push("");
+		return;
+	}
+	if (!SAFE_NAME_RE.test(name)) return;
+	let safeName = name;
+	if (safeName === "className") safeName = "class";
+	if (safeName === "htmlFor") safeName = "for";
+	if (safeName.startsWith("on")) return;
+	if (safeName === "class") value = normalizeClass(value);
+	if (safeName === "style" && value && typeof value === "object") value = serializeStyle(value);
+	if ((URL_ATTRS.has(safeName) || /:(href|src|action|formaction|cite|data|poster)$/.test(safeName)) && typeof value === "string" && !SAFE_URL_RE.test(value.trim())) return;
+	if (value === true) {
+		chunks[chunks.length - 1] += ` ${safeName}`;
+		return;
+	}
+	chunks[chunks.length - 1] += ` ${safeName}="`;
+	values.push(value);
+	chunks.push("\"");
+}
+function renderJsxElement(type, props, children) {
+	const chunks = [`<${type}`];
+	const values = [];
+	if (props) for (const [name, value] of Object.entries(props)) pushJsxAttr(chunks, values, name, value);
+	chunks[chunks.length - 1] += ">";
+	if (!VOID_ELEMENTS.has(type)) {
+		for (const child of children) {
+			values.push(child);
+			chunks.push("");
+		}
+		chunks[chunks.length - 1] += `</${type}>`;
+	} else if (children.length > 0 && __DEV__) warn(`Void element <${type}> should not have children. They will be ignored.`);
+	return ilhaHtml(chunks, ...values);
+}
+function ilhaJsx(type, props, ...children) {
+	const normalizedChildren = normalizeJsxChildren(props, children);
+	if (typeof type === "function") {
+		const componentProps = {
+			...props ?? {},
+			...normalizedChildren.length > 0 ? { children: normalizedChildren } : {}
+		};
+		delete componentProps["key"];
+		const out = type(Object.keys(componentProps).length ? componentProps : {});
+		if (typeof out === "string") return ilhaHtml`${out}`;
+		if (out && typeof out === "object" && RAW in out) return out;
+		return ilhaHtml`${out}`;
+	}
+	return renderJsxElement(type, props, normalizedChildren);
+}
+function ilhaFragment(props, ...children) {
+	const normalizedChildren = normalizeJsxChildren(props, children);
+	return ilhaHtml(["", ...normalizedChildren.map(() => "")], ...normalizedChildren);
+}
+function ilhaJsxDEV(type, props) {
+	return ilhaJsx(type, props);
+}
 function interpolateValue(v) {
-	if (v == null) return "";
+	if (v == null || v === true || v === false) return "";
 	if (Array.isArray(v)) return v.map(interpolateValue).join("");
 	if (typeof v === "object" && RAW in v) return v.value;
 	if (isIslandCall(v)) {
@@ -203,12 +316,117 @@ function interpolateValue(v) {
 	if (typeof v === "function") return escapeHtml(v());
 	return escapeHtml(v);
 }
+const BIND_VALID_KINDS = new Set([
+	"value",
+	"checked",
+	"valueAsNumber",
+	"valueAsDate",
+	"files",
+	"open",
+	"group",
+	"this"
+]);
+const BIND_PREFIX_RE = /\bbind:([a-zA-Z]+)\s*=\s*("|')?$/;
+function formatDateForInput(d) {
+	if (d instanceof Date) {
+		if (isNaN(d.getTime())) {
+			if (__DEV__) warn("bind:valueAsDate received an invalid Date object — value attribute will be empty.");
+			return "";
+		}
+		const pad = (n) => String(n).padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+	}
+	return "";
+}
+function extractElementStaticValue(prefix) {
+	const lastOpen = prefix.lastIndexOf("<");
+	if (lastOpen === -1) return null;
+	const tagPrefix = prefix.slice(lastOpen);
+	if (tagPrefix.includes(">")) return null;
+	const m = tagPrefix.match(/\bvalue\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))/);
+	if (!m) return null;
+	return m[2] ?? m[3] ?? m[4] ?? null;
+}
+function emitBindSSR(kind, index, accessor, prefixForStaticPeek) {
+	const spec = `${kind}:${index}`;
+	let v;
+	try {
+		v = accessor();
+	} catch {
+		v = void 0;
+	}
+	switch (kind) {
+		case "value": return [` value="${escapeHtml(v ?? "")}"`, spec];
+		case "valueAsNumber": return [` value="${escapeHtml(v == null ? "" : String(v))}"`, spec];
+		case "valueAsDate": return [` value="${escapeHtml(formatDateForInput(v))}"`, spec];
+		case "checked": return [v ? ` checked` : ``, spec];
+		case "open": return [v ? ` open` : ``, spec];
+		case "files": return [``, spec];
+		case "this": return [``, spec];
+		case "group": {
+			const optionValue = extractElementStaticValue(prefixForStaticPeek);
+			if (optionValue == null) return [``, spec];
+			return [(Array.isArray(v) ? v.map(String).includes(optionValue) : v != null && String(v) === optionValue) ? ` checked` : ``, spec];
+		}
+	}
+}
 function ilhaHtml(strings, ...values) {
 	let result = "";
+	let stripLeadingQuote = null;
+	let pendingBindSpecs = "";
+	const ctx = currentRenderCtx();
 	for (let i = 0; i < strings.length; i++) {
-		result += strings[i];
-		if (i < values.length) result += interpolateValue(values[i]);
+		let chunk = strings[i];
+		if (stripLeadingQuote !== null) {
+			if (chunk.startsWith(stripLeadingQuote)) chunk = chunk.slice(1);
+			stripLeadingQuote = null;
+		}
+		if (pendingBindSpecs !== "") {
+			const gtIdx = chunk.indexOf(">");
+			if (gtIdx !== -1) {
+				chunk = chunk.slice(0, gtIdx) + ` data-ilha-bind="${pendingBindSpecs}">` + chunk.slice(gtIdx + 1);
+				pendingBindSpecs = "";
+			}
+		}
+		if (i >= values.length) {
+			result += chunk;
+			continue;
+		}
+		const value = values[i];
+		const m = chunk.match(BIND_PREFIX_RE);
+		if (m && isSignalAccessor(value)) {
+			const name = m[1];
+			const openQuote = m[2] ?? null;
+			if (!BIND_VALID_KINDS.has(name)) {
+				if (__DEV__) warn(`Unknown bind:${name} — supported bindings are ${[...BIND_VALID_KINDS].map((k) => `bind:${k}`).join(", ")}.`);
+				result += chunk + interpolateValue(value);
+				continue;
+			}
+			if (!ctx) {
+				if (__DEV__) warn(`bind:${name} used outside an island render — bindings only work in .render(). The value is reflected once but not wired.`);
+				const stripped = chunk.slice(0, chunk.length - m[0].length);
+				const quote = openQuote ?? "\"";
+				result += stripped + name + "=" + quote + interpolateValue(value) + quote;
+				if (openQuote) stripLeadingQuote = openQuote;
+				continue;
+			}
+			const matchStart = chunk.length - m[0].length;
+			const cleanPrefix = chunk.slice(0, matchStart).replace(/\s+$/, "");
+			const index = ctx.binds.length;
+			ctx.binds.push({
+				kind: name,
+				accessor: value
+			});
+			const [valueAttrs, spec] = emitBindSSR(name, index, value, cleanPrefix);
+			result += cleanPrefix + valueAttrs;
+			pendingBindSpecs += (pendingBindSpecs ? "," : "") + spec;
+			if (openQuote) stripLeadingQuote = openQuote;
+			continue;
+		}
+		if (m && __DEV__) warn(`bind:${m[1]} requires a signal accessor — got ${typeof value}. Use ilha.signal() or a .state() accessor.`);
+		result += chunk + interpolateValue(value);
 	}
+	if (pendingBindSpecs !== "") result += ` data-ilha-bind="${pendingBindSpecs}"`;
 	return {
 		[RAW]: true,
 		value: dedentString(result)
@@ -231,7 +449,8 @@ function ilhaContext(key, initial) {
 /**
 * Create a free-standing reactive signal that lives outside any island.
 * Useful for sharing state across islands without prop drilling, or for
-* binding form inputs to module-level state via `.bind(selector, signal)`.
+* binding form inputs to module-level state via the `bind:value=${signal}`
+* template syntax.
 *
 * The returned accessor is a getter when called with no arguments and a
 * setter when called with one. Reading it inside a `.derived()`, `.effect()`,
@@ -240,11 +459,10 @@ function ilhaContext(key, initial) {
 */
 function ilhaSignal(initial) {
 	const s = signal(initial);
-	const accessor = (...args) => {
+	return markSignalAccessor((...args) => {
 		if (args.length === 0) return s();
 		s(args[0]);
-	};
-	return accessor;
+	});
 }
 /**
 * Run `fn` with reactive tracking suspended. Reading signals inside `fn`
@@ -411,63 +629,159 @@ function createDerivedProxy(entries, state, input, derivedSnapshot) {
 		setup
 	};
 }
-function resolveBindConfig(el) {
-	const tag = el.tagName.toLowerCase();
-	const type = el.type?.toLowerCase() ?? "";
-	if (tag === "input" && type === "checkbox") return {
-		prop: "checked",
-		event: "change",
-		read: (el) => el.checked,
-		write: (el, v) => el.checked = Boolean(v)
-	};
-	if (tag === "input" && type === "radio") return {
-		prop: "checked",
-		event: "change",
-		read: (el) => {
-			const input = el;
-			return input.checked ? input.value : void 0;
-		},
-		write: (el, v) => {
-			el.checked = String(v ?? "") === el.value;
+const BIND_SENTINEL_ATTR = "data-ilha-bind";
+function parseBindSentinel(value) {
+	const out = [];
+	for (const part of value.split(",")) {
+		const [kind, idx] = part.split(":");
+		if (!kind || !idx) continue;
+		const i = Number(idx);
+		if (!Number.isInteger(i) || i < 0) continue;
+		out.push({
+			kind,
+			index: i
+		});
+	}
+	return out;
+}
+function resolveBindOps(el, kind) {
+	const input = el;
+	switch (kind) {
+		case "value": return {
+			event: el.tagName === "SELECT" ? "change" : "input",
+			read: (el) => el.value,
+			write: (el, v) => el.value = v == null ? "" : String(v)
+		};
+		case "valueAsNumber": return {
+			event: "input",
+			read: (el) => {
+				const n = el.valueAsNumber;
+				return Number.isNaN(n) ? null : n;
+			},
+			write: (el, v) => el.value = v == null || Number.isNaN(v) ? "" : String(v)
+		};
+		case "valueAsDate": return {
+			event: "input",
+			read: (el) => el.valueAsDate,
+			write: (el, v) => {
+				el.value = formatDateForInput(v);
+			}
+		};
+		case "checked": return {
+			event: "change",
+			read: (el) => el.checked,
+			write: (el, v) => el.checked = Boolean(v)
+		};
+		case "files": return {
+			event: "change",
+			read: (el) => el.files,
+			write: () => {}
+		};
+		case "open": return {
+			event: "toggle",
+			read: (el) => el.open,
+			write: (el, v) => el.open = Boolean(v)
+		};
+		case "this": return {
+			event: null,
+			read: () => void 0,
+			write: () => {}
+		};
+		case "group": {
+			const isCheckbox = input.type === "checkbox";
+			return {
+				event: "change",
+				read: (el) => {
+					const i = el;
+					if (isCheckbox) return {
+						__ilhaGroup: true,
+						value: i.value,
+						checked: i.checked
+					};
+					return i.checked ? i.value : void 0;
+				},
+				write: (el, v) => {
+					const i = el;
+					if (isCheckbox) i.checked = (Array.isArray(v) ? v.map(String) : []).includes(i.value);
+					else i.checked = v != null && String(v) === i.value;
+				}
+			};
 		}
-	};
-	if (tag === "input" && type === "number") return {
-		prop: "valueAsNumber",
-		event: "input",
-		read: (el) => el.valueAsNumber,
-		write: (el, v) => el.value = String(v ?? "")
-	};
-	return {
-		prop: "value",
-		event: tag === "select" ? "change" : "input",
-		read: (el) => el.value,
-		write: (el, v) => el.value = String(v ?? "")
-	};
+	}
 }
-function applyBindings(host, bindings, state) {
+function applyTemplateBindings(host, binds) {
+	if (binds.length === 0) return () => {};
 	const cleanups = [];
-	for (const binding of bindings) {
-		const accessor = typeof binding.target === "function" ? binding.target : state[binding.target];
-		const targets = binding.selector === "" ? [host] : Array.from(host.querySelectorAll(binding.selector));
-		if (__DEV__ && binding.selector !== "" && targets.length === 0) warn(`bind(): selector "${binding.selector}" matched no elements inside the island host. Check that the element exists in your render output.`);
-		for (const target of targets) {
-			const { event, read, write } = resolveBindConfig(target);
-			const isRadio = target.tagName.toLowerCase() === "input" && target.type?.toLowerCase() === "radio";
-			write(target, accessor());
+	const elements = [];
+	if (host.hasAttribute(BIND_SENTINEL_ATTR)) elements.push(host);
+	for (const el of host.querySelectorAll(`[${BIND_SENTINEL_ATTR}]`)) elements.push(el);
+	for (const el of elements) {
+		const specs = parseBindSentinel(el.getAttribute(BIND_SENTINEL_ATTR));
+		for (const spec of specs) {
+			const record = binds[spec.index];
+			if (!record) {
+				if (__DEV__) warn(`bind:${spec.kind} index ${spec.index} not found in render — the data-ilha-bind sentinel may have been hand-edited or survived a stale render.`);
+				continue;
+			}
+			if (record.kind !== spec.kind) {
+				if (__DEV__) warn(`bind:${spec.kind} sentinel points at a binding registered as bind:${record.kind}. Sentinel may be stale.`);
+				continue;
+			}
+			const { event, read, write } = resolveBindOps(el, spec.kind);
+			const accessor = record.accessor;
+			if (spec.kind === "this") {
+				accessor(el);
+				cleanups.push(() => accessor(null));
+				continue;
+			}
+			try {
+				write(el, accessor());
+			} catch (err) {
+				if (__DEV__) console.error(`[ilha] bind:${spec.kind} write failed:`, err);
+			}
+			if (event === null) continue;
 			const listener = () => {
-				const raw = read(target);
-				if (isRadio && raw === void 0) return;
+				const raw = read(el);
+				if (spec.kind === "group") {
+					const groupRead = raw;
+					if (groupRead === void 0) return;
+					if (typeof groupRead === "object" && groupRead.__ilhaGroup) {
+						const currentArr = accessor();
+						const arr = Array.isArray(currentArr) ? [...currentArr] : [];
+						const idx = arr.findIndex((x) => String(x) === groupRead.value);
+						if (groupRead.checked && idx === -1) {
+							let coercedVal = groupRead.value;
+							const templateVal = Array.isArray(currentArr) && currentArr.length > 0 ? currentArr[0] : void 0;
+							if (templateVal !== void 0) {
+								if (typeof templateVal === "number") {
+									const n = Number(coercedVal);
+									coercedVal = Number.isNaN(n) ? coercedVal : n;
+								} else if (typeof templateVal === "boolean") coercedVal = Boolean(coercedVal);
+							}
+							arr.push(coercedVal);
+						} else if (!groupRead.checked && idx !== -1) arr.splice(idx, 1);
+						accessor(arr);
+						return;
+					}
+					const currentVal = accessor();
+					let coerced = groupRead;
+					if (typeof currentVal === "number" && typeof groupRead === "string") {
+						const n = Number(groupRead);
+						coerced = Number.isNaN(n) ? 0 : n;
+					} else if (typeof currentVal === "boolean") coerced = Boolean(groupRead);
+					accessor(coerced);
+					return;
+				}
 				const currentVal = accessor();
-				let value;
-				if (typeof currentVal === "number") {
+				let value = raw;
+				if (typeof currentVal === "number" && typeof raw === "string") {
 					const n = Number(raw);
-					value = isNaN(n) ? 0 : n;
+					value = Number.isNaN(n) ? 0 : n;
 				} else if (typeof currentVal === "boolean") value = Boolean(raw);
-				else value = raw;
 				accessor(value);
 			};
-			target.addEventListener(event, listener);
-			cleanups.push(() => target.removeEventListener(event, listener));
+			el.addEventListener(event, listener);
+			cleanups.push(() => el.removeEventListener(event, listener));
 		}
 	}
 	return () => cleanups.forEach((c) => c());
@@ -529,7 +843,6 @@ var IlhaBuilder = class IlhaBuilder {
 			onMounts: [],
 			onErrors: [],
 			transition: null,
-			binds: [],
 			css: null
 		});
 	}
@@ -553,15 +866,6 @@ var IlhaBuilder = class IlhaBuilder {
 			}]
 		});
 	}
-	bind(selector, target) {
-		return new IlhaBuilder({
-			...this._cfg,
-			binds: [...this._cfg.binds, {
-				selector,
-				target
-			}]
-		});
-	}
 	on(selectorOrCombined, handler) {
 		const parsed = parseOnArgs(selectorOrCombined);
 		return new IlhaBuilder({
@@ -617,7 +921,7 @@ var IlhaBuilder = class IlhaBuilder {
 		});
 	}
 	render(fn) {
-		const { schema, states, deriveds, ons, effects, onMounts, onErrors, transition, binds, css: cssSource } = this._cfg;
+		const { schema, states, deriveds, ons, effects, onMounts, onErrors, transition, css: cssSource } = this._cfg;
 		const stylePrefix = cssSource != null ? buildScopedStyle(cssSource) : "";
 		function resolveInput(props) {
 			const value = props ?? {};
@@ -635,7 +939,8 @@ var IlhaBuilder = class IlhaBuilder {
 						try {
 							return {
 								html: await resolveAsyncChildren(html, ctx),
-								slots: ctx.slots
+								slots: ctx.slots,
+								binds: ctx.binds
 							};
 						} finally {
 							popRenderCtx();
@@ -644,7 +949,8 @@ var IlhaBuilder = class IlhaBuilder {
 				}
 				return {
 					html,
-					slots: ctx.slots
+					slots: ctx.slots,
+					binds: ctx.binds
 				};
 			} finally {
 				if (!isAsync) popRenderCtx();
@@ -986,7 +1292,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 			}), hasExistingContent ? host : void 0);
 			if (!hasExistingContent) host.innerHTML = stylePrefix + initial.html;
 			attachListeners();
-			let stopBindings = applyBindings(host, binds, state);
+			let stopBindings = applyTemplateBindings(host, initial.binds);
 			cleanups.push(() => stopBindings());
 			mountSlots(initial.slots);
 			cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
@@ -1050,7 +1356,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 			let initialized = false;
 			const initialRenderedHtml = initial.html;
 			const stopRender = effect(() => {
-				const { html: rendered, slots: newSlotMap } = renderWithCtx(() => fn({
+				const { html: rendered, slots: newSlotMap, binds: newBinds } = renderWithCtx(() => fn({
 					state,
 					derived,
 					input
@@ -1084,24 +1390,26 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 					stub.replaceWith(liveEl);
 				}
 				attachListeners();
-				stopBindings = applyBindings(host, binds, state);
+				stopBindings = applyTemplateBindings(host, newBinds);
 				mountSlots(newSlotMap);
 			});
-			cleanups.push(stopRender);
-			cleanups.push(detachListeners);
 			let tornDown = false;
 			const unmount = () => {
 				if (tornDown) return;
 				tornDown = true;
 				if (__DEV__ && _mountedHosts) _mountedHosts.delete(host);
+				stopRender();
+				detachListeners();
 				if (transition?.leave) {
 					const result = transition.leave(host);
 					if (result instanceof Promise) {
-						result.then(() => cleanups.forEach((c) => c())).catch(console.error);
+						result.then(() => {
+							for (const c of cleanups) c();
+						}).catch(console.error);
 						return;
 					}
 				}
-				cleanups.forEach((c) => c());
+				for (const c of cleanups) c();
 			};
 			const updateProps = (nextProps) => {
 				if (tornDown) return;
@@ -1272,12 +1580,15 @@ const rootBuilder = new IlhaBuilder({
 	onMounts: [],
 	onErrors: [],
 	transition: null,
-	binds: [],
 	css: null
 });
 const ilha = Object.assign(rootBuilder, {
 	html: ilhaHtml,
 	raw: ilhaRaw,
+	jsx: ilhaJsx,
+	jsxs: ilhaJsx,
+	jsxDEV: ilhaJsxDEV,
+	Fragment: ilhaFragment,
 	mount: mountAll,
 	from: ilhaFrom,
 	context: ilhaContext,
@@ -1287,9 +1598,13 @@ const ilha = Object.assign(rootBuilder, {
 });
 const html = ilhaHtml;
 const raw = ilhaRaw;
+const jsx = ilhaJsx;
+const jsxs = ilhaJsx;
+const jsxDEV = ilhaJsxDEV;
+const Fragment = ilhaFragment;
 const css = ilhaCss;
 const mount = mountAll;
 const from = ilhaFrom;
 const context = ilhaContext;
 //#endregion
-export { ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { Fragment, ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, jsxDEV } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsxDEV } from "./index.js";
+export { Fragment, jsxDEV };

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsx, jsxs };

package/dist/jsx-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+export { Fragment, jsx, jsxs };

package/dist/jsx-types-DSrM2NdI.d.ts

@@ -0,0 +1,26 @@
+import { RawHtml } from "./index.js";
+
+//#region src/jsx-types.d.ts
+declare namespace JSX {
+  type Child = unknown;
+  type ElementType = string | ((props: any) => any);
+  interface Element extends RawHtml {}
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicAttributes {
+    key?: string | number;
+  }
+  type IntrinsicElementProps = {
+    children?: Child;
+    class?: string | unknown[] | Record<string, boolean>;
+    className?: string | unknown[] | Record<string, boolean>;
+    htmlFor?: string;
+    [name: string]: unknown;
+  };
+  interface IntrinsicElements {
+    [name: string]: IntrinsicElementProps;
+  }
+}
+//#endregion
+export { JSX as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -12,10 +12,21 @@
     "dist"
   ],
   "type": "module",
+  "browser": {
+    "process": false
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.js"
     }
   },
   "scripts": {
@@ -23,7 +34,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "alien-signals": "3.2.0"
+    "alien-signals": "3.2.1"
   },
   "devDependencies": {
     "zod": "^4.4.3"