@fragments-sdk/cli 0.14.3 → 0.15.1

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 (181) hide show
  1. package/README.md +0 -3
  2. package/dist/{ai-client-I6MDWNYA.js → ai-client-LSLQGOMM.js} +1 -2
  3. package/dist/bin.js +4745 -3817
  4. package/dist/bin.js.map +1 -1
  5. package/dist/{chunk-TXFCEDOC.js → chunk-2WXKALIG.js} +2 -2
  6. package/dist/{chunk-I34BC3CU.js → chunk-32LIWN2P.js} +1006 -3
  7. package/dist/chunk-32LIWN2P.js.map +1 -0
  8. package/dist/chunk-5JF26E55.js +1255 -0
  9. package/dist/chunk-5JF26E55.js.map +1 -0
  10. package/dist/{chunk-APTQIBS5.js → chunk-6SQPP47U.js} +153 -1342
  11. package/dist/chunk-6SQPP47U.js.map +1 -0
  12. package/dist/chunk-7DZC4YEV.js +294 -0
  13. package/dist/chunk-7DZC4YEV.js.map +1 -0
  14. package/dist/{chunk-PJT5IZ37.js → chunk-BJE3425I.js} +19 -52
  15. package/dist/{chunk-PJT5IZ37.js.map → chunk-BJE3425I.js.map} +1 -1
  16. package/dist/{chunk-55KERLWL.js → chunk-HQ6A6DTV.js} +1587 -1073
  17. package/dist/chunk-HQ6A6DTV.js.map +1 -0
  18. package/dist/chunk-MHIBEEW4.js +511 -0
  19. package/dist/chunk-MHIBEEW4.js.map +1 -0
  20. package/dist/{chunk-5A6X2Y73.js → chunk-ONUP6Z4W.js} +25 -13
  21. package/dist/chunk-ONUP6Z4W.js.map +1 -0
  22. package/dist/chunk-QCN35LJU.js +630 -0
  23. package/dist/chunk-QCN35LJU.js.map +1 -0
  24. package/dist/chunk-T47OLCSF.js +36 -0
  25. package/dist/chunk-T47OLCSF.js.map +1 -0
  26. package/dist/codebase-scanner-MQHUZC2G.js +21 -0
  27. package/dist/converter-7XM3Y6NJ.js +33 -0
  28. package/dist/converter-7XM3Y6NJ.js.map +1 -0
  29. package/dist/core/index.js +43 -2
  30. package/dist/create-IH4R45GE.js +806 -0
  31. package/dist/create-IH4R45GE.js.map +1 -0
  32. package/dist/{generate-RYWIPDN2.js → generate-PVOLUAAC.js} +4 -6
  33. package/dist/{generate-RYWIPDN2.js.map → generate-PVOLUAAC.js.map} +1 -1
  34. package/dist/govern-scan-OYFZYOQW.js +413 -0
  35. package/dist/govern-scan-OYFZYOQW.js.map +1 -0
  36. package/dist/index.d.ts +4 -23
  37. package/dist/index.js +15 -14
  38. package/dist/index.js.map +1 -1
  39. package/dist/{init-WRUSW7R5.js → init-SSGUSP7Z.js} +131 -129
  40. package/dist/init-SSGUSP7Z.js.map +1 -0
  41. package/dist/{init-cloud-REQ3XLHO.js → init-cloud-3DNKPWFB.js} +30 -5
  42. package/dist/{init-cloud-REQ3XLHO.js.map → init-cloud-3DNKPWFB.js.map} +1 -1
  43. package/dist/mcp-bin.js +5 -37
  44. package/dist/mcp-bin.js.map +1 -1
  45. package/dist/node-37AUE74M.js +65 -0
  46. package/dist/push-contracts-WY32TFP6.js +84 -0
  47. package/dist/push-contracts-WY32TFP6.js.map +1 -0
  48. package/dist/scan-PKSYSTRR.js +15 -0
  49. package/dist/{scan-generate-TFZVL3BT.js → scan-generate-VY27PIOX.js} +340 -52
  50. package/dist/scan-generate-VY27PIOX.js.map +1 -0
  51. package/dist/scanner-4KZNOXAK.js +12 -0
  52. package/dist/{service-HKJ6B7P7.js → service-QJGWUIVL.js} +41 -30
  53. package/dist/{snapshot-C5DYIGIV.js → snapshot-WIJMEIFT.js} +2 -3
  54. package/dist/{snapshot-C5DYIGIV.js.map → snapshot-WIJMEIFT.js.map} +1 -1
  55. package/dist/{static-viewer-DUVC4UIM.js → static-viewer-7QIBQZRC.js} +3 -4
  56. package/dist/static-viewer-7QIBQZRC.js.map +1 -0
  57. package/dist/{test-JW7JIDFG.js → test-64Z5BKBA.js} +4 -7
  58. package/dist/{test-JW7JIDFG.js.map → test-64Z5BKBA.js.map} +1 -1
  59. package/dist/token-normalizer-TEPOVBPV.js +312 -0
  60. package/dist/token-normalizer-TEPOVBPV.js.map +1 -0
  61. package/dist/token-parser-32KOIOFN.js +22 -0
  62. package/dist/token-parser-32KOIOFN.js.map +1 -0
  63. package/dist/{tokens-KE73G5JC.js → tokens-NZWFQIAB.js} +10 -9
  64. package/dist/{tokens-KE73G5JC.js.map → tokens-NZWFQIAB.js.map} +1 -1
  65. package/dist/tokens-generate-5JQSJ27E.js +85 -0
  66. package/dist/tokens-generate-5JQSJ27E.js.map +1 -0
  67. package/dist/tokens-push-HY3KO36V.js +148 -0
  68. package/dist/tokens-push-HY3KO36V.js.map +1 -0
  69. package/package.json +8 -6
  70. package/src/bin.ts +300 -48
  71. package/src/commands/__fixtures__/shadcn-label-wrapper/package.json +7 -0
  72. package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/label.contract.json +42 -0
  73. package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/label.tsx +11 -0
  74. package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/primitive.contract.json +20 -0
  75. package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/primitive.tsx +14 -0
  76. package/src/commands/__fixtures__/shadcn-label-wrapper/tsconfig.app.json +23 -0
  77. package/src/commands/__tests__/build-freshness.test.ts +231 -0
  78. package/src/commands/__tests__/create.test.ts +71 -0
  79. package/src/commands/__tests__/drift-sync.test.ts +1 -1
  80. package/src/commands/__tests__/govern.test.ts +258 -0
  81. package/src/commands/__tests__/init.test.ts +113 -0
  82. package/src/commands/__tests__/scan-generate.test.ts +189 -70
  83. package/src/commands/__tests__/verify.test.ts +91 -0
  84. package/src/commands/build.ts +54 -1
  85. package/src/commands/context.ts +1 -1
  86. package/src/commands/create.ts +536 -0
  87. package/src/commands/discover.ts +151 -0
  88. package/src/commands/doctor.ts +3 -2
  89. package/src/commands/enhance.ts +3 -1
  90. package/src/commands/govern-scan.ts +565 -0
  91. package/src/commands/govern.ts +67 -4
  92. package/src/commands/init-cloud.ts +32 -4
  93. package/src/commands/init.ts +152 -28
  94. package/src/commands/inspect.ts +290 -0
  95. package/src/commands/migrate-contract.ts +85 -0
  96. package/src/commands/push-contracts.ts +112 -0
  97. package/src/commands/scan-generate.ts +439 -51
  98. package/src/commands/scan.ts +14 -0
  99. package/src/commands/setup.ts +27 -50
  100. package/src/commands/sync.ts +2 -2
  101. package/src/commands/tokens-generate.ts +113 -0
  102. package/src/commands/tokens-push.ts +199 -0
  103. package/src/commands/verify.ts +195 -1
  104. package/src/core/__fixtures__/shadcn-input/input.tsx +7 -0
  105. package/src/core/__fixtures__/shadcn-input/tsconfig.json +14 -0
  106. package/src/core/__fixtures__/shadcn-label/label.tsx +11 -0
  107. package/src/core/__fixtures__/shadcn-label/primitive.tsx +14 -0
  108. package/src/core/__fixtures__/shadcn-label/tsconfig.json +14 -0
  109. package/src/core/__fixtures__/shadcn-radix-label/label.tsx +11 -0
  110. package/src/core/__fixtures__/shadcn-radix-label/node_modules/radix-ui/index.d.ts +12 -0
  111. package/src/core/__fixtures__/shadcn-radix-label/tsconfig.json +14 -0
  112. package/src/core/__tests__/contract-parity.test.ts +316 -0
  113. package/src/core/__tests__/token-resolver.test.ts +1 -1
  114. package/src/core/component-extractor.test.ts +40 -1
  115. package/src/core/config.ts +2 -1
  116. package/src/core/discovery.ts +13 -2
  117. package/src/core/drift-verifier.ts +123 -0
  118. package/src/core/extractor-adapter.ts +80 -0
  119. package/src/index.ts +3 -3
  120. package/src/mcp/__tests__/projectFields.test.ts +1 -1
  121. package/src/mcp/utils.ts +1 -50
  122. package/src/migrate/converter.ts +3 -3
  123. package/src/migrate/fragment-to-contract.ts +253 -0
  124. package/src/migrate/report.ts +1 -1
  125. package/src/scripts/token-benchmark.ts +121 -0
  126. package/src/service/__tests__/props-extractor.test.ts +94 -0
  127. package/src/service/__tests__/token-normalizer.test.ts +690 -0
  128. package/src/service/ast-utils.ts +4 -23
  129. package/src/service/babel-config.ts +23 -0
  130. package/src/service/enhance/converter.ts +61 -0
  131. package/src/service/enhance/props-extractor.ts +25 -8
  132. package/src/service/enhance/scanner.ts +5 -24
  133. package/src/service/index.ts +8 -0
  134. package/src/service/snippet-validation.ts +9 -3
  135. package/src/service/tailwind-v4-parser.ts +314 -0
  136. package/src/service/token-normalizer.ts +510 -0
  137. package/src/service/token-parser.ts +56 -0
  138. package/src/setup.ts +10 -39
  139. package/src/shared/index.ts +1 -0
  140. package/src/shared/project-fields.ts +46 -0
  141. package/src/theme/__tests__/component-contrast.test.ts +2 -2
  142. package/src/theme/__tests__/serializer.test.ts +1 -1
  143. package/src/theme/generator.ts +16 -1
  144. package/src/theme/schema.ts +8 -0
  145. package/src/theme/serializer.ts +13 -9
  146. package/src/theme/types.ts +8 -0
  147. package/src/validators.ts +1 -2
  148. package/src/viewer/__tests__/viewer-integration.test.ts +8 -8
  149. package/src/viewer/style-utils.ts +27 -412
  150. package/src/viewer/vite-plugin.ts +2 -2
  151. package/dist/chunk-55KERLWL.js.map +0 -1
  152. package/dist/chunk-5A6X2Y73.js.map +0 -1
  153. package/dist/chunk-APTQIBS5.js.map +0 -1
  154. package/dist/chunk-EYXVAMEX.js +0 -626
  155. package/dist/chunk-EYXVAMEX.js.map +0 -1
  156. package/dist/chunk-I34BC3CU.js.map +0 -1
  157. package/dist/chunk-LOYS64QS.js +0 -2453
  158. package/dist/chunk-LOYS64QS.js.map +0 -1
  159. package/dist/chunk-Z7EY4VHE.js +0 -50
  160. package/dist/chunk-ZKTFKHWN.js +0 -324
  161. package/dist/chunk-ZKTFKHWN.js.map +0 -1
  162. package/dist/discovery-VDANZAJ2.js +0 -28
  163. package/dist/init-WRUSW7R5.js.map +0 -1
  164. package/dist/sass.node-4XJK6YBF.js +0 -130708
  165. package/dist/sass.node-4XJK6YBF.js.map +0 -1
  166. package/dist/scan-YJHQIRKG.js +0 -14
  167. package/dist/scan-generate-TFZVL3BT.js.map +0 -1
  168. package/dist/viewer-2TZS3NDL.js +0 -2730
  169. package/dist/viewer-2TZS3NDL.js.map +0 -1
  170. package/src/build.ts +0 -612
  171. package/src/commands/dev.ts +0 -107
  172. package/src/core/auto-props.ts +0 -464
  173. package/src/core/component-extractor.ts +0 -1030
  174. package/src/core/token-resolver.ts +0 -155
  175. /package/dist/{ai-client-I6MDWNYA.js.map → ai-client-LSLQGOMM.js.map} +0 -0
  176. /package/dist/{chunk-TXFCEDOC.js.map → chunk-2WXKALIG.js.map} +0 -0
  177. /package/dist/{chunk-Z7EY4VHE.js.map → codebase-scanner-MQHUZC2G.js.map} +0 -0
  178. /package/dist/{discovery-VDANZAJ2.js.map → node-37AUE74M.js.map} +0 -0
  179. /package/dist/{scan-YJHQIRKG.js.map → scan-PKSYSTRR.js.map} +0 -0
  180. /package/dist/{service-HKJ6B7P7.js.map → scanner-4KZNOXAK.js.map} +0 -0
  181. /package/dist/{static-viewer-DUVC4UIM.js.map → service-QJGWUIVL.js.map} +0 -0
