🔤 UI/UX/wording

docs/components/examples/elements/dde-dom-create.js

@@ -2,9 +2,9 @@ import { el } from "deka-dom-el";
 
 // Create element with properties
 const button = el("button", {
-  textContent: "Click me",
-  className: "primary",
-  disabled: true
+	textContent: "Click me",
+	className: "primary",
+	disabled: true
 });
 
 // Shorter and more expressive

docs/components/examples/elements/native-dom-create.js

@@ -6,12 +6,12 @@ button.disabled = true;
 
 // Or using Object.assign()
 const button2 = Object.assign(
-  document.createElement('button'),
-  {
-    textContent: "Click me",
-    className: "primary",
-    disabled: true
-  }
+	document.createElement('button'),
+	{
+	textContent: "Click me",
+	className: "primary",
+	disabled: true
+	}
 );
 
 // Add to DOM

docs/components/examples/events/append-event.js

@@ -2,7 +2,7 @@ import { el, on } from "deka-dom-el";
 
 // Third approach - append with on addon
 el("button", {
-  textContent: "click me"
+	textContent: "click me"
 }).append(
-  on("click", (e) => console.log("Clicked!", e))
+	on("click", (e) => console.log("Clicked!", e))
 );

docs/components/examples/events/attribute-event.js

@@ -2,6 +2,6 @@ import { el } from "deka-dom-el";
 
 // Using events with HTML attribute style
 el("button", {
-  textContent: "click me",
-  "=onclick": "console.log(event)"
+	textContent: "click me",
+	"=onclick": "console.log(event)"
 });

docs/components/examples/events/chain-event.js

@@ -2,7 +2,7 @@ import { el, on } from "deka-dom-el";
 
 // Using events as addons - chainable approach
 el("button", {
-  textContent: "click me",
-}, 
-  on("click", (e) => console.log("Clicked!", e))
+	textContent: "click me",
+},
+	on("click", (e) => console.log("Clicked!", e))
 );

docs/components/examples/events/property-event.js

@@ -2,6 +2,6 @@ import { el } from "deka-dom-el";
 
 // Using events with property assignment
 el("button", {
-  textContent: "click me",
-  onclick: console.log
+	textContent: "click me",
+	onclick: console.log
 });

docs/components/examples/introducing/3ps-before.js

@@ -4,11 +4,11 @@ const button = document.querySelector('button');
 let count = 0;
 
 button.addEventListener('click', () => {
-  count++;
-  document.querySelector('p').textContent =
-    'Clicked ' + count + ' times';
+	count++;
+	document.querySelector('p').textContent =
+	'Clicked ' + count + ' times';
 
-  if (count > 10) {
-    button.disabled = true;
-  }
+	if (count > 10) {
+	button.disabled = true;
+	}
 });

docs/components/examples/introducing/3ps.js

@@ -4,11 +4,11 @@ const count = S(0);
 
 // 2. React to state changes
 S.on(count, value => {
-  updateUI(value);
-  if (value > 10) disableButton();
+	updateUI(value);
+	if (value > 10) disableButton();
 });
 
 // 3. Update state on events
 button.addEventListener('click', () => {
-  count.set(count.get() + 1);
+	count.set(count.get() + 1);
 });

docs/components/examples/introducing/helloWorld.js

@@ -3,28 +3,28 @@ import { S } from "deka-dom-el/signals";
 
 // A HelloWorld component using the 3PS pattern
 function HelloWorld({ emoji = "🚀" }) {
-  // PART 1: Create reactive state
-  const clicks = S(0);
-  
-  return el().append(
-    // PART 2: Bind state to UI elements
-    el("p", {
-      className: "greeting",
-      // This paragraph automatically updates when clicks changes
-      textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
-    }),
-    
-    // PART 3: Update state in response to events
-    el("button", {
-      type: "button",
-      textContent: "Add emoji",
-      // When clicked, update the state
-      onclick: () => clicks.set(clicks.get() + 1)
-    })
-  );
+	// PART 1: Create reactive state
+	const clicks = S(0);
+
+	return el().append(
+	// PART 2: Bind state to UI elements
+	el("p", {
+		className: "greeting",
+		// This paragraph automatically updates when clicks changes
+		textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
+	}),
+
+	// PART 3: Update state in response to events
+	el("button", {
+		type: "button",
+		textContent: "Add emoji",
+		// When clicked, update the state
+		onclick: () => clicks.set(clicks.get() + 1)
+	})
+	);
 }
 
 // Use the component in your app
 document.body.append(
-  el(HelloWorld, { emoji: "🎉" })
+	el(HelloWorld, { emoji: "🎉" })
 );

