npm - @luxfi/ui - Versions diffs - 5.5.4 → 5.5.6 - Mend

@luxfi/ui 5.5.4 → 5.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/commerce/ui/context.tsx +13 -16
package/components/access-code-input.tsx +3 -4
package/components/analytics.tsx +8 -17
package/components/auth/callback.tsx +40 -0
package/components/auth/login-panel.tsx +22 -50
package/components/auth/login.tsx +47 -0
package/components/auth/provider.tsx +34 -0
package/components/auth/resume.ts +16 -0
package/components/auth/widget.tsx +80 -0
package/components/back-button.tsx +4 -7
package/components/chat-widget.tsx +9 -11
package/components/commerce/bag-button.tsx +8 -7
package/components/commerce/buy-button.tsx +2 -3
package/components/commerce/checkout-button.tsx +12 -10
package/components/commerce/checkout-panel/cart-accordian.tsx +3 -4
package/components/commerce/checkout-panel/desktop-cp.tsx +7 -8
package/components/commerce/checkout-panel/index.tsx +1 -1
package/components/commerce/checkout-panel/mobile-cp.tsx +5 -5
package/components/commerce/checkout-panel/policy-links.tsx +7 -12
package/components/commerce/checkout-panel/steps-indicator.tsx +1 -1
package/components/commerce/desktop-bag-popup.tsx +1 -1
package/components/commerce/drawer/micro.tsx +30 -30
package/components/commerce/drawer/shell.tsx +3 -5
package/components/contact-dialog/contact-form.tsx +6 -13
package/components/contact-dialog/index.tsx +2 -2
package/components/copyright.tsx +3 -2
package/components/drawer-margin.tsx +2 -2
package/components/footer.tsx +7 -8
package/components/header/desktop-nav-menu.tsx +6 -6
package/components/header/desktop.tsx +9 -9
package/components/header/index.tsx +2 -2
package/components/header/mobile-bag-drawer.tsx +1 -1
package/components/header/mobile-menu-toggle-button.tsx +5 -6
package/components/header/mobile-nav-menu-ai.tsx +14 -13
package/components/header/mobile-nav-menu-item.tsx +12 -11
package/components/header/mobile-nav-menu.tsx +19 -18
package/components/header/mobile.tsx +10 -11
package/components/icons/index.ts +0 -1
package/components/icons/social-icon.tsx +1 -1
package/components/index.ts +2 -2
package/components/logo.tsx +40 -67
package/components/main.tsx +3 -4
package/components/mini-chart/mini-chart.tsx +2 -1
package/components/security/index.tsx +55 -0
package/next/font/font-desc.ts +18 -0
package/next/font/fonts.ts +40 -0
package/next/font/get-app-router-font-classes.ts +14 -12
package/next/font/load-and-return-lux-next-fonts-on-import.ts +16 -24
package/next/font/local/Zen-Variable.woff2 +0 -0
package/next/font/next-font-desc.ts +18 -17
package/next/head-metadata/index.tsx +7 -6
package/next/head-metadata/next-metadata.ts +49 -0
package/next/middleware/determine-device-mw.ts +0 -13
package/package.json +15 -15
package/root-layout/index.tsx +42 -29
package/style/fonts/Zen-Variable.woff2 +0 -0
package/style/lux-colors.css +0 -1
package/style/lux-fonts.css +5 -11
package/style/lux-global-non-next.css +9 -9
package/style/lux-global.css +99 -15
package/tsconfig.json +8 -0
package/types/site-def.ts +7 -0
package/components/auth/auth-listener.tsx +0 -33
package/components/auth/auth-token/clear-auth-token.tsx +0 -12
package/components/auth/auth-token/set-auth-token.tsx +0 -16
package/components/auth/common-auth-domains.ts +0 -17
package/components/auth/mobile-login-button.tsx +0 -112
package/components/auth/signup-panel.tsx +0 -113
package/components/icons/lux-logo.tsx +0 -10
package/next/font/local/Druk-Wide-Bold.ttf +0 -0
package/next/font/local/Druk-Wide-Medium.ttf +0 -0
package/next/head-metadata/from-next/metadata-types.ts +0 -158
package/next/head-metadata/from-next/opengraph-types.ts +0 -267
package/next/head-metadata/from-next/twitter-types.ts +0 -92
package/style/fonts/Druk-Wide-Bold.ttf +0 -0
package/style/fonts/Druk-Wide-Medium.ttf +0 -0
package/tailwind/fontFamily.tailwind.lux.ts +0 -18
package/tailwind/index.ts +0 -2
package/tailwind/lux-tw-fonts.ts +0 -40
package/tailwind/tailwind.config.lux-preset.ts +0 -10

