@astryxdesign/cli 0.4.4 → 0.4.5-canary.1dc3e5d
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# @xds/cli
|
|
2
2
|
|
|
3
|
+
# 0.4.5
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
3
7
|
# 0.4.4
|
|
4
8
|
|
|
5
9
|
#### New Components
|
|
@@ -16,6 +20,7 @@
|
|
|
16
20
|
Three more lessons came out of building a real app on it. The page now `<link>`s the theme's webfont from Google Fonts, because the theme _names_ Figtree and never loads it, so every viewer silently got the fallback stack (#5015 again). It imports the theme OBJECT and wraps in `<Theme theme={neutralTheme} mode="system">`, so light and dark follow the OS — the `data-astryx-theme` attribute alone scopes the stylesheet but cannot switch modes. And `#root:empty` carries a "Loading…" state, because ESM-from-CDN has real latency and a blank page reads as broken. Markup is `htm`, with a comment saying it is optional and `createElement` is the dependency-free alternative.
|
|
17
21
|
|
|
18
22
|
A recipe that is only read is a recipe that is only assumed to work, so CI renders it: `.github/scripts/cdn-template-smoke-test.mjs` scaffolds the page with the real CLI and opens it in headless Chromium, failing on any console error, page error or failed request, and on a page that loads without rendering.
|
|
23
|
+
|
|
19
24
|
- `astryx theme build` takes any number of theme files — `astryx theme build themes/*.ts` compiles them all in one process, so an app with several themes no longer hand-rolls a loop that re-enters the CLI once per theme. Outputs are byte-identical to the serial invocations; the run stops at the first failure and names the theme that failed. The CLI's Node floor (>=22.13) is now declared in `engines`, so a package manager can enforce it at install instead of the build failing later (#5121).
|
|
20
25
|
- `defineTheme`: `color.accent` accepts a `[light, dark]` tuple (#2279)
|
|
21
26
|
`ColorScaleConfig.accent` now takes either a single hex or a `[light, dark]` tuple, matching `TokenValue`. With a tuple, `expandColorScale` derives the light half of every generated `light-dark()` pair from the light seed's palettes and the dark half from the dark seed's, so each scheme gets a consistent derived palette (muted, on-accent, neutrals) instead of the `tokens['--color-accent']` workaround that skips scale generation. Single-string configs are unchanged, token for token. Also documents the precedence between `color` and `tokens` for accent-derived values: `tokens` entries win token by token, the `var(--color-accent)` reference tokens follow a `--color-accent` override at runtime, and the baked `--color-on-accent` stays derived from the `color.accent` seed.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
|
|
4
|
+
export const doc = {
|
|
5
|
+
type: 'block',
|
|
6
|
+
exampleFor: 'BottomSheet',
|
|
7
|
+
name: 'Bottom Sheet — Snap points',
|
|
8
|
+
displayName: 'Bottom Sheet — Snap points',
|
|
9
|
+
description:
|
|
10
|
+
'Drag-to-resize stops: a half-height working surface, and a peek that slides away and thins the scrim.',
|
|
11
|
+
isReady: true,
|
|
12
|
+
aspectRatio: 3 / 4,
|
|
13
|
+
componentsUsed: [
|
|
14
|
+
'BottomSheet',
|
|
15
|
+
'Button',
|
|
16
|
+
'Divider',
|
|
17
|
+
'Heading',
|
|
18
|
+
'Icon',
|
|
19
|
+
'Item',
|
|
20
|
+
'Stack',
|
|
21
|
+
'Text',
|
|
22
|
+
],
|
|
23
|
+
};
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
import {useState} from 'react';
|
|
6
|
+
import {
|
|
7
|
+
BottomSheet,
|
|
8
|
+
type BottomSheetSnapPoint,
|
|
9
|
+
} from '@astryxdesign/core/BottomSheet';
|
|
10
|
+
import {Button} from '@astryxdesign/core/Button';
|
|
11
|
+
import {Divider} from '@astryxdesign/core/Divider';
|
|
12
|
+
import {Heading} from '@astryxdesign/core/Heading';
|
|
13
|
+
import {Icon} from '@astryxdesign/core/Icon';
|
|
14
|
+
import {Item} from '@astryxdesign/core/Item';
|
|
15
|
+
import {HStack, VStack} from '@astryxdesign/core/Stack';
|
|
16
|
+
import {Text} from '@astryxdesign/core/Text';
|
|
17
|
+
import {
|
|
18
|
+
ArrowLeftIcon,
|
|
19
|
+
ArrowRightIcon,
|
|
20
|
+
ArrowUpIcon,
|
|
21
|
+
ArrowUturnLeftIcon,
|
|
22
|
+
FlagIcon,
|
|
23
|
+
MapPinIcon,
|
|
24
|
+
} from '@heroicons/react/24/outline';
|
|
25
|
+
|
|
26
|
+
// Half the viewport is a working surface — the sheet lays its content out at
|
|
27
|
+
// that height and keeps a full scrim. The 96px stop is a peek: a sliver, so the
|
|
28
|
+
// sheet slides away rather than reflowing into it, and the scrim thins.
|
|
29
|
+
const SNAP_POINTS: ReadonlyArray<BottomSheetSnapPoint> = ['96px', '50%'];
|
|
30
|
+
|
|
31
|
+
const steps = [
|
|
32
|
+
{
|
|
33
|
+
icon: MapPinIcon,
|
|
34
|
+
label: 'Head northeast on Mission St',
|
|
35
|
+
detail: 'Toward 3rd St',
|
|
36
|
+
distance: '350 ft',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
icon: ArrowRightIcon,
|
|
40
|
+
label: 'Turn right onto 3rd St',
|
|
41
|
+
detail: 'Pass Yerba Buena Gardens on your left',
|
|
42
|
+
distance: '0.2 mi',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
icon: ArrowUpIcon,
|
|
46
|
+
label: 'Continue onto Kearny St',
|
|
47
|
+
detail: 'Stay in the right lane',
|
|
48
|
+
distance: '0.4 mi',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
icon: ArrowLeftIcon,
|
|
52
|
+
label: 'Turn left onto Market St',
|
|
53
|
+
detail: 'Cable car crossing ahead',
|
|
54
|
+
distance: '0.6 mi',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
icon: ArrowRightIcon,
|
|
58
|
+
label: 'Bear right onto Sutter St',
|
|
59
|
+
detail: 'Toward the Financial District',
|
|
60
|
+
distance: '0.3 mi',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
icon: ArrowUpIcon,
|
|
64
|
+
label: 'Continue on Sansome St',
|
|
65
|
+
detail: 'Four blocks, past Pine St',
|
|
66
|
+
distance: '0.5 mi',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
icon: ArrowUturnLeftIcon,
|
|
70
|
+
label: 'Make a U-turn at Washington St',
|
|
71
|
+
detail: 'Construction detour until March',
|
|
72
|
+
distance: '150 ft',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
icon: ArrowRightIcon,
|
|
76
|
+
label: 'Turn right onto Battery St',
|
|
77
|
+
detail: 'Follow signs for the Embarcadero',
|
|
78
|
+
distance: '0.4 mi',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
icon: ArrowLeftIcon,
|
|
82
|
+
label: 'Turn left onto Sacramento St',
|
|
83
|
+
detail: 'Toward the waterfront',
|
|
84
|
+
distance: '0.2 mi',
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
icon: ArrowRightIcon,
|
|
88
|
+
label: 'Turn right onto The Embarcadero',
|
|
89
|
+
detail: 'Bay Bridge on your right',
|
|
90
|
+
distance: '0.5 mi',
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
icon: ArrowUpIcon,
|
|
94
|
+
label: 'Continue past Pier 14',
|
|
95
|
+
detail: 'Ferry terminal signage begins here',
|
|
96
|
+
distance: '0.3 mi',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
icon: FlagIcon,
|
|
100
|
+
label: 'Arrive at the Ferry Building',
|
|
101
|
+
detail: 'Parking garage entrance on Washington St',
|
|
102
|
+
distance: '—',
|
|
103
|
+
},
|
|
104
|
+
];
|
|
105
|
+
|
|
106
|
+
export default function BottomSheetSnapPoints() {
|
|
107
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<>
|
|
111
|
+
<VStack gap={3} align="start">
|
|
112
|
+
<Text type="body">
|
|
113
|
+
This sheet has two extra stops: half the viewport, and a 96px peek.
|
|
114
|
+
Drag the handle down to collapse it, then back up — it rests at each
|
|
115
|
+
stop instead of following your finger.
|
|
116
|
+
</Text>
|
|
117
|
+
<Button label="Show directions" onClick={() => setIsOpen(true)} />
|
|
118
|
+
</VStack>
|
|
119
|
+
<BottomSheet
|
|
120
|
+
isOpen={isOpen}
|
|
121
|
+
onOpenChange={setIsOpen}
|
|
122
|
+
label="Directions to the Ferry Building"
|
|
123
|
+
height="tall"
|
|
124
|
+
snapPoints={SNAP_POINTS}>
|
|
125
|
+
<VStack gap={4} padding={4}>
|
|
126
|
+
<VStack gap={1}>
|
|
127
|
+
<Heading level={3}>Ferry Building</Heading>
|
|
128
|
+
<HStack gap={2}>
|
|
129
|
+
<Text type="label">18 min</Text>
|
|
130
|
+
<Text type="supporting">3.7 mi · arrive 9:41 AM</Text>
|
|
131
|
+
</HStack>
|
|
132
|
+
</VStack>
|
|
133
|
+
<Divider />
|
|
134
|
+
<VStack gap={0}>
|
|
135
|
+
{steps.map(step => (
|
|
136
|
+
<Item
|
|
137
|
+
key={step.label}
|
|
138
|
+
startContent={<Icon icon={step.icon} size="sm" />}
|
|
139
|
+
label={step.label}
|
|
140
|
+
description={step.detail}
|
|
141
|
+
endContent={<Text type="supporting">{step.distance}</Text>}
|
|
142
|
+
/>
|
|
143
|
+
))}
|
|
144
|
+
</VStack>
|
|
145
|
+
<Divider />
|
|
146
|
+
<Button
|
|
147
|
+
label="Start"
|
|
148
|
+
onClick={() => setIsOpen(false)}
|
|
149
|
+
variant="primary"
|
|
150
|
+
/>
|
|
151
|
+
</VStack>
|
|
152
|
+
</BottomSheet>
|
|
153
|
+
</>
|
|
154
|
+
);
|
|
155
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5-canary.1dc3e5d",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
"zod": "^4.4.3"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
|
-
"@astryxdesign/charts": "
|
|
91
|
-
"@astryxdesign/core": "
|
|
92
|
-
"@astryxdesign/lab": "
|
|
93
|
-
"@astryxdesign/theme-neutral": "
|
|
90
|
+
"@astryxdesign/charts": "0.4.5-canary.1dc3e5d",
|
|
91
|
+
"@astryxdesign/core": "0.4.5-canary.1dc3e5d",
|
|
92
|
+
"@astryxdesign/lab": "0.4.5-canary.1dc3e5d",
|
|
93
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.1dc3e5d",
|
|
94
94
|
"gpt-tokenizer": "^3.4.0"
|
|
95
95
|
},
|
|
96
96
|
"peerDependenciesMeta": {
|
|
@@ -108,10 +108,10 @@
|
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
110
|
"devDependencies": {
|
|
111
|
-
"@astryxdesign/charts": "
|
|
112
|
-
"@astryxdesign/core": "
|
|
113
|
-
"@astryxdesign/lab": "
|
|
114
|
-
"@astryxdesign/theme-neutral": "
|
|
111
|
+
"@astryxdesign/charts": "0.4.5-canary.1dc3e5d",
|
|
112
|
+
"@astryxdesign/core": "0.4.5-canary.1dc3e5d",
|
|
113
|
+
"@astryxdesign/lab": "0.4.5-canary.1dc3e5d",
|
|
114
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.1dc3e5d",
|
|
115
115
|
"gpt-tokenizer": "^3.4.0"
|
|
116
116
|
},
|
|
117
117
|
"scripts": {
|