@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/Sheet.web.tsrx.js

@@ -1,94 +0,0 @@
-import { cx } from "./cx.js";
-import { useThemeScheme } from "./theme/theme-scheme.js";
-import { isolateModalFocus } from "./modal-focus.web.js";
-import { normalizeDetents } from "./sheet-snap.js";
-import { attachSheetDetents } from "./sheet-detents.web.js";
-import { bag4, child, clone, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, useEffect, useRef, withSlot } from "octane";
-import { compilerMemoRegion, hookMemoCreate, hookMemoEqual, hookMemoPublish1, textHoleUpdate } from "octane/internal/client";
-//#region src/Sheet.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _hs$ = /* @__PURE__ */ hookSlots(6);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-function __then$0(__props, __s, __extra) {
-	const __block = __s.block;
-	const dark = __extra[0];
-	const detents = __extra[1];
-	const layer = __extra[2];
-	const maxDetent = __extra[3];
-	const panel = __extra[4];
-	const props = __extra[5];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1;
-		const _root = clone(_t$0);
-		_m0 = __block.parentNode;
-		_m1 = child(_root);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag4(__s, null, _m0, _m1, null, void 0);
-	}
-	{
-		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", {
-			ref: layer,
-			className: cx("vx-sheet-layer", dark && "dark")
-		}, () => positionalChildren([(props.shadeCover ?? true) && createScopedValue(() => createElement("div", {
-			className: "vx-sheet-backdrop",
-			onClick: props.onDismiss
-		})), createScopedValue(() => createScopedElement("div", {
-			ref: (el) => {
-				panel.current = el;
-			},
-			className: cx("vx-sheet", detents.length && "vx-sheet-detents", props.className),
-			role: props.shadeCover === false ? void 0 : "dialog",
-			"aria-modal": props.shadeCover === false ? void 0 : true,
-			style: {
-				...props.style,
-				...detents.length ? {
-					height: `${maxDetent * 100}%`,
-					transform: "translateY(100%)"
-				} : {}
-			},
-			...props.web
-		}, () => props.children))]))), document.body);
-		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-		_b.d = _v;
-	}
-}
-var Sheet = function Sheet(props, __s, __extra) {
-	const __block = __s.block;
-	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
-	let __hk = __memoRegion.hooks;
-	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
-	let __hkd0;
-	const dark = withSlot(_h$0, useThemeScheme) === "dark";
-	const panel = useRef(null, _hs$ + 1);
-	const layer = useRef(null, _hs$ + 2);
-	const dismiss = useRef(props.onDismiss, _hs$ + 3);
-	dismiss.current = props.onDismiss;
-	useEffect(() => {
-		if (!props.open || props.shadeCover === false || !layer.current || !panel.current) return;
-		return isolateModalFocus(layer.current, panel.current, () => dismiss.current?.());
-	}, [props.open, props.shadeCover], _hs$ + 4);
-	const detents = (__hkd0 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) ? hookMemoPublish1(__hk, 0, normalizeDetents(props.detents), __hkd0) : __hk[2]);
-	const maxDetent = detents.length ? detents[detents.length - 1] : 0;
-	const detentsKey = detents.join(",");
-	useEffect(() => {
-		const el = panel.current;
-		if (!props.open || !el || !detents.length) return;
-		const ctl = attachSheetDetents(el, detents, () => dismiss.current?.());
-		return () => ctl.detach();
-	}, [props.open, detentsKey], _hs$ + 5);
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	{
-		const __ifCondition = props.open;
-		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
-			dark,
-			detents,
-			layer,
-			maxDetent,
-			panel,
-			props
-		] : void 0);
-	}
-};
-//#endregion
-export { Sheet };

package/dist/web/sheet-service.web.js