package/next/font/font-desc.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * A font in this site's vocabulary.
+ *
+ * `name` is the ROLE the font plays — `sans`, `nav`, `heading`, `serif`, `mono`
+ * — not a file and not a family. The stack is what the browser resolves, and
+ * `cssVar` is the custom property the next/font loader publishes the loaded
+ * face under, so the stack can point at it.
+ *
+ * It lived in a Tailwind preset and was called `TwFontDesc`, which named the
+ * engine that happened to read it rather than what it is. The engine is gone;
+ * the fonts are not.
+ */
+export type FontDesc = {
+  /** The role: `sans`, `nav`, `heading`, `serif`, `mono`. */
+  name: string
+  fontFamily: string[]
+  cssVar?: string
+}

package/next/font/fonts.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import type { FontDesc } from './font-desc'
+/* Read by ./load-and-return-lux-next-fonts-on-import.ts */
+export default [
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'sans'
+  },
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'nav'
+  },
+  {
+    fontFamily: ['var(--font-zen-sans)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-zen-sans',
+    name: 'heading'
+  },
+  {
+    name: 'serif',
+    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
+  },
+  {
+    name: 'mono',
+    fontFamily: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ]
+  }
+] as FontDesc[]

package/next/font/get-app-router-font-classes.ts CHANGED Viewed

@@ -1,17 +1,19 @@
 import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
-  // These will be injected for <body> in app router app that uses our RootLayout
-  // First is assumed to be mapped to the default font and is injected into <body>
-  // as a normal tw font family class.
+/**
+ * next/font's own generated class names, for <body> in an app-router app using
+ * our RootLayout.
+ *
+ * Each one DEFINES a custom property holding the face it loaded, so they have
+ * to land on an element before anything can name `var(--font-inter)`.
+ *
+ * It used to append `font-<role>` for the default face as well. That was a
+ * utility class, and with no engine generating it the body had a name no sheet
+ * served — the family is set on `body` in lux-global.css instead, where it can
+ * point at the property these classes define.
+ */
 export default () => {
-  let nf = nextFonts.map((desc: NextFontDesc) => (desc.nextFont!.variable))
-    // dedupe
-  nf = nf.filter(
-    (str, i, arr) => (
-      arr.indexOf(str) === i
-    )
-  )
-  return nf.join(' ') + ` font-${nextFonts[0].twName}`
+  const named = nextFonts.map((desc: NextFontDesc) => desc.nextFont!.variable)
+  return [...new Set(named)].join(' ')
 }

package/next/font/load-and-return-lux-next-fonts-on-import.ts CHANGED Viewed

@@ -1,13 +1,13 @@
 // import { Inter } from 'next/font/google'
 import localFont from 'next/font/local'
-import type { TwFontDesc } from '@hanzo/ui/tailwind' // TODO
+import type { FontDesc } from './font-desc'
 import type NextFontDesc from './next-font-desc'
-import twFonts from '../../tailwind/lux-tw-fonts'
+import fonts from './fonts'
 /*
-  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed
+  Creating NextFontDesc's and FontDesc's has to be seperated because they are needed
   at different times during the next compile / build.  Otherwise a nasty
   race condition happens!
@@ -15,21 +15,11 @@ import twFonts from '../../tailwind/lux-tw-fonts'
 */
