@passui/react 0.1.44 → 0.1.46

package/src/lib/haptics.ts

@@ -1,23 +1,23 @@
 /** The feedback kinds the systems share, from a selection tick to an error. */
 export type HapticKind =
-    | "selection"
-    | "light"
-    | "medium"
-    | "heavy"
-    | "success"
-    | "warning"
-    | "error"
+	| "selection"
+	| "light"
+	| "medium"
+	| "heavy"
+	| "success"
+	| "warning"
+	| "error";
 
-let player: (kind: HapticKind) => void = () => {}
+let player: (kind: HapticKind) => void = () => {};
 
 /**
  * Components only ask for feedback; the app decides how it plays on this
  * device (system haptics, a vibration, or nothing) and whether it's on.
  */
 export function setHapticPlayer(next: (kind: HapticKind) => void): void {
-    player = next
+	player = next;
 }
 
 export function haptic(kind: HapticKind): void {
-    player(kind)
+	player(kind);
 }

package/src/lib/language.ts

@@ -1,16 +1,16 @@
 /** A language's name in itself, capitalized: "Français", "中文". */
 export function getNativeLanguageName(tag: string) {
-    const name = new Intl.DisplayNames([tag], {
-        type: "language",
-    }).of(tag)
-    return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag
+	const name = new Intl.DisplayNames([tag], {
+		type: "language",
+	}).of(tag);
+	return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag;
 }
 
 /** A language's name as read in `displayLocale`: "French" in English. */
 export function getLocalizedLanguageName(tag: string, displayLocale: string) {
-    return (
-        new Intl.DisplayNames([displayLocale], {
-            type: "language",
-        }).of(tag) ?? tag
-    )
+	return (
+		new Intl.DisplayNames([displayLocale], {
+			type: "language",
+		}).of(tag) ?? tag
+	);
 }

package/src/lib/range-value.ts

@@ -1,32 +1,38 @@
 /** Keep controlled numeric inputs within finite bounds without floating-point drift. */
 export function clampRange(value: number, min: number, max: number): number {
-    if (!Number.isFinite(value)) return min
-    return Math.min(max, Math.max(min, value))
+	if (!Number.isFinite(value)) return min;
+	return Math.min(max, Math.max(min, value));
 }
 
 /** The nearest reachable step from min, optionally allowing an exact maximum. */
 export function stepRange(
-    value: number,
-    direction: -1 | 1,
-    min: number,
-    max: number,
-    step: number
+	value: number,
+	direction: -1 | 1,
+	min: number,
+	max: number,
+	step: number,
 ): number {
-    const precision = Math.min(12, Math.max(0, ...[min, max, step].map(decimalPlaces)))
-    const factor = 10 ** precision
-    const low = Math.round(min * factor)
-    const high = Math.round(max * factor)
-    const increment = Math.max(1, Math.round(step * factor))
-    const current = Math.round(clampRange(value, min, max) * factor)
-    const next =
-        direction > 0
-            ? low + (Math.floor((current - low) / increment) + 1) * increment
-            : low + (Math.ceil((current - low) / increment) - 1) * increment
-    return clampRange(Math.min(high, Math.max(low, next)) / factor, min, max)
+	const precision = Math.min(
+		12,
+		Math.max(0, ...[min, max, step].map(decimalPlaces)),
+	);
+	const factor = 10 ** precision;
+	const low = Math.round(min * factor);
+	const high = Math.round(max * factor);
+	const increment = Math.max(1, Math.round(step * factor));
+	const current = Math.round(clampRange(value, min, max) * factor);
+	const next =
+		direction > 0
+			? low + (Math.floor((current - low) / increment) + 1) * increment
+			: low + (Math.ceil((current - low) / increment) - 1) * increment;
+	return clampRange(Math.min(high, Math.max(low, next)) / factor, min, max);
 }
 
 function decimalPlaces(value: number): number {
-    const text = String(value)
-    const [mantissa, exponent] = text.toLowerCase().split("e")
-    return Math.max(0, (mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0))
+	const text = String(value);
+	const [mantissa, exponent] = text.toLowerCase().split("e");
+	return Math.max(
+		0,
+		(mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0),
+	);
 }

package/src/lib/screen-edges.ts

