@octane-xplat/ui 0.4.0 → 0.5.0

package/src/theme/tokens.css

@@ -3,10 +3,22 @@
 
 :root,
 .ns-root {
-	--color-primary: #4f46e5;
-	--color-on-primary: #ffffff;
+	--color-primary: #171717;
+	/* Token names double as the future Tailwind theme keys: text-onprimary
+	   resolves --color-onprimary, bg-danger resolves --color-danger. Keep
+	   class-name segments and var-name segments identical. */
+	--color-onprimary: #fafafa;
 	--color-surface: #ffffff;
-	--color-text: #111827;
+	--color-surface-secondary: #fafafa;
+	--color-text: #0a0a0a;
+	--color-text-secondary: #666666;
+	--color-border: #eaeaea;
+	--color-border-strong: #d4d4d4;
+	--color-danger: #dc2626;
+	/* Family lists are deliberately generic. Apps override these with their
+	   web @font-face family and the platform's registered native name. */
+	--font-sans: system-ui, sans-serif;
+	--font-mono: ui-monospace, monospace;
 	--space-4: 16px;
 	/* Corner scale — rounded-rectangle radii. Smooth (squircle) corners are
 	   the default corner treatment: every class that consumes a token also
@@ -20,9 +32,52 @@
 
 .ns-dark,
 .dark {
-	--color-surface: #0f172a;
-	--color-text: #f8fafc;
+	--color-primary: #ededed;
+	--color-onprimary: #171717;
+	--color-surface: #0a0a0a;
+	--color-surface-secondary: #141414;
+	--color-text: #ededed;
+	--color-text-secondary: #a1a1a1;
+	--color-border: #2e2e2e;
+	--color-border-strong: #4a4a4a;
+}
+
+/* xplat-web-only:start — DOM normalization. NativeScript is the reference
+   box model: dip sizes are outer boxes, and a border paints from
+   width+color alone. The DOM's UA stylesheet diverges on both counts, so
+   normalize the deltas once instead of patching individual rules:
+   - border-box keeps padding/borders inside declared sizes (a 40dip box
+     is 40px, not 40px + padding + border).
+   - border-width 0 + border-style solid makes the DOM behave like native:
+     any shared border-*-width declaration paints on both targets — the
+     DOM's initial border-width is `medium`, so style alone would draw
+     phantom ~3px edges wherever a rule sets only one side's width.
+   - <img> is a leaf, not inline text (no baseline descender gap).
+   - .vx-app columns are flex like their native screen containers. */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+* {
+	border-width: 0;
+	border-style: solid;
+}
+img {
+	display: block;
 }
+.vx-app {
+	display: flex;
+	flex-direction: column;
+}
+/* Native has no scroll chaining — a ScrollView/ListView just bounces
+   inside itself because the parent is never a scroller. contain is the
+   DOM equivalent: scroll stays in the leaf it started in. */
+.vx-scroll,
+.vx-list {
+	overscroll-behavior: contain;
+}
+/* xplat-web-only:end */
 
 /* vocabulary base styles */
 
@@ -70,7 +125,7 @@
 .vx-drawer-backdrop {
 	position: absolute;
 	inset: 0;
-	background: rgba(15, 23, 42, 0.35);
+	background: rgba(0, 0, 0, 0.4);
 }
 .vx-drawer-panel {
 	position: absolute;
@@ -140,7 +195,7 @@
 .vx-overlay-shade {
 	position: absolute;
 	inset: 0;
-	background-color: rgba(0, 0, 0, 0.45);
+	background-color: rgba(0, 0, 0, 0.4);
 }
 
 .vx-overlay-content {
@@ -193,7 +248,7 @@
 	max-width: 90%;
 	max-height: 90%;
 	padding: 24px;
-	border: 0;
+	border: 1px solid var(--color-border);
 	border-radius: var(--radius-xl);
 	corner-shape: squircle;
 	color: var(--color-text);
@@ -201,7 +256,7 @@
 }
 
 .vx-modal::backdrop {
-	background: rgba(15, 23, 42, 0.45);
+	background: rgba(0, 0, 0, 0.4);
 }
 
 .vx-modal--dialog {
@@ -246,7 +301,7 @@
 	inset: 0;
 	border: 0;
 	padding: 0;
-	background: rgba(15, 23, 42, 0.45);
+	background: rgba(0, 0, 0, 0.4);
 	cursor: default;
 }
 
@@ -260,10 +315,22 @@
 }
 /* xplat-web-only:end */
 
-/* xplat-web-only:start — placeholder pseudos are DOM-only */
+/* xplat-web-only:start — placeholder pseudos are DOM-only. Muted like
+   real placeholder text, not currentColor (a full-opacity hint reads as
+   a typed value); --placeholder-color is the per-field prop escape. */
 input::placeholder,
 textarea::placeholder {
-	color: var(--placeholder-color, currentColor);
+	color: var(--placeholder-color, var(--color-text-secondary));
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start — form controls don't inherit the body font in the
+   DOM (UA stylesheet wins); without this they render in the UA face. */
+input,
+textarea,
+select,
+button {
+	font-family: inherit;
 }
 /* xplat-web-only:end */
 
@@ -340,10 +407,15 @@ textarea::placeholder {
 }
 /* xplat-web-only:end */
 
-/* utilities (hand-written subset for the harness; Tailwind later) */
+/* utilities (hand-written subset — do NOT adopt Tailwind until
+   NativeScript/tailwind#226 is resolved; the plugin strips core-supported
+   props incl. gap, drops all @media, and rewrites invisible→collapse) */
 
+/* flex-1 keeps Tailwind v4's exact emission (`flex: 1 1 0%`) — web gets
+   identical semantics, NS parses grow/shrink out of the shorthand and
+   ignores the basis token it can't model. */
 .flex-1 {
-	flex-grow: 1;
+	flex: 1 1 0%;
 }
 /* Flex divergence guards — NS FlexboxLayout diverges from web flexbox on
  * shrinkability: grow children never shrink below intrinsic width, fixed
@@ -365,19 +437,52 @@ textarea::placeholder {
 .items-center {
 	align-items: center;
 }
+.items-baseline {
+	align-items: baseline;
+}
+.items-start {
+	align-items: flex-start;
+}
 .justify-center {
 	justify-content: center;
 }
+.justify-between {
+	justify-content: space-between;
+}
+.flex-wrap {
+	flex-wrap: wrap;
+}
 .gap-4 {
 	gap: 16px;
 }
+.gap-3 {
+	gap: 12px;
+}
+.gap-6 {
+	gap: 24px;
+}
 
+.text-2xl {
+	font-size: 28px;
+}
 .text-xl {
 	font-size: 20px;
 }
+.text-lg {
+	font-size: 18px;
+}
+.text-sm {
+	font-size: 13px;
+}
 .font-bold {
 	font-weight: bold;
 }
+.font-semibold {
+	font-weight: 600;
+}
+.text-muted {
+	color: var(--color-text-secondary);
+}
 
 /* Corner utilities — consume the --radius-* scale and carry the smooth
    (squircle) corner treatment. Circles stay circular: .rounded-full omits
@@ -407,10 +512,10 @@ textarea::placeholder {
 	background-color: var(--color-primary);
 }
 .text-onprimary {
-	color: var(--color-on-primary);
+	color: var(--color-onprimary);
 }
 .bg-danger {
-	background-color: #dc2626;
+	background-color: var(--color-danger);
 }
 /* xplat-web-only:start — box-shadow is inert on native (elevation is
    Android-only; no shared mapping yet) */
@@ -420,14 +525,89 @@ textarea::placeholder {
 /* xplat-web-only:end */
 
 .btn {
-	padding-top: 12px;
-	padding-right: 20px;
-	padding-bottom: 12px;
-	padding-left: 20px;
+	padding-top: 10px;
+	padding-right: 16px;
+	padding-bottom: 10px;
+	padding-left: 16px;
 	border-radius: var(--radius-md);
 	corner-shape: squircle;
+	font-size: 14px;
+	font-weight: 500;
+	align-items: center;
+	justify-content: center;
+	text-decoration: none;
+	color: var(--color-text);
+}
+
+/* Secondary = the same control reading quiet: hairline border, surface
+   fill, body-text label. Reserve .bg-primary for the one decisive action
+   in a group. */
+.btn-secondary {
+	background-color: var(--color-surface);
+	border-width: 1px;
+	border-color: var(--color-border);
+	color: var(--color-text);
 }
 
+/* xplat-web-only:start — controls that render as real <a>/<button> need
+   inline layout and UA resets; the pressable/nav-link leaves are divs on
+   web and don't hit these rules. */
+a.btn {
+	display: inline-flex;
+}
+a.chip {
+	display: inline-flex;
+	align-items: center;
+}
+/* xplat-web-only:end */
+
+/* Tab shell — web divs/buttons + the Android SwapTabs fallback (iOS draws
+   its own UITabBar and never sees these). */
+.vx-tabbar {
+	border-bottom-width: 1px;
+	border-bottom-color: var(--color-border);
+	background-color: var(--color-surface);
+}
+.vx-tab {
+	align-items: center;
+	justify-content: center;
+	padding-top: 10px;
+	padding-right: 16px;
+	padding-bottom: 10px;
+	padding-left: 16px;
+	font-size: 14px;
+	color: var(--color-text-secondary);
+}
+.vx-tab.active {
+	color: var(--color-text);
+}
+
+/* xplat-web-only:start — DOM defaults are display:block (div) and
+   inline-block (button); every flex-bearing vx- class needs an explicit
+   display or flex-direction/align-items/justify-content are inert. */
+.vx-tabs {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+.vx-tabbar {
+	display: flex;
+	flex-direction: row;
+}
+.vx-tabpane {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+button.vx-tab {
+	display: flex;
+	background: none;
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
 /* harness experiment styles */
 
 .vx-app {
@@ -442,28 +622,71 @@ textarea::placeholder {
 	color: var(--color-text);
 }
 
+/* `.vx-app label` above (descendant + type) outranks single-class text
+   colors inside the app root — roles that must win escalate here. */
+.vx-app .text-onprimary {
+	color: var(--color-onprimary);
+}
+.vx-app .text-muted {
+	color: var(--color-text-secondary);
+}
+.vx-app .vx-tab label {
+	color: var(--color-text-secondary);
+}
+.vx-app .vx-tab.active label {
+	color: var(--color-text);
+}
+.vx-app .chip-on label {
+	color: var(--color-onprimary);
+}
+/* Danger surfaces keep white text in both themes (on-primary flips). */
+.bg-danger .text-onprimary {
+	color: #ffffff;
+}
+
 .input {
-	padding: 10px;
+	padding-top: 10px;
+	padding-right: 12px;
+	padding-bottom: 10px;
+	padding-left: 12px;
 	border-width: 1px;
-	border-color: #94a3b8;
-	border-radius: var(--radius-sm);
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	corner-shape: squircle;
-	font-size: 16px;
+	font-size: 14px;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+	/* NS TextField/TextView placeholder color (ignored on web — the
+	   ::placeholder pseudo above covers it there). */
+	placeholder-color: var(--color-text-secondary);
 }
 
 .chip {
-	background-color: var(--color-primary);
-	color: var(--color-on-primary);
-	padding: 4px 10px;
-	border-radius: var(--radius-lg);
+	background-color: var(--color-surface);
+	color: var(--color-text);
+	padding-top: 5px;
+	padding-right: 12px;
+	padding-bottom: 5px;
+	padding-left: 12px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	corner-shape: squircle;
 	font-size: 13px;
+	text-decoration: none;
+}
+
+/* Selected chip — the one filled element in a group of bordered peers. */
+.chip-on {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
 }
 
 .cell {
 	padding: 12px;
 	border-bottom-width: 1px;
-	border-bottom-color: #e2e8f0;
+	border-bottom-color: var(--color-border);
 }
 
 .vx-list {
@@ -486,7 +709,7 @@ textarea::placeholder {
 .vx-sheet-backdrop {
 	position: absolute;
 	inset: 0;
-	background: rgba(15, 23, 42, 0.45);
+	background: rgba(0, 0, 0, 0.4);
 	pointer-events: auto;
 }
 
@@ -498,6 +721,8 @@ textarea::placeholder {
 	max-height: 85%;
 	padding: 24px;
 	overflow: auto;
+	border-width: 1px;
+	border-color: var(--color-border);
 	border-top-left-radius: var(--radius-xl);
 	border-top-right-radius: var(--radius-xl);
 	corner-shape: squircle;

package/types/index.d.ts

@@ -17,6 +17,7 @@ import type {
 	DrawerProps,
 	GridProps,
 	HeadingProps,
+	HoverableProps,
 	IconGlyph,
 	IconProps,
 	ImageProps,
@@ -28,6 +29,8 @@ import type {
 	ModalProps,
 	ModalOpenOptions,
 	ModalOpenResult,
+	MeasureBounds,
+	MeasureResult,
 	NavLinkProps,
 	OpenModal,
 	OpenWindowOptions,
@@ -64,6 +67,7 @@ import type {
 	ToastContent,
 	ToastOptions,
 	ToastPosition,
+	UseMeasureOptions,
 	ViewProps,
 } from './props'
 
@@ -77,6 +81,7 @@ export type {
 	DrawerProps,
 	GridProps,
 	HeadingProps,
+	HoverableProps,
 	IconGlyph,
 	IconProps,
 	ImageProps,
@@ -87,6 +92,8 @@ export type {
 	ModalProps,
 	ModalOpenOptions,
 	ModalOpenResult,
+	MeasureBounds,
+	MeasureResult,
 	NavLinkProps,
 	OpenModal,
 	OpenWindowOptions,
@@ -125,6 +132,7 @@ export type {
 	ToastContent,
 	ToastOptions,
 	ToastPosition,
+	UseMeasureOptions,
 	ViewProps,
 } from './props'
 
@@ -175,6 +183,7 @@ export declare const openModal: OpenModal
 export declare function openWindow(options?: OpenWindowOptions): any
 export declare const Overlay: UniversalComponent<OverlayProps>
 export declare const Popover: UniversalComponent<PopoverProps>
+export declare const Hoverable: UniversalComponent<HoverableProps>
 export declare function showToast(content: ToastContent, options?: ToastOptions): void
 export declare const Tabs: UniversalComponent<TabsProps>
 
@@ -223,6 +232,7 @@ export declare function deriveRouteManifest(
 // ---------- animation / theme ----------
 
 export declare function useAnimation(initial?: number, prop?: string): AnimatedValue
+export declare function useMeasure(options?: UseMeasureOptions): MeasureResult
 export declare function getColorScheme(): ColorScheme
 export declare function useColorScheme(): ColorScheme
 export interface SafeAreaInsets {

package/types/props.d.ts

@@ -160,6 +160,9 @@ export interface RowProps extends LayoutChildProps, FlexContainerProps, GlassSur
     android?: any;
     web?: any;
 }
+/** Shared accessibility roles. The native leaf maps the ARIA spellings that
+ * NativeScript names differently (for example `heading` → `header`). */
+export type Role = 'button' | 'link' | 'search' | 'image' | 'heading' | 'adjustable' | 'summary' | 'text' | 'none' | 'progressbar' | 'checkbox' | 'switch' | 'radio' | 'spinbutton' | 'tab';
 export interface TextProps extends LayoutChildProps {
     className?: any;
     style?: any;
@@ -169,6 +172,9 @@ export interface TextProps extends LayoutChildProps {
     /** Native Label does not expose text selection; implemented with CSS on web. */
     selectable?: boolean;
     ellipsize?: boolean;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityRole?: Role;
     accessibilityHint?: string;
     accessibilityValue?: string;
     /** NativeScript supports one state at a time (disabled/selected/checked); busy and expanded are web-only. */
@@ -221,7 +227,7 @@ export interface PressableProps extends LayoutChildProps, FlexContainerProps, Gl
     onLongPress?: () => void;
     accessible?: boolean;
     accessibilityLabel?: string;
-    accessibilityRole?: string;
+    accessibilityRole?: Role;
     onPressIn?: () => void;
     onPressOut?: () => void;
     onDoublePress?: () => void;
@@ -273,6 +279,9 @@ export interface TextInputProps {
     web?: any;
 }
 export interface TextAreaProps extends TextInputProps {
+    /** Submit on native only when `returnKeyType` is `done` or `send`; other
+     * returns insert newlines because TextView emits returnPress per newline.
+     * Web submits on Cmd/Ctrl+Enter. */
     /** Height in text rows. Web: the `rows` attr (fixed box); native:
      *  minHeight at the widget's measured line height. With `autoGrow` it
      *  becomes the starting height instead of a fixed one. */
@@ -439,8 +448,11 @@ export interface IconProps {
 /** One registered icon representation. `svg` contains path `d` data;
  *  `markup` is full inner-SVG markup (groups, transforms, several paths)
  *  rendered inside an `<svg viewBox>` shell on web and through `svgview`
- *  (ui-svg) on native. `font`, `src`, and `text` are per-platform
- *  fallbacks, in that order. */
+ *  (ui-svg) on native. `font`, `src`, and `text` are fallback
+ *  representations, in that order after SVG. `src` may be a raster source or
+ *  an SVG source; SVG is auto-detected for inline markup, SVG data URIs, and
+ *  `.svg` paths/URLs. Opaque resource names need `markup`/`svg` when their
+ *  format cannot be inferred from the string. */
 export interface IconGlyph {
     svg?: string;
     markup?: string;
@@ -496,15 +508,51 @@ export interface PopoverProps {
     android?: Record<string, any>;
     web?: Record<string, any>;
 }
+export interface HoverableProps {
+    /** Content shown after the pointer rests over the children on web. */
+    card: any;
+    /** Styling for the card's wrapper view inside the popover — e.g. a
+     *  pointer bridge covering the anchor↔card gap or a positional offset. */
+    cardClassName?: any;
+    cardStyle?: any;
+    children?: any;
+    openDelay?: number;
+    closeDelay?: number;
+    placement?: PopoverPlacement;
+    className?: any;
+    style?: any;
+    ios?: Record<string, any>;
+    android?: Record<string, any>;
+    web?: Record<string, any>;
+}
 export type ToastContent = string | (() => any);
-export type ToastPosition = 'top' | 'bottom';
+export type ToastPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export interface ToastOptions {
     duration?: number;
     position?: ToastPosition;
+    /** When set, the toast is positioned by Popover relative to this view. */
+    anchor?: PopoverAnchorRef;
+    /** Placement used with `anchor`; `position` supplies the top/bottom default. */
+    placement?: PopoverPlacement;
     ios?: Record<string, any>;
     android?: Record<string, any>;
     web?: Record<string, any>;
 }
+export interface MeasureBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface UseMeasureOptions {
+    /** Re-measure on layout, resize, scroll, and content-size changes. Defaults to true. */
+    observe?: boolean;
+}
+export interface MeasureResult {
+    /** Pass to a View's `bind` prop. */
+    bind: (element: any) => void;
+    bounds: MeasureBounds | null;
+}
 export interface ModalProps {
     open?: boolean;
     onClose?: (result?: ModalOpenResult) => void;
@@ -664,6 +712,13 @@ export interface OpenWindowOptions {
     /** Optional URL used by the web window. */
     url?: string;
 }
+/**
+ * Value returned by `useAnimation(initial, prop)`. On web, `prop` supports
+ * translateX/translateY/translateZ, scale/scaleX/scaleY, rotate/rotateX/
+ * rotateY, and skewX/skewY as CSS transforms, plus `opacity` and other CSS
+ * style properties. On NativeScript, `prop` is the name of a NativeScript
+ * view property (for example, `translateX` or `opacity`).
+ */
 export interface AnimatedValue {
     readonly value: number;
     bind(el: any): void;