@@ -1,58 +0,0 @@
-import { applyThemeClasses } from "./theme/theme-scheme.js";
-import { isolateModalFocus } from "./modal-focus.web.js";
-import { attachSheetDetents } from "./sheet-detents.web.js";
-import { createRoot } from "octane";
-//#region src/sheet-service.web.ts
-var active = /* @__PURE__ */ new Set();
-/** Close the most recently opened sheet (resolve with `result`). */
-function closeSheet(result) {
-	[...active].pop()?.finish(result);
-}
-/** Imperative in-window sheet: portal layer at document root, bottom-
-*  anchored panel, dedicated Octane root. Resolves when the sheet closes. */
-var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
-	const layer = document.createElement("div");
-	const unbindTheme = applyThemeClasses(layer, "vx-sheet-layer");
-	const panel = document.createElement("div");
-	panel.className = "vx-sheet";
-	if (options.detents?.length) panel.classList.add("vx-sheet-detents");
-	let finished = false;
-	let releaseFocus;
-	const finish = (result) => {
-		if (finished) return;
-		finished = true;
-		active.delete(entry);
-		releaseFocus?.();
-		unbindTheme();
-		detents?.detach();
-		root.unmount();
-		layer.remove();
-		resolve(result);
-	};
-	const entry = {
-		layer,
-		finish
-	};
-	if (options.shadeCover ?? true) {
-		const backdrop = document.createElement("div");
-		backdrop.className = "vx-sheet-backdrop";
-		backdrop.addEventListener("click", () => finish());
-		layer.appendChild(backdrop);
-	}
-	layer.appendChild(panel);
-	document.body.appendChild(layer);
-	const detents = options.detents?.length ? attachSheetDetents(panel, options.detents, () => finish()) : null;
-	const root = createRoot(panel);
-	root.render(Component, {
-		params,
-		close: finish
-	});
-	active.add(entry);
-	if (options.shadeCover ?? true) {
-		panel.setAttribute("role", "dialog");
-		panel.setAttribute("aria-modal", "true");
-		releaseFocus = isolateModalFocus(layer, panel, () => finish());
-	}
-});
-//#endregion
-export { closeSheet, openSheet };

package/dist/web/toast-anchor.web.tsrx.js

@@ -1,142 +0,0 @@
-import { cx } from "./cx.js";
-import { applyThemeClasses } from "./theme/theme-scheme.js";
-import { Popover } from "./Popover.web.tsrx.js";
-import { bag1, bag3, clone, componentSlot, componentSlotVoid, createRoot, ifBlock, markChildrenBlock, template } from "octane";
-import { childTextHoleUpdate } from "octane/internal/client";
-//#region src/toast-anchor.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-toast\"></div>");
-function __then$3(__props, __s, __extra) {
-	const props = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = props.content;
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
-	}
-}
-function __else$5(__props, __s, __extra) {
-	const Component = __extra[0].content;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag1(__s, _root, _m0);
-	}
-	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:46bd91a2");
-}
-var __childrenBody = {};
-function __then$0(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	function __children$2(__props, __s, __extra) {
-		const __block = __s.block;
-		ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$3, __else$5, __block.endMarker, [props]);
-	}
-	componentSlotVoid(__s, 0, __block.parentNode, Popover, {
-		"open": props.open,
-		"anchor": props.options.anchor,
-		"placement": props.options.placement ?? placementFor(props.options.position),
-		"dismissOnOutsideTap": false,
-		"children": markChildrenBlock(__children$2, __childrenBody)
-	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb0a2e5d");
-}
-function __then$9(__props, __s, __extra) {
-	const props = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = props.content;
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
-	}
-}
-function __else$11(__props, __s, __extra) {
-	const Component = __extra[0].content;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag1(__s, _root, _m0);
-	}
-	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:75cbf224");
-}
-function __else$8(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$9, __else$11, __block.endMarker, __extra);
-}
-var queue = [];
-var active = false;
-var ToastBody = function ToastBody(props, __s, __extra) {
-	const __block = __s.block;
-	ifBlock(__s, 0, __block.parentNode, props.options.anchor, __then$0, __else$8, __block.endMarker, [props]);
-};
-function placementFor(position = "bottom") {
-	return position.startsWith("top") ? "top" : "bottom";
-}
-function applyWebProps(host, props) {
-	for (const [key, value] of Object.entries(props ?? {})) if (key.includes("-")) host.setAttribute(key, String(value));
-	else host[key] = value;
-}
-function alignmentFor(position = "bottom") {
-	if (position.endsWith("-start")) return "flex-start";
-	if (position.endsWith("-end")) return "flex-end";
-	return "center";
-}
-function showNext() {
-	if (active || queue.length === 0) return;
-	active = true;
-	const entry = queue.shift();
-	const anchored = Boolean(entry.options.anchor);
-	const host = document.createElement("div");
-	const position = entry.options.position ?? "bottom";
-	const unbindTheme = applyThemeClasses(host, cx("vx-toast-host", placementFor(position) === "top" ? "vx-toast-top" : "vx-toast-bottom"));
-	applyWebProps(host, entry.options.web);
-	if (anchored) host.style.display = "none";
-	else host.style.justifyContent = alignmentFor(position);
-	document.body.appendChild(host);
-	const root = createRoot(host);
-	root.render(ToastBody, {
-		...entry,
-		open: true
-	});
-	const finish = () => {
-		const cleanup = () => {
-			unbindTheme();
-			root.unmount();
-			host.remove();
-			active = false;
-			showNext();
-		};
-		if (anchored) {
-			root.render(ToastBody, {
-				...entry,
-				open: false
-			});
-			setTimeout(cleanup, 0);
-		} else cleanup();
-	};
-	setTimeout(finish, Math.max(0, entry.options.duration ?? 3e3));
-}
-function showToast(content, options = {}) {
-	queue.push({
-		content,
-		options
-	});
-	showNext();
-}
-//#endregion
-export { showToast };

