@octane-xplat/ui 0.6.0 → 0.7.1

package/src/RadioGroup.web.tsrx

@@ -0,0 +1,43 @@
+import type { RadioGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="radiogroup"
+		aria-label={props.accessibilityLabel}
+		className={['vx-radio-group', props.horizontal ? 'vx-radio-group--row' : undefined, props.className]}
+		style={props.style}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<div
+					key={opt.value}
+					role="radio"
+					aria-checked={selected}
+					aria-disabled={disabled || undefined}
+					tabIndex={disabled ? undefined : 0}
+					className={['vx-radio-row', selected ? 'vx-radio--on' : undefined, disabled ? 'vx-radio--disabled' : undefined]}
+					onClick={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+					onKeyDown={(e: any) => {
+						if (disabled) return;
+						if (e.key === ' ' || e.key === 'Enter') {
+							e.preventDefault();
+							props.onValueChange?.(opt.value);
+						}
+					}}
+				>
+					<div className="vx-radio" aria-hidden="true">
+						{selected ? <div className="vx-radio-dot" /> : null}
+					</div>
+					{opt.label != null ? <span className="vx-radio-label">{opt.label}</span> : null}
+				</div>
+			);
+		})}
+	</div>
+}

package/src/RichText.tsrx

@@ -0,0 +1,40 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RichTextProps, RichTextSpanProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+import { layoutChildProps } from './layout-child';
+
+/** Native rich text is a Label hosting one FormattedString. The driver knows
+ * how to parent FormattedString → Span, while each run writes its text
+ * directly because Span is not a TextBase host for #text children. */
+export function RichText(props: RichTextProps) @{
+	<label
+		id={props.id}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		{...layoutChildProps(props)}
+		className={cx('vx-rich-text', props.className)}
+		style={props.style}
+		whiteSpace="normal"
+	>
+		<formattedstring>{props.children}</formattedstring>
+	</label>
+}
+
+function runText(props: RichTextSpanProps): string {
+	if (props.text !== undefined) return props.text;
+	if (typeof props.children === 'string' || typeof props.children === 'number') {
+		return String(props.children);
+	}
+
+	return '';
+}
+
+/** A FormattedString run. `onLinkTap` is NativeScript's per-span tap event. */
+export function RichTextSpan(props: RichTextSpanProps) @{
+	<span
+		text={runText(props)}
+		className={cx(props.className)}
+		style={props.style}
+		onLinkTap={props.onPress}
+	/>
+}

package/src/RichText.web.tsrx

