jfs-components 0.1.35 → 0.1.48

package/CHANGELOG.md

@@ -4,6 +4,49 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.48] - 2026-07-22
+
+- `CompareTable` (fixed-width scroll mode) — selection cards pin above the scroll surface (`stickyCards`, default `true`); accordion section titles stick under the cards and replace each other as you scroll (`stickyAccordionTitles`, default `true`); gray table-header sticky is now opt-in (`stickyHeaders` default `false`). Selection cards are square (corner radius forced to `0`).
+- `Accordion` — new `showHeader` / `showContent` props so hosts can split sticky titles from bodies in scroll layouts (used by `CompareTable`).
+- `HelloJioInput` — `leading={null}` hides the leading icon; IdleJioPlus is borderless frosted glass so blur shows through.
+- `ProductMerchandisingCard` — new `badgeIcon`; footer special badge fully token-driven; footer text column keeps a min-width so CTAs don’t crush title/subtitle.
+- `ValueBackMetric` — CTA is purple non-underlined `Text` (not `Link`), with optional `link` override slot; layout/typography resolve via `valueBackMetric/*`.
+- Token sync — refreshed Coin Variables / `.token-metadata.json` / icon registry for the above components.
+
+---
+
+## [0.1.38] - 2026-07-22
+
+- `FormField` — caret / cursor / selection color now follows the tokenized input text color (no platform blue/green accent).
+- `FullscreenModal` — sticky footer no longer adds safe-area bottom padding on top of `ActionFooter` tokens (avoids double inset).
+
+---
+
+## [0.1.36] - 2026-07-21
+
+- `AppBar` — exported `JioDot` brand mark for MainPage `leadingSlot` (no default logo; opt in with `<JioDot />`). Also exports `AppBarProps` / `JioDotProps`.
+- `PageHero` — new `body` / `showBody` (and `showEyebrow`) for a second text line; media sizing moves to `video/*` tokens + `Video / Output` mode (117px fallback).
+- `LottiePlayer` — default size tokens renamed `media/*` → `video/*`; mode key is now `Video / Output` (**breaking** for callers still passing `Media / Output`).
+- Library-wide mode/docs refresh (`figma-modes.generated.ts`, Coin Variables, component MDX).
+
+> Note: `0.1.35` was published on npm as an intermediate build; the next documented release is `0.1.36`.
+
+---
+
+## [0.1.34] - 2026-07-21
+
+- `jfs-extract-modes` now automatically loads `FIGMA_ACCESS_TOKEN` from the
+  consuming project's root `.env` without overriding a token exported in the
+  shell. `dotenv` is now an explicit runtime dependency.
+- Simplified `D2C.md` for use as a Cursor slash command: clearer input handling,
+  ancestor-mode inheritance (`inheritedFromAncestors` + path merges), accurate
+  `unresolved` reasons, verify-before-invent component APIs, and practical
+  visual QA (fix implementation diffs; report environment-only diffs).
+- Added focused tests for `.env` precedence and extracted mode diagnostics.
+- Ignore local `.env` / `.env.*` secrets in git (keep `.env.example` allowed).
+
+---
+
 ## [0.1.33] - 2026-07-20
 
 - **Use [`D2C.md`](./D2C.md) for Design-to-Code.** This is the playbook we want agents and consumers to follow when implementing a Figma screen with `jfs-components`. It ships in the npm package (see `package.json` `files`) so it is available at `node_modules/jfs-components/D2C.md` after install. The workflow is mandatory end-to-end: Figma MCP (`get_design_context` + `get_screenshot`) → mode extraction via `npx jfs-extract-modes` (REST API; Dev seat / file-read token is enough) → build with exact modes → visual QA against the Figma screenshot. Point Cursor rules / agent instructions at this file rather than inventing a parallel D2C process.

package/D2C.md

@@ -1,118 +1,113 @@
-# D2C — Design to Code (jfs-components)
+# D2C — Design to Code with jfs-components
 
-You are implementing a screen from a Figma design using the `jfs-components`
-library. The user has pasted a Figma link. Follow this workflow exactly, in
-order. Do not skip steps and do not improvise substitutes for them.
+Implement the supplied Figma design using the installed `jfs-components`
+package. Follow all four stages in order.
 
-## Step 1 — Pull the design through the Figma MCP
+## Input
 
