@dmitryvim/form-builder 0.2.30 → 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/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/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";

package/package.json

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