sculpted 0.3.1 → 0.3.3
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 +4 -2
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +1 -1
- package/dist/{patcher-DQgKdozw.mjs → patcher-nj9VhRT-.mjs} +131 -11
- package/dist/{runtime-C911j-aR.d.mts → runtime-Cpxddehp.d.mts} +3 -2
- package/dist/runtime.d.mts +1 -1
- package/dist/runtime.mjs +530 -18
- package/dist/{sourceSyntax-U2iybN9L.d.mts → sourceSyntax-DKIh-VKA.d.mts} +1 -1
- package/dist/tsrx.d.mts +1 -1
- package/dist/{types-CdByW0ji.d.mts → types-0a4hNfAF.d.mts} +11 -1
- package/dist/ui.d.mts +7 -2
- package/dist/ui.mjs +430 -72
- package/dist/vite.d.mts +1 -1
- package/dist/vite.mjs +493 -185
- package/docs/source-writeback.md +4 -2
- package/examples/vite-preact-pandacss/src/BatchFixtures.tsx +77 -0
- package/examples/vite-preact-pandacss/src/main.tsx +2 -0
- package/examples/vite-react-pandacss/src/BatchFixtures.tsx +77 -0
- package/examples/vite-react-pandacss/src/main.tsx +2 -0
- package/package.json +3 -2
package/dist/runtime.mjs
CHANGED
|
@@ -1,8 +1,374 @@
|
|
|
1
1
|
import { _ as markerClassForEditId, g as editIdsFromMarkerClassList, r as DEFAULT_EDIT_ID_ATTRIBUTE } from "./protocol-D5heR2QM.mjs";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
//#region src/shared/schemas.ts
|
|
4
|
+
const StringArray = z.array(z.string());
|
|
5
|
+
const SourcePosition = z.object({
|
|
6
|
+
line: z.number().int().min(1),
|
|
7
|
+
column: z.number().int().min(1)
|
|
8
|
+
});
|
|
9
|
+
const SourceLocation = z.object({
|
|
10
|
+
start: SourcePosition,
|
|
11
|
+
end: SourcePosition
|
|
12
|
+
});
|
|
13
|
+
const SourceRange = z.object({
|
|
14
|
+
start: z.number().int().min(0),
|
|
15
|
+
end: z.number().int().min(0)
|
|
16
|
+
}).refine((range) => range.start <= range.end);
|
|
17
|
+
const Confidence = z.enum([
|
|
18
|
+
"high",
|
|
19
|
+
"medium",
|
|
20
|
+
"low"
|
|
21
|
+
]);
|
|
22
|
+
const UnsupportedReason = z.enum([
|
|
23
|
+
"ambiguous-target",
|
|
24
|
+
"computed-css-only",
|
|
25
|
+
"dynamic-expression",
|
|
26
|
+
"external-class",
|
|
27
|
+
"generated-source",
|
|
28
|
+
"missing-source",
|
|
29
|
+
"multiple-targets",
|
|
30
|
+
"not-panda-css",
|
|
31
|
+
"spread-value",
|
|
32
|
+
"stale-metadata",
|
|
33
|
+
"unsupported-source-shape",
|
|
34
|
+
"variable-reference"
|
|
35
|
+
]);
|
|
36
|
+
const StyleValueSource = z.union([z.object({
|
|
37
|
+
kind: z.literal("literal"),
|
|
38
|
+
value: z.json(),
|
|
39
|
+
range: SourceRange.optional(),
|
|
40
|
+
loc: SourceLocation.optional()
|
|
41
|
+
}), z.object({
|
|
42
|
+
kind: z.literal("unsupported"),
|
|
43
|
+
reason: UnsupportedReason,
|
|
44
|
+
description: z.string().optional(),
|
|
45
|
+
range: SourceRange.optional(),
|
|
46
|
+
loc: SourceLocation.optional()
|
|
47
|
+
})]);
|
|
48
|
+
const PandaStyleObject = z.lazy(() => z.record(z.string(), z.union([StyleValueSource, PandaStyleObject])));
|
|
49
|
+
const SourceTargetBase = z.object({
|
|
50
|
+
id: z.string(),
|
|
51
|
+
file: z.string(),
|
|
52
|
+
absoluteFile: z.string().optional(),
|
|
53
|
+
range: SourceRange.optional(),
|
|
54
|
+
loc: SourceLocation.optional(),
|
|
55
|
+
sourceHash: z.string().optional(),
|
|
56
|
+
name: z.string().optional(),
|
|
57
|
+
component: z.string().optional(),
|
|
58
|
+
element: z.string().optional(),
|
|
59
|
+
attribute: z.string().optional(),
|
|
60
|
+
jsxSource: z.string().optional(),
|
|
61
|
+
jsxSourceAliases: StringArray.optional(),
|
|
62
|
+
markerClass: z.string().optional(),
|
|
63
|
+
confidence: Confidence,
|
|
64
|
+
reason: z.string().optional()
|
|
65
|
+
});
|
|
66
|
+
const InspectorManifestEntry = z.union([
|
|
67
|
+
SourceTargetBase.extend({
|
|
68
|
+
protocolVersion: z.number(),
|
|
69
|
+
kind: z.literal("panda-css"),
|
|
70
|
+
callee: z.string(),
|
|
71
|
+
styleObject: PandaStyleObject,
|
|
72
|
+
dynamic: z.literal(false)
|
|
73
|
+
}),
|
|
74
|
+
SourceTargetBase.extend({
|
|
75
|
+
protocolVersion: z.number(),
|
|
76
|
+
kind: z.literal("dynamic"),
|
|
77
|
+
dynamic: z.literal(true),
|
|
78
|
+
unsupportedReason: UnsupportedReason
|
|
79
|
+
}),
|
|
80
|
+
SourceTargetBase.extend({
|
|
81
|
+
protocolVersion: z.number(),
|
|
82
|
+
kind: z.literal("external"),
|
|
83
|
+
unsupportedReason: UnsupportedReason
|
|
84
|
+
}),
|
|
85
|
+
SourceTargetBase.extend({
|
|
86
|
+
protocolVersion: z.number(),
|
|
87
|
+
kind: z.literal("unsupported"),
|
|
88
|
+
unsupportedReason: UnsupportedReason
|
|
89
|
+
})
|
|
90
|
+
]);
|
|
91
|
+
const InspectorManifest = z.object({
|
|
92
|
+
version: z.number(),
|
|
93
|
+
projectRoot: z.string(),
|
|
94
|
+
generatedAt: z.string().optional(),
|
|
95
|
+
entries: z.array(InspectorManifestEntry)
|
|
96
|
+
});
|
|
97
|
+
const EditorMetadataUnavailableReason = z.enum([
|
|
98
|
+
"panda-config-missing",
|
|
99
|
+
"panda-config-unreadable",
|
|
100
|
+
"unsupported-panda-config",
|
|
101
|
+
"production-disabled"
|
|
102
|
+
]);
|
|
103
|
+
const EditorMetadataSection = (item) => z.union([z.object({
|
|
104
|
+
status: z.literal("available"),
|
|
105
|
+
items: z.array(item)
|
|
106
|
+
}), z.object({
|
|
107
|
+
status: z.literal("unavailable"),
|
|
108
|
+
items: z.tuple([]),
|
|
109
|
+
reason: EditorMetadataUnavailableReason,
|
|
110
|
+
message: z.string()
|
|
111
|
+
})]);
|
|
112
|
+
const EditorTokenSourceSection = z.enum(["tokens.colors", "semanticTokens.colors"]);
|
|
113
|
+
const EditorTokenSourceTarget = z.object({
|
|
114
|
+
id: z.string(),
|
|
115
|
+
kind: z.literal("panda-config"),
|
|
116
|
+
file: z.string(),
|
|
117
|
+
absoluteFile: z.string().optional(),
|
|
118
|
+
range: SourceRange.optional(),
|
|
119
|
+
sourceHash: z.string(),
|
|
120
|
+
configPath: z.string(),
|
|
121
|
+
writableSections: z.array(EditorTokenSourceSection),
|
|
122
|
+
confidence: Confidence,
|
|
123
|
+
writable: z.boolean(),
|
|
124
|
+
readonlyReason: z.string().optional()
|
|
125
|
+
});
|
|
126
|
+
const EditorTokenCondition = z.object({
|
|
127
|
+
condition: z.string(),
|
|
128
|
+
value: z.json(),
|
|
129
|
+
swatch: z.string().optional()
|
|
130
|
+
});
|
|
131
|
+
const EditorColorTokenMetadata = z.object({
|
|
132
|
+
kind: z.union([z.literal("token"), z.literal("semantic-token")]),
|
|
133
|
+
category: z.literal("colors"),
|
|
134
|
+
path: z.string(),
|
|
135
|
+
label: z.string(),
|
|
136
|
+
value: z.json().optional(),
|
|
137
|
+
swatch: z.string().optional(),
|
|
138
|
+
cssVariable: z.string().optional(),
|
|
139
|
+
presetName: z.string().optional(),
|
|
140
|
+
conditions: z.array(EditorTokenCondition).optional(),
|
|
141
|
+
sourceTargetId: z.string().optional(),
|
|
142
|
+
sourcePath: StringArray.optional(),
|
|
143
|
+
writable: z.boolean().optional(),
|
|
144
|
+
readonlyReason: z.string().optional()
|
|
145
|
+
});
|
|
146
|
+
const EditorFontTokenMetadata = z.object({
|
|
147
|
+
kind: z.literal("token"),
|
|
148
|
+
category: z.literal("fonts"),
|
|
149
|
+
path: z.string(),
|
|
150
|
+
label: z.string(),
|
|
151
|
+
value: z.json().optional(),
|
|
152
|
+
cssVariable: z.string().optional(),
|
|
153
|
+
presetName: z.string().optional(),
|
|
154
|
+
sourcePath: StringArray.optional()
|
|
155
|
+
});
|
|
156
|
+
const EditorPropertyCategory = z.enum([
|
|
157
|
+
"color",
|
|
158
|
+
"spacing",
|
|
159
|
+
"sizing",
|
|
160
|
+
"typography",
|
|
161
|
+
"layout",
|
|
162
|
+
"border",
|
|
163
|
+
"effects",
|
|
164
|
+
"other"
|
|
165
|
+
]);
|
|
166
|
+
const EditorPropertyMetadata = z.object({
|
|
167
|
+
name: z.string(),
|
|
168
|
+
label: z.string(),
|
|
169
|
+
category: EditorPropertyCategory,
|
|
170
|
+
cssProperty: z.string().optional(),
|
|
171
|
+
aliases: StringArray,
|
|
172
|
+
tokenCategory: z.string().optional(),
|
|
173
|
+
defaultUnit: z.string().optional()
|
|
174
|
+
});
|
|
175
|
+
const InspectorEditorMetadata = z.object({
|
|
176
|
+
version: z.number(),
|
|
177
|
+
projectRoot: z.string(),
|
|
178
|
+
generatedAt: z.string().optional(),
|
|
179
|
+
tokenSources: EditorMetadataSection(EditorTokenSourceTarget),
|
|
180
|
+
colorTokens: EditorMetadataSection(EditorColorTokenMetadata),
|
|
181
|
+
semanticColorTokens: EditorMetadataSection(EditorColorTokenMetadata),
|
|
182
|
+
fontTokens: EditorMetadataSection(EditorFontTokenMetadata).optional(),
|
|
183
|
+
properties: EditorMetadataSection(EditorPropertyMetadata)
|
|
184
|
+
});
|
|
185
|
+
const ManifestUpdate = z.object({
|
|
186
|
+
version: z.number(),
|
|
187
|
+
changedFiles: StringArray,
|
|
188
|
+
entryIds: StringArray
|
|
189
|
+
});
|
|
190
|
+
const EditorMetadataUpdate = z.object({
|
|
191
|
+
version: z.number(),
|
|
192
|
+
changedFiles: StringArray,
|
|
193
|
+
tokenSourceIds: StringArray
|
|
194
|
+
});
|
|
195
|
+
const StyleEditErrorCode = z.enum([
|
|
196
|
+
"ambiguous-target",
|
|
197
|
+
"invalid-edit",
|
|
198
|
+
"invalid-path",
|
|
199
|
+
"manifest-entry-not-found",
|
|
200
|
+
"parse-error",
|
|
201
|
+
"path-outside-project",
|
|
202
|
+
"production-disabled",
|
|
203
|
+
"stale-source",
|
|
204
|
+
"unsupported-operation",
|
|
205
|
+
"unsupported-source-shape",
|
|
206
|
+
"write-failed"
|
|
207
|
+
]);
|
|
208
|
+
const StyleEditError = z.object({
|
|
209
|
+
code: StyleEditErrorCode,
|
|
210
|
+
message: z.string(),
|
|
211
|
+
details: z.json().optional()
|
|
212
|
+
});
|
|
213
|
+
const StyleEditResponseBase = z.object({
|
|
214
|
+
ok: z.boolean(),
|
|
215
|
+
editId: z.string(),
|
|
216
|
+
file: z.string().optional(),
|
|
217
|
+
diff: z.string().optional(),
|
|
218
|
+
nextSource: z.string().optional(),
|
|
219
|
+
written: z.boolean().optional(),
|
|
220
|
+
manifestUpdate: ManifestUpdate.optional(),
|
|
221
|
+
warnings: StringArray.optional(),
|
|
222
|
+
error: StyleEditError.optional()
|
|
223
|
+
});
|
|
224
|
+
const StyleEditResponse = StyleEditResponseBase.superRefine((response, context) => {
|
|
225
|
+
if (response.ok && response.error !== void 0) context.addIssue({
|
|
226
|
+
code: "custom",
|
|
227
|
+
path: ["error"],
|
|
228
|
+
message: "Successful style edit responses must not include an error."
|
|
229
|
+
});
|
|
230
|
+
if (!response.ok && response.error === void 0) context.addIssue({
|
|
231
|
+
code: "custom",
|
|
232
|
+
path: ["error"],
|
|
233
|
+
message: "Failed style edit responses must include an error."
|
|
234
|
+
});
|
|
235
|
+
});
|
|
236
|
+
const TokenConfigEditResponse = StyleEditResponseBase.extend({ metadataUpdate: EditorMetadataUpdate.optional() }).superRefine((response, context) => {
|
|
237
|
+
if (response.ok && response.error !== void 0) context.addIssue({
|
|
238
|
+
code: "custom",
|
|
239
|
+
path: ["error"],
|
|
240
|
+
message: "Successful token config edit responses must not include an error."
|
|
241
|
+
});
|
|
242
|
+
if (!response.ok && response.error === void 0) context.addIssue({
|
|
243
|
+
code: "custom",
|
|
244
|
+
path: ["error"],
|
|
245
|
+
message: "Failed token config edit responses must include an error."
|
|
246
|
+
});
|
|
247
|
+
});
|
|
248
|
+
const StyleEditBatchResponse = z.object({
|
|
249
|
+
ok: z.boolean(),
|
|
250
|
+
editId: z.literal(""),
|
|
251
|
+
responses: z.array(StyleEditResponse),
|
|
252
|
+
written: z.boolean().optional(),
|
|
253
|
+
manifestUpdate: ManifestUpdate.optional(),
|
|
254
|
+
error: StyleEditError.optional()
|
|
255
|
+
}).superRefine((response, context) => {
|
|
256
|
+
if (response.ok && response.error !== void 0) context.addIssue({
|
|
257
|
+
code: "custom",
|
|
258
|
+
path: ["error"],
|
|
259
|
+
message: "Successful batch responses must not include an error."
|
|
260
|
+
});
|
|
261
|
+
if (!response.ok && response.error === void 0) context.addIssue({
|
|
262
|
+
code: "custom",
|
|
263
|
+
path: ["error"],
|
|
264
|
+
message: "Failed batch responses must include an error."
|
|
265
|
+
});
|
|
266
|
+
});
|
|
267
|
+
const ComponentStyleModuleSource = z.object({
|
|
268
|
+
name: z.string(),
|
|
269
|
+
file: z.string(),
|
|
270
|
+
editId: z.string().optional(),
|
|
271
|
+
sourceHash: z.string().optional(),
|
|
272
|
+
styleObject: PandaStyleObject.optional()
|
|
273
|
+
});
|
|
274
|
+
const ComponentStyleModuleResponse = z.union([z.object({
|
|
275
|
+
ok: z.literal(true),
|
|
276
|
+
componentFile: z.string(),
|
|
277
|
+
styleFile: z.string(),
|
|
278
|
+
importPath: z.string(),
|
|
279
|
+
exists: z.boolean(),
|
|
280
|
+
sources: z.array(ComponentStyleModuleSource),
|
|
281
|
+
warnings: StringArray.optional(),
|
|
282
|
+
error: z.undefined().optional()
|
|
283
|
+
}), z.object({
|
|
284
|
+
ok: z.literal(false),
|
|
285
|
+
error: StyleEditError
|
|
286
|
+
})]);
|
|
287
|
+
const OpenSourceLocationErrorCode = z.enum([
|
|
288
|
+
"invalid-request",
|
|
289
|
+
"missing-metadata",
|
|
290
|
+
"open-failed",
|
|
291
|
+
"path-outside-project",
|
|
292
|
+
"file-not-found"
|
|
293
|
+
]);
|
|
294
|
+
const OpenSourceLocationResponse = z.union([z.object({
|
|
295
|
+
ok: z.literal(true),
|
|
296
|
+
file: z.string(),
|
|
297
|
+
line: z.number().int().min(1).optional(),
|
|
298
|
+
column: z.number().int().min(1).optional(),
|
|
299
|
+
openEditorUrl: z.string().startsWith("/__open-in-editor?"),
|
|
300
|
+
error: z.undefined().optional()
|
|
301
|
+
}), z.object({
|
|
302
|
+
ok: z.literal(false),
|
|
303
|
+
error: z.object({
|
|
304
|
+
code: OpenSourceLocationErrorCode,
|
|
305
|
+
message: z.string(),
|
|
306
|
+
details: z.json().optional()
|
|
307
|
+
})
|
|
308
|
+
})]);
|
|
309
|
+
function isInspectorManifest(value) {
|
|
310
|
+
return InspectorManifest.safeParse(value).success;
|
|
311
|
+
}
|
|
312
|
+
function isInspectorEditorMetadata(value) {
|
|
313
|
+
return InspectorEditorMetadata.safeParse(value).success;
|
|
314
|
+
}
|
|
315
|
+
function isStyleEditResponse(value) {
|
|
316
|
+
return StyleEditResponse.safeParse(value).success;
|
|
317
|
+
}
|
|
318
|
+
function isStyleEditResponseForEditId(value, expectedEditId) {
|
|
319
|
+
return isStyleEditResponse(value) && (expectedEditId === void 0 || value.editId === expectedEditId);
|
|
320
|
+
}
|
|
321
|
+
function isTokenConfigEditResponse(value, expectedEditId) {
|
|
322
|
+
const result = TokenConfigEditResponse.safeParse(value);
|
|
323
|
+
return result.success && (expectedEditId === void 0 || result.data.editId === expectedEditId);
|
|
324
|
+
}
|
|
325
|
+
function isStyleEditBatchResponse(value) {
|
|
326
|
+
return StyleEditBatchResponse.safeParse(value).success;
|
|
327
|
+
}
|
|
328
|
+
function isComponentStyleModuleResponse(value) {
|
|
329
|
+
return ComponentStyleModuleResponse.safeParse(value).success;
|
|
330
|
+
}
|
|
331
|
+
function isOpenSourceLocationResponse(value) {
|
|
332
|
+
return OpenSourceLocationResponse.safeParse(value).success;
|
|
333
|
+
}
|
|
334
|
+
//#endregion
|
|
2
335
|
//#region src/runtime.ts
|
|
3
336
|
const DEFAULT_GLOBAL_NAME = "__SCULPTED__";
|
|
4
337
|
const PREVIEW_STYLE_ID = "sculpted-preview-styles";
|
|
5
338
|
const HIGHLIGHT_ID = "sculpted-highlight";
|
|
339
|
+
const INHERITED_CSS_PROPERTIES = [
|
|
340
|
+
"border-collapse",
|
|
341
|
+
"border-spacing",
|
|
342
|
+
"caption-side",
|
|
343
|
+
"color",
|
|
344
|
+
"cursor",
|
|
345
|
+
"direction",
|
|
346
|
+
"empty-cells",
|
|
347
|
+
"font-family",
|
|
348
|
+
"font-feature-settings",
|
|
349
|
+
"font-kerning",
|
|
350
|
+
"font-size",
|
|
351
|
+
"font-stretch",
|
|
352
|
+
"font-style",
|
|
353
|
+
"font-variant",
|
|
354
|
+
"font-variant-caps",
|
|
355
|
+
"font-weight",
|
|
356
|
+
"letter-spacing",
|
|
357
|
+
"line-height",
|
|
358
|
+
"list-style-image",
|
|
359
|
+
"list-style-position",
|
|
360
|
+
"list-style-type",
|
|
361
|
+
"quotes",
|
|
362
|
+
"tab-size",
|
|
363
|
+
"text-align",
|
|
364
|
+
"text-indent",
|
|
365
|
+
"text-rendering",
|
|
366
|
+
"text-transform",
|
|
367
|
+
"visibility",
|
|
368
|
+
"white-space",
|
|
369
|
+
"word-break",
|
|
370
|
+
"word-spacing"
|
|
371
|
+
];
|
|
6
372
|
var SculptedRuntime = class {
|
|
7
373
|
version = 1;
|
|
8
374
|
manifestEndpoint;
|
|
@@ -37,7 +403,9 @@ var SculptedRuntime = class {
|
|
|
37
403
|
async loadManifest() {
|
|
38
404
|
const response = await this.#environment.fetch(this.manifestEndpoint, { cache: "no-store" });
|
|
39
405
|
if (!response.ok) throw new Error(`Failed to load Sculpted manifest: ${response.status}`);
|
|
40
|
-
const
|
|
406
|
+
const parsed = await responseJson(response);
|
|
407
|
+
if (!isInspectorManifest(parsed)) throw new Error(manifestLoadMessage(response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol"));
|
|
408
|
+
const manifest = parsed;
|
|
41
409
|
this.#manifest = manifest;
|
|
42
410
|
this.#entries = new Map(manifest.entries.map((entry) => [entry.id, entry]));
|
|
43
411
|
return manifest;
|
|
@@ -48,7 +416,9 @@ var SculptedRuntime = class {
|
|
|
48
416
|
async loadEditorMetadata() {
|
|
49
417
|
const response = await this.#environment.fetch(this.editorMetadataEndpoint, { cache: "no-store" });
|
|
50
418
|
if (!response.ok) throw new Error(`Failed to load Panda editor metadata: ${response.status}`);
|
|
51
|
-
const
|
|
419
|
+
const parsed = await responseJson(response);
|
|
420
|
+
if (!isInspectorEditorMetadata(parsed)) throw new Error(editorMetadataLoadMessage(response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol"));
|
|
421
|
+
const metadata = parsed;
|
|
52
422
|
this.#editorMetadata = metadata;
|
|
53
423
|
return metadata;
|
|
54
424
|
}
|
|
@@ -59,7 +429,7 @@ var SculptedRuntime = class {
|
|
|
59
429
|
return this.#entries.get(id);
|
|
60
430
|
}
|
|
61
431
|
async requestStyleEdit(request, write) {
|
|
62
|
-
const result = await (await this.#environment.fetch(this.writebackEndpoint, {
|
|
432
|
+
const result = await styleEditResponseFromFetch(await this.#environment.fetch(this.writebackEndpoint, {
|
|
63
433
|
method: "POST",
|
|
64
434
|
cache: "no-store",
|
|
65
435
|
headers: { "content-type": "application/json" },
|
|
@@ -70,7 +440,7 @@ var SculptedRuntime = class {
|
|
|
70
440
|
write
|
|
71
441
|
}
|
|
72
442
|
})
|
|
73
|
-
})
|
|
443
|
+
}), request.editId);
|
|
74
444
|
if (result.ok && result.manifestUpdate) await this.loadManifest();
|
|
75
445
|
return result;
|
|
76
446
|
}
|
|
@@ -80,17 +450,17 @@ var SculptedRuntime = class {
|
|
|
80
450
|
requests,
|
|
81
451
|
options: { write }
|
|
82
452
|
};
|
|
83
|
-
const result = await (await this.#environment.fetch(this.writebackEndpoint, {
|
|
453
|
+
const result = await styleEditBatchResponseFromFetch(await this.#environment.fetch(this.writebackEndpoint, {
|
|
84
454
|
method: "POST",
|
|
85
455
|
cache: "no-store",
|
|
86
456
|
headers: { "content-type": "application/json" },
|
|
87
457
|
body: JSON.stringify(batch)
|
|
88
|
-
}))
|
|
458
|
+
}), requests);
|
|
89
459
|
if (result.ok && result.manifestUpdate) await this.loadManifest();
|
|
90
460
|
return result.responses;
|
|
91
461
|
}
|
|
92
462
|
async requestInlineCssSource(request, write) {
|
|
93
|
-
const result = await (await this.#environment.fetch(this.writebackEndpoint, {
|
|
463
|
+
const result = await styleEditResponseFromFetch(await this.#environment.fetch(this.writebackEndpoint, {
|
|
94
464
|
method: "POST",
|
|
95
465
|
cache: "no-store",
|
|
96
466
|
headers: { "content-type": "application/json" },
|
|
@@ -101,20 +471,20 @@ var SculptedRuntime = class {
|
|
|
101
471
|
write
|
|
102
472
|
}
|
|
103
473
|
})
|
|
104
|
-
})
|
|
474
|
+
}), request.editId);
|
|
105
475
|
if (result.ok && result.manifestUpdate) await this.loadManifest();
|
|
106
476
|
return result;
|
|
107
477
|
}
|
|
108
478
|
async getComponentStyleModule(componentSource) {
|
|
109
|
-
return
|
|
479
|
+
return componentStyleModuleResponseFromFetch(await this.#environment.fetch(this.styleModuleEndpoint, {
|
|
110
480
|
method: "POST",
|
|
111
481
|
cache: "no-store",
|
|
112
482
|
headers: { "content-type": "application/json" },
|
|
113
483
|
body: JSON.stringify({ componentSource })
|
|
114
|
-
}))
|
|
484
|
+
}));
|
|
115
485
|
}
|
|
116
486
|
async requestStyleModuleEdit(request, write) {
|
|
117
|
-
const result = await (await this.#environment.fetch(this.writebackEndpoint, {
|
|
487
|
+
const result = await styleEditResponseFromFetch(await this.#environment.fetch(this.writebackEndpoint, {
|
|
118
488
|
method: "POST",
|
|
119
489
|
cache: "no-store",
|
|
120
490
|
headers: { "content-type": "application/json" },
|
|
@@ -125,12 +495,12 @@ var SculptedRuntime = class {
|
|
|
125
495
|
write
|
|
126
496
|
}
|
|
127
497
|
})
|
|
128
|
-
})
|
|
498
|
+
}), request.editId);
|
|
129
499
|
if (result.ok && result.manifestUpdate) await this.loadManifest();
|
|
130
500
|
return result;
|
|
131
501
|
}
|
|
132
502
|
async requestTokenConfigEdit(request, write) {
|
|
133
|
-
const result = await (await this.#environment.fetch(this.tokenWritebackEndpoint, {
|
|
503
|
+
const result = await tokenConfigEditResponseFromFetch(await this.#environment.fetch(this.tokenWritebackEndpoint, {
|
|
134
504
|
method: "POST",
|
|
135
505
|
cache: "no-store",
|
|
136
506
|
headers: { "content-type": "application/json" },
|
|
@@ -141,17 +511,17 @@ var SculptedRuntime = class {
|
|
|
141
511
|
write
|
|
142
512
|
}
|
|
143
513
|
})
|
|
144
|
-
})
|
|
514
|
+
}), request.editId);
|
|
145
515
|
if (result.ok && result.metadataUpdate) await this.loadEditorMetadata();
|
|
146
516
|
return result;
|
|
147
517
|
}
|
|
148
518
|
async openSourceLocation(request) {
|
|
149
|
-
const result = await (await this.#environment.fetch(this.openSourceEndpoint, {
|
|
519
|
+
const result = await openSourceLocationResponseFromFetch(await this.#environment.fetch(this.openSourceEndpoint, {
|
|
150
520
|
method: "POST",
|
|
151
521
|
cache: "no-store",
|
|
152
522
|
headers: { "content-type": "application/json" },
|
|
153
523
|
body: JSON.stringify(request)
|
|
154
|
-
}))
|
|
524
|
+
}));
|
|
155
525
|
if (!result.ok) return result;
|
|
156
526
|
try {
|
|
157
527
|
const editorResponse = await this.#environment.fetch(result.openEditorUrl, { cache: "no-store" });
|
|
@@ -165,6 +535,7 @@ var SculptedRuntime = class {
|
|
|
165
535
|
}
|
|
166
536
|
};
|
|
167
537
|
} catch (error) {
|
|
538
|
+
logUnexpectedRuntimeError("Failed to contact Vite editor opener.", error);
|
|
168
539
|
return {
|
|
169
540
|
ok: false,
|
|
170
541
|
error: {
|
|
@@ -262,7 +633,10 @@ var SculptedRuntime = class {
|
|
|
262
633
|
message: target?.reason ?? "Selected Panda source target is not editable."
|
|
263
634
|
};
|
|
264
635
|
}
|
|
265
|
-
|
|
636
|
+
inspectElementEvidence(element) {
|
|
637
|
+
return this.#elementEvidence(element);
|
|
638
|
+
}
|
|
639
|
+
startInspecting(onSelect, onStop, onInspect) {
|
|
266
640
|
this.stopInspecting();
|
|
267
641
|
const { window } = this.#environment;
|
|
268
642
|
const onPointerMove = (event) => {
|
|
@@ -279,6 +653,7 @@ var SculptedRuntime = class {
|
|
|
279
653
|
event.preventDefault();
|
|
280
654
|
event.stopPropagation();
|
|
281
655
|
this.stopInspecting();
|
|
656
|
+
onInspect?.(element, this.#elementEvidence(element));
|
|
282
657
|
this.selectElement(element).then((info) => {
|
|
283
658
|
onSelect?.(info, element);
|
|
284
659
|
});
|
|
@@ -380,7 +755,8 @@ var SculptedRuntime = class {
|
|
|
380
755
|
attributes: attributeSnapshot(element),
|
|
381
756
|
bounds: boundsSnapshot(element),
|
|
382
757
|
ancestors: ancestorSnapshot(element),
|
|
383
|
-
componentLayers: componentLayerSnapshot(element, this.#attributes)
|
|
758
|
+
componentLayers: componentLayerSnapshot(element, this.#attributes),
|
|
759
|
+
inheritedStyleSources: inheritedStyleSourceSnapshot(this.#environment.window, element, this.#attributes, this.#entries)
|
|
384
760
|
};
|
|
385
761
|
}
|
|
386
762
|
#previewStyleElement() {
|
|
@@ -441,6 +817,9 @@ function installSculptedRuntime(options = {}) {
|
|
|
441
817
|
environment.window[globalName] = runtime;
|
|
442
818
|
return runtime;
|
|
443
819
|
}
|
|
820
|
+
function logUnexpectedRuntimeError(message, error) {
|
|
821
|
+
console.error(`[sculpted] ${message}`, error);
|
|
822
|
+
}
|
|
444
823
|
function browserEnvironment() {
|
|
445
824
|
if (typeof window === "undefined" || typeof document === "undefined") throw new Error("Sculpted runtime requires a browser environment.");
|
|
446
825
|
return {
|
|
@@ -508,6 +887,46 @@ function ancestorSnapshot(element) {
|
|
|
508
887
|
}
|
|
509
888
|
return ancestors;
|
|
510
889
|
}
|
|
890
|
+
function inheritedStyleSourceSnapshot(window, element, attributes, entries) {
|
|
891
|
+
const sources = [];
|
|
892
|
+
let current = element.parentElement;
|
|
893
|
+
let depth = 1;
|
|
894
|
+
while (current && depth < 24) {
|
|
895
|
+
if (isInspectorOwnedElement(current)) break;
|
|
896
|
+
const targetIds = targetIdsForElement(current, attributes, entries);
|
|
897
|
+
for (const targetId of targetIds) {
|
|
898
|
+
const target = entries.get(targetId);
|
|
899
|
+
if (!target || !isEditableTarget(target)) continue;
|
|
900
|
+
sources.push({
|
|
901
|
+
target,
|
|
902
|
+
depth,
|
|
903
|
+
tagName: current.tagName.toLowerCase(),
|
|
904
|
+
source: current.getAttribute(attributes.source) ?? void 0,
|
|
905
|
+
component: current.getAttribute(attributes.component) ?? void 0,
|
|
906
|
+
computedStyles: inheritedComputedStyleSnapshot(window, current)
|
|
907
|
+
});
|
|
908
|
+
}
|
|
909
|
+
current = current.parentElement;
|
|
910
|
+
depth += 1;
|
|
911
|
+
}
|
|
912
|
+
return sources;
|
|
913
|
+
}
|
|
914
|
+
function targetIdsForElement(element, attributes, entries) {
|
|
915
|
+
const markerEditIds = editIdsFromMarkerClassList(element.getAttribute("class") ?? "");
|
|
916
|
+
if (markerEditIds.length > 0) return markerEditIds;
|
|
917
|
+
const attributeEditIds = (element.getAttribute(attributes.editId) ?? "").split(/\s+/).filter(Boolean);
|
|
918
|
+
if (attributeEditIds.length > 0) return attributeEditIds;
|
|
919
|
+
const jsxSource = element.getAttribute(attributes.jsxSource)?.trim();
|
|
920
|
+
if (!jsxSource) return [];
|
|
921
|
+
return Array.from(entries.values()).filter((entry) => entry.jsxSource === jsxSource || (entry.jsxSourceAliases ?? []).includes(jsxSource)).map((entry) => entry.id);
|
|
922
|
+
}
|
|
923
|
+
function inheritedComputedStyleSnapshot(window, element) {
|
|
924
|
+
const style = window.getComputedStyle(element);
|
|
925
|
+
return INHERITED_CSS_PROPERTIES.map((property) => ({
|
|
926
|
+
property,
|
|
927
|
+
value: style.getPropertyValue(property)
|
|
928
|
+
})).filter((declaration) => declaration.value.trim().length > 0);
|
|
929
|
+
}
|
|
511
930
|
function componentLayerSnapshot(element, attributes) {
|
|
512
931
|
const layers = [];
|
|
513
932
|
const pendingElements = [];
|
|
@@ -592,6 +1011,99 @@ function isShadowRoot(root) {
|
|
|
592
1011
|
function isEditableTarget(target) {
|
|
593
1012
|
return target.kind === "panda-css";
|
|
594
1013
|
}
|
|
1014
|
+
function manifestLoadMessage(response, reason) {
|
|
1015
|
+
const status = response.status ? ` HTTP ${response.status}` : "";
|
|
1016
|
+
return reason === "invalid-json" ? `Sculpted manifest endpoint returned invalid JSON${status}.` : `Sculpted manifest endpoint returned an invalid response${status}.`;
|
|
1017
|
+
}
|
|
1018
|
+
function editorMetadataLoadMessage(response, reason) {
|
|
1019
|
+
const status = response.status ? ` HTTP ${response.status}` : "";
|
|
1020
|
+
return reason === "invalid-json" ? `Panda editor metadata endpoint returned invalid JSON${status}.` : `Panda editor metadata endpoint returned an invalid response${status}.`;
|
|
1021
|
+
}
|
|
1022
|
+
async function styleEditResponseFromFetch(response, editId) {
|
|
1023
|
+
const parsed = await responseJson(response);
|
|
1024
|
+
if (isStyleEditResponseForEditId(parsed, editId)) return parsed;
|
|
1025
|
+
return styleEditFailure(editId, writebackResponseMessage(response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol"));
|
|
1026
|
+
}
|
|
1027
|
+
async function styleEditBatchResponseFromFetch(response, requests) {
|
|
1028
|
+
const parsed = await responseJson(response);
|
|
1029
|
+
if (isStyleEditBatchResponse(parsed)) {
|
|
1030
|
+
if (!parsed.ok) return parsed;
|
|
1031
|
+
if (parsed.responses.length === requests.length && parsed.responses.every((item, index) => item.ok && item.editId === requests[index]?.editId)) return parsed;
|
|
1032
|
+
}
|
|
1033
|
+
const failure = styleEditFailure(requests.map((request) => request.editId).join(" "), writebackResponseMessage(response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol"));
|
|
1034
|
+
return {
|
|
1035
|
+
ok: false,
|
|
1036
|
+
editId: "",
|
|
1037
|
+
written: false,
|
|
1038
|
+
responses: requests.length > 0 ? requests.map((request) => ({
|
|
1039
|
+
...failure,
|
|
1040
|
+
editId: request.editId
|
|
1041
|
+
})) : [failure],
|
|
1042
|
+
error: failure.error
|
|
1043
|
+
};
|
|
1044
|
+
}
|
|
1045
|
+
async function tokenConfigEditResponseFromFetch(response, editId) {
|
|
1046
|
+
const parsed = await responseJson(response);
|
|
1047
|
+
if (isTokenConfigEditResponse(parsed, editId)) return parsed;
|
|
1048
|
+
return {
|
|
1049
|
+
ok: false,
|
|
1050
|
+
editId,
|
|
1051
|
+
written: false,
|
|
1052
|
+
error: {
|
|
1053
|
+
code: "write-failed",
|
|
1054
|
+
message: writebackResponseMessage(response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol")
|
|
1055
|
+
}
|
|
1056
|
+
};
|
|
1057
|
+
}
|
|
1058
|
+
async function componentStyleModuleResponseFromFetch(response) {
|
|
1059
|
+
const parsed = await responseJson(response);
|
|
1060
|
+
if (isComponentStyleModuleResponse(parsed)) return parsed;
|
|
1061
|
+
return {
|
|
1062
|
+
ok: false,
|
|
1063
|
+
error: {
|
|
1064
|
+
code: "write-failed",
|
|
1065
|
+
message: devServerResponseMessage("Style-module endpoint", response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol")
|
|
1066
|
+
}
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
async function openSourceLocationResponseFromFetch(response) {
|
|
1070
|
+
const parsed = await responseJson(response);
|
|
1071
|
+
if (isOpenSourceLocationResponse(parsed)) return parsed;
|
|
1072
|
+
return {
|
|
1073
|
+
ok: false,
|
|
1074
|
+
error: {
|
|
1075
|
+
code: "open-failed",
|
|
1076
|
+
message: devServerResponseMessage("Open-source endpoint", response, parsed === invalidResponseJson ? "invalid-json" : "invalid-protocol")
|
|
1077
|
+
}
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1080
|
+
const invalidResponseJson = Symbol("invalid-response-json");
|
|
1081
|
+
async function responseJson(response) {
|
|
1082
|
+
try {
|
|
1083
|
+
return await response.json();
|
|
1084
|
+
} catch {
|
|
1085
|
+
return invalidResponseJson;
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
function styleEditFailure(editId, message) {
|
|
1089
|
+
return {
|
|
1090
|
+
ok: false,
|
|
1091
|
+
editId,
|
|
1092
|
+
written: false,
|
|
1093
|
+
error: {
|
|
1094
|
+
code: "write-failed",
|
|
1095
|
+
message
|
|
1096
|
+
}
|
|
1097
|
+
};
|
|
1098
|
+
}
|
|
1099
|
+
function writebackResponseMessage(response, reason) {
|
|
1100
|
+
const status = response.status ? ` HTTP ${response.status}` : "";
|
|
1101
|
+
return reason === "invalid-json" ? `Writeback endpoint returned invalid JSON${status}.` : `Writeback endpoint returned an invalid response${status}.`;
|
|
1102
|
+
}
|
|
1103
|
+
function devServerResponseMessage(endpoint, response, reason) {
|
|
1104
|
+
const status = response.status ? ` HTTP ${response.status}` : "";
|
|
1105
|
+
return reason === "invalid-json" ? `${endpoint} returned invalid JSON${status}.` : `${endpoint} returned an invalid response${status}.`;
|
|
1106
|
+
}
|
|
595
1107
|
function escapeCssAttribute(value) {
|
|
596
1108
|
return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
|
|
597
1109
|
}
|
package/dist/tsrx.d.mts
CHANGED