@astryxdesign/core 0.2.0-canary.f306f13 → 0.2.0-canary.fc53ff7

package/dist/hooks/containerReveal.pool.stylex.d.ts

@@ -0,0 +1,281 @@
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal.
+ *
+ * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
+ * resolved by the StyleX compiler, which welds the marker's class into the
+ * emitted selector (`.marker:hover *`). A marker and the styles referencing it
+ * are therefore inseparable at build time — the marker cannot be passed as a
+ * runtime argument, so the blocks cannot be produced by a loop or a helper and
+ * must be written out literally per marker. A single shared marker would leak
+ * hover/focus across NESTED reveal containers (an ancestor container's :hover
+ * matches a descendant container's revealed content), so useContainerReveal
+ * hands each concurrently mounted container a distinct marker from this pool
+ * (see the free-list there).
+ *
+ * The reveal recipe hides content with `position: absolute` (removed from
+ * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
+ * content in the accessibility tree and tab order — unlike display/visibility
+ * — so it stays reachable by keyboard and assistive tech while hidden.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const POOL_SIZE = 6;
+export declare const m0: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m1: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m2: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m3: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m4: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m5: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const POOL: readonly [{
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}];
+export type RevealSlot = (typeof POOL)[number];
+//# sourceMappingURL=containerReveal.pool.stylex.d.ts.map

package/dist/hooks/containerReveal.pool.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containerReveal.pool.stylex.d.ts","sourceRoot":"","sources":["../../src/hooks/containerReveal.pool.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAwExC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOP,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/hooks/containerReveal.pool.stylex.js

@@ -0,0 +1,281 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal.
+ *
+ * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
+ * resolved by the StyleX compiler, which welds the marker's class into the
+ * emitted selector (`.marker:hover *`). A marker and the styles referencing it
+ * are therefore inseparable at build time — the marker cannot be passed as a
+ * runtime argument, so the blocks cannot be produced by a loop or a helper and
+ * must be written out literally per marker. A single shared marker would leak
+ * hover/focus across NESTED reveal containers (an ancestor container's :hover
+ * matches a descendant container's revealed content), so useContainerReveal
+ * hands each concurrently mounted container a distinct marker from this pool
+ * (see the free-list there).
+ *
+ * The reveal recipe hides content with `position: absolute` (removed from
+ * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
+ * content in the accessibility tree and tab order — unlike display/visibility
+ * — so it stays reachable by keyboard and assistive tech while hidden.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { durationVars, easeVars } from "../theme/tokens.stylex.js";
+export const POOL_SIZE = 6;
+export const m0 = {
+  x177fznd: "x177fznd",
+  $$css: true
+};
+const s0 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xz63v9m x1ceiq2s xhva3ql",
+    kVAEAm: "x10l6tqk xd2i8i8 xw895rg x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xz63v9m x1ceiq2s xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1d23w33",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1d23w33",
+    $$css: true
+  }
+};
+export const m1 = {
+  x1e36hu2: "x1e36hu2",
+  $$css: true
+};
+const s1 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x7g73g2 x8e9lel xhva3ql",
+    kVAEAm: "x10l6tqk x13sqjsa xxj8d0r x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x7g73g2 x8e9lel xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x19f70rm",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x19f70rm",
+    $$css: true
+  }
+};
+export const m2 = {
+  x10zkftw: "x10zkftw",
+  $$css: true
+};
+const s2 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xe0m1oz xtpmopf xhva3ql",
+    kVAEAm: "x10l6tqk x1k2a1sm xs5no71 x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xe0m1oz xtpmopf xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xramsae",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xramsae",
+    $$css: true
+  }
+};
+export const m3 = {
+  xbjq1vy: "xbjq1vy",
+  $$css: true
+};
+const s3 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xnsjgr4 x1y0vk26 xhva3ql",
+    kVAEAm: "x10l6tqk x1cuf62g x1qy2sty x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xnsjgr4 x1y0vk26 xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x177ftvf",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x177ftvf",
+    $$css: true
+  }
+};
+export const m4 = {
+  x3z7t8n: "x3z7t8n",
+  $$css: true
+};
+const s4 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x1qps2i7 x1a7n03g xhva3ql",
+    kVAEAm: "x10l6tqk xeilikp x1xz04m3 x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x1qps2i7 x1a7n03g xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1k1siky",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1k1siky",
+    $$css: true
+  }
+};
+export const m5 = {
+  x6dglqq: "x6dglqq",
+  $$css: true
+};
+const s5 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x52nu6g xt179ik xhva3ql",
+    kVAEAm: "x10l6tqk x8j1s1q x8gw32m x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x52nu6g xt179ik xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xenj0cg",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xenj0cg",
+    $$css: true
+  }
+};
+
+// The compiled StyleX objects carry `when.ancestor` conditionals the public
+// `StyleXStyles` type does not model, so the slot shape is inferred.
+export const POOL = [{
+  marker: m0,
+  reveal: s0.reveal,
+  revealLayoutPreserved: s0.revealLayoutPreserved,
+  conceal: s0.conceal,
+  concealLayoutPreserved: s0.concealLayoutPreserved
+}, {
+  marker: m1,
+  reveal: s1.reveal,
+  revealLayoutPreserved: s1.revealLayoutPreserved,
+  conceal: s1.conceal,
+  concealLayoutPreserved: s1.concealLayoutPreserved
+}, {
+  marker: m2,
+  reveal: s2.reveal,
+  revealLayoutPreserved: s2.revealLayoutPreserved,
+  conceal: s2.conceal,
+  concealLayoutPreserved: s2.concealLayoutPreserved
+}, {
+  marker: m3,
+  reveal: s3.reveal,
+  revealLayoutPreserved: s3.revealLayoutPreserved,
+  conceal: s3.conceal,
+  concealLayoutPreserved: s3.concealLayoutPreserved
+}, {
+  marker: m4,
+  reveal: s4.reveal,
+  revealLayoutPreserved: s4.revealLayoutPreserved,
+  conceal: s4.conceal,
+  concealLayoutPreserved: s4.concealLayoutPreserved
+}, {
+  marker: m5,
+  reveal: s5.reveal,
+  revealLayoutPreserved: s5.revealLayoutPreserved,
+  conceal: s5.conceal,
+  concealLayoutPreserved: s5.concealLayoutPreserved
+}];

