@archetypeai/ds-cli 0.7.8 → 0.8.0
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/README.md +16 -18
- package/bin.js +4 -3
- package/commands/create.js +8 -30
- package/commands/init.js +8 -30
- package/files/AGENTS.md +54 -20
- package/files/CLAUDE.md +54 -20
- package/files/ds-manifest.json +1074 -0
- package/files/rules/charts.md +2 -2
- package/files/rules/components.md +2 -3
- package/files/rules/frontend-architecture.md +12 -13
- package/files/rules/styling.md +5 -13
- package/files/skills/apply-ds/SKILL.md +15 -15
- package/files/skills/build-component/SKILL.md +153 -0
- package/files/skills/create-dashboard/SKILL.md +18 -18
- package/files/skills/setup-chart/SKILL.md +12 -14
- package/files/skills/setup-chart/references/scatter-chart.md +9 -9
- package/files/skills/setup-chart/references/sensor-chart.md +9 -9
- package/lib/add-ds-config-codeagent.js +4 -2
- package/lib/add-ds-ui-svelte.js +37 -41
- package/lib/registries.js +6 -0
- package/lib/scaffold-ds-svelte-project.js +198 -99
- package/lib/use-shadcn-svelte-registry.js +2 -2
- package/package.json +2 -2
- package/files/skills/build-pattern/SKILL.md +0 -204
package/lib/add-ds-ui-svelte.js
CHANGED
|
@@ -8,13 +8,18 @@ import { validateRegistryUrl } from './validate-url.js';
|
|
|
8
8
|
import { detectPm, getPm } from './use-package-manager.js';
|
|
9
9
|
import { validateFontsPath, installLocalFonts } from './install-fonts-local.js';
|
|
10
10
|
import { isInteractive } from './is-interactive.js';
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
prependCss,
|
|
13
|
+
pinLayerchart,
|
|
14
|
+
dsComponentsJson,
|
|
15
|
+
DS_UTILS_CONTENT
|
|
16
|
+
} from './scaffold-ds-svelte-project.js';
|
|
17
|
+
import { LABS_REGISTRY_URL } from './registries.js';
|
|
12
18
|
|
|
13
19
|
const execFileAsync = promisify(execFile);
|
|
14
20
|
|
|
15
21
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
16
|
-
const
|
|
17
|
-
const ALL_COMPONENTS_URL = `${REGISTRY_URL}/r/all.json`;
|
|
22
|
+
const ALL_COMPONENTS_URL = `${LABS_REGISTRY_URL}/r/all.json`;
|
|
18
23
|
|
|
19
24
|
function parseFlags(args) {
|
|
20
25
|
const flags = { fonts: null, defaults: false };
|
|
@@ -58,39 +63,15 @@ export async function addDsUiSvelte(args) {
|
|
|
58
63
|
const componentsJsonPath = join(projectDir, 'components.json');
|
|
59
64
|
if (!existsSync(componentsJsonPath)) {
|
|
60
65
|
p.log.info('shadcn-svelte not initialized, setting up...');
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
css: 'src/routes/layout.css',
|
|
65
|
-
baseColor: 'slate'
|
|
66
|
-
},
|
|
67
|
-
aliases: {
|
|
68
|
-
utils: '$lib/utils',
|
|
69
|
-
ui: '$lib/components/ui',
|
|
70
|
-
components: '$lib/components',
|
|
71
|
-
hooks: '$lib/hooks',
|
|
72
|
-
lib: '$lib'
|
|
73
|
-
},
|
|
74
|
-
typescript: false
|
|
75
|
-
};
|
|
76
|
-
writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2));
|
|
77
|
-
|
|
78
|
-
const utilsPath = join(projectDir, 'src', 'lib', 'utils.js');
|
|
66
|
+
writeFileSync(componentsJsonPath, JSON.stringify(dsComponentsJson(), null, 2));
|
|
67
|
+
|
|
68
|
+
const utilsPath = join(projectDir, 'src', 'lib', 'utils.ts');
|
|
79
69
|
if (!existsSync(utilsPath)) {
|
|
80
70
|
const utilsDir = dirname(utilsPath);
|
|
81
71
|
if (!existsSync(utilsDir)) mkdirSync(utilsDir, { recursive: true });
|
|
82
|
-
writeFileSync(
|
|
83
|
-
utilsPath,
|
|
84
|
-
`import { clsx } from "clsx";\nimport { twMerge } from "tailwind-merge";\n\nexport function cn(...inputs) {\n\treturn twMerge(clsx(inputs));\n}\n`
|
|
85
|
-
);
|
|
72
|
+
writeFileSync(utilsPath, DS_UTILS_CONTENT);
|
|
86
73
|
}
|
|
87
74
|
|
|
88
|
-
const [setupCmd, ...setupArgs] = pm.install.split(/\s+/);
|
|
89
|
-
await execFileAsync(setupCmd, [...setupArgs, 'clsx', 'tailwind-merge', 'tw-animate-css'], {
|
|
90
|
-
stdio: 'pipe',
|
|
91
|
-
maxBuffer: 10 * 1024 * 1024,
|
|
92
|
-
cwd: projectDir
|
|
93
|
-
});
|
|
94
75
|
p.log.success('shadcn-svelte initialized');
|
|
95
76
|
}
|
|
96
77
|
|
|
@@ -117,16 +98,27 @@ export async function addDsUiSvelte(args) {
|
|
|
117
98
|
|
|
118
99
|
s.stop(`Found ${componentUrls.length} components`);
|
|
119
100
|
|
|
120
|
-
// install design tokens
|
|
101
|
+
// install design tokens + the console base package ($lib/utils re-exports
|
|
102
|
+
// its helpers and the labs source composes its primitives) + tw-animate-css
|
|
103
|
+
// (backs console's animation classes)
|
|
121
104
|
const tokenSpinner = p.spinner();
|
|
122
|
-
tokenSpinner.start('Installing design
|
|
105
|
+
tokenSpinner.start('Installing design system base packages');
|
|
123
106
|
const [installCmd, ...installArgs] = pm.install.split(/\s+/);
|
|
124
|
-
await execFileAsync(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
107
|
+
await execFileAsync(
|
|
108
|
+
installCmd,
|
|
109
|
+
[
|
|
110
|
+
...installArgs,
|
|
111
|
+
'@archetypeai/ds-lib-tokens',
|
|
112
|
+
'@archetypeai/ds-ui-svelte-console',
|
|
113
|
+
'tw-animate-css'
|
|
114
|
+
],
|
|
115
|
+
{
|
|
116
|
+
stdio: 'pipe',
|
|
117
|
+
maxBuffer: 10 * 1024 * 1024,
|
|
118
|
+
cwd: projectDir
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
tokenSpinner.stop('Design system base packages installed');
|
|
130
122
|
|
|
131
123
|
// local fonts step
|
|
132
124
|
let fontsPath = null;
|
|
@@ -191,8 +183,9 @@ export async function addDsUiSvelte(args) {
|
|
|
191
183
|
}
|
|
192
184
|
}
|
|
193
185
|
|
|
194
|
-
// configure CSS imports in layout.css
|
|
195
|
-
|
|
186
|
+
// configure CSS imports in layout.css; no labs @source — this flow installs
|
|
187
|
+
// labs components as editable source, scanned from the project tree
|
|
188
|
+
prependCss(projectDir, { labs: false });
|
|
196
189
|
|
|
197
190
|
const installSpinner = p.spinner();
|
|
198
191
|
installSpinner.start('Installing components');
|
|
@@ -204,6 +197,9 @@ export async function addDsUiSvelte(args) {
|
|
|
204
197
|
{ stdio: 'pipe', maxBuffer: 10 * 1024 * 1024, cwd: projectDir }
|
|
205
198
|
);
|
|
206
199
|
|
|
200
|
+
// shadcn-svelte saves layerchart as a caret range; rewrite to the exact pin
|
|
201
|
+
pinLayerchart(projectDir);
|
|
202
|
+
|
|
207
203
|
installSpinner.stop('All components installed');
|
|
208
204
|
|
|
209
205
|
// copy LICENSE alongside installed components
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
// the two design system registries (editable component source, one per tier)
|
|
2
|
+
// each tier is a registry-only worker; the playground lives at the bare design-system domain
|
|
3
|
+
export const LABS_REGISTRY_URL =
|
|
4
|
+
process.env.REGISTRY_URL || 'https://design-system-labs.archetypeai.workers.dev';
|
|
5
|
+
export const CONSOLE_REGISTRY_URL =
|
|
6
|
+
process.env.CONSOLE_REGISTRY_URL || 'https://design-system-console.archetypeai.workers.dev';
|
|
@@ -4,9 +4,41 @@ import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
|
|
|
4
4
|
import { join } from 'path';
|
|
5
5
|
import * as p from '@clack/prompts';
|
|
6
6
|
import { setupCursor, setupClaude } from './add-ds-config-codeagent.js';
|
|
7
|
+
import { LABS_REGISTRY_URL, CONSOLE_REGISTRY_URL } from './registries.js';
|
|
7
8
|
|
|
8
9
|
const execFileAsync = promisify(execFile);
|
|
9
10
|
|
|
11
|
+
// newer layerchart prereleases (next.65+) removed getTooltipContext and break
|
|
12
|
+
// the labs chart primitives — bump only together with the labs package
|
|
13
|
+
export const LAYERCHART_PIN = '2.0.0-next.46';
|
|
14
|
+
|
|
15
|
+
// both tiers ship as npm packages; apps compose from these by default
|
|
16
|
+
const DS_PACKAGES = [
|
|
17
|
+
'@archetypeai/ds-lib-tokens',
|
|
18
|
+
'@archetypeai/ds-ui-svelte-console',
|
|
19
|
+
'@archetypeai/ds-ui-svelte-labs'
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
// peers installed explicitly because not every package manager auto-installs
|
|
23
|
+
// peer dependencies (yarn does not); ranges mirror the packages' declared peer
|
|
24
|
+
// ranges so later installs don't hit ERESOLVE (e.g. bare shiki resolves to 4.x
|
|
25
|
+
// while console wants ^3). tw-animate-css backs console's animation classes.
|
|
26
|
+
const DS_PEERS = [
|
|
27
|
+
'bits-ui@^2.0.0',
|
|
28
|
+
'tailwind-variants@^3.0.0',
|
|
29
|
+
'tailwind-merge@^3.0.0',
|
|
30
|
+
'clsx@^2.0.0',
|
|
31
|
+
'@lucide/svelte@>=0.500.0 <2.0.0',
|
|
32
|
+
'tw-animate-css',
|
|
33
|
+
'svelte-sonner@^1.0.0',
|
|
34
|
+
'shiki@^3.0.0',
|
|
35
|
+
'yaml@^2.6.0',
|
|
36
|
+
'@cfworker/json-schema@^4.1.1',
|
|
37
|
+
`layerchart@${LAYERCHART_PIN}`,
|
|
38
|
+
'd3-scale@^4.0.0',
|
|
39
|
+
'd3-shape@^3.0.0'
|
|
40
|
+
];
|
|
41
|
+
|
|
10
42
|
// run a command without a shell to prevent injection
|
|
11
43
|
async function run(command, args, opts) {
|
|
12
44
|
await execFileAsync(command, args, { stdio: 'pipe', maxBuffer: 10 * 1024 * 1024, ...opts });
|
|
@@ -36,7 +68,8 @@ export async function runSvCreate(pm, name, targetDir) {
|
|
|
36
68
|
name,
|
|
37
69
|
'--template',
|
|
38
70
|
'minimal',
|
|
39
|
-
'--
|
|
71
|
+
'--types',
|
|
72
|
+
'ts',
|
|
40
73
|
'--add',
|
|
41
74
|
'tailwindcss=plugins:none',
|
|
42
75
|
...splitCmd(pm.svInstallFlag)
|
|
@@ -71,87 +104,114 @@ export function patchSvelteConfig(projectPath) {
|
|
|
71
104
|
}
|
|
72
105
|
}
|
|
73
106
|
|
|
74
|
-
// install design tokens
|
|
75
|
-
export async function
|
|
107
|
+
// install both design system packages (tokens, console, labs) plus their peers
|
|
108
|
+
export async function installPackages(pm, projectPath) {
|
|
76
109
|
const [cmd, ...baseArgs] = splitCmd(pm.install);
|
|
77
|
-
const args = [...baseArgs,
|
|
110
|
+
const args = [...baseArgs, ...DS_PACKAGES, ...DS_PEERS];
|
|
78
111
|
const s = p.spinner();
|
|
79
|
-
s.start('Installing design
|
|
112
|
+
s.start('Installing design system packages');
|
|
80
113
|
try {
|
|
81
114
|
await run(cmd, args, { cwd: projectPath });
|
|
82
|
-
|
|
115
|
+
pinLayerchart(projectPath);
|
|
116
|
+
s.stop('Design system packages installed');
|
|
83
117
|
return true;
|
|
84
118
|
} catch (error) {
|
|
85
|
-
s.stop('Failed to install design
|
|
119
|
+
s.stop('Failed to install design system packages');
|
|
86
120
|
p.log.error(error.stderr?.toString() || error.message);
|
|
87
121
|
return false;
|
|
88
122
|
}
|
|
89
123
|
}
|
|
90
124
|
|
|
91
|
-
//
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
aliases: {
|
|
103
|
-
utils: '$lib/utils',
|
|
104
|
-
ui: '$lib/components/ui',
|
|
105
|
-
components: '$lib/components',
|
|
106
|
-
hooks: '$lib/hooks',
|
|
107
|
-
lib: '$lib'
|
|
108
|
-
},
|
|
109
|
-
typescript: false
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
const componentsJsonPath = join(projectPath, 'components.json');
|
|
113
|
-
if (existsSync(componentsJsonPath)) {
|
|
114
|
-
p.log.info('components.json already exists, skipping');
|
|
115
|
-
} else {
|
|
116
|
-
writeFile(componentsJsonPath, JSON.stringify(componentsJson, null, 2));
|
|
125
|
+
// package managers save layerchart as ^2.0.0-next.46; a fresh re-resolve could
|
|
126
|
+
// float to a broken prerelease, so rewrite the range to the exact pin
|
|
127
|
+
export function pinLayerchart(projectPath) {
|
|
128
|
+
const pkgPath = join(projectPath, 'package.json');
|
|
129
|
+
if (!existsSync(pkgPath)) return false;
|
|
130
|
+
const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
|
|
131
|
+
let changed = false;
|
|
132
|
+
for (const field of ['dependencies', 'devDependencies']) {
|
|
133
|
+
if (pkg[field]?.layerchart && pkg[field].layerchart !== LAYERCHART_PIN) {
|
|
134
|
+
pkg[field].layerchart = LAYERCHART_PIN;
|
|
135
|
+
changed = true;
|
|
117
136
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
export function cn(...inputs) {
|
|
124
|
-
\treturn twMerge(clsx(inputs));
|
|
137
|
+
}
|
|
138
|
+
if (changed) {
|
|
139
|
+
writeFileSync(pkgPath, JSON.stringify(pkg, null, '\t') + '\n');
|
|
140
|
+
}
|
|
141
|
+
return changed;
|
|
125
142
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
143
|
+
|
|
144
|
+
// components.json content; the registries key is not a shadcn-svelte field (the
|
|
145
|
+
// CLI strips it) — it records where editable component source lives for the
|
|
146
|
+
// modify workflow: npx shadcn-svelte@latest add <url>
|
|
147
|
+
export function dsComponentsJson() {
|
|
148
|
+
return {
|
|
149
|
+
$schema: 'https://shadcn-svelte.com/schema.json',
|
|
150
|
+
tailwind: {
|
|
151
|
+
css: 'src/routes/layout.css',
|
|
152
|
+
baseColor: 'slate'
|
|
153
|
+
},
|
|
154
|
+
aliases: {
|
|
155
|
+
utils: '$lib/utils',
|
|
156
|
+
ui: '$lib/components/ui',
|
|
157
|
+
components: '$lib/components',
|
|
158
|
+
hooks: '$lib/hooks',
|
|
159
|
+
lib: '$lib'
|
|
160
|
+
},
|
|
161
|
+
typescript: true,
|
|
162
|
+
registries: {
|
|
163
|
+
console: `${CONSOLE_REGISTRY_URL}/r/{name}.json`,
|
|
164
|
+
labs: `${LABS_REGISTRY_URL}/r/{name}.json`
|
|
131
165
|
}
|
|
166
|
+
};
|
|
167
|
+
}
|
|
132
168
|
|
|
133
|
-
|
|
134
|
-
|
|
169
|
+
// $lib/utils re-exports the design system helpers so app code and any
|
|
170
|
+
// registry-installed source share one cn (it carries console's tailwind-merge
|
|
171
|
+
// extensions; a local clsx+twMerge copy would drift)
|
|
172
|
+
export const DS_UTILS_CONTENT = `export * from '@archetypeai/ds-ui-svelte-console/primitives/utils';\n`;
|
|
173
|
+
|
|
174
|
+
// init shadcn-svelte config (components.json + $lib/utils)
|
|
175
|
+
export function initShadcn(projectPath) {
|
|
176
|
+
const componentsJsonPath = join(projectPath, 'components.json');
|
|
177
|
+
if (existsSync(componentsJsonPath)) {
|
|
178
|
+
p.log.info('components.json already exists, skipping');
|
|
179
|
+
} else {
|
|
180
|
+
writeFile(componentsJsonPath, JSON.stringify(dsComponentsJson(), null, 2));
|
|
181
|
+
}
|
|
135
182
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
return false;
|
|
183
|
+
const utilsPath = join(projectPath, 'src/lib/utils.ts');
|
|
184
|
+
if (existsSync(utilsPath)) {
|
|
185
|
+
p.log.info('src/lib/utils.ts already exists, skipping');
|
|
186
|
+
} else {
|
|
187
|
+
writeFile(utilsPath, DS_UTILS_CONTENT);
|
|
142
188
|
}
|
|
189
|
+
|
|
190
|
+
p.log.success('shadcn-svelte ready');
|
|
143
191
|
}
|
|
144
192
|
|
|
145
|
-
//
|
|
146
|
-
|
|
193
|
+
// DS stylesheet for src/routes/layout.css; order-critical: tailwindcss before
|
|
194
|
+
// the tokens theme, then @source directives so Tailwind emits classes used
|
|
195
|
+
// inside the package dists. labs: false skips the labs @source for the
|
|
196
|
+
// copy-source flow where the labs npm package is not installed (a @source
|
|
197
|
+
// pointing at a missing directory breaks the build).
|
|
198
|
+
export function dsCss({ labs = true } = {}) {
|
|
147
199
|
let css = '';
|
|
148
|
-
css += '@import "@archetypeai/ds-lib-tokens/fonts.css";\n';
|
|
149
|
-
css += '@import "@archetypeai/ds-lib-tokens/theme.css";\n';
|
|
150
200
|
css += '@import "tailwindcss";\n';
|
|
151
201
|
css += '@import "tw-animate-css";\n';
|
|
202
|
+
css += '@import "@archetypeai/ds-lib-tokens/fonts.css";\n';
|
|
203
|
+
css += '@import "@archetypeai/ds-lib-tokens/theme.css";\n';
|
|
204
|
+
css += '@source "../../node_modules/@archetypeai/ds-ui-svelte-console/dist";\n';
|
|
205
|
+
if (labs) {
|
|
206
|
+
css += '@source "../../node_modules/@archetypeai/ds-ui-svelte-labs/dist";\n';
|
|
207
|
+
}
|
|
208
|
+
return css;
|
|
209
|
+
}
|
|
152
210
|
|
|
211
|
+
// configure CSS
|
|
212
|
+
export function configureCss(projectPath) {
|
|
153
213
|
const cssPath = join(projectPath, 'src/routes/layout.css');
|
|
154
|
-
writeFile(cssPath,
|
|
214
|
+
writeFile(cssPath, dsCss());
|
|
155
215
|
p.log.success('CSS configured');
|
|
156
216
|
}
|
|
157
217
|
|
|
@@ -173,7 +233,7 @@ export async function installTailwind(pm, projectPath) {
|
|
|
173
233
|
}
|
|
174
234
|
|
|
175
235
|
// prepend CSS imports to existing layout.css
|
|
176
|
-
export function prependCss(projectPath) {
|
|
236
|
+
export function prependCss(projectPath, { labs = true } = {}) {
|
|
177
237
|
const cssPath = join(projectPath, 'src/routes/layout.css');
|
|
178
238
|
|
|
179
239
|
let existing = '';
|
|
@@ -187,21 +247,26 @@ export function prependCss(projectPath) {
|
|
|
187
247
|
return;
|
|
188
248
|
}
|
|
189
249
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
250
|
+
// strip a pre-existing tailwindcss import — dsCss starts with it and Tailwind
|
|
251
|
+
// v4 chokes on duplicates
|
|
252
|
+
existing = existing
|
|
253
|
+
.split('\n')
|
|
254
|
+
.filter((line) => !/^@import\s+["']tailwindcss["'];?\s*$/.test(line))
|
|
255
|
+
.join('\n')
|
|
256
|
+
.trim();
|
|
195
257
|
|
|
196
258
|
const dir = cssPath.substring(0, cssPath.lastIndexOf('/'));
|
|
197
259
|
if (!existsSync(dir)) {
|
|
198
260
|
mkdirSync(dir, { recursive: true });
|
|
199
261
|
}
|
|
200
|
-
|
|
262
|
+
const imports = dsCss({ labs });
|
|
263
|
+
writeFileSync(cssPath, existing ? imports + '\n' + existing + '\n' : imports);
|
|
201
264
|
p.log.success('CSS configured');
|
|
202
265
|
}
|
|
203
266
|
|
|
204
|
-
// install
|
|
267
|
+
// install editable component source from the registry (modify workflow);
|
|
268
|
+
// item dependencies (console package, bits-ui, layerchart, ...) are installed
|
|
269
|
+
// by the shadcn-svelte CLI from the registry metadata
|
|
205
270
|
export async function installComponents(pm, projectPath, componentUrls) {
|
|
206
271
|
const s = p.spinner();
|
|
207
272
|
s.start(`Installing ${componentUrls.length} components`);
|
|
@@ -214,12 +279,7 @@ export async function installComponents(pm, projectPath, componentUrls) {
|
|
|
214
279
|
{ cwd: projectPath }
|
|
215
280
|
);
|
|
216
281
|
|
|
217
|
-
|
|
218
|
-
await run(
|
|
219
|
-
installCmd,
|
|
220
|
-
[...installArgs, 'tailwind-variants', 'bits-ui', '@lucide/svelte', 'layerchart', 'paneforge'],
|
|
221
|
-
{ cwd: projectPath }
|
|
222
|
-
);
|
|
282
|
+
pinLayerchart(projectPath);
|
|
223
283
|
|
|
224
284
|
s.stop(`${componentUrls.length} components installed`);
|
|
225
285
|
return true;
|
|
@@ -230,17 +290,19 @@ export async function installComponents(pm, projectPath, componentUrls) {
|
|
|
230
290
|
}
|
|
231
291
|
}
|
|
232
292
|
|
|
233
|
-
// add a demo page
|
|
293
|
+
// add a demo page composing both design system packages
|
|
234
294
|
export function createDemoPage(projectPath) {
|
|
235
295
|
const pagePath = join(projectPath, 'src/routes/+page.svelte');
|
|
236
|
-
const demoContent = `<script>
|
|
237
|
-
\timport Menubar from '
|
|
238
|
-
\timport
|
|
239
|
-
\timport
|
|
240
|
-
\timport
|
|
241
|
-
\timport
|
|
242
|
-
\timport
|
|
243
|
-
|
|
296
|
+
const demoContent = `<script lang="ts">
|
|
297
|
+
\timport Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
|
|
298
|
+
\timport Slider from '@archetypeai/ds-ui-svelte-labs/primitives/slider';
|
|
299
|
+
\timport Switch from '@archetypeai/ds-ui-svelte-labs/primitives/switch';
|
|
300
|
+
\timport * as Kbd from '@archetypeai/ds-ui-svelte-labs/primitives/kbd';
|
|
301
|
+
\timport * as Card from '@archetypeai/ds-ui-svelte-console/primitives/card';
|
|
302
|
+
\timport { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
|
|
303
|
+
|
|
304
|
+
\tlet volume = $state(35);
|
|
305
|
+
\tlet enabled = $state(true);
|
|
244
306
|
</script>
|
|
245
307
|
|
|
246
308
|
<div
|
|
@@ -251,18 +313,45 @@ export function createDemoPage(projectPath) {
|
|
|
251
313
|
\t</Menubar>
|
|
252
314
|
|
|
253
315
|
\t<main class="grid grid-cols-2 grid-rows-2 gap-4 overflow-hidden p-4">
|
|
254
|
-
\t\t<
|
|
255
|
-
\t\t\t<
|
|
256
|
-
\t\t</
|
|
257
|
-
\t\t<
|
|
258
|
-
\t\t\t
|
|
259
|
-
\t\t
|
|
260
|
-
\t\t<
|
|
261
|
-
\t\t\t<
|
|
262
|
-
\t\t</
|
|
263
|
-
\t\t
|
|
264
|
-
\t\t
|
|
265
|
-
\t\t
|
|
316
|
+
\t\t<Card.Root class="max-h-full">
|
|
317
|
+
\t\t\t<Card.Header>
|
|
318
|
+
\t\t\t\t<Card.Title>Console primitives</Card.Title>
|
|
319
|
+
\t\t\t\t<Card.Description>Stable base tier from @archetypeai/ds-ui-svelte-console</Card.Description>
|
|
320
|
+
\t\t\t</Card.Header>
|
|
321
|
+
\t\t\t<Card.Content class="flex items-center gap-4">
|
|
322
|
+
\t\t\t\t<Button>Primary</Button>
|
|
323
|
+
\t\t\t\t<Button variant="outline">Outline</Button>
|
|
324
|
+
\t\t\t</Card.Content>
|
|
325
|
+
\t\t</Card.Root>
|
|
326
|
+
\t\t<Card.Root class="max-h-full">
|
|
327
|
+
\t\t\t<Card.Header>
|
|
328
|
+
\t\t\t\t<Card.Title>Slider</Card.Title>
|
|
329
|
+
\t\t\t\t<Card.Description>Labs tier from @archetypeai/ds-ui-svelte-labs</Card.Description>
|
|
330
|
+
\t\t\t</Card.Header>
|
|
331
|
+
\t\t\t<Card.Content>
|
|
332
|
+
\t\t\t\t<Slider type="single" bind:value={volume} max={100} step={1} aria-label="Volume" />
|
|
333
|
+
\t\t\t</Card.Content>
|
|
334
|
+
\t\t</Card.Root>
|
|
335
|
+
\t\t<Card.Root class="max-h-full">
|
|
336
|
+
\t\t\t<Card.Header>
|
|
337
|
+
\t\t\t\t<Card.Title>Switch</Card.Title>
|
|
338
|
+
\t\t\t</Card.Header>
|
|
339
|
+
\t\t\t<Card.Content class="flex items-center gap-4">
|
|
340
|
+
\t\t\t\t<Switch bind:checked={enabled} aria-label="Enabled" />
|
|
341
|
+
\t\t\t\t<span class="text-muted-foreground text-sm">{enabled ? 'On' : 'Off'}</span>
|
|
342
|
+
\t\t\t</Card.Content>
|
|
343
|
+
\t\t</Card.Root>
|
|
344
|
+
\t\t<Card.Root class="max-h-full">
|
|
345
|
+
\t\t\t<Card.Header>
|
|
346
|
+
\t\t\t\t<Card.Title>Keyboard</Card.Title>
|
|
347
|
+
\t\t\t</Card.Header>
|
|
348
|
+
\t\t\t<Card.Content>
|
|
349
|
+
\t\t\t\t<Kbd.Group>
|
|
350
|
+
\t\t\t\t\t<Kbd.Root>⌘</Kbd.Root>
|
|
351
|
+
\t\t\t\t\t<Kbd.Root>K</Kbd.Root>
|
|
352
|
+
\t\t\t\t</Kbd.Group>
|
|
353
|
+
\t\t\t</Card.Content>
|
|
354
|
+
\t\t</Card.Root>
|
|
266
355
|
\t</main>
|
|
267
356
|
</div>
|
|
268
357
|
`;
|
|
@@ -282,6 +371,9 @@ export async function installLinting(pm, projectPath) {
|
|
|
282
371
|
[
|
|
283
372
|
...baseArgs,
|
|
284
373
|
'-D',
|
|
374
|
+
// SvelteKit's generated tsconfig sets types: ["node"]; without this
|
|
375
|
+
// svelte-check warns on a fresh scaffold
|
|
376
|
+
'@types/node',
|
|
285
377
|
'@eslint/js',
|
|
286
378
|
'eslint',
|
|
287
379
|
'prettier',
|
|
@@ -289,7 +381,8 @@ export async function installLinting(pm, projectPath) {
|
|
|
289
381
|
'eslint-config-prettier',
|
|
290
382
|
'prettier-plugin-svelte',
|
|
291
383
|
'prettier-plugin-tailwindcss',
|
|
292
|
-
'globals'
|
|
384
|
+
'globals',
|
|
385
|
+
'typescript-eslint'
|
|
293
386
|
],
|
|
294
387
|
{ cwd: projectPath }
|
|
295
388
|
);
|
|
@@ -311,10 +404,11 @@ export async function installLinting(pm, projectPath) {
|
|
|
311
404
|
`import js from '@eslint/js';
|
|
312
405
|
import svelte from 'eslint-plugin-svelte';
|
|
313
406
|
import globals from 'globals';
|
|
314
|
-
import
|
|
407
|
+
import ts from 'typescript-eslint';
|
|
315
408
|
|
|
316
|
-
export default
|
|
409
|
+
export default ts.config(
|
|
317
410
|
\tjs.configs.recommended,
|
|
411
|
+
\t...ts.configs.recommended,
|
|
318
412
|
\t...svelte.configs.recommended,
|
|
319
413
|
\t...svelte.configs['flat/prettier'],
|
|
320
414
|
\t{
|
|
@@ -323,15 +417,20 @@ export default [
|
|
|
323
417
|
\t\t}
|
|
324
418
|
\t},
|
|
325
419
|
\t{
|
|
326
|
-
\t\tfiles: ['**/*.svelte', '**/*.svelte.js'],
|
|
420
|
+
\t\tfiles: ['**/*.svelte', '**/*.svelte.js', '**/*.svelte.ts'],
|
|
327
421
|
\t\tlanguageOptions: {
|
|
328
|
-
\t\t\tparserOptions: {
|
|
422
|
+
\t\t\tparserOptions: { parser: ts.parser }
|
|
329
423
|
\t\t}
|
|
330
424
|
\t},
|
|
331
425
|
\t{
|
|
426
|
+
\t\t// registry components use plain hrefs by design
|
|
427
|
+
\t\tfiles: ['src/lib/components/**'],
|
|
428
|
+
\t\trules: { 'svelte/no-navigation-without-resolve': 'off' }
|
|
429
|
+
\t},
|
|
430
|
+
\t{
|
|
332
431
|
\t\tignores: ['.svelte-kit/', 'build/', 'dist/', 'node_modules/']
|
|
333
432
|
\t}
|
|
334
|
-
|
|
433
|
+
);
|
|
335
434
|
`
|
|
336
435
|
);
|
|
337
436
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { validateRegistryUrl } from './validate-url.js';
|
|
2
|
+
import { LABS_REGISTRY_URL } from './registries.js';
|
|
2
3
|
|
|
3
4
|
// override with REGISTRY_URL env var for testing or private registries
|
|
4
|
-
const
|
|
5
|
-
const ALL_COMPONENTS_URL = `${REGISTRY_URL}/r/all.json`;
|
|
5
|
+
const ALL_COMPONENTS_URL = `${LABS_REGISTRY_URL}/r/all.json`;
|
|
6
6
|
|
|
7
7
|
// fetch components via shadcn-svelte registry from all.json endpoint
|
|
8
8
|
export async function fetchComponents() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@archetypeai/ds-cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Archetype AI Design System CLI Tool",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@clack/prompts": "^0.10.0"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
|
-
"build": "rm -rf dist && mkdir -p dist/commands dist/lib dist/files && cp bin.js package.json ../LICENSE dist/ && cp commands/*.js dist/commands/ && cp lib/*.js dist/lib/ && cp -r ../ds-config-codeagent/
|
|
24
|
+
"build": "rm -rf dist && mkdir -p dist/commands dist/lib dist/files && cp bin.js package.json ../LICENSE dist/ && cp commands/*.js dist/commands/ && cp lib/*.js dist/lib/ && cp -r ../ds-config-codeagent/labs/AGENTS.md ../ds-config-codeagent/labs/CLAUDE.md ../ds-config-codeagent/labs/ds-manifest.json dist/files/ && cp -r ../ds-config-codeagent/labs/skills ../ds-config-codeagent/labs/rules dist/files/ && cp ../LICENSE dist/files/ && chmod +x dist/bin.js && cp ../docs/DS-CLI.md dist/README.md"
|
|
25
25
|
},
|
|
26
26
|
"repository": {
|
|
27
27
|
"type": "git",
|