@hedystia/view 2.1.0

package/dist/jsx/element.cjs

@@ -0,0 +1,201 @@
+const require_signal = require("../signal/signal.cjs");
+const require_scheduler = require("../scheduler/scheduler.cjs");
+//#region src/jsx/element.ts
+/**
+* Create a real DOM element from JSX props
+* @param {ElementType} type - The element type (string or function component)
+* @param {Record<string, any>} props - The element props
+* @returns {JSX.Element} The created DOM element or component result
+* @example
+* const div = jsx("div", { className: "card", children: "Hello" });
+* const MyComponent = (props: { text: string }) => <div>{props.text}</div>;
+* const component = jsx(MyComponent, { text: "Hello" });
+*/
+function jsx(type, props) {
+	const { children, ...rest } = props || {};
+	if (typeof type === "function") return type({
+		children,
+		...rest
+	});
+	const element = document.createElement(type);
+	for (const key in rest) {
+		if (!Object.hasOwn(rest, key)) continue;
+		const value = rest[key];
+		applyProp(element, key, value);
+	}
+	if (children !== void 0 && children !== null) applyChildren(element, children);
+	return element;
+}
+/**
+* Create a fragment (multiple children without wrapper)
+* @param {ElementType} type - The element type (string or function component)
+* @param {Record<string, any>} props - The element props
+* @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element
+* @example
+* const fragment = jsxs("fragment", { children: [div1, div2] });
+* const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;
+* const component = jsxs(MyComponent, { items: ["a", "b"] });
+*/
+function jsxs(type, props) {
+	const { children, ...rest } = props || {};
+	if (typeof type === "function") return type({
+		children,
+		...rest
+	});
+	if (type === "fragment" || type === "Fragment") {
+		if (Array.isArray(children)) return flattenChildren(children);
+		return children ?? null;
+	}
+	const element = document.createElement(type);
+	for (const key in rest) {
+		if (!Object.hasOwn(rest, key)) continue;
+		const value = rest[key];
+		applyProp(element, key, value);
+	}
+	if (children !== void 0 && children !== null) applyChildren(element, children);
+	return element;
+}
+/**
+* Fragment component for multiple children
+*/
+function Fragment(props) {
+	const { children } = props;
+	if (children == null) return null;
+	if (Array.isArray(children)) return flattenChildren(children);
+	if (typeof children === "function") {
+		const container = document.createDocumentFragment();
+		applyReactiveChild(container, children);
+		return container;
+	}
+	return children;
+}
+/** @internal - Eager effect for DOM side effects (unlike memo which is lazy) */
+function effect(fn) {
+	require_signal.runComputation({
+		_fn: () => {
+			fn();
+		},
+		_value: void 0,
+		_sources: null,
+		_sourceSlots: null,
+		_observers: null,
+		_observerSlots: null,
+		_owner: require_signal.Owner,
+		_cleanups: null,
+		_context: null,
+		_suspense: null,
+		_user: true,
+		_pure: false,
+		_state: 0,
+		_updatedAt: null
+	});
+}
+/** @internal */
+function applyProp(element, key, value) {
+	if (value === void 0 || value === null) return;
+	if (key.startsWith("on") && typeof value === "function") {
+		const eventName = key.slice(2).toLowerCase();
+		element.addEventListener(eventName, value);
+	} else if (key === "style") {
+		if (typeof value === "string") element.style.cssText = value;
+		else if (typeof value === "object") applyStyle(element, value);
+		else if (typeof value === "function") applyReactiveStyle(element, value);
+	} else if (key === "class") element.className = String(value);
+	else if (key === "className") element.className = String(value);
+	else if (key === "ref" && typeof value === "function") require_scheduler.tick(() => value(element));
+	else if (typeof value === "function" && !key.startsWith("on")) applyReactiveProp(element, key, value);
+	else if (typeof value === "boolean") {
+		if (value) element.setAttribute(key, "");
+	} else element.setAttribute(key, String(value));
+}
+/** @internal */
+function applyStyle(element, style) {
+	for (const key in style) {
+		if (!Object.hasOwn(style, key)) continue;
+		const value = style[key];
+		if (value !== void 0 && value !== null) {
+			const cssKey = camelToKebab(key);
+			element.style[cssKey] = String(value);
+		}
+	}
+}
+/** @internal */
+function applyReactiveStyle(element, accessor) {
+	effect(() => {
+		applyStyle(element, accessor());
+	});
+}
+/** @internal */
+function applyReactiveProp(element, key, accessor) {
+	effect(() => {
+		const value = accessor();
+		if (value === void 0 || value === null) element.removeAttribute(key);
+		else element.setAttribute(key, String(value));
+	});
+}
+/** @internal */
+function applyChildren(element, children) {
+	if (Array.isArray(children)) for (let i = 0; i < children.length; i++) appendSingleChild(element, children[i]);
+	else appendSingleChild(element, children);
+}
+/** @internal */
+function appendSingleChild(element, child) {
+	if (child === null || child === void 0 || child === false) return;
+	if (Array.isArray(child)) for (let i = 0; i < child.length; i++) appendSingleChild(element, child[i]);
+	else if (typeof child === "function") applyReactiveChild(element, child);
+	else if (typeof child === "string" || typeof child === "number") element.appendChild(document.createTextNode(String(child)));
+	else if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) element.appendChild(child);
+	else if (child instanceof DocumentFragment) element.appendChild(child);
+}
+/** @internal */
+function applyReactiveChild(element, accessor) {
+	const marker = document.createComment("");
+	element.appendChild(marker);
+	let currentNodes = [];
+	effect(() => {
+		const value = accessor();
+		for (let i = 0; i < currentNodes.length; i++) {
+			const node = currentNodes[i];
+			if (node.parentNode) node.parentNode.removeChild(node);
+		}
+		currentNodes = [];
+		const insert = (node) => {
+			marker.parentNode.insertBefore(node, marker);
+			currentNodes.push(node);
+		};
+		if (value === null || value === void 0 || value === false) {} else if (Array.isArray(value)) for (let i = 0; i < value.length; i++) {
+			const item = value[i];
+			if (item instanceof HTMLElement || item instanceof Text || item instanceof Comment || item instanceof DocumentFragment) insert(item);
+			else if (typeof item === "string" || typeof item === "number") insert(document.createTextNode(String(item)));
+			else if (Array.isArray(item)) {
+				const flat = flattenChildren(item);
+				for (let j = 0; j < flat.length; j++) insert(flat[j]);
+			}
+		}
+		else if (typeof value === "string" || typeof value === "number") insert(document.createTextNode(String(value)));
+		else if (value instanceof HTMLElement || value instanceof Text || value instanceof Comment || value instanceof DocumentFragment) insert(value);
+	});
+}
+/** @internal */
+function flattenChildren(children) {
+	const result = [];
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (Array.isArray(child)) result.push(...flattenChildren(child));
+		else if (child !== null && child !== void 0 && child !== false) {
+			if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) result.push(child);
+			else if (typeof child === "string" || typeof child === "number") result.push(document.createTextNode(String(child)));
+		}
+	}
+	return result;
+}
+/** @internal */
+function camelToKebab(str) {
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+//#endregion
+exports.Fragment = Fragment;
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+
+//# sourceMappingURL=element.cjs.map

package/dist/jsx/element.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.cjs","names":["Owner"],"sources":["../../src/jsx/element.ts"],"sourcesContent":["/**\n * JSX element creation for @hedystia/view\n *\n * Creates real DOM nodes directly from JSX, no Virtual DOM.\n * Supports both intrinsic elements (strings) and functional components.\n */\n\nimport type { JSX } from \"../jsx.d\";\nimport { tick } from \"../scheduler\";\nimport { Owner, runComputation } from \"../signal\";\nimport type { Accessor, Computation } from \"../types\";\n\n/**\n * Function component type\n */\nexport type FunctionComponent<P = {}> = (props: P & { children?: JSX.Element }) => JSX.Element;\n\n/**\n * Element type - can be a string (intrinsic) or a function component\n */\nexport type ElementType<P = {}> = string | FunctionComponent<P>;\n\n/**\n * Create a real DOM element from JSX props\n * @param {ElementType} type - The element type (string or function component)\n * @param {Record<string, any>} props - The element props\n * @returns {JSX.Element} The created DOM element or component result\n * @example\n * const div = jsx(\"div\", { className: \"card\", children: \"Hello\" });\n * const MyComponent = (props: { text: string }) => <div>{props.text}</div>;\n * const component = jsx(MyComponent, { text: \"Hello\" });\n */\nexport function jsx<P>(type: ElementType<P>, props: P & { children?: JSX.Element }): JSX.Element {\n  const { children, ...rest } = props || {};\n\n  // Handle function components\n  if (typeof type === \"function\") {\n    return type({ children, ...rest } as P & { children?: JSX.Element });\n  }\n\n  // Handle intrinsic elements (strings)\n  const element = document.createElement(type);\n\n  for (const key in rest) {\n    if (!Object.hasOwn(rest, key)) {\n      continue;\n    }\n    const value = (rest as Record<string, any>)[key];\n    applyProp(element, key, value);\n  }\n\n  if (children !== undefined && children !== null) {\n    applyChildren(element, children);\n  }\n\n  return element;\n}\n\n/**\n * Create a fragment (multiple children without wrapper)\n * @param {ElementType} type - The element type (string or function component)\n * @param {Record<string, any>} props - The element props\n * @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element\n * @example\n * const fragment = jsxs(\"fragment\", { children: [div1, div2] });\n * const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;\n * const component = jsxs(MyComponent, { items: [\"a\", \"b\"] });\n */\nexport function jsxs<P>(\n  type: ElementType<P>,\n  props: P & { children?: JSX.Element },\n): JSX.Element | (HTMLElement | Text | Comment)[] {\n  const { children, ...rest } = props || {};\n\n  // Handle function components\n  if (typeof type === \"function\") {\n    return type({ children, ...rest } as P & { children?: JSX.Element });\n  }\n\n  // Handle Fragment\n  if (type === \"fragment\" || type === \"Fragment\") {\n    if (Array.isArray(children)) {\n      return flattenChildren(children);\n    }\n    return children ?? null;\n  }\n\n  // Handle intrinsic elements (strings)\n  const element = document.createElement(type);\n\n  for (const key in rest) {\n    if (!Object.hasOwn(rest, key)) {\n      continue;\n    }\n    const value = (rest as Record<string, any>)[key];\n    applyProp(element, key, value);\n  }\n\n  if (children !== undefined && children !== null) {\n    applyChildren(element, children);\n  }\n\n  return element;\n}\n\n/**\n * Fragment component for multiple children\n */\nexport function Fragment(props: {\n  children?: JSX.Children;\n}): JSX.Element | (HTMLElement | Text | Comment)[] {\n  const { children } = props;\n  if (children == null) {\n    return null;\n  }\n  if (Array.isArray(children)) {\n    return flattenChildren(children);\n  }\n  if (typeof children === \"function\") {\n    const container = document.createDocumentFragment();\n    applyReactiveChild(container, children as () => any);\n    return container;\n  }\n  return children as JSX.Element;\n}\n\n/** @internal - Eager effect for DOM side effects (unlike memo which is lazy) */\nfunction effect(fn: () => void): void {\n  const computation: Computation<any> = {\n    _fn: () => {\n      fn();\n      return undefined;\n    },\n    _value: undefined,\n    _sources: null,\n    _sourceSlots: null,\n    _observers: null,\n    _observerSlots: null,\n    _owner: Owner,\n    _cleanups: null,\n    _context: null,\n    _suspense: null,\n    _user: true,\n    _pure: false,\n    _state: 0,\n    _updatedAt: null,\n  };\n  runComputation(computation);\n}\n\n/** @internal */\nfunction applyProp(element: HTMLElement, key: string, value: any): void {\n  if (value === undefined || value === null) {\n    return;\n  }\n\n  if (key.startsWith(\"on\") && typeof value === \"function\") {\n    const eventName = key.slice(2).toLowerCase();\n    element.addEventListener(eventName, value);\n  } else if (key === \"style\") {\n    if (typeof value === \"string\") {\n      element.style.cssText = value;\n    } else if (typeof value === \"object\") {\n      applyStyle(element, value);\n    } else if (typeof value === \"function\") {\n      applyReactiveStyle(element, value);\n    }\n  } else if (key === \"class\") {\n    element.className = String(value);\n  } else if (key === \"className\") {\n    element.className = String(value);\n  } else if (key === \"ref\" && typeof value === \"function\") {\n    tick(() => value(element));\n  } else if (typeof value === \"function\" && !key.startsWith(\"on\")) {\n    applyReactiveProp(element, key, value);\n  } else {\n    if (typeof value === \"boolean\") {\n      if (value) {\n        element.setAttribute(key, \"\");\n      }\n    } else {\n      element.setAttribute(key, String(value));\n    }\n  }\n}\n\n/** @internal */\nfunction applyStyle(element: HTMLElement, style: Record<string, any>): void {\n  for (const key in style) {\n    if (!Object.hasOwn(style, key)) {\n      continue;\n    }\n    const value = style[key];\n    if (value !== undefined && value !== null) {\n      const cssKey = camelToKebab(key);\n      (element.style as any)[cssKey] = String(value);\n    }\n  }\n}\n\n/** @internal */\nfunction applyReactiveStyle(element: HTMLElement, accessor: Accessor<Record<string, any>>): void {\n  effect(() => {\n    const style = accessor();\n    applyStyle(element, style);\n  });\n}\n\n/** @internal */\nfunction applyReactiveProp(element: HTMLElement, key: string, accessor: Accessor<any>): void {\n  effect(() => {\n    const value = accessor();\n    if (value === undefined || value === null) {\n      element.removeAttribute(key);\n    } else {\n      element.setAttribute(key, String(value));\n    }\n  });\n}\n\n/** @internal */\nfunction applyChildren(element: HTMLElement | DocumentFragment, children: JSX.Children): void {\n  if (Array.isArray(children)) {\n    for (let i = 0; i < children.length; i++) {\n      appendSingleChild(element, children[i]);\n    }\n  } else {\n    appendSingleChild(element, children);\n  }\n}\n\n/** @internal */\nfunction appendSingleChild(element: HTMLElement | DocumentFragment, child: any): void {\n  if (child === null || child === undefined || child === false) {\n    return;\n  }\n  if (Array.isArray(child)) {\n    for (let i = 0; i < child.length; i++) {\n      appendSingleChild(element, child[i]);\n    }\n  } else if (typeof child === \"function\") {\n    applyReactiveChild(element, child);\n  } else if (typeof child === \"string\" || typeof child === \"number\") {\n    element.appendChild(document.createTextNode(String(child)));\n  } else if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) {\n    element.appendChild(child);\n  } else if (child instanceof DocumentFragment) {\n    element.appendChild(child);\n  }\n}\n\n/** @internal */\nfunction applyReactiveChild(\n  element: HTMLElement | DocumentFragment,\n  accessor: Accessor<any>,\n): void {\n  const marker = document.createComment(\"\");\n  element.appendChild(marker);\n  let currentNodes: Node[] = [];\n\n  effect(() => {\n    const value = accessor();\n\n    // Remove old nodes\n    for (let i = 0; i < currentNodes.length; i++) {\n      const node = currentNodes[i]!;\n      if (node.parentNode) {\n        node.parentNode.removeChild(node);\n      }\n    }\n    currentNodes = [];\n\n    const insert = (node: Node) => {\n      marker.parentNode!.insertBefore(node, marker);\n      currentNodes.push(node);\n    };\n\n    if (value === null || value === undefined || value === false) {\n      // nothing to insert\n    } else if (Array.isArray(value)) {\n      for (let i = 0; i < value.length; i++) {\n        const item = value[i];\n        if (\n          item instanceof HTMLElement ||\n          item instanceof Text ||\n          item instanceof Comment ||\n          item instanceof DocumentFragment\n        ) {\n          insert(item);\n        } else if (typeof item === \"string\" || typeof item === \"number\") {\n          insert(document.createTextNode(String(item)));\n        } else if (Array.isArray(item)) {\n          const flat = flattenChildren(item);\n          for (let j = 0; j < flat.length; j++) {\n            insert(flat[j]!);\n          }\n        }\n      }\n    } else if (typeof value === \"string\" || typeof value === \"number\") {\n      insert(document.createTextNode(String(value)));\n    } else if (\n      value instanceof HTMLElement ||\n      value instanceof Text ||\n      value instanceof Comment ||\n      value instanceof DocumentFragment\n    ) {\n      insert(value);\n    }\n  });\n}\n\n/** @internal */\nfunction flattenChildren(children: JSX.Child[]): Array<HTMLElement | Text | Comment> {\n  const result: Array<HTMLElement | Text | Comment> = [];\n  for (let i = 0; i < children.length; i++) {\n    const child = children[i];\n    if (Array.isArray(child)) {\n      result.push(...flattenChildren(child));\n    } else if (child !== null && child !== undefined && child !== false) {\n      if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) {\n        result.push(child);\n      } else if (typeof child === \"string\" || typeof child === \"number\") {\n        result.push(document.createTextNode(String(child)));\n      }\n    }\n  }\n  return result;\n}\n\n/** @internal */\nfunction camelToKebab(str: string): string {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n}\n"],"mappings":"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"}

