@sealcode/jdd-editor 0.2.5 → 0.2.7

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

@@ -27,7 +27,7 @@ async function ComponentInputTable({
     "."
   )}"
 						data-controller="jdd-table-paste"
-				  />` : ""}
+					/>` : ""}
 			<table
 				class="jdd-component-input--table"
 				style="position: relative; /* necessary for sticky th*/"
@@ -37,84 +37,84 @@ async function ComponentInputTable({
 						<td></td>
 						${[...Array(arg.getColumnsCount(value)).keys()].map(
     (column_index) => `<th
-									class="sticky sticky--top subdued"
-								>
-									${page.makeActionButton(
+										class="sticky sticky--top subdued"
+									>
+										${page.makeActionButton(
       state,
       {
         action: "remove_table_column",
         label: "Remove column",
         content: `<img
-												width="20"
-												height="20"
-												src="${makeAssetURL(
+													width="20"
+													height="20"
+													src="${makeAssetURL(
           "icons/table-delete-column.svg"
         )}"
-											/>`
+												/>`
       },
       arg_path,
       column_index
     )}
-									${column_index >= arg.getColumnsCount(value) - 1 ? "" : page.makeActionButton(
+										${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(
+															width="20"
+															height="20"
+															src="${makeAssetURL(
           "icons/table-move-column-right.svg"
         )}"
-													/>`
+														/>`
       },
       arg_path,
       column_index
     )}
-								</th>`
+									</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(
+								<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(
+													width="20"
+													height="20"
+													src="${makeAssetURL(
           "icons/table-delete-row.svg"
         )}"
-											/>`
+												/>`
       },
       arg_path,
       row_index
     )}
-									${page.makeActionButton(
+										${page.makeActionButton(
       state,
       {
         action: "move_table_row_down",
         label: "Move this row down",
         content: `<img
-												width="20"
-												height="20"
-												src="${makeAssetURL(
+													width="20"
+													height="20"
+													src="${makeAssetURL(
           "icons/table-move-row-down.svg"
         )}"
-											/>`
+												/>`
       },
       arg_path,
       row_index
     )}