package/dist/hooks/index.d.ts

@@ -45,4 +45,6 @@ export type { InteractiveRole, UseInteractiveRoleOptions, } from './useInteracti
 export { useLongPress } from './useLongPress';
 export type { UseLongPressOptions, UseLongPressHandlers } from './useLongPress';
 export { useDevWarning } from './useDevWarning';
+export { useContainerReveal } from './useContainerReveal';
+export type { UseContainerRevealOptions, UseContainerRevealReturn, ContentRevealOptions, } from './useContainerReveal';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EACV,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAE9E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/dist/hooks/index.js

@@ -30,4 +30,5 @@ export { useInputContainer } from "./useInputContainer.js";
 export { useInputStatusIcon } from "./useInputStatusIcon.js";
 export { useInteractiveRole } from "./useInteractiveRole.js";
 export { useLongPress } from "./useLongPress.js";
-export { useDevWarning } from "./useDevWarning.js";
+export { useDevWarning } from "./useDevWarning.js";
+export { useContainerReveal } from "./useContainerReveal.js";

package/dist/hooks/useContainerReveal.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @file useContainerReveal.ts
+ * @input Uses React, the generated marker pool, useDevWarning
+ * @output Exports useContainerReveal — a headless hover/focus reveal primitive
+ * @position Core hook. Consumed by any component that reveals (or conceals)
+ *   content when its container is hovered or focused — e.g. Thumbnail's remove
+ *   button, TreeList row actions.
+ *
+ * Gives a container a scoped hover/focus-within trigger that reveals or
+ * conceals content inside it, entirely in CSS (no hover state in JS, no
+ * re-render on hover). The caller authors NO StyleX: the hook hands out a
+ * marker + matching reveal styles from a pre-compiled pool.
+ *
+ * ACCESSIBILITY (WCAG 2.2 by construction):
+ * - Revealed content is visually hidden at rest via the clip recipe, so it
+ *   stays in the accessibility tree and tab order — never display:none.
+ * - Keyboard: revealed on :focus-within, so tabbing in shows it.
+ * - Touch: always visible on coarse pointers; never gated behind hover.
+ * - Concealed (inverted) content is a mouse-only visual swap: it ignores
+ *   :focus-within (a keyboard user must never watch content vanish) and stays
+ *   visible on touch and in the a11y tree.
+ * - Motion: honors prefers-reduced-motion.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts (export)
+ * - containerReveal.pool.stylex.ts (if the slot shape changes)
+ */
+import { type CSSProperties } from 'react';
+export interface UseContainerRevealOptions {
+    /**
+     * When false the hook is inert: no marker is applied and content getters
+     * return no styles, so content is always shown. Lets a component gate on its
+     * own prop (e.g. `revealOn === 'hover'`).
+     * @default true
+     */
+    isEnabled?: boolean;
+}
+export interface ContentRevealOptions {
+    /**
+     * Conceal-on-hover instead of reveal-on-hover: content is visible at rest
+     * and fades out while the container is hovered. Mouse-only and visual —
+     * stays in the a11y tree, ignores focus-within, stays visible on touch.
+     * @default false
+     */
+    isRevealInverted?: boolean;
+    /**
+     * Reserve the content's layout box while hidden (opacity-only) instead of
+     * collapsing it, to avoid layout shift when it appears.
+     * @default false
+     */
+    isLayoutPreserved?: boolean;
+}
+export interface UseContainerRevealReturn {
+    /** Spread onto the container whose hover/focus-within drives the reveal. */
+    getContainerProps: () => {
+        className?: string;
+        style?: CSSProperties;
+    };
+    /** Spread onto each revealed / concealed child. */
+    getContentRevealProps: (options?: ContentRevealOptions) => {
+        className?: string;
+        style?: CSSProperties;
+    };
+}
+/**
+ * Scoped, CSS-only hover/focus reveal for content inside a container.
+ *
+ * @example
+ * ```tsx
+ * const {getContainerProps, getContentRevealProps} = useContainerReveal({
+ *   isEnabled: revealOn === 'hover',
+ * });
+ *
+ * <div {...mergeProps(getContainerProps(), stylex.props(styles.row))}>
+ *   {label}
+ *   <span {...mergeProps(getContentRevealProps(), stylex.props(styles.actions))}>
+ *     {actions}
+ *   </span>
+ * </div>
+ * ```
+ */
+export declare function useContainerReveal(options?: UseContainerRevealOptions): UseContainerRevealReturn;
+//# sourceMappingURL=useContainerReveal.d.ts.map