@octane-xplat/ui 0.3.0 → 0.4.0

package/src/theme/tokens.css

@@ -3,274 +3,505 @@
 
 :root,
 .ns-root {
-  --color-primary: #4f46e5;
-  --color-on-primary: #ffffff;
-  --color-surface: #ffffff;
-  --color-text: #111827;
-  --space-4: 16px;
+	--color-primary: #4f46e5;
+	--color-on-primary: #ffffff;
+	--color-surface: #ffffff;
+	--color-text: #111827;
+	--space-4: 16px;
+	/* Corner scale — rounded-rectangle radii. Smooth (squircle) corners are
+	   the default corner treatment: every class that consumes a token also
+	   declares `corner-shape: squircle`. Full-radius circles opt out —
+	   `corner-shape` would reshape them into squircle disks on iOS/Chromium. */
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 }
 
 .ns-dark,
 .dark {
-  --color-surface: #0f172a;
-  --color-text: #f8fafc;
+	--color-surface: #0f172a;
+	--color-text: #f8fafc;
 }
 
 /* vocabulary base styles */
 
 .vx-view,
 .vx-row {
-  display: flex;
+	display: flex;
 }
 
 .vx-view {
-  flex-direction: column;
+	flex-direction: column;
 }
 
 /* Safe-area values are zero when the viewport has no display cutout. */
 .vx-safe-area {
-  padding-top: constant(safe-area-inset-top);
-  padding-right: constant(safe-area-inset-right);
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-left: constant(safe-area-inset-left);
+	padding-top: constant(safe-area-inset-top);
+	padding-right: constant(safe-area-inset-right);
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-left: constant(safe-area-inset-left);
 }
 
 .vx-safe-area {
-  padding-top: env(safe-area-inset-top);
-  padding-right: env(safe-area-inset-right);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
+	padding-top: env(safe-area-inset-top);
+	padding-right: env(safe-area-inset-right);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-left: env(safe-area-inset-left);
+}
+
+.vx-keyboard-avoiding {
+	display: flex;
+	flex-direction: column;
+}
+/* xplat-web-only:start — the native Drawer leaf is the ui-drawer widget;
+   these rules style the web DOM drawer overlay */
+.vx-drawer {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	overflow: hidden;
+}
+.vx-drawer-main {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+}
+.vx-drawer-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(15, 23, 42, 0.35);
 }
-
-.vx-keyboard-avoiding { display: flex; flex-direction: column; }
-.vx-drawer { display: flex; flex-direction: row; position: relative; overflow: hidden; }
-.vx-drawer-main { display: flex; flex: 1; min-width: 0; }
-.vx-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); }
 .vx-drawer-panel {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 280px;
-  overflow: auto;
-  background: var(--color-surface);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 280px;
+	overflow: auto;
+	background: var(--color-surface);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+/* xplat-web-only:end */
 
 .vx-row {
-  flex-direction: row;
+	flex-direction: row;
 }
 
 .vx-grid,
 .vx-stack {
-  display: grid;
+	display: grid;
 }
 
 .vx-stack > * {
-  grid-area: 1 / 1;
+	grid-area: 1 / 1;
 }
 
+/* xplat-web-only:start — Absolute's native leaf is absolutelayout; CSS
+   positioning is web-only (children position via left/top props) */
 .vx-absolute {
-  position: relative;
+	position: relative;
 }
 
 .vx-absolute > * {
-  position: absolute;
+	position: absolute;
 }
+/* xplat-web-only:end */
 
 .vx-spacer {
-  flex-grow: 1;
+	flex-grow: 1;
 }
 
 .vx-pressable {
-  display: flex;
-  flex-direction: column;
-  user-select: none;
+	display: flex;
+	flex-direction: column;
+	user-select: none;
 }
 
 /* web press feedback */
 .vx-pressable:active {
-  opacity: 0.85;
+	opacity: 0.85;
 }
 .vx-pressable-no-feedback:active {
-  opacity: 1;
+	opacity: 1;
 }
 /* native press feedback (NS pseudo — dead rule on web, and vice versa) */
 .vx-pressable:pressed {
-  opacity: 0.85;
+	opacity: 0.85;
 }
 
+/* xplat-web-only:start — overlays/toasts/popovers render through RootLayout
+   or showModal on native; these portal/positioning rules are web-only */
 .vx-overlay {
-  z-index: 1000;
+	z-index: 1000;
 }
 
 .vx-overlay-shade {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.45);
+	position: absolute;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.45);
 }
 
 .vx-overlay-content {
-  position: relative;
-  z-index: 1;
+	position: relative;
+	z-index: 1;
 }
 
 .vx-popover {
-  z-index: 1001;
+	z-index: 1001;
+}
+
+.vx-popover-backdrop {
+	background-color: transparent;
 }
 
 .vx-toast-host {
-  position: fixed;
-  z-index: 1002;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
+	position: fixed;
+	z-index: 1002;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: center;
+	pointer-events: none;
 }
 
