@dmitryvim/form-builder 0.2.29 → 0.2.32

package/dist/types/components/file/dom.d.ts

@@ -1,16 +1,15 @@
 import type { State } from "../../types/state.js";
-export declare const TILE_SIZE = "160px";
 /**
- * Create a base square tile element (TILE_SIZE × TILE_SIZE).
- * Applies .fb-tile so theme variables control background/radius.
+ * Create a base square tile element. Sizing comes from CSS — `.fb-tile` and
+ * its descendants resolve aspect-ratio/dimensions via the theme variables.
  */
 export declare function createFileTile(): HTMLElement;
 /**
- * Show an inline error message below the nearest .space-y-2 ancestor.
+ * Show an inline error message below the nearest [data-files-wrapper] ancestor.
  */
 export declare function showFileError(container: HTMLElement, message: string): void;
 /**
- * Remove any inline file error message below the nearest .space-y-2 ancestor.
+ * Remove any inline file error message below the nearest [data-files-wrapper] ancestor.
  */
 export declare function clearFileError(container: HTMLElement): void;
 /**

package/dist/types/components/file/preview.d.ts

@@ -14,6 +14,10 @@ export interface TileActionOptions {
      * just-uploaded file.
      */
     meta?: ResourceMetadata;
+    /** Single-only: replace current file by triggering the upload picker. */
+    replaceHandler?: (() => void) | null;
+    /** Single-only: open the host-owned library picker to pick a replacement. */
+    libraryHandler?: (() => void) | null;
 }
 /**
  * Build a horizontal row of icon-only action buttons for a file tile.
@@ -22,6 +26,7 @@ export interface TileActionOptions {
  * Remove is rendered only in edit mode.
  */
 export declare function createTileActions(options: TileActionOptions): HTMLElement;
