@mohasinac/appkit 4.63.4 → 4.64.0

package/dist/ui/components/HorizontalScroller.js

@@ -158,7 +158,20 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             return;
         const observer = new ResizeObserver(([entry]) => {
             const w = entry.contentRect.width;
-            const count = resolvePerView(perView, w);
+            /*
+             * 🛑 Clamp the column count to how many items there actually ARE.
+             *
+             * `perView` says "four across at lg", and the width was divided by that
+             * unconditionally — so a rail holding ONE item pinned it to 25% of the
+             * row and left three empty columns. The nav also hides itself at
+             * `pageCount <= 1`, so nothing filled or explained the gap: the live
+             * "Events & Offers" section rendered one card against ~75% whitespace.
+             *
+             * Clamping makes a short rail lay its items out across the full width,
+             * which is what every other grid in the app already does. A full rail is
+             * unaffected — `min` is a no-op once itemCount >= perView.
+             */
+            const count = Math.min(resolvePerView(perView, w), Math.max(itemCount, 1));
             if (count > 0) {
                 setColCount(count);
                 setItemWidth((w - (count - 1) * gap) / count);
@@ -167,7 +180,7 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         });
         observer.observe(el);
         return () => observer.disconnect();
-    }, [perView, gap, containerRef, updateExtents]);
+    }, [perView, gap, containerRef, updateExtents, itemCount]);
     // Recompute extents when content size changes (itemWidth resolved, items count changes).
     useEffect(() => {
         updateExtents();

package/dist/ui/components/NavigationLoader.d.ts

@@ -8,7 +8,12 @@ export interface NavigationLoaderProps {
     label?: string;
     /**
      * Safety valve: hides the overlay if the route never settles.
-     * @default 15000 (ms)
+     *
+     * 10s, matching the sync-function ceiling this app is written against — an
+     * RSC payload that has not arrived by then is not arriving, so holding a
+     * blocking overlay any longer only hides the page the user still has.
+     *
+     * @default 10000 (ms)
      */
     timeoutMs?: number;
     /** Additional className on the overlay div. */
@@ -24,6 +29,14 @@ export interface NavigationLoaderProps {
  *  - Start: intercept `history.pushState` + `popstate`
  *  - End:   `usePathname()` changing means React has settled
  *
+ * 🛑 It must never start for a navigation whose path+query cannot change,
+ * because the end condition would then be unreachable and the overlay would
+ * block the whole viewport until `timeoutMs`. An in-page anchor is exactly
+ * that: clicking `#section` fires `popstate` (Chrome does, for the App
+ * Router's hash entry) while `usePathname()` and `useSearchParams()` both stay
+ * put — measured against production, 15s of stranded overlay on the way in AND
+ * again on Back. Hence the `live === prev` gate in `onPopState`.
+ *
  * Mount once at the app shell level (e.g. inside LayoutShellClient).
  */
 export declare function NavigationLoader({ spinnerVariant, label, timeoutMs, className, }: NavigationLoaderProps): import("react").JSX.Element | null;

package/dist/ui/components/NavigationLoader.js

@@ -1,9 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../errors/normalize.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { usePathname, useSearchParams } from "next/navigation.js";
 import { Spinner } from "./Spinner.js";
+/**
+ * The route key this component settles on: path + query, NEVER the hash.
+ *
+ * It has to match what `usePathname()` + `useSearchParams()` can observe,
+ * because those two hooks are the only thing that can hide the overlay. A hash
+ * is invisible to both, so including it here would promise a settle signal
+ * that can never arrive.
+ */
+function windowRouteKey() {
+    const url = new URL(window.location.href);
+    return `${url.pathname}?${url.searchParams.toString()}`;
+}
 /**
  * NavigationLoader
  *
@@ -14,9 +26,17 @@ import { Spinner } from "./Spinner.js";
  *  - Start: intercept `history.pushState` + `popstate`
  *  - End:   `usePathname()` changing means React has settled
  *
+ * 🛑 It must never start for a navigation whose path+query cannot change,
+ * because the end condition would then be unreachable and the overlay would
+ * block the whole viewport until `timeoutMs`. An in-page anchor is exactly
+ * that: clicking `#section` fires `popstate` (Chrome does, for the App
+ * Router's hash entry) while `usePathname()` and `useSearchParams()` both stay
+ * put — measured against production, 15s of stranded overlay on the way in AND
+ * again on Back. Hence the `live === prev` gate in `onPopState`.
+ *
  * Mount once at the app shell level (e.g. inside LayoutShellClient).
  */
-export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading page…", timeoutMs = 15000, className = "", }) {
+export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading page…", timeoutMs = 10000, className = "", }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const [visible, setVisible] = useState(false);
@@ -28,39 +48,55 @@ export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading
     const pendingUrl = useRef(null);
     const visibleRef = useRef(false);
     const activeRef = useRef(false);
+    /** Last path+query seen on `window.location`. Null until the first effect. */
+    const lastWindowKey = useRef(null);
     const currentUrl = `${pathname ?? ""}?${searchParams?.toString() ?? ""}`;
     const prevUrl = useRef(currentUrl);
     useEffect(() => {
         visibleRef.current = visible;
     }, [visible]);
-    // Hide once the route URL (path + query/hash) has settled in React.
+    /** Drop the overlay and every timer behind it. Safe to call when hidden. */
+    const hideNow = useCallback(() => {
+        activeRef.current = false;
+        visibleRef.current = false;
+        setVisible(false);
+        if (showTimer.current) {
+            clearTimeout(showTimer.current);
+            showTimer.current = null;
+        }
+        if (safetyTimer.current) {
+            clearTimeout(safetyTimer.current);
+            safetyTimer.current = null;
+        }
+        if (tickTimer.current) {
+            clearInterval(tickTimer.current);
+            tickTimer.current = null;
+        }
+        startTime.current = null;
+        pendingUrl.current = null;
+    }, []);
+    // Hide once the route URL (path + query) has settled in React.
     useEffect(() => {
         if (currentUrl !== prevUrl.current) {
             prevUrl.current = currentUrl;
-            activeRef.current = false;
-            visibleRef.current = false;
-            setVisible(false);
-            if (showTimer.current) {
-                clearTimeout(showTimer.current);
-                showTimer.current = null;
-            }
-            if (safetyTimer.current)
-                clearTimeout(safetyTimer.current);
-            if (tickTimer.current)
-                clearInterval(tickTimer.current);
-            startTime.current = null;
-            pendingUrl.current = null;
+            lastWindowKey.current = windowRouteKey();
+            hideNow();
         }
-    }, [currentUrl]);
+    }, [currentUrl, hideNow]);
     useEffect(() => {
+        if (lastWindowKey.current === null)
+            lastWindowKey.current = windowRouteKey();
         function showOverlay(nextKey) {
             if (activeRef.current || visibleRef.current)
                 return;
             if (showTimer.current)
                 return;
-            activeRef.current = true;
+            // Checked BEFORE claiming `activeRef`: returning with it already set
+            // would leave the flag stuck true, and every later navigation would
+            // early-return above — the loader would silently never show again.
             if (nextKey && pendingUrl.current === nextKey)
                 return;
+            activeRef.current = true;
             pendingUrl.current = nextKey ?? pendingUrl.current;
             // Defer to next macrotask to avoid updates during router insertion effects.
             showTimer.current = setTimeout(() => {
@@ -76,15 +112,7 @@ export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading
                 setVisible(true);
                 if (safetyTimer.current)
                     clearTimeout(safetyTimer.current);
-                safetyTimer.current = setTimeout(() => {
-                    activeRef.current = false;
-                    visibleRef.current = false;
-                    setVisible(false);
-                    if (tickTimer.current)
-                        clearInterval(tickTimer.current);
-                    startTime.current = null;
-                    pendingUrl.current = null;
-                }, timeoutMs);
+                safetyTimer.current = setTimeout(hideNow, timeoutMs);
             }, 0);
         }
         function shouldShowForNextUrl(next) {
@@ -122,15 +150,36 @@ export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading
                     showOverlay();
                 }
             }
-            return origPush(...args);
+            const result = origPush(...args);
+            lastWindowKey.current = windowRouteKey();
+            return result;
         };
         function onPopState() {
-            showOverlay();
+            // `popstate` fires AFTER the URL has changed, so this is the destination.
+            const live = windowRouteKey();
+            const prev = lastWindowKey.current;
+            lastWindowKey.current = live;
+            // Same path+query means an in-page anchor or a second history entry for
+            // the route we are already on. React will never re-render, so the hide
+            // effect above can never fire — showing the overlay here strands it.
+            if (live === prev) {
+                hideNow();
+                return;
+            }
+            showOverlay(live);
+        }
+        // Belt to the braces above: a hash change that reaches us some other way
+        // is still, by definition, not a route change.
+        function onHashChange() {
+            lastWindowKey.current = windowRouteKey();
+            hideNow();
         }
         window.addEventListener("popstate", onPopState);
+        window.addEventListener("hashchange", onHashChange);
         return () => {
             history.pushState = origPush;
             window.removeEventListener("popstate", onPopState);
+            window.removeEventListener("hashchange", onHashChange);
             if (showTimer.current)
                 clearTimeout(showTimer.current);
             if (safetyTimer.current)
@@ -142,7 +191,7 @@ export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading
             startTime.current = null;
             pendingUrl.current = null;
         };
-    }, [timeoutMs]);
+    }, [timeoutMs, hideNow]);
     if (!visible)
         return null;
     return (_jsxs("div", { role: "status", "aria-label": label, className: `appkit-nav-loader ${className}`, "data-section": "navigationloader-div-566", children: [_jsx(Spinner, { size: "xl", variant: spinnerVariant, label: label }), _jsxs("span", { className: "appkit-nav-loader__timer", "aria-hidden": "true", children: [elapsed.toFixed(1), "s"] })] }));