package/dist/jsx/element.d.cts

@@ -0,0 +1,48 @@
+import { JSX } from "../jsx.cjs";
+
+//#region src/jsx/element.d.ts
+/**
+ * Function component type
+ */
+type FunctionComponent<P = {}> = (props: P & {
+  children?: JSX.Element;
+}) => JSX.Element;
+/**
+ * Element type - can be a string (intrinsic) or a function component
+ */
+type ElementType<P = {}> = string | FunctionComponent<P>;
+/**
+ * Create a real DOM element from JSX props
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @returns {JSX.Element} The created DOM element or component result
+ * @example
+ * const div = jsx("div", { className: "card", children: "Hello" });
+ * const MyComponent = (props: { text: string }) => <div>{props.text}</div>;
+ * const component = jsx(MyComponent, { text: "Hello" });
+ */
+declare function jsx<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}): JSX.Element;
+/**
+ * Create a fragment (multiple children without wrapper)
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element
+ * @example
+ * const fragment = jsxs("fragment", { children: [div1, div2] });
+ * const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;
+ * const component = jsxs(MyComponent, { items: ["a", "b"] });
+ */
+declare function jsxs<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}): JSX.Element | (HTMLElement | Text | Comment)[];
+/**
+ * Fragment component for multiple children
+ */
+declare function Fragment(props: {
+  children?: JSX.Children;
+}): JSX.Element | (HTMLElement | Text | Comment)[];
+//#endregion
+export { ElementType, Fragment, FunctionComponent, jsx, jsxs };
+//# sourceMappingURL=element.d.cts.map

