@sealcode/jdd-editor 0.1.0

package/.arcconfig

@@ -0,0 +1,12 @@
+{
+  "phabricator.uri": "https://hub.sealcode.org/",
+  "arc.land.onto.default": "hotwire",
+  "load": [
+    "arcanist-linters",
+    "arc-unit-mocha/src"
+  ],
+  "unit.engine": "MochaEngine",
+  "unit.mocha.include": [
+    ".test/**/*.ts"
+  ]
+}

package/.arclint

@@ -0,0 +1,18 @@
+{
+  "linters": {
+      "prettier": {
+        "type": "prettier",
+        "bin": "./node_modules/.bin/prettier",
+        "include": [
+          "(src/.*\\.[tj]s$)"
+        ]
+      },
+      "eslint": {
+        "type": "eslint",
+        "include": [
+          "(src/.*\\.ts$)",
+          "(src/.*\\.js$)"
+        ]
+      }
+    }
+}

package/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+	env: { node: true },
+	parser: "@typescript-eslint/parser",
+	plugins: ["@typescript-eslint", "prettier"],
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:@typescript-eslint/recommended-requiring-type-checking",
+		"plugin:prettier/recommended",
+	],
+	ignorePatterns: [".eslintrc.js", "src/**/*.test.ts", "@types/*"],
+	parserOptions: {
+		sourceType: "module",
+		ecmaFeatures: {
+			modules: true,
+		},
+		project: ["./tsconfig.json"],
+	},
+	rules: {
+		"@typescript-eslint/require-await": 0,
+		"no-await-in-loop": 2,
+	},
+	settings: { jsdoc: { mode: "typescript" } },
+	overrides: [
+		{
+			files: ["*.subtest.ts", "*.test.ts"],
+			rules: {
+				"@typescript-eslint/no-unsafe-member-access": 0,
+				"prefer-const": 0,
+				"@typescript-eslint/no-unsafe-call": 0,
+				"@typescript-eslint/no-unsafe-return": 0,
+				"@typescript-eslint/no-unsafe-assignment": 0,
+				"no-await-in-loop": 1, // sometimes it's easier to debug when requests run sequentially
+			},
+		},
+	],
+};

package/.mocharc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	require: ["ts-node/register", "source-map-support/register"],
+	recursive: true,
+	timeout: "10000",
+	spec: ["src/*.test.ts", "src/**/*.test.ts"],
+};

package/.nycrc

@@ -0,0 +1,6 @@
+{
+	"extends": "@istanbuljs/nyc-config-typescript",
+	"all": true,
+	"include": "src",
+	"exclude": ""
+}

package/.prettierrc

@@ -0,0 +1,14 @@
+{
+  useTabs: true,
+  tabWidth: 4,
+  trailingComma: "es5",
+  "overrides": [
+    {
+      "files": "*.yml",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    }
+  ]
+}

package/@types/component-preview-actions.d.ts

