@octane-xplat/ui 0.9.0 → 0.11.0

package/src/CodeBlock.tsrx

@@ -0,0 +1,208 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo, useState } from 'octane';
+import type { CodeBlockProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+import { Icon } from './Icon';
+import { Pressable } from './Pressable';
+import { useColorScheme } from './theme/colorScheme';
+import { mutedColor } from './scheme-colors';
+import { nativeColor } from './native-color';
+import { syntaxColor } from './code-tokenizer';
+import { useCodeCopy, useTokenLines } from './codeblock-shared.tsrx';
+
+/** Native token color — FormattedString spans take concrete colors, so the
+ *  active scheme + per-block `syntaxTheme` resolve to hex strings here. */
+function tokenColor(
+	type: string,
+	scheme: 'light' | 'dark',
+	theme?: CodeBlockProps['syntaxTheme'],
+) {
+	const color = syntaxColor(type, scheme, theme)
+	return color == null ? undefined : nativeColor(color)
+}
+
+/** One code line as a native label with a FormattedString of colored spans. */
+function NativeCodeLine(props: {
+	line: string
+	tokens?: readonly { type: string; start: number; end: number }[]
+	scheme: 'light' | 'dark'
+	theme?: CodeBlockProps['syntaxTheme']
+	fontSize: number
+	wrap: boolean
+}) @{
+	const tokens = props.tokens ?? [];
+	const spans: any[] = [];
+	if (tokens.length === 0) {
+		spans.push(<span text={props.line === '' ? ' ' : props.line} />);
+	} else {
+		let cursor = 0;
+		for (const token of tokens) {
+			if (token.start > cursor) {
+				spans.push(<span text={props.line.slice(cursor, token.start)} />);
+			}
+
+			spans.push(
+				<span
+					style={{ color: tokenColor(token.type, props.scheme, props.theme) }}
+					text={props.line.slice(token.start, token.end)}
+				/>,
+			);
+
+			cursor = token.end;
+		}
+
+		if (cursor < props.line.length) {
+			spans.push(<span text={props.line.slice(cursor)} />);
+		}
+	}
+
+	<label
+		className="vx-codeblock-line-text"
+		whiteSpace={props.wrap ? 'normal' : 'nowrap'}
+		style={{ fontFamily: 'monospace', fontSize: props.fontSize }}
+	>
+		<formattedstring>{spans}</formattedstring>
+	</label>
+}
+
+/** CodeBlock — native leaf. Syntax highlighting always takes the span path
+ *  (the CSS Custom Highlight API is DOM-only); `width: 'fit-content'` is
+ *  inert (GridLayout can't measure max-content for a scrolling code block,
+ *  so the block fills its parent width). `maxHeight` wraps the body in a
+ *  vertical ScrollView; unwrapped long lines clip rather than scroll
+ *  horizontally (documented limitation — NS ScrollView is single-axis). */
+export function CodeBlock(props: CodeBlockProps) @{
+	const scheme = useColorScheme();
+	const language = props.language ?? 'plaintext';
+	const hasLanguageLabel = props.hasLanguageLabel ?? true;
+	const hasLineNumbers = props.hasLineNumbers ?? false;
+	const hasCopyButton = props.hasCopyButton ?? true;
+	const isWrapped = props.isWrapped ?? false;
+	const isCollapsible = props.isCollapsible ?? false;
+	const collapsibleThreshold = props.collapsibleThreshold ?? 10;
+	const size = props.size ?? 'md';
+	const container = props.container ?? 'card';
+	const fontSize = size === 'sm' ? 12 : 13;
+
+	const lines = useMemo(() => props.code.split('\n'), [props.code]);
+	const tokenLines = useTokenLines(props.code, language, props.tokenizer);
+	const { copy, copied } = useCodeCopy(props.code, props.onCopy);
+	const highlighted = useMemo(() => new Set(props.highlightLines ?? []), [props.highlightLines]);
+
+	const canCollapse = isCollapsible && lines.length > collapsibleThreshold;
+	const [isExpanded, setIsExpanded] = useState(false);
+	const collapsed = canCollapse && !isExpanded;
+
+	const hasHeader = props.title != null || hasLanguageLabel || hasCopyButton || canCollapse;
+
+	const body = (
+		<stacklayout className="vx-codeblock-body" style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 12, paddingRight: 12 }}>
+			{lines.map((line, i) => {
+				const lineNo = i + 1;
+				const isHl = highlighted.has(lineNo);
+				return (
+					<flexboxlayout
+						key={lineNo}
+						flexDirection="row"
+						className={cx('vx-codeblock-line', isHl && 'vx-codeblock-line--highlighted')}
+					style={isHl ? { backgroundColor: nativeColor(scheme === 'dark' ? '#2e2e2e' : '#f0f0f0') } : undefined}
+					>
+						{hasLineNumbers ? (
+							<label
+								className="vx-codeblock-gutter"
+								text={String(lineNo)}
+								whiteSpace="nowrap"
+					textAlignment="right"
+					style={{ fontFamily: 'monospace', fontSize, color: nativeColor(mutedColor(scheme)), width: 32, paddingRight: 8 }}
+							/>
+						) : null}
+						<NativeCodeLine
+							line={line}
+							tokens={tokenLines[i]}
+							scheme={scheme}
+							theme={props.syntaxTheme}
+							fontSize={fontSize}
+							wrap={isWrapped}
+						/>
+					</flexboxlayout>
+				);
+			})}
+		</stacklayout>
+	);
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx(
+			'vx-codeblock',
+			`vx-codeblock--${container}`,
+			`vx-codeblock--${size}`,
+			collapsed && 'vx-codeblock--collapsed',
+			props.className,
+		)}
+		style={{ flexDirection: 'column', ...props.style }}
+		flexDirection="column"
+	>
+		{hasHeader ? (
+			<flexboxlayout
+				className="vx-codeblock-header"
+				flexDirection="row"
+				justifyContent="space-between"
+				alignItems="center"
+				style={{ paddingTop: 6, paddingBottom: 6, paddingLeft: 12, paddingRight: 12 }}
+			>
+				<flexboxlayout flexDirection="row" alignItems="center" style={{ gap: 8 }}>
+					{props.title != null ? (
+						<label
+							className="vx-codeblock-title"
+							whiteSpace="nowrap"
+							style={{ fontSize, fontWeight: 600 }}
+						>
+							{props.title}
+						</label>
+					) : null}
+					{hasLanguageLabel ? (
+						<label
+							className="vx-codeblock-lang"
+							whiteSpace="nowrap"
+								style={{ fontSize: fontSize - 1, color: nativeColor(mutedColor(scheme)) }}
+						>
+							{language}
+						</label>
+					) : null}
+				</flexboxlayout>
+				<flexboxlayout flexDirection="row" alignItems="center" style={{ gap: 4 }}>
+					{hasCopyButton ? (
+						<Pressable
+							className="vx-codeblock-copy"
+							accessibilityRole="button"
+							accessibilityLabel={copied ? 'Copied' : 'Copy code'}
+							onPress={copy}
+							style={{ padding: 4 }}
+						>
+							<Icon name={copied ? 'xplat-check' : 'xplat-copy'} size={14} />
+						</Pressable>
+					) : null}
+					{canCollapse ? (
+						<Pressable
+							className="vx-codeblock-collapse"
+							accessibilityRole="button"
+							accessibilityLabel={isExpanded ? 'Collapse code' : 'Expand code'}
+							accessibilityState={{ checked: isExpanded }}
+							onPress={() => setIsExpanded((v) => !v)}
+							style={{ padding: 4 }}
+						>
+							<Icon name={isExpanded ? 'xplat-chevron-up' : 'xplat-chevron-down'} size={14} />
+						</Pressable>
+					) : null}
+				</flexboxlayout>
+			</flexboxlayout>
+		) : null}
+		{collapsed ? null : props.maxHeight != null ? (
+			<scrollview height={props.maxHeight as any}>{body}</scrollview>
+		) : (
+			body
+		)}
+	</flexboxlayout>
+}

