@rainbow-robotics/muscat-plugin-kit 1.10.2-dev.8 → 1.10.2
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/cli/storybook-dist/project.json +1 -1
- package/cli/templates/common/README.md +129 -128
- package/cli/templates/readme-cpp/README.md +129 -128
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1792744460659,"userSince":1750932757926,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@vitest/browser":"3.2.4","@vitest/coverage-v8":"3.2.4","playwright":"1.59.1","vitest":"3.2.4"},"hasRouterPackage":false,"monorepo":"Turborepo","packageManager":{"type":"yarn","version":"berry","agent":"yarn@berry"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.18","storybookVersionSpecifier":"^8.6.4","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"3.2.7"},"@storybook/addon-essentials":{"version":"8.6.18"},"@storybook/addon-links":{"version":"8.6.18"},"@storybook/addon-onboarding":{"version":"8.6.18"},"@storybook/addon-themes":{"version":"8.6.18"},"@storybook/blocks":{"version":"8.6.18"},"@storybook/experimental-addon-test":{"version":"8.6.18"},"@storybook/react":{"version":"8.6.18"},"@storybook/react-vite":{"version":"8.6.18"},"@storybook/test":{"version":"8.6.18"},"@storybook/theming":{"version":"8.6.18"},"eslint-plugin-storybook":{"version":"0.11.6"},"storybook":{"version":"8.6.18"},"storybook-addon-react-docgen":{"version":"1.2.44"}},"addons":{"$SNIP/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/@chromatic-com/storybook":{"version":null},"$SNIP/node_modules/@storybook/addon-themes":{"version":null},"$SNIP/node_modules/@storybook/experimental-addon-test":{"version":null}}}
|
|
@@ -59,129 +59,6 @@ production, Muscat provides `@rainbow-robotics/plugin-ui`, React, and ReactDOM
|
|
|
59
59
|
through the host import map; plugin UI build output imports those as host
|
|
60
60
|
externals.
|
|
61
61
|
|
|
62
|
-
### Styles
|
|
63
|
-
|
|
64
|
-
`muscat()` automatically loads `ui/style.{css,scss,sass,less}` (or
|
|
65
|
-
`ui/styles.{css,scss,sass,less}`) for every UI entry, plus
|
|
66
|
-
`ui/{entry}.{css,scss,sass,less}` for a matching entry-specific stylesheet. You
|
|
67
|
-
do not need to import CSS from every `.tsx` file.
|
|
68
|
-
|
|
69
|
-
The scaffold uses Tailwind's theme/utilities layers only, so plugin utilities
|
|
70
|
-
are generated from files under `ui/` without applying Tailwind preflight resets
|
|
71
|
-
to the host page.
|
|
72
|
-
|
|
73
|
-
Built CSS selectors are scoped under the current plugin id
|
|
74
|
-
(`[data-muscat-plugin-id="..."]`). CSS-in-JS libraries such as Emotion work
|
|
75
|
-
normally, but global styles should be scoped by the author.
|
|
76
|
-
|
|
77
|
-
#### Tailwind
|
|
78
|
-
|
|
79
|
-
This template enables Tailwind in `vite.config.ts`:
|
|
80
|
-
|
|
81
|
-
```ts
|
|
82
|
-
import { defineConfig } from "vite";
|
|
83
|
-
import tailwindcss from "@tailwindcss/vite";
|
|
84
|
-
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
85
|
-
|
|
86
|
-
export default defineConfig({
|
|
87
|
-
plugins: [tailwindcss(), muscat()],
|
|
88
|
-
});
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
The default `ui/style.css` uses Tailwind theme/utilities only, not preflight:
|
|
92
|
-
|
|
93
|
-
```css
|
|
94
|
-
@layer theme, utilities;
|
|
95
|
-
|
|
96
|
-
@import "tailwindcss/theme.css" layer(theme);
|
|
97
|
-
@import "tailwindcss/utilities.css" layer(utilities);
|
|
98
|
-
|
|
99
|
-
@source "./**/*.{ts,tsx}";
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
#### SCSS, Sass, and Less
|
|
103
|
-
|
|
104
|
-
Install the preprocessor package, then create one of the auto-loaded style files.
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npm i -D sass
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
```scss
|
|
111
|
-
/* ui/style.scss */
|
|
112
|
-
$accent: #3b82f6;
|
|
113
|
-
|
|
114
|
-
.panel {
|
|
115
|
-
border: 1px solid color-mix(in srgb, $accent 40%, transparent);
|
|
116
|
-
|
|
117
|
-
&__title {
|
|
118
|
-
color: $accent;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
For Less, install `less` and use `ui/style.less`.
|
|
124
|
-
|
|
125
|
-
#### Emotion
|
|
126
|
-
|
|
127
|
-
Emotion dependencies may be in `dependencies` or `devDependencies`; Vite can
|
|
128
|
-
bundle them when they are installed and imported by the plugin.
|
|
129
|
-
|
|
130
|
-
For `styled`, no Vite config change is needed:
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
npm i @emotion/react @emotion/styled
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
```tsx
|
|
137
|
-
import styled from "@emotion/styled";
|
|
138
|
-
|
|
139
|
-
const Panel = styled.div({
|
|
140
|
-
display: "grid",
|
|
141
|
-
gap: 12,
|
|
142
|
-
});
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
For Emotion's `css` prop, pass React plugin options through `muscat()` and add
|
|
146
|
-
`jsxImportSource` to `tsconfig.json`:
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
npm i @emotion/react @emotion/styled
|
|
150
|
-
npm i -D @emotion/babel-plugin
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
```ts
|
|
154
|
-
// vite.config.ts
|
|
155
|
-
import { defineConfig } from "vite";
|
|
156
|
-
import tailwindcss from "@tailwindcss/vite";
|
|
157
|
-
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
158
|
-
|
|
159
|
-
export default defineConfig({
|
|
160
|
-
plugins: [
|
|
161
|
-
tailwindcss(),
|
|
162
|
-
muscat({
|
|
163
|
-
react: {
|
|
164
|
-
jsxImportSource: "@emotion/react",
|
|
165
|
-
babel: {
|
|
166
|
-
plugins: ["@emotion/babel-plugin"],
|
|
167
|
-
},
|
|
168
|
-
},
|
|
169
|
-
}),
|
|
170
|
-
],
|
|
171
|
-
});
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
```json
|
|
175
|
-
{
|
|
176
|
-
"compilerOptions": {
|
|
177
|
-
"jsxImportSource": "@emotion/react"
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
Emotion `Global` writes global CSS at runtime, so scope it manually or avoid it
|
|
183
|
-
inside plugins.
|
|
184
|
-
|
|
185
62
|
### useRb() hook
|
|
186
63
|
|
|
187
64
|
Access the communication API between the plugin module and UI from any plugin component.
|
|
@@ -232,12 +109,11 @@ if (ok) {
|
|
|
232
109
|
}
|
|
233
110
|
```
|
|
234
111
|
|
|
235
|
-
### Saving and restoring
|
|
112
|
+
### Saving and restoring your program command step (`useRbFormData` / `useRbSave`)
|
|
236
113
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
plugin — persists the data (IndexedDB, backend, etc.).
|
|
114
|
+
Use these only in your `program.panel` UI, where the user edits your program
|
|
115
|
+
command step: `useRbFormData` gives back the values saved in the step, and
|
|
116
|
+
`useRbSave` hands the current values to Muscat when the step is saved.
|
|
241
117
|
|
|
242
118
|
```tsx
|
|
243
119
|
import { useState } from "react";
|
|
@@ -1246,3 +1122,128 @@ muscat-pk sdk update # update Python SDK to latest
|
|
|
1246
1122
|
muscat-pk update # update muscat-plugin-kit itself
|
|
1247
1123
|
muscat-pk uninstall # remove muscat-pk itself
|
|
1248
1124
|
```
|
|
1125
|
+
|
|
1126
|
+
---
|
|
1127
|
+
|
|
1128
|
+
## Styles
|
|
1129
|
+
|
|
1130
|
+
`muscat()` automatically loads `ui/style.{css,scss,sass,less}` (or
|
|
1131
|
+
`ui/styles.{css,scss,sass,less}`) for every UI entry, plus
|
|
1132
|
+
`ui/{entry}.{css,scss,sass,less}` for a matching entry-specific stylesheet. You
|
|
1133
|
+
do not need to import CSS from every `.tsx` file.
|
|
1134
|
+
|
|
1135
|
+
The scaffold uses Tailwind's theme/utilities layers only, so plugin utilities
|
|
1136
|
+
are generated from files under `ui/` without applying Tailwind preflight resets
|
|
1137
|
+
to the host page.
|
|
1138
|
+
|
|
1139
|
+
Built CSS selectors are scoped under the current plugin id
|
|
1140
|
+
(`[data-muscat-plugin-id="..."]`). CSS-in-JS libraries such as Emotion work
|
|
1141
|
+
normally, but global styles should be scoped by the author.
|
|
1142
|
+
|
|
1143
|
+
### Tailwind
|
|
1144
|
+
|
|
1145
|
+
This template enables Tailwind in `vite.config.ts`:
|
|
1146
|
+
|
|
1147
|
+
```ts
|
|
1148
|
+
import { defineConfig } from "vite";
|
|
1149
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
1150
|
+
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
1151
|
+
|
|
1152
|
+
export default defineConfig({
|
|
1153
|
+
plugins: [tailwindcss(), muscat()],
|
|
1154
|
+
});
|
|
1155
|
+
```
|
|
1156
|
+
|
|
1157
|
+
The default `ui/style.css` uses Tailwind theme/utilities only, not preflight:
|
|
1158
|
+
|
|
1159
|
+
```css
|
|
1160
|
+
@layer theme, utilities;
|
|
1161
|
+
|
|
1162
|
+
@import "tailwindcss/theme.css" layer(theme);
|
|
1163
|
+
@import "tailwindcss/utilities.css" layer(utilities);
|
|
1164
|
+
|
|
1165
|
+
@source "./**/*.{ts,tsx}";
|
|
1166
|
+
```
|
|
1167
|
+
|
|
1168
|
+
### SCSS, Sass, and Less
|
|
1169
|
+
|
|
1170
|
+
Install the preprocessor package, then create one of the auto-loaded style files.
|
|
1171
|
+
|
|
1172
|
+
```bash
|
|
1173
|
+
npm i -D sass
|
|
1174
|
+
```
|
|
1175
|
+
|
|
1176
|
+
```scss
|
|
1177
|
+
/* ui/style.scss */
|
|
1178
|
+
$accent: #3b82f6;
|
|
1179
|
+
|
|
1180
|
+
.panel {
|
|
1181
|
+
border: 1px solid color-mix(in srgb, $accent 40%, transparent);
|
|
1182
|
+
|
|
1183
|
+
&__title {
|
|
1184
|
+
color: $accent;
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
```
|
|
1188
|
+
|
|
1189
|
+
For Less, install `less` and use `ui/style.less`.
|
|
1190
|
+
|
|
1191
|
+
### Emotion
|
|
1192
|
+
|
|
1193
|
+
Emotion dependencies may be in `dependencies` or `devDependencies`; Vite can
|
|
1194
|
+
bundle them when they are installed and imported by the plugin.
|
|
1195
|
+
|
|
1196
|
+
For `styled`, no Vite config change is needed:
|
|
1197
|
+
|
|
1198
|
+
```bash
|
|
1199
|
+
npm i @emotion/react @emotion/styled
|
|
1200
|
+
```
|
|
1201
|
+
|
|
1202
|
+
```tsx
|
|
1203
|
+
import styled from "@emotion/styled";
|
|
1204
|
+
|
|
1205
|
+
const Panel = styled.div({
|
|
1206
|
+
display: "grid",
|
|
1207
|
+
gap: 12,
|
|
1208
|
+
});
|
|
1209
|
+
```
|
|
1210
|
+
|
|
1211
|
+
For Emotion's `css` prop, pass React plugin options through `muscat()` and add
|
|
1212
|
+
`jsxImportSource` to `tsconfig.json`:
|
|
1213
|
+
|
|
1214
|
+
```bash
|
|
1215
|
+
npm i @emotion/react @emotion/styled
|
|
1216
|
+
npm i -D @emotion/babel-plugin
|
|
1217
|
+
```
|
|
1218
|
+
|
|
1219
|
+
```ts
|
|
1220
|
+
// vite.config.ts
|
|
1221
|
+
import { defineConfig } from "vite";
|
|
1222
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
1223
|
+
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
1224
|
+
|
|
1225
|
+
export default defineConfig({
|
|
1226
|
+
plugins: [
|
|
1227
|
+
tailwindcss(),
|
|
1228
|
+
muscat({
|
|
1229
|
+
react: {
|
|
1230
|
+
jsxImportSource: "@emotion/react",
|
|
1231
|
+
babel: {
|
|
1232
|
+
plugins: ["@emotion/babel-plugin"],
|
|
1233
|
+
},
|
|
1234
|
+
},
|
|
1235
|
+
}),
|
|
1236
|
+
],
|
|
1237
|
+
});
|
|
1238
|
+
```
|
|
1239
|
+
|
|
1240
|
+
```json
|
|
1241
|
+
{
|
|
1242
|
+
"compilerOptions": {
|
|
1243
|
+
"jsxImportSource": "@emotion/react"
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
```
|
|
1247
|
+
|
|
1248
|
+
Emotion `Global` writes global CSS at runtime, so scope it manually or avoid it
|
|
1249
|
+
inside plugins.
|
|
@@ -59,129 +59,6 @@ production, Muscat provides `@rainbow-robotics/plugin-ui`, React, and ReactDOM
|
|
|
59
59
|
through the host import map; plugin UI build output imports those as host
|
|
60
60
|
externals.
|
|
61
61
|
|
|
62
|
-
### Styles
|
|
63
|
-
|
|
64
|
-
`muscat()` automatically loads `ui/style.{css,scss,sass,less}` (or
|
|
65
|
-
`ui/styles.{css,scss,sass,less}`) for every UI entry, plus
|
|
66
|
-
`ui/{entry}.{css,scss,sass,less}` for a matching entry-specific stylesheet. You
|
|
67
|
-
do not need to import CSS from every `.tsx` file.
|
|
68
|
-
|
|
69
|
-
The scaffold uses Tailwind's theme/utilities layers only, so plugin utilities
|
|
70
|
-
are generated from files under `ui/` without applying Tailwind preflight resets
|
|
71
|
-
to the host page.
|
|
72
|
-
|
|
73
|
-
Built CSS selectors are scoped under the current plugin id
|
|
74
|
-
(`[data-muscat-plugin-id="..."]`). CSS-in-JS libraries such as Emotion work
|
|
75
|
-
normally, but global styles should be scoped by the author.
|
|
76
|
-
|
|
77
|
-
#### Tailwind
|
|
78
|
-
|
|
79
|
-
This template enables Tailwind in `vite.config.ts`:
|
|
80
|
-
|
|
81
|
-
```ts
|
|
82
|
-
import { defineConfig } from "vite";
|
|
83
|
-
import tailwindcss from "@tailwindcss/vite";
|
|
84
|
-
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
85
|
-
|
|
86
|
-
export default defineConfig({
|
|
87
|
-
plugins: [tailwindcss(), muscat()],
|
|
88
|
-
});
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
The default `ui/style.css` uses Tailwind theme/utilities only, not preflight:
|
|
92
|
-
|
|
93
|
-
```css
|
|
94
|
-
@layer theme, utilities;
|
|
95
|
-
|
|
96
|
-
@import "tailwindcss/theme.css" layer(theme);
|
|
97
|
-
@import "tailwindcss/utilities.css" layer(utilities);
|
|
98
|
-
|
|
99
|
-
@source "./**/*.{ts,tsx}";
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
#### SCSS, Sass, and Less
|
|
103
|
-
|
|
104
|
-
Install the preprocessor package, then create one of the auto-loaded style files.
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npm i -D sass
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
```scss
|
|
111
|
-
/* ui/style.scss */
|
|
112
|
-
$accent: #3b82f6;
|
|
113
|
-
|
|
114
|
-
.panel {
|
|
115
|
-
border: 1px solid color-mix(in srgb, $accent 40%, transparent);
|
|
116
|
-
|
|
117
|
-
&__title {
|
|
118
|
-
color: $accent;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
For Less, install `less` and use `ui/style.less`.
|
|
124
|
-
|
|
125
|
-
#### Emotion
|
|
126
|
-
|
|
127
|
-
Emotion dependencies may be in `dependencies` or `devDependencies`; Vite can
|
|
128
|
-
bundle them when they are installed and imported by the plugin.
|
|
129
|
-
|
|
130
|
-
For `styled`, no Vite config change is needed:
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
npm i @emotion/react @emotion/styled
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
```tsx
|
|
137
|
-
import styled from "@emotion/styled";
|
|
138
|
-
|
|
139
|
-
const Panel = styled.div({
|
|
140
|
-
display: "grid",
|
|
141
|
-
gap: 12,
|
|
142
|
-
});
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
For Emotion's `css` prop, pass React plugin options through `muscat()` and add
|
|
146
|
-
`jsxImportSource` to `tsconfig.json`:
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
npm i @emotion/react @emotion/styled
|
|
150
|
-
npm i -D @emotion/babel-plugin
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
```ts
|
|
154
|
-
// vite.config.ts
|
|
155
|
-
import { defineConfig } from "vite";
|
|
156
|
-
import tailwindcss from "@tailwindcss/vite";
|
|
157
|
-
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
158
|
-
|
|
159
|
-
export default defineConfig({
|
|
160
|
-
plugins: [
|
|
161
|
-
tailwindcss(),
|
|
162
|
-
muscat({
|
|
163
|
-
react: {
|
|
164
|
-
jsxImportSource: "@emotion/react",
|
|
165
|
-
babel: {
|
|
166
|
-
plugins: ["@emotion/babel-plugin"],
|
|
167
|
-
},
|
|
168
|
-
},
|
|
169
|
-
}),
|
|
170
|
-
],
|
|
171
|
-
});
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
```json
|
|
175
|
-
{
|
|
176
|
-
"compilerOptions": {
|
|
177
|
-
"jsxImportSource": "@emotion/react"
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
Emotion `Global` writes global CSS at runtime, so scope it manually or avoid it
|
|
183
|
-
inside plugins.
|
|
184
|
-
|
|
185
62
|
### useRb() hook
|
|
186
63
|
|
|
187
64
|
Access the communication API between the plugin module and UI from any plugin component.
|
|
@@ -232,12 +109,11 @@ if (ok) {
|
|
|
232
109
|
}
|
|
233
110
|
```
|
|
234
111
|
|
|
235
|
-
### Saving and restoring
|
|
112
|
+
### Saving and restoring your program command step (`useRbFormData` / `useRbSave`)
|
|
236
113
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
plugin — persists the data (IndexedDB, backend, etc.).
|
|
114
|
+
Use these only in your `program.panel` UI, where the user edits your program
|
|
115
|
+
command step: `useRbFormData` gives back the values saved in the step, and
|
|
116
|
+
`useRbSave` hands the current values to Muscat when the step is saved.
|
|
241
117
|
|
|
242
118
|
```tsx
|
|
243
119
|
import { useState } from "react";
|
|
@@ -1010,3 +886,128 @@ muscat-pk type change # switch backend type
|
|
|
1010
886
|
muscat-pk update # update muscat-plugin-kit itself
|
|
1011
887
|
muscat-pk uninstall # remove muscat-pk itself
|
|
1012
888
|
```
|
|
889
|
+
|
|
890
|
+
---
|
|
891
|
+
|
|
892
|
+
## Styles
|
|
893
|
+
|
|
894
|
+
`muscat()` automatically loads `ui/style.{css,scss,sass,less}` (or
|
|
895
|
+
`ui/styles.{css,scss,sass,less}`) for every UI entry, plus
|
|
896
|
+
`ui/{entry}.{css,scss,sass,less}` for a matching entry-specific stylesheet. You
|
|
897
|
+
do not need to import CSS from every `.tsx` file.
|
|
898
|
+
|
|
899
|
+
The scaffold uses Tailwind's theme/utilities layers only, so plugin utilities
|
|
900
|
+
are generated from files under `ui/` without applying Tailwind preflight resets
|
|
901
|
+
to the host page.
|
|
902
|
+
|
|
903
|
+
Built CSS selectors are scoped under the current plugin id
|
|
904
|
+
(`[data-muscat-plugin-id="..."]`). CSS-in-JS libraries such as Emotion work
|
|
905
|
+
normally, but global styles should be scoped by the author.
|
|
906
|
+
|
|
907
|
+
### Tailwind
|
|
908
|
+
|
|
909
|
+
This template enables Tailwind in `vite.config.ts`:
|
|
910
|
+
|
|
911
|
+
```ts
|
|
912
|
+
import { defineConfig } from "vite";
|
|
913
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
914
|
+
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
915
|
+
|
|
916
|
+
export default defineConfig({
|
|
917
|
+
plugins: [tailwindcss(), muscat()],
|
|
918
|
+
});
|
|
919
|
+
```
|
|
920
|
+
|
|
921
|
+
The default `ui/style.css` uses Tailwind theme/utilities only, not preflight:
|
|
922
|
+
|
|
923
|
+
```css
|
|
924
|
+
@layer theme, utilities;
|
|
925
|
+
|
|
926
|
+
@import "tailwindcss/theme.css" layer(theme);
|
|
927
|
+
@import "tailwindcss/utilities.css" layer(utilities);
|
|
928
|
+
|
|
929
|
+
@source "./**/*.{ts,tsx}";
|
|
930
|
+
```
|
|
931
|
+
|
|
932
|
+
### SCSS, Sass, and Less
|
|
933
|
+
|
|
934
|
+
Install the preprocessor package, then create one of the auto-loaded style files.
|
|
935
|
+
|
|
936
|
+
```bash
|
|
937
|
+
npm i -D sass
|
|
938
|
+
```
|
|
939
|
+
|
|
940
|
+
```scss
|
|
941
|
+
/* ui/style.scss */
|
|
942
|
+
$accent: #3b82f6;
|
|
943
|
+
|
|
944
|
+
.panel {
|
|
945
|
+
border: 1px solid color-mix(in srgb, $accent 40%, transparent);
|
|
946
|
+
|
|
947
|
+
&__title {
|
|
948
|
+
color: $accent;
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
```
|
|
952
|
+
|
|
953
|
+
For Less, install `less` and use `ui/style.less`.
|
|
954
|
+
|
|
955
|
+
### Emotion
|
|
956
|
+
|
|
957
|
+
Emotion dependencies may be in `dependencies` or `devDependencies`; Vite can
|
|
958
|
+
bundle them when they are installed and imported by the plugin.
|
|
959
|
+
|
|
960
|
+
For `styled`, no Vite config change is needed:
|
|
961
|
+
|
|
962
|
+
```bash
|
|
963
|
+
npm i @emotion/react @emotion/styled
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
```tsx
|
|
967
|
+
import styled from "@emotion/styled";
|
|
968
|
+
|
|
969
|
+
const Panel = styled.div({
|
|
970
|
+
display: "grid",
|
|
971
|
+
gap: 12,
|
|
972
|
+
});
|
|
973
|
+
```
|
|
974
|
+
|
|
975
|
+
For Emotion's `css` prop, pass React plugin options through `muscat()` and add
|
|
976
|
+
`jsxImportSource` to `tsconfig.json`:
|
|
977
|
+
|
|
978
|
+
```bash
|
|
979
|
+
npm i @emotion/react @emotion/styled
|
|
980
|
+
npm i -D @emotion/babel-plugin
|
|
981
|
+
```
|
|
982
|
+
|
|
983
|
+
```ts
|
|
984
|
+
// vite.config.ts
|
|
985
|
+
import { defineConfig } from "vite";
|
|
986
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
987
|
+
import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
|
|
988
|
+
|
|
989
|
+
export default defineConfig({
|
|
990
|
+
plugins: [
|
|
991
|
+
tailwindcss(),
|
|
992
|
+
muscat({
|
|
993
|
+
react: {
|
|
994
|
+
jsxImportSource: "@emotion/react",
|
|
995
|
+
babel: {
|
|
996
|
+
plugins: ["@emotion/babel-plugin"],
|
|
997
|
+
},
|
|
998
|
+
},
|
|
999
|
+
}),
|
|
1000
|
+
],
|
|
1001
|
+
});
|
|
1002
|
+
```
|
|
1003
|
+
|
|
1004
|
+
```json
|
|
1005
|
+
{
|
|
1006
|
+
"compilerOptions": {
|
|
1007
|
+
"jsxImportSource": "@emotion/react"
|
|
1008
|
+
}
|
|
1009
|
+
}
|
|
1010
|
+
```
|
|
1011
|
+
|
|
1012
|
+
Emotion `Global` writes global CSS at runtime, so scope it manually or avoid it
|
|
1013
|
+
inside plugins.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rainbow-robotics/muscat-plugin-kit",
|
|
3
|
-
"version": "1.10.2
|
|
3
|
+
"version": "1.10.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=20"
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
55
|
-
"@rainbow-robotics/plugin-ui": "1.10.2
|
|
56
|
-
"@rainbow-robotics/preview-host": "1.10.2
|
|
55
|
+
"@rainbow-robotics/plugin-ui": "1.10.2",
|
|
56
|
+
"@rainbow-robotics/preview-host": "1.10.2",
|
|
57
57
|
"@types/react": "^19.0.10",
|
|
58
58
|
"postcss": "^8.5.8",
|
|
59
59
|
"typescript": "^5.8.0",
|