@astryxdesign/cli 0.1.7 → 0.1.8-canary.07362a9

package/utils/package-manager.mjs

@@ -0,0 +1,178 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Detect the project's package manager from lockfiles.
+ *
+ * Returns the correct command prefix for running package binaries
+ * (e.g. 'npx astryx', 'yarn astryx', 'pnpm exec astryx').
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+/**
+ * A package manager we can install with and run binaries through.
+ * @typedef {'yarn' | 'pnpm' | 'bun' | 'npm'} PackageManager
+ */
+
+/**
+ * Result of package-manager detection. `'npx'` is the sentinel for "nothing
+ * detected" — no lockfile, no `packageManager` field, no runner user-agent —
+ * so callers fall back to npm/npx. It is a distinct value from {@link PackageManager}
+ * because it means "undetected", not "npm was chosen".
+ * @typedef {PackageManager | 'npx'} DetectedPackageManager
+ */
+
+/** @type {readonly PackageManager[]} */
+const KNOWN_PMS = ['yarn', 'pnpm', 'bun', 'npm'];
+
+/**
+ * Narrow an arbitrary string to a known {@link PackageManager}.
+ * @param {string} name
+ * @returns {name is PackageManager}
+ */
+function isKnownPackageManager(name) {
+  return /** @type {readonly string[]} */ (KNOWN_PMS).includes(name);
+}
+
+/**
+ * Detect the package manager used in a project directory.
+ * Walks up from targetDir looking for lockfiles.
+ *
+ * Returns `'npx'` when nothing can be detected — see {@link DetectedPackageManager}.
+ *
+ * @param {string} [targetDir=process.cwd()]
+ * @returns {DetectedPackageManager}
+ */
+export function detectPackageManager(targetDir = process.cwd()) {
+  let dir = path.resolve(targetDir);
+  const root = path.parse(dir).root;
+
+  while (dir !== root) {
+    // 1. Lockfiles (highest priority)
+    if (fs.existsSync(path.join(dir, 'yarn.lock'))) return 'yarn';
+    if (fs.existsSync(path.join(dir, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (fs.existsSync(path.join(dir, 'bun.lockb')) || fs.existsSync(path.join(dir, 'bun.lock'))) return 'bun';
+    if (fs.existsSync(path.join(dir, 'package-lock.json'))) return 'npm';
+
+    // 2. packageManager field in package.json
+    const pkgPath = path.join(dir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+        if (pkg.packageManager) {
+          const name = pkg.packageManager.split('@')[0];
+          if (isKnownPackageManager(name)) return name;
+        }
+      } catch {
+        // Best-effort: unreadable/invalid package.json — keep walking up.
+      }
+    }
+
+    dir = path.dirname(dir);
+  }
+
+  // 3. npm_config_user_agent env var (set by all PMs when running scripts)
+  const ua = process.env.npm_config_user_agent;
+  if (ua) {
+    const name = ua.split('/')[0];
+    if (isKnownPackageManager(name)) return name;
+  }
+
+  return 'npx';
+}
+
+/**
+ * Get the command prefix for running a package binary.
+ *
+ * @param {string} [targetDir]
+ * @returns {string} e.g. 'npx', 'yarn', 'pnpm exec', 'bunx'
+ */
+export function getRunPrefix(targetDir) {
+  const pm = detectPackageManager(targetDir);
+  switch (pm) {
+    case 'yarn': return 'yarn';
+    case 'pnpm': return 'pnpm exec';
+    case 'bun': return 'bunx';
+    case 'npm':
+    default: return 'npx';
+  }
+}
+
+/** The published CLI package name — used for one-off (uninstalled) invocations. */
+export const CLI_PACKAGE = '@astryxdesign/cli';
+
+/** The CLI binary name — only resolves once the CLI is installed (or run via CLI_PACKAGE). */
+export const CLI_BIN = 'astryx';
+
+/**
+ * Get the one-off ("dlx") runner for the detected package manager.
+ *
+ * Unlike {@link getRunPrefix} (which runs an *installed* binary), this fetches
+ * and runs a package on demand — so it is always paired with the scoped
+ * {@link CLI_PACKAGE}, never the bare `astryx` bin. Running bare `npx astryx`
+ * without the CLI installed resolves to an unrelated package on the registry.
+ *
+ * @param {string} [targetDir]
+ * @returns {string} e.g. 'npx', 'pnpm dlx', 'yarn dlx', 'bunx'
+ */
+export function getDlxPrefix(targetDir) {
+  const pm = detectPackageManager(targetDir);
+  switch (pm) {
+    case 'yarn': return 'yarn dlx';
+    case 'pnpm': return 'pnpm dlx';
+    case 'bun': return 'bunx';
+    case 'npm':
+    default: return 'npx';
+  }
+}
+
+/**
+ * Heuristic: was the running CLI launched one-off via a package runner
+ * (npx / pnpm dlx / yarn dlx / bunx) rather than from an installed dependency?
+ *
+ * We sniff the entry path (`process.argv[1]`) for well-known runner-cache
+ * markers. This errs safe in both directions: a false negative falls back to
+ * the installed form (`<prefix> astryx`, the historical behavior), and a false
+ * positive emits the always-valid scoped form (`<dlx> @astryxdesign/cli`).
+ *
+ * @returns {boolean}
+ */
+export function isCliOneOff() {
+  const entry = String(process.argv[1] || '').replace(/\\/g, '/');
+  return /\/_npx\/|\/dlx[-/]|\/\.bun\/install\/cache\/|\/bunx-/.test(entry);
+}
+
+/**
+ * The safe, install-aware CLI invocation stem to suggest to users.
+ *
+ * - Installed / global / dev: `<run-prefix> astryx` (e.g. `pnpm exec astryx`).
+ *   Bare `astryx` resolves to the local (or global) binary.
+ * - One-off (npx/dlx cache): `<dlx-prefix> @astryxdesign/cli` — the bare
+ *   `astryx` name isn't on disk, so npm would fetch an unrelated registry
+ *   package; the scoped package always resolves to us.
+ *
+ * @param {string} [targetDir]
+ * @returns {string}
+ */
+export function getCliInvocation(targetDir) {
+  if (isCliOneOff()) return `${getDlxPrefix(targetDir)} ${CLI_PACKAGE}`;
+  return `${getRunPrefix(targetDir)} ${CLI_BIN}`;
+}
+
+/**
+ * Format a full, runnable CLI command from a subcommand string.
+ *
+ * Accepts either `astryx component Button` or `component Button` (a leading
+ * `astryx` token is stripped) and prepends the install-aware invocation stem
+ * from {@link getCliInvocation}.
+ *
+ * @param {string} command e.g. 'astryx component Button' | 'docs tokens'
+ * @param {string} [targetDir]
+ * @returns {string}
+ */
+export function formatCliCommand(command, targetDir) {
+  const sub = String(command).replace(/^\s*astryx\b\s*/, '').trim();
+  const stem = getCliInvocation(targetDir);
+  return sub ? `${stem} ${sub}` : stem;
+}

package/utils/package-manager.test.mjs

@@ -0,0 +1,220 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, afterEach, vi} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import {
+  detectPackageManager,
+  getDlxPrefix,
+  isCliOneOff,
+  getCliInvocation,
+  formatCliCommand,
+} from './package-manager.mjs';
+
+let tmpDir;
+const ORIGINAL_ARGV1 = process.argv[1];
+
+afterEach(() => {
+  if (tmpDir) {
+    fs.rmSync(tmpDir, {recursive: true, force: true});
+    tmpDir = null;
+  }
+  vi.restoreAllMocks();
+  delete process.env.npm_config_user_agent;
+  process.argv[1] = ORIGINAL_ARGV1;
+});
+
+function makeTmpDir() {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-pm-test-'));
+  return tmpDir;
+}
+
+describe('detectPackageManager', () => {
+  it('detects yarn from yarn.lock', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'yarn.lock'), '');
+    expect(detectPackageManager(dir)).toBe('yarn');
+  });
+
+  it('detects pnpm from pnpm-lock.yaml', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'pnpm-lock.yaml'), '');
+    expect(detectPackageManager(dir)).toBe('pnpm');
+  });
+
+  it('detects npm from package-lock.json', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'package-lock.json'), '{}');
+    expect(detectPackageManager(dir)).toBe('npm');
+  });
+
+  it('detects bun from bun.lockb', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'bun.lockb'), '');
+    expect(detectPackageManager(dir)).toBe('bun');
+  });
+
+  it('detects from packageManager field in package.json (no lockfile)', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      JSON.stringify({packageManager: 'yarn@4.1.0'}),
+    );
+    expect(detectPackageManager(dir)).toBe('yarn');
+  });
+
+  it('detects pnpm from packageManager field', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      JSON.stringify({packageManager: 'pnpm@8.0.0'}),
+    );
+    expect(detectPackageManager(dir)).toBe('pnpm');
+  });
+
+  it('ignores unknown packageManager values', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      JSON.stringify({packageManager: 'unknown@1.0.0'}),
+    );
+    expect(detectPackageManager(dir)).toBe('npx');
+  });
+
+  it('lockfile takes priority over packageManager field', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'yarn.lock'), '');
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      JSON.stringify({packageManager: 'pnpm@8.0.0'}),
+    );
+    expect(detectPackageManager(dir)).toBe('yarn');
+  });
+
+  it('detects from npm_config_user_agent env var', () => {
+    const dir = makeTmpDir();
+    process.env.npm_config_user_agent = 'yarn/1.22.22 node/v20.0.0';
+    expect(detectPackageManager(dir)).toBe('yarn');
+  });
+
+  it('detects pnpm from npm_config_user_agent env var', () => {
+    const dir = makeTmpDir();
+    process.env.npm_config_user_agent = 'pnpm/8.15.0 node/v20.0.0';
+    expect(detectPackageManager(dir)).toBe('pnpm');
+  });
+
+  it('falls back to npx when no signals present', () => {
+    const dir = makeTmpDir();
+    expect(detectPackageManager(dir)).toBe('npx');
+  });
+
+  it('packageManager field takes priority over npm_config_user_agent', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      JSON.stringify({packageManager: 'bun@1.0.0'}),
+    );
+    process.env.npm_config_user_agent = 'npm/10.0.0 node/v20.0.0';
+    expect(detectPackageManager(dir)).toBe('bun');
+  });
+});
+
+describe('getDlxPrefix', () => {
+  it('returns "pnpm dlx" for pnpm projects', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'pnpm-lock.yaml'), '');
+    expect(getDlxPrefix(dir)).toBe('pnpm dlx');
+  });
+
+  it('returns "yarn dlx" for yarn projects', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'yarn.lock'), '');
+    expect(getDlxPrefix(dir)).toBe('yarn dlx');
+  });
+
+  it('returns "bunx" for bun projects', () => {
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'bun.lockb'), '');
+    expect(getDlxPrefix(dir)).toBe('bunx');
+  });
+
+  it('falls back to "npx" with no signals', () => {
+    const dir = makeTmpDir();
+    delete process.env.npm_config_user_agent;
+    expect(getDlxPrefix(dir)).toBe('npx');
+  });
+});
+
+describe('isCliOneOff', () => {
+  it('detects an npm npx cache entry', () => {
+    process.argv[1] = '/home/u/.npm/_npx/a1b2/node_modules/.bin/astryx';
+    expect(isCliOneOff()).toBe(true);
+  });
+
+  it('detects a pnpm dlx cache entry', () => {
+    process.argv[1] = '/home/u/.cache/pnpm/dlx/9f/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    expect(isCliOneOff()).toBe(true);
+  });
+
+  it('detects a bunx cache entry', () => {
+    process.argv[1] = '/home/u/.bun/install/cache/@astryxdesign/cli/bin/astryx.mjs';
+    expect(isCliOneOff()).toBe(true);
+  });
+
+  it('is false for an installed node_modules entry', () => {
+    process.argv[1] = '/proj/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    expect(isCliOneOff()).toBe(false);
+  });
+
+  it('is false for a source checkout (dev) entry', () => {
+    process.argv[1] = '/repo/packages/cli/bin/astryx.mjs';
+    expect(isCliOneOff()).toBe(false);
+  });
+});
+
+describe('getCliInvocation', () => {
+  it('uses the run-prefix + bare bin when installed (not one-off)', () => {
+    process.argv[1] = '/proj/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'pnpm-lock.yaml'), '');
+    expect(getCliInvocation(dir)).toBe('pnpm exec astryx');
+  });
+
+  it('uses the dlx runner + scoped package when run one-off', () => {
+    process.argv[1] = '/home/u/.npm/_npx/a1b2/node_modules/.bin/astryx';
+    const dir = makeTmpDir();
+    delete process.env.npm_config_user_agent;
+    expect(getCliInvocation(dir)).toBe('npx @astryxdesign/cli');
+  });
+
+  it('pairs the dlx runner with the scoped package for pnpm one-off', () => {
+    process.argv[1] = '/home/u/.cache/pnpm/dlx/9f/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'pnpm-lock.yaml'), '');
+    expect(getCliInvocation(dir)).toBe('pnpm dlx @astryxdesign/cli');
+  });
+});
+
+describe('formatCliCommand', () => {
+  it('strips a leading "astryx" token and prepends the invocation stem', () => {
+    process.argv[1] = '/proj/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'pnpm-lock.yaml'), '');
+    expect(formatCliCommand('astryx component Button', dir)).toBe('pnpm exec astryx component Button');
+  });
+
+  it('accepts a bare subcommand (no leading astryx)', () => {
+    process.argv[1] = '/proj/node_modules/@astryxdesign/cli/bin/astryx.mjs';
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'package-lock.json'), '{}');
+    expect(formatCliCommand('docs tokens', dir)).toBe('npx astryx docs tokens');
+  });
+
+  it('rewrites to the scoped package for one-off invocations', () => {
+    process.argv[1] = '/home/u/.npm/_npx/a1b2/node_modules/.bin/astryx';
+    const dir = makeTmpDir();
+    fs.writeFileSync(path.join(dir, 'package-lock.json'), '{}');
+    expect(formatCliCommand('astryx component Button', dir)).toBe('npx @astryxdesign/cli component Button');
+  });
+});

