@dmitryvim/form-builder 0.2.27 → 0.2.29

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

@@ -1,25 +1,61 @@
+import type { FileAccept } from "../../types/schema.js";
 export interface FileUploadConstraints {
     maxCount: number;
     allowedExtensions: string[];
+    allowedMimes: string[];
     maxSize: number;
 }
 /**
  * Extract allowed file extensions from the `accept` schema property.
  * Returns lowercase extension strings without leading dots.
+ * Convention: this getter normalizes to lowercase; checkers assume the list is normalized.
  */
-export declare function getAllowedExtensions(accept: string | {
-    extensions: string[];
-} | undefined): string[];
+export declare function getAllowedExtensions(accept: FileAccept | undefined): string[];
 /**
  * Return true if fileName's extension is in the allowed list,
  * or if the list is empty (no restriction).
  */
 export declare function isFileExtensionAllowed(fileName: string, allowedExtensions: string[]): boolean;
+/**
+ * Return true if a byte count is within the size limit.
+ * maxSizeMB === Infinity means no limit.
+ */
+export declare function isSizeWithinLimit(bytes: number, maxSizeMB: number): boolean;
 /**
  * Return true if file is within the size limit.
  * maxSizeMB === Infinity means no limit.
  */
 export declare function isFileSizeAllowed(file: File, maxSizeMB: number): boolean;
+/**
+ * Extract allowed MIME types from the `accept` schema property.
+ * Returns empty array for the legacy string form (no mime in that form).
+ * Returns empty array when accept is undefined or has no mime key.
+ * Convention: this getter normalizes to lowercase; checkers assume the list is normalized.
+ */
+export declare function getAllowedMimes(accept: FileAccept | undefined): string[];
+/**
+ * Return true if mimeType is allowed by the allowedMimes list.
+ * Empty allowedMimes = no mime restriction → always return true.
+ * Supports wildcards (image/*, application/*, etc.).
+ * Comparison is case-insensitive per RFC 2045.
+ *
+ * Convention: allowedMimes is assumed to be pre-normalized to lowercase
+ * (by getAllowedMimes). Only mimeType (the host-provided input) is lowercased here.
+ */
+export declare function isMimeAllowed(mimeType: string, allowedMimes: string[]): boolean;
+/**
+ * Infer MIME type from a resource ID's filename extension.
+ * Returns "application/octet-stream" when the extension is unrecognised.
+ * This is the single source of truth for the extension→mime mapping used by
+ * prefill, handleInitialFileData, and the API-update path.
+ */
+export declare function inferMimeFromResourceId(resourceId: string): string;
+/**
+ * Seed resourceIndex with inferred metadata for a single resource ID.
+ * Skips IDs that already have an entry (does not overwrite authoritative data).
+ * Sets inferredFromExtension: true so that mime validation is skipped at submit time.
+ */
+export declare function seedInferredResource(resourceId: string, resourceIndex: Map<string, any>): void;
 /**
  * Add prefill resource IDs to resourceIndex with type inferred from filename extension.
  */

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

@@ -40,5 +40,7 @@ export declare function ensureTilesWrap(list: HTMLElement): HTMLElement;
 export declare function setEmptyFileContainer(fileContainer: HTMLElement, state: State, hint?: string): void;
 /**
  * Set up drag-and-drop on an element, calling dropHandler with the dropped FileList.
+ * Idempotent: if called again on the same element, the previous listener triple
+ * is removed first so handlers never stack.
  */
 export declare function setupDragAndDrop(element: HTMLElement, dropHandler: (files: FileList) => void): void;

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

