自分でデザイン：デザイナー

サイドバーの自分でデザインは、スキンを手作りするためのキャンバスです。1色だけのシンプルなものから、何層も重ねた凝ったデザインまで作れます。すべてオフラインで動きます。デザインしたものはほかのスキンと同じようにマイスキンに保存され、保存して適用を押すと、選んだフォルダにそのまま付きます。

デザイナーの画面。アイコンライブラリの虫を青いフォルダに型押ししたデザインで、横にアイコン検索、下に「保存して適用」がある

こんなものが作れます

作りたいもの	始め方	そのあと
好きな色1色のフォルダ	カラーまたはプレーン	フォルダをクリックして色を選びます。カラーピッカーでは、透明度も含めてどんな色でも選べます
ラベル付きのフォルダ（「レシピ」「メモ 2026」など）	ラベル	文字を入力し、フォント、太さ、色を選びます。小さいサイズでは、短い言葉がいちばん読みやすくなります
中身を1つの絵で表すフォルダ	絵文字	絵文字をダブルクリックして入れ替えるか、ピッカーで検索します（「犬」「飛行機」「レシート」）
タブそのものに付けるラベル	タブのラベル	配置のタブボタンで、どのレイヤーでもタブに置けます
背面と前面で色が違うフォルダ	ツートーン	色の境目は紙のシートの後ろに隠れます
透けるフォルダ	ガラスまたは色付きガラス	背景の不透明度を下げるか、背景を削除すると透明なフォルダになります。残るのは紙とふちだけです
柄のあるフォルダ	ストライプ、ギンガムチェック、水玉	パターンで、ストライプから紙吹雪、フィルムグレインまで10種類を追加できます
キャプション付きの写真	写真	最初に画像を選ぶよう求められます。あとからドロップや貼り付けで追加もできます
ステッカーやバッジなど、フォルダの形でないもの	ステッカー	自由形アイコンにすると、デザインがアイコン全体になります
自分だけのドライブ（外部ディスクに「バックアップ」、USBメモリに写真など）	ドライブから始めるのドライブ、またはラベル付きドライブ、カラードライブ、絵文字ドライブ、写真ドライブ	デザインはドライブの表面に載ります。キャンバスの下のメニューで、別のドライブに移せます
自分好みの色のドライブ（赤いUSBメモリ、ラベルのないディスクなど）	どのドライブでも	ドライブのパーツ（ケース、端子、表面）をクリックして、色を付けたり、隠したり、取り除いたりします
タブの色が違うフォルダや、紙のシートがないフォルダ	どのフォルダでも	フォルダのタブ、背面、紙、前面は、レイヤーのリストで、デザイン自身のレイヤーの下に並んでいます
向きや位置、大きさを変えたフォルダやドライブ	どのフォルダやドライブでも	フォルダやドライブをドラッグすると移動、角をドラッグするとサイズ変更、上のハンドルで回転ができます。デザインも一緒に動きます
手持ちのスキンに自分なりのひと手間を加えたもの	スキンの⋯メニュー → デザイナーでリミックス	スキンが画像レイヤーになり、その上に重ねていけます
以前デザインしたものの手直し	その⋯メニュー → デザインを編集	変更を保存ならその場で更新し、新規として保存なら両方残ります

使い方

始める：初めて開いたときと、新規を押したときに、スタート地点の一覧が表示されます。どれも普通のデザインなので、固定されている部分はありません。保存していない変更があるときに別のスタート地点を選ぶと、先に確認があります。空の状態から始めるには、空のスタート地点と並んで、Mac、Windows、Linuxそれぞれのフォルダがあります。ドライブから始めるには、それぞれのシステムが表示するあらゆるドライブが、Mac、Windows、Linuxごとに1列ずつ並びます。ドライブの一覧はDRIVES.md（英語）にあります。フォルダパネルでドライブを選んでいるときは、選んだドライブが先頭に並び、そのドライブがドライブ自身の名前で表示されます。ドライブのテンプレートは、そのドライブで始まります。選んだドライブがなければ前回のデザインのドライブで、それもなければこのシステムの外部ディスクで始まります。

