@monkey-mini-app/panel 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.
@@ -0,0 +1,534 @@
1
+ 'use strict';
2
+
3
+ // src/themes.ts
4
+ var PALETTES = [
5
+ { id: "default", label: "\u9ED8\u8BA4", swatch: "#2563eb" },
6
+ { id: "tokyo", label: "\u4E1C\u4EAC\u591C", swatch: "#7aa2f7" },
7
+ { id: "forest", label: "\u82D4\u539F", swatch: "#a7c080" },
8
+ { id: "matcha", label: "\u8349\u8393\u62B9\u8336", swatch: "#ee9aa6" },
9
+ { id: "yellow", label: "\u836F\u4E38\u9EC4", swatch: "#facc15" },
10
+ { id: "zoro", label: "\u4E09\u5200\u6D41", swatch: "#4ade80" },
11
+ { id: "hokage", label: "\u706B\u5F71\u9ECE\u660E", swatch: "#f59e0b" },
12
+ { id: "slate", label: "\u77F3\u58A8", swatch: "#3f3f46" }
13
+ ];
14
+ var TOKENS = {
15
+ default: {
16
+ light: {
17
+ bg: "#f7f7f8",
18
+ fg: "#111111",
19
+ surface: "#ffffff",
20
+ surfaceFg: "#111111",
21
+ border: "#e5e7eb",
22
+ muted: "#f3f4f6",
23
+ mutedFg: "#6b7280",
24
+ primary: "#2563eb",
25
+ primaryFg: "#ffffff",
26
+ secondary: "#f3f4f6",
27
+ secondaryFg: "#111111",
28
+ accent: "#eff6ff",
29
+ accentFg: "#1e3a8a",
30
+ destructive: "#dc2626",
31
+ destructiveFg: "#ffffff",
32
+ ring: "#2563eb",
33
+ input: "#e5e7eb",
34
+ radius: "10px",
35
+ shadow: "rgba(15, 23, 42, 0.08)"
36
+ },
37
+ dark: {
38
+ bg: "#0b0b0c",
39
+ fg: "#f4f4f5",
40
+ surface: "#171717",
41
+ surfaceFg: "#f4f4f5",
42
+ border: "#2a2a2c",
43
+ muted: "#27272a",
44
+ mutedFg: "#a1a1aa",
45
+ primary: "#3b82f6",
46
+ primaryFg: "#ffffff",
47
+ secondary: "#27272a",
48
+ secondaryFg: "#f4f4f5",
49
+ accent: "#172554",
50
+ accentFg: "#bfdbfe",
51
+ destructive: "#ef4444",
52
+ destructiveFg: "#ffffff",
53
+ ring: "#3b82f6",
54
+ input: "#2a2a2c",
55
+ radius: "10px",
56
+ shadow: "rgba(0, 0, 0, 0.45)"
57
+ }
58
+ },
59
+ tokyo: {
60
+ light: {
61
+ bg: "#d5d6db",
62
+ fg: "#343b59",
63
+ surface: "#f2f3f8",
64
+ surfaceFg: "#343b59",
65
+ border: "#c9ccd9",
66
+ muted: "#e9eaf2",
67
+ mutedFg: "#7c82a4",
68
+ primary: "#2e7de9",
69
+ primaryFg: "#ffffff",
70
+ secondary: "#e3e5ef",
71
+ secondaryFg: "#343b59",
72
+ accent: "#dfe6f6",
73
+ accentFg: "#274a94",
74
+ destructive: "#db4b4b",
75
+ destructiveFg: "#ffffff",
76
+ ring: "#2e7de9",
77
+ input: "#e8eaf2",
78
+ radius: "10px",
79
+ shadow: "rgba(30, 40, 90, 0.12)"
80
+ },
81
+ dark: {
82
+ bg: "#1a1b26",
83
+ fg: "#a9b1d6",
84
+ surface: "#16161e",
85
+ surfaceFg: "#a9b1d6",
86
+ border: "#2b2e3d",
87
+ muted: "#1f2230",
88
+ mutedFg: "#787c99",
89
+ primary: "#7aa2f7",
90
+ primaryFg: "#1a1b26",
91
+ secondary: "#202330",
92
+ secondaryFg: "#a9b1d6",
93
+ accent: "#33467c",
94
+ accentFg: "#c0caf5",
95
+ destructive: "#f7768e",
96
+ destructiveFg: "#1a1b26",
97
+ ring: "#7aa2f7",
98
+ input: "#14141b",
99
+ radius: "10px",
100
+ shadow: "rgba(0, 0, 0, 0.5)"
101
+ }
102
+ },
103
+ forest: {
104
+ light: {
105
+ bg: "#fdf6e3",
106
+ fg: "#5c6a72",
107
+ surface: "#fefaf0",
108
+ surfaceFg: "#5c6a72",
109
+ border: "#e3ddc9",
110
+ muted: "#f2ecdb",
111
+ mutedFg: "#859289",
112
+ primary: "#93b259",
113
+ primaryFg: "#fdf6e3",
114
+ secondary: "#eae4d2",
115
+ secondaryFg: "#5c6a72",
116
+ accent: "#e0e6c8",
117
+ accentFg: "#4d6a3d",
118
+ destructive: "#e67e80",
119
+ destructiveFg: "#fdf6e3",
120
+ ring: "#93b259",
121
+ input: "#f7f1e0",
122
+ radius: "12px",
123
+ shadow: "rgba(70, 90, 60, 0.12)"
124
+ },
125
+ dark: {
126
+ bg: "#2d353b",
127
+ fg: "#d3c6aa",
128
+ surface: "#333c43",
129
+ surfaceFg: "#d3c6aa",
130
+ border: "#414c52",
131
+ muted: "#3d484d",
132
+ mutedFg: "#859289",
133
+ primary: "#a7c080",
134
+ primaryFg: "#2d353b",
135
+ secondary: "#3d484d",
136
+ secondaryFg: "#d3c6aa",
137
+ accent: "#475258",
138
+ accentFg: "#d3c6aa",
139
+ destructive: "#e67e80",
140
+ destructiveFg: "#2d353b",
141
+ ring: "#a7c080",
142
+ input: "#272e33",
143
+ radius: "12px",
144
+ shadow: "rgba(0, 0, 0, 0.4)"
145
+ }
146
+ },
147
+ matcha: {
148
+ light: {
149
+ bg: "#faf5f3",
150
+ fg: "#4c4147",
151
+ surface: "#ffffff",
152
+ surfaceFg: "#4c4147",
153
+ border: "#eadcd8",
154
+ muted: "#f3eae6",
155
+ mutedFg: "#98857f",
156
+ primary: "#e08a9c",
157
+ primaryFg: "#ffffff",
158
+ secondary: "#f0e4df",
159
+ secondaryFg: "#4c4147",
160
+ accent: "#e8f0da",
161
+ accentFg: "#5a7a3f",
162
+ destructive: "#d95f7f",
163
+ destructiveFg: "#ffffff",
164
+ ring: "#e08a9c",
165
+ input: "#f8f1ee",
166
+ radius: "14px",
167
+ shadow: "rgba(180, 90, 110, 0.12)"
168
+ },
169
+ dark: {
170
+ bg: "#28242b",
171
+ fg: "#e9d8d2",
172
+ surface: "#302b33",
173
+ surfaceFg: "#e9d8d2",
174
+ border: "#443a44",
175
+ muted: "#38313a",
176
+ mutedFg: "#b3a09f",
177
+ primary: "#ee9aa6",
178
+ primaryFg: "#28242b",
179
+ secondary: "#38313a",
180
+ secondaryFg: "#e9d8d2",
181
+ accent: "#3f4a38",
182
+ accentFg: "#c8e3b2",
183
+ destructive: "#e06c8a",
184
+ destructiveFg: "#28242b",
185
+ ring: "#ee9aa6",
186
+ input: "#231f26",
187
+ radius: "14px",
188
+ shadow: "rgba(0, 0, 0, 0.45)"
189
+ }
190
+ },
191
+ yellow: {
192
+ light: {
193
+ bg: "#faf6ef",
194
+ fg: "#3d3326",
195
+ surface: "#ffffff",
196
+ surfaceFg: "#3d3326",
197
+ border: "#e8dfcd",
198
+ muted: "#f2ecdf",
199
+ mutedFg: "#9a8a6f",
200
+ primary: "#a37b16",
201
+ primaryFg: "#ffffff",
202
+ secondary: "#ede5d3",
203
+ secondaryFg: "#3d3326",
204
+ accent: "#f7edcb",
205
+ accentFg: "#6b4e0a",
206
+ destructive: "#dc2626",
207
+ destructiveFg: "#ffffff",
208
+ ring: "#a37b16",
209
+ input: "#f7f1e4",
210
+ radius: "12px",
211
+ shadow: "rgba(140, 110, 40, 0.12)"
212
+ },
213
+ dark: {
214
+ bg: "#1c1917",
215
+ fg: "#f5f0e6",
216
+ surface: "#242019",
217
+ surfaceFg: "#f5f0e6",
218
+ border: "#3a332a",
219
+ muted: "#2a2520",
220
+ mutedFg: "#b3a68f",
221
+ primary: "#facc15",
222
+ primaryFg: "#1c1917",
223
+ secondary: "#2a2520",
224
+ secondaryFg: "#f5f0e6",
225
+ accent: "#3f3518",
226
+ accentFg: "#fde68a",
227
+ destructive: "#f87171",
228
+ destructiveFg: "#1c1917",
229
+ ring: "#facc15",
230
+ input: "#211d18",
231
+ radius: "12px",
232
+ shadow: "rgba(0, 0, 0, 0.5)"
233
+ }
234
+ },
235
+ zoro: {
236
+ light: {
237
+ bg: "#f2f6f0",
238
+ fg: "#24302a",
239
+ surface: "#ffffff",
240
+ surfaceFg: "#24302a",
241
+ border: "#d8e4d6",
242
+ muted: "#e9efe6",
243
+ mutedFg: "#7d907e",
244
+ primary: "#15803d",
245
+ primaryFg: "#ffffff",
246
+ secondary: "#e3ecdf",
247
+ secondaryFg: "#24302a",
248
+ accent: "#dcf2e2",
249
+ accentFg: "#166534",
250
+ destructive: "#dc2626",
251
+ destructiveFg: "#ffffff",
252
+ ring: "#15803d",
253
+ input: "#f4f8f2",
254
+ radius: "12px",
255
+ shadow: "rgba(30, 80, 50, 0.1)"
256
+ },
257
+ dark: {
258
+ bg: "#101512",
259
+ fg: "#d8e0d4",
260
+ surface: "#18211b",
261
+ surfaceFg: "#d8e0d4",
262
+ border: "#2c3a30",
263
+ muted: "#1d2720",
264
+ mutedFg: "#93a393",
265
+ primary: "#4ade80",
266
+ primaryFg: "#101512",
267
+ secondary: "#1d2720",
268
+ secondaryFg: "#d8e0d4",
269
+ accent: "#14532d",
270
+ accentFg: "#bbf7d0",
271
+ destructive: "#f87171",
272
+ destructiveFg: "#101512",
273
+ ring: "#4ade80",
274
+ input: "#141b16",
275
+ radius: "12px",
276
+ shadow: "rgba(0, 0, 0, 0.5)"
277
+ }
278
+ },
279
+ hokage: {
280
+ light: {
281
+ bg: "#faf3ea",
282
+ fg: "#4a3a2c",
283
+ surface: "#ffffff",
284
+ surfaceFg: "#4a3a2c",
285
+ border: "#eadcc8",
286
+ muted: "#f3e9db",
287
+ mutedFg: "#a0886a",
288
+ primary: "#c2660f",
289
+ primaryFg: "#ffffff",
290
+ secondary: "#efe2d0",
291
+ secondaryFg: "#4a3a2c",
292
+ accent: "#fbe6c8",
293
+ accentFg: "#7c4a10",
294
+ destructive: "#dc2626",
295
+ destructiveFg: "#ffffff",
296
+ ring: "#c2660f",
297
+ input: "#f8f0e4",
298
+ radius: "12px",
299
+ shadow: "rgba(150, 90, 30, 0.12)"
300
+ },
301
+ dark: {
302
+ bg: "#241a17",
303
+ fg: "#f0e3d8",
304
+ surface: "#2e211c",
305
+ surfaceFg: "#f0e3d8",
306
+ border: "#45372e",
307
+ muted: "#33251f",
308
+ mutedFg: "#b59f8c",
309
+ primary: "#f59e0b",
310
+ primaryFg: "#241a17",
311
+ secondary: "#33251f",
312
+ secondaryFg: "#f0e3d8",
313
+ accent: "#4a3024",
314
+ accentFg: "#fcd9b6",
315
+ destructive: "#ef4444",
316
+ destructiveFg: "#241a17",
317
+ ring: "#f59e0b",
318
+ input: "#201612",
319
+ radius: "12px",
320
+ shadow: "rgba(0, 0, 0, 0.5)"
321
+ }
322
+ },
323
+ slate: {
324
+ light: {
325
+ bg: "#ececee",
326
+ fg: "#09090b",
327
+ surface: "#ffffff",
328
+ surfaceFg: "#09090b",
329
+ border: "#c8c8ce",
330
+ muted: "#e0e0e5",
331
+ mutedFg: "#52525b",
332
+ primary: "#27272a",
333
+ primaryFg: "#fafafa",
334
+ secondary: "#e0e0e5",
335
+ secondaryFg: "#09090b",
336
+ accent: "#d4d4d8",
337
+ accentFg: "#18181b",
338
+ destructive: "#dc2626",
339
+ destructiveFg: "#ffffff",
340
+ ring: "#27272a",
341
+ input: "#c8c8ce",
342
+ radius: "8px",
343
+ shadow: "rgba(24, 24, 27, 0.12)"
344
+ },
345
+ dark: {
346
+ bg: "#050506",
347
+ fg: "#fafafa",
348
+ surface: "#141416",
349
+ surfaceFg: "#fafafa",
350
+ border: "#3f3f46",
351
+ muted: "#1f1f23",
352
+ mutedFg: "#a1a1aa",
353
+ primary: "#e4e4e7",
354
+ primaryFg: "#09090b",
355
+ secondary: "#1f1f23",
356
+ secondaryFg: "#fafafa",
357
+ accent: "#27272a",
358
+ accentFg: "#f4f4f5",
359
+ destructive: "#f87171",
360
+ destructiveFg: "#09090b",
361
+ ring: "#e4e4e7",
362
+ input: "#3f3f46",
363
+ radius: "8px",
364
+ shadow: "rgba(0, 0, 0, 0.6)"
365
+ }
366
+ }
367
+ };
368
+ var THEME_VAR_KEYS = [
369
+ "bg",
370
+ "fg",
371
+ "surface",
372
+ "surface-fg",
373
+ "border",
374
+ "muted",
375
+ "muted-fg",
376
+ "primary",
377
+ "primary-fg",
378
+ "secondary",
379
+ "secondary-fg",
380
+ "accent",
381
+ "accent-fg",
382
+ "destructive",
383
+ "destructive-fg",
384
+ "ring",
385
+ "input",
386
+ "radius",
387
+ "shadow"
388
+ ];
389
+ function kebabToCamel(k) {
390
+ return k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
391
+ }
392
+ function parseThemeCss(css, _id) {
393
+ const out = {};
394
+ const blockRe = /:root\[data-mode="(light|dark)"\]\s*\{([^}]*)\}/g;
395
+ let m;
396
+ while (m = blockRe.exec(String(css || ""))) {
397
+ const mode = m[1];
398
+ const vars = {};
399
+ for (const key of THEME_VAR_KEYS) {
400
+ const vm = new RegExp(`--${key}\\s*:\\s*([^;\\n]+)`).exec(m[2]);
401
+ if (vm) vars[kebabToCamel(key)] = vm[1].trim();
402
+ }
403
+ if (vars.bg && vars.fg && vars.primary) out[mode] = vars;
404
+ }
405
+ if (!out.light || !out.dark) return null;
406
+ const base = {
407
+ surfaceFg: out.light.fg,
408
+ secondary: out.light.muted,
409
+ secondaryFg: out.light.fg,
410
+ destructiveFg: "#ffffff",
411
+ radius: "12px",
412
+ shadow: "rgba(15, 23, 42, 0.1)"
413
+ };
414
+ const fill = (v) => Object.assign({}, base, v);
415
+ return { light: fill(out.light), dark: fill(out.dark) };
416
+ }
417
+ function themeLabelFromCss(css, fallback) {
418
+ const m = /\/\*\s*name\s*:\s*([^*]+)\*\//.exec(String(css || ""));
419
+ return m && m[1].trim() || fallback;
420
+ }
421
+ function clampPalette(value) {
422
+ if (value === "tokyo" || value === "forest" || value === "matcha" || value === "yellow" || value === "zoro" || value === "hokage" || value === "slate" || value === "default") {
423
+ return value;
424
+ }
425
+ if (value === "ocean" || value === "mist") return "tokyo";
426
+ if (value === "violet" || value === "ink") return "matcha";
427
+ if (value === "paper" || value === "noir") return "slate";
428
+ return "default";
429
+ }
430
+ function clampMode(value) {
431
+ return value === "dark" ? "dark" : "light";
432
+ }
433
+ function tokensOf(palette, mode) {
434
+ return TOKENS[clampPalette(palette)][clampMode(mode)];
435
+ }
436
+ function cssVars(t) {
437
+ return [
438
+ `--background:${t.bg}`,
439
+ `--foreground:${t.fg}`,
440
+ `--card:${t.surface}`,
441
+ `--card-foreground:${t.surfaceFg}`,
442
+ `--primary:${t.primary}`,
443
+ `--primary-foreground:${t.primaryFg}`,
444
+ `--secondary:${t.secondary}`,
445
+ `--secondary-foreground:${t.secondaryFg}`,
446
+ `--muted:${t.muted}`,
447
+ `--muted-foreground:${t.mutedFg}`,
448
+ `--accent:${t.accent}`,
449
+ `--accent-foreground:${t.accentFg}`,
450
+ `--destructive:${t.destructive}`,
451
+ `--destructive-foreground:${t.destructiveFg}`,
452
+ `--border:${t.border}`,
453
+ `--input:${t.input}`,
454
+ `--ring:${t.ring}`,
455
+ `--radius:${t.radius}`,
456
+ `--shadow:${t.shadow}`,
457
+ `--color-background:var(--background)`,
458
+ `--color-surface:var(--card)`,
459
+ `--color-foreground:var(--foreground)`,
460
+ `--color-primary:var(--primary)`,
461
+ `--color-primary-foreground:var(--primary-foreground)`,
462
+ `--color-muted:var(--muted)`,
463
+ `--color-muted-foreground:var(--muted-foreground)`,
464
+ `--color-border:var(--border)`,
465
+ `--radius-md:var(--radius)`,
466
+ `--space-4:16px`,
467
+ `--font-sans:ui-sans-serif,system-ui,-apple-system,sans-serif`
468
+ ].join(";");
469
+ }
470
+ function runnerThemeCss() {
471
+ const blocks = [
472
+ `:root,html[data-theme="light"]:not([data-palette]),html[data-theme="light"][data-palette="default"]{${cssVars(TOKENS.default.light)}}`,
473
+ `html[data-theme="dark"]:not([data-palette]),html[data-theme="dark"][data-palette="default"]{${cssVars(TOKENS.default.dark)}}`
474
+ ];
475
+ ["tokyo", "forest", "matcha", "yellow", "zoro", "hokage", "slate"].forEach((id) => {
476
+ blocks.push(`html[data-theme="light"][data-palette="${id}"]{${cssVars(TOKENS[id].light)}}`);
477
+ blocks.push(`html[data-theme="dark"][data-palette="${id}"]{${cssVars(TOKENS[id].dark)}}`);
478
+ });
479
+ blocks.push(`html[data-theme="dark"] input[type="date"],html[data-theme="dark"] input[type="time"],html[data-theme="dark"] input[type="datetime-local"],html[data-theme="dark"] input[type="month"],html[data-theme="dark"] input[type="week"]{color-scheme:dark}`);
480
+ blocks.push(`html[data-theme="light"] input[type="date"],html[data-theme="light"] input[type="time"],html[data-theme="light"] input[type="datetime-local"],html[data-theme="light"] input[type="month"],html[data-theme="light"] input[type="week"]{color-scheme:light}`);
481
+ return blocks.join("\n ");
482
+ }
483
+ function applyThemeTo(el, theme, palette, custom) {
484
+ const mode = clampMode(theme);
485
+ const c = custom && palette ? custom[String(palette)] : void 0;
486
+ const pal = c ? String(palette) : clampPalette(palette);
487
+ const t = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
488
+ el.setAttribute("data-theme", mode);
489
+ el.setAttribute("data-palette", pal);
490
+ const map = {
491
+ "--dsw-alias-bg": t.bg,
492
+ "--dsw-alias-fg": t.fg,
493
+ "--dsw-alias-surface": t.surface,
494
+ "--dsw-alias-border": t.border,
495
+ "--dsw-alias-muted": t.muted,
496
+ "--dsw-alias-primary": t.primary,
497
+ "--dsw-alias-primary-fg": t.primaryFg,
498
+ "--dsw-alias-accent": t.accent,
499
+ "--dsw-alias-shadow": t.shadow,
500
+ "--background": t.bg,
501
+ "--foreground": t.fg,
502
+ "--card": t.surface,
503
+ "--card-foreground": t.surfaceFg,
504
+ "--primary": t.primary,
505
+ "--primary-foreground": t.primaryFg,
506
+ "--secondary": t.secondary,
507
+ "--secondary-foreground": t.secondaryFg,
508
+ "--muted": t.muted,
509
+ "--muted-foreground": t.mutedFg,
510
+ "--accent": t.accent,
511
+ "--accent-foreground": t.accentFg,
512
+ "--border": t.border,
513
+ "--input": t.input,
514
+ "--ring": t.ring,
515
+ "--destructive": t.destructive,
516
+ "--destructive-foreground": t.destructiveFg,
517
+ "--radius": t.radius,
518
+ "--shadow": t.shadow
519
+ };
520
+ for (const k of Object.keys(map)) el.style.setProperty(k, map[k]);
521
+ el.style.background = t.bg;
522
+ el.style.color = t.fg;
523
+ return { theme: mode, palette: pal };
524
+ }
525
+
526
+ exports.PALETTES = PALETTES;
527
+ exports.applyThemeTo = applyThemeTo;
528
+ exports.clampMode = clampMode;
529
+ exports.clampPalette = clampPalette;
530
+ exports.cssVars = cssVars;
531
+ exports.parseThemeCss = parseThemeCss;
532
+ exports.runnerThemeCss = runnerThemeCss;
533
+ exports.themeLabelFromCss = themeLabelFromCss;
534
+ exports.tokensOf = tokensOf;
@@ -0,0 +1,63 @@
1
+ type PaletteId = "default" | "tokyo" | "forest" | "matcha" | "yellow" | "zoro" | "hokage" | "slate";
2
+ type ModeId = "light" | "dark";
3
+ /** Full token bag for Host chrome + iframe apps (shadcn-compatible). */
4
+ type TokenSet = {
5
+ bg: string;
6
+ fg: string;
7
+ surface: string;
8
+ surfaceFg: string;
9
+ border: string;
10
+ muted: string;
11
+ mutedFg: string;
12
+ primary: string;
13
+ primaryFg: string;
14
+ secondary: string;
15
+ secondaryFg: string;
16
+ accent: string;
17
+ accentFg: string;
18
+ destructive: string;
19
+ destructiveFg: string;
20
+ ring: string;
21
+ input: string;
22
+ radius: string;
23
+ /** soft overlay / card elevation tint */
24
+ shadow: string;
25
+ };
26
+ declare const PALETTES: {
27
+ id: PaletteId;
28
+ label: string;
29
+ swatch: string;
30
+ }[];
31
+ /**
32
+ * 解析 theme-<id>.css → { light, dark } 两套 TokenSet。
33
+ * 格式:`:root[data-mode="light"]{ --bg:#fff; --fg:#111; ... }` 与 dark 同构。
34
+ * 缺失的次要变量用默认补齐,必须提供 bg/fg/primary 才认。
35
+ */
36
+ declare function parseThemeCss(css: string, _id: string): {
37
+ light: TokenSet;
38
+ dark: TokenSet;
39
+ } | null;
40
+ /** 从主题 css 提取名称注释(`/* name: xxx *\/`) */
41
+ declare function themeLabelFromCss(css: string, fallback: string): string;
42
+ /** Accept current ids and migrate removed palettes (ocean/violet → new families). */
43
+ declare function clampPalette(value: unknown): PaletteId;
44
+ declare function clampMode(value: unknown): ModeId;
45
+ declare function tokensOf(palette: PaletteId, mode: ModeId): TokenSet;
46
+ declare function cssVars(t: TokenSet): string;
47
+ /** CSS for the iframe runner: default + 5 palettes, each light/dark. */
48
+ declare function runnerThemeCss(): string;
49
+ /** 把主题 token 应用到宿主元素(面板/容器)。custom = 宿主自定义主题表。 */
50
+ type CustomPaletteMap = Record<string, {
51
+ label?: string;
52
+ swatch?: string;
53
+ tokens?: {
54
+ light: TokenSet;
55
+ dark: TokenSet;
56
+ };
57
+ }>;
58
+ declare function applyThemeTo(el: HTMLElement, theme: unknown, palette: unknown, custom?: CustomPaletteMap): {
59
+ theme: ModeId;
60
+ palette: PaletteId;
61
+ };
62
+
63
+ export { type CustomPaletteMap, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf };
@@ -0,0 +1,63 @@
1
+ type PaletteId = "default" | "tokyo" | "forest" | "matcha" | "yellow" | "zoro" | "hokage" | "slate";
2
+ type ModeId = "light" | "dark";
3
+ /** Full token bag for Host chrome + iframe apps (shadcn-compatible). */
4
+ type TokenSet = {
5
+ bg: string;
6
+ fg: string;
7
+ surface: string;
8
+ surfaceFg: string;
9
+ border: string;
10
+ muted: string;
11
+ mutedFg: string;
12
+ primary: string;
13
+ primaryFg: string;
14
+ secondary: string;
15
+ secondaryFg: string;
16
+ accent: string;
17
+ accentFg: string;
18
+ destructive: string;
19
+ destructiveFg: string;
20
+ ring: string;
21
+ input: string;
22
+ radius: string;
23
+ /** soft overlay / card elevation tint */
24
+ shadow: string;
25
+ };
26
+ declare const PALETTES: {
27
+ id: PaletteId;
28
+ label: string;
29
+ swatch: string;
30
+ }[];
31
+ /**
32
+ * 解析 theme-<id>.css → { light, dark } 两套 TokenSet。
33
+ * 格式:`:root[data-mode="light"]{ --bg:#fff; --fg:#111; ... }` 与 dark 同构。
34
+ * 缺失的次要变量用默认补齐,必须提供 bg/fg/primary 才认。
35
+ */
36
+ declare function parseThemeCss(css: string, _id: string): {
37
+ light: TokenSet;
38
+ dark: TokenSet;
39
+ } | null;
40
+ /** 从主题 css 提取名称注释(`/* name: xxx *\/`) */
41
+ declare function themeLabelFromCss(css: string, fallback: string): string;
42
+ /** Accept current ids and migrate removed palettes (ocean/violet → new families). */
43
+ declare function clampPalette(value: unknown): PaletteId;
44
+ declare function clampMode(value: unknown): ModeId;
45
+ declare function tokensOf(palette: PaletteId, mode: ModeId): TokenSet;
46
+ declare function cssVars(t: TokenSet): string;
47
+ /** CSS for the iframe runner: default + 5 palettes, each light/dark. */
48
+ declare function runnerThemeCss(): string;
49
+ /** 把主题 token 应用到宿主元素(面板/容器)。custom = 宿主自定义主题表。 */
50
+ type CustomPaletteMap = Record<string, {
51
+ label?: string;
52
+ swatch?: string;
53
+ tokens?: {
54
+ light: TokenSet;
55
+ dark: TokenSet;
56
+ };
57
+ }>;
58
+ declare function applyThemeTo(el: HTMLElement, theme: unknown, palette: unknown, custom?: CustomPaletteMap): {
59
+ theme: ModeId;
60
+ palette: PaletteId;
61
+ };
62
+
63
+ export { type CustomPaletteMap, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf };
package/dist/themes.js ADDED
@@ -0,0 +1 @@
1
+ export { PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf } from './chunk-X3QW77RD.js';