@@ -0,0 +1,49 @@
+import type { FormBuilderInstance } from "../../instance/FormBuilderInstance.js";
+import type { State } from "../../types/state.js";
+import type { FileElement, FilesElement } from "../../types/index.js";
+/**
+ * Handle a library pick action for a MULTI-file field.
+ *
+ * End-to-end handler (mirrors upload.ts pattern):
+ *   1. Calls pickExistingFiles with context
+ *   2. Validates, deduplicates, enforces slot limit
+ *   3. Registers in resourceIndex, mutates resourceIds array
+ *   4. Updates data-resource-ids attribute
+ *   5. Calls updateCallback() to re-render tiles
+ *   6. Fires triggerOnChange
+ *
+ * @param state           Form builder state
+ * @param element         File / FilesElement schema definition
+ * @param wrapper         The [data-files-wrapper] element
+ * @param fieldPath       Bracket-notation field path (e.g. "slides[2].image")
+ * @param resourceIds     The mutable live array of current resource IDs (mutated in-place)
+ * @param maxCount        Maximum files allowed (Infinity = no limit)
+ * @param updateCallback  Re-render callback (same pattern as upload.ts)
+ * @param instance        FormBuilderInstance (for onChange events)
+ */
+export declare function handleLibraryPickMulti(state: State, element: FileElement | FilesElement, wrapper: HTMLElement, fieldPath: string, resourceIds: string[], maxCount: number, updateCallback: () => void, instance: FormBuilderInstance): Promise<void>;
+/**
+ * Handle a library pick action for a SINGLE-file field.
+ *
+ * End-to-end handler (mirrors upload.ts and handleLibraryPickMulti patterns):
+ *   1. Calls pickExistingFiles with context
+ *   2. Validates the first returned resource
+ *   3. Registers in resourceIndex
+ *   4. Creates/updates the hidden input inside fileWrapper (only on success — not on cancel)
+ *   5. Calls renderCallback(resourceId) to render the tile
+ *   6. Fires triggerOnChange
+ *
+ * The hidden input is managed here (not in the caller) to mirror how
+ * handleFileSelect in upload.ts manages it, and to match the multi-file
+ * pattern where data-resource-ids is updated inside handleLibraryPickMulti.
+ *
+ * @param state          Form builder state
+ * @param element        FileElement schema definition
+ * @param container      The .file-preview-container element
+ * @param fileWrapper    The .space-y-2 wrapper that contains the hidden input
+ * @param pathKey        Field name / bracket-notation path for the hidden input
+ * @param fieldPath      Bracket-notation field path (for onChange context)
+ * @param renderCallback Called with the accepted resource ID; caller renders the tile
+ * @param instance       FormBuilderInstance (for onChange events)
+ */
+export declare function handleLibraryPickSingle(state: State, element: FileElement, container: HTMLElement, fileWrapper: HTMLElement, pathKey: string, fieldPath: string, renderCallback: (resourceId: string) => Promise<void>, instance: FormBuilderInstance): Promise<void>;

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

@@ -1,15 +1,18 @@
 import type { State } from "../../types/state.js";
 import type { FileElement, FilesElement, RenderContext } from "../../types/index.js";
 export { TILE_SIZE } from "./dom.js";
