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

package/dist/others/SgPlayground.d.ts.map

@@ -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;AAijCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAuctE"}
+{"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

@@ -79,12 +79,7 @@ const TIPTAP_SHIM_PACKAGES = [
     "@tiptap/extension-superscript",
     "@tiptap/extension-font-family"
 ];
-// Sandpack's CRA runtime does not execute script tags from template HTML reliably.
-// Load Tailwind as external resources so it is injected before module evaluation.
-const SANDPACK_EXTERNAL_RESOURCES = [
-    "/sandpack-tailwind-config.js",
-    "https://cdn.tailwindcss.com"
-];
+const SANDPACK_EXTERNAL_RESOURCES = [];
 const SANDPACK_QRCODE_SHIM_INDEX_JS = `const makeError = () =>
   new Error(
     "qrcode (node build) is not supported in Sandpack browser runtime. Update @seedgrid/fe-components to a browser-safe QR implementation."
@@ -584,83 +579,6 @@ const SANDPACK_HOST_STYLES_CSS = `
   left: auto !important;
 }
 `;
-const SANDPACK_TAILWIND_CONFIG_JS = `function sgPalette(name) {
-  return {
-    50: "rgb(var(--sg-" + name + "-50) / <alpha-value>)",
-    100: "rgb(var(--sg-" + name + "-100) / <alpha-value>)",
-    200: "rgb(var(--sg-" + name + "-200) / <alpha-value>)",
-    300: "rgb(var(--sg-" + name + "-300) / <alpha-value>)",
-    400: "rgb(var(--sg-" + name + "-400) / <alpha-value>)",
-    500: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
-    600: "rgb(var(--sg-" + name + "-600) / <alpha-value>)",
-    700: "rgb(var(--sg-" + name + "-700) / <alpha-value>)",
-    800: "rgb(var(--sg-" + name + "-800) / <alpha-value>)",
-    900: "rgb(var(--sg-" + name + "-900) / <alpha-value>)",
-    DEFAULT: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
-    hover: "rgb(var(--sg-" + name + "-hover) / <alpha-value>)",
-    active: "rgb(var(--sg-" + name + "-active) / <alpha-value>)"
-  };
-}
-
-window.tailwind = window.tailwind || {};
-window.tailwind.config = {
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
-        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
-        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
-        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
-        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
-        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
-        popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
-        sg: {
-          bg: "rgb(var(--sg-bg) / <alpha-value>)",
-          surface: "rgb(var(--sg-surface) / <alpha-value>)",
-          "muted-surface": "rgb(var(--sg-muted-surface) / <alpha-value>)",
-          border: "rgb(var(--sg-border) / <alpha-value>)",
-          ring: "rgb(var(--sg-ring) / <alpha-value>)",
-          focus: "rgb(var(--sg-ring) / <alpha-value>)",
-          text: "rgb(var(--sg-text) / <alpha-value>)",
-          muted: "rgb(var(--sg-muted) / <alpha-value>)",
-          disabled: "rgb(var(--sg-disabled) / <alpha-value>)",
-          "on-disabled": "rgb(var(--sg-on-disabled) / <alpha-value>)",
-          hover: "rgb(var(--sg-primary-50) / <alpha-value>)",
-          hover2: "rgb(var(--sg-primary-100) / <alpha-value>)",
-          surface2: "rgb(var(--sg-muted-surface) / <alpha-value>)",
-          link: "rgb(var(--sg-link) / <alpha-value>)",
-          "link-hover": "rgb(var(--sg-link-hover) / <alpha-value>)",
-          "on-primary": "rgb(var(--sg-on-primary) / <alpha-value>)",
-          "on-secondary": "rgb(var(--sg-on-secondary) / <alpha-value>)",
-          "on-tertiary": "rgb(var(--sg-on-tertiary) / <alpha-value>)",
-          "on-warning": "rgb(var(--sg-on-warning) / <alpha-value>)",
-          "on-error": "rgb(var(--sg-on-error) / <alpha-value>)",
-          "on-info": "rgb(var(--sg-on-info) / <alpha-value>)",
-          "on-success": "rgb(var(--sg-on-success) / <alpha-value>)",
-          primary: sgPalette("primary"),
-          secondary: sgPalette("secondary"),
-          tertiary: sgPalette("tertiary"),
-          warning: sgPalette("warning"),
-          error: sgPalette("error"),
-          info: sgPalette("info"),
-          success: sgPalette("success")
-        }
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-        sg: "var(--sg-radius)"
-      }
-    }
-  }
-};
-`;
 // Keep CRA's expected HTML entry file path for react/react-ts templates.
 const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
 <html lang="en">
@@ -858,10 +776,41 @@ function readThemeVarsFromHost() {
     Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
     return themeVars;
 }
+function getStyleSheetHref(styleSheet) {
+    const cssSheet = styleSheet;
+    if (cssSheet.href)
+        return cssSheet.href;
+    const ownerNode = cssSheet.ownerNode;
+    if (!(ownerNode instanceof Element))
+        return "";
+    return ownerNode.getAttribute("data-n-href") ?? "";
+}
+function readHostNextCssText() {
+    if (typeof document === "undefined")
+        return "";
+    const chunks = [];
+    const sheets = Array.from(document.styleSheets);
+    for (const sheet of sheets) {
+        const href = getStyleSheetHref(sheet);
+        if (!href.includes("/_next/static/css/"))
+            continue;
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch {
+            continue;
+        }
+        for (const rule of Array.from(rules)) {
+            chunks.push(rule.cssText);
+        }
+    }
+    return chunks.join("\n");
+}
 function normalizeCssSize(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
-function buildSandpackStylesCss(themeVars, previewPadding) {
+function buildSandpackStylesCss(themeVars, previewPadding, hostCss = "") {
     const mergedVars = {
         ...SANDPACK_FALLBACK_THEME_VARS,
         ...themeVars,
@@ -875,7 +824,8 @@ function buildSandpackStylesCss(themeVars, previewPadding) {
 ${rootVars}
 }
 
-${SANDPACK_BASE_STYLES_CSS}`;
+${SANDPACK_BASE_STYLES_CSS}
+${hostCss ? `\n\n${hostCss}` : ""}`;
 }
 function ReadonlyBlock({ code }) {
     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 }) }));
@@ -1006,7 +956,8 @@ export default function SgPlayground(props) {
         const root = document.documentElement;
         const refreshStyles = () => {
             const liveThemeVars = readThemeVarsFromHost();
-            setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding));
+            const hostCss = readHostNextCssText();
+            setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding, hostCss));
         };
         let frameId = null;
         const scheduleRefresh = () => {
@@ -1110,12 +1061,8 @@ export default function SgPlayground(props) {
         };
         // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
         files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
-        // Virtual index.html: loads Tailwind v3 play CDN with SeedGrid design-token config.
-        // This keeps CRA's public/index.html entry path expected by the react/react-ts templates.
+        // Keep CRA's public/index.html entry path expected by the react/react-ts templates.
         files["/public/index.html"] = { code: SANDPACK_TAILWIND_INDEX_HTML, hidden: true };
-        // Tailwind config is loaded via externalResources because Sandpack runtime
-        // does not execute scripts from template HTML head/body consistently.
-        files["/sandpack-tailwind-config.js"] = { code: SANDPACK_TAILWIND_CONFIG_JS, hidden: true };
         // Sandpack runtime can evaluate JSON files as plain JS modules.
         // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
         // .json shims cover current npm versions; .js shims cover new versions after JSON→TypeScript conversion.