@sealcode/jdd-editor 0.1.0

package/dist/src/exportable-textarea.stimulus.js

@@ -0,0 +1,71 @@
+import { Controller } from "stimulus";
+function download(data, filename, type) {
+  const file = new Blob([data], { type });
+  const a = document.createElement("a"), url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(function() {
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, 0);
+}
+class ExportableTextarea extends Controller {
+  connect() {
+    console.log("exportable", this.element);
+    this.element.removeAttribute("open");
+    this.element.addEventListener(
+      "turbo:before-morph-attribute",
+      (event) => {
+        if (event.target == this.element && event.detail.attributeName == "open") {
+          event.preventDefault();
+        }
+      }
+    );
+  }
+  async copy(e) {
+    e.preventDefault();
+    const textarea = this.element.querySelector("textarea");
+    if (!textarea) {
+      throw new Error("Couldn't find the textarea");
+    }
+    await navigator.clipboard.writeText(textarea.value);
+    e.target.textContent = "Copied";
+    await sleep(1e3);
+    e.target.textContent = "Copy";
+  }
+  async download(e) {
+    e.preventDefault();
+    const textarea = this.element.querySelector("textarea");
+    if (!textarea) {
+      throw new Error("Couldn't find the textarea");
+    }
+    download(
+      textarea.value,
+      String(Date.now()) + ".json",
+      "application/json"
+    );
+  }
+  async import(e) {
+    var _a;
+    e.preventDefault();
+    const file_input = this.element.querySelector(
+      "input[type='file']"
+    );
+    const file = (_a = file_input.files) == null ? void 0 : _a[0];
+    if (file) {
+      const text = await file.text();
+      const textarea = this.element.querySelector("textarea");
+      textarea.innerHTML = text.replaceAll("<", "&lt;");
+      textarea.dispatchEvent(new Event("change"));
+    }
+  }
+}
+function sleep(n) {
+  return new Promise((resolve) => setTimeout(resolve, n));
+}
+export {
+  ExportableTextarea as default
+};
+//# sourceMappingURL=exportable-textarea.stimulus.js.map

package/dist/src/exportable-textarea.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/exportable-textarea.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { Controller } from \"stimulus\";\n\nfunction download(data: string, filename: string, type: string) {\n\tconst file = new Blob([data], { type: type });\n\tconst a = document.createElement(\"a\"),\n\t\turl = URL.createObjectURL(file);\n\ta.href = url;\n\ta.download = filename;\n\tdocument.body.appendChild(a);\n\ta.click();\n\tsetTimeout(function () {\n\t\tdocument.body.removeChild(a);\n\t\twindow.URL.revokeObjectURL(url);\n\t}, 0);\n}\n\nexport default class ExportableTextarea extends Controller<HTMLDetailsElement> {\n\tconnect() {\n\t\tconsole.log(\"exportable\", this.element);\n\t\tthis.element.removeAttribute(\"open\");\n\t\tthis.element.addEventListener(\n\t\t\t\"turbo:before-morph-attribute\",\n\t\t\t(event: CustomEvent<{ attributeName: string }>) => {\n\t\t\t\tif (\n\t\t\t\t\tevent.target == this.element &&\n\t\t\t\t\tevent.detail.attributeName == \"open\"\n\t\t\t\t) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\tasync copy(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\tif (!textarea) {\n\t\t\tthrow new Error(\"Couldn't find the textarea\");\n\t\t}\n\t\tawait navigator.clipboard.writeText(textarea.value);\n\t\t(e.target as HTMLButtonElement).textContent = \"Copied\";\n\t\tawait sleep(1000);\n\t\t(e.target as HTMLButtonElement).textContent = \"Copy\";\n\t}\n\n\tasync download(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\tif (!textarea) {\n\t\t\tthrow new Error(\"Couldn't find the textarea\");\n\t\t}\n\t\tdownload(\n\t\t\ttextarea.value,\n\t\t\tString(Date.now()) + \".json\",\n\t\t\t\"application/json\"\n\t\t);\n\t}\n\n\tasync import(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst file_input = this.element.querySelector(\n\t\t\t\"input[type='file']\"\n\t\t) as HTMLInputElement;\n\t\tconst file = file_input.files?.[0];\n\t\tif (file) {\n\t\t\tconst text = await file.text();\n\t\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\t\ttextarea!.innerHTML = text.replaceAll(\"<\", \"&lt;\");\n\t\t\ttextarea!.dispatchEvent(new Event(\"change\"));\n\t\t}\n\t}\n}\n\nfunction sleep(n: number) {\n\treturn new Promise((resolve) => setTimeout(resolve, n));\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,SAAS,SAAS,MAAc,UAAkB,MAAc;AAC/D,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,EAAE,KAAW,CAAC;AAC5C,QAAM,IAAI,SAAS,cAAc,GAAG,GACnC,MAAM,IAAI,gBAAgB,IAAI;AAC/B,IAAE,OAAO;AACT,IAAE,WAAW;AACb,WAAS,KAAK,YAAY,CAAC;AAC3B,IAAE,MAAM;AACR,aAAW,WAAY;AACtB,aAAS,KAAK,YAAY,CAAC;AAC3B,WAAO,IAAI,gBAAgB,GAAG;AAAA,EAC/B,GAAG,CAAC;AACL;AAEA,MAAO,2BAAyC,WAA+B;AAAA,EAC9E,UAAU;AACT,YAAQ,IAAI,cAAc,KAAK,OAAO;AACtC,SAAK,QAAQ,gBAAgB,MAAM;AACnC,SAAK,QAAQ;AAAA,MACZ;AAAA,MACA,CAAC,UAAkD;AAClD,YACC,MAAM,UAAU,KAAK,WACrB,MAAM,OAAO,iBAAiB,QAC7B;AACD,gBAAM,eAAe;AAAA,QACtB;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAM,KAAK,GAAe;AACzB,MAAE,eAAe;AACjB,UAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,QAAI,CAAC,UAAU;AACd,YAAM,IAAI,MAAM,4BAA4B;AAAA,IAC7C;AACA,UAAM,UAAU,UAAU,UAAU,SAAS,KAAK;AAClD,IAAC,EAAE,OAA6B,cAAc;AAC9C,UAAM,MAAM,GAAI;AAChB,IAAC,EAAE,OAA6B,cAAc;AAAA,EAC/C;AAAA,EAEA,MAAM,SAAS,GAAe;AAC7B,MAAE,eAAe;AACjB,UAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,QAAI,CAAC,UAAU;AACd,YAAM,IAAI,MAAM,4BAA4B;AAAA,IAC7C;AACA;AAAA,MACC,SAAS;AAAA,MACT,OAAO,KAAK,IAAI,CAAC,IAAI;AAAA,MACrB;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAM,OAAO,GAAe;AA3D7B;AA4DE,MAAE,eAAe;AACjB,UAAM,aAAa,KAAK,QAAQ;AAAA,MAC/B;AAAA,IACD;AACA,UAAM,QAAO,gBAAW,UAAX,mBAAmB;AAChC,QAAI,MAAM;AACT,YAAM,OAAO,MAAM,KAAK,KAAK;AAC7B,YAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,eAAU,YAAY,KAAK,WAAW,KAAK,MAAM;AACjD,eAAU,cAAc,IAAI,MAAM,QAAQ,CAAC;AAAA,IAC5C;AAAA,EACD;AACD;AAEA,SAAS,MAAM,GAAW;AACzB,SAAO,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AACvD;",
+  "names": []
+}