package/dist/ui/components/PageHeroHeading.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The editorial page header — pill, display heading, rule, subtitle.
+ *
+ * ## Why this is a component rather than markup in two pages
+ *
+ * This treatment already existed and was UNREACHABLE. It lived inlined inside
+ * `SectionCarousel`, gated on `headingVariant === "editorial"`, so the only
+ * surfaces that could use it were homepage rails. `/blog` and `/events` are
+ * the two pages the treatment was designed for and they got
+ * `<Heading level={1} size="3xl">Blog</Heading>` — one word, no description,
+ * no count, no rule — because they had no way to reach it.
+ *
+ * 🛑 The ornament is `justify="center"` INSIDE a left-aligned parent in the
+ * carousel, so the rule floats mid-column away from the heading it belongs to.
+ * Here it is aligned with the heading, which is what it was for.
+ *
+ * Server-safe: no hooks, no DOM, no `"use client"`. A Server Component page
+ * can render it directly.
+ *
+ * @tag layer:ui
+ */
+import React from "react";
+export interface PageHeroHeadingProps {
+    /** Small uppercase label above the heading. */
+    pill?: string;
+    title: string;
+    /** One line under the rule. Say what the page is for. */
+    description?: string;
+    /**
+     * A live figure — "4 running now", "25 guides". Rendered beside the pill.
+     *
+     * 🛑 Pass a real count or nothing. A hardcoded "Hundreds of articles" on a
+     * page showing 25 is the kind of claim nobody re-checks when the number
+     * moves.
+     */
+    meta?: string;
+    align?: "start" | "center";
+    className?: string;
+}
+export declare function PageHeroHeading({ pill, title, description, meta, align, className, }: PageHeroHeadingProps): React.JSX.Element;