-Extract `fileKey` and `nodeId` from the pasted URL
-(`https://www.figma.com/design/<fileKey>/...?node-id=<a>-<b>` → nodeId is
-`<a>:<b>`).
+Use the Figma URL supplied after `/D2C` or in the user's latest message. If no
+Figma URL was supplied, ask for one before doing anything else.
 
-1. Call `get_design_context` for the node. This gives you the component
-   structure, layout, props, variants, text content, and Code Connect hints.
-2. Call `get_screenshot` for the same node and keep the image. This is the
-   visual ground truth you will QA against in Step 4.
+## 1. Read the design
 
-The Figma MCP gives you almost everything — except one thing: the **variable
-modes explicitly set on each layer**. Those are invisible to the MCP and they
-change how components render (size, emphasis, appearance, color mode, etc.).
-That is what Step 2 is for.
+1. Call the Figma MCP `get_design_context` for the linked node.
+2. Call `get_screenshot` for the same node. Keep it as the visual reference for
+   final QA.
+3. Follow Code Connect mappings, design annotations, and provided assets. If
+   Figma supplies an image or SVG URL, use it directly; do not create a
+   placeholder or install an icon package.
 
-## Step 2 — Extract the modes (mandatory, never skip)
+If the Figma MCP is unavailable or cannot read the node, report the blocker and
+stop. Do not recreate the design from the URL or from assumptions.
 
-Run the mode extractor that ships with this package. It needs a Figma personal
-access token with plain file-read access (a view-only / Dev seat token works;
-no Enterprise scopes, no edit access):
+## 2. Extract and resolve explicit modes
+
+From the consuming project's root, run:
 
 ```bash
-export FIGMA_ACCESS_TOKEN=figd_...
-npx jfs-extract-modes "<the pasted Figma URL>" --out modes.json
+npx jfs-extract-modes "<figma-url>" --out modes.json
 ```
 
-If `npx` cannot find the bin (e.g. unusual monorepo setup), call the script by
-its path inside the installed package:
+The CLI automatically loads `FIGMA_ACCESS_TOKEN` from the project-root `.env`.
+An already exported shell value takes precedence. The token only needs the
+Figma `file_content:read` scope. Never print, log, or ask the user to paste the
+token into chat.
 