package/dist/src/index.js

@@ -0,0 +1,3 @@
+export * from "./edit-jdd-field.js";
+export * from "./components.sreact.js";
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from \"./edit-jdd-field.js\";\nexport * from \"./components.sreact.js\";\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/src/input-image-preview.stimulus.js

@@ -0,0 +1,30 @@
+import { Controller } from "stimulus";
+class InputImagePreview extends Controller {
+  handleChange() {
+    var _a, _b, _c, _d;
+    let img = this.element.querySelector("img");
+    if (!img) {
+      img = document.createElement("img");
+      img.setAttribute("style", "height: 40px; width: 40px");
+      (_a = this.element.querySelector(".image-preview-container")) == null ? void 0 : _a.appendChild(img);
+    }
+    window.URL.revokeObjectURL(img.src);
+    const file = (_c = (_b = this.element.querySelector("input")) == null ? void 0 : _b.files) == null ? void 0 : _c[0];
+    if (!file) {
+      console.warn("No file");
+      return;
+    }
+    const new_url = window.URL.createObjectURL(file);
+    img.src = new_url;
+    img.parentNode;
+    (_d = img.parentElement) == null ? void 0 : _d.querySelectorAll("source").forEach((e) => {
+      var _a2;
+      return (_a2 = e.parentNode) == null ? void 0 : _a2.removeChild(e);
+    });
+    img.style.aspectRatio = "1";
+  }
+}
+export {
+  InputImagePreview as default
+};
+//# sourceMappingURL=input-image-preview.stimulus.js.map

