hyperclayjs 1.3.1 → 1.4.0

package/ui/prompts.js

@@ -2,13 +2,12 @@ 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>`;
 
 function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "") {
-  const inputHtml = includeInput 
+  const inputHtml = includeInput
     ? `<div><input class="micromodal__input" type="text" value="${defaultValue}" required></div>`
     : "";
 
@@ -43,14 +42,14 @@ function createModal(promptText, yesCallback, extraContent = "", includeInput =
         return false; // Prevent modal from closing
       }
     });
-    
+
     themodal.onNo = () => {
       reject();
     };
   });
 
   themodal.open();
-  
+
   return promise;
 }
 
@@ -63,8 +62,38 @@ export function consent(promptText, yesCallback, extraContent = "") {
   return createModal(promptText, yesCallback, extraContent, false);
 }
 
-export function tell(promptText, yesCallback, extraContent = "") {
-  return createModal(promptText, yesCallback, extraContent, false);
+/**
+ * Display an informational modal with a title and optional content paragraphs
+ * @param {string} promptText - The title/heading text
+ * @param {...string} content - Additional content paragraphs (variadic)
+ * @returns {Promise} Resolves when user confirms, rejects on close
+ */
+export function tell(promptText, ...content) {
+  const contentHtml = content.length > 0
+    ? content.map(c => `<div class="text-[16px] sm:text-[18px] font-normal">${c}</div>`).join("")
+    : "";
+
+  themodal.html = `<div class="max-w-[440px] space-y-5 mb-7">
+    <div class="text-[20px] sm:text-[22px] font-bold">${promptText}</div>
+    ${contentHtml}
+  </div>`;
+  themodal.closeHtml = CLOSE_BUTTON_SVG;
+  themodal.yes = CONFIRM_BUTTON_SVG;
+
+  const promise = new Promise((resolve, reject) => {
+    themodal.onYes(() => {
+      resolve();
+      return true;
+    });
+
+    themodal.onNo = () => {
+      reject();
+    };
+  });
+
+  themodal.open();
+
+  return promise;
 }
 
 /**
@@ -146,15 +175,6 @@ export function snippet(title, content, options = {}) {
   return promise;
 }
 
-/**
- * Show API key with standard warning
- */
-export function showApiKey(apiKey, username, expiresAt) {
-  return snippet('Sync API Key', apiKey, {
-    extraContent: `This key won't be shown again. Save it. Expires in 1 year.`
-  });
-}
-
 // Auto-initialize - cleanup any leftover modal elements
 export function init() {
   onDomReady(() => {
@@ -166,21 +186,19 @@ export function init() {
   });
 }
 
-// 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-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.ask = ask;
+  window.consent = consent;
+  window.tell = tell;
+  window.snippet = snippet;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.ask = ask;
+  window.hyperclay.consent = consent;
+  window.hyperclay.tell = tell;
+  window.hyperclay.snippet = snippet;
+  window.h = window.hyperclay;
+}
 
 // Auto-init when module is imported
-init();
+init();

package/ui/theModal.js

@@ -318,6 +318,8 @@ const modalCss = `<style class="micromodal-css">
 .micromodal {
   display: none;
   color: #fff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 18px;
 }
 
 .micromodal button:not(.custom-button) {
@@ -413,7 +415,7 @@ const modalCss = `<style class="micromodal-css">
 .micromodal .micromodal__input {
   width: clamp(300px, calc(100vw - 100px), 420px);
   padding: 6px 6px 7px;
-  font-size: 18px;
+  font-size: 16px;
   color: #000;
 }
 
