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

@polyxd/verifier

v0.4.6

Published

Verifies Polyxd UI documents: spec rules, rendered accessibility and layout, consistency across generations, and scripted agent tasks

Readme

@polyxd/verifier

Scores a Polyxd UI document the way it will actually be used: rendered, in every design system, by people and by agents.

npm install -D @polyxd/verifier playwright
npx playwright install chromium    # once
npx polyxd-verify my-ui.json --themes carbon --modes light --widths 390 --json report.json

Playwright is an optional peer dependency: the rendered checks need it, so install it beside the verifier as above. Nothing loads it until a browser is launched, and without it launch() says what to install.

Document checks only

@polyxd/verifier/static is the document checks on their own: staticAudit(doc, { registry, rules, emphasisBudget, missingData }). It imports no Playwright and reads no files (the spec's pattern checks are built into it), so it runs in Node, browsers and Workers, and installing the verifier for it alone doesn't pull in Playwright.

import { staticAudit } from "@polyxd/verifier/static";

const findings = staticAudit(doc, { registry });

@polyxd/runtime uses it as its default checks, and @polyxd/mcp and @polyxd/server use it for their verify tools. npm run build:patterns -w @polyxd/verifier regenerates the pattern checks from the spec; a test fails when they are out of date.

Inside the Polyxd repository, npm run verify:examples -w @polyxd/verifier runs every spec example through the full matrix with agent tasks.

What it checks

| Layer | Checks | |---|---| | Document | Spec validation (schema, references, one primary action per view, data bindings…), the declared pattern's rules, capability safety (destructive only in a Confirm, consequential only after review), Design Direction / acceptance rules, at most 6 inputs per view, no empty text, unique control names, labels that say what happens | | Rendered (headless Chromium, per design system × mode × width) | axe-core WCAG 2.2 AA, horizontal overflow, target size (WCAG 2.5.8 and the pack's own minimum), runtime errors | | Agent | Scripted tasks (bench/tasks.json) performed only through the accessibility tree: roles and accessible names, never CSS selectors. The host must receive the expected capability event | | Consistency | compare(previous, current): pattern, key coverage, component per key, relative order and labels, with a plain-language list of differences |

Default matrix: Material 3, Carbon and Ant Design × light and dark × 390px and 1100px.

Renderers

The verifier renders through a harness: a page that draws window.__PXD__ = { document, theme, mode } into #root and records what the surface sends (harness/README.md is the contract). Two ship: the React renderer's (harness/) and the Web Components renderer's (harness-web/, @polyxd/web's preview bundle). Pass any renderer's page as verifyDocument(doc, { harness: { url } | { html } }); HARNESSES.react and HARNESSES.web name the shipped ones.

npm run conformance -w @polyxd/verifier renders every spec example and every demo document with both shipped renderers in 13 packs × light/dark × 390/1100 and compares the rendered fingerprint (fingerprint: true on verifyDocument: components in order, ARIA snapshot, visible text; compareFingerprints explains a difference), the findings and the agent tasks. Both must score 100 and the fingerprints must match.

Score (v0)

Start at 100. Each distinct failing error check costs 20, each distinct warning 4, and failed agent runs cost up to 40 in proportion. A document that fails the schema scores 0. The weights are a starting point; the gold set (bench/gold) exists to calibrate them against designers' rankings.

Results today

  • All 20 spec examples score 100 across 240 renders; 216/216 agent task runs succeed.
  • 20/20 injected defects are caught (test/defects.test.ts), across schema, structure, patterns, capabilities, copy, rendered accessibility, layout and agent operability.
  • Building the verifier found real renderer bugs, since fixed: graphics-only colours used for text (failed WCAG contrast in Carbon and Ant), selection rows below each pack's target size, "(required)" and option descriptions leaking into accessible names, and root confirmations blocking the host page.