@octane-xplat/sheet 0.0.1 → 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+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

@@ -1,3 +1,147 @@
-# @octane-xplat/sheet
+# `@octane-xplat/sheet`
 
-Version 0.0.1 is a reservation stub so the automated release can publish this package name. It has no supported API. Use a later release for the implementation.
+An install boundary for platform-specific modal bottom sheets: a SwiftUI
+`.sheet` presentation on iOS, a Material 3 `ModalBottomSheet` on Android,
+a native modal `<dialog>` on web, and a real `NSWindow` sheet
+(`beginSheet`) on macOS.
+Install the package in the app that renders a control. Import
+`SwiftUIBottomSheet` from `@octane-xplat/sheet/ios`,
+`MaterialBottomSheet` from `@octane-xplat/sheet/android`, `BottomSheet`
+from `@octane-xplat/sheet/web`, or `AppKitSheet` from
+`@octane-xplat/sheet/macos` in the matching platform-suffixed file.
+There is no shared sheet API at the package root.
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// SwiftUIBottomSheetExample.ios.tsx
+import { SwiftUIBottomSheet } from '@octane-xplat/sheet/ios'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<SwiftUIBottomSheet
+				open={open}
+				detents={['medium', 'large']}
+				showDragIndicator
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// MaterialBottomSheetExample.android.tsx
+import { MaterialBottomSheet } from '@octane-xplat/sheet/android'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<MaterialBottomSheet
+				open={open}
+				skipPartiallyExpanded
+				showDragHandle
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+// BottomSheetExample.web.tsx
+import { BottomSheet } from '@octane-xplat/sheet/web'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<BottomSheet
+				open={open}
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+// AppKitSheetExample.macos.tsx
+import { AppKitSheet } from '@octane-xplat/sheet/macos'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<AppKitSheet
+				open={open}
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+Web apps must also import the sheet stylesheet from their app entry:
+
+```ts
+import '@octane-xplat/sheet/web/styles.css'
+```
+
+Sheet content is a render fn whose octane output mounts into a detached
+root — the same embedding mechanism as `@octane-xplat/context-menu`'s
+trigger. On iOS the registered view resolves through
+`NativeScriptViewFactory`; on Android through the leaf's
+`XplatViewRegistry` + `AndroidView` inside the sheet's dialog window.
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// HostedContent.android.tsx
+import { MaterialBottomSheet } from '@octane-xplat/sheet/android'
+import { Text } from '@octane-xplat/ui'
+
+export function HostedContent({ open }: { open: boolean }) {
+	return <MaterialBottomSheet open={open} content={() => <Text>Trip details</Text>} />
+}
+```
+
+- iOS: `open` (controlled `isPresented`), `onDismissed`,
+  `onPresentedChange`, `fitToContents` (ported size-reader →
+  `.presentationDetents([.height])`), `detents`
+  (`medium`/`large`/`fraction`/`height`), `showDragIndicator`,
+  `interactiveDismissDisabled`.
+- Android: `open` + `onDismissed`, `skipPartiallyExpanded` (the M3 detent
+  model: partial vs fully expanded), `showDragHandle`,
+  `sheetGesturesEnabled`, `shouldDismissOnBackPress`,
+  `shouldDismissOnClickOutside`, and `containerColor`/`contentColor`/
+  `scrimColor` hex strings. Activity-owned key events are forwarded while
+  the sheet's dialog is open (ported from Expo).
+- Web: native modal `<dialog>` with a named panel, focus entry/Tab
+  containment, trigger restoration (`finalFocusRef`), Escape and scrim
+  dismissal controls, and drag-handle dismissal. `label` supplies the dialog
+  name; pass `finalFocusRef` when pointer-opening so focus returns to the
+  invoking control across browsers.
+
+The native implementations are adapted from `@expo/ui` (MIT,
+`packages/expo-ui` sdk-57): `ios/BottomSheetView.swift` and
+`android/.../ui/ModalBottomSheetView.kt`. Attribution headers sit on the
+ported files.

package/dist/native/MaterialBottomSheet.android.tsrx.js

@@ -0,0 +1,87 @@
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useEffect, useRef, useState } from "@nativescript-community/octane";
+import { Application, GridLayout } from "@nativescript/core";
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from "@nativescript/jetpack-compose";
+//#region src/MaterialBottomSheet.android.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatandroidsheet",
+	"props": { "composeId": "xplat-material-sheet" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["data", 3],
+		["onComposeEvent", 4]
+	]
+});
+registerElement("xplatandroidsheet", JetpackCompose);
+registerJetpackCompose("xplat-material-sheet", (owner) => new ComposeDataDriver(new com.octanexplat.sheet.XplatSheetProvider(), owner));
+var seq = 0;
+var ContentRoot = defineUniversalComponent("nativescript", function ContentRoot(props) {
+	return universalValue(__octaneUniversalPlan0, [props.render()]);
+}, { "module": "@nativescript-community/octane" });
+var MaterialBottomSheet = defineUniversalComponent("nativescript", function MaterialBottomSheet(props) {
+	const contentId = useRef("", _h$0);
+	if (!contentId.current) contentId.current = `xplatsheet${++seq}`;
+	const mounted = useRef(null, _h$1);
+	const [ready, setReady] = useState(false, _h$2);
+	useEffect(() => {
+		const host = new GridLayout();
+		const context = Application.android.foregroundActivity ?? Application.android.startActivity;
+		const nativeHost = host;
+		nativeHost._setupAsRootView(context);
+		nativeHost.callLoaded();
+		const root = createNativeScriptRoot(host);
+		if (props.content) root.render(ContentRoot, { render: props.content });
+		com.octanexplat.sheet.XplatViewRegistry.register(contentId.current, host.android);
+		mounted.current = {
+			host,
+			root
+		};
+		setReady(true);
+		return () => {
+			com.octanexplat.sheet.XplatViewRegistry.unregister(contentId.current);
+			root.unmount?.();
+			mounted.current = null;
+			setReady(false);
+		};
+	}, [], _h$3);
+	useEffect(() => {
+		if (props.content) mounted.current?.root?.render(ContentRoot, { render: props.content });
+	}, [props.content], _h$4);
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		props.className,
+		props.style,
+		{
+			open: props.open ?? false ? 1 : 0,
+			contentId: ready && props.content ? contentId.current : "",
+			skipPartiallyExpanded: props.skipPartiallyExpanded ?? false ? 1 : 0,
+			showDragHandle: props.showDragHandle ?? true ? 1 : 0,
+			sheetGesturesEnabled: props.sheetGesturesEnabled ?? true ? 1 : 0,
+			shouldDismissOnBackPress: props.shouldDismissOnBackPress ?? true ? 1 : 0,
+			shouldDismissOnClickOutside: props.shouldDismissOnClickOutside ?? true ? 1 : 0,
+			containerColor: props.containerColor,
+			contentColor: props.contentColor,
+			scrimColor: props.scrimColor
+		},
+		(event) => {
+			if (event.data?.dismissed) props.onDismissed?.();
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { MaterialBottomSheet };

package/dist/native/SwiftUIBottomSheet.ios.tsrx.js

@@ -0,0 +1,97 @@
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { SwiftUI, SwiftUIManager, UIDataDriver, registerSwiftUI } from "@nativescript/swift-ui";
+import { GridLayout } from "@nativescript/core";
+//#region src/SwiftUIBottomSheet.ios.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatiossheet",
+	"props": { "swiftId": "xplat-swiftui-sheet" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["data", 3],
+		["onSwiftUIEvent", 4]
+	]
+});
+registerElement("xplatiossheet", SwiftUI);
+registerSwiftUI("xplat-swiftui-sheet", (owner) => new UIDataDriver(new XplatSheetProvider(), owner));
+var hosts = /* @__PURE__ */ new Map();
+var roots = /* @__PURE__ */ new Map();
+function mountSubtree(id, render) {
+	let host = hosts.get(id);
+	if (!host) {
+		host = new GridLayout();
+		hosts.set(id, host);
+		SwiftUIManager.registerNativeScriptViews({ [id]: true }, {
+			create: (fullId) => hosts.get(fullId.split("-")[0]),
+			destroy: (fullId) => {
+				hosts.delete(fullId.split("-")[0]);
+			}
+		});
+	}
+	let root = roots.get(id);
+	if (!root) {
+		root = createNativeScriptRoot(host);
+		roots.set(id, root);
+	}
+	root.render(ContentRoot, { render });
+}
+function unmountSubtree(id) {
+	roots.get(id)?.unmount?.();
+	roots.delete(id);
+	hosts.delete(id);
+}
+var ContentRoot = defineUniversalComponent("nativescript", function ContentRoot(props) {
+	return universalValue(__octaneUniversalPlan0, [props.render()]);
+}, { "module": "@nativescript-community/octane" });
+var seq = 0;
+var SwiftUIBottomSheet = defineUniversalComponent("nativescript", function SwiftUIBottomSheet(props) {
+	const contentId = useRef("", _h$0);
+	if (!contentId.current) contentId.current = `xplatsheet${++seq}`;
+	useEffect(() => {
+		if (props.content) mountSubtree(contentId.current, props.content);
+		return () => {
+			unmountSubtree(contentId.current);
+		};
+	}, [], _h$1);
+	useEffect(() => {
+		if (props.content) mountSubtree(contentId.current, props.content);
+	}, [props.content], _h$2);
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		props.className,
+		props.style,
+		{
+			isPresented: props.open ?? false,
+			contentId: props.content ? contentId.current : "",
+			fitToContents: props.fitToContents ?? false,
+			detents: props.detents ?? ["medium"],
+			customHeight: props.customHeight,
+			customFraction: props.customFraction,
+			showDragIndicator: props.showDragIndicator ?? false,
+			interactiveDismissDisabled: props.interactiveDismissDisabled ?? false
+		},
+		(event) => {
+			if (event.data?.dismissed) {
+				props.onDismissed?.();
+				return;
+			}
+			const presented = event.data?.isPresented;
+			if (typeof presented === "boolean") props.onPresentedChange?.(presented);
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SwiftUIBottomSheet };

package/dist/native/android/index.js

@@ -0,0 +1,2 @@
+import { MaterialBottomSheet } from "../MaterialBottomSheet.android.tsrx.js";
+export { MaterialBottomSheet };

package/dist/native/ios/index.js

@@ -0,0 +1,2 @@
+import { SwiftUIBottomSheet } from "../SwiftUIBottomSheet.ios.tsrx.js";
+export { SwiftUIBottomSheet };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "ea2c2633-b2c7-487d-a7b8-9061f5e34343",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/BottomSheet.web.tsrx.js

@@ -0,0 +1,124 @@
+import { Fragment, createElement, createScopedElement, createScopedValue, hookSlots, positionalChildren, useEffect, useRef } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
+//#region src/BottomSheet.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+function tabStops(panel) {
+	return Array.from(panel.querySelectorAll("a[href],button,input:not([type=\"hidden\"]),textarea,select,[tabindex],[contenteditable=\"true\"]")).filter((element) => {
+		if (element.tabIndex < 0 || element.matches(":disabled") || element.closest("[inert],[hidden],[aria-hidden=\"true\"]")) return false;
+		for (let parent = element; parent; parent = parent.parentElement) {
+			const style = getComputedStyle(parent);
+			if (style.display === "none" || style.visibility === "hidden") return false;
+		}
+		return true;
+	});
+}
+var BottomSheet = function BottomSheet(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	const dialog = useRef(null, _hs$ + 0);
+	const panel = useRef(null, _hs$ + 1);
+	const drag = useRef(null, _hs$ + 2);
+	useEffect(() => {
+		const current = dialog.current;
+		if (!props.open || !current || current.open) return;
+		const trigger = props.finalFocusRef?.current ?? current.ownerDocument.activeElement;
+		const previousTabIndex = current.getAttribute("tabindex");
+		current.showModal();
+		const stops = panel.current ? tabStops(panel.current) : [];
+		const autofocus = current.querySelector("[autofocus]");
+		const initialFocus = (autofocus && !autofocus.matches(":disabled,[hidden],[inert]") ? autofocus : null) ?? stops[0] ?? current;
+		if (initialFocus === current && previousTabIndex === null) current.tabIndex = -1;
+		initialFocus.focus({ preventScroll: true });
+		return () => {
+			if (current.open) current.close();
+			if (previousTabIndex === null && initialFocus === current) current.removeAttribute("tabindex");
+			requestAnimationFrame(() => {
+				if (trigger?.isConnected && !trigger.closest("[inert]")) trigger.focus({ preventScroll: true });
+			});
+		};
+	}, [props.open], _hs$ + 3);
+	if (!props.open || typeof document === "undefined") return positionalChildren([]);
+	const resetDrag = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, () => {
+		drag.current = null;
+		panel.current?.style.removeProperty("--xplat-sheet-drag-offset");
+		panel.current?.style.removeProperty("transition");
+	});
+	const onPointerDown = (event) => {
+		if (props.sheetGesturesEnabled === false || !event.isPrimary || event.button !== 0) return;
+		drag.current = {
+			pointerId: event.pointerId,
+			startY: event.clientY,
+			offsetY: 0
+		};
+		panel.current?.style.setProperty("transition", "none");
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, (event) => {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		active.offsetY = Math.max(0, event.clientY - active.startY);
+		panel.current?.style.setProperty("--xplat-sheet-drag-offset", `${active.offsetY}px`);
+	});
+	const onPointerUp = (event) => {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		const shouldDismiss = active.offsetY >= Math.min(120, window.innerHeight * .18);
+		resetDrag();
+		if (shouldDismiss && props.sheetGesturesEnabled !== false) props.onDismissed?.();
+	};
+	const onCancel = (event) => {
+		event.preventDefault();
+		if (props.shouldDismissOnBackPress ?? true) props.onDismissed?.();
+	};
+	const onKeyDown = __hk[2] ?? hookMemoPublishInvariant(__hk, 2, (event) => {
+		if (event.key !== "Tab") return;
+		const current = dialog.current;
+		const active = current?.ownerDocument.activeElement;
+		if (!current?.open || active !== current && !panel.current?.contains(active)) return;
+		const stops = panel.current ? tabStops(panel.current) : [];
+		const index = stops.indexOf(active);
+		event.preventDefault();
+		if (!stops.length) {
+			dialog.current?.focus({ preventScroll: true });
+			return;
+		}
+		stops[event.shiftKey ? index <= 0 ? stops.length - 1 : index - 1 : index < 0 || index === stops.length - 1 ? 0 : index + 1].focus({ preventScroll: true });
+	});
+	useEffect(() => {
+		const current = dialog.current;
+		if (!props.open || !current) return;
+		current.ownerDocument.addEventListener("keydown", onKeyDown, true);
+		return () => current.ownerDocument.removeEventListener("keydown", onKeyDown, true);
+	}, [props.open], _hs$ + 4);
+	return createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createScopedElement("dialog", {
+		ref: dialog,
+		className: "xplat-web-sheet",
+		"aria-label": props.label ?? "Bottom sheet",
+		"aria-modal": "true",
+		style: {
+			"--xplat-sheet-scrim": props.scrimColor ?? "rgb(0 0 0 / 0.4)",
+			"--xplat-sheet-container": props.containerColor ?? "var(--sheet-bg, Canvas)",
+			"--xplat-sheet-content": props.contentColor ?? "var(--sheet-fg, CanvasText)",
+			"--xplat-sheet-max-height": props.skipPartiallyExpanded ? "90vh" : "60vh"
+		},
+		onCancel,
+		onClick: (event) => {
+			if (event.target === event.currentTarget && (props.shouldDismissOnClickOutside ?? true)) props.onDismissed?.();
+		}
+	}, () => createScopedValue(() => createScopedElement("div", {
+		ref: panel,
+		id: props.id,
+		className: "xplat-web-sheet-panel " + (props.className ?? ""),
+		style: props.style
+	}, () => positionalChildren([(props.showDragHandle ?? true) && createScopedValue(() => createElement("div", {
+		className: "xplat-web-sheet-handle",
+		"aria-hidden": "true",
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: resetDrag
+	}, createElement("div", { className: "xplat-web-sheet-handle-mark" }))), props.content?.()])))))]));
+};
+//#endregion
+export { BottomSheet };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "6220e54f-fce6-443b-8aa6-2f815351b5b7",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/sheet.css

@@ -0,0 +1,58 @@
+/* xplat-web-only:start */
+.xplat-web-sheet {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	overflow: visible;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+.xplat-web-sheet::backdrop {
+	background: var(--xplat-sheet-scrim, rgb(0 0 0 / 0.4));
+}
+
+.xplat-web-sheet-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-height: var(--xplat-sheet-max-height, 60vh);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	background: var(--xplat-sheet-container, var(--sheet-bg, Canvas));
+	color: var(--xplat-sheet-content, var(--sheet-fg, CanvasText));
+	border-radius: 16px 16px 0 0;
+	box-shadow: 0 -4px 24px rgb(0 0 0 / 0.2);
+	transform: translateY(var(--xplat-sheet-drag-offset, 0px));
+	transition: transform 180ms ease-out;
+}
+
+.xplat-web-sheet-handle {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+	cursor: grab;
+	touch-action: none;
+}
+
+.xplat-web-sheet-handle-mark {
+	width: 36px;
+	height: 4px;
+	border-radius: 2px;
+	background: color-mix(in srgb, CanvasText 30%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.xplat-web-sheet-panel {
+		transition: none;
+	}
+}
+/* xplat-web-only:end */
+/*$vite$:1*/

package/dist/web/web/index.js

@@ -0,0 +1,3 @@
+/* empty css           */
+import { BottomSheet } from "../BottomSheet.web.tsrx.js";
+export { BottomSheet };

package/package.json

@@ -1,18 +1,75 @@
 {
   "name": "@octane-xplat/sheet",
-  "version": "0.0.1",
+  "version": "0.10.0",
   "description": "Platform-specific modal bottom sheet controls for Octane xplat",
   "repository": {
     "type": "git",
-    "url": "https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/sheet"
   },
-  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/sheet",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "files": [
-    "README.md",
-    "index.js",
-    "index.d.ts"
-  ]
-}
+    "dist",
+    "types",
+    "src",
+    "platforms"
+  ],
+  "type": "module",
+  "exports": {
+    "./ios": {
+      "types": "./types/ios/index.d.ts",
+      "native": "./dist/native/ios/index.js"
+    },
+    "./android": {
+      "types": "./types/android/index.d.ts",
+      "native": "./dist/native/android/index.js"
+    },
+    "./web": {
+      "types": "./types/web/index.d.ts",
+      "web": "./dist/web/web/index.js"
+    },
+    "./web/styles.css": "./dist/web/sheet.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript/jetpack-compose": "1.0.0-beta.0",
+    "@nativescript/swift-ui": "4.0.2"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.60",
+    "octane": "0.5.0",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.1.51 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check"
+  }
+}

package/platforms/android/include.gradle

@@ -0,0 +1,15 @@
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+
+android {
+	buildFeatures {
+		compose true
+	}
+	kotlinOptions {
+		jvmTarget = '17'
+	}
+}
+
+dependencies {
+	implementation platform('androidx.compose:compose-bom:2024.12.01')
+	implementation 'androidx.compose.material3:material3'
+}