package/src/CodeBlock.web.tsrx

@@ -0,0 +1,220 @@
+import { useEffect, useMemo, useRef, useState } from 'octane';
+import type { CodeBlockProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { Icon } from './Icon.web.tsrx';
+import {
+	applyHighlightRangesChunked,
+	hasHighlightAPI,
+	isWebKitOnly,
+} from './code-highlight.web';
+
+import { useCodeCopy, useTokenLines } from './codeblock-shared.tsrx';
+
+
+
+function cssLength(v: number | string): string | number {
+	return typeof v === 'number' ? `${v}px` : v;
+}
+
+function applySyntaxTheme(el: HTMLElement, theme: CodeBlockProps['syntaxTheme']) {
+	if (!el || !theme) return;
+	for (const [key, value] of Object.entries(theme.tokens)) {
+		const resolved = Array.isArray(value) ? value[0] : value;
+		el.style.setProperty(`--color-syntax-${key}`, resolved);
+	}
+}
+
+/** Token spans — the fallback/invariant colouring path (also what 'spans'
+ *  mode forces, and what native renders through its own leaf). */
+function CodeLine(props: { line: string; tokens?: readonly { type: string; start: number; end: number }[] }) @{
+	const tokens = props.tokens ?? [];
+	if (tokens.length === 0) {
+		return <>{props.line === '' ? '\u200B' : props.line}</>;
+	}
+
+	const parts: any[] = [];
+	let cursor = 0;
+	for (const token of tokens) {
+		if (token.start > cursor) {
+			parts.push(props.line.slice(cursor, token.start));
+		}
+
+		parts.push(
+			<span
+				className={`vx-token-${token.type}`}
+				style={{ color: `var(--color-syntax-${token.type}, inherit)` }}
+			>
+				{props.line.slice(token.start, token.end)}
+			</span>,
+		);
+
+		cursor = token.end;
+	}
+
+	if (cursor < props.line.length) {
+		parts.push(props.line.slice(cursor));
+	}
+
+	return <>{parts}</>;
+}
+
+/** CodeBlock — read-only syntax-highlighted code display with header (title,
+ *  language label, copy button), optional line numbers, per-line
+ *  highlighting, wrap/max-height controls, and a collapsible body.
+ *  `highlightMode` 'ranges' uses the CSS Custom Highlight API (unchanging
+ *  DOM text + painting through ::highlight); every other path — and any
+ *  engine without the API, including WebKit — renders styled spans. */
+export function CodeBlock(props: CodeBlockProps) @{
+	const language = props.language ?? 'plaintext';
+	const hasLanguageLabel = props.hasLanguageLabel ?? true;
+	const hasLineNumbers = props.hasLineNumbers ?? false;
+	const hasCopyButton = props.hasCopyButton ?? true;
+	const isWrapped = props.isWrapped ?? false;
+	const isCollapsible = props.isCollapsible ?? false;
+	const collapsibleThreshold = props.collapsibleThreshold ?? 10;
+	const size = props.size ?? 'md';
+	const container = props.container ?? 'card';
+	const width = props.width ?? 'fit-content';
+	const highlightMode = props.highlightMode ?? 'auto';
+
+	const lines = useMemo(() => props.code.split('\n'), [props.code]);
+	const tokenLines = useTokenLines(props.code, language, props.tokenizer);
+	const { copy, copied } = useCodeCopy(props.code, props.onCopy);
+	const highlighted = useMemo(
+		() => new Set(props.highlightLines ?? []),
+		[props.highlightLines],
+	);
+
+	const canCollapse = isCollapsible && lines.length > collapsibleThreshold;
+	const [isExpanded, setIsExpanded] = useState(false);
+	const collapsed = canCollapse && !isExpanded;
+
+	const codeRef = useRef<HTMLElement | null>(null);
+	const rootRef = useRef<HTMLElement | null>(null);
+
+	// 'ranges' needs the CSS Custom Highlight API; WebKit exposes the objects
+	// but paints ::highlight() unreliably in code blocks — it takes spans.
+	const useRanges =
+		(highlightMode === 'ranges' ||
+			(highlightMode === 'auto' && !isWebKitOnly())) &&
+		hasHighlightAPI() &&
+		!isWebKitOnly();
+
+	useEffect(() => {
+		if (!useRanges || collapsed) {
+			return;
+		}
+
+		const el = codeRef.current;
+		if (!el || tokenLines.length === 0) {
+			return;
+		}
+
+		return applyHighlightRangesChunked(el, tokenLines as any);
+	}, [useRanges, collapsed, tokenLines]);
+
+	const hasHeader =
+		props.title != null || hasLanguageLabel || hasCopyButton || canCollapse;
+
+	const rootStyle = {
+		width: width === 'fit-content' ? 'fit-content' : width,
+		...props.style,
+	};
+
+	<div
+		ref={(e: any) => {
+			rootRef.current = e;
+			applyEscapeProps(e, props);
+			if (e && props.syntaxTheme) applySyntaxTheme(e, props.syntaxTheme);
+		}}
+		id={props.id}
+		className={[
+			'vx-codeblock',
+			`vx-codeblock--${container}`,
+			`vx-codeblock--${size}`,
+			isWrapped && 'vx-codeblock--wrap',
+			collapsed && 'vx-codeblock--collapsed',
+			useRanges && 'vx-codeblock--ranges',
+			props.className,
+		]}
+		style={rootStyle}
+	>
+		{hasHeader ? (
+			<div className="vx-codeblock-header">
+				<div className="vx-codeblock-header-text">
+					{props.title != null ? (
+						<span className="vx-codeblock-title">{props.title}</span>
+					) : null}
+					{hasLanguageLabel ? (
+						<span className="vx-codeblock-lang">{language}</span>
+					) : null}
+				</div>
+				<div className="vx-codeblock-header-actions">
+					{hasCopyButton ? (
+						<button
+							type="button"
+							className="vx-codeblock-copy"
+							aria-label={copied ? 'Copied' : 'Copy code'}
+							title={copied ? 'Copied' : 'Copy'}
+							onClick={copy}
+						>
+							<Icon name={copied ? 'xplat-check' : 'xplat-copy'} size={14} />
+						</button>
+					) : null}
+					{canCollapse ? (
+						<button
+							type="button"
+							className="vx-codeblock-collapse"
+							aria-expanded={isExpanded}
+							aria-label={isExpanded ? 'Collapse code' : 'Expand code'}
+							title={isExpanded ? 'Collapse' : 'Expand'}
+							onClick={() => setIsExpanded((v) => !v)}
+						>
+							<Icon name={isExpanded ? 'xplat-chevron-up' : 'xplat-chevron-down'} size={14} />
+						</button>
+					) : null}
+				</div>
+			</div>
+		) : null}
+		<div
+			className="vx-codeblock-body"
+			style={props.maxHeight != null ? { maxHeight: cssLength(props.maxHeight) } : undefined}
+		>
+			<pre className="vx-codeblock-pre">
+				<code
+					ref={(e: any) => {
+						codeRef.current = e;
+					}}
+					className="vx-codeblock-code"
+				>
+					{lines.map((line, i) => {
+						const lineNo = i + 1;
+						const isHl = highlighted.has(lineNo);
+						const lineEl = (
+							<div
+								data-line={lineNo}
+								className={[
+									'vx-codeblock-line',
+									isHl && 'vx-codeblock-line--highlighted',
+								]}
+							>
+								{useRanges ? (line === '' ? '​' : line) : <CodeLine line={line} tokens={tokenLines[i]} />}
+							</div>
+						);
+
+						return hasLineNumbers ? (
+							<div key={lineNo} className="vx-codeblock-row">
+								<span className="vx-codeblock-gutter" aria-hidden="true">
+									{lineNo}
+								</span>
+								{lineEl}
+							</div>
+						) : (
+							lineEl
+						);
+					})}
+				</code>
+			</pre>
+		</div>
+	</div>
+}

package/src/Collapsible.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useState } from 'octane';
 import type { CollapsibleProps } from "./props";
 import { cx } from "./cx";

