simplyview 3.0.2 → 3.0.4

package/dist/simply.everything.js

@@ -1,10 +1,4 @@
 (() => {
-  var __defProp = Object.defineProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-
   // src/activate.mjs
   var listeners = /* @__PURE__ */ new Map();
   var activate = {
@@ -66,10 +60,6 @@
   });
 
   // src/action.mjs
-  var action_exports = {};
-  __export(action_exports, {
-    actions: () => actions
-  });
   function actions(options) {
     if (options.app) {
       const actionHandler = {
@@ -84,10 +74,6 @@
   }
 
   // src/route.mjs
-  var route_exports = {};
-  __export(route_exports, {
-    routes: () => routes
-  });
   function routes(options) {
     return new SimplyRoute(options);
   }
@@ -95,13 +81,15 @@
     constructor(options = {}) {
       this.root = options.root || "/";
       this.app = options.app;
+      this.addMissingSlash = !!options.addMissingSlash;
+      this.matchExact = !!options.matchExact;
       this.clear();
       if (options.routes) {
         this.load(options.routes);
       }
     }
     load(routes2) {
-      parseRoutes(routes2, this.routeInfo);
+      parseRoutes(routes2, this.routeInfo, this.matchExact);
     }
     clear() {
       this.routeInfo = [];
@@ -129,13 +117,22 @@
       path = getPath(path);
       for (let route of this.routeInfo) {
         matches = route.match.exec(path);
+        if (this.addMissingSlash && !matches?.length) {
+          if (path && path[path.length - 1] != "/") {
+            matches = route.match.exec(path + "/");
+            if (matches) {
+              path += "/";
+              history.replaceState({}, "", getURL(path));
+            }
+          }
+        }
         if (matches && matches.length) {
           var params = {};
-          route.params.forEach((key, i) => {
+          route.params.forEach((key, i2) => {
             if (key == "*") {
               key = "remainder";
             }
-            params[key] = matches[i + 1];
+            params[key] = matches[i2 + 1];
           });
           Object.assign(params, options);
           args.route = route;
@@ -147,9 +144,6 @@
           return args.result;
         }
       }
-      if (path && path[path.length - 1] != "/") {
-        return this.match(path + "/", options);
-      }
       return false;
     }
     runListeners(action, params) {
@@ -176,7 +170,7 @@
           this.match(getPath(document.location.pathname, this.root));
         }
       });
-      globalThis.document.addEventListener("click", (evt) => {
+      this.app.container.addEventListener("click", (evt) => {
         if (evt.ctrlKey) {
           return;
         }
@@ -195,10 +189,11 @@
           if (this.has(path)) {
             let params = this.runListeners("goto", { path });
             if (params.path) {
-              this.goto(params.path);
+              if (this.goto(params.path)) {
+                evt.preventDefault();
+                return false;
+              }
             }
-            evt.preventDefault();
-            return false;
           }
         }
       });
@@ -259,11 +254,13 @@
     }
     return root + path;
   }
-  function getRegexpFromRoute(route) {
+  function getRegexpFromRoute(route, exact = false) {
+    if (exact) {
+      return new RegExp("^" + route.replace(/:\w+/g, "([^/]+)").replace(/:\*/, "(.*)") + "(\\?|$)");
+    }
     return new RegExp("^" + route.replace(/:\w+/g, "([^/]+)").replace(/:\*/, "(.*)"));
   }
-  function parseRoutes(routes2) {
-    let routeInfo = [];
+  function parseRoutes(routes2, routeInfo, exact = false) {
     const paths = Object.keys(routes2);
     const matchParams = /:(\w+|\*)/g;
     for (let path of paths) {
@@ -276,7 +273,7 @@
         }
       } while (matches);
       routeInfo.push({
-        match: getRegexpFromRoute(path),
+        match: getRegexpFromRoute(path, exact),
         params,
         action: routes2[path]
       });
@@ -285,10 +282,6 @@
   }
 
   // src/command.mjs
-  var command_exports = {};
-  __export(command_exports, {
-    commands: () => commands
-  });
   var SimplyCommands = class {
     constructor(options = {}) {
       if (!options.app) {
@@ -311,7 +304,7 @@
           return;
         }
         const shouldContinue = this[command.name].call(options.app, command.source, command.value);
-        if (shouldContinue === false) {
+        if (shouldContinue !== true) {
           evt.preventDefault();
           evt.stopPropagation();
           return false;
@@ -409,11 +402,14 @@
   ];
 
   // src/key.mjs
-  var key_exports = {};
-  __export(key_exports, {
-    keys: () => keys
+  var KEY = Object.freeze({
+    Compose: 229,
+    Control: 17,
+    Meta: 224,
+    Alt: 18,
+    Shift: 16
   });
-  var SimplyKeys = class {
+  var SimplyKey = class {
     constructor(options = {}) {
       if (!options.app) {
         options.app = {};
@@ -423,7 +419,7 @@
       }
       Object.assign(this, options.keys);
       const keyHandler = (e) => {
-        if (e.isComposing || e.keyCode === 229) {
+        if (e.isComposing || e.keyCode === KEY.Compose) {
           return;
         }
         if (e.defaultPrevented) {
@@ -436,845 +432,88 @@
         if (e.target.closest("[data-simply-keyboard]")) {
           selectedKeyboard = e.target.closest("[data-simply-keyboard]").dataset.simplyKeyboard;
         }
-        let key = "";
-        if (e.ctrlKey && e.keyCode != 17) {
-          key += "Control+";
-        }
-        if (e.metaKey && e.keyCode != 224) {
-          key += "Meta+";
-        }
-        if (e.altKey && e.keyCode != 18) {
-          key += "Alt+";
-        }
-        if (e.shiftKey && e.keyCode != 16) {
-          key += "Shift+";
-        }
-        key += e.key;
-        if (this[selectedKeyboard] && this[selectedKeyboard][key]) {
-          let keyboard = this[selectedKeyboard];
-          keyboard[key].call(options.app, e);
-        }
-      };
-      options.app.container.addEventListener("keydown", keyHandler);
-    }
-  };
-  function keys(options = {}) {
-    return new SimplyKeys(options);
-  }
-
-  // src/state.mjs
-  var state_exports = {};
-  __export(state_exports, {
-    batch: () => batch,
-    clockEffect: () => clockEffect,
-    destroy: () => destroy,
-    effect: () => effect,
-    signal: () => signal,
-    throttledEffect: () => throttledEffect,
-    untracked: () => untracked
-  });
-  var iterate = Symbol("iterate");
-  if (!Symbol.xRay) {
-    Symbol.xRay = Symbol("xRay");
-  }
-  var signalHandler = {
-    get: (target, property, receiver) => {
-      if (property === Symbol.xRay) {
-        return target;
-      }
-      const value = target?.[property];
-      notifyGet(receiver, property);
-      if (typeof value === "function") {
-        if (Array.isArray(target)) {
-          return (...args) => {
-            let l = target.length;
-            let result = value.apply(receiver, args);
-            if (l != target.length) {
-              notifySet(receiver, makeContext("length", { was: l, now: target.length }));
-            }
-            return result;
-          };
-        } else if (target instanceof Set || target instanceof Map) {
-          return (...args) => {
-            let s = target.size;
-            let result = value.apply(target, args);
-            if (s != target.size) {
-              notifySet(receiver, makeContext("size", { was: s, now: target.size }));
-            }
-            if (["set", "add", "clear", "delete"].includes(property)) {
-              notifySet(receiver, makeContext({ entries: {}, forEach: {}, has: {}, keys: {}, values: {}, [Symbol.iterator]: {} }));
-            }
-            return result;
-          };
-        } else if (target instanceof HTMLElement || target instanceof Number || target instanceof String || target instanceof Boolean) {
-          return value.bind(target);
-        } else {
-          return value.bind(receiver);
-        }
-      }
-      if (value && typeof value == "object") {
-        return signal(value);
-      }
-      return value;
-    },
-    set: (target, property, value, receiver) => {
-      value = value?.[Symbol.xRay] || value;
-      let current = target[property];
-      if (current !== value) {
-        target[property] = value;
-        notifySet(receiver, makeContext(property, { was: current, now: value }));
-      }
-      if (typeof current === "undefined") {
-        notifySet(receiver, makeContext(iterate, {}));
-      }
-      return true;
-    },
-    has: (target, property) => {
-      let receiver = signals.get(target);
-      if (receiver) {
-        notifyGet(receiver, property);
-      }
-      return Object.hasOwn(target, property);
-    },
-    deleteProperty: (target, property) => {
-      if (typeof target[property] !== "undefined") {
-        let current = target[property];
-        delete target[property];
-        let receiver = signals.get(target);
-        notifySet(receiver, makeContext(property, { delete: true, was: current }));
-      }
-      return true;
-    },
-    defineProperty: (target, property, descriptor) => {
-      if (typeof target[property] === "undefined") {
-        let receiver = signals.get(target);
-        notifySet(receiver, makeContext(iterate, {}));
-      }
-      return Object.defineProperty(target, property, descriptor);
-    },
-    ownKeys: (target) => {
-      let receiver = signals.get(target);
-      notifyGet(receiver, iterate);
-      return Reflect.ownKeys(target);
-    }
-  };
-  var signals = /* @__PURE__ */ new WeakMap();
-  function signal(v) {
-    if (!signals.has(v)) {
-      signals.set(v, new Proxy(v, signalHandler));
-    }
-    return signals.get(v);
-  }
-  var batchedListeners = /* @__PURE__ */ new Set();
-  var batchMode = 0;
-  function notifySet(self, context = {}) {
-    let listeners2 = [];
-    context.forEach((change, property) => {
-      let propListeners = getListeners(self, property);
-      if (propListeners?.length) {
-        for (let listener of propListeners) {
-          addContext(listener, makeContext(property, change));
-        }
-        listeners2 = listeners2.concat(propListeners);
-      }
-    });
-    listeners2 = new Set(listeners2.filter(Boolean));
-    if (listeners2) {
-      if (batchMode) {
-        batchedListeners = batchedListeners.union(listeners2);
-      } else {
-        const currentEffect = computeStack[computeStack.length - 1];
-        for (let listener of Array.from(listeners2)) {
-          if (listener != currentEffect && listener?.needsUpdate) {
-            listener();
-          }
-          clearContext(listener);
-        }
-      }
-    }
-  }
-  function makeContext(property, change) {
-    let context = /* @__PURE__ */ new Map();
-    if (typeof property === "object") {
-      for (let prop in property) {
-        context.set(prop, property[prop]);
-      }
-    } else {
-      context.set(property, change);
-    }
-    return context;
-  }
-  function addContext(listener, context) {
-    if (!listener.context) {
-      listener.context = context;
-    } else {
-      context.forEach((change, property) => {
-        listener.context.set(property, change);
-      });
-    }
-    listener.needsUpdate = true;
-  }
-  function clearContext(listener) {
-    delete listener.context;
-    delete listener.needsUpdate;
-  }
-  function notifyGet(self, property) {
-    let currentCompute = computeStack[computeStack.length - 1];
-    if (currentCompute) {
-      setListeners(self, property, currentCompute);
-    }
-  }
-  var listenersMap = /* @__PURE__ */ new WeakMap();
-  var computeMap = /* @__PURE__ */ new WeakMap();
-  function getListeners(self, property) {
-    let listeners2 = listenersMap.get(self);
-    return listeners2 ? Array.from(listeners2.get(property) || []) : [];
-  }
-  function setListeners(self, property, compute) {
-    if (!listenersMap.has(self)) {
-      listenersMap.set(self, /* @__PURE__ */ new Map());
-    }
-    let listeners2 = listenersMap.get(self);
-    if (!listeners2.has(property)) {
-      listeners2.set(property, /* @__PURE__ */ new Set());
-    }
-    listeners2.get(property).add(compute);
-    if (!computeMap.has(compute)) {
-      computeMap.set(compute, /* @__PURE__ */ new Map());
-    }
-    let connectedSignals = computeMap.get(compute);
-    if (!connectedSignals.has(property)) {
-      connectedSignals.set(property, /* @__PURE__ */ new Set());
-    }
-    connectedSignals.get(property).add(self);
-  }
-  function clearListeners(compute) {
-    let connectedSignals = computeMap.get(compute);
-    if (connectedSignals) {
-      connectedSignals.forEach((property) => {
-        property.forEach((s) => {
-          let listeners2 = listenersMap.get(s);
-          if (listeners2.has(property)) {
-            listeners2.get(property).delete(compute);
-          }
-        });
-      });
-    }
-  }
-  var computeStack = [];
-  var effectStack = [];
-  var effectMap = /* @__PURE__ */ new WeakMap();
-  var signalStack = [];
-  function effect(fn) {
-    if (effectStack.findIndex((f) => fn == f) !== -1) {
-      throw new Error("Recursive update() call", { cause: fn });
-    }
-    effectStack.push(fn);
-    let connectedSignal = signals.get(fn);
-    if (!connectedSignal) {
-      connectedSignal = signal({
-        current: null
-      });
-      signals.set(fn, connectedSignal);
-    }
-    const computeEffect = function computeEffect2() {
-      if (signalStack.findIndex((s) => s == connectedSignal) !== -1) {
-        throw new Error("Cyclical dependency in update() call", { cause: fn });
-      }
-      clearListeners(computeEffect2);
-      computeStack.push(computeEffect2);
-      signalStack.push(connectedSignal);
-      let result;
-      try {
-        result = fn(computeEffect2, computeStack, signalStack);
-      } finally {
-        computeStack.pop();
-        signalStack.pop();
-        if (result instanceof Promise) {
-          result.then((result2) => {
-            connectedSignal.current = result2;
-          });
-        } else {
-          connectedSignal.current = result;
-        }
-      }
-    };
-    computeEffect.fn = fn;
-    effectMap.set(connectedSignal, computeEffect);
-    computeEffect();
-    return connectedSignal;
-  }
-  function destroy(connectedSignal) {
-    const computeEffect = effectMap.get(connectedSignal)?.deref();
-    if (!computeEffect) {
-      return;
-    }
-    clearListeners(computeEffect);
-    let fn = computeEffect.fn;
-    signals.remove(fn);
-    effectMap.delete(connectedSignal);
-  }
-  function batch(fn) {
-    batchMode++;
-    let result;
-    try {
-      result = fn();
-    } finally {
-      if (result instanceof Promise) {
-        result.then(() => {
-          batchMode--;
-          if (!batchMode) {
-            runBatchedListeners();
+        let keyCombination = [];
+        if (e.ctrlKey && e.keyCode != KEY.Control) {
+          keyCombination.push("Control");
+        }
+        if (e.metaKey && e.keyCode != KEY.Meta) {
+          keyCombination.push("Meta");
+        }
+        if (e.altKey && e.keyCode != KEY.Alt) {
+          keyCombination.push("Alt");
+        }
+        if (e.shiftKey && e.keyCode != KEY.Shift) {
+          keyCombination.push("Shift");
+        }
+        keyCombination.push(e.key.toLowerCase());
+        let keyboards = [];
+        let keyboardElement = event.target.closest("[data-simply-keyboard]");
+        while (keyboardElement) {
+          keyboards.push(keyboardElement.dataset.simplyKeyboard);
+          keyboardElement = keyboardElement.parentNode.closest("[data-simply-keyboard]");
+        }
+        keyboards.push("");
+        let keyboard, subkeyboard;
+        let separators = ["+", "-"];
+        for (i in keyboards) {
+          keyboard = keyboards[i];
+          if (keyboard == "") {
+            subkeyboard = "default";
+          } else {
+            subkeyboard = keyboard;
+            keyboard += ".";
           }
-        });
-      } else {
-        batchMode--;
-        if (!batchMode) {
-          runBatchedListeners();
-        }
-      }
-    }
-    return result;
-  }
-  function runBatchedListeners() {
-    let copyBatchedListeners = Array.from(batchedListeners);
-    batchedListeners = /* @__PURE__ */ new Set();
-    const currentEffect = computeStack[computeStack.length - 1];
-    for (let listener of copyBatchedListeners) {
-      if (listener != currentEffect && listener?.needsUpdate) {
-        listener();
-      }
-      clearContext(listener);
-    }
-  }
-  function throttledEffect(fn, throttleTime) {
-    if (effectStack.findIndex((f) => fn == f) !== -1) {
-      throw new Error("Recursive update() call", { cause: fn });
-    }
-    effectStack.push(fn);
-    let connectedSignal = signals.get(fn);
-    if (!connectedSignal) {
-      connectedSignal = signal({
-        current: null
-      });
-      signals.set(fn, connectedSignal);
-    }
-    let throttled = false;
-    let hasChange = true;
-    const computeEffect = function computeEffect2() {
-      if (signalStack.findIndex((s) => s == connectedSignal) !== -1) {
-        throw new Error("Cyclical dependency in update() call", { cause: fn });
-      }
-      if (throttled && throttled > Date.now()) {
-        hasChange = true;
-        return;
-      }
-      clearListeners(computeEffect2);
-      computeStack.push(computeEffect2);
-      signalStack.push(connectedSignal);
-      let result;
-      try {
-        result = fn(computeEffect2, computeStack, signalStack);
-      } finally {
-        hasChange = false;
-        computeStack.pop();
-        signalStack.pop();
-        if (result instanceof Promise) {
-          result.then((result2) => {
-            connectedSignal.current = result2;
-          });
-        } else {
-          connectedSignal.current = result;
-        }
-      }
-      throttled = Date.now() + throttleTime;
-      globalThis.setTimeout(() => {
-        if (hasChange) {
-          computeEffect2();
-        }
-      }, throttleTime);
-    };
-    computeEffect();
-    return connectedSignal;
-  }
-  function clockEffect(fn, clock) {
-    let connectedSignal = signals.get(fn);
-    if (!connectedSignal) {
-      connectedSignal = signal({
-        current: null
-      });
-      signals.set(fn, connectedSignal);
-    }
-    let lastTick = -1;
-    let hasChanged = true;
-    const computeEffect = function computeEffect2() {
-      if (lastTick < clock.time) {
-        if (hasChanged) {
-          clearListeners(computeEffect2);
-          computeStack.push(computeEffect2);
-          lastTick = clock.time;
-          let result;
-          try {
-            result = fn(computeEffect2, computeStack);
-          } finally {
-            computeStack.pop();
-            if (result instanceof Promise) {
-              result.then((result2) => {
-                connectedSignal.current = result2;
-              });
-            } else {
-              connectedSignal.current = result;
+          for (let separator of separators) {
+            let keyString = keyCombination.join(separator);
+            if (this[subkeyboard] && typeof this[subkeyboard][keyString] == "function") {
+              let _continue = this[subkeyboard][keyString].call(this[subkeyboard], e);
+              if (!_continue) {
+                e.preventDefault();
+                return;
+              }
             }
-            hasChanged = false;
-          }
-        } else {
-          lastTick = clock.time;
-        }
-      } else {
-        hasChanged = true;
-      }
-    };
-    computeEffect();
-    return connectedSignal;
-  }
-  function untracked(fn) {
-    const remember = computeStack.slice();
-    computeStack = [];
-    try {
-      return fn();
-    } finally {
-      computeStack = remember;
-    }
-  }
-
-  // src/bind.mjs
-  var SimplyBind = class {
-    constructor(options) {
-      this.bindings = /* @__PURE__ */ new Map();
-      const defaultOptions = {
-        container: document.body,
-        attribute: "data-bind",
-        transformers: [],
-        defaultTransformers: [defaultTransformer]
-      };
-      if (!options?.root) {
-        throw new Error("bind needs at least options.root set");
-      }
-      this.options = Object.assign({}, defaultOptions, options);
-      const attribute = this.options.attribute;
-      const render = (el) => {
-        this.bindings.set(el, throttledEffect(() => {
-          const context = {
-            templates: el.querySelectorAll(":scope > template"),
-            path: this.getBindingPath(el)
-          };
-          context.value = getValueByPath(this.options.root, context.path);
-          context.element = el;
-          runTransformers(context);
-        }, 100));
-      };
-      const runTransformers = (context) => {
-        let transformers = this.options.defaultTransformers || [];
-        if (context.element.dataset.transform) {
-          context.element.dataset.transform.split(" ").filter(Boolean).forEach((t) => {
-            if (this.options.transformers[t]) {
-              transformers.push(this.options.transformers[t]);
-            } else {
-              console.warn("No transformer with name " + t + " configured", { cause: context.element });
+            if (typeof this[subkeyboard + keyString] == "function") {
+              let _continue = this[subkeyboard + keyString].call(this, e);
+              if (!_continue) {
+                e.preventDefault();
+                return;
+              }
             }
-          });
-        }
-        let next;
-        for (let transformer of transformers) {
-          next = /* @__PURE__ */ ((next2, transformer2) => {
-            return (context2) => {
-              return transformer2.call(this, context2, next2);
-            };
-          })(next, transformer);
-        }
-        next(context);
-      };
-      const applyBindings = (bindings2) => {
-        for (let bindingEl of bindings2) {
-          render(bindingEl);
-        }
-      };
-      const updateBindings = (changes) => {
-        for (const change of changes) {
-          if (change.type == "childList" && change.addedNodes) {
-            for (let node of change.addedNodes) {
-              if (node instanceof HTMLElement) {
-                let bindings2 = Array.from(node.querySelectorAll(`[${attribute}]`));
-                if (node.matches(`[${attribute}]`)) {
-                  bindings2.unshift(node);
-                }
-                if (bindings2.length) {
-                  applyBindings(bindings2);
-                }
+            if (this[selectedKeyboard] && this[selectedKeyboard][keyString]) {
+              let targets = options.app.container.querySelectorAll('[data-simply-accesskey="' + keyboard + keyString + '"]');
+              if (targets.length) {
+                targets.forEach((t) => t.click());
+                e.preventDefault();
               }
             }
           }
         }
       };
-      this.observer = new MutationObserver((changes) => {
-        updateBindings(changes);
-      });
-      this.observer.observe(options.container, {
-        subtree: true,
-        childList: true
-      });
-      const bindings = this.options.container.querySelectorAll("[" + this.options.attribute + "]:not(template)");
-      if (bindings.length) {
-        applyBindings(bindings);
-      }
-    }
-    /**
-     * Finds the first matching template and creates a new DocumentFragment
-     * with the correct data bind attributes in it (prepends the current path)
-     */
-    applyTemplate(context) {
-      const path = context.path;
-      const templates = context.templates;
-      const list = context.list;
-      const index = context.index;
-      const parent = context.parent;
-      const value = list ? list[index] : context.value;
-      let template = this.findTemplate(templates, value);
-      if (!template) {
-        let result = new DocumentFragment();
-        result.innerHTML = "<!-- no matching template -->";
-        return result;
-      }
-      let clone = template.content.cloneNode(true);
-      if (!clone.children?.length) {
-        throw new Error("template must contain a single html element", { cause: template });
-      }
-      if (clone.children.length > 1) {
-        throw new Error("template must contain a single root node", { cause: template });
-      }
-      const bindings = clone.querySelectorAll("[" + this.options.attribute + "]");
-      const attribute = this.options.attribute;
-      for (let binding of bindings) {
-        const bind2 = binding.getAttribute(attribute);
-        if (bind2.substring(0, "#root.".length) == "#root.") {
-          binding.setAttribute(attribute, bind2.substring("#root.".length));
-        } else if (bind2 == "#value" && index != null) {
-          binding.setAttribute(attribute, path + "." + index);
-        } else if (index != null) {
-          binding.setAttribute(attribute, path + "." + index + "." + bind2);
-        } else {
-          binding.setAttribute(attribute, parent + "." + bind2);
-        }
-      }
-      if (typeof index !== "undefined") {
-        clone.children[0].setAttribute(attribute + "-key", index);
-      }
-      clone.children[0].$bindTemplate = template;
-      return clone;
-    }
-    getBindingPath(el) {
-      return el.getAttribute(this.options.attribute);
-    }
-    /**
-     * Finds the first template from an array of templates that
-     * matches the given value. 
-     */
-    findTemplate(templates, value) {
-      const templateMatches = (t) => {
-        let path = this.getBindingPath(t);
-        let currentItem;
-        if (path) {
-          if (path.substr(0, 6) == "#root.") {
-            currentItem = getValueByPath(this.options.root, path);
-          } else {
-            currentItem = getValueByPath(value, path);
-          }
-        } else {
-          currentItem = value;
-        }
-        const strItem = "" + currentItem;
-        let matches = t.getAttribute(this.options.attribute + "-match");
-        if (matches) {
-          if (matches === "#empty" && !currentItem) {
-            return t;
-          } else if (matches === "#notempty" && currentItem) {
-            return t;
-          }
-          if (strItem.match(matches)) {
-            return t;
-          }
-        }
-        if (!matches) {
-          return t;
-        }
-      };
-      let template = Array.from(templates).find(templateMatches);
-      let rel = template?.getAttribute("rel");
-      if (rel) {
-        let replacement = document.querySelector("template#" + rel);
-        if (!replacement) {
-          throw new Error("Could not find template with id " + rel);
-        }
-        template = replacement;
-      }
-      return template;
-    }
-    destroy() {
-      this.bindings.forEach((binding) => {
-        destroy(binding);
-      });
-      this.bindings = /* @__PURE__ */ new Map();
-      this.observer.disconnect();
+      options.app.container.addEventListener("keydown", keyHandler);
     }
   };
-  function bind(options) {
-    return new SimplyBind(options);
-  }
-  function matchValue(a, b) {
-    if (a == "#empty" && !b) {
-      return true;
-    }
-    if (b == "#empty" && !a) {
-      return true;
-    }
-    if ("" + a == "" + b) {
-      return true;
-    }
-    return false;
-  }
-  function getValueByPath(root, path) {
-    let parts = path.split(".");
-    let curr = root;
-    let part, prevPart;
-    while (parts.length && curr) {
-      part = parts.shift();
-      if (part == "#key") {
-        return prevPart;
-      } else if (part == "#value") {
-        return curr;
-      } else if (part == "#root") {
-        curr = root;
-      } else {
-        part = decodeURIComponent(part);
-        curr = curr[part];
-        prevPart = part;
-      }
-    }
-    return curr;
-  }
-  function defaultTransformer(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    if (Array.isArray(value) && templates?.length) {
-      transformArrayByTemplates.call(this, context);
-    } else if (typeof value == "object" && templates?.length) {
-      transformObjectByTemplates.call(this, context);
-    } else if (templates?.length) {
-      transformLiteralByTemplates.call(this, context);
-    } else if (el.tagName == "INPUT") {
-      transformInput.call(this, context);
-    } else if (el.tagName == "BUTTON") {
-      transformButton.call(this, context);
-    } else if (el.tagName == "SELECT") {
-      transformSelect.call(this, context);
-    } else if (el.tagName == "A") {
-      transformAnchor.call(this, context);
-    } else {
-      transformElement.call(this, context);
-    }
-    return context;
-  }
-  function transformArrayByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    let items = el.querySelectorAll(":scope > [" + attribute + "-key]");
-    let lastKey = 0;
-    let skipped = 0;
-    context.list = value;
-    for (let item2 of items) {
-      let currentKey = parseInt(item2.getAttribute(attribute + "-key"));
-      if (currentKey > lastKey) {
-        context.index = lastKey;
-        el.insertBefore(this.applyTemplate(context), item2);
-      } else if (currentKey < lastKey) {
-        item2.remove();
-      } else {
-        let bindings = Array.from(item2.querySelectorAll(`[${attribute}]`));
-        if (item2.matches(`[${attribute}]`)) {
-          bindings.unshift(item2);
-        }
-        let needsReplacement = bindings.find((b) => {
-          let databind = b.getAttribute(attribute);
-          return databind.substr(0, 5) !== "#root" && databind.substr(0, path.length) !== path;
-        });
-        if (!needsReplacement) {
-          if (item2.$bindTemplate) {
-            let newTemplate = this.findTemplate(templates, value[lastKey]);
-            if (newTemplate != item2.$bindTemplate) {
-              needsReplacement = true;
-              if (!newTemplate) {
-                skipped++;
-              }
-            }
-          }
-        }
-        if (needsReplacement) {
-          context.index = lastKey;
-          el.replaceChild(this.applyTemplate(context), item2);
-        }
-      }
-      lastKey++;
-      if (lastKey >= value.length) {
-        break;
-      }
-    }
-    items = el.querySelectorAll(":scope > [" + attribute + "-key]");
-    let length = items.length + skipped;
-    if (length > value.length) {
-      while (length > value.length) {
-        let child = el.querySelectorAll(":scope > :not(template)")?.[length - 1];
-        child?.remove();
-        length--;
-      }
-    } else if (length < value.length) {
-      while (length < value.length) {
-        context.index = length;
-        el.appendChild(this.applyTemplate(context));
-        length++;
-      }
-    }
-  }
-  function transformObjectByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    context.list = value;
-    let items = Array.from(el.querySelectorAll(":scope > [" + attribute + "-key]"));
-    for (let key in context.list) {
-      context.index = key;
-      let item2 = items.shift();
-      if (!item2) {
-        el.appendChild(this.applyTemplate(context));
-        continue;
-      }
-      if (item2.getAttribute[attribute + "-key"] != key) {
-        items.unshift(item2);
-        let outOfOrderItem = el.querySelector(":scope > [" + attribute + '-key="' + key + '"]');
-        if (!outOfOrderItem) {
-          let clone = this.applyTemplate(context);
-          if (clone.firstElementChild) {
-            el.insertBefore(clone, item2);
-          }
-          continue;
-        } else {
-          el.insertBefore(outOfOrderItem, item2);
-          item2 = outOfOrderItem;
-          items = items.filter((i) => i != outOfOrderItem);
-        }
-      }
-      let newTemplate = this.findTemplate(templates, value[key]);
-      if (newTemplate != item2.$bindTemplate) {
-        let clone = this.applyTemplate(context);
-        el.replaceChild(clone, item2);
-      }
-    }
-    while (items.length) {
-      item = items.shift();
-      item.remove();
-    }
-  }
-  function transformLiteralByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    const rendered = el.querySelector(":scope > :not(template)");
-    const template = this.findTemplate(templates, value);
-    context.parent = el.parentElement?.closest(`[${attribute}]`)?.getAttribute(attribute) || "#root";
-    if (rendered) {
-      if (template) {
-        if (rendered?.$bindTemplate != template) {
-          const clone = this.applyTemplate(context);
-          el.replaceChild(clone, rendered);
-        }
-      } else {
-        el.removeChild(rendered);
-      }
-    } else if (template) {
-      const clone = this.applyTemplate(context);
-      el.appendChild(clone);
-    }
+  function keys(options = {}) {
+    return new SimplyKey(options);
   }
-  function transformInput(context) {
-    const el = context.element;
-    const value = context.value;
-    if (el.type == "checkbox" || el.type == "radio") {
-      if (matchValue(el.value, value)) {
-        el.checked = true;
+
+  // src/view.mjs
+  function view(options) {
+    if (options.app) {
+      options.app.view = options.view || {};
+      const load = () => {
+        const data = options.app.view;
+        const path = globalThis.editor.data.getDataPath(options.app.container || document.body);
+        options.app.view = globalThis.editor.currentData[path];
+        Object.assign(options.app.view, data);
+      };
+      if (globalThis.editor && globalThis.editor.currentData) {
+        load();
       } else {
-        el.checked = false;
-      }
-    } else if (!matchValue(el.value, value)) {
-      el.value = "" + value;
-    }
-  }
-  function transformButton(context) {
-    const el = context.element;
-    const value = context.value;
-    if (!matchValue(el.value, value)) {
-      el.value = "" + value;
-    }
-  }
-  function transformSelect(context) {
-    const el = context.element;
-    const value = context.value;
-    if (el.multiple) {
-      if (Array.isArray(value)) {
-        for (let option of el.options) {
-          if (value.indexOf(option.value) === false) {
-            option.selected = false;
-          } else {
-            option.selected = true;
-          }
-        }
+        document.addEventListener("simply-content-loaded", load);
       }
+      return options.app.view;
     } else {
-      let option = el.options.find((o) => matchValue(o.value, value));
-      if (option) {
-        option.selected = true;
-      }
-    }
-  }
-  function transformAnchor(context) {
-    const el = context.element;
-    const value = context.value;
-    if (value?.innerHTML && !matchValue(el.innerHTML, value.innerHTML)) {
-      el.innerHTML = "" + value.innerHTML;
-    }
-    if (value?.href && !matchValue(el.href, value.href)) {
-      el.href = "" + value.href;
-    }
-  }
-  function transformElement(context) {
-    const el = context.element;
-    const value = context.value;
-    if (!matchValue(el.innerHTML, value)) {
-      if (typeof value == "undefined" || value == null) {
-        el.innerHTML = "";
-      } else {
-        el.innerHTML = "" + value;
-      }
+      return options.view;
     }
   }
 
@@ -1282,30 +521,29 @@
   var SimplyApp = class {
     constructor(options = {}) {
       this.container = options.container || document.body;
-      if (!options.state) {
-        options.state = {};
-      }
-      this.state = signal(options.state);
-      if (options.commands) {
-        this.commands = commands({ app: this, container: this.container, commands: options.commands });
-      }
-      if (options.keys) {
-        this.keys = keys({ app: this, keys: options.keys });
-      }
-      if (options.routes) {
-        this.routes = routes({ app: this, routes: options.routes });
-      }
-      if (options.actions) {
-        this.actions = actions({ app: this, actions: options.actions });
-      }
-      let bindOptions = { container: this.container, root: this.state };
-      if (options.defaultTransformers) {
-        bindOptions.defaultTransformers = options.defaultTransformers;
-      }
-      if (options.transformers) {
-        bindOptions.transformers = options.transformers;
+      for (let key in options) {
+        switch (key) {
+          case "commands":
+            this.commands = commands({ app: this, container: this.container, commands: options.commands });
+            break;
+          case "keys":
+          case "keyboard":
+            this.keys = keys({ app: this, keys: options.keys });
+            break;
+          case "routes":
+            this.routes = routes({ app: this, routes: options.routes });
+            break;
+          case "actions":
+            this.actions = actions({ app: this, actions: options.actions });
+            break;
+          case "view":
+            this.view = view({ app: this, view: options.view });
+            break;
+          default:
+            this[key] = options[key];
+            break;
+        }
       }
-      this.bind = bind(bindOptions);
     }
   };
   function app(options = {}) {
@@ -1362,7 +600,7 @@
   var waitForPreviousScripts = async () => {
     return new Promise(function(resolve) {
       var next = globalThis.document.createElement("script");
-      next.src = "javascript:document.dispatchEvent(new Event('simply-include-next'))";
+      next.src = "https://cdn.jsdelivr.net/gh/simplyedit/simplyview/dist/simply.include.next.js";
       next.async = false;
       globalThis.document.addEventListener("simply-include-next", () => {
         head.removeChild(next);
@@ -1424,17 +662,19 @@
       }
       let scriptsFragment = globalThis.document.createDocumentFragment();
       const scripts = fragment.querySelectorAll("script");
-      for (let script of scripts) {
-        let placeholder = globalThis.document.createComment(script.src || "inline script");
-        script.parentNode.insertBefore(placeholder, script);
-        script.dataset.simplyLocation = scriptLocations.length;
-        scriptLocations.push(placeholder);
-        scriptsFragment.appendChild(script);
+      if (scripts.length) {
+        for (let script of scripts) {
+          let placeholder = globalThis.document.createComment(script.src || "inline script");
+          script.parentNode.insertBefore(placeholder, script);
+          script.dataset.simplyLocation = scriptLocations.length;
+          scriptLocations.push(placeholder);
+          scriptsFragment.appendChild(script);
+        }
+        globalThis.setTimeout(function() {
+          include.scripts(Array.from(scriptsFragment.children), link ? link.href : globalThis.location.href);
+        }, 10);
       }
       link.parentNode.insertBefore(fragment, link ? link : null);
-      globalThis.setTimeout(function() {
-        include.scripts(scriptsFragment.childNodes, link ? link.href : globalThis.location.href);
-      }, 10);
     }
   };
   var included = {};
@@ -1482,157 +722,16 @@
   observe();
   handleChanges2();
 
-  // src/model.mjs
-  var model_exports = {};
-  __export(model_exports, {
-    columns: () => columns,
-    filter: () => filter,
-    model: () => model,
-    paging: () => paging,
-    sort: () => sort
-  });
-  var SimplyModel = class {
-    /**
-     * Creates a new datamodel, with a state property that contains
-     * all the data passed to this constructor
-     * @param state	Object with all the data for this model
-     */
-    constructor(state) {
-      this.state = signal(state);
-      if (!this.state.options) {
-        this.state.options = {};
-      }
-      this.effects = [{ current: state.data }];
-      this.view = signal(state.data);
-    }
-    /**
-     * Adds an effect to run whenever a signal it depends on
-     * changes. this.state is the usual signal.
-     * The `fn` function param is not itself an effect, but must return
-     * and effect function. `fn` takes one param, which is the data signal.
-     * This signal will always have at least a `current` property.
-     * The result of the effect function is pushed on to the this.effects
-     * list. And the last effect added is set as this.view
-     */
-    addEffect(fn) {
-      const dataSignal = this.effects[this.effects.length - 1];
-      this.view = fn.call(this, dataSignal);
-      this.effects.push(this.view);
-    }
-  };
-  function model(options) {
-    return new SimplyModel(options);
-  }
-  function sort(options = {}) {
-    return function(data) {
-      this.state.options.sort = Object.assign({
-        direction: "asc",
-        sortBy: null,
-        sortFn: (a, b) => {
-          const sort2 = this.state.options.sort;
-          const sortBy = sort2.sortBy;
-          if (!sort2.sortBy) {
-            return 0;
-          }
-          const larger = sort2.direction == "asc" ? 1 : -1;
-          const smaller = sort2.direction == "asc" ? -1 : 1;
-          if (typeof a?.[sortBy] === "undefined") {
-            if (typeof b?.[sortBy] === "undefined") {
-              return 0;
-            }
-            return larger;
-          }
-          if (typeof b?.[sortBy] === "undefined") {
-            return smaller;
-          }
-          if (a[sortBy] < b[sortBy]) {
-            return smaller;
-          } else if (a[sortBy] > b[sortBy]) {
-            return larger;
-          } else {
-            return 0;
-          }
-        }
-      }, options);
-      return effect(() => {
-        const sort2 = this.state.options.sort;
-        if (sort2?.sortBy && sort2?.direction) {
-          return data.current.toSorted(sort2?.sortFn);
-        }
-        return data.current;
-      });
-    };
-  }
-  function paging(options = {}) {
-    return function(data) {
-      this.state.options.paging = Object.assign({
-        page: 1,
-        pageSize: 20,
-        max: 1
-      }, options);
-      return effect(() => {
-        return batch(() => {
-          const paging2 = this.state.options.paging;
-          if (!paging2.pageSize) {
-            paging2.pageSize = 20;
-          }
-          paging2.max = Math.ceil(this.state.data.length / paging2.pageSize);
-          paging2.page = Math.max(1, Math.min(paging2.max, paging2.page));
-          const start = (paging2.page - 1) * paging2.pageSize;
-          const end = start + paging2.pageSize;
-          return data.current.slice(start, end);
-        });
-      });
-    };
-  }
-  function filter(options) {
-    if (!options?.name || typeof options.name !== "string") {
-      throw new Error("filter requires options.name to be a string");
-    }
-    if (!options.matches || typeof options.matches !== "function") {
-      throw new Error("filter requires options.matches to be a function");
-    }
-    return function(data) {
-      this.state.options[options.name] = options;
-      return effect(() => {
-        if (this.state.options[options.name].enabled) {
-          return data.filter(this.state.options.matches);
-        }
-      });
-    };
-  }
-  function columns(options = {}) {
-    if (!options || typeof options !== "object" || Object.keys(options).length === 0) {
-      throw new Error("columns requires options to be an object with at least one property");
-    }
-    return function(data) {
-      this.state.options.columns = options;
-      return effect(() => {
-        return data.current.map((input) => {
-          let result = {};
-          for (let key of Object.keys(this.state.options.columns)) {
-            if (!this.state.options.columns[key].hidden) {
-              result[key] = input[key];
-            }
-          }
-          return result;
-        });
-      });
-    };
-  }
-
   // src/everything.mjs
   var simply = {
     activate,
-    action: action_exports,
+    action: actions,
     app,
-    bind,
-    command: command_exports,
+    command: commands,
     include,
-    key: key_exports,
-    model: model_exports,
-    route: route_exports,
-    state: state_exports
+    key: keys,
+    route: routes,
+    view
   };
   window.simply = simply;
   var everything_default = simply;