@dmitryvim/form-builder 0.2.30 → 0.2.34

package/dist/types/components/colour.d.ts

@@ -5,6 +5,7 @@ export interface ColourElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export declare function renderColourElement(element: ColourElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 export declare function renderMultipleColourElement(element: ColourElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

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;
@@ -21,5 +27,9 @@ export interface HandleFileSelectOptions {
     maxSizeMB?: number;
 }
 export declare function handleFileSelect(opts: HandleFileSelectOptions): Promise<void>;
+export interface UploadBatchFailure {
+    file: File;
+    error: Error;
+}
 export declare function setupFilesDropHandler(filesContainer: HTMLElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: FormBuilderInstance | null): void;
 export declare function setupFilesPickerHandler(filesPicker: HTMLInputElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: FormBuilderInstance | null): void;

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

@@ -1,6 +1,6 @@
 import type { FileElement, FilesElement, RenderContext, ComponentContext, Element } from "../types/index.js";
-export { getAllowedExtensions, isFileExtensionAllowed, isFileSizeAllowed } from "./file/constraints.js";
-export { renderFilePreview, renderFilePreviewReadonly } from "./file/preview.js";
+export { getAllowedExtensions, isFileExtensionAllowed, isFileSizeAllowed, } from "./file/constraints.js";
+export { renderFilePreview, renderFilePreviewReadonly, } from "./file/preview.js";
 export { renderResourcePills } from "./file/render-edit.js";
 export { validateFileElement } from "./file/validate.js";
 export declare function renderFileElement(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

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;
@@ -61,6 +65,7 @@ export interface Translations {
     invalidFileExtension: string;
     invalidFileMime: string;
     fileTooLarge: string;
+    uploadFailed: string;
     filesLimitExceeded: string;
     unsupportedFieldType: string;
     invalidOption: string;

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

@@ -44,6 +44,7 @@ export interface TextElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export interface TextareaElement extends BaseElement {
     type: "textarea";
@@ -56,6 +57,7 @@ export interface TextareaElement extends BaseElement {
     minCount?: number;
     maxCount?: number;
     autoExpand?: boolean;
+    addLabel?: string;
 }
 export interface NumberElement extends BaseElement {
     type: "number";
@@ -67,6 +69,7 @@ export interface NumberElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export interface SelectElement extends BaseElement {
     type: "select";
@@ -75,6 +78,7 @@ export interface SelectElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 /**
  * File accept constraint — either a legacy comma-separated string (e.g. ".jpg,.png")
@@ -110,6 +114,15 @@ 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";
+    addLabel?: string;
 }
 export interface ColourElement extends BaseElement {
     type: "colour";
@@ -117,6 +130,7 @@ export interface ColourElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export interface SliderElement extends BaseElement {
     type: "slider";
@@ -127,6 +141,7 @@ export interface SliderElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export interface SwitcherElement extends BaseElement {
     type: "switcher";
@@ -134,6 +149,7 @@ export interface SwitcherElement extends BaseElement {
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    addLabel?: string;
 }
 export interface GroupElement extends BaseElement {
     type: "group";

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

@@ -7,6 +7,48 @@ export declare function applyInputStyles(element: HTMLInputElement | HTMLTextAre
  * Apply themed hint/description styles to a paragraph element
  */
 export declare function applyHintStyles(element: HTMLParagraphElement): void;
+/**
+ * Mount a counter element into the field's label row so it sits inline with
+ * the heading (e.g. `Tags  3/5`) instead of below the field. The label row is
+ * marked with `[data-fb-label-row]` by `createLabelContainer` — the data
+ * attribute is the stable hook; layout utility classes may change.
+ *
+ * No-op when the wrapper has no label row (e.g. nested anonymous wrappers).
+ */
+export declare function mountCounterInLabel(wrapper: HTMLElement, counter: HTMLElement): void;
+/**
+ * Visual: full-width dashed pill button, optional `+ {label}` centered.
+ * Used by every multi-value field type.
+ *
+ * The counter is returned separately so callers can place it inline with the
+ * field label (saving a row). At maxCount both the button and the row are
+ * hidden — the counter stays visible wherever the caller mounted it.
+ *
+ * `classNameSuffix` becomes `add-{suffix}-btn` to preserve test-targetable
+ * class names that the existing test suite already queries.
+ */
+export interface AddItemRowHandle {
+    row: HTMLDivElement;
+    button: HTMLButtonElement;
+    counter: HTMLSpanElement;
+    update: (current: number, max: number) => void;
+}
+export declare function createAddItemRow(classNameSuffix: string, onClick: () => void, options?: {
+    label?: string;
+    showCounter?: boolean;
+}): AddItemRowHandle;
+/**
+ * Slide-sized add tile rendered inside a slides-displayMode container grid.
+ * Sits as another grid cell next to existing slides at the same dimensions.
+ */
+export interface SlideAddTileHandle {
+    tile: HTMLButtonElement;
+    counter: HTMLSpanElement;
+    update: (current: number, max: number) => void;
+}
+export declare function createSlideAddTile(onClick: () => void, options?: {
+    label?: string;
+}): SlideAddTileHandle;
 /**
  * Create a styled add button with theme support
  */

package/package.json

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