@ggui-ai/dev-stack 0.27.0 → 0.29.0

package/dist/hub-preview/client.js

@@ -16016,6 +16016,37 @@ var require_utils = __commonJS({
       }
       return output.join("");
     }
+    function removeDotSegmentsRelative(path) {
+      if (path === "" || path[0] === "/") {
+        return removeDotSegments(path);
+      }
+      const segments = path.split("/");
+      const last = segments.length - 1;
+      const output = [];
+      let trailingDirectory = false;
+      for (let i = 0; i <= last; i++) {
+        const segment = segments[i];
+        if (segment === "." || segment === "..") {
+          if (segment === "..") {
+            if (output.length !== 0 && output[output.length - 1] !== "..") {
+              output.pop();
+            } else {
+              output.push("..");
+            }
+          }
+          trailingDirectory = i === last;
+        } else {
+          output.push(segment);
+        }
+      }
+      if (trailingDirectory && output[output.length - 1] !== "..") {
+        output.push("");
+      }
+      if (output.length === 0 || output[0] === "" || output[0].includes(":")) {
+        output.unshift(".");
+      }
+      return output.join("/");
+    }
     var HOST_DELIMS = { "@": "%40", "/": "%2F", "?": "%3F", "#": "%23", ":": "%3A" };
     var HOST_DELIM_RE = /[@/?#:]/g;
     var HOST_DELIM_NO_COLON_RE = /[@/?#]/g;
@@ -16276,6 +16307,7 @@ var require_utils = __commonJS({
       encodeFragment,
       escapePreservingEscapes,
       removeDotSegments,
+      removeDotSegmentsRelative,
       isIPv4,
       isUUID,
       normalizeIPv6,
@@ -16499,16 +16531,18 @@ var require_schemes = __commonJS({
 var require_fast_uri = __commonJS({
   "../../node_modules/fast-uri/index.js"(exports, module) {
     "use strict";
-    var { normalizeIPv6, removeDotSegments, recomposeAuthority, normalizePercentEncoding, normalizePathEncoding, serializePathEncoding, normalizeQueryFragmentEncoding, encodeQuery, encodeFragment, reescapeHostDelimiters, isIPv4, nonSimpleDomain } = require_utils();
+    var { normalizeIPv6, removeDotSegments, removeDotSegmentsRelative, recomposeAuthority, normalizePercentEncoding, normalizePathEncoding, serializePathEncoding, normalizeQueryFragmentEncoding, encodeQuery, encodeFragment, reescapeHostDelimiters, isIPv4, nonSimpleDomain } = require_utils();
     var { SCHEMES, getSchemeHandler } = require_schemes();
     var VALID_SCHEME = /^[A-Za-z][A-Za-z0-9+.-]*$/u;
     var MALFORMED_SCHEME_ERROR = "URI scheme is malformed.";
-    function decodeValidScheme(scheme) {
-      const decodedScheme = unescape(String(scheme));
-      if (!VALID_SCHEME.test(decodedScheme)) {
+    var MALFORMED_HOST_ERROR = "URI host is malformed.";
+    var FORBIDDEN_DOMAIN_HOST_CHARACTER = /[\0-\x20"#/:<>?@[\\\]^`{|}\x7F]/u;
+    function validateScheme(scheme) {
+      const stringScheme = String(scheme);
+      if (!VALID_SCHEME.test(stringScheme)) {
         throw new TypeError(MALFORMED_SCHEME_ERROR);
       }
-      return decodedScheme;
+      return stringScheme;
     }
     function normalize(uri, options) {
       if (typeof uri === "string") {
@@ -16545,6 +16579,9 @@ var require_fast_uri = __commonJS({
       const resolvedSchemeHandler = getSchemeHandler(options && options.scheme || resolved.scheme);
       const resolvedHost = resolved.host;
       const resolvedHostIsIP = resolvedHost !== void 0 && resolvedHost !== "" && (isIPv4(resolvedHost) || normalizeIPv6(resolvedHost).isIPV6);
+      if (hasForbiddenDomainHost(resolved, options || {}, resolvedSchemeHandler, resolvedHostIsIP)) {
+        throw new Error(MALFORMED_HOST_ERROR);
+      }
       canonicalizeHost(resolved, options || {}, resolvedSchemeHandler, resolvedHostIsIP);
       const encodedASCIIHost = resolvedHost && resolvedHost.indexOf("%") !== -1 && !/\P{ASCII}/u.test(resolvedHost);
       if (resolved.error && !encodedASCIIHost) {
@@ -16586,14 +16623,15 @@ var require_fast_uri = __commonJS({
             if (relative.path[0] === "/") {
               target.path = removeDotSegments(relative.path);
             } else {
-              if ((base.userinfo !== void 0 || base.host !== void 0 || base.port !== void 0) && !base.path) {
+              const baseHasAuthority = base.userinfo !== void 0 || base.host !== void 0 || base.port !== void 0;
+              if (baseHasAuthority && !base.path) {
                 target.path = "/" + relative.path;
               } else if (!base.path) {
                 target.path = relative.path;
               } else {
                 target.path = base.path.slice(0, base.path.lastIndexOf("/") + 1) + relative.path;
               }
-              target.path = removeDotSegments(target.path);
+              target.path = base.scheme === void 0 && !baseHasAuthority && target.path[0] !== "/" ? removeDotSegmentsRelative(target.path) : removeDotSegments(target.path);
             }
             target.query = relative.query;
           }
@@ -16631,12 +16669,13 @@ var require_fast_uri = __commonJS({
       const options = Object.assign({}, opts);
       const uriTokens = [];
       if (component.scheme) {
-        component.scheme = decodeValidScheme(component.scheme);
+        component.scheme = validateScheme(component.scheme);
       }
       const schemeHandler = getSchemeHandler(options.scheme || component.scheme);
       if (schemeHandler && schemeHandler.serialize) schemeHandler.serialize(component, options);
       const hasAuthority = component.userinfo !== void 0 || component.host !== void 0 || component.port !== void 0;
-      const pathNoScheme = !options.skipEscape && component.scheme === void 0 && !hasAuthority;
+      const schemelessReference = (component.scheme === void 0 || options.reference === "suffix") && !hasAuthority;
+      const pathNoScheme = !options.skipEscape && schemelessReference;
       if (component.path !== void 0) {
         if (!options.skipEscape) {
           component.path = serializePathEncoding(component.path, pathNoScheme);
@@ -16645,7 +16684,7 @@ var require_fast_uri = __commonJS({
         }
       }
       if (options.reference !== "suffix" && component.scheme) {
-        component.scheme = decodeValidScheme(component.scheme);
+        component.scheme = validateScheme(component.scheme);
         uriTokens.push(component.scheme, ":");
       }
       const authority = recomposeAuthority(component);
@@ -16661,9 +16700,9 @@ var require_fast_uri = __commonJS({
       if (component.path !== void 0) {
         let s = component.path;
         if (!options.absolutePath && (!schemeHandler || !schemeHandler.absolutePath)) {
-          s = removeDotSegments(s);
+          s = schemelessReference && s[0] !== "/" ? removeDotSegmentsRelative(s) : removeDotSegments(s);
         }
-        if (pathNoScheme) {
+        if (schemelessReference) {
           s = serializePathEncoding(s, true);
         }
         if (authority === void 0 && s[0] === "/" && s[1] === "/") {
@@ -16710,16 +16749,34 @@ var require_fast_uri = __commonJS({
       return hasMalformedPercentEncoding(matches[3]) || host !== void 0 && !isIPLiteral(host) && hasMalformedPercentEncoding(host) || hasMalformedPercentEncoding(matches[6]) || hasMalformedPercentEncoding(matches[7]) || hasMalformedPercentEncoding(matches[8]);
     }
     function canonicalizeHost(parsed, options, schemeHandler, isIP) {
+      if (hasForbiddenDomainHost(parsed, options, schemeHandler, isIP)) {
+        parsed.error = parsed.error || MALFORMED_HOST_ERROR;
+        return true;
+      }
       if (!options.unicodeSupport && (!schemeHandler || !schemeHandler.unicodeSupport) && parsed.host && !isIPLiteral(parsed.host) && (options.domainHost || schemeHandler && schemeHandler.domainHost) && isIP === false && nonSimpleDomain(parsed.host)) {
+        let url;
         try {
-          parsed.host = new URL("http://" + parsed.host).hostname;
+          url = new URL("http://" + parsed.host);
         } catch (e) {
           parsed.error = parsed.error || "Host's domain name can not be converted to ASCII: " + e;
           return true;
         }
+        if (!isHostOnlyURL(url)) {
+          parsed.error = parsed.error || MALFORMED_HOST_ERROR;
+          return true;
+        }
+        parsed.host = url.hostname;
       }
       return false;
     }
+    function hasForbiddenDomainHost(parsed, options, schemeHandler, isIP) {
+      return Boolean(
+        parsed.host && isIP === false && !isIPLiteral(parsed.host) && (options.domainHost || schemeHandler && schemeHandler.domainHost) && FORBIDDEN_DOMAIN_HOST_CHARACTER.test(parsed.host)
+      );
+    }
+    function isHostOnlyURL(url) {
+      return url.username === "" && url.password === "" && url.port === "" && url.pathname === "/" && url.search === "" && url.hash === "" && url.hostname !== "";
+    }
     function parseWithStatus(uri, opts) {
       const options = Object.assign({}, opts);
       const parsed = {
@@ -16774,9 +16831,8 @@ var require_fast_uri = __commonJS({
         parsed.query = matches[7];
         parsed.fragment = matches[8];
         if (parsed.scheme !== void 0) {
-          const decodedScheme = unescape(parsed.scheme);
-          if (VALID_SCHEME.test(decodedScheme)) {
-            parsed.scheme = decodedScheme.toLowerCase();
+          if (VALID_SCHEME.test(parsed.scheme)) {
+            parsed.scheme = parsed.scheme.toLowerCase();
           } else {
             parsed.error = parsed.error || MALFORMED_SCHEME_ERROR;
             malformedScheme = true;
@@ -16804,7 +16860,7 @@ var require_fast_uri = __commonJS({
             malformedIPLiteral = hasIPLiteralBracket && (!bracketedIPLiteral || ipv6result.error === true);
             parsed.host = isIP ? ipv6result.host : ipv6result.host.toLowerCase();
             if (malformedIPLiteral) {
-              parsed.error = parsed.error || "URI host is malformed.";
+              parsed.error = parsed.error || MALFORMED_HOST_ERROR;
               malformedAuthorityOrPort = true;
             }
           } else {
@@ -16827,13 +16883,14 @@ var require_fast_uri = __commonJS({
         if (!malformedIPLiteral) {
           malformedHost = canonicalizeHost(parsed, options, schemeHandler, isIP);
         }
-        if (!schemeHandler || schemeHandler && !schemeHandler.skipNormalize) {
-          if (uri.indexOf("%") !== -1) {
-            if (parsed.host !== void 0 && !malformedIPLiteral) {
-              const host = isIP ? parsed.host : normalizePercentEncoding(parsed.host, true);
-              parsed.host = reescapeHostDelimiters(host, isIP);
-            }
+        if (uri.indexOf("%") !== -1 && parsed.host !== void 0 && !malformedIPLiteral) {
+          let host = isIP ? parsed.host : normalizePercentEncoding(parsed.host, true);
+          if (!isIP) {
+            host = normalizePercentEncoding(host.toLowerCase());
           }
+          parsed.host = isIP || options.scheme !== "null" ? reescapeHostDelimiters(host, isIP) : host;
+        }
+        if (!schemeHandler || schemeHandler && !schemeHandler.skipNormalize) {
           if (parsed.path) {
             parsed.path = normalizePathEncoding(parsed.path);
           }
@@ -21060,6 +21117,7 @@ __export2(primitives_exports, {
   Spacer: () => Spacer,
   Spinner: () => Spinner,
   Stack: () => Stack,
+  TINT_STEPS: () => TINT_STEPS,
   Table: () => Table,
   Tabs: () => Tabs,
   Text: () => Text,
@@ -21177,7 +21235,7 @@ var maxWidthMap = {
   "3xl": maxWidth["3xl"],
   full: maxWidth.full
 };
-function Container({ children, maxWidth: maxWidth2 = "lg", center = true, padding, style, className }) {
+function Container({ children, maxWidth: maxWidth2 = "lg", center = false, padding, style, className }) {
   const resolvedMaxWidth = maxWidthMap[maxWidth2] || maxWidth2;
   const resolvedPadding = resolveSpacing(padding);
   return (0, import_jsx_runtime3.jsx)("div", { className, style: {
@@ -21193,7 +21251,9 @@ function frameAttributes(frame) {
     return {};
   return {
     ...frame.surface !== void 0 ? { "data-ggui-surface": frame.surface } : {},
-    ...frame.bleed === true ? { "data-ggui-bleed": "" } : {}
+    ...frame.bleed === true ? { "data-ggui-bleed": "" } : {},
+    ...frame.box === true ? { "data-ggui-box": "" } : {},
+    ...frame.card === true ? { "data-ggui-card": "" } : {}
   };
 }
 function renderWithTrait(trait, traitProps, root, children) {
@@ -21290,6 +21350,28 @@ function resolveSurfaceCss(surface) {
       return "transparent";
   }
 }
+var TINT_STEPS = ["tint-1", "tint-2", "tint-3", "tint-4", "tint-5", "tint-6", "tint-7", "tint-8"];
+function resolveTintCss(step) {
+  switch (step) {
+    case "tint-1":
+      return "var(--ggui-color-tint-1, #f4c5b3)";
+    case "tint-2":
+      return "var(--ggui-color-tint-2, #e2cfa5)";
+    case "tint-3":
+      return "var(--ggui-color-tint-3, #c3dab1)";
+    case "tint-4":
+      return "var(--ggui-color-tint-4, #a7ded0)";
+    case "tint-5":
+      return "var(--ggui-color-tint-5, #a6dbed)";
+    case "tint-6":
+      return "var(--ggui-color-tint-6, #bfd1f9)";
+    case "tint-7":
+      return "var(--ggui-color-tint-7, #dec6ee)";
+    case "tint-8":
+      return "var(--ggui-color-tint-8, #f3c1d1)";
+  }
+}
+var TINT_ON_COLOR_CSS = resolveToneCss("default");
 var RADIUS_SCALE_TOKEN = {
   none: "0",
   sm: "var(--ggui-shape-radius-sm, 4px)",
@@ -21323,6 +21405,7 @@ function Card(props) {
     border = true,
     radius: radius2 = "lg",
     surface,
+    tint,
     style,
     className,
     bleed,
@@ -21330,13 +21413,15 @@ function Card(props) {
     ...traitProps
   } = props;
   const frame = {
-    ...surface !== "transparent" ? { surface: surface ?? "default" } : {},
-    ...bleed === true ? { bleed: true } : {}
+    ...tint !== void 0 ? { surface: tint } : surface !== "transparent" ? { surface: surface ?? "default" } : {},
+    ...bleed === true ? { bleed: true } : {},
+    card: true
   };
-  const resolvedPadding = resolveSpacing(padding);
-  const resolvedSurface = resolveSurfaceCss(surface ?? "default");
-  const resolvedOnColor = resolveSurfaceOnColorCss(surface ?? "default");
-  const scope = resolveSurfaceScope(surface ?? "default");
+  const visible = border || surface !== void 0 && surface !== "transparent" || tint !== void 0;
+  const resolvedPadding = padding === "none" ? resolveSpacing(padding) : `${resolveSpacing(padding)} ${visible ? "var(--ggui-card-inset, var(--ggui-spacing-lg))" : "0"}`;
+  const resolvedSurface = tint !== void 0 ? resolveTintCss(tint) : resolveSurfaceCss(surface ?? "default");
+  const resolvedOnColor = tint !== void 0 ? TINT_ON_COLOR_CSS : resolveSurfaceOnColorCss(surface ?? "default");
+  const scope = tint !== void 0 ? void 0 : resolveSurfaceScope(surface ?? "default");
   const authorStyle = scope !== void 0 ? withoutBackground(style) : style;
   const composedStyle = {
     backgroundColor: resolvedSurface,
@@ -21440,21 +21525,17 @@ function Grid(props) {
   return renderWithTrait(Trait, traitProps, { className, style: composedStyle }, children);
 }
 function Box(props) {
-  const { children, padding, paddingX, paddingY, margin, surface, assetColor, assetSemantic, radius: radius2, style, className, bleed, as: Trait, ...traitProps } = props;
-  const markedSurface = surface !== void 0 && surface !== "transparent" ? surface : void 0;
-  const frame = markedSurface === void 0 && bleed !== true ? void 0 : { ...markedSurface !== void 0 ? { surface: markedSurface } : {}, ...bleed === true ? { bleed: true } : {} };
-  let computedPadding;
-  if (paddingX !== void 0 || paddingY !== void 0) {
-    const px = resolveSpacing(paddingX) || "0";
-    const py = resolveSpacing(paddingY) || "0";
-    computedPadding = `${py} ${px}`;
-  } else {
-    computedPadding = resolveSpacing(padding);
-  }
+  const { children, padding, paddingX, paddingY, margin, surface, tint, assetColor, assetSemantic, radius: radius2, style, className, bleed, as: Trait, ...traitProps } = props;
+  const markedSurface = tint !== void 0 ? tint : surface !== void 0 && surface !== "transparent" ? surface : void 0;
+  const frame = markedSurface === void 0 && bleed !== true ? void 0 : { ...markedSurface !== void 0 ? { surface: markedSurface } : {}, ...bleed === true ? { bleed: true } : {}, box: true };
+  const blockPadding = resolveSpacing(paddingY ?? padding);
+  const padded = [padding, paddingX, paddingY].some((p) => p !== void 0 && p !== "none");
+  const computedPadding = padded ? `${blockPadding || "0"} ${markedSurface !== void 0 ? "var(--ggui-card-inset, var(--ggui-spacing-lg))" : "0"}` : resolveSpacing(padding);
   const validAsset = assetColor !== void 0 && typeof assetSemantic === "string" && assetSemantic.length > 0 ? assetColor : void 0;
-  const resolvedBackground = validAsset ? validAsset : surface ? resolveSurfaceCss(surface) : void 0;
-  const resolvedOnColor = !validAsset && surface ? resolveSurfaceOnColorCss(surface) : void 0;
-  const scope = !validAsset && surface ? resolveSurfaceScope(surface) : void 0;
+  const tinted = !validAsset && tint !== void 0;
+  const resolvedBackground = validAsset ? validAsset : tint !== void 0 ? resolveTintCss(tint) : surface ? resolveSurfaceCss(surface) : void 0;
+  const resolvedOnColor = tinted ? TINT_ON_COLOR_CSS : !validAsset && surface ? resolveSurfaceOnColorCss(surface) : void 0;
+  const scope = !validAsset && !tinted && surface ? resolveSurfaceScope(surface) : void 0;
   const authorStyle = scope !== void 0 ? withoutBackground(style) : style;
   const composedStyle = {
     padding: computedPadding,
@@ -29560,6 +29641,14 @@ var consumed_tokens_manifest_default = {
     "--ggui-color-successContainer",
     "--ggui-color-sunken",
     "--ggui-color-tertiaryContainer",
+    "--ggui-color-tint-1",
+    "--ggui-color-tint-2",
+    "--ggui-color-tint-3",
+    "--ggui-color-tint-4",
+    "--ggui-color-tint-5",
+    "--ggui-color-tint-6",
+    "--ggui-color-tint-7",
+    "--ggui-color-tint-8",
     "--ggui-color-warning-100",
     "--ggui-color-warning-200",
     "--ggui-color-warning-50",
@@ -29736,6 +29825,135 @@ function contrastRatio(a, b) {
   const [hi, lo] = la > lb ? [la, lb] : [lb, la];
   return (hi + 0.05) / (lo + 0.05);
 }
+function oklab(hex) {
+  const o = hexToOklch(hex);
+  const r = o.h * Math.PI / 180;
+  return [o.l, o.c * Math.cos(r), o.c * Math.sin(r)];
+}
+function labDistance(x, y) {
+  return 100 * Math.hypot(x[0] - y[0], x[1] - y[1], x[2] - y[2]);
+}
+function stateContainerPair(ramp, lightSide) {
+  const light = (hex) => hexToOklch(hex).l >= 0.5;
+  const order = lightSide ? ["100", "800"] : ["800", "100"];
+  const cStop = order.find((stop) => light(ramp[stop]) === lightSide) ?? order[0];
+  const inkOrder = cStop === "100" ? lightSide ? ["900", "800"] : ["800", "900"] : ["100", "50"];
+  const inkStop = inkOrder.find((stop) => light(ramp[stop]) !== lightSide) ?? inkOrder[0];
+  return { container: ramp[cStop], ink: ramp[inkStop] };
+}
+var TINT_RECIPE = { lightL: 0.87, darkL: 0.34, chroma: 0.06, hueBase: 42, hueStep: 45 };
+var TINT_SEARCH = {
+  lightL: [0.8, 0.92],
+  darkL: [0.26, 0.5],
+  chroma: [0.04, 0.08],
+  hueSpread: 22,
+  lStep: 0.01,
+  cStep: 0.01,
+  hueStepDeg: 2
+};
+var TINT_FLOORS = { ink: 4.5, container: 8, pairwise: 4, state: 4 };
+var TINT_STATE_CONTAINERS = [
+  "errorContainer",
+  "warningContainer",
+  "successContainer",
+  "infoContainer",
+  "tertiaryContainer",
+  "primaryContainer"
+];
+var round2 = (v) => Math.round(v * 100) / 100;
+function tintSetAt(l, c, hueBase) {
+  return TINT_STEPS.map((_, k) => oklchToHex({ l, c, h: hueBase + TINT_RECIPE.hueStep * k }));
+}
+function tintFloorsOf(tints, container, onContainer, states) {
+  return measureTints(tints, tints.map(oklab), oklab(container), onContainer, states.map(oklab));
+}
+function measureTints(tints, labs, container, onContainer, states) {
+  let pairwise = Infinity;
+  for (let i = 0; i < labs.length; i++)
+    for (let j = i + 1; j < labs.length; j++)
+      pairwise = Math.min(pairwise, labDistance(labs[i], labs[j]));
+  let state = Infinity;
+  for (const s of states)
+    for (const t of labs)
+      state = Math.min(state, labDistance(t, s));
+  return {
+    ink: Math.min(...tints.map((t) => contrastRatio(onContainer, t))),
+    container: Math.min(...labs.map((t) => labDistance(t, container))),
+    pairwise,
+    state
+  };
+}
+var tintMemo = /* @__PURE__ */ new Map();
+var TINT_MEMO_MAX = 64;
+var TINT_SCREEN_MARGIN = 1;
+function deriveTints(container, onContainer, stateContainers) {
+  const key = `${container} ${onContainer} ${stateContainers.join(" ")}`;
+  const memo = tintMemo.get(key);
+  if (memo !== void 0)
+    return memo;
+  const found = walkTints(container, onContainer, stateContainers);
+  if (tintMemo.size >= TINT_MEMO_MAX)
+    tintMemo.clear();
+  tintMemo.set(key, found);
+  return found;
+}
+function walkTints(container, onContainer, stateContainers) {
+  const containerLab = oklab(container);
+  const stateLabs = stateContainers.map(oklab);
+  const lightSide = hexToOklch(container).l >= 0.5;
+  const l0 = lightSide ? TINT_RECIPE.lightL : TINT_RECIPE.darkL;
+  const [lMin, lMax] = lightSide ? TINT_SEARCH.lightL : TINT_SEARCH.darkL;
+  const [cMin, cMax] = TINT_SEARCH.chroma;
+  const candidates = [];
+  const lCount = Math.round((lMax - lMin) / TINT_SEARCH.lStep);
+  const cCount = Math.round((cMax - cMin) / TINT_SEARCH.cStep);
+  const hCount = Math.round(TINT_SEARCH.hueSpread / TINT_SEARCH.hueStepDeg);
+  for (let i = 0; i <= lCount; i++) {
+    const l = round2(lMin + i * TINT_SEARCH.lStep);
+    for (let j = 0; j <= cCount; j++) {
+      const c = round2(cMin + j * TINT_SEARCH.cStep);
+      for (let k = -hCount; k <= hCount; k++) {
+        const dh = k * TINT_SEARCH.hueStepDeg;
+        const d = Math.round(Math.abs(l - l0) / TINT_SEARCH.lStep) + Math.round(Math.abs(c - TINT_RECIPE.chroma) / TINT_SEARCH.cStep) + Math.abs(k);
+        candidates.push({ l, c, hueBase: TINT_RECIPE.hueBase + dh, d });
+      }
+    }
+  }
+  candidates.sort((a, b) => a.d - b.d);
+  let best;
+  for (const cand of candidates) {
+    if (best !== void 0 && stateLabs.length > 0) {
+      let near = Infinity;
+      let screenable = true;
+      for (let k = 0; k < TINT_STEPS.length && screenable && near >= TINT_FLOORS.state - TINT_SCREEN_MARGIN; k++) {
+        const h = (cand.hueBase + TINT_RECIPE.hueStep * k) * Math.PI / 180;
+        const lab = [cand.l, cand.c * Math.cos(h), cand.c * Math.sin(h)];
+        if (!inGamut(oklabToLinear(lab[0], lab[1], lab[2])))
+          screenable = false;
+        else
+          for (const st of stateLabs)
+            near = Math.min(near, labDistance(lab, st));
+      }
+      if (screenable && near < TINT_FLOORS.state - TINT_SCREEN_MARGIN && near + TINT_SCREEN_MARGIN <= best.reached.state)
+        continue;
+    }
+    const tints2 = tintSetAt(cand.l, cand.c, cand.hueBase);
+    if (tints2.some((t) => contrastRatio(onContainer, t) < TINT_FLOORS.ink))
+      continue;
+    const reached = measureTints(tints2, tints2.map(oklab), containerLab, onContainer, stateLabs);
+    if (reached.container < TINT_FLOORS.container || reached.pairwise < TINT_FLOORS.pairwise)
+      continue;
+    const found = { tints: tints2, l: cand.l, c: cand.c, hueBase: cand.hueBase, clears: reached.state >= TINT_FLOORS.state, reached };
+    if (found.clears)
+      return found;
+    if (best === void 0 || reached.state > best.reached.state)
+      best = found;
+  }
+  if (best !== void 0)
+    return best;
+  const tints = tintSetAt(l0, TINT_RECIPE.chroma, TINT_RECIPE.hueBase);
+  return { tints, l: l0, c: TINT_RECIPE.chroma, hueBase: TINT_RECIPE.hueBase, clears: false, reached: tintFloorsOf(tints, container, onContainer, stateContainers) };
+}
 var STOPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
 var RAMP_L = [0.97, 0.93, 0.86, 0.76, 0.66, NaN, 0.5, 0.42, 0.34, 0.26];
 var RAMP_C = [0.15, 0.3, 0.5, 0.75, 0.9, 1, 0.95, 0.85, 0.7, 0.55];
@@ -29916,13 +30134,17 @@ function deriveThemeVariables(doc, mode, options = {}) {
       V[`--ggui-color-${fam}-${stop}`] = ramp2[stop];
     const cap = fam[0].toUpperCase() + fam.slice(1);
     V[`--ggui-color-on${cap}`] = single(`on${cap}`) ?? onColourFor(ramp2["500"]);
-    V[`--ggui-color-${fam}Container`] = single(`${fam}Container`) ?? (mode === "light" ? ramp2["100"] : ramp2["800"]);
-    V[`--ggui-color-on${cap}Container`] = single(`on${cap}Container`) ?? (mode === "light" ? ramp2["900"] : ramp2["100"]);
+    const pair = stateContainerPair(ramp2, hexToOklch(container).l >= 0.5);
+    V[`--ggui-color-${fam}Container`] = single(`${fam}Container`) ?? pair.container;
+    V[`--ggui-color-on${cap}Container`] = single(`on${cap}Container`) ?? pair.ink;
   }
   V["--ggui-color-error"] = V["--ggui-color-error-500"];
   V["--ggui-color-link"] = single("link") ?? readableAccent(V, container, onContainer);
-  V["--ggui-color-heroGround"] = mode === "light" ? V["--ggui-color-primaryContainer"] : onContainer;
-  V["--ggui-color-onHeroGround"] = mode === "light" ? V["--ggui-color-onPrimaryContainer"] : container;
+  const authoredHero = single("heroGround");
+  const authoredOnHero = single("onHeroGround");
+  const heroAuthored = authoredHero !== void 0 && authoredOnHero !== void 0;
+  V["--ggui-color-heroGround"] = heroAuthored ? authoredHero : mode === "light" ? V["--ggui-color-primaryContainer"] : onContainer;
+  V["--ggui-color-onHeroGround"] = heroAuthored ? authoredOnHero : mode === "light" ? V["--ggui-color-onPrimaryContainer"] : container;
   V["--ggui-color-heroLink"] = readableAccent(V, V["--ggui-color-heroGround"], V["--ggui-color-onHeroGround"]);
   V["--ggui-color-inverseLink"] = readableAccent(V, onContainer, container);
   V["--ggui-color-onInverted"] = container;
@@ -29930,6 +30152,10 @@ function deriveThemeVariables(doc, mode, options = {}) {
   V["--ggui-color-heroOutline"] = readableOutline(V["--ggui-color-heroGround"], V["--ggui-color-onHeroGround"]);
   V["--ggui-color-controlOutline"] = readableOutline(container, onContainer);
   V["--ggui-color-controlAccentOutline"] = readableAccent(V, container, onContainer, 3);
+  const tintSet = deriveTints(container, onContainer, TINT_STATE_CONTAINERS.map((n) => V[`--ggui-color-${n}`]).filter((v) => v !== void 0));
+  TINT_STEPS.forEach((step, i) => {
+    V[`--ggui-color-${step}`] = tintSet.tints[i];
+  });
   const family = doc.font.family;
   const sans = tokenValue(family.sans) ?? fontFamily.sans;
   V["--ggui-font-family-sans"] = sans;
@@ -29995,6 +30221,7 @@ function deriveThemeVariables(doc, mode, options = {}) {
     V[`--ggui-spacing-${key}`] = onRhythm(String(value)) ?? stated(sp, key) ?? String(value);
   for (const [key, value] of Object.entries(NAMED_SPACING))
     V[`--ggui-spacing-${key}`] = onRhythm(value) ?? stated(sp, key) ?? value;
+  V["--ggui-card-inset"] = "var(--ggui-spacing-lg)";
   const rad = doc.shape?.radius;
   for (const [key, value] of Object.entries(radius))
     V[`--ggui-shape-radius-${key}`] = stated(rad, key) ?? String(value);
@@ -30432,6 +30659,12 @@ var gguiLight = {
     // paper-2
     onPrimaryContainer: { $value: "#292929", $type: "color" },
     // ink
+    // ggui#1998 — the hero band on a light host is the brand's dark pair: ink ground, paper heading (the CDO's
+    // pick, c.6357369453). Authored as a pair, so the derivation keeps it; a dark host keeps the derived ink pair.
+    heroGround: { $value: "#292929", $type: "color" },
+    // ink
+    onHeroGround: { $value: "#f4f3ed", $type: "color" },
+    // paper
     // Error role pair — onError is paper for high contrast on signal-red.
     onError: { $value: "#f4f3ed", $type: "color" },
     errorContainer: { $value: "#fbe7e3", $type: "color" },
@@ -33140,7 +33373,9 @@ var PRIMITIVES_EXPORTS = [
   "Accordion",
   "MotionKeyframes",
   "useMotion",
-  "useAnimationKey"
+  "useAnimationKey",
+  // ggui#1847 — the eight categorical tint names, so a card can map categories to `tint` in order.
+  "TINT_STEPS"
 ];
 var COMPONENTS_EXPORTS = [
   "SearchField",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ggui-ai/dev-stack",
-  "version": "0.27.0",
-  "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.",
+  "version": "0.29.0",
+  "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",
     "dev-server",
@@ -28,9 +28,9 @@
   "dependencies": {
     "chokidar": "^4.0.3",
     "esbuild": "^0.28.2",
-    "@ggui-ai/agent-runtime": "0.27.0",
-    "@ggui-ai/project-config": "0.27.0",
-    "@ggui-ai/ui-registry": "0.27.0"
+    "@ggui-ai/agent-runtime": "0.29.0",
+    "@ggui-ai/ui-registry": "0.29.0",
+    "@ggui-ai/project-config": "0.29.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
@@ -39,10 +39,10 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.0.0",
-    "vitest": "^3.2.6",
-    "@ggui-ai/design": "0.27.0",
-    "@ggui-ai/mcp-apps-react": "0.27.0",
-    "@ggui-ai/wire": "0.27.0"
+    "vitest": "^4.1.11",
+    "@ggui-ai/design": "0.29.0",
+    "@ggui-ai/mcp-apps-react": "0.29.0",
+    "@ggui-ai/wire": "0.29.0"
   },
   "repository": {
     "type": "git",