@octane-xplat/ui 0.6.0 → 0.7.1

package/src/Timeline.macos.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { TimelineProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** Timeline — vertical event list: dot + connector + content per item. */
+export function Timeline(props: TimelineProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-timeline', props.className)} style={props.style}>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.item.key) {
+			<flexboxlayout className="vx-timeline-item">
+				{/* rail/dot/line metrics are CSS on web — inline equivalents
+				   here (AppKit has no style layer); keep in step with
+				   .vx-timeline-* */}
+				<flexboxlayout className="vx-timeline-rail" style={{ width: 20 }} alignItems="center">
+					<flexboxlayout className="vx-timeline-dot" style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: '#171717' }}>{e.item.icon ? <Icon name={e.item.icon} /> : null}</flexboxlayout>
+					{e.i < props.items.length - 1 ? <flexboxlayout className="vx-timeline-line flex-1" style={{ width: 1, backgroundColor: '#d4d4d4' }} /> : null}
+				</flexboxlayout>
+				<flexboxlayout className="vx-timeline-body">
+					{e.item.time != null ? <label className="vx-timeline-time" text={e.item.time} /> : null}
+					{e.item.title != null ? <label className="vx-timeline-title" text={e.item.title} /> : null}
+					{e.item.description != null ? <label className="vx-timeline-desc" text={e.item.description} /> : null}
+				</flexboxlayout>
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Timeline.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { TimelineProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** Timeline — vertical event list: dot + connector + content per item. */
+export function Timeline(props: TimelineProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-timeline', props.className)} style={props.style}>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.item.key) {
+			<flexboxlayout className="vx-timeline-item">
+				<flexboxlayout className="vx-timeline-rail">
+					<flexboxlayout className="vx-timeline-dot">{e.item.icon ? <Icon name={e.item.icon} /> : null}</flexboxlayout>
+					{e.i < props.items.length - 1 ? <flexboxlayout className="vx-timeline-line" /> : null}
+				</flexboxlayout>
+				<flexboxlayout className="vx-timeline-body">
+					{e.item.time != null ? <label className="vx-timeline-time" text={e.item.time} /> : null}
+					{e.item.title != null ? <label className="vx-timeline-title" text={e.item.title} /> : null}
+					{e.item.description != null ? <label className="vx-timeline-desc" text={e.item.description} /> : null}
+				</flexboxlayout>
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Timeline.web.tsrx

@@ -0,0 +1,22 @@
+import type { TimelineProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** Timeline — vertical event list: dot + connector + content per item. */
+export function Timeline(props: TimelineProps) @{
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-timeline', props.className]} style={props.style}>
+		{props.items.map((item: any, i: number) => (
+			<div key={item.key} className="vx-timeline-item">
+				<div className="vx-timeline-rail" aria-hidden="true">
+					<div className="vx-timeline-dot">{item.icon ? <Icon name={item.icon} /> : null}</div>
+					{i < props.items.length - 1 ? <div className="vx-timeline-line" /> : null}
+				</div>
+				<div className="vx-timeline-body">
+					{item.time != null ? <span className="vx-timeline-time">{item.time}</span> : null}
+					{item.title != null ? <span className="vx-timeline-title">{item.title}</span> : null}
+					{item.description != null ? <span className="vx-timeline-desc">{item.description}</span> : null}
+				</div>
+			</div>
+		))}
+	</div>
+}

package/src/Tooltip.mobile.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { TooltipProps } from './props';
+import { cx } from './cx';
+import { View } from './View.tsrx';
+
+/** Touch-target leaf: renders the trigger unchanged and never mounts the
+ *  hint layer — hover/focus intent has no touch semantic (decision #47,
+ *  revised). Keep essential information out of `content`; the pointer
+ *  platforms (web, macOS) carry the real hover surface. */
+export function Tooltip(props: TooltipProps) @{
+	<View
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		ios={props.ios}
+		android={props.android}
+	>
+		{props.trigger}
+	</View>
+}

package/src/Tooltip.tsrx

@@ -0,0 +1,102 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane'
+import type { TooltipProps } from './props'
+import { cx } from './cx'
+import { View } from './View.tsrx'
+
+const host = () => (globalThis as any).__xplatAppKit ?? {}
+
+function TooltipPanel(props: { body?: any; className?: any; style?: any }) @{
+	<View className={cx('vx-tooltip', 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 on
+ *  the anchor feeds the same open/close delays as web, and the panel is an
+ *  anchored NSPopover mounted as its own Octane root. iOS/Android take the
+ *  `.mobile` passthrough; bridge-absent targets (Windows) render the
+ *  trigger only. The content renders once at open (the popup root is a
+ *  separate tree — no shared context). */
+export function Tooltip(props: TooltipProps) @{
+	const anchor = useRef<any>(null)
+	const popup = useRef<any>(null)
+	const detachHover = 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()
+		popup.current?.close()
+		popup.current = null
+	}
+
+	const openNow = () => {
+		if (props.disabled || 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 ?? 'top',
+			component: TooltipPanel,
+			props: { body: props.content, className: props.contentClassName, style: props.contentStyle },
+		})
+	}
+
+	const startOpen = () => {
+		if (props.disabled) return
+		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 ?? 100))
+	}
+
+	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?.()
+		popup.current?.close()
+		popup.current = null
+	}, [])
+
+	<View id={props.id} className={props.className} style={props.style} bind={bindAnchor}>
+		{props.trigger}
+	</View>
+}

