@hypen-space/web 0.2.0

package/src/dom/applicators/typography.ts

@@ -0,0 +1,91 @@
+/**
+ * Typography Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const typographyHandlers: Record<string, ApplicatorHandler> = {
+  textAlign: (el, value) => {
+    el.style.textAlign = String(value);
+  },
+
+  textTransform: (el, value) => {
+    el.style.textTransform = String(value);
+  },
+
+  textDecoration: (el, value) => {
+    el.style.textDecoration = String(value);
+  },
+
+  textDecorationColor: (el, value) => {
+    el.style.textDecorationColor = String(value);
+  },
+
+  textDecorationStyle: (el, value) => {
+    el.style.textDecorationStyle = String(value);
+  },
+
+  textDecorationThickness: (el, value) => {
+    el.style.textDecorationThickness = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  letterSpacing: (el, value) => {
+    el.style.letterSpacing = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  wordSpacing: (el, value) => {
+    el.style.wordSpacing = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  lineHeight: (el, value) => {
+    el.style.lineHeight = String(value);
+  },
+
+  textIndent: (el, value) => {
+    el.style.textIndent = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  textOverflow: (el, value) => {
+    el.style.textOverflow = String(value);
+  },
+
+  whiteSpace: (el, value) => {
+    el.style.whiteSpace = String(value);
+  },
+
+  wordBreak: (el, value) => {
+    el.style.wordBreak = String(value);
+  },
+
+  verticalAlign: (el, value) => {
+    el.style.verticalAlign = String(value);
+  },
+
+  fontVariant: (el, value) => {
+    el.style.fontVariant = String(value);
+  },
+
+  fontStretch: (el, value) => {
+    el.style.fontStretch = String(value);
+  },
+
+  fontStyle: (el, value) => {
+    el.style.fontStyle = String(value);
+  },
+
+  writingMode: (el, value) => {
+    el.style.writingMode = String(value);
+  },
+
+  maxLines: (el, value) => {
+    const lines = typeof value === "number" ? value : parseInt(String(value), 10);
+    if (!isNaN(lines) && lines > 0) {
+      el.style.display = "-webkit-box";
+      el.style.setProperty("-webkit-line-clamp", String(lines));
+      el.style.setProperty("-webkit-box-orient", "vertical");
+      el.style.overflow = "hidden";
+    }
+  },
+};
+
+

package/src/dom/canvas/index.ts

@@ -0,0 +1,60 @@
+/**
+ * Canvas Component with Applicators
+ *
+ * Special handling for canvas rendering
+ */
+
+import type { ComponentHandler } from "../components/index.js";
+import type { ApplicatorHandler } from "../applicators/index.js";
+
+export const canvasHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("canvas");
+    el.dataset.hypenType = "canvas";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const canvas = el as HTMLCanvasElement;
+
+    if (props.width !== undefined) {
+      canvas.width = Number(props.width);
+    }
+
+    if (props.height !== undefined) {
+      canvas.height = Number(props.height);
+    }
+  },
+};
+
+/**
+ * Canvas applicators - special drawing commands
+ */
+export const canvasApplicators: Record<string, ApplicatorHandler> = {
+  // Fill style
+  fillStyle: (el, value) => {
+    const canvas = el as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.fillStyle = String(value);
+    }
+  },
+
+  // Stroke style
+  strokeStyle: (el, value) => {
+    const canvas = el as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.strokeStyle = String(value);
+    }
+  },
+
+  // Line width
+  lineWidth: (el, value) => {
+    const canvas = el as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.lineWidth = Number(value);
+    }
+  },
+};

package/src/dom/components/audio.ts

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

package/src/dom/components/avatar.ts

