@mohasinac/appkit 4.52.1 → 4.52.3

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -3119,6 +3119,43 @@ const rawTesterChecklistItems = [
                 { key: "seller-description-lists-parts", label: "A listing under a model leaf gets a Parts line in its filled description, and a non-Beyblade category gets no empty one" },
             ],
         },
+        {
+            /*
+             * The categories index, the franchise unit and the bundle collage —
+             * 2026-10-14.
+             *
+             * 🛑 Every case here compares two things or counts an exact number,
+             * because every defect this work already produced rendered a perfectly
+             * plausible page:
+             *
+             *   1. The index rendered all 1,185 rows flat. Nothing errored; it just
+             *      buried the six roots under 752 part leaves.
+             *   2. The Parts tab first matched 772 rows — it also caught the 20
+             *      classification NODES, whose own parentIds pass through a
+             *      `*-parts` node. A tab mixing "Attack Rings" with the attack rings
+             *      inside it looks entirely reasonable.
+             *   3. Seven franchises have NO stock. Seeded active they would each be
+             *      a card opening an empty shop; omitted entirely, seventeen
+             *      CharacterHotspot links stay 404. Both failure modes look fine
+             *      from one page.
+             *   4. Every bundle carries a placeholder cover image, so a collage
+             *      checked AFTER the cover would never render — and a card showing
+             *      one grey tile is not visibly broken.
+             */
+            pageKey: "category-tabs-franchise-bundles",
+            pageLabel: "Categories index tabs, the franchise unit and the bundle collage",
+            href: "/categories",
+            cases: [
+                { key: "index-shows-roots-only", label: "The Categories tab lists the six roots and NO deeper category" },
+                { key: "five-tabs-no-all", label: "There are exactly five tabs and none of them is 'All'" },
+                { key: "parts-tab-is-leaves-only", label: "The Parts tab lists part leaves and NOT the 20 classification nodes" },
+                { key: "tabs-do-not-overlap", label: "No single row appears on two tabs" },
+                { key: "franchise-index-hides-unstocked", label: "The franchise index shows only stocked franchises, not all eight" },
+                { key: "unstocked-franchise-page-resolves", label: "An unstocked franchise page loads and says so, rather than 404ing or showing an empty grid" },
+                { key: "franchise-detail-lists-its-products", label: "The Beyblade franchise page lists its listings, with a nonsense slug as the control" },
+                { key: "bundle-card-shows-a-collage", label: "A bundle card shows a collage of its members, not its placeholder cover" },
+            ],
+        },
         {
             /*
              * Store reviews. The endpoint answered 200 with zero reviews for EVERY
@@ -3450,13 +3487,13 @@ const rawTesterChecklistItems = [
             cases: [
                 {
                     key: "tier-depth-reachable",
-                    label: "The category tree is four tiers deep and every tier is reachable by clicking down from a root",
-                    description: "Two roots exist — Spinning Tops and Living Collectibles. Walk one of them all the way to a leaf without typing a URL.",
+                    label: "The category tree is five tiers deep and every tier is reachable by clicking down from a root",
+                    description: "Six roots exist — Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits, Living Collectibles. Walk one of them all the way to a leaf without typing a URL.",
                     href: "/categories",
                 },
                 {
                     key: "second-root-reachable",
-                    label: "Both category roots appear on the categories index, not just the Beyblade one",
+                    label: "Every category root appears on the categories index, not just the Beyblade one",
                     description: "BEFORE: the tree had ONE root and TWO tiers, so the live-item listings carried no category at all and were unreachable from every category and brand page.",
                     href: "/categories",
                 },
@@ -3855,6 +3892,123 @@ const rawTesterChecklistItems = [
                 },
             ],
         },
+        {
+            pageKey: "action-bar-placement",
+            pageLabel: "Action Bar & Back-to-Top — Desktop vs Mobile",
+            href: "/products",
+            cases: [
+                {
+                    key: "back-to-top-dismiss-visible",
+                    label: "The small ✕ beside the back-to-top button actually shows a ✕ — not an empty outlined pill",
+                    description: "Fixed 2026-10-15. BEFORE: the dismiss control was a `<Button size=\"sm\">` forced to 24px wide, but that size carries 12px of padding on each side — so the content box was exactly 0px and the ✕ glyph shrank to nothing. The button was there and clickable; the icon was invisible. AFTER: scroll any long page past ~400px. Two round controls appear in the corner: a large one with an up-chevron, and a small one with a clearly visible ✕. Clicking the ✕ hides both until you navigate to another page.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-top-on-desktop",
+                    label: "ON DESKTOP (window wider than ~1024px): the page action bar sits directly UNDER the header, not welded to the bottom of the window",
+                    description: "Changed 2026-10-15. BEFORE: the same full-width bar was pinned to the bottom edge on every screen size — a mobile pattern on a desktop window, where it reads as a browser download bar and sits as far from the content as possible. AFTER: maximise the window and open a product detail page (or any admin list and tick a row to enter bulk mode). The bar must appear immediately below the site header, full width, with its shadow falling DOWNWARD onto the page.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-bottom-on-mobile",
+                    label: "ON MOBILE (narrow window): the same action bar is still at the BOTTOM, stacked directly above the bottom tab bar",
+                    description: "The other half of the change, and the real regression risk — the two layouts share one component. Narrow the browser to phone width (or use device emulation) on the same page. The bar must be at the bottom, immediately above the bottom navigation, with its shadow falling UPWARD. Resize the window slowly across the ~1024px line both ways: the bar must move cleanly between the two positions and never appear in both places or in neither.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-no-content-overlap",
+                    label: "ON DESKTOP: the top action bar never covers the first rows of page content, and leaves no empty gap when it is absent",
+                    description: "The bar is fixed, so the page reserves space for it. Two checks. (1) With the bar showing, the first heading/row of content must be fully readable, not hidden behind it. (2) On a page with NO action bar, there must be no blank band under the header — the reservation collapses to zero when nothing is published.",
+                    href: "/products",
+                },
+                {
+                    key: "action-bar-panels-open-into-screen",
+                    label: "Expandable panels on the action bar open INTO the screen — downward on desktop, upward on mobile",
+                    description: "On desktop, open an admin list, tick two rows to enter bulk mode, then open the action-type picker: it must expand DOWNWARD over the page. Repeat at phone width: it must expand UPWARD. A panel that opens off-screen is unusable, and the direction has to follow whichever edge the bar is attached to.",
+                    href: "/admin/products",
+                },
+                {
+                    key: "back-to-top-clears-the-bar",
+                    label: "The back-to-top button never overlaps the action bar or the bottom tab bar at any window width",
+                    description: "On mobile the button floats above whatever is stacked at the bottom edge; on desktop the bar is at the top so the button should sit lower. Scroll a long page at phone width with an action bar showing — the button must sit clear above it. Widen to desktop: the button must move down as the bottom tier empties, with no overlap at any point during the resize.",
+                    href: "/products",
+                },
+            ],
+        },
+        {
+            pageKey: "feature-badge-picker",
+            pageLabel: "Feature Badges — Searchable Picker",
+            href: "/store/products",
+            cases: [
+                {
+                    key: "features-are-searchable",
+                    label: "The product form's Feature badges control is a SEARCHABLE dropdown, not a long grid of checkboxes",
+                    description: "Changed 2026-10-15. BEFORE: every eligible badge rendered as a bordered checkbox tile in a two-column grid — a wall a seller had to read end-to-end, which grew every time an admin added a badge. AFTER: as a seller, open any product for editing and find 'Feature badges'. It must be a single control that opens a searchable list. Type part of a badge name and confirm the list narrows.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-search-matches-description",
+                    label: "Searching the badge picker matches a badge's DESCRIPTION, not only its name",
+                    description: "The description is folded into each option so it stays searchable. Open the picker and type a word that appears only in a badge's description (e.g. 'factory', which is in Sealed's description but not its label). That badge must still appear in the filtered list.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-scope-is-visible",
+                    label: "Each badge option says whether it is a platform badge or one of your own store's",
+                    description: "The old grid showed two separate headings. A flat searchable list has none, so the scope rides in the option text — every option must end with '(platform)' or '(your store)', and the selected chips must keep that distinction too.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-respects-the-cap",
+                    label: "Selecting more than the allowed number of badges is prevented, and an over-limit product loads without blocking save",
+                    description: "Select badges until you hit the stated limit ('Selected: N of 24'), then try to select one more — the selection must not exceed the cap. This replaced a mechanism that disabled every unticked checkbox at the limit, so confirm the control still communicates that you are full rather than silently ignoring clicks.",
+                    href: "/store/products",
+                },
+                {
+                    key: "features-inline-create",
+                    label: "A seller can create a NEW store badge from inside the picker, and it is immediately selectable",
+                    description: "Added 2026-10-15. As a seller, open the badge picker and use 'Create a badge for my store'. Fill in a label and icon and submit. The drawer must close, the new badge must appear as a selected chip, and reopening the picker must list it as a real option marked '(your store)' — not a one-off chip that disappears on reload. Reload the page and confirm it persisted.",
+                    href: "/store/products",
+                },
+            ],
+        },
+        {
+            pageKey: "rich-text-readability",
+            pageLabel: "Admin-Authored Rich Text — Readability in Both Themes",
+            href: "/categories/category-spinning-tops",
+            cases: [
+                {
+                    key: "prose-body-readable-dark",
+                    label: "IN DARK MODE: the paragraphs of a category's own write-up are clearly readable — not a dim grey that disappears into the page background",
+                    description: "Fixed 2026-10-15. BEFORE: every rich-text block on the site rendered the LIGHT-theme prose palette in dark mode — body text at gray-700 — because `dark:prose-invert` has never compiled in this project (the consumer Tailwind build is told `@source not \"../../appkit\"`, and appkit's own build has no typography plugin). AFTER: switch to DARK mode, open /categories/category-spinning-tops and read the four-paragraph write-up under the hero. Every sentence must be comfortably readable at arm's length. A paragraph you have to lean in for is still a bug.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-links-visible-dark",
+                    label: "IN DARK MODE: links inside that write-up (Beyblade Original, Metal Fight, Burst, Beyblade X, Accessories) are visibly a different colour from the surrounding text and are obviously clickable",
+                    description: "The worst half of the same bug, and the one a reader notices first. BEFORE: prose links resolved to gray-900 — near-black on a dark page — so they were effectively invisible; you could only find them by sweeping the mouse for the cursor change. AFTER: each link must read as a link WITHOUT hovering. Check all five in the body copy. Underline alone is not enough: the text colour must differ from the paragraph around it.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-readable-light-regression",
+                    label: "IN LIGHT MODE: the same write-up and its links are still correct — fixing dark mode must not have broken light mode",
+                    description: "A real risk, not a formality: the fix rebinds the prose colour palette to theme tokens, so both themes now come from one place and a mistake affects both. Toggle light/dark a few times on this page. Headings must stay darker than body text, and links must stay distinguishable in BOTH.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-readable-across-surfaces",
+                    label: "The same readability holds on every other admin-authored rich-text surface — a blog post, a policy page, an FAQ answer and a product description",
+                    description: "This was never a category-page bug; ~25 surfaces share one renderer. In DARK mode check: a post under /blog, /terms (or /privacy), an expanded answer on /faqs, and the Description tab of any product. Each must have readable body copy and visible links. One unreadable surface here means the shared fix did not reach it.",
+                    href: "/blog",
+                },
+                {
+                    key: "prose-follows-custom-theme",
+                    label: "Rich-text body copy follows an admin-authored CUSTOM theme, not a fixed grey",
+                    description: "Added with the 2026-10-15 fix, and only possible because of it: the old prose palette was hardcoded Tailwind greys that no theme could reach. As admin, open Site Settings → Themes, switch the active theme (e.g. to Cobalt Night or Sunset), then reload a category page with a write-up. The paragraph and link colours must shift with the theme rather than staying the same grey.",
+                    href: "/admin/site",
+                },
+            ],
+        },
         {
             pageKey: "status-badge-legibility",
             pageLabel: "Listing Tags & Status Chips — Light vs Dark Mode",