@@ -469,12 +471,19 @@ const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">
   </div>
 </div>`;
 
+const DEFAULT_FONT_FAMILY = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+const DEFAULT_FONT_SIZE = "18px";
+const DEFAULT_INPUT_FONT_SIZE = "16px";
+
 const themodal = (() => {
   let html = "";
   let yes = "";
   let no = "";
   let zIndex = "100";
   let closeHtml = "";
+  let fontFamily = DEFAULT_FONT_FAMILY;
+  let fontSize = DEFAULT_FONT_SIZE;
+  let inputFontSize = DEFAULT_INPUT_FONT_SIZE;
 
   let enableClickOutsideCloses = true;
   let disableScroll = true;
@@ -502,6 +511,17 @@ const themodal = (() => {
       modalOverlayElem.style.zIndex = zIndex;
       modalCloseElem.innerHTML = closeHtml;
 
+      // Apply font styles to the modal
+      const modalElem = document.querySelector("#micromodal");
+      modalElem.style.fontFamily = fontFamily;
+      modalElem.style.fontSize = fontSize;
+
+      // Apply input font size
+      const modalInputElem = document.querySelector(".micromodal__input");
+      if (modalInputElem) {
+        modalInputElem.style.fontSize = inputFontSize;
+      }
+
       // MODIFIED so modal doesn't close if mousedown happened inside the modal
       let mousedownOnBackdrop = false;
 
@@ -581,6 +601,9 @@ const themodal = (() => {
           no = "";
           zIndex = "100";
           closeHtml = "";
+          fontFamily = DEFAULT_FONT_FAMILY;
+          fontSize = DEFAULT_FONT_SIZE;
+          inputFontSize = DEFAULT_INPUT_FONT_SIZE;
 
           // reset to defaults
           enableClickOutsideCloses = true;
@@ -642,6 +665,24 @@ const themodal = (() => {
     set zIndex(newVal) {
       zIndex = newVal;
     },
+    get fontFamily() {
+      return fontFamily;
+    },
+    set fontFamily(newVal) {
+      fontFamily = newVal;
+    },
+    get fontSize() {
+      return fontSize;
+    },
+    set fontSize(newVal) {
+      fontSize = newVal;
+    },
+    get inputFontSize() {
+      return inputFontSize;
+    },
+    set inputFontSize(newVal) {
+      inputFontSize = newVal;
+    },
     get disableFocus() {
       return disableFocus;
     },
@@ -669,9 +710,12 @@ const themodal = (() => {
   return themodalMain;
 })();
 
-// Self-export to window and hyperclay
-window.themodal = themodal;
-window.hyperclay = window.hyperclay || {};
-window.hyperclay.themodal = themodal;
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.themodal = themodal;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.themodal = themodal;
+  window.h = window.hyperclay;
+}
 
-export default themodal;
+export default themodal;

package/ui/toast-hyperclay.js

@@ -1,21 +1,37 @@
 /**
- * Toast Hyperclay - Legacy toast for Hyperclay platform
+ * Toast Hyperclay - Toast with Hyperclay platform styling
  *
- * This is a wrapper that loads the toast module and automatically
- * calls toast.useLegacy() to enable the legacy Hyperclay platform styling.
+ * Provides toastHyperclay() function with Hyperclay platform styling.
+ * Use this alongside toast() if you need both styles in the same project.
  *
  * This is a hidden feature not exposed in the UI - used internally by
  * the Hyperclay platform for backward compatibility.
  */
 
-import toast from './toast.js';
+import {
+  toastCore,
+  injectToastStyles,
+  hyperclayStyles,
+  hyperclayTemplates,
+  hyperclayIcons
+} from './toast.js';
 
-// Automatically apply legacy styling for Hyperclay platform
-toast.useLegacy();
+// Toast function with Hyperclay styling
+function toastHyperclay(message, messageType = "success") {
+  injectToastStyles(hyperclayStyles, 'hyperclay');
+  toastCore(message, messageType, {
+    templates: hyperclayTemplates,
+    icons: hyperclayIcons,
+    theme: 'hyperclay'
+  });
+}
 
-// Self-export (overwrites modern toast with legacy version)
-window.toast = toast;
-window.hyperclay = window.hyperclay || {};
-window.hyperclay.toast = toast;
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.toastHyperclay = toastHyperclay;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.toastHyperclay = toastHyperclay;
+  window.h = window.hyperclay;
+}
 
-export default toast;
+export default toastHyperclay;

package/ui/toast.js

@@ -7,24 +7,23 @@ const defaultIcons = {
   error: `<svg viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.7383 12.4045L13 31.1429M31.7451 31.1429L13.0068 12.4046M2.00977 2H43.9902V41.809H2.00977V2Z" stroke="#FF4450" stroke-width="4"/></svg>`
 };
 