@@ -0,0 +1,806 @@
1
+ import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
2
+ import "./chunk-D2CDBRNU.js";
3
+ import {
4
+ BRAND
5
+ } from "./chunk-32LIWN2P.js";
6
+
7
+ // src/commands/create.ts
8
+ import { execSync } from "child_process";
9
+ import { existsSync, mkdirSync, writeFileSync, readFileSync, unlinkSync } from "fs";
10
+ import { join as join2, resolve } from "path";
11
+ import pc from "picocolors";
12
+
13
+ // src/theme/serializer.ts
14
+ import { deflateSync, inflateSync } from "zlib";
15
+
16
+ // src/theme/schema.ts
17
+ import { z } from "zod";
18
+ var HEX_COLOR_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
19
+ var RGB_COLOR_REGEX = /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*(0|1|0?\.\d+))?\s*\)$/;
20
+ var HSL_COLOR_REGEX = /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*(0|1|0?\.\d+))?\s*\)$/;
21
+ var colorSchema = z.string().refine(
22
+ (val) => {
23
+ return HEX_COLOR_REGEX.test(val) || RGB_COLOR_REGEX.test(val) || HSL_COLOR_REGEX.test(val);
24
+ },
25
+ { message: "Invalid color format. Use hex (#rrggbb), rgb(), rgba(), hsl(), or hsla()" }
26
+ );
27
+ var sizeSchema = z.string().refine(
28
+ (val) => {
29
+ return /^-?\d*\.?\d+(px|rem|em|%|vw|vh)?$/.test(val);
30
+ },
31
+ { message: "Invalid size format. Use px, rem, em, %, vw, or vh" }
32
+ );
33
+ var shadowSchema = z.string();
34
+ var fontStackSchema = z.string();
35
+ var fontWeightSchema = z.number().int().min(100).max(900);
36
+ var themeColorsSchema = z.object({
37
+ accent: colorSchema.optional(),
38
+ accentHover: colorSchema.optional(),
39
+ accentActive: colorSchema.optional(),
40
+ danger: colorSchema.optional(),
41
+ dangerHover: colorSchema.optional(),
42
+ success: colorSchema.optional(),
43
+ warning: colorSchema.optional(),
44
+ info: colorSchema.optional(),
45
+ dangerBg: colorSchema.optional(),
46
+ successBg: colorSchema.optional(),
47
+ warningBg: colorSchema.optional(),
48
+ infoBg: colorSchema.optional()
49
+ }).strict();
50
+ var themeSurfacesSchema = z.object({
51
+ bgPrimary: colorSchema.optional(),
52
+ bgSecondary: colorSchema.optional(),
53
+ bgTertiary: colorSchema.optional(),
54
+ bgElevated: colorSchema.optional(),
55
+ bgHover: colorSchema.optional(),
56
+ bgActive: colorSchema.optional()
57
+ }).strict();
58
+ var themeTextSchema = z.object({
59
+ primary: colorSchema.optional(),
60
+ secondary: colorSchema.optional(),
61
+ tertiary: colorSchema.optional(),
62
+ inverse: colorSchema.optional()
63
+ }).strict();
64
+ var themeBordersSchema = z.object({
65
+ default: colorSchema.optional(),
66
+ strong: colorSchema.optional()
67
+ }).strict();
68
+ var themeTypographySchema = z.object({
69
+ fontSans: fontStackSchema.optional(),
70
+ fontMono: fontStackSchema.optional(),
71
+ fontWeightNormal: fontWeightSchema.optional(),
72
+ fontWeightMedium: fontWeightSchema.optional(),
73
+ fontWeightSemibold: fontWeightSchema.optional()
74
+ }).strict();
75
+ var themeRadiusSchema = z.object({
76
+ sm: sizeSchema.optional(),
77
+ md: sizeSchema.optional(),
78
+ lg: sizeSchema.optional(),
79
+ full: sizeSchema.optional()
80
+ }).strict();
81
+ var themeShadowsSchema = z.object({
82
+ sm: shadowSchema.optional(),
83
+ md: shadowSchema.optional()
84
+ }).strict();
85
+ var themeDarkModeSchema = z.object({
86
+ surfaces: themeSurfacesSchema.optional(),
87
+ text: themeTextSchema.optional(),
88
+ borders: themeBordersSchema.optional(),
89
+ shadows: themeShadowsSchema.optional(),
90
+ accent: colorSchema.optional(),
91
+ accentHover: colorSchema.optional(),
92
+ accentActive: colorSchema.optional(),
93
+ dangerBg: colorSchema.optional(),
94
+ successBg: colorSchema.optional(),
95
+ warningBg: colorSchema.optional(),
96
+ infoBg: colorSchema.optional(),
97
+ backdrop: colorSchema.optional(),
98
+ dangerText: colorSchema.optional(),
99
+ successText: colorSchema.optional(),
100
+ warningText: colorSchema.optional(),
101
+ infoText: colorSchema.optional()
102
+ }).strict();
103
+ var themeConfigSchema = z.object({
104
+ name: z.string().min(1, "Theme name is required"),
105
+ version: z.string().optional(),
106
+ extends: z.string().optional(),
107
+ colors: themeColorsSchema.optional(),
108
+ surfaces: themeSurfacesSchema.optional(),
109
+ text: themeTextSchema.optional(),
110
+ borders: themeBordersSchema.optional(),
111
+ typography: themeTypographySchema.optional(),
112
+ radius: themeRadiusSchema.optional(),
113
+ shadows: themeShadowsSchema.optional(),
114
+ dark: themeDarkModeSchema.optional(),
115
+ density: z.enum(["compact", "default", "relaxed"]).optional()
116
+ }).strict();
117
+ function validateThemeConfig(config) {
118
+ const result = themeConfigSchema.safeParse(config);
119
+ if (result.success) {
120
+ return { success: true, data: result.data };
121
+ }
122
+ return { success: false, error: result.error };
123
+ }
124
+
125
+ // src/theme/serializer.ts
126
+ function fromBase64Url(str) {
127
+ let base64 = str.replace(/-/g, "+").replace(/_/g, "/");
128
+ const pad = base64.length % 4;
129
+ if (pad) {
130
+ base64 += "=".repeat(4 - pad);
131
+ }
132
+ return Buffer.from(base64, "base64");
133
+ }
134
+ function decompressTheme(encoded) {
135
+ try {
136
+ const buffer = fromBase64Url(encoded);
137
+ const decompressed = inflateSync(buffer);
138
+ const json = decompressed.toString("utf-8");
139
+ const parsed = JSON.parse(json);
140
+ const result = validateThemeConfig(parsed);
141
+ if (result.success) return result.data;
142
+ } catch {
143
+ }
144
+ try {
145
+ const buffer = fromBase64Url(encoded);
146
+ const json = buffer.toString("utf-8");
147
+ const parsed = JSON.parse(json);
148
+ const result = validateThemeConfig(parsed);
149
+ if (result.success) return result.data;
150
+ } catch {
151
+ }
152
+ return null;
153
+ }
154
+
155
+ // src/theme/generator.ts
156
+ import { mkdir, writeFile } from "fs/promises";
157
+ import { join } from "path";
158
+ var TOKEN_MAPPINGS = {
159
+ colors: {
160
+ accent: "fui-color-accent",
161
+ accentHover: "fui-color-accent-hover",
162
+ accentActive: "fui-color-accent-active",
163
+ danger: "fui-color-danger",
164
+ dangerHover: "fui-color-danger-hover",
165
+ success: "fui-color-success",
166
+ warning: "fui-color-warning",
167
+ info: "fui-color-info",
168
+ dangerBg: "fui-color-danger-bg",
169
+ successBg: "fui-color-success-bg",
170
+ warningBg: "fui-color-warning-bg",
171
+ infoBg: "fui-color-info-bg",
172
+ dangerText: "fui-color-danger-text",
173
+ successText: "fui-color-success-text",
174
+ warningText: "fui-color-warning-text",
175
+ infoText: "fui-color-info-text"
176
+ },
177
+ surfaces: {
178
+ bgPrimary: "fui-bg-primary",
179
+ bgSecondary: "fui-bg-secondary",
180
+ bgTertiary: "fui-bg-tertiary",
181
+ bgElevated: "fui-bg-elevated",
182
+ bgHover: "fui-bg-hover",
183
+ bgActive: "fui-bg-active"
184
+ },
185
+ text: {
186
+ primary: "fui-text-primary",
187
+ secondary: "fui-text-secondary",
188
+ tertiary: "fui-text-tertiary",
189
+ inverse: "fui-text-inverse"
190
+ },
191
+ borders: {
192
+ default: "fui-border",
193
+ strong: "fui-border-strong"
194
+ },
195
+ typography: {
196
+ fontSans: "fui-font-sans",
197
+ fontMono: "fui-font-mono",
198
+ fontWeightNormal: "fui-font-weight-normal",
199
+ fontWeightMedium: "fui-font-weight-medium",
200
+ fontWeightSemibold: "fui-font-weight-semibold"
201
+ },
202
+ radius: {
203
+ sm: "fui-radius-sm",
204
+ md: "fui-radius-md",
205
+ lg: "fui-radius-lg",
206
+ full: "fui-radius-full"
207
+ },
208
+ shadows: {
209
+ sm: "fui-shadow-sm",
210
+ md: "fui-shadow-md"
211
+ }
212
+ };
213
+ var DARK_TOKEN_MAPPINGS = {
214
+ surfaces: {
215
+ bgPrimary: "fui-dark-bg-primary",
216
+ bgSecondary: "fui-dark-bg-secondary",
217
+ bgTertiary: "fui-dark-bg-tertiary",
218
+ bgElevated: "fui-dark-bg-elevated",
219
+ bgHover: "fui-dark-bg-hover",
220
+ bgActive: "fui-dark-bg-active"
221
+ },
222
+ text: {
223
+ primary: "fui-dark-text-primary",
224
+ secondary: "fui-dark-text-secondary",
225
+ tertiary: "fui-dark-text-tertiary",
226
+ inverse: "fui-dark-text-inverse"
227
+ },
228
+ borders: {
229
+ default: "fui-dark-border",
230
+ strong: "fui-dark-border-strong"
231
+ },
232
+ shadows: {
233
+ sm: "fui-dark-shadow-sm",
234
+ md: "fui-dark-shadow-md"
235
+ },
236
+ // Direct dark mode properties
237
+ accent: "fui-dark-color-accent",
238
+ accentHover: "fui-dark-color-accent-hover",
239
+ accentActive: "fui-dark-color-accent-active",
240
+ dangerBg: "fui-dark-color-danger-bg",
241
+ successBg: "fui-dark-color-success-bg",
242
+ warningBg: "fui-dark-color-warning-bg",
243
+ infoBg: "fui-dark-color-info-bg",
244
+ dangerText: "fui-dark-color-danger-text",
245
+ successText: "fui-dark-color-success-text",
246
+ warningText: "fui-dark-color-warning-text",
247
+ infoText: "fui-dark-color-info-text",
248
+ backdrop: "fui-dark-backdrop"
249
+ };
250
+ function generateCategoryTokens(config, categoryKey, format) {
251
+ const category = config[categoryKey];
252
+ if (!category) return [];
253
+ const mappings = TOKEN_MAPPINGS[categoryKey];
254
+ const tokens = [];
255
+ for (const [key, varName] of Object.entries(mappings)) {
256
+ const value = category[key];
257
+ if (value !== void 0) {
258
+ if (format === "scss") {
259
+ tokens.push(`$${varName}: ${value} !default;`);
260
+ } else {
261
+ tokens.push(` --${varName}: ${value};`);
262
+ }
263
+ }
264
+ }
265
+ return tokens;
266
+ }
267
+ function generateDarkTokens(config, format) {
268
+ if (!config.dark) return [];
269
+ const tokens = [];
270
+ const nestedCategories = ["surfaces", "text", "borders", "shadows"];
271
+ for (const category of nestedCategories) {
272
+ const categoryData = config.dark[category];
273
+ if (!categoryData) continue;
274
+ const mappings = DARK_TOKEN_MAPPINGS[category];
275
+ for (const [key, varName] of Object.entries(mappings)) {
276
+ const value = categoryData[key];
277
+ if (value !== void 0) {
278
+ if (format === "scss") {
279
+ tokens.push(`$${varName}: ${value} !default;`);
280
+ } else {
281
+ tokens.push(` --${varName.replace("fui-dark-", "fui-")}: ${value};`);
282
+ }
283
+ }
284
+ }
285
+ }
286
+ const directProps = ["accent", "accentHover", "accentActive", "dangerBg", "successBg", "warningBg", "infoBg", "dangerText", "successText", "warningText", "infoText", "backdrop"];
287
+ for (const prop of directProps) {
288
+ const value = config.dark[prop];
289
+ if (value !== void 0) {
290
+ const varName = DARK_TOKEN_MAPPINGS[prop];
291
+ if (format === "scss") {
292
+ tokens.push(`$${varName}: ${value} !default;`);
293
+ } else {
294
+ const cssVarName = varName.replace("fui-dark-color-", "fui-color-").replace("fui-dark-", "fui-");
295
+ tokens.push(` --${cssVarName}: ${value};`);
296
+ }
297
+ }
298
+ }
299
+ return tokens;
300
+ }
301
+ function generateScssTokens(config) {
302
+ const lines = [];
303
+ lines.push("// Auto-generated by @fragments-sdk/cli");
304
+ lines.push(`// Theme: ${config.name}`);
305
+ if (config.version) {
306
+ lines.push(`// Version: ${config.version}`);
307
+ }
308
+ lines.push("");
309
+ const colorTokens = generateCategoryTokens(config, "colors", "scss");
310
+ if (colorTokens.length > 0) {
311
+ lines.push("// Colors");
312
+ lines.push(...colorTokens);
313
+ lines.push("");
314
+ }
315
+ const surfaceTokens = generateCategoryTokens(config, "surfaces", "scss");
316
+ if (surfaceTokens.length > 0) {
317
+ lines.push("// Surfaces");
318
+ lines.push(...surfaceTokens);
319
+ lines.push("");
320
+ }
321
+ const textTokens = generateCategoryTokens(config, "text", "scss");
322
+ if (textTokens.length > 0) {
323
+ lines.push("// Text");
324
+ lines.push(...textTokens);
325
+ lines.push("");
326
+ }
327
+ const borderTokens = generateCategoryTokens(config, "borders", "scss");
328
+ if (borderTokens.length > 0) {
329
+ lines.push("// Borders");
330
+ lines.push(...borderTokens);
331
+ lines.push("");
332
+ }
333
+ const typographyTokens = generateCategoryTokens(config, "typography", "scss");
334
+ if (typographyTokens.length > 0) {
335
+ lines.push("// Typography");
336
+ lines.push(...typographyTokens);
337
+ lines.push("");
338
+ }
339
+ const radiusTokens = generateCategoryTokens(config, "radius", "scss");
340
+ if (radiusTokens.length > 0) {
341
+ lines.push("// Border Radius");
342
+ lines.push(...radiusTokens);
343
+ lines.push("");
344
+ }
345
+ const shadowTokens = generateCategoryTokens(config, "shadows", "scss");
346
+ if (shadowTokens.length > 0) {
347
+ lines.push("// Shadows");
348
+ lines.push(...shadowTokens);
349
+ lines.push("");
350
+ }
351
+ if (config.density) {
352
+ lines.push("// Density");
353
+ lines.push(`$fui-density: "${config.density}" !default;`);
354
+ lines.push("");
355
+ }
356
+ const darkTokens = generateDarkTokens(config, "scss");
357
+ if (darkTokens.length > 0) {
358
+ lines.push("// Dark Mode");
359
+ lines.push(...darkTokens);
360
+ lines.push("");
361
+ }
362
+ return lines.join("\n");
363
+ }
364
+ function generateCssTokens(config) {
365
+ const lines = [];
366
+ lines.push("/* Auto-generated by @fragments-sdk/cli */");
367
+ lines.push(`/* Theme: ${config.name} */`);
368
+ if (config.version) {
369
+ lines.push(`/* Version: ${config.version} */`);
370
+ }
371
+ lines.push("");
372
+ const lightTokens = [];
373
+ const categories = ["colors", "surfaces", "text", "borders", "typography", "radius", "shadows"];
374
+ for (const category of categories) {
375
+ const tokens = generateCategoryTokens(config, category, "css");
376
+ lightTokens.push(...tokens);
377
+ }
378
+ if (config.density) {
379
+ lightTokens.push(` --fui-density: ${config.density};`);
380
+ }
381
+ if (lightTokens.length > 0) {
382
+ lines.push(":root {");
383
+ lines.push(...lightTokens);
384
+ lines.push("}");
385
+ lines.push("");
386
+ }
387
+ const darkTokens = generateDarkTokens(config, "css");
388
+ if (darkTokens.length > 0) {
389
+ lines.push(":root.dark,");
390
+ lines.push(':root[data-theme="dark"] {');
391
+ lines.push(...darkTokens);
392
+ lines.push("}");
393
+ lines.push("");
394
+ }
395
+ return lines.join("\n");
396
+ }
397
+
398
+ // src/commands/create.ts
399
+ function detectPackageManager() {
400
+ const agent = process.env.npm_config_user_agent || "";
401
+ if (agent.startsWith("pnpm")) return "pnpm";
402
+ if (agent.startsWith("yarn")) return "yarn";
403
+ if (agent.startsWith("bun")) return "bun";
404
+ return "npm";
405
+ }
406
+ function getInstallCommand(pm) {
407
+ return pm === "yarn" ? "yarn add" : `${pm} add`;
408
+ }
409
+ function getDevInstallCommand(pm) {
410
+ return pm === "yarn" ? "yarn add -D" : `${pm} add -D`;
411
+ }
412
+ function getRunCommand(pm) {
413
+ return pm === "npm" ? "npm run" : pm;
414
+ }
415
+ function isValidProjectName(name) {
416
+ return /^[a-z0-9][a-z0-9._-]*$/.test(name);
417
+ }
418
+ var PRESET_API_URL = "https://canny-otter-874.convex.site/api/theme-presets";
419
+ async function fetchPreset(presetId) {
420
+ try {
421
+ const res = await fetch(`${PRESET_API_URL}?id=${encodeURIComponent(presetId)}`);
422
+ if (!res.ok) return null;
423
+ const theme = await res.json();
424
+ if (!theme || !theme.name) return null;
425
+ return theme;
426
+ } catch {
427
+ return null;
428
+ }
429
+ }
430
+ async function resolveTheme(options) {
431
+ if (options.preset) {
432
+ console.log(pc.dim(` Fetching theme preset ${options.preset}...`));
433
+ const theme = await fetchPreset(options.preset);
434
+ if (!theme) {
435
+ console.error(pc.red(`Error: Could not fetch preset "${options.preset}". It may have expired or the ID is invalid.`));
436
+ return null;
437
+ }
438
+ return theme;
439
+ }
440
+ if (options.theme) {
441
+ const decoded = decompressTheme(options.theme);
442
+ if (!decoded) {
443
+ console.error(pc.red("Error: Could not decode theme string. Make sure you copied it from usefragments.com/create"));
444
+ return null;
445
+ }
446
+ return decoded;
447
+ }
448
+ if (options.brand) {
449
+ return {
450
+ name: "custom",
451
+ colors: {
452
+ accent: options.brand
453
+ }
454
+ };
455
+ }
456
+ return {
457
+ name: "default",
458
+ colors: {
459
+ accent: "#6366f1"
460
+ }
461
+ };
462
+ }
463
+ function generateNextjsLayout(themePath) {
464
+ return `import type { Metadata } from 'next';
465
+ import '@fragments-sdk/ui/styles';
466
+ import '${themePath}';
467
+ import { Providers } from './providers';
468
+
469
+ export const metadata: Metadata = {
470
+ title: 'My App',
471
+ description: 'Built with Fragments UI',
472
+ };
473
+
474
+ export default function RootLayout({
475
+ children,
476
+ }: {
477
+ children: React.ReactNode;
478
+ }) {
479
+ return (
480
+ <html lang="en" suppressHydrationWarning>
481
+ <body>
482
+ <Providers>{children}</Providers>
483
+ </body>
484
+ </html>
485
+ );
486
+ }
487
+ `;
488
+ }
489
+ function generateNextjsProviders() {
490
+ return `'use client';
491
+
492
+ import type { ReactNode } from 'react';
493
+ import { ThemeProvider, TooltipProvider, ToastProvider } from '@fragments-sdk/ui';
494
+
495
+ export function Providers({ children }: { children: ReactNode }) {
496
+ return (
497
+ <ThemeProvider defaultMode="system">
498
+ <TooltipProvider>
499
+ <ToastProvider>{children}</ToastProvider>
500
+ </TooltipProvider>
501
+ </ThemeProvider>
502
+ );
503
+ }
504
+ `;
505
+ }
506
+ function generateNextjsPage() {
507
+ return `'use client';
508
+
509
+ import { Button, Card, Stack, Text, Input } from '@fragments-sdk/ui';
510
+
511
+ export default function Home() {
512
+ return (
513
+ <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
514
+ <Card style={{ maxWidth: 480, width: '100%' }}>
515
+ <Card.Header>
516
+ <Card.Title>Welcome to Fragments</Card.Title>
517
+ <Card.Description>Your app is ready. Start building something great.</Card.Description>
518
+ </Card.Header>
519
+ <Card.Body>
520
+ <Stack gap={3}>
521
+ <Input placeholder="Enter something..." />
522
+ <Stack direction="row" gap={2}>
523
+ <Button>Get Started</Button>
524
+ <Button variant="secondary">Learn More</Button>
525
+ </Stack>
526
+ </Stack>
527
+ </Card.Body>
528
+ </Card>
529
+ </main>
530
+ );
531
+ }
532
+ `;
533
+ }
534
+ function generateViteMain(themePath) {
535
+ return `import { StrictMode } from 'react';
536
+ import { createRoot } from 'react-dom/client';
537
+ import { ThemeProvider, TooltipProvider, ToastProvider } from '@fragments-sdk/ui';
538
+ import '@fragments-sdk/ui/styles';
539
+ import '${themePath}';
540
+ import App from './App';
541
+
542
+ createRoot(document.getElementById('root')!).render(
543
+ <StrictMode>
544
+ <ThemeProvider defaultMode="system">
545
+ <TooltipProvider>
546
+ <ToastProvider>
547
+ <App />
548
+ </ToastProvider>
549
+ </TooltipProvider>
550
+ </ThemeProvider>
551
+ </StrictMode>,
552
+ );
553
+ `;
554
+ }
555
+ function generateViteApp() {
556
+ return `import { Button, Card, Stack, Text, Input } from '@fragments-sdk/ui';
557
+
558
+ function App() {
559
+ return (
560
+ <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
561
+ <Card style={{ maxWidth: 480, width: '100%' }}>
562
+ <Card.Header>
563
+ <Card.Title>Welcome to Fragments</Card.Title>
564
+ <Card.Description>Your app is ready. Start building something great.</Card.Description>
565
+ </Card.Header>
566
+ <Card.Body>
567
+ <Stack gap={3}>
568
+ <Input placeholder="Enter something..." />
569
+ <Stack direction="row" gap={2}>
570
+ <Button>Get Started</Button>
571
+ <Button variant="secondary">Learn More</Button>
572
+ </Stack>
573
+ </Stack>
574
+ </Card.Body>
575
+ </Card>
576
+ </main>
577
+ );
578
+ }
579
+
580
+ export default App;
581
+ `;
582
+ }
583
+ async function promptIfMissing(options) {
584
+ const resolved = { ...options };
585
+ if (!resolved.name) {
586
+ if (resolved.yes) {
587
+ resolved.name = "my-app";
588
+ } else {
589
+ try {
590
+ const { input } = await import("@inquirer/prompts");
591
+ resolved.name = await input({
592
+ message: "Project name:",
593
+ default: "my-app",
594
+ validate: (val) => isValidProjectName(val) || "Use lowercase letters, numbers, hyphens, dots, underscores"
595
+ });
596
+ } catch {
597
+ resolved.name = "my-app";
598
+ }
599
+ }
600
+ }
601
+ if (!resolved.template && !resolved.yes) {
602
+ try {
603
+ const { select } = await import("@inquirer/prompts");
604
+ resolved.template = await select({
605
+ message: "Framework:",
606
+ choices: [
607
+ { name: "Next.js (App Router)", value: "nextjs" },
608
+ { name: "Vite + React", value: "vite" }
609
+ ],
610
+ default: "nextjs"
611
+ });
612
+ } catch {
613
+ resolved.template = "nextjs";
614
+ }
615
+ }
616
+ resolved.template = resolved.template || "nextjs";
617
+ resolved.packageManager = resolved.packageManager || detectPackageManager();
618
+ return resolved;
619
+ }
620
+ function scaffoldFramework(name, template, pm) {
621
+ console.log(pc.cyan(`
622
+ Scaffolding ${template === "nextjs" ? "Next.js" : "Vite + React"} project...
623
+ `));
624
+ if (template === "nextjs") {
625
+ const cmd = `npx create-next-app@latest ${name} --ts --app --src-dir --no-tailwind --no-eslint --import-alias "@/*" --yes`;
626
+ execSync(cmd, { stdio: "inherit" });
627
+ } else {
628
+ if (pm === "bun") {
629
+ execSync(`bun create vite ${name} --template react-ts`, { stdio: "inherit" });
630
+ } else {
631
+ execSync(`npm create vite@latest ${name} -- --template react-ts`, { stdio: "inherit" });
632
+ }
633
+ }
634
+ }
635
+ function installDeps(projectDir, pm, scss) {
636
+ console.log(pc.cyan("\nInstalling Fragments UI...\n"));
637
+ const install = getInstallCommand(pm);
638
+ execSync(`${install} @fragments-sdk/ui`, { cwd: projectDir, stdio: "inherit" });
639
+ if (scss) {
640
+ const devInstall = getDevInstallCommand(pm);
641
+ execSync(`${devInstall} sass`, { cwd: projectDir, stdio: "inherit" });
642
+ }
643
+ }
644
+ function writeThemeFile(projectDir, theme, scss, template) {
645
+ const stylesDir = join2(projectDir, "src", "styles");
646
+ mkdirSync(stylesDir, { recursive: true });
647
+ const ext = scss ? "scss" : "css";
648
+ const content = scss ? generateScssTokens(theme) : generateCssTokens(theme);
649
+ const filePath = join2(stylesDir, `theme.${ext}`);
650
+ writeFileSync(filePath, content, "utf-8");
651
+ if (template === "nextjs") {
652
+ return `../styles/theme.${ext}`;
653
+ }
654
+ return `./styles/theme.${ext}`;
655
+ }
656
+ function addNextTranspilePackages(projectDir) {
657
+ const configCandidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
658
+ for (const configFile of configCandidates) {
659
+ const fullPath = join2(projectDir, configFile);
660
+ if (!existsSync(fullPath)) continue;
661
+ const content = readFileSync(fullPath, "utf-8");
662
+ if (content.includes("transpilePackages") && content.includes("@fragments-sdk/ui")) {
663
+ return;
664
+ }
665
+ if (content.includes("transpilePackages")) {
666
+ return;
667
+ }
668
+ const patterns = [
669
+ {
670
+ search: /const\s+\w+\s*(?::\s*\w+)?\s*=\s*\{/,
671
+ replacement: (match) => `${match}
672
+ transpilePackages: ['@fragments-sdk/ui'],`
673
+ },
674
+ {
675
+ search: /module\.exports\s*=\s*\{/,
676
+ replacement: (match) => `${match}
677
+ transpilePackages: ['@fragments-sdk/ui'],`
678
+ },
679
+ {
680
+ search: /export\s+default\s*\{/,
681
+ replacement: (match) => `${match}
682
+ transpilePackages: ['@fragments-sdk/ui'],`
683
+ }
684
+ ];
685
+ for (const pattern of patterns) {
686
+ if (!pattern.search.test(content)) continue;
687
+ writeFileSync(
688
+ fullPath,
689
+ content.replace(pattern.search, pattern.replacement),
690
+ "utf-8"
691
+ );
692
+ return;
693
+ }
694
+ return;
695
+ }
696
+ }
697
+ function rewriteAppFiles(projectDir, template, themePath) {
698
+ if (template === "nextjs") {
699
+ const layoutPath = join2(projectDir, "src", "app", "layout.tsx");
700
+ writeFileSync(layoutPath, generateNextjsLayout(themePath), "utf-8");
701
+ const providersPath = join2(projectDir, "src", "app", "providers.tsx");
702
+ writeFileSync(providersPath, generateNextjsProviders(), "utf-8");
703
+ const pagePath = join2(projectDir, "src", "app", "page.tsx");
704
+ writeFileSync(pagePath, generateNextjsPage(), "utf-8");
705
+ const moduleCssPath = join2(projectDir, "src", "app", "page.module.css");
706
+ try {
707
+ unlinkSync(moduleCssPath);
708
+ } catch {
709
+ }
710
+ const globalsCssPath = join2(projectDir, "src", "app", "globals.css");
711
+ try {
712
+ unlinkSync(globalsCssPath);
713
+ } catch {
714
+ }
715
+ addNextTranspilePackages(projectDir);
716
+ } else {
717
+ const mainPath = join2(projectDir, "src", "main.tsx");
718
+ writeFileSync(mainPath, generateViteMain(themePath), "utf-8");
719
+ const appPath = join2(projectDir, "src", "App.tsx");
720
+ writeFileSync(appPath, generateViteApp(), "utf-8");
721
+ for (const file of ["src/App.css", "src/index.css"]) {
722
+ try {
723
+ unlinkSync(join2(projectDir, file));
724
+ } catch {
725
+ }
726
+ }
727
+ }
728
+ }
729
+ function initGit(projectDir) {
730
+ try {
731
+ if (!existsSync(join2(projectDir, ".git"))) {
732
+ execSync("git init", { cwd: projectDir, stdio: "ignore" });
733
+ execSync("git add -A", { cwd: projectDir, stdio: "ignore" });
734
+ execSync('git commit -m "Initial commit with Fragments UI"', { cwd: projectDir, stdio: "ignore" });
735
+ }
736
+ } catch {
737
+ }
738
+ }
739
+ function configureMcp(projectDir) {
740
+ const mcpConfig = {
741
+ mcpServers: {
742
+ fragments: {
743
+ command: "npx",
744
+ args: ["-y", "@fragments-sdk/cli", "mcp"]
745
+ }
746
+ }
747
+ };
748
+ const mcpDir = join2(projectDir, ".mcp");
749
+ mkdirSync(mcpDir, { recursive: true });
750
+ writeFileSync(join2(mcpDir, "config.json"), JSON.stringify(mcpConfig, null, 2), "utf-8");
751
+ }
752
+ async function create(options) {
753
+ console.log(pc.cyan(`
754
+ ${BRAND.name} Create
755
+ `));
756
+ const resolved = await promptIfMissing(options);
757
+ const name = resolved.name;
758
+ const template = resolved.template;
759
+ const pm = resolved.packageManager;
760
+ if (!isValidProjectName(name)) {
761
+ return { success: false, error: `Invalid project name: ${name}. Use lowercase letters, numbers, hyphens, dots, underscores.` };
762
+ }
763
+ const projectDir = resolve(process.cwd(), name);
764
+ if (existsSync(projectDir)) {
765
+ return { success: false, error: `Directory "${name}" already exists.` };
766
+ }
767
+ const theme = await resolveTheme(resolved);
768
+ if (!theme) {
769
+ return { success: false, error: "Invalid theme configuration." };
770
+ }
771
+ scaffoldFramework(name, template, pm);
772
+ if (!existsSync(projectDir)) {
773
+ return { success: false, error: "Framework scaffolding failed \u2014 project directory was not created." };
774
+ }
775
+ installDeps(projectDir, pm, !!resolved.scss);
776
+ const themePath = writeThemeFile(projectDir, theme, !!resolved.scss, template);
777
+ rewriteAppFiles(projectDir, template, themePath);
778
+ if (resolved.mcp) {
779
+ configureMcp(projectDir);
780
+ console.log(pc.dim(" Configured MCP server for AI tooling"));
781
+ }
782
+ if (!resolved.noGit) {
783
+ initGit(projectDir);
784
+ }
785
+ const run = getRunCommand(pm);
786
+ console.log("");
787
+ console.log(pc.green(" Project created successfully!"));
788
+ console.log("");
789
+ console.log(` ${pc.cyan("cd")} ${name}`);
790
+ console.log(` ${pc.cyan(run)} dev`);
791
+ console.log("");
792
+ if (theme.name !== "default") {
793
+ console.log(pc.dim(` Theme "${theme.name}" applied with full token set.`));
794
+ console.log(pc.dim(` Edit src/styles/theme.${resolved.scss ? "scss" : "css"} to customize.
795
+ `));
796
+ }
797
+ return { success: true, projectDir };
798
+ }
799
+ export {
800
+ addNextTranspilePackages,
801
+ create,
802
+ generateNextjsLayout,
803
+ generateNextjsPage,
804
+ generateNextjsProviders
805
+ };
806
+ //# sourceMappingURL=create-IH4R45GE.js.map