package/src/CameraView.macos.tsrx

@@ -1,6 +0,0 @@
-/** @jsxImportSource @xplat/macos/renderer */
-import type { CameraViewProps } from './props'
-
-export function CameraView(_props: CameraViewProps) @{
-	<label className="vx-unsupported">Camera capture is unsupported by the AppKit host</label>
-}

package/src/Hoverable.mobile.tsrx

@@ -1,21 +0,0 @@
-/** @jsxImportSource @nativescript-community/octane */
-import type { HoverableProps } from './props';
-import { cx } from './cx';
-import { View } from './View.tsrx';
-
-/** Touch-target leaf: renders the children unchanged and never mounts the
- *  hover card — pointer intent has no touch semantic. A long-press stand-in
- *  is deliberately not provided (the fake-parity trap from decision #44).
- *  Keep essential information out of `card`; the pointer platforms (web,
- *  macOS) carry the real hover surface. */
-export function Hoverable(props: HoverableProps) @{
-	<View
-		id={props.id}
-		className={cx(props.className)}
-		style={props.style}
-		ios={props.ios}
-		android={props.android}
-	>
-		{props.children}
-	</View>
-}

package/src/Hoverable.tsrx

@@ -1,113 +0,0 @@
-/** @jsxImportSource @nativescript-community/octane */
-import { useEffect, useRef } from 'octane'
-import type { HoverableProps } from './props'
-import { cx } from './cx'
-import { View } from './View.tsrx'
-
-const host = () => (globalThis as any).__xplatAppKit ?? {}
-
-function HoverablePanel(props: { body?: any; className?: any; style?: any }) @{
-	<View className={cx('vx-hoverable-card', props.className)} style={props.style}>
-		{props.body}
-	</View>
-}
-
-/** Native-default leaf — the implementation, not a stub. On macOS the
- *  `__xplatAppKit` bridge supplies real pointer intent: an NSTrackingArea
- *  drives the same open/close delays as web and the card is an anchored
- *  NSPopover that stays open while the pointer crosses to the panel (the
- *  panel gets its own tracking area), matching the web leaf's pointer
- *  bridge. iOS/Android take the `.mobile` passthrough; bridge-absent
- *  targets (Windows) render the children only. The card renders once at
- *  open in a separate Octane root — no shared context. */
-export function Hoverable(props: HoverableProps) @{
-	const anchor = useRef<any>(null)
-	const popup = useRef<any>(null)
-	const detachHover = useRef<(() => void) | null>(null)
-	const detachCardHover = useRef<(() => void) | null>(null)
-	const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-	const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-	const clearOpen = () => {
-		if (openTimer.current !== null) clearTimeout(openTimer.current)
-		openTimer.current = null
-	}
-
-	const clearClose = () => {
-		if (closeTimer.current !== null) clearTimeout(closeTimer.current)
-		closeTimer.current = null
-	}
-
-	const closeNow = () => {
-		clearOpen()
-		clearClose()
-		detachCardHover.current?.()
-		detachCardHover.current = null
-		popup.current?.close()
-		popup.current = null
-	}
-
-	const openNow = () => {
-		if (popup.current) return
-		const view = anchor.current
-		const show = host().showAnchoredPopup
-		if (!view || typeof show !== 'function') return
-		popup.current = show({
-			anchor: view,
-			placement: props.placement ?? 'bottom',
-			component: HoverablePanel,
-			props: { body: props.card, className: props.cardClassName, style: props.cardStyle },
-		})
-
-		if (popup.current?.contentView && typeof host().observeHover === 'function') {
-			detachCardHover.current = host().observeHover(popup.current.contentView, {
-				enter: clearClose,
-				exit: scheduleClose,
-			})
-		}
-	}
-
-	const startOpen = () => {
-		clearClose()
-		clearOpen()
-		openTimer.current = setTimeout(() => {
-			openTimer.current = null
-			openNow()
-		}, Math.max(0, props.openDelay ?? 500))
-	}
-
-	const scheduleClose = () => {
-		clearClose()
-		closeTimer.current = setTimeout(() => {
-			closeTimer.current = null
-			closeNow()
-		}, Math.max(0, props.closeDelay ?? 120))
-	}
-
-	const bindAnchor = (view: any) => {
-		if (view && view === anchor.current && detachHover.current) return
-		anchor.current = view
-		detachHover.current?.()
-		detachHover.current = null
-		if (!view) return
-		const observe = host().observeHover
-		if (typeof observe !== 'function') return
-		detachHover.current = observe(view, {
-			enter: startOpen,
-			exit: () => { clearOpen(); scheduleClose() },
-		})
-	}
-
-	useEffect(() => () => {
-		clearOpen()
-		clearClose()
-		detachHover.current?.()
-		detachCardHover.current?.()
-		popup.current?.close()
-		popup.current = null
-	}, [])
-
-	<View id={props.id} className={props.className} style={props.style} bind={bindAnchor}>
-		{props.children}
-	</View>
-}

