Overview

@owdproject/kit-fs provides reusable filesystem UI primitives (frame, explorer entries, selectable area, chrome components) for OWD apps and themes.

It is designed to work with @owdproject/module-fs, which remains the runtime module that mounts and manages the virtual filesystem.

Installation

pnpm desktop add @owdproject/kit-fs

Usage

Configuration

With @owdproject/kit-explorer (typical for themed explorers)
You usually do not list kit-fs in defineDesktopConfig: kit-explorer installs this module automatically. Your desktop config looks like:

export default defineDesktopConfig({
  modules: [
    '@owdproject/module-fs',
    '@owdproject/kit-explorer',
  ],
})

Add @owdproject/kit-fs to package.json if your code imports KitFs* or @owdproject/kit-fs/runtime/* paths directly.

Standalone kit-fs (no kit-explorer)
Some apps (e.g. a minimal explorer app) register only filesystem UI primitives:

export default defineDesktopConfig({
  modules: [
    '@owdproject/module-fs',
    '@owdproject/kit-fs',
  ],
})

Or from a theme/app module.ts: await installModule('@owdproject/kit-fs').

Integration notes

• Use @owdproject/module-fs for filesystem runtime behavior (ZenFS integration).
• Use @owdproject/kit-fs for explorer UI building blocks (KitFs* components, selectable area).
• Layers: module-fs → optional kit-explorer (which registers kit-fs) → theme-specific explorer UI. Declare the packages your sources import in package.json; register Nuxt modules in defineDesktopConfig and/or the theme’s module.ts as needed.

Drag and drop

Explorer listing areas use native HTML5 drag-and-drop (no extra Vue DnD library for file import):

• KitFsExplorerSelectableArea — drop OS files, folders, or browser image URLs into the current directory
• KitFsExplorerFileEntry — drag entries within the VFS; drop onto folder rows to import or move into that folder

Wire createExplorerFsOperations from @owdproject/kit-fs into useFileSystemExplorer so overwrite dialogs and import/move run through fsController.

Themes can style drop feedback via CSS variables:

• --owd-explorer-drop-outline
• --owd-explorer-drop-surface

Classes: .kit-fs-explorer-dropzone--active, .kit-fs-explorer-folder-drop-target--active

License

The module is released under the MIT License.