追加する：フォルダの上のバーから、テキスト、絵文字、図形（角丸の長方形から吹き出しまで13種類）、画像（ファイル、自分のスキン、またはフォルダにドロップや貼り付けをした画像）、パターン、カラー（背景を選択します。背景がなければ追加します）を追加できます。

配置する：レイヤーをクリックすると選択されます。選択したレイヤーには薄く色が付き、角と辺にハンドル、上には回転用の丸いハンドルが表示されます。

ドラッグで移動します。フォルダの中央、タブ、フォルダのふち、ほかのレイヤーにスナップします。⌘（Ctrl）を押しながらなら自由に置けます。
角や辺をドラッグするとサイズを変えられます。画像は、角からなら縦横比を保ち、辺からならトリミングになります。テキストと絵文字は常に縦横比を保ちます。
⇧を押しながら回転すると15°刻みになり、サイズを変えると図形の縦横比が保たれます。⌥を押しながらだと、中心を基準にサイズが変わります。
文字をダブルクリックすると編集でき、絵文字をダブルクリックすると入れ替えられます。
フォルダそのものをクリックすると、背景が選択されます。デザインが表示されない場所をクリックすると、クリックしたフォルダやドライブのパーツが選択されます。

レイヤー：右上のリストに、重なり順が上から表示されます。行をドラッグすると順番を入れ替えられ、名前をダブルクリックすると名前を変えられます。目、鍵、ゴミ箱のアイコンで、それぞれレイヤーの非表示、その場への固定、削除ができます。見出しの端にあるすべて削除でデザインを空にできます。そのときに表示される通知から元に戻せるほか、⌘Zでも戻せます。見出しのボタンは、行のボタンと同じく、ポインタを合わせると表示されます。

フォルダやドライブのパーツ：レイヤーのリストでは、デザインのレイヤーの下に、デザインを載せているフォルダやドライブが独立したグループとして並びます。Macのフォルダなら前面、紙、背面、タブ（WindowsとLinuxのフォルダには紙がありません）、ドライブならそのドライブのパーツで、たとえばUSBメモリなら表面、ケース、端子の穴、端子です。リストでパーツを選ぶか、キャンバス上でクリックすると、そのパーツが選択されて薄く色が付きます。

カラーで、パーツに好きな色を付けられます。光と影は残るので、どんな色にしても、光の当たったふちはほかの部分より明るいままです。元の色を選ぶと、パーツ本来の色に戻ります。デザインが表示されるパーツ（フォルダのタブ、背面、前面、ドライブの表面）では、この色が、そこにあるデザインの背景の色とパターンの代わりになり、文字、画像、アイコンはその上に残ります。
不透明度を下げると後ろにあるものが透けて見え、アイコンに表示（リストの目のアイコン）をオフにするとパーツが隠れます。
ゴミ箱のアイコンかDeleteキーで、パーツをアイコンとリストから取り除けます。取り除いたパーツは、グループの行から戻せるほか、⌘Zでも戻せます。

ドライブの表面は、デザインが印刷されたラベルです。表面を隠しても、デザインは同じ位置に残り、ドライブのケースの上に表示されます。フォルダでは、デザインが印刷されているのはパネルそのものです。タブを隠すと、タブにあるデザインも一緒に消えます。

フォルダやドライブ全体を選ぶと、専用のハンドルが付いた枠が表示されます。枠の中のどこをドラッグしても移動でき（元の位置に近づくと、ぴたりと元の位置に戻ります）、角をドラッグするとサイズが変わり、上のハンドルで回転できます（⇧を押しながらだと15°刻み）。設定のドライブ全体またはフォルダ全体には、回転とサイズ、元の位置に戻す、リセットがあり、矢印キーでも少しずつ動かせます。載っているものもすべて一緒に動きます。デザインのレイヤーは、キャンバスではなく、フォルダやドライブの上に置かれているからです。

