@astryxdesign/core 0.7.1 → 0.7.2-canary.020e1fe

package/locales/pseudo.json

@@ -395,6 +395,63 @@
   "@astryx.listInput.announceAlreadyAtBoundary": {
     "defaultMessage": "⟦Ţĥíš {itemName} íš àłřéàðý {boundary, select, first {first} last {last} other {}}.⟧"
   },
+  "@astryx.diffViewer.label": {
+    "defaultMessage": "⟦Ð탃⟧"
+  },
+  "@astryx.diffViewer.renamedPath": {
+    "defaultMessage": "⟦{oldPath} → {newPath}⟧"
+  },
+  "@astryx.diffViewer.statusAdded": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.statusDeleted": {
+    "defaultMessage": "⟦Ðéłéţéð⟧"
+  },
+  "@astryx.diffViewer.statusRenamed": {
+    "defaultMessage": "⟦Řéñàɱéð⟧"
+  },
+  "@astryx.diffViewer.addedCount": {
+    "defaultMessage": "⟦+{count, number}⟧"
+  },
+  "@astryx.diffViewer.removedCount": {
+    "defaultMessage": "⟦−{count, number}⟧"
+  },
+  "@astryx.diffViewer.stats": {
+    "defaultMessage": "⟦{added, plural, one {# line added} other {# lines added}}, {removed, plural, one {# line removed} other {# lines removed}}⟧"
+  },
+  "@astryx.diffViewer.added": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.removed": {
+    "defaultMessage": "⟦Řéɱóṽéð⟧"
+  },
+  "@astryx.diffViewer.lineNumberButton": {
+    "defaultMessage": "⟦{side, select, old {Original line {line, number}} other {Changed line {line, number}}}⟧"
+  },
+  "@astryx.diffViewer.columnOldLine": {
+    "defaultMessage": "⟦Óříĝíñàł łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnNewLine": {
+    "defaultMessage": "⟦Çĥàñĝéð łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnChange": {
+    "defaultMessage": "⟦Çĥàñĝé⟧"
+  },
+  "@astryx.diffViewer.columnCode": {
+    "defaultMessage": "⟦Çóðé⟧"
+  },
+  "@astryx.diffViewer.columnOldCode": {
+    "defaultMessage": "⟦Óříĝíñàł çóðé⟧"
+  },
+  "@astryx.diffViewer.columnNewCode": {
+    "defaultMessage": "⟦Çĥàñĝéð çóðé⟧"
+  },
+  "@astryx.diffViewer.binary": {
+    "defaultMessage": "⟦Ɓíñàřý ƒíłé ñóţ šĥóŵñ⟧"
+  },
+  "@astryx.diffViewer.noChanges": {
+    "defaultMessage": "⟦Ñó çóñţéñţ çĥàñĝéš⟧"
+  },
   "@astryx.markdownHeadingLinks.copied": {
     "defaultMessage": "⟦Łíñķ çóþíéð⟧"
   },
@@ -1231,5 +1288,281 @@
   },
   "@astryx.transferListSelector.triggerLabel": {
     "defaultMessage": "⟦{count, number} šéłéçţéð⟧"
+  },
+  "@astryx.emojiPicker.label": {
+    "defaultMessage": "⟦Éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.searchLabel": {
+    "defaultMessage": "⟦Šéàřçĥ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.frequentlyUsed": {
+    "defaultMessage": "⟦Ƒřéɋúéñţłý úšéð⟧"
+  },
+  "@astryx.emojiPicker.searchResults": {
+    "defaultMessage": "⟦Šéàřçĥ řéšúłţš⟧"
+  },
+  "@astryx.emojiPicker.noResults": {
+    "defaultMessage": "⟦Ñó éɱóĵí ɱàţçĥ “{query}”⟧"
+  },
+  "@astryx.emojiPicker.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.loadFailed": {
+    "defaultMessage": "⟦Ṁóřé éɱóĵí çóúłðñ'ţ ƀé łóàðéð.⟧"
+  },
+  "@astryx.emojiPicker.groupSmileysEmotion": {
+    "defaultMessage": "⟦Šɱíłéýš & éɱóţíóñ⟧"
+  },
+  "@astryx.emojiPicker.groupPeopleBody": {
+    "defaultMessage": "⟦Þéóþłé & ƀóðý⟧"
+  },
+  "@astryx.emojiPicker.groupAnimalsNature": {
+    "defaultMessage": "⟦Àñíɱàłš & ñàţúřé⟧"
+  },
+  "@astryx.emojiPicker.groupFoodDrink": {
+    "defaultMessage": "⟦Ƒóóð & ðříñķ⟧"
+  },
+  "@astryx.emojiPicker.groupTravelPlaces": {
+    "defaultMessage": "⟦Ţřàṽéł & þłàçéš⟧"
+  },
+  "@astryx.emojiPicker.groupActivities": {
+    "defaultMessage": "⟦Àçţíṽíţíéš⟧"
+  },
+  "@astryx.emojiPicker.groupObjects": {
+    "defaultMessage": "⟦Óƀĵéçţš⟧"
+  },
+  "@astryx.emojiPicker.groupSymbols": {
+    "defaultMessage": "⟦Šýɱƀółš⟧"
+  },
+  "@astryx.emojiPicker.groupFlags": {
+    "defaultMessage": "⟦Ƒłàĝš⟧"
+  },
+  "@astryx.comments.retry": {
+    "defaultMessage": "⟦Řéţřý⟧"
+  },
+  "@astryx.commentComposer.placeholder": {
+    "defaultMessage": "⟦Ŵříţé à çóɱɱéñţ…⟧"
+  },
+  "@astryx.commentComposer.noAgents": {
+    "defaultMessage": "⟦Ñó àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.agents": {
+    "defaultMessage": "⟦Àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.uploadFailed": {
+    "defaultMessage": "⟦Íɱàĝéš çóúłðñ'ţ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.imagesOnly": {
+    "defaultMessage": "⟦Óñłý íɱàĝé ƒíłéš çàñ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.chooseImages": {
+    "defaultMessage": "⟦Çĥóóšé íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.imageAlt": {
+    "defaultMessage": "⟦Íɱàĝé àţţàçĥɱéñţ⟧"
+  },
+  "@astryx.commentComposer.removeQuote": {
+    "defaultMessage": "⟦Řéɱóṽé ɋúóţéð ţéẋţ⟧"
+  },
+  "@astryx.commentComposer.attachImages": {
+    "defaultMessage": "⟦Àţţàçĥ íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.addEmoji": {
+    "defaultMessage": "⟦Àðð éɱóĵí⟧"
+  },
+  "@astryx.commentComposer.cancel": {
+    "defaultMessage": "⟦Çàñçéł⟧"
+  },
+  "@astryx.comments.actionsLabel": {
+    "defaultMessage": "⟦Àçţíóñš ƒóř {name}'š çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.addReaction": {
+    "defaultMessage": "⟦Àðð řéàçţíóñ⟧"
+  },
+  "@astryx.comments.agentBadge": {
+    "defaultMessage": "⟦Àĝéñţ⟧"
+  },
+  "@astryx.comments.agentLogo": {
+    "defaultMessage": "⟦{name} łóĝó⟧"
+  },
+  "@astryx.comments.chooseReaction": {
+    "defaultMessage": "⟦Çĥóóšé à řéàçţíóñ⟧"
+  },
+  "@astryx.comments.copyLink": {
+    "defaultMessage": "⟦Çóþý çóɱɱéñţ łíñķ⟧"
+  },
+  "@astryx.comments.currentVersion": {
+    "defaultMessage": "⟦Çúřřéñţ ṽéřšíóñ⟧"
+  },
+  "@astryx.comments.delete": {
+    "defaultMessage": "⟦Ðéłéţé⟧"
+  },
+  "@astryx.comments.deleteDescription": {
+    "defaultMessage": "⟦Ðéłéţé {name}'š çóɱɱéñţ? Ţĥíš àçţíóñ çàññóţ ƀé úñðóñé.⟧"
+  },
+  "@astryx.comments.deleteFailed": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð.⟧"
+  },
+  "@astryx.comments.deleteFailedRetry": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.deleteTitle": {
+    "defaultMessage": "⟦Ðéłéţé çóɱɱéñţ?⟧"
+  },
+  "@astryx.comments.edit": {
+    "defaultMessage": "⟦Éðíţ⟧"
+  },
+  "@astryx.comments.editFailed": {
+    "defaultMessage": "⟦Ýóúř éðíţ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.editPlaceholder": {
+    "defaultMessage": "⟦Éðíţ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.edited": {
+    "defaultMessage": "⟦Éðíţéð⟧"
+  },
+  "@astryx.comments.editingContext": {
+    "defaultMessage": "⟦Éðíţíñĝ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.hideReplies": {
+    "defaultMessage": "⟦Ĥíðé řéþłíéš⟧"
+  },
+  "@astryx.comments.historyEmptyDescription": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ ĥàš ñó éàřłíéř ṽéřšíóñš.⟧"
+  },
+  "@astryx.comments.historyEmptyTitle": {
+    "defaultMessage": "⟦Ñó éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historyFailed": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.historyLoadFailed": {
+    "defaultMessage": "⟦Ţĥé çóɱɱéñţ'š éðíţ ĥíšţóřý çóúłðñ'ţ ƀé łóàðéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.historyLoading": {
+    "defaultMessage": "⟦Łóàðíñĝ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historySubtitle": {
+    "defaultMessage": "⟦Çóɱɱéñţ ƀý {name}⟧"
+  },
+  "@astryx.comments.historyTitle": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.linkCopied": {
+    "defaultMessage": "⟦Çóɱɱéñţ łíñķ çóþíéð⟧"
+  },
+  "@astryx.comments.otherReactors": {
+    "defaultMessage": "⟦{count, plural, one {# other} other {# others}}⟧"
+  },
+  "@astryx.comments.outdated": {
+    "defaultMessage": "⟦Óúţðàţéð⟧"
+  },
+  "@astryx.comments.reactionCelebrate": {
+    "defaultMessage": "⟦Çéłéƀřàţé⟧"
+  },
+  "@astryx.comments.reactionCount": {
+    "defaultMessage": "⟦{reaction}: {count, number}⟧"
+  },
+  "@astryx.comments.reactionFailed": {
+    "defaultMessage": "⟦Ýóúř řéàçţíóñ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.reactionLaugh": {
+    "defaultMessage": "⟦Ĥàĥà⟧"
+  },
+  "@astryx.comments.reactionLike": {
+    "defaultMessage": "⟦Łíķé⟧"
+  },
+  "@astryx.comments.reactionLove": {
+    "defaultMessage": "⟦Łóṽé⟧"
+  },
+  "@astryx.comments.reactionSad": {
+    "defaultMessage": "⟦Šàð⟧"
+  },
+  "@astryx.comments.reactionWow": {
+    "defaultMessage": "⟦Ŵóŵ⟧"
+  },
+  "@astryx.comments.reopen": {
+    "defaultMessage": "⟦Řéóþéñ⟧"
+  },
+  "@astryx.comments.reopenFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéóþéñéð.⟧"
+  },
+  "@astryx.comments.reply": {
+    "defaultMessage": "⟦Řéþłý⟧"
+  },
+  "@astryx.comments.replyFailed": {
+    "defaultMessage": "⟦Ýóúř řéþłý çóúłðñ'ţ ƀé þóšţéð.⟧"
+  },
+  "@astryx.comments.replyPlaceholder": {
+    "defaultMessage": "⟦Řéþłý ţó {name}…⟧"
+  },
+  "@astryx.comments.replyingContext": {
+    "defaultMessage": "⟦Řéþłýíñĝ ţó {name}⟧"
+  },
+  "@astryx.comments.resolve": {
+    "defaultMessage": "⟦Ṁàřķ àš řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolveFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéšółṽéð.⟧"
+  },
+  "@astryx.comments.resolved": {
+    "defaultMessage": "⟦Řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolvedBy": {
+    "defaultMessage": "⟦Řéšółṽéð ƀý {name}⟧"
+  },
+  "@astryx.comments.retryFailed": {
+    "defaultMessage": "⟦Řéţřýíñĝ ðíðñ'ţ ŵóřķ.⟧"
+  },
+  "@astryx.comments.sendFailed": {
+    "defaultMessage": "⟦Çóúłðñ'ţ šéñð ţĥíš çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.threadLabel": {
+    "defaultMessage": "⟦Ţĥřéàð ƀý {name}⟧"
+  },
+  "@astryx.comments.unread": {
+    "defaultMessage": "⟦Ñéŵ⟧"
+  },
+  "@astryx.comments.unsavedDraft": {
+    "defaultMessage": "⟦Úñšàṽéð ðřàƒţ. Ðíšɱíšš àĝàíñ ţó ðíšçàřð íţ.⟧"
+  },
+  "@astryx.comments.versionAuthor": {
+    "defaultMessage": "⟦ƀý {name}⟧"
+  },
+  "@astryx.comments.viewHistory": {
+    "defaultMessage": "⟦Ṽíéŵ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.viewReplies": {
+    "defaultMessage": "⟦Ṽíéŵ {count, plural, one {# reply} other {# replies}}⟧"
+  },
+  "@astryx.comments.commentsLabel": {
+    "defaultMessage": "⟦Ţĥřéàðš íñ {label}⟧"
+  },
+  "@astryx.comments.emptyDescription": {
+    "defaultMessage": "⟦Šţàřţ ţĥé ðíšçúššíóñ ŵíţĥ à çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.emptyReadOnlyDescription": {
+    "defaultMessage": "⟦Ţĥéřé íš ñó ðíšçúššíóñ óñ ţĥíš íţéɱ.⟧"
+  },
+  "@astryx.comments.emptyTitle": {
+    "defaultMessage": "⟦Ñó çóɱɱéñţš ýéţ⟧"
+  },
+  "@astryx.comments.label": {
+    "defaultMessage": "⟦Çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loadFailed": {
+    "defaultMessage": "⟦Çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.loadOlder": {
+    "defaultMessage": "⟦Łóàð éàřłíéř çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.olderFailed": {
+    "defaultMessage": "⟦Éàřłíéř çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.postFailed": {
+    "defaultMessage": "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.1",
+  "version": "0.7.2-canary.020e1fe",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -329,6 +329,11 @@
       "types": "./dist/Divider/index.d.ts",
       "default": "./dist/Divider/index.js"
     },
+    "./Drawer": {
+      "source": "./src/Drawer/index.ts",
+      "types": "./dist/Drawer/index.d.ts",
+      "default": "./dist/Drawer/index.js"
+    },
     "./DropdownMenu": {
       "source": "./src/DropdownMenu/index.ts",
       "types": "./dist/DropdownMenu/index.d.ts",
@@ -787,6 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.2-canary.020e1fe",
+    "@astryxdesign/cli": "0.7.2-canary.020e1fe",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -797,9 +804,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.1"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/scripts/agent-doc-state.mjs

@@ -106,6 +106,44 @@ export function isAstryxInitialized(targetDir = process.cwd()) {
   return false;
 }
 
+/**
+ * Does an agent working in `startDir` already have the Astryx prompt in reach?
+ *
+ * Coding agents read the agent docs between the repository root and the folder
+ * they work in. So inside a git repository, init's block in any folder from
+ * `startDir` up to the repository root counts: a workspace package of a
+ * monorepo initialized at its root is set up. Outside a repository only
+ * `startDir` itself is checked, as {@link isAstryxInitialized} does. Both the
+ * per-command nudge and the postinstall nudges ask this.
+ *
+ * @param {string} [startDir=process.cwd()]
+ * @returns {boolean}
+ */
+export function isAstryxPromptInReach(startDir = process.cwd()) {
+  const start = path.resolve(startDir);
+  const repositoryRoot = findRepositoryRoot(start);
+  if (!repositoryRoot) return isAstryxInitialized(start);
+  for (let dir = start; ; dir = path.dirname(dir)) {
+    if (isAstryxInitialized(dir)) return true;
+    if (dir === repositoryRoot) return false;
+  }
+}
+
+/**
+ * The nearest folder at or above `start` that holds `.git` (a folder, or the
+ * file a worktree uses), or null outside a repository.
+ * @param {string} start
+ * @returns {string | null}
+ */
+function findRepositoryRoot(start) {
+  for (let dir = start; ; ) {
+    if (fs.existsSync(path.join(dir, '.git'))) return dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+
 /**
  * The one-line next-step both postinstall nudges print. Kept here so layer 1
  * (core) and layer 2 (cli) can never word it differently.

package/scripts/postinstall.mjs

@@ -45,7 +45,7 @@ async function main() {
     contract.shouldNudge({
       scriptPath: HERE,
       npmCommand: process.env.npm_command,
-      isSetUp: contract.isAstryxInitialized(root),
+      isSetUp: contract.isAstryxPromptInReach(root),
     })
   ) {
     process.stdout.write(contract.SETUP_NUDGE);

package/src/AppShell/AppShell.tsx

@@ -43,6 +43,7 @@ import {LayoutHeader} from '../Layout/LayoutHeader';
 import {LayoutPanel} from '../Layout/LayoutPanel';
 import {LayoutContent} from '../Layout/LayoutContent';
 import {MobileNavToggle} from '../MobileNav/MobileNavToggle';
+import {MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS} from '../MobileNav/MobileNav';
 import {SideNavRenderContext} from '../SideNav/SideNavRenderContext';
 import {TopNavRenderContext} from '../TopNav/TopNavRenderContext';
 import {TopNavMobileContentContext} from '../TopNav/TopNavMobileContentContext';
@@ -81,6 +82,20 @@ const ActivityWrapper = HasActivity
 
 const MAIN_CONTENT_ID = 'astryx-app-shell-main';
 
+/**
+ * Extra time, on top of MobileNav's own worst-case close delay, that
+ * AppShell waits before flipping its `Activity` boundary to `'hidden'`.
+ *
+ * React's `Activity` hides its subtree with `display: none !important`
+ * synchronously in the same commit as the mode flip, and re-runs the
+ * cleanup of every effect inside it — which would otherwise clear
+ * MobileNav's own scheduled `dialog.close()` before it fires, or cut off
+ * its slide-out CSS transition before it plays (#5701). Waiting strictly
+ * longer than MobileNav's own cap, rather than the same duration, means
+ * this never turns into a race decided by browser timer-firing order.
+ */
+const ACTIVITY_HIDE_BUFFER_MS = 50;
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -525,6 +540,34 @@ export function AppShell({
   const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(false);
   const isMobileNavOpen = mobileNavConfig?.isOpen ?? uncontrolledMobileOpen;
 
+  // Holds the mobile nav's `Activity` boundary visible for a beat after a
+  // close, so MobileNav's own close effect gets a real chance to run its
+  // slide-out transition and schedule its delayed `dialog.close()` before
+  // Activity hides the subtree (#5701). Only the CLOSE is deferred: opening
+  // reads `isMobileNavOpen` directly below, so a controlled open is visible in
+  // the commit that carries it instead of one effect later.
+  const [isMobileNavCloseHeld, setIsMobileNavCloseHeld] =
+    useState(isMobileNavOpen);
+  // Arm the hold during render, from the open state itself, so no Effect has
+  // to copy props into state; the Effect below only owns the release timer.
+  if (isMobileNavOpen && !isMobileNavCloseHeld) {
+    setIsMobileNavCloseHeld(true);
+  }
+  useEffect(() => {
+    if (!HasActivity || isMobileNavOpen) {
+      return;
+    }
+    const delayMs = window.matchMedia('(prefers-reduced-motion: reduce)')
+      .matches
+      ? 0
+      : MOBILE_NAV_MAX_CLOSE_DELAY_MS + ACTIVITY_HIDE_BUFFER_MS;
+    const timeout = setTimeout(() => {
+      setIsMobileNavCloseHeld(false);
+    }, delayMs);
+    return () => clearTimeout(timeout);
+  }, [isMobileNavOpen]);
+  const isMobileNavActivityVisible = isMobileNavOpen || isMobileNavCloseHeld;
+
   const mobileNavOnOpenChange = mobileNavConfig?.onOpenChange;
   const setMobileNavOpen = useCallback(
     (open: boolean) => {
@@ -864,7 +907,8 @@ export function AppShell({
           !mobileNavDisabled &&
           mobileNavReactNode == null &&
           !mobileNavConfigContent && (
-            <ActivityWrapper mode={isMobileNavOpen ? 'visible' : 'hidden'}>
+            <ActivityWrapper
+              mode={isMobileNavActivityVisible ? 'visible' : 'hidden'}>
               {/* SideNav drawer — always mounted so presence detection works.
                 Hidden when TopNav owns the drawer (combined mode passes
                 sideNav via TopNav's mobile content context instead). */}

package/src/AspectRatio/AspectRatio.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When AspectRatio.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeAll} from 'vitest';
+import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {AspectRatio} from './AspectRatio';
 
@@ -230,9 +230,8 @@ describe('AspectRatio', () => {
           <img src="test.jpg" alt="Test" data-testid="image" />
         </AspectRatio>,
       );
-      // The marker sits on the child's actual parent, so the reset.css
-      // sizing rules are direct-child selectors with no dependence on
-      // AspectRatio's internal structure.
+      // Earlier releases documented the marker, so it stays on the child's
+      // direct parent for product CSS that targets it.
       const wrapper = screen.getByTestId('image').parentElement;
       expect(wrapper).toHaveAttribute(
         'data-astryx-aspect-ratio-override',
@@ -274,8 +273,11 @@ describe('AspectRatio', () => {
       );
       const wrapper = screen.getByTestId('image').parentElement;
       expect(wrapper).not.toHaveAttribute('data-astryx-aspect-ratio-override');
-      // Without the marker, none of the reset.css fit rules can match, so
-      // existing self-styled children render exactly as before.
+      // Without fit the wrapper carries no child-sizing styles, so existing
+      // self-styled children render exactly as before.
+      expect(wrapper?.className).not.toContain('childFill');
+      expect(wrapper?.className).not.toContain('childCover');
+      expect(wrapper?.className).not.toContain('childContain');
       expect(screen.getByTestId('image')).not.toHaveAttribute('class');
     });
 
@@ -292,13 +294,37 @@ describe('AspectRatio', () => {
         </AspectRatio>,
       );
       const image = screen.getByTestId('image');
-      // Fit styling is pure CSS (zero-specificity reset rules); the child's
-      // own className/style pass through untouched and always win, so
-      // children that already size themselves keep their behavior.
+      // Fit styling is a direct-child rule on the wrapper; the child's own
+      // className/style pass through untouched, and an inline style still
+      // wins over it.
       expect(image.className).toBe('consumer-class');
       expect(image.style.objectFit).toBe('contain');
     });
 
+    it('sizes the child from the wrapper with fit="cover"', () => {
+      render(
+        <AspectRatio ratio={16 / 9} fit="cover">
+          <img src="test.jpg" alt="Test" data-testid="image" />
+        </AspectRatio>,
+      );
+      const wrapper = screen.getByTestId('image').parentElement;
+      expect(wrapper?.className).toContain('childFill');
+      expect(wrapper?.className).toContain('childCover');
+      expect(wrapper?.className).not.toContain('childContain');
+    });
+
+    it('sizes the child from the wrapper with fit="contain"', () => {
+      render(
+        <AspectRatio ratio={16 / 9} fit="contain">
+          <img src="test.jpg" alt="Test" data-testid="image" />
+        </AspectRatio>,
+      );
+      const wrapper = screen.getByTestId('image').parentElement;
+      expect(wrapper?.className).toContain('childFill');
+      expect(wrapper?.className).toContain('childContain');
+      expect(wrapper?.className).not.toContain('childCover');
+    });
+
     it('centers the child via the wrapper with fit="center"', () => {
       render(
         <AspectRatio ratio={16 / 9} fit="center">
@@ -309,6 +335,7 @@ describe('AspectRatio', () => {
       expect(image).not.toHaveAttribute('class');
       const wrapper = image.parentElement;
       expect(wrapper?.className).toContain('childCenter');
+      expect(wrapper?.className).not.toContain('childFill');
     });
 
     it('does not center the wrapper for other fit values', () => {
@@ -353,45 +380,19 @@ describe('AspectRatio', () => {
     });
   });
 
-  describe('reset.css fit baseline rules', () => {
-    // The cover/contain child sizing ships as zero-specificity baseline
-    // rules in reset.css keyed on the data-astryx-aspect-ratio-override
-    // marker the component sets on the child's direct parent. These
-    // assertions keep the stylesheet in sync with the component contract.
-    let resetCSS: string;
-
-    beforeAll(async () => {
+  describe('reset.css', () => {
+    it('carries no AspectRatio rules', async () => {
+      // fit ships with the component's StyleX styles in `astryx-base`. A
+      // rule in reset.css sits below the layer the documented Tailwind
+      // setups give preflight, whose `img, video { height: auto }` would
+      // undo the fill.
       const fs = await import('fs');
       const path = await import('path');
-      resetCSS = fs.readFileSync(
+      const resetCSS = fs.readFileSync(
         path.resolve(__dirname, '../reset.css'),
         'utf-8',
       );
-    });
-
-    it('sizes the child to fill the box for cover and contain', () => {
-      const fillMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\], \[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(\*\)\s*\{([^}]+)\}/,
-      );
-      expect(fillMatch).not.toBeNull();
-      expect(fillMatch![1]).toContain('width: 100%');
-      expect(fillMatch![1]).toContain('height: 100%');
-    });
-
-    it('crops media with object-fit: cover for fit="cover"', () => {
-      const coverMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(coverMatch).not.toBeNull();
-      expect(coverMatch![1]).toContain('object-fit: cover');
-    });
-
-    it('letterboxes media with object-fit: contain for fit="contain"', () => {
-      const containMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(containMatch).not.toBeNull();
-      expect(containMatch![1]).toContain('object-fit: contain');
+      expect(resetCSS).not.toContain('aspect-ratio-override');
     });
   });
 });