@@ -1,11 +1,11 @@
 export interface ScreenEdges {
-    top: number
-    right: number
-    bottom: number
-    left: number
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
 }
 
-let probe: HTMLDivElement | undefined
+let probe: HTMLDivElement | undefined;
 
 /**
  * How far menus and popovers keep from each side of the screen: clear of
@@ -13,29 +13,32 @@ let probe: HTMLDivElement | undefined
  * further from the glass, as the systems' own menus are.
  */
 export function screenEdges(): ScreenEdges {
-    const margin =
-        typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches ? 12 : 8
-    if (typeof document === "undefined") {
-        return {
-            top: margin,
-            right: margin,
-            bottom: margin,
-            left: margin,
-        }
-    }
-    if (!probe) {
-        probe = document.createElement("div")
-        probe.setAttribute("aria-hidden", "true")
-        probe.style.cssText =
-            "position:fixed;inset:0;visibility:hidden;pointer-events:none;" +
-            "padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)"
-    }
-    if (!probe.isConnected) document.body.appendChild(probe)
-    const style = getComputedStyle(probe)
-    return {
-        top: Number.parseFloat(style.paddingTop) + margin,
-        right: Number.parseFloat(style.paddingRight) + margin,
-        bottom: Number.parseFloat(style.paddingBottom) + margin,
-        left: Number.parseFloat(style.paddingLeft) + margin,
-    }
+	const margin =
+		typeof window !== "undefined" &&
+		window.matchMedia("(pointer: coarse)").matches
+			? 12
+			: 8;
+	if (typeof document === "undefined") {
+		return {
+			top: margin,
+			right: margin,
+			bottom: margin,
+			left: margin,
+		};
+	}
+	if (!probe) {
+		probe = document.createElement("div");
+		probe.setAttribute("aria-hidden", "true");
+		probe.style.cssText =
+			"position:fixed;inset:0;visibility:hidden;pointer-events:none;" +
+			"padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)";
+	}
+	if (!probe.isConnected) document.body.appendChild(probe);
+	const style = getComputedStyle(probe);
+	return {
+		top: Number.parseFloat(style.paddingTop) + margin,
+		right: Number.parseFloat(style.paddingRight) + margin,
+		bottom: Number.parseFloat(style.paddingBottom) + margin,
+		left: Number.parseFloat(style.paddingLeft) + margin,
+	};
 }

package/src/lib/shapes.ts

@@ -1,28 +1,31 @@
 /** Material 3 expressive outlines: a circle and the scalloped "cookie", "clover", and "sunny" shapes. */
 export const shapes = [
-    "circle",
-    "cookie4",
-    "cookie6",
-    "cookie9",
-    "clover",
-    "sunny",
-    /** Reserved for the Pherus mark itself, so it never matches a project's icon. */
-    "cookie12",
-] as const
+	"circle",
+	"cookie4",
+	"cookie6",
+	"cookie9",
+	"clover",
+	"sunny",
+	/** Reserved for the Pherus mark itself, so it never matches a project's icon. */
+	"cookie12",
+] as const;
 
-export type Shape = (typeof shapes)[number]
+export type Shape = (typeof shapes)[number];
 
 /** Lobe count and wave depth (as a fraction of the radius) for each wavy shape. */
-const waves: Record<Exclude<Shape, "circle">, { lobes: number; depth: number }> = {
-    cookie4: { lobes: 4, depth: 0.08 },
-    cookie6: { lobes: 6, depth: 0.07 },
-    cookie9: { lobes: 9, depth: 0.055 },
-    clover: { lobes: 4, depth: 0.16 },
-    sunny: { lobes: 8, depth: 0.045 },
-    cookie12: { lobes: 12, depth: 0.04 },
-}
+const waves: Record<
+	Exclude<Shape, "circle">,
+	{ lobes: number; depth: number }
+> = {
+	cookie4: { lobes: 4, depth: 0.08 },
+	cookie6: { lobes: 6, depth: 0.07 },
+	cookie9: { lobes: 9, depth: 0.055 },
+	clover: { lobes: 4, depth: 0.16 },
+	sunny: { lobes: 8, depth: 0.045 },
+	cookie12: { lobes: 12, depth: 0.04 },
+};
 