-// Legacy icons for hyperclay.com
-const legacyIcons = {
+// Hyperclay icons
+export const hyperclayIcons = {
   success: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 1h-5v3.5h-2.5V8h-2v3.5H20V15h-2.5v3.5h-2V22H13v3.5H9V22H7v-3.5H6V15H1v3.5h1V22h2v3.5h1.5V29H7v3.5h5V29h3.5v-3.5H18V22h2.5v-3.5h2V15H25v-3.5h2.5V8h2V4.5H32V1Z" fill="#76C824"/></svg>`,
   error: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 1h-5v3.5h-3.5V8H21v3.5h-3.5V15h-2v-3.5H12V8H8.5V4.5H5V1H0v3.5h3.5V8H7v3.5h3.5V15H14v3.5h-3.5V22H7v3.5H3.5V29H0v3.5h5V29h3.5v-3.5H12V22h3.5v-3.5h2V22H21v3.5h3.5V29H28v3.5h5V29h-3.5v-3.5H26V22h-3.5v-3.5H19V15h3.5v-3.5H26V8h3.5V4.5H33V1Z" fill="#DD304F"/></svg>`
 };
 
 // Default templates
 const defaultTemplates = {
-  container: `<div class="toast-container" save-ignore></div>`,
   toast: {
     success: `
-      <div class="toast toast-modern hide success noise-texture">
+      <div class="toast hide success noise-texture">
         <div class="toast-icon">{icon}</div>
         <div class="toast-message">{message}</div>
       </div>
     `,
     error: `
-      <div class="toast toast-modern hide error noise-texture">
+      <div class="toast hide error noise-texture">
         <div class="toast-icon">{icon}</div>
         <div class="toast-message">{message}</div>
       </div>
@@ -32,9 +31,8 @@ const defaultTemplates = {
   }
 };
 
-// Legacy templates for hyperclay.com
-const legacyTemplates = {
-  container: `<div class="toast-container" save-ignore></div>`,
+// Hyperclay templates
+export const hyperclayTemplates = {
   toast: {
     success: `
       <div class="toast hide success">
@@ -51,9 +49,9 @@ const legacyTemplates = {
   }
 };
 
-// Default styles
-const defaultStyles = `
-  .toast-container {
+// Modern styles (scoped by data-toast-theme="modern")
+const modernStyles = `
+  [data-toast-theme="modern"].toast-container {
     z-index: 9999;
     position: fixed;
     top: 20px;
@@ -63,20 +61,12 @@ const defaultStyles = `
     align-items: end;
     gap: 18px;
   }
-  
-  .toast {
+
+  [data-toast-theme="modern"] .toast {
     position: relative;
     right: 0;
     cursor: pointer;
     transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  }
-  
-  .toast.hide {
-    right: -400px;
-    opacity: 0;
-  }
-  
-  .toast-modern {
     display: flex;
     align-items: center;
     gap: 12px;
@@ -88,37 +78,42 @@ const defaultStyles = `
     border-width: 1px;
     border-style: solid;
   }
-  
-  .toast-modern.success {
+
+  [data-toast-theme="modern"] .toast.hide {
+    right: -400px;
+    opacity: 0;
+  }
+
+  [data-toast-theme="modern"] .toast.success {
     border-color: #358234;
     background: radial-gradient(85.86% 68.42% at 50% 68.42%, #142419 0%, #1D3927 100%);
   }
-  
-  .toast-modern.error {
+
+  [data-toast-theme="modern"] .toast.error {
     border-color: #992930;
     background: radial-gradient(85.86% 68.42% at 50% 68.42%, #240A13 0%, #481826 100%);
   }
-  
-  .toast-icon {
+
+  [data-toast-theme="modern"] .toast-icon {
     position: relative;
     top: -1px;
   }
-  
-  .toast-icon svg {
+
+  [data-toast-theme="modern"] .toast-icon svg {
     width: 22px;
     height: 22px;
   }
-  
-  .toast-message {
+
+  [data-toast-theme="modern"] .toast-message {
     position: relative;
     top: -1px;
   }
-  
-  .noise-texture {
+
+  [data-toast-theme="modern"] .noise-texture {
     position: relative;
   }
-  
-  .noise-texture::before {
+
+  [data-toast-theme="modern"] .noise-texture::before {
     content: "";
     position: absolute;
     top: 0;
@@ -132,8 +127,9 @@ const defaultStyles = `
   }
 `;
 
-const legacyStyles = `
-  .toast-container {
+// Hyperclay styles (scoped by data-toast-theme="hyperclay")
+export const hyperclayStyles = `
+  [data-toast-theme="hyperclay"].toast-container {
     z-index: 9999;
     position: fixed;
     top: 20px;
@@ -142,12 +138,12 @@ const legacyStyles = `
     flex-direction: column;
     align-items: end;
   }
-  
-  .toast-container > * + * {
+
+  [data-toast-theme="hyperclay"].toast-container > * + * {
     margin-top: 18px;
   }
-  
-  .toast {
+
+  [data-toast-theme="hyperclay"] .toast {
     position: relative;
     right: 0;
     display: flex;
@@ -159,59 +155,59 @@ const legacyStyles = `
     border: 2px dashed rgba(255,255,255,.6);
     transition: right 0.5s ease-in-out;
   }
-  
-  .toast svg {
+
+  [data-toast-theme="hyperclay"] .toast svg {
     position: relative;
     top: -1px;
     width: 17px;
     height: 17px;
     margin-right: 13px;
   }
-  
-  .toast.hide {
+
+  [data-toast-theme="hyperclay"] .toast.hide {
     right: -300px;
   }
-  
-  .toast.success {
+
+  [data-toast-theme="hyperclay"] .toast.success {
     color: #76C824;
     border: 2px dashed #589E11;
   }
-  
-  .toast.error {
+
+  [data-toast-theme="hyperclay"] .toast.error {
     color: #DD304F;
     border: 2px dashed #CD2140;
   }
 `;
 
-// Helper function to inject styles
-function injectStyles(styles) {
-  // Remove existing toast styles if present
-  const existingStyles = document.querySelectorAll('.toast-styles');
-  existingStyles.forEach(style => style.remove());
-  
-  // Add new styles
+// Track which theme styles have been injected
+const injectedThemes = new Set();
+
+// Helper function to inject styles for a theme (additive, not replacing)
+export function injectToastStyles(styles, theme) {
+  if (injectedThemes.has(theme)) return;
+
   const styleSheet = document.createElement('style');
-  styleSheet.className = 'toast-styles';
+  styleSheet.className = `toast-styles-${theme}`;
   styleSheet.setAttribute('save-ignore', '');
   styleSheet.textContent = styles;
   document.head.appendChild(styleSheet);
+
+  injectedThemes.add(theme);
 }
 
-// Main toast function
-function toast(message, messageType = "success") {
-  messageType = messageType || "success";
-  
-  // Get configuration
-  const config = toast.config || {};
+// Core toast function (used by both toast and toastHyperclay)
+export function toastCore(message, messageType = "success", config = {}) {
   const templates = config.templates || defaultTemplates;
   const icons = config.icons || defaultIcons;
+  const theme = config.theme || 'modern';
 
-  // Get or create container
-  let toastContainer = document.querySelector(".toast-container");
+  // Get or create container for this theme
+  let toastContainer = document.querySelector(`.toast-container[data-toast-theme="${theme}"]`);
   if (!toastContainer) {
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = templates.container;
-    toastContainer = tempDiv.firstElementChild;
+    toastContainer = document.createElement('div');
+    toastContainer.className = 'toast-container';
+    toastContainer.setAttribute('data-toast-theme', theme);
+    toastContainer.setAttribute('save-ignore', '');
     document.body.append(toastContainer);
   }
 
@@ -221,7 +217,7 @@ function toast(message, messageType = "success") {
   const toastHtml = template
     .replace('{icon}', icon)
     .replace('{message}', message);
-  
+
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = toastHtml.trim();
   const toastElement = tempDiv.firstElementChild;
@@ -243,28 +239,22 @@ function toast(message, messageType = "success") {
   }, 6600);
 }
 
-// Configuration for legacy hyperclay.com style
-toast.legacyConfig = {
-  templates: legacyTemplates,
-  icons: legacyIcons,
-  styles: legacyStyles
-};
-
-// Helper to apply legacy config
-toast.useLegacy = function() {
-  toast.config = toast.legacyConfig;
-  // Replace styles with legacy styles
-  injectStyles(legacyStyles);
-};
-
-// Initialize with default styles when script loads
-injectStyles(defaultStyles);
+// Main toast function - uses modern styles
+function toast(message, messageType = "success") {
+  injectToastStyles(modernStyles, 'modern');
+  toastCore(message, messageType, {
+    templates: defaultTemplates,
+    icons: defaultIcons,
+    theme: 'modern'
+  });
+}
 
-// Self-export to window and hyperclay
-window.toast = toast;
-window.hyperclay = window.hyperclay || {};
-window.hyperclay.toast = toast;
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.toast = toast;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.toast = toast;
+  window.h = window.hyperclay;
+}
 
-// toast("Site copied");
-// toast("Site name taken", "error");
-export default toast;
+export default toast;

package/utilities/cookie.js

@@ -34,9 +34,12 @@ const cookie = {
   remove
 };
 
-// Self-export to window and hyperclay
-window.cookie = cookie;
-window.hyperclay = window.hyperclay || {};
-window.hyperclay.cookie = cookie;
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.cookie = cookie;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.cookie = cookie;
+  window.h = window.hyperclay;
+}
 
-export default cookie;
+export default cookie;

package/utilities/debounce.js

@@ -11,8 +11,11 @@ function debounce(callback, delay) {
   };
 }
 
-// Self-export to hyperclay only
-window.hyperclay = window.hyperclay || {};
-window.hyperclay.debounce = debounce;
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.debounce = debounce;
+  window.h = window.hyperclay;
+}
 
-export default debounce;
+export default debounce;

package/utilities/loadVendorScript.js

@@ -0,0 +1,57 @@
+/*
+  Lazy-load vendor scripts in edit mode only
+
+  Injects a <script save-ignore> tag that loads the vendor script.
+  The save-ignore attribute ensures it's stripped when the page is saved.
+
+  Usage:
+    import { loadVendorScript } from '../utilities/loadVendorScript.js';
+
+    // Load and get global
+    const Sortable = await loadVendorScript(url, 'Sortable');
+
+    // Just load (no return value needed)
+    loadVendorScript(url);
+*/
+
+/**
+ * Load a vendor script via script tag with save-ignore
+ * @param {string} url - URL to the vendor script
+ * @param {Object} [options] - Options
+ * @param {string} [options.globalName] - Window property to return when loaded (for classic scripts)
+ * @param {boolean} [options.module] - Set true for ES modules (type="module")
+ * @returns {Promise<any>} Resolves with window[globalName] or undefined
+ */
+export function loadVendorScript(url, options = {}) {
+  // Support legacy signature: loadVendorScript(url, globalName)
+  if (typeof options === 'string') {
+    options = { globalName: options };
+  }
+
+  const { globalName, module: isModule } = options;
+
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.setAttribute('save-ignore', '');
+    if (isModule) {
+      script.type = 'module';
+    }
+    script.onload = () => resolve(globalName ? window[globalName] : undefined);
+    script.onerror = () => reject(new Error(`Failed to load vendor script: ${url}`));
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Get vendor URL relative to a module's location
+ * @param {string} importMetaUrl - import.meta.url of the calling module
+ * @param {string} vendorFile - Filename of the vendor script
+ * @returns {string} Full URL to vendor script
+ */
+export function getVendorUrl(importMetaUrl, vendorFile) {
+  const baseUrl = importMetaUrl.substring(0, importMetaUrl.lastIndexOf('/'));
+  return `${baseUrl}/${vendorFile}`;
+}
+
+export default loadVendorScript;