@likith99/react-native-adaptive-liquid-glass 0.1.0

package/AdaptiveLiquidGlass.podspec

@@ -0,0 +1,18 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+Pod::Spec.new do |s|
+  s.name = 'AdaptiveLiquidGlass'
+  s.version = package['version']
+  s.summary = package['description']
+  s.homepage = 'https://github.com/likith099/liquedGlassRecreate'
+  s.license = { :type => 'MIT', :file => 'LICENSE' }
+  s.author = 'Likith Kanneganti'
+  s.platforms = { :ios => '15.1' }
+  # Autolinked from node_modules; the source is declared for completeness.
+  s.source = { :git => 'https://github.com/likith099/liquedGlassRecreate.git', :tag => "v#{s.version}" }
+  s.source_files = 'ios/**/*.{h,m,mm,swift}'
+  s.private_header_files = 'ios/**/*.h'
+  s.swift_version = '5.0'
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Likith Kanneganti
+
+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,127 @@
+# @likith99/react-native-adaptive-liquid-glass
+
+Native iOS Liquid Glass surfaces and UIKit action controls, with ordinary Android counterparts. No Expo dependency. React Native 0.81–0.86 / React 19 / Fabric; requires Xcode 26+, and iOS 15.1+ (glass on iOS 26+).
+
+## Install
+
+Install the public package from npm. To test local changes instead, create an archive with `npm pack --workspace @likith99/react-native-adaptive-liquid-glass` and install the resulting `.tgz` file.
+
+```sh
+npm install @likith99/react-native-adaptive-liquid-glass
+cd ios && pod install
+```
+
+Then rebuild both native apps; a JS-only reload is not enough the first time. Autolinking wires the iOS pod and the Android Gradle module, so there is nothing to register by hand. Android autolinks Kotlin SeekBar, PopupMenu, Toolbar, and Material BottomNavigationView bridges; surfaces and the other Android controls use React Native views and pressables.
+
+### Requirements
+
+The host app must run **React Native 0.81 to 0.86 with the New Architecture (Fabric)** and React 19; these are Fabric codegen components and will not build on the old architecture. Builds are verified on 0.81.5 and 0.86.3. iOS needs Xcode 26+ and a **deployment target of iOS 15.1 or higher** — below that CocoaPods refuses to resolve the pod — with native glass on iOS 26+ and standard controls below it.
+
+On React Native 0.81 specifically, the app must consume React Native's **prebuilt** iOS dependencies, which is the default (`RCT_USE_RN_DEP=1`) and what Expo SDK 54 does. Building React Native from source on 0.81 fails under Xcode 26 inside `Pods/fmt`, independently of this package. On **iOS 27 the host app must adopt the UIScene lifecycle**, otherwise iOS traps during scene creation before any UI appears; add a `UIApplicationSceneManifest` and a scene delegate that owns the window. Android needs no extra setup. Expo Modules are not used and no router is required.
+
+```tsx
+import {GlassView, GlassButton, GlassContainer, GlassActionCluster} from '@likith99/react-native-adaptive-liquid-glass';
+
+<GlassView interactive cornerRadius={24} style={{padding: 20}}>
+  <Text>React content inside native glass</Text>
+</GlassView>
+
+<GlassActionCluster
+  actions={[{id: 'save', title: 'Save', systemImage: 'bookmark'}]}
+  expanded={expanded}
+  onExpandedChange={setExpanded}
+  onAction={id => handleAction(id)}
+/>
+```
+
+`GlassView` accepts material (`regular`, `clear`, `none`), interactive, tintColor, cornerRadius, colorScheme, animationDuration (seconds), fallbackStyle, and forceFallback. Use cornerRadius instead of style.borderRadius. `GlassPressable` adds custom React children, press semantics and Android ripple. `GlassButton` with a `title` uses a fully native SwiftUI button on iOS 26+. Existing children-based GlassButton calls remain compatible. `GlassContainer.mergingEnabled` defaults to false. Set it to true to allow nearby surfaces to join; `spacing` then controls the merging threshold, independently of layout gap. The action cluster also defaults to `mergingEnabled={false}`; enable it to opt into native glass merging during expansion and collapse. For a GlassContainer, place participating GlassViews inside it.
+
+The UIKit action cluster retains controls by stable IDs and uses the same UIGlassEffect material host as GlassView. The toggle keeps its material, bounds, and opacity unchanged during expansion. UIKit owns the native finger-localized highlight and deformation whenever `interactive` is enabled. There is no custom press overlay, scale, or finger-follow animation. SF Symbols remain inside the effect content view, so UIKit deforms the icon and glass together. A tap recognizer observes activation without cancelling or delaying native glass touches. There is no separate UIControl or forced hit-test target. Default dark-mode actions apply a neutral black native material tint at 0.65 alpha to reduce lightness. This also darkens the resting material; it is not a highlight-strength percentage. Light mode uses transparent tint. An explicit tintColor overrides the default. UIKit still owns the highlight and provides no separate intensity setting. The old `pressFeedback` prop is deprecated and ignored. `interactive={false}` disables native press visuals without disabling callbacks. Android keeps its normal ripple. Opt-in merging uses UIGlassContainerEffect and animated UIKit geometry; SwiftUI matched-geometry transitions are no longer used. Supply unique nonempty action IDs; `__toggle` is reserved. Keep expanded controlled. iOS renders SF Symbols with accessible titles, while Android displays titles on ordinary buttons. Allow approximately `24 + 52 * (actions.length + 1) + 12 * actions.length` points of width and at least 80 of height. Arbitrary React children are supported by the surface, but not the action cluster.
+
+Reduce Transparency replaces our glass surface/cluster materials with opaque backgrounds. Reduce Motion suppresses our native property/morph transitions. Use semantic text colors for your children; the package does not recolor arbitrary content. `forceFallback` previews the standard implementation on surfaces, buttons, selectors, and action clusters. The native slider has no `forceFallback` prop.
+
+See `src/types.ts` for the complete typed API. The repository root README contains the demo commands, architecture, reference study, and verification results. Custom drag/stretch physics, a full native control suite, arbitrary React-tree morphing, physical-device profiling, and broader React Native compatibility remain future work. MIT licensed.
+
+## Native controls
+
+`GlassButton` accepts `title`, optional `systemImage` (iOS), `variant="regular" | "prominent"`, `disabled`, `loading`, `onPress: () => void`, tintColor, colorScheme, forceFallback, and view layout props. Loading prevents activation. Default native host height: 64 points. For custom children/material/shape, use GlassPressable.
+
+`GlassSegmentedControl` accepts `options: {value, label, disabled?}[]`, controlled `value: string | null`, `onValueChange`, disabled, tintColor, colorScheme, forceFallback, and view layout props. Values must be unique and nonempty; a non-null selection must be present. It uses UISegmentedControl on iOS 26+ and selectable ripple buttons on Android. Default native host height: 52 points. Provide enough width for short labels, and larger heights for large accessibility text. Neither control enables shared glass merging.
+
+## Native slider
+
+```tsx
+import {useState} from 'react';
+import {GlassSlider} from '@likith99/react-native-adaptive-liquid-glass';
+
+export function LevelControl() {
+  const [level, setLevel] = useState(40);
+  return <GlassSlider value={level} onValueChange={setLevel}
+    minimumValue={0} maximumValue={100} step={10}
+    accessibilityLabel="Level" />;
+}
+```
+
+`GlassSlider` uses UISlider on iOS (Liquid Glass on iOS 26+, standard native appearance on older versions) and SeekBar on Android. Defaults: minimum 0, maximum 1, step 0 (continuous), height 52 points. It also accepts `disabled`, `tintColor`, `onSlidingStart`, `onSlidingComplete`, `onSlidingCancel`, and view layout props. The native slider owns tracking and reconciles to the latest controlled `value` after release, including a rejected change. Update `value` in `onValueChange` to accept changes. Programmatic changes during tracking apply when it ends.
+
+Values clamp and positive steps snap relative to the minimum; the maximum endpoint remains reachable. Require finite inputs, maximum greater than minimum, and step between zero and the range. Native positioning uses normalized Float precision on iOS and one million ticks on Android; this is not an arbitrary-precision numeric input. Accessibility increments by step or 5% of the range. Provide an accessible label.
+
+Native cancellation, disabling, range/step changes, or detachment cancel an active drag. `onSlidingCancel` reports the restored latest controlled value and does not fire completion or undo values React already accepted. No custom thumb children, tick-mark API, neutral-track style, or shared merging group is added. Apple's [UIKit design session](https://developer.apple.com/videos/play/wwdc2025/284/) describes the native slider's system interaction.
+
+## Native menus
+
+```tsx
+import {GlassMenuButton} from '@likith99/react-native-adaptive-liquid-glass';
+
+<GlassMenuButton title="Actions" systemImage="ellipsis.circle"
+  items={[{id: 'save', title: 'Save', systemImage: 'bookmark'},
+    {id: 'remove', title: 'Remove', destructive: true}]}
+  onAction={id => console.log(id)} />
+```
+
+iOS uses UIKit's native menu and glass button; older iOS, Reduce Transparency, or forceFallback uses a standard button. Android uses a native Button and PopupMenu. Items support disabled, destructive, and controlled checked flags. IDs must be unique and IDs/action titles nonempty. Empty items disable the trigger. SF Symbols are iOS-only. A selection emits its ID; update checked in your items to change the checkmark. Destructive is presentation only. Changing items, disabling, or detaching dismisses the native menu and stale selections are rejected. The default host is 64 points tall with a minimum width of 120; supply room for long titles and accessibility text. tintColor is a foreground accent (including enabled Android menu text; destructive entries retain their error color). Rebuild both native apps after installing this version.
+
+`GlassMenuElement` extends the existing action type with `{kind: 'section', id, title, items}` and `{kind: 'submenu', id, title, items, disabled?, systemImage?}`. Sections may have an empty title. Groups must contain items; IDs are unique across all groups and leaves. Only enabled leaf actions emit callbacks; a disabled submenu blocks its descendants. UIKit displays inline sections; Android uses native groups and disabled title rows. One submenu level is supported on both platforms, with at most 8 total tree levels including sections and 256 elements. Submenus inside submenus are rejected. Existing flat arrays remain compatible.
+
+## Native toolbars
+
+```tsx
+import {GlassToolbar} from '@likith99/react-native-adaptive-liquid-glass';
+
+<GlassToolbar items={[
+  {id: 'save', title: 'Save', systemImage: 'square.and.arrow.down'},
+  {kind: 'submenu', id: 'sort', title: 'Sort', items: [
+    {id: 'name', title: 'By name', checked: true},
+    {id: 'recent', title: 'Most recent', checked: false},
+  ]},
+  {id: 'remove', title: 'Remove', destructive: true, placement: 'overflow'},
+]} maxVisibleItems={2} onAction={id => console.log(id)} />
+```
+
+`GlassToolbar` uses UIKit UIToolbar / Android Toolbar. Root items are actions or submenus; their menus use the same tree contract above. `maxVisibleItems` defaults to 3 and is an upper bound; 0 places everything in overflow. `placement="overflow"` always hides a root item in the native overflow menu. Other items move there as space becomes limited; platforms may show different visible counts. The host defaults to height 64, minimum width 64. The screen owns safe-area insets and placement. Long titles should be allowed to move to overflow; provide explicit width/flex in horizontal layouts.
+
+On iOS 26, `mergingEnabled` (default false) lets bar items share native glass backgrounds. `forceFallback` and Reduce Transparency use an opaque bar with hidden shared item backgrounds. Android uses its standard appearance and title actions; iOS uses SF Symbols when supplied, retaining titles as accessibility labels. `disabled` blocks all actions; individual items/submenus can also be disabled. Checkmarks remain controlled. `tintColor` sets a foreground accent; destructive actions use the native error color. Changing items or toolbar width dismisses open menus. Rebuild native apps for the extended Fabric bridge. No custom press animation or navigation-library dependency is introduced.
+
+## Native tabs
+
+```tsx
+const [tab, setTab] = useState('home');
+<GlassTabBar items={[
+  {id: 'home', title: 'Home', icon: 'home'},
+  {id: 'inbox', title: 'Inbox', icon: 'inbox', badge: 3},
+]} value={tab} onValueChange={setTab} onTabReselect={id => console.log(id)} />
+```
+
+`GlassTabBar` uses a contained UITabBarController on iOS and Material BottomNavigationView 1.13.0 on Android. UIKit owns Liquid Glass on iOS 26+ and the standard tab appearance on earlier supported versions. Android resolves a consuming Material theme or falls back to Material 3 DayNight. No Expo or navigation library is required by the package. Rebuild both apps after installation.
+
+Supply 1–5 items with unique nonempty IDs/titles and a `value` present in the list. Empty items require `value={null}`. Items accept icon presets (`home`, `search`, `library`, `favorites`, `inbox`, `settings`), iOS `systemImage`/`selectedSystemImage`, Android app drawable name `androidIcon`, numeric or `'dot'` badge, `disabled`, and `accessibilityLabel`. Numeric badges are nonnegative 32-bit integers; native display caps at 999+. Omitting a badge removes it.
+
+Selection is controlled: update `value` in `onValueChange` to accept a tap. Rejected changes restore the supplied value after the React transaction; tapping the current tab calls only `onTabReselect`. Programmatic values emit no callbacks and may select disabled tabs. Global `disabled` blocks user taps. On the iOS 26.5 simulator, XCTest still reports disabled tabs as enabled despite native dimming and blocked activation; VoiceOver announcements need the planned accessibility audit. `tintColor` changes the selected foreground accent. Stable IDs preserve tab identity across reorder/replacement; native controls own press and selection animations.
+
+Default host height is 80 points, minimum width 180. Supply sufficient width/height for your labels. The screen owns safe-area spacing outside the host and the content above it. This primitive does not own a navigation stack, React screens, automatic scroll minimization, or an iPad sidebar. It does not accept React children or `forceFallback`; the native system determines its appearance. The repository demo shows a React Navigation 7 custom tab-bar adapter using route keys, preventable `tabPress`, reselection, retained screen state, and back history.
+
+## Older iOS surfaces and performance
+
+The deployment floor is iOS 15.1. Below iOS 26, GlassView and GlassPressable use UIKit system blur (`regular`: system material; `clear`: ultra-thin material). `material="none"` is transparent. Reduce Transparency uses an opaque semantic background; `forceFallback` explicitly selects the opaque React surface. `fallbackStyle` still applies below iOS 26 and can cover the blur if it supplies an opaque background. A translucent tint overlays the older-iOS blur. GlassContainer remains ordinary layout with no merging below iOS 26. Other controls retain standard UIKit or React implementations. iOS 18.6 is the installed fallback test runtime; iOS 15–17 and physical older devices remain unverified.
+
+Keep blurred areas bounded, avoid nested material surfaces, and use the opaque opt-out for dense lists where appropriate. The native host retains its effect across unchanged props and layout. These safeguards are not measured frame-rate guarantees; profile Release builds on representative physical devices before making performance claims.