レイヤーと設定は、それぞれ見出しから開閉できます。間にあるバーをドラッグすると、レイヤーの領域を広げたり狭めたりできます（ダブルクリックで元に戻り、フォーカスがあるときは矢印キーでも動かせます）。最後の状態は、このコンピュータに記憶されます。

設定：レイヤーの下には、選択しているレイヤーの設定がすべて、そのレイヤー名の見出しの下にまとめて表示されます。見出しには、重なり順の変更、複製、削除のボタンがあります。

テキスト：フォント、太さ、揃え、斜体、大文字、サイズ、字間、行の高さ、カーブ（アーチ型またはスマイル型）。
カラー：単色、線形グラデーション、円形グラデーション。透明度付きで最大4色まで使え、既製のグラデーションもあります。
図形：角の丸み、頂点または辺の数、星のへこみの深さ、リングの穴の大きさ。
画像：明るさ、コントラスト、彩度、色相、ぼかし、白黒、セピア、階調の反転、角丸。
すべてのレイヤー：不透明度と、16種類の描画モードから1つ。
配置したレイヤーには、影（ネオン風にするならグローにする）とステッカーのふちもあります。ステッカーのふちは、型抜きステッカーのように輪郭に沿って付く縁取りです。

何も選択していないときは、設定でフォルダに配置か自由形アイコンかを選べます。

ドライブにデザインする：ドライブのデザインは、ドライブの表面を覆います。表面とは、ドライブの正面、カードのラベル、ディスクの中心から外周までの部分のことです。ドライブの残りの部分（台座、コネクタ、ディスクの穴）は表面のまわりと上に描かれ、デザインの透ける部分からは、ドライブ自身の表面が見えます。キャンバスの下のスイッチはドライブの骨組みになり、その横のメニューにはすべてのドライブが並びます。そこで別のドライブを選ぶと、どのレイヤーも表面上の位置を保ったまま新しい表面に合わせて収まり、デザインがそのドライブに移ります。新しく追加する文字や図形は、表面で読みやすい色で置かれます。明るい表面なら暗い色、色の付いた表面なら白です。また、文字が表面より幅広くなることはないので、USBメモリの細いラベルでは小さく始まります。ドライブにはタブがないので、レイヤーをタブに移すことはできません。保存すると、ドライブのデザインはドライブ用のスキンになり、ドライブを選んでいる間はライブラリの先頭に並びます。

確かめる：キャンバスの下のフォルダの骨組みスイッチで、デザインをフォルダに載せた状態（タブ、紙のシート、ふち付き）と、フォルダのふちだけを重ねた平面の状態を切り替えられます。平面にすると、フォルダに隠れる部分がわかります。自由形アイコンでは、大きさの目安として、うっすらとしたフォルダが後ろに表示されます。その横の4つの丸で、デザインの下地をウィンドウ、明るいデスクトップ、暗いデスクトップ、カラフルな壁紙に切り替えられます。透けるデザインでは、これが大事になります。右側には実際のサイズ（64、32、16ポイント）のアイコンが並ぶので、Finderやエクスプローラーでどう見えるかがわかります。

保存する：右上の名前がスキンの名前になります。空欄のままにすると、デザインの最初の言葉が名前になります。マイスキンに保存でライブラリに保存し、保存して適用なら選んだフォルダにも付けます。保存したあとも開いたままなので、さらに手を加えられます。変更を保存で同じスキンをその場で更新し、新規として保存で別のスキンとして追加します。保存していないデザインは、アプリのほかの画面を見ている間も保たれ、保存するか置き換えるまでこのコンピュータに残ります。

適用先のフォルダの下にある内側のN個のフォルダも含めるは、フォルダパネルのサブフォルダも含めるスイッチと同じものです。どちらかでオンにすると、両方がオンになります。オンの状態で保存して適用を押すと、そのフォルダと中のすべてのフォルダにデザインを付けます。10個を超えるときは先に確認します。ボタンには進み具合が表示され、横に停止があります。終わると通知で結果を知らせます。途中で止めた場合は続けるが、変更できなかったフォルダがある場合は内訳を見るが表示され、押すとフォルダパネルのまとめが開きます。処理の途中でデザイナーを離れても、処理はバックグラウンドで続き、サイドバーの下に進み具合が表示されます。