+export declare function getLocalFileUrl(file: File): string;
 export declare function releaseLocalFileUrl(file: File | undefined | null): void;
 /**
  * Populate a single-file edit-mode container with a file preview.

package/dist/types/components/file/render-edit.d.ts

@@ -1,6 +1,5 @@
 import type { State } from "../../types/state.js";
 import type { FileElement, FilesElement, RenderContext } from "../../types/index.js";
-export { TILE_SIZE } from "./dom.js";
 export interface RenderPillsOptions {
     container: HTMLElement;
     rids: string[] | null;
@@ -11,8 +10,16 @@ export interface RenderPillsOptions {
     maxCount?: number;
     isReadonly?: boolean;
     onLibraryPick?: (() => void) | null;
+    element?: {
+        maxSize?: number;
+        accept?: unknown;
+    };
+    onClearAll?: () => void;
+    openPicker?: () => void;
 }
 export declare function renderResourcePills(opts: RenderPillsOptions): void;
 export declare function renderFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/** Legacy `files` element — multi-file with no upper bound. */
 export declare function renderFilesElementEdit(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/** `file` element with `multiple: true` — multi-file honouring maxCount. */
 export declare function renderMultipleFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

package/dist/types/components/file/render-readonly.d.ts

@@ -1,18 +1,15 @@
 import type { State } from "../../types/state.js";
 import type { FileElement, FilesElement, RenderContext } from "../../types/index.js";
 /**
- * Render a compact 160×160 readonly tile for a single-file field.
+ * Render a 220px readonly single-file container (object-contain preview + filename pill).
  * If no prefill: shows a styled empty placeholder.
  */
 export declare function renderFileElementReadonly(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 /**
- * Render a tile row for a readonly multi-file field.
- *
- * Issue 2 fix: exactly N tile elements for N files — no hidden pill stubs.
- * The [data-files-wrapper] element carries data-resource-ids so validation
- * can read IDs without touching the tile DOM.
+ * Render a CSS grid of readonly preview tiles.
+ * No add tile, no remove buttons, no drag handles.
  */
-export declare function renderMultiFileReadonly(rids: string[], state: State, wrapper: HTMLElement, pathKey: string, marginTop?: string): void;
+export declare function renderMultiFileReadonly(rids: string[], state: State, wrapper: HTMLElement, pathKey: string, _marginTop?: string): void;
 /**
  * Render legacy `files` element in readonly mode.
  */

package/dist/types/components/file/upload.d.ts

@@ -8,6 +8,12 @@ export interface FileDeps {
     setupDrop?: (container: HTMLElement) => void;
     /** Called by the tile's remove button in single-file edit mode */
     onRemove?: () => void;
+    /**
+     * Optional override for post-upload rendering of a single-file field.
+     * When provided, called instead of renderSingleFileEditTile so the
+     * render-edit layer can use the new 220px filled-state container.
+     */
+    onAfterUpload?: (container: HTMLElement, rid: string) => void;
 }
 export interface HandleFileSelectOptions {
     file: File;

package/dist/types/components/markdown/index.d.ts

@@ -0,0 +1,15 @@
+import type { MarkdownElement, ComponentContext, ValidationResult } from "../../types/index.js";
+import { renderMarkdown } from "./render.js";
+export { renderMarkdown };
+/**
+ * Validate a markdown element.
+ * Markdown elements are display-only — they produce no value and no errors.
+ * Returning `{ value: undefined, errors: [] }` with the special `skip: true`
+ * flag tells the aggregation layer not to include this element in form data.
+ */
+export declare function validateMarkdown(_element: MarkdownElement, _key: string, _context: ComponentContext): ValidationResult;
+/**
+ * Update handler for markdown elements — noop.
+ * Markdown content is static; no programmatic update path is needed.
+ */
+export declare function updateMarkdown(_element: MarkdownElement, _fieldPath: string, _value: unknown, _context: ComponentContext): void;

package/dist/types/components/markdown/render.d.ts

@@ -0,0 +1,6 @@
+import type { MarkdownElement, RenderContext } from "../../types/index.js";
+/**
+ * Render a markdown element into the parent container.
+ * Returns the created wrapper element.
+ */
+export declare function renderMarkdown(element: MarkdownElement, _ctx: RenderContext, parent: HTMLElement): HTMLElement;

package/dist/types/components/markdown/snarkdown.d.ts

@@ -0,0 +1,2 @@
+/** Parse Markdown into an HTML String. */
+export default function parse(md: string, prevLinks?: Record<string, string>): string;

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@
  */
 import { FormBuilderInstance } from "./instance/FormBuilderInstance.js";
 import { validateSchema } from "./utils/validation.js";
-export type { SelectOption, ElementAction, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, FileElement, FilesElement, ContainerElement, GroupElement, RichInputElement, Element, Schema, ExternalAction, FormData, RenderContext, Translations, Locale, Config, ResourceMetadata, PickedResource, State, } from "./types/index.js";
+export type { SelectOption, ElementAction, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, FileElement, FilesElement, ContainerElement, GroupElement, MarkdownElement, RichInputElement, Element, Schema, ExternalAction, FormData, RenderContext, Translations, Locale, Config, ResourceMetadata, PickedResource, State, } from "./types/index.js";
 export type { Theme } from "./styles/theme.js";
 export { defaultTheme, exampleThemes } from "./styles/theme.js";
 /**

package/dist/types/instance/FormBuilderInstance.d.ts

@@ -141,6 +141,16 @@ export declare class FormBuilderInstance {
      * Delegates to component-specific updaters via registry
      */
     private updateFieldValue;
+    /**
+     * Find the field wrapper DOM element for a given element+path combo.
+     * Used by reevaluateConditionalFields.
+     */
+    private findFieldWrapper;
+    /**
+     * Apply enableIf show/hide logic to a single field wrapper.
+     * Extracted to reduce cyclomatic complexity of checkElements.
+     */
+    private applyEnableIfVisibility;
     /**
      * Re-evaluate all conditional fields (enableIf) based on current form data
      * This is called automatically when form data changes (via onChange events)

package/dist/types/types/component-operations.d.ts

@@ -26,6 +26,11 @@ export interface ValidationResult {
     errors: string[];
     /** When true, value is spread into parent data instead of nested under element.key */
     spread?: boolean;
+    /**
+     * When true, this element should be completely excluded from form data output.
+     * Used by display-only elements (e.g., markdown) that have no associated value.
+     */
+    skip?: boolean;
 }
 /**
  * Component validator function type

package/dist/types/types/config.d.ts

@@ -38,6 +38,7 @@ export interface Translations {
     hintPattern: string;
     fileCountSingle: string;
     fileCountPlural: string;
+    fileCountWithMax: string;
     fileCountRange: string;
     uploadingFile: string;
     filesCounter: string;
@@ -45,6 +46,9 @@ export interface Translations {
     libraryEmpty: string;
     libraryHint: string;
     pickerError: string;
+    dropToUpload: string;
+    replaceFile: string;
+    clearAll: string;
     required: string;
     minItems: string;
     maxItems: string;

package/dist/types/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { SelectOption, ElementAction, EnableCondition, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, SwitcherElement, FileElement, FilesElement, ColourElement, SliderElement, ContainerElement, GroupElement, TableElement, TableMerge, TableData, RichInputElement, Element, Schema, ExternalAction, FormData, RenderContext, } from "./schema.js";
+export type { SelectOption, ElementAction, EnableCondition, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, SwitcherElement, FileElement, FilesElement, ColourElement, SliderElement, ContainerElement, GroupElement, TableElement, TableMerge, TableData, RichInputElement, MarkdownElement, Element, Schema, ExternalAction, FormData, RenderContext, } from "./schema.js";
 export type { Translations, Locale, Config, ResourceMetadata, PickedResource, } from "./config.js";
 export type { State } from "./state.js";
 export type { ComponentContext, ValidationResult, ComponentValidator, ComponentUpdater, ComponentOperations, } from "./component-operations.js";

package/dist/types/types/schema.d.ts

@@ -110,6 +110,14 @@ export interface ContainerElement extends BaseElement {
     maxCount?: number;
     columns?: 1 | 2 | 3 | 4;
     prefillHints?: PrefillHint[];
+    /**
+     * How items are arranged when `multiple: true`.
+     * - "stack" (default): vertical list, one item per row (current behavior).
+     * - "slides": horizontal grid, multiple items per row, auto-wrap.
+     *   Each item card has min-width 280px and grows to fill available width.
+     * Ignored when `multiple: false`.
+     */
+    displayMode?: "stack" | "slides";
 }
 export interface ColourElement extends BaseElement {
     type: "colour";
@@ -186,6 +194,19 @@ export interface TableElement extends BaseElement {
 export interface HiddenElement extends BaseElement {
     type: "hidden";
 }
+/**
+ * Markdown display element — renders arbitrary text/headings/lists/links
+ * between input fields. Produces no form data entry. `key` is optional
+ * (only used as a stable DOM id for enableIf targeting).
+ *
+ * Extends BaseElement (with key made optional) so that existing code that
+ * accesses BaseElement properties on Element union members continues to compile.
+ */
+export interface MarkdownElement extends Omit<BaseElement, "key"> {
+    type: "markdown";
+    content: string;
+    key?: string;
+}
 export interface RichInputElement extends BaseElement {
     type: "richinput";
     placeholder?: string;
@@ -200,7 +221,7 @@ export interface RichInputElement extends BaseElement {
     filesKey?: string;
     flatOutput?: boolean;
 }
-export type Element = TextElement | TextareaElement | NumberElement | SelectElement | SwitcherElement | FileElement | FilesElement | HiddenElement | ColourElement | SliderElement | ContainerElement | GroupElement | TableElement | RichInputElement;
+export type Element = TextElement | TextareaElement | NumberElement | SelectElement | SwitcherElement | FileElement | FilesElement | HiddenElement | ColourElement | SliderElement | ContainerElement | GroupElement | TableElement | RichInputElement | MarkdownElement;
 export interface Schema {
     version?: string;
     elements: Element[];

package/dist/types/types/state.d.ts

@@ -1,4 +1,4 @@
-import type { Schema, ExternalAction } from "./schema.js";
+import type { Schema, ExternalAction, Element } from "./schema.js";
 import type { Config, ResourceMetadata } from "./config.js";
 export interface State {
     schema: Schema | null;
@@ -9,4 +9,8 @@ export interface State {
     config: Config;
     debounceTimer: number | null;
     prefill: Record<string, any>;
+    /** Stable synthetic IDs for keyless elements (e.g. markdown without a key). WeakMap so elements can be GC'd. */
+    syntheticElementIds: WeakMap<Element, string>;
+    /** Counter for generating unique synthetic IDs. */
+    syntheticElementIdCounter: number;
 }

package/dist/types/utils/helpers.d.ts

@@ -1,4 +1,5 @@
 import type { State } from "../types/state.js";
+import type { Element } from "../types/schema.js";
 export declare function isElementReadonly(element: {
     readonly?: boolean;
 }, state: State, ctx?: {
@@ -10,6 +11,19 @@ export declare function isPlainObject(obj: any): obj is Record<string, any>;
  * Use when inserting user-controlled or translated content via innerHTML
  */
 export declare function escapeHtml(text: string): string;
+/**
+ * Return a stable lookup key for a schema element.
+ *
+ * For elements that carry a `key`, returns that key directly.
+ * For keyless elements (e.g. markdown display blocks), generates and caches a
+ * synthetic id in `state.syntheticElementIds` so that the same id is returned
+ * on every subsequent call for the same element object. This makes enableIf
+ * re-evaluation work correctly for keyless elements.
+ *
+ * The WeakMap does not prevent GC of the element objects — correct for schema
+ * elements that are owned by the caller and may be released after `destroy()`.
+ */
+export declare function getElementLookupKey(element: Element, state: State): string;
 export declare function pathJoin(base: string, key: string): string;
 export declare function pretty(obj: any): string;
 export declare function clear(node: HTMLElement): void;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.29",
+  "version": "0.2.32",
   "description": "A reusable JSON schema form builder library",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",