package/dist/src/input-image-preview.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/input-image-preview.stimulus.ts"],
+  "sourcesContent": ["import { Controller } from \"stimulus\";\n\nexport default class InputImagePreview extends Controller {\n\tid: string;\n\n\thandleChange() {\n\t\tlet img = this.element.querySelector(\"img\");\n\t\tif (!img) {\n\t\t\timg = document.createElement(\"img\");\n\t\t\timg.setAttribute(\"style\", \"height: 40px; width: 40px\");\n\t\t\tthis.element\n\t\t\t\t.querySelector(\".image-preview-container\")\n\t\t\t\t?.appendChild(img);\n\t\t}\n\t\twindow.URL.revokeObjectURL(img.src);\n\t\tconst file = this.element.querySelector(\"input\")?.files?.[0];\n\t\tif (!file) {\n\t\t\tconsole.warn(\"No file\");\n\t\t\treturn;\n\t\t}\n\t\tconst new_url = window.URL.createObjectURL(file);\n\t\timg.src = new_url;\n\t\timg.parentNode;\n\t\timg.parentElement\n\t\t\t?.querySelectorAll(\"source\")\n\t\t\t.forEach((e) => e.parentNode?.removeChild(e));\n\t\timg.style.aspectRatio = \"1\";\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,MAAO,0BAAwC,WAAW;AAAA,EAGzD,eAAe;AALhB;AAME,QAAI,MAAM,KAAK,QAAQ,cAAc,KAAK;AAC1C,QAAI,CAAC,KAAK;AACT,YAAM,SAAS,cAAc,KAAK;AAClC,UAAI,aAAa,SAAS,2BAA2B;AACrD,iBAAK,QACH,cAAc,0BAA0B,MAD1C,mBAEG,YAAY;AAAA,IAChB;AACA,WAAO,IAAI,gBAAgB,IAAI,GAAG;AAClC,UAAM,QAAO,gBAAK,QAAQ,cAAc,OAAO,MAAlC,mBAAqC,UAArC,mBAA6C;AAC1D,QAAI,CAAC,MAAM;AACV,cAAQ,KAAK,SAAS;AACtB;AAAA,IACD;AACA,UAAM,UAAU,OAAO,IAAI,gBAAgB,IAAI;AAC/C,QAAI,MAAM;AACV,QAAI;AACJ,cAAI,kBAAJ,mBACG,iBAAiB,UAClB,QAAQ,CAAC,MAAG;AAzBhB,UAAAA;AAyBmB,cAAAA,MAAA,EAAE,eAAF,gBAAAA,IAAc,YAAY;AAAA;AAC3C,QAAI,MAAM,cAAc;AAAA,EACzB;AACD;",
+  "names": ["_a"]
+}

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

