hyperclayjs 1.0.0

package/custom-attributes/preventEnter.js

@@ -0,0 +1,13 @@
+// [prevent-enter]: Prevents Enter key from creating newlines
+function init () {
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter' || event.keyCode === 13) {
+      const preventEnterElement = event.target.closest('[prevent-enter]');
+      if (preventEnterElement) {
+        event.preventDefault();
+      }
+    }
+  });
+}
+export { init };
+export default init;

package/custom-attributes/sortable.js

@@ -0,0 +1,76 @@
+/*
+
+   Make elements drag-and-drop sortable
+
+   How to use:
+   - add `sortable` attribute to an element to make children sortable
+   - e.g. <div sortable></div>
+   - add `onsorted` attribute to execute code when items are sorted
+   - e.g. <ul sortable onsorted="console.log('Items reordered!')"></ul>
+
+*/
+import { isEditMode, isOwner } from "../core/isAdminOfCurrentResource.js";
+import Mutation from "../utilities/mutation.js";
+import Sortable from '../vendor/Sortable.js';
+
+function makeSortable (sortableElem) {
+  let options = {};
+
+  // Check if Sortable instance already exists
+  if (Sortable.get(sortableElem)) return;
+
+  const groupName = sortableElem.getAttribute('sortable');
+  if (groupName) options.group = groupName;
+
+  // Check for handles, but exclude those inside nested sortable elements
+  const handles = sortableElem.querySelectorAll('[sortable-handle]');
+  const nestedSortables = sortableElem.querySelectorAll('[sortable]');
+
+  // Check if any handle is NOT inside a nested sortable
+  const hasDirectHandle = Array.from(handles).some(handle => {
+    return !Array.from(nestedSortables).some(nested => nested.contains(handle));
+  });
+
+  if (hasDirectHandle) {
+    options.handle = '[sortable-handle]';
+  }
+
+  // Add onsorted callback if attribute exists
+  const onsortedCode = sortableElem.getAttribute('onsorted');
+  if (onsortedCode) {
+    options.onEnd = function(evt) {
+      try {
+        const asyncFn = new Function(`return (async function(evt) { ${onsortedCode} })`)();
+        asyncFn.call(sortableElem, evt);
+      } catch (error) {
+        console.error('Error in onsorted execution:', error);
+      }
+    };
+  }
+
+  Sortable.create(sortableElem, options);
+}
+
+function init () {
+  if (!isEditMode) return;
+
+  // Set up sortable on page load
+  document.querySelectorAll('[sortable]').forEach(makeSortable);
+
+  // Set up listener for dynamically added elements
+  Mutation.onAddElement({
+    selectorFilter: "[sortable]",
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element }) => {
+      makeSortable(element);
+    });
+  });
+
+  // ❗️re-initializing sortable on parent elements isn't necessary
+  // sortable.js handles this automatically
+  // ❌ onElementAdded(newElem => makeSortable(newElem.closest('[sortable]')))
+}
+
+export { init };
+export default init;

package/dom-utilities/All.js

