@octane-xplat/ui 0.9.0 → 0.10.0

package/src/PowerSearch.tsrx

@@ -0,0 +1,82 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useMemo, useRef, useState } from 'octane'
+import type { PowerSearchProps, PowerSearchFilter, PartialFilter, PowerSearchHandle } from './props'
+import { SearchInput } from './SearchInput.tsrx'
+import { Icon } from './Icon'
+import { Button } from './Button.tsrx'
+import { Pressable } from './Pressable'
+import { Popover } from './Popover'
+import { PowerSearchToken } from './PowerSearchToken'
+import { PowerSearchFilterEditor } from './PowerSearchFilterEditor'
+import { createInternalConfig, createPowerSearchSource } from './power-search-config'
+import { powerSearchTranslate } from './power-search-strings'
+import { cx } from './cx'
+
+export function PowerSearch(props: PowerSearchProps) @{
+	const anchor = useRef<any>(null)
+	const inputHandle = useRef<any>(null)
+	const [query, setQuery] = useState('')
+	const [editing, setEditing] = useState<{filter:PartialFilter; index:number} | null>(null)
+	const [open, setOpen] = useState(false)
+	const internal = useMemo(() => createInternalConfig(props.config), [props.config])
+	const source = useMemo(() => createPowerSearchSource(internal, props.maxSearchResults ?? 10), [internal, props.maxSearchResults])
+	const results = (source.search(query) as any[]).slice(0, props.maxSearchResults ?? 10)
+	const Suggestion: any = Pressable
+	useEffect(()=>{props.handleRef?.({focusTypeahead:()=>inputHandle.current?.focus?.(),blurTypeahead:()=>inputHandle.current?.blur?.()} as PowerSearchHandle)},[props.handleRef])
+	useEffect(()=>{if(props.hasAutoFocus)inputHandle.current?.focus?.()},[props.hasAutoFocus])
+	const chooseField = (item:any) => {
+		const field = internal.getField(item.auxiliaryData?.fieldKey ?? item.id)
+		if (!field) return
+		setEditing({filter:{field:field.key, operator:item.auxiliaryData?.operatorKey ?? field.defaultOperator, value:item.auxiliaryData?.filterValue}, index:-1})
+		setOpen(false)
+	}
+
+	const save = (filter:PowerSearchFilter|null) => {
+		if (!editing) return
+		if (filter) {
+			const next = [...props.filters]
+			const changeType = editing.index < 0 ? 'add' : 'edit'
+			const index = editing.index < 0 ? next.length : editing.index
+			if (changeType === 'add') next.push(filter); else next[index] = filter
+			props.onChange(next, changeType, index)
+		}
+
+		setEditing(null); setQuery('')
+	}
+
+	const remove = (index:number) => props.onChange(props.filters.filter((_f,i)=>i!==index), 'remove', index)
+	const status = props.status
+	const Editor: any = editing
+		? props.components?.[internal.getOperator(editing.filter.field, editing.filter.operator ?? '')?.value.type ?? 'string']?.Editor ?? PowerSearchFilterEditor
+		: PowerSearchFilterEditor
+
+	<flexboxlayout id={props.id} className={cx('vx-power-search', `vx-power-search--size-${props.size ?? 'md'}`, props.isDisabled && 'vx-power-search--disabled', props.className)} style={props.style} ref={(v:any)=>{anchor.current=v}}>
+		<flexboxlayout className="vx-power-search-row">
+			{props.startIcon ? typeof props.startIcon === 'string' ? <Icon className="vx-power-search-start-icon" name={props.startIcon} /> : props.startIcon : null}
+			{props.filters.map((filter, index) => {
+				const field = internal.getField(filter.field), operator = internal.getOperator(filter.field, filter.operator)
+				if (!field || !operator) return null
+				const Token = props.components?.[filter.value.type]?.Token ?? PowerSearchToken
+				return <Token key={`${filter.field}-${index}`} config={props.config} filter={filter} field={field} operator={operator} maxLength={props.maxTokenLength ?? 40} timezoneID={props.timezoneID} onPress={()=>!props.isReadOnly && setEditing({filter,index})} onRemove={props.isReadOnly ? undefined : ()=>remove(index)} isDisabled={props.isDisabled || props.isReadOnly} />
+			})}
+			<SearchInput ref={(h:any)=>inputHandle.current=h} className="vx-power-search-input" value={query} placeholder={props.placeholder ?? powerSearchTranslate('@astryx.powersearch.placeholder')} onChange={(value:string)=>{setQuery(value);setOpen(true)}} onFocus={()=>{props.onFocus?.();setOpen(true)}} onBlur={props.onBlur} isDisabled={props.isDisabled} isReadOnly={props.isReadOnly} isLoading={props.isLoading} description={props.disabledMessage} hasClear={false} accessibilityLabel={props.label ?? 'Search'} />
+			{props.resultCount != null ? <label className="vx-power-search-count" accessibilityLiveRegion={'polite' as any} text={String(props.resultCount)} /> : null}
+			{props.endContent}
+			{props.hasClear !== false && props.filters.length > 0 ? <Button label="Clear" variant="ghost" onPress={()=>props.onChange([], 'remove', -1)} isDisabled={props.isDisabled} /> : null}
+		</flexboxlayout>
+		<Popover anchor={anchor} open={open && !editing && !props.isDisabled} placement="bottom" onDismiss={()=>setOpen(false)} className="vx-power-search-results" style={props.menuWidth ? {width:props.menuWidth} : undefined}>
+			<flexboxlayout className="vx-power-search-result-list">
+				{results.map((item:any)=><Suggestion key={item.id} className="vx-power-search-result" onPress={()=>chooseField(item)}><label text={item.label} /></Suggestion>)}
+				{results.length === 0 ? <label className="vx-power-search-empty" text="No results" /> : null}
+			</flexboxlayout>
+		</Popover>
+		<Popover anchor={anchor} open={!!editing} placement="bottom" onDismiss={()=>setEditing(null)} className="vx-power-search-edit">
+			{editing ? <Editor config={props.config} filter={editing.filter} mode={editing.index<0?'create':'edit'} onSave={save} onCancel={()=>setEditing(null)} saveButtonLabel={props.popoverSaveButtonLabel} isReadOnly={props.isReadOnly} timezoneID={props.timezoneID} /> : null}
+		</Popover>
+		{status?.message ? <label className={cx('vx-power-search-status', `vx-power-search-status--${status.type}`, `vx-power-search-status--${props.statusVariant ?? 'attached'}`)} text={status.message} /> : null}
+	</flexboxlayout>
+}
+
+export { PowerSearchToken, PowerSearchFilterEditor }
+export { resolveOperatorLabel, createPowerSearchConfig, usePowerSearchConfig } from './power-search-config'
+export type { FieldDefinition, InferData } from './props'

