docs(mobile/4): live-preview overhaul — every example fixed, marked, or upgraded

resources/views/docs/mobile/4/digging-deeper/accessibility.md

@@ -20,7 +20,7 @@ Every element accepts two attributes:
 - `a11y-hint` - Supplementary usage guidance, announced after the label (e.g. "Double-tap to open settings").
 
 @verbatim
-```blade
+```blade static
 <native:button icon="gear" a11y-label="Settings" @press="openSettings" />
 <native:slider :value="$volume" a11y-label="Volume" a11y-hint="Adjusts playback volume" />
 ```
@@ -48,7 +48,7 @@ isn't descriptive enough on its own.
 mystery to screen reader users.
 
 @verbatim
-```blade
+```blade static
 {{-- Bad: VoiceOver has nothing meaningful to announce --}}
 <native:button icon="trash" variant="destructive" @press="deleteItem" />
 
@@ -63,7 +63,7 @@ Standalone `<native:icon />` elements are **decorative by default** — they are
 unless you give them an `a11y-label`. If an icon conveys meaning on its own (or is tappable), label it:
 
 @verbatim
-```blade
+```blade static
 <native:icon name="wifi_off" a11y-label="No internet connection" />
 ```
 @endverbatim
@@ -72,7 +72,7 @@ Images take an `alt` attribute, mirroring the web. With `alt`, the image is anno
 is treated as decorative and skipped:
 
 @verbatim
-```blade
+```blade static
 <native:image src="{{ $product->photo }}" alt="{{ $product->name }}" :height="200" />
 ```
 @endverbatim
@@ -82,7 +82,7 @@ is treated as decorative and skipped:
 The tappable trailing icon button on a [list item](../edge-components/list) takes its own label via `trailing-a11y-label`:
 
 @verbatim
-```blade
+```blade static
 <native:list-item
     headline="Backups"
     trailingIconButton="info"

resources/views/docs/mobile/4/digging-deeper/data-binding.md

@@ -10,7 +10,7 @@ Livewire's `wire:model`. Type into a field, toggle a switch, drag a slider, and
 PHP side; change the property in PHP and the control reflects it on the next render.
 
 @verbatim
-```blade
+```blade static
 <native:text-input native:model="name" placeholder="Your name" />
 ```
 @endverbatim
@@ -52,7 +52,7 @@ useful for text inputs where syncing on every character is wasteful:
 | `native:model.debounce.300ms` | After the user stops changing it for the given delay. |
 
 @verbatim
-```blade
+```blade static
 {{-- Sync only when the user leaves the field --}}
 <native:text-input native:model.blur="email" />
 
@@ -87,7 +87,7 @@ properties, derive the rest with computed methods, and let the UI re-render itse
 something other than a public property — set the value and change handler directly:
 
 @verbatim
-```blade
+```blade static
 <native:text-input :value="$name" @change="rename" />
 ```
 @endverbatim

resources/views/docs/mobile/4/digging-deeper/gestures.md

@@ -17,7 +17,7 @@ If you've used Reanimated in React Native, this is the same idea.
 Create one in PHP with `SharedValue::make($initial)`, bind it to a gesture, and read it from any animatable prop:
 
 @verbatim
-```blade
+```blade static
 @php $drag = \Native\Mobile\Edge\SharedValue::make(); @endphp
 
 <native:gesture-area :pan-y="$drag">
@@ -68,7 +68,7 @@ change in `animate-duration` (milliseconds) and the element eases from its old v
 render. The animatable props are `translate-x`, `translate-y`, `scale`, `rotate`, and `opacity`:
 
 @verbatim
-```blade
+```blade static
 {{-- A panel slides up from below when $shown flips to true --}}
 <native:column
     :translate-y="$shown ? 0 : 120"
@@ -95,7 +95,7 @@ Combine transforms freely under one duration — a card can slide, fade, and sca
 Set `animate-loop` to repeat an animation continuously — a pulsing dot, a breathing highlight:
 
 @verbatim
-```blade
+```blade static
 <native:column :scale="$pulsing ? 1.15 : 1.0" :animate-duration="600" :animate-loop="true">
     <native:icon name="heart.fill" />
 </native:column>
@@ -113,7 +113,7 @@ back on release:
 - `press-translate-y` — nudge down while pressed (e.g. `3`)
 
 @verbatim
-```blade
+```blade static
 <native:pressable :press-scale="0.92" :press-opacity="0.85" :press-translate-y="3" @press="open">
     <native:text>Press me</native:text>
 </native:pressable>

resources/views/docs/mobile/4/digging-deeper/lifecycle-hooks.md

@@ -103,7 +103,7 @@ Livewire's updated hooks. The hook name is `updated` + the studly-cased property
 value.
 
 @verbatim
-```blade
+```blade static
 <native:text-input native:model="query" />
 ```
 @endverbatim