@@ -0,0 +1,43 @@
+import type { Registry } from "@sealcode/jdd";
+import type { JDDPageState } from "./jdd-page.js";
+import type { StatefulPageActionArgument } from "@sealcode/sealgen";
+export declare function getComponentData(state: JDDPageState, arg_path: string[], registry: Registry): {
+    component_index: number;
+    component_args: Record<string, unknown>;
+    component_name: string;
+    component: import("@sealcode/jdd").Component<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>> | null;
+    argument: import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown> | null;
+    argument_value: unknown;
+    arg_path_within_component: string[];
+};
+export declare const ComponentPreviewActions: {
+    readonly add_array_item: ({ ctx, state, args: [arg_path], page, }: StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+    readonly remove_array_item: ({ state, args: [arg_path, index_to_remove], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+    readonly move_array_item_up: ({ state, args: [arg_path, element_index], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+    readonly move_array_item_down: ({ state, args: [arg_path, element_index], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+    readonly change_component: ({ ctx, inputs, state, page, }: StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+    readonly randomize_args: ({ ctx, state, page, args: [component_index_str], }: StatefulPageActionArgument<JDDPageState, [string]>) => Promise<JDDPageState>;
+    readonly add_table_row: ({ ctx, state, page, args: [arg_path, columns, type], }: StatefulPageActionArgument<JDDPageState, [string[], number, "header" | "row" | undefined]>) => Promise<JDDPageState>;
+    readonly add_table_column: ({ ctx, state, page, args: [arg_path], }: StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+    readonly remove_table_column: ({ state, args: [arg_path, column_index_to_remove], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+    readonly remove_table_row: ({ state, args: [arg_path, row_index], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+    readonly move_table_column_right: ({ state, page, args: [arg_path, column_index], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+    readonly move_table_row_down: ({ state, page, args: [arg_path, row_index], }: StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+    readonly change_size: ({ state, inputs, }: StatefulPageActionArgument<JDDPageState>) => {
+        preview_size: string | undefined;
+        components: import("@sealcode/jdd").RawJDDocument;
+        messages?: string[];
+    };
+    readonly add_component: ({ ctx, state, inputs, page, }: StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+    readonly remove_component: ({ state, args: [component_index], }: StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+    readonly move_component_up: ({ state, args: [component_index], }: StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+    readonly move_component_down: ({ state, args: [component_index], }: StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+    readonly remove_file: ({ state, args: [arg_path], }: StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+    readonly replace_state: ({ ctx, state, inputs, page, }: StatefulPageActionArgument<JDDPageState>) => Promise<{
+        preview_size: string | undefined;
+        components: {
+            component_name: string;
+            args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+        }[];
+    }>;
+};

package/@types/components.sreact.d.ts

@@ -0,0 +1,48 @@
+import type { Context } from "koa";
+import type { Templatable } from "tempstream";
+import type { Stringifiable } from "tempstream/@types/stringify.js";
+import type { JDDPageState } from "./jdd-page.js";
+import JDDPage from "./jdd-page.js";
+export declare class JDDDebugger extends JDDPage {
+    renderParameterButtons(state: JDDPageState): Stringifiable;
+    actions: {
+        readonly add_array_item: ({ ctx, state, args: [arg_path], page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_array_item: ({ state, args: [arg_path, index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_array_item_up: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly move_array_item_down: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly change_component: ({ ctx, inputs, state, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly randomize_args: ({ ctx, state, page, args: [component_index_str], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string]>) => Promise<JDDPageState>;
+        readonly add_table_row: ({ ctx, state, page, args: [arg_path, columns, type], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number, "header" | "row" | undefined]>) => Promise<JDDPageState>;
+        readonly add_table_column: ({ ctx, state, page, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_table_column: ({ state, args: [arg_path, column_index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly remove_table_row: ({ state, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_column_right: ({ state, page, args: [arg_path, column_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_row_down: ({ state, page, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly change_size: ({ state, inputs, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => {
+            preview_size: string | undefined;
+            components: import("@sealcode/jdd").RawJDDocument;
+            messages?: string[];
+        };
+        readonly add_component: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly remove_component: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<{
+            preview_size: string | undefined;
+            components: {
+                component_name: string;
+                args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+            }[];
+        }>;
+    };
+    getInitialState(ctx: Context): Promise<{
+        components: {
+            component_name: string;
+            args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+            open: boolean;
+        }[];
+    }>;
+    wrapInLayout(ctx: Context, content: Templatable, state: JDDPageState): Templatable;
+    containerSizes: string[];
+}

package/@types/controllers/autogrow-textarea.stimulus.d.ts

@@ -0,0 +1,5 @@
+import { Controller } from "stimulus";
+export default class AutogrowTextarea extends Controller<HTMLTextAreaElement> {
+    connect(): void;
+    autogrow(): void;
+}

package/@types/controllers/component-debugger.stimulus.d.ts

@@ -0,0 +1,28 @@
+import { Controller } from "stimulus";
+export default class ComponentDebugger extends Controller {
+    sizeSelectTarget: HTMLSelectElement;
+    gutterTarget: HTMLDivElement;
+    checkboxTarget: HTMLInputElement;
+    checkboxTargets: HTMLInputElement[];
+    previewTarget: HTMLDivElement;
+    componentBlockTargets: HTMLDivElement[];
+    static targets: string[];
+    id: string;
+    main_form: HTMLFormElement;
+    origin_x: number;
+    origin_width: number;
+    connect(): void;
+    update_width_display(): void;
+    resizeHandler(e: MouseEvent): void;
+    setPreviewWidth(width: number): void;
+    handleWidthDropdown(): void;
+    handleBlockHover(e: MouseEvent): void;
+    handleBlockUnhover(e: MouseEvent): void;
+    componentBlockTargetConnected(block_element: HTMLDivElement): void;
+    previewTargetConnected(preview_element: HTMLDivElement): void;
+    focusComponentBlock(index: number): void;
+    getIndex(block_element: HTMLDivElement): number;
+    labelClicked(element: MouseEvent): void;
+    getPreviewElementForComponentIndex(index: number): HTMLDialogElement;
+    scrollToComponentPreview(index: number): void;
+}

package/@types/controllers/exportable-textarea.stimulus.d.ts

@@ -0,0 +1,7 @@
+import { Controller } from "stimulus";
+export default class ExportableTextarea extends Controller<HTMLDetailsElement> {
+    connect(): void;
+    copy(e: MouseEvent): Promise<void>;
+    download(e: MouseEvent): Promise<void>;
+    import(e: MouseEvent): Promise<void>;
+}

package/@types/controllers/input-image-preview.stimulus.d.ts

@@ -0,0 +1,5 @@
+import { Controller } from "stimulus";
+export default class InputImagePreview extends Controller {
+    id: string;
+    handleChange(): void;
+}

package/@types/controllers/jdd-table-paste.stimulus.d.ts

@@ -0,0 +1,8 @@
+import { Controller } from "stimulus";
+export default class extends Controller<HTMLButtonElement> {
+    argpathValue: string;
+    static values: {
+        argpath: StringConstructor;
+    };
+    connect(): void;
+}

package/@types/controllers/json-editor.stimulus.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+export default class JSONEditor extends Controller<HTMLTextAreaElement> {
+    cm: any;
+    saving: boolean;
+    addCSS(): void;
+    addJS(js_id: string, js_path: string): Promise<void>;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+}

package/@types/controllers/markdown-textarea.stimulus.d.ts

@@ -0,0 +1,20 @@
+import { Controller } from "stimulus";
+import type { default as simplemde } from "simplemde";
+export default class MarkdownTextarea extends Controller<HTMLTextAreaElement> {
+    sm: simplemde;
+    checkboxHandler: (this: HTMLElement, ev: Event) => any;
+    resizeObserver: ResizeObserver;
+    intersectionObserver: IntersectionObserver;
+    mdeStarted: boolean;
+    addCSS(): void;
+    addJS(): Promise<void>;
+    handleResize(): void;
+    connect(): Promise<void>;
+    startMDE(): Promise<void>;
+    init(): Promise<void>;
+    isHiddenBlock(): boolean;
+    isInsideComponentBlock(): false | HTMLDivElement;
+    getCheckboxThatShowsBlock(): HTMLInputElement | null;
+    setupRefreshOnShow(): void;
+    disconnect(): void;
+}

package/@types/controllers/refresh-on-ts-changes.stimulus.d.ts

@@ -0,0 +1,6 @@
+import { Controller } from "stimulus";
+export default class RefreshOnTSChanges extends Controller {
+    socket: WebSocket;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+}

package/@types/controllers/refresh-styles.stimulus.d.ts

@@ -0,0 +1,6 @@
+import { Controller } from "stimulus";
+export default class RefreshStyles extends Controller {
+    socket: WebSocket;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+}

package/@types/controllers/submit-on-input.stimulus.d.ts

@@ -0,0 +1,7 @@
+import { Controller } from "stimulus";
+export default class SubmitOnInput extends Controller<HTMLTextAreaElement> {
+    sendValues: () => void;
+    connect(): void;
+    makePermanent(): void;
+    makeNotPermanent(): void;
+}

package/@types/controllers/toast.stimulus.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from "stimulus";
+export default class Toast extends Controller {
+    connect(): void;
+}

package/@types/edit-jdd-field.d.ts

@@ -0,0 +1,22 @@
+import type Router from "@koa/router";
+import type { Context } from "koa";
+import type { Collection, CollectionItem, FieldNames } from "sealious";
+import JDDCreator from "./jdd-creator.js";
+import type { JDDPageState } from "./jdd-page.js";
+export declare abstract class EditJDDField<C extends Collection> extends JDDCreator {
+    getID(ctx: Context): Promise<string>;
+    abstract getCollection(ctx: Context): C;
+    getItem(ctx: Context): Promise<CollectionItem<C>>;
+    abstract getJDDFieldName(): FieldNames<C["fields"]>;
+    mount(router: Router, path: string): void;
+    renderHeader(_ctx: Context, _item: CollectionItem<C>): Promise<string>;
+    renderPreParameterButtons(ctx: Context): Promise<string>;
+    renderParameterButtons(state: JDDPageState): string;
+    getInitialState(ctx: Context): Promise<{
+        components: {
+            open: boolean;
+            component_name: string;
+            args: Record<string, unknown>;
+        }[];
+    }>;
+}

package/@types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./edit-jdd-field.js";
+export * from "./components.sreact.js";

package/@types/inputs/component-input-enum.d.ts

@@ -0,0 +1,8 @@
+import type { Enum } from "@sealcode/jdd";
+export declare function ComponentInputEnum<State, S extends string, T extends Enum<S>>({ arg_path, arg, value, onchange, }: {
+    state: State;
+    arg_path: string[];
+    arg: T;
+    value: string;
+    onchange?: string;
+}): string;

package/@types/inputs/component-input-image.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "koa";
+import type { FilePointer } from "@sealcode/file-manager";
+import type { Image, JDDContext } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import type { JDDPageState } from "../jdd-page.js";
+export declare function ComponentInputImage<State extends JDDPageState>({ arg_path, arg, value, ctx, page, state, makeJDDContext, }: {
+    state: State;
+    arg_path: string[];
+    arg: Image;
+    value: FilePointer | null;
+    page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+    ctx: Context;
+    makeJDDContext: (ctx: Context) => JDDContext;
+}): JSX.Element;

package/@types/inputs/component-input-list.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext, List } from "@sealcode/jdd";
+import type { JDDPageState } from "../jdd-page.js";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+export declare function ComponentInputList<State extends JDDPageState, T extends ComponentArgument<unknown>>({ state, ctx, arg_path, arg, value, page, makeJDDContext, ...rest }: {
+    state: State;
+    ctx: Context;
+    arg_path: string[];
+    arg: List<T, any>;
+    value: T[];
+    page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+    makeJDDContext: (ctx: Context) => JDDContext;
+    makeAssetURL: (asset: string) => string;
+}): Promise<string>;

package/@types/inputs/component-input-single-reference.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "koa";
+import type { JDDContext, SingleReference } from "@sealcode/jdd";
+export declare function ComponentInputSingleReference<State, T extends SingleReference<any>>({ ctx, arg_path, arg, value, onchange, makeJDDContext, }: {
+    ctx: Context;
+    state: State;
+    arg_path: string[];
+    arg: T;
+    value: string;
+    onchange?: string;
+    makeJDDContext: (ctx: Context) => JDDContext;
+}): Promise<string>;

package/@types/inputs/component-input-structured.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext, Structured } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { JDDPageState } from "../jdd-page.js";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+export declare function ComponentInputStructured<T extends Structured<Record<string, ComponentArgument<unknown>>>>({ state, ctx, arg_path, arg, value, page, ...rest }: {
+    state: JDDPageState;
+    ctx: Context;
+    arg_path: string[];
+    arg: T;
+    value: Record<string, unknown>;
+    page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+    makeJDDContext: (ctx: Context) => JDDContext;
+    makeAssetURL: (asset: string) => string;
+}): Promise<string>;

package/@types/inputs/component-input-table.d.ts

@@ -0,0 +1,15 @@
+import type { JDDContext, Table, TableData } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { Context } from "koa";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import type { JDDPageState } from "../jdd-page.js";
+export declare function ComponentInputTable<State extends JDDPageState, CellType, HeaderType>({ state, arg_path, ctx, arg, value, page, makeJDDContext, makeAssetURL, }: {
+    state: State;
+    ctx: Context;
+    arg_path: string[];
+    arg: Table<CellType, HeaderType>;
+    value: TableData<CellType, HeaderType>;
+    page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+    makeJDDContext: (ctx: Context) => JDDContext;
+    makeAssetURL: (asset: string) => string;
+}): Promise<string>;

package/@types/inputs/component-input.d.ts

@@ -0,0 +1,16 @@
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import type { JDDPageState } from "../jdd-page.js";
+export declare const actionName = "Components";
+export declare function ComponentInput<State extends JDDPageState, T>({ ctx, state, arg_path, arg, value, page, makeJDDContext, makeAssetURL, }: {
+    state: State;
+    ctx: Context;
+    arg_path: string[];
+    arg: ComponentArgument<T>;
+    value: T;
+    page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+    makeJDDContext: (ctx: Context) => JDDContext;
+    makeAssetURL: (asset: string) => string;
+}): Promise<string>;

package/@types/inputs/print-arg-path.d.ts

@@ -0,0 +1 @@
+export declare function printArgPath(path: string[]): string;

package/@types/jdd-creator.d.ts

@@ -0,0 +1,49 @@
+import type { Context } from "koa";
+import type { JDDPageState } from "./jdd-page.js";
+import JDDPage from "./jdd-page.js";
+export default abstract class JDDCreator extends JDDPage {
+    actions: {
+        readonly add_array_item: ({ ctx, state, args: [arg_path], page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_array_item: ({ state, args: [arg_path, index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_array_item_up: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly move_array_item_down: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly change_component: ({ ctx, inputs, state, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly randomize_args: ({ ctx, state, page, args: [component_index_str], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string]>) => Promise<JDDPageState>;
+        readonly add_table_row: ({ ctx, state, page, args: [arg_path, columns, type], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number, "header" | "row" | undefined]>) => Promise<JDDPageState>;
+        readonly add_table_column: ({ ctx, state, page, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_table_column: ({ state, args: [arg_path, column_index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly remove_table_row: ({ state, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_column_right: ({ state, page, args: [arg_path, column_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_row_down: ({ state, page, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly change_size: ({ state, inputs, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => {
+            preview_size: string | undefined;
+            components: import("@sealcode/jdd").RawJDDocument;
+            messages?: string[];
+        };
+        readonly add_component: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly remove_component: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<{
+            preview_size: string | undefined;
+            components: {
+                component_name: string;
+                args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+            }[];
+        }>;
+    };
+    /**
+     * This method returns list of components allowed in JDD Editor instance.
+     * If list is empty it will allow all of the components in registry,
+     * if you overide this function you can decide on what components should
+     * available.
+     */
+    getAllowedComponents(): string[];
+    getRegistryComponents(): Record<string, import("@sealcode/jdd").Component<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>>;
+    renderParameterButtons(state: JDDPageState): string;
+    renderComponentBlock(ctx: Context, state: JDDPageState, component_data: {
+        component_name: string;
+        args: Record<string, unknown>;
+    }, component_index: number): string | Promise<string>;
+}

package/@types/jdd-page.d.ts

@@ -0,0 +1,85 @@
+import type { Readable } from "node:stream";
+import type { Component, JDDContext, RawJDDocument } from "@sealcode/jdd";
+import { Registry } from "@sealcode/jdd";
+import { StatefulPage } from "@sealcode/sealgen";
+import type { Context } from "koa";
+import type { FlatTemplatable, Templatable } from "tempstream";
+import { ComponentPreviewActions } from "./component-preview-actions.js";
+export declare const actionName = "Components";
+export type JDDPageState = {
+    components: RawJDDocument;
+    preview_size?: string;
+    messages?: string[];
+};
+export default abstract class JDDPage extends StatefulPage<JDDPageState, typeof ComponentPreviewActions> {
+    actions: {
+        readonly add_array_item: ({ ctx, state, args: [arg_path], page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_array_item: ({ state, args: [arg_path, index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_array_item_up: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly move_array_item_down: ({ state, args: [arg_path, element_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => Promise<JDDPageState>;
+        readonly change_component: ({ ctx, inputs, state, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly randomize_args: ({ ctx, state, page, args: [component_index_str], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string]>) => Promise<JDDPageState>;
+        readonly add_table_row: ({ ctx, state, page, args: [arg_path, columns, type], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number, "header" | "row" | undefined]>) => Promise<JDDPageState>;
+        readonly add_table_column: ({ ctx, state, page, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly remove_table_column: ({ state, args: [arg_path, column_index_to_remove], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly remove_table_row: ({ state, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_column_right: ({ state, page, args: [arg_path, column_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly move_table_row_down: ({ state, page, args: [arg_path, row_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[], number]>) => JDDPageState;
+        readonly change_size: ({ state, inputs, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => {
+            preview_size: string | undefined;
+            components: RawJDDocument;
+            messages?: string[];
+        };
+        readonly add_component: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, []>) => Promise<JDDPageState>;
+        readonly remove_component: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_up: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly move_component_down: ({ state, args: [component_index], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [number]>) => Promise<JDDPageState>;
+        readonly remove_file: ({ state, args: [arg_path], }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState, [string[]]>) => Promise<JDDPageState>;
+        readonly replace_state: ({ ctx, state, inputs, page, }: import("@sealcode/sealgen").StatefulPageActionArgument<JDDPageState>) => Promise<{
+            preview_size: string | undefined;
+            components: {
+                component_name: string;
+                args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+            }[];
+        }>;
+    };
+    previewSizes: string[];
+    classes: string[];
+    registry: Registry;
+    makeJDDContext: (ctx: Context) => JDDContext;
+    html: (args: unknown) => string | Promise<string> | Readable | Promise<Readable>;
+    defaultHead: (...args: unknown[]) => string | Promise<string> | Readable | Promise<Readable>;
+    makeAssetURL: (asset: string) => string;
+    constructor(args: {
+        registry: Registry;
+        makeJDDContext: (ctx: Context) => JDDContext;
+        html: (args: unknown) => string | Promise<string> | Readable | Promise<Readable>;
+        defaultHead: (...args: unknown[]) => string | Promise<string> | Readable | Promise<Readable>;
+        makeAssetURL?: (asset: string) => string;
+    });
+    getRegistryComponents(): Record<string, Component<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>>;
+    getInitialState(ctx: Context): Promise<{
+        components: {
+            component_name: string;
+            args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+        }[];
+    }>;
+    wrapInLayout(ctx: Context, content: Templatable, state: JDDPageState): Templatable;
+    preprocessOverrides(_ctx: Context, state: JDDPageState, overrides: Record<string, unknown>): Promise<{}>;
+    abstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;
+    renderComponentArgs<C extends Component>(ctx: Context, state: JDDPageState, component: C, args: Record<string, unknown>, index: number): FlatTemplatable;
+    renderComponentBlock(ctx: Context, state: JDDPageState, { component_name, args: component_args, }: {
+        component_name: string;
+        args: Record<string, unknown>;
+    }, component_index: number): import("tempstream/@types/stringify.js").Stringifiable;
+    serializeState(ctx: Context, state: JDDPageState, pretty?: boolean): Promise<string>;
+    deserializeState(ctx: Context, state_string: string): Promise<{
+        components: {
+            component_name: string;
+            args: import("@sealcode/jdd").ExtractStructuredComponentArgumentsParsed<Record<string, import("@sealcode/jdd").ComponentArgument<unknown, unknown, unknown>>>;
+        }[];
+    }>;
+    renderPreParameterButtons(_ctx: Context, _state: JDDPageState): FlatTemplatable | Promise<FlatTemplatable>;
+    renderMessages(_ctx: Context, state: JDDPageState): string;
+    render(ctx: Context, state: JDDPageState): Promise<string>;
+}

package/assets/icons/table-add-column-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="533.333" height="533.333" fill="none" viewBox="0 0 16 16"><path fill="#1f2328" fill-rule="evenodd" d="M0 16h16V0H0Zm1.5-1.5v-2h3v2zm4.5 0v-13h8.5v13zm-1.5-13v2.52h-3V1.5Zm-3 4.02h3V7.5h-3zM1.5 9h3v2h-3z" clip-rule="evenodd"/><path fill="#1F2328" fill-rule="evenodd" d="M9.5 8.5V11H11V8.5h2.5V7H11V4.5H9.5V7H7v1.5z" clip-rule="evenodd" style="fill:#009e00;fill-opacity:1"/></svg>

package/assets/icons/table-add-row-below.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="533.333" height="533.333" fill="none" viewBox="0 0 16 16"><path fill="#1f2328" fill-rule="evenodd" d="M0 0h16v16H0Zm1.5 1.5V4h3V1.5Zm4.5 0V4h4V1.5Zm5.5 0V4h3V1.5Zm3 4h-13v9h13z" clip-rule="evenodd"/><path fill="#1F2328" fill-rule="evenodd" d="M7.5 9.5V7H9v2.5h2.5V11H9v2.5H7.5V11H5V9.5Z" clip-rule="evenodd" style="fill:#009e00;fill-opacity:1"/></svg>

package/assets/icons/table-add-row-header-below.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="533.333" height="533.333" fill="none" viewBox="0 0 16 16"><path fill="#1f2328" fill-rule="evenodd" d="M0 0h16v16H0Zm1.5 1.5V4h3V1.5Zm4.5 0V4h4V1.5Zm5.5 0V4h3V1.5Zm3 4h-13v9h13z" clip-rule="evenodd"/><path fill="#1F2328" fill-rule="evenodd" d="M4.485 9.891V7.693h1.32V9.89h2.198v1.32H5.804v2.199h-1.32v-2.2H2.287V9.892Z" clip-rule="evenodd" style="fill:#009e00;fill-opacity:1;stroke-width:.879573"/><g fill="#1F2328" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.443 13.891v-2.198h1.32v2.198h2.198v1.32h-2.199v2.199h-1.32v-2.2z" style="fill:#009e00;fill-opacity:1;stroke-width:.879573" transform="translate(-3.263 -4)"/><path d="M16.759 13.899V11.7h-1.32v2.199h-2.198v1.32h2.199v2.198h1.319v-2.199Z" style="fill:#009e00;fill-opacity:1;stroke-width:.879573" transform="translate(-3.263 -4)"/></g></svg>

package/assets/icons/table-delete-column.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="566.597" height="533.333" fill="none" viewBox="0 0 16.998 16"><path fill="#1f2328" fill-rule="evenodd" d="M16 12v4H0V0h16v4h-1.5V1.5H11v13h3.5V12Zm-14.5.5v2h3v-2zm4.5 0v2h3.5v-2zm3.5-8.48V1.5H6v2.52zm-5 0V1.5h-3v2.52zm0 1.5h-3V7.5h3zM4.5 9h-3v2h3zM6 9v2h3.5V9Zm0-1.5h3.5V5.52H6z" clip-rule="evenodd"/><path fill="#1F2328" fill-rule="evenodd" d="m14.718 9.06 1.22 1.22 1.06-1.06L15.778 8l1.22-1.22-1.06-1.06-1.22 1.22-1.22-1.22-1.06 1.06L13.656 8l-1.22 1.22 1.06 1.06z" clip-rule="evenodd" style="fill:red;fill-opacity:1"/></svg>

package/assets/icons/table-delete-row.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="533.333" height="533.337" fill="none" viewBox="0 0 16 16"><path fill="#1f2328" fill-rule="evenodd" d="M16 0H0v16h4v-1.5H1.5V9h13v5.5H12V16h4zM1.5 4V1.5h3V4ZM6 4V1.5h4V4Zm5.5 0V1.5h3V4Zm0 1.5h3v2h-3Zm-7 2h-3v-2h3zm1.5 0v-2h4v2z" clip-rule="evenodd"/><path fill="#1F2328" fill-rule="evenodd" d="M8 14.78 9.22 16l1.06-1.06-1.22-1.22 1.22-1.22-1.06-1.06L8 12.66l-1.22-1.22-1.06 1.06 1.22 1.22-1.22 1.22L6.78 16Z" clip-rule="evenodd" style="fill:red;fill-opacity:1"/></svg>