package/src/Collapsible.tsrx

@@ -3,7 +3,7 @@ import { useState } from 'octane';
 import type { CollapsibleProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
-import { Pressable } from './Pressable.tsrx';
+import { Pressable } from './Pressable';
 
 /** Self-drawn collapsible — `trigger` toggles `children` between shown and
  *  hidden (unmounted). Controlled via `open`/`onOpenChange`, uncontrolled

package/src/CommandPalette.macos.tsrx

@@ -1,58 +1,109 @@
-/** @jsxImportSource @xplat/macos/renderer */
-import { useState } from 'octane';
-import type { CommandPaletteProps, MenuItem } from "./props";
-import { cx } from "./cx";
-import { Overlay } from './surfaces.macos.tsrx';
-import { TextInput } from './text-controls.macos.tsrx';
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane';
+import type { CommandPaletteItem, CommandPaletteProps } from './props';
+import { createCommandPaletteController } from './command-palette-state';
+import { useStore } from './use-store.tsrx';
+import { groupTypeaheadItems } from './typeahead-source';
+import { cx } from './cx';
+import { useEffect, useRef } from 'octane';
+import { Pressable } from './Pressable.macos.tsrx';
 import { Icon } from './Icon.macos.tsrx';
+import { LayerDepthProvider, useLayerDismissal } from './layer-dismissal.tsrx';
+import { scrollCommandPaletteHighlight } from './command-palette-scroll.macos';
+import { bindCommandPaletteKeys } from './command-palette-keys.macos';
 
-/** CommandPalette — in-window overlay: search field + filtered action
- *  list. Shade dismisses; Enter selects the first match. */
-export function CommandPalette(props: CommandPaletteProps) @{
-	const [query, setQuery] = useState('');
-
-	const setOpen = (next: boolean) => {
-		if (!next) setQuery('');
-		props.onOpenChange?.(next);
-	};
-
-	const shown = query
-		? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase()))
-		: props.items;
-
-	const select = (item: MenuItem) => {
-		if (item.disabled) return;
-		setOpen(false);
-		item.onSelect?.();
-	};
-
-	<Overlay open={props.open} shadeCover={true} onDismiss={() => setOpen(false)} className="vx-cmdk-layer">
-		<flexboxlayout
-			className={cx('vx-commandpalette', props.className)}
-			style={props.style}
-			id={props.id}
-			horizontalAlignment="center"
-			verticalAlignment="top"
-			marginTop={80}
-		>
-			<TextInput
-				className="vx-cmdk-search"
-				placeholder={props.placeholder ?? 'Type a command…'}
-				value={query}
-				onChange={setQuery}
-				onSubmit={() => { if (shown.length && !shown[0].disabled) select(shown[0]); }}
-			/>
-			<flexboxlayout className="vx-menu-list vx-cmdk-list">
-				@for (const item of shown; key item.key) {
-					<flexboxlayout
-						className={cx('vx-menu-item', item.disabled && 'vx-menu-item--disabled')}
-						onTap={item.disabled ? undefined : () => select(item)}
-					>
-						{item.icon ? <Icon name={item.icon} /> : null}
-						{item.label != null ? <label className="vx-menu-item-label" text={item.label} /> : null}
+/** Content owns field adapters; the declaring root owns dismissal and focus return. */
+function PaletteBody<T extends CommandPaletteItem>(props: { options: CommandPaletteProps<T>; controller: ReturnType<typeof createCommandPaletteController<T>>; depth: number }) @{
+	const options = props.options;
+	const controller = props.controller;
+	const state = useStore(controller.store);
+	const input = useRef<any>(null);
+	const rows = useRef(new Map<string, any>());
+	const groups = useMemo(() => groupTypeaheadItems(state.results), [state.results]);
+	useEffect(() => {
+		if (!state.open) return;
+		// The separate root renders before AppKit attaches it to its sheet.
+		let unbind: (() => void) | undefined;
+		const timer = setTimeout(() => {
+			if (!input.current?.window) return;
+			unbind = bindCommandPaletteKeys(input.current, (event) => {
+				controller.keyDown(event);
+				if (['ArrowDown', 'ArrowUp', 'PageUp', 'PageDown'].includes(event.key)) {
+					scrollCommandPaletteHighlight(rows.current.get(controller.store.get().highlighted ?? ''));
+				}
+			}, true, controller.search);
+		}, 0);
+
+		return () => { clearTimeout(timer); unbind?.(); };
+	}, [state.open]);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			const id = state.highlighted ?? state.results[0]?.id;
+			scrollCommandPaletteHighlight(rows.current.get(id ?? ''));
+		}, 0);
+
+		return () => clearTimeout(timer);
+	}, [state.results]);
+
+	<LayerDepthProvider value={props.depth}>
+	<flexboxlayout flexDirection="column" className={cx('vx-commandpalette', props.options.className)} style={{ ...(options.width != null ? { width: options.width } : {}), ...options.style }} id={props.options.id} accessibilityLabel={props.options.label ?? 'Command palette'}>
+		<flexboxlayout flexDirection="row" className="vx-cmdk-input-row">
+			<textfield ref={(view: any) => { input.current = view; }} id={`${options.id ?? 'command-palette'}-query`} className="vx-cmdk-search" accessibilityLabel={options.label ?? 'Command palette'} placeholder={options.placeholder ?? 'Search commands…'} value={state.query} onTextChange={controller.search} />
+			<Pressable id={`${props.options.id ?? 'command-palette'}-clear`} onPress={() => props.controller.search('')} accessibilityLabel="Clear search"><label text="Clear" /></Pressable>
+			<Pressable id={`${props.options.id ?? 'command-palette'}-cancel`} onPress={props.controller.close} accessibilityLabel="Cancel"><label text="Cancel" /></Pressable>
+		</flexboxlayout>
+		<label id={`${props.options.id ?? 'command-palette'}-status`} className="vx-cmdk-status" text={state.status === 'loading' ? props.options.loadingText ?? 'Loading…' : state.status === 'error' ? props.options.errorText ?? 'Could not load commands. Try again.' : state.status === 'ready' && !state.results.length ? state.query.trim() ? props.options.emptySearchText ?? 'No results' : props.options.emptyBootstrapText ?? 'Type to search' : ''} />
+		{state.status === 'error' ? <Pressable onPress={() => props.controller.search(state.query)} accessibilityLabel="Retry"><label text="Retry" /></Pressable> : null}
+		<scrollview className="vx-cmdk-list" style={{ height: options.maxHeight ?? 320 }}>
+			<flexboxlayout flexDirection="column" className="vx-menu-list">
+				@for (const group of groups; index gi; key group.heading ?? gi) {
+					<flexboxlayout flexDirection="column" accessibilityLabel={group.heading ?? undefined}>
+						{group.heading != null ? <label className="vx-cmdk-heading" text={group.heading} /> : null}
+						@for (const item of group.items; key item.id) {
+							<Pressable ref={(view: any) => { if (view) rows.current.set(item.id, view); else rows.current.delete(item.id); }} id={`${props.options.id ?? 'command-palette'}-item-${item.id}`} className={cx('vx-menu-item', item.disabled && 'vx-menu-item--disabled', item.id === state.highlighted && 'vx-cmdk-highlighted')} disabled={item.disabled} accessibilityLabel={item.label} accessibilityState={{ disabled: item.disabled, selected: item.id === state.selected }} onPress={() => props.controller.select(item.id)}>
+								{props.options.renderItem ? props.options.renderItem(item, item.id === state.selected) : <>
+									{item.icon ? <Icon name={item.icon} /> : null}
+									<flexboxlayout flexDirection="column" className="vx-cmdk-item-content"><label className="vx-menu-item-label" text={item.label} />{item.description ? <label className="vx-cmdk-description" text={item.description} /> : null}</flexboxlayout>
+									{item.shortcut ? <label className="vx-cmdk-shortcut" text={item.shortcut} /> : null}
+								</>}
+							</Pressable>
+						}
 					</flexboxlayout>
 				}
 			</flexboxlayout>