package/dist/ui/components/PageHeroHeading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Each from its DEFINING module, never the `ui` barrel — a barrel import from
+// inside `ui/components` is a cycle waiting to happen, and Root Cause #18 is
+// the standing rule against convenience re-exports.
+import { Div } from "./Div.js";
+import { Row, Stack } from "./Layout.js";
+import { Heading, Span, Text } from "./Typography.js";
+const PILL_CLASS = "inline-flex items-center gap-[var(--appkit-space-2)] rounded-full " +
+    "border border-primary-500/30 bg-primary-500/10 px-[var(--appkit-space-5)] " +
+    "py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-medium " +
+    "tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm";
+export function PageHeroHeading({ pill, title, description, meta, align = "start", className = "", }) {
+    const alignClass = align === "center" ? "text-center" : "text-left";
+    return (_jsxs(Stack, { gap: "xs", className: `${alignClass} ${className}`, children: [(pill || meta) && (_jsxs(Row, { align: "center", justify: align === "center" ? "center" : "start", gap: "sm", wrap: true, className: "mb-3", children: [pill && (_jsxs(Span, { className: PILL_CLASS, children: [_jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" }), pill, _jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" })] })), meta && (_jsx(Text, { size: "xs", color: "muted", transform: "uppercase", className: "tracking-widest", children: meta }))] })), _jsx(Heading, { level: 1, size: "3xl", mdSize: "4xl", weight: "bold", family: "display", className: "mb-1", children: title }), _jsxs(Row, { align: "center", justify: align === "center" ? "center" : "start", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), description && (_jsx(Div, { className: "mt-3 max-w-2xl", children: _jsx(Text, { size: "base", color: "muted", children: description }) }))] }));
+}

