@seedgrid/fe-components 2026.3.3-6 → 2026.3.3-8
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/dist/others/SgPlayground.d.ts.map +1 -1
- package/dist/others/SgPlayground.js +283 -41
- package/dist/sandbox.cjs +116 -68
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAijCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAuctE"}
|
|
@@ -79,7 +79,12 @@ const TIPTAP_SHIM_PACKAGES = [
|
|
|
79
79
|
"@tiptap/extension-superscript",
|
|
80
80
|
"@tiptap/extension-font-family"
|
|
81
81
|
];
|
|
82
|
-
|
|
82
|
+
// Sandpack's CRA runtime does not execute script tags from template HTML reliably.
|
|
83
|
+
// Load Tailwind as external resources so it is injected before module evaluation.
|
|
84
|
+
const SANDPACK_EXTERNAL_RESOURCES = [
|
|
85
|
+
"/sandpack-tailwind-config.js",
|
|
86
|
+
"https://cdn.tailwindcss.com"
|
|
87
|
+
];
|
|
83
88
|
const SANDPACK_QRCODE_SHIM_INDEX_JS = `const makeError = () =>
|
|
84
89
|
new Error(
|
|
85
90
|
"qrcode (node build) is not supported in Sandpack browser runtime. Update @seedgrid/fe-components to a browser-safe QR implementation."
|
|
@@ -303,6 +308,7 @@ module.exports = processShim;
|
|
|
303
308
|
module.exports.default = processShim;
|
|
304
309
|
`;
|
|
305
310
|
const SANDPACK_FALLBACK_THEME_VARS = {
|
|
311
|
+
// shadcn/ui design tokens (HSL)
|
|
306
312
|
"--background": "0 0% 100%",
|
|
307
313
|
"--foreground": "222.2 84% 4.9%",
|
|
308
314
|
"--primary": "142 76% 36%",
|
|
@@ -315,7 +321,7 @@ const SANDPACK_FALLBACK_THEME_VARS = {
|
|
|
315
321
|
"--destructive-foreground": "0 0% 100%",
|
|
316
322
|
"--border": "214.3 31.8% 91.4%",
|
|
317
323
|
"--input": "214.3 31.8% 91.4%",
|
|
318
|
-
"--ring": "
|
|
324
|
+
"--ring": "142 76% 36%",
|
|
319
325
|
"--muted": "210 40% 96.1%",
|
|
320
326
|
"--muted-foreground": "215.4 16.3% 46.9%",
|
|
321
327
|
"--card": "0 0% 100%",
|
|
@@ -323,13 +329,143 @@ const SANDPACK_FALLBACK_THEME_VARS = {
|
|
|
323
329
|
"--popover": "0 0% 100%",
|
|
324
330
|
"--popover-foreground": "222.2 84% 4.9%",
|
|
325
331
|
"--radius": "0.5rem",
|
|
332
|
+
// SeedGrid neutrals (RGB space-separated)
|
|
333
|
+
"--sg-bg": "255 255 255",
|
|
334
|
+
"--sg-surface": "248 250 252",
|
|
335
|
+
"--sg-muted-surface": "241 245 249",
|
|
336
|
+
"--sg-text": "15 23 42",
|
|
337
|
+
"--sg-muted": "100 116 139",
|
|
338
|
+
"--sg-border": "226 232 240",
|
|
339
|
+
"--sg-ring": "74 222 128",
|
|
340
|
+
"--sg-disabled": "203 213 225",
|
|
341
|
+
"--sg-on-disabled": "148 163 184",
|
|
342
|
+
"--sg-link": "22 163 74",
|
|
343
|
+
"--sg-link-hover": "21 128 61",
|
|
344
|
+
"--sg-radius": "0.5rem",
|
|
345
|
+
// On-color tokens
|
|
346
|
+
"--sg-on-primary": "255 255 255",
|
|
347
|
+
"--sg-on-secondary": "255 255 255",
|
|
348
|
+
"--sg-on-tertiary": "255 255 255",
|
|
349
|
+
"--sg-on-warning": "255 255 255",
|
|
350
|
+
"--sg-on-error": "255 255 255",
|
|
351
|
+
"--sg-on-info": "255 255 255",
|
|
352
|
+
"--sg-on-success": "255 255 255",
|
|
353
|
+
// Primary palette (green)
|
|
354
|
+
"--sg-primary-50": "240 253 244",
|
|
355
|
+
"--sg-primary-100": "220 252 231",
|
|
356
|
+
"--sg-primary-200": "187 247 208",
|
|
357
|
+
"--sg-primary-300": "134 239 172",
|
|
358
|
+
"--sg-primary-400": "74 222 128",
|
|
359
|
+
"--sg-primary-500": "34 197 94",
|
|
326
360
|
"--sg-primary-600": "22 163 74",
|
|
361
|
+
"--sg-primary-700": "21 128 61",
|
|
362
|
+
"--sg-primary-800": "22 101 52",
|
|
363
|
+
"--sg-primary-900": "20 83 45",
|
|
364
|
+
"--sg-primary-hover": "21 128 61",
|
|
365
|
+
"--sg-primary-active": "22 101 52",
|
|
366
|
+
// Secondary palette (zinc)
|
|
367
|
+
"--sg-secondary-50": "250 250 250",
|
|
368
|
+
"--sg-secondary-100": "244 244 245",
|
|
369
|
+
"--sg-secondary-200": "228 228 231",
|
|
370
|
+
"--sg-secondary-300": "212 212 216",
|
|
371
|
+
"--sg-secondary-400": "161 161 170",
|
|
372
|
+
"--sg-secondary-500": "113 113 122",
|
|
327
373
|
"--sg-secondary-600": "82 82 91",
|
|
328
|
-
"--sg-
|
|
329
|
-
"--sg-
|
|
374
|
+
"--sg-secondary-700": "63 63 70",
|
|
375
|
+
"--sg-secondary-800": "39 39 42",
|
|
376
|
+
"--sg-secondary-900": "24 24 27",
|
|
377
|
+
"--sg-secondary-hover": "63 63 70",
|
|
378
|
+
"--sg-secondary-active": "39 39 42",
|
|
379
|
+
// Tertiary palette (teal)
|
|
380
|
+
"--sg-tertiary-50": "240 253 250",
|
|
381
|
+
"--sg-tertiary-100": "204 251 241",
|
|
382
|
+
"--sg-tertiary-200": "153 246 228",
|
|
383
|
+
"--sg-tertiary-300": "94 234 212",
|
|
384
|
+
"--sg-tertiary-400": "45 212 191",
|
|
385
|
+
"--sg-tertiary-500": "20 184 166",
|
|
386
|
+
"--sg-tertiary-600": "13 148 136",
|
|
387
|
+
"--sg-tertiary-700": "15 118 110",
|
|
388
|
+
"--sg-tertiary-800": "17 94 89",
|
|
389
|
+
"--sg-tertiary-900": "19 78 74",
|
|
390
|
+
"--sg-tertiary-hover": "15 118 110",
|
|
391
|
+
"--sg-tertiary-active": "17 94 89",
|
|
392
|
+
// Warning palette (amber)
|
|
393
|
+
"--sg-warning-50": "255 251 235",
|
|
394
|
+
"--sg-warning-100": "254 243 199",
|
|
395
|
+
"--sg-warning-200": "253 230 138",
|
|
396
|
+
"--sg-warning-300": "252 211 77",
|
|
397
|
+
"--sg-warning-400": "251 191 36",
|
|
398
|
+
"--sg-warning-500": "245 158 11",
|
|
330
399
|
"--sg-warning-600": "217 119 6",
|
|
400
|
+
"--sg-warning-700": "180 83 9",
|
|
401
|
+
"--sg-warning-800": "146 64 14",
|
|
402
|
+
"--sg-warning-900": "120 53 15",
|
|
403
|
+
"--sg-warning-hover": "180 83 9",
|
|
404
|
+
"--sg-warning-active": "146 64 14",
|
|
405
|
+
// Error palette (red)
|
|
406
|
+
"--sg-error-50": "254 242 242",
|
|
407
|
+
"--sg-error-100": "254 226 226",
|
|
408
|
+
"--sg-error-200": "254 202 202",
|
|
409
|
+
"--sg-error-300": "252 165 165",
|
|
410
|
+
"--sg-error-400": "248 113 113",
|
|
411
|
+
"--sg-error-500": "239 68 68",
|
|
412
|
+
"--sg-error-600": "220 38 38",
|
|
413
|
+
"--sg-error-700": "185 28 28",
|
|
414
|
+
"--sg-error-800": "153 27 27",
|
|
415
|
+
"--sg-error-900": "127 29 29",
|
|
416
|
+
"--sg-error-hover": "185 28 28",
|
|
417
|
+
"--sg-error-active": "153 27 27",
|
|
418
|
+
// Info palette (sky)
|
|
419
|
+
"--sg-info-50": "240 249 255",
|
|
420
|
+
"--sg-info-100": "224 242 254",
|
|
421
|
+
"--sg-info-200": "186 230 253",
|
|
422
|
+
"--sg-info-300": "125 211 252",
|
|
423
|
+
"--sg-info-400": "56 189 248",
|
|
424
|
+
"--sg-info-500": "14 165 233",
|
|
331
425
|
"--sg-info-600": "2 132 199",
|
|
332
|
-
"--sg-
|
|
426
|
+
"--sg-info-700": "3 105 161",
|
|
427
|
+
"--sg-info-800": "7 89 133",
|
|
428
|
+
"--sg-info-900": "12 74 110",
|
|
429
|
+
"--sg-info-hover": "3 105 161",
|
|
430
|
+
"--sg-info-active": "7 89 133",
|
|
431
|
+
// Success palette (green, same as primary)
|
|
432
|
+
"--sg-success-50": "240 253 244",
|
|
433
|
+
"--sg-success-100": "220 252 231",
|
|
434
|
+
"--sg-success-200": "187 247 208",
|
|
435
|
+
"--sg-success-300": "134 239 172",
|
|
436
|
+
"--sg-success-400": "74 222 128",
|
|
437
|
+
"--sg-success-500": "34 197 94",
|
|
438
|
+
"--sg-success-600": "22 163 74",
|
|
439
|
+
"--sg-success-700": "21 128 61",
|
|
440
|
+
"--sg-success-800": "22 101 52",
|
|
441
|
+
"--sg-success-900": "20 83 45",
|
|
442
|
+
"--sg-success-hover": "21 128 61",
|
|
443
|
+
"--sg-success-active": "22 101 52",
|
|
444
|
+
// Button component vars (green primary default)
|
|
445
|
+
"--sg-btn-bg": "rgb(22 163 74)",
|
|
446
|
+
"--sg-btn-fg": "rgb(255 255 255)",
|
|
447
|
+
"--sg-btn-border": "rgb(22 163 74)",
|
|
448
|
+
"--sg-btn-hover-bg": "rgb(21 128 61)",
|
|
449
|
+
"--sg-btn-hover-fg": "rgb(255 255 255)",
|
|
450
|
+
"--sg-btn-hover-border": "rgb(21 128 61)",
|
|
451
|
+
"--sg-btn-active-bg": "rgb(22 101 52)",
|
|
452
|
+
"--sg-btn-ring": "rgb(74 222 128 / 0.4)",
|
|
453
|
+
"--sg-btn-tint": "22 163 74",
|
|
454
|
+
// Avatar component vars
|
|
455
|
+
"--sg-avatar-bg": "rgb(22 163 74)",
|
|
456
|
+
"--sg-avatar-fg": "rgb(255 255 255)",
|
|
457
|
+
"--sg-avatar-border": "transparent",
|
|
458
|
+
"--sg-avatar-ring": "rgb(74 222 128)",
|
|
459
|
+
// Badge component vars
|
|
460
|
+
"--sg-badge-bg": "rgb(240 253 244)",
|
|
461
|
+
"--sg-badge-fg": "rgb(22 163 74)",
|
|
462
|
+
"--sg-badge-border": "rgb(187 247 208)",
|
|
463
|
+
"--sg-badge-hover-bg": "rgb(220 252 231)",
|
|
464
|
+
"--sg-badge-hover-fg": "rgb(21 128 61)",
|
|
465
|
+
"--sg-badge-hover-border": "rgb(134 239 172)",
|
|
466
|
+
"--sg-badge-ring": "rgb(74 222 128)",
|
|
467
|
+
"--sg-badge-soft-bg": "rgb(240 253 244)",
|
|
468
|
+
"--sg-badge-soft-fg": "rgb(22 163 74)",
|
|
333
469
|
};
|
|
334
470
|
const SANDPACK_CORE_THEME_VARS = [
|
|
335
471
|
"--background",
|
|
@@ -343,7 +479,63 @@ const SANDPACK_CORE_THEME_VARS = [
|
|
|
343
479
|
"--destructive",
|
|
344
480
|
"--destructive-foreground",
|
|
345
481
|
"--border",
|
|
346
|
-
"--
|
|
482
|
+
"--input",
|
|
483
|
+
"--ring",
|
|
484
|
+
"--muted",
|
|
485
|
+
"--muted-foreground",
|
|
486
|
+
"--radius"
|
|
487
|
+
];
|
|
488
|
+
// Explicit list of --sg-* vars to read from host via getPropertyValue().
|
|
489
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
490
|
+
// so we must call getPropertyValue() for each var by name.
|
|
491
|
+
const SANDPACK_SG_VARS = [
|
|
492
|
+
// Neutrals
|
|
493
|
+
"--sg-bg", "--sg-surface", "--sg-muted-surface",
|
|
494
|
+
"--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
|
|
495
|
+
"--sg-disabled", "--sg-on-disabled",
|
|
496
|
+
"--sg-link", "--sg-link-hover",
|
|
497
|
+
"--sg-radius",
|
|
498
|
+
// On-color tokens
|
|
499
|
+
"--sg-on-primary", "--sg-on-secondary", "--sg-on-tertiary",
|
|
500
|
+
"--sg-on-warning", "--sg-on-error", "--sg-on-info", "--sg-on-success",
|
|
501
|
+
// Primary palette
|
|
502
|
+
"--sg-primary-50", "--sg-primary-100", "--sg-primary-200", "--sg-primary-300",
|
|
503
|
+
"--sg-primary-400", "--sg-primary-500", "--sg-primary-600", "--sg-primary-700",
|
|
504
|
+
"--sg-primary-800", "--sg-primary-900", "--sg-primary-hover", "--sg-primary-active",
|
|
505
|
+
// Secondary palette
|
|
506
|
+
"--sg-secondary-50", "--sg-secondary-100", "--sg-secondary-200", "--sg-secondary-300",
|
|
507
|
+
"--sg-secondary-400", "--sg-secondary-500", "--sg-secondary-600", "--sg-secondary-700",
|
|
508
|
+
"--sg-secondary-800", "--sg-secondary-900", "--sg-secondary-hover", "--sg-secondary-active",
|
|
509
|
+
// Tertiary palette
|
|
510
|
+
"--sg-tertiary-50", "--sg-tertiary-100", "--sg-tertiary-200", "--sg-tertiary-300",
|
|
511
|
+
"--sg-tertiary-400", "--sg-tertiary-500", "--sg-tertiary-600", "--sg-tertiary-700",
|
|
512
|
+
"--sg-tertiary-800", "--sg-tertiary-900", "--sg-tertiary-hover", "--sg-tertiary-active",
|
|
513
|
+
// Warning palette
|
|
514
|
+
"--sg-warning-50", "--sg-warning-100", "--sg-warning-200", "--sg-warning-300",
|
|
515
|
+
"--sg-warning-400", "--sg-warning-500", "--sg-warning-600", "--sg-warning-700",
|
|
516
|
+
"--sg-warning-800", "--sg-warning-900", "--sg-warning-hover", "--sg-warning-active",
|
|
517
|
+
// Error palette
|
|
518
|
+
"--sg-error-50", "--sg-error-100", "--sg-error-200", "--sg-error-300",
|
|
519
|
+
"--sg-error-400", "--sg-error-500", "--sg-error-600", "--sg-error-700",
|
|
520
|
+
"--sg-error-800", "--sg-error-900", "--sg-error-hover", "--sg-error-active",
|
|
521
|
+
// Info palette
|
|
522
|
+
"--sg-info-50", "--sg-info-100", "--sg-info-200", "--sg-info-300",
|
|
523
|
+
"--sg-info-400", "--sg-info-500", "--sg-info-600", "--sg-info-700",
|
|
524
|
+
"--sg-info-800", "--sg-info-900", "--sg-info-hover", "--sg-info-active",
|
|
525
|
+
// Success palette
|
|
526
|
+
"--sg-success-50", "--sg-success-100", "--sg-success-200", "--sg-success-300",
|
|
527
|
+
"--sg-success-400", "--sg-success-500", "--sg-success-600", "--sg-success-700",
|
|
528
|
+
"--sg-success-800", "--sg-success-900", "--sg-success-hover", "--sg-success-active",
|
|
529
|
+
// Button component vars
|
|
530
|
+
"--sg-btn-bg", "--sg-btn-fg", "--sg-btn-border",
|
|
531
|
+
"--sg-btn-hover-bg", "--sg-btn-hover-fg", "--sg-btn-hover-border",
|
|
532
|
+
"--sg-btn-active-bg", "--sg-btn-ring", "--sg-btn-tint",
|
|
533
|
+
// Avatar component vars
|
|
534
|
+
"--sg-avatar-bg", "--sg-avatar-fg", "--sg-avatar-border", "--sg-avatar-ring",
|
|
535
|
+
// Badge component vars
|
|
536
|
+
"--sg-badge-bg", "--sg-badge-fg", "--sg-badge-border",
|
|
537
|
+
"--sg-badge-hover-bg", "--sg-badge-hover-fg", "--sg-badge-hover-border",
|
|
538
|
+
"--sg-badge-ring", "--sg-badge-soft-bg", "--sg-badge-soft-fg",
|
|
347
539
|
];
|
|
348
540
|
const SANDPACK_BASE_STYLES_CSS = `* {
|
|
349
541
|
box-sizing: border-box;
|
|
@@ -392,42 +584,90 @@ const SANDPACK_HOST_STYLES_CSS = `
|
|
|
392
584
|
left: auto !important;
|
|
393
585
|
}
|
|
394
586
|
`;
|
|
395
|
-
|
|
396
|
-
|
|
587
|
+
const SANDPACK_TAILWIND_CONFIG_JS = `function sgPalette(name) {
|
|
588
|
+
return {
|
|
589
|
+
50: "rgb(var(--sg-" + name + "-50) / <alpha-value>)",
|
|
590
|
+
100: "rgb(var(--sg-" + name + "-100) / <alpha-value>)",
|
|
591
|
+
200: "rgb(var(--sg-" + name + "-200) / <alpha-value>)",
|
|
592
|
+
300: "rgb(var(--sg-" + name + "-300) / <alpha-value>)",
|
|
593
|
+
400: "rgb(var(--sg-" + name + "-400) / <alpha-value>)",
|
|
594
|
+
500: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
595
|
+
600: "rgb(var(--sg-" + name + "-600) / <alpha-value>)",
|
|
596
|
+
700: "rgb(var(--sg-" + name + "-700) / <alpha-value>)",
|
|
597
|
+
800: "rgb(var(--sg-" + name + "-800) / <alpha-value>)",
|
|
598
|
+
900: "rgb(var(--sg-" + name + "-900) / <alpha-value>)",
|
|
599
|
+
DEFAULT: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
600
|
+
hover: "rgb(var(--sg-" + name + "-hover) / <alpha-value>)",
|
|
601
|
+
active: "rgb(var(--sg-" + name + "-active) / <alpha-value>)"
|
|
602
|
+
};
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
window.tailwind = window.tailwind || {};
|
|
606
|
+
window.tailwind.config = {
|
|
607
|
+
theme: {
|
|
608
|
+
extend: {
|
|
609
|
+
colors: {
|
|
610
|
+
border: "hsl(var(--border))",
|
|
611
|
+
input: "hsl(var(--input))",
|
|
612
|
+
ring: "hsl(var(--ring))",
|
|
613
|
+
background: "hsl(var(--background))",
|
|
614
|
+
foreground: "hsl(var(--foreground))",
|
|
615
|
+
primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
|
|
616
|
+
secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
|
|
617
|
+
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
|
|
618
|
+
muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
|
|
619
|
+
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
|
|
620
|
+
card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
|
|
621
|
+
popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
|
|
622
|
+
sg: {
|
|
623
|
+
bg: "rgb(var(--sg-bg) / <alpha-value>)",
|
|
624
|
+
surface: "rgb(var(--sg-surface) / <alpha-value>)",
|
|
625
|
+
"muted-surface": "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
626
|
+
border: "rgb(var(--sg-border) / <alpha-value>)",
|
|
627
|
+
ring: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
628
|
+
focus: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
629
|
+
text: "rgb(var(--sg-text) / <alpha-value>)",
|
|
630
|
+
muted: "rgb(var(--sg-muted) / <alpha-value>)",
|
|
631
|
+
disabled: "rgb(var(--sg-disabled) / <alpha-value>)",
|
|
632
|
+
"on-disabled": "rgb(var(--sg-on-disabled) / <alpha-value>)",
|
|
633
|
+
hover: "rgb(var(--sg-primary-50) / <alpha-value>)",
|
|
634
|
+
hover2: "rgb(var(--sg-primary-100) / <alpha-value>)",
|
|
635
|
+
surface2: "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
636
|
+
link: "rgb(var(--sg-link) / <alpha-value>)",
|
|
637
|
+
"link-hover": "rgb(var(--sg-link-hover) / <alpha-value>)",
|
|
638
|
+
"on-primary": "rgb(var(--sg-on-primary) / <alpha-value>)",
|
|
639
|
+
"on-secondary": "rgb(var(--sg-on-secondary) / <alpha-value>)",
|
|
640
|
+
"on-tertiary": "rgb(var(--sg-on-tertiary) / <alpha-value>)",
|
|
641
|
+
"on-warning": "rgb(var(--sg-on-warning) / <alpha-value>)",
|
|
642
|
+
"on-error": "rgb(var(--sg-on-error) / <alpha-value>)",
|
|
643
|
+
"on-info": "rgb(var(--sg-on-info) / <alpha-value>)",
|
|
644
|
+
"on-success": "rgb(var(--sg-on-success) / <alpha-value>)",
|
|
645
|
+
primary: sgPalette("primary"),
|
|
646
|
+
secondary: sgPalette("secondary"),
|
|
647
|
+
tertiary: sgPalette("tertiary"),
|
|
648
|
+
warning: sgPalette("warning"),
|
|
649
|
+
error: sgPalette("error"),
|
|
650
|
+
info: sgPalette("info"),
|
|
651
|
+
success: sgPalette("success")
|
|
652
|
+
}
|
|
653
|
+
},
|
|
654
|
+
borderRadius: {
|
|
655
|
+
lg: "var(--radius)",
|
|
656
|
+
md: "calc(var(--radius) - 2px)",
|
|
657
|
+
sm: "calc(var(--radius) - 4px)",
|
|
658
|
+
sg: "var(--sg-radius)"
|
|
659
|
+
}
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
};
|
|
663
|
+
`;
|
|
664
|
+
// Keep CRA's expected HTML entry file path for react/react-ts templates.
|
|
397
665
|
const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
|
|
398
666
|
<html lang="en">
|
|
399
667
|
<head>
|
|
400
668
|
<meta charset="UTF-8">
|
|
401
669
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
402
670
|
<title>Document</title>
|
|
403
|
-
<script>
|
|
404
|
-
tailwind = {
|
|
405
|
-
config: {
|
|
406
|
-
theme: {
|
|
407
|
-
extend: {
|
|
408
|
-
colors: {
|
|
409
|
-
border: "hsl(var(--border))",
|
|
410
|
-
input: "hsl(var(--input))",
|
|
411
|
-
ring: "hsl(var(--ring))",
|
|
412
|
-
background: "hsl(var(--background))",
|
|
413
|
-
foreground: "hsl(var(--foreground))",
|
|
414
|
-
primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
|
|
415
|
-
secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
|
|
416
|
-
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
|
|
417
|
-
muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
|
|
418
|
-
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" }
|
|
419
|
-
},
|
|
420
|
-
borderRadius: {
|
|
421
|
-
lg: "var(--radius)",
|
|
422
|
-
md: "calc(var(--radius) - 2px)",
|
|
423
|
-
sm: "calc(var(--radius) - 4px)"
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
</script>
|
|
430
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
431
671
|
</head>
|
|
432
672
|
<body>
|
|
433
673
|
<div id="root"></div>
|
|
@@ -608,10 +848,9 @@ function readThemeVarsFromHost() {
|
|
|
608
848
|
if (value)
|
|
609
849
|
themeVars[varName] = value;
|
|
610
850
|
}
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
continue;
|
|
851
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
852
|
+
// so we explicitly call getPropertyValue() for each known --sg-* var.
|
|
853
|
+
for (const varName of SANDPACK_SG_VARS) {
|
|
615
854
|
const value = computed.getPropertyValue(varName).trim();
|
|
616
855
|
if (value)
|
|
617
856
|
themeVars[varName] = value;
|
|
@@ -872,8 +1111,11 @@ export default function SgPlayground(props) {
|
|
|
872
1111
|
// Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
|
|
873
1112
|
files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
|
|
874
1113
|
// Virtual index.html: loads Tailwind v3 play CDN with SeedGrid design-token config.
|
|
875
|
-
// This
|
|
1114
|
+
// This keeps CRA's public/index.html entry path expected by the react/react-ts templates.
|
|
876
1115
|
files["/public/index.html"] = { code: SANDPACK_TAILWIND_INDEX_HTML, hidden: true };
|
|
1116
|
+
// Tailwind config is loaded via externalResources because Sandpack runtime
|
|
1117
|
+
// does not execute scripts from template HTML head/body consistently.
|
|
1118
|
+
files["/sandpack-tailwind-config.js"] = { code: SANDPACK_TAILWIND_CONFIG_JS, hidden: true };
|
|
877
1119
|
// Sandpack runtime can evaluate JSON files as plain JS modules.
|
|
878
1120
|
// Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
|
|
879
1121
|
// .json shims cover current npm versions; .js shims cover new versions after JSON→TypeScript conversion.
|