@@ -0,0 +1,412 @@
+// Helper to check if an array contains DOM nodes
+const isElementArray = (arr) => {
+  if (!Array.isArray(arr)) return false;
+  // Empty arrays from element operations should stay wrapped for chainability
+  if (arr.length === 0) return true;
+  return arr.every(item => item instanceof Element || item instanceof Node || item instanceof Document);
+};
+
+const createMethodHandler = (elements, plugins, methods) => ({
+  get(target, prop) {
+    // Handle array-like numeric access and length
+    if (prop === 'length') return elements.length;
+
+    // Handle Symbol.iterator BEFORE number check
+    if (prop === Symbol.iterator) {
+      return elements[Symbol.iterator].bind(elements);
+    }
+
+    // Handle other Symbols (toStringTag, etc.) - return undefined to avoid Symbol-to-number conversion
+    if (typeof prop === 'symbol') {
+      return undefined;
+    }
+
+    // Handle numeric indices
+    if (!isNaN(prop)) return elements[prop];
+
+    // Handle array methods
+    if (prop in Array.prototype) {
+      const arrayMethod = Array.prototype[prop];
+      return (...args) => {
+        const result = arrayMethod.apply(elements, args);
+        // For methods that return arrays, only wrap if they contain DOM nodes
+        // Otherwise return plain array (jQuery-like behavior for primitives)
+        if (Array.isArray(result)) {
+          return isElementArray(result)
+            ? createElementProxy(result, plugins, methods)
+            : result;  // Return plain array for primitives
+        }
+        // For single element returns (like find), return raw value
+        if (result instanceof Element) {
+          return result;
+        }
+        // For boolean/primitive returns (some, every, etc), return raw value
+        return result;
+      };
+    }
+
+    // Handle event listeners and support event delegation
+    if (prop.startsWith('on')) {
+      return (selectorOrHandlerOrObject, optionalHandler) => {
+        const eventName = prop.slice(2);
+
+        // Handle object of bindings
+        if (selectorOrHandlerOrObject && typeof selectorOrHandlerOrObject === 'object') {
+          Object.entries(selectorOrHandlerOrObject).forEach(([selector, handler]) => {
+            elements.forEach(el => {
+              el.addEventListener(eventName, (e) => {
+                const closest = e.target.closest(selector);
+                if (closest && el.contains(closest)) {
+                  handler.call(closest, e);
+                }
+              });
+            });
+          });
+          return createElementProxy(elements, plugins, methods);
+        }
+
+        // Handle single binding (existing delegation code)
+        if (optionalHandler) {
+          const selector = selectorOrHandlerOrObject;
+          const handler = optionalHandler;
+
+          elements.forEach(el => {
+            el.addEventListener(eventName, (e) => {
+              const closest = e.target.closest(selector);
+              if (closest && el.contains(closest)) {
+                handler.call(closest, e);
+              }
+            });
+          });
+        } else {
+          const handler = selectorOrHandlerOrObject;
+          elements.forEach(el => el.addEventListener(eventName, handler));
+        }
+
+        return createElementProxy(elements, plugins, methods);
+      };
+    }
+
+    // Check plugins first
+    if (plugins[prop]) {
+      const plugin = plugins[prop];
+      if (typeof plugin === 'function') {
+        return createElementProxy(plugin(elements), plugins, methods);
+      }
+      if (typeof plugin === 'object') {
+        if (plugin.value) {
+          return createElementProxy(plugin.value(elements), plugins, methods);
+        }
+        if (plugin.properties) {
+          return createNestedPluginProxy(elements, plugin.properties, plugins, methods);
+        }
+      }
+      return plugin;
+    }
+
+    if (methods[prop]) {
+      const method = methods[prop];
+      return (...args) => {
+        const result = method.apply(createElementProxy(elements, plugins, methods), args);
+        // Only wrap arrays that contain DOM nodes, return plain arrays for primitives
+        return (result instanceof Array && isElementArray(result))
+          ? createElementProxy(result, plugins, methods)
+          : result;
+      };
+    }
+
+    // Check if we have any elements to work with
+    // Example: All('.missing') returns [] so firstEl is null
+    const firstEl = elements[0];
+    if (!firstEl) {
+      // No elements found - need to handle property access gracefully
+      // so chains like All.missing.classList.add('hidden') don't break
+      
+      // These properties return objects with their own methods (classList.add, style.color, etc)
+      // We know these are safe to proxy even when empty
+      if (['style', 'classList', 'dataset'].includes(prop)) {
+        return createIntermediateProxy([], prop, plugins, methods);
+      }
+
+      // For unknown properties, we need to check what they are on the DOM
+      // BUT we can't do Element.prototype.classList - that throws "Illegal invocation"
+      // Instead we use getOwnPropertyDescriptor which safely tells us ABOUT the property
+      const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, prop) ||
+                         Object.getOwnPropertyDescriptor(Node.prototype, prop);
+
+      if (descriptor?.get) {
+        // Properties like 'children', 'parentElement' have getters
+        // Treat them like classList - return a proxy that won't break chains
+        return createIntermediateProxy([], prop, plugins, methods);
+      }
+
+      if (typeof descriptor?.value === 'function') {
+        // Regular methods like 'appendChild', 'remove'
+        // Return a no-op function: All.missing.remove() does nothing, returns proxy
+        return (...args) => createElementProxy([], plugins, methods);
+      }
+
+      // Property doesn't exist on DOM elements (like All.missing.foobar)
+      return undefined;
+    }
+
+    const value = firstEl[prop];
+
+    // The library is designed to handle chaining correctly
+    // - When a method returns an Element (like cloneNode), it wraps it in a proxy
+    // - When a method returns undefined (like removeAttribute), it chains on the original elements
+    // - For other return values, like strings, it returns the results in an array
+    // We also handle passing in an all-wrapped proxy object as an argument and loop over all elements in it
+    // In the method handler's get function, replace the function call handling with:
+    if (typeof value === 'function') {
+      return (...args) => {
+        // Unwrap any proxy arguments
+        const unwrappedArgs = args.map(arg => {
+          if (arg && arg.constructor === Proxy) {
+            return Array.from(arg);
+          }
+          return arg;
+        });
+
+        const results = elements.map(el => {
+          // Check if any of the unwrapped arguments are arrays (from proxies)
+          const hasProxyArgs = unwrappedArgs.some(Array.isArray);
+
+          if (hasProxyArgs) {
+            // Handle proxy arguments case
+            const elementResults = unwrappedArgs.map(arg => {
+              if (Array.isArray(arg)) {
+                return arg.map(proxyEl => el[prop](proxyEl));
+              }
+              return [el[prop](...args)];
+            }).flat();
+            return elementResults[elementResults.length - 1];
+          } else {
+            // Simple case - just call the method once with original arguments
+            return el[prop](...args);
+          }
+        });
+
+        if (results[0] instanceof Element) {
+          return createElementProxy(results.filter(Boolean), plugins, methods);
+        }
+        if (results[0] === undefined) {
+          return createElementProxy(elements, plugins, methods);
+        }
+        return results;
+      };
+    }
+
+    // Handle intermediate objects (style, classList, dataset)
+    if (['style', 'classList', 'dataset'].includes(prop)) {
+      return createIntermediateProxy(elements, prop, plugins, methods);
+    }
+
+    // Return array of values for leaf properties
+    return elements.map(el => el[prop]);
+  },
+
+  set(target, prop, value) {
+    elements.forEach(el => {
+      el[prop] = value;
+    });
+    return true;
+  }
+});
+
+const createNestedPluginProxy = (elements, properties, plugins, methods) => {
+  return new Proxy({}, {
+    get(target, prop) {
+      if (properties[prop]) {
+        const plugin = properties[prop];
+        if (typeof plugin === 'function') {
+          return createElementProxy(plugin(elements), plugins, methods);
+        }
+        return plugin;
+      }
+      return undefined;
+    }
+  });
+};
+
+const createIntermediateProxy = (elements, propName, plugins, methods) => {
+  return new Proxy({}, {
+    get(target, prop) {
+      // Handle function properties (like classList.add)
+      const firstEl = elements[0];
+      if (!firstEl) {
+        // Return no-op function for any property access on empty collection
+        // This ensures chaining continues to work even with no elements
+        return (...args) => createElementProxy(elements, plugins, methods);
+      }
+
+      const value = firstEl[propName][prop];
+      if (typeof value === 'function') {
+        return (...args) => {
+          elements.forEach(el => el[propName][prop](...args));
+          return createElementProxy(elements, plugins, methods);
+        };
+      }
+
+      // Return array of values for leaf properties
+      return elements.map(el => el[propName][prop]);
+    },
+
+    set(target, prop, value) {
+      elements.forEach(el => {
+        el[propName][prop] = value;
+      });
+      return true;
+    }
+  });
+};
+
+const sharedState = {
+  plugins: {},
+  methods: {}
+};
+
+const createElementProxy = (elements, plugins = sharedState.plugins, methods = sharedState.methods) => {
+  return new Proxy(elements, createMethodHandler(elements, plugins, methods));
+};
+
+const toElementArray = (input) => {
+  if (input instanceof Element || input instanceof Document) {
+    return [input];
+  }
+  if (Array.isArray(input)) {
+    if (input.every(el => el instanceof Element || el instanceof Document)) {
+      return input;
+    }
+    throw new TypeError('All array elements must be DOM Elements or Document');
+  }
+  if (typeof input === 'string') {
+    return Array.from(document.querySelectorAll(input));
+  }
+  throw new TypeError('Input must be a selector string, Element, Document, or Array of Elements');
+};
+
+// Default plugins
+const defaultPlugins = {
+  methods: {
+    eq(index) {
+      if (typeof index !== 'number') {
+        throw new TypeError('eq() requires a number as an argument');
+      }
+
+      // Handle negative indices (counting from the end)
+      const normalizedIndex = index < 0 ? this.length + index : index;
+
+      // Return array with single element at index, or empty array if index is invalid
+      // ❗️ Allows chaining to continue
+      return this[normalizedIndex] ? [this[normalizedIndex]] : [];
+    },
+
+    at(index) {
+      if (typeof index !== 'number') {
+        throw new TypeError('at() requires a number as an argument');
+      }
+      const normalizedIndex = index < 0 ? this.length + index : index;
+      return this[normalizedIndex];
+    },
+
+    prop(properties) {
+      if (typeof properties !== 'object' || properties === null) {
+        throw new TypeError('prop() requires an object of properties');
+      }
+
+      Object.entries(properties).forEach(([key, value]) => {
+        this.forEach(el => {
+          el[key] = value;
+        });
+      });
+
+      return this;
+    },
+
+    css(styles) {
+      if (typeof styles !== 'object' || styles === null) {
+        throw new TypeError('css() requires an object of styles');
+      }
+
+      Object.entries(styles).forEach(([property, value]) => {
+        this.forEach(el => {
+          el.style[property] = value;
+        });
+      });
+
+      return this;
+    }
+  }
+};
+
+const All = new Proxy(function (selectorOrElements, contextSelector) {
+  // If there's a context selector, search within that context
+  if (arguments.length === 2) {
+    if (typeof contextSelector !== 'string') {
+      throw new TypeError('Context selector must be a string');
+    }
+
+    // Get the context element(s)
+    const contextElements = Array.from(document.querySelectorAll(contextSelector));
+
+    // If first arg is a string selector, search within each context
+    if (typeof selectorOrElements === 'string') {
+      const elements = contextElements.flatMap(context => {
+        // Include context itself if it matches the selector
+        const matches = context.matches(selectorOrElements) ? [context] : [];
+        // Plus all descendants that match
+        const descendants = Array.from(context.querySelectorAll(selectorOrElements));
+        return [...matches, ...descendants];
+      });
+      return createElementProxy(elements);
+    }
+
+    // If first arg is elements, filter to those within context
+    const searchElements = toElementArray(selectorOrElements);
+    const elements = searchElements.filter(el =>
+      contextElements.some(context => context.contains(el))
+    );
+    return createElementProxy(elements);
+  }
+
+  // Single argument - normalize and return
+  const elements = toElementArray(selectorOrElements);
+  return createElementProxy(elements);
+}, {
+  get(target, prop) {
+    if (prop === 'use') {
+      return function (plugin) {
+        if (!plugin || typeof plugin !== 'object') {
+          throw new TypeError('Plugin must be an object with "properties" or "methods"');
+        }
+        if (plugin.properties) {
+          Object.assign(sharedState.plugins, plugin.properties);
+        }
+        if (plugin.methods) {
+          Object.assign(sharedState.methods, plugin.methods);
+        }
+        return this;
+      };
+    }
+
+    if (prop === Symbol.iterator) return undefined;
+    if (prop in target) return target[prop];
+
+    const elements = Array.from(document.querySelectorAll(`[${prop}], .${prop}`));
+    return createElementProxy(elements);
+  }
+});
+
+// Install default plugins
+All.use(defaultPlugins);
+
+// Export to window for global access
+export function exportToWindow() {
+  if (!window.hyperclay) {
+    window.hyperclay = {};
+  }
+  window.hyperclay.All = All;
+}
+
+export default All;