package/dist/jsx/element.d.mts

@@ -0,0 +1,48 @@
+import { JSX } from "../jsx.mjs";
+
+//#region src/jsx/element.d.ts
+/**
+ * Function component type
+ */
+type FunctionComponent<P = {}> = (props: P & {
+  children?: JSX.Element;
+}) => JSX.Element;
+/**
+ * Element type - can be a string (intrinsic) or a function component
+ */
+type ElementType<P = {}> = string | FunctionComponent<P>;
+/**
+ * Create a real DOM element from JSX props
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @returns {JSX.Element} The created DOM element or component result
+ * @example
+ * const div = jsx("div", { className: "card", children: "Hello" });
+ * const MyComponent = (props: { text: string }) => <div>{props.text}</div>;
+ * const component = jsx(MyComponent, { text: "Hello" });
+ */
+declare function jsx<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}): JSX.Element;
+/**
+ * Create a fragment (multiple children without wrapper)
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element
+ * @example
+ * const fragment = jsxs("fragment", { children: [div1, div2] });
+ * const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;
+ * const component = jsxs(MyComponent, { items: ["a", "b"] });
+ */
+declare function jsxs<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}): JSX.Element | (HTMLElement | Text | Comment)[];
+/**
+ * Fragment component for multiple children
+ */
+declare function Fragment(props: {
+  children?: JSX.Children;
+}): JSX.Element | (HTMLElement | Text | Comment)[];
+//#endregion
+export { ElementType, Fragment, FunctionComponent, jsx, jsxs };
+//# sourceMappingURL=element.d.mts.map