package/android/build.gradle

@@ -0,0 +1,21 @@
+apply plugin: 'com.android.library'
+// AGP 9 provides Kotlin itself; RN 0.86's default AGP 8 needs the plugin.
+if (com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger() < 9) {
+    apply plugin: 'org.jetbrains.kotlin.android'
+}
+apply plugin: 'com.facebook.react'
+
+android {
+    namespace 'com.adaptiveglass'
+    compileSdk rootProject.ext.compileSdkVersion
+    defaultConfig { minSdk rootProject.ext.minSdkVersion }
+}
+react {
+    jsRootDir = file('../src')
+    libraryName = 'AdaptiveLiquidGlassSpec'
+    codegenJavaPackageName = 'com.adaptiveglass'
+}
+dependencies {
+    implementation 'com.facebook.react:react-android'
+    implementation 'com.google.android.material:material:1.13.0'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/adaptiveglass/ALGMenuManager.kt

@@ -0,0 +1,31 @@
+package com.adaptiveglass
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.viewmanagers.ALGMenuManagerDelegate
+import com.facebook.react.viewmanagers.ALGMenuManagerInterface
+
+@ReactModule(name = "ALGMenu")
+class ALGMenuManager : SimpleViewManager<ALGMenuView>(), ALGMenuManagerInterface<ALGMenuView> {
+  private val delegate = ALGMenuManagerDelegate(this)
+  override fun getDelegate() = delegate
+  override fun getName() = "ALGMenu"
+  override fun createViewInstance(context: ThemedReactContext) = ALGMenuView(context)
+  override fun setTitle(view: ALGMenuView, value: String?) { view.title = value ?: "" }
+  override fun setItemsJSON(view: ALGMenuView, value: String?) { view.itemsJSON = value ?: "[]" }
+  override fun setToolbar(view: ALGMenuView, value: Boolean) { view.toolbar = value }
+  override fun setMaxVisibleItems(view: ALGMenuView, value: Int) { view.maxVisibleItems = value }
+  override fun setMergingEnabled(view: ALGMenuView, value: Boolean) { /* Native Android toolbar appearance. */ }
+  override fun setSystemImage(view: ALGMenuView, value: String?) { /* SF Symbols are iOS-only. */ }
+  override fun setDisabled(view: ALGMenuView, value: Boolean) { view.disabled = value }
+  override fun setForceFallback(view: ALGMenuView, value: Boolean) { /* Always uses the standard Android control. */ }
+  override fun setGlassTint(view: ALGMenuView, value: Int?) { view.glassTint = value }
+  override fun setControlLabel(view: ALGMenuView, value: String?) { view.controlLabel = value }
+  override fun setControlHint(view: ALGMenuView, value: String?) { view.controlHint = value }
+  override fun setControlTestID(view: ALGMenuView, value: String?) { view.controlTestID = value }
+  override fun onAfterUpdateTransaction(view: ALGMenuView) { super.onAfterUpdateTransaction(view); view.applyConfiguration() }
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> = mutableMapOf(
+    "topMenuAction" to mapOf("registrationName" to "onMenuAction")
+  )
+}

package/android/src/main/java/com/adaptiveglass/ALGMenuView.kt

@@ -0,0 +1,184 @@
+package com.adaptiveglass
+
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.style.ForegroundColorSpan
+import android.util.TypedValue
+import android.view.Menu
+import android.view.MenuItem
+import android.view.View
+import android.widget.Button
+import android.widget.FrameLayout
+import android.widget.PopupMenu
+import android.widget.Toolbar
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ReactAccessibilityDelegate
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import org.json.JSONArray
+
+private data class MenuEntry(val id: String, val title: String, val kind: String,
+  val disabled: Boolean, val destructive: Boolean, val checked: Boolean?,
+  val items: List<MenuEntry>, val placement: String) {
+  val isGroup get() = kind == "section" || kind == "submenu"
+}
+private class MenuActionEvent(surfaceId: Int, tag: Int, private val itemId: String) : Event<MenuActionEvent>(surfaceId, tag) {
+  override fun getEventName() = "topMenuAction"
+  override fun canCoalesce() = false
+  override fun getEventData(): WritableMap = Arguments.createMap().apply { putString("id", itemId) }
+}
+
+class ALGMenuView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext) {
+  private val button = Button(reactContext)
+  private val bar = Toolbar(reactContext)
+  private val defaultTextColors = button.textColors
+  var title = ""
+  var itemsJSON = "[]"
+  var disabled = false
+  var toolbar = false
+  var maxVisibleItems = 3
+  var glassTint: Int? = null
+  var controlLabel: String? = null
+  var controlHint: String? = null
+  var controlTestID: String? = null
+  private var appliedConfiguration: List<Any?>? = null
+  private var appliedJSON: String? = null
+  private var entries = emptyList<MenuEntry>()
+  private var revision = 0
+  private var popup: PopupMenu? = null
+  private var nextItemId = 1
+  private var lastBarWidth = -1
+
+  init {
+    button.isAllCaps = false
+    button.maxLines = 1
+    button.ellipsize = android.text.TextUtils.TruncateAt.END
+    addView(button, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    addView(bar, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    bar.visibility = View.GONE
+    button.setOnClickListener { showMenu() }
+  }
+  private fun decode(array: JSONArray): List<MenuEntry> = (0 until array.length()).map { index ->
+    val item = array.getJSONObject(index)
+    MenuEntry(item.getString("id"), item.getString("title"), item.optString("kind", "action"),
+      item.optBoolean("disabled"), item.optBoolean("destructive"),
+      if (item.has("checked")) item.getBoolean("checked") else null,
+      item.optJSONArray("items")?.let { decode(it) } ?: emptyList(), item.optString("placement", "automatic"))
+  }
+  fun applyConfiguration() {
+    val configuration = listOf(itemsJSON, disabled, toolbar, maxVisibleItems, glassTint, controlTestID)
+    val changed = configuration != appliedConfiguration
+    if (appliedJSON != itemsJSON) {
+      appliedJSON = itemsJSON
+      entries = try { decode(JSONArray(itemsJSON)) } catch (_: Exception) { emptyList() }
+    }
+    if (changed) { revision += 1; dismissMenus(); appliedConfiguration = configuration }
+    button.visibility = if (toolbar) View.GONE else View.VISIBLE
+    bar.visibility = if (toolbar) View.VISIBLE else View.GONE
+    button.text = title
+    button.isEnabled = !disabled && entries.isNotEmpty()
+    button.contentDescription = controlLabel?.takeIf { it.isNotEmpty() } ?: title
+    if (android.os.Build.VERSION.SDK_INT >= 26) button.tooltipText = controlHint
+    button.setTag(com.facebook.react.R.id.react_test_id, controlTestID)
+    ReactAccessibilityDelegate.setDelegate(button, button.isFocusable, button.importantForAccessibility)
+    bar.setTag(com.facebook.react.R.id.react_test_id, controlTestID)
+    ReactAccessibilityDelegate.setDelegate(bar, bar.isFocusable, bar.importantForAccessibility)
+    button.setTextColor(glassTint?.let { ColorStateList.valueOf(it) } ?: defaultTextColors)
+    if (toolbar && changed && width > 0) {
+      updateToolbar()
+    }
+  }
+  private fun updateToolbar() {
+    bar.dismissPopupMenus()
+    bar.menu.clear()
+    fill(bar.menu, entries, revision, toolbarRoot = true)
+    // Fabric owns this host's frame, so explicitly remeasure the native children.
+    requestLayout()
+    // A request made inside onLayout can be cleared as that layout finishes.
+    // Force the posted measurement so newly added native actions receive bounds.
+    post { if (isAttachedToWindow) { forceLayout(); bar.forceLayout(); measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)); layout(left, top, right, bottom) } }
+  }
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    // onSizeChanged may run before the frame's width getter reflects Fabric's
+    // final bounds. Budget actions only after layout has established those bounds.
+    if (toolbar && lastBarWidth != width) {
+      lastBarWidth = width
+      updateToolbar()
+    }
+  }
+  private fun enabledAction(id: String, nodes: List<MenuEntry>): MenuEntry? {
+    for (entry in nodes) {
+      if (entry.disabled) continue
+      if (entry.isGroup) { enabledAction(id, entry.items)?.let { return it } }
+      else if (entry.id == id) return entry
+    }
+    return null
+  }
+  private fun label(entry: MenuEntry): CharSequence {
+    val color = if (entry.destructive) TypedValue().let { value ->
+      if (android.os.Build.VERSION.SDK_INT >= 26 && context.theme.resolveAttribute(android.R.attr.colorError, value, true)) {
+        if (value.resourceId != 0) context.getColor(value.resourceId) else value.data
+      } else Color.rgb(180, 32, 32)
+    } else glassTint
+    return if (color != null && !entry.disabled) SpannableString(entry.title).apply {
+      setSpan(ForegroundColorSpan(color), 0, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    } else entry.title
+  }
+  private fun fill(menu: Menu, nodes: List<MenuEntry>, version: Int, toolbarRoot: Boolean = false, group: Int = 0) {
+    var visibleCount = 0
+    val density = resources.displayMetrics.density
+    // Toolbar's presenter budgets against the screen, not necessarily a narrow
+    // embedded Fabric view. Bound its action candidates to this host's width.
+    var available = width - 32 * density - (if (nodes.size > 1) 56 * density else 0f)
+    for (entry in nodes) {
+      val nativeId = nextItemId++
+      if (entry.kind == "section") {
+        if (entry.title.isNotEmpty()) menu.add(nativeId, nativeId, Menu.NONE, entry.title).isEnabled = false
+        fill(menu, entry.items, version, group = nativeId)
+        continue
+      }
+      val item: MenuItem = if (entry.kind == "submenu") {
+        val submenu = menu.addSubMenu(group, nativeId, Menu.NONE, label(entry))
+        fill(submenu, entry.items, version)
+        submenu.item
+      } else menu.add(group, nativeId, Menu.NONE, label(entry))
+      item.isEnabled = !disabled && !entry.disabled
+      item.isCheckable = !entry.isGroup && entry.checked != null
+      item.isChecked = entry.checked == true
+      if (android.os.Build.VERSION.SDK_INT >= 26) item.contentDescription = entry.title
+      if (toolbarRoot) {
+        val required = maxOf(56 * density, button.paint.measureText(entry.title.uppercase()) + 32 * density)
+        val canShow = entry.placement != "overflow" && visibleCount < maxVisibleItems && required <= available
+        // This host has already reserved space for overflow. IF_ROOM can use a
+        // stale presenter budget while Fabric lays out an embedded toolbar.
+        item.setShowAsAction(if (canShow) MenuItem.SHOW_AS_ACTION_ALWAYS or MenuItem.SHOW_AS_ACTION_WITH_TEXT else MenuItem.SHOW_AS_ACTION_NEVER)
+        if (canShow) { visibleCount += 1; available -= required }
+      }
+      if (!entry.isGroup) item.setOnMenuItemClickListener {
+        if (!disabled && version == revision && isAttachedToWindow && enabledAction(entry.id, entries) != null) {
+          UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)?.dispatchEvent(
+            MenuActionEvent(UIManagerHelper.getSurfaceId(reactContext), id, entry.id))
+        }
+        true
+      }
+    }
+    if (android.os.Build.VERSION.SDK_INT >= 28) menu.setGroupDividerEnabled(true)
+  }
+  private fun showMenu() {
+    if (disabled || entries.isEmpty() || !isAttachedToWindow) return
+    dismissMenus()
+    val menu = PopupMenu(reactContext, button)
+    fill(menu.menu, entries, revision)
+    menu.setOnDismissListener { if (popup === menu) popup = null }
+    popup = menu
+    menu.show()
+  }
+  private fun dismissMenus() { popup?.dismiss(); bar.dismissPopupMenus() }
+  override fun onDetachedFromWindow() { dismissMenus(); super.onDetachedFromWindow() }
+}

