# #039 FilePicker

Version: 1.0.2  
Status: Development

## Purpose

FilePicker is the Bone Flow Input UI for selecting local files with the browser native file control and Drag & Drop.
It keeps only serializable file metadata in `Bone.value`; actual browser `File` references stay in runtime state.

## URL

```text
http://localhost/boneflow/test/bone-filepicker.html
```

## Bone

```text
{
  id: "...",
  type: "FILEPICKER",
  value: [
    { name, size, type, lastModified }
  ]
}
```

## Main API

- `BoneFilePicker.create(bone, options)`
- `getInput(instance)`
- `getDropZone(instance)`
- `getOptions(instance)`
- `setOptions(instance, patch)`
- `getValue(instance)`
- `getEditingValue(instance)`
- `getFiles(instance)`
- `getSelectionState(instance)`
- `setValue(instance, metadata, options)`
- `applyJointInput(instance, packet)`
- `clear(instance, options)`
- `reset(instance)`
- `commit(instance, source)`
- `buildOutput(instance, source)`
- `connectOutput(instance, options)`
- `setOutputTargetReady(instance, ready)`
- `clearOutputBlock(instance)`
- `getOutputState(instance)`
- `disconnectOutput(instance)`
- `syncParentStyle(instance)`

## Dependencies

- #001 Bone Core v1.0.0
- #002 Bone Joint v1.1.36
- #017 Bone Text
- #020 Bone Label
- #022 Hover Border Effect v1.0.1

## Drag & Drop

The visible drop zone accepts `DataTransfer.files` and sends them through the same FilePicker validation / Security / commit path as normal browser file selection. `dropPosition` can place the drop zone at `top`, `bottom`, `left`, or `right`. The component is constrained to the available parent width to prevent Preview overflow. Drag & Drop does not add upload, FileSystem, content Preview or Editor responsibilities.

## Scope boundary

FilePicker does not implement FileSystem, upload, File Manager, content Preview or Editor behavior.
It does not read selected file contents and does not expose an actual local path.

## Runtime QA

The package page starts with Smoke / Validation = `NOT RUN`.
Run the tests in the browser and separately confirm WAIT / BLOCK visuals.
Browser Runtime ALL PASS is not claimed by package generation.

## Formal Runtime sections

Security, connection image, WAIT/BLOCK, Smoke/Validation report and Completion follow the completed Input UI layout. Security and WAIT/BLOCK use independent sandboxes, and the connection image uses #002 Bone Joint actual evaluation/drawing for five cases.