@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/lib/file-icons.generated.ts

@@ -0,0 +1,408 @@
+/**
+ * GENERATED by `bun scripts/gen-file-icons.ts` — do not edit.
+ *
+ * Which glyph of the vscode-icons theme (MIT, vscode-icons-team) a name gets.
+ * The glyphs themselves are in `src/web/styles/file-icons.generated.css`, one
+ * class each: 500 KB of full-colour SVG has no business in a JS bundle, and as
+ * CSS the browser decodes each icon once however many rows use it — which is
+ * also how VS Code draws its own file icon themes.
+ *
+ * Every table has a null prototype. These are looked up by a *filename*, and an
+ * object literal answers for `constructor`, `toString`, `valueOf`,
+ * `hasOwnProperty` and `__proto__` with something inherited and truthy — so
+ * `fileIconName("constructor")` returned the `Object` function and
+ * `fileIconName("__proto__")` returned `Object.prototype`, each interpolated
+ * into a class as `vsi-function Object() { [native code] }`. A file really can
+ * be called `constructor`; a directory really can be called `toString`.
+ */
+
+/** Lowercased extension → icon class suffix. */
+export const EXTENSION_ICONS: Record<string, string> = {
+  "7z": "file-type-zip",
+  "apk": "file-type-binary",
+  "astro": "file-type-astro",
+  "avi": "file-type-video",
+  "avif": "file-type-avif",
+  "babelrc": "file-type-json",
+  "bash": "file-type-shell",
+  "bat": "file-type-bat",
+  "bin": "file-type-binary",
+  "bmp": "file-type-image",
+  "bz2": "file-type-zip",
+  "c": "file-type-c",
+  "cc": "file-type-cpp",
+  "cfg": "file-type-ini",
+  "cjs": "file-type-js",
+  "clj": "file-type-clojure",
+  "cmake": "file-type-cmake",
+  "cmd": "file-type-bat",
+  "conf": "file-type-ini",
+  "cpp": "file-type-cpp",
+  "cs": "file-type-csharp",
+  "csproj": "file-type-csproj",
+  "css": "file-type-css",
+  "css.map": "file-type-cssmap",
+  "csv": "file-type-text",
+  "cts": "file-type-typescript",
+  "d.ts": "file-type-typescriptdef",
+  "dart": "file-type-dartlang",
+  "db": "file-type-db",
+  "deb": "file-type-binary",
+  "diff": "file-type-diff",
+  "dll": "file-type-binary",
+  "doc": "file-type-word",
+  "dockerfile": "file-type-docker",
+  "docx": "file-type-word",
+  "drawio.png": "file-type-drawio",
+  "drawio.svg": "file-type-drawio",
+  "e2e-spec.ts": "file-type-testts",
+  "e2e-spec.tsx": "file-type-testts",
+  "e2e-test.ts": "file-type-testts",
+  "e2e-test.tsx": "file-type-testts",
+  "ejs": "file-type-ejs",
+  "ejs.t": "file-type-hygen",
+  "env": "file-type-config",
+  "eot": "file-type-font",
+  "ex": "file-type-elixir",
+  "exe": "file-type-binary",
+  "exs": "file-type-elixir",
+  "fish": "file-type-shell",
+  "flac": "file-type-audio",
+  "format.ps1xml": "file-type-powershell-format",
+  "gemspec": "file-type-ruby",
+  "gif": "file-type-image",
+  "go": "file-type-go",
+  "gql": "file-type-graphql",
+  "gradle": "file-type-gradle",
+  "graphql": "file-type-graphql",
+  "groovy": "file-type-groovy",
+  "gz": "file-type-zip",
+  "h": "file-type-cheader",
+  "handlebars": "file-type-handlebars",
+  "hbs": "file-type-handlebars",
+  "hpp": "file-type-cppheader",
+  "htm": "file-type-html",
+  "html": "file-type-html",
+  "http": "file-type-http",
+  "ico": "file-type-image",
+  "ini": "file-type-ini",
+  "ipynb": "file-type-jupyter",
+  "jar": "file-type-jar",
+  "java": "file-type-java",
+  "jpeg": "file-type-image",
+  "jpg": "file-type-image",
+  "js": "file-type-js",
+  "js.flow": "file-type-flow",
+  "js.map": "file-type-jsmap",
+  "js.snap": "file-type-jest-snapshot",
+  "json": "file-type-json",
+  "json5": "file-type-json5",
+  "jsonc": "file-type-json",
+  "jsonl": "file-type-json",
+  "jsx": "file-type-reactjs",
+  "jsx.snap": "file-type-jest-snapshot",
+  "kt": "file-type-kotlin",
+  "kts": "file-type-kotlin",
+  "layout.htm": "file-type-layout",
+  "layout.html": "file-type-layout",
+  "less": "file-type-less",
+  "log": "file-type-log",
+  "lua": "file-type-lua",
+  "m4a": "file-type-audio",
+  "map": "file-type-map",
+  "marko.js": "file-type-markojs",
+  "md": "file-type-markdown",
+  "mdx": "file-type-mdx",
+  "mjs": "file-type-js",
+  "mkv": "file-type-video",
+  "mov": "file-type-video",
+  "mp3": "file-type-audio",
+  "mp4": "file-type-video",
+  "mts": "file-type-typescript",
+  "nix": "file-type-nix",
+  "npmrc": "file-type-npm",
+  "nvmrc": "file-type-node",
+  "ogg": "file-type-audio",
+  "otf": "file-type-font",
+  "pdf": "file-type-pdf2",
+  "php": "file-type-php",
+  "pl": "file-type-perl",
+  "plist": "file-type-config",
+  "png": "file-type-image",
+  "prisma": "file-type-prisma",
+  "properties": "file-type-ini",
+  "proto": "file-type-protobuf",
+  "ps1": "file-type-powershell",
+  "py": "file-type-python",
+  "pyi": "file-type-python",
+  "r": "file-type-r",
+  "rake": "file-type-rake",
+  "rar": "file-type-zip",
+  "rb": "file-type-ruby",
+  "rest": "file-type-rest",
+  "rpm": "file-type-binary",
+  "rs": "file-type-rust",
+  "sass": "file-type-sass",
+  "scala": "file-type-scala",
+  "scss": "file-type-scss",
+  "sh": "file-type-shell",
+  "sln": "file-type-sln",
+  "so": "file-type-binary",
+  "spec.js": "file-type-testjs",
+  "spec.jsx": "file-type-testjs",
+  "spec.mjs": "file-type-testjs",
+  "spec.ts": "file-type-testts",
+  "spec.tsx": "file-type-testts",
+  "sql": "file-type-sql",
+  "sqlite": "file-type-sqlite",
+  "sqlite3": "file-type-sqlite",
+  "stories.js": "file-type-storybook",
+  "stories.jsx": "file-type-storybook",
+  "stories.mdx": "file-type-storybook",
+  "stories.ts": "file-type-storybook",
+  "stories.tsx": "file-type-storybook",
+  "story.js": "file-type-storybook",
+  "story.jsx": "file-type-storybook",
+  "story.mdx": "file-type-storybook",
+  "story.ts": "file-type-storybook",
+  "story.tsx": "file-type-storybook",
+  "styl": "file-type-stylus",
+  "svelte": "file-type-svelte",
+  "svg": "file-type-svg",
+  "swift": "file-type-swift",
+  "tar": "file-type-zip",
+  "test.js": "file-type-testjs",
+  "test.jsx": "file-type-testjs",
+  "test.mjs": "file-type-testjs",
+  "test.ts": "file-type-testts",
+  "test.tsx": "file-type-testts",
+  "tex": "file-type-tex",
+  "tf": "file-type-terraform",
+  "tfvars": "file-type-terraform",
+  "tgz": "file-type-zip",
+  "tif": "file-type-image",
+  "tiff": "file-type-image",
+  "toml": "file-type-toml",
+  "ts": "file-type-typescript",
+  "ts.snap": "file-type-jest-snapshot",
+  "tsv": "file-type-text",
+  "tsx": "file-type-reactts",
+  "tsx.snap": "file-type-jest-snapshot",
+  "ttf": "file-type-font",
+  "txt": "file-type-text",
+  "types.ps1xml": "file-type-powershell-types",
+  "vb": "file-type-vb",
+  "vbs": "file-type-vb",
+  "vue": "file-type-vue",
+  "wasm": "file-type-wasm",
+  "wav": "file-type-audio",
+  "webm": "file-type-video",
+  "webmanifest": "file-type-json",
+  "webp": "file-type-webp",
+  "woff": "file-type-font",
+  "woff2": "file-type-font",
+  "xls": "file-type-excel",
+  "xlsx": "file-type-excel",
+  "xml": "file-type-xml",
+  "xz": "file-type-zip",
+  "yaml": "file-type-yaml",
+  "yml": "file-type-yaml",
+  "zip": "file-type-zip",
+  "zsh": "file-type-shell",
+};
+
+/** Lowercased whole filename → icon; checked before the extension. */
+export const FILENAME_ICONS: Record<string, string> = {
+  ".browserslistrc": "file-type-browserslist",
+  ".dockerignore": "file-type-docker",
+  ".env.development": "file-type-dotenv",
+  ".env.example": "file-type-dotenv",
+  ".env.local": "file-type-dotenv",
+  ".env.production": "file-type-dotenv",
+  ".env.test": "file-type-dotenv",
+  ".eslintrc": "file-type-eslint",
+  ".eslintrc.js": "file-type-eslint",
+  ".eslintrc.json": "file-type-eslint",
+  ".gitattributes": "file-type-git",
+  ".gitignore": "file-type-git",
+  ".gitkeep": "file-type-git",
+  ".gitlab-ci.yml": "file-type-gitlab",
+  ".gitmodules": "file-type-git",
+  ".mailmap": "file-type-git",
+  ".npmignore": "file-type-npm",
+  ".prettierignore": "file-type-prettier",
+  ".prettierrc": "file-type-prettier",
+  ".prettierrc.json": "file-type-prettier",
+  ".yarnrc": "file-type-yarn",
+  "angular.json": "file-type-angular",
+  "app.json": "file-type-expo",
+  "appveyor.yml": "file-type-appveyor",
+  "astro.config.mjs": "file-type-astroconfig",
+  "azure-pipelines.yml": "file-type-azurepipelines",
+  "build": "file-type-bazel",
+  "build.gradle.kts": "file-type-gradle",
+  "bun.lock": "file-type-bun",
+  "bun.lockb": "file-type-bun",
+  "bunfig.toml": "file-type-bunfig",
+  "cargo.lock": "file-type-rust",
+  "compose.yaml": "file-type-docker",
+  "docker-compose.yaml": "file-type-docker",
+  "docker-compose.yml": "file-type-docker",
+  "dockerfile": "file-type-docker",
+  "favicon.ico": "file-type-favicon",
+  "firebase.json": "file-type-firebasehosting",
+  "gatsby-config.js": "file-type-gatsby",
+  "gemfile": "file-type-ruby",
+  "gemfile.lock": "file-type-ruby",
+  "go.mod": "file-type-go-package",
+  "go.sum": "file-type-go-package",
+  "go.work": "file-type-go-package",
+  "gradlew": "file-type-gradle",
+  "jenkinsfile": "file-type-groovy",
+  "jest.config.js": "file-type-jest",
+  "jest.config.ts": "file-type-jest",
+  "jsconfig.json": "file-type-jsconfig",
+  "justfile": "file-type-just",
+  "karma.conf.js": "file-type-karma",
+  "meson.build": "file-type-meson",
+  "netlify.toml": "file-type-netlify",
+  "next.config.js": "file-type-next",
+  "nodemon.json": "file-type-nodemon",
+  "now.json": "file-type-zeit",
+  "nuxt.config.ts": "file-type-nuxt",
+  "package-lock.json": "file-type-npm",
+  "package.json": "file-type-npm",
+  "pipfile": "file-type-python",
+  "pipfile.lock": "file-type-python",
+  "pnpm-lock.yaml": "file-type-pnpm",
+  "poetry.lock": "file-type-poetry",
+  "pom.xml": "file-type-maven",
+  "procfile": "file-type-procfile",
+  "pytest.ini": "file-type-pytest",
+  "rakefile": "file-type-rake",
+  "robots.txt": "file-type-robots",
+  "rollup.config.js": "file-type-rollup",
+  "serverless.yml": "file-type-serverless",
+  "tailwind.config.js": "file-type-tailwind",
+  "tailwind.config.ts": "file-type-tailwind",
+  "tox.ini": "file-type-tox",
+  "tsconfig.json": "file-type-tsconfig",
+  "vagrantfile": "file-type-vagrant",
+  "vercel.json": "file-type-zeit",
+  "vite.config.js": "file-type-vite",
+  "vite.config.ts": "file-type-vite",
+  "vue.config.js": "file-type-vueconfig",
+  "webpack.config.js": "file-type-webpack",
+  "workspace": "file-type-bazel",
+  "yarn.lock": "file-type-yarn",
+};
+
+/** Lowercased folder name → icon. */
+export const FOLDER_ICONS: Record<string, string> = {
+  ".git": "folder-type-git",
+  ".github": "folder-type-github",
+  ".husky": "folder-type-husky",
+  ".vscode": "folder-type-vscode",
+  "__tests__": "folder-type-test",
+  "android": "folder-type-android",
+  "api": "folder-type-api",
+  "app": "folder-type-app",
+  "assets": "folder-type-asset",
+  "bin": "folder-type-binary",
+  "build": "folder-type-dist",
+  "client": "folder-type-client",
+  "components": "folder-type-component",
+  "config": "folder-type-config",
+  "controllers": "folder-type-controller",
+  "coverage": "folder-type-coverage",
+  "database": "folder-type-db",
+  "db": "folder-type-db",
+  "dist": "folder-type-dist",
+  "docs": "folder-type-docs",
+  "e2e": "folder-type-e2e",
+  "fonts": "folder-type-light-fonts",
+  "helpers": "folder-type-helper",
+  "hooks": "folder-type-hook",
+  "i18n": "folder-type-locale",
+  "images": "folder-type-images",
+  "ios": "folder-type-ios",
+  "lib": "folder-type-library",
+  "locales": "folder-type-locale",
+  "logs": "folder-type-log",
+  "middleware": "folder-type-middleware",
+  "node_modules": "folder-type-light-node",
+  "packages": "folder-type-package",
+  "public": "folder-type-public",
+  "routes": "folder-type-route",
+  "scripts": "folder-type-script",
+  "services": "folder-type-services",
+  "src": "folder-type-src",
+  "temp": "folder-type-temp",
+  "test": "folder-type-test",
+  "tests": "folder-type-test",
+  "tmp": "folder-type-temp",
+  "utils": "folder-type-tools",
+  "views": "folder-type-view",
+};
+
+/** Lowercased folder name → icon, for an expanded folder. */
+export const FOLDER_OPEN_ICONS: Record<string, string> = {
+  ".git": "folder-type-git-opened",
+  ".github": "folder-type-github-opened",
+  ".husky": "folder-type-husky-opened",
+  ".vscode": "folder-type-vscode-opened",
+  "__tests__": "folder-type-test-opened",
+  "android": "folder-type-android-opened",
+  "api": "folder-type-api-opened",
+  "app": "folder-type-app-opened",
+  "assets": "folder-type-asset-opened",
+  "bin": "folder-type-binary-opened",
+  "build": "folder-type-dist-opened",
+  "client": "folder-type-client-opened",
+  "components": "folder-type-component-opened",
+  "config": "folder-type-config-opened",
+  "controllers": "folder-type-controller-opened",
+  "coverage": "folder-type-coverage-opened",
+  "database": "folder-type-db-opened",
+  "db": "folder-type-db-opened",
+  "dist": "folder-type-dist-opened",
+  "docs": "folder-type-docs-opened",
+  "e2e": "folder-type-e2e-opened",
+  "fonts": "folder-type-light-fonts-opened",
+  "helpers": "folder-type-helper-opened",
+  "hooks": "folder-type-hook-opened",
+  "i18n": "folder-type-locale-opened",
+  "images": "folder-type-images-opened",
+  "ios": "folder-type-ios-opened",
+  "lib": "folder-type-library-opened",
+  "locales": "folder-type-locale-opened",
+  "logs": "folder-type-log-opened",
+  "middleware": "folder-type-middleware-opened",
+  "node_modules": "folder-type-light-node-opened",
+  "packages": "folder-type-package-opened",
+  "public": "folder-type-public-opened",
+  "routes": "folder-type-route-opened",
+  "scripts": "folder-type-script-opened",
+  "services": "folder-type-services-opened",
+  "src": "folder-type-src-opened",
+  "temp": "folder-type-temp-opened",
+  "test": "folder-type-test-opened",
+  "tests": "folder-type-test-opened",
+  "tmp": "folder-type-temp-opened",
+  "utils": "folder-type-tools-opened",
+  "views": "folder-type-view-opened",
+};
+
+export const DEFAULT_FILE_ICON = "default-file";
+export const DEFAULT_FOLDER_ICON = "default-folder";
+export const DEFAULT_FOLDER_OPEN_ICON = "default-folder-opened";
+
+/** Every icon this module can name, for the test that pairs the two files. */
+export const ICON_NAMES: readonly string[] = ["default-file","default-folder","default-folder-opened","file-type-angular","file-type-appveyor","file-type-astro","file-type-astroconfig","file-type-audio","file-type-avif","file-type-azurepipelines","file-type-bat","file-type-bazel","file-type-binary","file-type-browserslist","file-type-bun","file-type-bunfig","file-type-c","file-type-cheader","file-type-clojure","file-type-cmake","file-type-config","file-type-cpp","file-type-cppheader","file-type-csharp","file-type-csproj","file-type-css","file-type-cssmap","file-type-dartlang","file-type-db","file-type-diff","file-type-docker","file-type-dotenv","file-type-drawio","file-type-ejs","file-type-elixir","file-type-eslint","file-type-excel","file-type-expo","file-type-favicon","file-type-firebasehosting","file-type-flow","file-type-font","file-type-gatsby","file-type-git","file-type-gitlab","file-type-go","file-type-go-package","file-type-gradle","file-type-graphql","file-type-groovy","file-type-handlebars","file-type-html","file-type-http","file-type-hygen","file-type-image","file-type-ini","file-type-jar","file-type-java","file-type-jest","file-type-jest-snapshot","file-type-js","file-type-jsconfig","file-type-jsmap","file-type-json","file-type-json5","file-type-jupyter","file-type-just","file-type-karma","file-type-kotlin","file-type-layout","file-type-less","file-type-log","file-type-lua","file-type-map","file-type-markdown","file-type-markojs","file-type-maven","file-type-mdx","file-type-meson","file-type-netlify","file-type-next","file-type-nix","file-type-node","file-type-nodemon","file-type-npm","file-type-nuxt","file-type-pdf2","file-type-perl","file-type-php","file-type-pnpm","file-type-poetry","file-type-powershell","file-type-powershell-format","file-type-powershell-types","file-type-prettier","file-type-prisma","file-type-procfile","file-type-protobuf","file-type-pytest","file-type-python","file-type-r","file-type-rake","file-type-reactjs","file-type-reactts","file-type-rest","file-type-robots","file-type-rollup","file-type-ruby","file-type-rust","file-type-sass","file-type-scala","file-type-scss","file-type-serverless","file-type-shell","file-type-sln","file-type-sql","file-type-sqlite","file-type-storybook","file-type-stylus","file-type-svelte","file-type-svg","file-type-swift","file-type-tailwind","file-type-terraform","file-type-testjs","file-type-testts","file-type-tex","file-type-text","file-type-toml","file-type-tox","file-type-tsconfig","file-type-typescript","file-type-typescriptdef","file-type-vagrant","file-type-vb","file-type-video","file-type-vite","file-type-vue","file-type-vueconfig","file-type-wasm","file-type-webp","file-type-webpack","file-type-word","file-type-xml","file-type-yaml","file-type-yarn","file-type-zeit","file-type-zip","folder-type-android","folder-type-android-opened","folder-type-api","folder-type-api-opened","folder-type-app","folder-type-app-opened","folder-type-asset","folder-type-asset-opened","folder-type-binary","folder-type-binary-opened","folder-type-client","folder-type-client-opened","folder-type-component","folder-type-component-opened","folder-type-config","folder-type-config-opened","folder-type-controller","folder-type-controller-opened","folder-type-coverage","folder-type-coverage-opened","folder-type-db","folder-type-db-opened","folder-type-dist","folder-type-dist-opened","folder-type-docs","folder-type-docs-opened","folder-type-e2e","folder-type-e2e-opened","folder-type-git","folder-type-git-opened","folder-type-github","folder-type-github-opened","folder-type-helper","folder-type-helper-opened","folder-type-hook","folder-type-hook-opened","folder-type-husky","folder-type-husky-opened","folder-type-images","folder-type-images-opened","folder-type-ios","folder-type-ios-opened","folder-type-library","folder-type-library-opened","folder-type-light-fonts","folder-type-light-fonts-opened","folder-type-light-node","folder-type-light-node-opened","folder-type-locale","folder-type-locale-opened","folder-type-log","folder-type-log-opened","folder-type-middleware","folder-type-middleware-opened","folder-type-package","folder-type-package-opened","folder-type-public","folder-type-public-opened","folder-type-route","folder-type-route-opened","folder-type-script","folder-type-script-opened","folder-type-services","folder-type-services-opened","folder-type-src","folder-type-src-opened","folder-type-temp","folder-type-temp-opened","folder-type-test","folder-type-test-opened","folder-type-tools","folder-type-tools-opened","folder-type-view","folder-type-view-opened","folder-type-vscode","folder-type-vscode-opened"];
+
+// After the literals rather than `Object.create(null)` around each, so the
+// tables above stay readable as data and `Record<string, string>` still
+// describes them.
+for (const table of [EXTENSION_ICONS, FILENAME_ICONS, FOLDER_ICONS, FOLDER_OPEN_ICONS]) {
+  Object.setPrototypeOf(table, null);
+}