package/android/src/main/java/com/adaptiveglass/ALGSliderManager.kt

@@ -0,0 +1,32 @@
+package com.adaptiveglass
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.viewmanagers.ALGSliderManagerDelegate
+import com.facebook.react.viewmanagers.ALGSliderManagerInterface
+
+@ReactModule(name = "ALGSlider")
+class ALGSliderManager : SimpleViewManager<ALGSliderView>(), ALGSliderManagerInterface<ALGSliderView> {
+  private val delegate = ALGSliderManagerDelegate(this)
+  override fun getDelegate() = delegate
+  override fun getName() = "ALGSlider"
+  override fun createViewInstance(context: ThemedReactContext) = ALGSliderView(context)
+  override fun setValue(view: ALGSliderView, value: Double) { view.controlledValue = value }
+  override fun setMinimumValue(view: ALGSliderView, value: Double) { view.minimum = value }
+  override fun setMaximumValue(view: ALGSliderView, value: Double) { view.maximum = value }
+  override fun setStep(view: ALGSliderView, value: Double) { view.step = value }
+  override fun setDisabled(view: ALGSliderView, value: Boolean) { view.disabled = value }
+  override fun setGlassTint(view: ALGSliderView, value: Int?) { view.glassTint = value }
+  override fun setRevision(view: ALGSliderView, value: Int) { /* Reconcile in the transaction below. */ }
+  override fun setControlLabel(view: ALGSliderView, value: String?) { view.controlLabel = value }
+  override fun setControlHint(view: ALGSliderView, value: String?) { view.controlHint = value }
+  override fun setControlTestID(view: ALGSliderView, value: String?) { view.controlTestID = value }
+  override fun onAfterUpdateTransaction(view: ALGSliderView) { super.onAfterUpdateTransaction(view); view.applyConfiguration() }
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> = mutableMapOf(
+    "topSliderChange" to mapOf("registrationName" to "onSliderChange"),
+    "topSliderStart" to mapOf("registrationName" to "onSliderStart"),
+    "topSliderComplete" to mapOf("registrationName" to "onSliderComplete"),
+    "topSliderCancel" to mapOf("registrationName" to "onSliderCancel")
+  )
+}

