@pkoooo/typetool_icons 1.0.3

package/README.md

@@ -0,0 +1,63 @@
+# @pkoooo/typetool_icons
+
+**The single source of truth for Typetool icons.** One font, one registry, generated SVGs, and the `<Icon>` component — consumed by `typetool_react`, `typetool_app/frontend`, and the docs. Zero runtime deps (React is a peer, only needed for `<Icon>`).
+
+## Layout
+
+```
+fonts/Typetool_Icons_2-Regular.otf   ← the font — draw / edit icons here (Glyphs)
+src/icons.ts                         ← iconRegistry: name → { char, label, category }
+src/svgSource.ts                     ← multi-tone / not-yet-in-font icons (annex)
+src/iconPaths.generated.ts           ← codegen output (never hand-edit)
+src/Icon.tsx                         ← <Icon name="…" /> (svgSource → path → font glyph)
+src/index.ts                         ← public surface
+scripts/generate-icon-svgs.cjs       ← font → SVG codegen (npm run icons:gen)
+```
+
+## Public API
+
+```ts
+import { Icon, iconRegistry, icons, iconPaths, iconViewBox, svgSource } from '@pkoooo/typetool_icons'
+import type { TypeIcon, IconDef, IconCategory } from '@pkoooo/typetool_icons'
+```
+
+The font ships in the package; consumers `@font-face` it from `@pkoooo/typetool_icons/fonts/Typetool_Icons_2-Regular.otf`.
+
+## Designing icons — the Glyphs source
+
+The **carrier is a `.glyphs` file** (`fonts/Typetool_Icons.glyphs`) with **two masters**:
+
+- **Stroke** — the OPEN centre-line paths with each icon's **own** `strokeWidth` applied. Edit the shape and dial the weight here; every icon keeps its designed weight (not a uniform fraction).
+- **Outline** — the stroke-EXPANDED filled outline (the baked result / reference).
+
+Workflow:
+
+1. `npm run icons:glyphs [weightMultiplier]` — (re)builds the `.glyphs` from the staged sources (each icon at its own stroke weight; `×mult` scales all).
+2. Open `fonts/Typetool_Icons.glyphs` in **Glyphs**. Refine in the Stroke master; the Outline master shows the expansion.
+3. Export an **OTF** → overwrite `fonts/Typetool_Icons_2-Regular.otf`.
+4. `npm run icons:gen` — rewrites `iconPaths.generated.ts`.
+5. `npm run pub` (or root `pub:only icons`); consumers refresh to `@latest`.
+
+## Figma
+
+`npm run icons:figma` normalises every icon onto a 24×24 canvas and writes `figma/` — a local Figma plugin that builds the library as real component sets (`Icon` with one variant per icon, `IconButton`, `Button`, `Toolbar` with 1–10 swappable slots), plus `figma/svg/` as a drag-in fallback. Import `figma/manifest.json` in Figma once, then hit **Build library** after each re-export. See [`figma/README.md`](figma/README.md).
+
+### Staging scripts
+
+- `icons:import-app` — pull the frontend's inline `<svg>` icons into `src/appIconsSource.generated.ts` (staging).
+- `icons:glyphs` — build the two-master `.glyphs` design source (recommended).
+- `icons:inject [strokeFrac]` — bake a quick stroke-expanded OTF directly (`fonts/…_2-staged.otf`) without Glyphs; good for a fast preview, less control than the `.glyphs`.
+- Review everything (font vs SVG vs injected, live stroke slider) in the preview app: root `npm run preview:icons` → http://localhost:5012.
+
+Multi-tone icons (opacity / two-colour) can't be mono font glyphs — they live in `svgSource.ts` and are rendered as SVG directly. `svgSource` icons carry a `suggestedChar`; `scripts/inject-icons-to-font.cjs` seeds them into a fresh OTF to refine in Glyphs.
+
+## Cutover — remaining work (deliberate, needs a publish)
+
+This package was extracted from `typetool_react/src/icons` (which still has the working copy). To finish making it *the* single source:
+
+1. **Publish** — `npm run pub:only icons` from the repo root (publishes `@pkoooo/typetool_icons`, refreshes consumers). Already wired into `scripts/publish-chain.sh` (order: `types → icons → …`).
+2. **typetool_react** — add `@pkoooo/typetool_icons` to deps; replace `src/icons/*` with re-exports from it, and export `Icon` from the package index so the app can reach it. The 18 internal `Icon` importers keep working.
+3. **typetool_app/frontend** — add the dep, `@font-face` the font, and migrate the ~61 inline `<svg>` icons (see the docs "App icon audit") to `<Icon name="…" />`.
+4. **typetool_docs** — import `iconRegistry` / `iconPaths` from the package instead of regex-scanning source (more accurate: 83 registry entries vs the 61 the scan catches).
+
+Until step 2, `typetool_react/src/icons` remains the live copy so nothing breaks.