@multiplatform.one/theme 7.75.0 → 7.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.75.0",
+  "version": "7.76.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.75.0",
-    "@multiplatform.one/store": "^7.75.0",
+    "@multiplatform.one/platform": "^7.76.0",
+    "@multiplatform.one/store": "^7.76.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.75.0",
-    "@multiplatform.one/test-utils": "7.75.0",
+    "@multiplatform.one/config": "7.76.0",
+    "@multiplatform.one/test-utils": "7.76.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/menuRow.palette.spec.ts

@@ -0,0 +1,52 @@
+/**
+ * FZ-8557 (Round 40): a checked menu row is a selection tint on its panel in
+ * every theme. Dark steps lighter than the `$color4` overlay, never a hole;
+ * light stays a tint on the white panel, never a slab; the check is the
+ * accent (ink when hue-less) and holds 3:1 on the fill.
+ */
+import { describe, expect, it } from "vitest";
+import { contrastRatio, normalizeToHex, relativeLuminance } from "./theme/colorRules";
+import { createDefaultThemeConfig } from "./theme/createDefaultThemeConfig";
+import { menuRowChecked, resolveMenuRowCheckInk } from "./menuRow";
+
+type ThemeValues = Record<string, { val: string } | undefined>;
+const themes = createDefaultThemeConfig({}).tamagui.themes as unknown as Record<
+  string,
+  ThemeValues
+>;
+
+const lum = (raw: string) => {
+  const hex = normalizeToHex(raw);
+  if (!hex) throw new Error(`not an opaque colour: ${raw}`);
+  return relativeLuminance(hex);
+};
+const token = (theme: ThemeValues, name: string) => {
+  const value = theme[name.replace(/^\$/, "")]?.val;
+  if (!value) throw new Error(`no ${name}`);
+  return value;
+};
+
+const hues = ["", "_blue", "_gray", "_green", "_orange", "_pink", "_purple", "_red", "_yellow"];
+
+describe("a checked menu row is a selection tint on its panel (FZ-8557)", () => {
+  for (const scheme of ["light", "dark"] as const)
+    for (const hue of hues) {
+      const name = `${scheme}${hue}_alt1`;
+      it(`${name}`, () => {
+        const theme = themes[name];
+        expect(theme, name).toBeTruthy();
+        const panel = token(theme!, scheme === "dark" ? "$color4" : "$background");
+        const fill = token(theme!, menuRowChecked(scheme).backgroundColor);
+        const ratio = contrastRatio(lum(fill), lum(panel));
+        if (scheme === "dark") expect(lum(fill), `${fill} on ${panel}`).toBeGreaterThan(lum(panel));
+        else expect(lum(fill), `${fill} on ${panel}`).toBeLessThan(lum(panel));
+        expect(ratio, `${fill} on ${panel}`).toBeLessThan(1.3);
+        const check = resolveMenuRowCheckInk(theme!);
+        expect(contrastRatio(lum(check), lum(fill)), `${check} on ${fill}`).toBeGreaterThanOrEqual(
+          3,
+        );
+        if (hue && hue !== "_gray") expect(check).toBe(token(theme!, "$accentColor"));
+        else expect(check).toBe(token(theme!, "$color"));
+      });
+    }
+});

package/src/menuRow.spec.ts

@@ -31,13 +31,13 @@ describe("menuRowFrame (LC-16 shared menu-row geometry)", () => {
   });
 });
 
