@luxfi/ui 7.4.6 → 7.4.8

package/dist/skeleton.js

@@ -122,11 +122,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React.forwardRef(
   function Skeleton2(props, ref) {
@@ -146,7 +142,7 @@ var Skeleton = React.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -158,7 +154,7 @@ var Skeleton = React.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -195,5 +191,9 @@ var SkeletonText = React.forwardRef(
     )) });
   }
 );
+function LoadingBar({ loading = true }) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+}
 
-export { Skeleton, SkeletonCircle, SkeletonText };
+export { LoadingBar, Skeleton, SkeletonCircle, SkeletonText };

package/dist/table.cjs

@@ -145,11 +145,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -169,7 +165,7 @@ var Skeleton = React3__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -181,7 +177,7 @@ var Skeleton = React3__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/table.js

@@ -124,11 +124,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3.forwardRef(
   function Skeleton2(props, ref) {
@@ -148,7 +144,7 @@ var Skeleton = React3.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -160,7 +156,7 @@ var Skeleton = React3.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/tag.cjs

@@ -208,11 +208,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React4__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -232,7 +228,7 @@ var Skeleton = React4__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -244,7 +240,7 @@ var Skeleton = React4__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -375,7 +371,7 @@ var Tooltip = React4__namespace.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/tag.js

@@ -186,11 +186,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React4.forwardRef(
   function Skeleton2(props, ref) {
@@ -210,7 +206,7 @@ var Skeleton = React4.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -222,7 +218,7 @@ var Skeleton = React4.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -353,7 +349,7 @@ var Tooltip = React4.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/tooltip.cjs

@@ -126,7 +126,7 @@ var Tooltip = React2__namespace.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/tooltip.js

@@ -104,7 +104,7 @@ var Tooltip = React2.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/vite.cjs

@@ -73,14 +73,15 @@ var GUI_DEFINES = {
   "process.env.EXPO_OS": JSON.stringify("web"),
   "process.env.IS_WEB": JSON.stringify("true")
 };
-
-// src/vite.ts
-var DEDUPE = [
+var ENGINE_DEDUPE = [
   "react",
   "react-dom",
   "@tanstack/react-query",
   ...GUI_PACKAGES
 ];
+
+// src/vite.ts
+var DEDUPE = ENGINE_DEDUPE;
 var INCLUDE = [
   "react-native-web",
   "@react-native/normalize-color",

package/dist/vite.js

@@ -71,14 +71,15 @@ var GUI_DEFINES = {
   "process.env.EXPO_OS": JSON.stringify("web"),
   "process.env.IS_WEB": JSON.stringify("true")
 };
-
-// src/vite.ts
-var DEDUPE = [
+var ENGINE_DEDUPE = [
   "react",
   "react-dom",
   "@tanstack/react-query",
   ...GUI_PACKAGES
 ];
+
+// src/vite.ts
+var DEDUPE = ENGINE_DEDUPE;
 var INCLUDE = [
   "react-native-web",
   "@react-native/normalize-color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.6",
+  "version": "7.4.8",
   "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -50,6 +50,11 @@
       "import": "./dist/iam.js",
       "require": "./dist/iam.cjs"
     },
+    "./auth": {
+      "types": "./dist/auth.d.ts",
+      "import": "./dist/auth.js",
+      "require": "./dist/auth.cjs"
+    },
     "./identity": {
       "types": "./dist/identity.d.ts",
       "import": "./dist/identity.js",
@@ -321,14 +326,15 @@
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.76.0",
     "@hanzo/gui": "^7.3.0",
+    "@hanzo/iam": "^0.13.8",
     "@hanzogui/colors": "^7.3.0",
     "@hanzogui/config": "^7.3.0",
     "@hanzogui/core": "^7.3.0",
     "@hanzogui/lucide-icons-2": "^7.3.0",
     "@hanzogui/themes": "^7.3.0",
     "@hanzogui/web": "^7.3.0",
+    "@tanstack/react-query": "^5.76.0",
     "react": ">=19",
     "react-dom": ">=19"
   },
@@ -347,10 +353,14 @@
     },
     "@hanzogui/web": {
       "optional": true
+    },
+    "@hanzo/iam": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@hanzo/gui": "7.3.0",
+    "@hanzo/iam": "^0.13.8",
     "@hanzogui/colors": "7.3.0",
     "@hanzogui/config": "7.3.0",
     "@hanzogui/core": "7.3.0",

package/src/auth.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import { configureIam, handleCallback, logout, startLogin } from '@hanzo/iam/browser';
+import * as React from 'react';
+
+import { IdentityProvider, type IdentityAuth } from './identity';
+import { useWhiteLabel } from './provider';
+import type { WhiteLabel } from './white-label';
+
+// The sign-in half of identity, in ONE place.
+//
+// ./identity answers "who is signed in" and ./chrome renders it (the account
+// switcher already shows `Sign in with <iamDomain>` when anonymous and
+// `Sign out` when ready). Neither of them can START a session — `IdentityAuth`
+// is a seam, and every surface filled it in by hand. That is where the fleet
+// diverged:
+//
+//   lux/explore/lib/oidc.ts          hand-built authorize URL, NO PKCE at all
+//   lux/mpc/dashboard/app/providers  configureIam + startLogin + logout (right)
+//   lux/market/src/app/providers     the same three lines again
+//   lux/cloud/apps/web/src/iam.ts    a third shape: IAMConfig from a brand table
+//                                    plus VITE_IAM_URL / VITE_IAM_CLIENT_ID
+//                                    env overrides — i.e. brand per DEPLOYMENT
+//
+// Four copies, and only one of them was correct. So the flow lives here:
+//
+//   <AppProvider>            host → brand, theme, issuer, clientId
+//     <AuthProvider>         the three verbs, wired to that host
+//   …and on the callback route:
+//   <AuthCallback/>
+//
+// MECHANISM IS NOT OURS. Authorization-Code + PKCE-S256, the state nonce, the
+// verifier, discovery and the token store all belong to `@hanzo/iam/browser`;
+// this module only decides WHICH issuer and WHICH client — and that is a pure
+// function of the Host header (./white-label). A design system that reimplements
+// PKCE is a design system with its own CVEs.
+
+/**
+ * The ONE callback route. Registered as `https://<host>/auth/callback` for
+ * every browser client in the fleet — never under `/api/`, never per app.
+ */
+export const CALLBACK_PATH = '/auth/callback';
+
+/** What `handleCallback` hands back. Structural, so the SDK's types stay its own. */
+export interface AuthResult {
+  readonly token: { readonly accessToken: string };
+  readonly redirect: string;
+}
+
+/**
+ * Point `@hanzo/iam` at the issuer and client this HOST resolves to.
+ *
+ * Idempotent per config, browser-only, and safe to call from anywhere — which
+ * is the point: no ordering rule between a provider's effect and a child's.
+ */
+export function configureAuth(wl: WhiteLabel): void {
+  if (typeof window === 'undefined') return;
+  configureIam({
+    issuer: wl.issuer,
+    clientId: wl.clientId,
+    // The SDK already defaults to `${origin}${CALLBACK_PATH}`; naming it here
+    // makes the fleet-wide invariant one readable, testable line instead of a
+    // default nobody can see.
+    redirect: `${ window.location.origin }${ CALLBACK_PATH }`,
+  });
+}
+
+export interface Auth {
+  /** Start the PKCE login. `redirect` is where to land afterwards. */
+  readonly signIn: (redirect?: string) => void;
+  /** RP-initiated logout + local token clear. */
+  readonly signOut: () => void;
+  /** Finish the login on the callback route. */
+  readonly complete: () => Promise<AuthResult>;
+  /** The host-resolved brand, issuer and client these verbs are bound to. */
+  readonly whiteLabel: WhiteLabel;
+}
+
+/**
+ * The three auth verbs, bound to the current host.
+ *
+ * Configuration happens during render, before any caller can use a verb, so a
+ * callback route works whether or not it sits under an `<AuthProvider>`.
+ */
+export function useAuth(defaultRedirect = '/'): Auth {
+  const whiteLabel = useWhiteLabel();
+  configureAuth(whiteLabel);
+  return React.useMemo<Auth>(() => ({
+    signIn: (redirect = defaultRedirect) => void startLogin({ redirect }),
+    signOut: () => void logout(),
+    complete: () => handleCallback() as Promise<AuthResult>,
+    whiteLabel,
+  }), [ whiteLabel, defaultRedirect ]);
+}
+
+export interface AuthProviderProps {
+  readonly children: React.ReactNode;
+  /** Where a successful sign-in lands. Default `/`. */
+  readonly redirect?: string;
+  /**
+   * Anything the surface must tear down alongside the IAM session — the mirror
+   * of {@link AuthCallbackProps.onSignedIn}. A surface that mints its own
+   * downstream credential from the IAM token drops it here; the IAM session
+   * itself is never the app's to manage.
+   */
+  readonly onSignOut?: () => void;
+}
+
+/**
+ * `IdentityProvider` with the credential half filled in.
+ *
+ * A surface's root becomes `<AppProvider><AuthProvider>…` and nothing else —
+ * no `configureIam`, no `startLogin`, no per-app token keys.
+ */
+export const AuthProvider = ({ children, redirect = '/', onSignOut }: AuthProviderProps): React.ReactElement => {
+  const auth = useAuth(redirect);
+  const identityAuth = React.useMemo<IdentityAuth>(() => ({
+    signIn: () => auth.signIn(redirect),
+    signOut: () => {
+      onSignOut?.();
+      auth.signOut();
+    },
+  }), [ auth, redirect, onSignOut ]);
+  return <IdentityProvider auth={ identityAuth }>{ children }</IdentityProvider>;
+};
+
+export interface AuthCallbackProps {
+  /**
+   * Anything the surface must do with the fresh session before it navigates —
+   * e.g. the MPC dashboard mints its own API JWT from the IAM token. Throwing
+   * here does NOT fail the sign-in: the user is signed in, and a downstream
+   * service being unreachable is that service's problem to report.
+   */
+  readonly onSignedIn?: (result: AuthResult) => void | Promise<void>;
+  /** Router hop. Defaults to a full replace, which needs no router. */
+  readonly navigate?: (to: string) => void;
+  /** Where to go when the callback carried no stashed redirect. */
+  readonly fallback?: string;
+  /** Sign-in entry point offered after a failure. */
+  readonly retryPath?: string;
+}
+
+/**
+ * The ONE callback page body: verify state, exchange the code, go where the
+ * user was headed. Mount it at {@link CALLBACK_PATH}.
+ */
+export const AuthCallback = ({
+  onSignedIn,
+  navigate,
+  fallback = '/',
+  retryPath = '/login',
+}: AuthCallbackProps): React.ReactElement => {
+  const auth = useAuth();
+  const [ error, setError ] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let live = true;
+    void (async () => {
+      try {
+        const result = await auth.complete();
+        if (!live) return;
+        try {
+          await onSignedIn?.(result);
+        } catch {
+          // Signed in; the surface's own downstream call failed. Not a login
+          // failure, and stranding a good session on this screen was the bug.
+        }
+        if (!live) return;
+        const to = result.redirect || fallback;
+        if (navigate) navigate(to);
+        else window.location.replace(to);
+      } catch (e) {
+        if (live) setError(e instanceof Error ? e.message : 'Authentication failed');
+      }
+    })();
+    return () => {
+      live = false;
+    };
+    // `auth` is re-created only when the host changes; the exchange must run once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex min-h-[50vh] items-center justify-center px-4">
+      <div className="w-full max-w-sm text-center">
+        { error ? (
+          <>
+            <p className="mb-2 text-lg font-semibold text-[var(--color-text-error)]">Sign-in failed</p>
+            <p className="mb-6 text-sm text-[var(--color-text-secondary)]">{ error }</p>
+            <a href={ retryPath } className="text-sm underline underline-offset-4">Try again</a>
+          </>
+        ) : (
+          <p className="text-sm text-[var(--color-text-secondary)]">Completing sign in…</p>
+        ) }
+      </div>
+    </div>
+  );
+};

package/src/engine.ts

@@ -105,8 +105,45 @@ export const GUI_DEFINES: Readonly<Record<string, string>> = {
 };
 
 /**
- * Exact-match aliases pinning every engine package to ONE entry file, for
- * bundlers that have no `dedupe` of their own (webpack).
+ * Every package that must exist exactly ONCE in a bundle — the engine, plus the
+ * three libraries outside it that also publish a module-scope React context.
+ *
+ * `react` and `react-dom` are the classic case. `@tanstack/react-query` is the
+ * same failure with a different message: lux.market resolved two copies (one
+ * under react@19.1.0, one under react@19.2.8), the app's `QueryClientProvider`
+ * came from copy A and `@luxfi/ui`'s `useQuery` read copy B's context, and the
+ * whole page died with "No QueryClient set, use QueryClientProvider to set one".
+ *
+ * ONE list, shared by both bundler wrappers, so vite and next cannot dedupe
+ * different sets — which is exactly how that market bug survived: the vite
+ * wrapper already listed these three, the Next wrapper did not.
+ */
+export const ENGINE_DEDUPE: ReadonlyArray<string> = [
+  'react',
+  'react-dom',
+  '@tanstack/react-query',
+  ...GUI_PACKAGES,
+];
+
+/**
+ * The subset of ENGINE_DEDUPE that may be pinned by a hard bundler ALIAS.
+ *
+ * `dedupe` is advisory hoisting; an alias is a hard redirect, and redirecting
+ * `react` / `react-dom` inside a Next app breaks the framework's own graph —
+ * the RSC client manifest is keyed on Next's copy, so the MPC dashboard died
+ * with `Could not find the module … segment-explorer-node.js#SegmentViewNode in
+ * the React Client Manifest` followed by `__webpack_modules__[moduleId] is not
+ * a function`. Next already guarantees one React; it does not guarantee one
+ * react-query, and it does not guarantee one popper.
+ */
+export const ALIASABLE: ReadonlyArray<string> = [
+  '@tanstack/react-query',
+  ...GUI_PACKAGES,
+];
+
+/**
+ * Exact-match aliases pinning every aliasable package to ONE entry file, for
+ * bundlers that have no `dedupe` of their own (webpack, turbopack).
  *
  * Keys carry webpack's `$` exact-match suffix so only the bare specifier is
  * redirected — a deep import keeps resolving normally. Packages that are not
@@ -119,7 +156,7 @@ export function guiAliases(from: string): Record<string, string> {
   const { createRequire } = require('node:module') as typeof import('node:module');
   const require_ = createRequire(`${ from.replace(/\/?$/, '/') }noop.js`);
   const alias: Record<string, string> = {};
-  for (const pkg of GUI_PACKAGES) {
+  for (const pkg of ALIASABLE) {
     try {
       alias[`${ pkg }$`] = require_.resolve(pkg);
     } catch {

package/src/index.ts

@@ -199,7 +199,7 @@ export type { SelectOption, ListCollection, SelectRootProps, SelectProps, Select
 export { Separator } from './separator';
 export type { SeparatorProps } from './separator';
 
-export { Skeleton, SkeletonCircle, SkeletonText } from './skeleton';
+export { Skeleton, SkeletonCircle, SkeletonText, LoadingBar } from './skeleton';
 export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps } from './skeleton';
 
 export { Slider } from './slider';

package/src/next.ts

@@ -49,6 +49,28 @@ export function withLuxUi(config: LuxUiNextConfig = {}): LuxUiNextConfig {
   // so the equivalent is an exact-match alias per package, resolved from the app
   // root — see ./engine for why two copies is a crash and not a size problem.
   const engine = guiAliases(config.dir ?? process.cwd());
+  // The same dedupe for Turbopack, which is the ONLY dev bundler from Next 16 —
+  // `webpack()` below is never called by `next dev`, so a webpack-only alias map
+  // deduped production and left development with N copies of `@hanzogui/popper`
+  // and the `Cannot read properties of undefined (reading 'setReference')`
+  // storm that comes with them.
+  //
+  // Two shape differences from webpack, both load-bearing:
+  //   - no `$` exact-match suffix; a bare key is already exact.
+  //   - an ABSOLUTE path is not a valid alias value. Turbopack reads it as a
+  //     server-relative URL and fails with `Can't resolve
+  //     './Users/.../react/index.js' — server relative imports are not
+  //     implemented yet`, which takes the whole dev server down. The value has
+  //     to be a project-relative `./…` specifier, so a package resolved outside
+  //     the project root is skipped rather than mis-aliased.
+  const root = config.dir ?? process.cwd();
+  const path = require('node:path') as typeof import('node:path');
+  const engineTurbopack: Record<string, string> = {};
+  for (const [ key, abs ] of Object.entries(engine)) {
+    const rel = path.relative(root, abs);
+    if (rel.startsWith('..') || path.isAbsolute(rel)) continue;
+    engineTurbopack[key.replace(/\$$/, '')] = `./${ rel }`;
+  }
   // `dir` is OURS, not Next's — leaving it on the returned object makes Next
   // print `Unrecognized key(s) in object: 'dir'` on every boot of every surface
   // that passes it. Consume it here.
@@ -60,6 +82,7 @@ export function withLuxUi(config: LuxUiNextConfig = {}): LuxUiNextConfig {
       ...config.turbopack,
       resolveAlias: {
         'react-native': 'react-native-web',
+        ...engineTurbopack,
         ...config.turbopack?.resolveAlias,
       },
     },

package/src/skeleton.tsx

@@ -142,11 +142,19 @@ function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeo
   return out as Omit<T, (typeof SHIM_PROPS)[number]>;
 }
 
-const SKELETON_CLASSES = [
-  'animate-skeleton-shimmer rounded-sm',
-  'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
-  'bg-[length:200%_100%]',
-].join(' ');
+// A skeleton reserves space. It does not move.
+//
+// It used to shimmer via a per-element `background-position` animation, which
+// repaints the element's whole box every frame. Under a 4x CPU throttle that
+// costs 33.6fps at 1460 concurrent skeletons and 13.8fps at 3000. Rewriting it
+// as a per-element `transform` sheen — the textbook "animate transform only"
+// fix — measured WORSE: 23.0fps and 5.4fps, because it also adds a layer and a
+// clip per element. Holding still costs 120fps at every n.
+//
+// The "work is in flight" signal is <LoadingBar/> below: one animated element
+// for the whole page instead of one per skeleton. Full numbers and reasoning
+// live next to the CSS, in section 6c of @luxfi/ui/tokens.css.
+const SKELETON_CLASSES = 'lux-skeleton rounded-sm';
 
 const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
 
@@ -176,7 +184,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
         <Component
           ref={ ref }
           data-loading
-          className={ cn(SKELETON_CLASSES, 'text-transparent [&_*]:invisible', cls) }
+          className={ cn(SKELETON_CLASSES, '[&_*]:invisible', cls) }
           style={ mergedStyle }
           { ...htmlRest }
         >
@@ -189,7 +197,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       <Component
         ref={ ref }
         data-loading
-        className={ cn(SKELETON_CLASSES, children ? 'text-transparent [&_*]:invisible' : 'min-h-5', cls) }
+        className={ cn(SKELETON_CLASSES, children ? '[&_*]:invisible' : 'min-h-5', cls) }
         style={ mergedStyle }
         { ...htmlRest }
       >
@@ -252,3 +260,24 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     );
   },
 );
+
+// ---------------------------------------------------------------------------
+// LoadingBar
+// ---------------------------------------------------------------------------
+
+/**
+ * The page-level "work is in flight" signal — one animated element, however
+ * many skeletons are on screen. Mount it while any request is outstanding.
+ *
+ * It is `position: fixed` and 2px tall, so it is out of flow: it cannot shift
+ * layout (CLS 0) and it cannot tint content. Under prefers-reduced-motion the
+ * sweep stops and the track stays lit, so the state is still legible.
+ *
+ * This is what replaces a bare spinner. A spinner says "something is
+ * happening somewhere"; a skeleton plus this bar says "here is the shape of
+ * what is coming, and it is still coming".
+ */
+export function LoadingBar({ loading = true }: { readonly loading?: boolean }) {
+  if (!loading) return null;
+  return <div className="lux-loading" role="progressbar" aria-busy="true" aria-label="Loading"/>;
+}