@@ -0,0 +1,30 @@
+import { printArgPath } from "./print-arg-path.js";
+function ComponentInputEnum({
+  arg_path,
+  arg,
+  value,
+  onchange
+}) {
+  return `<div id=${`component-input-enum-${arg_path.join("-")}`}>
+		<label>
+			${arg_path.at(-1) || ""}
+			<select
+				name="${`$${printArgPath(arg_path)}`}"
+				onchange="${onchange || ""}"
+			>
+				${arg.values.map(
+    (v) => `<option
+							value="${v}"
+							${value == v ? "selected" : ""}
+						>
+							${v}
+						</option>`
+  ).join("")}
+			</select>
+		</label>
+	</div>`;
+}
+export {
+  ComponentInputEnum
+};
+//# sourceMappingURL=component-input-enum.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-enum.ts"],
+  "sourcesContent": ["import type { Enum } from \"@sealcode/jdd\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport function ComponentInputEnum<State, S extends string, T extends Enum<S>>({\n\targ_path,\n\targ,\n\tvalue,\n\tonchange,\n}: {\n\tstate: State;\n\targ_path: string[];\n\targ: T;\n\tvalue: string;\n\tonchange?: string;\n}) {\n\treturn /* HTML */ `<div id=${`component-input-enum-${arg_path.join(\"-\")}`}>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t<select\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tonchange=\"${onchange || \"\"}\"\n\t\t\t>\n\t\t\t\t${arg.values\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(v: S) => /* HTML */ `<option\n\t\t\t\t\t\t\tvalue=\"${v}\"\n\t\t\t\t\t\t\t${value == v ? \"selected\" : \"\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${v}\n\t\t\t\t\t\t</option>`\n\t\t\t\t\t)\n\t\t\t\t\t.join(\"\")}\n\t\t\t</select>\n\t\t</label>\n\t</div>`;\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAEtB,SAAS,mBAA+D;AAAA,EAC9E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,SAAkB,WAAW,wBAAwB,SAAS,KAAK,GAAG;AAAA;AAAA,KAElE,SAAS,GAAG,EAAE,KAAK;AAAA;AAAA,YAEZ,IAAI,aAAa,QAAQ;AAAA,gBACrB,YAAY;AAAA;AAAA,MAEtB,IAAI,OACJ;AAAA,IACA,CAAC,MAAoB;AAAA,gBACX;AAAA,SACP,SAAS,IAAI,aAAa;AAAA;AAAA,SAE1B;AAAA;AAAA,EAEJ,EACC,KAAK,EAAE;AAAA;AAAA;AAAA;AAIb;",
+  "names": []
+}

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

@@ -0,0 +1,58 @@
+import { tempstream } from "tempstream";
+import { printArgPath } from "./print-arg-path.js";
+function ComponentInputImage({
+  arg_path,
+  arg,
+  value,
+  ctx,
+  page,
+  state,
+  makeJDDContext
+}) {
+  const jdd_context = makeJDDContext(ctx);
+  return tempstream`<div style="margin-bottom: 10px">
+		<label
+			style="display: flex; align-items: center; column-gap: 10px;"
+			data-controller="input-image-preview"
+		>
+			${arg_path.at(-1) || ""}
+			<div class="image-preview-container">
+				${value && jdd_context.render_image(value, {
+    container: {
+      width: 40,
+      height: 40,
+      objectFit: "cover"
+    },
+    crop: { width: 40, height: 40 },
+    style: "height: 40px; width: 40px;",
+    alt: ""
+  })}
+			</div>
+
+			<input
+				type="file"
+				name="${`$${printArgPath(arg_path)}.new`}"
+				value=""
+				autocomplete="off"
+				data-action="change->input-image-preview#handleChange"
+				${arg.hasParent("list") ? "multiple" : ""}
+			/>
+		</label>
+		<div>
+			<input type="hidden" name="${`$${printArgPath(arg_path)}.old`}"
+			value={value?.token || ""} autocomplete="off" />
+		</div>
+		${page.makeActionButton(
+    state,
+    {
+      action: "remove_file",
+      label: "\u274C"
+    },
+    arg_path
+  )}
+	</div>`;
+}
+export {
+  ComponentInputImage
+};
+//# sourceMappingURL=component-input-image.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-image.ts"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport type { Image, JDDContext } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { tempstream } from \"tempstream\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport function ComponentInputImage<State extends JDDPageState>({\n\targ_path,\n\targ,\n\tvalue,\n\tctx,\n\tpage,\n\tstate,\n\tmakeJDDContext,\n}: {\n\tstate: State;\n\targ_path: string[];\n\targ: Image;\n\tvalue: FilePointer | null;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tctx: Context;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n}): JSX.Element {\n\tconst jdd_context = makeJDDContext(ctx);\n\treturn tempstream/* HTML */ `<div style=\"margin-bottom: 10px\">\n\t\t<label\n\t\t\tstyle=\"display: flex; align-items: center; column-gap: 10px;\"\n\t\t\tdata-controller=\"input-image-preview\"\n\t\t>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t<div class=\"image-preview-container\">\n\t\t\t\t${value &&\n\t\t\t\tjdd_context.render_image(value, {\n\t\t\t\t\tcontainer: {\n\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\tobjectFit: \"cover\",\n\t\t\t\t\t},\n\t\t\t\t\tcrop: { width: 40, height: 40 },\n\t\t\t\t\tstyle: \"height: 40px; width: 40px;\",\n\t\t\t\t\talt: \"\",\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}.new`}\"\n\t\t\t\tvalue=\"\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tdata-action=\"change->input-image-preview#handleChange\"\n\t\t\t\t${arg.hasParent(\"list\") ? \"multiple\" : \"\"}\n\t\t\t/>\n\t\t</label>\n\t\t<div>\n\t\t\t<input type=\"hidden\" name=\"${`$${printArgPath(arg_path)}.old`}\"\n\t\t\tvalue={value?.token || \"\"} autocomplete=\"off\" />\n\t\t</div>\n\t\t${page.makeActionButton(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\taction: \"remove_file\",\n\t\t\t\tlabel: \"\u274C\",\n\t\t\t},\n\t\t\targ_path\n\t\t)}\n\t</div>`;\n}\n"],
+  "mappings": "AAMA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAEtB,SAAS,oBAAgD;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQgB;AACf,QAAM,cAAc,eAAe,GAAG;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAKH,SAAS,GAAG,EAAE,KAAK;AAAA;AAAA,MAElB,SACF,YAAY,aAAa,OAAO;AAAA,IAC/B,WAAW;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,IACZ;AAAA,IACA,MAAM,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,IAC9B,OAAO;AAAA,IACP,KAAK;AAAA,EACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKO,IAAI,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA,MAI/B,IAAI,UAAU,MAAM,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA,gCAIX,IAAI,aAAa,QAAQ;AAAA;AAAA;AAAA,IAGrD,KAAK;AAAA,IACN;AAAA,IACA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA;AAAA,EACD;AAAA;AAEF;",
+  "names": []
+}

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

