@sealcode/jdd-editor 0.2.9 → 0.2.11

package/dist/src/inputs/component-input-boolean.js

@@ -0,0 +1,31 @@
+import { printArgPath } from "./print-arg-path.js";
+function ComponentCheckbox({
+  arg_path,
+  value,
+  onchange
+}) {
+  const if_checked = value ? "checked" : "";
+  return `<div
+		id=${`component-input-boolean-${arg_path.join("-")}`}
+	>
+		<label>
+			${arg_path.at(-1) || ""}
+			${""}
+			<input
+				type="hidden"
+				name="${`$${printArgPath(arg_path)}`}"
+				value="false"
+			/>
+			<input
+				type="checkbox"
+				name="${`$${printArgPath(arg_path)}`}"
+				onchange="${onchange || ""}"
+				${if_checked}
+			/>
+		</label>
+	</div>`;
+}
+export {
+  ComponentCheckbox
+};
+//# sourceMappingURL=component-input-boolean.js.map

package/dist/src/inputs/component-input-boolean.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-boolean.ts"],
+  "sourcesContent": ["import type { Boolean as BooleanArgument } from \"@sealcode/jdd\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport function ComponentCheckbox({\n\targ_path,\n\tvalue,\n\tonchange,\n}: {\n\targ_path: string[];\n\targ: BooleanArgument;\n\tvalue: boolean;\n\tonchange?: string;\n}) {\n\tconst if_checked = value ? \"checked\" : \"\";\n\treturn /* HTML */ `<div\n\t\tid=${`component-input-boolean-${arg_path.join(\"-\")}`}\n\t>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${\n\t\t\t\t/*  JDD sends the values of the fields from the form and then they are merged with the previous state of the form.\n\t\t     HTML does not send any value for a checkbox that is unchecked \u2014 so we don't get a chance to parse it.\n\t\t     To overcome it, we always add a hidden input that sets the value to \"false\"\n\t\t     if the checkbox is unchecked, then only the \"false\" value gets sent\n\t\t     if the checkbox is checked, then two values are sent under the same name, and the value is parsed as an array:\n\t\t     [\"false\", \"on\"]\n\t\t */ \"\"\n\t\t\t}\n\t\t\t<input\n\t\t\t\ttype=\"hidden\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"false\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tonchange=\"${onchange || \"\"}\"\n\t\t\t\t${if_checked}\n\t\t\t/>\n\t\t</label>\n\t</div>`;\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAEtB,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,aAAa,QAAQ,YAAY;AACvC,SAAkB;AAAA,OACZ,2BAA2B,SAAS,KAAK,GAAG;AAAA;AAAA;AAAA,KAG9C,SAAS,GAAG,EAAE,KAAK;AAAA,KAQlB;AAAA;AAAA;AAAA,YAIM,IAAI,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzB,IAAI,aAAa,QAAQ;AAAA,gBACrB,YAAY;AAAA,MACtB;AAAA;AAAA;AAAA;AAIN;",
+  "names": []
+}

package/dist/src/inputs/component-input.js

@@ -13,6 +13,7 @@ import {
 import { is, predicates } from "@sealcode/ts-predicates";
 import { htmlEscape } from "escape-goat";
 import { tempstream } from "tempstream";
+import { ComponentCheckbox } from "./component-input-boolean.js";
 import { ComponentInputCode } from "./component-input-code.js";
 import { ComponentInputColor } from "./component-input-color.js";
 import { ComponentInputEnum } from "./component-input-enum.js";
@@ -61,6 +62,9 @@ async function ComponentInput({
       makeAssetURL
     });
   }
+  if (arg instanceof ComponentArguments.Boolean) {
+    return ComponentCheckbox({ arg_path, arg, value });
+  }
   const argType = arg.getTypeName();
   const isUrlAbsolute = arg instanceof ComponentArguments.URL && arg.urlType === "absolute";
   const inputType = isUrlAbsolute ? "url" : "text";