-```bash
-node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
-```
+If the token is missing, stop and direct the user to `[Open .env](.env)` and
+add `FIGMA_ACCESS_TOKEN=` if needed. To create a token: in Figma's file browser,
+open the account menu → **Settings** → **Security** → **Personal access
+tokens** → **Generate new token**, choose an expiration, grant only
+`file_content:read`, generate it, and copy it immediately into `.env`. Figma
+shows the value only once. Use the
+[official PAT documentation](https://developers.figma.com/docs/rest-api/personal-access-tokens/)
+if the UI has changed. Never create or overwrite a token value yourself.
 
-The output is a flat list — one entry per layer that has explicit modes:
+If the bin is unavailable in a nonstandard monorepo, run:
 
-```json
-{
-  "modes": [
-    { "layer": "Icon Button", "nodeId": "1:10638",
-      "path": "CC / Unsub > AppBar > Slot 2 > Icon Button",
-      "modes": { "Button / Size": "S", "Emphasis": "Low", "AppearanceBrand": "Neutral" } }
-  ]
-}
+```bash
+node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
 ```
 
-Rules for using it:
+Resolve the effective modes for each represented component as follows:
 
-- Children inherit ancestor modes unless they set their own. To get the
-  effective modes of any layer, merge every entry whose `path` is a prefix of
-  that layer's path, top-down.
-- Correlate entries with the Figma MCP structure by layer name and position;
-  use `nodeId` when two layers share a name.
-- If the output contains an `unresolved` array, STOP and report it to the user
-  before building. It means the packaged variables JSON is out of date and the
-  screen cannot be built faithfully. Do not guess missing modes.
+1. Start with `inheritedFromAncestors`, when present.
+2. Find every `modes` entry whose `path` is the component's path or an ancestor
+   of it.
+3. Merge those entries from root to leaf; deeper entries override inherited
+   values.
+4. Match by layer name and position, using `nodeId` to disambiguate duplicate
+   names.
 
-## Step 3 — Build the screen
+If `unresolved` is present, report every item and its exact `reason`, then stop
+before implementation because mode fidelity cannot be guaranteed:
 
-Implement with `jfs-components` components, mapping Figma component names to
-library exports.
+- `local collection` means the design uses a file-local collection that the
+  packaged library data cannot resolve.
+- `key not in variables JSON` or `mode not in collection` means the packaged
+  design-token JSON is out of date.
 
-**Modes are non-negotiable.** Apply every extracted mode exactly as given —
-collection name → mode name, on exactly the layer (or subtree) the extractor
-reported. There is zero tolerance for inconsistency here:
+Do not guess or silently omit an unresolved mode.
 
-- Do not substitute a "close enough" mode (`Emphasis: Medium` is not
-  `Emphasis: Low`).
-- Do not drop modes that seem redundant — if the design sets
-  `AppearanceBrand: Neutral` on one Icon Button and `Appearance: Primary` on
-  another, those are different and intentional.
-- Do not apply a child's modes to its parent or vice versa.
+## 3. Implement
 
-For everything else (spacing, order, text, icons, variants, props), follow the
-Figma MCP output one-to-one. Reuse existing screens in the consuming app as
-convention references for file placement, navigation registration, and asset
-handling.
+Before editing, inspect the installed package's exports/types and the consuming
+app's existing screens. Reuse its file placement, navigation, styling, and
+asset conventions. Never invent a `jfs-components` component or prop.
 
-## Step 4 — QA against the design (mandatory, never skip)
+- Prefer mapped `jfs-components` over rebuilding them from primitives.
+- Apply extracted collection/mode pairs exactly through each component's
+  `modes` prop.
+- Put a mode on the closest code component that represents the reported Figma
+  layer or subtree. Preserve parent inheritance and child overrides; never
+  flatten a child override into its parent.
+- Do not substitute similar-looking modes, remove apparently redundant modes,
+  or move modes between layers.
+- Match Figma content, order, visibility, variants, spacing, and assets.
 
-After the screen compiles and renders, you MUST verify it visually against the
-Step 1 screenshot:
+Run the consuming app's existing typecheck, tests, or build command relevant to
+the changed screen and fix implementation errors.
 
-- **Native app:** use the mobile MCP — launch the app, navigate to the new
-  screen, and take a screenshot (`mobile_take_screenshot`).
-- **Web deployment:** use the browser tooling — navigate to the deployed/dev
-  URL and take a screenshot.
+## 4. Render and visually verify
 
-Compare your screenshot with the Figma screenshot side by side. Check:
+Render the implemented screen on the target platform and capture it with the
+available mobile or browser tooling. Compare it with the Figma screenshot for:
 
-1. Component sizes and emphasis levels (these are where wrong modes show up)
-2. Colors / appearance (brand vs neutral vs secondary treatments)
-3. Spacing, padding, and gaps
-4. Text content and truncation
-5. Icon choices and visibility (some layers in the design are hidden)
+1. component size, variant, and emphasis;
+2. color and appearance;
+3. spacing, padding, alignment, and gaps;
+4. text, wrapping, and truncation; and
+5. icons, imagery, and layer visibility.
 
-If there is ANY visible difference, fix it and re-screenshot. Repeat until the
-implementation matches the design. Typical root causes, in order of
-likelihood: a mode applied to the wrong layer, a missing mode (falling back to
-the collection default), a wrong variant, a wrong icon.
+Fix every implementation-caused difference and capture the screen again.
+Platform or environment differences that cannot be fixed in code, such as a
+missing system font or renderer-specific antialiasing, must be identified
+explicitly rather than hidden.
 
-## Summary contract
+If no suitable render or screenshot tooling is available, do not claim visual
+completion. Report what remains to be checked and give the exact manual run and
+comparison steps.
 
-| Step | Tool | Skippable? |
-|---|---|---|
-| Design context + screenshot | Figma MCP | No |
-| Mode extraction | `npx jfs-extract-modes` | No |
-| Build | jfs-components | — |
-| Visual QA loop | Mobile MCP or browser | No |
+## Completion report
 
-Report back to the user with: the screen file(s) created, the modes applied per
-layer, and the final QA screenshot comparison.
+Report the files changed, the effective modes applied to each component, the
+validation commands and results, and the final visual comparison status.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -68,6 +68,8 @@ function Accordion({
   accessibilityState,
   webAccessibilityProps,
   disableTruncation,
+  showHeader = true,
+  showContent = true,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
@@ -105,8 +107,11 @@ function Accordion({
   const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/top', resolvedModes) ?? 8;
   const contentPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/bottom', resolvedModes) ?? 8;
   const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/border/color', resolvedModes) ?? '#e6e6e6';
+
+  // Header-only sticky pieces drop the divider while expanded so the paired
+  // content Accordion owns the section border.
   const containerStyle = {
-    borderBottomWidth: 1,
+    borderBottomWidth: !showContent && isExpanded ? 0 : 1,
     borderBottomColor: borderColor
   };
   const headerStyle = {
@@ -143,10 +148,18 @@ function Accordion({
     webAccessibilityProps
   });
   const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), resolvedModes) : null;
+
+  // Content-only + collapsed: nothing to render (header lives in the sticky peer).
+  if (!showHeader && !isExpanded) {
+    return null;
+  }
+  if (!showHeader && !showContent) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       accessibilityRole: "button",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion'),
@@ -176,7 +189,7 @@ function Accordion({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
       })]
-    }), isExpanded && processedChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), showContent && isExpanded && processedChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: contentStyle,
       children: processedChildren
     })]

package/lib/commonjs/components/AppBar/AppBar.js

@@ -3,22 +3,98 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = AppBar;
-var _react = _interopRequireDefault(require("react"));
+exports.JioDot = JioDot;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// SubPage "slot wrap" geometry, taken directly from the Figma design
-// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
-// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
-// item so it fills / shrinks responsively within that box.
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// SubPage "slot wrap" geometry from Figma (node 449:7876). The middle slot is
+// an absolutely-centered fixed-size box; its inner content (node 3991:4125)
+// fills / shrinks responsively within that box.
 const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192;
 const SUBPAGE_MIDDLE_HEIGHT = 32;
 const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21;
+const JIODOT_FALLBACK_SIZE = 32;
+/**
+ * Figma "jiodot" mark (node 1117:1908). Opt-in via `leadingSlot` — MainPage
+ * does NOT render this by default so existing consumers stay empty-leading.
+ */
+function JioDot({
+  size,
+  modes = _reactUtils.EMPTY_MODES
+}) {
+  const resolvedSize = size ?? (Number((0, _figmaVariablesResolver.getVariableByName)('appBar/mainPage/jiodot/size', modes)) || JIODOT_FALLBACK_SIZE);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    width: resolvedSize,
+    height: resolvedSize,
+    viewBox: "0 0 32 32",
+    fill: "none",
+    accessibilityRole: "image",
+    accessibilityLabel: "Jio",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+      clipPath: "url(#jiodotClip)",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: "M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z",
+        fill: "url(#jiodotGrad)"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: "M11.3039 9.64982H10.7705C9.75837 9.64982 9.20548 10.2205 9.20548 11.3621V16.8679C9.20548 18.2854 8.72667 18.7829 7.60341 18.7829C6.71985 18.7829 6.00192 18.3959 5.43096 17.6963C5.37555 17.6229 4.21615 18.1749 4.21615 19.5378C4.21615 21.0107 5.59629 21.9132 8.15689 21.9132C11.268 21.9132 12.9077 20.3479 12.9077 16.9233V11.3621C12.9059 10.222 12.3536 9.64982 11.3039 9.64982ZM23.7039 12.3381C20.6837 12.3381 18.6769 14.2531 18.6769 17.1085C18.6769 20.0365 20.6096 21.915 23.6482 21.915C26.6674 21.915 28.6556 20.0365 28.6556 17.1274C28.6573 14.2531 26.6867 12.3381 23.7039 12.3381ZM23.6668 19.206C22.4879 19.206 21.6781 18.3408 21.6781 17.107C21.6781 15.8922 22.5077 15.0264 23.6668 15.0264C24.8259 15.0264 25.6553 15.8922 25.6553 17.1257C25.6556 18.3221 24.8084 19.206 23.6668 19.206ZM16.1252 12.43H15.7563C14.8547 12.43 14.1735 12.8531 14.1735 14.1426V20.0347C14.1735 21.3423 14.8366 21.7476 15.7936 21.7476H16.1622C17.0644 21.7476 17.7086 21.3052 17.7086 20.0347V14.1426C17.7086 12.8169 17.0831 12.43 16.1252 12.43ZM15.9228 8.15885C14.7809 8.15885 14.063 8.80359 14.063 9.81634C14.063 10.8469 14.7999 11.4913 15.9779 11.4913C17.1196 11.4913 17.8378 10.8469 17.8378 9.81634C17.8378 8.78582 17.1012 8.15885 15.9228 8.15885Z",
+        fill: "white"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+        id: "jiodotGrad",
+        x1: "11.085",
+        y1: "9.25442",
+        x2: "22.3469",
+        y2: "15.7638",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+          stopColor: "#FBDCAF"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+          offset: "1",
+          stopColor: "#AD8444"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ClipPath, {
+        id: "jiodotClip",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          width: "32",
+          height: "32",
+          fill: "white"
+        })
+      })]
+    })]
+  });
+}
+/**
+ * AppBar — top navigation bar for MainPage and SubPage layouts
+ * (Figma node 1070:18571).
+ *
+ * Visual values resolve from design tokens via `getVariableByName`. Slots
+ * cascade `modes` to children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AppBar
+ *   type="MainPage"
+ *   leadingSlot={<JioDot />}
+ *   actionsSlot={
+ *     <>
+ *       <IconButton iconName="ic_add" />
+ *       <IconButton iconName="ic_add" />
+ *       <Avatar />
+ *     </>
+ *   }
+ * />
+ * ```
+ */
 function AppBar({
   type = 'MainPage',
   leadingSlot,
@@ -35,118 +111,70 @@ function AppBar({
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
-  const modes = {
+  const modes = (0, _react.useMemo)(() => ({
     Context2: 'AppBar',
     ...globalModes,
     ...propModes
-  };
+  }), [globalModes, propModes]);
   const isMain = type === 'MainPage';
   const isSub = type === 'SubPage';
-
-  // --- Tokens ---
-  // Construct token keys based on type. keys must be camelCase as per instruction.
-  // We use explicit string literals so that the extraction script can find them.
   const paddingHorizontal = isMain ? (0, _figmaVariablesResolver.getVariableByName)('appBar/mainPage/padding/horizontal', modes) : (0, _figmaVariablesResolver.getVariableByName)('appBar/subPage/padding/horizontal', modes);
   const paddingVertical = isMain ? (0, _figmaVariablesResolver.getVariableByName)('appBar/mainPage/padding/vertical', modes) : (0, _figmaVariablesResolver.getVariableByName)('appBar/subPage/padding/vertical', modes);
   const backgroundColor = isMain ? (0, _figmaVariablesResolver.getVariableByName)('appBar/mainPage/background', modes) : (0, _figmaVariablesResolver.getVariableByName)('appBar/subPage/background', modes);
   const actionsGap = isMain ? (0, _figmaVariablesResolver.getVariableByName)('appBar/mainPage/actions/gap', modes) : (0, _figmaVariablesResolver.getVariableByName)('appBar/subPage/actions/gap', modes);
-
-  // Layout styles
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    // No `justifyContent` here: with the inline middle slot using `flex: 1`
-    // the three sections lay out naturally (leading | middle | actions).
-    // When middleSlot is absent we fall back to `space-between` at the wrapper
-    // level so leading & actions still anchor to the edges.
     paddingHorizontal: paddingHorizontal ?? 16,
     paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
     backgroundColor: backgroundColor ?? '#FFFFFF'
-    // MainPage: h=68 (16 top/bot padding? 36 height content?)
-    // SubPage: h=52
   };
 
-  // --- Leading Slot Default ---
-  // SubPage default: Back Arrow
-  // MainPage default: Jio Logo (We'll use a placeholder or basic text if no asset, 
-  // but looking at "AppBarHome" before, it had "ic_hellojio". Let's stick to generic defaults or empty if not provided,
-  // but usually a component library provides sensible defaults.)
-
-  // Actually, let's implement the specific defaults mentioned in the plan/analysis
-  // SubPage: NavArrow props (icon, etc).
-
+  // MainPage: no default leading (backward compatible — consumers opt in via
+  // leadingSlot, e.g. <JioDot />). SubPage: default back NavArrow.
   let defaultLeading = null;
-  if (leadingSlot === undefined) {
-    if (isSub) {
-      defaultLeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        ...(onLeadingPress ? {
-          onPress: onLeadingPress
-        } : {}),
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: undefined,
-        style: ({
-          pressed
-        }) => ({
-          opacity: pressed ? 0.7 : 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
-          direction: "Back",
-          modes: modes
-        })
-      });
-    } else {
-      // MainPage default leading: often the Brand Logo.
-      // We'll leave it empty or render a placeholder if desired, but standard AppBar often lets consumer pass logo.
-      // Previous code had `leadingIconName='ic_hellojio'` for Home.
-      // We will render nothing by default for MainPage leading to keep it flexible, OR a specialized Logo component if we had one.
-      // For now, let's assume consumer passes it for MainPage, or we leave empty.
-      // Wait, Figma screenshot shows "Jio" logo.
-      // The user said: "mostly token namings are 'camelCase'. Maximize existing component usage."
-      // I'll leave defaultLeading as null for MainPage unless I have a "BrandLogo" component.
-    }
+  if (leadingSlot === undefined && isSub) {
+    defaultLeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      ...(onLeadingPress ? {
+        onPress: onLeadingPress
+      } : {}),
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: undefined,
+      style: ({
+        pressed
+      }) => ({
+        opacity: pressed ? 0.7 : 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+        direction: "Back",
+        modes: modes
+      })
+    });
   }
-
-  // --- Process Slots ---
   const processedLeading = leadingSlot ? (0, _reactUtils.cloneChildrenWithModes)([leadingSlot], modes)[0] : defaultLeading;
   const processedMiddle = middleSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(middleSlot), modes) : null;
