@ggui-ai/dev-stack 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/dev-server/sandbox-proxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sandbox-proxy.d.ts","sourceRoot":"","sources":["../../src/dev-server/sandbox-proxy.ts"],"names":[],"mappings":"AAoDA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAuKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,wBAAwB,CAAC,CAuEnC"}
+{"version":3,"file":"sandbox-proxy.d.ts","sourceRoot":"","sources":["../../src/dev-server/sandbox-proxy.ts"],"names":[],"mappings":"AAoDA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AA4KD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,wBAAwB,CAAC,CAuEnC"}

package/dist/dev-server/sandbox-proxy.js

@@ -103,7 +103,12 @@ const SANDBOX_HTML = `<!doctype html>
     <meta name="color-scheme" content="light dark">
     <title>ggui sandbox proxy</title>
     <style>
-      html, body { margin: 0; height: 100vh; width: 100vw; background-color: transparent; }
+      /* True viewport fill — this proxy doc is the iframe's top-level page.
+         'vh' first as the universally-supported floor; 'dvh' (dynamic
+         viewport height) overrides on browsers that support it so mobile
+         URL-bar collapse doesn't clip the surface. 'width: 100%' avoids the
+         '100vw' horizontal-scrollbar overflow without needing 'dvw'. */
+      html, body { margin: 0; height: 100vh; height: 100dvh; width: 100%; background-color: transparent; }
       body { display: flex; flex-direction: column; }
       * { box-sizing: border-box; }
       iframe {

package/dist/hub-preview/client.js

@@ -39069,7 +39069,7 @@ var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
 var import_react3 = __toESM(require_react(), 1);
 var DECODER = new TextDecoder();
 
-// ../ggui-react/dist/chunk-T7BUC3L2.mjs
+// ../ggui-react/dist/chunk-HGBOTWNI.mjs
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
@@ -42095,6 +42095,78 @@ function getDefaultThemeId() {
   return "ggui";
 }
 var ThemeContext = (0, import_react10.createContext)(null);
+var COLOR_MIX_SUPPORTS = "@supports (color: color-mix(in srgb, red, blue))";
+function resolvePrimary500Hex(cssVariables) {
+  const match = cssVariables.match(/--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/);
+  return match ? match[1] : null;
+}
+function hexToRgb2(hex3) {
+  let h2 = hex3.replace("#", "");
+  if (h2.length === 3) {
+    h2 = h2.split("").map((c) => c + c).join("");
+  }
+  if (h2.length !== 6)
+    return null;
+  const r = Number.parseInt(h2.slice(0, 2), 16);
+  const g2 = Number.parseInt(h2.slice(2, 4), 16);
+  const b2 = Number.parseInt(h2.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g2) || Number.isNaN(b2))
+    return null;
+  return { r, g: g2, b: b2 };
+}
+function precomputePrimaryColorMix(value, primary500Hex) {
+  const rgb = hexToRgb2(primary500Hex);
+  if (!rgb)
+    return value;
+  return value.replace(/color-mix\(\s*in srgb\s*,\s*var\(--ggui-color-primary-500\)\s+(\d+(?:\.\d+)?)%\s*,\s*transparent\s*\)/g, (_match, pct) => {
+    const alpha = Number(pct) / 100;
+    const a = Number(alpha.toFixed(4)).toString();
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;
+  });
+}
+function partitionColorMixDeclarations(block) {
+  const open = block.indexOf("{");
+  const close = block.lastIndexOf("}");
+  if (open === -1 || close === -1)
+    return { base: block, colorMix: [] };
+  const selector = block.slice(0, open + 1);
+  const body = block.slice(open + 1, close);
+  const baseLines = [];
+  const colorMixLines = [];
+  for (const rawLine of body.split("\n")) {
+    if (rawLine.trim() === "")
+      continue;
+    if (rawLine.includes("color-mix("))
+      colorMixLines.push(rawLine);
+    else
+      baseLines.push(rawLine);
+  }
+  return {
+    base: `${selector}
+${baseLines.join("\n")}
+}`,
+    colorMix: colorMixLines
+  };
+}
+function withColorMixFallback(block, selectorPrefix, primary500Hex) {
+  if (!primary500Hex || !block.includes("color-mix("))
+    return block;
+  const { base, colorMix } = partitionColorMixDeclarations(block);
+  if (colorMix.length === 0)
+    return block;
+  const fallbackLines = colorMix.map((line) => precomputePrimaryColorMix(line, primary500Hex));
+  const fallbackBlock = `${selectorPrefix} {
+${fallbackLines.join("\n")}
+}`;
+  const modernBlock = `${COLOR_MIX_SUPPORTS} {
+  ${selectorPrefix} {
+${colorMix.join("\n")}
+  }
+}`;
+  return `${base}
+${fallbackBlock}
+${modernBlock}`;
+}
 function getScopedCssTokens(scopeClass, mode = "light") {
   return getScopedThemeCss(getDefaultThemeId(), scopeClass, mode);
 }
@@ -42106,18 +42178,14 @@ function getScopedThemeCss(themeId, scopeClass, mode = "light") {
       return "";
     return getScopedThemeCss(defaultId, scopeClass, mode);
   }
-  const scoped = theme8.cssVariables.replace(/^:root\s*\{/, `.${scopeClass} {`);
+  const primary500 = resolvePrimary500Hex(theme8.cssVariables);
+  const scoped = withColorMixFallback(theme8.cssVariables.replace(/^:root\s*\{/, `.${scopeClass} {`), `.${scopeClass}`, primary500);
   const baseInherits = `.${scopeClass} {
   font-family: var(--ggui-font-family-sans);
   color: var(--ggui-color-onSurface);
   background-color: transparent;
 }`;
-  const gradientTokens = `.${scopeClass} {
-  --ggui-color-primary-gradient: linear-gradient(135deg, var(--ggui-color-primary-500) 0%, var(--ggui-color-primary-600) 100%);
-  --ggui-color-surface-gradient: linear-gradient(180deg, var(--ggui-color-surface) 0%, color-mix(in srgb, var(--ggui-color-primary-500) 4%, var(--ggui-color-surface)) 100%);
-  --ggui-effect-glow-primary: 0 0 0 4px color-mix(in srgb, var(--ggui-color-primary-500) 18%, transparent);
-  --ggui-effect-glow-primary-strong: 0 8px 24px -4px color-mix(in srgb, var(--ggui-color-primary-500) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ggui-color-primary-500) 30%, transparent) inset;
-}`;
+  const gradientTokens = buildGradientTokens(scopeClass, primary500);
   return `${scoped}
 ${baseInherits}
 ${gradientTokens}
@@ -42125,6 +42193,39 @@ ${theme8.cssKeyframes}
 .${scopeClass} *, .${scopeClass} *::before, .${scopeClass} *::after { box-sizing: border-box; }
 .${scopeClass} h1, .${scopeClass} h2, .${scopeClass} h3, .${scopeClass} h4, .${scopeClass} h5, .${scopeClass} h6, .${scopeClass} button, .${scopeClass} input, .${scopeClass} textarea, .${scopeClass} select { font-family: inherit; }`;
 }
+function buildGradientTokens(scopeClass, primary500Hex) {
+  const selector = `.${scopeClass}`;
+  const primaryGradient = `  --ggui-color-primary-gradient: linear-gradient(135deg, var(--ggui-color-primary-500) 0%, var(--ggui-color-primary-600) 100%);`;
+  const surfaceGradientModern = `  --ggui-color-surface-gradient: linear-gradient(180deg, var(--ggui-color-surface) 0%, color-mix(in srgb, var(--ggui-color-primary-500) 4%, var(--ggui-color-surface)) 100%);`;
+  const glowModern = `  --ggui-effect-glow-primary: 0 0 0 4px color-mix(in srgb, var(--ggui-color-primary-500) 18%, transparent);`;
+  const glowStrongModern = `  --ggui-effect-glow-primary-strong: 0 8px 24px -4px color-mix(in srgb, var(--ggui-color-primary-500) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ggui-color-primary-500) 30%, transparent) inset;`;
+  if (!primary500Hex) {
+    return `${selector} {
+${primaryGradient}
+${surfaceGradientModern}
+${glowModern}
+${glowStrongModern}
+}`;
+  }
+  const surfaceGradientFallback = `  --ggui-color-surface-gradient: linear-gradient(180deg, var(--ggui-color-surface) 0%, var(--ggui-color-surface) 100%);`;
+  const glowFallback = `  --ggui-effect-glow-primary: ${precomputePrimaryColorMix("0 0 0 4px color-mix(in srgb, var(--ggui-color-primary-500) 18%, transparent)", primary500Hex)};`;
+  const glowStrongFallback = `  --ggui-effect-glow-primary-strong: ${precomputePrimaryColorMix("0 8px 24px -4px color-mix(in srgb, var(--ggui-color-primary-500) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ggui-color-primary-500) 30%, transparent) inset", primary500Hex)};`;
+  const baseBlock = `${selector} {
+${primaryGradient}
+${surfaceGradientFallback}
+${glowFallback}
+${glowStrongFallback}
+}`;
+  const modernBlock = `${COLOR_MIX_SUPPORTS} {
+  ${selector} {
+${surfaceGradientModern}
+${glowModern}
+${glowStrongModern}
+  }
+}`;
+  return `${baseBlock}
+${modernBlock}`;
+}
 var WIRE_EXPORTS = [
   // Hooks
   "useAction",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/dev-stack",
-  "version": "0.2.0-alpha.3",
+  "version": "0.2.0-alpha.4",
   "description": "Shared local dev engine for the ggui protocol: local UI registry discovery, compile-on-demand, filesystem watcher with SSE, and a read-only HTTP surface for dev tooling. Framework-neutral — agent runtime supervision plugs in via an adapter seam, so no agent SDK is hardcoded.",
   "keywords": [
     "ggui",
@@ -29,9 +29,9 @@
     "chokidar": "^4.0.3",
     "esbuild": "^0.25.12",
     "tinyglobby": "^0.2.16",
-    "@ggui-ai/agent-runtime": "0.2.0-alpha.3",
-    "@ggui-ai/ui-registry": "0.2.0-alpha.3",
-    "@ggui-ai/project-config": "0.2.0-alpha.3"
+    "@ggui-ai/agent-runtime": "0.2.0-alpha.4",
+    "@ggui-ai/ui-registry": "0.2.0-alpha.4",
+    "@ggui-ai/project-config": "0.2.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
@@ -41,9 +41,9 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.0.0",
-    "@ggui-ai/design": "0.2.0-alpha.3",
-    "@ggui-ai/react": "0.2.0-alpha.3",
-    "@ggui-ai/wire": "0.2.0-alpha.3"
+    "@ggui-ai/react": "0.2.0-alpha.4",
+    "@ggui-ai/design": "0.2.0-alpha.4",
+    "@ggui-ai/wire": "0.2.0-alpha.4"
   },
   "repository": {
     "type": "git",