package/android/src/main/java/com/adaptiveglass/ALGSliderView.kt

@@ -0,0 +1,132 @@
+package com.adaptiveglass
+
+import android.content.res.ColorStateList
+import android.view.MotionEvent
+import android.view.View
+import android.view.accessibility.AccessibilityNodeInfo
+import android.widget.FrameLayout
+import android.widget.SeekBar
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import kotlin.math.roundToInt
+
+private class SliderEvent(surfaceId: Int, tag: Int, private val kind: String, private val value: Double) : Event<SliderEvent>(surfaceId, tag) {
+  override fun getEventName() = kind
+  override fun canCoalesce() = false
+  override fun getEventData(): WritableMap = Arguments.createMap().apply { putDouble("value", value) }
+}
+
+class ALGSliderView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext) {
+  private val seekBar = SeekBar(reactContext)
+  var controlledValue = 0.0
+  var minimum = 0.0
+  var maximum = 1.0
+  var step = 0.0
+  var disabled = false
+  var glassTint: Int? = null
+  var controlLabel: String? = null
+  var controlHint: String? = null
+  var controlTestID: String? = null
+  private var dragging = false
+  private var appliedMinimum = 0.0
+  private var appliedMaximum = 1.0
+  private var appliedStep = 0.0
+  private var lastEmitted: Double? = null
+  private val defaultTint = seekBar.progressTintList
+  private val defaultThumbTint = seekBar.thumbTintList
+
+  init {
+    seekBar.max = 1000000
+    addView(seekBar, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
+      override fun onStartTrackingTouch(bar: SeekBar) {
+        if (disabled) return
+        dragging = true
+        lastEmitted = current()
+        parent?.requestDisallowInterceptTouchEvent(true)
+        emit("topSliderStart", current())
+      }
+      override fun onProgressChanged(bar: SeekBar, progress: Int, fromUser: Boolean) {
+        if (!fromUser || disabled) return
+        val value = current()
+        if (!dragging) emit("topSliderStart", normalized(controlledValue))
+        if (step > 0) position(value)
+        if (value != lastEmitted) { lastEmitted = value; emit("topSliderChange", value) }
+        if (!dragging) emit("topSliderComplete", value)
+      }
+      override fun onStopTrackingTouch(bar: SeekBar) {
+        if (!dragging) return
+        val value = current()
+        dragging = false
+        parent?.requestDisallowInterceptTouchEvent(false)
+        emit("topSliderComplete", value)
+      }
+    })
+    seekBar.setOnTouchListener { _, event ->
+      if (event.actionMasked == MotionEvent.ACTION_CANCEL) cancel()
+      false
+    }
+    seekBar.accessibilityDelegate = object : View.AccessibilityDelegate() {
+      override fun performAccessibilityAction(host: View, action: Int, arguments: android.os.Bundle?): Boolean {
+        if (disabled) return false
+        val increment = if (step > 0) step else (maximum - minimum) / 20
+        val next = when (action) {
+          AccessibilityNodeInfo.ACTION_SCROLL_FORWARD -> normalized(controlledValue + increment)
+          AccessibilityNodeInfo.ACTION_SCROLL_BACKWARD -> normalized(controlledValue - increment)
+          AccessibilityNodeInfo.AccessibilityAction.ACTION_SET_PROGRESS.id -> {
+            if (arguments == null || !arguments.containsKey(AccessibilityNodeInfo.ACTION_ARGUMENT_PROGRESS_VALUE)) return false
+            normalized(arguments.getFloat(AccessibilityNodeInfo.ACTION_ARGUMENT_PROGRESS_VALUE).toDouble())
+          }
+          else -> return super.performAccessibilityAction(host, action, arguments)
+        }
+        emit("topSliderStart", normalized(controlledValue))
+        position(next)
+        if (next != normalized(controlledValue)) emit("topSliderChange", next)
+        emit("topSliderComplete", next)
+        return true
+      }
+      override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfo) {
+        super.onInitializeAccessibilityNodeInfo(host, info)
+        info.rangeInfo = AccessibilityNodeInfo.RangeInfo.obtain(AccessibilityNodeInfo.RangeInfo.RANGE_TYPE_FLOAT,
+          minimum.toFloat(), maximum.toFloat(), current().toFloat())
+        if (android.os.Build.VERSION.SDK_INT >= 30) info.stateDescription = current().toString()
+        else info.text = current().toString()
+      }
+    }
+  }
+  private fun normalized(value: Double): Double {
+    val clamped = value.coerceIn(minimum, maximum)
+    if (clamped == maximum || step == 0.0) return clamped
+    // Match JS/Swift half-up rounding (the offset is always nonnegative).
+    return (minimum + kotlin.math.floor((clamped - minimum) / step + 0.5) * step).coerceIn(minimum, maximum)
+  }
+  private fun current() = normalized(minimum + seekBar.progress / 1000000.0 * (maximum - minimum))
+  private fun position(value: Double) { seekBar.progress = (((value - minimum) / (maximum - minimum)) * 1000000).roundToInt().coerceIn(0, 1000000) }
+  private fun emit(kind: String, value: Double) {
+    UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)?.dispatchEvent(
+      SliderEvent(UIManagerHelper.getSurfaceId(reactContext), id, kind, value))
+  }
+  private fun cancel() {
+    if (!dragging) return
+    dragging = false
+    parent?.requestDisallowInterceptTouchEvent(false)
+    position(normalized(controlledValue))
+    emit("topSliderCancel", normalized(controlledValue))
+  }
+  fun applyConfiguration() {
+    if (!listOf(controlledValue, minimum, maximum, step, maximum - minimum).all { it.isFinite() } || maximum <= minimum || step < 0 || step > maximum - minimum) return
+    if (dragging && (disabled || minimum != appliedMinimum || maximum != appliedMaximum || step != appliedStep)) cancel()
+    appliedMinimum = minimum; appliedMaximum = maximum; appliedStep = step
+    seekBar.isEnabled = !disabled
+    seekBar.contentDescription = controlLabel
+    seekBar.tooltipText = controlHint
+    seekBar.setTag(com.facebook.react.R.id.react_test_id, controlTestID)
+    seekBar.progressTintList = glassTint?.let { ColorStateList.valueOf(it) } ?: defaultTint
+    seekBar.thumbTintList = glassTint?.let { ColorStateList.valueOf(it) } ?: defaultThumbTint
+    if (!dragging) position(normalized(controlledValue))
+  }
+  override fun onDetachedFromWindow() { cancel(); super.onDetachedFromWindow() }
+}