package/dom-utilities/getDataFromForm.js

@@ -0,0 +1,60 @@
+// easily convert a form into a JS object
+export default function getDataFromForm(container) {
+  const formData = {};
+  
+  // Helper function to process a single element
+  const processElement = (elem) => {
+    const name = elem.getAttribute('name');
+    const value = elem.getAttribute('value') || elem.value;
+    
+    // Skip elements without a name or with a disabled attribute
+    if (!name || elem.disabled) return;
+    
+    // Handle different element types
+    switch (elem.type) {
+      case 'checkbox':
+        if (!formData[name]) {
+          formData[name] = [];
+        }
+        if (elem.checked) {
+          formData[name].push(value);
+        }
+        break;
+      case 'radio':
+        if (elem.checked) {
+          formData[name] = value;
+        }
+        break;
+      case 'select-multiple':
+        formData[name] = Array.from(elem.selectedOptions, option => option.value);
+        break;
+      case 'button':
+      case 'submit':
+      case 'reset':
+        // Only include buttons if they have both name and value attributes
+        if (name && value) {
+          formData[name] = value;
+        }
+        break;
+      default:
+        formData[name] = value;
+    }
+  };
+
+  // If container is a form, use elements property
+  if (container instanceof HTMLFormElement) {
+    Array.from(container.elements).forEach(processElement);
+  } 
+  // Otherwise, process container itself and then query for elements with name attribute
+  else {
+    // Process container element if it has a name attribute
+    if (container.hasAttribute('name')) {
+      processElement(container);
+    }
+    // Process all child elements with name attributes
+    const elements = container.querySelectorAll('[name]');
+    elements.forEach(processElement);
+  }
+
+  return formData;
+}

package/dom-utilities/insertStyleTag.js

@@ -0,0 +1,28 @@
+export default function insertStyleTag(href) {
+  // First check if there's already a link with this exact href
+  if (document.querySelector(`link[href="${href}"]`)) {
+    return;
+  }
+  
+  // Extract a more reliable identifier from the URL
+  let identifier;
+  try {
+    const url = new URL(href, window.location.href);
+    // Get the filename from the path
+    identifier = url.pathname.split('/').pop();
+  } catch (e) {
+    // Fallback to using the href itself if URL parsing fails
+    identifier = href;
+  }
+  
+  // Look for any link that contains this identifier
+  if (identifier && document.querySelector(`link[href*="${identifier}"]`)) {
+    return;
+  }
+  
+  // If no duplicate found, add the stylesheet
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+}

package/dom-utilities/onDomReady.js

@@ -0,0 +1,7 @@
+export default function onDomReady (callback) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', callback);
+  } else {
+    callback();
+  }
+}

package/dom-utilities/onLoad.js

@@ -0,0 +1,7 @@
+export default function onLoad (callback) {
+  if (document.readyState === "complete") {
+    callback();
+  } else {
+    window.addEventListener("load", callback);
+  }
+}