hyperclayjs 1.1.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "hyperclay.js",
@@ -32,7 +32,7 @@
     "module-dependency-graph.json"
   ],
   "scripts": {
-    "dev": "npm run build && http-server -p 3535 -o /index.html",
+    "dev": "npm run build && http-server -p 3535 -c-1 -o /index.html",
     "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",
@@ -44,7 +44,7 @@
     "format": "prettier --write .",
     "release": "./scripts/release.sh",
     "prepublishOnly": "npm run build && npm test",
-    "postpublish": "test -n \"$SKIP_POSTPUBLISH\" || open http://127.0.0.1:3535/load-jsdelivr.html"
+    "postpublish": "test -n \"$SKIP_POSTPUBLISH\" || open http://127.0.0.1:3535/build/load-jsdelivr.html"
   },
   "repository": {
     "type": "git",

package/string-utilities/copy-to-clipboard.js

@@ -24,12 +24,8 @@ function copyToClipboard(text) {
   document.body.removeChild(textarea);
 }
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-  window.hyperclay.copyToClipboard = copyToClipboard;
-}
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.copyToClipboard = copyToClipboard;
 
 export default copyToClipboard;

package/string-utilities/emmet-html.js

@@ -1,4 +1,4 @@
-export default function emmet(strings, ...values) {
+function emmet(strings, ...values) {
     // Extract the Emmet syntax from the first string
     let emmetSyntax = strings[0];
 
@@ -51,4 +51,10 @@ export default function emmet(strings, ...values) {
     html += `</${tagName}>`;
 
     return html;
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.emmet = emmet;
+
+export default emmet;

package/string-utilities/query.js

@@ -1 +1,8 @@
-export default Object.fromEntries(new URLSearchParams(window.location.search));
+const query = Object.fromEntries(new URLSearchParams(window.location.search));
+
+// Self-export to window and hyperclay
+window.query = query;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.query = query;
+
+export default query;

package/string-utilities/slugify.js

@@ -10,12 +10,9 @@ function slugify (text) {
     .replace(/-+$/, ''); // trim - from end of text
 }
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-  window.hyperclay.slugify = slugify;
-}
+// Self-export to window and hyperclay
+window.slugify = slugify;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.slugify = slugify;
 
 export default slugify;

package/ui/info.js

@@ -36,4 +36,12 @@ export function init() {
       document.body.style.overflow = "";
     }
   });
-}
+}
+
+// Self-export to window and hyperclay
+window.info = info;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.info = info;
+
+// Auto-init when module is imported
+init();

package/ui/prompts.js

@@ -2,6 +2,7 @@ import themodal from "./theModal.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import toast from "./toast.js";
 import copyToClipboard from "../string-utilities/copy-to-clipboard.js";
+import { info } from "./info.js";
 
 const CLOSE_BUTTON_SVG = `<svg class="group" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-[#1D2032] group-hover:fill-[#212543]" d="M132 132.5 1 1.5h131v131Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" fill="#fff"/></svg>`;
 const CONFIRM_BUTTON_SVG = `<div style="width: 28px;"><svg viewBox="0 0 60 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 0.75H43.5V5.25H49V9.75H54.5V14.25H60V18.75H54.5V23.25H49V27.75H43.5V32.25H34.5V27.75H40V23.25H45.5V18.75H0V14.25H45.5V9.75H40V5.25H34.5V0.75Z" fill="white"/></svg></div>`;
@@ -165,15 +166,21 @@ export function init() {
   });
 }
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-
-  window.hyperclay.ask = ask;
-  window.hyperclay.consent = consent;
-  window.hyperclay.tell = tell;
-  window.hyperclay.snippet = snippet;
-  window.hyperclay.showApiKey = showApiKey;
-}
+// Self-export to window and hyperclay
+window.ask = ask;
+window.consent = consent;
+window.tell = tell;
+window.info = info;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.ask = ask;
+window.hyperclay.consent = consent;
+window.hyperclay.tell = tell;
+window.hyperclay.info = info;
+window.hyperclay.snippet = snippet;
+window.hyperclay.showApiKey = showApiKey;
+
+// Re-export info
+export { info };
+
+// Auto-init when module is imported
+init();

package/ui/theModal.js

@@ -669,9 +669,9 @@ const themodal = (() => {
   return themodalMain;
 })();
 
-// Export to window for global access
-export function exportToWindow() {
-  window.themodal = themodal;
-}
+// Self-export to window and hyperclay
+window.themodal = themodal;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.themodal = themodal;
 
 export default themodal;

package/ui/toast-hyperclay.js