package/android/src/main/java/com/adaptiveglass/ALGTabsManager.kt

@@ -0,0 +1,24 @@
+package com.adaptiveglass
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.viewmanagers.ALGTabsManagerDelegate
+import com.facebook.react.viewmanagers.ALGTabsManagerInterface
+
+@ReactModule(name = "ALGTabs")
+class ALGTabsManager : SimpleViewManager<ALGTabsView>(), ALGTabsManagerInterface<ALGTabsView> {
+  private val delegate = ALGTabsManagerDelegate(this)
+  override fun getDelegate() = delegate
+  override fun getName() = "ALGTabs"
+  override fun createViewInstance(context: ThemedReactContext) = ALGTabsView(context)
+  override fun setItemsJSON(view: ALGTabsView, value: String?) { view.itemsJSON = value ?: "[]" }
+  override fun setSelectedValue(view: ALGTabsView, value: String?) { view.selectedValue = value ?: "" }
+  override fun setSelectionRevision(view: ALGTabsView, value: Int) { /* Reconcile in the transaction, including rejected taps. */ }
+  override fun setDisabled(view: ALGTabsView, value: Boolean) { view.disabled = value }
+  override fun setGlassTint(view: ALGTabsView, value: Int?) { view.glassTint = value }
+  override fun setControlTestID(view: ALGTabsView, value: String?) { view.controlTestID = value }
+  override fun onAfterUpdateTransaction(view: ALGTabsView) { super.onAfterUpdateTransaction(view); view.applyConfiguration() }
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> = mutableMapOf(
+    "topSelectionChange" to mapOf("registrationName" to "onSelectionChange"))
+}