@astryxdesign/cli 0.4.2 → 0.4.3-canary.ac850d9

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorTreeSearch.tsx

@@ -0,0 +1,188 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo, useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {TreeList, type TreeListItemData} from '@astryxdesign/core/TreeList';
+import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/Layout';
+
+interface DestinationNode {
+  id: string;
+  label: string;
+  path: string;
+  children?: DestinationNode[];
+}
+
+interface Destination {
+  id: string;
+  label: string;
+  path: string;
+}
+
+const destinationTree: DestinationNode[] = [
+  {
+    id: 'workspace',
+    label: 'Workspace',
+    path: '/Workspace',
+    children: [
+      {
+        id: 'research',
+        label: 'Research',
+        path: '/Workspace/Research',
+        children: [
+          {
+            id: 'field-notes',
+            label: 'Field notes',
+            path: '/Workspace/Research/Field notes',
+          },
+          {
+            id: 'interviews',
+            label: 'Interviews',
+            path: '/Workspace/Research/Interviews',
+          },
+        ],
+      },
+      {
+        id: 'roadmap',
+        label: 'Roadmap',
+        path: '/Workspace/Roadmap',
+      },
+    ],
+  },
+  {
+    id: 'teams',
+    label: 'Teams',
+    path: '/Teams',
+    children: [
+      {
+        id: 'design-systems',
+        label: 'Design systems',
+        path: '/Teams/Design systems',
+        children: [
+          {
+            id: 'accessibility',
+            label: 'Accessibility',
+            path: '/Teams/Design systems/Accessibility',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+function matches(node: DestinationNode, query: string): boolean {
+  if (node.label.toLowerCase().includes(query)) {
+    return true;
+  }
+  return (node.children ?? []).some(child => matches(child, query));
+}
+
+function filterTree(
+  nodes: DestinationNode[],
+  query: string,
+): DestinationNode[] {
+  if (!query) {
+    return nodes;
+  }
+  return nodes
+    .filter(node => matches(node, query))
+    .map(node => ({
+      ...node,
+      children: node.children ? filterTree(node.children, query) : undefined,
+    }));
+}
+
+function toItems(
+  nodes: DestinationNode[],
+  selectedId: string,
+  onSelect: (value: Destination) => void,
+): TreeListItemData[] {
+  return nodes.map(node => {
+    const hasChildren = (node.children ?? []).length > 0;
+    return {
+      id: node.id,
+      label: node.label,
+      isSelected: node.id === selectedId,
+      isExpanded: true,
+      onClick: hasChildren
+        ? undefined
+        : () => onSelect({id: node.id, label: node.label, path: node.path}),
+      children: hasChildren
+        ? toItems(node.children ?? [], selectedId, onSelect)
+        : undefined,
+    };
+  });
+}
+
+function DestinationSearch({
+  value,
+  onChange,
+  close,
+}: {
+  value: Destination;
+  onChange: (value: Destination) => void;
+  close: () => void;
+}) {
+  const [query, setQuery] = useState('');
+  const items = useMemo(
+    () =>
+      toItems(
+        filterTree(destinationTree, query.toLowerCase()),
+        value.id,
+        next => {
+          onChange(next);
+          close();
+        },
+      ),
+    [query, value.id, onChange, close],
+  );
+
+  return (
+    <VStack gap={3} style={{width: 360}}>
+      <TextInput
+        label="Search destinations"
+        isLabelHidden
+        value={query}
+        onChange={setQuery}
+        hasClear
+        placeholder="Search folders or teams"
+      />
+      {items.length > 0 ? (
+        <TreeList items={items} density="compact" />
+      ) : (
+        <Text type="supporting" color="secondary">
+          No matching destinations.
+        </Text>
+      )}
+    </VStack>
+  );
+}
+
+export default function ComplexSelectorTreeSearch() {
+  const [value, setValue] = useState<Destination>({
+    id: 'accessibility',
+    label: 'Accessibility',
+    path: '/Teams/Design systems/Accessibility',
+  });
+
+  return (
+    <ComplexSelector<Destination>
+      label="Destination"
+      description="Search and browse nested folders."
+      value={value}
+      onChange={setValue}
+      triggerLabel={value.path}
+      style={{width: 360}}>
+      {(selectedValue, onChange, close) => (
+        <DestinationSearch
+          value={selectedValue}
+          onChange={onChange}
+          close={close}
+        />
+      )}
+    </ComplexSelector>
+  );
+}

package/assets/templates/themes/neutral/neutralTheme.ts

@@ -528,15 +528,17 @@ export const neutralTheme = defineTheme({
     //          to a deep tinted bg + light text rather than locking the
     //          light-mode pastel.
     //
-    // The inner-header *-muted token is forced transparent so the outer
-    // tinted background shows through cleanly.
+    // The inner-header *-muted token carries the tinted background for every
+    // status, info included. A theme override that sets a plain CSS property
+    // instead lands in @layer astryx-theme, which StyleX's @layer priority4
+    // outranks, so `backgroundColor` here would silently do nothing and the
+    // info banner would paint no background at all.
     //
     // Status overrides reference --color-text-{hue} so text/icon colors
     // stay in sync with the palette anchors automatically.
     banner: {
       'status:info': {
-        backgroundColor: 'var(--color-background-blue)',
-        '--color-accent-muted': 'transparent',
+        '--color-accent-muted': 'var(--color-background-blue)',
         '--color-text-primary': 'var(--color-text-blue)',
         '--color-text-secondary': 'var(--color-text-blue)',
         '--color-accent': 'var(--color-text-blue)',

package/assets/theme.template.ts

@@ -105,12 +105,13 @@ export const myTheme = defineTheme({
   // ───────────────────────────────────────────────────────────────────────
 
   /**
-   * Generates the neutral ramp and the accent tokens from one seed colour
+   * Generates the neutral ramp and the accent tokens from a seed colour
    * using the HCT perceptual model: surfaces, text, icons, borders, muted
    * fills, hover and pressed overlays — light and dark both.
    *
-   *   accent        seed hex; omit to keep the default accent and re-tone only
-   *                 the neutrals
+   *   accent        seed hex, or a [light, dark] pair to seed each scheme's
+   *                 palette from its own colour; omit to keep the default
+   *                 accent and re-tone only the neutrals
    *   neutralStyle  'warm' | 'cool' | 'neutral' — the temperature of the greys
    *   contrast      'standard' | 'high' — 'high' widens the text/surface tone
    *                 gap, for dense data UI or bright and clinical screens

package/clients/cli/commands/build-theme.font-warning.test.mjs

@@ -75,13 +75,16 @@ describe('theme build font-loading warning', () => {
     expect(result.stdout).toContain('@font-face');
     expect(result.stdout).toContain('font-display: swap');
     expect(result.stdout).toContain('astryx docs typography');
-    // The one-line summaries follow the CLI's stream contract: warnings on
-    // stderr, like the override-validation warnings in the same build.
-    expect(result.stderr).toContain('Font "Space Grotesk"');
-    expect(result.stderr).toContain('Font "JetBrains Mono"');
+    // The one-line summaries follow the CLI's stream contract. These are
+    // NOTICES about a correct theme, not warnings, so they go to stdout with
+    // the rest of the build's progress — stderr stays for the defects an
+    // author has to fix.
+    expect(result.stdout).toContain('note: Font "Space Grotesk"');
+    expect(result.stdout).toContain('note: Font "JetBrains Mono"');
+    expect(result.stderr).not.toContain('Font "');
   });
 
-  it('keeps --json stdout one valid envelope: warnings inside, snippet suppressed', async () => {
+  it('keeps --json stdout one valid envelope: notices inside, snippet suppressed', async () => {
     const project = path.join(tmpDir, 'project');
     const themeFile = writeTheme(
       project,
@@ -100,7 +103,7 @@ describe('theme build font-loading warning', () => {
     // contract, not just substring presence.
     const envelope = JSON.parse(result.stdout);
     expect(envelope.type).toBe('theme.build');
-    expect(envelope.data.warnings).toEqual(
+    expect(envelope.data.notices).toEqual(
       expect.arrayContaining([expect.stringContaining('Font "Space Grotesk"')]),
     );
     expect(result.stdout).not.toContain('fonts.googleapis.com');

package/clients/cli/commands/build-theme.icons-specifier.test.mjs

@@ -15,15 +15,34 @@
  * declared rather than inferred. Absent the flag, output is byte-for-byte what
  * it was before, which keeps the default no-`--out` flow — where the neighbour
  * is an uncompiled `icons.tsx` that only a bundler can resolve — working.
+ *
+ * The spawned-process block at the bottom pins what only real processes can
+ * prove: the emitted module actually loads under Node ESM, and the watch
+ * loop's child re-invocations carry the flag to every rebuild.
  */
 
 import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
+import {spawn, spawnSync} from 'node:child_process';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as os from 'node:os';
+import {fileURLToPath, pathToFileURL} from 'node:url';
 import {ensureCoreBuilt} from './ensure-core-built.mjs';
 import {runCli} from '../../../test-utils/run-cli.mjs';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const CLI_BIN = path.resolve(__dirname, '../bin/astryx.mjs');
+
+/** Poll until `predicate()` is true or the timeout elapses. */
+async function waitFor(predicate, {timeout = 20000, interval = 100} = {}) {
+  const start = Date.now();
+  for (;;) {
+    if (predicate()) return true;
+    if (Date.now() - start > timeout) return false;
+    await new Promise(r => setTimeout(r, interval));
+  }
+}
+
 /**
  * The emitted icon import, or null. Reads the statement rather than the whole
  * file: the `@generated` header quotes the source filename and a usage example,
@@ -142,13 +161,7 @@ describe('theme build --icons-specifier', () => {
     const relativeTheme = path.relative(project, themeFile);
 
     const built = await runCli(
-      [
-        'theme',
-        'build',
-        relativeTheme,
-        '--icons-specifier',
-        './icons.mjs',
-      ],
+      ['theme', 'build', relativeTheme, '--icons-specifier', './icons.mjs'],
       project,
     );
     expect(built.code).toBe(0);
@@ -223,3 +236,115 @@ describe('theme build --icons-specifier', () => {
     expect(generated).not.toContain('icons:');
   });
 });
+
+describe('theme build --icons-specifier (spawned processes)', () => {
+  it('emits a module Node can actually load', async () => {
+    const project = path.join(tmpDir, 'project');
+    const themeFile = writeThemeWithIcons(project, 'loadable');
+
+    const result = await runCli(
+      [
+        'theme',
+        'build',
+        path.relative(project, themeFile),
+        '--icons-specifier',
+        './icons.mjs',
+      ],
+      project,
+    );
+    expect(result.code).toBe(0);
+
+    // The text assertions above prove the emitted line; only a real Node
+    // process proves the module resolves and evaluates. That distinction is
+    // the regression #4620 shipped: every byte existed, none of them loaded.
+    const builtUrl = pathToFileURL(path.join(project, 'loadable.js'));
+    const probe = spawnSync(
+      process.execPath,
+      [
+        '--input-type=module',
+        '-e',
+        `const m = await import(${JSON.stringify(builtUrl.href)});` +
+          `if (m.loadableTheme?.name !== 'loadable') throw new Error('bad theme export');` +
+          `if (typeof m.testIcons !== 'object') throw new Error('bad registry export');`,
+      ],
+      {encoding: 'utf8'},
+    );
+    expect(probe.stderr).toBe('');
+    expect(probe.status).toBe(0);
+  });
+
+  it('watch mode forwards the flag to every rebuild', async () => {
+    const project = path.join(tmpDir, 'project');
+    const themeFile = writeThemeWithIcons(project, 'watched');
+    const cssFile = path.join(project, 'out', 'theme.css');
+    const builtFile = path.join(project, 'out', 'watched.js');
+    const declaredImport = 'import { testIcons } from "./icons.mjs";';
+
+    const child = spawn(
+      process.execPath,
+      [
+        CLI_BIN,
+        'theme',
+        'build',
+        path.relative(project, themeFile),
+        '--out',
+        'out/theme.css',
+        '--icons-specifier',
+        './icons.mjs',
+        '--watch',
+      ],
+      {cwd: project, env: {...process.env, FORCE_COLOR: '0'}},
+    );
+    let output = '';
+    child.stdout.on('data', d => (output += d.toString()));
+    child.stderr.on('data', d => (output += d.toString()));
+
+    try {
+      // Initial build: the declared specifier reaches the module.
+      expect(await waitFor(() => fs.existsSync(cssFile))).toBe(true);
+      expect(await waitFor(() => /Watching/i.test(output))).toBe(true);
+      expect(iconImportLine(fs.readFileSync(builtFile, 'utf8'))).toBe(
+        declaredImport,
+      );
+
+      // Rebuilds run through a child re-invocation of `theme build`, so the
+      // flag reaches them only if the watch loop forwards it. Change a token
+      // and wait for the rebuilt JavaScript module. fs.watch delivery is
+      // best-effort under load, so re-touch until the rebuild shows up
+      // (idempotent write).
+      const touched =
+        `import {testIcons} from './icons';\n` +
+        `export default {\n` +
+        `  name: "watched",\n` +
+        `  icons: testIcons,\n` +
+        `  tokens: {'--color-bg': '#0a0b0c'},\n` +
+        `};\n`;
+      fs.writeFileSync(themeFile, touched);
+      const rebuilt = await waitFor(() => {
+        try {
+          if (fs.readFileSync(builtFile, 'utf-8').includes('#0a0b0c'))
+            return true;
+        } catch {
+          // JavaScript module mid-write; fall through to re-touch.
+        }
+        try {
+          fs.writeFileSync(themeFile, touched);
+        } catch {
+          // Retried on the next poll.
+        }
+        return false;
+      });
+      expect(rebuilt).toBe(true);
+
+      // The regenerated module still carries the declared specifier — the
+      // forwarding is what this test pins. A watch loop that dropped the flag
+      // would regenerate with the scraped './icons' here and ship the #4620
+      // bytes on every save.
+      expect(iconImportLine(fs.readFileSync(builtFile, 'utf8'))).toBe(
+        declaredImport,
+      );
+    } finally {
+      child.kill('SIGINT');
+    }
+  }, 60_000);
+});

package/clients/cli/commands/template-cdn.behavior.test.mjs

@@ -0,0 +1,113 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CLI behavior for `astryx template --cdn`.
+ *
+ * The API leaf is covered by api/template/cdn/cdn.test.mjs; what is only
+ * reachable here is the terminal binding — that the flag short-circuits the
+ * family's name resolution, which message the user sees, and the JSON envelope.
+ * A receipt read at the wrong depth (`result.written` instead of
+ * `result.data.written`) writes the file and then reports a skip, and no unit
+ * test of the leaf can see it.
+ */
+
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import {runCli} from '../../../test-utils/run-cli.mjs';
+
+let tmpDir;
+beforeEach(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-cli-template-cdn-'));
+  fs.writeFileSync(
+    path.join(tmpDir, 'package.json'),
+    JSON.stringify({name: 'tmp', private: true}),
+  );
+});
+afterEach(() => {
+  fs.rmSync(tmpDir, {recursive: true, force: true});
+});
+
+const read = f => fs.readFileSync(path.join(tmpDir, f), 'utf-8');
+
+describe('astryx template --cdn', () => {
+  it('writes the page and says it wrote it', async () => {
+    const {status, stdout} = await runCli(['template', '--cdn'], {cwd: tmpDir});
+
+    expect(status).toBe(0);
+    expect(stdout).toMatch(/Wrote cdn\.template\.html/);
+    expect(stdout).not.toMatch(/already exists/);
+    expect(read('cdn.template.html')).toMatch(/<script type="importmap">/);
+  });
+
+  it('leaves an existing file alone, and says that instead', async () => {
+    fs.writeFileSync(path.join(tmpDir, 'cdn.template.html'), '<!-- mine -->\n');
+
+    const {status, stdout} = await runCli(['template', '--cdn'], {cwd: tmpDir});
+
+    expect(status).toBe(0);
+    expect(stdout).toMatch(/already exists/);
+    expect(read('cdn.template.html')).toBe('<!-- mine -->\n');
+  });
+
+  it('replaces it with --overwrite', async () => {
+    fs.writeFileSync(path.join(tmpDir, 'cdn.template.html'), '<!-- mine -->\n');
+
+    const {status} = await runCli(['template', '--cdn', '--overwrite'], {
+      cwd: tmpDir,
+    });
+
+    expect(status).toBe(0);
+    expect(read('cdn.template.html')).toMatch(/importmap/);
+  });
+
+  it('writes to the path given to the flag', async () => {
+    const {status} = await runCli(['template', '--cdn', 'public/demo.html'], {
+      cwd: tmpDir,
+    });
+
+    expect(status).toBe(0);
+    expect(read(path.join('public', 'demo.html'))).toMatch(/importmap/);
+  });
+
+  it('returns a template.cdn envelope under --json', async () => {
+    const {status, stdout} = await runCli(['--json', 'template', '--cdn'], {
+      cwd: tmpDir,
+    });
+
+    expect(status).toBe(0);
+    const payload = JSON.parse(stdout);
+    expect(payload.type).toBe('template.cdn');
+    expect(payload.data).toEqual({
+      path: 'cdn.template.html',
+      version: expect.stringMatching(/^\d+\.\d+\.\d+/),
+      written: true,
+      reason: null,
+    });
+  });
+
+  it('refuses a path that escapes the project', async () => {
+    const {status, stderr} = await runCli(
+      ['template', '--cdn', '../escaped.html'],
+      {cwd: tmpDir},
+    );
+
+    expect(status).toBe(1);
+    expect(stderr).toMatch(/outside the project root/);
+    expect(fs.existsSync(path.join(path.dirname(tmpDir), 'escaped.html'))).toBe(
+      false,
+    );
+  });
+
+  // The flag exists because the positional cannot: `template cdn` would resolve
+  // `cdn` against everything discoverAll() finds, so a template with that id
+  // would shadow the starter page. The flag answers before discovery runs.
+  it('does not shadow, or get shadowed by, a discovered template id', async () => {
+    const {status, stderr} = await runCli(['template', 'cdn'], {cwd: tmpDir});
+
+    expect(status).toBe(1);
+    expect(stderr).toMatch(/Unknown template "cdn"/);
+    expect(fs.existsSync(path.join(tmpDir, 'cdn.template.html'))).toBe(false);
+  });
+});

package/clients/cli/commands/template.doc.mjs

@@ -18,7 +18,9 @@ export const doc = {
   description:
     'One entry point for the template family: with no name it lists the discovered ' +
     'templates; with a name it shows the source or a layout skeleton, or scaffolds it ' +
-    'into the project at a target path. Narrow an ambiguous name with --type and/or --package.',
+    'into the project at a target path. Narrow an ambiguous name with --type and/or --package. ' +
+    '--cdn writes the no-build-step CDN starter page, which ships as an asset rather than as ' +
+    'a discovered template.',
   fn: 'template',
   args: [
     {name: 'name', param: 'name', required: false},
@@ -43,6 +45,12 @@ export const doc = {
       description:
         'Show layout skeleton with spatial annotations (padding, gap, nesting)',
     },
+    {
+      flag: '--cdn [path]',
+      param: 'options.cdn',
+      description:
+        'Write the no-build-step CDN starter page (default: cdn.template.html)',
+    },
     {
       flag: '-f, --overwrite',
       param: 'options.overwrite',
@@ -55,9 +63,11 @@ export const doc = {
       label: 'Scaffold into the app',
       cli: 'astryx template dashboard ./src/app',
     },
+    {label: 'CDN starter page', cli: 'astryx template --cdn'},
+    {label: 'CDN starter page, elsewhere', cli: 'astryx template --cdn public/demo.html'},
   ],
   exitCodes: [
-    {code: 0, when: 'success'},
+    {code: 0, when: 'success, including a CDN page left untouched because it already exists'},
     {
       code: 1,
       when: 'unknown or ambiguous template, no source, a path escape, or an existing target without --overwrite',

package/clients/cli/commands/template.mjs

@@ -41,7 +41,8 @@ export {discoverTemplates, listTemplates} from '../../../api/template/template.m
  *   import('../../../api/template/template.type.mjs').TemplateListResponse |
  *   import('../../../api/template/template.type.mjs').TemplateShowResponse |
  *   import('../../../api/template/template.type.mjs').TemplateSkeletonResponse |
- *   import('../../../api/template/template.type.mjs').TemplateCopyResponse
+ *   import('../../../api/template/template.type.mjs').TemplateCopyResponse |
+ *   import('../../../api/template/template.type.mjs').TemplateCdnResponse
  * )} TemplateResponse
  */
 
@@ -55,7 +56,7 @@ export function registerTemplate(program) {
       /**
        * @param {string | undefined} name
        * @param {string | undefined} targetPath
-       * @param {{list?: boolean, type?: string, package?: string, skeleton?: boolean, overwrite?: boolean}} options
+       * @param {{list?: boolean, type?: string, package?: string, skeleton?: boolean, cdn?: boolean | string, overwrite?: boolean}} options
        */
       async (name, targetPath, options) => {
       const json = program.opts().json || false;
@@ -83,7 +84,8 @@ export function registerTemplate(program) {
         name &&
         targetPath &&
         !options.list &&
-        !options.skeleton
+        !options.skeleton &&
+        !options.cdn
       ) {
         const collision = await detectTemplateCollision(name, targetPath);
         if (collision && !options.overwrite) {
@@ -103,6 +105,7 @@ export function registerTemplate(program) {
           await templateApi(name, {
             list: options.list,
             skeleton: options.skeleton,
+            cdn: options.cdn,
             type: /** @type {'page' | 'block' | undefined} */ (options.type),
             package: options.package,
             targetPath,
@@ -147,6 +150,7 @@ export function registerTemplate(program) {
                 `${run} template <id> --skeleton        Layout reference`,
                 `${run} template --list --type block    List only blocks`,
                 `${run} template --list --package <pkg> List from one package`,
+                `${run} template --cdn                 CDN starter page, no build step`,
               ].join('\n'),
             ),
           );
@@ -179,6 +183,23 @@ export function registerTemplate(program) {
           );
           break;
         }
+
+        case 'template.cdn': {
+          if (!result.data.written) {
+            emit(
+              text(`[skip] ${result.data.path} already exists — left as is.`),
+              text('Pass --overwrite to replace it with a fresh copy.'),
+            );
+            break;
+          }
+          emit(
+            text(`[ok] Wrote ${result.data.path}`),
+            text(
+              `Open it in a browser — no bundler, no install, no build step. Every CDN URL is pinned to ${result.data.version}, and the annotations mark the parts that are load-bearing.`,
+            ),
+          );
+          break;
+        }
       }
     },
   });

package/clients/cli/lib/manifest.mjs

@@ -70,6 +70,7 @@ export const RESPONSE_TYPES = {
     'template.show',
     'template.skeleton',
     'template.copy',
+    'template.cdn',
   ],
   hook: ['hook.list', 'hook.detail', 'hook.detail.params'],
   'theme build': ['theme.build', 'theme.build.check'],
@@ -103,7 +104,7 @@ const EXAMPLES = {
   ],
   build: ['astryx build', 'astryx build "analytics dashboard" --json'],
   swizzle: ['astryx swizzle XDSButton'],
-  template: ['astryx template --json', 'astryx template dashboard ./src/app'],
+  template: ['astryx template --json', 'astryx template dashboard ./src/app', 'astryx template --cdn'],
   hook: ['astryx hook', 'astryx hook useFocusTrap --json'],
   'theme build': [
     'astryx theme build ./src/themes/ocean.ts --out ./dist/ocean.css',

package/foundation/fs/path-safety.mjs

@@ -154,9 +154,9 @@ export function sanitizeName(name, options = {}) {
     );
   }
 
-  if (name === '.' || name === '..' || name.startsWith('..')) {
+  if (name === '.' || name === '..' || name.startsWith('.')) {
     throw new PathSafetyError(
-      `Invalid ${label} "${name}": must not be '.' or start with '..'.`,
+      `Invalid ${label} "${name}": must not start with '.'.`,
       'NAME_TRAVERSAL',
     );
   }