package/{src/utils → utils}/path-safety.mjs

@@ -165,21 +165,3 @@ export function isFilePathArg(pathArg) {
   const ext = path.extname(base).toLowerCase();
   return ext.length > 0 && FILE_EXTENSIONS.has(ext);
 }
-
-/**
- * True when the process is running non-interactively (no TTY) or when the
- * caller has signaled JSON / scripted use. Commands consult this before
- * prompting for confirmation; in scripted mode they require an explicit
- * `--overwrite` flag instead.
- *
- * @param {object} [options]
- * @param {boolean} [options.json] - Caller's --json flag.
- * @returns {boolean}
- */
-export function isNonInteractive({json = false} = {}) {
-  if (json) return true;
-  // stdin not a TTY means piped input or scripted execution.
-  if (process.stdin && process.stdin.isTTY === false) return true;
-  if (process.stdout && process.stdout.isTTY === false) return true;
-  return false;
-}

package/{src/utils → utils}/paths.mjs

@@ -13,7 +13,7 @@ import {fileURLToPath} from 'node:url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /** Root of the @astryxdesign/cli package */
-export const CLI_ROOT = path.resolve(__dirname, '..', '..');
+export const CLI_ROOT = path.resolve(__dirname, '..');
 
 /**
  * Find packages/core directory by walking up from startDir.
@@ -78,6 +78,7 @@ export function findProjectRoot(startDir = process.cwd()) {
  * Returns array of { name, category, docsDir, blocksDir }.
  */
 export function discoverExternalPackages(startDir = process.cwd()) {
+  /** @type {Array<{name: string, category: string, docsDir: string, blocksDir: string | null}>} */
   const externals = [];
   let dir = startDir;
 
@@ -96,6 +97,7 @@ export function discoverExternalPackages(startDir = process.cwd()) {
 
   if (!nodeModulesDir) return externals;
 
+  /** @param {string} searchDir */
   const scanDir = (searchDir) => {
     if (!fs.existsSync(searchDir)) return;
     const entries = fs.readdirSync(searchDir, {withFileTypes: true});
@@ -141,6 +143,7 @@ export function discoverExternalPackages(startDir = process.cwd()) {
 /**
  * List available component directories in packages/core/src.
  * Returns directory names that contain Astryx*.tsx files.
+ * @param {string} coreDir
  */
 export function listComponents(coreDir) {
   const srcDir = path.join(coreDir, 'src');

package/{src/utils → utils}/update-check.mjs

@@ -14,12 +14,13 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import {semverGt} from './semver.mjs';
+import {getCliInvocation} from './package-manager.mjs';
 
 /**
  * Read the latest available version from local signals.
- * No network calls — purely filesystem and env var checks.
+ * No network calls — purely an env-var check ($ASTRYX_LATEST_VERSION),
+ * so it takes no arguments.
  *
- * @param {string} [cwd] - Project directory (default: process.cwd())
  * @returns {string|null} Latest version string, or null if unknown
  */
 export function getLatestVersion() {
@@ -63,7 +64,7 @@ export function getInstalledVersion(cwd = process.cwd()) {
  * @returns {string|null} FYI hint string, or null if up to date / unknown
  */
 export function checkForUpdate(cwd = process.cwd()) {
-  const latest = getLatestVersion(cwd);
+  const latest = getLatestVersion();
   if (!latest) return null;
 
   // Persist for subsequent commands in this shell session
@@ -75,7 +76,7 @@ export function checkForUpdate(cwd = process.cwd()) {
   // Use semver-aware comparison so '0.0.20' is correctly treated as greater
   // than '0.0.5' (lexicographic compare gets that backwards).
   if (semverGt(latest, installed)) {
-    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. Install the new package version, then run: astryx upgrade --from <old-version> --apply`;
+    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. Install the new package version, then run: ${getCliInvocation()} upgrade --from <old-version> --apply`;
   }
 
   return null;

package/{src/utils → utils}/update-check.test.mjs

@@ -33,12 +33,12 @@ afterEach(() => {
 describe('getLatestVersion', () => {
   it('reads from ASTRYX_LATEST_VERSION env var', () => {
     process.env.ASTRYX_LATEST_VERSION = '0.0.8';
-    expect(getLatestVersion(tmpDir)).toBe('0.0.8');
+    expect(getLatestVersion()).toBe('0.0.8');
   });
 
   it('ignores invalid env var values', () => {
     process.env.ASTRYX_LATEST_VERSION = 'not-a-version';
-    expect(getLatestVersion(tmpDir)).toBeNull();
+    expect(getLatestVersion()).toBeNull();
   });
 
   it('returns null when no signals exist', () => {
@@ -46,7 +46,7 @@ describe('getLatestVersion', () => {
       path.join(tmpDir, 'package.json'),
       JSON.stringify({name: 'test'}),
     );
-    expect(getLatestVersion(tmpDir)).toBeNull();
+    expect(getLatestVersion()).toBeNull();
   });
 });
 

package/docs/integration-authoring.md

@@ -1,105 +0,0 @@
-# Authoring an Astryx Integration
-
-> **Status:** working notes. This should eventually move to the public wiki
-> alongside the rest of the integration-authoring guidance; it lives here for
-> now so it ships and is versioned with the CLI.
-
-An **Integration** is an npm package that contributes components, templates, and/or
-codemods to a consumer's design-system workflow. Consumers install the 3rd party
-package, add a line to their astryx.config file:
-
-```js
-import {createConfig} from '@astryxdesign/cli/config';
-
-export default createConfig({
-  integrations: ['@acme/astryx-widgets'],
-  ...
-});
-```
-
-Then the integration's components and templates will be surfaced alongside Astryx
-components in the Astryx CLI.
-
-```sh
-astryx component AcmeCarousel --props
-astryx component --list --package @acme/astryx-widgets
-```
-
-## The Integration File
-
-In order to register your package as an Astryx Integration, create an
-`astryx.integration.{ts,mjs,js}` file as a sibling to your `package.json`. This file
-tells Astryx where to find your components, templates, codemods, etc.
-
-```js
-// astryx.integration.{ts,mjs,js}
-import {createIntegration} from '@astryxdesign/cli/integration';
-
-export default createIntegration({
-  components: './components',
-  templates: './templates',
-  codemods: './codemods',
-  issuesUrl: 'https://github.com/acme/widgets/issues',
-});
-```
-
-## Components
-
-Your components themselves may be exported from your library as you see fit (consumers
-will still import them from your package) but Astryx CLI will look for a .doc.{ts,mjs,js}
-file with the same stem e.g. `AcmeCarousel.tsx` and `AcmeCarousel.doc.ts`.
-
-```js
-// AcmeCarousel.doc.ts
-import {createComponentDoc} from '@astryxdesign/cli/doc';
-
-export default createComponentDoc({
-  name: 'AcmeCarousel',
-  description: '...',
-  ...
-});
-```
-
-## Templates
-
-Templates are typically not exported from the package directly, but instead accessed
-via the Astryx CLI. Consumers can look through your templates and materialize them
-into their apps.
-
-You define a template with the `createPageTemplate` (for full pages) or `createBlockTemplate`
-(for smaller chunks). e.g. `AcmeLandingPage.tsx`, `AcmeLandingPage.template.ts`
-
-```js
-// AcmeLandingPage.template.ts
-import {createPageTemplate} from '@astryxdesign/cli/template';
-
-export default createPageTemplate({
-  ...
-});
-```
-
-Note that, since the CLI needs access to the template source code, you need to make sure
-that it is included in your published package. This will also allow us to render previews
-of templates in the future by bundling your template into a doc site build.
-
-Typically, this is done via the package.json `exports` key.
-
-```jsonc
-{
-  "exports": {
-    // ...
-    "./templates/*.tsx": "./templates/*.tsx",
-  },
-}
-```
-
-In order to verify that it's working, you can test importing the template component like this:
-
-```ts
-import('@acme/astryx-widgets/templates/AcmeLandingPage.tsx');
-```
-
-Import **with the `.tsx` extension** — an extensionless specifier won't resolve
-under `moduleResolution: bundler`. The extensionful `"./templates/*.tsx"` export
-above is what lets that import type-check without consumers enabling
-`allowImportingTsExtensions`.