@seedgrid/fe-components 2026.3.3-5 → 2026.3.3-7
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 +324 -13
- package/dist/sandbox.cjs +130 -40
- 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;AA8iCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoctE"}
|
|
@@ -79,10 +79,7 @@ const TIPTAP_SHIM_PACKAGES = [
|
|
|
79
79
|
"@tiptap/extension-superscript",
|
|
80
80
|
"@tiptap/extension-font-family"
|
|
81
81
|
];
|
|
82
|
-
const SANDPACK_EXTERNAL_RESOURCES = [
|
|
83
|
-
// Prebuilt utility CSS so classes from @seedgrid/fe-components can render inside Sandpack
|
|
84
|
-
"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
|
|
85
|
-
];
|
|
82
|
+
const SANDPACK_EXTERNAL_RESOURCES = [];
|
|
86
83
|
const SANDPACK_QRCODE_SHIM_INDEX_JS = `const makeError = () =>
|
|
87
84
|
new Error(
|
|
88
85
|
"qrcode (node build) is not supported in Sandpack browser runtime. Update @seedgrid/fe-components to a browser-safe QR implementation."
|
|
@@ -306,6 +303,7 @@ module.exports = processShim;
|
|
|
306
303
|
module.exports.default = processShim;
|
|
307
304
|
`;
|
|
308
305
|
const SANDPACK_FALLBACK_THEME_VARS = {
|
|
306
|
+
// shadcn/ui design tokens (HSL)
|
|
309
307
|
"--background": "0 0% 100%",
|
|
310
308
|
"--foreground": "222.2 84% 4.9%",
|
|
311
309
|
"--primary": "142 76% 36%",
|
|
@@ -317,14 +315,152 @@ const SANDPACK_FALLBACK_THEME_VARS = {
|
|
|
317
315
|
"--destructive": "0 84.2% 60.2%",
|
|
318
316
|
"--destructive-foreground": "0 0% 100%",
|
|
319
317
|
"--border": "214.3 31.8% 91.4%",
|
|
320
|
-
"--
|
|
318
|
+
"--input": "214.3 31.8% 91.4%",
|
|
319
|
+
"--ring": "142 76% 36%",
|
|
320
|
+
"--muted": "210 40% 96.1%",
|
|
321
|
+
"--muted-foreground": "215.4 16.3% 46.9%",
|
|
322
|
+
"--card": "0 0% 100%",
|
|
323
|
+
"--card-foreground": "222.2 84% 4.9%",
|
|
324
|
+
"--popover": "0 0% 100%",
|
|
325
|
+
"--popover-foreground": "222.2 84% 4.9%",
|
|
326
|
+
"--radius": "0.5rem",
|
|
327
|
+
// SeedGrid neutrals (RGB space-separated)
|
|
328
|
+
"--sg-bg": "255 255 255",
|
|
329
|
+
"--sg-surface": "248 250 252",
|
|
330
|
+
"--sg-muted-surface": "241 245 249",
|
|
331
|
+
"--sg-text": "15 23 42",
|
|
332
|
+
"--sg-muted": "100 116 139",
|
|
333
|
+
"--sg-border": "226 232 240",
|
|
334
|
+
"--sg-ring": "74 222 128",
|
|
335
|
+
"--sg-disabled": "203 213 225",
|
|
336
|
+
"--sg-on-disabled": "148 163 184",
|
|
337
|
+
"--sg-link": "22 163 74",
|
|
338
|
+
"--sg-link-hover": "21 128 61",
|
|
339
|
+
"--sg-radius": "0.5rem",
|
|
340
|
+
// On-color tokens
|
|
341
|
+
"--sg-on-primary": "255 255 255",
|
|
342
|
+
"--sg-on-secondary": "255 255 255",
|
|
343
|
+
"--sg-on-tertiary": "255 255 255",
|
|
344
|
+
"--sg-on-warning": "255 255 255",
|
|
345
|
+
"--sg-on-error": "255 255 255",
|
|
346
|
+
"--sg-on-info": "255 255 255",
|
|
347
|
+
"--sg-on-success": "255 255 255",
|
|
348
|
+
// Primary palette (green)
|
|
349
|
+
"--sg-primary-50": "240 253 244",
|
|
350
|
+
"--sg-primary-100": "220 252 231",
|
|
351
|
+
"--sg-primary-200": "187 247 208",
|
|
352
|
+
"--sg-primary-300": "134 239 172",
|
|
353
|
+
"--sg-primary-400": "74 222 128",
|
|
354
|
+
"--sg-primary-500": "34 197 94",
|
|
321
355
|
"--sg-primary-600": "22 163 74",
|
|
356
|
+
"--sg-primary-700": "21 128 61",
|
|
357
|
+
"--sg-primary-800": "22 101 52",
|
|
358
|
+
"--sg-primary-900": "20 83 45",
|
|
359
|
+
"--sg-primary-hover": "21 128 61",
|
|
360
|
+
"--sg-primary-active": "22 101 52",
|
|
361
|
+
// Secondary palette (zinc)
|
|
362
|
+
"--sg-secondary-50": "250 250 250",
|
|
363
|
+
"--sg-secondary-100": "244 244 245",
|
|
364
|
+
"--sg-secondary-200": "228 228 231",
|
|
365
|
+
"--sg-secondary-300": "212 212 216",
|
|
366
|
+
"--sg-secondary-400": "161 161 170",
|
|
367
|
+
"--sg-secondary-500": "113 113 122",
|
|
322
368
|
"--sg-secondary-600": "82 82 91",
|
|
323
|
-
"--sg-
|
|
324
|
-
"--sg-
|
|
369
|
+
"--sg-secondary-700": "63 63 70",
|
|
370
|
+
"--sg-secondary-800": "39 39 42",
|
|
371
|
+
"--sg-secondary-900": "24 24 27",
|
|
372
|
+
"--sg-secondary-hover": "63 63 70",
|
|
373
|
+
"--sg-secondary-active": "39 39 42",
|
|
374
|
+
// Tertiary palette (teal)
|
|
375
|
+
"--sg-tertiary-50": "240 253 250",
|
|
376
|
+
"--sg-tertiary-100": "204 251 241",
|
|
377
|
+
"--sg-tertiary-200": "153 246 228",
|
|
378
|
+
"--sg-tertiary-300": "94 234 212",
|
|
379
|
+
"--sg-tertiary-400": "45 212 191",
|
|
380
|
+
"--sg-tertiary-500": "20 184 166",
|
|
381
|
+
"--sg-tertiary-600": "13 148 136",
|
|
382
|
+
"--sg-tertiary-700": "15 118 110",
|
|
383
|
+
"--sg-tertiary-800": "17 94 89",
|
|
384
|
+
"--sg-tertiary-900": "19 78 74",
|
|
385
|
+
"--sg-tertiary-hover": "15 118 110",
|
|
386
|
+
"--sg-tertiary-active": "17 94 89",
|
|
387
|
+
// Warning palette (amber)
|
|
388
|
+
"--sg-warning-50": "255 251 235",
|
|
389
|
+
"--sg-warning-100": "254 243 199",
|
|
390
|
+
"--sg-warning-200": "253 230 138",
|
|
391
|
+
"--sg-warning-300": "252 211 77",
|
|
392
|
+
"--sg-warning-400": "251 191 36",
|
|
393
|
+
"--sg-warning-500": "245 158 11",
|
|
325
394
|
"--sg-warning-600": "217 119 6",
|
|
395
|
+
"--sg-warning-700": "180 83 9",
|
|
396
|
+
"--sg-warning-800": "146 64 14",
|
|
397
|
+
"--sg-warning-900": "120 53 15",
|
|
398
|
+
"--sg-warning-hover": "180 83 9",
|
|
399
|
+
"--sg-warning-active": "146 64 14",
|
|
400
|
+
// Error palette (red)
|
|
401
|
+
"--sg-error-50": "254 242 242",
|
|
402
|
+
"--sg-error-100": "254 226 226",
|
|
403
|
+
"--sg-error-200": "254 202 202",
|
|
404
|
+
"--sg-error-300": "252 165 165",
|
|
405
|
+
"--sg-error-400": "248 113 113",
|
|
406
|
+
"--sg-error-500": "239 68 68",
|
|
407
|
+
"--sg-error-600": "220 38 38",
|
|
408
|
+
"--sg-error-700": "185 28 28",
|
|
409
|
+
"--sg-error-800": "153 27 27",
|
|
410
|
+
"--sg-error-900": "127 29 29",
|
|
411
|
+
"--sg-error-hover": "185 28 28",
|
|
412
|
+
"--sg-error-active": "153 27 27",
|
|
413
|
+
// Info palette (sky)
|
|
414
|
+
"--sg-info-50": "240 249 255",
|
|
415
|
+
"--sg-info-100": "224 242 254",
|
|
416
|
+
"--sg-info-200": "186 230 253",
|
|
417
|
+
"--sg-info-300": "125 211 252",
|
|
418
|
+
"--sg-info-400": "56 189 248",
|
|
419
|
+
"--sg-info-500": "14 165 233",
|
|
326
420
|
"--sg-info-600": "2 132 199",
|
|
327
|
-
"--sg-
|
|
421
|
+
"--sg-info-700": "3 105 161",
|
|
422
|
+
"--sg-info-800": "7 89 133",
|
|
423
|
+
"--sg-info-900": "12 74 110",
|
|
424
|
+
"--sg-info-hover": "3 105 161",
|
|
425
|
+
"--sg-info-active": "7 89 133",
|
|
426
|
+
// Success palette (green, same as primary)
|
|
427
|
+
"--sg-success-50": "240 253 244",
|
|
428
|
+
"--sg-success-100": "220 252 231",
|
|
429
|
+
"--sg-success-200": "187 247 208",
|
|
430
|
+
"--sg-success-300": "134 239 172",
|
|
431
|
+
"--sg-success-400": "74 222 128",
|
|
432
|
+
"--sg-success-500": "34 197 94",
|
|
433
|
+
"--sg-success-600": "22 163 74",
|
|
434
|
+
"--sg-success-700": "21 128 61",
|
|
435
|
+
"--sg-success-800": "22 101 52",
|
|
436
|
+
"--sg-success-900": "20 83 45",
|
|
437
|
+
"--sg-success-hover": "21 128 61",
|
|
438
|
+
"--sg-success-active": "22 101 52",
|
|
439
|
+
// Button component vars (green primary default)
|
|
440
|
+
"--sg-btn-bg": "rgb(22 163 74)",
|
|
441
|
+
"--sg-btn-fg": "rgb(255 255 255)",
|
|
442
|
+
"--sg-btn-border": "rgb(22 163 74)",
|
|
443
|
+
"--sg-btn-hover-bg": "rgb(21 128 61)",
|
|
444
|
+
"--sg-btn-hover-fg": "rgb(255 255 255)",
|
|
445
|
+
"--sg-btn-hover-border": "rgb(21 128 61)",
|
|
446
|
+
"--sg-btn-active-bg": "rgb(22 101 52)",
|
|
447
|
+
"--sg-btn-ring": "rgb(74 222 128 / 0.4)",
|
|
448
|
+
"--sg-btn-tint": "22 163 74",
|
|
449
|
+
// Avatar component vars
|
|
450
|
+
"--sg-avatar-bg": "rgb(22 163 74)",
|
|
451
|
+
"--sg-avatar-fg": "rgb(255 255 255)",
|
|
452
|
+
"--sg-avatar-border": "transparent",
|
|
453
|
+
"--sg-avatar-ring": "rgb(74 222 128)",
|
|
454
|
+
// Badge component vars
|
|
455
|
+
"--sg-badge-bg": "rgb(240 253 244)",
|
|
456
|
+
"--sg-badge-fg": "rgb(22 163 74)",
|
|
457
|
+
"--sg-badge-border": "rgb(187 247 208)",
|
|
458
|
+
"--sg-badge-hover-bg": "rgb(220 252 231)",
|
|
459
|
+
"--sg-badge-hover-fg": "rgb(21 128 61)",
|
|
460
|
+
"--sg-badge-hover-border": "rgb(134 239 172)",
|
|
461
|
+
"--sg-badge-ring": "rgb(74 222 128)",
|
|
462
|
+
"--sg-badge-soft-bg": "rgb(240 253 244)",
|
|
463
|
+
"--sg-badge-soft-fg": "rgb(22 163 74)",
|
|
328
464
|
};
|
|
329
465
|
const SANDPACK_CORE_THEME_VARS = [
|
|
330
466
|
"--background",
|
|
@@ -338,7 +474,63 @@ const SANDPACK_CORE_THEME_VARS = [
|
|
|
338
474
|
"--destructive",
|
|
339
475
|
"--destructive-foreground",
|
|
340
476
|
"--border",
|
|
341
|
-
"--
|
|
477
|
+
"--input",
|
|
478
|
+
"--ring",
|
|
479
|
+
"--muted",
|
|
480
|
+
"--muted-foreground",
|
|
481
|
+
"--radius"
|
|
482
|
+
];
|
|
483
|
+
// Explicit list of --sg-* vars to read from host via getPropertyValue().
|
|
484
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
485
|
+
// so we must call getPropertyValue() for each var by name.
|
|
486
|
+
const SANDPACK_SG_VARS = [
|
|
487
|
+
// Neutrals
|
|
488
|
+
"--sg-bg", "--sg-surface", "--sg-muted-surface",
|
|
489
|
+
"--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
|
|
490
|
+
"--sg-disabled", "--sg-on-disabled",
|
|
491
|
+
"--sg-link", "--sg-link-hover",
|
|
492
|
+
"--sg-radius",
|
|
493
|
+
// On-color tokens
|
|
494
|
+
"--sg-on-primary", "--sg-on-secondary", "--sg-on-tertiary",
|
|
495
|
+
"--sg-on-warning", "--sg-on-error", "--sg-on-info", "--sg-on-success",
|
|
496
|
+
// Primary palette
|
|
497
|
+
"--sg-primary-50", "--sg-primary-100", "--sg-primary-200", "--sg-primary-300",
|
|
498
|
+
"--sg-primary-400", "--sg-primary-500", "--sg-primary-600", "--sg-primary-700",
|
|
499
|
+
"--sg-primary-800", "--sg-primary-900", "--sg-primary-hover", "--sg-primary-active",
|
|
500
|
+
// Secondary palette
|
|
501
|
+
"--sg-secondary-50", "--sg-secondary-100", "--sg-secondary-200", "--sg-secondary-300",
|
|
502
|
+
"--sg-secondary-400", "--sg-secondary-500", "--sg-secondary-600", "--sg-secondary-700",
|
|
503
|
+
"--sg-secondary-800", "--sg-secondary-900", "--sg-secondary-hover", "--sg-secondary-active",
|
|
504
|
+
// Tertiary palette
|
|
505
|
+
"--sg-tertiary-50", "--sg-tertiary-100", "--sg-tertiary-200", "--sg-tertiary-300",
|
|
506
|
+
"--sg-tertiary-400", "--sg-tertiary-500", "--sg-tertiary-600", "--sg-tertiary-700",
|
|
507
|
+
"--sg-tertiary-800", "--sg-tertiary-900", "--sg-tertiary-hover", "--sg-tertiary-active",
|
|
508
|
+
// Warning palette
|
|
509
|
+
"--sg-warning-50", "--sg-warning-100", "--sg-warning-200", "--sg-warning-300",
|
|
510
|
+
"--sg-warning-400", "--sg-warning-500", "--sg-warning-600", "--sg-warning-700",
|
|
511
|
+
"--sg-warning-800", "--sg-warning-900", "--sg-warning-hover", "--sg-warning-active",
|
|
512
|
+
// Error palette
|
|
513
|
+
"--sg-error-50", "--sg-error-100", "--sg-error-200", "--sg-error-300",
|
|
514
|
+
"--sg-error-400", "--sg-error-500", "--sg-error-600", "--sg-error-700",
|
|
515
|
+
"--sg-error-800", "--sg-error-900", "--sg-error-hover", "--sg-error-active",
|
|
516
|
+
// Info palette
|
|
517
|
+
"--sg-info-50", "--sg-info-100", "--sg-info-200", "--sg-info-300",
|
|
518
|
+
"--sg-info-400", "--sg-info-500", "--sg-info-600", "--sg-info-700",
|
|
519
|
+
"--sg-info-800", "--sg-info-900", "--sg-info-hover", "--sg-info-active",
|
|
520
|
+
// Success palette
|
|
521
|
+
"--sg-success-50", "--sg-success-100", "--sg-success-200", "--sg-success-300",
|
|
522
|
+
"--sg-success-400", "--sg-success-500", "--sg-success-600", "--sg-success-700",
|
|
523
|
+
"--sg-success-800", "--sg-success-900", "--sg-success-hover", "--sg-success-active",
|
|
524
|
+
// Button component vars
|
|
525
|
+
"--sg-btn-bg", "--sg-btn-fg", "--sg-btn-border",
|
|
526
|
+
"--sg-btn-hover-bg", "--sg-btn-hover-fg", "--sg-btn-hover-border",
|
|
527
|
+
"--sg-btn-active-bg", "--sg-btn-ring", "--sg-btn-tint",
|
|
528
|
+
// Avatar component vars
|
|
529
|
+
"--sg-avatar-bg", "--sg-avatar-fg", "--sg-avatar-border", "--sg-avatar-ring",
|
|
530
|
+
// Badge component vars
|
|
531
|
+
"--sg-badge-bg", "--sg-badge-fg", "--sg-badge-border",
|
|
532
|
+
"--sg-badge-hover-bg", "--sg-badge-hover-fg", "--sg-badge-hover-border",
|
|
533
|
+
"--sg-badge-ring", "--sg-badge-soft-bg", "--sg-badge-soft-fg",
|
|
342
534
|
];
|
|
343
535
|
const SANDPACK_BASE_STYLES_CSS = `* {
|
|
344
536
|
box-sizing: border-box;
|
|
@@ -387,6 +579,99 @@ const SANDPACK_HOST_STYLES_CSS = `
|
|
|
387
579
|
left: auto !important;
|
|
388
580
|
}
|
|
389
581
|
`;
|
|
582
|
+
// Virtual index.html that loads Tailwind v3 play CDN with SeedGrid's design token config.
|
|
583
|
+
// The config script must come BEFORE the CDN script so Tailwind picks it up at init time.
|
|
584
|
+
const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
|
|
585
|
+
<html lang="en">
|
|
586
|
+
<head>
|
|
587
|
+
<meta charset="UTF-8">
|
|
588
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
589
|
+
<title>Document</title>
|
|
590
|
+
<script>
|
|
591
|
+
function sgPalette(name) {
|
|
592
|
+
return {
|
|
593
|
+
50: "rgb(var(--sg-" + name + "-50) / <alpha-value>)",
|
|
594
|
+
100: "rgb(var(--sg-" + name + "-100) / <alpha-value>)",
|
|
595
|
+
200: "rgb(var(--sg-" + name + "-200) / <alpha-value>)",
|
|
596
|
+
300: "rgb(var(--sg-" + name + "-300) / <alpha-value>)",
|
|
597
|
+
400: "rgb(var(--sg-" + name + "-400) / <alpha-value>)",
|
|
598
|
+
500: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
599
|
+
600: "rgb(var(--sg-" + name + "-600) / <alpha-value>)",
|
|
600
|
+
700: "rgb(var(--sg-" + name + "-700) / <alpha-value>)",
|
|
601
|
+
800: "rgb(var(--sg-" + name + "-800) / <alpha-value>)",
|
|
602
|
+
900: "rgb(var(--sg-" + name + "-900) / <alpha-value>)",
|
|
603
|
+
DEFAULT: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
604
|
+
hover: "rgb(var(--sg-" + name + "-hover) / <alpha-value>)",
|
|
605
|
+
active: "rgb(var(--sg-" + name + "-active) / <alpha-value>)"
|
|
606
|
+
};
|
|
607
|
+
}
|
|
608
|
+
tailwind = {
|
|
609
|
+
config: {
|
|
610
|
+
theme: {
|
|
611
|
+
extend: {
|
|
612
|
+
colors: {
|
|
613
|
+
border: "hsl(var(--border))",
|
|
614
|
+
input: "hsl(var(--input))",
|
|
615
|
+
ring: "hsl(var(--ring))",
|
|
616
|
+
background: "hsl(var(--background))",
|
|
617
|
+
foreground: "hsl(var(--foreground))",
|
|
618
|
+
primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
|
|
619
|
+
secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
|
|
620
|
+
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
|
|
621
|
+
muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
|
|
622
|
+
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
|
|
623
|
+
card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
|
|
624
|
+
popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
|
|
625
|
+
sg: {
|
|
626
|
+
bg: "rgb(var(--sg-bg) / <alpha-value>)",
|
|
627
|
+
surface: "rgb(var(--sg-surface) / <alpha-value>)",
|
|
628
|
+
"muted-surface": "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
629
|
+
border: "rgb(var(--sg-border) / <alpha-value>)",
|
|
630
|
+
ring: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
631
|
+
focus: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
632
|
+
text: "rgb(var(--sg-text) / <alpha-value>)",
|
|
633
|
+
muted: "rgb(var(--sg-muted) / <alpha-value>)",
|
|
634
|
+
disabled: "rgb(var(--sg-disabled) / <alpha-value>)",
|
|
635
|
+
"on-disabled": "rgb(var(--sg-on-disabled) / <alpha-value>)",
|
|
636
|
+
hover: "rgb(var(--sg-primary-50) / <alpha-value>)",
|
|
637
|
+
hover2: "rgb(var(--sg-primary-100) / <alpha-value>)",
|
|
638
|
+
surface2: "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
639
|
+
link: "rgb(var(--sg-link) / <alpha-value>)",
|
|
640
|
+
"link-hover": "rgb(var(--sg-link-hover) / <alpha-value>)",
|
|
641
|
+
"on-primary": "rgb(var(--sg-on-primary) / <alpha-value>)",
|
|
642
|
+
"on-secondary": "rgb(var(--sg-on-secondary) / <alpha-value>)",
|
|
643
|
+
"on-tertiary": "rgb(var(--sg-on-tertiary) / <alpha-value>)",
|
|
644
|
+
"on-warning": "rgb(var(--sg-on-warning) / <alpha-value>)",
|
|
645
|
+
"on-error": "rgb(var(--sg-on-error) / <alpha-value>)",
|
|
646
|
+
"on-info": "rgb(var(--sg-on-info) / <alpha-value>)",
|
|
647
|
+
"on-success": "rgb(var(--sg-on-success) / <alpha-value>)",
|
|
648
|
+
primary: sgPalette("primary"),
|
|
649
|
+
secondary: sgPalette("secondary"),
|
|
650
|
+
tertiary: sgPalette("tertiary"),
|
|
651
|
+
warning: sgPalette("warning"),
|
|
652
|
+
error: sgPalette("error"),
|
|
653
|
+
info: sgPalette("info"),
|
|
654
|
+
success: sgPalette("success")
|
|
655
|
+
}
|
|
656
|
+
},
|
|
657
|
+
borderRadius: {
|
|
658
|
+
lg: "var(--radius)",
|
|
659
|
+
md: "calc(var(--radius) - 2px)",
|
|
660
|
+
sm: "calc(var(--radius) - 4px)",
|
|
661
|
+
sg: "var(--sg-radius)"
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
</script>
|
|
668
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
669
|
+
</head>
|
|
670
|
+
<body>
|
|
671
|
+
<div id="root"></div>
|
|
672
|
+
</body>
|
|
673
|
+
</html>
|
|
674
|
+
`;
|
|
390
675
|
function normalizeUrl(raw, fallback) {
|
|
391
676
|
const value = raw?.trim();
|
|
392
677
|
if (!value)
|
|
@@ -468,6 +753,9 @@ const SANDPACK_SEEDGRID_ES_JSON_SHIM = JSON.stringify(SANDPACK_MIN_COMPONENT_MES
|
|
|
468
753
|
const SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM = JSON.stringify({
|
|
469
754
|
blockedEmailDomains: []
|
|
470
755
|
});
|
|
756
|
+
// CJS shims for .js locale files (new npm versions after the JSON→TypeScript conversion).
|
|
757
|
+
const SANDPACK_SEEDGRID_LOCALE_JS_SHIM = `module.exports = ${JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES)};`;
|
|
758
|
+
const SANDPACK_SEEDGRID_BLOCKED_EMAIL_JS_SHIM = `module.exports = ${JSON.stringify({ blockedEmailDomains: [] })};`;
|
|
471
759
|
function parseRgbParts(raw) {
|
|
472
760
|
const value = raw.trim();
|
|
473
761
|
if (!value)
|
|
@@ -558,10 +846,9 @@ function readThemeVarsFromHost() {
|
|
|
558
846
|
if (value)
|
|
559
847
|
themeVars[varName] = value;
|
|
560
848
|
}
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
continue;
|
|
849
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
850
|
+
// so we explicitly call getPropertyValue() for each known --sg-* var.
|
|
851
|
+
for (const varName of SANDPACK_SG_VARS) {
|
|
565
852
|
const value = computed.getPropertyValue(varName).trim();
|
|
566
853
|
if (value)
|
|
567
854
|
themeVars[varName] = value;
|
|
@@ -821,8 +1108,12 @@ export default function SgPlayground(props) {
|
|
|
821
1108
|
};
|
|
822
1109
|
// Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
|
|
823
1110
|
files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
|
|
1111
|
+
// Virtual index.html: loads Tailwind v3 play CDN with SeedGrid design-token config.
|
|
1112
|
+
// This replaces the old Tailwind v2 CDN (which lacked JIT arbitrary values and CSS-var-based design tokens).
|
|
1113
|
+
files["/public/index.html"] = { code: SANDPACK_TAILWIND_INDEX_HTML, hidden: true };
|
|
824
1114
|
// Sandpack runtime can evaluate JSON files as plain JS modules.
|
|
825
1115
|
// Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
|
|
1116
|
+
// .json shims cover current npm versions; .js shims cover new versions after JSON→TypeScript conversion.
|
|
826
1117
|
files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.json"] = {
|
|
827
1118
|
code: SANDPACK_SEEDGRID_PT_BR_JSON_SHIM,
|
|
828
1119
|
hidden: true
|
|
@@ -843,6 +1134,26 @@ export default function SgPlayground(props) {
|
|
|
843
1134
|
code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM,
|
|
844
1135
|
hidden: true
|
|
845
1136
|
};
|
|
1137
|
+
files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.js"] = {
|
|
1138
|
+
code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
|
|
1139
|
+
hidden: true
|
|
1140
|
+
};
|
|
1141
|
+
files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-PT.js"] = {
|
|
1142
|
+
code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
|
|
1143
|
+
hidden: true
|
|
1144
|
+
};
|
|
1145
|
+
files["/node_modules/@seedgrid/fe-components/dist/i18n/en-US.js"] = {
|
|
1146
|
+
code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
|
|
1147
|
+
hidden: true
|
|
1148
|
+
};
|
|
1149
|
+
files["/node_modules/@seedgrid/fe-components/dist/i18n/es.js"] = {
|
|
1150
|
+
code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
|
|
1151
|
+
hidden: true
|
|
1152
|
+
};
|
|
1153
|
+
files["/node_modules/@seedgrid/fe-components/dist/blocked-email-domains.js"] = {
|
|
1154
|
+
code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_JS_SHIM,
|
|
1155
|
+
hidden: true
|
|
1156
|
+
};
|
|
846
1157
|
}
|
|
847
1158
|
if (shouldIncludeNodePolyfills) {
|
|
848
1159
|
// markdown-it CLI entry uses node:fs and breaks in browser runtime.
|