@multiplatform.one/theme 7.83.1 → 7.84.0

package/dist/cjs/theme/resolveKnobs.cjs

@@ -0,0 +1,866 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var resolveKnobs_exports = {};
+__export(resolveKnobs_exports, {
+  borderRadiusMap: () => borderRadiusMap,
+  capContainerRadius: () => capContainerRadius,
+  capFieldRadius: () => capFieldRadius,
+  cardElevationMap: () => cardElevationMap,
+  cardLift: () => cardLift,
+  containerCapProps: () => containerCapProps,
+  containerRadiusMap: () => containerRadiusMap,
+  edgeColorAt: () => edgeColorAt,
+  elevationMap: () => elevationMap,
+  getHeadingFontFamily: () => getHeadingFontFamily,
+  labelFontSizeFor: () => labelFontSizeFor,
+  nestedControlPx: () => nestedControlPx,
+  normalizeSizeToken: () => normalizeSizeToken,
+  overlayElevationMap: () => overlayElevationMap,
+  paintedCardFill: () => paintedCardFill,
+  panelPaddingPx: () => panelPaddingPx,
+  radiusStopFromToken: () => radiusStopFromToken,
+  railFillRadius: () => railFillRadius,
+  resolveKnobs: () => resolveKnobs,
+  resolvePageTitleScale: () => resolvePageTitleScale,
+  resolveTextRoles: () => resolveTextRoles,
+  sizeKeyBelow: () => sizeKeyBelow,
+  sizedElevation: () => sizedElevation,
+  spacingRoles: () => spacingRoles
+});
+module.exports = __toCommonJS(resolveKnobs_exports);
+var import_motion = require("./motion.cjs");
+var import_platform = require("@multiplatform.one/platform");
+var import_web = require("@tamagui/web");
+var import_cornerSmoothing = require("./cornerSmoothing.cjs");
+var import_fonts = require("./defaults/fonts.cjs");
+var import_focusState = require("./focusState.cjs");
+var import_fontCategoryStacks = require("./fontCategoryStacks.cjs");
+var import_hairline = require("./hairline.cjs");
+var import_layoutTokens = require("./layoutTokens.cjs");
+var import_activeScale = require("./scale/activeScale.cjs");
+var import_scaleInputs = require("./scale/scaleInputs.cjs");
+var import_sizeRecipes = require("./sizeRecipes.cjs");
+const borderRadiusMap = {
+  none: "$0",
+  small: "$2",
+  medium: "$4",
+  large: "$6",
+  full: "$12"
+};
+const containerRadiusMap = {
+  none: "$0",
+  small: "$4",
+  medium: "$6",
+  large: "$8",
+  full: "$12"
+};
+const nestedRadiusMap = {
+  none: "$0",
+  small: "$2",
+  medium: "$3",
+  large: "$4",
+  full: "$5"
+};
+const railFillRadiusMap = {
+  none: "$0",
+  small: "$0",
+  medium: "$0",
+  large: "$2",
+  full: "$12"
+};
+function railFillRadius(stop) {
+  return railFillRadiusMap[stop ?? "medium"];
+}
+const borderWidthMap = {
+  none: 0,
+  small: import_hairline.hairlineBorderWidth,
+  medium: 1,
+  large: 2
+};
+function fainterEdge(color) {
+  if (color === "$borderColor") return "$borderColorHairline";
+  const step = /^\$color(\d+)$/.exec(color);
+  const n = step ? Number(step[1]) : 0;
+  return n >= 2 && n <= 8 ? `$color${n - 1}` : color;
+}
+function edgeColorAt(color, stop) {
+  return stop === "small" && borderWidthMap.small >= borderWidthMap.medium ? fainterEdge(color) : color;
+}
+const cornerSmoothingStyle = import_platform.isWeb ? {
+  round: void 0,
+  smooth: {
+    className: import_cornerSmoothing.cornerSmoothClassName
+  }
+} : {
+  round: void 0,
+  smooth: void 0
+};
+const spacingRoles = {
+  gapSm: "$2",
+  gap: "$3",
+  // LC-154: field to field sits a step wider than the row role, so a label
+  // reads closer to its own control than to the field above it.
+  fieldGap: "$4",
+  gapLg: "$5",
+  panelPadding: "$4",
+  featurePadding: "$6"
+};
+const featureRadiusMap = {
+  none: "$0",
+  small: "$9",
+  medium: "$10",
+  large: "$11",
+  full: "$12"
+};
+const pageTitleSizeMap = {
+  moderate: "$9",
+  display: "$12"
+};
+const compactPageTitleSizeMap = {
+  moderate: "$9",
+  display: "$11"
+};
+function resolvePageTitleScale(scale) {
+  const compact = compactPageTitleSizeMap[scale];
+  return {
+    size: pageTitleSizeMap[scale],
+    // Not a media `size`: the size variant also writes the font table's weight
+    // and colour, which would outrank the preset's and consumer's on a phone.
+    "$max-sm": {
+      fontSize: compact,
+      lineHeight: compact,
+      letterSpacing: compact
+    }
+  };
+}
+const radiusKeyMap = {
+  none: "0",
+  small: "4",
+  medium: "6",
+  large: "8",
+  full: "12"
+};
+function panelPaddingPx() {
+  return (0, import_activeScale.getActiveScaleTokens)().space[spacingRoles.panelPadding];
+}
+function capContainerRadius(borderRadius) {
+  const radiusPx = (0, import_activeScale.getActiveScaleTokens)().radius[radiusKeyMap[borderRadius]];
+  const paddingPx = panelPaddingPx();
+  return radiusPx > paddingPx ? paddingPx : containerRadiusMap[borderRadius];
+}
+function capFieldRadius(borderRadius) {
+  const token = borderRadiusMap[borderRadius];
+  const radiusPx = (0, import_activeScale.getActiveScaleTokens)().radius[token.slice(1)];
+  const paddingPx = panelPaddingPx();
+  return radiusPx > paddingPx ? paddingPx : token;
+}
+function radiusStopFromToken(token) {
+  return Object.keys(borderRadiusMap).find(stop => borderRadiusMap[stop] === token);
+}
+function containerCapProps(container, radiusToken) {
+  const radiusKnob = radiusStopFromToken(radiusToken);
+  if (!radiusKnob) return void 0;
+  return {
+    "data-constraint-container": container,
+    "data-radius-knob": radiusKnob
+  };
+}
+const sizeKeys = new Set(import_scaleInputs.SIZE_KEYS);
+function normalizeSizeToken(sizeToken) {
+  return sizeToken !== void 0 && sizeKeys.has(sizeToken) ? sizeToken : "$true";
+}
+const nestedControlRatio = 32 / 44;
+function nestedControlPx(sizeToken) {
+  return Math.round((0, import_activeScale.getActiveScaleTokens)().size[normalizeSizeToken(sizeToken)] * nestedControlRatio);
+}
+function sizeKeyBelow(sizeToken) {
+  const key = normalizeSizeToken(sizeToken);
+  const step = key === "$true" ? 4 : Number.parseFloat(key.slice(1));
+  return `$${Math.min(16, Math.max(1, Math.ceil(step) - 1))}`;
+}
+function labelFontSizeFor(sizeToken) {
+  const key = normalizeSizeToken(sizeToken);
+  if (key === "$true") return "$true";
+  return `$${Math.min(16, Math.max(1, Math.ceil(Number.parseFloat(key.slice(1)))))}`;
+}
+const headingFontMap = {
+  "sans-serif": "$heading",
+  serif: `$${import_fonts.headingCategoryFontKeys.serif}`,
+  mono: `$${import_fonts.headingCategoryFontKeys.mono}`,
+  slab: `$${import_fonts.headingCategoryFontKeys.slab}`,
+  rounded: `$${import_fonts.headingCategoryFontKeys.rounded}`,
+  condensed: `$${import_fonts.headingCategoryFontKeys.condensed}`,
+  cursive: `$${import_fonts.headingCategoryFontKeys.cursive}`,
+  handwriting: `$${import_fonts.headingCategoryFontKeys.handwriting}`,
+  pixel: `$${import_fonts.headingCategoryFontKeys.pixel}`,
+  blackletter: `$${import_fonts.headingCategoryFontKeys.blackletter}`,
+  geometric: `$${import_fonts.headingCategoryFontKeys.geometric}`
+};
+function getHeadingFontFamily(category) {
+  const family = (0, import_web.getConfig)().fontsParsed[headingFontMap[category]]?.family;
+  const value = typeof family === "string" ? family : family?.val;
+  return typeof value === "string" ? value : import_fontCategoryStacks.fontCategoryStacks[category];
+}
+const bodyFontMap = {
+  "sans-serif": "$body",
+  serif: "$serif",
+  mono: "$mono",
+  slab: "$slab",
+  rounded: "$rounded",
+  condensed: "$condensed",
+  cursive: "$cursive",
+  handwriting: "$handwriting",
+  pixel: "$pixel",
+  blackletter: "$blackletter",
+  geometric: "$geometric"
+};
+const fontWeightMap = {
+  regular: "400",
+  bold: "700"
+};
+const elevationMap = {
+  none: void 0,
+  small: void 0,
+  medium: "$2",
+  large: "$4"
+};
+const cardElevationMap = {
+  none: void 0,
+  small: "$0.25",
+  medium: "$0.5",
+  large: "$0.75"
+};
+const overlayElevationMap = {
+  none: void 0,
+  small: "$4",
+  medium: "$4.5",
+  large: "$5"
+};
+function sizedElevation(px) {
+  const offsetY = Math.round(px / 4 + 1);
+  return {
+    offsetY,
+    radius: Math.round(px / 2 + 2),
+    android: 2 * offsetY
+  };
+}
+function shadowInk(token, alpha) {
+  return import_platform.isWeb ? {
+    shadowColor: token,
+    shadowOpacity: 1
+  } : {
+    shadowColor: "rgb(0,0,0)",
+    shadowOpacity: alpha
+  };
+}
+function platformElevation(key) {
+  return key && (import_platform.isWeb ? key : (0, import_activeScale.getActiveScaleTokens)().size[key]);
+}
+function elevationPaint(key) {
+  if (!key) return {};
+  const {
+    offsetY,
+    radius
+  } = sizedElevation((0, import_activeScale.getActiveScaleTokens)().size[key]);
+  return {
+    ...shadowInk("$shadowColor", 0.12),
+    shadowOffset: {
+      width: 0,
+      height: offsetY
+    },
+    shadowRadius: radius,
+    ...(import_platform.isWeb ? {
+      style: {
+        boxShadow: `0px ${offsetY}px ${radius}px var(--shadowColor)`
+      }
+    } : {})
+  };
+}
+function cardLift(px) {
+  const radius = Math.round(8 + px * 2);
+  const offsetY = Math.round(radius / 3);
+  return {
+    offsetY,
+    radius,
+    android: Math.max(1, Math.round(offsetY / 2))
+  };
+}
+function cardLiftFor(key, scheme) {
+  if (!key || scheme === "dark") return {};
+  const {
+    offsetY,
+    radius,
+    android
+  } = cardLift((0, import_activeScale.getActiveScaleTokens)().size[key]);
+  return {
+    ...shadowInk("$shadow2", 0.08),
+    shadowOffset: {
+      width: 0,
+      height: offsetY
+    },
+    shadowRadius: radius,
+    elevationAndroid: android,
+    ...(import_platform.isWeb ? {
+      style: {
+        boxShadow: `0px 1px 2px var(--shadow1), 0px ${offsetY}px ${radius * 2}px var(--shadow2)`
+      }
+    } : {})
+  };
+}
+function elevationChromeFor(key) {
+  if (!key) return {};
+  return {
+    ...elevationPaint(key),
+    elevation: sizedElevation((0, import_activeScale.getActiveScaleTokens)().size[key]).android
+  };
+}
+const surface2 = {
+  fill: "$color4"
+};
+const textAccentColorMap = {
+  low: "$textMuted",
+  medium: "$textMuted",
+  high: "$color"
+};
+const FONT_LADDER = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
+const textRoleOffsets = import_platform.isWeb ? {
+  label: -2,
+  caption: -3,
+  headline: 1
+} : {
+  label: -1,
+  caption: -2,
+  headline: 0
+};
+function fontKeyOffset(key, offset) {
+  const bare = key === "$true" ? "4" : String(key).replace(/^\$/, "");
+  const index = FONT_LADDER.indexOf(bare);
+  if (index < 0) return key;
+  const next = Math.min(FONT_LADDER.length - 1, Math.max(0, index + offset));
+  return `$${FONT_LADDER[next]}`;
+}
+function resolveTextRoles(sizeToken, bold) {
+  const secondaryInk = "$textMuted";
+  const base = labelFontSizeFor(sizeToken);
+  const role = (offset, fontWeight, color) => {
+    const size = fontKeyOffset(base, offset);
+    return {
+      fontSize: size,
+      lineHeight: size,
+      fontWeight,
+      color
+    };
+  };
+  return {
+    label: role(textRoleOffsets.label, bold ? "700" : "500", secondaryInk),
+    meta: role(textRoleOffsets.label, "400", secondaryInk),
+    caption: role(textRoleOffsets.caption, "400", secondaryInk),
+    headline: role(textRoleOffsets.headline, bold ? "700" : "600", "$color")
+  };
+}
+const DISABLED_CHROME_OPACITY = 0.5;
+const DISABLED_GLYPH_OPACITY = 0.35;
+const DISABLED_ASSEMBLY_OPACITY = 0.5;
+const disabledCursor = {
+  cursor: "not-allowed"
+};
+const disabledSelectedSurface = {
+  backgroundColor: "$color5",
+  borderColor: "$color8",
+  ...disabledCursor
+};
+function resolveDisabled(disabledStyle, edge) {
+  const selectedSurfaceKnobProps = {
+    ...disabledSelectedSurface,
+    borderColor: edge(disabledSelectedSurface.borderColor)
+  };
+  if (disabledStyle === "dimWhole") {
+    return {
+      surfaceKnobProps: {
+        ...disabledCursor
+      },
+      selectedSurfaceKnobProps,
+      chromeKnobProps: {
+        ...disabledCursor
+      },
+      glyphKnobProps: {
+        ...disabledCursor
+      },
+      textKnobProps: {},
+      assemblyKnobProps: {
+        opacity: DISABLED_ASSEMBLY_OPACITY
+      },
+      style: disabledStyle
+    };
+  }
+  return {
+    surfaceKnobProps: {
+      backgroundColor: "$color3",
+      borderColor: edge("$color6"),
+      ...disabledCursor
+    },
+    selectedSurfaceKnobProps,
+    chromeKnobProps: {
+      opacity: DISABLED_CHROME_OPACITY,
+      ...disabledCursor
+    },
+    glyphKnobProps: {
+      opacity: DISABLED_GLYPH_OPACITY,
+      ...disabledCursor
+    },
+    textKnobProps: {
+      color: "$color11"
+    },
+    assemblyKnobProps: {},
+    style: disabledStyle
+  };
+}
+function resolveStateKnobs(state) {
+  const control = {};
+  const text = {};
+  const elevation = {};
+  if (state.fillStyle !== void 0) {
+    control.backgroundColor = state.fillStyle === "outlined" ? "transparent" : "$backgroundPress";
+  }
+  if (state.borderWidth !== void 0) {
+    control.borderWidth = borderWidthMap[state.borderWidth];
+  }
+  if (state.borderRadius !== void 0) {
+    control.borderRadius = borderRadiusMap[state.borderRadius];
+  }
+  if (state.elevation !== void 0) {
+    const token = elevationMap[state.elevation];
+    elevation.elevation = platformElevation(token);
+    Object.assign(elevation, elevationPaint(token));
+  }
+  if (state.textAccent !== void 0) {
+    text.color = textAccentColorMap[state.textAccent];
+  }
+  if (state.bodyFont !== void 0) {
+    text.fontFamily = bodyFontMap[state.bodyFont];
+  } else if (state.headingFont !== void 0) {
+    text.fontFamily = headingFontMap[state.headingFont];
+  }
+  if (state.fontWeight !== void 0) {
+    text.fontWeight = fontWeightMap[state.fontWeight];
+  }
+  return {
+    control,
+    text,
+    elevation
+  };
+}
+const barPaddingToken = "$2";
+const paintedCardFill = "$color2";
+const stateRecipes = {
+  selected: {
+    surfaceKnobProps: {
+      backgroundColor: "$selectedBackground"
+    },
+    textKnobProps: {
+      color: "$selectedColor"
+    }
+  }
+};
+function smoothingFor(knobs) {
+  const smoothing = cornerSmoothingStyle[knobs.cornerSmoothing ?? "round"];
+  const arcless = knobs.borderRadius === "none";
+  return {
+    scaleSmoothing: arcless || knobs.borderRadius === "full" ? void 0 : smoothing,
+    containerSmoothing: arcless ? void 0 : smoothing
+  };
+}
+function edgeRulesFor(knobs) {
+  const outlined = knobs.fillStyle === "outlined";
+  const smallEdge = knobs.borderWidth === "small" || outlined && knobs.borderWidth === "none";
+  const borderWidthValue = smallEdge ? borderWidthMap.small : borderWidthMap[knobs.borderWidth];
+  const edge = (color, width) => smallEdge && width >= borderWidthMap.medium ? fainterEdge(color) : color;
+  const overlayEdgeWidth = Math.max(borderWidthValue, borderWidthMap.small);
+  const flooredSmall = smallEdge || knobs.borderWidth === "none";
+  const overlayEdge = color => flooredSmall && overlayEdgeWidth >= borderWidthMap.medium ? fainterEdge(color) : color;
+  return {
+    outlined,
+    smallEdge,
+    borderWidthValue,
+    edge,
+    overlayEdgeWidth,
+    overlayEdge
+  };
+}
+const nonEmpty = obj => Object.keys(obj).length > 0 ? obj : void 0;
+function stateRecipesFor(knobs) {
+  const hover = resolveStateKnobs(knobs.hover);
+  const press = resolveStateKnobs(knobs.press);
+  const focus = resolveStateKnobs(knobs.focus);
+  const focusVisible = resolveStateKnobs(knobs.focusVisible);
+  const control = {
+    hoverKnobProps: (0, import_focusState.withDefaultStateLayer)(hover.control, import_focusState.STATE_LAYER_HOVER),
+    pressKnobProps: (0, import_focusState.withDefaultStateLayer)(press.control, import_focusState.STATE_LAYER_PRESS),
+    focusKnobProps: nonEmpty(focus.control),
+    focusVisibleKnobProps: (0, import_focusState.ensureFocusVisibleRing)(focusVisible.control)
+  };
+  const text = {
+    hoverKnobProps: nonEmpty(hover.text),
+    pressKnobProps: nonEmpty(press.text),
+    focusKnobProps: nonEmpty(focus.text),
+    focusVisibleKnobProps: nonEmpty(focusVisible.text)
+  };
+  const elevation = {
+    hoverKnobProps: nonEmpty(hover.elevation),
+    pressKnobProps: nonEmpty(press.elevation),
+    focusKnobProps: nonEmpty(focus.elevation),
+    focusVisibleKnobProps: nonEmpty(focusVisible.elevation)
+  };
+  return {
+    control,
+    text,
+    elevation
+  };
+}
+function boldWeight(knobs) {
+  return knobs.fontWeight === "bold" ? {
+    fontWeight: "700"
+  } : {};
+}
+function cardEdgeWidth(borderWidth) {
+  if (borderWidth === "none") return 0;
+  if (borderWidth === "large") return borderWidthMap.large;
+  return borderWidthMap.small;
+}
+function cardSurfaceFor(knobs, scheme, frame) {
+  const {
+    painted,
+    radius,
+    padding,
+    smoothing
+  } = frame;
+  if (painted) {
+    return {
+      backgroundColor: paintedCardFill,
+      borderRadius: radius,
+      padding,
+      ...smoothing
+    };
+  }
+  return {
+    backgroundColor: "$background",
+    borderColor: knobs.borderWidth === "large" ? "$borderColor" : edgeColorAt("$borderColor", "small"),
+    borderWidth: cardEdgeWidth(knobs.borderWidth),
+    borderRadius: radius,
+    padding,
+    ...cardLiftFor(cardElevationMap[knobs.elevation], scheme),
+    ...smoothing
+  };
+}
+function elevatedSurfaceFor(scheme, frame) {
+  const {
+    painted,
+    radius,
+    smoothing,
+    edge,
+    edgeWidth,
+    elevationToken
+  } = frame;
+  if (painted) {
+    return {
+      backgroundColor: "$background",
+      borderColor: edge,
+      borderWidth: edgeWidth,
+      borderRadius: radius,
+      elevation: void 0,
+      ...smoothing
+    };
+  }
+  if (scheme === "dark") {
+    return {
+      backgroundColor: surface2.fill,
+      borderColor: "transparent",
+      borderWidth: 0,
+      borderRadius: radius,
+      elevation: void 0,
+      ...smoothing
+    };
+  }
+  return {
+    backgroundColor: "$background",
+    borderColor: edge,
+    borderWidth: edgeWidth,
+    borderRadius: radius,
+    elevation: platformElevation(elevationToken),
+    ...elevationPaint(elevationToken),
+    ...smoothing
+  };
+}
+function resolveKnobs(knobs, override, scheme = "light", environment) {
+  const radiusToken = borderRadiusMap[knobs.borderRadius];
+  const nestedRadiusToken = nestedRadiusMap[knobs.borderRadius];
+  const sizeToken = normalizeSizeToken(environment?.sizeToken);
+  const painted = environment?.painted ?? false;
+  const nestedPx = nestedControlPx(sizeToken);
+  const nestedHitSlop = (0, import_layoutTokens.pressTargetHitSlop)(nestedPx);
+  const touch = environment?.touch ?? (import_platform.isTouchable || import_platform.isWebTouchable);
+  const sizeRecipe = (0, import_sizeRecipes.sizeRecipeForToken)(sizeToken, {
+    touch
+  });
+  const menuRowRecipe = (0, import_sizeRecipes.sizeRecipeForToken)(sizeToken, {
+    touch,
+    family: "menuRow"
+  });
+  const tabRecipe = (0, import_sizeRecipes.sizeRecipeForToken)(sizeToken, {
+    touch,
+    family: "tab"
+  });
+  const scaleTokens = (0, import_activeScale.getActiveScaleTokens)();
+  const paddingToken = spacingRoles.panelPadding;
+  const fontWeightValue = fontWeightMap[knobs.fontWeight];
+  const bodyFontValue = bodyFontMap[knobs.bodyFont] ?? "$body";
+  const motion = (0, import_motion.motionFor)(knobs.animation);
+  const containerRadiusValue = capContainerRadius(knobs.borderRadius);
+  const {
+    scaleSmoothing,
+    containerSmoothing
+  } = smoothingFor(knobs);
+  const {
+    outlined,
+    smallEdge,
+    borderWidthValue,
+    edge,
+    overlayEdgeWidth,
+    overlayEdge
+  } = edgeRulesFor(knobs);
+  const elevationToken = elevationMap[knobs.elevation];
+  const overlayElevationToken = overlayElevationMap[knobs.elevation];
+  const elevationChrome = elevationChromeFor(elevationToken);
+  const textAccentColor = textAccentColorMap[knobs.textAccent] ?? "$color";
+  const inputBackground = outlined ? "transparent" : "$background";
+  const {
+    control,
+    text,
+    elevation
+  } = stateRecipesFor(knobs);
+  const bold = boldWeight(knobs);
+  const nestedRadius = {
+    borderRadius: nestedRadiusToken,
+    ...containerSmoothing
+  };
+  const knobProps = {
+    borderRadius: {
+      borderRadius: radiusToken,
+      borderColor: edge("$borderColor", borderWidthValue),
+      borderWidth: borderWidthValue,
+      ...scaleSmoothing
+    },
+    borderRadiusNested: nestedRadius,
+    // MPO-19 X12: the old name for the same fragment, kept for one release so
+    // an out-of-tree consumer does not break on the rename. Same object, so
+    // the two cannot drift while both exist.
+    borderRadiusOuter: nestedRadius,
+    controlBorderFilled: {
+      borderColor: "transparent",
+      borderWidth: borderWidthValue
+    },
+    controlBorderOutlined: {
+      borderColor: edge("$borderColor", Math.max(borderWidthValue, 1)),
+      borderWidth: Math.max(borderWidthValue, 1)
+    },
+    // Axiom 1 child-clip cap: padded containers (Card/Panel/DialogContent)
+    // spread this after their radius-bearing fragment. Non-container parts
+    // keep the uncapped `borderRadius` fragment.
+    containerRadius: {
+      borderRadius: containerRadiusValue,
+      ...containerSmoothing
+    },
+    fieldRadius: {
+      borderRadius: capFieldRadius(knobs.borderRadius),
+      ...containerSmoothing
+    },
+    elevation: platformElevation(elevationToken),
+    overlayElevation: platformElevation(overlayElevationToken),
+    elevationChrome,
+    thumbShadow: elevationChromeFor("$0.5"),
+    scheme,
+    surface: {
+      backgroundColor: "$background",
+      borderColor: edge("$borderColor", borderWidthValue),
+      borderWidth: borderWidthValue
+    },
+    // LC-151: a top-level card is the grouped white step ($background inside
+    // the Card template) with a hairline edge and a hair of lift. Under a
+    // painted ancestor it is one fill step off its parent, edge and lift off,
+    // so a card on a card never stacks a second shadow (WP-c2).
+    cardSurface: cardSurfaceFor(knobs, scheme, {
+      painted,
+      radius: containerRadiusValue,
+      padding: paddingToken,
+      smoothing: containerSmoothing
+    }),
+    elevatedSurface: elevatedSurfaceFor(scheme, {
+      painted,
+      radius: radiusToken,
+      smoothing: scaleSmoothing,
+      edge: overlayEdge("$borderColor"),
+      edgeWidth: overlayEdgeWidth,
+      elevationToken: overlayElevationToken
+    }),
+    featureSurface: {
+      backgroundColor: "$background",
+      borderRadius: featureRadiusMap[knobs.borderRadius],
+      padding: spacingRoles.featurePadding,
+      // Bento marketing/auth card shadow: ~0px 9px 12px rgba(0,0,0,0.02) —
+      // softer/wider than any elevationMap token, so explicit shadow props.
+      ...shadowInk("rgba(0,0,0,0.02)", 0.02),
+      shadowOffset: {
+        width: 0,
+        height: 9
+      },
+      shadowRadius: 12,
+      ...containerSmoothing
+    },
+    inputSurface: {
+      borderWidth: borderWidthValue
+    },
+    borderWidthStop: smallEdge ? "small" : knobs.borderWidth,
+    panelPadding: {
+      padding: paddingToken
+    },
+    gapSm: {
+      gap: spacingRoles.gapSm
+    },
+    gap: {
+      gap: spacingRoles.gap
+    },
+    fieldGap: {
+      gap: spacingRoles.fieldGap
+    },
+    gapLg: {
+      gap: spacingRoles.gapLg
+    },
+    sizeToken,
+    label: {
+      fontSize: labelFontSizeFor(sizeToken),
+      fontFamily: bodyFontValue,
+      ...bold
+    },
+    nestedControl: {
+      px: nestedPx,
+      width: nestedPx,
+      height: nestedPx,
+      minWidth: nestedPx,
+      maxWidth: nestedPx,
+      minHeight: nestedPx,
+      maxHeight: nestedPx,
+      hitSlop: nestedHitSlop
+    },
+    control: {
+      height: sizeRecipe.height,
+      paddingHorizontal: sizeRecipe.paddingHorizontal,
+      gap: sizeRecipe.gap
+    },
+    controlType: {
+      fontSize: sizeRecipe.fontSize
+    },
+    controlIcon: {
+      width: sizeRecipe.iconSize,
+      height: sizeRecipe.iconSize
+    },
+    menuRow: {
+      minHeight: menuRowRecipe.height,
+      paddingHorizontal: menuRowRecipe.paddingHorizontal,
+      gap: menuRowRecipe.gap
+    },
+    menuRowType: {
+      fontSize: menuRowRecipe.fontSize
+    },
+    tab: {
+      height: tabRecipe.height,
+      paddingHorizontal: tabRecipe.paddingHorizontal,
+      gap: tabRecipe.gap
+    },
+    tabType: {
+      fontSize: tabRecipe.fontSize
+    },
+    tabHitSlop: (0, import_layoutTokens.pressTargetHitSlop)(tabRecipe.height),
+    bar: {
+      frame: {
+        paddingVertical: barPaddingToken,
+        paddingHorizontal: paddingToken,
+        minHeight: scaleTokens.size.$true + 2 * scaleTokens.space[barPaddingToken]
+      },
+      sizeToken: "$3"
+    },
+    heading: {
+      fontFamily: headingFontMap[knobs.headingFont],
+      ...bold
+    },
+    pageTitle: resolvePageTitleScale(knobs.pageTitleScale ?? "moderate"),
+    textRole: resolveTextRoles(sizeToken, knobs.fontWeight === "bold"),
+    body: {
+      fontFamily: bodyFontValue,
+      fontWeight: fontWeightValue
+    },
+    typography: {
+      mutedMono: {
+        fontFamily: "$mono",
+        color: textAccentColorMap.low
+      },
+      tabular: import_platform.isWeb ? {
+        style: {
+          fontVariantNumeric: "tabular-nums"
+        }
+      } : {
+        fontVariant: ["tabular-nums"]
+      }
+    },
+    textWeight: {
+      fontWeight: fontWeightValue
+    },
+    motion,
+    transition: motion.control.transition,
+    outlined,
+    pointy: knobs.borderRadius === "none",
+    textAccent: knobs.textAccent,
+    textAccentColor,
+    inputBackground,
+    // House decisions — behavioral pass-through (no token mapping).
+    fieldLabelPlacement: knobs.fieldLabelPlacement,
+    requiredMarking: knobs.requiredMarking,
+    tableZebra: knobs.tableZebra,
+    bulkBarPlacement: knobs.bulkBarPlacement,
+    selectAllScope: knobs.selectAllScope,
+    timestampStyle: knobs.timestampStyle,
+    disabledStyle: knobs.disabledStyle,
+    formAutofocus: knobs.formAutofocus
+  };
+  const finalKnobProps = override ? {
+    ...knobProps,
+    ...override(knobProps, knobs)
+  } : knobProps;
+  return {
+    knobProps: finalKnobProps,
+    control,
+    text,
+    elevation,
+    disabledState: resolveDisabled(knobs.disabledStyle, color => edge(color, borderWidthValue)),
+    state: stateRecipes
+  };
+}