hyperclayjs 1.1.1 → 1.2.0

package/README.md

@@ -55,7 +55,7 @@ import 'hyperclayjs/presets/standard.js';
 | Admin Features | 5.3KB | Hides admin inputs, scripts, contenteditable, onclick for regular viewers |
 | Edit Mode | 1.4KB | Toggle edit mode on/off |
 | Form Persistence | 2.2KB | Persist form values to the DOM with [persist] attribute |
-| Option Visibility | 4.4KB | Dynamic show/hide based on page state with option:attribute="value" |
+| Option Visibility | 4.4KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | Save Core | 5.9KB | Basic save function only - hyperclay.savePage() |
 | Save System | 4.9KB | Full save: save button, keyboard shortcut, auto-save, change tracking |
 
@@ -76,7 +76,7 @@ import 'hyperclayjs/presets/standard.js';
 | Dialog Functions | 7.7KB | ask(), consent(), tell(), snippet() functions |
 | Info Dialog | 3.2KB | Info dialog component |
 | Modal System | 18.4KB | Full modal window creation system - window.theModal |
-| Tailwind Play | 362.3KB | Live Tailwind CSS editing - updates styles based on classes in your HTML |
+| Tailwind Play | 362.3KB | Live Tailwind CSS editing - no need for a build system |
 | Toast Notifications | 7.3KB | Success/error message notifications - toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
@@ -93,11 +93,10 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| All.js (jQuery-like) | 13.8KB | Full DOM manipulation library |
+| All.js (jQuery-like) | 13.9KB | Full DOM manipulation library |
 | DOM Ready | 0.2KB | DOM ready callback |
 | Get Data From Form | 1.7KB | Extract form data as an object |
 | Style Injection | 0.8KB | Dynamic stylesheet injection |
-| Window Load | 0.2KB | Window load callback |
 
 ### String Utilities (String manipulation helpers)
 
@@ -112,7 +111,6 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Behavior Collector | 5.2KB | Tracks user interactions (mouse, scroll, keyboard) |
 | File Upload to App Owner | 10.4KB | File upload with progress |
 | Send Message to App Owner | 1.2KB | Message sending utility |
 
@@ -120,7 +118,7 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| DOM Morphing | 7.9KB | Efficient DOM updates |
+| Idiomorph | 7.9KB | Efficient DOM morphing library |
 
 ## Presets
 
@@ -134,7 +132,7 @@ Standard feature set for most use cases
 
 **Modules:** `save-core`, `save`, `admin`, `persist`, `ajax`, `events`, `helpers`, `toast`
 
-### Everything (~616.3KB)
+### Everything (~624.4KB)
 All available features
 
 Includes all available modules across all categories.

package/dom-utilities/All.js

