hyperclayjs 1.13.0 → 1.14.0

package/README.md

@@ -85,7 +85,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 20.8KB | Full modal window creation system - window.theModal |
+| 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.6KB)
+### 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 (~49.1KB)
+### 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 (~177.8KB)
+### Everything (~178KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.13.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.13.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 }
@@ -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;
@@ -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>`;

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