🔤

README.md

@@ -115,8 +115,8 @@ format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation s
 
 ### Documentation
 
-- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el): WIP
-- [Examples](./examples/): TBD/WIP
+- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el)
+- [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html)
 
 ## Understanding Signals
 
@@ -129,10 +129,17 @@ Signals are the reactive backbone of Deka DOM Elements:
 
 ## Inspiration and Alternatives
 
-- [vanjs-org/van](https://github.com/vanjs-org/van) - World's smallest reactive UI framework
-- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming
-- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript
-- [potch/signals](https://github.com/potch/signals) - A small reactive signals library
-- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) -
+- [vanjs-org/van](https://github.com/vanjs-org/van) — World's smallest reactive UI framework
+- [adamhaile/S](https://github.com/adamhaile/S) — Simple, clean, fast reactive programming
+- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) — Create HyperText with JavaScript
+- [potch/signals](https://github.com/potch/signals) — A small reactive signals library
+- [AseasRoa/paintor](https://github.com/AseasRoa/paintor) - JavaScript library for building reactive client-side user
+	interfaces or HTML code.
+- [pota](https://pota.quack.uy/) — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html
+	function, and a optimized babel preset in case you fancy JSX.
+- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) —
 	Functional DOM components without JSX/virtual DOM
-- [mxjp/rvx: A signal based frontend framework](https://github.com/mxjp/rvx)
+- [TarekRaafat/eleva](https://github.com/TarekRaafat/eleva) — A minimalist, lightweight, pure vanilla JavaScript
+	frontend runtime framework.
+- [didi/mpx](https://github.com/didi/mpx) — Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
+- [mxjp/rvx](https://github.com/mxjp/rvx) — A signal based frontend framework

dist/esm-with-signals.js

@@ -435,7 +435,8 @@ function createElement(tag, attributes, ...addons) {
 	const s = signals(this);
 	let scoped = 0;
 	let el, el_host;
-	if (Object(attributes) !== attributes || s.isSignal(attributes))
+	const att_type = typeof attributes;
+	if (att_type === "string" || att_type === "number" || s.isSignal(attributes))
 		attributes = { textContent: attributes };
 	switch (true) {
 		case typeof tag === "function": {
@@ -688,19 +689,19 @@ memo.scope = function memoScope(fun, { signal: signal2, onlyLast } = {}) {
 // src/signals-lib/helpers.js
 var mark = "__dde_signal";
 var queueSignalWrite = /* @__PURE__ */ (() => {
-	let pendingSignals = /* @__PURE__ */ new Set();
+	let pendingSignals = /* @__PURE__ */ new Map();
 	let scheduled = false;
 	function flushSignals() {
 		scheduled = false;
 		const todo = pendingSignals;
-		pendingSignals = /* @__PURE__ */ new Set();
-		for (const signal2 of todo) {
+		pendingSignals = /* @__PURE__ */ new Map();
+		for (const [signal2, force] of todo) {
 			const M = signal2[mark];
-			if (M) M.listeners.forEach((l) => l(M.value));
+			if (M) M.listeners.forEach((l) => l(M.value, force));
 		}
 	}
-	return function(s) {
-		pendingSignals.add(s);
+	return function(s, force = false) {
+		pendingSignals.set(s, pendingSignals.get(s) || force);
 		if (scheduled) return;
 		scheduled = true;
 		queueMicrotask(flushSignals);
@@ -737,11 +738,11 @@ function signal(value, actions) {
 		return create(false, value, actions);
 	if (isSignal(value)) return value;
 	const out = create(true);
-	function contextReWatch() {
+	function contextReWatch(_, force) {
 		const [origin, ...deps_old] = deps.get(contextReWatch);
 		deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
 		stack_watch.push(contextReWatch);
-		write(out, value());
+		write(out, value(), force);
 		stack_watch.pop();
 		if (!deps_old.length) return;
 		const deps_curr = deps.get(contextReWatch);
@@ -763,7 +764,7 @@ signal.action = function(s, name, ...a) {
 		throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
 	actions[name].apply(M, a);
 	if (M.skip) return delete M.skip;
-	queueSignalWrite(s);
+	queueSignalWrite(s, true);
 };
 signal.on = function on2(s, listener, options = {}) {
 	const { signal: as } = options;
@@ -972,7 +973,7 @@ function write(s, value, force) {
 	const M = s[mark];
 	if (!M || !force && M.value === value) return;
 	M.value = value;
-	queueSignalWrite(s);
+	queueSignalWrite(s, force);
 	return value;
 }
 function addSignalListener(s, listener) {

dist/esm.js

@@ -406,7 +406,8 @@ function createElement(tag, attributes, ...addons) {
 	const s = signals(this);
 	let scoped = 0;
 	let el, el_host;
-	if (Object(attributes) !== attributes || s.isSignal(attributes))
+	const att_type = typeof attributes;
+	if (att_type === "string" || att_type === "number" || s.isSignal(attributes))
 		attributes = { textContent: attributes };
 	switch (true) {
 		case typeof tag === "function": {

dist/iife-with-signals.js

@@ -480,7 +480,8 @@ var DDE = (() => {
 		const s = signals(this);
 		let scoped = 0;
 		let el, el_host;
-		if (Object(attributes) !== attributes || s.isSignal(attributes))
+		const att_type = typeof attributes;
+		if (att_type === "string" || att_type === "number" || s.isSignal(attributes))
 			attributes = { textContent: attributes };
 		switch (true) {
 			case typeof tag === "function": {
@@ -733,19 +734,19 @@ var DDE = (() => {
 	// src/signals-lib/helpers.js
 	var mark = "__dde_signal";
 	var queueSignalWrite = /* @__PURE__ */ (() => {
-		let pendingSignals = /* @__PURE__ */ new Set();
+		let pendingSignals = /* @__PURE__ */ new Map();
 		let scheduled = false;
 		function flushSignals() {
 			scheduled = false;
 			const todo = pendingSignals;
-			pendingSignals = /* @__PURE__ */ new Set();
-			for (const signal2 of todo) {
+			pendingSignals = /* @__PURE__ */ new Map();
+			for (const [signal2, force] of todo) {
 				const M = signal2[mark];
-				if (M) M.listeners.forEach((l) => l(M.value));
+				if (M) M.listeners.forEach((l) => l(M.value, force));
 			}
 		}
-		return function(s) {
-			pendingSignals.add(s);
+		return function(s, force = false) {
+			pendingSignals.set(s, pendingSignals.get(s) || force);
 			if (scheduled) return;
 			scheduled = true;
 			queueMicrotask(flushSignals);
@@ -782,11 +783,11 @@ var DDE = (() => {
 			return create(false, value, actions);
 		if (isSignal(value)) return value;
 		const out = create(true);
-		function contextReWatch() {
+		function contextReWatch(_, force) {
 			const [origin, ...deps_old] = deps.get(contextReWatch);
 			deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
 			stack_watch.push(contextReWatch);
-			write(out, value());
+			write(out, value(), force);
 			stack_watch.pop();
 			if (!deps_old.length) return;
 			const deps_curr = deps.get(contextReWatch);
@@ -808,7 +809,7 @@ var DDE = (() => {
 			throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
 		actions[name].apply(M, a);
 		if (M.skip) return delete M.skip;
-		queueSignalWrite(s);
+		queueSignalWrite(s, true);
 	};
 	signal.on = function on2(s, listener, options = {}) {
 		const { signal: as } = options;
@@ -1017,7 +1018,7 @@ var DDE = (() => {
 		const M = s[mark];
 		if (!M || !force && M.value === value) return;
 		M.value = value;
-		queueSignalWrite(s);
+		queueSignalWrite(s, force);
 		return value;
 	}
 	function addSignalListener(s, listener) {

dist/iife.js

@@ -448,7 +448,8 @@ var DDE = (() => {
 		const s = signals(this);
 		let scoped = 0;
 		let el, el_host;
-		if (Object(attributes) !== attributes || s.isSignal(attributes))
+		const att_type = typeof attributes;
+		if (att_type === "string" || att_type === "number" || s.isSignal(attributes))
 			attributes = { textContent: attributes };
 		switch (true) {
 			case typeof tag === "function": {

docs/components/examples/case-studies/data-dashboard.js

@@ -0,0 +1,394 @@
+/**
+ * Case Study: Data Dashboard with Charts
+ *
+ * This example demonstrates:
+ * - Integration with a third-party charting library
+ * - Data fetching and state management
+ * - Responsive layout design
+ * - Multiple interactive components working together
+ */
+
+import { el, on } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+/**
+ * Data Dashboard Component with Chart Integration
+ * @returns {HTMLElement} Dashboard element
+ */
+export function DataDashboard() {
+	// Mock data for demonstration
+	const DATA = {
+		sales: [42, 58, 65, 49, 72, 85, 63, 70, 78, 89, 95, 86],
+		visitors: [1420, 1620, 1750, 1850, 2100, 2400, 2250, 2500, 2750, 2900, 3100, 3200],
+		conversion: [2.9, 3.5, 3.7, 2.6, 3.4, 3.5, 2.8, 2.8, 2.8, 3.1, 3.0, 2.7],
+		months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+	};
+
+	// Application state
+	const selectedYear = S(2024);
+	const selectedDataType = S(/** @type {'sales' | 'visitors' | 'conversion'} */ ('sales'));
+	const isLoading = S(false);
+	const error = S(null);
+
+	// Filter options
+	const years = [2022, 2023, 2024];
+	const dataTypes = [
+		{ id: 'sales', label: 'Sales', unit: 'K' },
+		{ id: 'visitors', label: 'Visitors', unit: '' },
+		{ id: 'conversion', label: 'Conversion Rate', unit: '%' }
+	];
+
+	// Computed values
+	const selectedData = S(() => {
+		return DATA[selectedDataType.get()];
+	});
+
+	const currentDataType = S(() => {
+		return dataTypes.find(type => type.id === selectedDataType.get());
+	});
+
+	const totalValue = S(() => {
+		const data = selectedData.get();
+		return data.reduce((sum, value) => sum + value, 0);
+	});
+
+	const averageValue = S(() => {
+		const data = selectedData.get();
+		return data.reduce((sum, value) => sum + value, 0) / data.length;
+	});
+
+	const highestValue = S(() => {
+		return Math.max(...selectedData.get());
+	});
+
+	// Event handlers
+	const onYearChange = on("change", e => {
+		selectedYear.set(parseInt(/** @type {HTMLSelectElement} */(e.target).value));
+		loadData();
+	});
+
+	const onDataTypeChange = on("click", e => {
+		const type = /** @type {'sales' | 'visitors' | 'conversion'} */(
+			/** @type {HTMLButtonElement} */(e.currentTarget).dataset.type);
+		selectedDataType.set(type);
+	});
+
+	// Simulate data loading
+	function loadData() {
+		isLoading.set(true);
+		error.set(null);
+
+		// Simulate API call
+		setTimeout(() => {
+			if (Math.random() > 0.9) {
+				// Simulate occasional error
+				error.set('Failed to load data. Please try again.');
+			}
+			isLoading.set(false);
+		}, 800);
+	}
+
+	// Reactive chart rendering
+	const chart = S(()=> {
+		const chart= el("canvas", { id: "chart-canvas", width: 800, height: 400 });
+		const ctx = chart.getContext('2d');
+		const data = selectedData.get();
+		const months = DATA.months;
+		const width = chart.width;
+		const height = chart.height;
+		const maxValue = Math.max(...data) * 1.1;
+		const barWidth = width / data.length - 10;
+
+		// Clear canvas
+		ctx.clearRect(0, 0, width, height);
+
+		// Draw background grid
+		ctx.beginPath();
+		ctx.strokeStyle = '#f0f0f0';
+		ctx.lineWidth = 1;
+		for(let i = 0; i < 5; i++) {
+			const y = height - (height * (i / 5)) - 30;
+			ctx.moveTo(50, y);
+			ctx.lineTo(width - 20, y);
+
+			// Draw grid labels
+			ctx.fillStyle = '#999';
+			ctx.font = '12px Arial';
+			ctx.fillText(Math.round(maxValue * (i / 5)), 20, y + 5);
+		}
+		ctx.stroke();
+
+		// Draw bars
+		data.forEach((value, index) => {
+			const x = index * (barWidth + 10) + 60;
+			const barHeight = (value / maxValue) * (height - 60);
+
+			// Bar
+			ctx.fillStyle = '#4a90e2';
+			ctx.fillRect(x, height - barHeight - 30, barWidth, barHeight);
+
+			// Month label
+			ctx.fillStyle = '#666';
+			ctx.font = '12px Arial';
+			ctx.fillText(months[index], x + barWidth/2 - 10, height - 10);
+		});
+
+		// Chart title
+		ctx.fillStyle = '#333';
+		ctx.font = 'bold 14px Arial';
+		ctx.fillText(`${currentDataType.get().label} (${selectedYear.get()})`, width/2 - 80, 20);
+		return chart;
+	});
+
+	return el("div", { className: "dashboard" }).append(
+		el("header", { className: "dashboard-header" }).append(
+			el("h1", "Sales Performance Dashboard"),
+			el("div", { className: "year-filter" }).append(
+				el("label", { htmlFor: "yearSelect", textContent: "Select Year:" }),
+				el("select", { id: "yearSelect" },
+					on.host(el=> el.value = selectedYear.get().toString()),
+					onYearChange
+				).append(
+					...years.map(year => el("option", { value: year, textContent: year }))
+				)
+			)
+		),
+
+		// Error message (only shown when there's an error)
+		S.el(error, errorMsg => !errorMsg
+			? el()
+			: el("div", { className: "error-message" }).append(
+					el("p", errorMsg),
+					el("button", { textContent: "Retry", type: "button" }, on("click", loadData)),
+				),
+		),
+
+		// Loading indicator
+		S.el(isLoading, loading => !loading
+			? el()
+			: el("div", { className: "loading-spinner" })
+		),
+
+		// Main dashboard content
+		el("div", { className: "dashboard-content" }).append(
+			// Metrics cards
+			el("div", { className: "metrics-container" }).append(
+				el("div", { className: "metric-card" }).append(
+					el("h3", "Total"),
+					el("#text", S(() => `${totalValue.get().toLocaleString()}${currentDataType.get().unit}`)),
+				),
+				el("div", { className: "metric-card" }).append(
+					el("h3", "Average"),
+					el("#text", S(() => `${averageValue.get().toFixed(1)}${currentDataType.get().unit}`)),
+				),
+				el("div", { className: "metric-card" }).append(
+					el("h3", "Highest"),
+					el("#text", S(() => `${highestValue.get()}${currentDataType.get().unit}`)),
+				),
+			),
+
+			// Data type selection tabs
+			el("div", { className: "data-type-tabs" }).append(
+				...dataTypes.map(type =>
+					el("button", {
+						type: "button",
+						className: S(() => selectedDataType.get() === type.id ? 'active' : ''),
+						dataType: type.id,
+						textContent: type.label
+					}, onDataTypeChange)
+				)
+			),
+
+			// Chart container
+			el("div", { className: "chart-container" }).append(
+				S.el(chart, chart => chart)
+			)
+		),
+	);
+}
+
+// Render the component
+document.body.append(
+	el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append(
+		el(DataDashboard)
+	),
+	el("style", `
+			.dashboard {
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+				max-width: 1000px;
+				margin: 0 auto;
+				padding: 1rem;
+				background: #fff;
+				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+				border-radius: 8px;
+			}
+
+			.dashboard-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 1.5rem;
+				padding-bottom: 1rem;
+				border-bottom: 1px solid #eee;
+			}
+
+			.dashboard-header h1 {
+				font-size: 1.5rem;
+				margin: 0;
+				color: #333;
+			}
+
+			.year-filter {
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+
+			.year-filter select {
+				padding: 0.5rem;
+				border: 1px solid #ddd;
+				border-radius: 4px;
+				font-size: 1rem;
+			}
+
+			.metrics-container {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				gap: 1rem;
+				margin-bottom: 1.5rem;
+			}
+
+			.metric-card {
+				background: #f9f9f9;
+				border-radius: 8px;
+				padding: 1rem;
+				text-align: center;
+				transition: transform 0.2s ease;
+			}
+
+			.metric-card:hover {
+				transform: translateY(-5px);
+				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+			}
+
+			.metric-card h3 {
+				margin-top: 0;
+				color: #666;
+				font-size: 0.9rem;
+				margin-bottom: 0.5rem;
+			}
+
+			.metric-card p {
+				font-size: 1.5rem;
+				font-weight: bold;
+				color: #333;
+				margin: 0;
+			}
+
+			.data-type-tabs {
+				display: flex;
+				border-bottom: 1px solid #eee;
+				margin-bottom: 1.5rem;
+			}
+
+			.data-type-tabs button {
+				background: none;
+				border: none;
+				padding: 0.75rem 1.5rem;
+				font-size: 1rem;
+				cursor: pointer;
+				color: #666;
+				position: relative;
+			}
+
+			.data-type-tabs button.active {
+				color: #4a90e2;
+				font-weight: 500;
+			}
+
+			.data-type-tabs button.active::after {
+				content: '';
+				position: absolute;
+				bottom: -1px;
+				left: 0;
+				width: 100%;
+				height: 3px;
+				background: #4a90e2;
+				border-radius: 3px 3px 0 0;
+			}
+
+			.chart-container {
+				background: #fff;
+				border-radius: 8px;
+				padding: 1rem;
+				margin-bottom: 1.5rem;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+			}
+
+			.loading-spinner {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100px;
+			}
+
+			.loading-spinner::before {
+				content: '';
+				width: 40px;
+				height: 40px;
+				border: 4px solid #f3f3f3;
+				border-top: 4px solid #4a90e2;
+				border-radius: 50%;
+				animation: spin 1s linear infinite;
+			}
+
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+
+			.error-message {
+				background: #ffecec;
+				color: #e74c3c;
+				padding: 1rem;
+				border-radius: 4px;
+				margin-bottom: 1.5rem;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.error-message p {
+				margin: 0;
+			}
+
+			.error-message button {
+				background: #e74c3c;
+				color: white;
+				border: none;
+				border-radius: 4px;
+				padding: 0.5rem 1rem;
+				cursor: pointer;
+			}
+
+			@media (max-width: 768px) {
+				.metrics-container {
+					grid-template-columns: 1fr;
+				}
+
+				.dashboard-header {
+					flex-direction: column;
+					align-items: flex-start;
+					gap: 1rem;
+				}
+
+				.year-filter {
+					width: 100%;
+				}
+
+				.year-filter select {
+					flex-grow: 1;
+				}
+			}
+		`)
+);

docs/components/examples/case-studies/image-gallery.js

@@ -0,0 +1,417 @@
+/**
+ * Case Study: Interactive Image Gallery
+ *
+ * This example demonstrates:
+ * - Dynamic loading of content
+ * - Lightbox functionality
+ * - Animation handling
+ * - Keyboard and gesture navigation
+ */
+
+import { el, memo, on } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+// Sample image data
+const imagesSample = (url=> [
+	{ id: 1, src: url+'nature', alt: 'Nature', title: 'Beautiful Landscape' },
+	{ id: 2, src: url+'places', alt: 'City', title: 'Urban Architecture' },
+	{ id: 3, src: url+'people', alt: 'People', title: 'Street Photography' },
+	{ id: 4, src: url+'food', alt: 'Food', title: 'Culinary Delights' },
+	{ id: 5, src: url+'animals', alt: 'Animals', title: 'Wildlife' },
+	{ id: 6, src: url+'travel', alt: 'Travel', title: 'Adventure Awaits' },
+	{ id: 7, src: url+'computer', alt: 'Technology', title: 'Modern Tech' },
+	{ id: 8, src: url+'music', alt: 'Art', title: 'Creative Expression' },
+])('https://api.algobook.info/v1/randomimage?category=');
+/**
+ * Interactive Image Gallery Component
+ * @returns {HTMLElement} Gallery element
+ */
+export function ImageGallery(images= imagesSample) {
+
+	// Application state
+	const selectedImageId = S(null);
+	const filterTag = S('all');
+	const imagesToDisplay = S(() => {
+		const tag = filterTag.get();
+		if (tag === 'all') return images;
+		else return images.filter(img => img.alt.toLowerCase() === tag);
+	})
+
+	// Derived state
+	const selectedImage = S(() => {
+		const id = selectedImageId.get();
+		return id ? images.find(img => img.id === id) : null;
+	});
+
+	const isLightboxOpen = S(() => selectedImage.get() !== null);
+
+	// Event handlers
+	const onImageClick = id => on("click", () => {
+		selectedImageId.set(id);
+		document.body.style.overflow = 'hidden'; // Prevent scrolling when lightbox is open
+
+		// Add keyboard event listeners when lightbox opens
+		document.addEventListener('keydown', handleKeyDown);
+	});
+	const closeLightbox = () => {
+		selectedImageId.set(null);
+		document.body.style.overflow = ''; // Restore scrolling
+
+		// Remove keyboard event listeners when lightbox closes
+		document.removeEventListener('keydown', handleKeyDown);
+	};
+	const onPrevImage = e => {
+		e.stopPropagation(); // Prevent closing the lightbox
+		const images = imagesToDisplay.get();
+		const currentId = selectedImageId.get();
+		const currentIndex = images.findIndex(img => img.id === currentId);
+		const prevIndex = (currentIndex - 1 + images.length) % images.length;
+		selectedImageId.set(images[prevIndex].id);
+	};
+	const onNextImage = e => {
+		e.stopPropagation(); // Prevent closing the lightbox
+		const images = imagesToDisplay.get();
+		const currentId = selectedImageId.get();
+		const currentIndex = images.findIndex(img => img.id === currentId);
+		const nextIndex = (currentIndex + 1) % images.length;
+		selectedImageId.set(images[nextIndex].id);
+	};
+	const onFilterChange = tag => on("click", () => {
+		filterTag.set(tag);
+	});
+
+	// Keyboard navigation handler
+	function handleKeyDown(e) {
+		switch(e.key) {
+			case 'Escape':
+				closeLightbox();
+				break;
+			case 'ArrowLeft':
+				document.querySelector('.lightbox-prev-btn').click();
+				break;
+			case 'ArrowRight':
+				document.querySelector('.lightbox-next-btn').click();
+				break;
+		}
+	}
+
+	// Build the gallery UI
+	return el("div", { className: "gallery-container" }).append(
+		// Gallery header
+		el("header", { className: "gallery-header" }).append(
+			el("h1", "Interactive Image Gallery"),
+			el("p", "Click on any image to view it in the lightbox. Use arrow keys for navigation.")
+		),
+
+		// Filter options
+		el("div", { className: "gallery-filters" }).append(
+			el("button", {
+				classList: { active: S(() => filterTag.get() === 'all') },
+				textContent: "All"
+			}, onFilterChange('all')),
+			el("button", {
+				classList: { active: S(() => filterTag.get() === 'nature') },
+				textContent: "Nature"
+			}, onFilterChange('nature')),
+			el("button", {
+				classList: { active: S(() => filterTag.get() === 'urban') },
+				textContent: "Urban"
+			}, onFilterChange('urban')),
+			el("button", {
+				classList: { active: S(() => filterTag.get() === 'people') },
+				textContent: "People"
+			}, onFilterChange('people'))
+		),
+
+		// Image grid
+		el("div", { className: "gallery-grid" }).append(
+			S.el(imagesToDisplay, images =>
+				images.map(image =>
+					memo(image.id, ()=>
+						el("div", {
+							className: "gallery-item",
+							dataTag: image.alt.toLowerCase()
+						}).append(
+							el("img", {
+								src: image.src,
+								alt: image.alt,
+								loading: "lazy"
+							}, onImageClick(image.id)),
+							el("div", { className: "gallery-item-caption" }).append(
+								el("h3", image.title),
+								el("p", image.alt)
+							)
+						)
+					)
+				)
+			)
+		),
+
+		// Lightbox (only shown when an image is selected)
+		S.el(isLightboxOpen, open => !open
+			? el()
+			: el("div", { className: "lightbox-overlay" }, on("click", closeLightbox)).append(
+					el("div", {
+						className: "lightbox-content",
+						onClick: e => e.stopPropagation() // Prevent closing when clicking inside
+					}).append(
+						el("button", {
+							className: "lightbox-close-btn",
+							"aria-label": "Close lightbox"
+						}, on("click", closeLightbox)).append("×"),
+
+						el("button", {
+							className: "lightbox-prev-btn",
+							"aria-label": "Previous image"
+						}, on("click", onPrevImage)).append("❮"),
+
+						el("button", {
+							className: "lightbox-next-btn",
+							"aria-label": "Next image"
+						}, on("click", onNextImage)).append("❯"),
+
+						S.el(selectedImage, img => !img
+							? el()
+							: el("div", { className: "lightbox-image-container" }).append(
+								el("img", {
+									src: img.src,
+									alt: img.alt,
+									className: "lightbox-image"
+								}),
+								el("div", { className: "lightbox-caption" }).append(
+									el("h2", img.title),
+									el("p", img.alt)
+								)
+							)
+						)
+					)
+				)
+		),
+	);
+}
+
+// Render the component
+document.body.append(
+	el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append(
+		el(ImageGallery)
+	),
+	el("style", `
+		.gallery-container {
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 2rem;
+		}
+
+		.gallery-header {
+			text-align: center;
+			margin-bottom: 2rem;
+		}
+
+		.gallery-header h1 {
+			margin-bottom: 0.5rem;
+			color: #333;
+		}
+
+		.gallery-header p {
+			color: #666;
+		}
+
+		.gallery-filters {
+			display: flex;
+			justify-content: center;
+			margin-bottom: 2rem;
+			flex-wrap: wrap;
+		}
+
+		.gallery-filters button {
+			background: none;
+			border: none;
+			padding: 0.5rem 1.5rem;
+			margin: 0 0.5rem;
+			font-size: 1rem;
+			cursor: pointer;
+			border-radius: 30px;
+			transition: all 0.3s ease;
+			color: #555;
+		}
+
+		.gallery-filters button:hover {
+			background: #f0f0f0;
+		}
+
+		.gallery-filters button.active {
+			background: #4a90e2;
+			color: white;
+		}
+
+		.gallery-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+			gap: 1.5rem;
+		}
+
+		.gallery-item {
+			position: relative;
+			border-radius: 8px;
+			overflow: hidden;
+			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+			transition: transform 0.3s ease, box-shadow 0.3s ease;
+			cursor: pointer;
+		}
+
+		.gallery-item:hover {
+			transform: translateY(-5px);
+			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+		}
+
+		.gallery-item img {
+			width: 100%;
+			height: 200px;
+			object-fit: cover;
+			display: block;
+			transition: transform 0.5s ease;
+		}
+
+		.gallery-item:hover img {
+			transform: scale(1.05);
+		}
+
+		.gallery-item-caption {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+			color: white;
+			padding: 1rem;
+			transform: translateY(100%);
+			transition: transform 0.3s ease;
+		}
+
+		.gallery-item:hover .gallery-item-caption {
+			transform: translateY(0);
+		}
+
+		.gallery-item-caption h3 {
+			margin: 0 0 0.5rem;
+			font-size: 1.2rem;
+		}
+
+		.gallery-item-caption p {
+			margin: 0;
+			font-size: 0.9rem;
+			opacity: 0.8;
+		}
+
+		/* Lightbox styles */
+		.lightbox-overlay {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.9);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			z-index: 1000;
+			padding: 2rem;
+		}
+
+		.lightbox-content {
+			position: relative;
+			max-width: 90%;
+			max-height: 90%;
+		}
+
+		.lightbox-image-container {
+			overflow: hidden;
+			border-radius: 4px;
+			box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+			background: #000;
+		}
+
+		.lightbox-image {
+			max-width: 100%;
+			max-height: 80vh;
+			display: block;
+			margin: 0 auto;
+		}
+
+		.lightbox-caption {
+			background: #222;
+			color: white;
+			padding: 1rem;
+			text-align: center;
+		}
+
+		.lightbox-caption h2 {
+			margin: 0 0 0.5rem;
+		}
+
+		.lightbox-caption p {
+			margin: 0;
+			opacity: 0.8;
+		}
+
+		.lightbox-close-btn,
+		.lightbox-prev-btn,
+		.lightbox-next-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: white;
+			border: none;
+			font-size: 1.5rem;
+			width: 50px;
+			height: 50px;
+			border-radius: 50%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+			transition: background 0.3s ease;
+			position: absolute;
+		}
+
+		.lightbox-close-btn:hover,
+		.lightbox-prev-btn:hover,
+		.lightbox-next-btn:hover {
+			background: rgba(0, 0, 0, 0.8);
+		}
+
+		.lightbox-close-btn {
+			top: -25px;
+			right: -25px;
+		}
+
+		.lightbox-prev-btn {
+			left: -25px;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+
+		.lightbox-next-btn {
+			right: -25px;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+
+		@media (max-width: 768px) {
+			.gallery-container {
+				padding: 1rem;
+			}
+
+			.gallery-grid {
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				gap: 1rem;
+			}
+
+			.lightbox-prev-btn,
+			.lightbox-next-btn {
+				width: 40px;
+				height: 40px;
+				font-size: 1.2rem;
+			}
+		}
+	`)
+);

docs/components/examples/case-studies/interactive-form.js

@@ -0,0 +1,342 @@
+/**
+ * Case Study: Interactive Form with Validation
+ *
+ * This example demonstrates:
+ * - Form handling with real-time validation
+ * - Reactive UI updates based on input state
+ * - Complex form state management
+ * - Clean separation of concerns (data, validation, UI)
+ */
+
+import { dispatchEvent, el, on, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+/**
+ * @typedef {Object} FormState
+ * @property {string} name
+ * @property {string} email
+ * @property {string} password
+ * @property {string} confirmPassword
+ * @property {boolean} agreedToTerms
+ * */
+/**
+ * Interactive Form with Validation Component
+ * @returns {HTMLElement} Form element
+ */
+export function InteractiveForm() {
+	const submitted = S(false);
+	/** @type {FormState|null} */
+	let formState = null;
+	/** @param {CustomEvent<FormState>} event */
+	const onSubmit = ({ detail }) => {
+		submitted.set(true);
+		formState = detail;
+	};
+	const onAnotherAccount = () => {
+		submitted.set(false)
+		formState = null;
+	};
+
+	return el("div", { className: "form-container" }).append(
+		S.el(submitted, s => s
+			? el("div", { className: "success-message" }).append(
+				el("h3", "Thank you for registering!"),
+				el("p", `Welcome, ${formState.name}! Your account has been created successfully.`),
+				el("button", { textContent: "Register another account", type: "button" },
+					on("click", onAnotherAccount)
+				),
+			)
+			: el(Form, { initial: formState }, on("form:submit", onSubmit))
+		)
+	);
+}
+/**
+ * Form Component
+ * @type {(props: { initial: FormState | null }) => HTMLElement}
+ * */
+export function Form({ initial }) {
+	const { host }= scope;
+	// Form state management
+	const formState = S(initial || {
+		name: '',
+		email: '',
+		password: '',
+		confirmPassword: '',
+		agreedToTerms: false
+	}, {
+		/**
+		 * @template {keyof FormState} K
+		 * @param {K} key
+		 * @param {FormState[K]} value
+		 * */
+		update(key, value) {
+			this.value[key] = value;
+		}
+	});
+
+	// Derived signals for validation
+	const nameValid = S(() => formState.get().name.length >= 3);
+	const emailValid = S(() => {
+		const email = formState.get().email;
+		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+	});
+	const passwordValid = S(() => {
+		const password = formState.get().password;
+		return password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password);
+	});
+	const passwordsMatch = S(() => {
+		const { password, confirmPassword } = formState.get();
+		return password === confirmPassword && confirmPassword !== '';
+	});
+	const termsAgreed = S(() => formState.get().agreedToTerms);
+
+	// Overall form validity
+	const formValid = S(() =>
+		nameValid.get() &&
+		emailValid.get() &&
+		passwordValid.get() &&
+		passwordsMatch.get() &&
+		termsAgreed.get()
+	);
+
+	// Event handlers
+	/**
+	 * Event handler for input events
+	 * @param {"value"|"checked"} prop
+	 * @returns {(ev: Event) => void}
+	 * */
+	const onChange= prop => ev => {
+		const input = /** @type {HTMLInputElement} */(ev.target);
+		S.action(formState, "update", /** @type {keyof FormState} */(input.id), input[prop]);
+	};
+	const dispatcSubmit = dispatchEvent("form:submit", host);
+	const onSubmit = on("submit", e => {
+		e.preventDefault();
+		if (!formValid.get()) {
+			return;
+		}
+
+		dispatcSubmit(formState.get());
+	});
+
+	// Component UI
+	return el("form", { className: "registration-form" }, onSubmit).append(
+		el("h2", "Create an Account"),
+
+		// Name field
+		el("div", { classList: {
+			"form-group": true,
+			valid: nameValid,
+			invalid: S(()=> !nameValid.get() && formState.get().name)
+		}}).append(
+			el("label", { htmlFor: "name", textContent: "Full Name" }),
+			el("input", {
+				id: "name",
+				type: "text",
+				value: formState.get().name,
+				placeholder: "Enter your full name"
+			}, on("input", onChange("value"))),
+			el("div", { className: "validation-message", textContent: "Name must be at least 3 characters long" }),
+		),
+
+		// Email field
+		el("div", { classList: {
+			"form-group": true,
+			valid: emailValid,
+			invalid: S(()=> !emailValid.get() && formState.get().email)
+		}}).append(
+			el("label", { htmlFor: "email", textContent: "Email Address" }),
+			el("input", {
+				id: "email",
+				type: "email",
+				value: formState.get().email,
+				placeholder: "Enter your email address"
+			}, on("input", onChange("value"))),
+			el("div", { className: "validation-message", textContent: "Please enter a valid email address" })
+		),
+
+		// Password field
+		el("div", { classList: {
+			"form-group": true,
+			valid: passwordValid,
+			invalid: S(()=> !passwordValid.get() && formState.get().password)
+		}}).append(
+			el("label", { htmlFor: "password", textContent: "Password" }),
+			el("input", {
+				id: "password",
+				type: "password",
+				value: formState.get().password,
+				placeholder: "Create a password"
+			}, on("input", onChange("value"))),
+			el("div", {
+				className: "validation-message",
+				textContent: "Password must be at least 8 characters with at least one uppercase letter and one number",
+			}),
+		),
+
+		// Confirm password field
+		el("div", { classList: {
+			"form-group": true,
+			valid: passwordsMatch,
+			invalid: S(()=> !passwordsMatch.get() && formState.get().confirmPassword)
+		}}).append(
+			el("label", { htmlFor: "confirmPassword", textContent: "Confirm Password" }),
+			el("input", {
+				id: "confirmPassword",
+				type: "password",
+				value: formState.get().confirmPassword,
+				placeholder: "Confirm your password"
+			}, on("input", onChange("value"))),
+			el("div", { className: "validation-message", textContent: "Passwords must match" }),
+		),
+
+		// Terms agreement
+		el("div", { className: "form-group checkbox-group" }).append(
+			el("input", {
+				id: "agreedToTerms",
+				type: "checkbox",
+				checked: formState.get().agreedToTerms
+			}, on("change", onChange("checked"))),
+			el("label", { htmlFor: "agreedToTerms", textContent: "I agree to the Terms and Conditions" }),
+		),
+
+		// Submit button
+		el("button", {
+			textContent: "Create Account",
+			type: "submit",
+			className: "submit-button",
+			disabled: S(() => !formValid.get())
+		}),
+	);
+}
+
+// Render the component
+document.body.append(
+	el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append(
+		el(InteractiveForm)
+	),
+	el("style", `
+		.form-container {
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+			max-width: 500px;
+			margin: 0 auto;
+			padding: 2rem;
+			border-radius: 8px;
+			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+			background: #fff;
+		}
+
+		h2 {
+			margin-top: 0;
+			color: #333;
+			margin-bottom: 1.5rem;
+		}
+
+		.form-group {
+			margin-bottom: 1.5rem;
+			position: relative;
+			transition: all 0.3s ease;
+		}
+
+		label {
+			display: block;
+			margin-bottom: 0.5rem;
+			color: #555;
+			font-weight: 500;
+		}
+
+		input[type="text"],
+		input[type="email"],
+		input[type="password"] {
+			width: 100%;
+			padding: 0.75rem;
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			font-size: 1rem;
+			transition: border-color 0.3s ease;
+		}
+
+		input:focus {
+			outline: none;
+			border-color: #4a90e2;
+			box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+		}
+
+		.checkbox-group {
+			display: flex;
+			align-items: center;
+		}
+
+		.checkbox-group label {
+			margin: 0 0 0 0.5rem;
+		}
+
+		.validation-message {
+			font-size: 0.85rem;
+			color: #e74c3c;
+			margin-top: 0.5rem;
+			height: 0;
+			overflow: hidden;
+			opacity: 0;
+			transition: all 0.3s ease;
+		}
+
+		.form-group.invalid .validation-message {
+			height: auto;
+			opacity: 1;
+		}
+
+		.form-group.valid input {
+			border-color: #2ecc71;
+		}
+
+		.form-group.invalid input {
+			border-color: #e74c3c;
+		}
+
+		.submit-button {
+			background-color: #4a90e2;
+			color: white;
+			border: none;
+			border-radius: 4px;
+			padding: 0.75rem 1.5rem;
+			font-size: 1rem;
+			cursor: pointer;
+			transition: background-color 0.3s ease;
+			width: 100%;
+		}
+
+		.submit-button:hover:not(:disabled) {
+			background-color: #3a7bc8;
+		}
+
+		.submit-button:disabled {
+			background-color: #b5b5b5;
+			cursor: not-allowed;
+		}
+
+		.success-message {
+			text-align: center;
+			color: #2ecc71;
+		}
+
+		.success-message h3 {
+			margin-top: 0;
+		}
+
+		.success-message button {
+			background-color: #2ecc71;
+			color: white;
+			border: none;
+			border-radius: 4px;
+			padding: 0.75rem 1.5rem;
+			font-size: 1rem;
+			cursor: pointer;
+			margin-top: 1rem;
+		}
+
+		.success-message button:hover {
+			background-color: #27ae60;
+		}
+	`),
+);

docs/components/examples/case-studies/task-manager.js

@@ -0,0 +1,715 @@
+/**
+ * Case Study: Task Manager Application
+ *
+ * This example demonstrates:
+ * - Complex state management with signals
+ * - Drag and drop functionality
+ * - Local storage persistence
+ * - Responsive design for different devices
+ */
+
+import { el, on, dispatchEvent, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+/** @typedef {{ id: number, title: string, description: string, priority: string, status: string }} Task */
+/**
+ * Task Manager Component
+ * @returns {HTMLElement} Task manager UI
+ */
+export function TaskManager() {
+	// <Tasks store>
+	const STORAGE_KEY = 'dde-task-manager';
+	const STATUSES = {
+		TODO: 'todo',
+		IN_PROGRESS: 'in-progress',
+		DONE: 'done'
+	};
+	/** @type {Task[]} */
+	let initialTasks = [];
+	try {
+		const saved = localStorage.getItem(STORAGE_KEY);
+		if (saved) {
+			initialTasks = JSON.parse(saved);
+		}
+	} catch (e) {
+		console.error('Failed to load tasks from localStorage', e);
+	}
+	if (!initialTasks.length) {
+		initialTasks = [
+			{ id: 1, title: 'Create project structure', description: 'Set up folders and initial files',
+				status: STATUSES.DONE, priority: 'high' },
+			{ id: 2, title: 'Design UI components', description: 'Create mockups for main views',
+				status: STATUSES.IN_PROGRESS, priority: 'medium' },
+			{ id: 3, title: 'Implement authentication', description: 'Set up user login and registration',
+				status: STATUSES.TODO, priority: 'high' },
+			{ id: 4, title: 'Write documentation', description: 'Document API endpoints and usage examples',
+				status: STATUSES.TODO, priority: 'low' },
+		];
+	}
+	const tasks = S(initialTasks, {
+		add(task) { this.value.push(task); },
+		remove(id) { this.value = this.value.filter(task => task.id !== id); },
+		update(id, task) {
+			const current= this.value.find(t => t.id === id);
+			if (current) Object.assign(current, task);
+		}
+	});
+	S.on(tasks, value => {
+		try {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+		} catch (e) {
+			console.error('Failed to save tasks to localStorage', e);
+		}
+	});
+	// </Tasks store>
+
+	const filterPriority = S('all');
+	const searchQuery = S('');
+	// Filtered tasks based on priority and search query
+	const filteredTasks = S(() => {
+		let filtered = tasks.get();
+
+		// Filter by priority
+		if (filterPriority.get() !== 'all') {
+			filtered = filtered.filter(task => task.priority === filterPriority.get());
+		}
+
+		// Filter by search query
+		const query = searchQuery.get().toLowerCase();
+		if (query) {
+			filtered = filtered.filter(task =>
+				task.title.toLowerCase().includes(query) ||
+				task.description.toLowerCase().includes(query)
+			);
+		}
+
+		return filtered;
+	});
+	/** Tasks grouped by status for display in columns */
+	const tasksByStatus = S(() => {
+		const filtered = filteredTasks.get();
+		return {
+			[STATUSES.TODO]: filtered.filter(t => t.status === STATUSES.TODO),
+			[STATUSES.IN_PROGRESS]: filtered.filter(t => t.status === STATUSES.IN_PROGRESS),
+			[STATUSES.DONE]: filtered.filter(t => t.status === STATUSES.DONE)
+		};
+	});
+
+	// <Add> signals and handlers for adding new tasks
+	const newTask = { title: '', description: '', priority: 'medium' };
+	const onAddTask = e => {
+		e.preventDefault();
+		if (!newTask.title) return;
+
+		S.action(tasks, "add", {
+			id: Date.now(),
+			status: STATUSES.TODO,
+			...newTask
+		});
+		e.target.reset();
+	};
+	// </Add>
+	const onEdit= on("card:edit", /** @param {CardEditEvent} ev */({ detail: [ id, task ] })=>
+		S.action(tasks, "update", id, task));
+	const onDelete= on("card:delete", /** @param {CardDeleteEvent} ev */({ detail: id })=>
+		S.action(tasks, "remove", id));
+
+	const { onDragable, onDragArea }= moveElementAddon(
+		(id, status) => S.action(tasks, "update", id, { status })
+	);
+
+	// Build the task manager UI
+	return el("div", { className: "task-manager" }).append(
+		el("header", { className: "app-header" }).append(
+			el("h1", "DDE Task Manager"),
+			el("div", { className: "app-controls" }).append(
+				el("input", {
+					type: "text",
+					placeholder: "Search tasks...",
+					value: searchQuery.get()
+				}, on("input", e => searchQuery.set(e.target.value))),
+				el("select", null,
+					on.host(el=> el.value= filterPriority.get()),
+					on("change", e => filterPriority.set(e.target.value))
+				).append(
+					el("option", { value: "all", textContent: "All Priorities" }),
+					el("option", { value: "low", textContent: "Low Priority" }),
+					el("option", { value: "medium", textContent: "Medium Priority" }),
+					el("option", { value: "high", textContent: "High Priority" })
+				)
+			)
+		),
+
+		// Add new task form
+		el("form", { className: "new-task-form" }, on("submit", onAddTask)).append(
+			el("div", { className: "form-row" }).append(
+				el("input", {
+					type: "text",
+					placeholder: "New task title",
+					value: newTask.title,
+					required: true
+				}, on("input", e => newTask.title= e.target.value.trim())),
+				el("select", null,
+					on.host(el=> el.value= newTask.priority),
+					on("change", e => newTask.priority= e.target.value)
+				).append(
+					el("option", { value: "low", textContent: "Low" }),
+					el("option", { value: "medium", textContent: "Medium" }),
+					el("option", { value: "high", textContent: "High" })
+				),
+				el("button", { type: "submit", className: "add-btn" }).append("Add Task")
+			),
+			el("textarea", {
+				placeholder: "Task description (optional)",
+				value: newTask.description
+			}, on("input", e => newTask.description= e.target.value.trim()))
+		),
+
+		// Task board with columns
+		el("div", { className: "task-board" }).append(
+			// Todo column
+			el("div", {
+				id: `column-${STATUSES.TODO}`,
+				className: "task-column"
+			}, onDragArea(STATUSES.TODO)).append(
+				el("h2", { className: "column-header" }).append(
+					"To Do ",
+					el("span", {
+						textContent: S(() => tasksByStatus.get()[STATUSES.TODO].length),
+						className: "task-count"
+					}),
+				),
+				S.el(S(() => tasksByStatus.get()[STATUSES.TODO]), tasks =>
+					el("div", { className: "column-tasks" }).append(
+						...tasks.map(task=> el(TaskCard, { task, onDragable }, onEdit, onDelete))
+					)
+				)
+			),
+
+			// In Progress column
+			el("div", {
+				id: `column-${STATUSES.IN_PROGRESS}`,
+				className: "task-column"
+			}, onDragArea(STATUSES.IN_PROGRESS)).append(
+				el("h2", { className: "column-header" }).append(
+					"In Progress ",
+					el("span", {
+						textContent: S(() => tasksByStatus.get()[STATUSES.IN_PROGRESS].length),
+						className: "task-count",
+					}),
+				),
+				S.el(S(() => tasksByStatus.get()[STATUSES.IN_PROGRESS]), tasks =>
+					el("div", { className: "column-tasks" }).append(
+						...tasks.map(task=> el(TaskCard, { task, onDragable }, onEdit, onDelete))
+					)
+				)
+			),
+
+			// Done column
+			el("div", {
+				id: `column-${STATUSES.DONE}`,
+				className: "task-column"
+			}, onDragArea(STATUSES.DONE)).append(
+				el("h2", { className: "column-header" }).append(
+					"Done ",
+					el("span", {
+						textContent: S(() => tasksByStatus.get()[STATUSES.DONE].length),
+						className: "task-count",
+					}),
+				),
+				S.el(S(() => tasksByStatus.get()[STATUSES.DONE]), tasks =>
+					el("div", { className: "column-tasks" }).append(
+						...tasks.map(task=> el(TaskCard, { task, onDragable }, onEdit, onDelete))
+					)
+				)
+			)
+		),
+	);
+}
+/** @typedef {CustomEvent<[ string, Task ]>} CardEditEvent */
+/** @typedef {CustomEvent<string>} CardDeleteEvent */
+/**
+ * Task Card Component
+ * @type {(props: { task: Task, onDragable: (id: number) => ddeElementAddon<HTMLDivElement> }) => HTMLElement}
+ * @fires {CardEditEvent} card:edit
+ * @fires {CardDeleteEvent} card:delete
+ * */
+function TaskCard({ task, onDragable }){
+	const { host }= scope;
+	const isEditing = S(false);
+	const onEditStart = () => isEditing.set(true);
+
+	const dispatchEdit= dispatchEvent("card:edit", host);
+	const dispatchDelete= dispatchEvent("card:delete", host).bind(null, task.id);
+
+	return el("div", {
+		id: `task-${task.id}`,
+		className: `task-card priority-${task.priority}`,
+		draggable: true
+	}, onDragable(task.id)).append(
+		S.el(isEditing, editing => editing
+			? el(EditMode)
+			: el().append(
+				el("div", { className: "task-header" }).append(
+					el("h3", { className: "task-title", textContent: task.title }),
+					el("div", { className: "task-actions" }).append(
+						el("button", {
+							textContent: "✎",
+							className: "edit-btn",
+							ariaLabel: "Edit task"
+						}, on("click", onEditStart)),
+						el("button", {
+							textContent: "✕",
+							className: "delete-btn",
+							ariaLabel: "Delete task"
+						}, on("click", dispatchDelete))
+					)
+				),
+				!task.description
+				? el()
+				: el("p", { className: "task-description", textContent: task.description }),
+				el("div", { className: "task-meta" }).append(
+					el("span", {
+						className: `priority-badge priority-${task.priority}`,
+						textContent: task.priority.charAt(0).toUpperCase() + task.priority.slice(1)
+					})
+				)
+			)
+		)
+	);
+	function EditMode(){
+		const onEditSave = on("submit", e => {
+			e.preventDefault();
+			const formData = new FormData(/** @type {HTMLFormElement} */(e.target));
+			const title = formData.get("title");
+			const description = formData.get("description");
+			const priority = formData.get("priority");
+			isEditing.set(false);
+			dispatchEdit([ task.id, { title, description, priority } ]);
+		})
+		const onEditCancel = () => isEditing.set(false);
+
+		return el("form", { className: "task-edit-form" }, onEditSave).append(
+			el("input", {
+				name: "title",
+				className: "task-title-input",
+				defaultValue: task.title,
+				placeholder: "Task title",
+				required: true,
+				autoFocus: true
+			}),
+			el("textarea", {
+				name: "description",
+				className: "task-desc-input",
+				defaultValue: task.description,
+				placeholder: "Description (optional)"
+			}),
+			el("select", {
+				name: "priority",
+			}, on.host(el=> el.value = task.priority)).append(
+				el("option", { value: "low", textContent: "Low Priority" }),
+				el("option", { value: "medium", textContent: "Medium Priority" }),
+				el("option", { value: "high", textContent: "High Priority" })
+			),
+			el("div", { className: "task-edit-actions" }).append(
+				el("button", {
+					textContent: "Cancel",
+					type: "button",
+					className: "cancel-btn"
+				}, on("click", onEditCancel)),
+				el("button", {
+					textContent: "Save",
+					type: "submit",
+					className: "save-btn"
+				})
+			)
+		);
+	}
+}
+
+/**
+ * Helper function to handle move an element
+ * @param {(id: string, status: string) => void} onMoved
+ * */
+function moveElementAddon(onMoved){
+	let draggedTaskId = null;
+	function onDragable(id) {
+		return element => {
+			on("dragstart", e => {
+				draggedTaskId= id;
+				e.dataTransfer.effectAllowed = 'move';
+
+				// Add some styling to the element being dragged
+				setTimeout(() => {
+					const el = document.getElementById(`task-${id}`);
+					if (el) el.classList.add('dragging');
+				}, 0);
+			})(element);
+
+			on("dragend", () => {
+				draggedTaskId= null;
+
+				// Remove the styling
+				const el = document.getElementById(`task-${id}`);
+				if (el) el.classList.remove('dragging');
+			})(element);
+		};
+	}
+	function onDragArea(status) {
+		return element => {
+			on("dragover", e => {
+				e.preventDefault();
+				e.dataTransfer.dropEffect = 'move';
+
+				// Add a visual indicator for the drop target
+				const column = document.getElementById(`column-${status}`);
+				if (column) column.classList.add('drag-over');
+			})(element);
+
+			on("dragleave", () => {
+				// Remove the visual indicator
+				const column = document.getElementById(`column-${status}`);
+				if (column) column.classList.remove('drag-over');
+			})(element);
+
+			on("drop", e => {
+				e.preventDefault();
+				const id = draggedTaskId;
+				if (id) onMoved(id, status);
+				// Remove the visual indicator
+				const column = document.getElementById(`column-${status}`);
+				if (column) column.classList.remove('drag-over');
+			})(element);
+		};
+	}
+	return { onDragable, onDragArea };
+}
+
+// Render the component
+document.body.append(
+	el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append(
+		el(TaskManager)
+	),
+	el("style", `
+		.task-manager {
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 1rem;
+			color: #333;
+		}
+
+		.app-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 1.5rem;
+			flex-wrap: wrap;
+			gap: 1rem;
+		}
+
+		.app-header h1 {
+			margin: 0;
+			color: #2d3748;
+		}
+
+		.app-controls {
+			display: flex;
+			gap: 1rem;
+		}
+
+		.app-controls input,
+		.app-controls select {
+			padding: 0.5rem;
+			border: 1px solid #e2e8f0;
+			border-radius: 4px;
+			font-size: 0.9rem;
+		}
+
+		.new-task-form {
+			background: white;
+			padding: 1.5rem;
+			border-radius: 8px;
+			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+			margin-bottom: 2rem;
+		}
+
+		.form-row {
+			display: flex;
+			gap: 1rem;
+			margin-bottom: 1rem;
+		}
+
+		.form-row input {
+			flex-grow: 1;
+			padding: 0.75rem;
+			border: 1px solid #e2e8f0;
+			border-radius: 4px;
+			font-size: 1rem;
+		}
+
+		.form-row select {
+			width: 100px;
+			padding: 0.75rem;
+			border: 1px solid #e2e8f0;
+			border-radius: 4px;
+			font-size: 1rem;
+		}
+
+		.add-btn {
+			background: #4a90e2;
+			color: white;
+			border: none;
+			border-radius: 4px;
+			padding: 0.75rem 1.5rem;
+			font-size: 1rem;
+			cursor: pointer;
+			transition: background 0.2s ease;
+		}
+
+		.add-btn:hover {
+			background: #3a7bc8;
+		}
+
+		.new-task-form textarea {
+			width: 100%;
+			padding: 0.75rem;
+			border: 1px solid #e2e8f0;
+			border-radius: 4px;
+			font-size: 1rem;
+			resize: vertical;
+			min-height: 80px;
+		}
+
+		.task-board {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			gap: 1.5rem;
+		}
+
+		.task-column {
+			background: #f7fafc;
+			border-radius: 8px;
+			padding: 1rem;
+			min-height: 400px;
+			transition: background 0.2s ease;
+		}
+
+		.column-header {
+			margin-top: 0;
+			padding-bottom: 0.75rem;
+			border-bottom: 2px solid #e2e8f0;
+			font-size: 1.25rem;
+			color: #2d3748;
+			display: flex;
+			align-items: center;
+		}
+
+		.task-count {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			background: #e2e8f0;
+			color: #4a5568;
+			border-radius: 50%;
+			width: 25px;
+			height: 25px;
+			font-size: 0.875rem;
+			margin-left: 0.5rem;
+		}
+
+		.column-tasks {
+			margin-top: 1rem;
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+			min-height: 200px;
+		}
+
+		.task-card {
+			background: white;
+			border-radius: 6px;
+			padding: 1rem;
+			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+			cursor: grab;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+			position: relative;
+			border-left: 4px solid #ccc;
+		}
+
+		.task-card:hover {
+			transform: translateY(-3px);
+			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+		}
+
+		.task-card.dragging {
+			opacity: 0.5;
+			cursor: grabbing;
+		}
+
+		.task-card.priority-low {
+			border-left-color: #38b2ac;
+		}
+
+		.task-card.priority-medium {
+			border-left-color: #ecc94b;
+		}
+
+		.task-card.priority-high {
+			border-left-color: #e53e3e;
+		}
+
+		.task-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 0.5rem;
+		}
+
+		.task-title {
+			margin: 0;
+			font-size: 1.1rem;
+			color: #2d3748;
+			word-break: break-word;
+		}
+
+		.task-description {
+			margin: 0.5rem 0;
+			font-size: 0.9rem;
+			color: #4a5568;
+			word-break: break-word;
+		}
+
+		.task-actions {
+			display: flex;
+			gap: 0.5rem;
+		}
+
+		.edit-btn,
+		.delete-btn {
+			background: none;
+			border: none;
+			font-size: 1rem;
+			cursor: pointer;
+			width: 24px;
+			height: 24px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 50%;
+			color: #718096;
+			transition: background 0.2s ease, color 0.2s ease;
+		}
+
+		.edit-btn:hover {
+			background: #edf2f7;
+			color: #4a5568;
+		}
+
+		.delete-btn:hover {
+			background: #fed7d7;
+			color: #e53e3e;
+		}
+
+		.task-meta {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 0.75rem;
+		}
+
+		.priority-badge {
+			font-size: 0.75rem;
+			padding: 0.2rem 0.5rem;
+			border-radius: 4px;
+			font-weight: 500;
+		}
+
+		.priority-badge.priority-low {
+			background: #e6fffa;
+			color: #2c7a7b;
+		}
+
+		.priority-badge.priority-medium {
+			background: #fefcbf;
+			color: #975a16;
+		}
+
+		.priority-badge.priority-high {
+			background: #fed7d7;
+			color: #c53030;
+		}
+
+		.drag-over {
+			background: #f0f9ff;
+			border: 2px dashed #4a90e2;
+		}
+
+		.task-edit-form {
+			display: flex;
+			flex-direction: column;
+			gap: 0.75rem;
+		}
+
+		.task-title-input,
+		.task-desc-input {
+			width: 100%;
+			padding: 0.5rem;
+			border: 1px solid #e2e8f0;
+			border-radius: 4px;
+			font-size: 0.9rem;
+		}
+
+		.task-desc-input {
+			min-height: 60px;
+			resize: vertical;
+		}
+
+		.task-edit-actions {
+			display: flex;
+			justify-content: flex-end;
+			gap: 0.5rem;
+			margin-top: 0.5rem;
+		}
+
+		.cancel-btn,
+		.save-btn {
+			padding: 0.4rem 0.75rem;
+			border-radius: 4px;
+			font-size: 0.9rem;
+			cursor: pointer;
+		}
+
+		.cancel-btn {
+			background: #edf2f7;
+			color: #4a5568;
+			border: 1px solid #e2e8f0;
+		}
+
+		.save-btn {
+			background: #4a90e2;
+			color: white;
+			border: none;
+		}
+
+		@media (max-width: 768px) {
+			.app-header {
+				flex-direction: column;
+				align-items: flex-start;
+			}
+
+			.app-controls {
+				width: 100%;
+				flex-direction: column;
+			}
+
+			.form-row {
+				flex-direction: column;
+			}
+
+			.task-board {
+				grid-template-columns: 1fr;
+			}
+		}
+	`)
+);

docs/components/examples/reallife/todomvc.js

@@ -13,18 +13,20 @@ import { S } from "deka-dom-el/signals";
  * @returns {HTMLElement} The root TodoMVC application element
  */
 function Todos(){
-	const pageS = routerSignal(S);
+	const { signal } = scope;
+	const pageS = routerSignal(S, signal);
 	const todosS = todosSignal();
 	/** Derived signal that filters todos based on current route */
-	const filteredTodosS = S(()=> {
+	const todosFilteredS = S(()=> {
 		const todos = todosS.get();
 		const filter = pageS.get();
+		if (filter === "all") return todos;
 		return todos.filter(todo => {
 			if (filter === "active") return !todo.completed;
 			if (filter === "completed") return todo.completed;
-			return true; // "all"
 		});
 	});
+	const todosRemainingS = S(()=> todosS.get().filter(todo => !todo.completed).length);
 
 	/** @type {ddeElementAddon<HTMLInputElement>} */
 	const onToggleAll = on("change", event => {
@@ -73,7 +75,7 @@ function Todos(){
 				}, onToggleAll),
 				el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }),
 				el("ul", { className: "todo-list" }).append(
-					S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
+					S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
 						memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
 					)
 				)
@@ -83,7 +85,7 @@ function Todos(){
 			? el()
 			: el("footer", { className: "footer" }).append(
 				el("span", { className: "todo-count" }).append(
-					noOfLeft(todos)
+					noOfLeft()
 				),
 				memo("filters", ()=>
 					el("ul", { className: "filters" }).append(
@@ -98,15 +100,18 @@ function Todos(){
 						)
 					),
 				),
-				!todos.some(todo => todo.completed)
+				todos.length - todosRemainingS.get() === 0
 					? el()
-					: el("button", { textContent: "Clear completed", className: "clear-completed" }, onClearCompleted)
+					: memo("delete", () =>
+						el("button",
+							{ textContent: "Clear completed", className: "clear-completed" },
+							onClearCompleted)
+					)
 			)
 		)
 	);
-	/** @param {Todo[]} todos */
-	function noOfLeft(todos){
-		const { length }= todos.filter(todo => !todo.completed);
+	function noOfLeft(){
+		const length = todosRemainingS.get();
 		return el("strong").append(
 			length + " ",
 			length === 1 ? "item left" : "items left"
@@ -194,7 +199,7 @@ function TodoItem({ id, title, completed }) {
 				checked: completed
 			}, onToggleCompleted),
 			el("label", { textContent: title }, onStartEdit),
-			el("button", { className: "destroy" }, onDelete)
+			el("button", { ariaLabel: "Delete todo", className: "destroy" }, onDelete)
 		),
 		S.el(isEditing, editing => !editing
 			? el()
@@ -328,6 +333,7 @@ function todosSignal(){
 			localStorage.setItem(store_key, JSON.stringify(value));
 		} catch (e) {
 			console.error("Failed to save todos to localStorage", e);
+			// Optionally, provide user feedback
 		}
 	});
 	return out;
@@ -336,9 +342,10 @@ function todosSignal(){
 /**
  * Creates a signal for managing route state
  *
- * @param {typeof S} signal - The signal constructor
+ * @param {typeof S} signal - The signal constructor from a library
+ * @param {AbortSignal} abortSignal
  */
-function routerSignal(signal){
+function routerSignal(signal, abortSignal){
 	const initial = location.hash.replace("#", "") || "all";
 	const out = signal(initial, {
 		/**
@@ -347,15 +354,16 @@ function routerSignal(signal){
 		 */
 		set(hash){
 			location.hash = hash;
-			this.value = hash;
-		}
+			//this.value = hash;
+		},
 	});
 
 	// Setup hash change listener
 	window.addEventListener("hashchange", () => {
 		const hash = location.hash.replace("#", "") || "all";
-		S.action(out, "set", /** @type {"all"|"active"|"completed"} */(hash));
-	});
+		//S.action(out, "set", /** @type {"all"|"active"|"completed"} */(hash));
+		out.set(hash);
+	}, { signal: abortSignal });
 
 	return out;
 }

docs/p10-todomvc.html.js

@@ -101,21 +101,23 @@ export function page({ pkg, info }){
 		`),
 		el(code, { content: `
 			// Signal for current route (all/active/completed)
-			const pageS = routerSignal(S);
+			const { signal } = scope;
+			const pageS = routerSignal(S, signal);
 
 			// Signal for the todos collection with custom actions
 			const todosS = todosSignal();
 
 			// Derived signal that filters todos based on current route
-			const filteredTodosS = S(()=> {
+			const todosFilteredS = S(()=> {
 				const todos = todosS.get();
 				const filter = pageS.get();
+				if (filter === "all") return todos;
 				return todos.filter(todo => {
 					if (filter === "active") return !todo.completed;
 					if (filter === "completed") return todo.completed;
-					return true; // "all"
 				});
 			});
+			const todosRemainingS = S(()=> todosS.get().filter(todo => !todo.completed).length);
 		`, page_id }),
 
 		el("p").append(T`
@@ -200,6 +202,7 @@ export function page({ pkg, info }){
 						localStorage.setItem(store_key, JSON.stringify(value));
 					} catch (e) {
 						console.error("Failed to save todos to localStorage", e);
+						// Optionally, provide user feedback
 					}
 				});
 				return out;
@@ -222,19 +225,19 @@ export function page({ pkg, info }){
 		el("h4", t`1. Derived Signals for Filtering`),
 		el(code, { content: `
 			/** Derived signal that filters todos based on current route */
-			const filteredTodosS = S(()=> {
+			const todosFilteredS = S(()=> {
 				const todos = todosS.get();
 				const filter = pageS.get();
+				if (filter === "all") return todos;
 				return todos.filter(todo => {
 					if (filter === "active") return !todo.completed;
 					if (filter === "completed") return todo.completed;
-					return true; // "all"
 				});
 			});
 
 			// Using the derived signal in the UI
 			el("ul", { className: "todo-list" }).append(
-				S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
+				S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
 					memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
 				)
 			)
@@ -334,7 +337,7 @@ export function page({ pkg, info }){
 		el("h4", t`Memoizing Todo Items`),
 		el(code, { content: `
 			el("ul", { className: "todo-list" }).append(
-				S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
+				S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
 					memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
 				)
 			)
@@ -543,11 +546,13 @@ export function page({ pkg, info }){
 
 		el("h4", t`Conditional Clear Completed Button`),
 		el(code, { content: `
-			S.el(S(() => todosS.get().some(todo => todo.completed)),
-				hasTodosCompleted=> hasTodosCompleted
-				? el("button", { textContent: "Clear completed", className: "clear-completed" }, onClearCompleted)
-				: el()
-			)
+			todos.length - todosRemainingS.get() === 0
+				? el()
+				: memo("delete", () =>
+					el("button",
+						{ textContent: "Clear completed", className: "clear-completed" },
+						onClearCompleted)
+				)
 		`, page_id }),
 
 		el("div", { className: "note" }).append(
@@ -625,7 +630,7 @@ export function page({ pkg, info }){
 				${el("strong", "Declarative Class Management:")} Using the classList property for cleaner class handling
 			`),
 			el("li").append(T`
-				${el("strong", "Focus Management:")} Reliable input focus with requestAnimationFrame
+				${el("strong", "Focus Management:")} Reliable input focus with setTimeout
 			`),
 			el("li").append(T`
 				${el("strong", "Persistent Storage:")} Automatically saving application state with signal listeners

docs/p15-examples.html.js

@@ -0,0 +1,63 @@
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Examples Gallery`,
+	fullTitle: t`DDE Examples & Code Snippets`,
+	description: t`A comprehensive collection of examples and code snippets for working with Deka DOM Elements.`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { example } from "./components/example.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("p").append(T`
+			Real-world application examples showcasing how to build complete, production-ready interfaces with dd<el>:
+		`),
+		el(h3, t`Data Dashboard`),
+		el("p").append(T`
+			Data visualization dashboard with charts, filters, and responsive layout.  Integration with a
+			third-party charting library, data fetching and state management, responsive layout design, and multiple
+			interactive components working together.
+		`),
+		el(example, { src: fileURL("./components/examples/case-studies/data-dashboard.js"), variant: "big", page_id }),
+
+		el(h3, t`Interactive Form`),
+		el("p").append(T`
+			Complete form with real-time validation, conditional rendering, and responsive design. Form handling with
+			real-time validation, reactive UI updates, complex form state management, and clean separation of concerns.
+		`),
+		el(example, { src: fileURL("./components/examples/case-studies/interactive-form.js"), variant: "big", page_id }),
+
+
+		el(h3, t`Interactive Image Gallery`),
+		el("p").append(T`
+			Responsive image gallery with lightbox, keyboard navigation, and filtering. Dynamic loading of content,
+			lightbox functionality, animation handling, and keyboard and gesture navigation support.
+		`),
+		el(example, { src: fileURL("./components/examples/case-studies/image-gallery.js"), variant: "big", page_id }),
+
+
+		el(h3, t`Task Manager`),
+		el("p").append(T`
+			Kanban-style task management app with drag-and-drop and localStorage persistence. Complex state management
+			with signals, drag and drop functionality, local storage persistence, and responsive design for different
+			devices.
+		`),
+		el(example, { src: fileURL("./components/examples/case-studies/task-manager.js"), variant: "big", page_id }),
+
+
+		el(h3, t`TodoMVC`),
+		el("p").append(T`
+			Complete TodoMVC implementation with local storage and routing. TodoMVC implementation showing routing,
+			local storage persistence, filtering, and component architecture patterns. For commented code, see the
+			dedicated page ${el("a", { href: "./p10-todomvc.html" }).append(T`TodoMVC`)}.
+		`),
+
+	);
+}

src/dom-lib/el.js

@@ -38,11 +38,12 @@ import { scope } from "./scopes.js";
  * @returns {Element|DocumentFragment} Created element
  */
 export function createElement(tag, attributes, ...addons){
-	/* jshint maxcomplexity: 15 */
+	/* jshint maxcomplexity: 16 */
 	const s= signals(this);
 	let scoped= 0;
 	let el, el_host;
-	if(Object(attributes)!==attributes || s.isSignal(attributes))
+	const att_type= typeof attributes;
+	if(att_type==="string" || att_type==="number" || s.isSignal(attributes))
 		attributes= { textContent: attributes };
 	switch(true){
 		case typeof tag==="function": {

src/signals-lib/helpers.js

@@ -9,7 +9,8 @@ export const mark= "__dde_signal";
  * @type {Function}
  */
 export const queueSignalWrite= (()=> {
-	let pendingSignals= new Set();
+	/** @type {Map<ddeSignal, boolean>} */
+	let pendingSignals= new Map();
 	let scheduled= false;
 
 	/**
@@ -19,19 +20,20 @@ export const queueSignalWrite= (()=> {
 	function flushSignals() {
 		scheduled = false;
 		const todo= pendingSignals;
-		pendingSignals= new Set();
-		for(const signal of todo){
+		pendingSignals= new Map();
+		for(const [ signal, force ] of todo){
 			const M = signal[mark];
-			if(M) M.listeners.forEach(l => l(M.value));
+			if(M) M.listeners.forEach(l => l(M.value, force));
 		}
 	}
 
 	/**
 	 * Queues a signal for update
-	 * @param {Object} s - Signal to queue
+	 * @param {ddeSignal} s - Signal to queue
+	 * @param {boolean} force - Forced update
 	 */
-	return function(s){
-		pendingSignals.add(s);
+	return function(s, force= false){
+		pendingSignals.set(s, pendingSignals.get(s) || force);
 		if(scheduled) return;
 		scheduled = true;
 		queueMicrotask(flushSignals);

src/signals-lib/signals-lib.js

@@ -57,12 +57,12 @@ export function signal(value, actions){
 	 * Updates the derived signal when dependencies change
 	 * @private
 	 */
-	function contextReWatch(){
+	function contextReWatch(_, force){
 		const [ origin, ...deps_old ]= deps.get(contextReWatch);
 		deps.set(contextReWatch, new Set([ origin ]));
 
 		stack_watch.push(contextReWatch);
-		write(out, value());
+		write(out, value(), force);
 		stack_watch.pop();
 
 		if(!deps_old.length) return;
@@ -95,7 +95,7 @@ signal.action= function(s, name, ...a){
 		throw new Error(`Action "${name}" not defined. See ${mark}.actions.`);
 	actions[name].apply(M, a);
 	if(M.skip) return (delete M.skip);
-	queueSignalWrite(s);
+	queueSignalWrite(s, true);
 };
 
 /**
@@ -434,7 +434,7 @@ function write(s, value, force){
 	if(!M || (!force && M.value===value)) return;
 
 	M.value= value;
-	queueSignalWrite(s);
+	queueSignalWrite(s, force);
 	return value;
 }