@sigx/lynx-safe-area 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Andreas Ekdahl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,217 @@
+# @sigx/lynx-safe-area
+
+Safe-area insets (notch, home indicator, status bar, navigation bar, keyboard) for sigx-lynx. Native publisher on iOS + Android emits insets every time they change; the JS side surfaces them as a reactive BG signal, four per-edge `SharedValue`s for MT-driven layout, and CSS variables for utility-class styling.
+
+Mirrors React Native's `react-native-safe-area-context` API where it makes sense, but built for sigx-lynx's two-thread model so layout-bound insets don't bounce through the bridge.
+
+## Install
+
+```bash
+pnpm add @sigx/lynx-safe-area
+```
+
+Then declare it in your `sigx.lynx.config.ts` so prebuild auto-links the native publisher:
+
+```ts
+import { defineLynxConfig } from '@sigx/lynx-cli/config';
+
+export default defineLynxConfig({
+    modules: [
+        // ...
+        '@sigx/lynx-safe-area',
+    ],
+});
+```
+
+`sigx prebuild` then copies `SafeAreaPublisher.swift` / `SafeAreaPublisher.kt` into your `ios/` and `android/` source trees and registers them in the auto-generated `GeneratedLifecyclePublishers.{swift,kt}` so they attach to every `LynxView` before first paint. No additional native wiring required.
+
+## Quick start
+
+Wrap your app once, anywhere above the views that need insets:
+
+```tsx
+import { defineApp } from '@sigx/lynx';
+import { SafeAreaProvider, SafeAreaView } from '@sigx/lynx-safe-area';
+
+defineApp(() => () => (
+    <SafeAreaProvider>
+        <SafeAreaView edges={['top', 'bottom']} class="bg-base-100 flex-1">
+            <PageContent />
+        </SafeAreaView>
+    </SafeAreaProvider>
+));
+```
+
+`<SafeAreaView>` reactively applies the current insets as `padding` (default) or `margin` to the configured `edges`. Inset-aware first paint: insets are seeded synchronously from `lynx.__globalProps` before render, so there's no flash of unsafe content.
+
+## API
+
+### `<SafeAreaProvider>`
+
+Provides the context that hooks consume. Mount once at the app root.
+
+| Prop    | Type                              | Notes                                       |
+| ------- | --------------------------------- | ------------------------------------------- |
+| `class` | `string`                          | Forwarded to the host `<view>`.             |
+| `style` | `Record<string, string \| number>` | Merged after the auto-injected CSS vars.   |
+
+The host view exposes the current insets as CSS variables (`--sat`, `--sar`, `--sab`, `--sal`, `--safe-area-keyboard`) — handy for utility-class consumers:
+
+```tsx
+<SafeAreaProvider>
+    <view class="pt-[var(--sat)] pb-[var(--sab)]">…</view>
+</SafeAreaProvider>
+```
+
+### `<SafeAreaView>`
+
+Drop-in container that applies insets as padding or margin.
+
+| Prop    | Type                              | Default                          |
+| ------- | --------------------------------- | -------------------------------- |
+| `edges` | `('top' \| 'right' \| 'bottom' \| 'left')[]` | All four sides           |
+| `mode`  | `'padding' \| 'margin'`           | `'padding'`                      |
+| `class` | `string`                          | —                                |
+| `style` | `Record<string, string \| number>` | Merged after inset styles       |
+
+Implementation note: applies insets via inline style (BG signal), not via `useAnimatedStyle`. `setStyleProperties` writes that affect layout fire **after** the first layout pass, and children that capture their frame eagerly (notably `<scroll-view>`) don't reflow when insets arrive that way. Inline style avoids the timing trap.
+
+### `useSafeAreaInsets()`
+
+```ts
+function useSafeAreaInsets(): PrimitiveSignal<EdgeInsets> | Computed<EdgeInsets>;
+```
+
+Returns a BG-side reactive signal of `EdgeInsets`. Components calling this re-render on every inset change (rotation, keyboard show/hide, split-view resize on iPad).
+
+```tsx
+const insets = useSafeAreaInsets();
+return () => <view style={{ paddingTop: `${insets.value.top}px` }}>…</view>;
+```
+
+If no `<SafeAreaProvider>` is in scope, returns a signal seeded with `ZERO_INSETS` and warns in dev (so test/storybook fragments degrade gracefully instead of throwing).
+
+### `useSafeAreaSharedValues()`
+
+```ts
+function useSafeAreaSharedValues(): {
+    top: SharedValue<number>;
+    right: SharedValue<number>;
+    bottom: SharedValue<number>;
+    left: SharedValue<number>;
+} | null;
+```
+
+Per-edge `SharedValue`s for MT-driven `useAnimatedStyle` bindings. Use when an animation or gesture worklet needs the current inset on MT without a BG round-trip. Returns `null` outside of `<SafeAreaProvider>`.
+
+### `useSafeAreaFrame(viewportWidth, viewportHeight)`
+
+```ts
+function useSafeAreaFrame(
+    viewportWidth: number,
+    viewportHeight: number,
+): Computed<{ x: number; y: number; width: number; height: number }>;
+```
+
+Computed inner safe frame — `(x, y)` origin and `width`/`height` of the rect inside the insets. Useful for absolute-positioned overlays and modal bounds that need to know "the visible content rect", not just inset deltas.
+
+`viewportWidth`/`viewportHeight` are caller-supplied (typically a one-time read via `@sigx/lynx-device-info`); the safe-area module deliberately doesn't pull device-info as a transitive dependency.
+
+### `useSafeAreaInsetsMT()`
+
+```ts
+function useSafeAreaInsetsMT(): EdgeInsets;
+```
+
+Synchronous read from inside a `'main thread'`-marked worklet. Reads `lynx.__globalProps` directly — there's no signal subscription, so callers re-evaluate per worklet invocation rather than reactively. For declarative MT-driven layout the recommended path is `<SafeAreaView>` (which composes `useSafeAreaSharedValues()` with `useAnimatedStyle`).
+
+### Types
+
+```ts
+interface EdgeInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    /** IME (soft keyboard) height when visible, 0 when hidden. */
+    keyboard: number;
+    /** Status-bar height. Often equal to `top`, but on notched devices the
+     *  safe-area top includes the notch and `statusBar` is the smaller
+     *  status-only inset. */
+    statusBar: number;
+    /** Navigation-bar height (Android gesture/3-button nav at bottom). */
+    navigationBar: number;
+}
+
+const ZERO_INSETS: EdgeInsets;
+```
+
+All values are in dp/pt (logical pixels), not raw pixels.
+
+### Lower-level escape hatches
+
+```ts
+import { readGlobalSafeArea, GLOBAL_PROPS_KEY } from '@sigx/lynx-safe-area';
+```
+
+- `readGlobalSafeArea()` — synchronous one-shot read from `lynx.__globalProps`. Returns `EdgeInsets` (zeros if the publisher hasn't run yet). What `<SafeAreaProvider>` uses to seed initial values.
+- `GLOBAL_PROPS_KEY` — the key the native publisher writes under. Exported for tests/debugging.
+
+## CSS variables
+
+The provider's host view exposes these on the element style — descendant selectors inherit them via the cascade:
+
+| Variable                | Maps to                                  |
+| ----------------------- | ---------------------------------------- |
+| `--sat`                 | `insets.top` (in px)                     |
+| `--sar`                 | `insets.right`                           |
+| `--sab`                 | `insets.bottom`                          |
+| `--sal`                 | `insets.left`                            |
+| `--safe-area-keyboard`  | `insets.keyboard`                        |
+
+Works uniformly across iOS and Android — upstream's `env(safe-area-inset-*)` is iOS-only, so this is what you reach for if you're using DaisyUI/Tailwind utilities like `pt-[var(--sat)]`.
+
+## How it works
+
+```
+┌──────────────────────────────────────┐
+│ Native (iOS UIView / Android View)   │
+│ - SafeAreaPublisher attached to      │
+│   LynxView at construction           │
+│ - On each insets/keyboard change:    │
+│   ┌──────────────────────────────┐   │
+│   │ updateGlobalProps({safeArea})│   │
+│   │ + emit 'safeAreaChanged'     │   │
+│   └──────────────────────────────┘   │
+└──────────────────────────────────────┘
+                    │
+                    ▼
+┌──────────────────────────────────────┐
+│ JS (BG thread)                       │
+│ ┌─────────────────┐ ┌──────────────┐ │
+│ │ readGlobal-     │ │ Global-      │ │
+│ │ SafeArea() seed │ │ EventEmitter │ │
+│ │ (sync, before   │ │ subscription │ │
+│ │  first render)  │ │              │ │
+│ └────────┬────────┘ └──────┬───────┘ │
+│          │                 │         │
+│          ▼                 ▼         │
+│      ┌──────────────────────────┐    │
+│      │ runOnMainThread worklet  │    │
+│      │ writes 4 per-edge SVs    │    │
+│      └────────────┬─────────────┘    │
+│                   │                  │
+│                   ▼                  │
+│   SharedValue diff → BG signal       │
+│   mirror → computed → re-render      │
+│   useSafeAreaInsets() consumers      │
+└──────────────────────────────────────┘
+```
+
+Why `SharedValue`s for the four edges but a plain `signal` for keyboard/statusBar/navigationBar? The four edges drive layout (`<SafeAreaView>` wants to write padding from a worklet on every flush) and the SV bridge is the right tool for that. The extras are informational — keyboard already lives in `bottom` on iOS, statusBar/navigationBar are decorative — so the SV plumbing isn't worth the cost there.
+
+A custom `safeAreaChanged` event is used instead of upstream's `onGlobalPropsChanged` because the upstream event-name conventions have churned across Lynx releases and we want the contract in our hands.
+
+## Reference app
+
+`examples/lynx-one/my-sigx-app/src/App.tsx` mounts `<SafeAreaProvider>` and a `<SafeAreaView>` for the page chrome — useful as a copy-paste reference and as the smoke-test target when porting the publisher to a new platform.

package/android/com/sigx/safearea/SafeAreaPublisher.kt

@@ -0,0 +1,125 @@
+package com.sigx.safearea
+
+import android.util.Log
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import com.lynx.react.bridge.JavaOnlyArray
+import com.lynx.react.bridge.JavaOnlyMap
+import com.lynx.tasm.LynxView
+import com.lynx.tasm.TemplateData
+
+/**
+ * Publishes the device safe-area insets (status bar, navigation bar, gesture
+ * inset, IME / soft keyboard) to JS via two channels:
+ *
+ * 1. **`lynx.__globalProps.safeArea`** — populated synchronously via
+ *    [LynxView.updateGlobalProps]. The MT bundle reads `__globalProps`
+ *    synchronously before its first render, giving inset-aware first paint
+ *    with no flash of unsafe content.
+ *
+ * 2. **`safeAreaChanged` global event** — fired via [LynxView.sendGlobalEvent]
+ *    after each republish. The JS `<SafeAreaProvider>` subscribes via
+ *    `lynx.getJSModule("GlobalEventEmitter").addListener` and updates its
+ *    reactive signal. Drives live updates on rotation, multi-window
+ *    split-screen, foldable hinge state, IME show/hide.
+ *
+ * Lifecycle: instantiate one publisher per [LynxView]; call [attach] *before*
+ * `renderTemplateUrl` so the initial inset map is in `__globalProps` before
+ * MT first paint. The publisher hooks `OnApplyWindowInsetsListener` on the
+ * LynxView itself, which delivers updates as soon as the view is laid out
+ * and on every subsequent insets change.
+ *
+ * Fills the gap from upstream Lynx: as of LynxJS 3.6 the C++ renderer
+ * doesn't populate `env(safe-area-inset-*)` on Android (open PR #5296).
+ * Going through `__globalProps` works on every supported Android version.
+ */
+class SafeAreaPublisher(private val lynxView: LynxView) {
+
+    private companion object {
+        const val TAG = "SafeAreaPublisher"
+        const val EVENT_NAME = "safeAreaChanged"
+    }
+
+    private var lastInsets: WindowInsetsCompat? = null
+    private var lastKeyboard: Float = 0f
+
+    fun attach() {
+        // Set the listener BEFORE the LynxView is added to a window so we
+        // catch the initial WindowInsets dispatch. The listener returns the
+        // insets unchanged so other consumers in the view tree still see them.
+        ViewCompat.setOnApplyWindowInsetsListener(lynxView) { _, insets ->
+            lastInsets = insets
+            publish(insets)
+            insets
+        }
+
+        // Force a publish in case insets were already delivered before the
+        // listener attached (happens when LynxView is reattached during HMR
+        // / activity recreation). ViewCompat.getRootWindowInsets is
+        // null-safe and returns whatever the platform last computed.
+        ViewCompat.getRootWindowInsets(lynxView)?.let { publish(it) }
+    }
+
+    private fun publish(insets: WindowInsetsCompat) {
+        val density = lynxView.resources.displayMetrics.density.takeIf { it > 0 } ?: 1f
+
+        // Lynx layout works in density-independent pixels; WindowInsets
+        // delivers physical pixels. Divide by density once at the boundary
+        // so the JS side gets dp values that map 1:1 to its other layout
+        // numbers (preferredLayoutWidth, etc.).
+        val sys = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+        val ime = insets.getInsets(WindowInsetsCompat.Type.ime())
+        val cutout = insets.getInsets(WindowInsetsCompat.Type.displayCutout())
+        val gestures = insets.getInsets(WindowInsetsCompat.Type.systemGestures())
+
+        // Top: max of system-bar (status bar) and display cutout (notch).
+        // The two can disagree on devices where the notch extends slightly
+        // into the status-bar area; taking the max gives a conservative
+        // safe area that always clears both.
+        val top = maxOf(sys.top, cutout.top) / density
+        val right = maxOf(sys.right, cutout.right) / density
+        val bottom = maxOf(sys.bottom, cutout.bottom, gestures.bottom) / density
+        val left = maxOf(sys.left, cutout.left) / density
+        val keyboard = ime.bottom / density
+        lastKeyboard = keyboard
+
+        val map: Map<String, Any> = mapOf(
+            "top" to top.toDouble(),
+            "right" to right.toDouble(),
+            "bottom" to bottom.toDouble(),
+            "left" to left.toDouble(),
+            "keyboard" to keyboard.toDouble(),
+            "statusBar" to (sys.top / density).toDouble(),
+            "navigationBar" to (sys.bottom / density).toDouble(),
+        )
+
+        try {
+            // Channel 1: __globalProps — sync MT read at first paint.
+            lynxView.updateGlobalProps(TemplateData.fromMap(mapOf("safeArea" to map)))
+
+            // Channel 2: safeAreaChanged event — live update for the BG-side
+            // <SafeAreaProvider> listener. sendGlobalEvent expects a
+            // JavaOnlyArray (Lynx bridge type), not a Kotlin List. The
+            // first array element is what GlobalEventEmitter.addListener
+            // delivers as the listener's first argument.
+            val payload = JavaOnlyMap().apply {
+                for ((k, v) in map) {
+                    when (v) {
+                        is Double -> putDouble(k, v)
+                        is Int -> putInt(k, v)
+                        is Boolean -> putBoolean(k, v)
+                        is String -> putString(k, v)
+                        else -> putString(k, v.toString())
+                    }
+                }
+            }
+            val params = JavaOnlyArray().apply { pushMap(payload) }
+            lynxView.sendGlobalEvent(EVENT_NAME, params)
+        } catch (e: Throwable) {
+            // Defensive: if the LynxView is mid-teardown the bridge call
+            // can throw. Don't crash the host app over a missed inset
+            // notification — the next layout pass will re-publish.
+            Log.w(TAG, "publish failed: ${e.message}")
+        }
+    }
+}

package/dist/globals.d.ts

@@ -0,0 +1,42 @@
+import { type EdgeInsets } from './types.js';
+/**
+ * The key under `lynx.__globalProps` where the native publisher writes the
+ * inset map. Kept as a constant so iOS/Android publishers, the JS reader, and
+ * tests all agree on a single string.
+ */
+export declare const GLOBAL_PROPS_KEY = "safeArea";
+/**
+ * Shape of the safe-area sub-object the native publishers write to
+ * `lynx.__globalProps[GLOBAL_PROPS_KEY]`. Some fields may be absent on
+ * platforms that don't expose them (e.g. Android pre-31 navigation-bar API);
+ * the reader fills missing keys with 0.
+ */
+export interface RawSafeAreaProps {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    keyboard?: number;
+    statusBar?: number;
+    navigationBar?: number;
+}
+/**
+ * Synchronously read the current safe-area insets from `lynx.__globalProps`.
+ *
+ * Returns `ZERO_INSETS` when the publisher hasn't populated yet, when the
+ * package is bundled into a non-Lynx host (web preview, SSR), or when the
+ * host runtime omits the global. All callers must be prepared for the
+ * zero-fallback — it's the natural state during cold start before the native
+ * publisher has fired its first `updateGlobalProps`.
+ *
+ * Safe to call from both the Background Thread (BG) and the Main Thread
+ * (MT), since `lynx.__globalProps` is mirrored across both. Sync read on MT
+ * is what gives us inset-aware first paint.
+ *
+ * The `lynx` symbol is a closure-injected identifier (provided by
+ * `@lynx-js/runtime-wrapper-webpack-plugin`'s `__init_card_bundle__`
+ * wrapper), NOT a property of `globalThis`. Access it as a bare identifier
+ * with a `typeof` guard — same pattern used by `runtime-lynx/src/bg-bridge.ts`.
+ */
+export declare function readGlobalSafeArea(): EdgeInsets;
+//# sourceMappingURL=globals.d.ts.map

package/dist/globals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,YAAY,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,IAAI,UAAU,CAe/C"}

package/dist/hooks.d.ts

@@ -0,0 +1,67 @@
+import { type Computed, type PrimitiveSignal } from '@sigx/reactivity';
+import { type EdgeInsets, type SafeAreaContextValue } from './types.js';
+type InsetsRead = PrimitiveSignal<EdgeInsets> | Computed<EdgeInsets>;
+/**
+ * BG-side reactive read of current safe-area insets. Returns the live signal
+ * — components calling this re-render on inset change (rotation, keyboard,
+ * split-view).
+ *
+ * If no `<SafeAreaProvider>` is in scope, returns a signal seeded with
+ * `ZERO_INSETS` and warns in dev. (We don't throw because mounting an app
+ * fragment for tests/storybook without a provider is convenient and the
+ * zero fallback degrades gracefully.)
+ *
+ * @example
+ * ```tsx
+ * const insets = useSafeAreaInsets();
+ * return () => <view style={{ paddingTop: insets.value.top }} />;
+ * ```
+ */
+export declare function useSafeAreaInsets(): InsetsRead;
+/**
+ * Per-edge SharedValues for MT-driven `useAnimatedStyle` bindings — the
+ * recommended path for `<SafeAreaView>`-style layouts that need padding to
+ * track insets without a BG re-render. See `safe-area-view.tsx` for the
+ * canonical consumer.
+ */
+export declare function useSafeAreaSharedValues(): SafeAreaContextValue['sv'] | null;
+/**
+ * Computed signal of the inner safe frame (origin + size) in dp/pt.
+ *
+ * Useful for absolute-positioned overlays, modal bounds, and layout math
+ * that needs to know "the visible content rect" rather than just the inset
+ * deltas. The frame size is computed from the host viewport — you must pass
+ * `viewportWidth`/`viewportHeight` (typically read once via
+ * `@sigx/lynx-device-info`) since the safe-area module deliberately avoids
+ * pulling that whole dependency.
+ *
+ * @example
+ * ```tsx
+ * const { screenWidth, screenHeight } = await DeviceInfo.getInfo();
+ * const frame = useSafeAreaFrame(screenWidth, screenHeight);
+ * return () => <view style={{
+ *   position: 'absolute',
+ *   top: frame.value.y, left: frame.value.x,
+ *   width: frame.value.width, height: frame.value.height,
+ * }} />;
+ * ```
+ */
+export declare function useSafeAreaFrame(viewportWidth: number, viewportHeight: number): Computed<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/**
+ * **MT-thread** synchronous read of the current safe-area insets. For use
+ * inside `'main thread'`-marked worklet bodies. Reads `lynx.__globalProps`
+ * directly — there's no signal subscription, so callers re-evaluate per
+ * worklet invocation rather than reactively.
+ *
+ * For declarative MT-driven layout (the common case), prefer
+ * `<SafeAreaView edges={…}>`, which composes `useSafeAreaSharedValues()`
+ * with `useAnimatedStyle` — that path is reactive and applies on flush.
+ */
+export declare function useSafeAreaInsetsMT(): EdgeInsets;
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjF,OAAO,EAAe,KAAK,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAErF,KAAK,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAI9C;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,IAAI,CAG3E;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,QAAQ,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAWnE;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CAEhD"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { SafeAreaProvider, SAFE_AREA_EVENT } from './provider.js';
+export type { SafeAreaProviderProps } from './provider.js';
+export { SafeAreaView } from './safe-area-view.js';
+export type { SafeAreaViewProps } from './safe-area-view.js';
+export { useSafeAreaInsets, useSafeAreaSharedValues, useSafeAreaFrame, useSafeAreaInsetsMT, } from './hooks.js';
+export { useSafeAreaContext } from './injectable.js';
+export { readGlobalSafeArea, GLOBAL_PROPS_KEY, } from './globals.js';
+export type { RawSafeAreaProps } from './globals.js';
+export { ZERO_INSETS } from './types.js';
+export type { EdgeInsets, Edge, SafeAreaMode, SafeAreaContextValue, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EACL,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,YAAY,EACV,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,oBAAoB,GACrB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,157 @@
+import { component as e, computed as t, defineInjectable as n, defineProvide as r, onMounted as i, onUnmounted as a, runOnMainThread as o, signal as s, useMainThreadRef as c, useSharedValue as l } from "@sigx/lynx";
+import { jsx as u } from "@sigx/lynx/jsx-runtime";
+import { computed as d } from "@sigx/reactivity";
+//#region src/injectable.ts
+var f = n(() => null), p = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	keyboard: 0,
+	statusBar: 0,
+	navigationBar: 0
+}, m = "safeArea";
+function h() {
+	let e = (typeof lynx < "u" ? lynx : void 0)?.__globalProps?.[m];
+	return !e || typeof e != "object" ? p : {
+		top: g(e.top),
+		right: g(e.right),
+		bottom: g(e.bottom),
+		left: g(e.left),
+		keyboard: g(e.keyboard),
+		statusBar: g(e.statusBar),
+		navigationBar: g(e.navigationBar)
+	};
+}
+function g(e) {
+	return typeof e == "number" && Number.isFinite(e) ? e : 0;
+}
+//#endregion
+//#region src/provider.tsx
+var _ = "safeAreaChanged", v = e(({ props: e, slots: n }) => {
+	let d = h(), p = l(d.top), m = l(d.right), g = l(d.bottom), v = l(d.left), b = s({
+		keyboard: d.keyboard,
+		statusBar: d.statusBar,
+		navigationBar: d.navigationBar
+	}), S = t(() => ({
+		top: p.value,
+		right: m.value,
+		bottom: g.value,
+		left: v.value,
+		keyboard: b.keyboard,
+		statusBar: b.statusBar,
+		navigationBar: b.navigationBar
+	})), C = {
+		insets: S,
+		sv: {
+			top: p,
+			right: m,
+			bottom: g,
+			left: v
+		}
+	};
+	r(f, () => C);
+	let w = o((e, t, n, r) => {
+		"main thread";
+		p.current.value = e, m.current.value = t, g.current.value = n, v.current.value = r;
+	}), T = c(null), E, D;
+	return i(() => {
+		D = (typeof lynx < "u" ? lynx : void 0)?.getJSModule?.("GlobalEventEmitter"), D && (E = (e) => {
+			let t = y(e, S.value);
+			b.$set({
+				keyboard: t.keyboard,
+				statusBar: t.statusBar,
+				navigationBar: t.navigationBar
+			}), w(t.top, t.right, t.bottom, t.left);
+		}, D.addListener(_, E));
+	}), a(() => {
+		D && E && D.removeListener(_, E);
+	}), () => /* @__PURE__ */ u("view", {
+		class: e.class,
+		"main-thread:ref": T,
+		style: x(S.value, e.style),
+		children: n.default?.()
+	});
+});
+function y(e, t) {
+	if (!e || typeof e != "object") return t;
+	let n = e;
+	return {
+		top: b(n.top, t.top),
+		right: b(n.right, t.right),
+		bottom: b(n.bottom, t.bottom),
+		left: b(n.left, t.left),
+		keyboard: b(n.keyboard, t.keyboard),
+		statusBar: b(n.statusBar, t.statusBar),
+		navigationBar: b(n.navigationBar, t.navigationBar)
+	};
+}
+function b(e, t) {
+	return typeof e == "number" && Number.isFinite(e) ? e : t;
+}
+function x(e, t) {
+	let n = {
+		"--sat": `${e.top}px`,
+		"--sar": `${e.right}px`,
+		"--sab": `${e.bottom}px`,
+		"--sal": `${e.left}px`,
+		"--safe-area-keyboard": `${e.keyboard}px`
+	};
+	return t ? {
+		...n,
+		...t
+	} : n;
+}
+//#endregion
+//#region src/hooks.ts
+function S() {
+	let e = f();
+	return e ? e.insets : D();
+}
+function C() {
+	return f()?.sv ?? null;
+}
+function w(e, t) {
+	let n = S();
+	return d(() => {
+		let r = n.value;
+		return {
+			x: r.left,
+			y: r.top,
+			width: Math.max(0, e - r.left - r.right),
+			height: Math.max(0, t - r.top - r.bottom - r.keyboard)
+		};
+	});
+}
+function T() {
+	return h();
+}
+var E;
+function D() {
+	return E ||= (globalThis.process?.env?.NODE_ENV !== "production" && console.warn("[sigx-safe-area] useSafeAreaInsets() called outside <SafeAreaProvider>. Returning ZERO_INSETS. Wrap your app in <SafeAreaProvider> to receive live device insets."), d(() => p)), E;
+}
+//#endregion
+//#region src/safe-area-view.tsx
+var O = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], k = e(({ props: e, slots: t }) => {
+	let n = S(), r = e.edges ?? O, i = e.mode ?? "padding";
+	return () => {
+		let a = n.value, o = {};
+		return r.includes("top") && (o[i === "padding" ? "paddingTop" : "marginTop"] = `${a.top}px`), r.includes("right") && (o[i === "padding" ? "paddingRight" : "marginRight"] = `${a.right}px`), r.includes("bottom") && (o[i === "padding" ? "paddingBottom" : "marginBottom"] = `${a.bottom}px`), r.includes("left") && (o[i === "padding" ? "paddingLeft" : "marginLeft"] = `${a.left}px`), /* @__PURE__ */ u("view", {
+			class: e.class,
+			style: e.style ? {
+				...e.style,
+				...o
+			} : o,
+			children: t.default?.()
+		});
+	};
+});
+//#endregion
+export { m as GLOBAL_PROPS_KEY, _ as SAFE_AREA_EVENT, v as SafeAreaProvider, k as SafeAreaView, p as ZERO_INSETS, h as readGlobalSafeArea, f as useSafeAreaContext, w as useSafeAreaFrame, S as useSafeAreaInsets, T as useSafeAreaInsetsMT, C as useSafeAreaSharedValues };
+
+//# sourceMappingURL=index.js.map