npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@directededges/specs-from-figma

v0.14.2

Published

Core data transformation model for Anova design specification tools

Readme

@directededges/anova-transformer

Core data transformation model for Anova design specification tools. This package extracts the Model and Runtime layers from anova-plugin, enabling independent development and reusability across CLI, MCP, and plugin environments.

Overview

@directededges/anova-transformer provides:

  • Component Processing: Transform Figma design components into structured specifications
  • Runtime Abstractions: Platform-agnostic data loading and node resolution
  • Cross-Platform Support: Works in both Node.js (CLI/MCP) and Browser (Figma Plugin) environments

Installation

From GitHub Packages

# Configure npm to use GitHub Packages for @directededges scope
npm config set @directededges:registry https://npm.pkg.github.com

# Install the package
npm install @directededges/anova-transformer

Authentication Required: You must configure a GitHub Personal Access Token with read:packages scope:

# Add to ~/.npmrc
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

Usage

Plugin environment

import { Component } from '@directededges/anova-transformer';

const component = await Component.fromPlugin(figmaNode, config);
console.log(component.yaml());

An optional coordinator and author can be passed as a third argument.

CLI / REST API environment

import { Component } from '@directededges/anova-transformer';
import type { StylesMap, VariablesMap, CollectionsMap } from '@directededges/anova-transformer';

const component = await Component.fromRestApi(
  libraryJson,   // raw REST API JSON
  componentId,   // component name or ID
  config,
  { styles, variables, collections }
);
console.log(component.yaml());

Both factory methods return a fully-processed Component. Call .yaml() for a YAML string or .json() for a plain object.

Public API

The public surface is intentionally minimal. All internal runtime and processing code is bundled and not re-exported.

Component

Main transformation class. Use the static factory methods — do not call new Component() directly.

| Method | Description | |--------|-------------| | Component.fromPlugin(node, config, options?) | Process a Figma Plugin API node | | Component.fromRestApi(json, id, config, options) | Process a component from REST API JSON | | component.yaml() | Returns a YAML string of the component specification | | component.json() | Returns a plain JavaScript object |

Foundations map types

Used as the options payload for fromRestApi:

  • StylesMap — map of style IDs to style data
  • VariablesMap — map of variable IDs to variable data
  • CollectionsMap — map of collection IDs to collection data

Output schema types (e.g. Component from @directededges/anova) are provided by the anova package.

Development

Building

# Install dependencies
npm install

# Build the package
npm run build

# Build types only
npm run build:types

# Build JavaScript only
npm run build:js

Testing

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

Publishing

# Publish to GitHub Packages (runs build + test automatically)
npm publish

See CONTRIBUTING.md for contribution guidelines.

Architecture

See ARCHITECTURE.md for a system diagram, component hierarchy, runtime model, and design principles.

Version & Compatibility

  • Version: 0.6.0 (Pre-1.0 — breaking changes may occur in minor versions)
  • Node.js: 20+ required
  • Target: ES2020
  • Module Format: ESM only

License

PolyForm Internal Use License 1.0.0

Repository

https://github.com/directededges/anova-transformer