-describe("menuRowChecked (LC-262 checked row, FZ-8355 r6)", () => {
-  it("rests light rows on the $color4 selection surface, one step past the $color3 hover", () => {
-    expect(menuRowChecked("light").backgroundColor).toBe("$color4");
+describe("menuRowChecked (LC-262 checked row, FZ-8355 r6, FZ-8557)", () => {
+  it("rests light rows on the $color3 tint, one step off the white panel", () => {
+    expect(menuRowChecked("light").backgroundColor).toBe("$color3");
   });
 
-  it("recesses dark rows to $color2, off the $color4 dark overlay", () => {
-    expect(menuRowChecked("dark").backgroundColor).toBe("$color2");
+  it("lifts dark rows to $color5, a step lighter than the $color4 dark overlay", () => {
+    expect(menuRowChecked("dark").backgroundColor).toBe("$color5");
   });
 
   it("keeps the fill through hover and press, and leaves focus rings to the consumer", () => {
@@ -50,22 +50,22 @@ describe("menuRowChecked (LC-262 checked row, FZ-8355 r6)", () => {
     }
   });
 
-  it("marks the check in the theme's selected ink", () => {
-    expect(menuRowCheckInk).toBe("$selectedColor");
+  it("marks the check in the theme's accent", () => {
+    expect(menuRowCheckInk).toBe("$accentColor");
   });
 });
 
 describe("resolveMenuRowCheckInk (LC-176 bold mono check on hue-less themes)", () => {
-  it("keeps a colour theme's selected ink", () => {
+  it("keeps a colour theme's accent", () => {
     expect(
-      resolveMenuRowCheckInk({ selectedColor: { val: "#113264" }, color: { val: "#050505" } }),
-    ).toBe("#113264");
+      resolveMenuRowCheckInk({ accentColor: { val: "#0e6abe" }, color: { val: "#050505" } }),
+    ).toBe("#0e6abe");
   });
 
-  it("paints the primary ink when the selected ink is grey", () => {
+  it("paints the primary ink when the accent is grey", () => {
     expect(
       resolveMenuRowCheckInk({
-        selectedColor: { val: "hsla(0, 0%, 27%, 1)" },
+        accentColor: { val: "hsla(0, 0%, 27%, 1)" },
         color: { val: "hsla(0, 0%, 2%, 1)" },
       }),
     ).toBe("hsla(0, 0%, 2%, 1)");

package/src/menuRow.ts

@@ -41,17 +41,19 @@ export const menuRowFrame = {
 /**
  * LC-262: a checked or selected menu or picker row is highlighted, so it reads
  * as chosen without hunting for the check (FZ-8355 r6, rv_9244d1b063a3a4de).
- * Light rests on the LC-05 selection surface `$color4`, one step past the
- * `$color3` hover. A dark overlay is itself `$color4` (`surface2`), so dark
- * recesses to `$color2`, the band Clay rated good. In a colour theme both
- * steps carry its hue. Hover and press keep the fill, so a checked row never
- * drops to the transient hover fill. Spread it last on the row so it wins
- * over the consumer's hover and keyboard-cursor fills; a consumer that paints
- * focus as a fill paints `backgroundColor` there too. Focus rings stay the
- * consumer's.
+ * The fill is a selection tint one step off the panel toward the ink, the way
+ * HIG lifts a selection off its material (FZ-8557, Round 40). Light rests on
+ * `$color3` over the white `$color1` panel, a tint and not the `$color4` slab.
+ * A dark overlay is `$color4` (`surface2`), so dark rests on `$color5`, a step
+ * lighter: a recessed `$color2` read as a hole in the panel. In a colour theme
+ * both steps carry its hue. Hover and press keep the fill, so a checked row
+ * never drops to the transient hover fill. Spread it last on the row so it
+ * wins over the consumer's hover and keyboard-cursor fills; a consumer that
+ * paints focus as a fill paints `backgroundColor` there too. Focus rings stay
+ * the consumer's.
  */
 export function menuRowChecked(scheme: ColorScheme) {
-  const fill = scheme === "dark" ? "$color2" : "$color4";
+  const fill = scheme === "dark" ? "$color5" : "$color3";
   return {
     backgroundColor: fill,
     hoverStyle: { backgroundColor: fill },
@@ -59,8 +61,8 @@ export function menuRowChecked(scheme: ColorScheme) {
   } as const;
 }
 
-/** The check mark on a `menuRowChecked` row: the theme's selected ink. */
-export const menuRowCheckInk = "$selectedColor" as const;
+/** The check mark on a `menuRowChecked` row: the theme's accent (FZ-8557). */
+export const menuRowCheckInk = "$accentColor" as const;
 
 type ThemeValues = Record<string, { val?: unknown } | undefined>;
 
@@ -72,10 +74,10 @@ function isHueless(paint: string): boolean {
 }
 
 /**
- * The paint for a checked row's check (LC-176, FZ-8355 r6). A colour theme
- * marks it in its selected ink; a hue-less theme's selected ink is a muted
- * grey that reads as a thin grey tick on the fill, so it takes the primary
- * ink instead, the bold mono glyph. Never undefined.
+ * The paint for a checked row's check (LC-176, FZ-8355 r6, FZ-8557). A colour
+ * theme marks it in its accent; a hue-less theme's accent is a muted grey that
+ * reads as a thin grey tick on the fill, so it takes the primary ink instead,
+ * the bold mono glyph. Never undefined.
  */
 export function resolveMenuRowCheckInk(theme: ThemeValues): string {
   const tint = theme[menuRowCheckInk.slice(1)]?.val;

package/src/theme/chartPalette.spec.ts

@@ -217,6 +217,24 @@ describe("resolveChartPalette", () => {
     );
   });
 
+  it("leads with the series cycle for a hueless accent in both schemes (LC-172)", () => {
+    // A hueless preset's dark accent resolves to a mid-grey step: readable,
+    // not ink, and still no series hue.
+    const midGrey = Colors.grayDark.gray9;
+    const dark = resolveChartPalette({ scheme: "dark", identitySolid: midGrey, tint: false });
+    expect(dark.single).toBe(Colors.blueDark.blue9);
+    expect(dark.categorical).not.toContain(midGrey);
+    const light = resolveChartPalette({ scheme: "light", identitySolid: "#111111", tint: false });
+    expect(light.single).toBe(Colors.blue.blue10);
+    // A gray tint chose gray; a hued accent keeps its hue.
+    expect(
+      resolveChartPalette({ scheme: "light", identitySolid: grayTintSolid, tint: true }).single,
+    ).toBe(grayTintSolid);
+    expect(
+      resolveChartPalette({ scheme: "dark", identitySolid: darkAccent, tint: false }).single,
+    ).toBe(darkAccent);
+  });
+
   it("single-series takes the theme identity solid", () => {
     expect(resolveChartPalette({ scheme: "light", identitySolid: lightAccent }).single).toBe(
       lightAccent,

package/src/theme/chartPalette.ts

@@ -55,6 +55,12 @@ export interface ResolveChartPaletteInput {
    * Card.
    */
   surfaces?: readonly (string | undefined)[];
+  /**
+   * The identity is a tint sub-theme's solid, chosen as the series hue (a gray
+   * tint stays gray). Otherwise it is the accent, and a hueless accent leads
+   * the series with the cycle (LC-172).
+   */
+  tint?: boolean;
 }
 
 /**
@@ -132,6 +138,10 @@ function isInkIdentity(color: string, scheme: "light" | "dark"): boolean {
   const page = normalizeToHex(chartReferenceSurfaces[scheme][0]) as string;
   return contrastRatio(relativeLuminance(hex), relativeLuminance(page)) >= inkContrastFloor;
 }
+function isNeutral(color: string): boolean {
+  const hsl = colorToHsl(color);
+  return !!hsl && hsl.s < neutralSaturationFloor;
+}
 /** Cycle hues closer than this to the identity hue are dropped as confusable. */
 const hueDedupeThresholdDeg = 30;
 
@@ -221,7 +231,12 @@ export function resolveChartPalette(input: ResolveChartPaletteInput): ChartPalet
   const cycle = categoricalHueCycle.map((entry) => (scheme === "dark" ? entry.dark : entry.light));
   // LC-172: an ink identity (a hueless preset's near-black, or near-white in
   // dark) paints marks as solid as text, so the series leads with the cycle.
-  const single = isInkIdentity(identity, scheme) ? cycle[0] : identity;
+  // A hueless accent does too in either scheme: in dark it resolves to a
+  // mid-grey step that is not ink but is still no series hue.
+  const single =
+    isInkIdentity(identity, scheme) || (input.tint === false && isNeutral(identity))
+      ? cycle[0]
+      : identity;
   const identityHsl = colorToHsl(single) as Hsl;
 
   const deduped =
@@ -303,6 +318,7 @@ export function useChartPalette(): ChartPalette {
           color11,
         ],
         surfaces: [page, card],
+        tint: isTint,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scheme, identitySolid, isTint, accentKey, color10, color11, page, card],

package/src/theme/devtools/ThemeDevtoolsPanel.tsx

@@ -1658,12 +1658,15 @@ export function ThemeDevtoolsPanel({
                   : {}),
             }}
             onClick={handleCopySnapshot}
+            aria-label={
+              copyStatus === "copied"
+                ? "Copied"
+                : copyStatus === "error"
+                  ? "Copy failed"
+                  : "Copy snapshot"
+            }
           >
-            {copyStatus === "copied"
-              ? "Copied!"
-              : copyStatus === "error"
-                ? "Failed"
-                : "Copy Snapshot"}
+            {copyStatus === "copied" ? "✓" : copyStatus === "error" ? "!" : "⧉"}
           </button>
           <button type="button" style={styles.resetBtn} onClick={handleRandomize}>
             Random

package/src/theme/pageGutter.tsx

@@ -12,7 +12,7 @@
  */
 
 import type { ReactNode } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { useMedia } from "tamagui";
 
 const PageGutterContext = createContext<string | null>(null);
@@ -36,6 +36,41 @@ export function usePageGutter(): string | null {
   return useContext(PageGutterContext);
 }
 
+/**
+ * LC-159, nested Screen amendment (FZ-7993): a page shell declares itself to
+ * the content under it, so a `Screen` inside another `Screen`'s content merges
+ * into it instead of rendering a second page. The parent keeps the page's one
+ * gutter, cap, scroll view, pinned bar and bottom edge; the nested Screen adds
+ * only what this record says the parent lacks. It lives beside the gutter, in
+ * the one package every host and every page shell resolves to the same module.
+ */
+export interface ParentScreen {
+  /** The parent's scroll view carries its content. */
+  scrolls: boolean;
+  /** The gutter token the page applies, or null when nothing pads it yet. */
+  inset: string | null;
+  /** A content cap is already applied above. */
+  capped: boolean;
+}
+
+const ParentScreenContext = createContext<ParentScreen | null>(null);
+
+/** Declares a page shell to the content under it. Renders no DOM. */
+export function ScreenNesting({
+  scrolls,
+  inset,
+  capped,
+  children,
+}: ParentScreen & { children: ReactNode }) {
+  const value = useMemo(() => ({ scrolls, inset, capped }), [scrolls, inset, capped]);
+  return <ParentScreenContext.Provider value={value}>{children}</ParentScreenContext.Provider>;
+}
+
+/** The page shell this content sits in, or null at the top of a page. */
+export function useParentScreen(): ParentScreen | null {
+  return useContext(ParentScreenContext);
+}
+
 /** `$4` → `$-4`. */
 export function negateSpaceToken(token: string): string {
   if (token.startsWith("$-")) return `$${token.slice(2)}`;

package/types/menuRow.d.ts

@@ -37,34 +37,36 @@ export declare const menuRowFrame: {
 /**
  * LC-262: a checked or selected menu or picker row is highlighted, so it reads
  * as chosen without hunting for the check (FZ-8355 r6, rv_9244d1b063a3a4de).
- * Light rests on the LC-05 selection surface `$color4`, one step past the
- * `$color3` hover. A dark overlay is itself `$color4` (`surface2`), so dark
- * recesses to `$color2`, the band Clay rated good. In a colour theme both
- * steps carry its hue. Hover and press keep the fill, so a checked row never
- * drops to the transient hover fill. Spread it last on the row so it wins
- * over the consumer's hover and keyboard-cursor fills; a consumer that paints
- * focus as a fill paints `backgroundColor` there too. Focus rings stay the
- * consumer's.
+ * The fill is a selection tint one step off the panel toward the ink, the way
+ * HIG lifts a selection off its material (FZ-8557, Round 40). Light rests on
+ * `$color3` over the white `$color1` panel, a tint and not the `$color4` slab.
+ * A dark overlay is `$color4` (`surface2`), so dark rests on `$color5`, a step
+ * lighter: a recessed `$color2` read as a hole in the panel. In a colour theme
+ * both steps carry its hue. Hover and press keep the fill, so a checked row
+ * never drops to the transient hover fill. Spread it last on the row so it
+ * wins over the consumer's hover and keyboard-cursor fills; a consumer that
+ * paints focus as a fill paints `backgroundColor` there too. Focus rings stay
+ * the consumer's.
  */
 export declare function menuRowChecked(scheme: ColorScheme): {
-    readonly backgroundColor: "$color2" | "$color4";
+    readonly backgroundColor: "$color3" | "$color5";
     readonly hoverStyle: {
-        readonly backgroundColor: "$color2" | "$color4";
+        readonly backgroundColor: "$color3" | "$color5";
     };
     readonly pressStyle: {
-        readonly backgroundColor: "$color2" | "$color4";
+        readonly backgroundColor: "$color3" | "$color5";
     };
 };
-/** The check mark on a `menuRowChecked` row: the theme's selected ink. */
-export declare const menuRowCheckInk: "$selectedColor";
+/** The check mark on a `menuRowChecked` row: the theme's accent (FZ-8557). */
+export declare const menuRowCheckInk: "$accentColor";
 type ThemeValues = Record<string, {
     val?: unknown;
 } | undefined>;
 /**
- * The paint for a checked row's check (LC-176, FZ-8355 r6). A colour theme
- * marks it in its selected ink; a hue-less theme's selected ink is a muted
- * grey that reads as a thin grey tick on the fill, so it takes the primary
- * ink instead, the bold mono glyph. Never undefined.
+ * The paint for a checked row's check (LC-176, FZ-8355 r6, FZ-8557). A colour
+ * theme marks it in its accent; a hue-less theme's accent is a muted grey that
+ * reads as a thin grey tick on the fill, so it takes the primary ink instead,
+ * the bold mono glyph. Never undefined.
  */
 export declare function resolveMenuRowCheckInk(theme: ThemeValues): string;
 /** Live `resolveMenuRowCheckInk` for the theme in scope. */

package/types/menuRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW;;;;;;;;EAOjD;AAED,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAG,gBAAyB,CAAC;AAEzD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC;AASjE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKjE;AAED,4DAA4D;AAC5D,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}
+{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW;;;;;;;;EAOjD;AAED,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAC;AAEvD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC;AASjE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKjE;AAED,4DAA4D;AAC5D,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/types/theme/chartPalette.d.ts

@@ -52,6 +52,12 @@ export interface ResolveChartPaletteInput {
      * Card.
      */
     surfaces?: readonly (string | undefined)[];
+    /**
+     * The identity is a tint sub-theme's solid, chosen as the series hue (a gray
+     * tint stays gray). Otherwise it is the accent, and a hueless accent leads
+     * the series with the cycle (LC-172).
+     */
+    tint?: boolean;
 }
 /**
  * Pure palette resolution — see {@link ChartPalette} for the contract.

package/types/theme/chartPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartPalette.d.ts","sourceRoot":"","sources":["../../src/theme/chartPalette.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,sEAAsE;IACtE,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IACrD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;CAC5C;AAuJD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CA4BjF;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACtC,MAAM,EAAE,CAaV;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAgC9C"}
+{"version":3,"file":"chartPalette.d.ts","sourceRoot":"","sources":["../../src/theme/chartPalette.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,sEAAsE;IACtE,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IACrD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA2JD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAiCjF;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACtC,MAAM,EAAE,CAaV;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAiC9C"}

package/types/theme/devtools/ThemeDevtoolsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeDevtoolsPanel.d.ts","sourceRoot":"","sources":["../../../src/theme/devtools/ThemeDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAuLH,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AA4hBF,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,UAAU,CAAC;IAEjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEjC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmDD,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,GACd,EAAE,uBAAuB,2CAm5BzB"}
+{"version":3,"file":"ThemeDevtoolsPanel.d.ts","sourceRoot":"","sources":["../../../src/theme/devtools/ThemeDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAuLH,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AA4hBF,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,UAAU,CAAC;IAEjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEjC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmDD,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,GACd,EAAE,uBAAuB,2CAs5BzB"}

package/types/theme/pageGutter.d.ts

@@ -23,6 +23,28 @@ export interface PageGutterProps {
 export declare function PageGutter({ inset, children }: PageGutterProps): import("react/jsx-runtime").JSX.Element;
 /** The nearest page gutter token, or null off the page line. */
 export declare function usePageGutter(): string | null;
+/**
+ * LC-159, nested Screen amendment (FZ-7993): a page shell declares itself to
+ * the content under it, so a `Screen` inside another `Screen`'s content merges
+ * into it instead of rendering a second page. The parent keeps the page's one
+ * gutter, cap, scroll view, pinned bar and bottom edge; the nested Screen adds
+ * only what this record says the parent lacks. It lives beside the gutter, in
+ * the one package every host and every page shell resolves to the same module.
+ */
+export interface ParentScreen {
+    /** The parent's scroll view carries its content. */
+    scrolls: boolean;
+    /** The gutter token the page applies, or null when nothing pads it yet. */
+    inset: string | null;
+    /** A content cap is already applied above. */
+    capped: boolean;
+}
+/** Declares a page shell to the content under it. Renders no DOM. */
+export declare function ScreenNesting({ scrolls, inset, capped, children, }: ParentScreen & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** The page shell this content sits in, or null at the top of a page. */
+export declare function useParentScreen(): ParentScreen | null;
 /** `$4` → `$-4`. */
 export declare function negateSpaceToken(token: string): string;
 export interface PhoneTableBleed {

package/types/theme/pageGutter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageGutter.d.ts","sourceRoot":"","sources":["../../src/theme/pageGutter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAE9D;AAED,gEAAgE;AAChE,wBAAgB,aAAa,IAAI,MAAM,GAAG,IAAI,CAE7C;AAED,oBAAoB;AACpB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,EAAE;QAAE,gBAAgB,EAAE,MAAM,CAAA;KAAE,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAK3D"}
+{"version":3,"file":"pageGutter.d.ts","sourceRoot":"","sources":["../../src/theme/pageGutter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAE9D;AAED,gEAAgE;AAChE,wBAAgB,aAAa,IAAI,MAAM,GAAG,IAAI,CAE7C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;CACjB;AAID,qEAAqE;AACrE,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,YAAY,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAGxC;AAED,yEAAyE;AACzE,wBAAgB,eAAe,IAAI,YAAY,GAAG,IAAI,CAErD;AAED,oBAAoB;AACpB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,EAAE;QAAE,gBAAgB,EAAE,MAAM,CAAA;KAAE,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAK3D"}