@@ -0,0 +1,74 @@
+import { ComponentInput } from "./component-input.js";
+import { tempstream } from "tempstream";
+async function ComponentInputList({
+  state,
+  ctx,
+  arg_path,
+  arg,
+  value,
+  page,
+  makeJDDContext,
+  ...rest
+}) {
+  if (!value) {
+    value = [];
+  }
+  return tempstream`<fieldset
+		id="${`component-input-list-${arg_path.join("-")}`}"
+	>
+		<legend>${arg_path.at(-1)}</legend>
+		${value.map(
+    (value2, i, all_values) => tempstream`<div style="display: flex">
+					${ComponentInput({
+      ...rest,
+      ctx,
+      state,
+      arg_path: [...arg_path, i.toString()],
+      arg: arg.item_type,
+      value: value2,
+      page,
+      makeJDDContext
+    })}
+					${page.makeActionButton(
+      state,
+      {
+        action: "move_array_item_down",
+        label: "\u2193",
+        disabled: i == all_values.length - 1
+      },
+      arg_path,
+      i
+    )}
+					${page.makeActionButton(
+      state,
+      {
+        action: "move_array_item_up",
+        label: "\u2191",
+        disabled: i == 0
+      },
+      arg_path,
+      i
+    )}
+
+					${page.makeActionButton(
+      state,
+      { action: "remove_array_item", label: "\u274C" },
+      arg_path,
+      i
+    )}
+				</div>`
+  )}
+		${page.makeActionButton(
+    state,
+    {
+      action: "add_array_item",
+      label: "\u2795"
+    },
+    arg_path
+  )}
+	</fieldset>`;
+}
+export {
+  ComponentInputList
+};
+//# sourceMappingURL=component-input-list.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-list.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, List } from \"@sealcode/jdd\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { tempstream } from \"tempstream\";\n\nexport async function ComponentInputList<\n\tState extends JDDPageState,\n\tT extends ComponentArgument<unknown>\n>({\n\tstate,\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\t...rest\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\targ: List<T, any>;\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) {\n\t\tvalue = [];\n\t}\n\treturn tempstream/* HTML */ `<fieldset\n\t\tid=\"${`component-input-list-${arg_path.join(\"-\")}`}\"\n\t>\n\t\t<legend>${arg_path.at(-1)!}</legend>\n\t\t${value.map(\n\t\t\t(value, i, all_values) =>\n\t\t\t\ttempstream`<div style=\"display: flex\">\n\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t...rest,\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [...arg_path, i.toString()],\n\t\t\t\t\t\targ: arg.item_type,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tpage,\n\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t})}\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\taction: \"move_array_item_down\",\n\t\t\t\t\t\t\tlabel: \"\u2193\",\n\t\t\t\t\t\t\tdisabled: i == all_values.length - 1,\n\t\t\t\t\t\t},\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\taction: \"move_array_item_up\",\n\t\t\t\t\t\t\tlabel: \"\u2191\",\n\t\t\t\t\t\t\tdisabled: i == 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{ action: \"remove_array_item\", label: \"\u274C\" },\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\t\t\t\t</div>`\n\t\t)}\n\t\t${page.makeActionButton(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\taction: \"add_array_item\",\n\t\t\t\tlabel: \"\u2795\",\n\t\t\t},\n\t\t\targ_path\n\t\t)}\n\t</fieldset>`;\n}\n"],
+  "mappings": "AAKA,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAE3B,eAAsB,mBAGpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACJ,GAUoB;AACnB,MAAI,CAAC,OAAO;AACX,YAAQ,CAAC;AAAA,EACV;AACA,SAAO;AAAA,QACA,wBAAwB,SAAS,KAAK,GAAG;AAAA;AAAA,YAErC,SAAS,GAAG,EAAE;AAAA,IACtB,MAAM;AAAA,IACP,CAACA,QAAO,GAAG,eACV;AAAA,OACG,eAAe;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,UAAU,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC;AAAA,MACpC,KAAK,IAAI;AAAA,MACT,OAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,OACC,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU,KAAK,WAAW,SAAS;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,OACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU,KAAK;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA;AAAA,OAEE,KAAK;AAAA,MACN;AAAA,MACA,EAAE,QAAQ,qBAAqB,OAAO,SAAI;AAAA,MAC1C;AAAA,MACA;AAAA,IACD;AAAA;AAAA,EAEH;AAAA,IACE,KAAK;AAAA,IACN;AAAA,IACA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA;AAAA,EACD;AAAA;AAEF;",
+  "names": ["value"]
+}

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

