@formbox/htmx 0.5.0 → 0.7.0

package/README.md

@@ -113,7 +113,18 @@ const templates = {
   ...compileTemplates({
     Form: `
       <form{{{attrs attributes}}} hx-target="#questionnaire-app" hx-swap="morphdom">
-        {{{fields}}}
+        {{{hiddenFields}}}
+        {{{shortTextStyle}}}
+        {{{titleHtml}}}
+        {{{descriptionHtml}}}
+        {{{languageSelector}}}
+        {{{errors}}}
+        {{{before}}}
+        {{{children}}}
+        {{{after}}}
+        {{{signature}}}
+        {{{paginationHtml}}}
+        {{{submitButton}}}
       </form>
     `,
   }),
@@ -162,7 +173,7 @@ Create one renderer instance for one request/render cycle:
 
 1. `new QuestionnaireRenderer(options)` creates a request-local renderer.
 2. `await renderer.process(formData)` applies submitted form state and returns submit result.
-3. `await renderer.render()` returns HTML fields for the current renderer state.
+3. `await renderer.render()` returns form HTML for the current renderer state.
 4. `renderer.getQuestionnaireResponse()` reads the current FHIR response.
 5. `renderer.dispose()` releases the underlying renderer store.
 
@@ -256,7 +267,18 @@ const templates = {
     Form: `
       <form{{{attrs attributes}}}>
         ${csrf}
-        {{{fields}}}
+        {{{hiddenFields}}}
+        {{{shortTextStyle}}}
+        {{{titleHtml}}}
+        {{{descriptionHtml}}}
+        {{{languageSelector}}}
+        {{{errors}}}
+        {{{before}}}
+        {{{children}}}
+        {{{after}}}
+        {{{signature}}}
+        {{{paginationHtml}}}
+        {{{submitButton}}}
       </form>
     `,
   }),
@@ -305,8 +327,21 @@ Callbacks and Handlebars strings can be mixed:
 ```ts
 const templates = compileTemplates({
   TextInput: `<input{{{fieldAttributes}}}{{{attr "id" id}}}>`,
-  Form({ attributes, fields }) {
-    return `<form${htmlAttributes(attributes)}>${fields}</form>`;
+  Form(properties) {
+    return `<form${htmlAttributes(properties.attributes)}>${[
+      properties.hiddenFields,
+      properties.shortTextStyle,
+      properties.titleHtml ?? "",
+      properties.descriptionHtml ?? "",
+      properties.languageSelector ?? "",
+      properties.errors ?? "",
+      properties.before ?? "",
+      properties.children,
+      properties.after ?? "",
+      properties.signature ?? "",
+      properties.paginationHtml ?? "",
+      properties.submitButton,
+    ].join("")}</form>`;
   },
 });
 ```
@@ -348,8 +383,9 @@ Available Handlebars helpers:
 - `{{{attrs attributes}}}` renders an object of escaped HTML attributes.
 - `{{{fieldAttributes}}}` renders `data-fb-link-id`, `data-fb-field`, `name`, and `hx-include` for the current field.
 
-Use triple braces for renderer-provided HTML slots such as `fields`, `children`,
-`label`, `errors`, and `customOptionForm`.
+Use triple braces for renderer-provided HTML slots such as `hiddenFields`,
+`children`, `paginationHtml`, `submitButton`, `label`, `errors`, and
+`customOptionForm`.
 
 Default templates and user templates use the same data shape. The package does
 not keep a separate JSX fallback path.

package/dist/index.d.ts

@@ -285,9 +285,9 @@ export declare type FooterTemplateProperties = Omit<TemplateBase<FooterPropertie
     readonly children: string;
 };
 