package/src/Tooltip.web.tsrx

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from 'octane';
+import { Popover } from './Popover.web.tsrx';
+import { View } from './View.web.tsrx';
+import type { TooltipProps } from './props';
+import { cx } from './cx';
+
+let nextTooltipId = 0;
+
+const FOCUSABLE = 'a[href],button,input,select,textarea,[tabindex],[contenteditable="true"]';
+
+type Binding = {
+	node: HTMLElement;
+	enter: () => void;
+	leave: () => void;
+	focusIn: (event: FocusEvent) => void;
+	focusOut: () => void;
+};
+
+/**
+ * Delayed hover-intent tooltip anchored through Popover. `focusin`/`focusout`
+ * bubble, so keyboard focus on a focusable child opens it without forcing a
+ * tab stop on the wrapper; while open the resolved focusable element gets
+ * `aria-describedby` pointing at the `role="tooltip"` panel. Escape, blur,
+ * and scroll (capture, so nested scrollers count) dismiss.
+ *
+ * Web-only (the `ui/web` subpath) — hover/focus intent has no touch-platform
+ * semantic and a long-press stand-in would repeat the Hoverable trap
+ * (decision #47).
+ */
+export function Tooltip(props: TooltipProps) @{
+	const [open, setOpen] = useState(false);
+	const anchor = useRef<HTMLElement | null>(null);
+	const binding = useRef<Binding | null>(null);
+	const described = useRef<HTMLElement | null>(null);
+	const tooltipId = useRef<string>('');
+	if (!tooltipId.current) tooltipId.current = `vx-tooltip-${++nextTooltipId}`;
+	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 startOpen = () => {
+		if (props.disabled) return;
+		clearClose();
+		clearOpen();
+		openTimer.current = setTimeout(() => {
+			openTimer.current = null;
+			setOpen(true);
+		}, Math.max(0, props.openDelay ?? 500));
+	};
+
+	const scheduleClose = () => {
+		clearClose();
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			setOpen(false);
+		}, Math.max(0, props.closeDelay ?? 100));
+	};
+
+	const openNow = () => {
+		if (props.disabled) return;
+		clearClose();
+		clearOpen();
+		setOpen(true);
+	};
+
+	const closeNow = () => {
+		clearOpen();
+		clearClose();
+		setOpen(false);
+	};
+
+	const bindAnchor = (node: HTMLElement | null) => {
+		anchor.current = node;
+		if (binding.current?.node === node) return;
+		const old = binding.current;
+		if (old) {
+			old.node.removeEventListener('mouseenter', old.enter);
+			old.node.removeEventListener('mouseleave', old.leave);
+			old.node.removeEventListener('focusin', old.focusIn);
+			old.node.removeEventListener('focusout', old.focusOut);
+		}
+
+		binding.current = null;
+		if (!node) return;
+		const next: Binding = {
+			node,
+			enter: startOpen,
+			leave: () => { clearOpen(); scheduleClose(); },
+			focusIn: openNow,
+			focusOut: closeNow,
+		};
+
+		node.addEventListener('mouseenter', next.enter);
+		node.addEventListener('mouseleave', next.leave);
+		node.addEventListener('focusin', next.focusIn);
+		node.addEventListener('focusout', next.focusOut);
+		binding.current = next;
+	};
+
+	useEffect(() => () => {
+		clearOpen();
+		clearClose();
+		const current = binding.current;
+		if (current) {
+			current.node.removeEventListener('mouseenter', current.enter);
+			current.node.removeEventListener('mouseleave', current.leave);
+			current.node.removeEventListener('focusin', current.focusIn);
+			current.node.removeEventListener('focusout', current.focusOut);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!open) return;
+		const host = anchor.current;
+		const target = (host?.matches?.(FOCUSABLE) ? host : host?.querySelector?.(FOCUSABLE) ?? host) as HTMLElement | null;
+		if (target) {
+			target.setAttribute('aria-describedby', tooltipId.current);
+			described.current = target;
+		}
+
+		const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') closeNow(); };
+		const onScroll = () => closeNow();
+		window.addEventListener('keydown', onKey);
+		window.addEventListener('scroll', onScroll, true);
+		return () => {
+			window.removeEventListener('keydown', onKey);
+			window.removeEventListener('scroll', onScroll, true);
+			described.current?.removeAttribute('aria-describedby');
+			described.current = null;
+		};
+	}, [open]);
+
+	<View id={props.id} className={props.className} style={props.style} bind={bindAnchor} web={props.web}>
+		{props.trigger}
+		<Popover
+			open={open}
+			anchor={anchor}
+			placement={props.placement ?? 'top'}
+			dismissOnOutsideTap={false}
+			className={cx('vx-tooltip', props.contentClassName)}
+			style={{ pointerEvents: 'none', ...props.contentStyle }}
+			web={{ role: 'tooltip', id: tooltipId.current }}
+		>
+			{props.content}
+		</Popover>
+	</View>
+}