-const STEPS = 144
+const STEPS = 144;
 
 /**
  * An SVG path for a Material 3 expressive shape centred on (cx, cy): a circle
@@ -31,25 +34,26 @@ const STEPS = 144
  * the same `r`, keeping icons optically the same size.
  */
 export function shapePath(shape: Shape, cx: number, cy: number, r: number) {
-    if (shape === "circle") {
-        return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`
-    }
+	if (shape === "circle") {
+		return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`;
+	}
 
-    const { lobes, depth } = waves[shape]
-    const base = r / (1 + depth)
-    const points: string[] = []
-    for (let i = 0; i < STEPS; i++) {
-        const theta = (i / STEPS) * Math.PI * 2 - Math.PI / 2
-        const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)))
-        const x = cx + radius * Math.cos(theta)
-        const y = cy + radius * Math.sin(theta)
-        points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`)
-    }
-    return `${points.join(" ")} Z`
+	const { lobes, depth } = waves[shape];
+	const base = r / (1 + depth);
+	const points: string[] = [];
+	for (let i = 0; i < STEPS; i++) {
+		const theta = (i / STEPS) * Math.PI * 2 - Math.PI / 2;
+		const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)));
+		const x = cx + radius * Math.cos(theta);
+		const y = cy + radius * Math.sin(theta);
+		points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`);
+	}
+	return `${points.join(" ")} Z`;
 }
 
 /**
  * The app wide `dualTone` rule dims every svg path for two tone icons; a
  * drawn shape or illustration opts out with this so its colors stay true.
  */
-export const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none"
+export const plainSvg =
+	"cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";

package/src/machines/popover.machine.ts

@@ -0,0 +1,51 @@
+/**
+ * Popover state machine — pure function, no React, no DOM.
+ *
+ * Translates directly to a Rust enum with match arms.
+ *
+ * States:
+ *   closed   → nothing visible
+ *   opening  → surface morphing from trigger to content
+ *   open     → content fully visible
+ *   closing  → surface morphing back to trigger
+ *
+ * The OPENED/CLOSED events are fired by onAnimationComplete,
+ * so the machine stays in "opening"/"closing" until the animation
+ * actually finishes — enabling interruptibility (close during open).
+ */
+export type PopoverState = "closed" | "opening" | "open" | "closing";
+
+export type PopoverEvent = "OPEN" | "OPENED" | "CLOSE" | "CLOSED" | "TOGGLE";
+
+export function popoverMachine(
+	state: PopoverState,
+	event: PopoverEvent,
+): PopoverState {
+	switch (state) {
+		case "closed":
+			return event === "OPEN" || event === "TOGGLE" ? "opening" : "closed";
+		case "opening":
+			if (event === "CLOSE" || event === "TOGGLE") return "closing";
+			if (event === "OPENED") return "open";
+			return "opening";
+		case "open":
+			return event === "CLOSE" || event === "TOGGLE" ? "closing" : "open";
+		case "closing":
+			if (event === "OPEN" || event === "TOGGLE") return "opening";
+			if (event === "CLOSED") return "closed";
+			return "closing";
+	}
+}
+
+export type PopoverContextValue = {
+	state: PopoverState;
+	send: (event: PopoverEvent) => void;
+	/** The trigger element — set by PopoverTrigger, read by PopoverContent for positioning. */
+	triggerRef: React.RefObject<HTMLElement | null>;
+	/** Unique ID for aria-controls + layoutId morphing. */
+	contentId: string;
+	/** Shared layoutId for motion's matched-geometry transition. */
+	surfaceId: string;
+	/** Whether the popover is open or transitioning (not closed). */
+	isPresent: boolean;
+};

package/src/motion/transitions.ts