-/**
- * Populate `container` with the tile grid for multi-file fields.
- * In edit mode: renders tiles + hover-X removal + "+" add tile.
- * In readonly mode (isReadonly=true): renders tiles only (no add tile, no X).
- *
- * Also writes `data-resource-ids` JSON on the nearest [data-files-wrapper]
- * ancestor so that validateFileElement can read IDs without touching pills.
- */
-export declare function renderResourcePills(container: HTMLElement, rids: string[] | null, state: State, onRemove: ((rid: string) => void) | null, hint?: string, countInfo?: string, maxCount?: number, isReadonly?: boolean): void;
+export interface RenderPillsOptions {
+    container: HTMLElement;
+    rids: string[] | null;
+    state: State;
+    onRemove: ((rid: string) => void) | null;
+    hint?: string;
+    countInfo?: string;
+    maxCount?: number;
+    isReadonly?: boolean;
+    onLibraryPick?: (() => void) | null;
+}
+export declare function renderResourcePills(opts: RenderPillsOptions): void;
 export declare function renderFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 export declare function renderFilesElementEdit(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 export declare function renderMultipleFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

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

@@ -1,4 +1,5 @@
 import type { State } from "../../types/state.js";
+import type { FormBuilderInstance } from "../../instance/FormBuilderInstance.js";
 import { type FileUploadConstraints } from "./constraints.js";
 export interface FileDeps {
     picker: HTMLInputElement;
@@ -8,6 +9,17 @@ export interface FileDeps {
     /** Called by the tile's remove button in single-file edit mode */
     onRemove?: () => void;
 }
-export declare function handleFileSelect(file: File, container: HTMLElement, fieldName: string, state: State, deps?: FileDeps | null, instance?: any, allowedExtensions?: string[], maxSizeMB?: number): Promise<void>;
-export declare function setupFilesDropHandler(filesContainer: HTMLElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: any): void;
-export declare function setupFilesPickerHandler(filesPicker: HTMLInputElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: any): void;
+export interface HandleFileSelectOptions {
+    file: File;
+    container: HTMLElement;
+    fieldName: string;
+    state: State;
+    deps?: FileDeps | null;
+    instance?: FormBuilderInstance | null;
+    allowedExtensions?: string[];
+    allowedMimes?: string[];
+    maxSizeMB?: number;
+}
+export declare function handleFileSelect(opts: HandleFileSelectOptions): Promise<void>;
+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/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, State, } from "./types/index.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 { Theme } from "./styles/theme.js";
 export { defaultTheme, exampleThemes } from "./styles/theme.js";
 /**

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

@@ -1,5 +1,15 @@
 import type { Theme } from "../styles/theme.js";
 import type { TableMerge } from "./schema.js";
+/**
+ * A file resource returned by the host's library picker.
+ * The host validates/provides these fields; the library re-validates on resolve.
+ */
+export interface PickedResource {
+    resourceId: string;
+    name: string;
+    type: string;
+    size: number;
+}
 export interface Translations {
     removeElement: string;
     clickDragText: string;
@@ -31,6 +41,10 @@ export interface Translations {
     fileCountRange: string;
     uploadingFile: string;
     filesCounter: string;
+    fromLibrary: string;
+    libraryEmpty: string;
+    libraryHint: string;
+    pickerError: string;
     required: string;
     minItems: string;
     maxItems: string;
@@ -45,6 +59,7 @@ export interface Translations {
     minFiles: string;
     maxFiles: string;
     invalidFileExtension: string;
+    invalidFileMime: string;
     fileTooLarge: string;
     filesLimitExceeded: string;
     unsupportedFieldType: string;
@@ -90,6 +105,17 @@ export interface Config {
     readonly: boolean;
     locale: Locale;
     translations: Record<string, Partial<Translations>>;
+    pickExistingFiles: ((context: {
+        fieldPath: string;
+        mode: "single" | "multiple";
+        accept?: {
+            extensions?: string[];
+            mime?: string[];
+        };
+        maxSizeMB?: number;
+        remainingSlots?: number;
+        selectedResourceIds?: string[];
+    }) => Promise<PickedResource[]>) | null;
     parseTableFile: ((file: File) => Promise<{
         cells: string[][];
         merges?: TableMerge[];
@@ -102,4 +128,11 @@ export interface ResourceMetadata {
     size: number;
     uploadedAt: Date;
     file?: File;
+    /**
+     * True when `type` was inferred from the filename extension rather than
+     * provided authoritatively by the host (e.g. via uploadFile or pickExistingFiles).
+     * When true, mime validation is skipped at submit time because we cannot
+     * validate against fabricated data — extension validation still applies.
+     */
+    inferredFromExtension?: boolean;
 }

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 { Translations, Locale, Config, ResourceMetadata, } from "./config.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

@@ -76,24 +76,31 @@ export interface SelectElement extends BaseElement {
     minCount?: number;
     maxCount?: number;
 }
+/**
+ * File accept constraint — either a legacy comma-separated string (e.g. ".jpg,.png")
+ * or a structured object with extension list, mime list, or both.
+ * `undefined` on the schema field is handled by the optional `?` marker.
+ */
+export type FileAccept = string | {
+    extensions?: string[];
+    mime?: string[];
+};
 export interface FileElement extends BaseElement {
     type: "file";
-    accept?: string | {
-        extensions: string[];
-    };
+    accept?: FileAccept;
     maxSize?: number;
     multiple?: boolean;
     minCount?: number;
     maxCount?: number;
+    disableLibrary?: boolean;
 }
 export interface FilesElement extends BaseElement {
     type: "files";
-    accept?: string | {
-        extensions: string[];
-    };
+    accept?: FileAccept;
     maxSize?: number;
     minCount?: number;
     maxCount?: number;
+    disableLibrary?: boolean;
 }
 export interface ContainerElement extends BaseElement {
     type: "container";

package/package.json

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