フォルダパネルの選ぶで中のフォルダを選んだときは、選んだものだけが対象になり、スイッチにも内側の28個のうち22個も含めるのように表示されます。

キー
⌘Z / ⇧⌘Z	取り消し、やり直し
Delete	選択したレイヤーを削除、または選択したフォルダやドライブのパーツを取り除く
⌘D	複製
⌘Cのあと⌘V	コピーして複製を貼り付け。クリップボードに画像があるときの⌘Vは、その画像を追加します
矢印キー、⇧+矢印キー	選択したレイヤーを1または10ずつ移動。フォルダやドライブ全体かそのパーツを選択しているときは、フォルダやドライブ全体を移動
⌘] / ⌘[	前面へ、背面へ（⌥を押すと最前面へ、最背面へ）
Esc	選択を解除
レイヤーのリストで	↑ ↓で選択、⌥↑ ⌥↓で順番の入れ替え、F2で名前の変更

しくみ

デザインはアイコン空間に描かれる

デザインは一辺1024単位の正方形のキャンバスで、フォルダのテンプレートを測るのと同じものです（crates/folderskin-core/src/geometry.rs）。ある位置に置いたものは、フォルダ上でもその位置に来ます。ファイルから追加したアートワーク（SKINS.md）と違い、カバーフィットもトリミングもありません。ドキュメントはsrc/composer/doc.tsで定義された単純なデータで、変更のたびに新しいドキュメントが作られます。取り消しは、これをさかのぼることで実現しています（src/composer/history.ts）。

描画の経路はひとつのまま

WebViewが描くのは、ユーザ自身の作品であるテキスト、絵文字、図形、画像、パターンだけです（src/composer/render.ts）。そのまわりのフォルダは、Rustのテンプレートが描きます。composer_templateは、マスターサイズの2048pxでテンプレートを一度だけレンダリングし、デザインを挟み込むためのレイヤーに分けます（compositor::template_layers）。

top      the front panel's rim light and the shade along its bottom
design   masked by front: the front panel's coverage
middle   the back panel's rim light, the paper sheet and its highlight
design   masked by back: the back panel's coverage, tab included

ステージは毎フレームこの4つを重ねます（src/composer/composite.ts）。ドラッグ中でも十分に軽い処理です。保存されるアイコンはcompositor::render_master_placedが描きます。同じテンプレートを同じヘルパーで描き、両方のパネルを、それぞれの位置に置いたデザインで塗ります。テストthe_layers_stacked_around_a_design_are_the_saved_iconが、両者の差をチャンネルあたり3段階以内に保っているので、キャンバスには実際に書き込まれるアイコンがそのまま表示されます。5つ目のレイヤーoutlineは、フォルダの見えているふちです。平面表示ではこれに色を付けて表示しますが、アイコンに含まれることはありません。

パーツに分かれたフォルダとドライブ

同じテンプレートは、ピースにも分かれます。1つのピースは1つのパーツで、重なり順の中の1か所に入ります。そのため、キャンバスは1つのパーツだけを変えて、残りはそのままにしておけます（src/composer/base.ts、composite.tsのdrawBase）。各ピースは、ピクセルのある範囲に合わせて切り出され、自分が何であるかを示しています。

surface：デザインが表示される場所です。白で、覆う範囲をアルファにしています（フォルダのタブ、背面、前面、ドライブの表面）。
paint：パーツ自身の色です。パーツに好きな色を付けると、ここが変わります。
light：パーツに重なる光と影です。パーツが何色になっても、光と影の色は変わりません。

フォルダのピースはcompositor::template_pieces_inが作ります。背面のパネルが覆う範囲を本体の上端に沿って切ってタブと背面に分け、中間はパーツごとに描き（draw_middle_of：背面の光と影、前面が落とす影、紙）、最後に前面が覆う範囲とその光を加えます。ドライブは、描くものそれぞれがどのパーツに属するかを示します（drive/draw.rsのDrawing::part）。drive::piecesは、表面の下にあるものも上にあるものも、パーツを1つずつ別々に描きます。あるパーツの描画の間に、別のパーツの描画が挟まることはありません。every_drive_comes_apart_into_parts_that_stack_back_into_itが、25種類のドライブすべてでこれを確認し、さらに、デザインを挟んで重ねたピースが、保存されるドライブと3段階以内で一致することも確認します。フォルダについては、the_pieces_stacked_around_a_design_are_the_saved_iconが同じ確認をしています。何も変えていなければ、キャンバスに表示されるのは、これまでずっと保存されてきたのと同じアイコンです。

好きな色を付けたパーツは、そのパーツのpaintを、ピクセルごとにその色へ移したものです。どのピクセルも、パーツ本来の色の平均から離れていたのと同じだけ（明るさで測って）新しい色から離れるので、光と影が残ります。フレームは、フォルダやドライブの中心を基準に、重ねたもの全体を移動、回転、拡大縮小します。ステージはポインタの位置をフレームを通して逆算するので、デザインのレイヤーはフォルダやドライブ上の同じ位置にとどまります。

フォルダやドライブを少しでも変えると、アイコンを描けるのはキャンバスだけになります。保存するときはアイコン全体を2048pxで描き、composed: trueを付けて送ります。composer_saveはそれを、完成したフォルダやドライブとして保存します（キャンバスの下のプレビューも同じ方法で描きます）。何も変えていなければ、保存はこれまでどおりです。

保存

保存するときは、デザインを2048pxでもう一度描いてPNGにエンコードし、小さなJSONヘッダの後ろに生のバイト列として付けてcomposer_saveに送ります（[u32 LE header length][header][PNG]、src/composer/body.ts）。残りはRust側のsrc-tauri/src/composer.rsが行います。

フォルダに配置：デザインからフォルダをレンダリングします。
自由形アイコン：デザインをそのままアイコンにします。完全に透明なものは受け付けません。
保存形式：完成したフォルダ（kind: "folder"、source: "composer"）として保存します。そのため、適用、サムネイル、共有は、ほかの完成したフォルダとまったく同じように動きます。
ドキュメント：画像の隣に<stem>.design.jsonとして保存します。デザインを編集は、これを使ってデザインを開き直します。
ID：デザインのPNG、ドキュメント、形から計算したSHA-256です。同じデザインを2回保存しても、スキンは1つです。
変更を保存：インデックスへの1回の書き込みで古いスキンを置き換え、ライブラリ内の位置も保ちます。お気に入りは新しいIDに引き継がれます。

リミックスでは、composer_skin_imageでスキン自身の画像を読み込みます。

アートワークは、フォルダ全体を覆う画像になります。
完成したフォルダは、画像を中に収めた自由形アイコンになります。アプリが適用するときとまったく同じ見た目です。

コマンド

コマンド	入力	出力
`composer_template`	–	`{size, back, front, middle, top, outline, parts, pieces}`：PNGのデータURLとしての各レイヤー、フォルダの各部分の位置（キャンバス単位）、そしてパーツに分けたフォルダ。各ピースは`{part, role, rect, src}`で、`rect`はテンプレートのピクセル単位
`composer_save`	ヘッダ`{name, tags, shape, design, replaces, composed}`付きの生のボディ	`{skin, replaced}`：保存したスキンと、それが置き換えたデザインのID。`composed`は、画像がフォルダやドライブも含めたアイコン全体であることを表します
`composer_preview`	ヘッダ`{shape, sizes, composed}`付きの生のボディ	各サイズ（16〜512、最大6つ）のアイコンをデータURLで
`composer_image`	`path`	`{url, width, height, name, alpha}`：画像ファイル。最大2048pxで、透明部分があればPNG、なければJPEG
`composer_skin_image`	`skinId`	同上。保存済みスキン自身の画像について
`composer_design`	`skinId`	デザインのドキュメント。ここで作ったスキンでなければ`null`
`composer_drive_template`	`drive`	ドライブのレイヤー。`composer_template`と同じ形式で、`back`は空、`middle`は何も載っていないドライブ、`front`は表面が覆う範囲、`top`は表面の上に重なる部分、`parts`は表面を前面として扱った各部分の位置（ディスクでは、新しいレイヤーを置く位置の`anchor`も含む）、`pieces`はパーツに分けたドライブ
`shapes`	`size`	デザインや絵を作れるすべての形（後述）

デザインのドキュメント

{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }

レイヤーは先頭から順に描かれます。

キャンバス全体を覆うもの：fill（色またはグラデーション）とpattern。
配置するもの：text、emoji、shape、image。それぞれ、キャンバス単位の中心座標x, y、度単位のrotation、反転、省略可能なshadow、省略可能なステッカーのedgeを持ちます。
すべてのレイヤー：opacity、blendと、省略可能なname、hidden、locked。

色は#rrggbb、透ける場合は#rrggbbaaで表します。画像はデータURLとしてドキュメントの中に保存されます。ディスクから読み込んだドキュメントは、まずparseDocを通ります。

不明なレイヤーは取り除き、64を超えるレイヤーは64に切り詰めます。
数値は妥当な範囲に収め、色は正規の形式にそろえます。
PNG、JPEG、WebP、GIFのデータURLでない画像は取り除きます。
新しいバージョンで作られたドキュメントは、誤って読み込まずに拒否します。

フォルダやドライブに加えた変更はbaseに入り、何も変えていなければ省略されます。中身は、パーツのIDをキーにした各パーツの変更と、フレームです。

"base": { "parts": { "case": { "color": "#e53935" }, "face": { "hidden": true }, "paper": { "removed": true, "opacity": 0.5 } },
          "frame": { "x": 0, "y": -20, "rotation": 30, "scale": 0.9 } }

デザインを別のフォルダやドライブに移しても、移した先に同じパーツ（ドライブのケース、フォルダのタブなど）があれば、そのパーツの変更は引き継がれます。パーツに対応する前のFolderSkinは、パーツの変更を除いてデザインを開きます。

ドライブのデザインには、"drive": "mac-external"のようにどのドライブかが書かれ、"version": 2になります。そのため、ドライブに対応する前のFolderSkinは、デザインをフォルダに載せて開いてしまうのではなく、新しいバージョンで作られたドキュメントだと伝えます。フォルダや自由形アイコンのデザインはこれまでどおりバージョン1のままで、ドライブに対応する前に保存したドキュメントも、すべてそのまま開けます。FolderSkinが描かないドライブのデザインは、フォルダのデザインとして読み込みます。

すべての形をひとつのリストに

shapes（src-tauri/src/bases.rs。folderskin_core::base::BASESをもとにしています）は、絵を作れるすべての形を挙げます。3つのフォルダ、すべてのドライブ、そして最後に、フォルダもドライブもないfreeです。デザイナーはこれらの形でデザインを始め、AIの画面はこれらの形に絵を描きます。フォルダパネルで選んだドライブも、このうちのどれかです。各項目は、バージョンが変わっても変わらない単純なデータです。

{ "id": "mac-external", "label": "Mac external drive", "system": "mac", "family": "drive",
  "whole": true, "kind": "external", "thumbnail": "data:image/png;base64,…" }

idは、フォルダならmac-folder、windows-folder、linux-folderのいずれか、ドライブならドライブ自身のID（mac-external、linux-solid-stateなど）、そうでなければfreeです。ウィンドウは、表示中の言語で、各形の名前をcommon.shapes.<id>から、1行の説明をcommon.shapeNotes.<id>から取り、ドライブには、システム名の横にcommon.driveNames.<id>の短い名前を付けます。thumbnailは、指定したサイズ（16〜512px、指定がなければ96）で描いた、何も載っていない形です。フォルダは元の色で、ドライブは表面に何も載せずに描き、freeにはありません。RustではBase::bare(size)が同じものを描きます。

知っておきたい制限

絵文字は、システムの絵文字フォントで描かれます。macOSではこのフォントがビットマップで、くっきり見えるのは160pxほどまでです。そのため、とても大きな絵文字は、Finderの最大のアイコンサイズでは少しぼやけますが、Finderがふだん表示するサイズならどれでもくっきり見えます。
フォントはスタイルとして用意されていて、それぞれmacOS、Windows、Linuxに付属するフォントを、適したものから順に並べたリストになっています（src/composer/fonts.ts）。FolderSkinに同梱しているのはManropeだけです。お持ちの別のフォントを選ぶと、インストール済みのフォントファミリーを名前で指定できます。デザインはピクセルとして保存されるので、フォントが必要なのはデザインを作るコンピュータだけです。
画像の補正はピクセルに対して直接行います（src/composer/imagefx.ts）。macOS 12のWebViewには、キャンバスのフィルタがないためです。ぼかしはボックスぼかしを3回かけたもので、ガウスぼかしに近い結果になります。
下書きはWebViewのストレージに保存されますが、大きな画像をいくつも使ったデザインでは、容量を超えることがあります。その場合も、下書きはアプリを終了するまでは残ります。

ブラウザでのプレビュー

普通のブラウザでpnpm devを実行しても、デザイナーが表示されます。フォルダのレイヤーはdocs/images/composer/にあるPNG（Windowsのものはwindows/、Linuxのものはlinux/）で、cargo run -p folderskin-tools -- composer-layers --out docs/images/composerで書き出します。同じコマンドは、各ドライブのレイヤーを半分のサイズでdrives/<id>/に書き出し、各ドライブの表面の位置をdrives/parts.jsonに記録し、各フォルダと各ドライブの何も載っていない形をbases/に書き出します。ドライブのレイヤーと何も載っていない形は、ロスレスWebPです。各フォルダと各ドライブのレイヤーの隣には、ピースを上から順に並べたpieces.webpと、それぞれのピースがどのパーツのもので、どこに置くかを記したpieces.jsonがあります。folderskin-toolsのテストが、これらがコンポジターの描くピクセルと同じであることを確認しているので、古いまま残ることはありません。WebViewのテストでも、src/composer/drives.tsが、Rustが描く各ドライブの表面の位置に要素を置くことを確認しています。

テスト


`folderskin-core`のcompositor	重ねたレイヤーが保存されるアイコンと一致すること、デザインが描いた位置に来ること、透けるデザインでは紙とふちだけが残ること、アウトラインが見えているふちに沿うこと。各フォルダのピースをデザインを挟んで重ねると保存されるアイコンと一致し、タブ全体が本体より上にあること
`folderskin-core`のdrive	どのドライブのパーツも、間に別のパーツを挟まずに描かれること。そのピースをデザインを挟んで重ねると、保存されるドライブと一致すること
`src-tauri`のstore	デザインのドキュメントがデザインの隣に保存され、再起動後も残り、デザインを削除すると一緒に消え、クラッシュで取り残されたら片付けられること。デザインに上書き保存しても位置が保たれ、デザインでないスキンへの上書きは拒否されること
`src-tauri`のcomposer	ボディの形式、画像のチェック、プレビュー、保存、名前付け、壊れたドキュメント、画像のエンコード。さらに、Tauri自身のIPC（モックランタイム）を通して生のバイト列で送ったデザインが、プレビューされ保存されること
フロントエンド（vitest）	ドキュメントの変更と読み戻し（パーツの変更とフレームも含む）、取り消し、移動・サイズ変更・回転・スナップ、パーツの並び順とフレームの回転、テキストのレイアウトとカーブ、図形、色、画像の補正、テンプレート、ボディの形式
e2e（`e2e/parts.spec.ts`）	USBメモリのパーツがリストに並び、キャンバス上で選べて、色を付け、隠し、取り除いて戻し、保存できること。USBメモリ全体を回転させ、取り消し、ドラッグし、元の位置に戻せること。フォルダの紙を外してタブに色を付けると、色が付くのはタブだけであること