@@ -1,12 +1,12 @@
-import { springs } from "@passui/tokens/motion"
-import type { Transition } from "motion/react"
+import { springs } from "@passui/tokens/motion";
+import type { Transition } from "motion/react";
 
 /** Design-token springs as motion/react transitions. */
 export const spring = {
-    smooth: { type: "spring", ...springs.smooth },
-    snappy: { type: "spring", ...springs.snappy },
-    bouncy: { type: "spring", ...springs.bouncy },
-} as const satisfies Record<keyof typeof springs, Transition>
+	smooth: { type: "spring", ...springs.smooth },
+	snappy: { type: "spring", ...springs.snappy },
+	bouncy: { type: "spring", ...springs.bouncy },
+} as const satisfies Record<keyof typeof springs, Transition>;
 
 /**
  * Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
@@ -16,9 +16,9 @@ export const spring = {
  * from the trigger and snaps into place with a physical bounce.
  */
 export const fluidOvershoot = {
-    duration: 0.4,
-    ease: [0.34, 1.56, 0.1, 1] as [number, number, number, number],
-} as const
+	duration: 0.4,
+	ease: [0.34, 1.56, 0.1, 1] as [number, number, number, number],
+} as const;
 
 /**
  * Exit motion: content collapses back toward its source.
@@ -26,11 +26,11 @@ export const fluidOvershoot = {
  * like a water drop absorbing back into its origin.
  */
 export const fluidCollapse = {
-    duration: 0.28,
-    ease: [0.4, 0, 0.6, 1] as [number, number, number, number],
-} as const
+	duration: 0.28,
+	ease: [0.4, 0, 0.6, 1] as [number, number, number, number],
+} as const;
 
-export type FloatingPanelSide = "above" | "below"
+export type FloatingPanelSide = "above" | "below";
 
 /**
  * Anchored panels settle toward their source without shrinking their text.
@@ -39,20 +39,23 @@ export type FloatingPanelSide = "above" | "below"
  * crossfade, rather than a plain slide.
  */
 export function floatingPanelMotion(side: FloatingPanelSide = "below") {
-    const direction = side === "above" ? 1 : -1
-    return {
-        initial: { opacity: 0, scale: 0.92, y: direction * 6 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.95, y: direction * 4 },
-        transition: {
-            ...fluidOvershoot,
-            opacity: { duration: 0.16, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] },
-        },
-    } as const
+	const direction = side === "above" ? 1 : -1;
+	return {
+		initial: { opacity: 0, scale: 0.92, y: direction * 6 },
+		animate: { opacity: 1, scale: 1, y: 0 },
+		exit: { opacity: 0, scale: 0.95, y: direction * 4 },
+		transition: {
+			...fluidOvershoot,
+			opacity: {
+				duration: 0.16,
+				ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
+			},
+		},
+	} as const;
 }
 
 /** Default below-anchor presentation, retained for existing consumers. */
-export const popoverMotion = floatingPanelMotion()
+export const popoverMotion = floatingPanelMotion();
 
 /**
  * Zoom/matched-geometry transition for dialogs and center-placed sheets.
@@ -62,11 +65,11 @@ export const popoverMotion = floatingPanelMotion()
  * asynchronously — not a harsh switch.
  */
 export const zoomReveal = {
-    initial: { opacity: 0, scale: 0.88 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.92 },
-    transition: fluidOvershoot,
-} as const
+	initial: { opacity: 0, scale: 0.88 },
+	animate: { opacity: 1, scale: 1 },
+	exit: { opacity: 0, scale: 0.92 },
+	transition: fluidOvershoot,
+} as const;
 
 /**
  * Content crossfade for elements inside an overlay.
@@ -75,20 +78,20 @@ export const zoomReveal = {
  * and popovers — the container arrives first, then content fades in.
  */
 export const contentCrossfade = {
-    initial: { opacity: 0, scale: 0.96 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.98 },
-    transition: {
-        duration: 0.24,
-        ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
-        delay: 0.04,
-    },
-} as const
+	initial: { opacity: 0, scale: 0.96 },
+	animate: { opacity: 1, scale: 1 },
+	exit: { opacity: 0, scale: 0.98 },
+	transition: {
+		duration: 0.24,
+		ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
+		delay: 0.04,
+	},
+} as const;
 
 /** Floating bars that rise from the bottom edge. */
 export const riseMotion = {
-    initial: { opacity: 0, y: 32 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 24 },
-    transition: spring.smooth,
-} as const
+	initial: { opacity: 0, y: 32 },
+	animate: { opacity: 1, y: 0 },
+	exit: { opacity: 0, y: 24 },
+	transition: spring.smooth,
+} as const;

package/src/styles/code-block.css