-		</flexboxlayout>
-	</Overlay>
+		</scrollview>
+		{props.options.footer != null && props.options.footer !== false ? <flexboxlayout className="vx-cmdk-footer">{props.options.footer}</flexboxlayout> : null}
+	</flexboxlayout>
+	</LayerDepthProvider>
+}
+
+/** AppKit window-modal sheet using the shared host presenter and dismissal registry. */
+export function CommandPalette<T extends CommandPaletteItem>(options: CommandPaletteProps<T>) @{
+	const controller = useMemo(() => createCommandPaletteController(() => options), []);
+	useEffect(() => controller.configure(options), [options.open, options.searchSource, options.items, options.searchMode, options.value, options.onOpenChange, options.onValueChange]);
+	useEffect(() => () => controller.dispose(), []);
+	const state = useStore(controller.store);
+	const anchor = useRef<any>(null);
+	const sheet = useRef<any>(null);
+	const dismissal = useLayerDismissal({ get active() { return state.open; }, isPresent: () => !!sheet.current, dismiss: controller.close });
+	useEffect(() => {
+		if (!state.open) return;
+		sheet.current = (globalThis as any).__xplatAppKit?.presentSheet?.(anchor.current, {
+			component: PaletteBody, props: { options, controller, depth: dismissal.depth },
+			minWidth: typeof options.width === 'number' ? options.width : 480,
+			onDismissed: controller.close,
+		});
+
+		if (!sheet.current) {
+			console.warn('[octane-xplat] CommandPalette requires an AppKit sheet presenter.');
+			controller.close();
+		}
+
+		return () => { sheet.current?.close(); sheet.current = null; };
+	}, [state.open]);
+
+	useEffect(() => { sheet.current?.update({ options, controller, depth: dismissal.depth }); }, [options]);
+
+	<flexboxlayout ref={(view: any) => { anchor.current = view; }} style={{ width: 0, height: 0 }} />
 }