Develop

[pphatdev]

feat: local icon studio — browse, edit, and export SVGs

Description

Introduces /.github/scripts/demo — a zero-build local web app for browsing, visualizing, and editing every icon in the registry. Runs on top of a small Node static server (demo-server.ts) and exposes three pages:

• Browse — searchable grid with category filter, live recolor, and size slider. Click any tile for a detail dialog with copyable SVG and an "Open in Studio" shortcut.
• Studio — Figma-style vector editor for the selected icon.
• Graph — read-only dashboard of registry metrics (per-category count, complexity distribution, size distribution, top 10 largest).

Studio capabilities

• Tools palette: Select, Rectangle, Ellipse, Line — draw shapes by drag on the canvas.
• Corner-drag resize with 4 handles + a W×H measurement label; W/H fields in the properties panel also resize the selection.
• Space + drag pan, Ctrl/Cmd + wheel zoom (50%–2000%, exponential scaling).
• Path node-edit mode — double-click a <path> or press Enter to reveal draggable anchor dots at every vertex. H/V commands are normalized to L on parse so each anchor is fully independent (moving one no longer visually shifts its neighbors).
• Undo / redo (100-step per icon), keyboard shortcuts (V/R/O/L, Delete, Ctrl+D, Ctrl+C/V, arrow-nudge, Ctrl+]/Ctrl+[).
• Fill / stroke controls with color pickers, 12-swatch palette (including none and currentColor), and a preview-color chip (changes how currentColor renders on the canvas without touching the source).
• Quick-actions popover above the selected shape: fill, stroke, stroke-width, duplicate, delete, edit-path toggle.
• Paste external SVG: Ctrl+V reads the system clipboard when the internal one is empty, and dropping an .svg file (or SVG text) onto the canvas imports every shape.
• Save to Repo — the top Export button opens a dialog to pick name and category, then POSTs to /api/save which writes <repo-root>/<category>/<name>.json in the repo format. Falls back to a browser download if the server can't write.

Shell + design

• Material Design dark theme (Tailwind via CDN + Inter + JetBrains Mono + Material Symbols) shared across Browse, Studio, and Graph. Left icon rail carries the page nav so every page feels part of one app.
• Full form-control reset (outline: none, native chrome stripped, custom range thumb, custom select arrow, autofill override).

Registry cleanup

• Stripped inline <style> blocks and the leftover <g id="&hellip;-logo"> wrappers from every brand SVG (193 files). Rendering is unchanged; the JSON is smaller and easier to edit.

Checklist

• All new or updated .json icon files live in their category directory (brands/).
• Icon files use lowercase names with hyphens.
• brands.json / regular.json were not manually edited — still driven by the existing GitHub Action.
• JSON files pass the schema (no shape changes, only inline <style> and wrapping <g> removed).
• Tooling additions are contained under .github/scripts/ and require no changes to consumers of the registry.
• Read the CONTRIBUTING.md guide.

How to try it

npm --prefix .github/scripts install    # first time only
npm --prefix .github/scripts run demo

Then open http://localhost:5173/ (redirects to /browse).

Files at a glance

Area	Files
Server	.github/scripts/demo-server.ts (routes + POST /api/save)
Studio UI	.github/scripts/demo/studio.html, demo/assets/js/studio.js (~1.8k lines)
Browse UI	.github/scripts/demo/browse.html, demo/assets/js/browse.js
Graph UI	.github/scripts/demo/graph.html, demo/assets/js/graph.js
Shared JS	demo/assets/js/data.js, demo/assets/js/shell.js
Docs	.github/scripts/README.md, root README.md (Preview Demo section)
Registry	brands/*.json — 193 files, stripped of inline <style> and wrapping <g>

Test plan

• npm run demo starts the server; /browse, /studio, /graph, and /index.json all return 200.
• Browse: category filter, name search, color picker, and size slider all update the grid live.
• Studio: pick any icon, drag a corner — the shape resizes without jump or drift.
• Studio: double-click a path, drag any anchor — the point tracks the cursor and other anchors stay put.
• Studio: draw a rectangle, undo, redo; each is one history step.
• Studio: + New Icon creates a blank 48×48 SVG; Save to Repo writes custom/<name>.json to the working tree.
• Studio: Ctrl+V with an external SVG on the OS clipboard imports its shapes.
• Studio: Ctrl/Cmd + wheel zooms; Space + drag pans; right-click on the canvas does not open the browser context menu.
• Graph: metrics + all four charts render.
• All 193 brand icons still render identically to main in the Browse grid.