@@ -0,0 +1,24 @@
+import type { RichTextProps, RichTextSpanProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { layoutChildProps } from './layout-child.web';
+
+export function RichText(props: RichTextProps) @{
+	<span
+		id={props.id}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		className={['vx-rich-text', props.className]}
+		{...layoutChildProps(props, props.style)}
+	>
+		{props.children}
+	</span>
+}
+
+export function RichTextSpan(props: RichTextSpanProps) @{
+	<span
+		className={props.className}
+		style={props.style}
+		onClick={() => props.onPress?.()}
+	>
+		{props.text ?? props.children}
+	</span>
+}

package/src/RouteHost.macos.tsrx

@@ -0,0 +1,18 @@
+/** @jsxImportSource @xplat/macos/renderer */
+
+type RouteHostProps = {
+	screen: any
+	layouts: any[]
+	params: Record<string, unknown>
+}
+
+export function RouteHost(props: RouteHostProps) @{
+	const Screen = props.screen
+	let child = <Screen {...props.params} />
+	for (let i = props.layouts.length - 1; i >= 0; i--) {
+		const Layout = props.layouts[i]
+		const nested = child
+		child = <Layout>{nested}</Layout>
+	}
+	<>{child}</>
+}

package/src/RouteHost.mobile.tsrx

@@ -0,0 +1,44 @@
+/** @jsxImportSource @nativescript-community/octane */
+
+import type { Route } from './props';
+
+type RouteHostProps = {
+	screen: any;
+	layouts: any[];
+	params: Record<string, unknown>;
+};
+
+/** Props a pushed screen receives inside a swap-pane host — the same shape
+ *  commitRoute stamps on a native frame.navigate (params + context + _stack
+ *  for self-pops + _pushed + loader results). Shared by the self-drawn Tabs
+ *  pane and the platform tab bars' pane roots. */
+export function screenParamsFor(route: Route): Record<string, unknown> {
+	const params: Record<string, unknown> = {
+		...route.params,
+		...route.context,
+		_stack: route.stack,
+		_pushed: true,
+	};
+
+	if (Object.prototype.hasOwnProperty.call(route, 'loaderData')) {
+		params.data = route.loaderData;
+	}
+
+	if (Object.prototype.hasOwnProperty.call(route, 'loaderError')) {
+		params.error = route.loaderError;
+	}
+
+	return params;
+}
+
+export function RouteHost(props: RouteHostProps) @{
+	const Screen = props.screen;
+	let child = <Screen {...props.params} />;
+	for (let i = props.layouts.length - 1; i >= 0; i--) {
+		const Layout = props.layouts[i];
+		const nested = child;
+		child = <Layout>{nested}</Layout>;
+	}
+
+	<>{child}</>
+}

package/src/Row.macos.tsrx

@@ -0,0 +1,26 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { RowProps } from './props'
+import { cx } from './cx'
+import { layoutChildProps } from './layout-child'
+
+export function Row(props: RowProps) @{
+	<flexboxlayout
+		id={props.id}
+		{...layoutChildProps(props)}
+		flexDirection="row"
+		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>
+}

package/src/Row.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RowProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { layoutChildProps } from './layout-child';
+import { usePan } from './pan.tsrx';
+export function Row(props: RowProps) @{
+	<flexboxlayout
+		id={props.id}
+		ref={(v: any) => { if (v) { applyEscapeProps(v, props); props.bind?.(v); } }}
+		flexDirection="row"
+		className={cx(props.className)}
+		style={props.style}
+		{...layoutChildProps(props)}
+		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/Row.web.tsrx

@@ -0,0 +1,27 @@
+import { useRef } from 'octane';
+import type { RowProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { layoutChildProps } from './layout-child.web';
+import { usePan } from './pan.web.tsrx';
+export function Row(props: RowProps) @{
+	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-row', 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>
+}

package/src/SafeArea.macos.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { SafeAreaProps } from './props'
+
+export function SafeArea(props: SafeAreaProps) @{
+	<flexboxlayout flexDirection="column" className={props.className} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/SafeArea.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { Application } from '@nativescript/core';
+import type { SafeAreaProps } from './props';
+import { cx } from './cx';
+import { useSafeAreaInsets } from './safeAreaInsets.tsrx';
+
+export function SafeArea(props: SafeAreaProps) @{
+	const measuredInsets = useSafeAreaInsets();
+	const insets = props.ignoreSafeArea ? { top: 0, right: 0, bottom: 0, left: 0 } : measuredInsets;
+	const platformProps = Application.ios != null ? props.ios : props.android;
+
+	<flexboxlayout
+		id={props.id}
+		ref={(host: any) => { if (host && platformProps) Object.assign(host, platformProps); }}
+		className={cx('vx-safe-area', props.className)}
+		style={{ ...props.style, paddingTop: insets.top, paddingRight: insets.right, paddingBottom: insets.bottom, paddingLeft: insets.left }}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/SafeArea.web.tsrx

@@ -0,0 +1,24 @@
+import type { SafeAreaProps } from './props';
+import { useSafeAreaInsets } from './safeAreaInsets.web.tsrx';
+
+function applyWebProps(node: any, bag?: Record<string, any>) {
+	if (!node || !bag) return;
+	for (const [key, value] of Object.entries(bag)) {
+		if (key.includes('-')) node.setAttribute(key, String(value));
+		else node[key] = value;
+	}
+}
+
+export function SafeArea(props: SafeAreaProps) @{
+	const measuredInsets = useSafeAreaInsets();
+	const insets = props.ignoreSafeArea ? { top: 0, right: 0, bottom: 0, left: 0 } : measuredInsets;
+
+	<div
+		id={props.id}
+		ref={(node: any) => applyWebProps(node, props.web)}
+		className={['vx-safe-area', props.className]}
+		style={{ ...props.style, paddingTop: insets.top, paddingRight: insets.right, paddingBottom: insets.bottom, paddingLeft: insets.left }}
+	>
+		{props.children}
+	</div>
+}

package/src/Screen.macos.tsrx

@@ -0,0 +1,14 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ScreenProps } from './props'
+import { cx } from './cx'
+
+export function Screen(props: ScreenProps) @{
+	<flexboxlayout
+		id={props.id}
+		flexDirection="column"
+		className={cx('vx-screen', props.className)}
+		style={props.style}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Screen.tsrx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ScreenProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { registerRootLayout, unregisterRootLayout } from "./root-layout.mobile";
+import { attachTapToBlur } from "./tap-to-blur.mobile";
+// The screen shell is a RootLayout so RootLayout.open() can layer overlays
+// over it (decision #22). Self-registers on loaded/unloaded — overlay and
+// sheet services mount on the most recently mounted shell (topRootLayout).
+// Children go in a single inner column flexbox: RootLayout gives EVERY
+// direct child the full root bounds — siblings stack in document order and
+// a later sibling's invisible area eats taps meant for earlier ones
+// (measured: pushed demo pages' header Row got the full 670pt root height,
+// dead under the content View's overlap). One inner child = one bounds slot.
+export function Screen(props: ScreenProps) @{
+	<rootlayout
+		id={props.id}
+		ref={(v: any) => applyEscapeProps(v, props)}
+		onLoaded={(e: any) => registerRootLayout(e.object)}
+		onUnloaded={(e: any) => unregisterRootLayout(e.object)}
+	>
+		<flexboxlayout
+			flexDirection="column"
+			className={cx(props.className)}
+			style={props.style}
+			ref={(v: any) => { if (v) attachTapToBlur(v); }}
+		>
+			{props.children}
+		</flexboxlayout>
+	</rootlayout>
+}

package/src/Screen.web.tsrx

@@ -0,0 +1,7 @@
+import type { ScreenProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+export function Screen(props: ScreenProps) @{
+	<div id={props.id} ref={(e: any) => applyEscapeProps(e, props)} className={['vx-screen', props.className]} style={props.style}>
+		{props.children}
+	</div>
+}

package/src/ScrollBox.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { View } from './View.tsrx';
+import type { ScrollBoxProps } from './props';
+
+/** Inline native content shell. A nested ListView owns its own scrolling. */
+export function ScrollBox(props: ScrollBoxProps) @{
+	<View {...props}>{props.children}</View>
+}

package/src/ScrollBox.web.tsrx

@@ -0,0 +1,7 @@
+import { ScrollView } from './ScrollView.web.tsrx';
+import type { ScrollBoxProps } from './props';
+
+/** Scrollable web content shell; native uses an inline View counterpart. */
+export function ScrollBox(props: ScrollBoxProps) @{
+	<ScrollView {...props}>{props.children}</ScrollView>
+}

package/src/ScrollView.macos.tsrx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ScrollViewProps } from './props'
+
+type AppKitScrollEvent = { verticalOffset: number; viewportHeight: number; contentHeight: number }
+type AppKitScrollViewProps = ScrollViewProps & { onScroll?: (event: AppKitScrollEvent) => void }
+
+export function ScrollView(props: AppKitScrollViewProps) @{
+	<scrollview
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+		onScroll={props.onScroll}
+	>
+		<flexboxlayout flexDirection="column">{props.children}</flexboxlayout>
+	</scrollview>
+}
+
+export const ScrollBox = ScrollView

package/src/ScrollView.tsrx

@@ -0,0 +1,117 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import type { ScrollViewProps } from "./props";
+import type { RefreshConfig, RefreshController } from './refresh';
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { layoutChildProps } from './layout-child';
+import { ActivityIndicator } from './ActivityIndicator.tsrx';
+import { REFRESH_HEADER_HEIGHT } from './refresh-metrics';
+import { createPullToRefresh } from './refresh';
+
+/** Pull-enabled variant — grid wrapper hosts the scroller plus the
+ *  self-drawn indicator strip; refresh.ts owns the gesture. Only
+ *  vertical scrollers pull (horizontal is ignored). */
+function ScrollViewRefreshable(props: ScrollViewProps) @{
+	const cfg = useRef<RefreshConfig>({});
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold,
+	};
+
+	const ctl = useRef<RefreshController | null>(null);
+	const scroller = useRef<any>(null);
+	const indicator = useRef<any>(null);
+
+	useEffect(() => {
+		if (!scroller.current || !indicator.current) return;
+		ctl.current = createPullToRefresh({
+			scroller: scroller.current,
+			indicator: indicator.current,
+			isAtTop: () => scroller.current?.verticalOffset <= 0,
+			cfg,
+		});
+
+		return () => {
+			ctl.current?.detach();
+			ctl.current = null;
+		};
+	}, []);
+
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing]);
+
+	<gridlayout
+		ref={(v: any) => {
+			if (v?.ios) v.ios.clipsToBounds = true;
+		}}
+		{...layoutChildProps(props)}
+		className={cx('vx-refresh-wrap', props.className)}
+		style={props.style}
+	>
+		<scrollview
+			ref={(v: any) => {
+				scroller.current = v;
+				applyEscapeProps(v, props);
+			}}
+			id={props.id}
+			className="vx-scroll"
+			orientation={props.horizontal ? 'horizontal' : 'vertical'}
+			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}
+		>
+			<flexboxlayout flexDirection={props.horizontal ? 'row' : 'column'}>
+				{props.children}
+			</flexboxlayout>
+		</scrollview>
+		<flexboxlayout
+			ref={(v: any) => {
+				indicator.current = v;
+			}}
+			className="vx-refresh"
+			verticalAlignment="top"
+			height={REFRESH_HEADER_HEIGHT}
+			translateY={-REFRESH_HEADER_HEIGHT}
+		>
+			<ActivityIndicator />
+		</flexboxlayout>
+	</gridlayout>
+}
+
+/** Scroll container — NS <scrollview>. NS ScrollView hosts exactly one
+ *  child view, so children are wrapped in a column flexboxlayout — the
+ *  same content-container indirection RN's ScrollView does internally.
+ *  `horizontal` maps to NS's orientation prop. With `onRefresh`/`refreshing`
+ *  the leaf wraps in a pull-to-refresh host (self-drawn indicator). */
+export function ScrollView(props: ScrollViewProps) @{
+	@if (!props.horizontal && (props.onRefresh != null || props.refreshing != null)) {
+		<ScrollViewRefreshable {...props} />
+	} @else {
+		<scrollview
+			ref={(v: any) => applyEscapeProps(v, props)}
+			id={props.id}
+			{...layoutChildProps(props)}
+			className={cx(props.className)}
+			style={props.style}
+			orientation={props.horizontal ? 'horizontal' : 'vertical'}
+			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}
+		>
+			<flexboxlayout flexDirection={props.horizontal ? 'row' : 'column'}>
+				{props.children}
+			</flexboxlayout>
+		</scrollview>
+	}
+}