package/src/Hoverable.web.tsrx

@@ -1,98 +0,0 @@
-import { useEffect, useRef, useState } from 'octane';
-import { Popover } from './Popover.web.tsrx';
-import { View } from './View.web.tsrx';
-import type { HoverableProps } from './props';
-
-type Binding = { node: HTMLElement; enter: () => void; leave: () => void };
-
-/**
- * Delayed hover intent with a card that remains open while the pointer moves
- * through the body portal to the card. `bind` is used instead of delegated
- * events so the anchor and portaled card can be tracked independently.
- *
- * Web-only (the `ui/web` subpath) — hover has no touch-platform semantic and
- * the old native leaf's long-press→popover stand-in was fake parity.
- */
-export function Hoverable(props: HoverableProps) @{
-	const [open, setOpen] = useState(false);
-	const anchor = useRef<any>(null);
-	const anchorBinding = useRef<Binding | null>(null);
-	const cardBinding = useRef<Binding | null>(null);
-	const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	const clearOpen = () => {
-		if (openTimer.current !== null) clearTimeout(openTimer.current);
-		openTimer.current = null;
-	};
-
-	const clearClose = () => {
-		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
-		closeTimer.current = null;
-	};
-
-	const scheduleClose = () => {
-		clearClose();
-		closeTimer.current = setTimeout(() => {
-			closeTimer.current = null;
-			setOpen(false);
-		}, Math.max(0, props.closeDelay ?? 120));
-	};
-
-	const startOpen = () => {
-		clearClose();
-		clearOpen();
-		openTimer.current = setTimeout(() => {
-			openTimer.current = null;
-			setOpen(true);
-		}, Math.max(0, props.openDelay ?? 500));
-	};
-
-	const unbind = (binding: Binding | null) => {
-		if (!binding) return;
-		binding.node.removeEventListener('mouseenter', binding.enter);
-		binding.node.removeEventListener('mouseleave', binding.leave);
-	};
-
-	const bindAnchor = (node: HTMLElement | null) => {
-		anchor.current = node;
-		if (anchorBinding.current?.node === node) return;
-		unbind(anchorBinding.current);
-		anchorBinding.current = null;
-		if (!node) return;
-		const binding = { node, enter: startOpen, leave: () => { clearOpen(); scheduleClose(); } };
-		node.addEventListener('mouseenter', binding.enter);
-		node.addEventListener('mouseleave', binding.leave);
-		anchorBinding.current = binding;
-	};
-
-	const bindCard = (node: HTMLElement | null) => {
-		if (cardBinding.current?.node === node) return;
-		unbind(cardBinding.current);
-		cardBinding.current = null;
-		if (!node) return;
-		const binding = { node, enter: clearClose, leave: scheduleClose };
-		node.addEventListener('mouseenter', binding.enter);
-		node.addEventListener('mouseleave', binding.leave);
-		cardBinding.current = binding;
-	};
-
-	useEffect(() => () => {
-		clearOpen();
-		clearClose();
-		unbind(anchorBinding.current);
-		unbind(cardBinding.current);
-	}, []);
-
-	<View id={props.id} className={props.className} style={props.style} bind={bindAnchor} web={props.web}>
-		{props.children}
-		<Popover
-			open={open}
-			anchor={anchor}
-			placement={props.placement ?? 'bottom'}
-			dismissOnOutsideTap={false}
-		>
-			<View bind={bindCard} className={props.cardClassName} style={props.cardStyle}>{props.card}</View>
-		</Popover>
-	</View>
-}

