@mohasinac/appkit 4.63.5 → 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/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.5",
+  "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,