@manyducks.co/dolla 0.68.1 → 0.69.0

package/lib/index.js

@@ -677,6 +677,20 @@ function isReadable(value) {
 function isWritable(value) {
   return isReadable(value) && typeof value.set === "function" && typeof value.update === "function";
 }
+function $$(initialValue, config) {
+  if (config) {
+    return proxy(initialValue, config);
+  } else {
+    return writable(initialValue);
+  }
+}
+function $(...args) {
+  if (args.length > 1) {
+    return computed(...args);
+  } else {
+    return readable(args[0]);
+  }
+}
 function readable(value) {
   if (isWritable(value)) {
     return {
@@ -690,89 +704,24 @@ function readable(value) {
   return {
     get: () => value,
     [OBSERVE]: (callback) => {
-      callback(value, void 0);
+      callback(value);
       return function stop() {
       };
     }
   };
 }
-function writable(value) {
-  if (isWritable(value)) {
-    return value;
-  }
-  if (isReadable(value)) {
-    throw new TypeError(`Failed to convert Readable into a Writable; can't add write access to a read-only value.`);
-  }
-  const observers = [];
-  let currentValue = value;
-  return {
-    // ----- Readable ----- //
-    get: () => currentValue,
-    [OBSERVE]: (callback) => {
-      observers.push(callback);
-      function stop() {
-        observers.splice(observers.indexOf(callback), 1);
-      }
-      callback(currentValue, void 0);
-      return stop;
-    },
-    // ----- Writable ----- //
-    set: (newValue) => {
-      if (!deepEqual(currentValue, newValue)) {
-        const previousValue = currentValue;
-        currentValue = newValue;
-        for (const callback of observers) {
-          callback(currentValue, previousValue);
-        }
-      }
-    },
-    update: (callback) => {
-      const newValue = callback(currentValue);
-      if (!deepEqual(currentValue, newValue)) {
-        const previousValue = currentValue;
-        currentValue = newValue;
-        for (const callback2 of observers) {
-          callback2(currentValue, previousValue);
-        }
-      }
-    }
-  };
-}
-function observe(readable2, callback) {
-  const readables = [];
-  if (Array.isArray(readable2) && readable2.every(isReadable)) {
-    readables.push(...readable2);
-  } else if (isReadable(readable2)) {
-    readables.push(readable2);
-  } else {
-    console.warn(readable2);
-    throw new TypeError(
-      `Expected one Readable or an array of Readables as the first argument. Got value: ${readable2}, type: ${typeOf(
-        readable2
-      )}`
-    );
-  }
-  if (readables.length === 0) {
-    throw new TypeError(`Expected at least one readable.`);
+function computed(...args) {
+  const compute = args.pop();
+  if (typeof compute !== "function") {
+    throw new TypeError(`Final argument must be a function. Got ${typeOf(compute)}: ${compute}`);
   }
-  if (readables.length > 1) {
-    return computed(readables, callback)[OBSERVE](() => {
-    });
-  } else {
-    return readables[0][OBSERVE](callback);
+  args = args.flat();
+  if (args.length < 1) {
+    throw new Error(`Must pass at least one state before the callback function.`);
   }
-}
-function computed(...args) {
-  if (isReadable(args[0])) {
-    if (typeof args[1] !== "function") {
-      throw new TypeError(
-        `When first argument is a Readable the second argument must be a callback function. Got type: ${typeOf(
-          args[1]
-        )}, value: ${args[1]}`
-      );
-    }
-    const readable2 = args[0];
-    const compute = args[1];
+  const readables = args;
+  if (readables.length === 1) {
+    const readable2 = readables[0];
     return {
       get: () => {
         const computed2 = compute(readable2.get());
@@ -784,34 +733,28 @@ function computed(...args) {
       },
       [OBSERVE]: (callback) => {
         let lastComputedValue = UNOBSERVED;
-        let lastObservedValue;
         return readable2[OBSERVE]((currentValue) => {
-          const computedValue = compute(currentValue, lastObservedValue);
+          const computedValue = compute(currentValue);
           if (isReadable(computedValue)) {
             lastComputedValue = computedValue;
-            return computedValue[OBSERVE]((current, previous) => {
-              callback(current, previous);
-              lastObservedValue = current;
+            return computedValue[OBSERVE]((current) => {
+              callback(current);
             });
           }
           if (!deepEqual(computedValue, lastComputedValue)) {
-            const previousValue = lastComputedValue === UNOBSERVED ? void 0 : lastComputedValue;
-            callback(computedValue, previousValue);
+            callback(computedValue);
             lastComputedValue = computedValue;
-            lastObservedValue = currentValue;
           }
         });
       }
     };
-  } else if (Array.isArray(args[0])) {
+  } else {
     let updateValue2 = function() {
-      const computedValue = compute(observedValues, previousObservedValues);
+      const computedValue = compute(...observedValues);
       if (!deepEqual(computedValue, latestComputedValue)) {
-        const previousValue = latestComputedValue === UNOBSERVED ? void 0 : latestComputedValue;
         latestComputedValue = computedValue;
-        previousObservedValues = observedValues;
         for (const callback of observers) {
-          callback(computedValue, previousValue);
+          callback(computedValue);
         }
       }
     }, startObserving2 = function() {
@@ -828,7 +771,6 @@ function computed(...args) {
           })
         );
       }
-      previousObservedValues = new Array().fill(void 0, 0, readables.length);
       observedValues = readables.map((x) => x.get());
       isObserving = true;
       updateValue2();
@@ -840,24 +782,9 @@ function computed(...args) {
       stopCallbacks = [];
     };
     var updateValue = updateValue2, startObserving = startObserving2, stopObserving = stopObserving2;
-    if (typeof args[1] !== "function") {
-      throw new TypeError(
-        `When first argument is an array of Readables the second argument must be a callback function. Got type: ${typeOf(
-          args[1]
-        )}, value: ${args[1]}`
-      );
-    }
-    if (!args[0].every(isReadable)) {
-      throw new TypeError(
-        `Computed expected an array of Readables. Got: [${args[0].map((x) => isReadable(x) ? `Readable<${typeOf(x.get())}>` : typeof x).join(", ")}]`
-      );
-    }
-    const readables = args[0];
-    const compute = args[1];
     const observers = [];
     let stopCallbacks = [];
     let isObserving = false;
-    let previousObservedValues = [];
     let observedValues = [];
     let latestComputedValue = UNOBSERVED;
     return {
@@ -865,17 +792,14 @@ function computed(...args) {
         if (isObserving) {
           return latestComputedValue;
         } else {
-          return compute(
-            readables.map((x) => x.get()),
-            new Array().fill(void 0, 0, readables.length)
-          );
+          return compute(...readables.map((x) => x.get()));
         }
       },
       [OBSERVE]: (callback) => {
         if (!isObserving) {
           startObserving2();
         }
-        callback(latestComputedValue, void 0);
+        callback(latestComputedValue);
         observers.push(callback);
         return function stop() {
           observers.splice(observers.indexOf(callback), 1);
@@ -885,42 +809,88 @@ function computed(...args) {
         };
       }
     };
-  } else {
-    throw new TypeError(
-      `Expected a Readable or array of Readables as a first argument. Got: ${typeOf(args[0])}, value: ${args[0]}`
-    );
   }
 }
+function writable(value) {
+  if (isWritable(value)) {
+    return value;
+  }
+  if (isReadable(value)) {
+    throw new TypeError(`Failed to convert Readable into a Writable; can't add write access to a read-only value.`);
+  }
+  const observers = [];
+  let currentValue = value;
+  return {
+    // ----- Readable ----- //
+    get: () => currentValue,
+    [OBSERVE]: (callback) => {
+      observers.push(callback);
+      function stop() {
+        observers.splice(observers.indexOf(callback), 1);
+      }
+      callback(currentValue);
+      return stop;
+    },
+    // ----- Writable ----- //
+    set: (newValue) => {
+      if (!deepEqual(currentValue, newValue)) {
+        const previousValue = currentValue;
+        currentValue = newValue;
+        for (const callback of observers) {
+          callback(currentValue, previousValue);
+        }
+      }
+    },
+    update: (callback) => {
+      const newValue = callback(currentValue);
+      if (!deepEqual(currentValue, newValue)) {
+        const previousValue = currentValue;
+        currentValue = newValue;
+        for (const callback2 of observers) {
+          callback2(currentValue, previousValue);
+        }
+      }
+    }
+  };
+}
 function proxy(source, config) {
   if (!isReadable(source)) {
     throw new TypeError(`Proxy source must be a Readable.`);
   }
-  const observers = [];
-  const currentValue = () => config.get(source);
   return {
     // ----- Readable ----- //
-    get: () => config.get(source),
+    get: () => config.get(),
     [OBSERVE]: (callback) => {
       let lastComputedValue = UNOBSERVED;
-      return source[OBSERVE]((_) => {
-        const computedValue = config.get(source);
+      return observe(source, (_) => {
+        const computedValue = config.get();
         if (!deepEqual(computedValue, lastComputedValue)) {
-          const previousValue = lastComputedValue === UNOBSERVED ? void 0 : lastComputedValue;
-          callback(computedValue, previousValue);
+          callback(computedValue);
           lastComputedValue = computedValue;
         }
       });
     },
     // ----- Writable ----- //
-    set: (newValue) => {
-      config.set(source, newValue);
+    set: (value) => {
+      config.set(value);
     },
     update: (callback) => {
-      const newValue = callback(config.get(source));
-      config.set(source, newValue);
+      config.set(callback(config.get()));
     }
   };
 }
+function observe(...args) {
+  const callback = args.pop();
+  const readables = args.flat();
+  if (readables.length === 0) {
+    throw new TypeError(`Expected at least one readable.`);
+  }
+  if (readables.length > 1) {
+    return computed(...readables, callback)[OBSERVE](() => null);
+  } else {
+    return readables[0][OBSERVE](callback);
+  }
+}
 function unwrap(value) {
   if (isReadable(value)) {
     return value.get();
@@ -1647,7 +1617,7 @@ function initView(config) {
     stores: /* @__PURE__ */ new Map(),
     parent: config.elementContext
   };
-  const $$children = writable(renderMarkupToDOM(config.children ?? [], { appContext, elementContext }));
+  const $$children = $$(renderMarkupToDOM(config.children ?? [], { appContext, elementContext }));
   let isConnected = false;
   const stopObserverCallbacks = [];
   const connectedCallbacks = [];
@@ -1706,19 +1676,20 @@ function initView(config) {
     crash(error) {
       config.appContext.crashCollector.crash({ error, componentName: ctx.name });
     },
-    observe(readables, callback) {
+    observe(...args) {
+      const callback = args.pop();
       if (isConnected) {
-        const stop = observe(readables, callback);
+        const stop = observe(args, callback);
         stopObserverCallbacks.push(stop);
       } else {
         connectedCallbacks.push(() => {
-          const stop = observe(readables, callback);
+          const stop = observe(args, callback);
           stopObserverCallbacks.push(stop);
         });
       }
     },
     outlet() {
-      return m("$outlet", { $children: readable($$children) });
+      return m("$outlet", { $children: $($$children) });
     }
   };
   const debugChannel = appContext.debugHub.channel({
@@ -1908,8 +1879,8 @@ var Repeat = class {
         connected.$$index.set(potential.index);
         newItems[potential.index] = connected;
       } else {
-        const $$value = writable(potential.value);
-        const $$index = writable(potential.index);
+        const $$value = $$(potential.value);
+        const $$index = $$(potential.index);
         newItems[potential.index] = {
           key: potential.key,
           $$value,
@@ -1918,7 +1889,7 @@ var Repeat = class {
             view: RepeatItemView,
             appContext: this.appContext,
             elementContext: this.elementContext,
-            props: { $value: readable($$value), $index: readable($$index), renderFn: this.renderFn }
+            props: { $value: $($$value), $index: $($$index), renderFn: this.renderFn }
           })
         };
       }
@@ -2024,7 +1995,7 @@ function m(type, props, ...children) {
   };
 }
 function cond(predicate, thenContent, elseContent) {
-  const $predicate = readable(predicate);
+  const $predicate = $(predicate);
   return m("$cond", {
     $predicate,
     thenContent,
@@ -2032,7 +2003,7 @@ function cond(predicate, thenContent, elseContent) {
   });
 }
 function repeat(items, keyFn, renderFn) {
-  const $items = readable(items);
+  const $items = $(items);
   return m("$repeat", { $items, keyFn, renderFn });
 }
 function portal(content, parent) {
@@ -2238,7 +2209,9 @@ function initStore(config) {
     crash(error) {
       config.appContext.crashCollector.crash({ error, componentName: ctx.name });
     },
-    observe(readables, callback) {
+    observe(...args) {
+      const callback = args.pop();
+      const readables = args.flat();
       if (isConnected) {
         const stop = observe(readables, callback);
         stopObserverCallbacks.push(stop);
@@ -2310,130 +2283,13 @@ function initStore(config) {
   };
 }
 
-// src/stores/dialog.ts
-function DialogStore(ctx) {
-  ctx.name = "dolla/dialog";
-  const { appContext, elementContext } = getStoreSecrets(ctx);
-  const container = document.createElement("div");
-  container.style.position = "fixed";
-  container.style.top = "0";
-  container.style.right = "0";
-  container.style.bottom = "0";
-  container.style.left = "0";
-  container.style.zIndex = "99999";
-  const $$dialogs = writable([]);
-  let activeDialogs = [];
-  function dialogChangedCallback() {
-    if (activeDialogs.length > 0) {
-      if (!container.parentNode) {
-        document.body.appendChild(container);
-      }
-    } else {
-      if (container.parentNode) {
-        document.body.removeChild(container);
-      }
-    }
-  }
-  ctx.observe($$dialogs, (dialogs) => {
-    requestAnimationFrame(() => {
-      let removed = [];
-      let added = [];
-      for (const dialog of activeDialogs) {
-        if (!dialogs.includes(dialog)) {
-          removed.push(dialog);
-        }
-      }
-      for (const dialog of dialogs) {
-        if (!activeDialogs.includes(dialog)) {
-          added.push(dialog);
-        }
-      }
-      for (const dialog of removed) {
-        if (dialog.transitionOutCallback) {
-          dialog.transitionOutCallback().then(() => {
-            dialog.instance.disconnect();
-            activeDialogs.splice(activeDialogs.indexOf(dialog), 1);
-            dialogChangedCallback();
-          });
-        } else {
-          dialog.instance.disconnect();
-          activeDialogs.splice(activeDialogs.indexOf(dialog), 1);
-        }
-      }
-      for (const dialog of added) {
-        dialog.instance.connect(container);
-        if (dialog.transitionInCallback) {
-          dialog.transitionInCallback();
-        }
-        activeDialogs.push(dialog);
-      }
-      dialogChangedCallback();
-    });
-  });
-  ctx.onDisconnected(() => {
-    if (container.parentNode) {
-      document.body.removeChild(container);
-    }
-  });
-  function open(view, props) {
-    const $$open = writable(true);
-    let dialog;
-    let transitionInCallback;
-    let transitionOutCallback;
-    let instance = initView({
-      view,
-      appContext,
-      elementContext,
-      props: {
-        ...props,
-        $$open,
-        transitionIn: (callback) => {
-          transitionInCallback = callback;
-        },
-        transitionOut: (callback) => {
-          transitionOutCallback = callback;
-        }
-      }
-    });
-    dialog = {
-      instance,
-      // These must be getters because the fns passed to props aren't called until before connect.
-      get transitionInCallback() {
-        return transitionInCallback;
-      },
-      get transitionOutCallback() {
-        return transitionOutCallback;
-      }
-    };
-    $$dialogs.update((current) => {
-      return [...current, dialog];
-    });
-    const stopObserver = observe($$open, (value) => {
-      if (!value) {
-        closeDialog();
-      }
-    });
-    function closeDialog() {
-      $$dialogs.update((current) => {
-        return current.filter((x) => x !== dialog);
-      });
-      dialog = void 0;
-      stopObserver();
-    }
-    return closeDialog;
-  }
-  return {
-    open
-  };
-}
-
 // src/stores/document.ts
 function DocumentStore(ctx) {
   ctx.name = "dolla/document";
-  const $$title = writable(document.title);
-  const $$visibility = writable(document.visibilityState);
-  const $$orientation = writable("landscape");
-  const $$colorScheme = writable("light");
+  const $$title = $$(document.title);
+  const $$visibility = $$(document.visibilityState);
+  const $$orientation = $$("landscape");
+  const $$colorScheme = $$("light");
   ctx.observe($$title, (current) => {
     document.title = current;
   });
@@ -2467,337 +2323,12 @@ function DocumentStore(ctx) {
   });
   return {
     $$title,
-    $visibility: readable($$visibility),
-    $orientation: readable($$orientation),
-    $colorScheme: readable($$colorScheme)
+    $visibility: $($$visibility),
+    $orientation: $($$orientation),
+    $colorScheme: $($$colorScheme)
   };
 }
 
-// src/stores/http.ts
-function HTTPStore(ctx) {
-  ctx.name = "dolla/http";
-  const fetch = ctx.options.fetch ?? getDefaultFetch();
-  const middleware = [];
-  async function request(method, uri, options) {
-    return makeRequest({ ...options, method, uri, middleware, fetch });
-  }
-  return {
-    /**
-     * Adds a new middleware that will apply to subsequent requests.
-     * Returns a function to remove this middleware.
-     *
-     * @param middleware - A middleware function that will intercept requests.
-     */
-    middleware(fn) {
-      middleware.push(fn);
-      return function remove() {
-        middleware.splice(middleware.indexOf(fn), 1);
-      };
-    },
-    async get(uri, options) {
-      return request("get", uri, options);
-    },
-    async put(uri, options) {
-      return request("put", uri, options);
-    },
-    async patch(uri, options) {
-      return request("patch", uri, options);
-    },
-    async post(uri, options) {
-      return request("post", uri, options);
-    },
-    async delete(uri, options) {
-      return request("delete", uri, options);
-    },
-    async head(uri, options) {
-      return request("head", uri, options);
-    },
-    async options(uri, options) {
-      return request("options", uri, options);
-    },
-    async trace(uri, options) {
-      return request("trace", uri, options);
-    }
-  };
-}
-function getDefaultFetch() {
-  if (typeof window !== "undefined" && window.fetch) {
-    return window.fetch.bind(window);
-  }
-  if (typeof global !== "undefined" && global.fetch) {
-    return global.fetch.bind(global);
-  }
-  throw new Error("Running in neither browser nor node. Please run this app in one of the supported environments.");
-}
-var HTTPResponseError = class extends Error {
-  response;
-  constructor(response) {
-    const { status, statusText, method, uri } = response;
-    const message = `${status} ${statusText}: Request failed (${method.toUpperCase()} ${uri})`;
-    super(message);
-    this.response = response;
-  }
-};
-async function makeRequest(config) {
-  const { headers, query, fetch, middleware } = config;
-  const request = {
-    method: config.method,
-    uri: config.uri,
-    get sameOrigin() {
-      return !request.uri.startsWith("http");
-    },
-    query: new URLSearchParams(),
-    headers: new Headers(),
-    body: config.body
-  };
-  if (headers) {
-    if (headers instanceof Map || headers instanceof Headers) {
-      headers.forEach((value, key) => {
-        request.headers.set(key, value);
-      });
-    } else if (headers != null && typeof headers === "object" && !Array.isArray(headers)) {
-      for (const name in headers) {
-        request.headers.set(name, String(headers[name]));
-      }
-    } else {
-      throw new TypeError(`Unknown headers type. Got: ${headers}`);
-    }
-  }
-  if (query) {
-    if (query instanceof Map || query instanceof URLSearchParams) {
-      query.forEach((value, key) => {
-        request.query.set(key, value);
-      });
-    } else if (query != null && typeof query === "object" && !Array.isArray(query)) {
-      for (const name in query) {
-        request.query.set(name, String(query[name]));
-      }
-    } else {
-      throw new TypeError(`Unknown query params type. Got: ${query}`);
-    }
-  }
-  let response;
-  const handler = async () => {
-    const query2 = request.query.toString();
-    const fullURL = query2.length > 0 ? request.uri + "?" + query2 : request.uri;
-    let reqBody;
-    if (!request.headers.has("content-type") && isObject(request.body)) {
-      request.headers.set("content-type", "application/json");
-      reqBody = JSON.stringify(request.body);
-    } else {
-      reqBody = request.body;
-    }
-    const fetched = await fetch(fullURL, {
-      method: request.method,
-      headers: request.headers,
-      body: reqBody
-    });
-    const headers2 = Object.fromEntries(fetched.headers.entries());
-    const contentType = headers2["content-type"];
-    let body;
-    if (contentType?.includes("application/json")) {
-      body = await fetched.json();
-    } else if (contentType?.includes("application/x-www-form-urlencoded")) {
-      body = await fetched.formData();
-    } else {
-      body = await fetched.text();
-    }
-    response = {
-      method: request.method,
-      uri: request.uri,
-      status: fetched.status,
-      statusText: fetched.statusText,
-      headers: headers2,
-      body
-    };
-  };
-  if (middleware.length > 0) {
-    const mount = (index = 0) => {
-      const current = middleware[index];
-      const next = middleware[index + 1] ? mount(index + 1) : handler;
-      return async () => current(request, async () => {
-        await next();
-        return response;
-      });
-    };
-    await mount()();
-  } else {
-    await handler();
-  }
-  if (response.status < 200 || response.status >= 400) {
-    throw new HTTPResponseError(response);
-  }
-  return response;
-}
-
-// src/stores/language.ts
-function LanguageStore(ctx) {
-  ctx.name = "dolla/language";
-  const languages = /* @__PURE__ */ new Map();
-  Object.entries(ctx.options.languages).forEach(([tag, config]) => {
-    languages.set(tag, new Language(tag, config));
-  });
-  ctx.info(
-    `App supports ${languages.size} language${languages.size === 1 ? "" : "s"}: '${[...languages.keys()].join("', '")}'`
-  );
-  const $$isLoaded = writable(false);
-  const $$language = writable(void 0);
-  const $$translation = writable(void 0);
-  const $noLanguageValue = readable("[NO LANGUAGE SET]");
-  const translationCache = [];
-  function getCached(key, values) {
-    for (const entry of translationCache) {
-      if (entry[0] === key && deepEqual(entry[1], values)) {
-        return entry[2];
-      }
-    }
-  }
-  function replaceMustaches(template, values) {
-    for (const name in values) {
-      template = template.replace(`{{${name}}}`, String(values[name]));
-    }
-    return template;
-  }
-  const currentLanguage = ctx.options.currentLanguage ? languages.get(ctx.options.currentLanguage) : languages.get([...languages.keys()][0]);
-  if (currentLanguage == null) {
-    $$isLoaded.set(true);
-  } else {
-    ctx.info(`Current language is '${currentLanguage.tag}'.`);
-    currentLanguage.getTranslation().then((translation) => {
-      $$language.set(currentLanguage.tag);
-      $$translation.set(translation);
-      $$isLoaded.set(true);
-    });
-  }
-  return {
-    $isLoaded: readable($$isLoaded),
-    $currentLanguage: readable($$language),
-    supportedLanguages: [...languages.keys()],
-    async setLanguage(tag) {
-      if (!languages.has(tag)) {
-        throw new Error(`Language '${tag}' is not supported.`);
-      }
-      const lang = languages.get(tag);
-      try {
-        const translation = await lang.getTranslation();
-        $$translation.set(translation);
-        $$language.set(tag);
-        ctx.info("set language to " + tag);
-      } catch (error) {
-        if (error instanceof Error) {
-          ctx.crash(error);
-        }
-      }
-    },
-    /**
-         * Returns a Readable of the translated value.
-    
-         * @param key - Key to the translated value.
-         * @param values - A map of {{placeholder}} names and the values to replace them with.
-         */
-    translate(key, values) {
-      if (!$$language.get()) {
-        return $noLanguageValue;
-      }
-      const cached = getCached(key, values);
-      if (cached) {
-        return cached;
-      }
-      if (values) {
-        const readableValues = {};
-        for (const [key2, value] of Object.entries(values)) {
-          if (isReadable(value)) {
-            readableValues[key2] = value;
-          }
-        }
-        const readableEntries = Object.entries(readableValues);
-        if (readableEntries.length > 0) {
-          const $merged = computed([$$translation, ...readableEntries.map((x) => x[1])], ([t, ...entryValues]) => {
-            const entries = entryValues.map((_, i) => readableEntries[i]);
-            const mergedValues = {
-              ...values
-            };
-            for (let i = 0; i < entries.length; i++) {
-              const key2 = entries[i][0];
-              mergedValues[key2] = entryValues[i];
-            }
-            const result = resolve(t, key) || `[NO TRANSLATION: ${key}]`;
-            return replaceMustaches(result, mergedValues);
-          });
-          translationCache.push([key, values, $merged]);
-          return $merged;
-        }
-      }
-      const $replaced = computed($$translation, (t) => {
-        let result = resolve(t, key) || `[NO TRANSLATION: ${key}]`;
-        if (values) {
-          result = replaceMustaches(result, values);
-        }
-        return result;
-      });
-      translationCache.push([key, values, $replaced]);
-      return $replaced;
-    }
-  };
-}
-function resolve(object, key) {
-  const parsed = String(key).split(/[\.\[\]]/).filter((part) => part.trim() !== "");
-  let value = object;
-  while (parsed.length > 0) {
-    const part = parsed.shift();
-    if (value != null) {
-      value = value[part];
-    } else {
-      value = void 0;
-    }
-  }
-  return value;
-}
-var Language = class {
-  #tag;
-  #config;
-  #translation;
-  get tag() {
-    return this.#tag;
-  }
-  constructor(tag, config) {
-    this.#tag = tag;
-    this.#config = config;
-  }
-  async getTranslation() {
-    if (!this.#translation) {
-      if (isFunction(this.#config.translation)) {
-        const result = this.#config.translation();
-        if (isPromise(result)) {
-          const resolved = await result;
-          assertObject(
-            resolved,
-            `Translation promise of language '${this.#tag}' must resolve to an object of translated strings. Got type: %t, value: %v`
-          );
-          this.#translation = resolved;
-        } else if (isObject(result)) {
-          this.#translation = result;
-        } else {
-          throw new TypeError(
-            `Translation function of '${this.#tag}' must return an object or promise. Got type: ${typeOf(
-              result
-            )}, value: ${result}`
-          );
-        }
-      } else if (isObject(this.#config.translation)) {
-        this.#translation = this.#config.translation;
-      } else {
-        throw new TypeError(
-          `Translation of '${this.#tag}' must be an object of translated strings, a function that returns one, or an async function that resolves to one. Got type: ${typeOf(
-            this.#config.translation
-          )}, value: ${this.#config.translation}`
-        );
-      }
-    }
-    return this.#translation;
-  }
-};
-
 // src/stores/render.ts
 function RenderStore(ctx) {
   ctx.name = "dolla/render";
@@ -2882,10 +2413,290 @@ function RenderStore(ctx) {
   };
 }
 
-// node_modules/@babel/runtime/helpers/esm/extends.js
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
+// src/app.ts
+function DefaultRootView(_, ctx) {
+  return ctx.outlet();
+}
+function isAppOptions(value) {
+  return isObject(value);
+}
+function App(options) {
+  if (options && !isAppOptions(options)) {
+    throw new TypeError(`App options must be an object. Got: ${options}`);
+  }
+  let isConnected = false;
+  let mainView = m(options?.view ?? DefaultRootView);
+  let configureCallback;
+  const settings = merge(
+    {
+      debug: {
+        filter: "*,-dolla/*",
+        log: "development",
+        // Only print logs in development.
+        warn: "development",
+        // Only print warnings in development.
+        error: true
+        // Always print errors.
+      },
+      mode: "production"
+    },
+    options ?? {}
+  );
+  const stores = /* @__PURE__ */ new Map([
+    ["render", { store: RenderStore }],
+    ["document", { store: DocumentStore }]
+  ]);
+  if (options?.stores) {
+    for (const entry of options.stores) {
+      assertFunction(entry.store, `Expected a store function. Got type: %t, value: %v`);
+      stores.set(entry.store, entry);
+    }
+  }
+  const crashCollector = new CrashCollector();
+  const debugHub = new DebugHub({ ...settings.debug, crashCollector, mode: settings.mode });
+  const debugChannel = debugHub.channel({ name: "dolla/App" });
+  crashCollector.onError(async ({ error, severity, componentName }) => {
+    if (severity === "crash") {
+      await disconnect();
+      const instance = initView({
+        view: DefaultCrashPage,
+        appContext,
+        elementContext,
+        props: {
+          message: error.message,
+          error,
+          componentName
+        }
+      });
+      instance.connect(appContext.rootElement);
+    }
+  });
+  async function connect(selector) {
+    return new Promise(async (resolve2) => {
+      let element = null;
+      if (isString(selector)) {
+        element = document.querySelector(selector);
+        assertInstanceOf(HTMLElement, element, `Selector string '${selector}' did not match any element.`);
+      }
+      assertInstanceOf(HTMLElement, element, "Expected a DOM node or a selector string. Got type: %t, value: %v");
+      appContext.rootElement = element;
+      appContext.rootView = initView({
+        view: mainView.type,
+        props: mainView.props,
+        appContext,
+        elementContext
+      });
+      for (let [key, item] of stores.entries()) {
+        const { store, options: options2 } = item;
+        const channelPrefix = isString(key) ? "dolla/store" : "store";
+        const label = isString(key) ? key : store.name ?? "(anonymous)";
+        const config = {
+          store,
+          appContext,
+          elementContext,
+          channelPrefix,
+          label,
+          options: options2 ?? {}
+        };
+        const instance = initStore(config);
+        instance.setup();
+        stores.set(key, { ...item, instance });
+      }
+      for (const { instance } of stores.values()) {
+        instance.connect();
+      }
+      if (configureCallback) {
+        await configureCallback({
+          // TODO: Add context methods
+        });
+      }
+      const done = () => {
+        appContext.rootView.connect(appContext.rootElement);
+        isConnected = true;
+        resolve2();
+      };
+      done();
+    });
+  }
+  async function disconnect() {
+    if (isConnected) {
+      appContext.rootView.disconnect();
+      isConnected = false;
+      for (const { instance } of stores.values()) {
+        instance.disconnect();
+      }
+    }
+  }
+  const appContext = {
+    crashCollector,
+    debugHub,
+    stores,
+    mode: settings.mode ?? "production"
+  };
+  const elementContext = {
+    stores: /* @__PURE__ */ new Map()
+  };
+  const app = {
+    connect,
+    disconnect,
+    get isConnected() {
+      return isConnected;
+    },
+    //     language(tag: string, config: LanguageConfig) {
+    //       languages.set(tag, config);
+    //
+    //       return app;
+    //     },
+    //
+    //     setLanguage(tag: string, fallback?: string) {
+    //       if (tag === "auto") {
+    //         let tags = [];
+    //
+    //         if (typeof navigator === "object") {
+    //           const nav = navigator as any;
+    //
+    //           if (nav.languages?.length > 0) {
+    //             tags.push(...nav.languages);
+    //           } else if (nav.language) {
+    //             tags.push(nav.language);
+    //           } else if (nav.browserLanguage) {
+    //             tags.push(nav.browserLanguage);
+    //           } else if (nav.userLanguage) {
+    //             tags.push(nav.userLanguage);
+    //           }
+    //         }
+    //
+    //         for (const tag of tags) {
+    //           if (languages.has(tag)) {
+    //             // Found a matching language.
+    //             currentLanguage = tag;
+    //             return this;
+    //           }
+    //         }
+    //
+    //         if (!currentLanguage && fallback) {
+    //           if (languages.has(fallback)) {
+    //             currentLanguage = fallback;
+    //           }
+    //         }
+    //       } else {
+    //         // Tag is the actual tag to set.
+    //         if (languages.has(tag)) {
+    //           currentLanguage = tag;
+    //         } else {
+    //           throw new Error(`Language '${tag}' has not been added to this app yet.`);
+    //         }
+    //       }
+    //
+    //       return app;
+    //     },
+    configure(callback) {
+      if (configureCallback !== void 0) {
+        debugChannel.warn(`Configure callback is already defined. Only the final configure call will take effect.`);
+      }
+      configureCallback = callback;
+      return app;
+    }
+  };
+  return app;
+}
+function DefaultCrashPage({ message, error, componentName }) {
+  return m(
+    "div",
+    {
+      style: {
+        backgroundColor: "#880000",
+        color: "#fff",
+        padding: "2rem",
+        position: "fixed",
+        inset: 0,
+        fontSize: "20px"
+      }
+    },
+    m("h1", { style: { marginBottom: "0.5rem" } }, "The app has crashed"),
+    m(
+      "p",
+      { style: { marginBottom: "0.25rem" } },
+      m("span", { style: { fontFamily: "monospace" } }, componentName),
+      " says:"
+    ),
+    m(
+      "blockquote",
+      {
+        style: {
+          backgroundColor: "#991111",
+          padding: "0.25em",
+          borderRadius: "6px",
+          fontFamily: "monospace",
+          marginBottom: "1rem"
+        }
+      },
+      m(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            backgroundColor: "red",
+            padding: "0.1em 0.4em",
+            marginRight: "0.5em",
+            borderRadius: "4px",
+            fontSize: "0.9em",
+            fontWeight: "bold"
+          }
+        },
+        error.name
+      ),
+      message
+    ),
+    m("p", {}, "Please see the browser console for details.")
+  );
+}
+
+// src/views/fragment.ts
+function Fragment(_, ctx) {
+  return ctx.outlet();
+}
+
+// src/views/store-scope.ts
+function StoreScope(props, ctx) {
+  const { appContext, elementContext } = getViewSecrets(ctx);
+  const instances = [];
+  for (const config of props.stores) {
+    let store;
+    let options;
+    if (isFunction(config)) {
+      store = config;
+    } else {
+      store = config.store;
+      options = config.options;
+    }
+    const instance = initStore({
+      store,
+      options,
+      appContext,
+      elementContext
+    });
+    instance.setup();
+    elementContext.stores.set(store, { store, options, instance });
+    instances.push(instance);
+  }
+  ctx.beforeConnect(() => {
+    for (const instance of instances) {
+      instance.connect();
+    }
+  });
+  ctx.onDisconnected(() => {
+    for (const instance of instances) {
+      instance.disconnect();
+    }
+  });
+  return ctx.outlet();
+}
+
+// node_modules/@babel/runtime/helpers/esm/extends.js
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
@@ -3336,9 +3147,11 @@ function parsePath(path) {
 }
 
 // src/stores/router.ts
+var DefaultView = (_, ctx) => ctx.outlet();
 function RouterStore(ctx) {
   ctx.name = "dolla/router";
   const { appContext, elementContext } = getStoreSecrets(ctx);
+  const render = ctx.getStore("render");
   let history;
   if (ctx.options.history) {
     history = ctx.options.history;
@@ -3347,30 +3160,96 @@ function RouterStore(ctx) {
   } else {
     history = createBrowserHistory();
   }
-  for (const route of ctx.options.routes) {
-    if (route.meta.redirect) {
-      let redirectPath;
-      if (isFunction(route.meta.redirect)) {
-        throw new Error(`Redirect functions are not yet supported.`);
-      } else if (isString(route.meta.redirect)) {
-        redirectPath = route.meta.redirect;
-      } else {
-        throw new TypeError(`Expected a string or redirect function. Got: ${route.meta.redirect}`);
+  let layerId = 0;
+  function prepareRoute(route, layers = []) {
+    if (!(typeof route === "object" && !Array.isArray(route)) || !(typeof route.path === "string")) {
+      throw new TypeError(`Route configs must be objects with a 'path' string property. Got: ${route}`);
+    }
+    if (route.redirect && route.routes) {
+      throw new Error(`Route cannot have both a 'redirect' and nested 'routes'.`);
+    } else if (route.redirect && route.view) {
+      throw new Error(`Route cannot have both a 'redirect' and a 'view'.`);
+    } else if (!route.view && !route.routes && !route.redirect) {
+      throw new Error(`Route must have a 'view', a 'redirect', or a set of nested 'routes'.`);
+    }
+    const parts = splitPath(route.path);
+    if (parts[parts.length - 1] === "*") {
+      parts.pop();
+    }
+    const routes2 = [];
+    if (route.redirect) {
+      let redirect = route.redirect;
+      if (isString(redirect)) {
+        redirect = resolvePath(joinPath(parts), redirect);
+        if (!redirect.startsWith("/")) {
+          redirect = "/" + redirect;
+        }
       }
-      const match = matchRoutes(ctx.options.routes, redirectPath, {
-        willMatch(r) {
-          return r !== route;
+      routes2.push({
+        pattern: route.path,
+        meta: {
+          redirect
         }
       });
-      if (!match) {
-        throw new Error(`Found a redirect to an undefined URL. From '${route.pattern}' to '${route.meta.redirect}'`);
-      }
+      return routes2;
+    }
+    let view = DefaultView;
+    if (typeof route.view === "function") {
+      view = route.view;
+    } else if (route.view) {
+      throw new TypeError(`Route '${route.path}' expected a view function or undefined. Got: ${route.view}`);
+    }
+    if (route.routes) {
+      for (const subroute of route.routes) {
+        routes2.push(...prepareRoute(subroute));
+      }
+    } else {
+      const markup = m(view);
+      const layer = { id: layerId++, markup };
+      routes2.push({
+        pattern: route.path,
+        meta: {
+          pattern: route.path,
+          layers: [...layers, layer]
+        }
+      });
+    }
+    return routes2;
+  }
+  const routes = sortRoutes(
+    ctx.options.routes.flatMap((route) => prepareRoute(route)).map((route) => ({
+      pattern: route.pattern,
+      meta: route.meta,
+      fragments: patternToFragments(route.pattern)
+    }))
+  );
+  for (const route of routes) {
+    if (route.meta.redirect) {
+      let redirectPath;
+      if (isFunction(route.meta.redirect)) {
+        throw new Error(`Redirect functions are not yet supported.`);
+      } else if (isString(route.meta.redirect)) {
+        redirectPath = route.meta.redirect;
+      } else {
+        throw new TypeError(`Expected a string or redirect function. Got: ${route.meta.redirect}`);
+      }
+      const match = matchRoutes(routes, redirectPath, {
+        willMatch(r) {
+          return r !== route;
+        }
+      });
+      if (!match) {
+        throw new Error(`Found a redirect to an undefined URL. From '${route.pattern}' to '${route.meta.redirect}'`);
+      }
     }
   }
-  const $$pattern = writable(null);
-  const $$path = writable("");
-  const $$params = writable({});
-  const $$query = writable({});
+  ctx.onConnected(() => {
+    ctx.info(`Total routes: ${routes.length}`);
+  });
+  const $$pattern = $$(null);
+  const $$path = $$("");
+  const $$params = $$({});
+  const $$query = $$({});
   let isRouteChange = true;
   ctx.observe($$query, (current) => {
     if (isRouteChange) {
@@ -3405,7 +3284,7 @@ function RouterStore(ctx) {
       isRouteChange = true;
       $$query.set(parseQueryParams(location.search.startsWith("?") ? location.search.slice(1) : location.search));
     }
-    const matched = matchRoutes(ctx.options.routes, location.pathname);
+    const matched = matchRoutes(routes, location.pathname);
     if (!matched) {
       $$pattern.set(null);
       $$path.set(location.pathname);
@@ -3444,7 +3323,7 @@ function RouterStore(ctx) {
             const renderContext = { appContext, elementContext };
             const rendered = renderMarkupToDOM(matchedLayer.markup, renderContext);
             const handle = getRenderHandle(rendered);
-            requestAnimationFrame(() => {
+            render.update(() => {
               if (activeLayer && activeLayer.handle.connected) {
                 activeLayer.handle.disconnect();
               }
@@ -3453,7 +3332,7 @@ function RouterStore(ctx) {
               } else {
                 appContext.rootView.setChildren(rendered);
               }
-            });
+            }, "dolla-router-change");
             activeLayers.push({ id: matchedLayer.id, handle });
           }
         }
@@ -3478,15 +3357,15 @@ function RouterStore(ctx) {
     /**
      * The currently matched route pattern, if any.
      */
-    $pattern: readable($$pattern),
+    $pattern: $($$pattern),
     /**
      * The current URL path.
      */
-    $path: readable($$path),
+    $path: $($$path),
     /**
      * The current named path params.
      */
-    $params: readable($$params),
+    $params: $($$params),
     /**
      * The current query params. Changes to this object will be reflected in the URL.
      */
@@ -3547,542 +3426,454 @@ function catchLinks(root, callback, _window = window) {
   };
 }
 
-// src/app.ts
-function DefaultRootView(_, ctx) {
-  return ctx.outlet();
-}
-function makeApp(options) {
-  if (options && !isObject(options)) {
-    throw new TypeError(`App options must be an object. Got: ${options}`);
-  }
-  let isConnected = false;
-  let mainView = m(DefaultRootView);
-  let configureCallback;
-  const settings = merge(
-    {
-      debug: {
-        filter: "*,-dolla/*",
-        log: "development",
-        // Only print logs in development.
-        warn: "development",
-        // Only print warnings in development.
-        error: true
-        // Always print errors.
-      },
-      router: {
-        hash: false
-      },
-      mode: "production"
-    },
-    options ?? {}
-  );
-  const stores = /* @__PURE__ */ new Map([
-    ["dialog", { store: DialogStore }],
-    ["router", { store: RouterStore }],
-    ["document", { store: DocumentStore }],
-    ["http", { store: HTTPStore }],
-    ["language", { store: LanguageStore }],
-    ["render", { store: RenderStore }]
-  ]);
+// src/stores/language.ts
+function LanguageStore(ctx) {
+  ctx.name = "dolla/language";
   const languages = /* @__PURE__ */ new Map();
-  let currentLanguage;
-  let layerId = 0;
-  let routes = [];
-  function prepareRoute(route, layers = []) {
-    if (!isObject(route) || !isString(route.pattern)) {
-      throw new TypeError(`Route configs must be objects with a 'pattern' string property. Got: ${route}`);
-    }
-    const parts = splitPath(route.pattern);
-    if (parts[parts.length - 1] === "*") {
-      parts.pop();
-    }
-    const routes2 = [];
-    if (route.redirect) {
-      let redirect = route.redirect;
-      if (isString(redirect)) {
-        redirect = resolvePath(joinPath(parts), redirect);
-        if (!redirect.startsWith("/")) {
-          redirect = "/" + redirect;
-        }
+  const cache = /* @__PURE__ */ new Map();
+  ctx.options.languages.forEach((entry) => {
+    languages.set(entry.name, entry);
+  });
+  ctx.info(
+    `App supports ${languages.size} language${languages.size === 1 ? "" : "s"}: '${[...languages.keys()].join("', '")}'`
+  );
+  async function getTranslation(config) {
+    if (!cache.has(config.name)) {
+      let fn;
+      if (isString(config.translations)) {
+        fn = async () => {
+          return fetch(config.translations).then((res) => res.json());
+        };
+      } else if (isFunction(config.translations)) {
+        fn = async () => config.translations();
+      } else if (isObject(config.translations)) {
+        fn = async () => config.translations;
+      } else {
+        throw new TypeError(
+          `Translation of '${config.name}' must be an object of translated strings, a path to an object of translated strings, a function that returns one, or an async function that resolves to one. Got type: ${typeOf(
+            config.translations
+          )}, value: ${config.translations}`
+        );
+      }
+      try {
+        const translation = await fn();
+        assertObject(
+          translation,
+          `Expected '${config.name}' translations to resolve to an object. Got type: %t, value: %v`
+        );
+        cache.set(config.name, translation);
+      } catch (err) {
+        throw err;
       }
-      routes2.push({
-        pattern: route.pattern,
-        meta: {
-          redirect
-        }
-      });
-      return routes2;
     }
-    let view;
-    if (!route.view) {
-      view = DefaultRootView;
-    } else if (typeof route.view === "function") {
-      view = route.view;
-    } else {
-      throw new TypeError(`Route '${route.pattern}' expected a view function. Got: ${route.view}`);
-    }
-    const markup = m(view);
-    const layer = { id: layerId++, markup };
-    if (route.subroutes) {
-      const router = {
-        route: (pattern, view2, subroutes) => {
-          pattern = joinPath([...parts, pattern]);
-          routes2.push(...prepareRoute({ pattern, view: view2, subroutes }));
-          return router;
-        },
-        redirect: (pattern, redirect) => {
-          pattern = joinPath([...parts, pattern]);
-          routes2.push(...prepareRoute({ pattern, redirect }));
-          return router;
-        }
-      };
-      route.subroutes(router);
-    } else {
-      routes2.push({
-        pattern: route.pattern,
-        meta: {
-          pattern: route.pattern,
-          layers: [...layers, layer]
-        }
-      });
+    return cache.get(config.name);
+  }
+  const $$isLoaded = $$(false);
+  const $$language = $$();
+  const $$translation = $$();
+  const $noLanguageValue = $("[NO LANGUAGE SET]");
+  const translationCache = [];
+  function getCached(key, values) {
+    for (const entry of translationCache) {
+      if (entry[0] === key && deepEqual(entry[1], values)) {
+        return entry[2];
+      }
     }
-    return routes2;
   }
-  const crashCollector = new CrashCollector();
-  const debugHub = new DebugHub({ ...settings.debug, crashCollector, mode: settings.mode });
-  const debugChannel = debugHub.channel({ name: "dolla/App" });
-  crashCollector.onError(async ({ error, severity, componentName }) => {
-    if (severity === "crash") {
-      await disconnect();
-      const instance = initView({
-        view: DefaultCrashPage,
-        appContext,
-        elementContext,
-        props: {
-          message: error.message,
-          error,
-          componentName
-        }
-      });
-      instance.connect(appContext.rootElement);
+  function replaceMustaches(template, values) {
+    for (const name in values) {
+      template = template.replace(`{{${name}}}`, String(values[name]));
     }
-  });
-  async function connect(selector) {
-    return new Promise(async (resolve2) => {
-      let element = null;
-      if (isString(selector)) {
-        element = document.querySelector(selector);
-        assertInstanceOf(HTMLElement, element, `Selector string '${selector}' did not match any element.`);
+    return template;
+  }
+  const currentLanguage = ctx.options.default ? languages.get(ctx.options.default) : languages.get([...languages.keys()][0]);
+  if (currentLanguage == null) {
+    $$isLoaded.set(true);
+  } else {
+    ctx.info(`Current language is '${currentLanguage.name}'.`);
+    getTranslation(currentLanguage).then((translation) => {
+      $$language.set(currentLanguage.name);
+      $$translation.set(translation);
+      $$isLoaded.set(true);
+    });
+  }
+  return {
+    $isLoaded: $($$isLoaded),
+    $currentLanguage: $($$language),
+    supportedLanguages: [...languages.keys()],
+    async setLanguage(tag) {
+      if (!languages.has(tag)) {
+        throw new Error(`Language '${tag}' is not supported.`);
       }
-      assertInstanceOf(HTMLElement, element, "Expected a DOM node or a selector string. Got type: %t, value: %v");
-      appContext.rootElement = element;
-      routes = sortRoutes(routes);
-      const language = stores.get("language");
-      stores.set("language", {
-        ...language,
-        options: {
-          languages: Object.fromEntries(languages.entries()),
-          currentLanguage
-        }
-      });
-      const router = stores.get("router");
-      stores.set("router", {
-        ...router,
-        options: {
-          options: settings.router,
-          routes
+      const lang = languages.get(tag);
+      try {
+        const translation = await getTranslation(lang);
+        $$translation.set(translation);
+        $$language.set(tag);
+        ctx.info("set language to " + tag);
+      } catch (error) {
+        if (error instanceof Error) {
+          ctx.crash(error);
         }
-      });
-      debugChannel.info(`Total routes: ${routes.length}`);
-      appContext.rootView = initView({
-        view: mainView.type,
-        props: mainView.props,
-        appContext,
-        elementContext
-      });
-      for (let [key, item] of stores.entries()) {
-        const { store, options: options2 } = item;
-        const channelPrefix = isString(key) ? "dolla/store" : "store";
-        const label = isString(key) ? key : store.name ?? "(anonymous)";
-        const config = {
-          store,
-          appContext,
-          elementContext,
-          channelPrefix,
-          label,
-          options: options2 ?? {}
-        };
-        const instance = initStore(config);
-        instance.setup();
-        stores.set(key, { ...item, instance });
       }
-      for (const { instance } of stores.values()) {
-        instance.connect();
+    },
+    /**
+         * Returns a Readable of the translated value.
+    
+         * @param key - Key to the translated value.
+         * @param values - A map of {{placeholder}} names and the values to replace them with.
+         */
+    translate(key, values) {
+      if (!$$language.get()) {
+        return $noLanguageValue;
       }
-      if (configureCallback) {
-        await configureCallback({
-          // TODO: Add context methods
-        });
+      const cached = getCached(key, values);
+      if (cached) {
+        return cached;
       }
-      const { $isLoaded } = stores.get("language").instance.exports;
-      const done = () => {
-        appContext.rootView.connect(appContext.rootElement);
-        isConnected = true;
-        resolve2();
-      };
-      if ($isLoaded.get()) {
-        return done();
+      if (values) {
+        const readableValues = {};
+        for (const [key2, value] of Object.entries(values)) {
+          if (isReadable(value)) {
+            readableValues[key2] = value;
+          }
+        }
+        const readableEntries = Object.entries(readableValues);
+        if (readableEntries.length > 0) {
+          const readables = readableEntries.map((x) => x[1]);
+          const $merged = $([$$translation, ...readables], (t, ...entryValues) => {
+            const entries = entryValues.map((_, i) => readableEntries[i]);
+            const mergedValues = {
+              ...values
+            };
+            for (let i = 0; i < entries.length; i++) {
+              const key2 = entries[i][0];
+              mergedValues[key2] = entryValues[i];
+            }
+            const result = resolve(t, key) || `[NO TRANSLATION: ${key}]`;
+            return replaceMustaches(result, mergedValues);
+          });
+          translationCache.push([key, values, $merged]);
+          return $merged;
+        }
       }
-      const stop = observe($isLoaded, (isLoaded) => {
-        if (isLoaded) {
-          stop();
-          done();
+      const $replaced = $($$translation, (t) => {
+        let result = resolve(t, key) || `[NO TRANSLATION: ${key}]`;
+        if (values) {
+          result = replaceMustaches(result, values);
         }
+        return result;
       });
-    });
-  }
-  async function disconnect() {
-    if (isConnected) {
-      appContext.rootView.disconnect();
-      isConnected = false;
-      for (const { instance } of stores.values()) {
-        instance.disconnect();
-      }
+      translationCache.push([key, values, $replaced]);
+      return $replaced;
     }
-  }
-  const appContext = {
-    crashCollector,
-    debugHub,
-    stores,
-    mode: settings.mode ?? "production"
-    // $dialogs - added by dialog store
-  };
-  const elementContext = {
-    stores: /* @__PURE__ */ new Map()
   };
-  const app = {
-    connect,
-    disconnect,
-    get isConnected() {
-      return isConnected;
+}
+function resolve(object, key) {
+  const parsed = String(key).split(/[\.\[\]]/).filter((part) => part.trim() !== "");
+  let value = object;
+  while (parsed.length > 0) {
+    const part = parsed.shift();
+    if (value != null) {
+      value = value[part];
+    } else {
+      value = void 0;
+    }
+  }
+  return value;
+}
+
+// src/stores/http.ts
+function HTTPStore(ctx) {
+  ctx.name = "dolla/http";
+  const fetch2 = ctx.options.fetch ?? getDefaultFetch();
+  const middleware = [];
+  async function request(method, uri, options) {
+    return makeRequest({ ...options, method, uri, middleware, fetch: fetch2 });
+  }
+  return {
+    /**
+     * Adds a new middleware that will apply to subsequent requests.
+     * Returns a function to remove this middleware.
+     *
+     * @param middleware - A middleware function that will intercept requests.
+     */
+    middleware(fn) {
+      middleware.push(fn);
+      return function remove() {
+        middleware.splice(middleware.indexOf(fn), 1);
+      };
     },
-    main(view, attributes) {
-      if (mainView.type !== DefaultRootView) {
-        debugChannel.warn(`Root view is already defined. Only the final main call will take effect.`);
-      }
-      if (typeof view === "function") {
-        mainView = m(view, attributes);
-      } else {
-        throw new TypeError(`Expected a view function. Got type: ${typeOf(view)}, value: ${view}`);
-      }
-      return app;
+    async get(uri, options) {
+      return request("get", uri, options);
     },
-    store(store, options2) {
-      let config;
-      if (isFunction(store)) {
-        config = { store, options: options2 };
-      } else {
-        throw new TypeError(`Expected a store function. Got type: ${typeOf(store)}, value: ${store}`);
-      }
-      assertFunction(store, "Expected a store function or a store config object. Got type: %t, value: %v");
-      stores.set(store, config);
-      return app;
+    async put(uri, options) {
+      return request("put", uri, options);
     },
-    getStore(store) {
-      const match = stores.get(store);
-      const name = isString(store) ? store : store.name;
-      if (!match) {
-        throw new Error(`Store '${name}' is not registered on this app.`);
-      }
-      if (!match.instance) {
-        throw new Error(`Store '${name}' is not yet initialized. App must be connected first.`);
-      }
-      return match.instance.exports;
+    async patch(uri, options) {
+      return request("patch", uri, options);
     },
-    language(tag, config) {
-      languages.set(tag, config);
-      return app;
+    async post(uri, options) {
+      return request("post", uri, options);
     },
-    setLanguage(tag, fallback) {
-      if (tag === "auto") {
-        let tags = [];
-        if (typeof navigator === "object") {
-          const nav = navigator;
-          if (nav.languages?.length > 0) {
-            tags.push(...nav.languages);
-          } else if (nav.language) {
-            tags.push(nav.language);
-          } else if (nav.browserLanguage) {
-            tags.push(nav.browserLanguage);
-          } else if (nav.userLanguage) {
-            tags.push(nav.userLanguage);
-          }
-        }
-        for (const tag2 of tags) {
-          if (languages.has(tag2)) {
-            currentLanguage = tag2;
-            return this;
-          }
-        }
-        if (!currentLanguage && fallback) {
-          if (languages.has(fallback)) {
-            currentLanguage = fallback;
-          }
-        }
-      } else {
-        if (languages.has(tag)) {
-          currentLanguage = tag;
-        } else {
-          throw new Error(`Language '${tag}' has not been added to this app yet.`);
-        }
-      }
-      return app;
+    async delete(uri, options) {
+      return request("delete", uri, options);
     },
-    route(pattern, view, subroutes) {
-      assertString(pattern, "Pattern must be a string. Got type: %t, value: %v");
-      if (view == null) {
-        assertFunction(subroutes, "Sub routes must be defined when `view` is null.");
-      }
-      prepareRoute({ pattern, view, subroutes }).forEach((route) => {
-        routes.push({
-          pattern: route.pattern,
-          meta: route.meta,
-          fragments: patternToFragments(route.pattern)
-        });
-      });
-      return app;
+    async head(uri, options) {
+      return request("head", uri, options);
     },
-    redirect(pattern, redirect) {
-      if (!isFunction(redirect) && !isString(redirect)) {
-        throw new TypeError(`Expected a redirect path or function. Got type: ${typeOf(redirect)}, value: ${redirect}`);
-      }
-      prepareRoute({ pattern, redirect }).forEach((route) => {
-        routes.push({
-          pattern: route.pattern,
-          meta: route.meta,
-          fragments: patternToFragments(route.pattern)
-        });
-      });
-      return app;
+    async options(uri, options) {
+      return request("options", uri, options);
     },
-    configure(callback) {
-      if (configureCallback !== void 0) {
-        debugChannel.warn(`Configure callback is already defined. Only the final configure call will take effect.`);
-      }
-      configureCallback = callback;
-      return app;
+    async trace(uri, options) {
+      return request("trace", uri, options);
     }
   };
-  return app;
 }
-function DefaultCrashPage({ message, error, componentName }) {
-  return m(
-    "div",
-    {
-      style: {
-        backgroundColor: "#880000",
-        color: "#fff",
-        padding: "2rem",
-        position: "fixed",
-        inset: 0,
-        fontSize: "20px"
-      }
-    },
-    m("h1", { style: { marginBottom: "0.5rem" } }, "The app has crashed"),
-    m(
-      "p",
-      { style: { marginBottom: "0.25rem" } },
-      m("span", { style: { fontFamily: "monospace" } }, componentName),
-      " says:"
-    ),
-    m(
-      "blockquote",
-      {
-        style: {
-          backgroundColor: "#991111",
-          padding: "0.25em",
-          borderRadius: "6px",
-          fontFamily: "monospace",
-          marginBottom: "1rem"
-        }
-      },
-      m(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            backgroundColor: "red",
-            padding: "0.1em 0.4em",
-            marginRight: "0.5em",
-            borderRadius: "4px",
-            fontSize: "0.9em",
-            fontWeight: "bold"
-          }
-        },
-        error.name
-      ),
-      message
-    ),
-    m("p", {}, "Please see the browser console for details.")
-  );
+function getDefaultFetch() {
+  if (typeof window !== "undefined" && window.fetch) {
+    return window.fetch.bind(window);
+  }
+  if (typeof global !== "undefined" && global.fetch) {
+    return global.fetch.bind(global);
+  }
+  throw new Error("Running in neither browser nor node. Please run this app in one of the supported environments.");
 }
-
-// src/spring.ts
-function spring(initialValue, options) {
-  const mass = options?.mass ?? 2;
-  const stiffness = options?.stiffness ?? 1200;
-  const damping = options?.damping ?? 160;
-  const velocity = options?.velocity ?? 5;
-  const endAmplitude = options?.endAmplitude ?? 1e-3;
-  const endWindow = options?.endWindow ?? 20;
-  const $$currentValue = writable(initialValue);
-  let nextId = 0;
-  let currentAnimationId;
-  const snapTo = (newValue) => {
-    currentAnimationId = void 0;
-    $$currentValue.set(newValue);
-  };
-  const animateTo = async (endValue, options2) => {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    if (mediaQuery.matches) {
-      return snapTo(endValue);
-    }
-    const _endAmplitude = readable(options2?.endAmplitude ?? endAmplitude).get();
-    const _endWindow = readable(options2?.endWindow ?? endWindow).get();
-    return new Promise((resolve2) => {
-      const id = nextId++;
-      const amplitude = makeAmplitudeMeasurer(_endWindow);
-      const springParams = {
-        mass: options2?.mass ?? mass,
-        stiffness: options2?.stiffness ?? stiffness,
-        damping: options2?.damping ?? damping,
-        velocity: options2?.velocity ?? velocity
-      };
-      const startTime = Date.now();
-      const startValue = $$currentValue.get();
-      const step = () => {
-        if (currentAnimationId !== id) {
-          resolve2();
-          return;
-        }
-        const elapsedTime = Date.now() - startTime;
-        const proportion = solve(springParams, elapsedTime / 1e3);
-        $$currentValue.set(startValue + (endValue - startValue) * proportion);
-        amplitude.sample(proportion);
-        if (amplitude.value && amplitude.value < _endAmplitude) {
-          currentAnimationId = void 0;
-          $$currentValue.set(endValue);
-        }
-        window.requestAnimationFrame(step);
-      };
-      currentAnimationId = id;
-      window.requestAnimationFrame(step);
-    });
-  };
-  return {
-    get: $$currentValue.get,
-    set: snapTo,
-    update: (callback) => {
-      const newValue = callback($$currentValue.get());
-      snapTo(newValue);
+var HTTPResponseError = class extends Error {
+  response;
+  constructor(response) {
+    const { status, statusText, method, uri } = response;
+    const message = `${status} ${statusText}: Request failed (${method.toUpperCase()} ${uri})`;
+    super(message);
+    this.response = response;
+  }
+};
+async function makeRequest(config) {
+  const { headers, query, fetch: fetch2, middleware } = config;
+  const request = {
+    method: config.method,
+    uri: config.uri,
+    get sameOrigin() {
+      return !request.uri.startsWith("http");
     },
-    [OBSERVE]: $$currentValue[OBSERVE],
-    animateTo
+    query: new URLSearchParams(),
+    headers: new Headers(),
+    body: config.body
   };
-}
-function solve(parameters, elapsedSeconds) {
-  const mass = unwrap(parameters.mass);
-  const stiffness = unwrap(parameters.stiffness);
-  const damping = unwrap(parameters.damping);
-  const initialVelocity = unwrap(parameters.velocity);
-  const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-  const speed = Math.sqrt(stiffness / mass);
-  let B;
-  let position;
-  if (dampingRatio < 1) {
-    const dampedSpeed = speed * Math.sqrt(1 - dampingRatio * dampingRatio);
-    B = (dampingRatio * speed + -initialVelocity) / dampedSpeed;
-    position = (Math.cos(dampedSpeed * elapsedSeconds) + B * Math.sin(dampedSpeed * elapsedSeconds)) * Math.exp(-elapsedSeconds * speed * dampingRatio);
-  } else {
-    B = speed + -initialVelocity;
-    position = (1 + B * elapsedSeconds) * Math.exp(-elapsedSeconds * speed);
-  }
-  return 1 - position;
-}
-function makeAmplitudeMeasurer(resolution) {
-  const samples = [];
-  return {
-    sample(value) {
-      samples.push(value);
-      while (samples.length > resolution) {
-        samples.shift();
+  if (headers) {
+    if (headers instanceof Map || headers instanceof Headers) {
+      headers.forEach((value, key) => {
+        request.headers.set(key, value);
+      });
+    } else if (headers != null && typeof headers === "object" && !Array.isArray(headers)) {
+      for (const name in headers) {
+        request.headers.set(name, String(headers[name]));
       }
-    },
-    get value() {
-      if (samples.length < resolution) {
-        return null;
+    } else {
+      throw new TypeError(`Unknown headers type. Got: ${headers}`);
+    }
+  }
+  if (query) {
+    if (query instanceof Map || query instanceof URLSearchParams) {
+      query.forEach((value, key) => {
+        request.query.set(key, value);
+      });
+    } else if (query != null && typeof query === "object" && !Array.isArray(query)) {
+      for (const name in query) {
+        request.query.set(name, String(query[name]));
       }
-      return Math.max(...samples) - Math.min(...samples);
+    } else {
+      throw new TypeError(`Unknown query params type. Got: ${query}`);
+    }
+  }
+  let response;
+  const handler = async () => {
+    const query2 = request.query.toString();
+    const fullURL = query2.length > 0 ? request.uri + "?" + query2 : request.uri;
+    let reqBody;
+    if (!request.headers.has("content-type") && isObject(request.body)) {
+      request.headers.set("content-type", "application/json");
+      reqBody = JSON.stringify(request.body);
+    } else {
+      reqBody = request.body;
+    }
+    const fetched = await fetch2(fullURL, {
+      method: request.method,
+      headers: request.headers,
+      body: reqBody
+    });
+    const headers2 = Object.fromEntries(fetched.headers.entries());
+    const contentType = headers2["content-type"];
+    let body;
+    if (contentType?.includes("application/json")) {
+      body = await fetched.json();
+    } else if (contentType?.includes("application/x-www-form-urlencoded")) {
+      body = await fetched.formData();
+    } else {
+      body = await fetched.text();
     }
+    response = {
+      method: request.method,
+      uri: request.uri,
+      status: fetched.status,
+      statusText: fetched.statusText,
+      headers: headers2,
+      body
+    };
   };
+  if (middleware.length > 0) {
+    const mount = (index = 0) => {
+      const current = middleware[index];
+      const next = middleware[index + 1] ? mount(index + 1) : handler;
+      return async () => current(request, async () => {
+        await next();
+        return response;
+      });
+    };
+    await mount()();
+  } else {
+    await handler();
+  }
+  if (response.status < 200 || response.status >= 400) {
+    throw new HTTPResponseError(response);
+  }
+  return response;
 }
 
-// src/views/fragment.ts
-function Fragment(_, ctx) {
-  return ctx.outlet();
-}
-
-// src/views/store-scope.ts
-function StoreScope(props, ctx) {
-  const { appContext, elementContext } = getViewSecrets(ctx);
-  const instances = [];
-  for (const config of props.stores) {
-    let store;
-    let options;
-    if (isFunction(config)) {
-      store = config;
+// src/stores/dialog.ts
+function DialogStore(ctx) {
+  ctx.name = "dolla/dialog";
+  const { appContext, elementContext } = getStoreSecrets(ctx);
+  const render = ctx.getStore("render");
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.right = "0";
+  container.style.bottom = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  const $$dialogs = $$([]);
+  let activeDialogs = [];
+  function dialogChangedCallback() {
+    if (activeDialogs.length > 0) {
+      if (!container.parentNode) {
+        document.body.appendChild(container);
+      }
     } else {
-      store = config.store;
-      options = config.options;
+      if (container.parentNode) {
+        document.body.removeChild(container);
+      }
     }
-    const instance = initStore({
-      store,
-      options,
-      appContext,
-      elementContext
-    });
-    instance.setup();
-    elementContext.stores.set(store, { store, options, instance });
-    instances.push(instance);
   }
-  ctx.beforeConnect(() => {
-    for (const instance of instances) {
-      instance.connect();
-    }
+  ctx.observe($$dialogs, (dialogs) => {
+    render.update(() => {
+      let removed = [];
+      let added = [];
+      for (const dialog of activeDialogs) {
+        if (!dialogs.includes(dialog)) {
+          removed.push(dialog);
+        }
+      }
+      for (const dialog of dialogs) {
+        if (!activeDialogs.includes(dialog)) {
+          added.push(dialog);
+        }
+      }
+      for (const dialog of removed) {
+        if (dialog.transitionOutCallback) {
+          dialog.transitionOutCallback().then(() => {
+            dialog.instance.disconnect();
+            activeDialogs.splice(activeDialogs.indexOf(dialog), 1);
+            dialogChangedCallback();
+          });
+        } else {
+          dialog.instance.disconnect();
+          activeDialogs.splice(activeDialogs.indexOf(dialog), 1);
+        }
+      }
+      for (const dialog of added) {
+        dialog.instance.connect(container);
+        if (dialog.transitionInCallback) {
+          dialog.transitionInCallback();
+        }
+        activeDialogs.push(dialog);
+      }
+      dialogChangedCallback();
+    });
   });
   ctx.onDisconnected(() => {
-    for (const instance of instances) {
-      instance.disconnect();
+    if (container.parentNode) {
+      document.body.removeChild(container);
     }
   });
-  return ctx.outlet();
+  function open(view, props) {
+    const $$open = $$(true);
+    let dialog;
+    let transitionInCallback;
+    let transitionOutCallback;
+    let instance = initView({
+      view,
+      appContext,
+      elementContext,
+      props: {
+        ...props,
+        $$open,
+        transitionIn: (callback) => {
+          transitionInCallback = callback;
+        },
+        transitionOut: (callback) => {
+          transitionOutCallback = callback;
+        }
+      }
+    });
+    dialog = {
+      instance,
+      // These must be getters because the fns passed to props aren't called until before connect.
+      get transitionInCallback() {
+        return transitionInCallback;
+      },
+      get transitionOutCallback() {
+        return transitionOutCallback;
+      }
+    };
+    $$dialogs.update((current) => {
+      return [...current, dialog];
+    });
+    const stopObserver = observe($$open, (value) => {
+      if (!value) {
+        closeDialog();
+      }
+    });
+    function closeDialog() {
+      $$dialogs.update((current) => {
+        return current.filter((x) => x !== dialog);
+      });
+      dialog = void 0;
+      stopObserver();
+    }
+    return closeDialog;
+  }
+  return {
+    open
+  };
 }
 export {
+  $,
+  $$,
+  App,
+  DialogStore,
   Fragment,
+  HTTPStore,
+  LanguageStore,
+  RouterStore,
   StoreScope,
-  computed,
   cond,
   isReadable,
   isWritable,
   m,
-  makeApp,
   observe,
   portal,
-  proxy,
-  readable,
   repeat,
-  spring,
-  unwrap,
-  writable
+  unwrap
 };
 //# sourceMappingURL=index.js.map