package/src/InputTags.macos.tsrx

@@ -1,49 +0,0 @@
-/** @jsxImportSource @xplat/macos/renderer */
-import { useState } from 'octane';
-import type { InputTagsProps } from "./props";
-import { cx } from "./cx";
-import { applyEscapeProps } from "./escape-props";
-import { TextInput } from './text-controls.macos.tsrx';
-import { Pressable } from './Pressable.macos.tsrx';
-
-/** InputTags — committed chips + a trailing normalized TextInput. Enter
- *  commits the field as a tag; each chip carries an ✕ remove affordance. */
-export function InputTags(props: InputTagsProps) @{
-	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
-	const controlled = props.value !== undefined;
-	const tags = controlled ? props.value! : internal;
-	const [text, setText] = useState('');
-
-	const setTags = (next: string[]) => {
-		if (!controlled) setInternal(next);
-		props.onValueChange?.(next);
-	};
-
-	const commit = () => {
-		const tag = text.trim();
-		if (!tag || (props.max != null && tags.length >= props.max)) return;
-		setTags([...tags, tag]);
-		setText('');
-	};
-
-	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
-
-	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputtags', props.disabled && 'vx-inputtags--disabled', props.className)} style={props.style}>
-		@for (const e of tags.map((tag, i) => ({ tag, i })); key e.tag + e.i) {
-			<flexboxlayout className="vx-inputtags-tag">
-				<label className="vx-inputtags-tag-label" text={e.tag} />
-				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(e.i)} accessibilityLabel={'Remove ' + e.tag}>
-					<label text="✕" />
-				</Pressable>
-			</flexboxlayout>
-		}
-		<TextInput
-			className="vx-inputtags-field"
-			placeholder={props.placeholder}
-			editable={!props.disabled}
-			value={text}
-			onChange={setText}
-			onSubmit={commit}
-		/>
-	</flexboxlayout>
-}