resources/views/docs/mobile/4/digging-deeper/reactivity.md

@@ -32,7 +32,7 @@ class CartScreen extends NativeComponent
 Access it as `$this->total` (no parentheses) in PHP, or `@{{ $this->total }}` in the view:
 
 @verbatim
-```blade
+```blade static
 <native:text>Total: {{ $this->total }}</native:text>
 ```
 @endverbatim
@@ -82,7 +82,7 @@ You can also drive a re-render from the view with `native:poll` — useful for a
 without wiring a method:
 
 @verbatim
-```blade
+```blade static
 <native:text native:poll="1s">{{ now()->format('g:i:s A') }}</native:text>
 ```
 @endverbatim

resources/views/docs/mobile/4/digging-deeper/theming.md

@@ -77,7 +77,7 @@ preserves the alpha byte.
 Reference any token from Blade with the `theme-{token}` class suffix, on background, text, and border utilities:
 
 @verbatim
-```blade
+```blade static
 <native:column class="bg-theme-surface border border-theme-outline rounded-2xl p-4">
     <native:text class="text-theme-on-surface text-lg font-bold">Balance</native:text>
     <native:text class="text-theme-on-surface-variant">Updated just now</native:text>

resources/views/docs/mobile/4/edge-components/activity-indicator.md

@@ -39,18 +39,21 @@ a non-theme-styled container (e.g. a light spinner over a dark image overlay).
 
 @verbatim
 ```blade
-<native:column fill center>
+<native:column class="w-full h-[200] items-center justify-center">
     <native:activity-indicator size="lg" />
     <native:text class="text-base text-theme-on-surface-variant mt-4">Loading...</native:text>
 </native:column>
 ```
 @endverbatim
 
+On a real loading screen, use `<native:column fill center>` at the page root instead — the fixed `h-[200]` here just
+gives the example a bounded area to center in.
+
 ### Inline loading
 
 @verbatim
 ```blade
-<native:row :gap="8" :align-items="1">
+<native:row class="gap-2 items-center">
     <native:activity-indicator size="sm" />
     <native:text class="text-sm text-theme-on-surface-variant">Refreshing</native:text>
 </native:row>

resources/views/docs/mobile/4/edge-components/badge.md

@@ -8,8 +8,8 @@ order: 110
 A small count or text marker, typically used as an overlay on nav items, list rows, or buttons. Renders as a capsule
 pill.
 
-Colors come from the theme via the semantic `variant` prop by default. To override them per instance, apply `bg-*`
-classes for the fill and `rounded-*` classes to adjust the capsule radius.
+Colors come from the theme via the semantic `variant` prop — `destructive` (the default), `primary`, or `accent`.
+Prefer `variant` for badge colors: it keeps the label legible on both platforms and in both light and dark themes.
 
 @verbatim
 ```blade
