@astryxdesign/cli 0.4.7 → 0.5.0-canary.32a62fd

package/assets/templates/pages/table-grouped/page.tsx

@@ -37,6 +37,7 @@ import {Divider} from '@astryxdesign/core/Divider';
 import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
 import {
   Table,
+  TableBody,
   TableRow,
   TableCell,
   proportional,
@@ -963,161 +964,167 @@ export default function DataTableTemplate() {
                   />
                 ))}
               </colgroup>
-              {groupKeys.map(key => {
-                const tasks = grouped.get(key);
-                if (!tasks || tasks.length === 0) {
-                  return null;
-                }
-                const isExpanded = expandedGroups.has(key);
+              <TableBody>
+                {groupKeys.map(key => {
+                  const tasks = grouped.get(key);
+                  if (!tasks || tasks.length === 0) {
+                    return null;
+                  }
+                  const isExpanded = expandedGroups.has(key);
 
-                return (
-                  <React.Fragment key={key}>
-                    {groupBy !== 'none' && (
-                      <TableRow
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => toggleGroup(key)}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            toggleGroup(key);
-                          }
-                        }}>
-                        <TableCell colSpan={COL_COUNT} style={groupHeaderCell}>
-                          <HStack gap={2} vAlign="center">
-                            <Icon
-                              icon={
-                                isExpanded ? ChevronDownIcon : ChevronRightIcon
-                              }
-                              size="sm"
-                              color="secondary"
-                            />
-                            <Text type="body" weight="bold">
-                              {getGroupLabel(groupBy, key)}
-                            </Text>
-                            <Badge
-                              variant="neutral"
-                              label={String(tasks.length)}
-                            />
-                          </HStack>
-                        </TableCell>
-                      </TableRow>
-                    )}
-                    {(groupBy === 'none' || isExpanded) &&
-                      tasks.map(task => (
+                  return (
+                    <React.Fragment key={key}>
+                      {groupBy !== 'none' && (
                         <TableRow
-                          key={task.id}
-                          onClick={() => setSelectedTask(task)}>
-                          <TableCell>
-                            <Center axis="horizontal">
-                              <StatusDot
-                                variant={STATUS_DOT_VARIANT[task.status]}
-                                label={STATUS_LABEL[task.status]}
-                              />
-                            </Center>
-                          </TableCell>
-                          <TableCell>
-                            <HStack gap={3} vAlign="center">
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => toggleGroup(key)}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              toggleGroup(key);
+                            }
+                          }}>
+                          <TableCell
+                            colSpan={COL_COUNT}
+                            style={groupHeaderCell}>
+                            <HStack gap={2} vAlign="center">
                               <Icon
-                                icon={ChartBarIcon}
+                                icon={
+                                  isExpanded
+                                    ? ChevronDownIcon
+                                    : ChevronRightIcon
+                                }
                                 size="sm"
-                                color={PRIORITY_COLOR[task.priority]}
+                                color="secondary"
                               />
-                              <Text type="supporting" color="secondary">
-                                {task.taskId}
+                              <Text type="body" weight="bold">
+                                {getGroupLabel(groupBy, key)}
                               </Text>
-                              <Text type="body" maxLines={1}>
-                                {task.title}
-                              </Text>
-                              {task.subtitle && (
-                                <Text
-                                  type="body"
-                                  color="secondary"
-                                  maxLines={1}>
-                                  › {task.subtitle}
-                                </Text>
-                              )}
+                              <Badge
+                                variant="neutral"
+                                label={String(tasks.length)}
+                              />
                             </HStack>
                           </TableCell>
-                          <TableCell>
-                            {task.project ? (
-                              <Text type="body" maxLines={1}>
-                                {task.project}
+                        </TableRow>
+                      )}
+                      {(groupBy === 'none' || isExpanded) &&
+                        tasks.map(task => (
+                          <TableRow
+                            key={task.id}
+                            onClick={() => setSelectedTask(task)}>
+                            <TableCell>
+                              <Center axis="horizontal">
+                                <StatusDot
+                                  variant={STATUS_DOT_VARIANT[task.status]}
+                                  label={STATUS_LABEL[task.status]}
+                                />
+                              </Center>
+                            </TableCell>
+                            <TableCell>
+                              <HStack gap={3} vAlign="center">
+                                <Icon
+                                  icon={ChartBarIcon}
+                                  size="sm"
+                                  color={PRIORITY_COLOR[task.priority]}
+                                />
+                                <Text type="supporting" color="secondary">
+                                  {task.taskId}
+                                </Text>
+                                <Text type="body" maxLines={1}>
+                                  {task.title}
+                                </Text>
+                                {task.subtitle && (
+                                  <Text
+                                    type="body"
+                                    color="secondary"
+                                    maxLines={1}>
+                                    › {task.subtitle}
+                                  </Text>
+                                )}
+                              </HStack>
+                            </TableCell>
+                            <TableCell>
+                              {task.project ? (
+                                <Text type="body" maxLines={1}>
+                                  {task.project}
+                                </Text>
+                              ) : (
+                                <Text type="supporting" color="secondary">
+                                  —
+                                </Text>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              <Text type="supporting" color="secondary">
+                                {task.created}
                               </Text>
-                            ) : (
+                            </TableCell>
+                            <TableCell>
                               <Text type="supporting" color="secondary">
-                                —
+                                {task.updated}
                               </Text>
-                            )}
-                          </TableCell>
-                          <TableCell>
-                            <Text type="supporting" color="secondary">
-                              {task.created}
-                            </Text>
-                          </TableCell>
-                          <TableCell>
-                            <Text type="supporting" color="secondary">
-                              {task.updated}
-                            </Text>
-                          </TableCell>
-                          <TableCell>
-                            <Avatar name={task.assignee} size="sm" />
-                          </TableCell>
-                          <TableCell>
-                            <DropdownMenu
-                              button={{
-                                label: 'Actions',
-                                variant: 'ghost',
-                                size: 'sm',
-                                icon: (
-                                  <Icon
-                                    icon={EllipsisHorizontalIcon}
-                                    size="sm"
-                                  />
-                                ),
-                                isIconOnly: true,
-                              }}
-                              hasChevron={false}
-                              items={[
-                                {
-                                  label: 'Edit issue',
-                                  icon: PencilIcon,
-                                  onClick: () => {},
-                                },
-                                {
-                                  label: 'Assign to...',
-                                  icon: UserIcon,
-                                  onClick: () => {},
-                                },
-                                {
-                                  label: 'Add label',
-                                  icon: TagIcon,
-                                  onClick: () => {},
-                                },
-                                {
-                                  label: 'Duplicate',
-                                  icon: DocumentDuplicateIcon,
-                                  onClick: () => {},
-                                },
-                                {
-                                  label: 'Move to project',
-                                  icon: ArrowRightIcon,
-                                  onClick: () => {},
-                                },
-                                {type: 'divider' as const},
-                                {
-                                  label: 'Delete issue',
-                                  icon: TrashIcon,
-                                  onClick: () => {},
-                                },
-                              ]}
-                            />
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                  </React.Fragment>
-                );
-              })}
+                            </TableCell>
+                            <TableCell>
+                              <Avatar name={task.assignee} size="sm" />
+                            </TableCell>
+                            <TableCell>
+                              <DropdownMenu
+                                button={{
+                                  label: 'Actions',
+                                  variant: 'ghost',
+                                  size: 'sm',
+                                  icon: (
+                                    <Icon
+                                      icon={EllipsisHorizontalIcon}
+                                      size="sm"
+                                    />
+                                  ),
+                                  isIconOnly: true,
+                                }}
+                                hasChevron={false}
+                                items={[
+                                  {
+                                    label: 'Edit issue',
+                                    icon: PencilIcon,
+                                    onClick: () => {},
+                                  },
+                                  {
+                                    label: 'Assign to...',
+                                    icon: UserIcon,
+                                    onClick: () => {},
+                                  },
+                                  {
+                                    label: 'Add label',
+                                    icon: TagIcon,
+                                    onClick: () => {},
+                                  },
+                                  {
+                                    label: 'Duplicate',
+                                    icon: DocumentDuplicateIcon,
+                                    onClick: () => {},
+                                  },
+                                  {
+                                    label: 'Move to project',
+                                    icon: ArrowRightIcon,
+                                    onClick: () => {},
+                                  },
+                                  {type: 'divider' as const},
+                                  {
+                                    label: 'Delete issue',
+                                    icon: TrashIcon,
+                                    onClick: () => {},
+                                  },
+                                ]}
+                              />
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
             </Table>
           </LayoutContent>
         }

package/assets/templates/themes/chocolate/chocolateTheme.ts

@@ -27,7 +27,9 @@ const chocolateSyntax = defineSyntaxTheme({
     tag: ['#8c3a3a', '#d47a7a'],
     attribute: ['#8C5927', '#d4a06a'],
     property: ['#3a7c6b', '#70c4b0'],
-    punctuation: ['#B88859', '#6b5540'],
+    // #B88859/#6b5540 failed WCAG AA against the syntax background: 3.06:1
+    // light, 2.56:1 dark. #5386.
+    punctuation: ['#9e622e', '#cb884d'], // 4.84:1 / 6.12:1
     background: ['#FFFCF7', '#1c1610'],
   },
 });

package/assets/templates/themes/matcha/matchaTheme.ts

@@ -27,7 +27,9 @@ const matchaSyntax = defineSyntaxTheme({
     tag: ['#8c3a3a', '#d47a7a'],
     attribute: ['#7c5e3a', '#c4a882'],
     property: ['#3a7c6b', '#70c4b0'],
-    punctuation: ['#707E46', '#5a6440'],
+    // #707E46/#5a6440 failed WCAG AA against the syntax background: 3.83:1
+    // light, 2.73:1 dark. #5386.
+    punctuation: ['#566a39', '#92af6a'], // 5.19:1 / 7.02:1
     background: ['#F0F0E0', '#1a1c14'],
   },
 });

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

@@ -24,7 +24,8 @@
  *   icon   = T30         / T80
  *   text   = T30         / T80
  *
- * All 9 saturated badge values pass WCAG AA (5.6–9.6 contrast range).
+ * All 9 saturated badge values pass WCAG AA against their label (>= 4.5:1);
+ * `scripts/check-badge-contrast.test.mjs` holds every theme to that.
  *
  * Only overrides tokens that differ from the defaults.
  */
@@ -51,7 +52,9 @@ const neutralSyntax = defineSyntaxTheme({
     tag: ['#89001a', '#ffaeaa'], // red
     attribute: ['#584400', '#eec12f'], // yellow
     property: ['#005348', '#83dac9'], // teal
-    punctuation: ['#a3a3a3', '#525252'], // neutral
+    // #a3a3a3/#525252 (this pair's own disabled-text tone) failed WCAG AA
+    // against the syntax background: 2.42:1 light, 2.53:1 dark. #5386.
+    punctuation: ['#6e6e6e', '#a0a0a0'], // neutral, 4.89:1 / 7.57:1
     background: ['#fafafa', '#0a0a0a'],
   },
 });
