@seedgrid/fe-components 2026.3.3-7 → 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.
Files changed (4) hide show
  1. package/dist/others/SgPlayground.d.ts.map +1 -1
  2. package/dist/others/SgPlayground.js +88 -83
  3. package/dist/sandbox.cjs +83 -86
  4. package/package.json +1 -1
package/dist/others/SgPlayground.d.ts.map CHANGED
@@ -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;AA8iCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoctE"}
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"}
package/dist/others/SgPlayground.js CHANGED
@@ -79,7 +79,12 @@ const TIPTAP_SHIM_PACKAGES = [
79
79
  "@tiptap/extension-superscript",
80
80
  "@tiptap/extension-font-family"
81
81
  ];
82
- const SANDPACK_EXTERNAL_RESOURCES = [];
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."
@@ -579,93 +584,90 @@ const SANDPACK_HOST_STYLES_CSS = `
579
584
  left: auto !important;
580
585
  }
581
586
  `;
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.
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.
584
665
  const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
585
666
  <html lang="en">
586
667
  <head>
587
668
  <meta charset="UTF-8">
588
669
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
589
670
  <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
671
  </head>
670
672
  <body>
671
673
  <div id="root"></div>
@@ -1109,8 +1111,11 @@ export default function SgPlayground(props) {
1109
1111
  // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
1110
1112
  files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
1111
1113
  // 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).
1114
+ // This keeps CRA's public/index.html entry path expected by the react/react-ts templates.
1113
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 };
1114
1119
  // Sandpack runtime can evaluate JSON files as plain JS modules.
1115
1120
  // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
1116
1121
  // .json shims cover current npm versions; .js shims cover new versions after JSON→TypeScript conversion.