v0.1.3 - TFM

New

Distribution: Better Organized Output Files

The build report now groups generated files by format (CSS, SCSS, Less, JS/TS, JSON) into collapsible sections. You can download a ZIP archive for each format, or retrieve everything at once with Download all, without writing any files to your project.

$extensions Support

The $extensions metadata for tokens (for example, the com.figma block) is now preserved and displayed in the details panel, with a readable presentation and a button to view the raw JSON.

v0.1.2 - TFM

New

• Click anywhere in the window to deselect variables.
• The row settings icon turns the primary color when the row is selected.
• Redesigned variable inspector: clearer sections, and each value shows its resolved hex, OKLCH and gamut.
• Composite tokens (typography, shadow, border, transition, gradient) are now edited field by field in the inspector instead of raw JSON.
• "Open in editor" button to jump to a variable's source file.
• References ("Used in N tokens") is now a collapsible row: click to reveal the referencing tokens and jump to them.

Fixes

• The selection outline now wraps the whole row, settings cell included.
• Boundary colors like pure white are no longer wrongly flagged "out of gamut".
• "Used in N tokens" was always showing 0 for collection-namespaced aliases (Tokens Studio / PrimeNG style, e.g. {primitive.green.500}); references are now counted correctly.

Improvements

• npm page: added keywords (design-tokens, dtcg, style-dictionary, figma-variables, oklch...).

v0.1.1 - TFM

First usable public release.

v0.1.0 shipped without a package README; v0.1.1 is the first complete npm publish.

Token Flow Manager is a local Design Tokens manager. It starts a local Node
server (bound to 127.0.0.1), parses every *.tokens.json in your project,
resolves aliases across collections and modes, and opens a Figma-Variables-style
dashboard in your browser. It edits the source JSON in place — atomically,
preserving key order and formatting — and never commits for you.

npx token-flow-manager            # welcome screen → pick a project
npx token-flow-manager ./design   # …or open a project directly
npm i -g token-flow-manager       # install globally, then just run:  tokenflow

Requires Node ≥ 20. Runs in your default browser — no macOS Gatekeeper hassle.

---

✨ Highlights

• 🎨 OKLCH color picker with live gamut feedback (new) — pick wide-gamut
  colors with L·C·H sliders and see at a glance whether the result fits sRGB
  and/or Display P3.
• 🧮 Figma-Variables-style table — one row per variable, one column per mode
  (light / dark / brand…), alias chips, inline editing, resizable columns.
• 🔗 Cross-collection alias resolution — {group.token} and JSON Pointer, with
  cycle / broken-reference detection and fuzzy-match quick-fixes.
• ↩️ Byte-exact undo / redo (⌘Z / ⌘⇧Z), server-side.
• 🚀 Zero-config welcome screen — open a recent project or browse for one; no
  path on the command line required.

---

🎨 OKLCH & wide-gamut color (recent feature)

The cell color picker now has a dedicated OKLCH mode (toggle next to RGB),
built on culori:

• L · C · H + alpha sliders working directly in OKLCH space — values are kept in
  OKLCH and only converted to a CSS string on commit, so wide-gamut colors are
  not silently clamped to sRGB.
• Live gamut indicators: sRGB ✓/✗ and P3 ✓/✗ update as you drag, so you
  know exactly which displays can render the color.
• Output format selector: write the value back as oklch(…), color(display-p3 …),
  or HEX — your choice per token.
• Chroma is clamped to a sensible display-reachable range; non-hex values
  (oklch(…), named colors) remain editable as text.

This closes the Phase 3 "OKLCH picker + gamut indicator" item from the roadmap.

---

📋 What's in this release

Editing

• Inline cell editing with auto-save (no per-token "Save" button).
• Full keyboard navigation (Tab / Enter / Esc / arrows), copy / cut / paste
  whole variables (⌘C / ⌘X / ⌘V).
• Type-aware quick editors: color swatch picker, dimension/number steppers
  (↑/↓, Shift = ±10), expand-in-place editors for composites (typography, shadow,
  border, transition, gradient stops).
• Create variables from the toolbar (13 DTCG types) or per-group, with sensible
  per-type defaults; Figma-like inline rename on creation.

Structure & navigation

• Sidebar group tree with Finder-style drag-and-drop: drop onto a group to
  nest, between groups to reorder; multi-select to move several at once.
• Table grouped by full group path with sticky breadcrumb headers.
• Drag rows to reorder within a group or move them across groups (safe rename with
  reference propagation).

Aliases & resolution

• Multi-collection resolver with configurable order; both {token.path} and JSON
  Pointer syntaxes.
• Diagnostics with one-click quick-fixes; inspector with alias chains and incoming
  references.
• Incomplete-mode-override warnings.

Modes & theming

• Modes as columns; add / rename / delete / duplicate modes across the three
  storage strategies (one-file-per-theme, path dimension, inline $value).

Search & history

• Full-text search (⌘S) + filters (aliases, deprecated, orphans, errors) and a
  command palette.
• Byte-exact, server-side undo/redo with coalescing and anti-desync safety.

Distribution (Style Dictionary v5)

• A guided configurator that writes a real scripts/tokens.build.mjs + npm script,
  or links an existing build config — with a sandboxed test-build report.

Packaging

• Self-contained npm package: the CLI bundles the workspace code and embeds the
  built dashboard. bin: tokenflow and token-flow-manager.
• Headless validate (CI-friendly, exits non-zero on errors) and init commands.
• Optional Tauri desktop app (.dmg / .app, no Node required) — built with
  pnpm desktop:build.

---

Known limitations / What's next

• Git integration (read-only working-tree status, diff vs HEAD, discard,
  merge-conflict detection) is specified but not yet implemented — planned as
  Phase 5.
• Shadow editing is single-layer (multi-layer arrays pending).
• CDK virtualization for very large tables (>200 rows) is a dedicated pass.
• Desktop app is not yet code-signed / notarized — on macOS, an un-notarized
  .dmg needs xattr -dr com.apple.quarantine "/Applications/Token Flow Manager.app"
  once after install. CLI usage has no such issue.

---

Full details: see plan.md (roadmap) and CHANGELOG.md
(change log) in the repository.