package/src/ScrollView.web.tsrx

@@ -0,0 +1,109 @@
+import { useEffect, useRef } from 'octane';
+import type { ScrollViewProps } from "./props";
+import type { RefreshConfig, RefreshController } from './refresh.web';
+import { applyEscapeProps } from "./escape-props";
+import { layoutChildProps } from './layout-child.web';
+import { ActivityIndicator } from './ActivityIndicator.web.tsrx';
+import { REFRESH_HEADER_HEIGHT } from './refresh-metrics';
+import { createPullToRefresh } from './refresh.web';
+
+/** Pull-enabled variant — a relative wrapper hosts the scroller plus the
+ *  self-drawn indicator strip; refresh.web.ts owns the gesture. Only
+ *  vertical scrollers pull (horizontal is ignored). */
+function ScrollViewRefreshable(props: ScrollViewProps) @{
+	const cfg = useRef<RefreshConfig>({});
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold,
+	};
+
+	const ctl = useRef<RefreshController | null>(null);
+	const scroller = useRef<HTMLElement | null>(null);
+	const indicator = useRef<HTMLElement | null>(null);
+
+	useEffect(() => {
+		if (!scroller.current || !indicator.current) return;
+		ctl.current = createPullToRefresh({
+			scroller: scroller.current,
+			indicator: indicator.current,
+			cfg,
+		});
+
+		return () => {
+			ctl.current?.detach();
+			ctl.current = null;
+		};
+	}, []);
+
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing]);
+
+	<div
+		{...layoutChildProps(props, { ...props.style })}
+		className={['vx-refresh-wrap', props.className]}
+	>
+		<div
+			ref={(el: any) => {
+				indicator.current = el;
+			}}
+			className="vx-refresh"
+			style={{ transform: `translateY(${-REFRESH_HEADER_HEIGHT}px)` }}
+			aria-hidden="true"
+		>
+			<ActivityIndicator />
+		</div>
+		<div
+			ref={(el: any) => {
+				scroller.current = el;
+				applyEscapeProps(el, props);
+			}}
+			id={props.id}
+			className="vx-scroll"
+			style={{ overflowY: 'auto' }}
+			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>
+	</div>
+}
+
+/** Scroll container — a div with overflow scrolling. Native wraps
+ *  children in a column container; web divs already stack vertically.
+ *  With `onRefresh`/`refreshing` the leaf wraps in a pull-to-refresh
+ *  host (self-drawn indicator). */
+export function ScrollView(props: ScrollViewProps) @{
+	@if (!props.horizontal && (props.onRefresh != null || props.refreshing != null)) {
+		<ScrollViewRefreshable {...props} />
+	} @else {
+		<div
+			ref={(e: any) => applyEscapeProps(e, props)}
+			id={props.id}
+			className={['vx-scroll', props.className]}
+			{...layoutChildProps(props, {
+				...(props.horizontal ? { overflowX: 'auto' } : { overflowY: 'auto' }),
+				...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>
+	}
+}