@@ -0,0 +1,21 @@
+/**
+ * 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();
+
+// Self-export (overwrites modern toast with legacy version)
+window.toast = toast;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.toast = toast;
+
+export default toast;

package/ui/toast.js

@@ -260,13 +260,10 @@ toast.useLegacy = function() {
 // Initialize with default styles when script loads
 injectStyles(defaultStyles);
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-  window.hyperclay.toast = toast;
-}
+// Self-export to window and hyperclay
+window.toast = toast;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.toast = toast;
 
 // toast("Site copied");
 // toast("Site name taken", "error");

package/utilities/cookie.js

@@ -34,12 +34,9 @@ const cookie = {
   remove
 };
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-  window.hyperclay.cookie = cookie;
-}
+// Self-export to window and hyperclay
+window.cookie = cookie;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.cookie = cookie;
 
 export default cookie;

package/utilities/debounce.js

@@ -1,12 +1,18 @@
 // debounce.js
-export default function debounce(callback, delay) {
+function debounce(callback, delay) {
   let timeoutId;
-  
+
   return function (...args) {
     clearTimeout(timeoutId);
-    
+
     timeoutId = setTimeout(() => {
       callback.apply(this, args);
     }, delay);
   };
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.debounce = debounce;
+
+export default debounce;

package/utilities/mutation.js

@@ -400,4 +400,9 @@ const Mutation = {
   }
 };
 
+// Self-export to window and hyperclay
+window.Mutation = Mutation;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.Mutation = Mutation;
+
 export default Mutation;

package/utilities/nearest.js

@@ -94,4 +94,9 @@ export default function nearest (startElem, selector, elementFoundReturnValue =
   }
   
   return null;
-}
+}
+
+// Self-export to window and hyperclay
+window.nearest = nearest;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.nearest = nearest;

package/utilities/throttle.js

@@ -1,4 +1,4 @@
-export default function throttle(callback, delay, executeFirst = true) {
+function throttle(callback, delay, executeFirst = true) {
   let lastCall = executeFirst ? 0 : Date.now();
   let timeoutId = null;
 
@@ -18,4 +18,10 @@ export default function throttle(callback, delay, executeFirst = true) {
       }, remaining);
     }
   };
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.throttle = throttle;
+
+export default throttle;

package/vendor/idiomorph.min.js

@@ -5,4 +5,12 @@ var morph = function(oldEl, newEl, options = {}) {
         key: (el) => el.getAttribute('data-id') || el.id,
         ...options
     });
-};
+};
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.Idiomorph = Idiomorph;
+window.hyperclay.morph = morph;
+
+export { Idiomorph, morph };
+export default Idiomorph;

package/README.template.md

@@ -1,276 +0,0 @@
-# HyperclayJS
-
-A modular JavaScript library for building interactive HTML applications with Hyperclay. Load only what you need with automatic dependency resolution.
-
-## Features
-
-- 🎯 **Modular Design** - Pick exactly the features you need
-- 🚀 **Self-detecting Loader** - Automatic dependency resolution from URL params
-- 📦 **Tree-shakeable** - Optimized for modern bundlers
-- 🎨 **Rich Feature Set** - From basic save to advanced UI components
-- 💪 **Zero Dependencies** - Core modules have no external dependencies
-- 🔧 **Visual Configurator** - Interactive tool to build your custom bundle
-
-## Quick Start
-
-### Using CDN (Self-detecting Loader)
-
-The self-detecting loader reads URL parameters and automatically loads the requested features with all dependencies:
-
-```html
-<!-- Minimal setup -->
-<script src="https://hyperclay.com/js/hyperclay.js?preset=minimal" type="module"></script>
-
-<!-- Standard setup -->
-<script src="https://hyperclay.com/js/hyperclay.js?preset=standard" type="module"></script>
-
-<!-- Custom features -->
-<script src="https://hyperclay.com/js/hyperclay.js?features=save,admin,toast,ajax" type="module"></script>
-
-<!-- Everything -->
-<script src="https://hyperclay.com/js/hyperclay.js?preset=everything" type="module"></script>
-```
-
-### Using NPM
-
-```bash
-npm install hyperclayjs
-```
-
-```javascript
-// Import specific modules
-import { savePage } from 'hyperclayjs/core/savePage.js';
-import toast from 'hyperclayjs/ui/toast.js';
-
-// Or use presets
-import 'hyperclayjs/presets/standard.js';
-```
-
-## Available Modules
-
-{{MODULE_TABLES}}
-
-## Presets
-
-{{PRESET_DESCRIPTIONS}}
-
-## Visual Configurator
-
-Explore features and build your custom bundle with our interactive configurator:
-
-```bash
-npm run dev
-```
-
-This will:
-1. Generate fresh dependency data
-2. Start a local server on port 3535
-3. Open the configurator in your browser
-
-The configurator shows:
-- Real-time bundle size calculation
-- Automatic dependency resolution
-- Generated CDN URL
-- Feature descriptions and categories
-
-## Development
-
-### Project Structure
-
-```
-hyperclayjs/
-├── hyperclay.js              # Self-detecting module loader
-├── core/                     # Core hyperclay features
-├── custom-attributes/        # HTML attribute enhancements
-├── ui/                       # UI components (toast, modals, prompts)
-├── utilities/                # General utilities (mutation, cookie, etc.)
-├── dom-utilities/            # DOM manipulation helpers
-├── string-utilities/         # String manipulation tools
-├── communication/            # File upload and messaging
-├── vendor/                   # Third-party libraries (Sortable.js, etc.)
-├── scripts/                  # Build and generation scripts
-└── starter-kit-configurator.html  # Interactive configurator
-```
-
-### Setup
-
-```bash
-# Install dependencies
-npm install
-
-# Generate dependency graph
-npm run generate:deps
-
-# Start development server with configurator
-npm run dev
-
-# Build bundles
-npm run build
-
-# Run tests
-npm test
-```
-
-### Automatic Dependency Graph
-
-The project uses Madge to automatically analyze dependencies and generate rich metadata:
-
-```bash
-npm run generate:deps
-```
-
-This creates `module-dependency-graph.json` with:
-- Complete dependency tree
-- Actual file sizes
-- Category assignments
-- Preset configurations
-
-The configurator dynamically loads this file to always show accurate information.
-
-## Browser Support
-
-- Chrome 90+
-- Firefox 88+
-- Safari 14+
-- Edge 90+
-
-All features use modern JavaScript (ES2020+). For older browser support, use a transpiler.
-
-## API Examples
-
-### Save System
-
-```javascript
-// Manually save the page
-hyperclay.savePage();
-
-// Initialize auto-save
-hyperclay.initSavePageOnChange();
-
-// Add save button
-hyperclay.initHyperclaySaveButton(); // Looks for [trigger-save]
-
-// Keyboard shortcut
-hyperclay.initSaveKeyboardShortcut(); // CMD/CTRL+S
-```
-
-### Toast Notifications
-
-```javascript
-toast("Operation successful!", "success");
-toast("Something went wrong", "error");
-```
-
-### Dialog Prompts
-
-```javascript
-// Ask for input
-const name = await ask("What's your name?");
-
-// Get consent
-const agreed = await consent("Do you agree to terms?");
-
-// Show message
-tell("Welcome to Hyperclay!");
-```
-
-### Custom Attributes
-
-```html
-<!-- AJAX form submission -->
-<form ajax-form="/api/submit">
-  <input name="email" type="email">
-  <button>Submit</button>
-</form>
-
-<!-- Auto-resize textarea -->
-<textarea autosize></textarea>
-
-<!-- Drag-drop sorting -->
-<ul sortable>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
-
-<!-- Run code when clicked away -->
-<div onclickaway="console.log('Clicked outside')">
-  Click outside this div
-</div>
-
-<!-- Persist form values -->
-<input type="text" name="username" persist>
-```
-
-### Admin Features
-
-```html
-<!-- Only visible/editable in edit mode -->
-<div contenteditable edit-mode-contenteditable>Admin can edit this</div>
-<input type="text" edit-mode-input>
-<script edit-mode-resource>console.log('Admin only');</script>
-```
-
-## Module Creation
-
-Each module should be a self-contained ES module:
-
-```javascript
-// features/my-feature.js
-import dependency from '../utilities/dependency.js';
-
-export default function myFeature() {
-  // Feature implementation
-}
-
-// Export initialization function
-export function init() {
-  if (typeof window !== 'undefined') {
-    // Auto-initialize on import
-    myFeature();
-  }
-}
-
-// Auto-run if needed
-if (typeof window !== 'undefined') {
-  init();
-}
-```
-
-## Migration from Monolithic Script
-
-### Before
-```html
-<script src="/js/old-hyperclay.js"></script>
-```
-
-### After
-```html
-<!-- Use preset -->
-<script src="/js/hyperclay.js?preset=standard" type="module"></script>
-
-<!-- Or specific features -->
-<script src="/js/hyperclay.js?features=save,admin,toast" type="module"></script>
-```
-
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Make your changes
-4. Run `npm run generate:deps` to update the dependency graph
-5. Test your changes with `npm run dev`
-6. Commit your changes (`git commit -m 'Add amazing feature'`)
-7. Push to the branch (`git push origin feature/amazing-feature`)
-8. Open a Pull Request
-
-## License
-
-MIT © Hyperclay
-
-## Links
-
-- [Documentation](https://hyperclay.com/docs)
-- [Examples](https://hyperclay.com/examples)
-- [Configurator](https://hyperclay.com/configurator)
-- [GitHub Issues](https://github.com/hyperclay/hyperclayjs/issues)