package/dist/jsx/element.mjs

@@ -0,0 +1,199 @@
+import { Owner, runComputation } from "../signal/signal.mjs";
+import { tick } from "../scheduler/scheduler.mjs";
+//#region src/jsx/element.ts
+/**
+* Create a real DOM element from JSX props
+* @param {ElementType} type - The element type (string or function component)
+* @param {Record<string, any>} props - The element props
+* @returns {JSX.Element} The created DOM element or component result
+* @example
+* const div = jsx("div", { className: "card", children: "Hello" });
+* const MyComponent = (props: { text: string }) => <div>{props.text}</div>;
+* const component = jsx(MyComponent, { text: "Hello" });
+*/
+function jsx(type, props) {
+	const { children, ...rest } = props || {};
+	if (typeof type === "function") return type({
+		children,
+		...rest
+	});
+	const element = document.createElement(type);
+	for (const key in rest) {
+		if (!Object.hasOwn(rest, key)) continue;
+		const value = rest[key];
+		applyProp(element, key, value);
+	}
+	if (children !== void 0 && children !== null) applyChildren(element, children);
+	return element;
+}
+/**
+* Create a fragment (multiple children without wrapper)
+* @param {ElementType} type - The element type (string or function component)
+* @param {Record<string, any>} props - The element props
+* @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element
+* @example
+* const fragment = jsxs("fragment", { children: [div1, div2] });
+* const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;
+* const component = jsxs(MyComponent, { items: ["a", "b"] });
+*/
+function jsxs(type, props) {
+	const { children, ...rest } = props || {};
+	if (typeof type === "function") return type({
+		children,
+		...rest
+	});
+	if (type === "fragment" || type === "Fragment") {
+		if (Array.isArray(children)) return flattenChildren(children);
+		return children ?? null;
+	}
+	const element = document.createElement(type);
+	for (const key in rest) {
+		if (!Object.hasOwn(rest, key)) continue;
+		const value = rest[key];
+		applyProp(element, key, value);
+	}
+	if (children !== void 0 && children !== null) applyChildren(element, children);
+	return element;
+}
+/**
+* Fragment component for multiple children
+*/
+function Fragment(props) {
+	const { children } = props;
+	if (children == null) return null;
+	if (Array.isArray(children)) return flattenChildren(children);
+	if (typeof children === "function") {
+		const container = document.createDocumentFragment();
+		applyReactiveChild(container, children);
+		return container;
+	}
+	return children;
+}
+/** @internal - Eager effect for DOM side effects (unlike memo which is lazy) */
+function effect(fn) {
+	runComputation({
+		_fn: () => {
+			fn();
+		},
+		_value: void 0,
+		_sources: null,
+		_sourceSlots: null,
+		_observers: null,
+		_observerSlots: null,
+		_owner: Owner,
+		_cleanups: null,
+		_context: null,
+		_suspense: null,
+		_user: true,
+		_pure: false,
+		_state: 0,
+		_updatedAt: null
+	});
+}
+/** @internal */
+function applyProp(element, key, value) {
+	if (value === void 0 || value === null) return;
+	if (key.startsWith("on") && typeof value === "function") {
+		const eventName = key.slice(2).toLowerCase();
+		element.addEventListener(eventName, value);
+	} else if (key === "style") {
+		if (typeof value === "string") element.style.cssText = value;
+		else if (typeof value === "object") applyStyle(element, value);
+		else if (typeof value === "function") applyReactiveStyle(element, value);
+	} else if (key === "class") element.className = String(value);
+	else if (key === "className") element.className = String(value);
+	else if (key === "ref" && typeof value === "function") tick(() => value(element));
+	else if (typeof value === "function" && !key.startsWith("on")) applyReactiveProp(element, key, value);
+	else if (typeof value === "boolean") {
+		if (value) element.setAttribute(key, "");
+	} else element.setAttribute(key, String(value));
+}
+/** @internal */
+function applyStyle(element, style) {
+	for (const key in style) {
+		if (!Object.hasOwn(style, key)) continue;
+		const value = style[key];
+		if (value !== void 0 && value !== null) {
+			const cssKey = camelToKebab(key);
+			element.style[cssKey] = String(value);
+		}
+	}
+}
+/** @internal */
+function applyReactiveStyle(element, accessor) {
+	effect(() => {
+		applyStyle(element, accessor());
+	});
+}
+/** @internal */
+function applyReactiveProp(element, key, accessor) {
+	effect(() => {
+		const value = accessor();
+		if (value === void 0 || value === null) element.removeAttribute(key);
+		else element.setAttribute(key, String(value));
+	});
+}
+/** @internal */
+function applyChildren(element, children) {
+	if (Array.isArray(children)) for (let i = 0; i < children.length; i++) appendSingleChild(element, children[i]);
+	else appendSingleChild(element, children);
+}
+/** @internal */
+function appendSingleChild(element, child) {
+	if (child === null || child === void 0 || child === false) return;
+	if (Array.isArray(child)) for (let i = 0; i < child.length; i++) appendSingleChild(element, child[i]);
+	else if (typeof child === "function") applyReactiveChild(element, child);
+	else if (typeof child === "string" || typeof child === "number") element.appendChild(document.createTextNode(String(child)));
+	else if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) element.appendChild(child);
+	else if (child instanceof DocumentFragment) element.appendChild(child);
+}
+/** @internal */
+function applyReactiveChild(element, accessor) {
+	const marker = document.createComment("");
+	element.appendChild(marker);
+	let currentNodes = [];
+	effect(() => {
+		const value = accessor();
+		for (let i = 0; i < currentNodes.length; i++) {
+			const node = currentNodes[i];
+			if (node.parentNode) node.parentNode.removeChild(node);
+		}
+		currentNodes = [];
+		const insert = (node) => {
+			marker.parentNode.insertBefore(node, marker);
+			currentNodes.push(node);
+		};
+		if (value === null || value === void 0 || value === false) {} else if (Array.isArray(value)) for (let i = 0; i < value.length; i++) {
+			const item = value[i];
+			if (item instanceof HTMLElement || item instanceof Text || item instanceof Comment || item instanceof DocumentFragment) insert(item);
+			else if (typeof item === "string" || typeof item === "number") insert(document.createTextNode(String(item)));
+			else if (Array.isArray(item)) {
+				const flat = flattenChildren(item);
+				for (let j = 0; j < flat.length; j++) insert(flat[j]);
+			}
+		}
+		else if (typeof value === "string" || typeof value === "number") insert(document.createTextNode(String(value)));
+		else if (value instanceof HTMLElement || value instanceof Text || value instanceof Comment || value instanceof DocumentFragment) insert(value);
+	});
+}
+/** @internal */
+function flattenChildren(children) {
+	const result = [];
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (Array.isArray(child)) result.push(...flattenChildren(child));
+		else if (child !== null && child !== void 0 && child !== false) {
+			if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) result.push(child);
+			else if (typeof child === "string" || typeof child === "number") result.push(document.createTextNode(String(child)));
+		}
+	}
+	return result;
+}
+/** @internal */
+function camelToKebab(str) {
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+//#endregion
+export { Fragment, jsx, jsxs };
+
+//# sourceMappingURL=element.mjs.map

package/dist/jsx/element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.mjs","names":[],"sources":["../../src/jsx/element.ts"],"sourcesContent":["/**\n * JSX element creation for @hedystia/view\n *\n * Creates real DOM nodes directly from JSX, no Virtual DOM.\n * Supports both intrinsic elements (strings) and functional components.\n */\n\nimport type { JSX } from \"../jsx.d\";\nimport { tick } from \"../scheduler\";\nimport { Owner, runComputation } from \"../signal\";\nimport type { Accessor, Computation } from \"../types\";\n\n/**\n * Function component type\n */\nexport type FunctionComponent<P = {}> = (props: P & { children?: JSX.Element }) => JSX.Element;\n\n/**\n * Element type - can be a string (intrinsic) or a function component\n */\nexport type ElementType<P = {}> = string | FunctionComponent<P>;\n\n/**\n * Create a real DOM element from JSX props\n * @param {ElementType} type - The element type (string or function component)\n * @param {Record<string, any>} props - The element props\n * @returns {JSX.Element} The created DOM element or component result\n * @example\n * const div = jsx(\"div\", { className: \"card\", children: \"Hello\" });\n * const MyComponent = (props: { text: string }) => <div>{props.text}</div>;\n * const component = jsx(MyComponent, { text: \"Hello\" });\n */\nexport function jsx<P>(type: ElementType<P>, props: P & { children?: JSX.Element }): JSX.Element {\n  const { children, ...rest } = props || {};\n\n  // Handle function components\n  if (typeof type === \"function\") {\n    return type({ children, ...rest } as P & { children?: JSX.Element });\n  }\n\n  // Handle intrinsic elements (strings)\n  const element = document.createElement(type);\n\n  for (const key in rest) {\n    if (!Object.hasOwn(rest, key)) {\n      continue;\n    }\n    const value = (rest as Record<string, any>)[key];\n    applyProp(element, key, value);\n  }\n\n  if (children !== undefined && children !== null) {\n    applyChildren(element, children);\n  }\n\n  return element;\n}\n\n/**\n * Create a fragment (multiple children without wrapper)\n * @param {ElementType} type - The element type (string or function component)\n * @param {Record<string, any>} props - The element props\n * @returns {JSX.Element | (HTMLElement | Text | Comment)[]} The fragment children or element\n * @example\n * const fragment = jsxs(\"fragment\", { children: [div1, div2] });\n * const MyComponent = (props: { items: string[] }) => <>{props.items.map(item => <span>{item}</span>)}</>;\n * const component = jsxs(MyComponent, { items: [\"a\", \"b\"] });\n */\nexport function jsxs<P>(\n  type: ElementType<P>,\n  props: P & { children?: JSX.Element },\n): JSX.Element | (HTMLElement | Text | Comment)[] {\n  const { children, ...rest } = props || {};\n\n  // Handle function components\n  if (typeof type === \"function\") {\n    return type({ children, ...rest } as P & { children?: JSX.Element });\n  }\n\n  // Handle Fragment\n  if (type === \"fragment\" || type === \"Fragment\") {\n    if (Array.isArray(children)) {\n      return flattenChildren(children);\n    }\n    return children ?? null;\n  }\n\n  // Handle intrinsic elements (strings)\n  const element = document.createElement(type);\n\n  for (const key in rest) {\n    if (!Object.hasOwn(rest, key)) {\n      continue;\n    }\n    const value = (rest as Record<string, any>)[key];\n    applyProp(element, key, value);\n  }\n\n  if (children !== undefined && children !== null) {\n    applyChildren(element, children);\n  }\n\n  return element;\n}\n\n/**\n * Fragment component for multiple children\n */\nexport function Fragment(props: {\n  children?: JSX.Children;\n}): JSX.Element | (HTMLElement | Text | Comment)[] {\n  const { children } = props;\n  if (children == null) {\n    return null;\n  }\n  if (Array.isArray(children)) {\n    return flattenChildren(children);\n  }\n  if (typeof children === \"function\") {\n    const container = document.createDocumentFragment();\n    applyReactiveChild(container, children as () => any);\n    return container;\n  }\n  return children as JSX.Element;\n}\n\n/** @internal - Eager effect for DOM side effects (unlike memo which is lazy) */\nfunction effect(fn: () => void): void {\n  const computation: Computation<any> = {\n    _fn: () => {\n      fn();\n      return undefined;\n    },\n    _value: undefined,\n    _sources: null,\n    _sourceSlots: null,\n    _observers: null,\n    _observerSlots: null,\n    _owner: Owner,\n    _cleanups: null,\n    _context: null,\n    _suspense: null,\n    _user: true,\n    _pure: false,\n    _state: 0,\n    _updatedAt: null,\n  };\n  runComputation(computation);\n}\n\n/** @internal */\nfunction applyProp(element: HTMLElement, key: string, value: any): void {\n  if (value === undefined || value === null) {\n    return;\n  }\n\n  if (key.startsWith(\"on\") && typeof value === \"function\") {\n    const eventName = key.slice(2).toLowerCase();\n    element.addEventListener(eventName, value);\n  } else if (key === \"style\") {\n    if (typeof value === \"string\") {\n      element.style.cssText = value;\n    } else if (typeof value === \"object\") {\n      applyStyle(element, value);\n    } else if (typeof value === \"function\") {\n      applyReactiveStyle(element, value);\n    }\n  } else if (key === \"class\") {\n    element.className = String(value);\n  } else if (key === \"className\") {\n    element.className = String(value);\n  } else if (key === \"ref\" && typeof value === \"function\") {\n    tick(() => value(element));\n  } else if (typeof value === \"function\" && !key.startsWith(\"on\")) {\n    applyReactiveProp(element, key, value);\n  } else {\n    if (typeof value === \"boolean\") {\n      if (value) {\n        element.setAttribute(key, \"\");\n      }\n    } else {\n      element.setAttribute(key, String(value));\n    }\n  }\n}\n\n/** @internal */\nfunction applyStyle(element: HTMLElement, style: Record<string, any>): void {\n  for (const key in style) {\n    if (!Object.hasOwn(style, key)) {\n      continue;\n    }\n    const value = style[key];\n    if (value !== undefined && value !== null) {\n      const cssKey = camelToKebab(key);\n      (element.style as any)[cssKey] = String(value);\n    }\n  }\n}\n\n/** @internal */\nfunction applyReactiveStyle(element: HTMLElement, accessor: Accessor<Record<string, any>>): void {\n  effect(() => {\n    const style = accessor();\n    applyStyle(element, style);\n  });\n}\n\n/** @internal */\nfunction applyReactiveProp(element: HTMLElement, key: string, accessor: Accessor<any>): void {\n  effect(() => {\n    const value = accessor();\n    if (value === undefined || value === null) {\n      element.removeAttribute(key);\n    } else {\n      element.setAttribute(key, String(value));\n    }\n  });\n}\n\n/** @internal */\nfunction applyChildren(element: HTMLElement | DocumentFragment, children: JSX.Children): void {\n  if (Array.isArray(children)) {\n    for (let i = 0; i < children.length; i++) {\n      appendSingleChild(element, children[i]);\n    }\n  } else {\n    appendSingleChild(element, children);\n  }\n}\n\n/** @internal */\nfunction appendSingleChild(element: HTMLElement | DocumentFragment, child: any): void {\n  if (child === null || child === undefined || child === false) {\n    return;\n  }\n  if (Array.isArray(child)) {\n    for (let i = 0; i < child.length; i++) {\n      appendSingleChild(element, child[i]);\n    }\n  } else if (typeof child === \"function\") {\n    applyReactiveChild(element, child);\n  } else if (typeof child === \"string\" || typeof child === \"number\") {\n    element.appendChild(document.createTextNode(String(child)));\n  } else if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) {\n    element.appendChild(child);\n  } else if (child instanceof DocumentFragment) {\n    element.appendChild(child);\n  }\n}\n\n/** @internal */\nfunction applyReactiveChild(\n  element: HTMLElement | DocumentFragment,\n  accessor: Accessor<any>,\n): void {\n  const marker = document.createComment(\"\");\n  element.appendChild(marker);\n  let currentNodes: Node[] = [];\n\n  effect(() => {\n    const value = accessor();\n\n    // Remove old nodes\n    for (let i = 0; i < currentNodes.length; i++) {\n      const node = currentNodes[i]!;\n      if (node.parentNode) {\n        node.parentNode.removeChild(node);\n      }\n    }\n    currentNodes = [];\n\n    const insert = (node: Node) => {\n      marker.parentNode!.insertBefore(node, marker);\n      currentNodes.push(node);\n    };\n\n    if (value === null || value === undefined || value === false) {\n      // nothing to insert\n    } else if (Array.isArray(value)) {\n      for (let i = 0; i < value.length; i++) {\n        const item = value[i];\n        if (\n          item instanceof HTMLElement ||\n          item instanceof Text ||\n          item instanceof Comment ||\n          item instanceof DocumentFragment\n        ) {\n          insert(item);\n        } else if (typeof item === \"string\" || typeof item === \"number\") {\n          insert(document.createTextNode(String(item)));\n        } else if (Array.isArray(item)) {\n          const flat = flattenChildren(item);\n          for (let j = 0; j < flat.length; j++) {\n            insert(flat[j]!);\n          }\n        }\n      }\n    } else if (typeof value === \"string\" || typeof value === \"number\") {\n      insert(document.createTextNode(String(value)));\n    } else if (\n      value instanceof HTMLElement ||\n      value instanceof Text ||\n      value instanceof Comment ||\n      value instanceof DocumentFragment\n    ) {\n      insert(value);\n    }\n  });\n}\n\n/** @internal */\nfunction flattenChildren(children: JSX.Child[]): Array<HTMLElement | Text | Comment> {\n  const result: Array<HTMLElement | Text | Comment> = [];\n  for (let i = 0; i < children.length; i++) {\n    const child = children[i];\n    if (Array.isArray(child)) {\n      result.push(...flattenChildren(child));\n    } else if (child !== null && child !== undefined && child !== false) {\n      if (child instanceof HTMLElement || child instanceof Text || child instanceof Comment) {\n        result.push(child);\n      } else if (typeof child === \"string\" || typeof child === \"number\") {\n        result.push(document.createTextNode(String(child)));\n      }\n    }\n  }\n  return result;\n}\n\n/** @internal */\nfunction camelToKebab(str: string): string {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n}\n"],"mappings":"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"}