package/src/PowerSearch.web.tsrx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useRef, useState } from 'octane'
+import type { PowerSearchProps, PowerSearchFilter, PartialFilter, PowerSearchHandle } from './props'
+import { SearchInput } from './SearchInput.web.tsrx'
+import { Icon } from './Icon.web.tsrx'
+import { Button } from './Button.web.tsrx'
+import { Pressable } from './Pressable.web.tsrx'
+import { Popover } from './Popover.web.tsrx'
+import { PowerSearchToken } from './PowerSearchToken.web.tsrx'
+import { PowerSearchFilterEditor } from './PowerSearchFilterEditor.web.tsrx'
+import { createInternalConfig, createPowerSearchSource } from './power-search-config'
+import { powerSearchTranslate } from './power-search-strings'
+import { cx } from './cx'
+
+export function PowerSearch(props: PowerSearchProps) @{
+	const anchor = useRef<any>(null)
+	const [query,setQuery] = useState('')
+	const [editing,setEditing] = useState<{filter:PartialFilter;index:number}|null>(null)
+	const [open,setOpen] = useState(false)
+	const internal = useMemo(()=>createInternalConfig(props.config),[props.config])
+	const source = useMemo(()=>createPowerSearchSource(internal,props.maxSearchResults??10),[internal,props.maxSearchResults])
+	const results=(source.search(query) as any[]).slice(0,props.maxSearchResults??10)
+	const Suggestion:any=Pressable
+	const inputHandle:any = useRef(null)
+	useEffect(()=>{props.handleRef?.({focusTypeahead:()=>inputHandle.current?.focus?.(),blurTypeahead:()=>inputHandle.current?.blur?.()} as PowerSearchHandle)},[props.handleRef])
+	useEffect(()=>{if(props.hasAutoFocus)inputHandle.current?.focus?.()},[props.hasAutoFocus])
+	const choose=(item:any)=>{const field=internal.getField(item.auxiliaryData?.fieldKey??item.id);if(!field)return;setEditing({filter:{field:field.key,operator:item.auxiliaryData?.operatorKey??field.defaultOperator,value:item.auxiliaryData?.filterValue},index:-1});setOpen(false)}
+	const save=(filter:PowerSearchFilter|null)=>{if(!editing)return;if(filter){const next=[...props.filters], type=editing.index<0?'add':'edit', index=editing.index<0?next.length:editing.index;if(type==='add')next.push(filter);else next[index]=filter;props.onChange(next,type,index)}setEditing(null);setQuery('')}
+	const Token:any=PowerSearchToken
+	const Editor:any=PowerSearchFilterEditor
+
+	<div id={props.id} ref={(node:any)=>anchor.current=node} className={cx('vx-power-search',`vx-power-search--size-${props.size??'md'}`,props.isDisabled&&'vx-power-search--disabled',props.className)} style={props.style}>
+		<div className="vx-power-search-row">
+			{props.startIcon ? typeof props.startIcon==='string' ? <Icon className="vx-power-search-start-icon" name={props.startIcon}/> : props.startIcon : null}
+			{props.filters.map((filter,index)=>{const field=internal.getField(filter.field),operator=internal.getOperator(filter.field,filter.operator);if(!field||!operator)return null;return <Token key={`${filter.field}-${index}`} config={props.config} filter={filter} field={field} operator={operator} maxLength={props.maxTokenLength??40} timezoneID={props.timezoneID} onPress={()=>!props.isReadOnly&&setEditing({filter,index})} onRemove={props.isReadOnly?undefined:()=>props.onChange(props.filters.filter((_f,i)=>i!==index),'remove',index)} isDisabled={props.isDisabled||props.isReadOnly}/>})}
+			<SearchInput ref={(h:any)=>inputHandle.current=h} className="vx-power-search-input" value={query} placeholder={props.placeholder??powerSearchTranslate('@astryx.powersearch.placeholder')} onChange={(v:string)=>{setQuery(v);setOpen(true)}} onFocus={()=>{props.onFocus?.();setOpen(true)}} onBlur={props.onBlur} isDisabled={props.isDisabled} isReadOnly={props.isReadOnly} isLoading={props.isLoading} description={props.disabledMessage} hasClear={false} accessibilityLabel={props.label??'Search'} />
+			{props.resultCount!=null?<span className="vx-power-search-count" aria-live="polite">{String(props.resultCount)}</span>:null}{props.endContent}
+			{props.hasClear!==false&&props.filters.length>0?<Button label="Clear" variant="ghost" onPress={()=>props.onChange([],'remove',-1)} isDisabled={props.isDisabled}/>:null}
+		</div>
+		<Popover anchor={anchor} open={open&&!editing&&!props.isDisabled} placement="bottom" onDismiss={()=>setOpen(false)} className="vx-power-search-results" style={props.menuWidth?{width:props.menuWidth}:undefined}><div className="vx-power-search-result-list">{results.map((item:any)=><Suggestion key={item.id} className="vx-power-search-result" onPress={()=>choose(item)}>{item.label}</Suggestion>)}{results.length===0?<div className="vx-power-search-empty">No results</div>:null}</div></Popover>
+		<Popover anchor={anchor} open={!!editing} placement="bottom" onDismiss={()=>setEditing(null)} className="vx-power-search-edit">{editing?<Editor config={props.config} filter={editing.filter} mode={editing.index<0?'create':'edit'} onSave={save} onCancel={()=>setEditing(null)} saveButtonLabel={props.popoverSaveButtonLabel} isReadOnly={props.isReadOnly} timezoneID={props.timezoneID}/>:null}</Popover>
+		{props.status?.message?<div role={props.status.type==='error'?'alert':'status'} className={cx('vx-power-search-status',`vx-power-search-status--${props.status.type}`,`vx-power-search-status--${props.statusVariant??'attached'}`)}>{props.status.message}</div>:null}
+	</div>
+}
+
+export { PowerSearchToken } from './PowerSearchToken.web.tsrx'
+export { PowerSearchFilterEditor } from './PowerSearchFilterEditor.web.tsrx'
+export { resolveOperatorLabel, createPowerSearchConfig, usePowerSearchConfig } from './power-search-config'
+export type { FieldDefinition, InferData } from './props'

