npm - @astryxdesign/cli - Versions diffs - 0.5.2-canary.e4f8e4e → 0.5.2-canary.ed45a8f - Mend

@astryxdesign/cli 0.5.2-canary.e4f8e4e → 0.5.2-canary.ed45a8f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/api/theme/targets/targets.test.mjs CHANGED Viewed

@@ -39,6 +39,21 @@ describe('themeTargets (api/theme/targets)', () => {
     ]);
   }, 60_000);
+  it.each(['table-header', 'table-body', 'table-footer'])(
+    '%s appears once under the Table owner',
+    async target => {
+      const {data} = await themeTargets('Table');
+      const matches = data.targets.filter(entry => entry.key === target);
+      expect(data.componentCount).toBe(1);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toMatchObject({
+        key: target,
+        component: 'Table',
+      });
+    },
+    60_000,
+  );
   // Half the system's keys contain "button" (chat-send-button, toggle-button,
   // …). A component name has to mean the component, or `theme targets Button`
   // answers a different question than `component Button` and the two views

package/assets/docs/icons.doc.mjs CHANGED Viewed

@@ -108,7 +108,7 @@ export const brandTheme = defineTheme({
       content: [
         {
           type: 'prose',
-          text: 'A glyph that belongs to one component or library gets a namespaced key (`numberInput:stepperDown`, `richtext:bold`) instead of a new semantic name. It resolves through the same registry and a theme overrides it the same way, but the shared IconName list stays reserved for glyphs the whole system uses — so adding one does not make every downstream icon registry grow a key.',
+          text: 'A glyph that belongs to one component or library gets a namespaced key (`numberInput:stepperDown`, `richtext:bold`) instead of a new semantic name. It resolves through the same registry and a theme overrides it the same way, but the shared IconName list stays reserved for glyphs the whole system uses, so adding one does not make every downstream icon registry grow a key.',
         },
         {
           type: 'code',
@@ -138,7 +138,7 @@ export const brandTheme = defineTheme({
       content: [
         {
           type: 'prose',
-          text: 'To add a new semantic icon name to the design system — only for a glyph the whole system shares; a component-owned one takes a namespaced key instead:',
+          text: 'To add a new semantic icon name to the design system, only for a glyph the whole system shares; a component-owned one takes a namespaced key instead:',
         },
         {
           type: 'list',

package/assets/docs/typography.doc.mjs CHANGED Viewed

@@ -56,7 +56,7 @@ export const docs = {
         {
           type: 'code',
           lang: 'html',
-          label: 'Google Fonts — add to your document <head>',
+          label: 'Google Fonts: add to your document <head>',
           code: `<link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
@@ -67,7 +67,7 @@ export const docs = {
         {
           type: 'code',
           lang: 'css',
-          label: 'Self-hosted — one @font-face per family and weight',
+          label: 'Self-hosted: one @font-face per family and weight',
           code: `@font-face {
   font-family: 'Fraunces';
   src: url('/fonts/fraunces.woff2') format('woff2');

package/assets/templates/blocks/components/DateTimeInput/DateTimeInputShowcase.tsx CHANGED Viewed

@@ -13,7 +13,10 @@ export default function DateTimeInputShowcase() {
   );
   return (
-    <Stack direction="vertical" width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <DateTimeInput
         label="Meeting time"
         placeholder="Select a date"

package/assets/templates/blocks/components/Table/TableRowStatusTable.doc.mjs CHANGED Viewed

@@ -4,10 +4,10 @@
 export const doc = {
   type: 'block',
   exampleFor: 'useTableRowStatus',
-  name: 'useTableRowStatus - Status Dots',
-  displayName: 'useTableRowStatus - Status Dots',
+  name: 'useTableRowStatus - Status Icons',
+  displayName: 'useTableRowStatus - Status Icons',
   description:
-    'A job table using useTableRowStatus to render a colored status dot (or icon) per row (failed / running / queued). Rows with no status show no dot.',
+    'A job table using useTableRowStatus. Semantic outcomes use the themed success, warning, and error icons; a palette-only queued state keeps the neutral dot.',
   isReady: true,
   aspectRatio: 16 / 9,
   componentsUsed: ['Table'],

package/assets/templates/blocks/components/Table/TableRowStatusTable.tsx CHANGED Viewed

@@ -34,13 +34,13 @@ const columns: TableColumn<Job>[] = [
 function jobStatus(job: Job): TableRowStatus | null {
   switch (job.state) {
     case 'failed':
-      return {color: 'error', icon: 'error', label: 'Failed'};
+      return {color: 'error', label: 'Failed'};
     case 'running':
-      return {color: 'warning', icon: 'warning', label: 'Running'};
+      return {color: 'warning', label: 'Running'};
     case 'queued':
       return {color: 'gray', label: 'Queued'};
-    default:
-      return null; // succeeded: no dot
+    case 'succeeded':
+      return {color: 'success', label: 'Succeeded'};
   }
 }

package/assets/templates/blocks/components/TimeInput/TimeInputShowcase.doc.mjs CHANGED Viewed

@@ -10,6 +10,6 @@ export const doc = {
   aspectRatio: 16 / 9,
   isShowcase: true,
   description:
-    'A time input field.',
+    'A time input that uses the browser/OS picker on touch by default and Astryx typed entry on fine pointers.',
   componentsUsed: ['TimeInput'],
 };

package/assets/templates/blocks/components/TimeInput/TimeInputShowcase.tsx CHANGED Viewed

@@ -4,15 +4,21 @@
 import {useState} from 'react';
 import {TimeInput, type ISOTimeString} from '@astryxdesign/core/TimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
 export default function TimeInputShowcase() {
   const [time, setTime] = useState<ISOTimeString | undefined>(undefined);
   return (
-    <TimeInput
-      label="Time"
-      placeholder="Select a time"
-      value={time}
-      onChange={setTime}
-    />
+    <Stack
+      direction="vertical"
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
+      <TimeInput
+        label="Time"
+        placeholder="Select a time"
+        value={time}
+        onChange={setTime}
+      />
+    </Stack>
   );
 }

package/assets/templates/pages/ai-chat/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'AI Chat Conversation',
   displayName: 'AI Chat Conversation',
-  description: 'Transcript of alternating turns carrying mixed rich content inline — markdown, code blocks, collapsible tool-call output — beside a resizable artifact panel that holds generated output while the stream keeps scrolling. Chat, conversation, assistant, messages, or copilot thread.',
+  description: 'Transcript of alternating turns carrying mixed rich content inline (markdown, code blocks, collapsible tool-call output) beside a resizable artifact panel that holds generated output while the stream keeps scrolling. Chat, conversation, assistant, messages, or copilot thread.',
   isReady: true,
   category: 'AI Chat - Conversation',
 };

package/assets/templates/pages/centered-hero/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Centered Hero',
   displayName: 'Centered Hero',
-  description: 'Symmetrical centered stack — headline, short blurb, paired call-to-action buttons — resting on one wide full-bleed picture, with nothing on either flank competing. Hero, banner, splash, landing image, or marketing masthead.',
+  description: 'Symmetrical centered stack (headline, short blurb, paired call-to-action buttons) resting on one wide full-bleed picture, with nothing on either flank competing. Hero, banner, splash, landing image, or marketing masthead.',
   isReady: true,
   category: 'Gallery - Hero',
 };

package/assets/templates/pages/contact-form/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Contact Form',
   displayName: 'Contact Form',
-  description: 'Flat single-column form mixing control types — text, pill toggles, dropdowns, long free-text — landing on one full-width submit. No steps, no branching, no summary rail. Contact, lead capture, enquiry, survey, or intake form.',
+  description: 'Flat single-column form mixing control types (text, pill toggles, dropdowns, long free-text) landing on one full-width submit. No steps, no branching, no summary rail. Contact, lead capture, enquiry, survey, or intake form.',
   isReady: true,
   category: 'Form - Basic',
 };

package/assets/templates/pages/dashboard/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Analytics Dashboard',
   displayName: 'Analytics Dashboard',
-  description: 'Three-band analytics: a row of headline tiles, then charts, then supporting tables, all re-reading from one global filter bar. Breadth over depth — a summary surface rather than a drill-down. Dashboard, overview, metrics, stats, analytics, reporting, or insights.',
+  description: 'Three-band analytics: a row of headline tiles, then charts, then supporting tables, all re-reading from one global filter bar. Breadth over depth, a summary surface rather than a drill-down. Dashboard, overview, metrics, stats, analytics, reporting, or insights.',
   isReady: true,
   category: 'Dashboard - Analytics',
   isHiddenFromOverview: true,

package/assets/templates/pages/detail-page/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Order Detail',
   displayName: 'Order Detail',
-  description: 'Single-record detail in two columns: a summary header with status and actions, a repeating line-item list, a totals block that sums it, and a chronological activity timeline in the rail. The shape for any record holding children plus a history — a customer order with shipping, an invoice, a transaction, or a job.',
+  description: 'Single-record detail in two columns: a summary header with status and actions, a repeating line-item list, a totals block that sums it, and a chronological activity timeline in the rail. The shape for any record holding children plus a history: a customer order with shipping, an invoice, a transaction, or a job.',
   isReady: true,
   category: 'Content - Order Detail',
 };

package/assets/templates/pages/gallery-hero/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Gallery Hero',
   displayName: 'Gallery Hero',
-  description: 'Centered stack — headline, short blurb, call-to-action buttons — resolving into a multi-image photo grid rather than one wide full-bleed picture, so the imagery reads as a set. Hero, banner, splash, landing image, masthead, or gallery intro.',
+  description: 'Centered stack (headline, short blurb, call-to-action buttons) resolving into a multi-image photo grid rather than one wide full-bleed picture, so the imagery reads as a set. Hero, banner, splash, landing image, masthead, or gallery intro.',
   isReady: true,
   category: 'Gallery - Hero',
 };

package/assets/templates/pages/incident-console/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Incident Console',
   displayName: 'Incident Console',
-  description: 'Dense row queue with an inspector: severity-coded rows grouped by status, a saved-search filter bar, a segmented status control, and a resizable detail pane for the selected row. Rows, not cards — sized for scanning volume. Incident, alert, on-call, outage, ticket, or triage console.',
+  description: 'Dense row queue with an inspector: severity-coded rows grouped by status, a saved-search filter bar, a segmented status control, and a resizable detail pane for the selected row. Rows, not cards, sized for scanning volume. Incident, alert, on-call, outage, ticket, or triage console.',
   isReady: false,
   category: 'Tools - Incident Console',
 };

package/assets/templates/pages/login/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Basic Login',
   displayName: 'Basic Login',
-  description: 'Minimal centered credential form on a plain ground — two fields and a submit, nothing competing for attention. The least-chrome entry surface. Login, sign in, signin, authentication, credentials, or account access.',
+  description: 'Minimal centered credential form on a plain ground: two fields and a submit, nothing competing for attention. The least-chrome entry surface. Login, sign in, signin, authentication, credentials, or account access.',
   isReady: true,
   isHiddenFromOverview: true,
   category: 'Login - Basic',

package/assets/templates/pages/messaging-shell/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Messaging Shell',
   displayName: 'Messaging Shell',
-  description: 'Four-column nested navigation narrowing left to right — team workspace, channel list, message stream, thread panel — where each column scopes the next. Dense rows, zero cards. Team messaging, chat, channels, threads, inbox, direct message, or conversation workspace.',
+  description: 'Four-column nested navigation narrowing left to right (team workspace, channel list, message stream, thread panel) where each column scopes the next. Dense rows, zero cards. Team messaging, chat, channels, threads, inbox, direct message, or conversation workspace.',
   isReady: false,
   category: 'Shell - Messaging',
 };

package/assets/templates/pages/product-gallery/template.doc.mjs CHANGED Viewed

@@ -4,7 +4,7 @@
 export const doc = {
   name: 'Product Gallery',
   displayName: 'Product Gallery',
-  description: 'Uniform card grid where every tile carries media, title, supporting line, and a price. Browse-to-select only — no filtering, no detail surface. Products, catalog, storefront, shop, listings, or ecommerce grid.',
+  description: 'Uniform card grid where every tile carries media, title, supporting line, and a price. Browse-to-select only, with no filtering and no detail surface. Products, catalog, storefront, shop, listings, or ecommerce grid.',
   type: 'page',
   isReady: true,
   category: 'Gallery - Product',

package/assets/templates/pages/settings/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Settings Form',
   displayName: 'Settings Form',
-  description: 'Preferences as one continuously scrolling form, sections stacked in order with no navigation between them. The simplest settings shape — everything reachable by scrolling. Settings, preferences, configuration, options, or account.',
+  description: 'Preferences as one continuously scrolling form, sections stacked in order with no navigation between them. The simplest settings shape: everything reachable by scrolling. Settings, preferences, configuration, options, or account.',
   isReady: true,
   category: 'Settings - Form',
 };

package/assets/templates/pages/table/template.doc.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ export const doc = {
   type: 'page',
   name: 'Simple Table',
   displayName: 'Simple Table',
-  description: 'Flat row collection where columns sort, rows select into a bulk-action toolbar, and each row carries an overflow menu. Sortable but ungrouped, with no detail pane — the baseline shape. Table, list, rows, records, grid, spreadsheet, or roster.',
+  description: 'Flat row collection where columns sort, rows select into a bulk-action toolbar, and each row carries an overflow menu. Sortable but ungrouped, with no detail pane, the baseline shape. Table, list, rows, records, grid, spreadsheet, or roster.',
   isReady: false,
   category: 'Table - Basic',
   isHiddenFromOverview: true,