sunpeak 0.16.9 → 0.16.11

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 (25) hide show
  1. package/dist/chatgpt/index.cjs +2 -2
  2. package/dist/chatgpt/index.js +2 -2
  3. package/dist/claude/index.cjs +1 -1
  4. package/dist/claude/index.js +1 -1
  5. package/dist/{index-ByfnqReC.cjs → index-BsWYp00t.cjs} +12 -10
  6. package/dist/index-BsWYp00t.cjs.map +1 -0
  7. package/dist/{index-CuZQ3nqW.js → index-DJt59490.js} +2 -2
  8. package/dist/index-DJt59490.js.map +1 -0
  9. package/dist/{index-D3h7o2YP.js → index-Dyoz9lnx.js} +12 -10
  10. package/dist/index-Dyoz9lnx.js.map +1 -0
  11. package/dist/{index-CvZ0BZ0R.cjs → index-POfU7IR6.cjs} +2 -2
  12. package/dist/index-POfU7IR6.cjs.map +1 -0
  13. package/dist/index.cjs +3 -3
  14. package/dist/index.js +3 -3
  15. package/dist/simulator/index.cjs +1 -1
  16. package/dist/simulator/index.js +1 -1
  17. package/dist/{simulator-BGHFdLfD.js → simulator-BUF-_85b.js} +44 -50
  18. package/dist/{simulator-BGHFdLfD.js.map → simulator-BUF-_85b.js.map} +1 -1
  19. package/dist/{simulator-DYM74GCT.cjs → simulator-tkLFRzjr.cjs} +43 -49
  20. package/dist/{simulator-DYM74GCT.cjs.map → simulator-tkLFRzjr.cjs.map} +1 -1
  21. package/package.json +1 -1
  22. package/dist/index-ByfnqReC.cjs.map +0 -1
  23. package/dist/index-CuZQ3nqW.js.map +0 -1
  24. package/dist/index-CvZ0BZ0R.cjs.map +0 -1
  25. package/dist/index-D3h7o2YP.js.map +0 -1
package/dist/{simulator-DYM74GCT.cjs → simulator-tkLFRzjr.cjs} RENAMED
@@ -7474,13 +7474,19 @@ function injectPaintFence(iframe) {
7474
7474
  } catch {
7475
7475
  }
7476
7476
  }