@@ -0,0 +1,31 @@
+import { printArgPath } from "./print-arg-path.js";
+async function ComponentInputSingleReference({
+  ctx,
+  arg_path,
+  arg,
+  value,
+  onchange,
+  makeJDDContext
+}) {
+  const values = await arg.getValues(makeJDDContext(ctx));
+  const ret = `<div>
+			<label>
+				${arg_path.at(-1) || ""}
+				<select name="${`$${printArgPath(arg_path)}`}" onchange="${onchange}">
+					${values.sort((v1, v2) => v1.label > v2.label ? 1 : -1).map(
+    (v) => `<option
+								value="${v.value}"
+								${value == v.value ? "selected" : ""}
+							>
+								${v.label}
+							</option>`
+  ).join("")}
+				</select>
+			</label>
+		</div>`;
+  return ret;
+}
+export {
+  ComponentInputSingleReference
+};
+//# sourceMappingURL=component-input-single-reference.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-single-reference.ts"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport type { JDDContext, SingleReference } from \"@sealcode/jdd\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport async function ComponentInputSingleReference<\n\tState,\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tT extends SingleReference<any>\n>({\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tonchange,\n\tmakeJDDContext,\n}: {\n\tctx: Context;\n\tstate: State;\n\targ_path: string[];\n\targ: T;\n\tvalue: string;\n\tonchange?: string;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n}): Promise<string> {\n\tconst values = await arg.getValues(makeJDDContext(ctx));\n\tconst ret = `<div>\n\t\t\t<label>\n\t\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t\t<select name=\"${`$${printArgPath(arg_path)}`}\" onchange=\"${onchange}\">\n\t\t\t\t\t${values\n\t\t\t\t\t\t.sort((v1, v2) => (v1.label > v2.label ? 1 : -1))\n\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t(v) => /* HTML */ `<option\n\t\t\t\t\t\t\t\tvalue=\"${v.value}\"\n\t\t\t\t\t\t\t\t${value == v.value ? \"selected\" : \"\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${v.label}\n\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</select>\n\t\t\t</label>\n\t\t</div>`;\n\treturn ret;\n}\n"],
+  "mappings": "AAEA,SAAS,oBAAoB;AAE7B,eAAsB,8BAIpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQoB;AACnB,QAAM,SAAS,MAAM,IAAI,UAAU,eAAe,GAAG,CAAC;AACtD,QAAM,MAAM;AAAA;AAAA,MAEP,SAAS,GAAG,EAAE,KAAK;AAAA,oBACL,IAAI,aAAa,QAAQ,kBAAkB;AAAA,OACxD,OACA,KAAK,CAAC,IAAI,OAAQ,GAAG,QAAQ,GAAG,QAAQ,IAAI,EAAG,EAC/C;AAAA,IACA,CAAC,MAAiB;AAAA,iBACR,EAAE;AAAA,UACT,SAAS,EAAE,QAAQ,aAAa;AAAA;AAAA,UAEhC,EAAE;AAAA;AAAA,EAEN,EACC,KAAK,EAAE;AAAA;AAAA;AAAA;AAIb,SAAO;AACR;",
+  "names": []
+}

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