@@ -343,13 +343,15 @@ const defaultPlugins = {
 const All = new Proxy(function (selectorOrElements, contextSelector) {
   // If there's a context selector, search within that context
   if (arguments.length === 2) {
-    if (typeof contextSelector !== 'string') {
-      throw new TypeError('Context selector must be a string');
+    // Support both string selectors and element references as context
+    let contextElements;
+    if (typeof contextSelector === 'string') {
+      contextElements = Array.from(document.querySelectorAll(contextSelector));
+    } else {
+      // Convert element/array/document to element array
+      contextElements = toElementArray(contextSelector);
     }
 
-    // Get the context element(s)
-    const contextElements = Array.from(document.querySelectorAll(contextSelector));
-
     // If first arg is a string selector, search within each context
     if (typeof selectorOrElements === 'string') {
       const elements = contextElements.flatMap(context => {

package/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS - Self-detecting module loader
+ * HyperclayJS v1.2.0 - Self-detecting module loader
  * Automatically loads requested features with dependency resolution
  *
  * USAGE:
@@ -52,6 +52,7 @@
     "dependencies": [
       "save-core",
       "toast",
+      "toast-hyperclay",
       "mutation",
       "throttle"
     ],
@@ -175,7 +176,8 @@
       "dom-ready",
       "copy-to-clipboard",
       "modals",
-      "toast"
+      "toast",
+      "toast-hyperclay"
     ],
     "exports": {
       "ask": [
@@ -208,6 +210,18 @@
       ]
     }
   },
+  "toast-hyperclay": {
+    "path": "./ui/toast-hyperclay.js",
+    "dependencies": [
+      "toast"
+    ],
+    "exports": {
+      "toast": [
+        "window",
+        "hyperclay"
+      ]
+    }
+  },
   "modals": {
     "path": "./ui/theModal.js",
     "dependencies": [],
@@ -304,7 +318,7 @@
       ]
     }
   },
-  "jquery-like": {
+  "alljs": {
     "path": "./dom-utilities/All.js",
     "dependencies": [],
     "exports": {
@@ -334,7 +348,7 @@
       ]
     }
   },
-  "dom-morphing": {
+  "idiomorph": {
     "path": "./vendor/idiomorph.min.js",
     "dependencies": [],
     "exports": {
@@ -395,7 +409,8 @@
     "dependencies": [
       "behavior-collector",
       "get-data-from-form",
-      "toast"
+      "toast",
+      "toast-hyperclay"
     ],
     "exports": {
       "sendMessage": [
@@ -408,6 +423,7 @@
     "dependencies": [
       "copy-to-clipboard",
       "toast",
+      "toast-hyperclay",
       "debounce"
     ],
     "exports": {
@@ -467,6 +483,7 @@
       "inputs",
       "prompts",
       "toast",
+      "toast-hyperclay",
       "modals",
       "info",
       "tailwind-play",
@@ -477,10 +494,10 @@
       "debounce",
       "dom-ready",
       "window-load",
-      "jquery-like",
+      "alljs",
       "style-injection",
       "get-data-from-form",
-      "dom-morphing",
+      "idiomorph",
       "slugify",
       "emmet-html",
       "copy-to-clipboard",
@@ -507,20 +524,21 @@
   const scriptUrl = new URL(currentScript.src);
   const featuresParam = scriptUrl.searchParams.get('features');
   const presetParam = scriptUrl.searchParams.get('preset');
+  const debugMode = scriptUrl.searchParams.get('debug') === 'true';
 
   // Determine requested features
   let requestedFeatures = [];
 
   if (presetParam && presets[presetParam]) {
     requestedFeatures = presets[presetParam].modules;
-    console.log(`HyperclayJS: Loading preset "${presetParam}"`);
+    if (debugMode) console.log(`HyperclayJS: Loading preset "${presetParam}"`);
   } else if (featuresParam) {
     requestedFeatures = featuresParam.split(',').map(f => f.trim());
-    console.log(`HyperclayJS: Loading features:`, requestedFeatures);
+    if (debugMode) console.log(`HyperclayJS: Loading features:`, requestedFeatures);
   } else {
     // Default to minimal preset
     requestedFeatures = presets.minimal.modules;
-    console.log('HyperclayJS: No features specified, loading minimal preset');
+    if (debugMode) console.log('HyperclayJS: No features specified, loading minimal preset');
   }
 
   // Resolve all dependencies
@@ -594,7 +612,7 @@
     const modulePath = `${baseUrl}/${module.path}`;
 
     try {
-      console.log(`HyperclayJS: Loading ${feature}...`);
+      if (debugMode) console.log(`HyperclayJS: Loading ${feature}...`);
       const loaded = await import(modulePath);
 
       // Auto-initialize if the module exports an init function
@@ -617,7 +635,7 @@
     // Sort in correct load order
     const loadOrder = topologicalSort(allFeatures);
 
-    console.log('HyperclayJS: Load order:', loadOrder);
+    if (debugMode) console.log('HyperclayJS: Load order:', loadOrder);
 
     // Get base URL
     const baseUrl = getBaseUrl();
@@ -682,10 +700,11 @@
       hyperclayReadyResolve(window.hyperclay);
     }
 
-    console.log('HyperclayJS: All modules loaded successfully');
+    if (debugMode) {
+      console.log('HyperclayJS: All modules loaded successfully');
 
-    // Show feature summary - AUTO-GENERATED
-    const sizes = {
+      // Show feature summary - AUTO-GENERATED
+      const sizes = {
   "save-core": 5.9,
   "save": 4.9,
   "admin": 5.300000000000001,
@@ -699,6 +718,7 @@
   "inputs": 1.2,
   "prompts": 7.7,
   "toast": 7.3,
+  "toast-hyperclay": 8,
   "modals": 18.4,
   "info": 3.2,
   "tailwind-play": 362.3,
@@ -709,10 +729,10 @@
   "debounce": 0.2,
   "dom-ready": 0.2,
   "window-load": 0.2,
-  "jquery-like": 13.8,
+  "alljs": 13.9,
   "style-injection": 0.8,
   "get-data-from-form": 1.7,
-  "dom-morphing": 7.9,
+  "idiomorph": 7.9,
   "slugify": 0.7,
   "emmet-html": 1.4,
   "copy-to-clipboard": 0.9,
@@ -721,11 +741,12 @@
   "send-message": 1.2,
   "file-upload": 10.4
 };
-    const totalSize = loadOrder.reduce((sum, feature) => {
-      return sum + (sizes[feature] || 0);
-    }, 0);
+      const totalSize = loadOrder.reduce((sum, feature) => {
+        return sum + (sizes[feature] || 0);
+      }, 0);
 
-    console.log(`HyperclayJS: Loaded ${loadOrder.length} modules (~${totalSize.toFixed(1)}KB)`);
+      console.log(`HyperclayJS: Loaded ${loadOrder.length} modules (~${totalSize.toFixed(1)}KB)`);
+    }
 
   } catch (error) {
     console.error('HyperclayJS: Fatal error during initialization:', error);

package/module-dependency-graph.json

@@ -9,6 +9,7 @@
     "build/generate-load-jsdelivr.js": [],
     "build/generate-readme.js": [],
     "build/hyperclay.template.js": [],
+    "build/update-index-url.js": [],
     "communication/behaviorCollector.js": [],
     "communication/sendMessage.js": [
       "communication/behaviorCollector.js",
@@ -137,6 +138,9 @@
       "ui/toast.js"
     ],
     "ui/theModal.js": [],
+    "ui/toast-hyperclay.js": [
+      "ui/toast.js"
+    ],
     "ui/toast.js": [],
     "utilities/cookie.js": [],
     "utilities/debounce.js": [],
@@ -229,7 +233,7 @@
       "files": [
         "core/optionVisibilityRuleGenerator.js"
       ],
-      "description": "Dynamic show/hide based on page state with option:attribute=\"value\"",
+      "description": "Dynamic show/hide based on ancestor state with option:attribute=\"value\"",
       "exports": {
         "optionVisibilityRuleGenerator": [
           "window",
@@ -370,6 +374,22 @@
         ]
       }
     },
+    "toast-hyperclay": {
+      "name": "Toast Hyperclay (Legacy)",
+      "category": "ui",
+      "size": 8,
+      "files": [
+        "ui/toast-hyperclay.js",
+        "ui/toast.js"
+      ],
+      "description": "Toast with legacy Hyperclay platform styling (hidden feature)",
+      "exports": {
+        "toast": [
+          "window",
+          "hyperclay"
+        ]
+      }
+    },
     "modals": {
       "name": "Modal System",
       "category": "ui",
@@ -407,7 +427,7 @@
       "files": [
         "vendor/tailwind-play.js"
       ],
-      "description": "Live Tailwind CSS editing - updates styles based on classes in your HTML",
+      "description": "Live Tailwind CSS editing - no need for a build system",
       "exports": {}
     },
     "mutation": {
@@ -511,10 +531,10 @@
         ]
       }
     },
-    "jquery-like": {
+    "alljs": {
       "name": "All.js (jQuery-like)",
       "category": "dom-utilities",
-      "size": 13.8,
+      "size": 13.9,
       "files": [
         "dom-utilities/All.js"
       ],
@@ -556,14 +576,14 @@
         ]
       }
     },
-    "dom-morphing": {
-      "name": "DOM Morphing",
+    "idiomorph": {
+      "name": "Idiomorph",
       "category": "vendor",
       "size": 7.9,
       "files": [
         "vendor/idiomorph.min.js"
       ],
-      "description": "Efficient DOM updates",
+      "description": "Efficient DOM morphing library",
       "exports": {
         "Idiomorph": [
           "hyperclay"
@@ -728,8 +748,7 @@
       "description": "DOM manipulation helpers",
       "modules": [
         "dom-ready",
-        "window-load",
-        "jquery-like",
+        "alljs",
         "style-injection",
         "get-data-from-form"
       ]
@@ -748,7 +767,6 @@
       "name": "Communication & Files",
       "description": "File handling and messaging",
       "modules": [
-        "behavior-collector",
         "send-message",
         "file-upload"
       ]
@@ -757,7 +775,7 @@
       "name": "Vendor Libraries",
       "description": "Third-party libraries",
       "modules": [
-        "dom-morphing"
+        "idiomorph"
       ]
     }
   },
@@ -803,6 +821,7 @@
         "inputs",
         "prompts",
         "toast",
+        "toast-hyperclay",
         "modals",
         "info",
         "tailwind-play",
@@ -813,10 +832,10 @@
         "debounce",
         "dom-ready",
         "window-load",
-        "jquery-like",
+        "alljs",
         "style-injection",
         "get-data-from-form",
-        "dom-morphing",
+        "idiomorph",
         "slugify",
         "emmet-html",
         "copy-to-clipboard",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "hyperclay.js",
@@ -33,11 +33,12 @@
   ],
   "scripts": {
     "dev": "npm run build && http-server -p 3535 -o /index.html",
-    "build": "npm run generate:deps && npm run build:loader && npm run build:readme && npm run build:load-jsdelivr",
+    "build": "npm run generate:deps && npm run build:loader && npm run build:readme && npm run build:load-jsdelivr && npm run build:index-url",
     "generate:deps": "node build/generate-dependency-graph.js",
     "build:loader": "node build/build-loader.js",
     "build:readme": "node build/generate-readme.js",
     "build:load-jsdelivr": "node build/generate-load-jsdelivr.js",
+    "build:index-url": "node build/update-index-url.js",
     "test": "jest",
     "lint": "eslint .",
     "format": "prettier --write .",

package/ui/toast-hyperclay.js

@@ -0,0 +1,25 @@
+/**
+ * Toast Hyperclay - Legacy toast for Hyperclay platform
+ *
+ * This is a wrapper that loads the toast module and automatically
+ * calls toast.useLegacy() to enable the legacy Hyperclay platform styling.
+ *
+ * This is a hidden feature not exposed in the UI - used internally by
+ * the Hyperclay platform for backward compatibility.
+ */
+
+import toast from './toast.js';
+
+// Automatically apply legacy styling for Hyperclay platform
+toast.useLegacy();
+
+// Re-export toast with legacy config already applied
+export default toast;
+
+// Export to window for global access
+export function exportToWindow() {
+  if (!window.hyperclay) {
+    window.hyperclay = {};
+  }
+  window.hyperclay.toast = toast;
+}