@hypen-space/web 0.2.12 → 0.3.0

package/src/dom/applicators/font.ts

@@ -1,9 +1,78 @@
 /**
- * Font Applicators
+ * Font Applicators with Google Fonts support
  */
 
 import type { ApplicatorHandler } from "./index.js";
 
+// Track loaded Google Fonts to avoid duplicate link tags
+const loadedGoogleFonts = new Set<string>();
+
+// System font keywords that shouldn't be loaded from Google Fonts
+const systemFontKeywords = new Set([
+  "default", "system", "system-ui", "inherit", "initial", "unset",
+  "serif", "sans-serif", "monospace", "cursive", "fantasy",
+  "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Arial", "Helvetica",
+  "Times New Roman", "Georgia", "Courier New", "Verdana", "Tahoma",
+]);
+
+/**
+ * Check if a font name is a system font or generic CSS font.
+ */
+function isSystemFont(fontName: string): boolean {
+  const normalized = fontName.toLowerCase().trim();
+  return systemFontKeywords.has(normalized) ||
+         normalized.startsWith("-") ||
+         normalized.startsWith("ui-");
+}
+
+/**
+ * Load a Google Font by injecting a link tag.
+ * @param fontName - The Google Font name (e.g., "Roboto", "Open Sans")
+ */
+function loadGoogleFont(fontName: string): void {
+  const normalized = fontName.trim();
+
+  // Skip if already loaded or is a system font
+  if (loadedGoogleFonts.has(normalized) || isSystemFont(normalized)) {
+    return;
+  }
+
+  // Mark as loading to avoid duplicates
+  loadedGoogleFonts.add(normalized);
+
+  // Create link element for Google Fonts
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(normalized)}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+
+  // Add to document head
+  document.head.appendChild(link);
+}
+
+/**
+ * Parse a fontFamily value and load any Google Fonts.
+ * Returns a CSS-safe font-family string.
+ */
+function processFontFamily(value: string): string {
+  // Split by comma to handle font stacks
+  const fonts = value.split(",").map(f => f.trim().replace(/["']/g, ""));
+
+  for (const font of fonts) {
+    if (!isSystemFont(font)) {
+      loadGoogleFont(font);
+    }
+  }
+
+  // Return original value with proper quoting for CSS
+  return fonts.map(f => {
+    // Quote font names that contain spaces or special characters
+    if (f.includes(" ") && !f.startsWith('"') && !f.startsWith("'")) {
+      return `"${f}"`;
+    }
+    return f;
+  }).join(", ");
+}
+
 export const fontHandlers: Record<string, ApplicatorHandler> = {
   fontSize: (el, value) => {
     el.style.fontSize = typeof value === "number" ? `${value}px` : String(value);
@@ -14,7 +83,9 @@ export const fontHandlers: Record<string, ApplicatorHandler> = {
   },
 
   fontFamily: (el, value) => {
-    el.style.fontFamily = String(value);
+    const fontValue = String(value);
+    // Process font family and load Google Fonts as needed
+    el.style.fontFamily = processFontFamily(fontValue);
   },
 
   textAlign: (el, value) => {
@@ -24,4 +95,58 @@ export const fontHandlers: Record<string, ApplicatorHandler> = {
   lineHeight: (el, value) => {
     el.style.lineHeight = String(value);
   },
+
+  fontStyle: (el, value) => {
+    // Support: normal, italic, oblique
+    el.style.fontStyle = String(value);
+  },
+
+  textTransform: (el, value) => {
+    // Support: none, capitalize, uppercase, lowercase
+    el.style.textTransform = String(value);
+  },
+};
+
+// Export the font loading utility for manual use
+export const GoogleFonts = {
+  /**
+   * Preload a Google Font before it's used.
+   */
+  preload: loadGoogleFont,
+
+  /**
+   * Check if a font has been loaded.
+   */
+  isLoaded: (fontName: string) => loadedGoogleFonts.has(fontName.trim()),
+
+  /**
+   * Get list of loaded fonts.
+   */
+  getLoadedFonts: () => Array.from(loadedGoogleFonts),
+
+  /**
+   * Popular Google Fonts for reference.
+   */
+  popular: [
+    "Roboto",
+    "Open Sans",
+    "Lato",
+    "Montserrat",
+    "Poppins",
+    "Inter",
+    "Nunito",
+    "Playfair Display",
+    "Merriweather",
+    "Source Code Pro",
+    "Fira Code",
+    "JetBrains Mono",
+    "Raleway",
+    "Ubuntu",
+    "Oswald",
+    "Quicksand",
+    "Work Sans",
+    "Rubik",
+    "Karla",
+    "DM Sans",
+  ],
 };

package/src/dom/applicators/index.ts

@@ -6,6 +6,47 @@
 
 export type ApplicatorHandler = (element: HTMLElement, value: any) => void;
 
+/**
+ * Tailwind breakpoint values for responsive variants
+ */
+const BREAKPOINTS: Record<string, string> = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};
+
+/**
+ * Singleton stylesheet for variant CSS rules
+ */
+let variantStyleSheet: CSSStyleSheet | null = null;
+
+/**
+ * Track inserted rules to avoid duplicates
+ */
+const insertedRules = new Set<string>();
+
+/**
+ * Get or create the variant stylesheet
+ */
+function getVariantStyleSheet(): CSSStyleSheet {
+  if (!variantStyleSheet) {
+    const style = document.createElement('style');
+    style.id = 'hypen-variants';
+    document.head.appendChild(style);
+    variantStyleSheet = style.sheet as CSSStyleSheet;
+  }
+  return variantStyleSheet;
+}
+
+/**
+ * Generate a simple hash for deduplication
+ */
+function hashValue(value: any): string {
+  return String(value).replace(/[^a-zA-Z0-9]/g, '').slice(0, 8);
+}
+
 export class ApplicatorRegistry {
   private handlers: Map<string, ApplicatorHandler> = new Map();
   private elementState: WeakMap<HTMLElement, Map<string, any>> = new WeakMap();
@@ -245,18 +286,87 @@ export class ApplicatorRegistry {
   }
 
   /**
-   * Set a CSS property with automatic unit handling
+   * Set a CSS property with automatic unit handling and variant support
    */
   private setStyleProperty(element: HTMLElement, name: string, value: any): void {
-    // Convert camelCase to kebab-case
-    const cssName = name.replace(/([A-Z])/g, "-$1").toLowerCase();
+    const atIndex = name.indexOf('@');
+    const colonIndex = name.indexOf(':');
+
+    // Responsive variant: padding@md, width@lg, etc.
+    if (atIndex !== -1) {
+      const prop = name.slice(0, atIndex);
+      const breakpoint = name.slice(atIndex + 1);
+      const minWidth = BREAKPOINTS[breakpoint];
+
+      if (minWidth) {
+        const cssName = this.toKebabCase(prop);
+        const cssValue = this.formatCssValue(cssName, value);
+        const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${breakpoint}-${hashValue(value)}`;
+        const ruleKey = `${className}:${cssValue}`;
+
+        // Avoid duplicate rule insertion
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
+          sheet.insertRule(
+            `@media (min-width: ${minWidth}) { .${className} { ${cssName}: ${cssValue}; } }`,
+            sheet.cssRules.length
+          );
+          insertedRules.add(ruleKey);
+        }
 
-    // Add units for numeric values on size properties
+        element.classList.add(className);
+      }
+      return;
+    }
+
+    // State variant: background-color:hover, border-color:focus, etc.
+    if (colonIndex !== -1) {
+      const prop = name.slice(0, colonIndex);
+      const state = name.slice(colonIndex + 1);
+
+      // Only handle known CSS pseudo-states
+      const validStates = ['hover', 'focus', 'active', 'disabled', 'focus-visible', 'focus-within'];
+      if (validStates.includes(state)) {
+        const cssName = this.toKebabCase(prop);
+        const cssValue = this.formatCssValue(cssName, value);
+        const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${state}-${hashValue(value)}`;
+        const ruleKey = `${className}:${cssValue}`;
+
+        // Avoid duplicate rule insertion
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
+          sheet.insertRule(
+            `.${className}:${state} { ${cssName}: ${cssValue}; }`,
+            sheet.cssRules.length
+          );
+          insertedRules.add(ruleKey);
+        }
+
+        element.classList.add(className);
+      }
+      return;
+    }
+
+    // Normal property: convert camelCase to kebab-case and apply
+    const cssName = this.toKebabCase(name);
+    element.style.setProperty(cssName, this.formatCssValue(cssName, value));
+  }
+
+  /**
+   * Convert camelCase to kebab-case
+   */
+  private toKebabCase(name: string): string {
+    return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+
+  /**
+   * Format a CSS value with automatic unit handling
+   */
+  private formatCssValue(cssName: string, value: any): string {
     if (typeof value === "number" && this.needsUnit(cssName)) {
-      element.style.setProperty(cssName, `${value}px`);
-    } else {
-      element.style.setProperty(cssName, String(value));
+      return `${value}px`;
     }
+    return String(value);
   }
 
   /**

package/src/dom/applicators/layout.ts

@@ -4,10 +4,46 @@
 
 import type { ApplicatorHandler } from "./index.js";
 
+/**
+ * Maps Hypen alignment values to CSS flexbox values.
+ * Ensures consistent cross-platform API (Android/iOS/Web).
+ */
+function mapAlignmentValue(value: string): string {
+  const v = String(value).toLowerCase();
+  switch (v) {
+    // Positional values -> CSS equivalents
+    case "top":
+    case "start":
+    case "leading":
+    case "left":
+      return "flex-start";
+    case "bottom":
+    case "end":
+    case "trailing":
+    case "right":
+      return "flex-end";
+    case "center":
+      return "center";
+    // Spacing values -> CSS equivalents
+    case "spacebetween":
+    case "space-between":
+      return "space-between";
+    case "spacearound":
+    case "space-around":
+      return "space-around";
+    case "spaceevenly":
+    case "space-evenly":
+      return "space-evenly";
+    // Pass through CSS values as-is
+    default:
+      return v;
+  }
+}
+
 export const layoutHandlers: Record<string, ApplicatorHandler> = {
   // Unified alignment API - works for both Column and Row
   verticalAlignment: (el, value) => {
-    const val = String(value);
+    const val = mapAlignmentValue(String(value));
     // Check flex-direction to determine which CSS property to set
     const flexDirection = getComputedStyle(el).flexDirection;
     if (flexDirection === "column" || flexDirection === "column-reverse") {
@@ -20,7 +56,7 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   horizontalAlignment: (el, value) => {
-    const val = String(value);
+    const val = mapAlignmentValue(String(value));
     // Check flex-direction to determine which CSS property to set
     const flexDirection = getComputedStyle(el).flexDirection;
     if (flexDirection === "column" || flexDirection === "column-reverse") {
@@ -34,11 +70,11 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
 
   // Legacy aliases (kept for backward compatibility)
   horizontalAlign: (el, value) => {
-    el.style.justifyContent = String(value);
+    el.style.justifyContent = mapAlignmentValue(String(value));
   },
 
   verticalAlign: (el, value) => {
-    el.style.alignItems = String(value);
+    el.style.alignItems = mapAlignmentValue(String(value));
   },
 
   gap: (el, value) => {

package/src/dom/applicators/size.ts

@@ -1,52 +1,137 @@
 /**
  * Size Applicators
+ *
+ * Cross-platform sizing value support:
+ * - Numbers: treated as px (platform default)
+ * - "100px": absolute pixels (1px = 1px everywhere)
+ * - "100dp" / "100pt": density-independent (1dp ≈ 1pt, scaled by device)
+ * - "50%": percentage of parent
+ * - "50vw" / "50vh": viewport width/height
+ * - "fill" / "100%": fill available space
+ * - "wrap" / "auto": fit content
  */
 
 import type { ApplicatorHandler } from "./index.js";
 
+/**
+ * Parse a size value and return CSS-compatible string.
+ * Ensures cross-platform compatibility with Android/iOS.
+ */
+function parseSizeValue(value: any): string | null {
+  if (value === null || value === undefined) return null;
+
+  // Numbers default to px
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+
+  const str = String(value).trim().toLowerCase();
+
+  // Keywords
+  switch (str) {
+    case "fill":
+    case "match_parent":
+      return "100%";
+    case "wrap":
+    case "wrap_content":
+    case "auto":
+      return "auto";
+    case "infinity":
+    case "inf":
+    case "max":
+      return "100%";
+  }
+
+  // Parse value with unit
+  const match = str.match(/^(-?[\d.]+)\s*(px|dp|pt|%|vw|vh|vmin|vmax|em|rem)?$/);
+  if (!match) {
+    // Pass through other CSS values as-is (e.g., "calc(...)", "fit-content")
+    return str;
+  }
+
+  const num = parseFloat(match[1]);
+  const unit = match[2] || "px";
+
+  switch (unit) {
+    case "px":
+      // Absolute pixels - use as-is
+      return `${num}px`;
+    case "dp":
+    case "pt":
+      // Density-independent points
+      // On web, 1dp/1pt ≈ 1px at standard density (96dpi)
+      // CSS already handles this via px, so we just use px
+      // For true density independence, we'd need to query devicePixelRatio
+      // but CSS px is already defined as 1/96th of an inch
+      return `${num}px`;
+    case "%":
+      return `${num}%`;
+    case "vw":
+      return `${num}vw`;
+    case "vh":
+      return `${num}vh`;
+    case "vmin":
+      return `${num}vmin`;
+    case "vmax":
+      return `${num}vmax`;
+    case "em":
+      return `${num}em`;
+    case "rem":
+      return `${num}rem`;
+    default:
+      return `${num}px`;
+  }
+}
+
 export const sizeHandlers: Record<string, ApplicatorHandler> = {
   width: (el, value) => {
-    el.style.width = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.width = size;
   },
 
   height: (el, value) => {
-    el.style.height = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.height = size;
   },
 
   minWidth: (el, value) => {
-    el.style.minWidth = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.minWidth = size;
   },
 
   minHeight: (el, value) => {
-    el.style.minHeight = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.minHeight = size;
   },
 
   maxWidth: (el, value) => {
-    el.style.maxWidth = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.maxWidth = size;
   },
 
   maxHeight: (el, value) => {
-    el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
+    const size = parseSizeValue(value);
+    if (size) el.style.maxHeight = size;
   },
 
   // Combined size applicator - sets both width and height
   size: (el, value) => {
-    if (typeof value === "number") {
-      el.style.width = `${value}px`;
-      el.style.height = `${value}px`;
-    } else if (typeof value === "object" && value !== null) {
+    if (typeof value === "object" && value !== null) {
       const obj = value as Record<string, any>;
       if (obj.width !== undefined) {
-        el.style.width = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        const w = parseSizeValue(obj.width);
+        if (w) el.style.width = w;
       }
       if (obj.height !== undefined) {
-        el.style.height = typeof obj.height === "number" ? `${obj.height}px` : String(obj.height);
+        const h = parseSizeValue(obj.height);
+        if (h) el.style.height = h;
       }
     } else {
-      // Single value for both
-      const size = String(value);
-      el.style.width = size;
-      el.style.height = size;
+      const size = parseSizeValue(value);
+      if (size) {
+        el.style.width = size;
+        el.style.height = size;
+      }
     }
   },