package/src/PowerSearchFilterEditor.macos.tsrx

@@ -0,0 +1,66 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useState } from 'octane'
+import type { PowerSearchConfig, PartialFilter, PowerSearchFilter, FilterValue } from './props'
+import { TextInput } from './text-controls.macos.tsrx'
+import { Button } from './controls.macos.tsrx'
+import { resolveOperatorLabel } from './power-search-config'
+import { powerSearchTranslate } from './power-search-strings'
+
+export interface PowerSearchFilterEditorProps {
+	config: PowerSearchConfig
+	filter: PartialFilter
+	mode: 'create' | 'edit'
+	onSave: (filter: PowerSearchFilter | null) => void
+	onCancel: () => void
+	saveButtonLabel?: string
+	isReadOnly?: boolean
+	timezoneID?: string
+}
+
+function initialValue(type: FilterValue['type']): FilterValue {
+	switch (type) {
+		case 'empty': return {type:'empty'}
+		case 'integer': return {type:'integer', value:0}
+		case 'float': return {type:'float', value:0}
+		case 'time': return {type:'time', value:''}
+		case 'date_absolute': return {type:'date_absolute', unixSeconds:Math.floor(Date.now()/1000)}
+		case 'date_relative': return {type:'date_relative', value:'today'}
+		case 'date_range': return {type:'date_range', value:{start:{type:'NOW'},end:{type:'NOW'}}}
+		case 'enum': return {type:'enum', value:''}
+		case 'enum_list': case 'string_list': return {type:type, value:[]}
+		case 'entity_list': return {type:'entity_list', value:[]}
+		case 'custom': return {type:'custom', value:''}
+		case 'nested': return {type:'nested', value:[]}
+		default: return {type:'string', value:''}
+	}
+}
+
+function editorText(value?: FilterValue): string {
+	if (!value || !('value' in value)) return value?.type === 'date_absolute' ? new Date(value.unixSeconds * 1000).toISOString().slice(0, 10) : ''
+	return Array.isArray(value.value) ? value.value.join(', ') : String(value.value)
+}
+
+export function PowerSearchFilterEditor(props: PowerSearchFilterEditorProps) @{
+	const field = props.config.fields.find(x => x.key === props.filter.field) ?? props.config.fields[0]
+	const operator = field?.operators.find(x => x.key === props.filter.operator) ?? field?.operators[0]
+	const [valueText, setValueText] = useState(editorText(props.filter.value))
+	const value = operator ? props.filter.value ?? initialValue(operator.value.type) : {type:'empty'} as FilterValue
+	const unsupported = operator?.value.type === 'date_range' || operator?.value.type === 'entity_list' || operator?.value.type === 'nested'
+	const save = () => {
+		if (!field || !operator || unsupported) return
+		let next: FilterValue = value
+		if (value.type === 'string' || value.type === 'custom' || value.type === 'time' || value.type === 'date_relative') next = {...value, value:valueText} as FilterValue
+		else if (value.type === 'integer' || value.type === 'float') next = {...value, value:Number(valueText)} as FilterValue
+		else if (value.type === 'enum') next = {...value, value:valueText} as FilterValue
+		else if (value.type === 'string_list' || value.type === 'enum_list') next = {...value, value:valueText.split(',').map(item=>item.trim()).filter(Boolean)} as FilterValue
+		else if (value.type === 'date_absolute') next = {...value, unixSeconds:Math.floor(Date.parse(`${valueText}T00:00:00Z`)/1000)}
+
+		props.onSave({field:field.key, operator:operator.key, value:next})
+	}
+
+	<flexboxlayout className="vx-power-search-editor">
+		<label className="vx-power-search-editor-heading" text={field ? `${field.label} · ${operator ? resolveOperatorLabel(operator) : ''}` : powerSearchTranslate('@astryx.powersearch.editor.field')} />
+		{unsupported ? <label className="vx-power-search-editor-note" text="Add a custom editor for this value type." /> : operator && operator.value.type !== 'empty' ? <TextInput className="vx-power-search-editor-value" label="Value" value={valueText} onChange={setValueText} keyboardType={operator.value.type==='integer'||operator.value.type==='float'?'number':'default'} isDisabled={props.isReadOnly} /> : null}
+		<flexboxlayout className="vx-power-search-editor-actions"><Button label="Cancel" variant="ghost" onPress={props.onCancel} /><Button label={props.saveButtonLabel ?? 'Apply'} variant="primary" onPress={save} isDisabled={props.isReadOnly||unsupported} /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/PowerSearchFilterEditor.tsrx

@@ -0,0 +1,66 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane'
+import type { PowerSearchConfig, PartialFilter, PowerSearchFilter, FilterValue } from './props'
+import { TextInput } from './TextInput.tsrx'
+import { Button } from './Button.tsrx'
+import { resolveOperatorLabel } from './power-search-config'
+import { powerSearchTranslate } from './power-search-strings'
+
+export interface PowerSearchFilterEditorProps {
+	config: PowerSearchConfig
+	filter: PartialFilter
+	mode: 'create' | 'edit'
+	onSave: (filter: PowerSearchFilter | null) => void
+	onCancel: () => void
+	saveButtonLabel?: string
+	isReadOnly?: boolean
+	timezoneID?: string
+}
+
+function initialValue(type: FilterValue['type']): FilterValue {
+	switch (type) {
+		case 'empty': return {type:'empty'}
+		case 'integer': return {type:'integer', value:0}
+		case 'float': return {type:'float', value:0}
+		case 'time': return {type:'time', value:''}
+		case 'date_absolute': return {type:'date_absolute', unixSeconds:Math.floor(Date.now()/1000)}
+		case 'date_relative': return {type:'date_relative', value:'today'}
+		case 'date_range': return {type:'date_range', value:{start:{type:'NOW'},end:{type:'NOW'}}}
+		case 'enum': return {type:'enum', value:''}
+		case 'enum_list': case 'string_list': return {type:type, value:[]}
+		case 'entity_list': return {type:'entity_list', value:[]}
+		case 'custom': return {type:'custom', value:''}
+		case 'nested': return {type:'nested', value:[]}
+		default: return {type:'string', value:''}
+	}
+}
+
+function editorText(value?: FilterValue): string {
+	if (!value || !('value' in value)) return value?.type === 'date_absolute' ? new Date(value.unixSeconds * 1000).toISOString().slice(0, 10) : ''
+	return Array.isArray(value.value) ? value.value.join(', ') : String(value.value)
+}
+
+export function PowerSearchFilterEditor(props: PowerSearchFilterEditorProps) @{
+	const field = props.config.fields.find(x => x.key === props.filter.field) ?? props.config.fields[0]
+	const operator = field?.operators.find(x => x.key === props.filter.operator) ?? field?.operators[0]
+	const [valueText, setValueText] = useState(editorText(props.filter.value))
+	const value = operator ? props.filter.value ?? initialValue(operator.value.type) : {type:'empty'} as FilterValue
+	const unsupported = operator?.value.type === 'date_range' || operator?.value.type === 'entity_list' || operator?.value.type === 'nested'
+	const save = () => {
+		if (!field || !operator || unsupported) return
+		let next: FilterValue = value
+		if (value.type === 'string' || value.type === 'custom' || value.type === 'time' || value.type === 'date_relative') next = {...value, value:valueText} as FilterValue
+		else if (value.type === 'integer' || value.type === 'float') next = {...value, value:Number(valueText)} as FilterValue
+		else if (value.type === 'enum') next = {...value, value:valueText} as FilterValue
+		else if (value.type === 'string_list' || value.type === 'enum_list') next = {...value, value:valueText.split(',').map(item=>item.trim()).filter(Boolean)} as FilterValue
+		else if (value.type === 'date_absolute') next = {...value, unixSeconds:Math.floor(Date.parse(`${valueText}T00:00:00Z`)/1000)}
+
+		props.onSave({field:field.key, operator:operator.key, value:next})
+	}
+
+	<flexboxlayout className="vx-power-search-editor">
+		<label className="vx-power-search-editor-heading" text={field ? `${field.label} · ${operator ? resolveOperatorLabel(operator) : ''}` : powerSearchTranslate('@astryx.powersearch.editor.field')} />
+		{unsupported ? <label className="vx-power-search-editor-note" text="Add a custom editor for this value type." /> : operator && operator.value.type !== 'empty' ? <TextInput className="vx-power-search-editor-value" label="Value" value={valueText} onChange={setValueText} keyboardType={operator.value.type==='integer'||operator.value.type==='float'?'number':'default'} isDisabled={props.isReadOnly} /> : null}
+		<flexboxlayout className="vx-power-search-editor-actions"><Button label="Cancel" variant="ghost" onPress={props.onCancel} /><Button label={props.saveButtonLabel ?? 'Apply'} variant="primary" onPress={save} isDisabled={props.isReadOnly||unsupported} /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/PowerSearchFilterEditor.web.tsrx

@@ -0,0 +1,41 @@
+import { useState } from 'octane'
+import type { PowerSearchEditorProps, FilterValue } from './props'
+import { Button } from './Button.web.tsrx'
+import { TextInput } from './TextInput.web.tsrx'
+import { resolveOperatorLabel } from './power-search-config'
+
+function editorText(value:any):string {
+	if (!value) return ''
+	if (value.type==='date_absolute') return new Date(value.unixSeconds*1000).toISOString().slice(0,10)
+	if (!('value' in value)) return ''
+	return Array.isArray(value.value)?value.value.join(', '):String(value.value)
+}
+
+export function PowerSearchFilterEditor(props: PowerSearchEditorProps) @{
+	const field = props.config.fields.find(x=>x.key===props.filter.field) ?? props.config.fields[0]
+	const operator = field?.operators.find(x=>x.key===props.filter.operator) ?? field?.operators[0]
+	const initial = editorText(props.filter.value)
+	const [text,setText] = useState(initial)
+	const unsupported = operator?.value.type==='date_range'||operator?.value.type==='entity_list'||operator?.value.type==='nested'
+	const save = () => {
+		if (!field || !operator || unsupported) return
+		let value: FilterValue
+		const kind = operator.value.type
+		if (kind === 'empty') value={type:'empty'}
+		else if (kind === 'integer') value={type:'integer',value:Number(text)}
+		else if (kind === 'float') value={type:'float',value:Number(text)}
+		else if (kind === 'enum') value={type:'enum',value:text}
+		else if (kind === 'string_list') value={type:'string_list',value:text.split(',').map(item=>item.trim()).filter(Boolean)}
+		else if (kind === 'enum_list') value={type:'enum_list',value:text.split(',').map(item=>item.trim()).filter(Boolean)}
+		else if (kind === 'date_absolute') value={type:'date_absolute',unixSeconds:Math.floor(Date.parse(`${text}T00:00:00Z`)/1000)}
+		else value={type:'string',value:text}
+
+		props.onSave({field:field.key,operator:operator.key,value})
+	}
+
+	<div className="vx-power-search-editor">
+		<strong>{field?.label} · {operator ? resolveOperatorLabel(operator) : ''}</strong>
+		{unsupported ? <div className="vx-power-search-editor-note">Add a custom editor for this value type.</div> : operator?.value.type !== 'empty' ? <TextInput label="Value" value={text} onChange={setText} keyboardType={operator?.value.type==='integer'||operator?.value.type==='float'?'number':'default'} web={operator?.value.type==='date_absolute'?{type:'date'}:undefined} isDisabled={props.isReadOnly} /> : null}
+		<div className="vx-power-search-editor-actions"><Button label="Cancel" variant="ghost" onPress={props.onCancel} /><Button label={props.saveButtonLabel ?? 'Apply'} variant="primary" onPress={save} isDisabled={props.isReadOnly||unsupported} /></div>
+	</div>
+}

package/src/PowerSearchToken.macos.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { PowerSearchTokenProps } from './props'
+import { resolveOperatorLabel, formatFilterValue, createInternalConfig } from './power-search-config'
+import { Pressable } from './Pressable.macos.tsrx'
+import { cx } from './cx'
+
+type InternalTokenProps = PowerSearchTokenProps & { timezoneID?: string }
+
+export function PowerSearchToken(props: InternalTokenProps) @{
+	const value = formatFilterValue(createInternalConfig(props.config), props.operator.value, props.filter.value, props.maxLength, undefined, undefined, props.timezoneID)
+	const labelText = `${props.field.label} ${resolveOperatorLabel(props.operator)}${value ? ` ${value}` : ''}`
+
+	<flexboxlayout className="vx-power-search-token-row">
+		<Pressable className={cx('vx-power-search-token', props.isDisabled && 'vx-power-search-token--disabled')} onPress={props.onPress} accessibilityRole="button" accessibilityLabel={labelText} disabled={props.isDisabled}><label className="vx-power-search-token-label" text={labelText} /></Pressable>
+		{props.onRemove ? <Pressable className="vx-power-search-remove" onPress={props.onRemove} accessibilityRole="button" accessibilityLabel="Remove filter"><label text="×" /></Pressable> : null}
+	</flexboxlayout>
+}

package/src/PowerSearchToken.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PowerSearchTokenProps } from './props'
+import { resolveOperatorLabel, formatFilterValue, createInternalConfig } from './power-search-config'
+import { Pressable } from './Pressable'
+import { cx } from './cx'
+
+type InternalTokenProps = PowerSearchTokenProps & { timezoneID?: string }
+
+export function PowerSearchToken(props: InternalTokenProps) @{
+	const value = formatFilterValue(createInternalConfig(props.config), props.operator.value, props.filter.value, props.maxLength, undefined, undefined, props.timezoneID)
+	const labelText = `${props.field.label} ${resolveOperatorLabel(props.operator)}${value ? ` ${value}` : ''}`
+
+	<flexboxlayout className="vx-power-search-token-row">
+		<Pressable className={cx('vx-power-search-token', props.isDisabled && 'vx-power-search-token--disabled')} onPress={props.onPress} accessibilityRole="button" accessibilityLabel={labelText} disabled={props.isDisabled}><label className="vx-power-search-token-label" text={labelText} /></Pressable>
+		{props.onRemove ? <Pressable className="vx-power-search-remove" onPress={props.onRemove} accessibilityRole="button" accessibilityLabel="Remove filter"><label text="×" /></Pressable> : null}
+	</flexboxlayout>
+}

package/src/PowerSearchToken.web.tsrx

@@ -0,0 +1,15 @@
+import type { PowerSearchTokenProps } from './props'
+import { resolveOperatorLabel, formatFilterValue, createInternalConfig } from './power-search-config'
+import { Button } from './Button.web.tsrx'
+
+type InternalTokenProps = PowerSearchTokenProps & { timezoneID?: string }
+
+export function PowerSearchToken(props: InternalTokenProps) @{
+	const value = formatFilterValue(createInternalConfig(props.config), props.operator.value, props.filter.value, props.maxLength, undefined, undefined, props.timezoneID)
+	const label = `${props.field.label} ${resolveOperatorLabel(props.operator)}${value ? ` ${value}` : ''}`
+
+	<span className="vx-power-search-token-row">
+		<Button label={label} variant="secondary" onPress={props.onPress} isDisabled={props.isDisabled} className="vx-power-search-token" />
+		{props.onRemove ? <button type="button" className="vx-power-search-remove" aria-label="Remove filter" onClick={props.onRemove}>×</button> : null}
+	</span>
+}

package/src/Pressable.macos.tsrx

@@ -1,10 +1,11 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { PressableProps } from './props'
 import { cx } from './cx'
 import { layoutChildProps } from './layout-child'
 
 export function Pressable(props: PressableProps) @{
 	<flexboxlayout
+		ref={props.ref}
 		{...layoutChildProps(props)}
 		id={props.id}
 		flexDirection="column"
@@ -12,6 +13,9 @@ export function Pressable(props: PressableProps) @{
 		style={props.style}
 		onTap={props.disabled ? undefined : props.onPress}
 		accessibilityLabel={props.accessibilityLabel}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={props.accessibilityState}
 		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : undefined)}
 	>
 		{props.children}

package/src/Pressable.tsrx

@@ -1,16 +1,20 @@
 /** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
 import type { PressableProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
 import { layoutChildProps } from './layout-child';
-import { usePan } from './pan.tsrx';
+import { usePan } from './pan';
 /** flexboxlayout, not contentview — ContentView is single-child: the driver
  *  assigns each child to `.content`, so every sibling but the last was
  *  silently dropped. Column flex matches View's shape (and the web div);
  *  tap/longPress are gesture events, they attach to any view. */
 export function Pressable(props: PressableProps) @{
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
 	<flexboxlayout
-		ref={(v: any) => { if (v) { applyEscapeProps(v, props); props.bind?.(v); } }}
+		ref={forwardedRef}
 		id={props.id}
 		{...layoutChildProps(props)}
 		className={cx('vx-pressable', props.className)}

package/src/Pressable.web.test.tsrx

@@ -8,8 +8,15 @@ function mount(props: any = {}) {
  const el = document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
  const render = (next:any={}) => act(() => root.render(<Pressable {...props} {...next} />))
  render();const pointer=(type:string) => act(() => el.firstElementChild!.dispatchEvent(new Event(type,{bubbles:true})))
+
+ const keyboard = (type:string,key:string,repeat=false) => {
+  const event = new KeyboardEvent(type,{key,repeat,bubbles:true,cancelable:true})
+  act(() => el.firstElementChild!.dispatchEvent(event))
+  return event
+ }
+
  const advance=() => act(() => vi.advanceTimersByTime(500))
- return {root,render,pointer,advance}
+ return {root,render,pointer,keyboard,advance,el}
 }
 
 afterEach(() => {for (const root of roots.splice(0)) act(() => root.unmount());document.body.innerHTML='';vi.useRealTimers()})
@@ -34,3 +41,21 @@ it('reports one long press through the latest callback', () => {
 it('does not start a disabled long press', () => {
  const callback=vi.fn();const {pointer,advance}=mount({onLongPress:callback,disabled:true});pointer('pointerdown');advance();expect(callback).not.toHaveBeenCalled()
 })
+
+it('exposes an enabled pressable as a button and activates once on Enter', () => {
+ const callback=vi.fn();const {el,keyboard}=mount({onPress:callback})
+ const button=el.firstElementChild!
+ expect(button.getAttribute('role')).toBe('button')
+ expect(button.getAttribute('tabindex')).toBe('0')
+ expect(keyboard('keydown','Enter').defaultPrevented).toBe(true)
+ keyboard('keydown','Enter',true)
+ expect(callback).toHaveBeenCalledTimes(1)
+})
+
+it('activates on Space release, not on Space press', () => {
+ const callback=vi.fn();const {keyboard}=mount({onPress:callback})
+ expect(keyboard('keydown',' ').defaultPrevented).toBe(true)
+ expect(callback).not.toHaveBeenCalled()
+ expect(keyboard('keyup',' ').defaultPrevented).toBe(true)
+ expect(callback).toHaveBeenCalledTimes(1)
+})

package/src/Pressable.web.tsrx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'octane';
+import { useMemo, useEffect, useRef } from 'octane';
+import { refList } from './ref-list'
 import type { PressableProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { layoutChildProps } from './layout-child.web';
@@ -29,8 +30,10 @@ export function Pressable(props: PressableProps) @{
 		}, 500);
 	};
 
+	const forwardedRef = useMemo(() => refList((e: any) => { el.current = e; if (e) { applyEscapeProps(e, props);  } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
 	<div
-		ref={(e: any) => { el.current = e; if (e) { applyEscapeProps(e, props); props.bind?.(e); } }}
+		ref={forwardedRef}
 		id={props.id}
 		className={['vx-pressable', props.className]}
 		{...layoutChildProps(props, { ...props.style, ...(props.hitSlop ? { margin: -props.hitSlop, padding: props.hitSlop } : {}) })}
@@ -41,6 +44,7 @@ export function Pressable(props: PressableProps) @{
 		aria-disabled={props.disabled || props.accessibilityState?.disabled || undefined}
 		aria-selected={props.accessibilityState?.selected}
 		aria-checked={props.accessibilityState?.checked}
+		aria-pressed={props.accessibilityState?.pressed}
 		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
 		aria-hidden={props.accessible === false ? true : undefined}
 		tabIndex={props.onPress && !props.disabled && props.accessible !== false ? 0 : -1}

package/src/ProgressBar.macos.tsrx

@@ -0,0 +1,75 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { ProgressBarProps } from './props';
+import { cx } from './cx';
+import { getColorScheme } from './colorScheme.macos';
+import { mutedColor, progressFillColor, textColor } from './scheme-colors';
+
+const clamp = (value: number, min: number, max: number) =>
+	Math.min(Math.max(value, min), max);
+
+/** ProgressBar — macOS leaf. Indeterminate renders a steady 40% fill (the
+ *  AppKit host has no JS-driven `animate` on views). Marks overlay via
+ *  star-column grids like the mobile leaf. */
+export function ProgressBar(props: ProgressBarProps) @{
+	const scheme = getColorScheme();
+	const max = Math.max(props.max ?? 100, 1e-9);
+	const isIndeterminate = props.isIndeterminate ?? false;
+	const value = clamp(props.value ?? 0, 0, max);
+	const pct = (value / max) * 100;
+	const formatValueLabel =
+		props.formatValueLabel ?? ((v: number, m: number) => `${Math.round((v / m) * 100)}%`);
+
+	const valueText = formatValueLabel(value, max);
+	const isDisabled = props.isDisabled ?? false;
+	const isLabelHidden = props.isLabelHidden ?? false;
+	const hasValueLabel = props.hasValueLabel ?? false;
+	const variant = props.variant ?? 'accent';
+	const marks = isIndeterminate ? [] : (props.marks ?? []);
+	const showHead = !isLabelHidden || (!isIndeterminate && hasValueLabel);
+
+	<flexboxlayout
+		ref={props.ref}
+		id={props.id}
+		className={cx('vx-progressbar', `vx-progressbar--${variant}`, props.className)}
+		style={{ flexDirection: 'column', ...(isDisabled ? { opacity: 0.38 } : {}), ...props.style }}
+		flexDirection="column"
+		accessibilityRole="progressbar"
+		accessibilityLabel={props.accessibilityLabel ?? props.label}
+	>
+		{showHead ? (
+			<flexboxlayout flexDirection="row" justifyContent="space-between" className="vx-progressbar-head">
+				<label className="vx-progressbar-label" whiteSpace="nowrap" style={{ color: textColor(scheme), fontSize: 13 }}>
+					{isLabelHidden ? ' ' : props.label}
+				</label>
+				{!isIndeterminate && hasValueLabel ? (
+					<label className="vx-progressbar-value" whiteSpace="nowrap" style={{ color: mutedColor(scheme), fontSize: 13 }}>
+						{valueText}
+					</label>
+				) : null}
+			</flexboxlayout>
+		) : null}
+		<gridlayout className="vx-progressbar-track" height={8} style={{ borderRadius: 4, backgroundColor: scheme === 'dark' ? '#2e2e2e' : '#eaeaea' }}>
+			<flexboxlayout
+				className={cx('vx-progressbar-fill', `vx-progressbar-fill--${variant}`)}
+				horizontalAlignment="left"
+				width={isIndeterminate ? '40%' : `${pct}%`}
+				style={{ borderRadius: 4, backgroundColor: progressFillColor(variant, scheme) }}
+			/>
+			{marks.map((mark) => {
+				const markPct = clamp(mark.value, 0, max) / max;
+				return (
+					<gridlayout key={mark.value} columns={`${markPct}*,auto,${1 - markPct}*`}>
+						<flexboxlayout
+							col={1}
+							className="vx-progressbar-mark"
+							width={2}
+							height={8}
+							accessibilityLabel={mark.label}
+							style={{ backgroundColor: mutedColor(scheme) }}
+						/>
+					</gridlayout>
+				);
+			})}
+		</gridlayout>
+	</flexboxlayout>
+}