-
-  // Actions Gap wrapper
-  // The Figma has "Actions" slot with a gap.
   const actionsStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     gap: actionsGap ?? 0
   };
-  const processedActions = actionsSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: actionsStyle,
-    children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
-  }) : null;
+  const processedActions = actionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes) : null;
 
-  // SubPage centers its middle slot via absolute positioning (see Figma
-  // "slot wrap"), so it never participates in the row flow. Only MainPage
-  // keeps the legacy in-flow middle slot.
+  // SubPage middle is absolute (Figma "slot wrap"); MainPage middle stays in-flow.
   const hasInFlowMiddle = isMain && !!processedMiddle;
 
-  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
-  // remaining space, so leading & actions sit at the edges naturally. In all
-  // other cases we pin leading & actions to the outer edges with
-  // `space-between`; the SubPage middle floats above, centered.
+  // With an in-flow middle the flex:1 middle absorbs leftover space. Otherwise
+  // pin leading & actions to the edges; SubPage middle floats centered above.
   const wrapperStyle = {
     ...containerStyle,
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
   };
 
-  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
-  // centering a fixed-height box with `top/left: 50%` + transform (which on
-  // Android resolves the percentage against an intermediate, content-driven
-  // parent height and lands a few px too high), the overlay STRETCHES to fill
-  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
-  // flexbox. This uses the exact same full-height vertical reference as the
-  // leading/actions row (`alignItems: 'center'`), so the middle content always
-  // sits on the same line as the back arrow and end slot on every platform.
+  // Overlay stretches to the full bar and centers content with flexbox so the
+  // middle aligns with leading/actions on every platform.
   const subPageMiddleOverlayStyle = {
     position: 'absolute',
     top: 0,
@@ -157,10 +185,6 @@ function AppBar({
     alignItems: 'center',
     justifyContent: 'center'
   };
-
-  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
-  // middle content from bleeding under the leading/actions slots while staying
-  // centered within the overlay above.
   const subPageMiddleBoxStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
@@ -184,7 +208,7 @@ function AppBar({
         alignItems: 'center'
       },
       children: processedLeading
-    }), hasInFlowMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), hasInFlowMiddle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flex: 1,
         minWidth: 0,
@@ -194,10 +218,10 @@ function AppBar({
       },
       pointerEvents: "box-none",
       children: processedMiddle
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: actionsStyle,
       children: processedActions
-    }), isSub && processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), isSub && processedMiddle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: subPageMiddleOverlayStyle,
       pointerEvents: "box-none",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -216,6 +240,7 @@ function AppBar({
           children: processedMiddle
         })
       })
-    })]
+    }) : null]
   });
-}
+}
+var _default = exports.default = AppBar;