@@ -41,7 +41,7 @@ icon, see the `badge` and `news` props on [`<native:bottom-nav-item>`](bottom-na
 
 @verbatim
 ```blade
-<native:row :gap="8" :align-items="1">
+<native:row class="gap-2 items-center">
     <native:icon name="notifications" :size="24" />
     <native:badge :count="$unreadCount" />
 </native:row>
@@ -58,19 +58,40 @@ icon, see the `badge` and `news` props on [`<native:bottom-nav-item>`](bottom-na
 
 ### Anchored to an icon
 
-Use a [`<native:stack>`](stack) to layer the badge over its target:
+Use a [`<native:stack>`](stack) to layer the badge over its target. Size the stack a little larger than the
+icon so the badge has a corner to sit in, and position it with positive `top-*` / `right-*` insets — the
+renderer anchors an absolute child to whichever edges you set (negative insets are not supported):
 
 @verbatim
 ```blade
 <native:stack :width="40" :height="40">
     <native:icon name="cart" :size="32" />
-    <native:column class="absolute" :top="-2" :right="-2">
+    <native:column class="absolute top-px right-px">
         <native:badge :count="$cartItems" />
     </native:column>
 </native:stack>
 ```
 @endverbatim
 
+### Custom background (iOS only)
+
+On iOS you can override the capsule fill with a `bg-*` class and the radius with a `rounded-*` class:
+
+@verbatim
+```blade static
+<native:badge label="Beta" class="bg-amber-600 rounded-md" />
+```
+@endverbatim
+
+<aside>
+
+Per-instance overrides are currently iOS-only: Android ignores `bg-*` and `rounded-*` on badges and always paints
+the variant's colors. The label also keeps the variant's on-color (white for the default `destructive`) even over a
+custom background, so pick a dark fill like `bg-amber-600` to keep the text legible. Prefer `variant` when you need
+colors that work on both platforms.
+
+</aside>
+
 ## Element
 
 ```php

resources/views/docs/mobile/4/edge-components/bottom-nav.md

@@ -20,8 +20,10 @@ order: 120
 
 A bottom navigation bar with up to 5 items. Used for your app's primary navigation.
 
+One bar demonstrates the whole item API — an `active` tab, a `news` dot, and a `badge`:
+
 @verbatim
-```blade
+```blade static
 <native:bottom-nav label-visibility="labeled">
     <native:bottom-nav-item
         id="home"
@@ -30,6 +32,13 @@ A bottom navigation bar with up to 5 items. Used for your app's primary navigati
         url="/home"
         :active="true"
     />
+    <native:bottom-nav-item
+        id="friends"
+        icon="person.3.fill"
+        label="Friends"
+        url="/friends"
+        :news="true"
+    />
     <native:bottom-nav-item
         id="profile"
         icon="person"
@@ -41,6 +50,8 @@ A bottom navigation bar with up to 5 items. Used for your app's primary navigati
 ```
 @endverbatim
 
+The [Builder API](#builder-api) below produces this same bar from a layout class — the recommended home for it.
+
 ## Props
 
 - `label-visibility` - `labeled`, `selected`, or `unlabeled` (optional, default: `labeled`)
@@ -68,7 +79,7 @@ A `<native:bottom-nav>` can contain up to 5 `<native:bottom-nav-item>` elements.
 ### Props
 
 - `id` - Unique identifier (required)
-- `icon` - A named [icon](icons) (required)
+- `icon` - A named [icon](icon#icon-name-reference) (required)
 - `label` - Accessibility label (required)
 - `url` - A URL to navigate to in the web view (required)
 - `active` - Highlight this item as active (optional, default: `false`)
@@ -84,7 +95,7 @@ Any `url` that doesn't match a registered native route will exit to the web view
 
 </aside>
 
-### `badge` example
+Here's `badge` on a tab item:
 
 <div class="sm:w-1/2">
 
@@ -95,23 +106,23 @@ Any `url` that doesn't match a registered native route will exit to the web view
 ## Builder API
 
 When a `<native:bottom-nav>` is supplied by a [layout](../the-basics/layouts), you build it fluently with the `TabBar`
-and `Tab` builders rather than writing it in Blade.
+and `Tab` builders rather than writing it in Blade. This is the same bar as the [Overview](#overview) example:
 
 ```php
 use Native\Mobile\Edge\Layouts\Builders\Tab;
 use Native\Mobile\Edge\Layouts\Builders\TabBar;
 
 TabBar::make()
-    ->dark()
-    ->activeColor('#0891b2')
     ->labelVisibility('labeled')
-    ->backgroundColor('#0F172A')
-    ->textColor('#94A3B8')
-    ->add(Tab::link('Chats',   '/syncup',          icon: 'chat_bubble')->badge('2'))
-    ->add(Tab::link('Friends', '/syncup/friends',  icon: 'person.3.fill')->news())
-    ->add(Tab::link('Profile', '/syncup/profile',  icon: 'person')->active());
+    ->activeColor('#0891b2')
+    ->add(Tab::link('Home',    '/home',    icon: 'home')->active())
+    ->add(Tab::link('Friends', '/friends', icon: 'person.3.fill')->news())
+    ->add(Tab::link('Profile', '/profile', icon: 'person')->badge('3'));
 ```
 
+To force a dark bar regardless of the system theme, chain `->dark()` — or take full control with
+`->backgroundColor('#0F172A')->textColor('#94A3B8')`, which wins over `dark()`'s default.
+
 ### `TabBar` methods
 
 - `make()` - Create a new builder
@@ -126,7 +137,7 @@ TabBar::make()
 
 - `link(string $label, string $url, ?string $icon = null)` - Build a tab. The id defaults to the label slugified
 - `id(string $id)` - Override the auto-generated id
-- `icon(string $icon)` - A named [icon](icons)
+- `icon(string $icon)` - A named [icon](icon#icon-name-reference)
 - `badge(string $badge, ?string $color = null)` - Show a numeric/text badge
 - `news(bool $news = true)` - Show a red dot indicator
 - `active(bool $active = true)` - Mark this tab as active

resources/views/docs/mobile/4/edge-components/bottom-sheet.md

@@ -9,7 +9,7 @@ A modal panel that slides up from the bottom of the screen. Use it for contextua
 that overlay the main content. Renders as SwiftUI's `.sheet` with `presentationDetents` on iOS and a Material3
 `ModalBottomSheet` on Android.
 
-Per Model 3, the container color resolves from `theme.surface`. For a custom surface wrap content in a
+Per Material 3, the container color resolves from `theme.surface`. For a custom surface wrap content in a
 `<native:column class="bg-...">`.
 
 @verbatim
@@ -64,21 +64,21 @@ Accepts any EDGE elements as children. The children are rendered inside the shee
     <native:bottom-sheet :visible="$showActions" @dismiss="$showActions = false" detents="small">
         <native:column class="w-full gap-0 pb-8">
             <native:pressable @press="$showActions = false" class="w-full px-4 py-3">
-                <native:row :gap="12" :align-items="1">
+                <native:row class="gap-3 items-center">
                     <native:icon name="edit" :size="24" />
                     <native:text class="text-base">Edit</native:text>
                 </native:row>
             </native:pressable>
             <native:divider />
             <native:pressable @press="$showActions = false" class="w-full px-4 py-3">
-                <native:row :gap="12" :align-items="1">
+                <native:row class="gap-3 items-center">
                     <native:icon name="share" :size="24" />
                     <native:text class="text-base">Share</native:text>
                 </native:row>
             </native:pressable>
             <native:divider />
             <native:pressable @press="$showActions = false" class="w-full px-4 py-3">
-                <native:row :gap="12" :align-items="1">
+                <native:row class="gap-3 items-center">
                     <native:icon name="delete" :size="24" color="#EF4444" />
                     <native:text class="text-base" color="#EF4444">Delete</native:text>
                 </native:row>
@@ -107,7 +107,7 @@ Accepts any EDGE elements as children. The children are rendered inside the shee
             <native:text class="text-xl font-bold">Add Item</native:text>
             <native:outlined-text-input label="Name" native:model="itemName" />
             <native:outlined-text-input label="Description" native:model="itemDescription" multiline :min-lines="3" />
-            <native:row :gap="8" :justify-content="2">
+            <native:row class="gap-2 justify-end">
                 <native:button label="Cancel" variant="secondary" @press="$showForm = false" />
                 <native:button label="Save" @press="$showForm = false" />
             </native:row>