@sealcode/sealgen 0.13.0 → 0.14.1

package/@types/src/forms/controls/array.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" resolution-mode="require"/>
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { Field, FieldsetOutput } from "sealious";

package/@types/src/forms/controls/derived-frame.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 /// <reference types="node" resolution-mode="require"/>
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { ParsedUrlQuery } from "querystring";

package/@types/src/forms/controls/form-control.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

package/@types/src/forms/controls/multiple-files.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 /// <reference types="node" resolution-mode="require"/>
 import Router from "@koa/router";
-import Sealious from "sealious";
+import { CollectionItem, File as SealiousFile, Field as SealiousField, Collection } from "sealious";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
@@ -10,7 +10,7 @@ import { FormControlContext } from "./form-control.js";
 export type MultipleFilesOptions = {
     label?: string;
     uploadLabel?: string;
-    getAdditionalFields: (ctx: Context, file: Sealious.File) => Promise<Record<string, unknown>>;
+    getAdditionalFields: (ctx: Context, file: SealiousFile) => Promise<Record<string, unknown>>;
 };
 export declare class MultipleFiles extends FormFieldControl {
     field: MultipleFilesField;
@@ -19,18 +19,18 @@ export declare class MultipleFiles extends FormFieldControl {
     getClassModifiers(): string[];
     mount(router: Router): void;
     deleteFileAssociation(ctx: Context, file_item_id: string): Promise<void>;
-    addFileAssociation(ctx: Context, file: Sealious.File): Promise<void>;
+    addFileAssociation(ctx: Context, file: SealiousFile): Promise<void>;
     getFrameRelativeURL(): string;
     getFrameID(): string;
     renderFrame(ctx: Context, content?: FlatTemplatable): import("stream").Readable;
     render(fctx: FormControlContext): FlatTemplatable | Promise<FlatTemplatable>;
-    getReferencingCollection(): Sealious.Collection;
-    getFileField(): Sealious.Field | null;
-    extractFileFromItem(item: Sealious.CollectionItem): Promise<Sealious.File | null>;
-    renderFileItemPreview(_fileItem: Sealious.CollectionItem, file: Sealious.File): Promise<FlatTemplatable>;
-    renderFileItem(fileItem: Sealious.CollectionItem, file: Sealious.File): Promise<FlatTemplatable>;
-    renderFileRemoveButton(fileItem: Sealious.CollectionItem): FlatTemplatable;
-    getFileItems(ctx: Context): Promise<Sealious.CollectionItem<any>[]>;
+    getReferencingCollection(): Collection;
+    getFileField(): SealiousField | null;
+    extractFileFromItem(item: CollectionItem): Promise<SealiousFile | null>;
+    renderFileItemPreview(_fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable;
+    getFileItems(ctx: Context): Promise<CollectionItem<any>[]>;
     getInputAttributes(): {
         type: string;
         name: string;

package/@types/src/forms/fields/file.d.ts

@@ -1,14 +1,14 @@
 import { Context } from "koa";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 export type FileContainer = {
-    old: Sealious.File | null;
-    new: Sealious.File | null;
+    old: SealiousFile | null;
+    new: SealiousFile | null;
 };
 export declare class File<Required extends boolean> extends FormField<Required, FileContainer> {
     parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<FileContainer>>;
-    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<Sealious.File | undefined>;
+    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<SealiousFile | undefined>;
     getEmptyValue(): {
         old: null;
         new: null;

package/@types/src/forms/form.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import { Context } from "koa";
 import Router from "@koa/router";
 import { FlatTemplatable } from "tempstream";

package/@types/src/forms/multiform.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

package/@types/src/index.d.ts

@@ -1,8 +1,8 @@
-import Sealious, { App } from "sealious";
+import { App, Context as SealiousContext } from "sealious";
 import { FormDataValue } from "./forms/form-types.js";
 declare module "koa" {
     interface BaseContext {
-        $context: Sealious.Context;
+        $context: SealiousContext;
         $app: App;
         $body: Record<string, FormDataValue>;
     }

package/@types/src/mount.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Mountable } from "./page/mountable.js";
 export declare function mount(router: Router, url: string | {

package/@types/src/page/mountable.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 export declare abstract class Mountable {

package/@types/src/page/page.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

package/@types/src/page/stateful-page.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { BaseContext } from "koa";
 import { Templatable } from "tempstream";
@@ -7,6 +7,7 @@ import { Mountable } from "./mountable.js";
 export type StatefulPageActionDescription<ActionName> = {
     action: ActionName;
     label?: string;
+    content?: string;
 } | ActionName;
 export type StateAndMetadata<State, Actions> = {
     state: State;
@@ -34,6 +35,7 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
     extractActionAndLabel<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>): {
         action: string;
         label: string;
+        content: string;
     };
     makeActionURL<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     makeActionButton<ActionName extends keyof Actions>(_state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
@@ -42,7 +44,8 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         label?: string;
     } | ActionName, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     rerender(): string;
-    preprocessRequestBody(values: Record<string, unknown>): Promise<StateAndMetadata<State, Actions>>;
+    preprocessState(values: State): Promise<State>;
+    preprocessOverrides(state: State, values: Record<string, unknown>): Promise<Record<string, unknown>>;
     extractState(ctx: BaseContext): Promise<StateAndMetadata<State, Actions>>;
     mount(router: Router, path: string): void;
 }

package/dist/forms/controls/multiple-files.js

@@ -1,4 +1,6 @@
-import Sealious from "sealious";
+import {
+  File as SealiousFile
+} from "sealious";
 import { inputWrapper } from "../../utils/input-wrapper.js";
 import { tempstream } from "tempstream";
 import { FormFieldControl } from "./form-field-control.js";
@@ -105,7 +107,7 @@ class MultipleFiles extends FormFieldControl {
     if (!sealious_field) {
       return null;
     }
-    return await Sealious.File.fromID(
+    return await SealiousFile.fromID(
       item.collection.app,
       item.get(sealious_field.name).id
     );

package/dist/forms/controls/photo.js

@@ -1,6 +1,6 @@
 import { tempstream } from "tempstream";
 import { File } from "./file.js";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 class Photo extends File {
   constructor(field, imageRouter, options) {
     super(field, options);
@@ -20,7 +20,7 @@ class Photo extends File {
     if (!id) {
       return empty_container;
     }
-    const file = await Sealious.File.fromID(ctx.$app, id);
+    const file = await SealiousFile.fromID(ctx.$app, id);
     return tempstream`<div class="${class_name}">
 			${this.imageRouter.image({
       resolutions: [100],

package/dist/forms/fields/file.js

@@ -4,19 +4,19 @@ import {
   is,
   predicates
 } from "@sealcode/ts-predicates";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormField } from "./field.js";
 class File extends FormField {
   async parse(ctx, raw_value) {
     let result;
-    if (raw_value instanceof Sealious.File || is(raw_value, predicates.object) && hasShape(
+    if (raw_value instanceof SealiousFile || is(raw_value, predicates.object) && hasShape(
       {
         filename: predicates.string,
         id: predicates.string
       },
       raw_value
     ) && raw_value.id) {
-      const file = await Sealious.File.fromID(
+      const file = await SealiousFile.fromID(
         ctx.$app,
         raw_value.id
       );
@@ -35,12 +35,12 @@ class File extends FormField {
       const old_file = hasFieldOfType(raw_value, "old", predicates.object) && hasShape(
         { id: predicates.string, filename: predicates.string },
         raw_value.old
-      ) && raw_value.old.id ? await Sealious.File.fromID(ctx.$app, raw_value.old.id) : null;
+      ) && raw_value.old.id ? await SealiousFile.fromID(ctx.$app, raw_value.old.id) : null;
       const new_file = hasFieldOfType(
         raw_value,
         "new",
         predicates.array(predicates.object)
-      ) && raw_value.new[0] instanceof Sealious.File ? raw_value.new[0] : null;
+      ) && raw_value.new[0] instanceof SealiousFile ? raw_value.new[0] : null;
       result = {
         parsable: true,
         error: null,

package/dist/mount.js

@@ -1,4 +1,4 @@
-import Sealious from "sealious";
+import { Middlewares as SealiousMiddlewares } from "sealious";
 async function handleHtmlPromise(ctx, next) {
   await next();
   if (ctx.body instanceof Promise) {
@@ -31,11 +31,11 @@ function mount(router, url, mountable, use_dummy_app = false) {
       };
       await next();
     },
-    Sealious.Middlewares.parseBody(),
+    SealiousMiddlewares.parseBody(),
     handleHtmlPromise
   ] : [
-    Sealious.Middlewares.extractContext(),
-    Sealious.Middlewares.parseBody(),
+    SealiousMiddlewares.extractContext(),
+    SealiousMiddlewares.parseBody(),
     handleHtmlPromise
   ];
   router.use(raw_url, ...args);

package/dist/page/stateful-page.js

@@ -1,4 +1,4 @@
-import { predicates, hasShape, is, hasField } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is } from "@sealcode/ts-predicates";
 import deepmerge from "deepmerge";
 import { tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
@@ -31,15 +31,17 @@ class StatefulPage extends Mountable {
 		</form>`;
   }
   extractActionAndLabel(action_description) {
-    let label, action;
+    let label, action, content;
     if (is(action_description, predicates.object)) {
       action = action_description.action.toString();
       label = action_description.label || action;
+      content = action_description.content || label;
     } else {
       action = action_description.toString();
       label = action;
+      content = label;
     }
-    return { action, label };
+    return { action, label, content };
   }
   makeActionURL(action_description, ...args) {
     const { action } = this.extractActionAndLabel(action_description);
@@ -48,15 +50,17 @@ class StatefulPage extends Mountable {
     )}`;
   }
   makeActionButton(_state, action_description, ...args) {
-    const { label } = this.extractActionAndLabel(action_description);
+    let { label, content } = this.extractActionAndLabel(action_description);
     return (
       /* HTML */
       `
-			<input
+			<button
 				type="submit"
-				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
-			/>
+				title="${label}"
+			>
+				${content}
+			</button>
 		`
     );
   }
@@ -69,7 +73,10 @@ class StatefulPage extends Mountable {
   rerender() {
     return "this.closest('form').requestSubmit()";
   }
-  async preprocessRequestBody(values) {
+  async preprocessState(values) {
+    return values;
+  }
+  async preprocessOverrides(state, values) {
     return values;
   }
   async extractState(ctx) {
@@ -85,31 +92,50 @@ class StatefulPage extends Mountable {
       console.error("Wrong data: ", ctx.$body);
       throw new Error("wrong formdata shape");
     }
-    const prepared_body = await this.preprocessRequestBody(ctx.$body);
     const inputs = Object.fromEntries(
-      Object.entries(prepared_body).filter(
+      Object.entries(ctx.$body).filter(
         ([key]) => !["action", "state", "args", "$"].includes(key)
       )
     );
-    const original_state_string = prepared_body.state;
+    const original_state_string = ctx.$body.state;
     const original_state = JSON.parse(
       typeof original_state_string == "string" ? from_base64(original_state_string) : "{}"
     );
-    const modified_state = deepmerge(
+    const $body = ctx.$body;
+    let state_overrides = $body.$ || {};
+    state_overrides = await this.preprocessOverrides(
       original_state,
-      hasField("$", prepared_body) ? prepared_body.$ : {},
-      {
-        arrayMerge: (_target, source, _options) => {
-          return source;
-        }
-      }
+      state_overrides
     );
-    if (prepared_body.action && prepared_body.action_args) {
+    let modified_state = deepmerge(original_state, state_overrides, {
+      arrayMerge: (target, source, options) => {
+        const destination = target.slice();
+        source.forEach((item, index) => {
+          if (typeof destination[index] === "undefined") {
+            destination[index] = options.cloneUnlessOtherwiseSpecified(
+              item,
+              options
+            );
+          } else if (options.isMergeableObject(item)) {
+            destination[index] = deepmerge(
+              target[index],
+              item,
+              options
+            );
+          } else if (target.indexOf(item) === -1) {
+            destination.push(item);
+          }
+        });
+        return destination;
+      }
+    });
+    modified_state = await this.preprocessState(modified_state);
+    if (ctx.$body.action && ctx.$body.action_args) {
       return {
         state: modified_state,
-        action: prepared_body.action,
+        action: ctx.$body.action,
         inputs,
-        action_args: prepared_body.action_args
+        action_args: ctx.$body.action_args
       };
     } else {
       return {
@@ -117,7 +143,7 @@ class StatefulPage extends Mountable {
         action: null,
         inputs,
         action_args: null,
-        $: hasField("$", prepared_body) ? prepared_body.$ : {}
+        $: ctx.$body.$ || {}
       };
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.13.0",
+	"version": "0.14.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -71,6 +71,6 @@
 	"peerDependencies": {
 		"koa": "^2.13.0",
 		"koa-responsive-image-router": "^0.2.6",
-		"sealious": "^0.17.50"
+		"sealious": "^0.18.1"
 	}
 }

package/src/forms/controls/multiple-files.ts

@@ -1,5 +1,10 @@
 import Router from "@koa/router";
-import Sealious from "sealious";
+import {
+	CollectionItem,
+	File as SealiousFile,
+	Field as SealiousField,
+	Collection,
+} from "sealious";
 import { Context } from "koa";
 import { inputWrapper } from "../../utils/input-wrapper.js";
 import { FlatTemplatable, tempstream } from "tempstream";
@@ -14,7 +19,7 @@ export type MultipleFilesOptions = {
 	uploadLabel?: string;
 	getAdditionalFields: (
 		ctx: Context,
-		file: Sealious.File
+		file: SealiousFile
 	) => Promise<Record<string, unknown>>;
 };
 
@@ -52,7 +57,7 @@ export class MultipleFiles extends FormFieldControl {
 		);
 
 		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-			let files = ctx.$body.files as Sealious.File | Sealious.File[];
+			let files = ctx.$body.files as SealiousFile | SealiousFile[];
 			if (!files || !is(files, predicates.object)) {
 				ctx.body = "Missing files";
 				return;
@@ -64,7 +69,7 @@ export class MultipleFiles extends FormFieldControl {
 				files.map((file) =>
 					this.addFileAssociation(
 						ctx,
-						file as unknown as Sealious.File
+						file as unknown as SealiousFile
 					)
 				)
 			);
@@ -81,7 +86,7 @@ export class MultipleFiles extends FormFieldControl {
 		].removeByID(ctx.$context, file_item_id);
 	}
 
-	async addFileAssociation(ctx: Context, file: Sealious.File) {
+	async addFileAssociation(ctx: Context, file: SealiousFile) {
 		const file_field = this.getFileField();
 		if (!file_field) {
 			throw new Error("No file field in referencing collection");
@@ -130,7 +135,7 @@ export class MultipleFiles extends FormFieldControl {
 		return result;
 	}
 
-	getFileField(): Sealious.Field | null {
+	getFileField(): SealiousField | null {
 		for (const [_, field] of Object.entries(
 			this.getReferencingCollection().fields
 		)) {
@@ -142,28 +147,28 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	async extractFileFromItem(
-		item: Sealious.CollectionItem
-	): Promise<Sealious.File | null> {
+		item: CollectionItem
+	): Promise<SealiousFile | null> {
 		const sealious_field = this.getFileField();
 		if (!sealious_field) {
 			return null;
 		}
-		return await Sealious.File.fromID(
-			(item.collection as Sealious.Collection).app,
+		return await SealiousFile.fromID(
+			(item.collection as Collection).app,
 			item.get(sealious_field.name).id
 		);
 	}
 
 	async renderFileItemPreview(
-		_fileItem: Sealious.CollectionItem,
-		file: Sealious.File
+		_fileItem: CollectionItem,
+		file: SealiousFile
 	): Promise<FlatTemplatable> {
 		return file.filename || "no filename";
 	}
 
 	async renderFileItem(
-		fileItem: Sealious.CollectionItem,
-		file: Sealious.File
+		fileItem: CollectionItem,
+		file: SealiousFile
 	): Promise<FlatTemplatable> {
 		return tempstream/* HTML */ `<li class="file-list-item">
 			<a
@@ -177,7 +182,7 @@ export class MultipleFiles extends FormFieldControl {
 		</li>`;
 	}
 
-	renderFileRemoveButton(fileItem: Sealious.CollectionItem): FlatTemplatable {
+	renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable {
 		return /* HTML */ ` <form
 			data-turbo-frame="${this.getFrameID()}"
 			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
@@ -221,10 +226,7 @@ export class MultipleFiles extends FormFieldControl {
 						await this.extractFileFromItem(item),
 					])
 			)
-		).filter(([_, f]) => f !== null) as [
-			Sealious.CollectionItem,
-			Sealious.File
-		][];
+		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
 
 		return inputWrapper(
 			["multiple-files", this.field.name, ...this.getClassModifiers()],

package/src/forms/controls/photo.ts

@@ -1,7 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { File } from "./file.js";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
@@ -34,7 +34,7 @@ export class Photo extends File {
 		if (!id) {
 			return empty_container;
 		}
-		const file = await Sealious.File.fromID(ctx.$app, id);
+		const file = await SealiousFile.fromID(ctx.$app, id);
 		return tempstream/* HTML */ `<div class="${class_name}">
 			${this.imageRouter.image({
 				resolutions: [100],

package/src/forms/fields/file.ts

@@ -5,13 +5,13 @@ import {
 	predicates,
 } from "@sealcode/ts-predicates";
 import { Context } from "koa";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 
 export type FileContainer = {
-	old: Sealious.File | null;
-	new: Sealious.File | null;
+	old: SealiousFile | null;
+	new: SealiousFile | null;
 };
 
 export class File<Required extends boolean> extends FormField<
@@ -24,7 +24,7 @@ export class File<Required extends boolean> extends FormField<
 	): Promise<FieldParseResult<FileContainer>> {
 		let result;
 		if (
-			raw_value instanceof Sealious.File ||
+			raw_value instanceof SealiousFile ||
 			(is(raw_value, predicates.object) &&
 				hasShape(
 					{
@@ -35,7 +35,7 @@ export class File<Required extends boolean> extends FormField<
 				) &&
 				raw_value.id)
 		) {
-			const file = await Sealious.File.fromID(
+			const file = await SealiousFile.fromID(
 				ctx.$app,
 				raw_value.id as string
 			);
@@ -58,14 +58,14 @@ export class File<Required extends boolean> extends FormField<
 					raw_value.old
 				) &&
 				raw_value.old.id
-					? await Sealious.File.fromID(ctx.$app, raw_value.old.id)
+					? await SealiousFile.fromID(ctx.$app, raw_value.old.id)
 					: null;
 			const new_file =
 				hasFieldOfType(
 					raw_value,
 					"new",
 					predicates.array(predicates.object)
-				) && raw_value.new[0] instanceof Sealious.File
+				) && raw_value.new[0] instanceof SealiousFile
 					? raw_value.new[0]
 					: null;
 			result = {

package/src/index.ts

@@ -1,9 +1,9 @@
-import Sealious, { App } from "sealious";
+import { App, Context as SealiousContext } from "sealious";
 import { FormDataValue } from "./forms/form-types.js";
 
 declare module "koa" {
 	interface BaseContext {
-		$context: Sealious.Context;
+		$context: SealiousContext;
 		$app: App;
 		$body: Record<string, FormDataValue>;
 	}

package/src/mount.ts

@@ -1,6 +1,6 @@
 import Router from "@koa/router";
 import Koa, { BaseContext, Context } from "koa";
-import Sealious from "sealious";
+import { Middlewares as SealiousMiddlewares } from "sealious";
 import { Mountable } from "./page/mountable.js";
 
 async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
@@ -48,12 +48,12 @@ export function mount(
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 					await next();
 				},
-				Sealious.Middlewares.parseBody(),
+				SealiousMiddlewares.parseBody(),
 				handleHtmlPromise,
 		  ]
 		: [
-				Sealious.Middlewares.extractContext(),
-				Sealious.Middlewares.parseBody(),
+				SealiousMiddlewares.extractContext(),
+				SealiousMiddlewares.parseBody(),
 				handleHtmlPromise,
 		  ];
 

package/src/page/stateful-page.ts

@@ -11,6 +11,7 @@ export type StatefulPageActionDescription<ActionName> =
 	| {
 			action: ActionName;
 			label?: string;
+			content?: string;
 	  }
 	| ActionName;
 
@@ -85,16 +86,18 @@ export abstract class StatefulPage<
 
 	extractActionAndLabel<ActionName extends keyof Actions>(
 		action_description: StatefulPageActionDescription<ActionName>
-	): { action: string; label: string } {
-		let label, action: string;
+	): { action: string; label: string; content: string } {
+		let label, action, content: string;
 		if (is(action_description, predicates.object)) {
 			action = action_description.action.toString();
 			label = action_description.label || action;
+			content = action_description.content || label;
 		} else {
 			action = action_description.toString();
 			label = action;
+			content = label;
 		}
-		return { action, label };
+		return { action, label, content };
 	}
 
 	makeActionURL<ActionName extends keyof Actions>(
@@ -112,13 +115,15 @@ export abstract class StatefulPage<
 		action_description: StatefulPageActionDescription<ActionName>,
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
-		const { label } = this.extractActionAndLabel(action_description);
+		let { label, content } = this.extractActionAndLabel(action_description);
 		return /* HTML */ `
-			<input
+			<button
 				type="submit"
-				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
-			/>
+				title="${label}"
+			>
+				${content}
+			</button>
 		`;
 	}
 
@@ -141,10 +146,15 @@ export abstract class StatefulPage<
 		return "this.closest('form').requestSubmit()";
 	}
 
-	async preprocessRequestBody(
+	async preprocessState(values: State): Promise<State> {
+		return values;
+	}
+
+	async preprocessOverrides(
+		state: State,
 		values: Record<string, unknown>
-	): Promise<StateAndMetadata<State, Actions>> {
-		return values as StateAndMetadata<State, Actions>;
+	): Promise<Record<string, unknown>> {
+		return values;
 	}
 
 	async extractState(
@@ -164,43 +174,66 @@ export abstract class StatefulPage<
 			console.error("Wrong data: ", ctx.$body);
 			throw new Error("wrong formdata shape");
 		}
-		// giving extending classes a change to modify body before furhter processing
-		const prepared_body = await this.preprocessRequestBody(ctx.$body);
+
 		const inputs = Object.fromEntries(
-			Object.entries(prepared_body).filter(
+			Object.entries(ctx.$body).filter(
 				([key]) => !["action", "state", "args", "$"].includes(key)
 			)
 		) as Record<string, string>;
 		// the "$" key is parsed as dot notation and overrides the state
 
-		const original_state_string = prepared_body.state;
+		const original_state_string = ctx.$body.state;
 		const original_state = JSON.parse(
 			typeof original_state_string == "string"
 				? from_base64(original_state_string)
 				: "{}"
 		);
 
-		const modified_state = deepmerge(
+		const $body = ctx.$body;
+		let state_overrides = $body.$ || {};
+		state_overrides = await this.preprocessOverrides(
 			original_state,
-			hasField("$", prepared_body) ? prepared_body.$ : {},
-			{
-				arrayMerge: (
-					_target: any[],
-					source: any[],
-					_options: ArrayMergeOptions
-				) => {
-					// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
-					return source;
-				},
-			}
-		) as State;
+			state_overrides
+		);
+		let modified_state = deepmerge(original_state, state_overrides, {
+			arrayMerge: (
+				target: any[],
+				source: any[],
+				options: ArrayMergeOptions
+			) => {
+				// https://github.com/TehShrike/deepmerge?tab=readme-ov-file#arraymerge-example-combine-arrays
+				const destination = target.slice();
+
+				source.forEach((item, index) => {
+					if (typeof destination[index] === "undefined") {
+						destination[index] =
+							options.cloneUnlessOtherwiseSpecified(
+								item,
+								options
+							);
+					} else if (options.isMergeableObject(item)) {
+						destination[index] = deepmerge(
+							target[index],
+							item,
+							options
+						);
+					} else if (target.indexOf(item) === -1) {
+						destination.push(item);
+					}
+				});
+				return destination;
+			},
+		}) as State;
+
+		// giving extending classes a change to modify the state before furhter processing
+		modified_state = await this.preprocessState(modified_state);
 
-		if (prepared_body.action && prepared_body.action_args) {
+		if (ctx.$body.action && ctx.$body.action_args) {
 			return {
 				state: modified_state,
-				action: prepared_body.action as string,
+				action: ctx.$body.action as string,
 				inputs,
-				action_args: prepared_body.action_args,
+				action_args: ctx.$body.action_args,
 			};
 		} else {
 			return {
@@ -208,7 +241,7 @@ export abstract class StatefulPage<
 				action: null,
 				inputs,
 				action_args: null,
-				$: hasField("$", prepared_body) ? prepared_body.$ : {},
+				$: ctx.$body.$ || {},
 			};
 		}
 	}