-declare type FormFieldsProperties = Omit<FormTemplateProperties, "attributes" | "fields">;
-
-export declare function formFieldsTemplate(properties: FormFieldsProperties): string;
+export declare type FormDescriptionTemplateProperties = {
+    readonly description: string;
+};
 
 declare type FormPagination = {
     current: number;
@@ -319,12 +319,21 @@ export declare type FormTemplateProperties = Omit<TemplateBase<FormProperties>,
     readonly before?: string | undefined;
     readonly children: string;
     readonly errors?: string | undefined;
-    readonly fields: string;
+    readonly hiddenFields: string;
     readonly attributes: HtmlAttributes;
+    readonly titleHtml?: string | undefined;
+    readonly descriptionHtml?: string | undefined;
     readonly languageSelector?: string | undefined;
     readonly pagination?: TemplateFormPagination | undefined;
+    readonly paginationHtml?: string | undefined;
+    readonly shortTextStyle: string;
     readonly signature?: string | undefined;
     readonly submitLabel: string;
+    readonly submitButton: string;
+};
+
+export declare type FormTitleTemplateProperties = {
+    readonly title: string;
 };
 
 declare type GroupListProperties = {
@@ -432,6 +441,17 @@ export declare function isPreservedOptionToken(token: string): boolean;
 
 declare type LabelAs = "legend" | "label" | "text";
 
+export declare type LabelContentTemplateProperties = {
+    readonly children: string;
+    readonly prefix?: string | undefined;
+    readonly shortText?: string | undefined;
+    readonly required?: boolean | undefined;
+    readonly help?: string | undefined;
+    readonly legal?: string | undefined;
+    readonly flyover?: string | undefined;
+    readonly hasShortText: boolean;
+};
+
 declare type LabelProperties = {
     prefix?: ReactNode;
     shortText?: string | undefined;
@@ -519,7 +539,23 @@ export declare function loadDefaultTemplates(): Promise<RequiredTemplates>;
 
 export declare function loadTemplates(directory: string | URL): Promise<Templates>;
 
-export declare function mediaHtml(attachment: Attachment | undefined, fallbackLabel: string, id?: string | undefined): string;
+export declare function mediaHtml(templates: Pick<RequiredTemplates, "Media">, attachment: Attachment | undefined, fallbackLabel: string, id?: string | undefined): string;
+
+export declare type MediaKind = "fallback" | "image" | "audio" | "video" | "link";
+
+export declare type MediaTemplateProperties = {
+    readonly attachment: Attachment;
+    readonly id?: string | undefined;
+    readonly label: string;
+    readonly source?: string | undefined;
+    readonly contentType?: string | undefined;
+    readonly kind: MediaKind;
+    readonly isFallback: boolean;
+    readonly isImage: boolean;
+    readonly isAudio: boolean;
+    readonly isVideo: boolean;
+    readonly isLink: boolean;
+};
 
 declare type MultiSelectInputProperties = {
     options: readonly OptionItem[];
@@ -619,6 +655,18 @@ export declare function optionValueName(path: NodePath, token: string): string;
 
 export declare const PAGE_FIELD = "fb[page]";
 
+export declare function pageHiddenField(currentPage: number | undefined): string;
+
+export declare type PaginationTemplateProperties = TemplateFormPagination & {
+    readonly actionName: string;
+    readonly previousAction: "page-prev";
+    readonly nextAction: "page-next";
+    readonly navigationLabel: string;
+    readonly currentLabel: string;
+    readonly previousTargetLabel: string;
+    readonly nextTargetLabel: string;
+};
+
 export declare function pathControlId(token: string, path: NodePath | undefined, ...parts: Array<string | number | undefined>): string | undefined;
 
 declare type PlaceholderString<Key extends string> = `${string}{${Key}}${string}`;
@@ -800,6 +848,8 @@ export declare type SelectOptionTemplateItem = TemplateOptionItem & {
     readonly selected: boolean;
 };
 
+export declare type ShortTextStyleTemplateProperties = Record<string, never>;
+
 declare type SignatureInputProperties = {
     value: string | undefined;
     id: string;
@@ -1001,6 +1051,13 @@ declare type Strings = {
 
 export declare const SUBMIT_ATTEMPTED_FIELD = "fb[submitAttempted]";
 
+export declare type SubmitButtonTemplateProperties = {
+    readonly id?: string | undefined;
+    readonly actionName: string;
+    readonly value: "submit";
+    readonly label: string;
+};
+
 declare type TabContainerProperties = {
     path?: NodePath | undefined;
     header?: ReactNode;
@@ -1090,13 +1147,13 @@ export declare type TemplateFormPagination = Omit<FormPagination, "onNext" | "on
 
 export declare type TemplateName = keyof Templates;
 
-export declare const templateNames: readonly ["TextInput", "TextArea", "NumberInput", "DateInput", "DateTimeInput", "TimeInput", "SliderInput", "SpinnerInput", "OptionDisplay", "SelectInput", "RadioButton", "RadioButtonList", "Checkbox", "CheckboxList", "MultiSelectInput", "CustomOptionForm", "Errors", "Label", "QuestionScaffold", "OptionsLoading", "Help", "Legal", "Flyover", "Header", "Footer", "Form", "Stack", "AnswerList", "AnswerScaffold", "GroupList", "GroupScaffold", "Table", "InputGroup", "FileInput", "SignatureInput", "DisplayRenderer", "TabContainer", "Link", "LanguageSelector"];
+export declare const templateNames: readonly ["TextInput", "TextArea", "NumberInput", "DateInput", "DateTimeInput", "TimeInput", "SliderInput", "SpinnerInput", "OptionDisplay", "SelectInput", "RadioButton", "RadioButtonList", "Checkbox", "CheckboxList", "MultiSelectInput", "CustomOptionForm", "Media", "Errors", "Label", "LabelContent", "QuestionScaffold", "OptionsLoading", "Help", "Legal", "Flyover", "Header", "Footer", "FormTitle", "FormDescription", "Pagination", "SubmitButton", "ShortTextStyle", "Form", "Stack", "AnswerList", "AnswerScaffold", "GroupList", "GroupScaffold", "Table", "InputGroup", "FileInput", "SignatureInput", "DisplayRenderer", "TabContainer", "Link", "LanguageSelector"];
 
 export declare type TemplateOptionItem = Omit<OptionItem, "label"> & {
     readonly label: string;
 };
 
-export declare type TemplateProperties = TextInputTemplateProperties | TextAreaTemplateProperties | NumberInputTemplateProperties | DateInputTemplateProperties | DateTimeInputTemplateProperties | TimeInputTemplateProperties | SliderInputTemplateProperties | SpinnerInputTemplateProperties | OptionDisplayTemplateProperties | SelectInputTemplateProperties | RadioButtonTemplateProperties | RadioButtonListTemplateProperties | CheckboxTemplateProperties | CheckboxListTemplateProperties | MultiSelectInputTemplateProperties | CustomOptionFormTemplateProperties | ErrorsTemplateProperties | LabelTemplateProperties | QuestionScaffoldTemplateProperties | OptionsLoadingTemplateProperties | HelpTemplateProperties | LegalTemplateProperties | FlyoverTemplateProperties | HeaderTemplateProperties | FooterTemplateProperties | FormTemplateProperties | StackTemplateProperties | AnswerListTemplateProperties | AnswerScaffoldTemplateProperties | GroupListTemplateProperties | GroupScaffoldTemplateProperties | TableTemplateProperties | InputGroupTemplateProperties | FileInputTemplateProperties | SignatureInputTemplateProperties | DisplayRendererTemplateProperties | TabContainerTemplateProperties | LinkTemplateProperties | LanguageSelectorTemplateProperties;
+export declare type TemplateProperties = TextInputTemplateProperties | TextAreaTemplateProperties | NumberInputTemplateProperties | DateInputTemplateProperties | DateTimeInputTemplateProperties | TimeInputTemplateProperties | SliderInputTemplateProperties | SpinnerInputTemplateProperties | OptionDisplayTemplateProperties | SelectInputTemplateProperties | RadioButtonTemplateProperties | RadioButtonListTemplateProperties | CheckboxTemplateProperties | CheckboxListTemplateProperties | MultiSelectInputTemplateProperties | CustomOptionFormTemplateProperties | MediaTemplateProperties | ErrorsTemplateProperties | LabelTemplateProperties | LabelContentTemplateProperties | QuestionScaffoldTemplateProperties | OptionsLoadingTemplateProperties | HelpTemplateProperties | LegalTemplateProperties | FlyoverTemplateProperties | HeaderTemplateProperties | FooterTemplateProperties | FormTitleTemplateProperties | FormDescriptionTemplateProperties | PaginationTemplateProperties | SubmitButtonTemplateProperties | ShortTextStyleTemplateProperties | FormTemplateProperties | StackTemplateProperties | AnswerListTemplateProperties | AnswerScaffoldTemplateProperties | GroupListTemplateProperties | GroupScaffoldTemplateProperties | TableTemplateProperties | InputGroupTemplateProperties | FileInputTemplateProperties | SignatureInputTemplateProperties | DisplayRendererTemplateProperties | TabContainerTemplateProperties | LinkTemplateProperties | LanguageSelectorTemplateProperties;
 
 export declare interface Templates {
     readonly TextInput?: Template<TextInputTemplateProperties> | undefined;
@@ -1115,8 +1172,10 @@ export declare interface Templates {
     readonly CheckboxList?: Template<CheckboxListTemplateProperties> | undefined;
     readonly MultiSelectInput?: Template<MultiSelectInputTemplateProperties> | undefined;
     readonly CustomOptionForm?: Template<CustomOptionFormTemplateProperties> | undefined;
+    readonly Media?: Template<MediaTemplateProperties> | undefined;
     readonly Errors?: Template<ErrorsTemplateProperties> | undefined;
     readonly Label?: Template<LabelTemplateProperties> | undefined;
+    readonly LabelContent?: Template<LabelContentTemplateProperties> | undefined;
     readonly QuestionScaffold?: Template<QuestionScaffoldTemplateProperties> | undefined;
     readonly OptionsLoading?: Template<OptionsLoadingTemplateProperties> | undefined;
     readonly Help?: Template<HelpTemplateProperties> | undefined;
@@ -1124,6 +1183,11 @@ export declare interface Templates {
     readonly Flyover?: Template<FlyoverTemplateProperties> | undefined;
     readonly Header?: Template<HeaderTemplateProperties> | undefined;
     readonly Footer?: Template<FooterTemplateProperties> | undefined;
+    readonly FormTitle?: Template<FormTitleTemplateProperties> | undefined;
+    readonly FormDescription?: Template<FormDescriptionTemplateProperties> | undefined;
+    readonly Pagination?: Template<PaginationTemplateProperties> | undefined;
+    readonly SubmitButton?: Template<SubmitButtonTemplateProperties> | undefined;
+    readonly ShortTextStyle?: Template<ShortTextStyleTemplateProperties> | undefined;
     readonly Form?: Template<FormTemplateProperties> | undefined;
     readonly Stack?: Template<StackTemplateProperties> | undefined;
     readonly AnswerList?: Template<AnswerListTemplateProperties> | undefined;

package/dist/index.js

@@ -59564,8 +59564,10 @@ const templateNames = [
   "CheckboxList",
   "MultiSelectInput",
   "CustomOptionForm",
+  "Media",
   "Errors",
   "Label",
+  "LabelContent",
   "QuestionScaffold",
   "OptionsLoading",
   "Help",
@@ -59573,6 +59575,11 @@ const templateNames = [
   "Flyover",
   "Header",
   "Footer",
+  "FormTitle",
+  "FormDescription",
+  "Pagination",
+  "SubmitButton",
+  "ShortTextStyle",
   "Form",
   "Stack",
   "AnswerList",
@@ -59686,43 +59693,30 @@ 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.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>`
-  ].join("");
+function pageHiddenField(currentPage) {
+  return `<input type="hidden" name="${PAGE_FIELD}" value="${String(currentPage ?? 1)}">`;
 }
 function fieldAttributes$1(path2, field) {
   if (field === "signature") {
@@ -59861,19 +59855,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,
@@ -61560,6 +61541,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,
@@ -61570,27 +61553,68 @@ 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("");
   return renderTemplate(templates.Form, {
     ...formProperties,
-    attributes: { id: id2, ...defaultAttributes(action2) },
-    fields
+    attributes: { id: id2, ...defaultAttributes(action2) }
   });
 }
+function formatPageString(template, page) {
+  return template.replaceAll("{page}", String(page));
+}
 function GroupList(properties) {
   const { templates, token } = useHtmxTheme();
   const renderHtml = useHtml();
@@ -61689,14 +61713,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,
@@ -61710,10 +61739,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")
@@ -61847,7 +61877,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)
   });
@@ -62177,7 +62211,7 @@ function renderStoreFields(store, templates, action2) {
   const htmxTheme = {
     templates,
     token: store.token,
-    hiddenFields: renderHiddenFieldsForStore(store),
+    hiddenFields: renderHiddenFieldsForStore(store, templates),
     activeTabValue: activeTab,
     action: action2
   };
@@ -62221,7 +62255,7 @@ function ensureServerRenderableRepeatQuestions(store) {
     }
   });
 }
-function renderHiddenFieldsForStore(store) {
+function renderHiddenFieldsForStore(store, templates) {
   const renderedNodes = /* @__PURE__ */ new Set([
     ...store.headerNodes,
     ...store.contentNodes,
@@ -62232,10 +62266,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) {
@@ -62245,7 +62279,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,30 @@
 {{!--
 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.
 - 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.

package/dist/templates/Media.html.hbs

@@ -0,0 +1,29 @@
+{{!--
+Template: Media
+
+Purpose:
+- Renders item or answer-option attachment media and fallback links.
+
+Inputs:
+- attachment: source attachment object.
+- id: stable media id when available.
+- label: accessible fallback label.
+- source: resolved URL or data URL, if available.
+- contentType: lower-cased attachment content type, if available.
+- kind/isFallback/isImage/isAudio/isVideo/isLink: selected media rendering branch.
+--}}
+{{#if isFallback}}
+  <span>{{label}}</span>
+{{/if}}
+{{#if isImage}}
+  <img{{{attr "src" source}}}{{{attr "alt" label}}}>
+{{/if}}
+{{#if isAudio}}
+  <audio controls{{{attr "id" id}}}{{{attr "src" source}}}></audio>
+{{/if}}
+{{#if isVideo}}
+  <video controls{{{attr "id" id}}}{{{attr "src" source}}}></video>
+{{/if}}
+{{#if isLink}}
+  <a{{{attr "id" id}}}{{{attr "href" source}}} target="_blank" rel="noreferrer">{{label}}</a>
+{{/if}}

package/dist/templates/MultiSelectInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: MultiSelectInput
 
+Purpose:
+- Renders a searchable multi-select choice control and preserved selections.
+
 Inputs:
 - id: fieldset id.
 - options: items with id, token, label, selected, disabled, and hiddenInput.

package/dist/templates/NumberInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: NumberInput
 
+Purpose:
+- Renders a numeric answer control with unit and comparator context.
+
 Inputs:
 - id: control id.
 - value/inputValue: numeric answer value prepared for the native input.

package/dist/templates/OptionDisplay.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: OptionDisplay
 
+Purpose:
+- Renders the visible content for one answer option.
+
 Inputs:
 - children: rendered option text.
 - prefix: optional option prefix.

package/dist/templates/OptionsLoading.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: OptionsLoading
 
+Purpose:
+- Renders the loading indicator for asynchronously resolved answer options.
+
 Inputs:
 - isLoading: true when options are loading.
 - loadingLabel: loading message text.

package/dist/templates/Pagination.html.hbs

@@ -0,0 +1,24 @@
+{{!--
+Template: Pagination
+
+Purpose:
+- Renders page navigation controls for paginated questionnaires.
+
+Inputs:
+- current/total: current page number and total page count.
+- disabledPrev/disabledNext: whether each navigation action is unavailable.
+- actionName: form action field name.
+- previousAction/nextAction: submitted action values for page navigation.
+- previousId/nextId: stable button ids.
+- previousLabel/nextLabel: visible button labels.
+- navigationLabel/currentLabel/previousTargetLabel/nextTargetLabel: accessible pagination labels.
+--}}
+<nav>
+  {{#unless disabledPrev}}
+    <button type="submit"{{{attr "id" previousId}}}{{{attr "name" actionName}}}{{{attr "value" previousAction}}}>{{previousLabel}}</button>
+  {{/unless}}
+  <span>{{current}} / {{total}}</span>
+  {{#unless disabledNext}}
+    <button type="submit"{{{attr "id" nextId}}}{{{attr "name" actionName}}}{{{attr "value" nextAction}}}>{{nextLabel}}</button>
+  {{/unless}}
+</nav>

package/dist/templates/QuestionScaffold.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: QuestionScaffold
 
+Purpose:
+- Renders a question wrapper with header, errors, answer controls, and expanded content.
+
 Inputs:
 - linkId: question link id.
 - header/children/expandedChildren/errors/signature: rendered question sections.

package/dist/templates/RadioButton.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: RadioButton
 
+Purpose:
+- Renders one radio answer option input and its visible label.
+
 Inputs:
 - id: control id.
 - groupName: source radio group name, if supplied.

package/dist/templates/RadioButtonList.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: RadioButtonList
 
+Purpose:
+- Renders a single-select choice question as a radio option list.
+
 Inputs:
 - id: fieldset id.
 - options: items with id, token, label, checked, and disabled.

package/dist/templates/SelectInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: SelectInput
 
+Purpose:
+- Renders a select/open-choice dropdown with search and custom-option controls.
+
 Inputs:
 - id: select id.
 - value: selected option token.

package/dist/templates/ShortTextStyle.html.hbs

@@ -0,0 +1,10 @@
+{{!--
+Template: ShortTextStyle
+
+Purpose:
+- Renders responsive CSS that swaps long labels for short labels on narrow screens.
+
+Inputs:
+- no inputs.
+--}}
+<style>[data-fb-label-short]{display:none}@media (max-width:40rem){[data-fb-label-full]{display:none}[data-fb-label-short]{display:inline}}</style>

package/dist/templates/SignatureInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: SignatureInput
 
+Purpose:
+- Renders a signature answer control and its submitted value field.
+
 Inputs:
 - id: control id.
 - value/inputValue: serialized signature value.

package/dist/templates/SliderInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: SliderInput
 
+Purpose:
+- Renders a numeric answer as a range slider.
+
 Inputs:
 - id: control id.
 - value/inputValue: numeric answer value prepared for the native range input.

package/dist/templates/SpinnerInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: SpinnerInput
 
+Purpose:
+- Renders a numeric answer as a stepper-style input.
+
 Inputs:
 - id: control id.
 - value/inputValue: numeric answer value prepared for the native number input.

package/dist/templates/Stack.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Stack
 
+Purpose:
+- Renders a generic stack of child content.
+
 Inputs:
 - children: rendered stacked content.
 --}}

package/dist/templates/SubmitButton.html.hbs

@@ -0,0 +1,13 @@
+{{!--
+Template: SubmitButton
+
+Purpose:
+- Renders the main form submit action.
+
+Inputs:
+- id: stable submit button id.
+- actionName: form action field name.
+- value: submitted action value.
+- label: visible submit label.
+--}}
+<button type="submit"{{{attr "id" id}}}{{{attr "name" actionName}}}{{{attr "value" value}}}>{{label}}</button>

package/dist/templates/TabContainer.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: TabContainer
 
+Purpose:
+- Renders tabbed group navigation and the active panel content.
+
 Inputs:
 - linkId: tab group link id.
 - header/errors: rendered tab group sections.

package/dist/templates/Table.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: Table
 
+Purpose:
+- Renders matrix-style controls from prepared columns, rows, and cells.
+
 Inputs:
 - hasRowHeader: true when rows need a header column.
 - columns: column items with token, content, errors, width, widthStyle, and isLoading.

package/dist/templates/TextArea.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: TextArea
 
+Purpose:
+- Renders a multi-line text answer control.
+
 Inputs:
 - id: control id.
 - value: submitted text value.

package/dist/templates/TextInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: TextInput
 
+Purpose:
+- Renders a scalar text-style answer control.
+
 Inputs:
 - id: control id.
 - type/inputType: requested and rendered native input type.

package/dist/templates/TimeInput.html.hbs

@@ -1,6 +1,9 @@
 {{!--
 Template: TimeInput
 
+Purpose:
+- Renders a time answer control.
+
 Inputs:
 - id: control id.
 - value: submitted time string.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbox/htmx",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
   "private": false,
   "type": "module",
@@ -45,8 +45,8 @@
   },
   "scripts": {
     "build": "tsc -b ./tsconfig.lib.json && vite build",
-    "demo": "bun run ./demo/server.ts",
-    "dev": "bun run ./demo/server.ts",
+    "demo": "bun run build && bun ./demo/server.ts",
+    "dev": "bun run build && bun ./demo/server.ts",
     "lint": "eslint .",
     "test:e2e": "pnpm run build && playwright test e2e",
     "typecheck": "tsc --noEmit -p tsconfig.lib.json",