@orieljs/live 0.1.0-alpha.6 → 0.1.0-alpha.7

package/dist/index.js

@@ -1,5 +1,9 @@
 // Component.ts
-import { LiveManager, UrlGenerator, ValidationFactory } from "@orieljs/contracts";
+import {
+  LiveManager,
+  UrlGenerator as UrlGenerator2,
+  ValidationFactory
+} from "@orieljs/contracts";
 import { inject } from "@orieljs/container";
 
 // errors.ts
@@ -45,15 +49,48 @@ var InvalidLiveRequestError = class extends LiveError {
   kind = "Http";
   status = 400;
 };
+var InvalidUploadSignatureError = class extends LiveError {
+  name = "InvalidUploadSignatureError";
+  kind = "Http";
+  status = 401;
+  constructor() {
+    super("");
+  }
+};
+var TemporaryFileNotFoundError = class extends LiveError {
+  name = "TemporaryFileNotFoundError";
+  kind = "Http";
+  status = 404;
+  constructor(filename) {
+    super(`Unable to find the temporary upload [${filename}].`);
+  }
+};
+var FileNotPreviewableError = class extends LiveError {
+  name = "FileNotPreviewableError";
+  constructor(extension) {
+    super(`File with extension "${extension}" is not previewable. See the live.temporary_file_upload.preview_mimes config.`);
+  }
+};
+var UploadValidationError = class extends LiveError {
+  constructor(errors) {
+    super("The upload failed.");
+    this.errors = errors;
+  }
+  errors;
+  name = "UploadValidationError";
+  kind = "Validation";
+  status = 422;
+  errorBag = "default";
+};
 
 // metadata.ts
 Symbol.metadata ??= /* @__PURE__ */ Symbol.for("Symbol.metadata");
 var LISTENERS = /* @__PURE__ */ Symbol.for("oriel:live.listeners");
 var LOCKED = /* @__PURE__ */ Symbol.for("oriel:live.locked");
 var COMPUTED = /* @__PURE__ */ Symbol.for("oriel:live.computed");