package/src/Tree.macos.tsrx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { TreeProps, TreeNode } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+function TreeRow(props: { node: TreeNode; depth: number; open: Set<string>; toggle: (n: TreeNode) => void; onSelect?: (n: TreeNode) => void }) @{
+	const node = props.node;
+	const kids = node.children ?? [];
+	const isOpen = props.open.has(node.key);
+
+	<flexboxlayout className="vx-tree-node">
+		<flexboxlayout
+			className={cx('vx-tree-row', node.disabled && 'vx-tree-row--disabled')}
+			style={{ paddingLeft: props.depth * 16, ...(node.disabled ? { opacity: 0.5 } : {}) }}
+			onTap={node.disabled ? undefined : () => (kids.length ? props.toggle(node) : props.onSelect?.(node))}
+		>
+			<label className="vx-tree-caret" style={{ width: 14, marginLeft: 4 }} text={kids.length ? (isOpen ? '▾' : '▸') : ''} />
+			<label className="vx-tree-label" text={node.label ?? node.key} />
+		</flexboxlayout>
+		{isOpen && kids.map((kid: TreeNode) => (
+			<TreeRow node={kid} depth={props.depth + 1} open={props.open} toggle={props.toggle} onSelect={props.onSelect} />
+		))}
+	</flexboxlayout>
+}
+
+/** Tree — recursive indent + collapse. `defaultExpanded` seeds the open
+ *  set (uncontrolled); `onToggle`/`onSelect` report changes. */
+export function Tree(props: TreeProps) @{
+	const [open, setOpen] = useState<Set<string>>(new Set(props.defaultExpanded ?? []));
+
+	const toggle = (node: TreeNode) => {
+		const next = new Set(open);
+		const willOpen = !next.has(node.key);
+		if (willOpen) next.add(node.key); else next.delete(node.key);
+		setOpen(next);
+		props.onToggle?.(node.key, willOpen);
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-tree', props.className)} style={props.style}>
+		{props.nodes.map((node: TreeNode) => (
+			<TreeRow node={node} depth={0} open={open} toggle={toggle} onSelect={props.onSelect} />
+		))}
+	</flexboxlayout>
+}

package/src/Tree.tsrx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { TreeProps, TreeNode } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+function TreeRow(props: { node: TreeNode; depth: number; open: Set<string>; toggle: (n: TreeNode) => void; onSelect?: (n: TreeNode) => void }) @{
+	const node = props.node;
+	const kids = node.children ?? [];
+	const isOpen = props.open.has(node.key);
+
+	<flexboxlayout className="vx-tree-node">
+		<flexboxlayout
+			className={cx('vx-tree-row', node.disabled && 'vx-tree-row--disabled')}
+			style={{ paddingLeft: props.depth * 16 }}
+			onTap={node.disabled ? undefined : () => (kids.length ? props.toggle(node) : props.onSelect?.(node))}
+		>
+			<label className="vx-tree-caret" text={kids.length ? (isOpen ? '▾' : '▸') : ''} />
+			<label className="vx-tree-label" text={node.label ?? node.key} />
+		</flexboxlayout>
+		{isOpen && kids.map((kid: TreeNode) => (
+			<TreeRow node={kid} depth={props.depth + 1} open={props.open} toggle={props.toggle} onSelect={props.onSelect} />
+		))}
+	</flexboxlayout>
+}
+
+/** Tree — recursive indent + collapse. `defaultExpanded` seeds the open
+ *  set (uncontrolled); `onToggle`/`onSelect` report changes. */
+export function Tree(props: TreeProps) @{
+	const [open, setOpen] = useState<Set<string>>(new Set(props.defaultExpanded ?? []));
+
+	const toggle = (node: TreeNode) => {
+		const next = new Set(open);
+		const willOpen = !next.has(node.key);
+		if (willOpen) next.add(node.key); else next.delete(node.key);
+		setOpen(next);
+		props.onToggle?.(node.key, willOpen);
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-tree', props.className)} style={props.style}>
+		{props.nodes.map((node: TreeNode) => (
+			<TreeRow node={node} depth={0} open={open} toggle={toggle} onSelect={props.onSelect} />
+		))}
+	</flexboxlayout>
+}

package/src/Tree.web.tsrx

@@ -0,0 +1,52 @@
+import { useState } from 'octane';
+import type { TreeProps, TreeNode } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+function TreeRow(props: { node: TreeNode; depth: number; open: Set<string>; toggle: (n: TreeNode) => void; onSelect?: (n: TreeNode) => void }) @{
+	const node = props.node;
+	const kids = node.children ?? [];
+	const isOpen = props.open.has(node.key);
+
+	<div className="vx-tree-node" role="treeitem" aria-expanded={kids.length ? isOpen : undefined}>
+		<div
+			className={['vx-tree-row', node.disabled ? 'vx-tree-row--disabled' : undefined]}
+			style={{ paddingLeft: props.depth * 16 }}
+			role="button"
+			tabIndex={node.disabled ? undefined : 0}
+			onClick={node.disabled ? undefined : () => (kids.length ? props.toggle(node) : props.onSelect?.(node))}
+			onKeyDown={(e: any) => {
+				if (node.disabled) return;
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					if (kids.length) props.toggle(node); else props.onSelect?.(node);
+				}
+			}}
+		>
+			<span className="vx-tree-caret" aria-hidden="true">{kids.length ? (isOpen ? '▾' : '▸') : ''}</span>
+			<span className="vx-tree-label">{node.label ?? node.key}</span>
+		</div>
+		{isOpen && kids.map((kid: TreeNode) => (
+			<TreeRow key={kid.key} node={kid} depth={props.depth + 1} open={props.open} toggle={props.toggle} onSelect={props.onSelect} />
+		))}
+	</div>
+}
+
+/** Tree — recursive indent + collapse. `defaultExpanded` seeds the open
+ *  set (uncontrolled); `onToggle`/`onSelect` report changes. */
+export function Tree(props: TreeProps) @{
+	const [open, setOpen] = useState<Set<string>>(new Set(props.defaultExpanded ?? []));
+
+	const toggle = (node: TreeNode) => {
+		const next = new Set(open);
+		const willOpen = !next.has(node.key);
+		if (willOpen) next.add(node.key); else next.delete(node.key);
+		setOpen(next);
+		props.onToggle?.(node.key, willOpen);
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-tree', props.className]} style={props.style} role="tree">
+		{props.nodes.map((node: TreeNode) => (
+			<TreeRow key={node.key} node={node} depth={0} open={open} toggle={toggle} onSelect={props.onSelect} />
+		))}
+	</div>
+}

package/src/User.macos.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { UserProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Avatar } from './Avatar.macos.tsrx';
+
+/** User — avatar + name/description row. `onSelect` makes the row
+ *  tappable. */
+export function User(props: UserProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-user', props.onSelect && 'vx-user--pressable', props.className)}
+		style={props.style}
+		onTap={props.onSelect}
+	>
+		<Avatar src={props.src} fallback={props.fallback} alt={props.name} size={props.size} />
+		<flexboxlayout className="vx-user-body">
+			{props.name != null ? <label className="vx-user-name" text={props.name} /> : null}
+			{props.description != null ? <label className="vx-user-desc" text={props.description} /> : null}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/User.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { UserProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Avatar } from './Avatar.tsrx';
+
+/** User — avatar + name/description row. `onSelect` makes the row
+ *  tappable. */
+export function User(props: UserProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-user', props.onSelect && 'vx-user--pressable', props.className)}
+		style={props.style}
+		onTap={props.onSelect}
+	>
+		<Avatar src={props.src} fallback={props.fallback} alt={props.name} size={props.size} />
+		<flexboxlayout className="vx-user-body">
+			{props.name != null ? <label className="vx-user-name" text={props.name} /> : null}
+			{props.description != null ? <label className="vx-user-desc" text={props.description} /> : null}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/User.web.tsrx

@@ -0,0 +1,24 @@
+import type { UserProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Avatar } from './Avatar.web.tsrx';
+
+/** User — avatar + name/description row. `onSelect` makes the row
+ *  pressable. */
+export function User(props: UserProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-user', props.onSelect ? 'vx-user--pressable' : undefined, props.className]}
+		style={props.style}
+		role={props.onSelect ? 'button' : undefined}
+		tabIndex={props.onSelect ? 0 : undefined}
+		onClick={props.onSelect}
+		onKeyDown={(e: any) => { if (props.onSelect && e.key === 'Enter') props.onSelect(); }}
+	>
+		<Avatar src={props.src} fallback={props.fallback} alt={props.name} size={props.size} />
+		<div className="vx-user-body">
+			{props.name != null ? <span className="vx-user-name">{props.name}</span> : null}
+			{props.description != null ? <span className="vx-user-desc">{props.description}</span> : null}
+		</div>
+	</div>
+}

package/src/View.macos.tsrx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ViewProps } from './props'
+import { cx } from './cx'
+import { layoutChildProps } from './layout-child'
+
+export function View(props: ViewProps) @{
+	<flexboxlayout
+		id={props.id}
+		ref={(view: any) => { if (view) { props.bind?.(view) } }}
+		{...layoutChildProps(props)}
+		flexDirection="column"
+		alignItems={props.alignItems}
+		justifyContent={props.justifyContent}
+		flexWrap={props.flexWrap}
+		gap={props.gap}
+		className={cx(props.className)}
+		style={props.style}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.children}
+	</flexboxlayout>
+}
+
+export const Column = View

package/src/View.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ViewProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { layoutChildProps } from './layout-child';
+import { usePan } from './pan.tsrx';
+/** Neutral flex-column container — flexboxlayout on native.
+ *  Gesture props map 1:1 to NS gesture events (onPan → 'pan', etc.) —
+ *  the driver's onX → eventName rule covers them generically. Payloads
+ *  are normalized to the shared gesture shape (animation-gestures.md):
+ *  { x, y, dx, dy, vx, vy, state: 'began'|'moved'|'ended'|'cancelled' }. */
+export function View(props: ViewProps) @{
+	<flexboxlayout
+		id={props.id}
+		{...layoutChildProps(props)}
+		ref={(v: any) => { if (v) { applyEscapeProps(v, props); props.bind?.(v); } }}
+		flexDirection="column"
+		className={cx(props.className)}
+		style={props.style}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+		onPan={usePan(props.onPan)}
+		onSwipe={props.onSwipe}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/View.web.tsrx

@@ -0,0 +1,33 @@
+import { useRef } from 'octane';
+import type { ViewProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { layoutChildProps } from './layout-child.web';
+import { usePan } from './pan.web.tsrx';
+
+/** Neutral flex-column container — the RN-shaped default block.
+ *  onPan is pointer plumbing: pointerdown/move/up on the element.
+ *  pointermove isn't in octane's delegated-event set, so the leaf attaches
+ *  raw listeners via a ref — that's why `bind` exists. Payloads normalize
+ *  to the shared shape {x,y,dx,dy,vx,vy,state,target}. */
+export function View(props: ViewProps) @{
+	const el = useRef<HTMLElement | null>(null);
+	usePan(el, props.onPan);
+
+	<div
+		id={props.id}
+		ref={(e: any) => { el.current = e; if (e) { applyEscapeProps(e, props); props.bind?.(e); } }}
+		className={['vx-view', props.className]}
+		{...layoutChildProps(props, props.style)}
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		{props.children}
+	</div>
+}