opfs-finder 0.2.0 → 0.3.0

package/README.ja.md

@@ -0,0 +1,93 @@
+# opfs-finder
+
+<p align="center">
+  <img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp" alt="opfs-finder logo">
+</p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/opfs-finder">
+    <img
+      src="https://img.shields.io/npm/v/opfs-finder?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
+      alt="npm version"
+    />
+  </a>
+  <a href="https://www.npmtrends.com/opfs-finder">
+    <img
+      src="https://img.shields.io/npm/dy/opfs-finder.svg?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
+      alt="downloads"
+    />
+  </a>
+  <a href="https://github.com/tseijp/opfs-finder">
+    <img
+      src="https://img.shields.io/npm/l/opfs-finder?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
+      alt="license MIT"
+    />
+  </a>
+  <a href="https://opfs-finder.tsei.jp/">
+    <img
+      src="https://img.shields.io/badge/docs-available-000.svg?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
+      alt="docs available"
+    />
+  </a>
+</p>
+
+<p align="center">
+  <b>ブラウザに隠されたファイルを、Finder そのままに見る。</b>
+</p>
+
+どの web サイトも、ブラウザの中に静かにファイルを溜め込んでいます。これまでは、それを見るだけでも DevTools が必要でした。**opfs-finder** は、その隠されたストレージを、あなたがすでに使い方を知っている window で開きます — アイコン、リスト、カラム、ギャラリーの各表示、ドラッグ&ドロップ、名前の変更、タグ、検索。新しく覚えることは何もありません。ただ Finder のように感じられるだけです。
+
+## 二つの使い方
+
+### Chrome 拡張として
+
+どのサイトでも、ツールバーのボタンを押すだけ。Finder が開き、そのサイトのファイルが表示されます。閲覧し、プレビューし、名前を変え、移動し、削除する — どこにいても、同じ見慣れた window です。
+
+> [Chrome Web Store][cws] からインストールしてください。
+
+### npm パッケージとして
+
+あなた自身のアプリに、ファイル管理機能を一行で追加できます。ユーザーは自分のデータのための本物の Finder を手にします — 自分で作る必要はありません。
+
+```sh
+pnpm install opfs-finder
+```
+
+<!-- prettier-ignore -->
+```tsx
+import { finder } from 'opfs-finder'
+
+<button onClick={finder}>
+  Manage my files
+</button>
+```
+
+これだけです。一つの import と一つの呼び出しで、あなたのアプリに Finder が宿ります。
+
+## 手に入るもの
+
+- **四つの表示** — アイコン、リスト、カラム、ギャラリー。まさに macOS の通りに。
+- **すべてのファイル操作** — 開く、作成、名前の変更、複製、コピー、移動、削除。
+- **ドラッグ&ドロップ** — ファイルを動かしたり、デスクトップから取り込んだり。
+- **タグ、お気に入り、検索** — あなたがすでにしているやり方で、整理し、見つける。
+- **何でもプレビュー** — 生のバイナリすら、読めるhex 表示で。
+
+セットアップ不要。設定不要。あなたの好みを覚え、邪魔をしません。
+
+## 対応ブラウザ
+
+opfs-finder は、あらゆるモダンブラウザで動きます。詳しくは: [Can I use…][ciu]
+
+| Chrome | Edge | Firefox | Safari | Opera |
+| :----: | :--: | :-----: | :----: | :---: |
+|  108+  | 108+ |  111+   | 16.4+  |  94+  |
+
+## リンク
+
+- [Chrome Web Store][cws]
+- [npm パッケージ][npm]
+- [ドキュメント][docs]
+
+[cws]: https://chromewebstore.google.com/detail/opfs-finder/xxx
+[npm]: https://www.npmjs.com/package/opfs-finder
+[docs]: https://opfs-finder.tsei.jp/
+[ciu]: https://caniuse.com/wf-origin-private-file-system

package/README.md

@@ -1,7 +1,7 @@
 # opfs-finder
 
 <p align="center">
-  <img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp">
+  <img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp" alt="opfs-finder logo">
 </p>
 <p align="center">
   <a href="https://www.npmjs.com/package/opfs-finder">
@@ -30,86 +30,64 @@
   </a>
 </p>
 
-## Installation
+<p align="center">
+  <b>Browse your browser's hidden files — exactly like the Finder.</b>
+</p>
 
-opfs-finder can be installed not only from [Chrome Web Store][cws], but also as an [npm library][npm], allowing to integrate its API directly into your application.
+Every website quietly stores files inside your browser. Until now, you needed DevTools to even see them. **opfs-finder** opens that hidden storage in a window you already know how to use — icons, list, column, and gallery views, drag & drop, rename, tag, search. Nothing new to learn. It just feels like Finder.
 
