hyperclayjs 1.20.3 → 1.22.0

package/README.md

@@ -59,7 +59,7 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | autosave | 1.4KB | Auto-save on DOM changes |
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
-| edit-mode-helpers | 7.5KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
+| edit-mode-helpers | 8.3KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
 | option-visibility | 7.8KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | persist | 2.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
 | save-core | 8.9KB | Basic save function only - hyperclay.savePage() |
@@ -74,7 +74,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
-| dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
+| dom-helpers | 6.8KB | el.nearest, el.val, el.text, el.exec, el.cycle |
 | event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
 | input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
@@ -132,17 +132,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~57.8KB)
+### Minimal (~58.6KB)
 Essential features for basic editing
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Standard (~80.1KB)
+### Standard (~81.5KB)
 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 (~214.7KB)
+### Everything (~216.1KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.20.3",
+  "version": "1.22.0",
   "description": "Modular JavaScript library for building interactive malleable HTML files with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",
@@ -24,7 +24,8 @@
   ],
   "scripts": {
     "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",
+    "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",
     "build:website": "node scripts/build-website.js",
     "generate:deps": "node build/generate-dependency-graph.js",
     "build:loader": "node build/build-loader.js",

package/src/core/adminContenteditable.js

@@ -2,9 +2,11 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
+const SELECTOR = '[edit-mode-contenteditable], [editmode\\:contenteditable]';
+
 export function disableContentEditableBeforeSave () {
   beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
+    docElem.querySelectorAll(SELECTOR).forEach(resource => {
       const originalValue = resource.getAttribute("contenteditable");
       resource.setAttribute("inert-contenteditable", originalValue);
       resource.removeAttribute("contenteditable");
@@ -22,7 +24,7 @@ export function enableContentEditableForAdminOnPageLoad () {
 
 // Runtime toggle functions
 export function enableContentEditable() {
-  document.querySelectorAll('[edit-mode-contenteditable]').forEach(el => {
+  document.querySelectorAll(SELECTOR).forEach(el => {
     let val = el.getAttribute("inert-contenteditable");
     if (!["false", "plaintext-only"].includes(val)) val = "true";
     el.setAttribute("contenteditable", val);
@@ -31,7 +33,7 @@ export function enableContentEditable() {
 }
 
 export function disableContentEditable() {
-  document.querySelectorAll('[edit-mode-contenteditable]').forEach(el => {
+  document.querySelectorAll(SELECTOR).forEach(el => {
     const val = el.getAttribute("contenteditable") || "true";
     el.setAttribute("inert-contenteditable", val);
     el.removeAttribute("contenteditable");
@@ -48,4 +50,4 @@ export function init() {
 window.hyperclay = window.hyperclay || {};
 window.hyperclay.enableContentEditable = enableContentEditable;
 window.hyperclay.disableContentEditable = disableContentEditable;
-window.h = window.hyperclay;
+window.h = window.hyperclay;

package/src/core/adminInputs.js

@@ -2,15 +2,24 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import { beforeSave } from "./savePage.js";
 
+const SELECTOR_DISABLED = '[edit-mode-input], [viewmode\\:disabled]';
+const SELECTOR_READONLY = '[viewmode\\:readonly]';
+const SELECTOR_ALL = '[edit-mode-input], [viewmode\\:disabled], [viewmode\\:readonly]';
+
 export function disableAdminInputsBeforeSave() {
   beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-input]').forEach(input => {
-      if (supportsReadonly(input)) {
+    docElem.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
+      if (input.hasAttribute('viewmode:disabled')) {
+        input.setAttribute('disabled', '');
+      } else if (supportsReadonly(input)) {
         input.setAttribute('readonly', '');
       } else {
         input.setAttribute('disabled', '');
       }
     });
+    docElem.querySelectorAll(SELECTOR_READONLY).forEach(input => {
+      input.setAttribute('readonly', '');
+    });
   });
 }
 
@@ -24,45 +33,49 @@ export function enableAdminInputsOnPageLoad() {
 
 // Runtime toggle functions
 export function enableAdminInputs() {
-  document.querySelectorAll('[edit-mode-input]').forEach(input => {
-    if (supportsReadonly(input)) {
+  document.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
+    if (input.hasAttribute('viewmode:disabled')) {
+      input.removeAttribute('disabled');
+    } else if (supportsReadonly(input)) {
       input.removeAttribute('readonly');
     } else {
       input.removeAttribute('disabled');
     }
   });
+  document.querySelectorAll(SELECTOR_READONLY).forEach(input => {
+    input.removeAttribute('readonly');
+  });
 }
 
 export function disableAdminInputs() {
-  document.querySelectorAll('[edit-mode-input]').forEach(input => {
-    if (supportsReadonly(input)) {
+  document.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
+    if (input.hasAttribute('viewmode:disabled')) {
+      input.setAttribute('disabled', '');
+    } else if (supportsReadonly(input)) {
       input.setAttribute('readonly', '');
     } else {
       input.setAttribute('disabled', '');
     }
   });
+  document.querySelectorAll(SELECTOR_READONLY).forEach(input => {
+    input.setAttribute('readonly', '');
+  });
 }
 
 // Input types that support the readonly attribute
 const readonlyTypes = ['text', 'search', 'url', 'tel', 'email', 'password', 'date', 'month', 'week', 'time', 'datetime-local', 'number'];
 
 function supportsReadonly(element) {
-  // Handle different element types
   const tagName = element.tagName?.toUpperCase();
 
-  // TEXTAREA supports readonly
   if (tagName === 'TEXTAREA') return true;
-
-  // SELECT, BUTTON, FIELDSET use disabled
   if (tagName === 'SELECT' || tagName === 'BUTTON' || tagName === 'FIELDSET') return false;
 
-  // For INPUT elements, check the type
   if (tagName === 'INPUT') {
     const type = element.type || 'text';
     return readonlyTypes.includes(type);
   }
 
-  // Default to disabled for unknown elements
   return false;
 }
 
@@ -76,4 +89,4 @@ export function init() {
 window.hyperclay = window.hyperclay || {};
 window.hyperclay.enableAdminInputs = enableAdminInputs;
 window.hyperclay.disableAdminInputs = disableAdminInputs;
-window.h = window.hyperclay;
+window.h = window.hyperclay;

package/src/core/adminOnClick.js

@@ -2,9 +2,11 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
+const SELECTOR = '[edit-mode-onclick], [editmode\\:onclick]';
+
 export function disableOnClickBeforeSave () {
   beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-onclick]').forEach(resource => {
+    docElem.querySelectorAll(SELECTOR).forEach(resource => {
       const originalValue = resource.getAttribute("onclick");
       resource.setAttribute("inert-onclick", originalValue);
       resource.removeAttribute("onclick");
@@ -22,7 +24,7 @@ export function enableOnClickForAdminOnPageLoad () {
 
 // Runtime toggle functions
 export function enableOnClick() {
-  document.querySelectorAll('[edit-mode-onclick]').forEach(el => {
+  document.querySelectorAll(SELECTOR).forEach(el => {
     const val = el.getAttribute("inert-onclick");
     if (val) {
       el.setAttribute("onclick", val);
@@ -32,7 +34,7 @@ export function enableOnClick() {
 }
 
 export function disableOnClick() {
-  document.querySelectorAll('[edit-mode-onclick]').forEach(el => {
+  document.querySelectorAll(SELECTOR).forEach(el => {
     const val = el.getAttribute("onclick");
     if (val) {
       el.setAttribute("inert-onclick", val);
@@ -51,4 +53,4 @@ export function init() {
 window.hyperclay = window.hyperclay || {};
 window.hyperclay.enableOnClick = enableOnClick;
 window.hyperclay.disableOnClick = disableOnClick;
-window.h = window.hyperclay;
+window.h = window.hyperclay;

package/src/core/adminResources.js

@@ -2,11 +2,13 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
+const SELECTOR = '[edit-mode-resource]:is(style, link, script), [editmode\\:resource]:is(style, link, script)';
+const SELECTOR_INERT = '[edit-mode-resource]:is(style, link, script)[type^="inert/"], [editmode\\:resource]:is(style, link, script)[type^="inert/"]';
+
 export function disableAdminResourcesBeforeSave () {
   beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-resource]:is(style, link, script)').forEach(resource => {
+    docElem.querySelectorAll(SELECTOR).forEach(resource => {
       const currentType = resource.getAttribute('type') || 'text/javascript';
-      // Only add the inert/ prefix if it's not already there
       if (!currentType.startsWith('inert/')) {
         resource.setAttribute('type', `inert/${currentType}`);
       }
@@ -24,14 +26,14 @@ export function enableAdminResourcesOnPageLoad () {
 
 // Runtime toggle functions
 export function enableAdminResources() {
-  document.querySelectorAll('[edit-mode-resource]:is(style, link, script)[type^="inert/"]').forEach(resource => {
+  document.querySelectorAll(SELECTOR_INERT).forEach(resource => {
     resource.type = resource.type.replace(/inert\//g, '');
     resource.replaceWith(resource.cloneNode(true));
   });
 }
 
 export function disableAdminResources() {
-  document.querySelectorAll('[edit-mode-resource]:is(style, link, script)').forEach(resource => {
+  document.querySelectorAll(SELECTOR).forEach(resource => {
     const currentType = resource.getAttribute('type') || 'text/javascript';
     if (!currentType.startsWith('inert/')) {
       resource.setAttribute('type', `inert/${currentType}`);
@@ -50,4 +52,4 @@ export function init() {
 window.hyperclay = window.hyperclay || {};
 window.hyperclay.enableAdminResources = enableAdminResources;
 window.hyperclay.disableAdminResources = disableAdminResources;
-window.h = window.hyperclay;
+window.h = window.hyperclay;

package/src/custom-attributes/domHelpers.js

@@ -8,7 +8,23 @@ function init () {
     return;
   }
 
+  // elem.el.menu returns nearest element with a "menu" attribute (alias for elem.nearest.menu)
   // elem.nearest.project returns nearest element with a "project" attribute
+  Object.defineProperty(HTMLElement.prototype, 'el', {
+    configurable: true,
+    get: function() {
+      let element = this;
+
+      const handler = {
+        get(target, prop) {
+          return nearest(element, `[${prop}], .${prop}`);
+        }
+      };
+
+      return new Proxy({}, handler);
+    }
+  });
+
   Object.defineProperty(HTMLElement.prototype, 'nearest', {
     configurable: true,
     get: function() {
@@ -183,6 +199,16 @@ function init () {
     if (next) this.setAttribute(setAttr, next);
   };
 
+  Element.prototype.show = function() {
+    this.style.display = '';
+    return this;
+  };
+
+  Element.prototype.hide = function() {
+    this.style.display = 'none';
+    return this;
+  };
+
 }
 
 // Auto-export to window unless suppressed by loader

package/src/custom-attributes/movable.js

@@ -0,0 +1,93 @@
+/*
+
+   Make elements freely positionable by dragging
+
+   How to use:
+   - add `movable` attribute to an element to make it draggable
+   - e.g. <div movable style="transform: translate(100px, 50px)">...</div>
+   - add `movable-handle` to a child to restrict the grab zone
+   - e.g. <div movable><div movable-handle>⠿</div>...</div>
+   - without a handle, the entire element is grabbable
+
+   Position is stored directly in the element's transform style.
+   While dragging, the element gets a `movable-dragging` attribute.
+
+*/
+import { isEditMode } from "../core/isAdminOfCurrentResource.js";
+import Mutation from "../utilities/mutation.js";
+
+let drag = null;
+let zIndex = 0;
+
+function parseTranslate(el) {
+  const match = el.style.transform?.match(/translate\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+  return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+}
+
+function onPointerDown(e) {
+  const handle = e.target.closest('[movable-handle]');
+  const movable = e.target.closest('[movable]');
+  if (!movable) return;
+
+  if (handle) {
+    if (!movable.contains(handle)) return;
+  } else {
+    if (movable.querySelector('[movable-handle]')) return;
+  }
+
+  const pos = parseTranslate(movable);
+  const scrollEl = movable.parentElement;
+
+  drag = {
+    el: movable,
+    offsetX: e.clientX - pos.x + (scrollEl?.scrollLeft || 0),
+    offsetY: e.clientY - pos.y + (scrollEl?.scrollTop || 0),
+    scrollEl
+  };
+
+  movable.setAttribute('movable-dragging', '');
+  movable.style.zIndex = ++zIndex;
+  e.preventDefault();
+}
+
+function onPointerMove(e) {
+  if (!drag) return;
+  const x = Math.max(0, e.clientX - drag.offsetX + (drag.scrollEl?.scrollLeft || 0));
+  const y = Math.max(0, e.clientY - drag.offsetY + (drag.scrollEl?.scrollTop || 0));
+  drag.el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function onPointerUp() {
+  if (!drag) return;
+  drag.el.removeAttribute('movable-dragging');
+  drag = null;
+}
+
+function makeMovable(el) {
+  if (!el.style.transform) {
+    el.style.transform = 'translate(0px, 0px)';
+  }
+}
+
+function init() {
+  if (!isEditMode) return;
+
+  document.querySelectorAll('[movable]').forEach(makeMovable);
+
+  document.addEventListener('pointerdown', onPointerDown);
+  document.addEventListener('pointermove', onPointerMove);
+  document.addEventListener('pointerup', onPointerUp);
+  document.addEventListener('pointercancel', onPointerUp);
+
+  Mutation.onAddElement({
+    selectorFilter: "[movable]",
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element }) => makeMovable(element));
+  });
+}
+
+init();
+
+export { init };
+export default init;

package/src/hyperclay.js

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