-.vx-toast-top { top: 24px; }
-.vx-toast-bottom { bottom: 24px; }
+.vx-toast-top {
+	top: 24px;
+}
+.vx-toast-bottom {
+	bottom: 24px;
+}
 
 .vx-toast {
-  pointer-events: auto;
+	pointer-events: auto;
 }
+/* xplat-web-only:end */
 
 /* auto-grow owns height — the manual resize handle has no native analog */
+/* xplat-web-only:start */
 .vx-textarea {
-  resize: none;
+	resize: none;
 }
+/* xplat-web-only:end */
 
 /* Modal is a real top-layer dialog on web. Presentation variants keep their
    sizing and anchoring in tokens so both the component and openModal share it. */
+/* xplat-web-only:start */
 .vx-modal {
-  width: 480px;
-  max-width: 90%;
-  max-height: 90%;
-  padding: 24px;
-  border: 0;
-  border-radius: 16px;
-  color: var(--color-text);
-  background-color: var(--color-surface);
+	width: 480px;
+	max-width: 90%;
+	max-height: 90%;
+	padding: 24px;
+	border: 0;
+	border-radius: var(--radius-xl);
+	corner-shape: squircle;
+	color: var(--color-text);
+	background-color: var(--color-surface);
 }
 
 .vx-modal::backdrop {
-  background: rgba(15, 23, 42, 0.45);
+	background: rgba(15, 23, 42, 0.45);
 }
 
 .vx-modal--dialog {
-  width: 480px;
-  max-width: 90%;
+	width: 480px;
+	max-width: 90%;
 }
 
 .vx-modal--sheet {
-  width: 100%;
-  max-width: none;
-  max-height: 85%;
-  position: fixed;
-  inset: auto 0 0;
-  margin: 0;
-  border-radius: 16px 16px 0 0;
+	width: 100%;
+	max-width: none;
+	max-height: 85%;
+	position: fixed;
+	inset: auto 0 0;
+	margin: 0;
+	border-top-left-radius: var(--radius-xl);
+	border-top-right-radius: var(--radius-xl);
+	corner-shape: squircle;
 }
 
 .vx-modal--fullscreen {
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  max-height: none;
-  margin: 0;
-  border-radius: 0;
-}
-
+	width: 100%;
+	max-width: none;
+	height: 100%;
+	max-height: none;
+	margin: 0;
+	border-radius: 0;
+}
+
+/* Modal ROUTES (pushRoute presentation:'modal') — the URL stays underneath,
+   so the overlay is a fixed layer over the shell rather than a dialog. */
+.vx-modalroute {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.vx-modalroute-shade {
+	position: absolute;
+	inset: 0;
+	border: 0;
+	padding: 0;
+	background: rgba(15, 23, 42, 0.45);
+	cursor: default;
+}
+
+.vx-modalroute-body {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+	overflow: auto;
+	color: var(--color-text);
+	background-color: var(--color-surface);
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start — placeholder pseudos are DOM-only */
 input::placeholder,
 textarea::placeholder {
-  color: var(--placeholder-color, currentColor);
+	color: var(--placeholder-color, currentColor);
 }
+/* xplat-web-only:end */
 
+/* xplat-web-only:start — native ActivityIndicator is the NS widget */
 .vx-spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  box-sizing: border-box;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: vx-spinner-turn 0.8s linear infinite;
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	box-sizing: border-box;
+	border: 2px solid currentColor;
+	border-right-color: transparent;
+	border-radius: 50%;
+	animation: vx-spinner-turn 0.8s linear infinite;
 }
 
 @keyframes vx-spinner-turn {
-  to { transform: rotate(360deg); }
+	to {
+		transform: rotate(360deg);
+	}
 }
+/* xplat-web-only:end */
 
-.vx-h1 { font-size: 2em; font-weight: bold; }
-.vx-h2 { font-size: 1.5em; font-weight: bold; }
-.vx-h3 { font-size: 1.17em; font-weight: bold; }
-.vx-h4 { font-size: 1em; font-weight: bold; }
-.vx-h5 { font-size: 0.83em; font-weight: bold; }
-.vx-h6 { font-size: 0.67em; font-weight: bold; }
+.vx-h1 {
+	font-size: 2em;
+	font-weight: bold;
+}
+.vx-h2 {
+	font-size: 1.5em;
+	font-weight: bold;
+}
+.vx-h3 {
+	font-size: 1.17em;
+	font-weight: bold;
+}
+.vx-h4 {
+	font-size: 1em;
+	font-weight: bold;
+}
+.vx-h5 {
+	font-size: 0.83em;
+	font-weight: bold;
+}
+.vx-h6 {
+	font-size: 0.67em;
+	font-weight: bold;
+}
+
+/* xplat-web-only:start — glass material is real on iOS 26+; web approximates
+   with backdrop-filter. The class also lands on native elements (inert) so
+   apps can style their own fallback — but these rules are DOM-only. */
+.vx-glass {
+	background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
+	border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+	.vx-glass {
+		background-color: color-mix(in srgb, var(--color-surface) 20%, transparent);
+		-webkit-backdrop-filter: blur(20px) saturate(1.6);
+		backdrop-filter: blur(20px) saturate(1.6);
+	}
+}
+
+.vx-glass--clear {
+	background-color: color-mix(in srgb, var(--color-surface) 12%, transparent);
+	border-color: rgba(255, 255, 255, 0.15);
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+	.vx-glass--clear {
+		-webkit-backdrop-filter: blur(8px) saturate(1.3);
+		backdrop-filter: blur(8px) saturate(1.3);
+	}
+}
+/* xplat-web-only:end */
 
 /* utilities (hand-written subset for the harness; Tailwind later) */
 
-.flex-1 { flex-grow: 1; }
-.items-center { align-items: center; }
-.justify-center { justify-content: center; }
-.gap-4 { gap: 16px; }
+.flex-1 {
+	flex-grow: 1;
+}
+/* Flex divergence guards — NS FlexboxLayout diverges from web flexbox on
+ * shrinkability: grow children never shrink below intrinsic width, fixed
+ * children get crushed, and auto-height rows re-measure grow children at
+ * zero height. min-w-0/min-h-0 let a grow child shrink; shrink-0 protects
+ * a fixed-size child. All three are plain CSS on web. */
+.min-w-0 {
+	min-width: 0;
+}
+.min-h-0 {
+	min-height: 0;
+}
+.shrink-0 {
+	flex-shrink: 0;
+}
+.grow {
+	flex-grow: 1;
+}
+.items-center {
+	align-items: center;
+}
+.justify-center {
+	justify-content: center;
+}
+.gap-4 {
+	gap: 16px;
+}
+
+.text-xl {
+	font-size: 20px;
+}
+.font-bold {
+	font-weight: bold;
+}
 
-.text-xl { font-size: 20px; }
-.font-bold { font-weight: bold; }
+/* Corner utilities — consume the --radius-* scale and carry the smooth
+   (squircle) corner treatment. Circles stay circular: .rounded-full omits
+   corner-shape deliberately (squircle at full radius = a squircle disk,
+   not a circle). Opt out per element with `corner-shape: round`. */
+.rounded-sm {
+	border-radius: var(--radius-sm);
+	corner-shape: squircle;
+}
+.rounded-md {
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+}
+.rounded-lg {
+	border-radius: var(--radius-lg);
+	corner-shape: squircle;
+}
+.rounded-xl {
+	border-radius: var(--radius-xl);
+	corner-shape: squircle;
+}
+.rounded-full {
+	border-radius: 9999px;
+}
 
-.bg-primary { background-color: var(--color-primary); }
-.text-onprimary { color: var(--color-on-primary); }
-.bg-danger { background-color: #dc2626; }
-.shadow-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
+.bg-primary {
+	background-color: var(--color-primary);
+}
+.text-onprimary {
+	color: var(--color-on-primary);
+}
+.bg-danger {
+	background-color: #dc2626;
+}
+/* xplat-web-only:start — box-shadow is inert on native (elevation is
+   Android-only; no shared mapping yet) */
+.shadow-2 {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+/* xplat-web-only:end */
 
 .btn {
-  padding-top: 12px;
-  padding-right: 20px;
-  padding-bottom: 12px;
-  padding-left: 20px;
-  border-radius: 8px;
+	padding-top: 12px;
+	padding-right: 20px;
+	padding-bottom: 12px;
+	padding-left: 20px;
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
 }
 
 /* harness experiment styles */
 
 .vx-app {
-  padding: 24px;
-  background-color: var(--color-surface);
-  color: var(--color-text);
+	padding: 24px;
+	background-color: var(--color-surface);
+	color: var(--color-text);
 }
 
 .vx-app .text-xl,
 .vx-app Text,
 .vx-app label {
-  color: var(--color-text);
+	color: var(--color-text);
 }
 
 .input {
-  padding: 10px;
-  border-width: 1px;
-  border-color: #94a3b8;
-  border-radius: 6px;
-  font-size: 16px;
+	padding: 10px;
+	border-width: 1px;
+	border-color: #94a3b8;
+	border-radius: var(--radius-sm);
+	corner-shape: squircle;
+	font-size: 16px;
 }
 
 .chip {
-  background-color: var(--color-primary);
-  color: var(--color-on-primary);
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 13px;
+	background-color: var(--color-primary);
+	color: var(--color-on-primary);
+	padding: 4px 10px;
+	border-radius: var(--radius-lg);
+	corner-shape: squircle;
+	font-size: 13px;
 }
 
 .cell {
-  padding: 12px;
-  border-bottom-width: 1px;
-  border-bottom-color: #e2e8f0;
+	padding: 12px;
+	border-bottom-width: 1px;
+	border-bottom-color: #e2e8f0;
 }
 
 .vx-list {
-  flex-grow: 1;
+	flex-grow: 1;
+}
+
+.gap-2 {
+	gap: 8px;
+}
+
+/* In-window sheet — bottom-anchored panel (matches the native RootLayout
+   sheet). Layer is pointer-events:none; backdrop + panel re-enable. */
+.vx-sheet-layer {
+	position: fixed;
+	inset: 0;
+	z-index: 1100;
+	pointer-events: none;
 }
 
-.gap-2 { gap: 8px; }
+.vx-sheet-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(15, 23, 42, 0.45);
+	pointer-events: auto;
+}
+
+.vx-sheet {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	max-height: 85%;
+	padding: 24px;
+	overflow: auto;
+	border-top-left-radius: var(--radius-xl);
+	border-top-right-radius: var(--radius-xl);
+	corner-shape: squircle;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+	pointer-events: auto;
+}