package/src/web/lib/file-icons.tsx

@@ -0,0 +1,192 @@
+/**
+ * The one file icon in the app: the vscode-icons theme, for every surface that
+ * lists a file.
+ *
+ * What it replaces is worth stating, because it looked deliberate: the tree used
+ * a single lucide `FileCode` glyph tinted a different colour per language, so
+ * twenty languages were the same shape in twenty shades and the eye had nothing
+ * to catch. A file icon's whole job is to be recognised before the name is read.
+ *
+ * Drawn as a `background-image` on a span rather than an inline `<svg>`, for
+ * three reasons. These glyphs are full-colour artwork, so there is no
+ * `currentColor` to inherit and nothing to gain from having the paths in the
+ * DOM. A tree of 500 rows would otherwise carry a few thousand extra path
+ * nodes for React to reconcile on every expand. And a row is draggable — an
+ * inner `<img>` supplies its own drag image and has to be talked out of it.
+ *
+ * Resolution order is the extension theme's own: whole filename, then double
+ * extension (`.spec.ts`), then extension. `fileIconElement` is for the slots
+ * that want a component rather than an element — the tab bar and the palette
+ * both take an `icon: ElementType`.
+ */
+import type { FC } from "react";
+// `?url` gives the built stylesheet's address without putting it on the module
+// graph: nothing is fetched until the `<link>` below is appended.
+import ICON_CSS_URL from "@/styles/file-icons.generated.css?url";
+import { basename, cn } from "@/lib/utils";
+import {
+  DEFAULT_FILE_ICON,
+  DEFAULT_FOLDER_ICON,
+  DEFAULT_FOLDER_OPEN_ICON,
+  EXTENSION_ICONS,
+  FILENAME_ICONS,
+  FOLDER_ICONS,
+  FOLDER_OPEN_ICONS,
+} from "./file-icons.generated";
+
+/**
+ * The artwork is fetched when something first asks for an icon, not before.
+ *
+ * Imported at module scope it was not lazy in any useful sense: this module is
+ * reached from `tab-type-icons.ts`, which the tab bar, the mobile nav and the
+ * dock header all import eagerly, so Vite hoisted the stylesheet into a
+ * `<link rel="stylesheet">` in `index.html` — render-blocking on every load,
+ * measured at 499,375 bytes raw / 127,333 gzip / 79,836 brotli. The app's
+ * entire other stylesheet is 25,956 gzip, so the icons were 4.9x everything
+ * else put together, in front of the first paint.
+ *
+ * So it is fetched at runtime by a `<link>` this function appends. The cost is
+ * honest and visible: an icon that renders before the stylesheet lands is a
+ * correctly-sized blank span for one round trip, so icons pop in a beat after
+ * the text. That is the trade — paint the app now and the artwork shortly,
+ * rather than neither until half a megabyte arrives — and a session that never
+ * lists a file never fetches it at all.
+ *
+ * A `<link>` rather than `import()`, which is what this used to be: a dynamic
+ * import that fails dispatches `vite:preloadError`, and `chunk-recovery.ts`
+ * answers that by purging the asset caches and reloading the page — a path that
+ * deliberately steps around the unsaved-work guard, because a missing *code*
+ * chunk means the app cannot run. A missing icon sheet means the icons are
+ * unstyled. A tunnel flap while someone scrolls a file tree must not reload the
+ * app out from under them, and `.catch()` would not have helped: the event is
+ * dispatched whether or not the promise is handled.
+ *
+ * Called from render rather than an effect because the point is to start the
+ * fetch at the earliest moment anything wants an icon; it is idempotent and
+ * touches no state, so a double invocation under StrictMode costs nothing.
+ */
+let cssPending = false;
+let cssAttempts = 0;
+function requestIconCss(): void {
+  // Two attempts, not one: a tab left open through a network blip would
+  // otherwise show unstyled icons for the rest of its life. Not unlimited,
+  // because every icon that mounts comes through here.
+  if (cssPending || cssAttempts >= 2 || typeof document === "undefined") return;
+  cssPending = true;
+  cssAttempts++;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = ICON_CSS_URL;
+  link.addEventListener("error", () => {
+    link.remove();
+    cssPending = false;
+  });
+  document.head.appendChild(link);
+}
+
+/** The icon name for a file, by name alone. */
+export function fileIconName(path: string): string {
+  const name = basename(path).toLowerCase();
+  const byName = FILENAME_ICONS[name];
+  if (byName) return byName;
+
+  const parts = name.split(".");
+  if (parts.length > 2) {
+    // `.spec.ts`, `.d.ts`, `.config.js` — the theme gives these their own
+    // glyphs, and matching only the last extension would lose them.
+    const double = `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
+    const byDouble = EXTENSION_ICONS[double];
+    if (byDouble) return byDouble;
+  }
+  if (parts.length > 1) {
+    const byExt = EXTENSION_ICONS[parts[parts.length - 1]!];
+    if (byExt) return byExt;
+  }
+  // A dotfile with no extension (`.gitignore` handled above, `.foorc` not) has
+  // its name as its only extension.
+  if (name.startsWith(".")) {
+    const byDot = EXTENSION_ICONS[name.slice(1)];
+    if (byDot) return byDot;
+  }
+  return DEFAULT_FILE_ICON;
+}
+
+/** The icon name for a folder, open or closed. */
+export function folderIconName(path: string, open = false): string {
+  const name = basename(path).toLowerCase();
+  const table = open ? FOLDER_OPEN_ICONS : FOLDER_ICONS;
+  return table[name] ?? (open ? DEFAULT_FOLDER_OPEN_ICON : DEFAULT_FOLDER_ICON);
+}
+
+export type FileIconKind = "file" | "directory";
+
+export interface FileIconProps {
+  /** File or folder name; a whole path is fine, only the last segment is read. */
+  name: string;
+  kind?: FileIconKind;
+  /** Directories only — the expanded glyph. */
+  open?: boolean;
+  className?: string;
+}
+
+/**
+ * `size-4` by default, which is the size the trees and tab strips use. Pass a
+ * `size-*` class to override — the span has no intrinsic size, so a caller that
+ * passes none gets nothing visible.
+ *
+ * `inline-block` is load-bearing: `width`/`height` do not apply to a
+ * non-replaced inline element, so a bare `<span class="size-4">` measures 0×0
+ * wherever its parent is not a flex container. The trees are flex rows and
+ * blockify it for free; the tab strip wraps its icon in a `<span class="relative">`
+ * for the notification dot, and there the icon simply did not render — the one
+ * place an inline `<svg>` would have worked without saying so.
+ */
+function iconClass(icon: string, className?: string): string {
+  return cn(
+    "inline-block shrink-0 size-4 bg-center bg-no-repeat bg-contain",
+    `vsi-${icon}`,
+    className,
+  );
+}
+
+export function FileIcon({ name, kind = "file", open, className }: FileIconProps) {
+  requestIconCss();
+  const icon = kind === "directory" ? folderIconName(name, open) : fileIconName(name);
+  return <span aria-hidden="true" className={iconClass(icon, className)} />;
+}
+
+/**
+ * The same icon as a zero-prop component, for the `icon: ElementType` slots the
+ * tab bar and the command palette already have.
+ *
+ * Cached because React treats a *component type* as identity: a fresh arrow
+ * function per render would unmount and remount the node on every keystroke in
+ * the palette's filter.
+ *
+ * Keyed by the resolved glyph rather than by the path that resolved to it. A
+ * path key is wrong twice over: `src/a/index.ts` and `src/b/index.ts` are two
+ * entries rendering the same span, and a repository indexed by the palette has
+ * as many keys as it has files — which is why the old key needed an eviction
+ * rule, and why that rule was `clear()`, remounting every icon on screen at the
+ * 501st distinct path. There are 224 glyphs, so keying on those makes the cache
+ * bounded by construction and eviction unnecessary.
+ */
+const elementCache = new Map<string, FC<{ className?: string }>>();
+
+export function fileIconElement(
+  name: string,
+  kind: FileIconKind = "file",
+): FC<{ className?: string }> {
+  // The palette asks for hundreds of these before any of them renders, so the
+  // fetch starts here too rather than waiting for the first mount.
+  requestIconCss();
+  const icon = kind === "directory" ? folderIconName(name) : fileIconName(name);
+  const cached = elementCache.get(icon);
+  if (cached) return cached;
+  const Bound: FC<{ className?: string }> = ({ className }) => (
+    <span aria-hidden="true" className={iconClass(icon, className)} />
+  );
+  Bound.displayName = `FileIcon(${icon})`;
+  elementCache.set(icon, Bound);
+  return Bound;
+}

package/src/web/lib/fluent-icon.tsx

@@ -0,0 +1,62 @@
+/**
+ * The one component every Fluent-backed product icon is built from.
+ *
+ * It has to be prop-compatible with lucide, because the swap is meant to be an
+ * import-path change and nothing else: 233 files pass `className`, a handful
+ * pass `strokeWidth`, and several hand the component itself to a slot typed
+ * `ElementType`. So `size` is honoured, `strokeWidth` is accepted and dropped
+ * (these glyphs are filled outlines — there is no stroke to weight), and the
+ * ref goes through, since a few icons sit inside a Radix trigger.
+ *
+ * The glyphs are 20×20 where lucide's are 24×24. That is not a detail to
+ * normalise away: Fluent's outlines are drawn *for* a 20px box, and scaling one
+ * into a 24px viewBox is what makes an icon set look slightly soft next to its
+ * own labels. The viewBox stays 20 and the rendered size is whatever the caller
+ * asks for — which in this app is a Tailwind `size-*` class almost everywhere,
+ * and those win over the width/height attributes because they are CSS.
+ */
+import { forwardRef, type SVGProps } from "react";
+import { ICON_VIEW_BOX } from "./icons.generated";
+
+export interface ProductIconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+  /** Pixel size, for the few call sites that pass no `size-*` class. */
+  size?: number | string;
+  /** Accepted for lucide compatibility and ignored: these glyphs are filled. */
+  strokeWidth?: number | string;
+  absoluteStrokeWidth?: boolean;
+}
+
+export type ProductIcon = ReturnType<typeof fluentIcon>;
+
+export function fluentIcon(name: string, paths: readonly string[]) {
+  const Icon = forwardRef<SVGSVGElement, ProductIconProps>(function Icon(
+    { size = 24, strokeWidth: _sw, absoluteStrokeWidth: _asw, ...rest },
+    ref,
+  ) {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={ICON_VIEW_BOX}
+        width={size}
+        height={size}
+        fill="currentColor"
+        aria-hidden="true"
+        focusable="false"
+        // Which icon this is, readable from rendered markup and in devtools.
+        // lucide put the same thing in a *class* (`lucide lucide-circle-check`),
+        // which is why a test could assert a tool card was spinning by looking
+        // for `lucide-loader-circle`. An attribute keeps that possible without
+        // offering a class name for stylesheets to start depending on.
+        data-icon={name}
+        {...rest}
+      >
+        {paths.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </svg>
+    );
+  });
+  Icon.displayName = name;
+  return Icon;
+}