docs/components/examples/scopes/custom-scope.js

@@ -2,13 +2,13 @@ import { scope } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 
 function customSignalLogic() {
-  // Create an isolated scope for a specific operation
-  scope.push(); // Start new scope
+	// Create an isolated scope for a specific operation
+	scope.push(); // Start new scope
 
-  // These signals are in the new scope
-  const isolatedCount = S(0);
-  const isolatedDerived = S(() => isolatedCount.get() * 2);
+	// These signals are in the new scope
+	const isolatedCount = S(0);
+	const isolatedDerived = S(() => isolatedCount.get() * 2);
 
-  // Clean up by returning to previous scope
-  scope.pop();
+	// Clean up by returning to previous scope
+	scope.pop();
 }

docs/components/examples/scopes/with-scope.js

@@ -2,44 +2,44 @@ import { el, scope } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 
 function CounterWithIsolatedTimer() {
-  const { host } = scope;
+	const { host } = scope;
 
-  // Main component state
-  const count = S(0);
+	// Main component state
+	const count = S(0);
 
-  // Create a timer in an isolated scope
-  scope.isolate(() => {
-    // These subscriptions won't be tied to the component lifecycle
-    // They would continue to run even if the component was removed
-    const timer = S(0);
+	// Create a timer in an isolated scope
+	scope.isolate(() => {
+	// These subscriptions won't be tied to the component lifecycle
+	// They would continue to run even if the component was removed
+	const timer = S(0);
 
-    // Not recommended for real applications!
-    // Just demonstrating scope isolation
-    setInterval(() => {
-      timer.set(timer.get() + 1);
-      console.log(`Timer: ${timer.get()}`);
-    }, 1000);
-  });
+	// Not recommended for real applications!
+	// Just demonstrating scope isolation
+	setInterval(() => {
+		timer.set(timer.get() + 1);
+		console.log(`Timer: ${timer.get()}`);
+	}, 1000);
+	});
 
-  // Normal component functionality within main scope
-  function increment() {
-    count.set(count.get() + 1);
-  }
+	// Normal component functionality within main scope
+	function increment() {
+	count.set(count.get() + 1);
+	}
 
-  return el("div").append(
-    el("p").append(
-      "Count: ",
-      el("#text", S(() => count.get()))
-    ),
-    el("button", {
-      textContent: "Increment",
-      onclick: increment
-    }),
-    el("p", "An isolated timer runs in console")
-  );
+	return el("div").append(
+	el("p").append(
+		"Count: ",
+		el("#text", S(() => count.get()))
+	),
+	el("button", {
+		textContent: "Increment",
+		onclick: increment
+	}),
+	el("p", "An isolated timer runs in console")
+	);
 }
 
 // Usage
 document.body.append(
-  el(CounterWithIsolatedTimer)
+	el(CounterWithIsolatedTimer)
 );

docs/components/ireland.html.js

@@ -20,7 +20,7 @@ export function ireland({ src, exportName = "default", props = {} }) {
 	// relative src against the current directory
 	const path= "./"+relative(dir, src.pathname);
 	const id = "ireland-" + generateComponentId(src);
-	const element = el.mark({ type: "ireland", name: ireland.name });
+	const element = el.mark({ type: "later", name: ireland.name });
 	queue(import(path).then(module => {
 		const component = module[exportName];
 		element.replaceWith(el(component, props, mark(id)));