@hypen-space/web 0.2.0

package/src/dom/components/input.ts

@@ -0,0 +1,29 @@
+/**
+ * Input Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const inputHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("input");
+    el.dataset.hypenType = "input";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const input = el as HTMLInputElement;
+
+    if (props.type !== undefined) {
+      input.type = String(props.type);
+    }
+
+    if (props.placeholder !== undefined) {
+      input.placeholder = String(props.placeholder);
+    }
+
+    if (props.value !== undefined) {
+      input.value = String(props.value);
+    }
+  },
+};

package/src/dom/components/link.ts

@@ -0,0 +1,35 @@
+/**
+ * Link Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const linkHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("a");
+    el.dataset.hypenType = "link";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const anchor = el as HTMLAnchorElement;
+
+    // Support href or first positional argument
+    const href = props["0"] || props.href;
+    if (href !== undefined) {
+      anchor.href = String(href);
+    }
+
+    // Target property
+    if (props.target !== undefined) {
+      anchor.target = String(props.target);
+    }
+
+    // Rel property
+    if (props.rel !== undefined) {
+      anchor.rel = String(props.rel);
+    }
+  },
+};
+
+

package/src/dom/components/list.ts

@@ -0,0 +1,30 @@
+/**
+ * List Component - Scrollable stack
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const listHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "flex";
+    el.style.overflow = "auto";
+    el.dataset.hypenType = "list";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Direction: vertical or horizontal
+    const direction = props.direction || props["1"] || "vertical";
+    if (direction === "vertical") {
+      el.style.flexDirection = "column";
+    } else {
+      el.style.flexDirection = "row";
+    }
+
+    // Gap between items
+    if (props.gap !== undefined) {
+      el.style.gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
+    }
+  },
+};

package/src/dom/components/paragraph.ts

@@ -0,0 +1,23 @@
+/**
+ * Paragraph Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const paragraphHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("p");
+    el.dataset.hypenType = "paragraph";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Text content
+    const text = props["0"] || props.text;
+    if (text !== undefined) {
+      el.textContent = String(text);
+    }
+  },
+};
+
+

package/src/dom/components/progressbar.ts

@@ -0,0 +1,51 @@
+/**
+ * ProgressBar Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const progressBarHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const wrapper = document.createElement("div");
+    wrapper.dataset.hypenType = "progressbar";
+    wrapper.style.width = "100%";
+    wrapper.style.height = "8px";
+    wrapper.style.backgroundColor = "#e0e0e0";
+    wrapper.style.borderRadius = "4px";
+    wrapper.style.overflow = "hidden";
+
+    const bar = document.createElement("div");
+    bar.dataset.hypenBar = "true";
+    bar.style.height = "100%";
+    bar.style.backgroundColor = "#2196F3";
+    bar.style.transition = "width 0.3s ease";
+    bar.style.width = "0%";
+
+    wrapper.appendChild(bar);
+    return wrapper;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const bar = el.querySelector('[data-hypen-bar="true"]') as HTMLElement;
+    if (!bar) return;
+
+    // Value and max
+    const value = Number(props.value || 0);
+    const max = Number(props.max || 100);
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    bar.style.width = `${percentage}%`;
+
+    // Color
+    if (props.color !== undefined) {
+      bar.style.backgroundColor = String(props.color);
+    }
+
+    // Height
+    if (props.height !== undefined) {
+      const height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
+      el.style.height = height;
+    }
+  },
+};
+
+

package/src/dom/components/route.ts

@@ -0,0 +1,37 @@
+/**
+ * Route Component - Lazy rendering container for route content
+ * Stores component name as metadata, Router handles actual rendering
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const routeHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.width = "100%";
+    el.dataset.hypenType = "route";
+    el.dataset.routeRendered = "false"; // Track if component has been rendered
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Extract route path from props
+    const path = props.path || props["0"] || "/";
+    el.dataset.routePath = String(path);
+    
+    // Check if this is a lazy route (has __lazy flag)
+    const isLazy = props.__lazy === true;
+    el.dataset.routeLazy = String(isLazy);
+    
+    // Store component name - either from explicit prop or from lazy child
+    const componentName = props.component || props.__lazy_child;
+    if (componentName) {
+      el.dataset.routeComponent = String(componentName);
+    }
+    
+    console.log(`🛣️ Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || 'none'}"`);
+  },
+};
+

package/src/dom/components/router.ts

@@ -0,0 +1,22 @@
+/**
+ * Router Component - Container for routes
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const routerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.width = "100%";
+    el.dataset.hypenType = "router";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Router doesn't need special prop handling
+    // The routing logic is handled by the Router module
+  },
+};
+

package/src/dom/components/row.ts

@@ -0,0 +1,15 @@
+/**
+ * Row Component - Horizontal Stack
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const rowHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "flex";
+    el.style.flexDirection = "row";
+    el.dataset.hypenType = "row";
+    return el;
+  },
+};

package/src/dom/components/select.ts

@@ -0,0 +1,56 @@
+/**
+ * Select Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const selectHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("select");
+    el.dataset.hypenType = "select";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const select = el as HTMLSelectElement;
+
+    // Value property
+    if (props.value !== undefined) {
+      select.value = String(props.value);
+    }
+
+    // Disabled
+    if (props.disabled !== undefined) {
+      select.disabled = Boolean(props.disabled);
+    }
+
+    // Multiple
+    if (props.multiple !== undefined) {
+      select.multiple = Boolean(props.multiple);
+    }
+
+    // Options array
+    if (props.options && Array.isArray(props.options)) {
+      // Clear existing options
+      select.innerHTML = "";
+      
+      // Add new options
+      props.options.forEach((opt: any) => {
+        const option = document.createElement("option");
+        
+        if (typeof opt === "string") {
+          option.value = opt;
+          option.textContent = opt;
+        } else if (typeof opt === "object") {
+          option.value = String(opt.value ?? opt.label ?? "");
+          option.textContent = String(opt.label ?? opt.value ?? "");
+          if (opt.disabled) option.disabled = true;
+        }
+        
+        select.appendChild(option);
+      });
+    }
+  },
+};
+
+

package/src/dom/components/slider.ts

@@ -0,0 +1,45 @@
+/**
+ * Slider Component (Range Input)
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const sliderHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("input");
+    el.type = "range";
+    el.dataset.hypenType = "slider";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const input = el as HTMLInputElement;
+
+    // Value
+    if (props.value !== undefined) {
+      input.value = String(props.value);
+    }
+
+    // Min
+    if (props.min !== undefined) {
+      input.min = String(props.min);
+    }
+
+    // Max
+    if (props.max !== undefined) {
+      input.max = String(props.max);
+    }
+
+    // Step
+    if (props.step !== undefined) {
+      input.step = String(props.step);
+    }
+
+    // Disabled
+    if (props.disabled !== undefined) {
+      input.disabled = Boolean(props.disabled);
+    }
+  },
+};
+
+

package/src/dom/components/spacer.ts

@@ -0,0 +1,16 @@
+/**
+ * Spacer Component - Flexible space in flex layouts
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const spacerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.flex = "1";
+    el.dataset.hypenType = "spacer";
+    return el;
+  },
+};
+
+

package/src/dom/components/spinner.ts

@@ -0,0 +1,60 @@
+/**
+ * Spinner Component (Loading Indicator)
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const spinnerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const wrapper = document.createElement("div");
+    wrapper.dataset.hypenType = "spinner";
+    wrapper.style.display = "inline-block";
+
+    const spinner = document.createElement("div");
+    spinner.style.width = "40px";
+    spinner.style.height = "40px";
+    spinner.style.border = "4px solid #f3f3f3";
+    spinner.style.borderTop = "4px solid #3498db";
+    spinner.style.borderRadius = "50%";
+    spinner.style.animation = "spin 1s linear infinite";
+
+    // Add keyframe animation
+    const style = document.createElement("style");
+    style.textContent = `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `;
+    
+    wrapper.appendChild(style);
+    wrapper.appendChild(spinner);
+    
+    return wrapper;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const spinner = el.querySelector("div:not(style)") as HTMLElement;
+    if (!spinner) return;
+
+    // Size
+    if (props.size !== undefined) {
+      const size = String(props.size);
+      const sizeMap: Record<string, string> = {
+        small: "24px",
+        medium: "40px",
+        large: "60px",
+      };
+      const actualSize = sizeMap[size] || size;
+      spinner.style.width = actualSize;
+      spinner.style.height = actualSize;
+    }
+
+    // Color
+    if (props.color !== undefined) {
+      spinner.style.borderTopColor = String(props.color);
+    }
+  },
+};
+
+

package/src/dom/components/stack.ts

@@ -0,0 +1,34 @@
+/**
+ * Stack Component - Overlaying elements with absolute positioning
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const stackHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.position = "relative";
+    el.style.display = "flex";
+    el.dataset.hypenType = "stack";
+    
+    // Children will be absolutely positioned
+    const style = document.createElement("style");
+    style.textContent = `
+      [data-hypen-type="stack"] > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      [data-hypen-type="stack"] > *:first-child {
+        position: relative;
+      }
+    `;
+    el.appendChild(style);
+    
+    return el;
+  },
+};
+
+

package/src/dom/components/switch.ts

@@ -0,0 +1,86 @@
+/**
+ * Switch Component (Toggle)
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const switchHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const wrapper = document.createElement("label");
+    wrapper.dataset.hypenType = "switch";
+    wrapper.style.display = "inline-flex";
+    wrapper.style.alignItems = "center";
+    wrapper.style.gap = "8px";
+    wrapper.style.cursor = "pointer";
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.dataset.hypenSwitch = "true";
+    
+    // Style the switch
+    input.style.appearance = "none";
+    input.style.width = "44px";
+    input.style.height = "24px";
+    input.style.backgroundColor = "#ccc";
+    input.style.borderRadius = "12px";
+    input.style.position = "relative";
+    input.style.cursor = "pointer";
+    input.style.transition = "background-color 0.2s";
+    
+    // Add pseudo-element styling via CSS
+    const style = document.createElement("style");
+    style.textContent = `
+      input[data-hypen-switch="true"]::before {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        transition: transform 0.2s;
+      }
+      input[data-hypen-switch="true"]:checked {
+        background-color: #4CAF50;
+      }
+      input[data-hypen-switch="true"]:checked::before {
+        transform: translateX(20px);
+      }
+    `;
+    wrapper.appendChild(style);
+    wrapper.appendChild(input);
+    
+    return wrapper;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    if (!input) return;
+
+    // On state (checked)
+    if (props.on !== undefined) {
+      input.checked = Boolean(props.on);
+    }
+
+    // Disabled
+    if (props.disabled !== undefined) {
+      input.disabled = Boolean(props.disabled);
+    }
+
+    // Label text
+    const label = props["0"] || props.label;
+    if (label !== undefined) {
+      // Remove existing text node if any
+      const textNodes = Array.from(el.childNodes).filter(
+        node => node.nodeType === Node.TEXT_NODE
+      );
+      textNodes.forEach(node => node.remove());
+      
+      // Add new label text
+      el.appendChild(document.createTextNode(String(label)));
+    }
+  },
+};
+
+

package/src/dom/components/text.ts

@@ -0,0 +1,24 @@
+/**
+ * Text Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const textHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("span");
+    el.style.display = "inline-block";
+    el.dataset.hypenType = "text";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Text content from first positional arg or "text" prop
+    const text = props["0"] || props.text;
+    if (text !== undefined) {
+      // Store the original text template for state interpolation
+      el.dataset.textTemplate = String(text);
+      el.textContent = String(text);
+    }
+  },
+};

package/src/dom/components/textarea.ts

@@ -0,0 +1,50 @@
+/**
+ * Textarea Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const textareaHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("textarea");
+    el.dataset.hypenType = "textarea";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const textarea = el as HTMLTextAreaElement;
+
+    // Value property
+    const value = props["0"] || props.value;
+    if (value !== undefined) {
+      textarea.value = String(value);
+    }
+
+    // Placeholder
+    if (props.placeholder !== undefined) {
+      textarea.placeholder = String(props.placeholder);
+    }
+
+    // Rows
+    if (props.rows !== undefined) {
+      textarea.rows = Number(props.rows);
+    }
+
+    // Cols
+    if (props.cols !== undefined) {
+      textarea.cols = Number(props.cols);
+    }
+
+    // Disabled
+    if (props.disabled !== undefined) {
+      textarea.disabled = Boolean(props.disabled);
+    }
+
+    // Readonly
+    if (props.readonly !== undefined) {
+      textarea.readOnly = Boolean(props.readonly);
+    }
+  },
+};
+
+

package/src/dom/components/video.ts

@@ -0,0 +1,50 @@
+/**
+ * Video Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const videoHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("video");
+    el.dataset.hypenType = "video";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const video = el as HTMLVideoElement;
+
+    // Source
+    const src = props["0"] || props.src;
+    if (src !== undefined) {
+      video.src = String(src);
+    }
+
+    // Controls
+    if (props.controls !== undefined) {
+      video.controls = Boolean(props.controls);
+    }
+
+    // Autoplay
+    if (props.autoplay !== undefined) {
+      video.autoplay = Boolean(props.autoplay);
+    }
+
+    // Loop
+    if (props.loop !== undefined) {
+      video.loop = Boolean(props.loop);
+    }
+
+    // Muted
+    if (props.muted !== undefined) {
+      video.muted = Boolean(props.muted);
+    }
+
+    // Poster
+    if (props.poster !== undefined) {
+      video.poster = String(props.poster);
+    }
+  },
+};
+
+