package/dist/ui/components/Typography.d.ts

@@ -19,9 +19,9 @@ declare const TYPOGRAPHY: {
         readonly "3xl": "appkit-text--3xl";
         readonly "4xl": "appkit-text--4xl";
         readonly "5xl": "appkit-text--5xl";
-        readonly "6xl": "text-[length:var(--appkit-text-6xl)]";
-        readonly "7xl": "text-[length:var(--appkit-text-7xl)]";
-        readonly "8xl": "text-[length:var(--appkit-text-8xl)]";
+        readonly "6xl": "appkit-text--6xl";
+        readonly "7xl": "appkit-text--7xl";
+        readonly "8xl": "appkit-text--8xl";
     };
     readonly textWeight: {
         readonly light: "appkit-font--light";

package/dist/ui/components/Typography.js

@@ -21,9 +21,15 @@ const TYPOGRAPHY = {
         "3xl": "appkit-text--3xl",
         "4xl": "appkit-text--4xl",
         "5xl": "appkit-text--5xl",
-        "6xl": "text-[length:var(--appkit-text-6xl)]",
-        "7xl": "text-[length:var(--appkit-text-7xl)]",
-        "8xl": "text-[length:var(--appkit-text-8xl)]",
+        /*
+         * 🛑 Real classes, not `text-[length:…]` arbitrary utilities. An arbitrary
+         * utility carries only the property its bracket names, so these three set
+         * font-size and left line-height to whatever the BASE size class had —
+         * 40px under 96px glyphs on the hero carousel. See Typography.style.css.
+         */
+        "6xl": "appkit-text--6xl",
+        "7xl": "appkit-text--7xl",
+        "8xl": "appkit-text--8xl",
     },
     textWeight: {
         light: "appkit-font--light",
@@ -91,6 +97,28 @@ function shapingClasses(opts) {
  * candidate to the scanner, which copies it verbatim into the generated CSS
  * and produces an unparsable declaration. Every combination below appears as
  * a complete literal so the scanner only ever sees real, generatable classes.
+ *
+ * ── 🛑 EACH ENTRY CARRIES ITS LINE-HEIGHT TOO ────────────────────────────
+ *
+ * `text-[length:…]` sets FONT-SIZE AND NOTHING ELSE. So before this, a
+ * responsive size changed the glyph size at the breakpoint and left
+ * line-height at whatever the BASE size class had declared — the two
+ * properties came from different breakpoints and nothing reconciled them.
+ *
+ * Measured on the live hero carousel (`size="4xl" mdSize="6xl" lgSize="8xl"`):
+ * at >=1024px the title drew 96px glyphs inside `.appkit-text--4xl`'s 40px
+ * line box. Two lines overlapped each other and spilled ~28px into the eyebrow
+ * above and the description below — the reported unreadable Diwali headline.
+ *
+ * The paired value is the SAME line-height that size's base class declares in
+ * Typography.style.css, so the responsive path now behaves exactly like the
+ * base path at that size. That is the invariant that should always have held.
+ *
+ * 🛑 `xs`–`xl` deliberately carry NO leading. Those sizes declare none in the
+ * base CSS either, so the element keeps its component default — 1.15 under
+ * `.appkit-heading`, 1.65 under `.appkit-text`. Pinning one value here would
+ * have to pick a winner and would silently retune every small responsive
+ * `<Text>` in the app.
  */
 const RESPONSIVE_TEXT_SIZE_CLASS = {
     "sm:": {
@@ -99,13 +127,13 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         base: "sm:text-[length:var(--appkit-text-base)]",
         lg: "sm:text-[length:var(--appkit-text-lg)]",
         xl: "sm:text-[length:var(--appkit-text-xl)]",
-        "2xl": "sm:text-[length:var(--appkit-text-2xl)]",
-        "3xl": "sm:text-[length:var(--appkit-text-3xl)]",
-        "4xl": "sm:text-[length:var(--appkit-text-4xl)]",
-        "5xl": "sm:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "sm:text-[length:var(--appkit-text-6xl)]",
-        "7xl": "sm:text-[length:var(--appkit-text-7xl)]",
-        "8xl": "sm:text-[length:var(--appkit-text-8xl)]",
+        "2xl": "sm:text-[length:var(--appkit-text-2xl)] sm:leading-[2rem]",
+        "3xl": "sm:text-[length:var(--appkit-text-3xl)] sm:leading-[2.25rem]",
+        "4xl": "sm:text-[length:var(--appkit-text-4xl)] sm:leading-[2.5rem]",
+        "5xl": "sm:text-[length:var(--appkit-text-5xl)] sm:leading-[1]",
+        "6xl": "sm:text-[length:var(--appkit-text-6xl)] sm:leading-[1.15]",
+        "7xl": "sm:text-[length:var(--appkit-text-7xl)] sm:leading-[1.15]",
+        "8xl": "sm:text-[length:var(--appkit-text-8xl)] sm:leading-[1.15]",
     },
     "md:": {
         xs: "md:text-[length:var(--appkit-text-xs)]",
@@ -113,13 +141,13 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         base: "md:text-[length:var(--appkit-text-base)]",
         lg: "md:text-[length:var(--appkit-text-lg)]",
         xl: "md:text-[length:var(--appkit-text-xl)]",
-        "2xl": "md:text-[length:var(--appkit-text-2xl)]",
-        "3xl": "md:text-[length:var(--appkit-text-3xl)]",
-        "4xl": "md:text-[length:var(--appkit-text-4xl)]",
-        "5xl": "md:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "md:text-[length:var(--appkit-text-6xl)]",
-        "7xl": "md:text-[length:var(--appkit-text-7xl)]",
-        "8xl": "md:text-[length:var(--appkit-text-8xl)]",
+        "2xl": "md:text-[length:var(--appkit-text-2xl)] md:leading-[2rem]",
+        "3xl": "md:text-[length:var(--appkit-text-3xl)] md:leading-[2.25rem]",
+        "4xl": "md:text-[length:var(--appkit-text-4xl)] md:leading-[2.5rem]",
+        "5xl": "md:text-[length:var(--appkit-text-5xl)] md:leading-[1]",
+        "6xl": "md:text-[length:var(--appkit-text-6xl)] md:leading-[1.15]",
+        "7xl": "md:text-[length:var(--appkit-text-7xl)] md:leading-[1.15]",
+        "8xl": "md:text-[length:var(--appkit-text-8xl)] md:leading-[1.15]",
     },
     "lg:": {
         xs: "lg:text-[length:var(--appkit-text-xs)]",
@@ -127,13 +155,13 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         base: "lg:text-[length:var(--appkit-text-base)]",
         lg: "lg:text-[length:var(--appkit-text-lg)]",
         xl: "lg:text-[length:var(--appkit-text-xl)]",
-        "2xl": "lg:text-[length:var(--appkit-text-2xl)]",
-        "3xl": "lg:text-[length:var(--appkit-text-3xl)]",
-        "4xl": "lg:text-[length:var(--appkit-text-4xl)]",
-        "5xl": "lg:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "lg:text-[length:var(--appkit-text-6xl)]",
-        "7xl": "lg:text-[length:var(--appkit-text-7xl)]",
-        "8xl": "lg:text-[length:var(--appkit-text-8xl)]",
+        "2xl": "lg:text-[length:var(--appkit-text-2xl)] lg:leading-[2rem]",
+        "3xl": "lg:text-[length:var(--appkit-text-3xl)] lg:leading-[2.25rem]",
+        "4xl": "lg:text-[length:var(--appkit-text-4xl)] lg:leading-[2.5rem]",
+        "5xl": "lg:text-[length:var(--appkit-text-5xl)] lg:leading-[1]",
+        "6xl": "lg:text-[length:var(--appkit-text-6xl)] lg:leading-[1.15]",
+        "7xl": "lg:text-[length:var(--appkit-text-7xl)] lg:leading-[1.15]",
+        "8xl": "lg:text-[length:var(--appkit-text-8xl)] lg:leading-[1.15]",
     },
     "xl:": {
         xs: "xl:text-[length:var(--appkit-text-xs)]",
@@ -141,13 +169,13 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         base: "xl:text-[length:var(--appkit-text-base)]",
         lg: "xl:text-[length:var(--appkit-text-lg)]",
         xl: "xl:text-[length:var(--appkit-text-xl)]",
-        "2xl": "xl:text-[length:var(--appkit-text-2xl)]",
-        "3xl": "xl:text-[length:var(--appkit-text-3xl)]",
-        "4xl": "xl:text-[length:var(--appkit-text-4xl)]",
-        "5xl": "xl:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "xl:text-[length:var(--appkit-text-6xl)]",
-        "7xl": "xl:text-[length:var(--appkit-text-7xl)]",
-        "8xl": "xl:text-[length:var(--appkit-text-8xl)]",
+        "2xl": "xl:text-[length:var(--appkit-text-2xl)] xl:leading-[2rem]",
+        "3xl": "xl:text-[length:var(--appkit-text-3xl)] xl:leading-[2.25rem]",
+        "4xl": "xl:text-[length:var(--appkit-text-4xl)] xl:leading-[2.5rem]",
+        "5xl": "xl:text-[length:var(--appkit-text-5xl)] xl:leading-[1]",
+        "6xl": "xl:text-[length:var(--appkit-text-6xl)] xl:leading-[1.15]",
+        "7xl": "xl:text-[length:var(--appkit-text-7xl)] xl:leading-[1.15]",
+        "8xl": "xl:text-[length:var(--appkit-text-8xl)] xl:leading-[1.15]",
     },
 };
 function responsiveSizeClass(prefix, size) {

package/dist/ui/components/Typography.style.css

@@ -87,6 +87,41 @@
   line-height: 1;
 }
 
+/*
+ * 🛑 6xl–8xl MUST declare a line-height, and the reason is a live bug.
+ *
+ * These three tiers used to exist only as Tailwind arbitrary utilities in
+ * `TYPOGRAPHY.textSize` (`text-[length:var(--appkit-text-6xl)]`), which set
+ * FONT-SIZE ONLY — and with `important: true` in both configs, at that.
+ * `.appkit-heading`'s `line-height: var(--appkit-leading-tight)` is then
+ * overridden by whichever size class the element also carries: a
+ * `size="4xl" lgSize="8xl"` heading resolved to `.appkit-text--4xl`'s
+ * `line-height: 2.5rem` at EVERY breakpoint, because no `lg:` rule ever
+ * touched line-height.
+ *
+ * Measured on the live hero carousel: 96px glyphs in a 40px line box. A
+ * two-line title overlapped itself and spilled ~28px above and below into the
+ * eyebrow and the description — the reported "Diwali title is unreadable".
+ *
+ * So each tier carries BOTH properties, exactly like 2xl–5xl above. Keep them
+ * as real classes rather than arbitrary utilities: an arbitrary utility can
+ * only carry the one property its bracket names.
+ */
+.appkit-text--6xl {
+  font-size: var(--appkit-text-6xl, 3.75rem);
+  line-height: var(--appkit-leading-tight, 1.15);
+}
+
+.appkit-text--7xl {
+  font-size: var(--appkit-text-7xl, 4.5rem);
+  line-height: var(--appkit-leading-tight, 1.15);
+}
+
+.appkit-text--8xl {
+  font-size: var(--appkit-text-8xl, 6rem);
+  line-height: var(--appkit-leading-tight, 1.15);
+}
+
 .appkit-font--light {
   font-weight: 300;
 }

package/dist/ui/index.d.ts

@@ -16,6 +16,8 @@ export type { SectionProps, SectionBackgroundConfig, ArticleProps, MainProps, As
 export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
+export type { PageHeroHeadingProps } from "./components/PageHeroHeading";
+export { PageHeroHeading } from "./components/PageHeroHeading";
 export { Disclaimer } from "./components/Disclaimer";
 export type { DisclaimerProps } from "./components/Disclaimer";
 export type { SpecTableProps, SpecTableRow } from "./components/SpecTable";

package/dist/ui/index.js

@@ -30,6 +30,7 @@ export { FormErrorSummary } from "./forms/index.js";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, getStatusTone, getResourceIcon, } from "./columns/index.js";
 export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic.js";
 export { Div } from "./components/Div.js";
+export { PageHeroHeading } from "./components/PageHeroHeading.js";
 /*
  * Phase 12 — the one way to render a disclaimer. `id` only: there is no `text`
  * prop, because an escape hatch would make it a styled box and the legally

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.63.4",
+  "version": "4.64.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/scripts/seed-cli.mjs

@@ -267,7 +267,7 @@ const {
   FRANCHISE_BY_CATEGORY_ROOT,
   ordersSeedData, reviewsSeedData, cartsSeedData, bidsSeedData,
   couponsSeedData, couponUsageSeedData,
-  eventsSeedData, eventEntriesSeedData, payoutsSeedData, offersSeedData,
+  eventsSeedData, eventEntriesSeedData, eventLikesSeedData, payoutsSeedData, offersSeedData,
   notificationsSeedData, blogPostsSeedData,
   carouselsSeedData, carouselSlidesSeedData, homepageSectionsSeedData,
   siteSettingsSeedData, faqSeedData,
@@ -290,7 +290,7 @@ const {
   COUPONS_COLLECTION, CAROUSELS_COLLECTION, CAROUSEL_SLIDES_COLLECTION,
   HOMEPAGE_SECTIONS_COLLECTION, SITE_SETTINGS_COLLECTION, FAQS_COLLECTION,
   NOTIFICATIONS_COLLECTION, PAYOUT_COLLECTION, OFFER_COLLECTION, BLOG_POSTS_COLLECTION,
-  EVENTS_COLLECTION, EVENT_ENTRIES_COLLECTION, SESSION_COLLECTION,
+  EVENTS_COLLECTION, EVENT_ENTRIES_COLLECTION, EVENT_LIKES_COLLECTION, SESSION_COLLECTION,
   CART_COLLECTION,
   GROUPED_LISTINGS_COLLECTION, SCAMMER_COLLECTION,
   WISHLIST_COLLECTION, HISTORY_COLLECTION, PRODUCT_FEATURES_COLLECTION,
@@ -376,6 +376,7 @@ const COLLECTION_MAP = {
   blogPosts: BLOG_POSTS_COLLECTION,
   events: EVENTS_COLLECTION,
   eventEntries: EVENT_ENTRIES_COLLECTION,
+  eventLikes: EVENT_LIKES_COLLECTION,
   sessions: SESSION_COLLECTION,
   carts: CART_COLLECTION,
   wishlists: WISHLIST_COLLECTION,
@@ -760,6 +761,7 @@ const SEED_DATA_MAP = {
   blogPosts: blogPostsSeedData,
   events: eventsSeedData,
   eventEntries: eventEntriesSeedData,
+  eventLikes: eventLikesSeedData,
   sessions: sessionsSeedData,
   carts: cartsSeedData,
   wishlists: wishlistsSeedData,

package/dist/features/orders/utils/order-announcement-message.d.ts

@@ -1,18 +0,0 @@
-export interface PurchaseAnnouncementInput {
-    buyerName: string;
-    firstItemName: string;
-    /** 0 if only one item in the order */
-    additionalItemCount: number;
-    /** Total order amount in decimal rupees */
-    totalAmount: number;
-    orderId: string;
-}
-/**
- * Plain-text body for the "New order placed" staff notification row.
- *
- * Originally built for the WhatsApp purchase announcement. That integration
- * was removed 2026-10-20, but the builder survives because its output is now
- * the `adminNotifications` body the admin inbox renders and the daily digest
- * counts — a durable record rather than a per-admin blast.
- */
-export declare function buildPurchaseAnnouncementMessage(input: PurchaseAnnouncementInput): string;

package/dist/features/orders/utils/order-announcement-message.js

@@ -1,16 +0,0 @@
-/**
- * Plain-text body for the "New order placed" staff notification row.
- *
- * Originally built for the WhatsApp purchase announcement. That integration
- * was removed 2026-10-20, but the builder survives because its output is now
- * the `adminNotifications` body the admin inbox renders and the daily digest
- * counts — a durable record rather than a per-admin blast.
- */
-export function buildPurchaseAnnouncementMessage(input) {
-    const { buyerName, firstItemName, additionalItemCount, totalAmount, orderId } = input;
-    const extra = additionalItemCount > 0
-        ? ` + ${additionalItemCount} more item${additionalItemCount > 1 ? "s" : ""}`
-        : "";
-    const amount = totalAmount.toLocaleString("en-IN");
-    return `🛍️ New order! ${buyerName} purchased ${firstItemName}${extra} for ₹${amount}. Order #${orderId}`;
-}