-function own(metadata, key, empty, copy) {
-  if (!Object.hasOwn(metadata, key)) metadata[key] = metadata[key] === void 0 ? empty() : copy(metadata[key]);
-  return metadata[key];
+function own(metadata, key2, empty, copy) {
+  if (!Object.hasOwn(metadata, key2)) metadata[key2] = metadata[key2] === void 0 ? empty() : copy(metadata[key2]);
+  return metadata[key2];
 }
 function On(event) {
   return function(_method, context) {
@@ -96,8 +133,8 @@ function chainOf(cls) {
   }
   return chain;
 }
-function staticsOf(cls, key) {
-  return chainOf(cls).flatMap((c) => Object.hasOwn(c, key) && c[key] !== void 0 ? [c[key]] : []);
+function staticsOf(cls, key2) {
+  return chainOf(cls).flatMap((c) => Object.hasOwn(c, key2) && c[key2] !== void 0 ? [c[key2]] : []);
 }
 function listenersOf(cls) {
   const result = {};
@@ -124,6 +161,131 @@ import { Collection as Collection2 } from "@orieljs/collections";
 
 // synthesizers.ts
 import { Collection } from "@orieljs/collections";
+
+// TemporaryUploadedFile.ts
+import { ConfigRepository, FilesystemManager, UrlGenerator } from "@orieljs/contracts";
+import { currentContainer } from "@orieljs/container";
+import { Str } from "@orieljs/support";
+var TEMPORARY_UPLOAD_DEFAULTS = {
+  disk: null,
+  directory: "live-tmp",
+  rules: ["required", "file", "max:12288"],
+  middleware: "throttle:60,1",
+  preview_mimes: ["png", "gif", "bmp", "svg", "wav", "mp4", "mov", "avi", "wmv", "mp3", "m4a", "jpg", "jpeg", "mpga", "webp", "wma"],
+  max_upload_time: 5,
+  cleanup: true
+};
+function container() {
+  const current = currentContainer();
+  if (current === void 0) throw new LiveError("Live uploads need the application: use them inside a request, a command or a test.");
+  return current;
+}
+function uploadSetting(name) {
+  const config = container().bound(ConfigRepository) ? container().make(ConfigRepository) : void 0;
+  return config?.get(`live.temporary_file_upload.${name}`, null) ?? TEMPORARY_UPLOAD_DEFAULTS[name];
+}
+function temporaryDisk() {
+  return container().make(FilesystemManager).disk(uploadSetting("disk") ?? void 0);
+}
+function temporaryDirectory() {
+  return uploadSetting("directory").replace(/^\/+|\/+$/g, "");
+}
+var FILENAME = /^[A-Za-z0-9]{40}(?:\.[a-z0-9]+)?$/;
+function isTemporaryFileData(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const data = value;
+  return typeof data.filename === "string" && FILENAME.test(data.filename) && typeof data.name === "string" && typeof data.size === "number" && Number.isSafeInteger(data.size) && data.size >= 0 && typeof data.type === "string" && typeof data.extension === "string" && /^[a-z0-9]*$/.test(data.extension);
+}
+var HOUR = 36e5;
+var TemporaryUploadedFile = class {
+  filename;
+  clientName;
+  mimeType;
+  size;
+  #extension;
+  constructor(data) {
+    if (!isTemporaryFileData(data)) throw new LiveError("A temporary upload needs a stored name, a name, a size, a type and an extension.");
+    this.filename = data.filename;
+    this.clientName = data.name;
+    this.mimeType = data.type;
+    this.size = data.size;
+    this.#extension = data.extension;
+  }
+  /** What the snapshot carries. */
+  toData() {
+    return { filename: this.filename, name: this.clientName, size: this.size, type: this.mimeType, extension: this.#extension };
+  }
+  /** The file's path on the temporary disk. */
+  get path() {
+    const directory = temporaryDirectory();
+    return directory === "" ? this.filename : `${directory}/${this.filename}`;
+  }
+  /** The extension of the upload's own type, as FormUploadedFile's extension(): what putFile() names a stored copy by. */
+  extension() {
+    return this.#extension;
+  }
+  /** The extension of the name the browser gave the file, lower-cased ('' without one). */
+  clientExtension() {
+    const dot = this.clientName.lastIndexOf(".");
+    return dot === -1 ? "" : this.clientName.slice(dot + 1).toLowerCase();
+  }
+  /** A random 40-character name with extension(), as FormUploadedFile's. */
+  hashName() {
+    const extension = this.extension();
+    return extension === "" ? Str.random(40) : `${Str.random(40)}.${extension}`;
+  }
+  async arrayBuffer() {
+    const bytes = await temporaryDisk().getBytes(this.path);
+    return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+  }
+  async text() {
+    return new TextDecoder().decode(await temporaryDisk().getBytes(this.path));
+  }
+  /** The file's bytes from the temporary disk, opened on the first read. */
+  stream() {
+    let reader;
+    return new ReadableStream({
+      pull: async (controller) => {
+        reader ??= (await temporaryDisk().readStream(this.path)).getReader();
+        const { done, value } = await reader.read();
+        if (done) controller.close();
+        else controller.enqueue(value);
+      },
+      cancel: async (reason) => {
+        await reader?.cancel(reason);
+      }
+    });
+  }
+  /** Stores a copy under a random name in `directory`, on `disk` (by default the temporary disk, as Livewire's). */
+  store(directory, disk) {
+    return container().make(FilesystemManager).disk(disk ?? uploadSetting("disk") ?? void 0).putFile(directory, this);
+  }
+  storeAs(directory, name, disk) {
+    return container().make(FilesystemManager).disk(disk ?? uploadSetting("disk") ?? void 0).putFileAs(directory, this, name);
+  }
+  exists() {
+    return temporaryDisk().exists(this.path);
+  }
+  /** Removes the temporary file (a stored copy stays). */
+  delete() {
+    return temporaryDisk().delete(this.path);
+  }
+  /** Whether temporaryUrl() serves this file: its type is in `live.temporary_file_upload.preview_mimes`. */
+  isPreviewable() {
+    return uploadSetting("preview_mimes").includes(this.#extension);
+  }
+  /**
+   * A signed link to the file for `<img src>` or `<video src>` before it is stored. It lasts until the end of the hour
+   * at least 30 minutes away (Livewire's), so a re-render keeps the same link and the browser doesn't reload it.
+   */
+  temporaryUrl() {
+    if (!this.isPreviewable()) throw new FileNotPreviewableError(this.#extension);
+    const expires = new Date((Math.floor((Date.now() + 30 * 6e4) / HOUR) + 1) * HOUR - 1e3);
+    return container().make(UrlGenerator).temporarySignedRoute("live.preview-file", expires, { filename: this.filename }, false);
+  }
+};
+
+// synthesizers.ts
 function isModel(value) {
   if (typeof value !== "object" || value === null) return false;
   const candidate = value;
@@ -158,6 +320,7 @@ function dehydrate(value, registry, path, seen = /* @__PURE__ */ new Set()) {
   seen.add(object);
   try {
     if (object instanceof Date) return [object.toISOString(), { s: "dt" }];
+    if (object instanceof TemporaryUploadedFile) return [object.toData(), { s: "fil" }];
     if (Array.isArray(object)) return [object.map((item, i) => dehydrate(item, registry, `${path}.${i}`, seen)), { s: "arr" }];
     if (isModel(object)) {
       const name = classNameOf(registry, object.constructor);
@@ -174,11 +337,12 @@ function dehydrate(value, registry, path, seen = /* @__PURE__ */ new Set()) {
         const name = classNameOf(registry, first.constructor);
         return [null, { s: "elcln", class: name, keys: items.map((item) => item.getKey()) }];
       }
-      return [items.map((item, i) => dehydrate(item, registry, `${path}.${i}`, seen)), { s: "clctn" }];
+      const meta = object.constructor === Collection ? { s: "clctn" } : { s: "clctn", class: classNameOf(registry, object.constructor) };
+      return [items.map((item, i) => dehydrate(item, registry, `${path}.${i}`, seen)), meta];
     }
     if (isPlainObject(object)) {
       const out = {};
-      for (const [key, item] of Object.entries(object)) out[key] = dehydrate(item, registry, `${path}.${key}`, seen);
+      for (const [key2, item] of Object.entries(object)) out[key2] = dehydrate(item, registry, `${path}.${key2}`, seen);
       return [out, { s: "obj" }];
     }
     const type = object.constructor?.name || "object";
@@ -193,6 +357,11 @@ function modelClass(registry, name) {
   if (typeof name !== "string" || !registry.has(name)) throw new LiveError(`Unable to hydrate the [${String(name)}] model: it is not registered.`);
   return registry.resolve(name);
 }
+function collectionClass(registry, name) {
+  const cls = registry.has(name) ? registry.resolve(name) : void 0;
+  if (typeof cls !== "function" || !(cls.prototype instanceof Collection)) throw new LiveError(`Unable to hydrate the [${name}] collection: it is not registered.`);
+  return cls;
+}
 async function hydrate(value, registry) {
   if (!isTuple(value)) return value;
   const [inner, meta] = value;
@@ -203,31 +372,38 @@ async function hydrate(value, registry) {
       return new Date(String(inner));
     case "arr":
       return Promise.all(inner.map((item) => hydrate(item, registry)));
-    case "clctn":
-      return new Collection(await Promise.all(inner.map((item) => hydrate(item, registry))));
+    case "clctn": {
+      const items = await Promise.all(inner.map((item) => hydrate(item, registry)));
+      return meta.class === void 0 ? new Collection(items) : new (collectionClass(registry, meta.class))(items);
+    }
     case "obj": {
       const out = {};
-      for (const [key, item] of Object.entries(inner)) {
-        Object.defineProperty(out, key, { value: await hydrate(item, registry), enumerable: true, writable: true, configurable: true });
+      for (const [key2, item] of Object.entries(inner)) {
+        Object.defineProperty(out, key2, { value: await hydrate(item, registry), enumerable: true, writable: true, configurable: true });
       }
       return out;
     }
     case "mdl":
       return modelClass(registry, meta.class).findOrFail(meta.key);
+    case "fil":
+      if (!isTemporaryFileData(inner)) throw new LiveError("Unable to hydrate a temporary upload: its data is incomplete.");
+      return new TemporaryUploadedFile(inner);
     case "elcln": {
       const cls = modelClass(registry, meta.class);
       const keys = meta.keys ?? [];
-      const keyName = new cls().getKeyName();
+      const model = new cls();
+      const keyName = model.getKeyName();
       const found = [...await cls.query().whereIn(keyName, keys).get()];
-      const byKey = new Map(found.map((model) => [String(model.getKey()), model]));
-      return new Collection(keys.map((key) => byKey.get(String(key))).filter((model) => model !== void 0));
+      const byKey = new Map(found.map((item) => [String(item.getKey()), item]));
+      const models = keys.map((key2) => byKey.get(String(key2))).filter((item) => item !== void 0);
+      return model.newCollection ? model.newCollection(models) : new Collection(models);
     }
   }
   throw new LiveError(`Unknown snapshot value type [${String(meta.s)}].`);
 }
 
 // security.ts
-var HOOKS = /* @__PURE__ */ new Set(["constructor", "render", "mount", "boot", "booted", "hydrate", "dehydrate", "updating", "updated", "rendering", "rendered", "exception"]);
+var HOOKS = /* @__PURE__ */ new Set(["constructor", "render", "placeholder", "mount", "boot", "booted", "hydrate", "dehydrate", "updating", "updated", "rendering", "rendered", "exception"]);
 var HOOK_PREFIX = /^(updating|updated|hydrate|dehydrate)[A-Z_]/;
 var UNSAFE_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
 var baseApi;
@@ -282,14 +458,24 @@ var ErrorBag = class {
     this.messages = messages;
   }
   messages;
-  has(key) {
-    return (this.messages[key]?.length ?? 0) > 0;
+  /** The field's own messages: a field named `constructor` or `toString` doesn't reach Object's. */
+  #own(key2) {
+    return Object.hasOwn(this.messages, key2) ? this.messages[key2] : void 0;
   }
-  first(key) {
-    return key === void 0 ? this.all()[0] : this.messages[key]?.[0];
+  /** Adds to the component's errors, as addError() does. */
+  add(key2, message) {
+    const messages = this.#own(key2);
+    if (messages !== void 0) messages.push(message);
+    else Object.defineProperty(this.messages, key2, { value: [message], enumerable: true, writable: true, configurable: true });
   }
-  get(key) {
-    return [...this.messages[key] ?? []];
+  has(key2) {
+    return (this.#own(key2)?.length ?? 0) > 0;
+  }
+  first(key2) {
+    return key2 === void 0 ? this.all()[0] : this.#own(key2)?.[0];
+  }
+  get(key2) {
+    return [...this.#own(key2) ?? []];
   }
   all() {
     return Object.values(this.messages).flat();
@@ -304,7 +490,7 @@ var ErrorBag = class {
     return this.all().length;
   }
   toObject() {
-    return Object.fromEntries(Object.entries(this.messages).map(([key, messages]) => [key, [...messages]]));
+    return Object.fromEntries(Object.entries(this.messages).map(([key2, messages]) => [key2, [...messages]]));
   }
 };
 var PendingEvent = class {
@@ -331,6 +517,13 @@ var Component = class {
   static layout;
   /** The page title passed to the layout as `title`. */
   static title;
+  /**
+   * Livewire's #[Lazy]: every embed (and the full page) renders the placeholder first and mounts once the browser shows
+   * it. `<Live component={…} lazy={false} />` mounts one at once. The placeholder is the component's
+   * `placeholder(params)` method (TSX), else the `live.lazy_placeholder` view, else an empty `<div>`: give it the root
+   * element the component renders.
+   */
+  static lazy;
   /** Static fallbacks for runtimes without decorators: { event: 'method' }, locked names, computed getter names. */
   static listeners;
   static locked;
@@ -354,12 +547,18 @@ var Component = class {
     if (options.navigate === true) state.redirectUsingNavigate = true;
     else delete state.redirectUsingNavigate;
   }
-  redirectRoute(name, parameters, options = {}) {
-    this.redirect(inject(UrlGenerator).route(name, parameters), options);
+  /**
+   * redirect() to a named route: `this.redirectRoute('posts.show', post, { navigate: true })`. Once `oriel
+   * route:types` has run, the name and the route's parameters are checked, as route()'s are.
+   */
+  redirectRoute(name, ...args) {
+    const [parameters, options = {}] = args;
+    this.redirect(inject(UrlGenerator2).route(name, parameters), options);
   }
   /**
-   * Validates the public state. On success clears the error bag and returns the validated data; on failure fills the
-   * error bag and throws (the rest of the action is skipped and the component re-renders with `errors`).
+   * Validates the public state. On success clears the error bag and returns the validated data, typed from the rules
+   * (`await this.validate({ title: 'required|string' })` is `{ title: string }`); on failure fills the error bag and
+   * throws (the rest of the action is skipped and the component re-renders with `errors`).
    */
   async validate(rules, messages, attributes) {
     const validator = inject(ValidationFactory).make(Object.fromEntries(Object.entries(this)), rules, messages, attributes);
@@ -373,15 +572,14 @@ var Component = class {
       throw error;
     }
   }
-  addError(key, message) {
-    ;
-    (stateOf(this).errors[key] ??= []).push(message);
+  addError(key2, message) {
+    this.errors.add(key2, message);
   }
   /** Clears every error, or only those of `keys`. */
   resetErrorBag(...keys) {
     const state = stateOf(this);
     if (keys.length === 0) state.errors = {};
-    else for (const key of keys) delete state.errors[key];
+    else for (const key2 of keys) delete state.errors[key2];
   }
   get errors() {
     return new ErrorBag(stateOf(this).errors);
@@ -422,13 +620,13 @@ var Component = class {
 
 // embed.ts
 import { LiveManager as LiveManager3 } from "@orieljs/contracts";
-import { inject as inject3 } from "@orieljs/container";
+import { inject as inject5 } from "@orieljs/container";
 
 // Testable.ts
 import { AssertionError } from "assert";
 import { isDeepStrictEqual } from "util";
 import { LiveManager as LiveManager2, Session, token } from "@orieljs/contracts";
-import { Container, currentContainer, inject as inject2 } from "@orieljs/container";
+import { Container, currentContainer as currentContainer2, inject as inject4 } from "@orieljs/container";
 
 // flash.ts
 function trackFlash(session, { saved = true } = {}) {
@@ -437,12 +635,12 @@ function trackFlash(session, { saved = true } = {}) {
   return (redirected) => {
     if (redirected) return;
     const flashed = session.get("_flash.new", []);
-    const fresh = flashed.filter((key) => !before.has(key));
+    const fresh = flashed.filter((key2) => !before.has(key2));
     if (fresh.length === 0) return;
-    session.put("_flash.new", flashed.filter((key) => before.has(key)));
+    session.put("_flash.new", flashed.filter((key2) => before.has(key2)));
     if (!saved) return session.forget(...fresh);
     const old = session.get("_flash.old", []);
-    session.put("_flash.old", [...old, ...fresh.filter((key) => !old.includes(key))]);
+    session.put("_flash.old", [...old, ...fresh.filter((key2) => !old.includes(key2))]);
   };
 }
 
@@ -500,6 +698,250 @@ function insertAttributesIntoRoot(html, attributes) {
   return match[1] + rendered + source.slice(match[1].length);
 }
 
+// uploads.ts
+import { ConfigRepository as ConfigRepository2, Encrypter, UrlGenerator as UrlGenerator3, ValidationFactory as ValidationFactory2 } from "@orieljs/contracts";
+import { inject as inject2 } from "@orieljs/container";
+import { FileType, Str as Str2 } from "@orieljs/support";
+
+// checksum.ts
+import { createHmac, timingSafeEqual } from "crypto";
+function canonicalJson(value) {
+  if (Array.isArray(value)) return `[${value.map((item) => canonicalJson(item === void 0 ? null : item)).join(",")}]`;
+  if (typeof value === "object" && value !== null) {
+    const entries = Object.keys(value).sort().filter((key2) => value[key2] !== void 0).map((key2) => `${JSON.stringify(key2)}:${canonicalJson(value[key2])}`);
+    return `{${entries.join(",")}}`;
+  }
+  return JSON.stringify(value);
+}
+function checksum(key2, payload) {
+  return createHmac("sha256", key2).update(canonicalJson({ data: payload.data, memo: payload.memo })).digest("hex");
+}
+function verifyChecksum(key2, payload, given) {
+  if (typeof given !== "string") return false;
+  const expected = Buffer.from(checksum(key2, payload), "utf8");
+  const actual = Buffer.from(given, "utf8");
+  return expected.length === actual.length && timingSafeEqual(expected, actual);
+}
+function signatureOf(key2, purpose, payload) {
+  return createHmac("sha256", key2).update(`${purpose}|${payload}`).digest("base64url");
+}
+function signValue(key2, purpose, value) {
+  const payload = Buffer.from(JSON.stringify(value), "utf8").toString("base64url");
+  return `${payload}.${signatureOf(key2, purpose, payload)}`;
+}
+function verifiedValue(key2, purpose, token2) {
+  if (typeof token2 !== "string") return void 0;
+  const dot = token2.lastIndexOf(".");
+  if (dot <= 0) return void 0;
+  const payload = token2.slice(0, dot);
+  const expected = Buffer.from(signatureOf(key2, purpose, payload), "utf8");
+  const given = Buffer.from(token2.slice(dot + 1), "utf8");
+  if (expected.length !== given.length || !timingSafeEqual(expected, given)) return void 0;
+  try {
+    return JSON.parse(Buffer.from(payload, "base64url").toString("utf8"));
+  } catch {
+    return void 0;
+  }
+}
+
+// uploads.ts
+var UPLOAD_URI = "/oriel/live/upload-file";
+var PREVIEW_URI = "/oriel/live/preview-file";
+var REFERENCE = "live.upload";
+var DAY = 24 * 36e5;
+var PREVIEW_TYPES = {
+  png: "image/png",
+  gif: "image/gif",
+  bmp: "image/bmp",
+  svg: "image/svg+xml",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  avif: "image/avif",
+  wav: "audio/wav",
+  mp3: "audio/mpeg",
+  mpga: "audio/mpeg",
+  m4a: "audio/mp4",
+  wma: "audio/x-ms-wma",
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  wmv: "video/x-ms-wmv"
+};
+var key = () => inject2(Encrypter).getKey();
+function temporaryFileReference(file) {
+  return signValue(key(), REFERENCE, file.toData());
+}
+function temporaryFileFromReference(reference, component) {
+  const data = verifiedValue(key(), REFERENCE, reference);
+  if (!isTemporaryFileData(data)) throw new CorruptComponentPayloadError(component);
+  return new TemporaryUploadedFile(data);
+}
+function uploadRules() {
+  const rules = uploadSetting("rules");
+  return Array.isArray(rules) ? [...rules] : rules.split("|");
+}
+function uploadMiddleware() {
+  const configured = [uploadSetting("middleware")].flat();
+  return configured.includes("web") ? configured : ["web", ...configured];
+}
+async function storeTemporaryFiles(files) {
+  const disk = temporaryDisk();
+  const directory = temporaryDirectory();
+  return Promise.all(
+    files.map(async (file) => {
+      const extension = file.extension();
+      const filename = extension === "" ? Str2.random(40) : `${Str2.random(40)}.${extension}`;
+      await disk.putFileAs(directory, file, filename);
+      return new TemporaryUploadedFile({ filename, name: file.clientName, size: file.size, type: file.mimeType, extension });
+    })
+  );
+}
+async function uploadedFileFrom(file) {
+  const detected = FileType.detectFileType(new Uint8Array(await file.slice(0, FileType.SNIFF_BYTES).arrayBuffer()));
+  const name = file.name ?? "";
+  const claimed = name.includes(".") ? name.slice(name.lastIndexOf(".") + 1).toLowerCase() : "";
+  const recognised = new Set(FileType.BINARY_AND_MARKUP_TYPES.flatMap(({ extensions }) => extensions));
+  const extension = detected !== FileType.TEXT && detected.extensions.length > 0 ? detected.extensions[0] : /^[a-z0-9]+$/.test(claimed) && !recognised.has(claimed) ? claimed : detected === FileType.TEXT ? "txt" : "";
+  return {
+    clientName: name,
+    mimeType: file.type === "" ? "application/octet-stream" : file.type,
+    size: file.size,
+    extension: () => extension,
+    clientExtension: () => claimed,
+    hashName: () => extension === "" ? Str2.random(40) : `${Str2.random(40)}.${extension}`,
+    arrayBuffer: () => file.arrayBuffer(),
+    text: () => file.text(),
+    stream: () => file.stream(),
+    store: () => Promise.reject(new Error("Store the temporary upload instead.")),
+    storeAs: () => Promise.reject(new Error("Store the temporary upload instead."))
+  };
+}
+function filesOf(request) {
+  const files = request.all().files;
+  if (files === void 0 || files === null) return [];
+  if (Array.isArray(files)) return files;
+  return typeof files === "object" && Object.getPrototypeOf(files) === Object.prototype ? Object.values(files) : [files];
+}
+async function handleUpload(request) {
+  if (!inject2(UrlGenerator3).hasValidSignature(request, false)) throw new InvalidUploadSignatureError();
+  const files = filesOf(request);
+  await inject2(ValidationFactory2).make({ files }, { "files.*": uploadRules() }).validated();
+  const stored = await storeTemporaryFiles(files);
+  return { paths: stored.map(temporaryFileReference) };
+}
+async function handlePreview(request, filename) {
+  if (!inject2(UrlGenerator3).hasValidSignature(request, false)) throw new InvalidUploadSignatureError();
+  const data = { filename, name: "", size: 0, type: "", extension: filename.includes(".") ? filename.slice(filename.lastIndexOf(".") + 1) : "" };
+  if (!isTemporaryFileData(data)) throw new TemporaryFileNotFoundError(filename);
+  const file = new TemporaryUploadedFile(data);
+  const disk = temporaryDisk();
+  if (!await disk.exists(file.path)) throw new TemporaryFileNotFoundError(filename);
+  const bytes = await disk.getBytes(file.path);
+  return new Response(bytes, {
+    headers: {
+      "Content-Type": PREVIEW_TYPES[data.extension] ?? "application/octet-stream",
+      "Content-Length": String(bytes.byteLength),
+      "Content-Disposition": `attachment; filename="${filename}"`,
+      "Content-Security-Policy": "sandbox; default-src 'none'",
+      "X-Content-Type-Options": "nosniff",
+      "Cache-Control": "private, max-age=3600"
+    }
+  });
+}
+async function cleanupOldUploads() {
+  if (uploadSetting("cleanup") === false) return;
+  const config = inject2(ConfigRepository2);
+  const disk = uploadSetting("disk") ?? config.get("filesystems.default", "local");
+  if (config.get(`filesystems.disks.${disk}.driver`, void 0) === "s3") return;
+  const storage = temporaryDisk();
+  const cutoff = Date.now() - DAY;
+  for (const path of await storage.files(temporaryDirectory())) {
+    try {
+      if ((await storage.lastModified(path)).getTime() < cutoff) await storage.delete(path);
+    } catch {
+    }
+  }
+}
+
+// WithFileUploads.ts
+import { UrlGenerator as UrlGenerator4, ValidationFactory as ValidationFactory3 } from "@orieljs/contracts";
+import { inject as inject3 } from "@orieljs/container";
+var UPLOADS = /* @__PURE__ */ Symbol.for("oriel:live.uploads");
+var UPLOAD_CALLS = /* @__PURE__ */ new Set(["_startUpload", "_finishUpload", "_uploadErrored", "_removeUpload"]);
+function WithFileUploads(Base) {
+  class WithFileUploadsMixin extends Base {
+  }
+  Object.defineProperty(WithFileUploadsMixin.prototype, UPLOADS, { value: true });
+  return WithFileUploadsMixin;
+}
+function usesFileUploads(component) {
+  return component[UPLOADS] === true;
+}
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var read = (component, path) => path.split(".").reduce((node, segment) => isRecord(node) || Array.isArray(node) ? node[segment] : void 0, component);
+function uploadErrors(name, errors, multiple) {
+  if (typeof errors === "string") {
+    try {
+      const replaced = errors.replace(multiple ? /files/gi : /files\.0/gi, name);
+      const bag = JSON.parse(replaced).errors;
+      if (isRecord(bag) && Object.values(bag).every((messages) => Array.isArray(messages) && messages.every((message) => typeof message === "string"))) {
+        return bag;
+      }
+    } catch {
+    }
+  }
+  return { [name]: [`The ${name} failed to upload.`] };
+}
+async function runUploadCall(component, method, params, update) {
+  if (!usesFileUploads(component)) {
+    throw new LiveError(`Cannot handle file upload without [WithFileUploads] on the [${stateOf(component).name}] component class.`);
+  }
+  const [name, value, multiple] = [String(params[0] ?? ""), params[1], params[2] === true];
+  switch (method) {
+    case "_startUpload":
+      component.skipRender();
+      return inject3(UrlGenerator4).temporarySignedRoute("live.upload-file", uploadSetting("max_upload_time") * 60, void 0, false);
+    case "_finishUpload": {
+      await cleanupOldUploads();
+      const files = (Array.isArray(value) ? value : []).map((reference) => temporaryFileFromReference(reference, stateOf(component).name));
+      const current = read(component, name);
+      const next = multiple ? files : Array.isArray(current) ? [...current, ...files] : files[0] ?? null;
+      await update(name, next);
+      return files.map((file) => file.filename);
+    }
+    case "_uploadErrored":
+      throw new UploadValidationError(uploadErrors(name, value, multiple));
+    case "_removeUpload": {
+      const filename = String(value ?? "");
+      const current = read(component, name);
+      if (Array.isArray(current)) {
+        const removed = current.filter((file) => file instanceof TemporaryUploadedFile && file.filename === filename);
+        for (const file of removed) await file.delete();
+        await update(
+          name,
+          current.filter((file) => !removed.includes(file))
+        );
+      } else if (current instanceof TemporaryUploadedFile && current.filename === filename) {
+        await current.delete();
+        await update(name, null);
+      }
+      return filename;
+    }
+  }
+  throw new LiveError(`Unknown upload call [${method}].`);
+}
+async function uploadForTest(files) {
+  try {
+    await inject3(ValidationFactory3).make({ files: [...files] }, { "files.*": uploadRules() }).validated();
+  } catch (error) {
+    const errors = error.errors;
+    if (error.kind !== "Validation" || !isRecord(errors)) throw error;
+    return { errors: JSON.stringify({ errors }) };
+  }
+  return { references: (await storeTemporaryFiles(files)).map(temporaryFileReference) };
+}
+
 // Testable.ts
 var fail = (message, actual, expected) => {
   throw new AssertionError({ message, actual, expected, operator: "live" });
@@ -507,14 +949,14 @@ var fail = (message, actual, expected) => {
 var getPath = (target, path) => path.split(".").reduce((node, segment) => typeof node === "object" && node !== null ? node[segment] : void 0, target);
 var TestRequestScope = token("Testing.RequestScope");
 function requestScope() {
-  const container = currentContainer() ?? Container.getInstance();
-  return container?.bound(TestRequestScope) === true ? container.make(TestRequestScope) : (run) => run();
+  const container2 = currentContainer2() ?? Container.getInstance();
+  return container2?.bound(TestRequestScope) === true ? container2.make(TestRequestScope) : (run) => run();
 }
 function currentSession() {
-  const container = currentContainer();
-  if (container?.bound(Session) !== true) return void 0;
+  const container2 = currentContainer2();
+  if (container2?.bound(Session) !== true) return void 0;
   try {
-    return container.make(Session);
+    return container2.make(Session);
   } catch {
     return void 0;
   }
@@ -534,11 +976,14 @@ var Testable = class _Testable {
   #html;
   #effects;
   #instance;
-  /** Mounts `component` with `params`, as `<Live component={…} {...params} />` would. */
+  /**
+   * Mounts `component` with `params`, as `<Live component={…} {...params} />` would. A lazy component mounts at once
+   * (Livewire's withoutLazyLoading()); `{ lazy: true }` renders its placeholder, and `call('__lazyLoad', …)` loads it.
+   */
   static async create(component, params = {}) {
     const scope = requestScope();
-    const manager = inject2(LiveManager2);
-    return new _Testable(manager, scope, await scope(() => manager.mountComponent(component, params)));
+    const manager = inject4(LiveManager2);
+    return new _Testable(manager, scope, await scope(() => manager.mountComponent(component, { lazy: false, ...params })));
   }
   /** The component instance after the last request. */
   instance() {
@@ -556,9 +1001,24 @@ var Testable = class _Testable {
   effects() {
     return this.#effects;
   }
+  /**
+   * Sets public properties through an update. A file (a FakeFile) or an array of files is uploaded as `o:model` on a
+   * file input does it: the upload rules, the temporary disk, then a TemporaryUploadedFile (or an array) in the
+   * property, or the upload's errors on it (Livewire's).
+   */
   async set(path, value) {
+    const files = [value].flat();
+    if (typeof path === "string" && files.length > 0 && files.every((file) => file instanceof Blob)) return this.upload(path, files, Array.isArray(value));
     return this.#update(typeof path === "string" ? { [path]: value } : path, []);
   }
+  /** Uploads `files` into the property `name` (an array when `multiple`), as the browser's upload calls do. */
+  async upload(name, files, multiple = false) {
+    const info = files.map((file) => ({ name: file.name ?? "", size: file.size, type: file.type }));
+    await this.#update({}, [{ method: "_startUpload", params: [name, info, multiple] }]);
+    const outcome = await this.scope(async () => uploadForTest(await Promise.all(files.map((file) => uploadedFileFrom(file)))));
+    if ("errors" in outcome) return this.#update({}, [{ method: "_uploadErrored", params: [name, outcome.errors, multiple] }]);
+    return this.#update({}, [{ method: "_finishUpload", params: [name, outcome.references, multiple] }]);
+  }
   async call(method, ...params) {
     return this.#update({}, [{ method, params }]);
   }
@@ -636,14 +1096,14 @@ var Testable = class _Testable {
     const errors = stateOf(this.#instance).errors;
     const wanted = [keys].flat();
     if (wanted.length === 0 && Object.keys(errors).length === 0) fail("Component has no errors.", errors);
-    for (const key of wanted) if ((errors[key]?.length ?? 0) === 0) fail(`Component missing error: ${key}`, errors, key);
+    for (const key2 of wanted) if ((errors[key2]?.length ?? 0) === 0) fail(`Component missing error: ${key2}`, errors, key2);
     return this;
   }
   /** No errors for the keys given (or none at all with no keys). */
   assertHasNoErrors(keys = []) {
     const errors = stateOf(this.#instance).errors;
     const wanted = [keys].flat();
-    const found = wanted.length === 0 ? Object.keys(errors).filter((key) => (errors[key]?.length ?? 0) > 0) : wanted.filter((key) => (errors[key]?.length ?? 0) > 0);
+    const found = wanted.length === 0 ? Object.keys(errors).filter((key2) => (errors[key2]?.length ?? 0) > 0) : wanted.filter((key2) => (errors[key2]?.length ?? 0) > 0);
     if (found.length > 0) fail(`Component has errors: "${found.join('", "')}"`, errors);
     return this;
   }
@@ -666,17 +1126,17 @@ var Testable = class _Testable {
 };
 
 // embed.ts
-async function live(component, params = {}, key) {
-  const html = await inject3(LiveManager3).mount(component, params, key === void 0 ? void 0 : String(key));
+async function live(component, params = {}, key2) {
+  const html = await inject5(LiveManager3).mount(component, params, key2 === void 0 ? void 0 : String(key2));
   return { toHtml: () => html };
 }
-function LiveComponent({ component, "o:key": key, children: _children, ...params }) {
-  return live(component, params, key);
+function LiveComponent({ component, "o:key": key2, children: _children, ...params }) {
+  return live(component, params, key2);
 }
 var Live = Object.assign(LiveComponent, {
   /** Registers a component under a name (components in app/Live are registered at boot). */
   component(name, component) {
-    inject3(LiveManager3).register(component, name);
+    inject5(LiveManager3).register(component, name);
   },
   /** Livewire::test(): mounts `component` for assertions. */
   test(component, params = {}) {
@@ -689,49 +1149,65 @@ import { AsyncLocalStorage as AsyncLocalStorage2 } from "async_hooks";
 import { randomBytes } from "crypto";
 import {
   ClassRegistry,
-  ConfigRepository,
+  ConfigRepository as ConfigRepository4,
   CurrentRoute as CurrentRoute2,
-  Encrypter,
+  Encrypter as Encrypter2,
   HttpRequest,
   Redirector,
   Router,
   Session as Session2,
-  ViewFactory
+  ViewFactory as ViewFactory2
 } from "@orieljs/contracts";
-import { currentContainer as currentContainer2 } from "@orieljs/container";
-import { Str as Str2 } from "@orieljs/support";
+import { currentContainer as currentContainer3 } from "@orieljs/container";
+import { Str as Str4 } from "@orieljs/support";
 
-// checksum.ts
-import { createHmac, timingSafeEqual } from "crypto";
-function canonicalJson(value) {
-  if (Array.isArray(value)) return `[${value.map((item) => canonicalJson(item === void 0 ? null : item)).join(",")}]`;
-  if (typeof value === "object" && value !== null) {
-    const entries = Object.keys(value).sort().filter((key) => value[key] !== void 0).map((key) => `${JSON.stringify(key)}:${canonicalJson(value[key])}`);
-    return `{${entries.join(",")}}`;
-  }
-  return JSON.stringify(value);
+// lazy.ts
+import { ConfigRepository as ConfigRepository3, ViewFactory } from "@orieljs/contracts";
+var PURPOSE = "live.lazy";
+function lazyMode(cls, params) {
+  const { lazy } = params;
+  if (lazy === "on-load") return "on-load";
+  if (lazy === true || lazy === void 0 && cls.lazy === true) return "intersect";
+  return void 0;
 }
-function checksum(key, payload) {
-  return createHmac("sha256", key).update(canonicalJson({ data: payload.data, memo: payload.memo })).digest("hex");
+async function placeholderHtml(container2, instance, params) {
+  const method = instance.placeholder;
+  const views = container2.make(ViewFactory);
+  let output = typeof method === "function" ? await method.call(instance, params) : void 0;
+  if (output === void 0) {
+    const view = container2.bound(ConfigRepository3) ? container2.make(ConfigRepository3).get("live.lazy_placeholder", null) : null;
+    output = view === null || view === void 0 ? "<div></div>" : views.make(view, params);
+  }
+  return (typeof output === "string" ? output : await views.renderToString(output)).trim();
 }
-function verifyChecksum(key, payload, given) {
-  if (typeof given !== "string") return false;
-  const expected = Buffer.from(checksum(key, payload), "utf8");
-  const actual = Buffer.from(given, "utf8");
-  return expected.length === actual.length && timingSafeEqual(expected, actual);
+function lazyPayload(key2, registry, load) {
+  const params = Object.fromEntries(Object.entries(load.params).map(([name, value]) => [name, dehydrate(value, registry, `${load.name}.${name}`)]));
+  return signValue(key2, PURPOSE, { ...load, params });
+}
+async function lazyLoadOf(key2, registry, payload, component) {
+  const load = verifiedValue(key2, PURPOSE, payload);
+  if (load === void 0 || load.id !== component.id || load.name !== component.name || typeof load.tag !== "string" || typeof load.params !== "object" || load.params === null) {
+    throw new CorruptComponentPayloadError(component.name);
+  }
+  return { params: await hydrate([load.params, { s: "obj" }], registry), tag: load.tag };
+}
+function assertSameRoot(name, placeholder, rendered) {
+  if (placeholder !== rendered) {
+    throw new LiveError(`The lazy component [${name}] renders a <${rendered}> where its placeholder has a <${placeholder}>: give both the same root element.`);
+  }
 }
 
 // naming.ts
 import { existsSync, readdirSync } from "fs";
 import { join, relative, sep } from "path";
 import { pathToFileURL } from "url";
-import { Str } from "@orieljs/support";
+import { Str as Str3 } from "@orieljs/support";
 function componentName(file) {
-  return file.replace(/\.(tsx|ts|jsx|js|mts|mjs)$/, "").split(/[\\/]/).map((segment) => Str.kebab(segment)).join(".");
+  return file.replace(/\.(tsx|ts|jsx|js|mts|mjs)$/, "").split(/[\\/]/).map((segment) => Str3.kebab(segment)).join(".");
 }
 function defaultName(cls) {
   const name = cls.name;
-  return typeof name === "string" && name !== "" ? Str.kebab(name) : void 0;
+  return typeof name === "string" && name !== "" ? Str3.kebab(name) : void 0;
 }
 function componentFiles(directory) {
   if (!existsSync(directory)) return [];
@@ -810,9 +1286,9 @@ function persistentPass(router, persistent, method, path) {
   const seen = /* @__PURE__ */ new Set();
   const middleware = expand(route.gatherMiddleware(), aliases, groups).filter((entry) => {
     if (!ids.has(entry.cls)) ids.set(entry.cls, ids.size);
-    const key = `${ids.get(entry.cls)}:${entry.parameters.join(",")}`;
-    if (!wanted.has(entry.cls) || excluded.has(entry.cls) || seen.has(key)) return false;
-    seen.add(key);
+    const key2 = `${ids.get(entry.cls)}:${entry.parameters.join(",")}`;
+    if (!wanted.has(entry.cls) || excluded.has(entry.cls) || seen.has(key2)) return false;
+    seen.add(key2);
     return true;
   });
   const early = new Set(expand(["web", "api"], aliases, groups).map((entry) => entry.cls));
@@ -824,38 +1300,38 @@ function persistentPass(router, persistent, method, path) {
 function persistentMiddleware(router, persistent, method, path) {
   return [...persistentPass(router, persistent, method, path)?.middleware ?? []];
 }
-function currentRoute(container) {
-  if (!container.bound(CurrentRoute)) return void 0;
+function currentRoute(container2) {
+  if (!container2.bound(CurrentRoute)) return void 0;
   try {
-    return container.make(CurrentRoute);
+    return container2.make(CurrentRoute);
   } catch {
     return void 0;
   }
 }
-async function throughMiddleware(container, request, pass, destination) {
-  const original = currentRoute(container);
+async function throughMiddleware(container2, request, pass, destination) {
+  const original = currentRoute(container2);
   const page = { route: pass.route, parameters: { ...pass.values }, middleware: [] };
   let swapped = false;
   const show = () => {
-    container.instance(CurrentRoute, page);
+    container2.instance(CurrentRoute, page);
     swapped = true;
   };
   const restore = () => {
     if (!swapped) return;
-    if (original === void 0) container.forgetInstance(CurrentRoute);
-    else container.instance(CurrentRoute, original);
+    if (original === void 0) container2.forgetInstance(CurrentRoute);
+    else container2.instance(CurrentRoute, original);
     swapped = false;
   };
   let ran;
   const run = async (index) => {
-    if (index === pass.at) Object.assign(page.parameters, await pass.router.substituteBindings(pass.route, pass.values, container));
+    if (index === pass.at) Object.assign(page.parameters, await pass.router.substituteBindings(pass.route, pass.values, container2));
     if (index === pass.middleware.length) {
       restore();
       ran = { result: await destination() };
       return new Response(null, { status: 204 });
     }
     const { cls, parameters } = pass.middleware[index];
-    const instance = container.make(cls);
+    const instance = container2.make(cls);
     const next = () => run(index + 1);
     return instance.handle(request, next, ...parameters);
   };
@@ -929,18 +1405,19 @@ var livePaginationState = {
 
 // LiveComponentManager.ts
 var renderContext = new AsyncLocalStorage2();
+var loading = /* @__PURE__ */ new WeakMap();
 var pageRequest = new AsyncLocalStorage2();
-function optional(container, token2) {
-  if (!container.bound(token2)) return void 0;
+function optional(container2, token2) {
+  if (!container2.bound(token2)) return void 0;
   try {
-    return container.make(token2);
+    return container2.make(token2);
   } catch {
     return void 0;
   }
 }
-var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-function setOwn(object, key, value) {
-  Object.defineProperty(object, key, { value, enumerable: true, writable: true, configurable: true });
+var isRecord2 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function setOwn(object, key2, value) {
+  Object.defineProperty(object, key2, { value, enumerable: true, writable: true, configurable: true });
 }
 async function hook2(instance, name, ...args) {
   const method = instance[name];
@@ -953,7 +1430,7 @@ var LiveComponentManager = class {
   app;
   /** The request scope when there is one (sessions, the current route), else the application. */
   container() {
-    return currentContainer2() ?? this.app;
+    return currentContainer3() ?? this.app;
   }
   registry() {
     return this.container().make(ClassRegistry);
@@ -984,10 +1461,10 @@ var LiveComponentManager = class {
     return request.header("X-Oriel-Live") === "true";
   }
   /** The first render: HTML with o:id, o:snapshot and o:effects on the root element. */
-  async mount(component, params = {}, key) {
+  async mount(component, params = {}, key2) {
     const context = renderContext.getStore();
     if (context === void 0) return (await this.mountComponent(component, params)).html;
-    const childKey = key ?? `lw-${context.index++}`;
+    const childKey = key2 ?? `lw-${context.index++}`;
     const existing = Object.hasOwn(context.previous, childKey) ? context.previous[childKey] : void 0;
     if (existing !== void 0) {
       setOwn(context.children, childKey, existing);
@@ -997,7 +1474,11 @@ var LiveComponentManager = class {
     setOwn(context.children, childKey, [result.tag, result.snapshot.memo.id]);
     return result.html;
   }
-  async mountComponent(component, params = {}, existing) {
+  /**
+   * Mounts a component: boot(), the params into its properties, mount(params), then its first render. A lazy one
+   * (`lazy` in the params, or `static lazy`) renders its placeholder instead and mounts when the browser loads it.
+   */
+  async mountComponent(component, embedParams = {}, existing) {
     const cls = typeof component === "string" ? this.resolve(component) : component;
     if (!isComponentClass(cls)) throw new LiveError(`[${cls.name}] is not a Live component: it must extend Component.`);
     const name = this.nameOf(cls);
@@ -1005,7 +1486,10 @@ var LiveComponentManager = class {
     const state = stateOf(instance);
     state.id = randomBytes(15).toString("base64url");
     state.name = name;
+    const { lazy: _lazy, ...params } = embedParams;
+    const lazy = lazyMode(cls, embedParams);
     await hook2(instance, "boot");
+    if (lazy !== void 0) return this.mountPlaceholder(instance, params, lazy);
     for (const [property, value] of Object.entries(params)) {
       if (Object.hasOwn(instance, property)) instance[property] = value;
     }
@@ -1022,6 +1506,30 @@ var LiveComponentManager = class {
     const attributes = { "o:snapshot": JSON.stringify(snapshot), "o:effects": JSON.stringify(effects), "o:id": state.id };
     return { instance, snapshot, effects, html: insertAttributesIntoRoot(html, attributes), tag };
   }
+  /**
+   * A lazy component's first render (Livewire's): its placeholder, with the state it has before mount() and the mount
+   * params signed for the `__lazyLoad` call the browser makes when it shows it (`o:lazy`, or `o:lazy-on-load`).
+   */
+  async mountPlaceholder(instance, params, lazy) {
+    const state = stateOf(instance);
+    const request = optional(this.container(), HttpRequest);
+    const page = pageRequest.getStore() ?? { path: request?.path() ?? "", method: request?.method() ?? "GET" };
+    const memo = { id: state.id, name: state.name, path: page.path, method: page.method, children: {}, errors: {} };
+    const html = await placeholderHtml(this.container(), instance, params);
+    const tag = rootTag(html, state.name);
+    const effects = this.effects(instance);
+    const listeners = Object.keys(listenersOf(instance.constructor));
+    if (listeners.length > 0) effects.listeners = listeners;
+    const snapshot = await this.snapshot(instance, memo);
+    const payload = lazyPayload(this.key(), this.registry(), { id: state.id, name: state.name, tag, params });
+    const attributes = {
+      "o:snapshot": JSON.stringify(snapshot),
+      "o:effects": JSON.stringify(effects),
+      "o:id": state.id,
+      [lazy === "on-load" ? "o:lazy-on-load" : "o:lazy"]: payload
+    };
+    return { instance, snapshot, effects, html: insertAttributesIntoRoot(html, attributes), tag };
+  }
   /** Applies each component's updates and calls, re-renders it and returns its new snapshot and effects. */
   async update(request) {
     const components = [];
@@ -1034,6 +1542,7 @@ var LiveComponentManager = class {
   }
   async updateComponent(snapshotJson, updates, calls) {
     const snapshot = this.verify(snapshotJson);
+    const load = await this.lazyLoad(snapshot.memo, updates, calls);
     const cls = this.resolve(snapshot.memo.name);
     const instance = this.container().make(cls);
     const state = stateOf(instance);
@@ -1048,13 +1557,21 @@ var LiveComponentManager = class {
     this.prepareComputed(instance);
     const returns = [];
     await renderPaginated(instance, this.pageUrl(snapshot.memo.path), async () => {
-      await hook2(instance, "hydrate");
+      if (load === void 0) await hook2(instance, "hydrate");
       try {
+        if (load !== void 0) {
+          for (const [property, value] of Object.entries(load.params)) {
+            if (Object.hasOwn(instance, property)) instance[property] = value;
+          }
+          loading.set(instance, load.tag);
+          await hook2(instance, "mount", load.params);
+          returns.push(void 0);
+        }
         for (const [path, value] of Object.entries(updates)) await this.applyUpdate(instance, path, value);
-        for (const call of calls) returns.push(await this.call(instance, call.method, call.params));
+        for (const call of load === void 0 ? calls : []) returns.push(await this.call(instance, call.method, call.params));
       } catch (error) {
         const errors = error.errors;
-        if (error.kind !== "Validation" || !isRecord(errors)) throw error;
+        if (error.kind !== "Validation" || !isRecord2(errors)) throw error;
         state.errors = { ...errors };
       }
     });
@@ -1065,12 +1582,24 @@ var LiveComponentManager = class {
     if (!state.skipRender) {
       ;
       ({ html, tag } = await this.render(instance, memo, snapshot.memo.children));
+      const placeholder = loading.get(instance);
+      if (placeholder !== void 0) assertSameRoot(state.name, placeholder, tag);
       html = insertAttributesIntoRoot(html, { "o:id": state.id });
       effects.html = html;
     }
     if (calls.length > 0) effects.returns = returns;
     return { instance, snapshot: await this.snapshot(instance, memo), effects, html, tag };
   }
+  /**
+   * The mount params and placeholder tag of a `__lazyLoad` request, or undefined for any other update. The load comes
+   * alone (no updates, no other call: the browser sends it in a request of its own) and its payload must be the one
+   * signed for this component: anything else is refused as corrupt (a 403) before the component boots.
+   */
+  async lazyLoad(memo, updates, calls) {
+    if (!calls.some((call) => call.method === "__lazyLoad")) return void 0;
+    if (calls.length !== 1 || Object.keys(updates).length > 0) throw new CorruptComponentPayloadError(memo.name);
+    return lazyLoadOf(this.key(), this.registry(), calls[0].params[0], { id: memo.id, name: memo.name });
+  }
   /**
    * The route action of POST /oriel/live/update. Each component's update runs behind the persistent middleware of the
    * route that rendered its page (Livewire's): `auth`, `verified`, `guest` and `can`, with the page route's parameters
@@ -1080,17 +1609,17 @@ var LiveComponentManager = class {
    */
   async handle(request) {
     if (!this.isLiveRequest(request)) throw new InvalidLiveRequestError("Live update requests need the X-Oriel-Live header.");
-    const container = this.container();
-    const persistent = optional(container, ConfigRepository)?.get("live.persistent_middleware", PERSISTENT_MIDDLEWARE) ?? PERSISTENT_MIDDLEWARE;
+    const container2 = this.container();
+    const persistent = optional(container2, ConfigRepository4)?.get("live.persistent_middleware", PERSISTENT_MIDDLEWARE) ?? PERSISTENT_MIDDLEWARE;
     const components = [];
-    const flashed = trackFlash(optional(container, Session2));
+    const flashed = trackFlash(optional(container2, Session2));
     for (const component of this.payload(request).components) {
       const { memo } = this.verify(component.snapshot);
-      const pass = persistentPass(container.make(Router), persistent, memo.method, memo.path);
+      const pass = persistentPass(container2.make(Router), persistent, memo.method, memo.path);
       const update = () => this.updateComponent(component.snapshot, component.updates, component.calls);
       const result = await pageRequest.run(
         { path: memo.path, method: memo.method },
-        () => pass === void 0 || pass.middleware.length === 0 ? update() : throughMiddleware(container, request, pass, update)
+        () => pass === void 0 || pass.middleware.length === 0 ? update() : throughMiddleware(container2, request, pass, update)
       );
       if (result instanceof Response) return result;
       components.push({ snapshot: JSON.stringify(result.snapshot), effects: result.effects });
@@ -1100,19 +1629,19 @@ var LiveComponentManager = class {
   }
   /** A full-page component (Route.get('/counter', Counter)): mounted with the route parameters, inside the layout. */
   async page(component) {
-    const container = this.container();
-    const params = { ...optional(container, CurrentRoute2)?.parameters ?? {} };
+    const container2 = this.container();
+    const params = { ...optional(container2, CurrentRoute2)?.parameters ?? {} };
     const cls = component.constructor;
     const result = await this.mountComponent(cls, params, component);
     const redirect = result.effects.redirect;
     if (redirect !== void 0) {
-      return optional(container, Redirector)?.to(redirect) ?? new Response(null, { status: 302, headers: { Location: redirect } });
+      return optional(container2, Redirector)?.to(redirect) ?? new Response(null, { status: 302, headers: { Location: redirect } });
     }
-    const layout = cls.layout ?? optional(container, ConfigRepository)?.get("live.layout") ?? "components.layouts.app";
+    const layout = cls.layout ?? optional(container2, ConfigRepository4)?.get("live.layout") ?? "components.layouts.app";
     const html = result.html;
     const data = { children: { toHtml: () => html } };
     if (cls.title !== void 0) data.title = cls.title;
-    return container.make(ViewFactory).make(layout, data);
+    return container2.make(ViewFactory2).make(layout, data);
   }
   /** Parses and checks a snapshot: a bad checksum throws before anything is hydrated. */
   verify(snapshotJson) {
@@ -1122,13 +1651,13 @@ var LiveComponentManager = class {
     } catch {
       throw new CorruptComponentPayloadError();
     }
-    if (!isRecord(snapshot) || !isRecord(snapshot.data) || !isRecord(snapshot.memo)) throw new CorruptComponentPayloadError();
+    if (!isRecord2(snapshot) || !isRecord2(snapshot.data) || !isRecord2(snapshot.memo)) throw new CorruptComponentPayloadError();
     const memo = snapshot.memo;
     const name = typeof memo.name === "string" ? memo.name : "unknown";
-    const key = this.key();
+    const key2 = this.key();
     let valid;
     try {
-      valid = verifyChecksum(key, { data: snapshot.data, memo: snapshot.memo }, snapshot.checksum);
+      valid = verifyChecksum(key2, { data: snapshot.data, memo: snapshot.memo }, snapshot.checksum);
     } catch {
       valid = false;
     }
@@ -1136,7 +1665,7 @@ var LiveComponentManager = class {
     return snapshot;
   }
   key() {
-    return this.container().make(Encrypter).getKey();
+    return this.container().make(Encrypter2).getKey();
   }
   /** The request body, read from the raw JSON when the request has it, so TrimStrings can't alter typed values. */
   payload(request) {
@@ -1147,9 +1676,9 @@ var LiveComponentManager = class {
     } catch {
       throw new InvalidLiveRequestError("The Live update request body is not valid JSON.");
     }
-    const components = isRecord(body) ? body.components : void 0;
+    const components = isRecord2(body) ? body.components : void 0;
     const valid = Array.isArray(components) && components.every(
-      (component) => isRecord(component) && typeof component.snapshot === "string" && isRecord(component.updates) && Array.isArray(component.calls) && component.calls.every((call) => isRecord(call) && typeof call.method === "string" && Array.isArray(call.params))
+      (component) => isRecord2(component) && typeof component.snapshot === "string" && isRecord2(component.updates) && Array.isArray(component.calls) && component.calls.every((call) => isRecord2(call) && typeof call.method === "string" && Array.isArray(call.params))
     );
     if (!valid) throw new InvalidLiveRequestError("The Live update request body is malformed.");
     return body;
@@ -1168,10 +1697,10 @@ var LiveComponentManager = class {
   async applyUpdate(instance, path, value) {
     if (!isUpdatable(instance, path)) throw new PropertyNotUpdatableError(path, stateOf(instance).name);
     const [root, ...rest] = path.split(".");
-    const key = rest.length > 0 ? rest.join(".") : void 0;
-    const studly = Str2.studly(root);
+    const key2 = rest.length > 0 ? rest.join(".") : void 0;
+    const studly = Str4.studly(root);
     await hook2(instance, "updating", path, value);
-    await hook2(instance, `updating${studly}`, value, key);
+    await hook2(instance, `updating${studly}`, value, key2);
     const target = instance;
     if (rest.length === 0) target[root] = value;
     else {
@@ -1179,20 +1708,20 @@ var LiveComponentManager = class {
         if (Array.isArray(node2) && !isArraySlot(node2, segment)) throw new PropertyNotUpdatableError(path, stateOf(instance).name);
       };
       let node = target[root];
-      if (!isRecord(node) && !Array.isArray(node)) target[root] = node = {};
+      if (!isRecord2(node) && !Array.isArray(node)) target[root] = node = {};
       for (const segment of rest.slice(0, -1)) {
         assertSlot(node, segment);
         const next = node[segment];
-        node = isRecord(next) || Array.isArray(next) ? next : node[segment] = {};
+        node = isRecord2(next) || Array.isArray(next) ? next : node[segment] = {};
       }
       const last = rest.at(-1);
       assertSlot(node, last);
       Object.defineProperty(node, last, { value, enumerable: true, writable: true, configurable: true });
     }
     await hook2(instance, "updated", path, value);
-    await hook2(instance, `updated${studly}`, value, key);
+    await hook2(instance, `updated${studly}`, value, key2);
   }
-  /** Runs one call from the browser: a magic action, an event, or a public method. Returns its return value. */
+  /** Runs one call from the browser: a magic action, an event, an upload call, or a public method. Returns its return value. */
   async call(instance, method, params) {
     const name = stateOf(instance).name;
     switch (method) {
@@ -1202,7 +1731,7 @@ var LiveComponentManager = class {
         return this.applyUpdate(instance, String(params[0]), params[1]);
       case "$toggle": {
         const path = String(params[0]);
-        const current = path.split(".").reduce((node, segment) => isRecord(node) || Array.isArray(node) ? node[segment] : void 0, instance);
+        const current = path.split(".").reduce((node, segment) => isRecord2(node) || Array.isArray(node) ? node[segment] : void 0, instance);
         return this.applyUpdate(instance, path, !current);
       }
       case "__dispatch": {
@@ -1210,11 +1739,12 @@ var LiveComponentManager = class {
         const listeners = listenersOf(instance.constructor);
         for (const listener of Object.hasOwn(listeners, String(event)) ? listeners[String(event)] : []) {
           if (!isCallable(instance, listener)) throw new MethodNotCallableError(listener, name);
-          await instance[listener](isRecord(detail) ? detail : {});
+          await instance[listener](isRecord2(detail) ? detail : {});
         }
         return void 0;
       }
     }
+    if (UPLOAD_CALLS.has(method)) return runUploadCall(instance, method, params, (path, value) => this.applyUpdate(instance, path, value));
     if (!isCallable(instance, method)) throw new MethodNotCallableError(method, name);
     return instance[method](...params);
   }
@@ -1230,7 +1760,7 @@ var LiveComponentManager = class {
       context,
       () => renderPaginated(instance, this.pageUrl(memo.path), async () => {
         const output = await instance.render();
-        return typeof output === "string" ? output : this.container().make(ViewFactory).renderToString(output);
+        return typeof output === "string" ? output : this.container().make(ViewFactory2).renderToString(output);
       })
     );
     await hook2(instance, "rendered", html);
@@ -1275,16 +1805,16 @@ var LiveComponentManager = class {
 };
 
 // LiveServiceProvider.ts
-import { ConfigRepository as ConfigRepository3, ConsoleKernel, HttpRequest as HttpRequest2, LiveManager as LiveManager4, PaginationState, Router as Router2 } from "@orieljs/contracts";
-import { inject as inject4 } from "@orieljs/container";
+import { ConfigRepository as ConfigRepository6, ConsoleKernel, HttpRequest as HttpRequest2, LiveManager as LiveManager4, PaginationState, Router as Router2 } from "@orieljs/contracts";
+import { inject as inject6 } from "@orieljs/container";
 import { ServiceProvider } from "@orieljs/support";
 
 // commands.ts
 import { existsSync as existsSync2 } from "fs";
 import { mkdir, writeFile } from "fs/promises";
 import { dirname, join as join2, relative as relative2, sep as sep2 } from "path";
-import { ConfigRepository as ConfigRepository2 } from "@orieljs/contracts";
-import { Str as Str3 } from "@orieljs/support";
+import { ConfigRepository as ConfigRepository5 } from "@orieljs/contracts";
+import { Str as Str5 } from "@orieljs/support";
 var COMPONENT_STUB = `import { Component } from '@orieljs/framework'
 
 export default class {{ class }} extends Component {
@@ -1312,13 +1842,13 @@ function importPath(from, to) {
 }
 function registerLiveCommands(kernel, app) {
   kernel.command("make:live {name : The component name, e.g. Posts/CreatePost} {--test : Also create a test} {--force : Overwrite existing files}", async function() {
-    const segments = String(this.argument("name") ?? "").split(/[/\\.]+/).filter((segment) => segment !== "").map((segment) => Str3.studly(segment));
+    const segments = String(this.argument("name") ?? "").split(/[/\\.]+/).filter((segment) => segment !== "").map((segment) => Str5.studly(segment));
     if (segments.length === 0 || !segments.every((segment) => CLASS_NAME.test(segment))) {
       this.error(`Component name [${String(this.argument("name"))}] is not valid: use names like Posts/CreatePost.`);
       return 1;
     }
     const className = segments.at(-1);
-    const config = app.bound(ConfigRepository2) ? app.make(ConfigRepository2) : void 0;
+    const config = app.bound(ConfigRepository5) ? app.make(ConfigRepository5) : void 0;
     const directory = config?.get("live.class_path") ?? app.appPath("Live");
     const file = join2(directory, ...segments.slice(0, -1), `${className}.tsx`);
     const force = this.option("force") === true;
@@ -1335,7 +1865,7 @@ function registerLiveCommands(kernel, app) {
         this.error(`Test [${relative2(app.basePath(), testFile)}] already exists.`);
         return 1;
       }
-      const name = segments.map((segment) => Str3.kebab(segment)).join(".");
+      const name = segments.map((segment) => Str5.kebab(segment)).join(".");
       const test = TEST_STUB.replaceAll("{{ class }}", () => className).replace("{{ component }}", () => importPath(testFile, file)).replace("{{ testCase }}", () => importPath(testFile, app.basePath(join2("tests", "TestCase.ts")))).replace("{{ name }}", () => name);
       await mkdir(dirname(testFile), { recursive: true });
       await writeFile(testFile, test);
@@ -1351,16 +1881,19 @@ var LiveServiceProvider = class extends ServiceProvider {
   register() {
     this.mergeConfigFrom({ class_path: this.app.appPath("Live"), layout: "components.layouts.app", persistent_middleware: [...PERSISTENT_MIDDLEWARE] }, "live");
     this.app.singleton(LiveComponentManager, () => new LiveComponentManager(this.app));
-    this.app.singleton(LiveManager4, (container) => container.make(LiveComponentManager));
+    this.app.singleton(LiveManager4, (container2) => container2.make(LiveComponentManager));
     this.app.singleton(PaginationState, () => livePaginationState);
   }
   async boot() {
     const manager = this.app.make(LiveComponentManager);
     if (this.app.bound(Router2)) {
-      this.app.make(Router2).post(UPDATE_URI, () => manager.handle(inject4(HttpRequest2))).middleware("web").name("live.update");
+      const router = this.app.make(Router2);
+      router.post(UPDATE_URI, () => manager.handle(inject6(HttpRequest2))).middleware("web").name("live.update");
+      router.post(UPLOAD_URI, () => handleUpload(inject6(HttpRequest2))).middleware(uploadMiddleware()).name("live.upload-file");
+      router.get(`${PREVIEW_URI}/{filename}`, (filename) => handlePreview(inject6(HttpRequest2), filename)).middleware("web").name("live.preview-file");
     }
     if (this.app.bound(ConsoleKernel)) registerLiveCommands(this.app.make(ConsoleKernel), this.app);
-    const directory = this.app.make(ConfigRepository3).get("live.class_path", this.app.appPath("Live"));
+    const directory = this.app.make(ConfigRepository6).get("live.class_path", this.app.appPath("Live"));
     for (const [name, exported] of await this.app.run(() => discover(directory))) {
       if (isComponentClass(exported)) manager.register(exported, name);
     }
@@ -1407,7 +1940,9 @@ export {
   Computed,
   CorruptComponentPayloadError,
   ErrorBag,
+  FileNotPreviewableError,
   InvalidLiveRequestError,
+  InvalidUploadSignatureError,
   Live,
   LiveComponentManager,
   LiveComponentNotFoundError,
@@ -1417,12 +1952,19 @@ export {
   MethodNotCallableError,
   On,
   PERSISTENT_MIDDLEWARE,
+  PREVIEW_URI,
   Pagination,
   PendingEvent,
   PropertyNotUpdatableError,
+  TEMPORARY_UPLOAD_DEFAULTS,
+  TemporaryFileNotFoundError,
+  TemporaryUploadedFile,
   TestRequestScope,
   Testable,
   UPDATE_URI,
+  UPLOAD_URI,
+  UploadValidationError,
+  WithFileUploads,
   WithPagination,
   componentName,
   live,