7477
- function injectBackgroundRule(iframe) {
7477
+ function injectBackgroundRule(iframe, theme, styleVars) {
7478
7478
  try {
7479
7479
  const doc = iframe.contentDocument;
7480
7480
  if (!doc || doc.querySelector("style[data-sunpeak-bg]")) return;
7481
+ doc.documentElement.style.colorScheme = theme || "dark";
7482
+ if (styleVars) {
7483
+ for (const [key, value] of Object.entries(styleVars)) {
7484
+ if (value) doc.documentElement.style.setProperty(key, value);
7485
+ }
7486
+ }
7481
7487
  const style = doc.createElement("style");
7482
7488
  style.setAttribute("data-sunpeak-bg", "");
7483
- style.textContent = "html { background-color: var(--color-background-primary, transparent); }";
7489
+ style.textContent = "html { background-color: var(--color-background-primary, Canvas); }";
7484
7490
  doc.head.appendChild(style);
7485
7491
  } catch {
7486
7492
  }
@@ -7492,23 +7498,18 @@ function generateScriptHtml(scriptSrc, theme, cspPolicy, platformScript) {
7492
7498
  const platformTag = platformScript ? `
7493
7499
  <script>${platformScript}<\/script>` : "";
7494
7500
  return `<!DOCTYPE html>
7495
- <html lang="en" data-theme="${safeTheme}">
7501
+ <html lang="en" data-theme="${safeTheme}" style="color-scheme:${safeTheme};background:Canvas">
7496
7502
  <head>
7497
7503
  <meta charset="UTF-8" />
7504
+ <meta name="color-scheme" content="${safeTheme}" />
7498
7505
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7499
7506
  <meta http-equiv="Content-Security-Policy" content="${safeCsp}" />
7500
7507
  <title>Resource</title>
7501
7508
  <style>
7502
- html {
7503
- /* Set color-scheme before the resource script loads so system UI (scrollbars,
7504
- form elements) is themed correctly from first paint. Once the script loads,
7505
- applyDocumentTheme() takes over with an inline style. */
7506
- color-scheme: ${safeTheme};
7507
- }
7508
7509
  html {
7509
7510
  /* Use the MCP App background variable once JS sets it, otherwise
7510
- transparent so the host's own background shows through. */
7511
- background-color: var(--color-background-primary, transparent);
7511
+ Canvas (the system color that auto-adapts to color-scheme). */
7512
+ background-color: var(--color-background-primary, Canvas);
7512
7513
  }
7513
7514
  body, #root {
7514
7515
  margin: 0;
@@ -7564,9 +7565,6 @@ function IframeResource({
7564
7565
  const hostRef = React.useRef(null);
7565
7566
  const [loaded, setLoaded] = React.useState(false);
7566
7567
  const resourceUrl = src ?? scriptSrc;
7567
- React.useEffect(() => {
7568
- setLoaded(false);
7569
- }, [resourceUrl]);
7570
7568
  const hasReceivedSizeRef = React.useRef(false);
7571
7569
  const displayModeRef = React.useRef(hostContext?.displayMode);
7572
7570
  displayModeRef.current = hostContext?.displayMode;
@@ -7605,7 +7603,11 @@ function IframeResource({
7605
7603
  const handleLoad = React.useCallback(() => {
7606
7604
  if (src && iframeRef.current) {
7607
7605
  injectPaintFence(iframeRef.current);
7608
- injectBackgroundRule(iframeRef.current);
7606
+ injectBackgroundRule(
7607
+ iframeRef.current,
7608
+ hostContext?.theme,
7609
+ hostContext?.styles?.variables
7610
+ );
7609
7611
  }
7610
7612
  if (injectOpenAIRuntime && iframeRef.current?.contentWindow) {
7611
7613
  try {
@@ -7614,7 +7616,7 @@ function IframeResource({
7614
7616
  }
7615
7617
  }
7616
7618
  setLoaded(true);
7617
- }, [src, injectOpenAIRuntime]);
7619
+ }, [src, injectOpenAIRuntime, hostContext?.theme, hostContext?.styles]);
7618
7620
  React.useEffect(() => {
7619
7621
  if (hostContext) {
7620
7622
  host.setHostContext(hostContext);
@@ -7668,6 +7670,18 @@ function IframeResource({
7668
7670
  const platformScript = injectOpenAIRuntime ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0;
7669
7671
  return generateScriptHtml(absoluteScriptSrc, theme, cspPolicy, platformScript);
7670
7672
  }, [scriptSrc, isValidUrl, csp, hostContext?.theme, injectOpenAIRuntime]);
7673
+ const iframeStyle = {
7674
+ ...borderStyle,
7675
+ background: "transparent",
7676
+ colorScheme: hostContext?.theme === "light" ? "light dark" : "dark light",
7677
+ opacity: loaded ? 1 : 0,
7678
+ transition: loaded ? "opacity 100ms" : "none",
7679
+ width: "100%",
7680
+ // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
7681
+ // Don't use height: 100% as it requires explicit height in parent chain.
7682
+ minHeight: "200px",
7683
+ ...style
7684
+ };
7671
7685
  if (src) {
7672
7686
  if (!isValidUrl) {
7673
7687
  console.error("[IframeResource] URL not allowed:", src);
@@ -7683,18 +7697,7 @@ function IframeResource({
7683
7697
  src,
7684
7698
  onLoad: handleLoad,
7685
7699
  className,
7686
- style: {
7687
- ...borderStyle,
7688
- background: "transparent",
7689
- colorScheme: hostContext?.theme === "light" ? "light dark" : "dark light",
7690
- opacity: loaded ? 1 : 0,
7691
- transition: loaded ? "opacity 100ms" : "none",
7692
- width: "100%",
7693
- // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
7694
- // Don't use height: 100% as it requires explicit height in parent chain.
7695
- minHeight: "200px",
7696
- ...style
7697
- },
7700
+ style: iframeStyle,
7698
7701
  title: "Resource Preview",
7699
7702
  sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox",
7700
7703
  allow: allowAttribute
@@ -7708,18 +7711,7 @@ function IframeResource({
7708
7711
  srcDoc: htmlContent,
7709
7712
  onLoad: handleLoad,
7710
7713
  className,
7711
- style: {
7712
- ...borderStyle,
7713
- background: "transparent",
7714
- colorScheme: hostContext?.theme === "light" ? "light dark" : "dark light",
7715
- opacity: loaded ? 1 : 0,
7716
- transition: loaded ? "opacity 100ms" : "none",
7717
- width: "100%",
7718
- // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
7719
- // Don't use height: 100% as it requires explicit height in parent chain.
7720
- minHeight: "200px",
7721
- ...style
7722
- },
7714
+ style: iframeStyle,
7723
7715
  title: "Resource Preview",
7724
7716
  sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox",
7725
7717
  allow: allowAttribute
@@ -8403,8 +8395,9 @@ function Simulator({
8403
8395
  }
8404
8396
  }, [activeShell]);
8405
8397
  let content;
8398
+ const iframeBg = "var(--sim-bg-conversation, var(--color-background-primary, transparent))";
8406
8399
  if (state.resourceUrl) {
8407
- content = /* @__PURE__ */ jsxRuntime.jsx(
8400
+ content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", style: { background: iframeBg }, children: /* @__PURE__ */ jsxRuntime.jsx(
8408
8401
  IframeResource,
8409
8402
  {
8410
8403
  src: state.resourceUrl,
@@ -8424,10 +8417,11 @@ function Simulator({
8424
8417
  debugInjectState: state.modelContext,
8425
8418
  injectOpenAIRuntime: state.activeHost === "chatgpt",
8426
8419
  className: "h-full w-full"
8427
- }
8428
- );
8420
+ },
8421
+ `${state.activeHost}-${state.selectedSimulationName}`
8422
+ ) });
8429
8423
  } else if (state.resourceScript) {
8430
- content = /* @__PURE__ */ jsxRuntime.jsx(
8424
+ content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", style: { background: iframeBg }, children: /* @__PURE__ */ jsxRuntime.jsx(
8431
8425
  IframeResource,
8432
8426
  {
8433
8427
  scriptSrc: state.resourceScript,
@@ -8448,8 +8442,9 @@ function Simulator({
8448
8442
  debugInjectState: state.modelContext,
8449
8443
  injectOpenAIRuntime: state.activeHost === "chatgpt",
8450
8444
  className: "h-full w-full"
8451
- }
8452
- );
8445
+ },
8446
+ `${state.activeHost}-${state.selectedSimulationName}`
8447
+ ) });
8453
8448
  } else {
8454
8449
  content = children;
8455
8450
  }
@@ -8764,8 +8759,7 @@ function Simulator({
8764
8759
  userMessage: state.selectedSim?.userMessage,
8765
8760
  isTransitioning: state.isTransitioning,
8766
8761
  children: content
8767
- },
8768
- `${state.activeHost}-${state.selectedSimulationName}`
8762
+ }
8769
8763
  ) : content
8770
8764
  }
8771
8765
  ) });
@@ -8791,4 +8785,4 @@ exports.getRegisteredHosts = getRegisteredHosts;
8791
8785
  exports.registerHostShell = registerHostShell;
8792
8786
  exports.useSimulatorState = useSimulatorState;
8793
8787
  exports.useThemeContext = useThemeContext;
8794
- //# sourceMappingURL=simulator-DYM74GCT.cjs.map
8788
+ //# sourceMappingURL=simulator-tkLFRzjr.cjs.map