@formbox/htmx 0.4.4 → 0.6.0

package/dist/index.js

@@ -1,18 +1,43 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "react";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "preact/compat";
 import bundledStrings from "@formbox/strings";
 import { computed, action, makeObservable, observable, runInAction, override, reaction, comparer, when } from "mobx";
-import { CustomItemExtensionsProvider, useStrings, CustomQuestionnaireExtensionsProvider, StringsContext } from "@formbox/theme";
-import { observer } from "mobx-react-lite";
 import { fromPromise } from "mobx-utils";
 import { R4AttachmentAdapter, R4QuestionnaireItemAdapter, R4QuestionnaireResponseAdapter, R5AttachmentAdapter, R5QuestionnaireItemAdapter, R5QuestionnaireResponseAdapter } from "@formbox/fhir";
 import { readdir, readFile } from "node:fs/promises";
 import path from "node:path";
 import Handlebars from "handlebars";
-import { renderToStaticMarkup } from "react-dom/server.node";
+import { renderToStaticMarkup } from "preact-render-to-string";
+const StringsContext = createContext(
+  void 0
+);
+function useStrings() {
+  const strings2 = useContext(StringsContext);
+  if (strings2 == void 0) {
+    throw new Error("StringsContext.Provider is required");
+  }
+  return strings2;
+}
+const CustomQuestionnaireExtensionsContext = createContext(void 0);
+const CustomItemExtensionsContext = createContext(void 0);
+function CustomQuestionnaireExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomQuestionnaireExtensionsContext.Provider, { value, children });
+}
+function CustomItemExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomItemExtensionsContext.Provider, { value, children });
+}
+function observer(component) {
+  return component;
+}
 const ITEM_CONTROLS = [
   // display
   "inline",
@@ -59539,8 +59564,10 @@ const templateNames = [
   "CheckboxList",
   "MultiSelectInput",
   "CustomOptionForm",
+  "Media",
   "Errors",
   "Label",
+  "LabelContent",
   "QuestionScaffold",
   "OptionsLoading",
   "Help",
@@ -59548,6 +59575,11 @@ const templateNames = [
   "Flyover",
   "Header",
   "Footer",
+  "FormTitle",
+  "FormDescription",
+  "Pagination",
+  "SubmitButton",
+  "ShortTextStyle",
   "Form",
   "Stack",
   "AnswerList",
@@ -59661,44 +59693,47 @@ function isDefined(value) {
 function isPreservedOptionToken$1(token) {
   return token.includes("__custom__") || token.includes("__legacy__");
 }
-function mediaHtml(attachment, fallbackLabel, id2) {
+function mediaHtml(templates, attachment, fallbackLabel, id2) {
   if (attachment === void 0) {
     return "";
   }
   const label = attachment.title ?? attachment.url ?? fallbackLabel;
   const source = attachment.url ?? attachmentSource(attachment);
   const contentType = attachment.contentType?.toLowerCase();
-  if (source === void 0) {
-    return `<span>${escapeHtml$1(label)}</span>`;
-  }
-  if (contentType?.startsWith("image/")) {
-    return `<img${attribute("src", source)}${attribute("alt", label)}>`;
-  }
-  if (contentType?.startsWith("audio/")) {
-    return `<audio controls${attribute("id", id2)}${attribute("src", source)}></audio>`;
-  }
-  if (contentType?.startsWith("video/")) {
-    return `<video controls${attribute("id", id2)}${attribute("src", source)}></video>`;
-  }
-  return `<a${attribute("id", id2)}${attribute("href", source)} target="_blank" rel="noreferrer">${escapeHtml$1(label)}</a>`;
+  const kind = source === void 0 ? "fallback" : contentType?.startsWith("image/") ? "image" : contentType?.startsWith("audio/") ? "audio" : contentType?.startsWith("video/") ? "video" : "link";
+  return templates.Media({
+    attachment,
+    id: id2,
+    label,
+    source,
+    contentType,
+    kind,
+    isFallback: kind === "fallback",
+    isImage: kind === "image",
+    isAudio: kind === "audio",
+    isVideo: kind === "video",
+    isLink: kind === "link"
+  });
 }
 function formFieldsTemplate(properties) {
-  const shortTextStyle = properties.children.includes("data-fb-label-short") ? "<style>[data-fb-label-short]{display:none}@media (max-width:40rem){[data-fb-label-full]{display:none}[data-fb-label-short]{display:inline}}</style>" : void 0;
   return [
-    shortTextStyle ?? "",
-    `<input type="hidden" name="${PAGE_FIELD}" value="${String(properties.pagination?.current ?? 1)}">`,
-    properties.title ? `<h1>${escapeHtml$1(properties.title)}</h1>` : "",
-    properties.description ? `<p>${escapeHtml$1(properties.description)}</p>` : "",
+    properties.hiddenFields,
+    properties.shortTextStyle,
+    properties.titleHtml ?? "",
+    properties.descriptionHtml ?? "",
     properties.languageSelector ?? "",
     properties.errors ?? "",
     properties.before ?? "",
     properties.children,
     properties.after ?? "",
     properties.signature ?? "",
-    renderPagination(properties),
-    `<button type="submit"${attribute("id", stableId(properties.id, "submit"))} name="${ACTION_FIELD}" value="submit">${escapeHtml$1(properties.submitLabel)}</button>`
+    properties.paginationHtml ?? "",
+    properties.submitButton
   ].join("");
 }
+function pageHiddenField(currentPage) {
+  return `<input type="hidden" name="${PAGE_FIELD}" value="${String(currentPage ?? 1)}">`;
+}
 function fieldAttributes$1(path2, field) {
   if (field === "signature") {
     const signaturePath = path2 ?? [];
@@ -59836,19 +59871,6 @@ function defaultAttributes(action2) {
     "hx-include": "closest form"
   };
 }
-function renderPagination(properties) {
-  const pagination = properties.pagination;
-  if (!pagination) {
-    return "";
-  }
-  return [
-    "<nav>",
-    pagination.disabledPrev ? "" : `<button type="submit"${attribute("id", pagination.previousId)} name="${ACTION_FIELD}" value="page-prev">${escapeHtml$1(pagination.previousLabel)}</button>`,
-    `<span>${String(pagination.current)} / ${String(pagination.total)}</span>`,
-    pagination.disabledNext ? "" : `<button type="submit"${attribute("id", pagination.nextId)} name="${ACTION_FIELD}" value="page-next">${escapeHtml$1(pagination.nextLabel)}</button>`,
-    "</nav>"
-  ].join("");
-}
 function tableCell(cell, renderHtml) {
   return {
     token: cell.token,
@@ -61535,6 +61557,8 @@ function Form(properties) {
   const renderHtml = useHtml();
   const strings2 = useStrings();
   const id2 = properties.id ?? token;
+  const submitLabel = strings2.form.submit;
+  const children = renderHtml(properties.children);
   const pagination = properties.pagination ? {
     current: properties.pagination.current,
     total: properties.pagination.total,
@@ -61545,27 +61569,70 @@ function Form(properties) {
     previousId: stableId(id2, "pagination", "previous"),
     previousLabel: strings2.pagination.previous
   } : void 0;
+  const titleHtml = properties.title ? templates.FormTitle({ title: properties.title }) : void 0;
+  const descriptionHtml = properties.description ? templates.FormDescription({
+    description: properties.description
+  }) : void 0;
+  const paginationHtml = pagination ? templates.Pagination({
+    ...pagination,
+    actionName: ACTION_FIELD,
+    previousAction: "page-prev",
+    nextAction: "page-next",
+    navigationLabel: strings2.pagination.navigation,
+    currentLabel: formatPageString(
+      strings2.pagination.pageLabel,
+      pagination.current
+    ),
+    previousTargetLabel: formatPageString(
+      strings2.pagination.previousTargetPage,
+      Math.max(pagination.current - 1, 1)
+    ),
+    nextTargetLabel: formatPageString(
+      strings2.pagination.nextTargetPage,
+      Math.min(pagination.current + 1, pagination.total)
+    )
+  }) : void 0;
+  const submitButton = templates.SubmitButton({
+    id: stableId(id2, "submit"),
+    actionName: ACTION_FIELD,
+    value: "submit",
+    label: submitLabel
+  });
+  const rendererHiddenFields = [
+    hiddenFields,
+    pageHiddenField(pagination?.current)
+  ].filter(Boolean).join("");
+  const shortTextStyle = children.includes("data-fb-label-short") ? templates.ShortTextStyle({}) : "";
   const formProperties = {
     id: id2,
     title: properties.title,
     description: properties.description,
     customExtensions: properties.customExtensions,
+    hiddenFields: rendererHiddenFields,
+    titleHtml,
+    descriptionHtml,
     after: renderHtml(properties.after),
     before: renderHtml(properties.before),
-    children: renderHtml(properties.children),
+    children,
     errors: renderHtml(properties.errors),
     languageSelector: renderHtml(properties.languageSelector),
     pagination,
+    paginationHtml,
+    shortTextStyle,
     signature: renderHtml(properties.signature),
-    submitLabel: strings2.form.submit
+    submitLabel,
+    submitButton
   };
-  const fields = [hiddenFields, formFieldsTemplate(formProperties)].join("");
+  const fields = formFieldsTemplate(formProperties);
   return renderTemplate(templates.Form, {
     ...formProperties,
     attributes: { id: id2, ...defaultAttributes(action2) },
     fields
   });
 }
+function formatPageString(template, page) {
+  return template.replaceAll("{page}", String(page));
+}
 function GroupList(properties) {
   const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
@@ -61664,14 +61731,19 @@ function Label(properties) {
   const strings2 = useStrings();
   const children = renderHtml(properties.children);
   const prefix2 = properties.prefix === void 0 ? void 0 : renderHtml(properties.prefix);
-  const content = [
-    prefix2 === void 0 ? "" : `<span>${prefix2} </span>`,
-    properties.shortText === void 0 ? children : `<span data-fb-label-full>${children}</span><span data-fb-label-short>${escapeHtml$1(properties.shortText)}</span>`,
-    properties.required ? '<span aria-hidden="true"> *</span>' : "",
-    renderHtml(properties.help),
-    renderHtml(properties.legal),
-    renderHtml(properties.flyover)
-  ].join("");
+  const help = renderHtml(properties.help);
+  const legal = renderHtml(properties.legal);
+  const flyover = renderHtml(properties.flyover);
+  const content = templates.LabelContent({
+    children,
+    prefix: prefix2,
+    shortText: properties.shortText,
+    required: properties.required,
+    help,
+    legal,
+    flyover,
+    hasShortText: properties.shortText !== void 0
+  });
   return renderTemplate(templates.Label, {
     shortText: properties.shortText,
     isExpanded: properties.isExpanded,
@@ -61685,10 +61757,11 @@ function Label(properties) {
     content,
     isLegend: properties.as === "legend",
     isText: properties.as === "text",
-    help: renderHtml(properties.help),
-    legal: renderHtml(properties.legal),
-    flyover: renderHtml(properties.flyover),
+    help,
+    legal,
+    flyover,
     media: mediaHtml(
+      templates,
       properties.media,
       strings2.inputs.attachmentLabel,
       stableId(properties.id, "media")
@@ -61822,7 +61895,11 @@ function OptionDisplay(properties) {
   const strings2 = useStrings();
   return renderTemplate(templates.OptionDisplay, {
     prefix: properties.prefix === void 0 ? void 0 : escapeHtml$1(properties.prefix),
-    media: mediaHtml(properties.media, strings2.inputs.attachmentLabel),
+    media: mediaHtml(
+      templates,
+      properties.media,
+      strings2.inputs.attachmentLabel
+    ),
     attachmentLabel: strings2.inputs.attachmentLabel,
     children: renderHtml(properties.children)
   });
@@ -62152,7 +62229,7 @@ function renderStoreFields(store, templates, action2) {
   const htmxTheme = {
     templates,
     token: store.token,
-    hiddenFields: renderHiddenFieldsForStore(store),
+    hiddenFields: renderHiddenFieldsForStore(store, templates),
     activeTabValue: activeTab,
     action: action2
   };
@@ -62196,7 +62273,7 @@ function ensureServerRenderableRepeatQuestions(store) {
     }
   });
 }
-function renderHiddenFieldsForStore(store) {
+function renderHiddenFieldsForStore(store, templates) {
   const renderedNodes = /* @__PURE__ */ new Set([
     ...store.headerNodes,
     ...store.contentNodes,
@@ -62207,10 +62284,10 @@ function renderHiddenFieldsForStore(store) {
     store.nodes.map(
       (node) => renderHiddenFieldsForNode(node, [], renderedNodes.has(node))
     ).join(""),
-    renderHiddenNodeIssues(store)
+    renderHiddenNodeIssues(store, templates)
   ].join("");
 }
-function renderHiddenNodeIssues(store) {
+function renderHiddenNodeIssues(store, templates) {
   const messages = [];
   store.walkNodes({
     node(node) {
@@ -62220,7 +62297,11 @@ function renderHiddenNodeIssues(store) {
       hiddenNodeIssues(node).map((issue) => getIssueMessage(issue)).filter((message) => message !== void 0).forEach((message) => messages.push(message));
     }
   });
-  return messages.length === 0 ? "" : `<ul class="fb-errors">${messages.map((message) => `<li>${escapeHtml(message)}</li>`).join("")}</ul>`;
+  return templates.Errors({
+    id: `${store.token}__hidden-node-issues`,
+    hasMessages: messages.length > 0,
+    messages: messages.map((message) => ({ html: escapeHtml(message) }))
+  });
 }
 function hiddenNodeIssues(node) {
   if (node.issues.length > 0) {

package/dist/templates/AnswerList.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: AnswerList
 
+Purpose:
+- Renders a repeated answer collection and its add-answer action.
+
 Inputs:
 - children: rendered repeated answer rows.
 - hasCount/countName/count: hidden occurrence count state.

package/dist/templates/AnswerScaffold.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: AnswerScaffold
 
+Purpose:
+- Renders one answer instance, including its controls, errors, and remove action.
+
 Inputs:
 - control: rendered answer control.
 - errors: rendered answer errors.

package/dist/templates/Checkbox.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Checkbox
 
+Purpose:
+- Renders one checkbox answer option input and its visible label.
+
 Inputs:
 - id: control id.
 - checkedValue/uncheckedValue: submitted values for checked and unchecked states.

package/dist/templates/CheckboxList.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: CheckboxList
 
+Purpose:
+- Renders a repeating choice question as a checkbox option list.
+
 Inputs:
 - id: fieldset id.
 - options: items with id, token, label, selected, disabled, and hiddenInput.

package/dist/templates/CustomOptionForm.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: CustomOptionForm
 
+Purpose:
+- Renders the inline custom/open-choice value editor and its actions.
+
 Inputs:
 - content: rendered custom option fields.
 - errors: rendered validation errors.

package/dist/templates/DateInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: DateInput
 
+Purpose:
+- Renders a date answer control and its native field constraints.
+
 Inputs:
 - id: control id.
 - inputType: date or text fallback input type.

package/dist/templates/DateTimeInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: DateTimeInput
 
+Purpose:
+- Renders a date-time answer control and its preserved baseline value.
+
 Inputs:
 - id: control id.
 - inputType: datetime-local or text fallback input type.

package/dist/templates/DisplayRenderer.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: DisplayRenderer
 
+Purpose:
+- Renders display-only item content.
+
 Inputs:
 - linkId: display item link id.
 - children: rendered display html.

package/dist/templates/Errors.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Errors
 
+Purpose:
+- Renders visible validation or rendering issue messages for a field or form surface.
+
 Inputs:
 - id: error container id.
 - messages: escaped validation messages as html entries.

package/dist/templates/FileInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: FileInput
 
+Purpose:
+- Renders an attachment file control, preserved value, and clear action.
+
 Inputs:
 - id: control id.
 - value/hiddenValue: current attachment and hidden JSON mirror.

package/dist/templates/Flyover.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Flyover
 
+Purpose:
+- Renders flyover guidance as an accessible disclosure control.
+
 Inputs:
 - id: tooltip id.
 - children: rendered flyover content.

package/dist/templates/Footer.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Footer
 
+Purpose:
+- Renders footer display content.
+
 Inputs:
 - linkId: item link id.
 - children: rendered footer content.

package/dist/templates/Form.html.hbs

@@ -1,13 +1,31 @@
 {{!--
 Template: Form
 
+Purpose:
+- Renders the outer form element and the top-level form sections.
+
 Inputs:
 - attributes: native form attributes generated by the renderer.
-- fields: full rendered field html.
+- hiddenFields: renderer-owned hidden protocol field html.
+- fields: legacy full rendered field html.
 - customExtensions: source extension values, if supplied.
-- title/description/languageSelector/errors/before/children/after/signature: source sections already included in fields.
-- pagination/submitLabel: source action state already included in fields.
+- shortTextStyle: responsive short-label CSS markup when short labels are present.
+- titleHtml/descriptionHtml/languageSelector/errors/before/children/after/signature: rendered form sections.
+- paginationHtml: rendered pagination controls, if available.
+- submitButton: rendered submit control.
+- title/description/pagination/submitLabel: source values for custom form templates.
 --}}
 <form{{{attrs attributes}}}>
-  {{{fields}}}
+  {{{hiddenFields}}}
+  {{{shortTextStyle}}}
+  {{{titleHtml}}}
+  {{{descriptionHtml}}}
+  {{{languageSelector}}}
+  {{{errors}}}
+  {{{before}}}
+  {{{children}}}
+  {{{after}}}
+  {{{signature}}}
+  {{{paginationHtml}}}
+  {{{submitButton}}}
 </form>

package/dist/templates/FormDescription.html.hbs

@@ -0,0 +1,10 @@
+{{!--
+Template: FormDescription
+
+Purpose:
+- Renders the questionnaire description slot.
+
+Inputs:
+- description: localized questionnaire description text.
+--}}
+<p>{{description}}</p>

package/dist/templates/FormTitle.html.hbs

@@ -0,0 +1,10 @@
+{{!--
+Template: FormTitle
+
+Purpose:
+- Renders the questionnaire title slot.
+
+Inputs:
+- title: localized questionnaire title text.
+--}}
+<h1>{{title}}</h1>

package/dist/templates/GroupList.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: GroupList
 
+Purpose:
+- Renders a repeated group collection and its add-group action.
+
 Inputs:
 - linkId: repeated group link id.
 - header/errors/children: rendered group list sections.

package/dist/templates/GroupScaffold.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: GroupScaffold
 
+Purpose:
+- Renders one group instance, including header, errors, children, and remove action.
+
 Inputs:
 - linkId: group link id.
 - header/children/expandedChildren/errors/signature: rendered group sections.

package/dist/templates/Header.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Header
 
+Purpose:
+- Renders header display content.
+
 Inputs:
 - linkId: item link id.
 - children: rendered header content.

package/dist/templates/Help.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Help
 
+Purpose:
+- Renders help text as an accessible disclosure control.
+
 Inputs:
 - id: tooltip id.
 - children: rendered help content.

package/dist/templates/InputGroup.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: InputGroup
 
+Purpose:
+- Renders grouped input fragments that belong to one answer control.
+
 Inputs:
 - children: rendered grouped input controls.
 - spans: source layout spans, if supplied.

package/dist/templates/Label.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Label
 
+Purpose:
+- Renders the label, legend, or text wrapper around item label content.
+
 Inputs:
 - id/htmlFor: label id and target control id.
 - as/isLegend/isText: rendered label element kind.

package/dist/templates/LabelContent.html.hbs

@@ -0,0 +1,15 @@
+{{!--
+Template: LabelContent
+
+Purpose:
+- Renders the inner label text, prefix, required marker, and support controls.
+
+Inputs:
+- children: rendered label text html.
+- prefix: rendered prefix html, if supplied.
+- shortText: responsive short label text, if supplied.
+- required: true when required marker should render.
+- help/legal/flyover: rendered extension control html.
+- hasShortText: true when shortText is available.
+--}}
+{{#if prefix}}<span>{{{prefix}}} </span>{{/if}}{{#if hasShortText}}<span data-fb-label-full>{{{children}}}</span><span data-fb-label-short>{{shortText}}</span>{{else}}{{{children}}}{{/if}}{{#if required}}<span aria-hidden="true"> *</span>{{/if}}{{{help}}}{{{legal}}}{{{flyover}}}

package/dist/templates/LanguageSelector.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: LanguageSelector
 
+Purpose:
+- Renders the form language selection control.
+
 Inputs:
 - id: select id.
 - name: generated language field name.

package/dist/templates/Legal.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Legal
 
+Purpose:
+- Renders legal text as an accessible disclosure control.
+
 Inputs:
 - id: dialog id.
 - children: rendered legal content.

package/dist/templates/Link.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Link
 
+Purpose:
+- Renders hyperlink display content.
+
 Inputs:
 - id: link id.
 - href: link target.