@astryxdesign/cli 0.1.4-canary.37c19d3 → 0.1.4-canary.38ede5f

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 (30) hide show
  1. package/docs/getting-started.doc.mjs +4 -0
  2. package/docs/migration.doc.mjs +134 -0
  3. package/docs/styling.doc.mjs +53 -0
  4. package/package.json +10 -10
  5. package/src/commands/agent-docs.mjs +7 -5
  6. package/src/commands/agent-docs.test.mjs +33 -0
  7. package/src/commands/build-theme.color-scheme.test.mjs +153 -0
  8. package/src/commands/build-theme.mjs +8 -1
  9. package/src/commands/build-theme.variants.test.mjs +7 -18
  10. package/src/commands/init.mjs +1 -1
  11. package/src/commands/swizzle.mjs +34 -0
  12. package/src/commands/swizzle.routing.test.mjs +67 -0
  13. package/templates/blocks/components/Collapsible/CollapsibleWithoutCard.tsx +25 -23
  14. package/templates/pages/classic-gallery/page.tsx +1 -1
  15. package/templates/pages/dashboard/page.tsx +1 -1
  16. package/templates/pages/documentation/page.tsx +1 -1
  17. package/templates/pages/incident-console/page.tsx +580 -0
  18. package/templates/pages/incident-console/template.doc.mjs +12 -0
  19. package/templates/pages/messaging-shell/page.tsx +676 -0
  20. package/templates/pages/messaging-shell/template.doc.mjs +12 -0
  21. package/templates/pages/mixed-gallery/page.tsx +1 -1
  22. package/templates/pages/payment-form/page.tsx +2 -6
  23. package/templates/pages/product-detail/page.tsx +3 -11
  24. package/templates/pages/product-gallery/page.tsx +1 -1
  25. package/templates/pages/settings/page.tsx +1 -1
  26. package/templates/pages/side-gallery/page.tsx +1 -1
  27. package/templates/pages/table-page/page.tsx +1 -1
  28. package/templates/pages/table-page-chart/page.tsx +1 -1
  29. package/templates/pages/table-page-heatmap-status/page.tsx +1 -1
  30. package/templates/pages/table-page-shoe-store-heatmap/page.tsx +1 -1
package/templates/pages/payment-form/page.tsx CHANGED
@@ -153,10 +153,6 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
153
153
  // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
154
154
 
155
155
  const fullWidth: CSSProperties = {width: '100%'};
156
- // LayoutContent clips overflow by default, which traps position:sticky
157
- // children (the sticky order summary). With height="auto" the page scrolls
158
- // at the window, so let overflow be visible here so sticky can pin.
159
- const visibleOverflow: CSSProperties = {overflow: 'visible'};
160
156
  // Form column flex-basis so the two checkout columns share width evenly.
161
157
  const formColBasis: CSSProperties = {flexBasis: 0};
162
158
  // Space the Order Summary content below its collapsible trigger title.
@@ -266,9 +262,9 @@ export default function PaymentFormPage() {
266
262
 
267
263
  return (
268
264
  <Layout
269
- height="auto"
265
+ height="fill"
270
266
  content={
271
- <LayoutContent padding={0} style={visibleOverflow}>
267
+ <LayoutContent padding={0}>
272
268
  <Center axis="horizontal">
273
269
  <Section
274
270
  variant="transparent"
package/templates/pages/product-detail/page.tsx CHANGED
@@ -3,12 +3,7 @@
3
3
  'use client';
4
4
 
5
5
  import {useState} from 'react';
6
- import {
7
- VStack,
8
- HStack,
9
- Layout,
10
- LayoutContent,
11
- } from '@astryxdesign/core/Layout';
6
+ import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
12
7
  import {Center} from '@astryxdesign/core/Center';
13
8
  import {Grid} from '@astryxdesign/core/Grid';
14
9
  import {Text, Heading} from '@astryxdesign/core/Text';
@@ -203,10 +198,7 @@ function ProductInfo() {
203
198
  <VStack gap={2}>
204
199
  <Text type="label">Finish</Text>
205
200
  <VStack hAlign="start">
206
- <SegmentedControl
207
- value={finish}
208
- onChange={setFinish}
209
- label="Finish">
201
+ <SegmentedControl value={finish} onChange={setFinish} label="Finish">
210
202
  {FINISHES.map(f => (
211
203
  <SegmentedControlItem
212
204
  key={f.value}
@@ -286,7 +278,7 @@ export default function ProductDetailTemplate() {
286
278
 
287
279
  return (
288
280
  <Layout
289
- height="auto"
281
+ height="fill"
290
282
  contentWidth={1200}
291
283
  content={
292
284
  <LayoutContent padding={6}>
package/templates/pages/product-gallery/page.tsx CHANGED
@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
119
119
  export default function ProductGalleryTemplate() {
120
120
  return (
121
121
  <Layout
122
- height="auto"
122
+ height="fill"
123
123
  contentWidth={1200}
124
124
  content={
125
125
  <LayoutContent padding={6}>
package/templates/pages/settings/page.tsx CHANGED
@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
70
70
 
71
71
  return (
72
72
  <Layout
73
- height="auto"
73
+ height="fill"
74
74
  contentWidth={1440}
75
75
  header={
76
76
  <LayoutHeader hasDivider>
package/templates/pages/side-gallery/page.tsx CHANGED
@@ -101,7 +101,7 @@ function ImageGrid() {
101
101
  export default function SideGalleryTemplate() {
102
102
  return (
103
103
  <Layout
104
- height="auto"
104
+ height="fill"
105
105
  contentWidth={1400}
106
106
  content={
107
107
  <LayoutContent padding={6}>
package/templates/pages/table-page/page.tsx CHANGED
@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
389
389
 
390
390
  return (
391
391
  <Layout
392
- height="auto"
392
+ height="fill"
393
393
  header={
394
394
  <LayoutHeader hasDivider>
395
395
  <HStack gap={2} vAlign="center">
package/templates/pages/table-page-chart/page.tsx CHANGED
@@ -513,7 +513,7 @@ const columns: TableColumn<OrderRow>[] = [
513
513
  export default function TablePageChartTemplate() {
514
514
  return (
515
515
  <Layout
516
- height="auto"
516
+ height="fill"
517
517
  header={
518
518
  <LayoutHeader hasDivider>
519
519
  <HStack gap={2} vAlign="center">
package/templates/pages/table-page-heatmap-status/page.tsx CHANGED
@@ -430,7 +430,7 @@ function OutageHeatmap() {
430
430
  export default function TablePageHeatmapStatusTemplate() {
431
431
  return (
432
432
  <Layout
433
- height="auto"
433
+ height="fill"
434
434
  header={
435
435
  <LayoutHeader hasDivider>
436
436
  <HStack gap={2} vAlign="center">
package/templates/pages/table-page-shoe-store-heatmap/page.tsx CHANGED
@@ -867,7 +867,7 @@ const columns: TableColumn<OrderRow>[] = [
867
867
  export default function TablePageShoeStoreHeatmapTemplate() {
868
868
  return (
869
869
  <Layout
870
- height="auto"
870
+ height="fill"
871
871
  header={
872
872
  <LayoutHeader hasDivider>
873
873
  <HStack gap={2} vAlign="center">