-								</div>
-							</td>
-							${isTableHeader(row) ? tempstream`<th
+									</div>
+								</td>
+								${isTableHeader(row) ? tempstream`<th
 										colspan="${arg.getColumnsCount(value).toString()}"
 								  >
 										${ComponentInput({
@@ -134,7 +134,7 @@ async function ComponentInputTable({
     })}
 								  </th>` : row.cells.map(
       (cell, cell_index) => tempstream`<td>
-											${ComponentInput({
+													${ComponentInput({
         ctx,
         state,
         arg_path: [
@@ -150,29 +150,29 @@ async function ComponentInputTable({
         makeJDDContext,
         makeAssetURL
       })}
-										</td>`
+												</td>`
     )}
-							${row_index == 0 ? `<td
-										class="subdued"
-										rowspan="${value.rows.length.toString()}"
-								  >
-										${page.makeActionButton(
+								${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(
+														width="20"
+														height="20"
+														src="${makeAssetURL(
           "icons/table-add-column-right.svg"
         )}"
-												/>`
+													/>`
       },
       arg_path
     )}
-								  </td>` : ""}
-						</tr>`
+										</td>` : ""}
+							</tr>`
   )}
 					<tr>
 						<td

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/component-input-table.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { JDDContext, Table, TableData } from \"@sealcode/jdd\";\nimport { Markdown } from \"@sealcode/jdd\";\nimport { isTableHeader } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\n\nexport async function ComponentInputTable<\n\tState extends JDDPageState,\n\tCellType,\n\tHeaderType\n>({\n\tstate,\n\targ_path,\n\tctx,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: Table<CellType, HeaderType>;\n\tvalue: TableData<CellType, HeaderType>;\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 = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\n\tconst show_paste =\n\t\targ.cell_type instanceof Markdown &&\n\t\targ.header_type instanceof Markdown;\n\n\treturn tempstream/* HTML */ `<fieldset>\n\t\t<legend>${arg_path.at(-1)!}</legend>\n\t\t<div>\n\t\t\t${show_paste\n\t\t\t\t? /* HTML */ `<input\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvalue=\"paste\"\n\t\t\t\t\t\tplaceholder=\"paste table here\"\n\t\t\t\t\t\tdata-jdd-table-paste-argpath-value=\"${arg_path.join(\n\t\t\t\t\t\t\t\".\"\n\t\t\t\t\t\t)}\"\n\t\t\t\t\t\tdata-controller=\"jdd-table-paste\"\n\t\t\t\t  />`\n\t\t\t\t: \"\"}\n\t\t\t<table\n\t\t\t\tclass=\"jdd-component-input--table\"\n\t\t\t\tstyle=\"position: relative; /* necessary for sticky th*/\"\n\t\t\t>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td></td>\n\t\t\t\t\t\t${[...Array(arg.getColumnsCount(value)).keys()]\n\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t(column_index) => /* HTML */ `<th\n\t\t\t\t\t\t\t\t\tclass=\"sticky sticky--top subdued\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_column\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove column\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-column.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t${column_index >=\n\t\t\t\t\t\t\t\t\targ.getColumnsCount(value) - 1\n\t\t\t\t\t\t\t\t\t\t? \"\"\n\t\t\t\t\t\t\t\t\t\t: page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_column_right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move column to the right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t\t  )}\n\t\t\t\t\t\t\t\t</th>`\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t\t</tr>\n\t\t\t\t\t${value.rows.map(\n\t\t\t\t\t\t(row, row_index) => tempstream/* HTML */ `<tr>\n\t\t\t\t\t\t\t<td class=\"sticky sticky--left subdued\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle=\"display: flex; flex-flow: column; row-gap: 5px;\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_row\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove row\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-row.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_row_down\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t${isTableHeader(row)\n\t\t\t\t\t\t\t\t? /* HTML */ tempstream`<th\n\t\t\t\t\t\t\t\t\t\tcolspan=\"${arg.getColumnsCount(value).toString()}\"\n\t\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\"header_content\",\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\targ: arg.header_type,\n\t\t\t\t\t\t\t\t\t\t\tvalue: row.header_content,\n\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t  </th>`\n\t\t\t\t\t\t\t\t: row.cells.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcell,\n\t\t\t\t\t\t\t\t\t\t\tcell_index\n\t\t\t\t\t\t\t\t\t\t) => tempstream/* HTML */ `<td>\n\t\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"cells\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcell_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\targ: arg.cell_type,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: cell,\n\t\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</td>`\n\t\t\t\t\t\t\t\t  )}\n\t\t\t\t\t\t\t${row_index == 0\n\t\t\t\t\t\t\t\t? /* HTML */ `<td\n\t\t\t\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\t\t\t\trowspan=\"${value.rows.length.toString()}\"\n\t\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\taction: \"add_table_column\",\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Add column\",\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\targ_path\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t  </td>`\n\t\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t</tr>`\n\t\t\t\t\t)}\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\tcolspan=\"{(arg.getColumnsCount(value)\"\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t1).toString()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table row\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-row-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table header\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-header-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\t\"header\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</fieldset>`;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { JDDContext, Table, TableData } from \"@sealcode/jdd\";\nimport { Markdown } from \"@sealcode/jdd\";\nimport { isTableHeader } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\n\nexport async function ComponentInputTable<\n\tState extends JDDPageState,\n\tCellType,\n\tHeaderType,\n>({\n\tstate,\n\targ_path,\n\tctx,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: Table<CellType, HeaderType>;\n\tvalue: TableData<CellType, HeaderType>;\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 = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\n\tconst show_paste =\n\t\targ.cell_type instanceof Markdown &&\n\t\targ.header_type instanceof Markdown;\n\n\treturn tempstream /* HTML */ `<fieldset>\n\t\t<legend>${arg_path.at(-1)!}</legend>\n\t\t<div>\n\t\t\t${show_paste\n\t\t\t\t? /* HTML */ `<input\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvalue=\"paste\"\n\t\t\t\t\t\tplaceholder=\"paste table here\"\n\t\t\t\t\t\tdata-jdd-table-paste-argpath-value=\"${arg_path.join(\n\t\t\t\t\t\t\t\".\"\n\t\t\t\t\t\t)}\"\n\t\t\t\t\t\tdata-controller=\"jdd-table-paste\"\n\t\t\t\t\t/>`\n\t\t\t\t: \"\"}\n\t\t\t<table\n\t\t\t\tclass=\"jdd-component-input--table\"\n\t\t\t\tstyle=\"position: relative; /* necessary for sticky th*/\"\n\t\t\t>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td></td>\n\t\t\t\t\t\t${[...Array(arg.getColumnsCount(value)).keys()]\n\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t(column_index) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<th\n\t\t\t\t\t\t\t\t\t\tclass=\"sticky sticky--top subdued\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_column\",\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove column\",\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-column.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t${column_index >=\n\t\t\t\t\t\t\t\t\t\targ.getColumnsCount(value) - 1\n\t\t\t\t\t\t\t\t\t\t\t? \"\"\n\t\t\t\t\t\t\t\t\t\t\t: page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_column_right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move column to the right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</th>`\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t\t</tr>\n\t\t\t\t\t${value.rows.map(\n\t\t\t\t\t\t(row, row_index) =>\n\t\t\t\t\t\t\ttempstream /* HTML */ `<tr>\n\t\t\t\t\t\t\t\t<td class=\"sticky sticky--left subdued\">\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle=\"display: flex; flex-flow: column; row-gap: 5px;\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_row\",\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove row\",\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-row.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_row_down\",\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t${isTableHeader(row)\n\t\t\t\t\t\t\t\t\t? /* HTML */ tempstream`<th\n\t\t\t\t\t\t\t\t\t\tcolspan=\"${arg.getColumnsCount(value).toString()}\"\n\t\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\"header_content\",\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\targ: arg.header_type,\n\t\t\t\t\t\t\t\t\t\t\tvalue: row.header_content,\n\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t  </th>`\n\t\t\t\t\t\t\t\t\t: row.cells.map(\n\t\t\t\t\t\t\t\t\t\t\t(cell, cell_index) =>\n\t\t\t\t\t\t\t\t\t\t\t\ttempstream /* HTML */ `<td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"cells\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcell_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\targ: arg.cell_type,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: cell,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t</td>`\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t${row_index == 0\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<td\n\t\t\t\t\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\t\t\t\t\trowspan=\"${value.rows.length.toString()}\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\taction: \"add_table_column\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Add column\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\targ_path\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</td>`\n\t\t\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t)}\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\tcolspan=\"{(arg.getColumnsCount(value)\"\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t1).toString()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table row\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-row-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table header\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-header-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\t\"header\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</fieldset>`;\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -90,7 +90,8 @@ async function ComponentInput({
       arg_path,
       arg,
       value,
-      onchange: page.rerender()
+      onchange: page.rerender(),
+      jdd_context: makeJDDContext(ctx)
     });
   }
   if (arg instanceof Image) {
@@ -165,7 +166,7 @@ async function ComponentInput({
 						>
 ${is(value, predicates.string) ? value : ""}</textarea
 						>
-				  </div>` : await inputElement()}
+					</div>` : await inputElement()}
 		</label>
 	</div>`;
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/component-input.ts"],
-  "sourcesContent": ["import { printArgPath } from \"./print-arg-path.js\";\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport { NestedComponent, Color, SingleReference } from \"@sealcode/jdd\";\nimport {\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tStructured,\n\tTable,\n\tCode,\n} from \"@sealcode/jdd\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.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});\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=\"${(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=\"${(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) ? 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  </div>`\n\t\t\t\t: await inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { printArgPath } from \"./print-arg-path.js\";\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport { NestedComponent, Color, SingleReference } from \"@sealcode/jdd\";\nimport {\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tStructured,\n\tTable,\n\tCode,\n} from \"@sealcode/jdd\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.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=\"${(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=\"${(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) ? 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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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/jdd-creator.ts"],
-  "sourcesContent": ["import type { Context } from \"koa\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport type { JDDPageState } from \"./jdd-page.js\";\nimport JDDPage from \"./jdd-page.js\";\nimport { htmlEscape } from \"escape-goat\";\nimport { tempstream } from \"tempstream\";\nimport { Stringifiable } from \"tempstream/@types/stringify.js\";\n\nexport default abstract class JDDCreator extends JDDPage {\n\tactions = ComponentPreviewActions;\n\n\t/**\n\t * This method returns list of components allowed in JDD Editor instance.\n\t * If list is empty it will allow all of the components in registry,\n\t * if you overide this function you can decide on what components should\n\t * available.\n\t */\n\tgetAllowedComponents(): string[] {\n\t\treturn [];\n\t}\n\n\tgetRegistryComponents() {\n\t\tconst all_components = super.getRegistryComponents();\n\t\tconst allowed_components = this.getAllowedComponents();\n\n\t\tif (allowed_components.length > 0) {\n\t\t\treturn Object.fromEntries(\n\t\t\t\tObject.entries(all_components).filter(([name]) =>\n\t\t\t\t\tallowed_components.includes(name)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn all_components;\n\t}\n\n\trenderParameterButtons(state: JDDPageState) {\n\t\t{\n\t\t\t/*The below button has to be here in order for it to be the default behavior */\n\t\t}\n\t\treturn `<div class=\"jdd-editor__toolbar\">\n\t\t\t\t<input type=\"submit\" value=\"Preview\" />\n\t\t\t\t<select name=\"component\">\n\t\t\t\t\t${Object.keys(this.getRegistryComponents())\n\t\t\t\t\t\t.map((cmp) => `<option value=\"${cmp}\">${cmp}</option>`)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</select>\n\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\taction: \"add_component\",\n\t\t\t\t\tlabel: \"Add component\",\n\t\t\t\t})}\n\t\t\t</div>`;\n\t}\n\n\tasync renderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent_data: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t): Promise<Stringifiable> {\n\t\tconst component =\n\t\t\tthis.getRegistryComponents()[component_data.component_name];\n\t\tconst checkbox_id = `component_${component_index}_open`;\n\t\treturn tempstream/* HTML */ `<div\n\t\t\tclass=\"jdd-editor__component-block jdd-editor__component-block--number-${component_index}\"\n\t\t\tid=\"${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}\"\n\t\t\tdata-component-debugger-target=\"componentBlock\"\n\t\t\tdata-component-index=\"${component_index.toString()}\"\n\t\t>\n\t\t\t<summary class=\"jdd-editor__component-block__top_bar\">\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{ action: \"remove_component\", label: \"\u274C\" },\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_up\",\n\t\t\t\t\t\tlabel: \"Move this row up\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-up.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_down\",\n\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t<span class=\"jdd-editor__component-block__title\">\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__main\">\n\t\t\t\t\t\t${htmlEscape(\n\t\t\t\t\t\t\tcomponent?.getTitle(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\tcomponent_data.args\n\t\t\t\t\t\t\t) || \"\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__secondary\">\n\t\t\t\t\t\t${component_data.component_name}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t\t<label\n\t\t\t\t\tclass=\"component-block__handle\"\n\t\t\t\t\tfor=\"${checkbox_id}\"\n\t\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t\t\tdata-action=\"click->component-debugger#labelClicked\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"jdd-editor__component-block__chevron\">\n\t\t\t\t\t\t${\" \"} &gt;${\" \"}\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t</summary>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"component-collapse-toggle\"\n\t\t\t\tname=\"${`$[components][${component_index}][open]`}\"\n\t\t\t\tdata-turbo-permanent\n\t\t\t\tid=\"${checkbox_id}\"\n\t\t\t\tstyle=\"display:none\"\n\t\t\t\tdata-component-debugger-target=\"checkbox\"\n\t\t\t/>\n\t\t\t<div class=\"jdd-editor__component-block__inner\">\n\t\t\t\t${super.renderComponentBlock(\n\t\t\t\t\tctx,\n\t\t\t\t\tstate,\n\t\t\t\t\tcomponent_data,\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport type { JDDPageState } from \"./jdd-page.js\";\nimport JDDPage from \"./jdd-page.js\";\nimport { htmlEscape } from \"escape-goat\";\nimport { tempstream } from \"tempstream\";\nimport { Stringifiable } from \"tempstream/@types/stringify.js\";\n\nexport default abstract class JDDCreator extends JDDPage {\n\tactions = ComponentPreviewActions;\n\n\t/**\n\t * This method returns list of components allowed in JDD Editor instance.\n\t * If list is empty it will allow all of the components in registry,\n\t * if you overide this function you can decide on what components should\n\t * available.\n\t */\n\tgetAllowedComponents(): string[] {\n\t\treturn [];\n\t}\n\n\tgetRegistryComponents() {\n\t\tconst all_components = super.getRegistryComponents();\n\t\tconst allowed_components = this.getAllowedComponents();\n\n\t\tif (allowed_components.length > 0) {\n\t\t\treturn Object.fromEntries(\n\t\t\t\tObject.entries(all_components).filter(([name]) =>\n\t\t\t\t\tallowed_components.includes(name)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn all_components;\n\t}\n\n\trenderParameterButtons(state: JDDPageState) {\n\t\t{\n\t\t\t/*The below button has to be here in order for it to be the default behavior */\n\t\t}\n\t\treturn `<div class=\"jdd-editor__toolbar\">\n\t\t\t\t<input type=\"submit\" value=\"Preview\" />\n\t\t\t\t<select name=\"component\">\n\t\t\t\t\t${Object.keys(this.getRegistryComponents())\n\t\t\t\t\t\t.map((cmp) => `<option value=\"${cmp}\">${cmp}</option>`)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</select>\n\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\taction: \"add_component\",\n\t\t\t\t\tlabel: \"Add component\",\n\t\t\t\t})}\n\t\t\t</div>`;\n\t}\n\n\tasync renderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent_data: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t): Promise<Stringifiable> {\n\t\tconst component =\n\t\t\tthis.getRegistryComponents()[component_data.component_name];\n\t\tconst checkbox_id = `component_${component_index}_open`;\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"jdd-editor__component-block jdd-editor__component-block--number-${component_index}\"\n\t\t\tid=\"${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}\"\n\t\t\tdata-component-debugger-target=\"componentBlock\"\n\t\t\tdata-component-index=\"${component_index.toString()}\"\n\t\t>\n\t\t\t<summary class=\"jdd-editor__component-block__top_bar\">\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{ action: \"remove_component\", label: \"\u274C\" },\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_up\",\n\t\t\t\t\t\tlabel: \"Move this row up\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-up.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t${this.makeActionButton(\n\t\t\t\t\tstate,\n\t\t\t\t\t{\n\t\t\t\t\t\taction: \"move_component_down\",\n\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tsrc=\"${this.makeAssetURL(\n\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t/>`,\n\t\t\t\t\t},\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t\t<span class=\"jdd-editor__component-block__title\">\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__main\">\n\t\t\t\t\t\t${htmlEscape(\n\t\t\t\t\t\t\tcomponent?.getTitle(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\tcomponent_data.args\n\t\t\t\t\t\t\t) || \"\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"jdd-editor__component-block__title__secondary\">\n\t\t\t\t\t\t${component_data.component_name}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t\t<label\n\t\t\t\t\tclass=\"component-block__handle\"\n\t\t\t\t\tfor=\"${checkbox_id}\"\n\t\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t\t\tdata-action=\"click->component-debugger#labelClicked\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"jdd-editor__component-block__chevron\">\n\t\t\t\t\t\t${\" \"} &gt;${\" \"}\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t</summary>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"component-collapse-toggle\"\n\t\t\t\tname=\"${`$[components][${component_index}][open]`}\"\n\t\t\t\tdata-turbo-permanent\n\t\t\t\tid=\"${checkbox_id}\"\n\t\t\t\tstyle=\"display:none\"\n\t\t\t\tdata-component-debugger-target=\"checkbox\"\n\t\t\t/>\n\t\t\t<div class=\"jdd-editor__component-block__inner\">\n\t\t\t\t${super.renderComponentBlock(\n\t\t\t\t\tctx,\n\t\t\t\t\tstate,\n\t\t\t\t\tcomponent_data,\n\t\t\t\t\tcomponent_index\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n"],
   "mappings": "AACA,SAAS,+BAA+B;AAExC,OAAO,aAAa;AACpB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAG3B,MAAO,mBAA0C,QAAQ;AAAA,EAAzD;AAAA;AACC,mBAAU;AAAA;AAAA,EAQV,uBAAiC;AAChC,WAAO,CAAC;AAAA,EACT;AAAA,EAEA,wBAAwB;AACvB,UAAM,iBAAiB,MAAM,sBAAsB;AACnD,UAAM,qBAAqB,KAAK,qBAAqB;AAErD,QAAI,mBAAmB,SAAS,GAAG;AAClC,aAAO,OAAO;AAAA,QACb,OAAO,QAAQ,cAAc,EAAE;AAAA,UAAO,CAAC,CAAC,IAAI,MAC3C,mBAAmB,SAAS,IAAI;AAAA,QACjC;AAAA,MACD;AAAA,IACD;AAEA,WAAO;AAAA,EACR;AAAA,EAEA,uBAAuB,OAAqB;AAC3C;AAAA,IAEA;AACA,WAAO;AAAA;AAAA;AAAA,OAGF,OAAO,KAAK,KAAK,sBAAsB,CAAC,EACxC,IAAI,CAAC,QAAQ,kBAAkB,QAAQ,cAAc,EACrD,KAAK,EAAE;AAAA;AAAA,MAER,KAAK,iBAAiB,OAAO;AAAA,MAC9B,QAAQ;AAAA,MACR,OAAO;AAAA,IACR,CAAC;AAAA;AAAA,EAEJ;AAAA,EAEA,MAAM,qBACL,KACA,OACA,gBAIA,iBACyB;AACzB,UAAM,YACL,KAAK,sBAAsB,EAAE,eAAe;AAC7C,UAAM,cAAc,aAAa;AACjC,WAAO;AAAA,4EACmE;AAAA,SACnE,gCAAgC,eAAe,kBAAkB;AAAA;AAAA,2BAE/C,gBAAgB,SAAS;AAAA;AAAA;AAAA,MAG9C,KAAK;AAAA,MACN;AAAA,MACA,EAAE,QAAQ,oBAAoB,OAAO,SAAI;AAAA,MACzC;AAAA,IACD;AAAA,MACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAoB;AAAA;AAAA;AAAA,cAGZ,KAAK;AAAA,UACX;AAAA,QACD;AAAA;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA,MACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAoB;AAAA;AAAA;AAAA,cAGZ,KAAK;AAAA,UACX;AAAA,QACD;AAAA;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA;AAAA;AAAA,QAGI;AAAA,OACD,uCAAW;AAAA,QACV,KAAK,eAAe,GAAG;AAAA,QACvB,eAAe;AAAA,YACX;AAAA,IACN;AAAA;AAAA;AAAA,QAGE,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX;AAAA;AAAA;AAAA;AAAA;AAAA,QAKJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOP,iBAAiB;AAAA;AAAA,UAEnB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKJ,MAAM;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA;AAAA;AAAA,EAGH;AACD;",
   "names": []
 }

package/dist/src/jdd-page.js

@@ -5,7 +5,8 @@ import { hasFieldOfType, hasShape, predicates } from "@sealcode/ts-predicates";
 import { tempstream } from "tempstream";
 import { ComponentInput } from "./inputs/component-input.js";
 import { ComponentPreviewActions } from "./component-preview-actions.js";
-import { htmlEscape } from "escape-goat";
+import prettier from "prettier";
+import hljs from "highlight.js";
 const actionName = "Components";
 class JDDPage extends StatefulPage {
   constructor(args) {
@@ -295,13 +296,13 @@ class JDDPage extends StatefulPage {
 											class="dynamic"
 											value="${state.preview_size}"
 											selected
-									  >
+										>
 											${state.preview_size} px
-									  </option>` : ""}
+										</option>` : ""}
 							${this.previewSizes.map(
       (size) => `<option value="${size}">
-									${`${size} px`}
-								</option>`
+										${`${size} px`}
+									</option>`
     )}
 						</select>
 						<noscript>
@@ -347,6 +348,13 @@ class JDDPage extends StatefulPage {
         documentContainerFromParsed(state.components),
         this.makeJDDContext(ctx)
       );
+      const currentComponentPrettified = await prettier.format(currentComponent, {
+        parser: "html"
+      });
+      const highlightedHTML = hljs.highlight(
+        currentComponentPrettified,
+        { language: "html" }
+      ).value;
       return ` <div
 									class="jdd-outer-container"
 								>
@@ -355,9 +363,7 @@ class JDDPage extends StatefulPage {
 									</div>
 								</div>
 								<div class="component-raw-view">
-									<pre><code>${htmlEscape(
-        currentComponent
-      )}</code></pre>
+									<pre><code>${highlightedHTML}</code></pre>
 								</div>`;
     })()}
 					</div>

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 { htmlEscape } from \"escape-goat\";\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  )\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  >\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  </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) => /* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t${`${size} px`}\n\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\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>${htmlEscape(\n\t\t\t\t\t\t\t\t\t\tcurrentComponent\n\t\t\t\t\t\t\t\t\t)}</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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",
+  "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"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",
@@ -29,7 +29,7 @@
 		"esbuild": "^0.14.10",
 		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-prettier": "^5.5.4",
 		"eslint-plugin-with-tsc-error": "^0.0.8",
 		"fs": "^0.0.1-security",
 		"husky": "^9.1.7",
@@ -37,7 +37,7 @@
 		"mri": "^1.2.0",
 		"nyc": "^15.1.0",
 		"path": "^0.12.7",
-		"prettier": "^2.8.7",
+		"prettier": "^3.6.2",
 		"source-map-support": "^0.5.21",
 		"tiny-glob": "^0.2.9",
 		"ts-node": "^10.9.1",
@@ -47,13 +47,14 @@
 	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^13.1.0",
-		"@sealcode/jdd": "^0.8.2",
+		"@sealcode/jdd": "^0.8.3",
 		"@sealcode/monaco-wrapper": "^0.0.3",
 		"@sealcode/sealcodemirror": "^5.70.0-beta5",
 		"@sealcode/sealgen": "^0.19.6",
 		"@types/object-path": "^0.11.4",
 		"@types/throttle-debounce": "^5.0.2",
 		"@types/turndown": "^5.0.5",
+		"highlight.js": "^11.11.1",
 		"object-path": "^0.11.8",
 		"sealious": "^0.21.0",
 		"stimulus": "^3.2.2",

package/src/component-preview-actions.ts

@@ -241,9 +241,8 @@ export const ComponentPreviewActions = (<const>{
 			row = {
 				type: "header",
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-				header_content: await argument.header_type.getExampleValue(
-					jdd_context
-				),
+				header_content:
+					await argument.header_type.getExampleValue(jdd_context),
 			};
 		} else {
 			const cells = [];

package/src/components.sreact.ts

@@ -22,14 +22,15 @@ export class JDDDebugger extends JDDPage {
 			>
 				${Object.entries(all_components)
 					.map(
-						([name]) => /* HTML */ `<option
-							value="${name}"
-							${name == state.components[0]?.component_name
-								? "selected"
-								: ""}
-						>
-							${name}
-						</option>`
+						([name]) =>
+							/* HTML */ `<option
+								value="${name}"
+								${name == state.components[0]?.component_name
+									? "selected"
+									: ""}
+							>
+								${name}
+							</option>`
 					)
 					.join("")}
 			</select>

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

@@ -10,7 +10,7 @@ export function ComponentInputCode({
 	language: string;
 	arg_path: string[];
 }): JSX.Element {
-	return tempstream/* HTML */ `<div class="monaco-wrapper">
+	return tempstream /* HTML */ `<div class="monaco-wrapper">
 		<div data-controller="monaco" data-language="${language}">
 			<textarea
 				data-monaco-target="textarea"

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

@@ -21,7 +21,7 @@ export function ComponentInputColor<State extends JDDPageState>({
 	onchange?: string;
 	makeJDDContext: (ctx: Context) => JDDContext;
 }): JSX.Element {
-	return tempstream/* HTML */ `<div style="margin-bottom: 10px">
+	return tempstream /* HTML */ `<div style="margin-bottom: 10px">
 		<div>
 			<label>
 				${arg_path.at(-1) || ""}