hyperclayjs 1.12.0 → 1.14.0

package/README.md

@@ -85,8 +85,8 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21.8KB | Full modal window creation system - window.theModal |
-| toast | 7.7KB | Success/error message notifications, toast(msg, msgType) |
+| the-modal | 21KB | Full modal window creation system - window.theModal |
+| toast | 7.9KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -132,17 +132,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~30.4KB)
+### Minimal (~38.1KB)
 Essential features for basic editing
 
-**Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`
+**Modules:** `save-core`, `snapshot`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Standard (~48.9KB)
+### Standard (~57.4KB)
 Standard feature set for most use cases
 
-**Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`
+**Modules:** `save-core`, `snapshot`, `save-system`, `unsaved-warning`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Everything (~178.6KB)
+### Everything (~178KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/core/tailwindInject.js

@@ -5,9 +5,10 @@ function init() {
   const currentResource = cookie.get('currentResource');
   if (!currentResource) return;
 
-  const href = `/tailwindcss/${currentResource}`;
+  const href = `/tailwindcss/${currentResource}.css`;
   insertStyles(href, (link) => {
     link.setAttribute('onaftersave', 'cacheBust(this)');
+    link.setAttribute('mutations-ignore', '');
   });
 }
 

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.12.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.14.0 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -73,11 +73,13 @@ const PRESETS = {
     "description": "Essential features for basic editing",
     "modules": [
       "save-core",
+      "snapshot",
       "save-system",
       "edit-mode-helpers",
       "toast",
       "save-toast",
-      "export-to-window"
+      "export-to-window",
+      "view-mode-excludes-edit-modules"
     ]
   },
   "standard": {
@@ -85,7 +87,9 @@ const PRESETS = {
     "description": "Standard feature set for most use cases",
     "modules": [
       "save-core",
+      "snapshot",
       "save-system",
+      "unsaved-warning",
       "edit-mode-helpers",
       "persist",
       "option-visibility",
@@ -93,7 +97,8 @@ const PRESETS = {
       "dom-helpers",
       "toast",
       "save-toast",
-      "export-to-window"
+      "export-to-window",
+      "view-mode-excludes-edit-modules"
     ]
   },
   "everything": {
@@ -140,7 +145,8 @@ const PRESETS = {
       "file-upload",
       "live-sync",
       "tailwind-inject",
-      "export-to-window"
+      "export-to-window",
+      "view-mode-excludes-edit-modules"
     ]
   }
 };

package/src/ui/theModal.js

@@ -166,8 +166,10 @@ const MicroModal = (() => {
     }
 
     removeEventListeners () {
-      this.modal.removeEventListener('touchstart', this.onClick)
-      this.modal.removeEventListener('click', this.onClick)
+      if (this.modal) {
+        this.modal.removeEventListener('touchstart', this.onClick)
+        this.modal.removeEventListener('click', this.onClick)
+      }
       document.removeEventListener('keydown', this.onKeydown)
     }
 
@@ -303,7 +305,9 @@ const MicroModal = (() => {
   }
 
   const close = targetModal => {
+    if (!activeModal) return
     targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal()
+    activeModal = null
   }
 
   return { init, show, close }
@@ -318,8 +322,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;
+  font-family: var(--hyperclay-modal-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: var(--hyperclay-modal-font-size, 18px);
 }
 
 .micromodal button:not(.custom-button) {
@@ -364,6 +368,7 @@ const modalCss = `<style class="micromodal-css">
 
 .micromodal__container {
   position: relative;
+  max-width: 600px;
   box-sizing: border-box;
   overflow-y: auto;
   padding: 26px 40px 40px 40px;
@@ -415,7 +420,7 @@ const modalCss = `<style class="micromodal-css">
 .micromodal .micromodal__input {
   width: clamp(300px, calc(100vw - 100px), 420px);
   padding: 6px 6px 7px;
-  font-size: 16px;
+  font-size: var(--hyperclay-modal-input-font-size, 16px);
   color: #000;
 }
 
@@ -465,7 +470,7 @@ const modalCss = `<style class="micromodal-css">
   background-color: #1D1F2F;
   color: #E5E7EB;
   font-family: inherit;
-  font-size: 16px;
+  font-size: inherit;
   font-weight: bold;
 }
 
@@ -495,7 +500,7 @@ const modalCss = `<style class="micromodal-css">
 
 .micromodal .snippet-code-block pre {
   color: white;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--hyperclay-modal-code-font-family, var(--hyperclay-modal-font-family, monospace));
   font-size: 0.875rem;
   white-space: nowrap;
   margin: 0;
@@ -540,21 +545,21 @@ const modalCss = `<style class="micromodal-css">
 }
 
 .micromodal .micromodal__tell-title {
-  font-size: 20px;
+  font-size: var(--hyperclay-modal-title-font-size, 20px);
   font-weight: bold;
 }
 
 .micromodal .micromodal__tell-content {
-  font-size: 16px;
+  font-size: var(--hyperclay-modal-font-size, 16px);
   font-weight: normal;
 }
 
 @media (min-width: 640px) {
   .micromodal .micromodal__tell-title {
-    font-size: 22px;
+    font-size: var(--hyperclay-modal-title-font-size, 22px);
   }
   .micromodal .micromodal__tell-content {
-    font-size: 18px;
+    font-size: var(--hyperclay-modal-font-size, 18px);
   }
 }
 </style>`;
@@ -572,19 +577,12 @@ 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;
@@ -612,17 +610,6 @@ 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;
 
@@ -702,9 +689,6 @@ const themodal = (() => {
           no = "";
           zIndex = "100";
           closeHtml = "";
-          fontFamily = DEFAULT_FONT_FAMILY;
-          fontSize = DEFAULT_FONT_SIZE;
-          inputFontSize = DEFAULT_INPUT_FONT_SIZE;
 
           // reset to defaults
           enableClickOutsideCloses = true;
@@ -768,24 +752,6 @@ 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;
     },

package/src/ui/toast.js

@@ -71,8 +71,8 @@ const modernStyles = `
     align-items: center;
     gap: 12px;
     padding: 16px 24px 16px 16px;
-    font-size: 16px;
-    font-family: monospace;
+    font-size: var(--hyperclay-toast-font-size, 16px);
+    font-family: var(--hyperclay-toast-font-family, monospace);
     font-weight: bold;
     color: white;
     border-width: 1px;
@@ -155,6 +155,8 @@ export const hyperclayStyles = `
     background-color: #0B0C12;
     border: 2px dashed rgba(255,255,255,.6);
     transition: right 0.5s ease-in-out;
+    font-size: var(--hyperclay-toast-font-size, inherit);
+    font-family: var(--hyperclay-toast-font-family, inherit);
   }
 
   [data-toast-theme="hyperclay"] .toast svg {

package/src/utilities/cacheBust.js

@@ -2,10 +2,11 @@
 // Cache-bust an element's href or src attribute by adding/updating a version query param
 
 function cacheBust(el) {
-  const attr = el.href !== undefined ? 'href' : 'src';
-  const url = new URL(el[attr], location.href);
+  const attr = el.hasAttribute('href') ? 'href' : 'src';
+  const currentValue = el.getAttribute(attr);
+  const url = new URL(currentValue, location.href);
   url.searchParams.set('v', Date.now());
-  el[attr] = url.href;
+  el.setAttribute(attr, url.href);
 }
 
 // Auto-export to window unless suppressed by loader