package/dist/jsx-dev-runtime.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_element = require("./jsx/element.cjs");
+//#region src/jsx-dev-runtime.ts
+/**
+* Development JSX runtime for @hedystia/view
+*
+* Provides jsxDEV with source location info for better error messages.
+* Re-exports jsx, jsxs, and Fragment from production runtime.
+*/
+/**
+* Development JSX element creator with source info
+* @param {ElementType} type - The element type (string or function component)
+* @param {Record<string, any>} props - The element props
+* @param {string} [key] - The element key
+* @param {boolean} [isStaticChildren] - Whether children are static
+* @param {string} [sourceFileName] - The source file name
+* @param {number} [sourceLineNumber] - The source line number
+* @param {number} [sourceColumnNumber] - The source column number
+* @returns {JSX.Element} The created DOM element or component result
+*/
+function jsxDEV(type, props, _key, _isStaticChildren, sourceFileName, sourceLineNumber, sourceColumnNumber) {
+	if (typeof window !== "undefined" && window.__DEV__ === true) {
+		const location = sourceFileName && sourceLineNumber ? ` at ${sourceFileName}:${sourceLineNumber}:${sourceColumnNumber || 0}` : "";
+		try {
+			return require_element.jsx(type, props);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const typeName = typeof type === "string" ? `<${type}>` : type.name || "Component";
+			throw new Error(`jsxDEV error for ${typeName}${location}: ${message}`);
+		}
+	}
+	return require_element.jsx(type, props);
+}
+//#endregion
+exports.Fragment = require_element.Fragment;
+exports.jsx = require_element.jsx;
+exports.jsxDEV = jsxDEV;
+exports.jsxs = require_element.jsxs;
+
+//# sourceMappingURL=jsx-dev-runtime.cjs.map

