Skip to content

v0.1.1 - TFM

Choose a tag to compare

View all tags
@robinlopez robinlopez released this 23 Jun 19:33
v.0.1.1
6d066c7
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

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.

Assets 3
Loading