sculpted 0.0.0 → 0.1.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/LICENSE +105 -0
- package/README.md +233 -0
- package/dist/index.d.mts +129 -0
- package/dist/index.mjs +3 -0
- package/dist/patcher-BAw2kF1Q.mjs +2594 -0
- package/dist/protocol-BJm-xGHP.mjs +54 -0
- package/dist/runtime-DwE3PVhB.d.mts +64 -0
- package/dist/runtime.d.mts +2 -0
- package/dist/runtime.mjs +613 -0
- package/dist/sourceSyntax-DanNzS7Y.d.mts +103 -0
- package/dist/types-CdByW0ji.d.mts +381 -0
- package/dist/ui.d.mts +54 -0
- package/dist/ui.mjs +11125 -0
- package/dist/vite.d.mts +85 -0
- package/dist/vite.mjs +2325 -0
- package/examples/manual-vite-preact-pandacss/README.md +75 -0
- package/examples/manual-vite-preact-pandacss/index.html +12 -0
- package/examples/manual-vite-preact-pandacss/package.json +23 -0
- package/examples/manual-vite-preact-pandacss/panda.config.ts +43 -0
- package/examples/manual-vite-preact-pandacss/pnpm-lock.yaml +3359 -0
- package/examples/manual-vite-preact-pandacss/pnpm-workspace.yaml +2 -0
- package/examples/manual-vite-preact-pandacss/postcss.config.cjs +5 -0
- package/examples/manual-vite-preact-pandacss/src/TsrxManualPanel.tsrx +47 -0
- package/examples/manual-vite-preact-pandacss/src/index.css +8 -0
- package/examples/manual-vite-preact-pandacss/src/main.style.ts +33 -0
- package/examples/manual-vite-preact-pandacss/src/main.tsx +484 -0
- package/examples/manual-vite-preact-pandacss/src/tsrx.d.ts +5 -0
- package/examples/manual-vite-preact-pandacss/tsconfig.json +21 -0
- package/examples/manual-vite-preact-pandacss/vite.config.ts +20 -0
- package/package.json +66 -8
- package/readme.md +0 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Manual Vite + Preact + Panda CSS test app
|
|
2
|
+
|
|
3
|
+
Minimal app for manually verifying Sculpted features while the package is being built.
|
|
4
|
+
|
|
5
|
+
MVP constraints represented here:
|
|
6
|
+
|
|
7
|
+
- Vite + Preact + Panda CSS.
|
|
8
|
+
- Panda styles are authored only with `css()` calls.
|
|
9
|
+
- No `cva()`, recipes, patterns, JSX style props, or other advanced Panda features.
|
|
10
|
+
- Design-token usage is limited to color tokens. Non-color properties use raw CSS values.
|
|
11
|
+
|
|
12
|
+
The app also includes inspector edge cases:
|
|
13
|
+
|
|
14
|
+
- Precomputed `css({ ... })` variables composed into JSX with `cx()`.
|
|
15
|
+
- Multiple static Panda classes on one selected element.
|
|
16
|
+
- Nested literal style objects for responsive/color variants.
|
|
17
|
+
- Read-only unsupported cases for variable arguments, object spreads, and dynamic values.
|
|
18
|
+
- Writable color token and semantic color token sources for create-token verification.
|
|
19
|
+
- A read-only imported semantic token source in `panda.config.ts`.
|
|
20
|
+
- A plain external class composed with a Panda class.
|
|
21
|
+
- A `.tsrx` module that exercises Sculpted's ESTree-backed source syntax adapter path.
|
|
22
|
+
|
|
23
|
+
## Run
|
|
24
|
+
|
|
25
|
+
```sh
|
|
26
|
+
pnpm install
|
|
27
|
+
pnpm dev
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Open `http://localhost:5173/@panda-inspector/manifest` while the dev server is
|
|
31
|
+
running to inspect the manifest-backed edit IDs emitted by the local
|
|
32
|
+
`sculpted/vite` plugin.
|
|
33
|
+
|
|
34
|
+
Panda codegen runs via the `prepare` script. If needed, run it manually:
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
pnpm panda codegen
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Manual checks
|
|
41
|
+
|
|
42
|
+
Use the inspector against this app to check the MVP flow:
|
|
43
|
+
|
|
44
|
+
1. Inspect a static card or edge-case element backed by a local `css({ ... })` call.
|
|
45
|
+
Expected: literal primitive values appear as editable inputs.
|
|
46
|
+
|
|
47
|
+
2. Change one color token or raw CSS value.
|
|
48
|
+
Expected: the page previews the change and the unsaved-changes header appears.
|
|
49
|
+
|
|
50
|
+
3. Click Save.
|
|
51
|
+
Expected: the source file updates and the inspector continues showing the saved value after
|
|
52
|
+
the manifest refresh.
|
|
53
|
+
|
|
54
|
+
4. Inspect the variable-argument, object-spread, and dynamic-value examples.
|
|
55
|
+
Expected: they are shown as read-only unsupported targets, not partially editable controls.
|
|
56
|
+
|
|
57
|
+
5. Inspect a card in "Token creation checks", open a color token selector, search for a valid
|
|
58
|
+
unmatched hex color such as `#3b82f6`, and choose `Create color token...`.
|
|
59
|
+
Expected: the dialog can create a new color token, metadata refreshes, and the new token appears
|
|
60
|
+
in the selector. If `Apply to current input` is checked, the component style becomes a normal
|
|
61
|
+
unsaved preview change.
|
|
62
|
+
|
|
63
|
+
6. Check duplicate and stale config failures with automated tests.
|
|
64
|
+
Expected: `test/vitePlugin.test.ts` and `test/ui.test.ts` cover these cases because they are
|
|
65
|
+
hard to reproduce consistently in the manual app without intentionally corrupting source while a
|
|
66
|
+
dialog is open.
|
|
67
|
+
|
|
68
|
+
7. Inspect the card labeled "TSRX module".
|
|
69
|
+
Expected: its existing literal values are editable and Save writes changes back to
|
|
70
|
+
`src/TsrxManualPanel.tsrx`. Direct JSX metadata is intentionally absent for TSRX-backed source,
|
|
71
|
+
so selection relies on the marker class emitted around the Panda `css()` call.
|
|
72
|
+
|
|
73
|
+
8. Run a production build.
|
|
74
|
+
Expected: inspector metadata, runtime injection, manifest serving, and writeback serving are
|
|
75
|
+
absent from production output.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Sculpted Manual Test App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sculpted-manual-vite-preact-pandacss",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"prepare": "panda codegen",
|
|
8
|
+
"dev": "vite --host 0.0.0.0",
|
|
9
|
+
"build": "vite build",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"preact": "latest",
|
|
14
|
+
"sculpted": "link:../.."
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@pandacss/dev": "latest",
|
|
18
|
+
"@preact/preset-vite": "latest",
|
|
19
|
+
"@tsrx/vite-plugin-preact": "0.0.41",
|
|
20
|
+
"typescript": "latest",
|
|
21
|
+
"vite": "latest"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { defineConfig } from '@pandacss/dev'
|
|
2
|
+
|
|
3
|
+
const importedSemanticColors = {
|
|
4
|
+
importedSurface: {
|
|
5
|
+
value: '{colors.brand.50}',
|
|
6
|
+
},
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default defineConfig({
|
|
10
|
+
preflight: true,
|
|
11
|
+
jsxFramework: 'preact',
|
|
12
|
+
include: ['./src/**/*.{ts,tsx,tsrx,js,jsx}'],
|
|
13
|
+
exclude: [],
|
|
14
|
+
outdir: 'styled-system',
|
|
15
|
+
theme: {
|
|
16
|
+
semanticTokens: {
|
|
17
|
+
colors: {
|
|
18
|
+
surface: {
|
|
19
|
+
value: '{colors.brand.50}',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
extend: {
|
|
24
|
+
tokens: {
|
|
25
|
+
colors: {
|
|
26
|
+
brand: {
|
|
27
|
+
50: { value: '#eef8ff' },
|
|
28
|
+
100: { value: '#d8edff' },
|
|
29
|
+
500: { value: '#1683d8' },
|
|
30
|
+
700: { value: '#0f5f9e' },
|
|
31
|
+
},
|
|
32
|
+
manual: {
|
|
33
|
+
50: { value: '#f8fbff' },
|
|
34
|
+
500: { value: '#4574e8' },
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
semanticTokens: {
|
|
39
|
+
colors: importedSemanticColors,
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
})
|