package/dist/src/inputs/component-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/component-input.ts"],
-  "sourcesContent": ["import type { FilePointer } from \"@sealcode/file-manager\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport {\n\tCode,\n\tColor,\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tNestedComponent,\n\tSingleReference,\n\tStructured,\n\tTable,\n} from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { htmlEscape } from \"escape-goat\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport { printArgPath } from \"./print-arg-path.js\";\nexport const actionName = \"Components\";\nconst absoluteUrlPattern = \"http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)\";\n\nexport async function ComponentInput<State extends JDDPageState, T>({\n\tctx,\n\tstate,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: ComponentArgument<T>;\n\tvalue: T;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (value === undefined) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\tif (arg instanceof Color) {\n\t\treturn ComponentInputColor({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tpage,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\tif (arg instanceof List) {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn ComponentInputList({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as T[],\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst argType = arg.getTypeName();\n\tconst isUrlAbsolute =\n\t\targ instanceof ComponentArguments.URL && arg.urlType === \"absolute\";\n\tconst inputType = isUrlAbsolute ? \"url\" : \"text\";\n\n\tif (arg instanceof Structured || arg instanceof NestedComponent) {\n\t\treturn ComponentInputStructured({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as Record<string, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof SingleReference) {\n\t\treturn ComponentInputSingleReference({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Enum) {\n\t\treturn ComponentInputEnum({\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tjdd_context: makeJDDContext(ctx),\n\t\t});\n\t}\n\n\tif (arg instanceof Image) {\n\t\treturn ComponentInputImage({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as FilePointer,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Table) {\n\t\treturn ComponentInputTable({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as TableData<unknown, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof Code) {\n\t\treturn ComponentInputCode({\n\t\t\tlanguage: arg.language,\n\t\t\tvalue: is(value, predicates.string) ? value : \"\",\n\t\t\targ_path,\n\t\t});\n\t}\n\n\tconst inputElement = () => {\n\t\tif (arg instanceof ComponentArguments.Number) {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"number\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${htmlEscape((value || \"\").toString())}\"\n\t\t\t\tmin=\"${arg.min || \"\"}\"\n\t\t\t\tmax=\"${arg.max || \"\"}\"\n\t\t\t\tstep=\"${arg.step || \"\"}\"\n\t\t\t/>`;\n\t\t} else if (arg instanceof ComponentArguments.URL) {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"${isUrlAbsolute ? \"url\" : \"text\"}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${htmlEscape((value || \"\").toString())}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t} else {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"${inputType}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${is(value, predicates.string) ? htmlEscape(value) : \"\"}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t}\n\t};\n\n\treturn /* HTML */ `<div>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${argType == \"markdown\"\n\t\t\t\t? /* HTML */ `<div class=\"grow-wrap\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\t\tonblur=\"${page.rerender()}\"\n\t\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\t\tdata-controller=\"markdown-textarea submit-on-input\"\n\t\t\t\t\t\t\tdata-action=\"autogrow-textarea#autogrow blur->autogrow-textarea#autogrow resize->autogrow-textarea#autogrow submit-on-input#sendValues focus->submit-on-input#makePermanent blur->submit-on-input#makeNotPermanent\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}</textarea\n\t\t\t\t\t\t>\n\t\t\t\t\t</div>`\n\t\t\t\t: await inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { FilePointer } from \"@sealcode/file-manager\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport {\n\tCode,\n\tColor,\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tNestedComponent,\n\tSingleReference,\n\tStructured,\n\tTable,\n} from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { htmlEscape } from \"escape-goat\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentCheckbox } from \"./component-input-boolean.js\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport const actionName = \"Components\";\nconst absoluteUrlPattern = \"http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)\";\n\nexport async function ComponentInput<State extends JDDPageState, T>({\n\tctx,\n\tstate,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: ComponentArgument<T>;\n\tvalue: T;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (value === undefined) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\tif (arg instanceof Color) {\n\t\treturn ComponentInputColor({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tpage,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\tif (arg instanceof List) {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn ComponentInputList({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as T[],\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof ComponentArguments.Boolean) {\n\t\treturn ComponentCheckbox({ arg_path, arg, value: value as boolean });\n\t}\n\n\tconst argType = arg.getTypeName();\n\tconst isUrlAbsolute =\n\t\targ instanceof ComponentArguments.URL && arg.urlType === \"absolute\";\n\tconst inputType = isUrlAbsolute ? \"url\" : \"text\";\n\n\tif (arg instanceof Structured || arg instanceof NestedComponent) {\n\t\treturn ComponentInputStructured({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as Record<string, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof SingleReference) {\n\t\treturn ComponentInputSingleReference({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Enum) {\n\t\treturn ComponentInputEnum({\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tjdd_context: makeJDDContext(ctx),\n\t\t});\n\t}\n\n\tif (arg instanceof Image) {\n\t\treturn ComponentInputImage({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as FilePointer,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Table) {\n\t\treturn ComponentInputTable({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as TableData<unknown, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof Code) {\n\t\treturn ComponentInputCode({\n\t\t\tlanguage: arg.language,\n\t\t\tvalue: is(value, predicates.string) ? value : \"\",\n\t\t\targ_path,\n\t\t});\n\t}\n\n\tconst inputElement = () => {\n\t\tif (arg instanceof ComponentArguments.Number) {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"number\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${htmlEscape((value || \"\").toString())}\"\n\t\t\t\tmin=\"${arg.min || \"\"}\"\n\t\t\t\tmax=\"${arg.max || \"\"}\"\n\t\t\t\tstep=\"${arg.step || \"\"}\"\n\t\t\t/>`;\n\t\t} else if (arg instanceof ComponentArguments.URL) {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"${isUrlAbsolute ? \"url\" : \"text\"}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${htmlEscape((value || \"\").toString())}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t} else {\n\t\t\treturn tempstream /* HTML */ ` <input\n\t\t\t\ttype=\"${inputType}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${is(value, predicates.string) ? htmlEscape(value) : \"\"}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t}\n\t};\n\n\treturn /* HTML */ `<div>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${argType == \"markdown\"\n\t\t\t\t? /* HTML */ `<div class=\"grow-wrap\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\t\tonblur=\"${page.rerender()}\"\n\t\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\t\tdata-controller=\"markdown-textarea submit-on-input\"\n\t\t\t\t\t\t\tdata-action=\"autogrow-textarea#autogrow blur->autogrow-textarea#autogrow resize->autogrow-textarea#autogrow submit-on-input#sendValues focus->submit-on-input#makePermanent blur->submit-on-input#makeNotPermanent\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}</textarea\n\t\t\t\t\t\t>\n\t\t\t\t\t</div>`\n\t\t\t\t: await inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
+  "mappings": "AAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,IAAI,kBAAkB;AAC/B,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAG3B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,qCAAqC;AAC9C,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAEtB,MAAM,aAAa;AAC1B,MAAM,qBAAqB;AAE3B,eAAsB,eAA8C;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GASoB;AACnB,MAAI,UAAU,QAAW;AACxB,YAAQ,MAAM,IAAI,cAAc,eAAe,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,eAAe,OAAO;AACzB,WAAO,oBAAoB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,UAAU,KAAK,SAAS;AAAA,MACxB;AAAA,IACD,CAAC;AAAA,EACF;AACA,MAAI,eAAe,MAAM;AAExB,WAAO,mBAAmB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,mBAAmB,SAAS;AAC9C,WAAO,kBAAkB,EAAE,UAAU,KAAK,MAAwB,CAAC;AAAA,EACpE;AAEA,QAAM,UAAU,IAAI,YAAY;AAChC,QAAM,gBACL,eAAe,mBAAmB,OAAO,IAAI,YAAY;AAC1D,QAAM,YAAY,gBAAgB,QAAQ;AAE1C,MAAI,eAAe,cAAc,eAAe,iBAAiB;AAChE,WAAO,yBAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,iBAAiB;AACnC,WAAO,8BAA8B;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,UAAU,KAAK,SAAS;AAAA,MACxB;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,MAAM;AACxB,WAAO,mBAAmB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,UAAU,KAAK,SAAS;AAAA,MACxB,aAAa,eAAe,GAAG;AAAA,IAChC,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,OAAO;AACzB,WAAO,oBAAoB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,OAAO;AACzB,WAAO,oBAAoB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,MAAM;AACxB,WAAO,mBAAmB;AAAA,MACzB,UAAU,IAAI;AAAA,MACd,OAAO,GAAG,OAAO,WAAW,MAAM,IAAI,QAAQ;AAAA,MAC9C;AAAA,IACD,CAAC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAC1B,QAAI,eAAe,mBAAmB,QAAQ;AAC7C,aAAO;AAAA;AAAA,YAEE,IAAI,aAAa,QAAQ;AAAA,aACxB,YAAY,SAAS,IAAI,SAAS,CAAC;AAAA,WACrC,IAAI,OAAO;AAAA,WACX,IAAI,OAAO;AAAA,YACV,IAAI,QAAQ;AAAA;AAAA,IAEtB,WAAW,eAAe,mBAAmB,KAAK;AACjD,aAAO;AAAA,YACE,gBAAgB,QAAQ;AAAA,YACxB,IAAI,aAAa,QAAQ;AAAA,aACxB,YAAY,SAAS,IAAI,SAAS,CAAC;AAAA;AAAA,MAE1C,gBAAgB,YAAY,wBAAwB;AAAA;AAAA,IAExD,OAAO;AACN,aAAO;AAAA,YACE;AAAA,YACA,IAAI,aAAa,QAAQ;AAAA,aACxB,GAAG,OAAO,WAAW,MAAM,IAAI,WAAW,KAAK,IAAI;AAAA;AAAA,MAE1D,gBAAgB,YAAY,wBAAwB;AAAA;AAAA,IAExD;AAAA,EACD;AAEA,SAAkB;AAAA;AAAA,KAEd,SAAS,GAAG,EAAE,KAAK;AAAA,KACnB,WAAW,aACC;AAAA;AAAA,eAEF,IAAI,aAAa,QAAQ;AAAA,iBACvB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7B,GAAG,OAAO,WAAW,MAAM,IAAI,QAAQ;AAAA;AAAA,eAGnC,MAAM,aAAa;AAAA;AAAA;AAGzB;",
   "names": []
 }

package/dist/src/jdd-page.js

@@ -290,7 +290,7 @@ class JDDPage extends StatefulPage {
 							class="component-preview-size-select"
 							data-component-debugger-target="sizeSelect"
 							data-action="change->component-debugger#handleWidthDropdown"
-							data-turbo-data-turbo-permanent
+							data-turbo-permanent
 						>
 							${state.preview_size ? `<option
 											class="dynamic"

package/dist/src/jdd-page.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/jdd-page.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport type { Readable } from \"node:stream\";\nimport type { Component, JDDContext, RawJDDocument } from \"@sealcode/jdd\";\nimport { documentContainerFromParsed, Registry } from \"@sealcode/jdd\";\nimport { JDD } from \"@sealcode/jdd\";\nimport { StatefulPage } from \"@sealcode/sealgen\";\nimport { hasFieldOfType, hasShape, predicates } from \"@sealcode/ts-predicates\";\nimport type { Context } from \"koa\";\nimport type { FlatTemplatable, Templatable } from \"tempstream\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./inputs/component-input.js\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n\tmessages?: string[];\n};\n\nexport default abstract class JDDPage extends StatefulPage<\n\tJDDPageState,\n\ttypeof ComponentPreviewActions\n> {\n\tactions = ComponentPreviewActions;\n\n\tpreviewSizes = [\"320\", \"600\", \"800\", \"1024\", \"1300\", \"1920\"];\n\tclasses: string[] = [];\n\n\tpublic registry: Registry;\n\tpublic makeJDDContext: (ctx: Context) => JDDContext;\n\tpublic html: (\n\t\targs: unknown\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic defaultHead: (\n\t\t...args: unknown[]\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic makeAssetURL: (asset: string) => string;\n\n\tconstructor(args: {\n\t\tregistry: Registry;\n\t\tmakeJDDContext: (ctx: Context) => JDDContext;\n\t\thtml: (\n\t\t\targs: unknown\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tdefaultHead: (\n\t\t\t...args: unknown[]\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tmakeAssetURL?: (asset: string) => string;\n\t}) {\n\t\tsuper();\n\t\tthis.registry = args.registry;\n\t\tthis.makeJDDContext = args.makeJDDContext;\n\t\tthis.defaultHead = args.defaultHead;\n\t\tthis.html = args.html;\n\t\tthis.makeAssetURL =\n\t\t\targs.makeAssetURL ||\n\t\t\t((str) =>\n\t\t\t\t`/dist/jdd-page/${str.startsWith(\"/\") ? str.slice(1) : str}`);\n\t}\n\n\tgetRegistryComponents() {\n\t\treturn this.registry.getAll();\n\t}\n\n\tasync getInitialState(ctx: Context): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\n\t\t};\n\t\treturn initial_state;\n\t}\n\n\twrapInLayout(\n\t\tctx: Context,\n\t\tcontent: Templatable,\n\t\tstate: JDDPageState\n\t): Templatable {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\n\t\t\tdocumentContainerFromParsed(state.components)\n\t\t);\n\t\treturn this.html({\n\t\t\tctx,\n\t\t\ttitle: \"Components\",\n\t\t\tbody: content,\n\t\t\tdescription: \"\",\n\t\t\tcss_clumps: [\"jdd-page\", ...jdd.getAllCSSClumps()],\n\t\t\thtmlOptions: {\n\t\t\t\tmorphing: true,\n\t\t\t\tpreserveScroll: true,\n\t\t\t\tautoRefreshCSS: false,\n\t\t\t\tnavbar: () => ``,\n\t\t\t\tbodyClasses: [\"jdd-editor\"],\n\t\t\t\tshowBottomNavbar: false,\n\t\t\t\tshowBanner: false,\n\t\t\t\tshowFooter: false,\n\t\t\t\tloadHamburgerMenu: false,\n\t\t\t\tloadSearchModal: false,\n\t\t\t},\n\t\t\tmakeHead: (...args: unknown[]) =>\n\t\t\t\ttempstream /* HTML */ `${this.defaultHead(...args)}\n\t\t\t\t\t<link\n\t\t\t\t\t\thref=\"/dist/jdd-page.entrypoint.css\"\n\t\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\t\ttype=\"text/css\"\n\t\t\t\t\t/>\n\t\t\t\t\t${jdd.renderEarlyAssets()}`,\n\t\t});\n\t}\n\n\tasync preprocessOverrides(\n\t\t_ctx: Context,\n\t\tstate: JDDPageState,\n\t\toverrides: Record<string, unknown>\n\t) {\n\t\tconst jdd_context = this.makeJDDContext(_ctx);\n\t\tif (\n\t\t\t!hasFieldOfType(\n\t\t\t\t\"components\",\n\t\t\t\toverrides,\n\t\t\t\tpredicates.array(\n\t\t\t\t\tpredicates.shape({\n\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\t\tfor (const [component_index, { component_name }] of Object.entries(\n\t\t\tstate.components\n\t\t)) {\n\t\t\tconst component = this.registry.get(component_name);\n\t\t\tif (!component) {\n\t\t\t\tthrow new Error(`Unknown component: ${component_name}`);\n\t\t\t}\n\t\t\tconst overrides_for_component = overrides.components[\n\t\t\t\tparseInt(component_index)\n\t\t\t] || { args: {} };\n\t\t\tconst promises = Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) => {\n\t\t\t\t\tconst value = overrides_for_component.args[arg_name];\n\t\t\t\t\tif (value) {\n\t\t\t\t\t\tconst new_value = await arg.receivedToParsed(\n\t\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t);\n\t\t\t\t\t\toverrides_for_component.args[arg_name] = new_value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\t// eslint-disable-next-line no-await-in-loop\n\t\t\tawait Promise.all(promises);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn overrides;\n\t}\n\n\t// eslint-disable-next-line no-unused-vars\n\tabstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;\n\n\tasync renderComponentArgs<C extends Component>(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent: C,\n\t\targs: Record<string, unknown>,\n\t\tindex: number\n\t): Promise<FlatTemplatable> {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"component-preview-parameters\"\n\t\t\tid=\"${`component-preview-parameters--${index}`}\"\n\t\t>\n\t\t\t${Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) =>\n\t\t\t\t\tComponentInput({\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\"components\",\n\t\t\t\t\t\t\tindex.toString(),\n\t\t\t\t\t\t\t\"args\",\n\t\t\t\t\t\t\targ_name,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\targ,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\targs[arg_name] === undefined ||\n\t\t\t\t\t\t\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await arg.getExampleValue(jdd_context)\n\t\t\t\t\t\t\t\t: args[arg_name],\n\t\t\t\t\t\tpage: this,\n\t\t\t\t\t\tmakeJDDContext: this.makeJDDContext,\n\t\t\t\t\t\tmakeAssetURL: this.makeAssetURL,\n\t\t\t\t\t})\n\t\t\t)}\n\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\t{\n\t\t\tcomponent_name,\n\t\t\targs: component_args,\n\t\t}: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component = this.registry.get(component_name);\n\t\tif (!component) {\n\t\t\treturn null;\n\t\t}\n\t\treturn this.renderComponentArgs(\n\t\t\tctx,\n\t\t\tstate,\n\t\t\tcomponent,\n\t\t\tcomponent_args,\n\t\t\tcomponent_index\n\t\t);\n\t}\n\n\tasync serializeState(ctx: Context, state: JDDPageState, pretty = false) {\n\t\tconst serialized_components = await Promise.all(\n\t\t\tstate.components.map(async ({ component_name, args }) => {\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tconst single_result = {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n\t\t\t\t\targs: component\n\t\t\t\t\t\t? await component.convertParsedToStorage(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\targs\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: {},\n\t\t\t\t};\n\t\t\t\treturn single_result;\n\t\t\t})\n\t\t);\n\t\tconst serialized_state = JSON.stringify(\n\t\t\t{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\treturn serialized_state;\n\t}\n\n\tasync deserializeState(ctx: Context, state_string: string) {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst raw = JSON.parse(state_string) as Record<string, unknown>;\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n\t\tconst components_storage = raw.components;\n\t\tif (!Array.isArray(components_storage)) {\n\t\t\tthrow new Error(\n\t\t\t\t\"'components' key is not an array, got ${components_storage}\"\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst components_parsed = await Promise.all(\n\t\t\tcomponents_storage.map(async (entry) => {\n\t\t\t\tif (\n\t\t\t\t\t!hasShape(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcomponent_name: predicates.string,\n\t\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tentry\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst { component_name, args } = entry;\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tif (!component) {\n\t\t\t\t\tthrow new Error(\"Unknown component: ${component_name}\");\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\targs: await component.convertStorageToParsed(\n\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\targs\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\t\tconst result = { ...raw, components: components_parsed };\n\t\treturn result;\n\t}\n\n\trenderPreParameterButtons(\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_ctx: Context,\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_state: JDDPageState\n\t): FlatTemplatable | Promise<FlatTemplatable> {\n\t\treturn \"\";\n\t}\n\n\trenderMessages(_ctx: Context, state: JDDPageState) {\n\t\treturn /* HTML */ `<ul\n\t\t\tclass=\"jdd-editor__messages\"\n\t\t\tdata-controller=\"toast\"\n\t\t>\n\t\t\t${(state.messages || []).map(\n\t\t\t\t(e) => `<li class=\"jdd-editor__message\">${e}</li>`\n\t\t\t)}\n\t\t</ul>`;\n\t}\n\n\tasync render(ctx: Context, state: JDDPageState): Promise<string> {\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"${[\"two-column\", \"component-debugger\", ...this.classes].join(\" \")}\"\n\t\t\tid=\"component-debugger\"\n\t\t\tstyle=\"${`--resizable-column-width: ${\n\t\t\t\tstate.preview_size ? state.preview_size + \"px\" : \"50vw\"\n\t\t\t}`}\"\n\t\t\tdata-controller=\"component-debugger\"\n\t\t>\n\t\t\t<div class=\"component-arguments\" id=\"component-arguments\">\n\t\t\t\t${this.renderPreParameterButtons(ctx, state)}\n\t\t\t\t${this.renderParameterButtons(state)}\n\t\t\t\t${this.renderMessages(ctx, state)}\n\t\t\t\t${state.components.map((component, component_index) =>\n\t\t\t\t\tthis.renderComponentBlock(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t\tcomponent_index\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<details\n\t\t\t\t\tclass=\"component-debugger__json\"\n\t\t\t\t\tdata-controller=\"exportable-textarea\"\n\t\t\t\t\tid=\"exportable-textarea\"\n\t\t\t\t\topen\n\t\t\t\t>\n\t\t\t\t\t<summary>Edit/Export raw JSON</summary>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tname=\"state_override\"\n\t\t\t\t\t\trows=\"40\"\n\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\tdata-controller=\"json-editor\"\n\t\t\t\t\t\tid=\"component-debugger-json-textarea\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"&lt;\")}\n\t\t\t\t\t</textarea\n\t\t\t\t\t>\n\t\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\t\taction: \"replace_state\",\n\t\t\t\t\t\tlabel: \"Apply\",\n\t\t\t\t\t})}\n\t\t\t\t\t<button data-action=\"exportable-textarea#copy\">Copy</button>\n\t\t\t\t\t<button data-action=\"exportable-textarea#download\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</button>\n\t\t\t\t\t<input type=\"file\" />${\" \"}\n\t\t\t\t\t<button data-action=\"exportable-textarea#import\">\n\t\t\t\t\t\tImport\n\t\t\t\t\t</button>\n\t\t\t\t</details>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tid=\"resize-gutter\"\n\t\t\t\tclass=\"resize-gutter\"\n\t\t\t\tdata-component-debugger-target=\"gutter\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tid=\"component-preview\"\n\t\t\t\tclass=\"component-preview\"\n\t\t\t\tdata-component-debugger-target=\"preview\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid=\"component-preview__header\"\n\t\t\t\t\tclass=\"component-preview__header\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-data-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst currentComponentPrettified =\n\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\n\t\t\t\t\t\t})()}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport type { Readable } from \"node:stream\";\nimport type { Component, JDDContext, RawJDDocument } from \"@sealcode/jdd\";\nimport { documentContainerFromParsed, Registry } from \"@sealcode/jdd\";\nimport { JDD } from \"@sealcode/jdd\";\nimport { StatefulPage } from \"@sealcode/sealgen\";\nimport { hasFieldOfType, hasShape, predicates } from \"@sealcode/ts-predicates\";\nimport type { Context } from \"koa\";\nimport type { FlatTemplatable, Templatable } from \"tempstream\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./inputs/component-input.js\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n\tmessages?: string[];\n};\n\nexport default abstract class JDDPage extends StatefulPage<\n\tJDDPageState,\n\ttypeof ComponentPreviewActions\n> {\n\tactions = ComponentPreviewActions;\n\n\tpreviewSizes = [\"320\", \"600\", \"800\", \"1024\", \"1300\", \"1920\"];\n\tclasses: string[] = [];\n\n\tpublic registry: Registry;\n\tpublic makeJDDContext: (ctx: Context) => JDDContext;\n\tpublic html: (\n\t\targs: unknown\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic defaultHead: (\n\t\t...args: unknown[]\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic makeAssetURL: (asset: string) => string;\n\n\tconstructor(args: {\n\t\tregistry: Registry;\n\t\tmakeJDDContext: (ctx: Context) => JDDContext;\n\t\thtml: (\n\t\t\targs: unknown\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tdefaultHead: (\n\t\t\t...args: unknown[]\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tmakeAssetURL?: (asset: string) => string;\n\t}) {\n\t\tsuper();\n\t\tthis.registry = args.registry;\n\t\tthis.makeJDDContext = args.makeJDDContext;\n\t\tthis.defaultHead = args.defaultHead;\n\t\tthis.html = args.html;\n\t\tthis.makeAssetURL =\n\t\t\targs.makeAssetURL ||\n\t\t\t((str) =>\n\t\t\t\t`/dist/jdd-page/${str.startsWith(\"/\") ? str.slice(1) : str}`);\n\t}\n\n\tgetRegistryComponents() {\n\t\treturn this.registry.getAll();\n\t}\n\n\tasync getInitialState(ctx: Context): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\n\t\t};\n\t\treturn initial_state;\n\t}\n\n\twrapInLayout(\n\t\tctx: Context,\n\t\tcontent: Templatable,\n\t\tstate: JDDPageState\n\t): Templatable {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\n\t\t\tdocumentContainerFromParsed(state.components)\n\t\t);\n\t\treturn this.html({\n\t\t\tctx,\n\t\t\ttitle: \"Components\",\n\t\t\tbody: content,\n\t\t\tdescription: \"\",\n\t\t\tcss_clumps: [\"jdd-page\", ...jdd.getAllCSSClumps()],\n\t\t\thtmlOptions: {\n\t\t\t\tmorphing: true,\n\t\t\t\tpreserveScroll: true,\n\t\t\t\tautoRefreshCSS: false,\n\t\t\t\tnavbar: () => ``,\n\t\t\t\tbodyClasses: [\"jdd-editor\"],\n\t\t\t\tshowBottomNavbar: false,\n\t\t\t\tshowBanner: false,\n\t\t\t\tshowFooter: false,\n\t\t\t\tloadHamburgerMenu: false,\n\t\t\t\tloadSearchModal: false,\n\t\t\t},\n\t\t\tmakeHead: (...args: unknown[]) =>\n\t\t\t\ttempstream /* HTML */ `${this.defaultHead(...args)}\n\t\t\t\t\t<link\n\t\t\t\t\t\thref=\"/dist/jdd-page.entrypoint.css\"\n\t\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\t\ttype=\"text/css\"\n\t\t\t\t\t/>\n\t\t\t\t\t${jdd.renderEarlyAssets()}`,\n\t\t});\n\t}\n\n\tasync preprocessOverrides(\n\t\t_ctx: Context,\n\t\tstate: JDDPageState,\n\t\toverrides: Record<string, unknown>\n\t) {\n\t\tconst jdd_context = this.makeJDDContext(_ctx);\n\t\tif (\n\t\t\t!hasFieldOfType(\n\t\t\t\t\"components\",\n\t\t\t\toverrides,\n\t\t\t\tpredicates.array(\n\t\t\t\t\tpredicates.shape({\n\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\t\tfor (const [component_index, { component_name }] of Object.entries(\n\t\t\tstate.components\n\t\t)) {\n\t\t\tconst component = this.registry.get(component_name);\n\t\t\tif (!component) {\n\t\t\t\tthrow new Error(`Unknown component: ${component_name}`);\n\t\t\t}\n\t\t\tconst overrides_for_component = overrides.components[\n\t\t\t\tparseInt(component_index)\n\t\t\t] || { args: {} };\n\t\t\tconst promises = Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) => {\n\t\t\t\t\tconst value = overrides_for_component.args[arg_name];\n\t\t\t\t\tif (value) {\n\t\t\t\t\t\tconst new_value = await arg.receivedToParsed(\n\t\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t);\n\t\t\t\t\t\toverrides_for_component.args[arg_name] = new_value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\t// eslint-disable-next-line no-await-in-loop\n\t\t\tawait Promise.all(promises);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn overrides;\n\t}\n\n\t// eslint-disable-next-line no-unused-vars\n\tabstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;\n\n\tasync renderComponentArgs<C extends Component>(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent: C,\n\t\targs: Record<string, unknown>,\n\t\tindex: number\n\t): Promise<FlatTemplatable> {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"component-preview-parameters\"\n\t\t\tid=\"${`component-preview-parameters--${index}`}\"\n\t\t>\n\t\t\t${Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) =>\n\t\t\t\t\tComponentInput({\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\"components\",\n\t\t\t\t\t\t\tindex.toString(),\n\t\t\t\t\t\t\t\"args\",\n\t\t\t\t\t\t\targ_name,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\targ,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\targs[arg_name] === undefined ||\n\t\t\t\t\t\t\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await arg.getExampleValue(jdd_context)\n\t\t\t\t\t\t\t\t: args[arg_name],\n\t\t\t\t\t\tpage: this,\n\t\t\t\t\t\tmakeJDDContext: this.makeJDDContext,\n\t\t\t\t\t\tmakeAssetURL: this.makeAssetURL,\n\t\t\t\t\t})\n\t\t\t)}\n\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\t{\n\t\t\tcomponent_name,\n\t\t\targs: component_args,\n\t\t}: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component = this.registry.get(component_name);\n\t\tif (!component) {\n\t\t\treturn null;\n\t\t}\n\t\treturn this.renderComponentArgs(\n\t\t\tctx,\n\t\t\tstate,\n\t\t\tcomponent,\n\t\t\tcomponent_args,\n\t\t\tcomponent_index\n\t\t);\n\t}\n\n\tasync serializeState(ctx: Context, state: JDDPageState, pretty = false) {\n\t\tconst serialized_components = await Promise.all(\n\t\t\tstate.components.map(async ({ component_name, args }) => {\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tconst single_result = {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n\t\t\t\t\targs: component\n\t\t\t\t\t\t? await component.convertParsedToStorage(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\targs\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: {},\n\t\t\t\t};\n\t\t\t\treturn single_result;\n\t\t\t})\n\t\t);\n\t\tconst serialized_state = JSON.stringify(\n\t\t\t{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\treturn serialized_state;\n\t}\n\n\tasync deserializeState(ctx: Context, state_string: string) {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst raw = JSON.parse(state_string) as Record<string, unknown>;\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n\t\tconst components_storage = raw.components;\n\t\tif (!Array.isArray(components_storage)) {\n\t\t\tthrow new Error(\n\t\t\t\t\"'components' key is not an array, got ${components_storage}\"\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst components_parsed = await Promise.all(\n\t\t\tcomponents_storage.map(async (entry) => {\n\t\t\t\tif (\n\t\t\t\t\t!hasShape(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcomponent_name: predicates.string,\n\t\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tentry\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst { component_name, args } = entry;\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tif (!component) {\n\t\t\t\t\tthrow new Error(\"Unknown component: ${component_name}\");\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\targs: await component.convertStorageToParsed(\n\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\targs\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\t\tconst result = { ...raw, components: components_parsed };\n\t\treturn result;\n\t}\n\n\trenderPreParameterButtons(\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_ctx: Context,\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_state: JDDPageState\n\t): FlatTemplatable | Promise<FlatTemplatable> {\n\t\treturn \"\";\n\t}\n\n\trenderMessages(_ctx: Context, state: JDDPageState) {\n\t\treturn /* HTML */ `<ul\n\t\t\tclass=\"jdd-editor__messages\"\n\t\t\tdata-controller=\"toast\"\n\t\t>\n\t\t\t${(state.messages || []).map(\n\t\t\t\t(e) => `<li class=\"jdd-editor__message\">${e}</li>`\n\t\t\t)}\n\t\t</ul>`;\n\t}\n\n\tasync render(ctx: Context, state: JDDPageState): Promise<string> {\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"${[\"two-column\", \"component-debugger\", ...this.classes].join(\" \")}\"\n\t\t\tid=\"component-debugger\"\n\t\t\tstyle=\"${`--resizable-column-width: ${\n\t\t\t\tstate.preview_size ? state.preview_size + \"px\" : \"50vw\"\n\t\t\t}`}\"\n\t\t\tdata-controller=\"component-debugger\"\n\t\t>\n\t\t\t<div class=\"component-arguments\" id=\"component-arguments\">\n\t\t\t\t${this.renderPreParameterButtons(ctx, state)}\n\t\t\t\t${this.renderParameterButtons(state)}\n\t\t\t\t${this.renderMessages(ctx, state)}\n\t\t\t\t${state.components.map((component, component_index) =>\n\t\t\t\t\tthis.renderComponentBlock(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t\tcomponent_index\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<details\n\t\t\t\t\tclass=\"component-debugger__json\"\n\t\t\t\t\tdata-controller=\"exportable-textarea\"\n\t\t\t\t\tid=\"exportable-textarea\"\n\t\t\t\t\topen\n\t\t\t\t>\n\t\t\t\t\t<summary>Edit/Export raw JSON</summary>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tname=\"state_override\"\n\t\t\t\t\t\trows=\"40\"\n\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\tdata-controller=\"json-editor\"\n\t\t\t\t\t\tid=\"component-debugger-json-textarea\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"&lt;\")}\n\t\t\t\t\t</textarea\n\t\t\t\t\t>\n\t\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\t\taction: \"replace_state\",\n\t\t\t\t\t\tlabel: \"Apply\",\n\t\t\t\t\t})}\n\t\t\t\t\t<button data-action=\"exportable-textarea#copy\">Copy</button>\n\t\t\t\t\t<button data-action=\"exportable-textarea#download\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</button>\n\t\t\t\t\t<input type=\"file\" />${\" \"}\n\t\t\t\t\t<button data-action=\"exportable-textarea#import\">\n\t\t\t\t\t\tImport\n\t\t\t\t\t</button>\n\t\t\t\t</details>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tid=\"resize-gutter\"\n\t\t\t\tclass=\"resize-gutter\"\n\t\t\t\tdata-component-debugger-target=\"gutter\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tid=\"component-preview\"\n\t\t\t\tclass=\"component-preview\"\n\t\t\t\tdata-component-debugger-target=\"preview\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid=\"component-preview__header\"\n\t\t\t\t\tclass=\"component-preview__header\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst currentComponentPrettified =\n\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\n\t\t\t\t\t\t})()}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
   "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.9",
+	"version": "0.2.11",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",
@@ -47,7 +47,7 @@
 	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^13.1.0",
-		"@sealcode/jdd": "^0.8.3",
+		"@sealcode/jdd": "^0.8.5",
 		"@sealcode/monaco-wrapper": "^0.0.3",
 		"@sealcode/sealcodemirror": "^5.70.0-beta5",
 		"@sealcode/sealgen": "^0.19.6",

package/src/inputs/component-input-boolean.ts

@@ -0,0 +1,42 @@
+import type { Boolean as BooleanArgument } from "@sealcode/jdd";
+import { printArgPath } from "./print-arg-path.js";
+
+export function ComponentCheckbox({
+	arg_path,
+	value,
+	onchange,
+}: {
+	arg_path: string[];
+	arg: BooleanArgument;
+	value: boolean;
+	onchange?: string;
+}) {
+	const if_checked = value ? "checked" : "";
+	return /* HTML */ `<div
+		id=${`component-input-boolean-${arg_path.join("-")}`}
+	>
+		<label>
+			${arg_path.at(-1) || ""}
+			${
+				/*  JDD sends the values of the fields from the form and then they are merged with the previous state of the form.
+		     HTML does not send any value for a checkbox that is unchecked — so we don't get a chance to parse it.
+		     To overcome it, we always add a hidden input that sets the value to "false"
+		     if the checkbox is unchecked, then only the "false" value gets sent
+		     if the checkbox is checked, then two values are sent under the same name, and the value is parsed as an array:
+		     ["false", "on"]
+		 */ ""
+			}
+			<input
+				type="hidden"
+				name="${`$${printArgPath(arg_path)}`}"
+				value="false"
+			/>
+			<input
+				type="checkbox"
+				name="${`$${printArgPath(arg_path)}`}"
+				onchange="${onchange || ""}"
+				${if_checked}
+			/>
+		</label>
+	</div>`;
+}

package/src/inputs/component-input.ts

@@ -19,6 +19,7 @@ import type { Context } from "koa";
 import { tempstream } from "tempstream";
 import type { ComponentPreviewActions } from "../component-preview-actions.js";
 import type { JDDPageState } from "../jdd-page.js";
+import { ComponentCheckbox } from "./component-input-boolean.js";
 import { ComponentInputCode } from "./component-input-code.js";
 import { ComponentInputColor } from "./component-input-color.js";
 import { ComponentInputEnum } from "./component-input-enum.js";
@@ -28,6 +29,7 @@ import { ComponentInputSingleReference } from "./component-input-single-referenc
 import { ComponentInputStructured } from "./component-input-structured.js";
 import { ComponentInputTable } from "./component-input-table.js";
 import { printArgPath } from "./print-arg-path.js";
+
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -81,6 +83,10 @@ export async function ComponentInput<State extends JDDPageState, T>({
 		});
 	}
 
+	if (arg instanceof ComponentArguments.Boolean) {
+		return ComponentCheckbox({ arg_path, arg, value: value as boolean });
+	}
+
 	const argType = arg.getTypeName();
 	const isUrlAbsolute =
 		arg instanceof ComponentArguments.URL && arg.urlType === "absolute";

package/src/jdd-page.ts

@@ -393,7 +393,7 @@ export default abstract class JDDPage extends StatefulPage<
 							class="component-preview-size-select"
 							data-component-debugger-target="sizeSelect"
 							data-action="change->component-debugger#handleWidthDropdown"
-							data-turbo-data-turbo-permanent
+							data-turbo-permanent
 						>
 							${
 								state.preview_size