@@ -432,10 +435,14 @@ export const neutralTheme = defineTheme({
         color: '#171717',
       },
       'variant:error': {
-        // Light: T55 #e33f4a (palette saturated stop)
+        // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
+        //        4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
+        //        large-text allowance. One tonal step down holds the hue
+        //        (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
         // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
-        //        source #dc2626 (kept on H=27 alarm-red rather than coral)
-        backgroundColor: 'light-dark(#e33f4a, #ff705d)',
+        //        source #dc2626 (kept on H=27 alarm-red rather than coral).
+        //        Dark text on it is 6.60:1 and unchanged.
+        backgroundColor: 'light-dark(#c9303a, #ff705d)',
         color: 'light-dark(#ffffff, #171717)',
       },
 
@@ -500,7 +507,7 @@ export const neutralTheme = defineTheme({
     //
     //   success → badge success bg  (green T45 / dark-ramp T60)
     //   warning → badge warning bg  (yellow T85, same hex both modes)
-    //   error   → badge error bg    (red T55 / dark-ramp T60)
+    //   error   → badge error bg    (red T58 / dark-ramp T60)
     //   accent  → badge info bg     (blue T50 / dark-ramp T60) — the
     //             StatusDot "accent" is the info/attention color, so it
     //             pairs with the info badge rather than --color-accent
@@ -515,7 +522,7 @@ export const neutralTheme = defineTheme({
     statusdot: {
       'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
       'variant:warning': {backgroundColor: '#ffce2f'},
-      'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
+      'variant:error': {backgroundColor: 'light-dark(#c9303a, #ff705d)'},
       'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
     },
 
@@ -611,8 +618,8 @@ export const neutralTheme = defineTheme({
         '--color-warning': '#ffce2f',
       },
       'variant:error': {
-        // Red T55 saturated stop (= variant:error badge bg)
-        '--color-error': '#e33f4a',
+        // Red T58 saturated stop (= variant:error badge bg)
+        '--color-error': '#c9303a',
       },
     },
 

package/clients/cli/commands/build-theme.mjs

@@ -38,6 +38,7 @@ import {ERROR_CODES} from '../../../foundation/response/error-codes.mjs';
 import {themeAdd} from '../../../api/theme/add/add.mjs';
 import {themeTemplate} from '../../../api/theme/template/template.mjs';
 import {themeList} from '../../../api/theme/list/list.mjs';
+import {themeTargets} from '../../../api/theme/targets/targets.mjs';
 import {themeBuild, importSpecifier} from '../../../api/theme/build/build.mjs';
 import {defineCommand} from '../lib/define-command.mjs';
 import {doc as themeGroup} from './theme.doc.mjs';
@@ -45,10 +46,12 @@ import {doc as themeBuildCommand} from './theme-build.doc.mjs';
 import {doc as themeListCommand} from './theme-list.doc.mjs';
 import {doc as themeAddCommand} from './theme-add.doc.mjs';
 import {doc as themeTemplateCommand} from './theme-template.doc.mjs';
+import {doc as themeTargetsCommand} from './theme-targets.doc.mjs';
 import {doc as themeBuildFn} from '../../../api/theme/themeBuild.doc.mjs';
 import {doc as themeListFn} from '../../../api/theme/themeList.doc.mjs';
 import {doc as themeAddFn} from '../../../api/theme/themeAdd.doc.mjs';
 import {doc as themeTemplateFn} from '../../../api/theme/themeTemplate.doc.mjs';
+import {doc as themeTargetsFn} from '../../../api/theme/themeTargets.doc.mjs';
 
 /**
  * Path to this CLI's real entry (clients/cli/bin/astryx.mjs), resolved from
@@ -194,6 +197,36 @@ function printThemeList(themes) {
   );
 }
 
+/**
+ * Render the targets as one greppable line each, under an aligned header. A
+ * `records()` block would be five lines per target — over a thousand for the
+ * full surface, which is the view this command exists to make readable.
+ * @param {import('../../../api/theme/theme.type.mjs').ThemeTargetEntry[]} targets
+ * @returns {string}
+ */
+function formatTargetsTable(targets) {
+  const rows = targets.map(t => ({
+    key: t.key,
+    component: t.component,
+    props: t.props.join(', ') || '-',
+    states: t.states.join(', ') || '-',
+  }));
+  const head = {key: 'key', component: 'component', props: 'props', states: 'states'};
+  const width = (/** @type {'key'|'component'|'props'} */ field) =>
+    [head, ...rows].reduce((max, r) => Math.max(max, r[field].length), 0);
+  const w = {key: width('key'), component: width('component'), props: width('props')};
+  const line = (/** @type {typeof head} */ r) =>
+    [
+      r.key.padEnd(w.key),
+      r.component.padEnd(w.component),
+      r.props.padEnd(w.props),
+      r.states,
+    ]
+      .join('  ')
+      .trimEnd();
+  return [line(head), ...rows.map(line)].join('\n');
+}
+
 /**
  * @param {import('commander').Command} program
  */
@@ -225,6 +258,18 @@ export function registerTheme(program) {
     },
   });
 
+  // Theming questions are asked at `theme`, but per-component overrides live
+  // under `component`. Without this pointer the group reads as a build-tool
+  // menu, and the component targets are unreachable from the noun the user
+  // started at.
+  theme.addHelpText(
+    'after',
+    `\nComponent style overrides:\n` +
+      `  ${getCliInvocation()} theme targets            Every themeable class, with its props and states\n` +
+      `  ${getCliInvocation()} component <Name>         One component's theming table\n` +
+      `  ${getCliInvocation()} docs theme               How component overrides work\n`,
+  );
+
   defineCommand(theme, themeBuildCommand, {
     fn: themeBuildFn,
     action: async (
@@ -502,4 +547,44 @@ export function registerTheme(program) {
       );
     },
   });
+
+  defineCommand(theme, themeTargetsCommand, {
+    fn: themeTargetsFn,
+    action: async (/** @type {string | undefined} */ filter) => {
+      const json = program.opts().json || false;
+
+      /** @type {import('../../../api/theme/theme.type.mjs').ThemeTargetsResponse} */
+      let result;
+      try {
+        result = await themeTargets(filter, {cwd: process.cwd()});
+      } catch (e) {
+        const err =
+          /** @type {import('../../../api/error.mjs').AstryxError} */ (e);
+        cliError(err.message, {
+          suggestions: err.suggestions || [],
+          code: err.code,
+        });
+        return;
+      }
+
+      if (json) return jsonOut(result);
+
+      const run = getCliInvocation();
+      const {targets, componentCount} = result.data;
+      emit(
+        section(
+          'Theming targets',
+          `${targets.length} across ${componentCount} component${componentCount === 1 ? '' : 's'}`,
+        ),
+        text(formatTargetsTable(targets)),
+        text(
+          [
+            `Each key goes under \`components\` in defineTheme; it paints \`.astryx-<key>\`.`,
+            `Props take a value (\`variant:secondary\`); states are written bare (\`checked\`).`,
+            `One component in full: ${run} component <Name>`,
+          ].join('\n'),
+        ),
+      );
+    },
+  });
 }

package/clients/cli/commands/dialog-adaptive-template.test.mjs

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {component} from '../../../api/component/component.mjs';
+
+const CWD = {cwd: '.'};
+
+// Resolves built-in block templates by walking the source tree.
+const SCAN_TIMEOUT = 30_000;
+
+describe(
+  'Dialog adaptive presentation template',
+  () => {
+    it('is listed as a Dialog example block', async () => {
+      const result = await component('Dialog', {
+        ...CWD,
+        blocks: true,
+      });
+      const exampleNames = result.data.examples.map(b => b.name);
+      expect(exampleNames).toContain('DialogAdaptivePresentation');
+    });
+  },
+  SCAN_TIMEOUT,
+);

package/clients/cli/commands/theme-targets.behavior.test.mjs

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CLI behavior for `astryx theme targets`.
+ *
+ * The API leaf is covered by api/theme/targets/targets.test.mjs; what is only
+ * reachable here is the terminal binding — the table a human reads, the JSON
+ * envelope a lint script reads, and the route into component overrides from
+ * `theme --help`, which is where the question gets asked.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {runCli} from '../../../test-utils/run-cli.mjs';
+
+describe('astryx theme targets', () => {
+  it('prints one greppable line per target, with props and states', async () => {
+    const {status, stdout} = await runCli(['theme', 'targets', 'Switch']);
+
+    expect(status).toBe(0);
+    expect(stdout).toMatch(/^switch\s+Switch\s+size\s+checked, disabled$/m);
+    expect(stdout).toMatch(/^switch-thumb\s+Switch\s+size\s+checked$/m);
+    expect(stdout).toMatch(/4 across 1 component/);
+  });
+
+  it('lists the whole surface when unfiltered', async () => {
+    const {status, stdout} = await runCli(['theme', 'targets']);
+
+    expect(status).toBe(0);
+    const rows = stdout.split('\n').filter(l => /^[a-z][a-z0-9-]*\s{2,}/.test(l));
+    expect(rows.length).toBeGreaterThan(100);
+    expect(stdout).toMatch(/^button\s/m);
+    expect(stdout).toMatch(/^switch-thumb\s/m);
+  }, 30_000);
+
+  it('returns a theme.targets envelope under --json', async () => {
+    const {status, stdout} = await runCli(['--json', 'theme', 'targets', 'Switch']);
+
+    expect(status).toBe(0);
+    const payload = JSON.parse(stdout);
+    expect(payload.type).toBe('theme.targets');
+    expect(payload.data.targets).toContainEqual({
+      key: 'switch-thumb',
+      className: 'astryx-switch-thumb',
+      component: 'Switch',
+      props: ['size'],
+      states: ['checked'],
+    });
+  });
+
+  it('fails a filter that matches nothing', async () => {
+    const {status, stderr} = await runCli(['theme', 'targets', 'nosuchthing']);
+
+    expect(status).toBe(1);
+    expect(stderr).toMatch(/No theming target matches "nosuchthing"/);
+  });
+
+  it('routes a theming question from `theme --help` to component overrides', async () => {
+    const {stdout} = await runCli(['theme', '--help']);
+
+    expect(stdout).toMatch(/Component style overrides:/);
+    expect(stdout).toMatch(/theme targets/);
+    expect(stdout).toMatch(/component <Name>/);
+  });
+});