-const drukWide = localFont({
-  src: [
-    {
-      path: './local/Druk-Wide-Bold.ttf',
-      weight: '700',
-      style: 'normal'
-    },
-    {
-      path: './local/Druk-Wide-Medium.ttf',
-      weight: '500',
-      style: 'normal',
-    },
-  ],
+const zen = localFont({
+  src: './local/Zen-Variable.woff2',
+  weight: '100 900',
   display: 'swap',
-  variable: '--font-druk-wide',
+  variable: '--font-zen-sans',
 })
 const inter = localFont({
@@ -41,25 +31,27 @@ const inter = localFont({
 export default [
   {
     font: inter,
-    twName: 'sans'
+    name: 'sans'
   },
   {
     font: inter,
-    twName: 'nav'
+    name: 'nav'
   },
   {
-    font: drukWide,
-    twName: 'heading'
+    // Zen is one variable face over 100-900, so the display cut is weight and
+    // tracking in CSS rather than a second file: '.font-heading' in style/lux-global.css.
+    font: zen,
+    name: 'heading'
   }
 ].map (
   (el) => {
-    const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
-    if (!twFont) {
+    const font: FontDesc | undefined = fonts.find((f: FontDesc) => (el.name === f.name))
+    if (!font) {
       throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
     }
     return ({
-      ...twFont,
+      ...font,
       nextFont: el.font,
     })
   }

package/next/font/local/Zen-Variable.woff2 ADDED Viewed

Binary file

package/next/font/next-font-desc.ts CHANGED Viewed

@@ -1,28 +1,29 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
+import type localFont from 'next/font/local'
-// from next repo
-type NextFont = {
-  className: string
-  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
-}
-// from next repo
-type NextFontWithVariable = NextFont & {
-  variable: string
-}
+import type { FontDesc } from './font-desc'
+/**
+ * What a next/font loader hands back, DERIVED from the loader.
+ *
+ * These were two hand-copied declarations marked "from next repo" — a copy of a
+ * type that keeps moving, which is how the OpenGraph types in ../head-metadata
+ * went stale and failed as "two different types with this name exist, but they
+ * are unrelated". `ReturnType` names the position and lets Next say what lives
+ * there. The loader answers with a union — a font is only given a variable
+ * when it was asked for one — so `Extract` picks the half that has it.
+ */
+export type NextFontWithVariable = Extract<ReturnType<typeof localFont>, { variable: string }>
 /*
-  NextFontDesc and TwFontDesc have to be seperate because they are needed
-  at different times during the next compile / build.  Otherwise a nasty
+  NextFontDesc and FontDesc have to be seperate because they are needed
+  at different times during the next compile / build.  Otherwise a nasty
   race condition happens! That's why they are in different files.
 */
-interface NextFontDesc extends TwFontDesc {
-  nextFont: NextFontWithVariable
+interface NextFontDesc extends FontDesc {
+  nextFont: NextFontWithVariable
 }
 export {
   type NextFontDesc as default,
-  type NextFontWithVariable,
-}
+}

package/next/head-metadata/index.tsx CHANGED Viewed

@@ -4,14 +4,15 @@ import type { Metadata } from 'next'
 import Head from "next/head"
 import type {
+  Author,
   IconDescriptor,
+  OGImage,
+  OpenGraph,
   TemplateString,
-  Author,
-  ThemeColorDescriptor
-} from './from-next/metadata-types'
-import type { OpenGraph, OGImage } from './from-next/opengraph-types'
-import type { Twitter, TwitterImage } from './from-next/twitter-types'
+  ThemeColorDescriptor,
+  Twitter,
+  TwitterImage,
+} from './next-metadata'
 /*
   NOTE: This is ONLY for sites that use the pages router in next.

package/next/head-metadata/next-metadata.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * Next's metadata vocabulary, DERIVED from Next's own `Metadata` type.
+ *
+ * These were three files of hand-copied declarations under `from-next/`, which
+ * is a copy of a type that keeps moving: Next 16 changed `OpenGraph` and the
+ * copy stayed where it was, so passing `metadata.openGraph` into a component
+ * typed against the copy failed with
+ *
+ *     Two different types with this name exist, but they are unrelated.
+ *
+ * — a message that reads like a duplicate package rather than a stale copy.
+ *
+ * Derivation cannot drift. Nothing here restates a shape; each line names a
+ * position inside `Metadata` and lets Next say what lives there.
+ */
+import type { Metadata } from 'next'
+/** The element type of an array, or the type itself when it is not one. */
+type Item<T> = T extends readonly (infer E)[] ? E : T
+/** Metadata fields are nullable by convention; this is the value half. */
+type Set<T> = Exclude<T, null | undefined>
+export type OpenGraph = Set<Metadata['openGraph']>
+export type OGImage = Item<Set<OpenGraph['images']>>
+export type Twitter = Set<Metadata['twitter']>
+export type TwitterImage = Item<Set<Twitter['images']>>
+export type Author = Item<Set<Metadata['authors']>>
+/**
+ * A theme colour with its media query. `Metadata['themeColor']` also admits a
+ * bare colour string; this is the form with fields, picked out by the one it
+ * always has.
+ */
+export type ThemeColorDescriptor = Extract<Item<Set<Metadata['themeColor']>>, { color: unknown }>
+/**
+ * The title's object form. `Metadata['title']` is that OR a plain string, and
+ * the string is the case with nothing to read.
+ */
+export type TemplateString = Exclude<Set<Metadata['title']>, string>
+/**
+ * One icon, in its descriptor form. `Metadata['icons']` also admits a bare url
+ * and a grouping object (`{ icon, shortcut, apple }`); this is the one that
+ * describes a single icon, picked out by the field only it has.
+ */
+export type IconDescriptor = Extract<Item<Set<Metadata['icons']>>, { url: unknown }>

package/next/middleware/determine-device-mw.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { NextRequest, NextResponse, userAgent } from 'next/server'
 import { getSelectorsByUserAgent } from 'react-device-detect'
-import { setCookie } from 'cookies-next'
 // writed this way so they can be chained :)
 const determineDeviceMW = async (request: NextRequest) => {
@@ -10,18 +9,6 @@ const determineDeviceMW = async (request: NextRequest) => {
   const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ? 'desktop' : 'unknown'))
   const { nextUrl: url } = request
   //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
-  const auth_token = url.searchParams.get('auth-token')
-  if (auth_token) {
-    setCookie('auth-token', auth_token, {
-      domain: url.hostname,
-      path: '/',
-      sameSite: 'none',
-      secure: true,
-      httpOnly: false,
-      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-    })
-    url.searchParams.delete('auth-token')
-  }
   url.searchParams.set('agent', agent)
   return NextResponse.rewrite(url)
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.5.4",
+  "version": "5.5.6",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -20,44 +20,45 @@
   ],
   "exports": {
     ".": "./components/index.ts",
+    "./auth-callback": "./components/auth/callback.tsx",
+    "./security": "./components/security/index.tsx",
     "./commerce": "./commerce/ui/context.tsx",
     "./root-layout": "./root-layout/index.tsx",
     "./next": "./next/index.ts",
     "./style/": "./style/",
     "./site-def": "./site-def/index.ts",
-    "./tailwind": "./tailwind/index.ts",
     "./util": "./util/index.ts"
   },
   "dependencies": {
+    "@luxfi/logo": "^1.0.10",
     "@next/third-parties": "^16.1.0",
-    "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.1.6",
-    "firebase": "10.12.0",
     "framer-motion": "^11.2.12",
     "markdown-to-jsx": "^7.4.7",
     "react-device-detect": "^2.2.3",
     "react-social-icons": "^6.4.0",
     "react-tooltip": "^5.26.4",
     "request": "^2.88.2",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "react-native-web": "^0.21.2"
   },
   "peerDependencies": {
-    "@hanzo/auth": "2.5.8",
-    "@hanzo/commerce": "7.3.10",
-    "@hanzo/ui": "5.3.34",
+    "@hanzo/iam": "0.21.9",
+    "@hanzo/commerce": "7.7.0",
+    "@hanzo/ui": "8.23.2",
+    "@luxfi/menu-icons": "^1.0.2",
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "0.470.0",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
-    "next": "16.1.0",
+    "next": "16.3.3",
     "next-themes": "^0.4.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-hook-form": "7.54.2",
     "validator": "^13.11.0",
-    "zod": "3.23.8",
-    "@luxfi/menu-icons": "1.0.2"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.3.2",
@@ -70,8 +71,7 @@
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "@types/validator": "^13.12.1",
-    "tailwindcss": "3.4.17",
-    "typescript": "5.7.3"
+    "typescript": "7.0.2"
   },
   "scripts": {
     "lat": "npm show @luxfi/ui version",

package/root-layout/index.tsx CHANGED Viewed

@@ -2,20 +2,26 @@ import React, { type PropsWithChildren } from 'react'
 import type { Viewport } from 'next'
 import { Toaster } from '@hanzo/ui/primitives'
-import { AuthServiceProvider } from '@hanzo/auth/service'
-import type { AuthServiceConf } from '@hanzo/auth/types'
+import { Hanzo } from '@hanzo/ui'
 import { CommerceProvider } from '@hanzo/commerce'
 import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
 import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
 import { CommerceUIProvider } from '../commerce/ui/context'
-import { AuthListener, ChatWidget, Header, Analytics } from '../components'
+import { Auth, ChatWidget, Header, Analytics } from '../components'
 import CommerceDrawer from '../components/commerce/drawer'
 import type SiteDef from '../types/site-def'
+// BY NAME, and before the Lux sheets so those can override. Next does not
+// follow a CSS import out of node_modules on a consumer's behalf, so naming
+// these here is what actually puts the reset and the token scale on the page —
+// a site that omits them renders with browser defaults and no palette.
+import '@hanzo/ui/theme.css'
+import '@hanzo/ui/styles.css'
 import '../style/lux-global.css'
 import '../style/cart-animation.css'
 import '../style/checkout-animation.css'
@@ -30,21 +36,20 @@ const viewport = {
 } satisfies Viewport
 /*
-  These '.variable' fields are actually autogenerate css classnames that *define* the actual
-  css variables ('--<ugly-name>') that one asks for in the tailwind classes.
-  They are what make them available in the global scope. So this MUST
-  be done like this for the tailwind font classes to work.
-  (...not to be confused with the css var itself.  This field should be named something else!)
+  The only classes left on <body> are next/font's own generated ones. Each
+  DEFINES a custom property (`--font-inter`, `--font-zen-sans`) holding the face
+  it loaded, and they have to be on an element for the rest of the sheet to
+  resolve those names — which is why they are classes and not a stylesheet.
+  The ground, the ink and the family that used to sit here as utility classes
+  are in lux-global.css, on `body` itself. They were `bg-background
+  text-foreground flex flex-col min-h-full`, and with no engine generating them
+  they were four names no sheet served.
+  re body: not overflow-hidden and not h-full — scroll-snap does not work on iOS
+  with those on the body tag.
 */
-/*
-  re body: overflow-y-hidden overflow-x-hidden, h-full
-  We cannot have these on body tag for scroll-snap to work on iOS!
-*/
-const bodyClasses =
-  'bg-background text-foreground flex flex-col min-h-full ' +
-  getAppRouterBodyFontClasses()
+const bodyClasses = getAppRouterBodyFontClasses()
 function RootLayout({
   showHeader = false,
@@ -57,10 +62,6 @@ function RootLayout({
   chatbot?: boolean
 } & PropsWithChildren) {
-  // For static export, we don't have server-side auth
-  // User auth will be handled client-side via AuthListener
-  const currentUser = null
   const Guts: React.FC = () => (<>
     {showHeader && <Header siteDef={siteDef}/>}
     {children}
@@ -81,13 +82,25 @@ function RootLayout({
         <FacebookPixelHead/>
       </head>
-      <body suppressHydrationWarning className={bodyClasses} style={{
-        // As noted above: 'overflow: hidden' on the <body> tag breaks scroll snap!
-        display: 'none', // see analytics.tsx
-      }}>
+      {/* No inline style. The body's layout is stated once, in lux-global.css,
+          where it applies whether or not any script runs.
+          It used to render `display: none` here and a mount effect in
+          analytics.tsx set it back — hiding the page until React had hydrated.
+          That trades a flash for a site that is blank to anything without
+          JavaScript, and it silently outranked the sheet: the effect wrote
+          `flex`, so the `display: grid` the sheet asks for never once applied
+          on any of these sites.
+          Note the other half of that comment, still true: `overflow: hidden` on
+          <body> breaks scroll-snap on iOS, so it does not go here either. */}
+      <body suppressHydrationWarning className={bodyClasses}>
+        {/* The root every @hanzo/ui component reads its config from. Without it
+            a prerender throws `Err0` from inside gui — a message that names
+            neither the component nor the missing provider. */}
+        <Hanzo theme='dark'>
         <Analytics/>
-        <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
+        <Auth app={siteDef.app}>
         {siteDef?.commerce ? (
           <CommerceProvider config={siteDef.commerce!} >
             <CommerceUIProvider >
@@ -98,9 +111,9 @@ function RootLayout({
         ) : (
           <Guts />
         )}
-          <AuthListener/>
-        </AuthServiceProvider>
+        </Auth>
         <Toaster position='top-center' duration={3000}/>
+        </Hanzo>
       </body>
     </html>
   )

package/style/fonts/Zen-Variable.woff2 ADDED Viewed

Binary file

package/style/lux-colors.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@tailwind base;
 /* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
 @layer base {

package/style/lux-fonts.css CHANGED Viewed

@@ -1,16 +1,10 @@
-@tailwind base;
+/* Both faces are served from the app's own /fonts. The Next path (../next/font)
+   emits the same two through next/font instead. */
 @layer base {
   @font-face {
-    font-family: "DrukWide";
-    src: url("/fonts/Druk-Wide-Medium.ttf");
-    font-weight: 500;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: "DrukWide";
-    src: url("/fonts/Druk-Wide-Bold.ttf");
-    font-weight: 700;
+    font-family: "Zen";
+    src: url("/fonts/Zen-Variable.woff2") format("woff2");
+    font-weight: 100 900;
     font-style: normal;
   }
   @font-face {

package/style/lux-global-non-next.css CHANGED Viewed

@@ -1,22 +1,22 @@
 /* Note, preflight is applied first:
   https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
 */
-@import "tailwindcss/base";
 /* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
 /* @import "@hanzo/ui/style/hanzo-common"; */
-@import "lux-colors";
-@import "lux-fonts";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "./lux-colors.css";
+@import "./lux-fonts.css";
 div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   display: none;
 }
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose -- a
+   transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
 .font-heading {
-  @apply uppercase;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
 }
 /* Specific style fixes for react-square-web-payments-sdk -