-[cws]: https://chromewebstore.google.com/detail/opfs-finder/xxx
-[npm]: https://www.npmjs.com/package/opfs-finder
+## Two ways to use it
 
-### Chrome Extension
+### As a Chrome extension
 
-To install opfs-finder chrome extension, open [here][cws] and install it.
+Click the toolbar button on any site. The Finder opens, showing that site's files. Browse, preview, rename, move, and delete — wherever you are, the same familiar window.
 
-### Manual installation
+> Install from the [Chrome Web Store][cws].
 
-1. install opfs-finder library from npm
+### As an npm package
 
-```tsx
+Add file management to your own app in one line. Your users get a real Finder for their data — no need to build one yourself.
+
+```sh
 pnpm install opfs-finder
 ```
 
-2. import finder function and register click event
-
 <!-- prettier-ignore -->
 ```tsx
-import { finder } from "opfs-finder"
+import { finder } from 'opfs-finder'
 
 <button onClick={() => finder()}>
-  Open Finder Panel window
+  Manage my files
 </button>
 ```
 
-### Supported browsers
+That's it. One import, one call, and your app has a Finder.
 
-opfs-finder suports modern browsers. more: [Can I use...][ciu]
+## What you get
 
-- Chrome 108+
-- Edge 108+
-- Firefox 111+
-- Safari 16.4+
-- Opera 94+
+- **Four views** — icons, list, column, and gallery, just like macOS.
+- **Full file actions** — open, create, rename, duplicate, copy, move, delete.
+- **Drag & drop** — move files around, or drop files in from your desktop.
+- **Tags, favorites, search** — organize and find files the way you already do.
+- **Preview anything** — even raw binary, shown as readable hex.
 
-[ciu]: https://caniuse.com/wf-origin-private-file-system
+No setup. No config. It remembers how you like things and stays out of your way.
 
-## Learn OPFS API
+## Supported browsers
 
-> The origin private file system (OPFS) is a storage endpoint provided as part of the [File System API][mdn], which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.
+opfs-finder runs on every modern browser. More: [Can I use…][ciu]
 
-[mdn]: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API
+| Chrome | Edge | Firefox | Safari | Opera |
+| :----: | :--: | :-----: | :----: | :---: |
+|  108+  | 108+ |  111+   | 16.4+  |  94+  |
 
-### Manipulating the OPFS from the main thread
+## Links
 
-> When accessing the OPFS from the main thread, you will use asynchronous, [Promise][mdn1]-based APIs. You can access file ([FileSystemFileHandle][mdn2]) and directory ([FileSystemDirectoryHandle][mdn3]) handles by calling [.getFileHandle()][mdn4] and [.getDirectoryHandle()][mdn5] respectively on the FileSystemDirectoryHandle object representing the OPFS root (and child directories, as they are created).
+- [Chrome Web Store][cws]
+- [npm package][npm]
+- [Documentation][docs]
 
-[mdn1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
-[mdn2]: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
-[mdn3]: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryHandle
-[mdn4]: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryHandle/getFileHandle
-[mdn5]: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryHandle/getDirectoryHandle
-
-<!-- prettier-ignore -->
-```tsx
-// Get a opfs root directory
-const root = await navigator.storage.getDirectory()
-
-// Create a hierarchy of files and folders
-const file = await root.getFileHandle('root file')
-const folder = await root.getDirectoryHandle('root folder')
-const nestedFile = await folder.getFileHandle('nested file')
-const nestedFolder = await folder.getDirectoryHandle('nested folder')
-
-// Access existing files and folders via their names
-const existingFile = await root.getFileHandle('root file')
-const existingFolder = await root.getDirectoryHandle('root folder')
-
-// Deleting a file or folder
-await file.remove()
-await folder.remove({ recursive: true })
-
-// Listing the contents of a folder
-for await (let [name, handle] of folder) {}
-for await (let [name, handle] of folder.entries()) {}
-for await (let handle of folder.values()) {}
-for await (let name of folder.keys()) {}
-```
+[cws]: https://chromewebstore.google.com/detail/opfs-finder/xxx
+[npm]: https://www.npmjs.com/package/opfs-finder
+[docs]: https://opfs-finder.tsei.jp/
+[ciu]: https://caniuse.com/wf-origin-private-file-system

package/dist/const.d.ts

@@ -0,0 +1,35 @@
+import type { FinderActionKey, FinderEntry, FinderPrefs, FinderSidebarSection, FinderState, ViewMode } from './types';
+export declare const viewModes: ViewMode[];
+export declare const finderActions: {
+    key: FinderActionKey;
+    label: string;
+}[];
+export declare const sidebarSections: (prefs: FinderPrefs) => FinderSidebarSection[];
+export declare const iconStyle: {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    fontVariationSettings: string;
+};
+export declare const rowIcon: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    minWidth: string;
+};
+export declare const iconOf: (entry: Pick<FinderEntry, "kind" | "name">) => string;
+export declare const badgeIconOf: (entry: FinderEntry) => string;
+export declare const sidebarIconOf: (name: string) => "folder_special" | "folder";
+export declare const viewModeIconOf: Record<FinderState['viewMode'], string>;
+export declare const sizeOf: (size: number) => string;
+export declare const dateOf: (time: number) => string;
+export declare const detailRows: (entry: FinderEntry) => ({
+    icon: string;
+    value: string;
+    strong: boolean;
+} | {
+    icon: string;
+    value: string;
+    strong?: undefined;
+})[];
+//# sourceMappingURL=const.d.ts.map

package/dist/const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../lib/const.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AACrH,eAAO,MAAM,SAAS,EAAE,QAAQ,EAA2C,CAAA;AAC3E,eAAO,MAAM,aAAa;;;GAce,CAAA;AACzC,eAAO,MAAM,eAAe,GAAI,OAAO,WAAW,KAAG,oBAAoB,EAUxE,CAAA;AACD,eAAO,MAAM,SAAS;;;;;CAA+H,CAAA;AACrJ,eAAO,MAAM,OAAO;;;;;CAA8E,CAAA;AAOlG,eAAO,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,WAG/D,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,OAAO,WAAW,WAE7C,CAAA;AACD,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,gCAAoD,CAAA;AAC9F,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,CAKlE,CAAA;AACD,eAAO,MAAM,MAAM,GAAI,MAAM,MAAM,WAKlC,CAAA;AACD,eAAO,MAAM,MAAM,GAAI,MAAM,MAAM,WAGlC,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW;;;;;;;;IAM5C,CAAA"}

package/dist/finder/act.d.ts

@@ -0,0 +1,6 @@
+import type { ActCommand, ActContext, ActEffect, Command } from '../types';
+export declare const createAct: ({ command, view }: {
+    command: Command;
+    view: Window;
+}) => (message: ActCommand, context: ActContext) => Promise<ActEffect | null>;
+//# sourceMappingURL=act.d.ts.map

package/dist/finder/act.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"act.d.ts","sourceRoot":"","sources":["../../lib/finder/act.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAiB,OAAO,EAA2C,MAAM,UAAU,CAAA;AAGlI,eAAO,MAAM,SAAS,GAAI,mBAAmB;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,MAsCzD,SAAS,UAAU,EAAE,SAAS,UAAU,KAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAexF,CAAA"}

package/dist/finder/api.d.ts

@@ -0,0 +1,9 @@
+import type { APIOption, FinderHydration, FinderSnapshot, FinderState, FinderStateEvent } from '../types';
+export declare const createAPI: (option?: APIOption) => {
+    state: FinderState;
+    hydrate(next: FinderHydration): void;
+    send(event: FinderStateEvent): void;
+    snapshot(): FinderSnapshot;
+};
+export type API = ReturnType<typeof createAPI>;
+//# sourceMappingURL=api.d.ts.map

package/dist/finder/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../lib/finder/api.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AACzG,eAAO,MAAM,SAAS,GAAI,SAAQ,SAAc;;kBAoDlB,eAAe;gBAIjB,gBAAgB;gBAKhB,cAAc;CAIzC,CAAA;AAED,MAAM,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/finder/index.d.ts

@@ -0,0 +1,8 @@
+import type { FinderClient, RenderOption } from '../types';
+export declare const createFinder: (mount: HTMLElement, option?: RenderOption & {
+    source?: Window | null;
+}) => {
+    client: FinderClient;
+    render(): void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/finder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/finder/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAW,YAAY,EAA8C,YAAY,EAAE,MAAM,UAAU,CAAA;AAC/G,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,EAAE,SAAQ,YAAY,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAO;;;CAmEtG,CAAA"}

package/dist/finder/open.d.ts

@@ -0,0 +1,7 @@
+export type ViewerOption = {
+    path: string;
+    file: File;
+    source?: Window | null;
+};
+export declare const openFile: ({ path, file, source }: ViewerOption) => Promise<void | null>;
+//# sourceMappingURL=open.d.ts.map

package/dist/finder/open.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open.d.ts","sourceRoot":"","sources":["../../lib/finder/open.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAoBD,eAAO,MAAM,QAAQ,GAAU,wBAAwB,YAAY,yBAclE,CAAA"}

package/dist/finder/opfs.d.ts

@@ -0,0 +1,24 @@
+export type OpfsKind = 'directory' | 'file';
+export type OpfsBody = BlobPart;
+export type OpfsOption = {
+    view?: Window;
+};
+export type OpfsEntry = {
+    id: string;
+    path: string;
+    name: string;
+    kind: OpfsKind;
+    size: number;
+    type: string;
+    modified: number;
+    children: OpfsEntry[];
+};
+export declare const createOPFS: (option?: OpfsOption) => {
+    get(path?: string): Promise<File | OpfsEntry>;
+    create(path: string, kind?: OpfsKind, body?: OpfsBody): Promise<void | FileSystemDirectoryHandle>;
+    put(path: string, body?: OpfsBody): Promise<void>;
+    delete(path: string): Promise<void>;
+    copy(path: string, to: string, name?: string): Promise<void>;
+    move(path: string, name: string): Promise<void>;
+};
+//# sourceMappingURL=opfs.d.ts.map

package/dist/finder/opfs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opfs.d.ts","sourceRoot":"","sources":["../../lib/finder/opfs.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAA;AAC/B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1C,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,EAAE,CAAA;CAAE,CAAA;AACvJ,eAAO,MAAM,UAAU,GAAI,SAAQ,UAAe;;iBAmDf,MAAM,SAAQ,QAAQ,SAAiB,QAAQ;cAIlD,MAAM,SAAQ,QAAQ;iBAGnB,MAAM;eAGR,MAAM,MAAM,MAAM;eAGlB,MAAM,QAAQ,MAAM;CAKpD,CAAA"}

package/dist/finder/path.d.ts

@@ -0,0 +1,17 @@
+import type { FinderEntry, FinderState } from '../types';
+export declare const normalizePath: (path: string) => string;
+export declare const dirname: (path: string) => string;
+export declare const basename: (path: string) => string;
+export declare const joinPath: (base: string, name: string) => string;
+export declare const crumbs: (path: string) => {
+    name: string;
+    path: string;
+}[];
+export declare const flatten: (entry: FinderEntry | null) => FinderEntry[];
+export declare const findEntry: (entry: FinderEntry | null, path: string) => FinderEntry | null;
+export declare const selectedEntry: (entry: FinderEntry | null, id: string) => FinderEntry | null;
+export declare const existingEntries: (entries: Array<FinderEntry | null>) => FinderEntry[];
+export declare const childrenOf: (entry: FinderEntry | null, path: string) => FinderEntry[];
+export declare const extensionOf: (name: string) => string;
+export declare const visibleEntries: (state: FinderState) => FinderEntry[];
+//# sourceMappingURL=path.d.ts.map

package/dist/finder/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../lib/finder/path.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACxD,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,WAGzC,CAAA;AACD,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,WAKnC,CAAA;AACD,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,WAGpC,CAAA;AACD,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,MAAM,MAAM,WAAqC,CAAA;AACxF,eAAO,MAAM,MAAM,GAAI,MAAM,MAAM;;;GAGlC,CAAA;AACD,eAAO,MAAM,OAAO,GAAI,OAAO,WAAW,GAAG,IAAI,KAAG,WAAW,EAG9D,CAAA;AACD,eAAO,MAAM,SAAS,GAAI,OAAO,WAAW,GAAG,IAAI,EAAE,MAAM,MAAM,KAAG,WAAW,GAAG,IAIjF,CAAA;AACD,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,GAAG,IAAI,EAAE,IAAI,MAAM,uBAElE,CAAA;AACD,eAAO,MAAM,eAAe,GAAI,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,KAAG,WAAW,EAE/E,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,GAAG,IAAI,EAAE,MAAM,MAAM,kBAEjE,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAIvC,CAAA;AACD,eAAO,MAAM,cAAc,GAAI,OAAO,WAAW,kBAKhD,CAAA"}

package/dist/finder/pref.d.ts

@@ -0,0 +1,14 @@
+import type { FinderFavorite, FinderPrefs } from '../types';
+export declare const prefTags: {
+    name: string;
+    color: string;
+    paths: never[];
+}[];
+export declare const defaultPrefs: () => FinderPrefs;
+export declare const createPref: (view: Window) => {
+    current(): FinderPrefs;
+    load(): Promise<FinderPrefs>;
+    write(prefs: FinderPrefs): Promise<FinderPrefs>;
+    addFavorite(favorite: FinderFavorite): Promise<FinderPrefs>;
+};
+//# sourceMappingURL=pref.d.ts.map

package/dist/finder/pref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pref.d.ts","sourceRoot":"","sources":["../../lib/finder/pref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3D,eAAO,MAAM,QAAQ;;;;GAAqS,CAAA;AAC1T,eAAO,MAAM,YAAY,QAAO,WAAkD,CAAA;AAElF,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM;;;iBAoBV,WAAW;0BAGF,cAAc;CAInD,CAAA"}