package/dist/jsx-dev-runtime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.cjs","names":["jsx"],"sources":["../src/jsx-dev-runtime.ts"],"sourcesContent":["/**\n * Development JSX runtime for @hedystia/view\n *\n * Provides jsxDEV with source location info for better error messages.\n * Re-exports jsx, jsxs, and Fragment from production runtime.\n */\n\nimport { type ElementType, Fragment, type FunctionComponent, jsx, jsxs } from \"./jsx/element\";\nimport type { JSX } from \"./jsx.d\";\n\n/**\n * Development JSX element creator with source info\n * @param {ElementType} type - The element type (string or function component)\n * @param {Record<string, any>} props - The element props\n * @param {string} [key] - The element key\n * @param {boolean} [isStaticChildren] - Whether children are static\n * @param {string} [sourceFileName] - The source file name\n * @param {number} [sourceLineNumber] - The source line number\n * @param {number} [sourceColumnNumber] - The source column number\n * @returns {JSX.Element} The created DOM element or component result\n */\nexport function jsxDEV<P>(\n  type: ElementType<P>,\n  props: P & { children?: JSX.Element },\n  _key?: string,\n  _isStaticChildren?: boolean,\n  sourceFileName?: string,\n  sourceLineNumber?: number,\n  sourceColumnNumber?: number,\n): JSX.Element {\n  const isDev = typeof window !== \"undefined\" && (window as any).__DEV__ === true;\n\n  if (isDev) {\n    const location =\n      sourceFileName && sourceLineNumber\n        ? ` at ${sourceFileName}:${sourceLineNumber}:${sourceColumnNumber || 0}`\n        : \"\";\n\n    try {\n      return jsx(type, props);\n    } catch (error) {\n      const message = error instanceof Error ? error.message : String(error);\n      const typeName = typeof type === \"string\" ? `<${type}>` : type.name || \"Component\";\n      throw new Error(`jsxDEV error for ${typeName}${location}: ${message}`);\n    }\n  }\n\n  return jsx(type, props);\n}\n\nexport type { ElementType, FunctionComponent, JSX };\nexport { Fragment, jsx, jsxs };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,OACd,MACA,OACA,MACA,mBACA,gBACA,kBACA,oBACa;AAGb,KAFc,OAAO,WAAW,eAAgB,OAAe,YAAY,MAEhE;EACT,MAAM,WACJ,kBAAkB,mBACd,OAAO,eAAe,GAAG,iBAAiB,GAAG,sBAAsB,MACnE;AAEN,MAAI;AACF,UAAOA,gBAAAA,IAAI,MAAM,MAAM;WAChB,OAAO;GACd,MAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM;GACtE,MAAM,WAAW,OAAO,SAAS,WAAW,IAAI,KAAK,KAAK,KAAK,QAAQ;AACvE,SAAM,IAAI,MAAM,oBAAoB,WAAW,SAAS,IAAI,UAAU;;;AAI1E,QAAOA,gBAAAA,IAAI,MAAM,MAAM"}

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