@@ -1,45 +1,71 @@
 @layer components {
-    .passui-code-block pre {
-        margin: 0;
-        padding-block: 1rem;
-        padding-inline-end: 1.5rem;
-        overflow-x: auto;
-        font-family: var(--font-mono);
-        font-size: var(--text-footnote);
-        line-height: 1.75;
-        color: var(--color-label);
-        background: transparent !important;
-        counter-reset: code-line;
-        tab-size: 4;
-    }
-    .passui-code-block .line { display: inline-block; min-width: 100%; }
-    .passui-code-block[data-line-numbers] .line::before {
-        counter-increment: code-line;
-        content: counter(code-line);
-        display: inline-block;
-        width: 3rem;
-        margin-inline-end: 1.25rem;
-        color: var(--color-label-tertiary);
-        text-align: end;
-        user-select: none;
-    }
-    .passui-code-block:not([data-line-numbers]) pre { padding-inline-start: 1rem; }
-    .passui-code-block[data-size="sm"] pre {
-        padding-block: 0.75rem;
-        font-size: var(--text-caption);
-        line-height: 1.6;
-    }
-    .passui-code-block[data-size="sm"][data-line-numbers] .line::before { width: 2.5rem; margin-inline-end: 1rem; }
-    .passui-code-block[data-size="lg"] pre {
-        padding-block: 1.25rem;
-        font-size: var(--text-subheadline);
-        line-height: 1.8;
-    }
-    .passui-code-block[data-size="lg"][data-line-numbers] .line::before { width: 3.5rem; margin-inline-end: 1.5rem; }
-    .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-light); background: transparent !important; }
-    @media (prefers-color-scheme: dark) {
-        .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-dark); }
-    }
-    [data-theme="light"] .passui-code-block .shiki, [data-theme="light"] .passui-code-block .shiki span { color: var(--shiki-light); }
-    [data-theme="dark"] .passui-code-block .shiki, [data-theme="dark"] .passui-code-block .shiki span { color: var(--shiki-dark); }
+	.passui-code-block pre {
+		margin: 0;
+		padding-block: 1rem;
+		padding-inline-end: 1.5rem;
+		overflow-x: auto;
+		font-family: var(--font-mono);
+		font-size: var(--text-footnote);
+		line-height: 1.75;
+		color: var(--color-label);
+		/* biome-ignore lint/complexity/noImportantStyles: CSS utility override */
+		background: transparent !important;
+		counter-reset: code-line;
+		tab-size: 4;
+	}
+	.passui-code-block .line {
+		display: inline-block;
+		min-width: 100%;
+	}
+	.passui-code-block[data-line-numbers] .line::before {
+		counter-increment: code-line;
+		content: counter(code-line);
+		display: inline-block;
+		width: 3rem;
+		margin-inline-end: 1.25rem;
+		color: var(--color-label-tertiary);
+		text-align: end;
+		user-select: none;
+	}
+	.passui-code-block:not([data-line-numbers]) pre {
+		padding-inline-start: 1rem;
+	}
+	.passui-code-block[data-size="sm"] pre {
+		padding-block: 0.75rem;
+		font-size: var(--text-caption);
+		line-height: 1.6;
+	}
+	.passui-code-block[data-size="sm"][data-line-numbers] .line::before {
+		width: 2.5rem;
+		margin-inline-end: 1rem;
+	}
+	.passui-code-block[data-size="lg"] pre {
+		padding-block: 1.25rem;
+		font-size: var(--text-subheadline);
+		line-height: 1.8;
+	}
+	.passui-code-block[data-size="lg"][data-line-numbers] .line::before {
+		width: 3.5rem;
+		margin-inline-end: 1.5rem;
+	}
+	.passui-code-block .shiki,
+	.passui-code-block .shiki span {
+		color: var(--shiki-light);
+		/* biome-ignore lint/complexity/noImportantStyles: CSS utility override */
+		background: transparent !important;
+	}
+	@media (prefers-color-scheme: dark) {
+		.passui-code-block .shiki,
+		.passui-code-block .shiki span {
+			color: var(--shiki-dark);
+		}
+	}
+	[data-theme="light"] .passui-code-block .shiki,
+	[data-theme="light"] .passui-code-block .shiki span {
+		color: var(--shiki-light);
+	}
+	[data-theme="dark"] .passui-code-block .shiki,
+	[data-theme="dark"] .passui-code-block .shiki span {
+		color: var(--shiki-dark);
+	}
 }