@@ -0,0 +1,36 @@
+import { ComponentInput } from "./component-input.js";
+async function ComponentInputStructured({
+  state,
+  ctx,
+  arg_path,
+  arg,
+  value,
+  page,
+  ...rest
+}) {
+  return `<fieldset
+		id="${`component-input-structured-${arg_path.join("-")}`}"
+	>
+		<legend>{arg_path.at(-1)}</legend>
+		${(await Promise.all(
+    Object.entries(arg.structure).map(async ([arg_name, arg2]) => {
+      const ret = `<div>
+						${await ComponentInput({
+        ctx,
+        state,
+        arg_path: [...arg_path, arg_name],
+        arg: arg2,
+        value: value[arg_name],
+        page,
+        ...rest
+      })}
+					</div>`;
+      return ret;
+    })
+  )).join("")}
+	</fieldset>`;
+}
+export {
+  ComponentInputStructured
+};
+//# sourceMappingURL=component-input-structured.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-structured.ts"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, Structured } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\n\nexport async function ComponentInputStructured<\n\tT extends Structured<Record<string, ComponentArgument<unknown>>>\n>({\n\tstate,\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\t...rest\n}: {\n\tstate: JDDPageState;\n\tctx: Context;\n\targ_path: string[];\n\targ: T;\n\tvalue: Record<string, unknown>;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}) {\n\treturn /* HTML */ `<fieldset\n\t\tid=\"${`component-input-structured-${arg_path.join(\"-\")}`}\"\n\t>\n\t\t<legend>{arg_path.at(-1)}</legend>\n\t\t${(\n\t\t\tawait Promise.all(\n\t\t\t\tObject.entries(arg.structure).map(async ([arg_name, arg]) => {\n\t\t\t\t\tconst ret = `<div>\n\t\t\t\t\t\t${await ComponentInput({\n\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\targ_path: [...arg_path, arg_name],\n\t\t\t\t\t\t\targ,\n\t\t\t\t\t\t\tvalue: value[arg_name],\n\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t...rest,\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>`;\n\t\t\t\t\treturn ret;\n\t\t\t\t})\n\t\t\t)\n\t\t).join(\"\")}\n\t</fieldset>`;\n}\n"],
+  "mappings": "AAGA,SAAS,sBAAsB;AAI/B,eAAsB,yBAEpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACJ,GASG;AACF,SAAkB;AAAA,QACX,8BAA8B,SAAS,KAAK,GAAG;AAAA;AAAA;AAAA,KAIpD,MAAM,QAAQ;AAAA,IACb,OAAO,QAAQ,IAAI,SAAS,EAAE,IAAI,OAAO,CAAC,UAAUA,IAAG,MAAM;AAC5D,YAAM,MAAM;AAAA,QACT,MAAM,eAAe;AAAA,QACtB;AAAA,QACA;AAAA,QACA,UAAU,CAAC,GAAG,UAAU,QAAQ;AAAA,QAChC,KAAAA;AAAA,QACA,OAAO,MAAM;AAAA,QACb;AAAA,QACA,GAAG;AAAA,MACJ,CAAC;AAAA;AAEF,aAAO;AAAA,IACR,CAAC;AAAA,EACF,GACC,KAAK,EAAE;AAAA;AAEX;",
+  "names": ["arg"]
+}

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