package/src/InputTags.tsrx

@@ -1,49 +0,0 @@
-/** @jsxImportSource @nativescript-community/octane */
-import { useState } from 'octane';
-import type { InputTagsProps } from "./props";
-import { cx } from "./cx";
-import { applyEscapeProps } from "./escape-props";
-import { TextInput } from './TextInput.tsrx';
-import { Pressable } from './Pressable.tsrx';
-
-/** InputTags — committed chips + a trailing normalized TextInput. Enter
- *  commits the field as a tag; each chip carries an ✕ remove affordance. */
-export function InputTags(props: InputTagsProps) @{
-	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
-	const controlled = props.value !== undefined;
-	const tags = controlled ? props.value! : internal;
-	const [text, setText] = useState('');
-
-	const setTags = (next: string[]) => {
-		if (!controlled) setInternal(next);
-		props.onValueChange?.(next);
-	};
-
-	const commit = () => {
-		const tag = text.trim();
-		if (!tag || (props.max != null && tags.length >= props.max)) return;
-		setTags([...tags, tag]);
-		setText('');
-	};
-
-	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
-
-	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputtags', props.disabled && 'vx-inputtags--disabled', props.className)} style={props.style}>
-		@for (const e of tags.map((tag, i) => ({ tag, i })); key e.tag + e.i) {
-			<flexboxlayout className="vx-inputtags-tag">
-				<label className="vx-inputtags-tag-label" text={e.tag} />
-				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(e.i)} accessibilityLabel={'Remove ' + e.tag}>
-					<label text="✕" />
-				</Pressable>
-			</flexboxlayout>
-		}
-		<TextInput
-			className="vx-inputtags-field"
-			placeholder={props.placeholder}
-			editable={!props.disabled}
-			value={text}
-			onChange={setText}
-			onSubmit={commit}
-		/>
-	</flexboxlayout>
-}

package/src/InputTags.web.tsrx

@@ -1,49 +0,0 @@
-import { useState } from 'octane';
-import type { InputTagsProps } from "./props";
-import { applyEscapeProps } from "./escape-props";
-import { TextInput } from './TextInput.web.tsrx';
-import { Pressable } from './Pressable.web.tsrx';
-
-/** InputTags — committed chips + a trailing normalized TextInput. Enter
- *  commits the field as a tag; each chip carries an ✕ remove affordance;
- *  Backspace on an empty field removes the last tag (web). */
-export function InputTags(props: InputTagsProps) @{
-	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
-	const controlled = props.value !== undefined;
-	const tags = controlled ? props.value! : internal;
-	const [text, setText] = useState('');
-
-	const setTags = (next: string[]) => {
-		if (!controlled) setInternal(next);
-		props.onValueChange?.(next);
-	};
-
-	const commit = () => {
-		const tag = text.trim();
-		if (!tag || (props.max != null && tags.length >= props.max)) return;
-		setTags([...tags, tag]);
-		setText('');
-	};
-
-	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
-
-	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-inputtags', props.disabled ? 'vx-inputtags--disabled' : undefined, props.className]} style={props.style}>
-		{tags.map((tag: string, i: number) => (
-			<span key={tag + i} className="vx-inputtags-tag">
-				<span className="vx-inputtags-tag-label">{tag}</span>
-				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(i)} accessibilityLabel={'Remove ' + tag}>
-					<span aria-hidden="true">✕</span>
-				</Pressable>
-			</span>
-		))}
-		<TextInput
-			className="vx-inputtags-field"
-			placeholder={props.placeholder}
-			editable={!props.disabled}
-			value={text}
-			onChange={setText}
-			onSubmit={commit}
-			web={{ onkeydown: (e: any) => { if (e.key === 'Backspace' && text === '') removeAt(tags.length - 1); } }}
-		/>
-	</div>
-}