@@ -0,0 +1,49 @@
+/**
+ * Avatar Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const avatarHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.dataset.hypenType = "avatar";
+    el.style.display = "inline-flex";
+    el.style.alignItems = "center";
+    el.style.justifyContent = "center";
+    el.style.width = "40px";
+    el.style.height = "40px";
+    el.style.borderRadius = "50%";
+    el.style.backgroundColor = "#9e9e9e";
+    el.style.color = "#fff";
+    el.style.fontSize = "16px";
+    el.style.fontWeight = "600";
+    el.style.overflow = "hidden";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Image source
+    if (props.src !== undefined) {
+      const img = document.createElement("img");
+      img.src = String(props.src);
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.style.objectFit = "cover";
+      el.innerHTML = "";
+      el.appendChild(img);
+    } else if (props.initials !== undefined) {
+      // Show initials
+      el.textContent = String(props.initials).toUpperCase();
+    }
+
+    // Size
+    if (props.size !== undefined) {
+      const size = typeof props.size === "number" ? `${props.size}px` : String(props.size);
+      el.style.width = size;
+      el.style.height = size;
+    }
+  },
+};
+
+

package/src/dom/components/badge.ts

@@ -0,0 +1,45 @@
+/**
+ * Badge Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const badgeHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("span");
+    el.dataset.hypenType = "badge";
+    el.style.display = "inline-block";
+    el.style.padding = "4px 8px";
+    el.style.borderRadius = "4px";
+    el.style.fontSize = "12px";
+    el.style.fontWeight = "600";
+    el.style.backgroundColor = "#e0e0e0";
+    el.style.color = "#333";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Theme
+    if (props.theme !== undefined) {
+      const theme = String(props.theme);
+      const themeColors: Record<string, { bg: string; color: string }> = {
+        success: { bg: "#4CAF50", color: "#fff" },
+        error: { bg: "#f44336", color: "#fff" },
+        warning: { bg: "#ff9800", color: "#fff" },
+        info: { bg: "#2196F3", color: "#fff" },
+        default: { bg: "#e0e0e0", color: "#333" },
+      };
+      const colors = themeColors[theme] || themeColors.default;
+      el.style.backgroundColor = colors.bg;
+      el.style.color = colors.color;
+    }
+
+    // Text content
+    const text = props["0"] || props.text;
+    if (text !== undefined) {
+      el.textContent = String(text);
+    }
+  },
+};
+
+

package/src/dom/components/button.ts

@@ -0,0 +1,13 @@
+/**
+ * Button Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const buttonHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("button");
+    el.dataset.hypenType = "button";
+    return el;
+  },
+};

package/src/dom/components/card.ts

@@ -0,0 +1,19 @@
+/**
+ * Card Component - Container with default styling
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const cardHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.dataset.hypenType = "card";
+    el.style.backgroundColor = "#ffffff";
+    el.style.borderRadius = "8px";
+    el.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+    el.style.padding = "16px";
+    return el;
+  },
+};
+
+

package/src/dom/components/center.ts

@@ -0,0 +1,16 @@
+/**
+ * Center Component - Centers content
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const centerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "flex";
+    el.style.alignItems = "center";
+    el.style.justifyContent = "center";
+    el.dataset.hypenType = "center";
+    return el;
+  },
+};

package/src/dom/components/checkbox.ts

@@ -0,0 +1,54 @@
+/**
+ * Checkbox Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const checkboxHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const wrapper = document.createElement("label");
+    wrapper.dataset.hypenType = "checkbox";
+    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.hypenCheckbox = "true";
+    
+    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;
+
+    // Checked state
+    if (props.checked !== undefined) {
+      input.checked = Boolean(props.checked);
+    }
+
+    // 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/column.ts

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

package/src/dom/components/container.ts

@@ -0,0 +1,13 @@
+/**
+ * Container/Box Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const containerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.dataset.hypenType = "container";
+    return el;
+  },
+};

package/src/dom/components/divider.ts

@@ -0,0 +1,37 @@
+/**
+ * Divider Component - Visual separator
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const dividerHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("hr");
+    el.dataset.hypenType = "divider";
+    el.style.border = "none";
+    el.style.borderTop = "1px solid #e0e0e0";
+    el.style.margin = "0";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Thickness
+    if (props.thickness !== undefined) {
+      const thickness = typeof props.thickness === "number" 
+        ? `${props.thickness}px` 
+        : String(props.thickness);
+      el.style.borderTopWidth = thickness;
+    }
+
+    // Orientation
+    if (props.orientation === "vertical") {
+      el.style.borderTop = "none";
+      el.style.borderLeft = "1px solid #e0e0e0";
+      el.style.height = "100%";
+      el.style.width = "0";
+      el.style.display = "inline-block";
+    }
+  },
+};
+
+

package/src/dom/components/grid.ts

@@ -0,0 +1,40 @@
+/**
+ * Grid Component - CSS Grid Layout
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const gridHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("div");
+    el.style.display = "grid";
+    el.dataset.hypenType = "grid";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Columns
+    if (props.columns !== undefined) {
+      const columns = typeof props.columns === "number"
+        ? `repeat(${props.columns}, 1fr)`
+        : String(props.columns);
+      el.style.gridTemplateColumns = columns;
+    }
+
+    // Rows
+    if (props.rows !== undefined) {
+      const rows = typeof props.rows === "number"
+        ? `repeat(${props.rows}, 1fr)`
+        : String(props.rows);
+      el.style.gridTemplateRows = rows;
+    }
+
+    // Gap
+    if (props.gap !== undefined) {
+      const gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
+      el.style.gap = gap;
+    }
+  },
+};
+
+

package/src/dom/components/heading.ts

@@ -0,0 +1,41 @@
+/**
+ * Heading Component - Semantic headings (h1-h6)
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const headingHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("h2");
+    el.dataset.hypenType = "heading";
+    return el;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    // Level property (1-6)
+    if (props.level !== undefined) {
+      const level = Math.max(1, Math.min(6, Number(props.level)));
+      const newEl = document.createElement(`h${level}`);
+      newEl.dataset.hypenType = "heading";
+      
+      // Copy content and attributes
+      newEl.innerHTML = el.innerHTML;
+      Array.from(el.attributes).forEach(attr => {
+        newEl.setAttribute(attr.name, attr.value);
+      });
+      
+      // Replace the element
+      if (el.parentNode) {
+        el.parentNode.replaceChild(newEl, el);
+      }
+    }
+
+    // Text content
+    const text = props["0"] || props.text;
+    if (text !== undefined) {
+      el.textContent = String(text);
+    }
+  },
+};
+
+

package/src/dom/components/image.ts

@@ -0,0 +1,27 @@
+/**
+ * Image Component
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const imageHandler: ComponentHandler = {
+  create(): HTMLElement {
+    const el = document.createElement("img");
+    el.dataset.hypenType = "image";
+    return el as any as HTMLElement;
+  },
+
+  applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const img = el as HTMLImageElement;
+
+    // Support url, src, or first positional argument
+    const src = props["0"] || props.url || props.src;
+    if (src !== undefined) {
+      img.src = String(src);
+    }
+
+    if (props.alt !== undefined) {
+      img.alt = String(props.alt);
+    }
+  },
+};

package/src/dom/components/index.ts

@@ -0,0 +1,115 @@
+/**
+ * Component Registry
+ *
+ * Manages mappings from Hypen component types to DOM elements
+ */
+
+export interface ComponentHandler {
+  create(): HTMLElement;
+  applyProps?(element: HTMLElement, props: Record<string, any>): void;
+}
+
+export class ComponentRegistry {
+  private handlers: Map<string, ComponentHandler> = new Map();
+
+  constructor() {
+    this.registerDefaults();
+  }
+
+  /**
+   * Register a component handler
+   */
+  register(type: string, handler: ComponentHandler): void {
+    this.handlers.set(type.toLowerCase(), handler);
+  }
+
+  /**
+   * Get handler for a component type
+   */
+  get(type: string): ComponentHandler | undefined {
+    return this.handlers.get(type.toLowerCase());
+  }
+
+  /**
+   * Create element for a component type
+   */
+  createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {
+    const handler = this.get(type);
+    if (!handler) return null;
+
+    const element = handler.create();
+    if (handler.applyProps) {
+      handler.applyProps(element, props);
+    }
+    return element;
+  }
+
+  /**
+   * Register all default Hypen components
+   */
+  private registerDefaults(): void {
+    // Import and register all component handlers
+    const { columnHandler } = require("./column.js");
+    const { rowHandler } = require("./row.js");
+    const { textHandler } = require("./text.js");
+    const { imageHandler } = require("./image.js");
+    const { buttonHandler } = require("./button.js");
+    const { containerHandler } = require("./container.js");
+    const { centerHandler } = require("./center.js");
+    const { listHandler } = require("./list.js");
+    const { inputHandler } = require("./input.js");
+    const { linkHandler } = require("./link.js");
+    const { textareaHandler } = require("./textarea.js");
+    const { checkboxHandler } = require("./checkbox.js");
+    const { selectHandler } = require("./select.js");
+    const { spacerHandler } = require("./spacer.js");
+    const { stackHandler } = require("./stack.js");
+    const { dividerHandler } = require("./divider.js");
+    const { gridHandler } = require("./grid.js");
+    const { cardHandler } = require("./card.js");
+    const { headingHandler } = require("./heading.js");
+    const { switchHandler } = require("./switch.js");
+    const { sliderHandler } = require("./slider.js");
+    const { spinnerHandler } = require("./spinner.js");
+    const { badgeHandler } = require("./badge.js");
+    const { avatarHandler } = require("./avatar.js");
+    const { progressBarHandler } = require("./progressbar.js");
+    const { videoHandler } = require("./video.js");
+    const { audioHandler } = require("./audio.js");
+    const { paragraphHandler } = require("./paragraph.js");
+    const { routerHandler } = require("./router.js");
+    const { routeHandler } = require("./route.js");
+
+    this.register("column", columnHandler);
+    this.register("row", rowHandler);
+    this.register("text", textHandler);
+    this.register("image", imageHandler);
+    this.register("button", buttonHandler);
+    this.register("container", containerHandler);
+    this.register("box", containerHandler);
+    this.register("center", centerHandler);
+    this.register("list", listHandler);
+    this.register("input", inputHandler);
+    this.register("link", linkHandler);
+    this.register("textarea", textareaHandler);
+    this.register("checkbox", checkboxHandler);
+    this.register("select", selectHandler);
+    this.register("spacer", spacerHandler);
+    this.register("stack", stackHandler);
+    this.register("divider", dividerHandler);
+    this.register("grid", gridHandler);
+    this.register("card", cardHandler);
+    this.register("heading", headingHandler);
+    this.register("switch", switchHandler);
+    this.register("slider", sliderHandler);
+    this.register("spinner", spinnerHandler);
+    this.register("badge", badgeHandler);
+    this.register("avatar", avatarHandler);
+    this.register("progressbar", progressBarHandler);
+    this.register("video", videoHandler);
+    this.register("audio", audioHandler);
+    this.register("paragraph", paragraphHandler);
+    this.register("router", routerHandler);
+    this.register("route", routeHandler);
+  }
+}