@@ -0,0 +1,228 @@
+import { Markdown } from "@sealcode/jdd";
+import { isTableHeader } from "@sealcode/jdd";
+import { tempstream } from "tempstream";
+import { ComponentInput } from "./component-input.js";
+async function ComponentInputTable({
+  state,
+  arg_path,
+  ctx,
+  arg,
+  value,
+  page,
+  makeJDDContext,
+  makeAssetURL
+}) {
+  if (!value) {
+    value = await arg.getEmptyValue(makeJDDContext(ctx));
+  }
+  const show_paste = arg.cell_type instanceof Markdown && arg.header_type instanceof Markdown;
+  return tempstream`<fieldset>
+		<legend>${arg_path.at(-1)}</legend>
+		<div>
+			${show_paste ? `<input
+						type="button"
+						value="paste"
+						placeholder="paste table here"
+						data-jdd-table-paste-argpath-value="${arg_path.join(
+    "."
+  )}"
+						data-controller="jdd-table-paste"
+				  />` : ""}
+			<table
+				class="jdd-component-input--table"
+				style="position: relative; /* necessary for sticky th*/"
+			>
+				<tbody>
+					<tr>
+						<td></td>
+						${[...Array(arg.getColumnsCount(value)).keys()].map(
+    (column_index) => `<th
+									class="sticky sticky--top subdued"
+								>
+									${page.makeActionButton(
+      state,
+      {
+        action: "remove_table_column",
+        label: "Remove column",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-delete-column.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      column_index
+    )}
+									${column_index >= arg.getColumnsCount(value) - 1 ? "" : page.makeActionButton(
+      state,
+      {
+        action: "move_table_column_right",
+        label: "Move column to the right",
+        content: `<img
+														width="20"
+														height="20"
+														src="${makeAssetURL(
+          "icons/table-move-column-right.svg"
+        )}"
+													/>`
+      },
+      arg_path,
+      column_index
+    )}
+								</th>`
+  ).join("")}
+					</tr>
+					${value.rows.map(
+    (row, row_index) => tempstream`<tr>
+							<td class="sticky sticky--left subdued">
+								<div
+									style="display: flex; flex-flow: column; row-gap: 5px;"
+								>
+									${page.makeActionButton(
+      state,
+      {
+        action: "remove_table_row",
+        label: "Remove row",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-delete-row.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      row_index
+    )}
+									${page.makeActionButton(
+      state,
+      {
+        action: "move_table_row_down",
+        label: "Move this row down",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-move-row-down.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      row_index
+    )}
+								</div>
+							</td>
+							${isTableHeader(row) ? tempstream`<th
+										colspan="${arg.getColumnsCount(value).toString()}"
+								  >
+										${ComponentInput({
+      state,
+      ctx,
+      arg_path: [
+        ...arg_path,
+        "rows",
+        row_index.toString(),
+        "header_content"
+      ],
+      arg: arg.header_type,
+      value: row.header_content,
+      page,
+      makeJDDContext,
+      makeAssetURL
+    })}
+								  </th>` : row.cells.map(
+      (cell, cell_index) => tempstream`<td>
+											${ComponentInput({
+        ctx,
+        state,
+        arg_path: [
+          ...arg_path,
+          "rows",
+          row_index.toString(),
+          "cells",
+          cell_index.toString()
+        ],
+        arg: arg.cell_type,
+        value: cell,
+        page,
+        makeJDDContext,
+        makeAssetURL
+      })}
+										</td>`
+    )}
+							${row_index == 0 ? `<td
+										class="subdued"
+										rowspan="${value.rows.length.toString()}"
+								  >
+										${page.makeActionButton(
+      state,
+      {
+        action: "add_table_column",
+        label: "Add column",
+        content: `<img
+													width="20"
+													height="20"
+													src="${makeAssetURL(
+          "icons/table-add-column-right.svg"
+        )}"
+												/>`
+      },
+      arg_path
+    )}
+								  </td>` : ""}
+						</tr>`
+  )}
+					<tr>
+						<td
+							class="subdued"
+							colspan="{(arg.getColumnsCount(value)"
+							+
+							1).toString()}
+						>
+							${page.makeActionButton(
+    state,
+    {
+      action: "add_table_row",
+      label: "Add table row",
+      content: `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+        "icons/table-add-row-below.svg"
+      )}"
+									/>`
+    },
+    arg_path,
+    arg.getColumnsCount(value),
+    void 0
+  )}
+							${page.makeActionButton(
+    state,
+    {
+      action: "add_table_row",
+      label: "Add table header",
+      content: `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+        "icons/table-add-column-header-below.svg"
+      )}"
+									/>`
+    },
+    arg_path,
+    arg.getColumnsCount(value),
+    "header"
+  )}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</fieldset>`;
+}
+export {
+  ComponentInputTable
+};
+//# sourceMappingURL=component-input-table.js.map