hyperclayjs 1.24.5 → 1.25.0

package/README.md

@@ -80,7 +80,7 @@ import 'hyperclayjs/presets/standard.js';
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
 | refetch-on-save | 0.9KB | Flash-free refetch of href/src resources on save via [refetch-on-save] attribute |
 | save-freeze | 2.8KB | [save-freeze] attribute - freeze element innerHTML for saves, live DOM changes freely |
-| sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
+| sortable | 3.3KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
 ### UI Components (User interface elements)
 
@@ -122,7 +122,7 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| file-upload | 10.7KB | File upload with progress |
+| file-upload | 11.3KB | File upload with progress |
 | live-sync | 11.6KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
@@ -144,7 +144,7 @@ Standard feature set for most use cases
 
 **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 (~224.9KB)
+### Everything (~225.4KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.24.5",
+  "version": "1.25.0",
   "description": "Modular JavaScript library for building interactive malleable HTML files with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",
@@ -23,7 +23,7 @@
     "src"
   ],
   "scripts": {
-    "deploy": "npx wrangler deploy",
+    "deploy": "npx wrangler deploy && git rev-parse HEAD > .deploy",
     "dev": "npm run build && npm run build:website && http-server website -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 && npm run build:llms-txt",
     "build:llms-txt": "node build/build-llms-txt.js",

package/src/communication/uploadFile.js

@@ -2,21 +2,42 @@ import toast from "../ui/toast.js";
 import debounce from "../utilities/debounce.js";
 import copyToClipboard from "../string-utilities/copy-to-clipboard.js";
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+function getMaxFileSize() {
+  return window.env?.MAX_UPLOAD_SIZE || 10 * 1024 * 1024;
+}
 
 export function uploadFile(eventOrFile, callback = () => {}, extraData = {}) {
-  // handle event
   if (eventOrFile instanceof Event) {
     eventOrFile.preventDefault();
     const fileInput = eventOrFile.target;
-    const file = fileInput.files[0];
-    return uploadFileFromObject(file, res => {
-      callback(res);
-      fileInput.value = ""; // Reset fileInput after upload
-    }, extraData);
+    const files = Array.from(fileInput.files);
+
+    if (files.length === 0) return Promise.reject(new Error('No files selected'));
+
+    if (files.length === 1) {
+      return uploadFileFromObject(files[0], res => {
+        callback(res);
+        fileInput.value = "";
+      }, extraData);
+    }
+
+    return (async () => {
+      const results = [];
+      for (let i = 0; i < files.length; i++) {
+        try {
+          const result = await uploadFileFromObject(files[i], () => {}, extraData);
+          results.push(result);
+        } catch (err) {
+          results.push({ error: err.message, fileName: files[i].name });
+        }
+        toast(`Uploaded ${i + 1} of ${files.length} files`);
+      }
+      fileInput.value = "";
+      callback(results);
+      return results;
+    })();
   }
 
-  // handle raw file object
   if (eventOrFile instanceof File) {
     return uploadFileFromObject(eventOrFile, callback, extraData);
   }
@@ -65,7 +86,7 @@ export function uploadFileBasic (eventOrFile, {
   onError = (error) => {}
 } = {}) {
   function handleUpload(file) {
-    if (file.size > MAX_FILE_SIZE) {
+    if (file.size > getMaxFileSize()) {
       onError(new Error('File too large'));
       return Promise.reject(new Error('File too large'));
     }
@@ -118,8 +139,9 @@ export function uploadFileBasic (eventOrFile, {
 }
 
 function uploadFileFromObject(file, onComplete = () => {}, extraData = {}) {
-  if (file.size > MAX_FILE_SIZE) {
-    toast(`Maximum file size: ${MAX_FILE_SIZE / 1024 / 1024}MB`, 'error');
+  const maxFileSize = getMaxFileSize();
+  if (file.size > maxFileSize) {
+    toast(`Maximum file size: ${maxFileSize / 1024 / 1024}MB`, 'error');
     return Promise.reject(new Error('File too large'));
   }
 
@@ -188,6 +210,7 @@ function uploadFileData(fileName, fileBody, progressCallback, extraData = {}) {
   const xhr = new XMLHttpRequest();
   xhr.open("POST", "/upload", true);
   xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.setRequestHeader("Page-URL", window.location.href);
 
   let lastReportedProgress = 0;
   const debouncedProgressCallback = debounce(function (event) {

package/src/custom-attributes/sortable.js

@@ -11,13 +11,12 @@
    - e.g. <ul sortable onsorted="console.log('Items reordered!')"></ul>
 
    This wrapper conditionally loads the full Sortable.js vendor script (~118KB)
-   only when in edit mode. The script is injected with save-remove so it's
-   stripped from the page before saving.
+   only when in edit mode, using dynamic import().
 
 */
 import { isEditMode } from "../core/isAdminOfCurrentResource.js";
 import Mutation from "../utilities/mutation.js";
-import { loadVendorScript, getVendorUrl } from "../utilities/loadVendorScript.js";
+import { getVendorUrl } from "../utilities/loadVendorScript.js";
 
 function makeSortable(sortableElem, Sortable) {
   let options = {};
@@ -75,7 +74,8 @@ async function init() {
 
   // Load the vendor script
   const vendorUrl = getVendorUrl(import.meta.url, '../vendor/Sortable.vendor.js');
-  const Sortable = await loadVendorScript(vendorUrl, 'Sortable');
+  await import(vendorUrl);
+  const Sortable = window.Sortable;
 
   // Auto-export to window unless suppressed by loader
   if (!window.__hyperclayNoAutoExport) {

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.24.5 - Minimal Browser-Native Loader
+ * HyperclayJS v1.25.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.

package/src/ui/theModal.js

@@ -433,6 +433,7 @@ const modalCss = `<style class="micromodal-css">
   padding: 6px 6px 7px;
   font-size: var(--hyperclay-modal-input-font-size, 16px);
   color: #000;
+  background: #fff;
 }
 
 .micromodal .micromodal__input:focus, .micromodal .micromodal__input:active {