@@ -0,0 +1,21 @@
+import { JSX } from "./jsx.cjs";
+import { ElementType, Fragment, FunctionComponent, jsx, jsxs } from "./jsx/element.cjs";
+
+//#region src/jsx-dev-runtime.d.ts
+/**
+ * Development JSX element creator with source info
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @param {string} [key] - The element key
+ * @param {boolean} [isStaticChildren] - Whether children are static
+ * @param {string} [sourceFileName] - The source file name
+ * @param {number} [sourceLineNumber] - The source line number
+ * @param {number} [sourceColumnNumber] - The source column number
+ * @returns {JSX.Element} The created DOM element or component result
+ */
+declare function jsxDEV<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}, _key?: string, _isStaticChildren?: boolean, sourceFileName?: string, sourceLineNumber?: number, sourceColumnNumber?: number): JSX.Element;
+//#endregion
+export { type ElementType, Fragment, type FunctionComponent, type JSX, jsx, jsxDEV, jsxs };
+//# sourceMappingURL=jsx-dev-runtime.d.cts.map

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

@@ -0,0 +1,21 @@
+import { JSX } from "./jsx.mjs";
+import { ElementType, Fragment, FunctionComponent, jsx, jsxs } from "./jsx/element.mjs";
+
+//#region src/jsx-dev-runtime.d.ts
+/**
+ * Development JSX element creator with source info
+ * @param {ElementType} type - The element type (string or function component)
+ * @param {Record<string, any>} props - The element props
+ * @param {string} [key] - The element key
+ * @param {boolean} [isStaticChildren] - Whether children are static
+ * @param {string} [sourceFileName] - The source file name
+ * @param {number} [sourceLineNumber] - The source line number
+ * @param {number} [sourceColumnNumber] - The source column number
+ * @returns {JSX.Element} The created DOM element or component result
+ */
+declare function jsxDEV<P>(type: ElementType<P>, props: P & {
+  children?: JSX.Element;
+}, _key?: string, _isStaticChildren?: boolean, sourceFileName?: string, sourceLineNumber?: number, sourceColumnNumber?: number): JSX.Element;
+//#endregion
+export { type ElementType, Fragment, type FunctionComponent, type JSX, jsx, jsxDEV, jsxs };
+//# sourceMappingURL=jsx-dev-runtime.d.mts.map