@seedgrid/fe-components 2026.3.3-7 → 2026.3.3-9

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 +38 -86
  3. package/dist/sandbox.cjs +17 -92
  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;AAqgCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoctE"}
package/dist/others/SgPlayground.js CHANGED
@@ -579,93 +579,13 @@ const SANDPACK_HOST_STYLES_CSS = `
579
579
  left: auto !important;
580
580
  }
581
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.
582
+ // Keep CRA's expected HTML entry file path for react/react-ts templates.
584
583
  const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
585
584
  <html lang="en">
586
585
  <head>
587
586
  <meta charset="UTF-8">
588
587
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
589
588
  <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
589
  </head>
670
590
  <body>
671
591
  <div id="root"></div>
@@ -856,10 +776,41 @@ function readThemeVarsFromHost() {
856
776
  Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
857
777
  return themeVars;
858
778
  }
779
+ function getStyleSheetHref(styleSheet) {
780
+ const cssSheet = styleSheet;
781
+ if (cssSheet.href)
782
+ return cssSheet.href;
783
+ const ownerNode = cssSheet.ownerNode;
784
+ if (!(ownerNode instanceof Element))
785
+ return "";
786
+ return ownerNode.getAttribute("data-n-href") ?? "";
787
+ }
788
+ function readHostNextCssText() {
789
+ if (typeof document === "undefined")
790
+ return "";
791
+ const chunks = [];
792
+ const sheets = Array.from(document.styleSheets);
793
+ for (const sheet of sheets) {
794
+ const href = getStyleSheetHref(sheet);
795
+ if (!href.includes("/_next/static/css/"))
796
+ continue;
797
+ let rules;
798
+ try {
799
+ rules = sheet.cssRules;
800
+ }
801
+ catch {
802
+ continue;
803
+ }
804
+ for (const rule of Array.from(rules)) {
805
+ chunks.push(rule.cssText);
806
+ }
807
+ }
808
+ return chunks.join("\n");
809
+ }
859
810
  function normalizeCssSize(value) {
860
811
  return typeof value === "number" ? `${value}px` : value;
861
812
  }
862
- function buildSandpackStylesCss(themeVars, previewPadding) {
813
+ function buildSandpackStylesCss(themeVars, previewPadding, hostCss = "") {
863
814
  const mergedVars = {
864
815
  ...SANDPACK_FALLBACK_THEME_VARS,
865
816
  ...themeVars,
@@ -873,7 +824,8 @@ function buildSandpackStylesCss(themeVars, previewPadding) {
873
824
  ${rootVars}
874
825
  }
875
826
 
876
- ${SANDPACK_BASE_STYLES_CSS}`;
827
+ ${SANDPACK_BASE_STYLES_CSS}
828
+ ${hostCss ? `\n\n${hostCss}` : ""}`;
877
829
  }
878
830
  function ReadonlyBlock({ code }) {
879
831
  return (_jsx("pre", { className: "overflow-auto rounded-lg border border-border bg-muted/30 p-4 text-xs leading-relaxed", children: _jsx("code", { children: code }) }));
@@ -1004,7 +956,8 @@ export default function SgPlayground(props) {
1004
956
  const root = document.documentElement;
1005
957
  const refreshStyles = () => {
1006
958
  const liveThemeVars = readThemeVarsFromHost();
1007
- setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding));
959
+ const hostCss = readHostNextCssText();
960
+ setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding, hostCss));
1008
961
  };
1009
962
  let frameId = null;
1010
963
  const scheduleRefresh = () => {
@@ -1108,8 +1061,7 @@ export default function SgPlayground(props) {
1108
1061
  };
1109
1062
  // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
1110
1063
  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).
1064
+ // Keep CRA's public/index.html entry path expected by the react/react-ts templates.
1113
1065
  files["/public/index.html"] = { code: SANDPACK_TAILWIND_INDEX_HTML, hidden: true };
1114
1066
  // Sandpack runtime can evaluate JSON files as plain JS modules.
1115
1067
  // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.