refactor(public): ship fluid UI Gaps/QOL pass

GuideTipItem ReactNode, CatalogCard titleAs/href, PublicHubPanel, tip-pin guards, denser tools catalog, social map and captions polish, PartFrame fluid titles, Steward-101 dual chrome documented.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: hackmods

.cursor/rules/guide-layout-standards.mdc

@@ -23,7 +23,7 @@ Import from `@/components/comms/guide-ui` only for public guide pages (no dual `
 | `GuideAccentBlock` | Nested h3/h4 accent strips inside a chapter |
 | `GuideWorkshopNote` | Facilitator / attendee workshop callouts |
 | `GuideCallout` | Notes inside guides (`measure="prose"` default; `fill` for full column) |
-| `GuideTrainingPhase` | Steward-101 numbered training modules only — not default playbook chrome |
+| `GuideTrainingPhase` | Steward-101 numbered training modules only — not default playbook chrome. **Dual system is intentional:** rounded phase cards for timed lessons vs border-l `GuideSection` for ordinary chapters. |
 | Playbook TOC | `GuidePlaybookToc` via GuideLayout — scroll-spy + smooth scroll + mobile details |
 
 Playbooks: `preset="playbook"` → `readWide` + TOC rail. **Fill the article column** after the rail — do not leave a phone-width stack with empty right space.

docs/PROGRESS.md

@@ -1,5 +1,14 @@
 # Progress Log
 
+## 2026-09-08 — Fluid UI Gaps / QOL pass
+
+- [x] `GuideTipItem` ReactNode; `GuideCatalogCard` `titleAs`/`href`; `PublicHubPanel` (Brand Kit + onboarding)
+- [x] Tip `li.max-w-prose` layout guard; social map lg split; captions inset highlight; Tools catalog cards; PartFrame fluid titles
+- [x] Steward-101 dual chrome documented (GuideTrainingPhase vs GuideSection)
+- Deferred untouched: tool editor Cards, OL dark shell, legal, PDF, Hub/Portal
+- Session: [`session-knowledge-2026-09-08-fluid-ui-migration.md`](audit/session-knowledge-2026-09-08-fluid-ui-migration.md)
+- Verify: `npm run test:unit -- src/lib/comms/guide-layout-guards.test.ts`
+
 ## 2026-09-08 — Fluid UI migration (Batches 1–12) complete
 
 - [x] Complexity-grouped checklist + batch refactor of in-scope public guides/catalogs/onboarding/captions/brand-kit

docs/audit/guide-layout-growth-backlog.md

@@ -51,8 +51,9 @@ See also closed in-scope items: [`docs/growth-backlog.md`](../growth-backlog.md)
 - Legal trio: leave narrow unless product asks for TOC playbooks.
 - Asset packs / tool panels: audit `border-l-2` duplication only if packs grow into multi-column catalogs.
 - PDF: keep [`guide-pdfs.mdc`](../../.cursor/rules/guide-pdfs.mdc); any “density” work stays in `pdf-layout` contracts.
-- **Fluid QOL (post-checklist):** `GuideTipItem` ReactNode content; `GuideCatalogCard` `titleAs` / linkable title; shared `PublicHubPanel`; guard against tip `li.max-w-prose`; optional Tools catalog densify; PartFrame fluid section titles; ToolEditor **chrome-only** fluid `h1` if product wants parity without touching canvas Cards.
+- **Fluid QOL (post-checklist) — shipped 2026-09-08:** `GuideTipItem` ReactNode; `GuideCatalogCard` `titleAs`/`href`; `PublicHubPanel`; tip-pin guards; social map lg split; Tools catalog cards; PartFrame fluid titles; Steward-101 dual chrome documented.
 - **Hub / Portal composition:** deferred product decision — largest remaining density debt if scope expands.
+- ToolEditor **chrome-only** fluid `h1` if product wants parity without touching canvas Cards (still deferred).
 
 ## Related
 

docs/audit/session-knowledge-2026-09-08-fluid-ui-migration.md

@@ -53,24 +53,24 @@ Guards: `npm run test:unit -- src/lib/comms/guide-layout-guards.test.ts`.
 
 Not blockers for “checklist complete.” Prioritized for a future pass (or growth backlog).
 
-### High leverage (in-scope polish)
-
-| Gap | Why it matters | Suggested fix |
-|-----|----------------|---------------|
-| **`GuideTipItem` is string-only** | Union-history (and peers) still hand-roll `<li className="min-w-0">` for `RegistryLink` cells | Allow `content: ReactNode` (or `GuideTipRichItem`) so tip grids stay consistent |
-| **`GuideCatalogCard` always uses `<h2>`** | Nested under chapter `h2`s → heading-level noise; playbooks often duplicate title text + same-label CTA | Optional `titleAs` / linkable title; or `title` as Link when `href` provided |
-| **Page-local hub panel chrome** | Brand Kit `BrandKitPanel` and onboarding stepped panel share the same gradient/border language but are copy-pasted | Extract `PublicHubPanel` (or move BrandKitPanel under `components/brand/`) for Brand Kit + onboarding reuse |
-| **No structural guard for tip pins** | `guide-layout-guards` only bans local `GuideSection` / dual imports — cannot catch `li.max-w-prose` regressions | Extend guards: forbid `max-w-prose` on tip/list items inside `src/app/**/guide/**/page.tsx` (allow section intro / GuideProse) |
-
-### Medium (visual / steward feel)
-
-| Gap | Why it matters | Suggested fix |
-|-----|----------------|---------------|
-| **Social map diagram still “cluster in a box”** | Wider than `max-w-xs`, but not full-column like the scale diagram | Optional side-by-side legend + cluster, or soft fill of `GuideWideFigure` |
-| **Steward-101 dual chrome** | `GuideTrainingPhase` cards vs `GuideSection` border-l elsewhere | Keep intentional for training, or document as the only dual system; avoid inventing a third |
-| **Captions highlight ring on border-l tiles** | Deep-link `?caption=` ring may feel clipped vs old Card | Spot-check mobile; consider `rounded-r-lg` + inset ring only |
-| **Tools catalog group lists** | Still sparse title+blurb rows (not catalog cards) after start-here share | Optional densify to `GuideCatalogCard` per tool if Tools feels thin next to Guides |
-| **Website PartFrame headings** | Still fixed `text-2xl` while rest of public uses fluid tokens | Apply `PUBLIC_SECTION_TITLE_CLASS` inside PartFrame without changing layout |
+### High leverage (in-scope polish) — **shipped 2026-09-08 QOL pass**
+
+| Gap | Status |
+|-----|--------|
+| **`GuideTipItem` ReactNode content** | Done — union-history rich registry cells migrated |
+| **`GuideCatalogCard` `titleAs` / `href`** | Done — h3 under chapters; linkable title drops duplicate CTAs |
+| **`PublicHubPanel`** | Done — Brand Kit + onboarding share chrome |
+| **Tip `li.max-w-prose` guard** | Done — `guide-layout-guards.test.ts` |
+
+### Medium (visual / steward feel) — **shipped 2026-09-08 QOL pass**
+
+| Gap | Status |
+|-----|--------|
+| **Social map full-column** | Done — cluster + blind-spot side-by-side at `lg` |
+| **Steward-101 dual chrome** | Documented intentional — `GuideTrainingPhase` JSDoc + guide-layout-standards |
+| **Captions deep-link highlight** | Done — inset ring + rounded tile (mobile-safe) |
+| **Tools catalog densify** | Done — `GuideCatalogCard` per tool |
+| **Website PartFrame headings** | Done — `PUBLIC_SECTION_TITLE_CLASS` |
 
 ### Deferred / out-of-scope (do not “finish” under fluid checklist)
 

src/app/[locale]/brand-kit/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, type ReactNode } from "react";
+import { useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import { Link } from "@/i18n/navigation";
 import { useBrandStore } from "@/store/brand-store";
@@ -35,50 +35,21 @@ import {
 } from "@/lib/constants/unionPresets";
 import { SafeLogoImage } from "@/components/brand/SafeLogoImage";
 import { UnionOpsMark } from "@/components/brand/UnionOpsMark";
-import { resolveLocalNumber, cn } from "@/lib/utils";
+import { resolveLocalNumber } from "@/lib/utils";
 import { isBrandThemeEstablished } from "@/lib/utils/brand-theme";
 import { ComposedPageLayout } from "@/components/layout/ComposedPageLayout";
 import { TOOL_COMPOSITION } from "@/lib/constants/page-composition";
-import {
-  PUBLIC_CARD_TITLE_CLASS,
-  PUBLIC_PAGE_TITLE_CLASS,
-} from "@/lib/constants/public-type";
+import { PUBLIC_PAGE_TITLE_CLASS } from "@/lib/constants/public-type";
 import {
   guideCtaClassSm,
   guideCtaOutlineClassSm,
 } from "@/components/comms/guideCtaClasses";
+import { PublicHubPanel } from "@/components/comms/PublicHubPanel";
 import { PresetSloganPicker } from "@/components/brand/PresetSloganPicker";
 import { WorkshopDemoPath } from "@/components/comms/WorkshopDemoPath";
 import { JointActionCard } from "@/components/comms/campaign/JointActionCard";
 import { useWorkshopDemoSession } from "@/hooks/use-workshop-demo-session";
 
-function BrandKitPanel({
-  title,
-  description,
-  children,
-  className,
-}: {
-  title?: string;
-  description?: string;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <section
-      className={cn(
-        "min-w-0 space-y-3 rounded-xl border border-opseu-blue/15 bg-gradient-to-b from-opseu-blue/[0.04] to-white p-4 sm:p-5",
-        className,
-      )}
-    >
-      {title ? <h2 className={PUBLIC_CARD_TITLE_CLASS}>{title}</h2> : null}
-      {description ? (
-        <p className="text-sm text-gray-600">{description}</p>
-      ) : null}
-      {children}
-    </section>
-  );
-}
-
 export default function BrandKitPage() {
   const t = useTranslations("brandKit");
   const nav = useTranslations("nav");
@@ -261,7 +232,7 @@ export default function BrandKitPage() {
       <BrandKitContextHint />
 
       <div className="mt-4 grid min-w-0 items-start gap-4 lg:grid-cols-2 xl:grid-cols-3">
-        <BrandKitPanel
+        <PublicHubPanel
           title={t("unionPreset.title")}
           description={t("unionPreset.description")}
           className="lg:col-start-1 lg:row-start-1"
@@ -345,9 +316,9 @@ export default function BrandKitPage() {
               </div>
             </div>
           ) : null}
-        </BrandKitPanel>
+        </PublicHubPanel>
 
-        <BrandKitPanel
+        <PublicHubPanel
           title={t("currentSettings")}
           className="lg:col-start-2 lg:row-start-1 lg:row-span-2 xl:row-span-1"
         >
@@ -384,9 +355,9 @@ export default function BrandKitPage() {
             primaryLabel={t("colors.primary")}
             secondaryLabel={t("colors.secondary")}
           />
-        </BrandKitPanel>
+        </PublicHubPanel>
 
-        <BrandKitPanel
+        <PublicHubPanel
           title={t("logo.title")}
           description={t("logo.description")}
           className="lg:col-start-1 lg:row-start-2 xl:col-start-3 xl:row-start-1"
@@ -418,12 +389,12 @@ export default function BrandKitPage() {
             onCustomLogoClear={() => setBrandKit({ customLogoDataUrl: "" })}
             onLogoTextChange={(text) => setBrandKit({ logoText: text })}
           />
-        </BrandKitPanel>
+        </PublicHubPanel>
       </div>
 
       <div className="mt-4">
         {themeEstablished && unionPresetId === "opseu" ? (
-          <BrandKitPanel
+          <PublicHubPanel
             title={t("coalitionPreview.title")}
             description={t("coalitionPreview.description")}
             className="mb-4"
@@ -439,13 +410,13 @@ export default function BrandKitPage() {
                 t("coalitionPreview.defaultBadge")
               }
             />
-          </BrandKitPanel>
+          </PublicHubPanel>
         ) : null}
         <BrandKitCanvasPanel />
       </div>
 
       <div className="mt-4 grid gap-4 lg:grid-cols-2">
-        <BrandKitPanel>
+        <PublicHubPanel>
           <LocalLinksEditor
             websiteUrl={brandKit.websiteUrl ?? ""}
             facebookUrl={brandKit.facebookUrl ?? ""}
@@ -454,9 +425,9 @@ export default function BrandKitPage() {
             onFacebookChange={(url) => setBrandKit({ facebookUrl: url })}
             onCustomLinksChange={(links) => setBrandKit({ customLinks: links })}
           />
-        </BrandKitPanel>
+        </PublicHubPanel>
 
-        <BrandKitPanel>
+        <PublicHubPanel>
           <MembershipUrlsEditor
             membershipUrls={brandKit.membershipUrls ?? []}
             onChange={(urls) => setBrandKit({ membershipUrls: urls })}
@@ -465,7 +436,7 @@ export default function BrandKitPage() {
               brandKit.opseuSectorId,
             )}
           />
-        </BrandKitPanel>
+        </PublicHubPanel>
       </div>
     </ComposedPageLayout>
   );

src/app/[locale]/captions/page.tsx

@@ -91,9 +91,9 @@ function CaptionsPageContent() {
               key={template.id}
               id={`caption-${template.id}`}
               className={cn(
-                "min-w-0 scroll-mt-24 border-l-2 border-opseu-blue/30 bg-white pl-4 pr-1 py-1 transition-shadow sm:pl-5",
+                "min-w-0 scroll-mt-24 rounded-r-lg border-l-2 border-opseu-blue/30 bg-white py-2 pl-4 pr-2 transition-[box-shadow,background-color] sm:pl-5",
                 highlighted &&
-                  "rounded-r-lg bg-opseu-blue/[0.04] ring-2 ring-opseu-blue shadow-sm",
+                  "bg-opseu-blue/[0.06] ring-2 ring-inset ring-opseu-blue",
               )}
             >
               <div className="flex items-start justify-between gap-3 sm:gap-4">

src/app/[locale]/guide/steward-playbooks/page.tsx

@@ -148,6 +148,8 @@ export default async function StewardPlaybooksPage({
                   return (
                     <GuideCatalogCard
                       key={href}
+                      titleAs="h3"
+                      href={href}
                       className={
                         featured
                           ? "rounded-r-lg border border-opseu-blue/25 border-l-opseu-blue bg-opseu-blue/[0.06] py-3 pr-4"
@@ -156,11 +158,6 @@ export default async function StewardPlaybooksPage({
                       title={t(`links.${key}`)}
                       body={t(`blurbs.${key}`)}
                       meta={featured ? t("quizBadge") : undefined}
-                      action={
-                        <Link href={href} className={guideCtaOutlineClass}>
-                          {t(`links.${key}`)} →
-                        </Link>
-                      }
                     />
                   );
                 },
@@ -197,13 +194,10 @@ export default async function StewardPlaybooksPage({
           {workspaceLinks.map(({ href, titleKey, blurbKey }) => (
             <GuideCatalogCard
               key={href}
+              titleAs="h3"
+              href={href}
               title={t(`workspaces.${titleKey}`)}
               body={t(`workspaces.${blurbKey}`)}
-              action={
-                <Link href={href} className={guideCtaOutlineClass}>
-                  {t(`workspaces.${titleKey}`)} →
-                </Link>
-              }
             />
           ))}
         </ul>

src/app/[locale]/guide/union-history/page.tsx

@@ -22,6 +22,7 @@ import {
   GuideActionRow,
   GuideBulletList,
   GuideCallout,
+  GuideCatalogCard,
   GuideOutlineList,
   GuideOutlineStep,
   GuideProse,
@@ -311,16 +312,18 @@ export default async function UnionHistoryGuidePage({
             label={t("example.items.local.label")}
             content={t("example.items.local.content")}
           />
-          <li className="min-w-0 leading-relaxed">
-            <span className="font-semibold text-opseu-dark">
-              {t("example.items.council.label")}.
-            </span>{" "}
-            {t("example.items.council.before")}{" "}
-            <RegistryLink id="nrlc-who-we-are">
-              {t("example.items.council.link")}
-            </RegistryLink>{" "}
-            {t("example.items.council.after")}
-          </li>
+          <GuideTipItem
+            label={t("example.items.council.label")}
+            content={
+              <>
+                {t("example.items.council.before")}{" "}
+                <RegistryLink id="nrlc-who-we-are">
+                  {t("example.items.council.link")}
+                </RegistryLink>{" "}
+                {t("example.items.council.after")}
+              </>
+            }
+          />
           <GuideTipItem
             label={t("example.items.area.label")}
             content={t("example.items.area.content")}
@@ -329,14 +332,18 @@ export default async function UnionHistoryGuidePage({
             label={t("example.items.union.label")}
             content={t("example.items.union.content")}
           />
-          <li className="min-w-0 leading-relaxed">
-            <span className="font-semibold text-opseu-dark">
-              {t("example.items.nupge.label")}.
-            </span>{" "}
-            {t("example.items.nupge.before")}{" "}
-            <RegistryLink id="nupge">{t("example.items.nupge.link")}</RegistryLink>{" "}
-            {t("example.items.nupge.after")}
-          </li>
+          <GuideTipItem
+            label={t("example.items.nupge.label")}
+            content={
+              <>
+                {t("example.items.nupge.before")}{" "}
+                <RegistryLink id="nupge">
+                  {t("example.items.nupge.link")}
+                </RegistryLink>{" "}
+                {t("example.items.nupge.after")}
+              </>
+            }
+          />
         </GuideTipGrid>
         <GuideCallout className="mt-5">
           <p className="font-semibold text-opseu-dark">{t("tipLabel")}</p>
@@ -422,20 +429,17 @@ export default async function UnionHistoryGuidePage({
       </GuideSection>
 
       <GuideSection id="tools" title={t("tools.title")} intro={t("tools.intro")}>
-        <GuideTipGrid>
+        <ul className="mt-4 grid list-none gap-5 p-0 sm:grid-cols-2">
           {toolRows.map(({ key, href }) => (
-            <li key={key} className="min-w-0 leading-relaxed">
-              <Link
-                href={href}
-                className="font-semibold text-opseu-blue underline underline-offset-2"
-              >
-                {t(`tools.items.${key}.label`)}
-              </Link>
-              {". "}
-              {t(`tools.items.${key}.content`)}
-            </li>
+            <GuideCatalogCard
+              key={key}
+              titleAs="h3"
+              href={href}
+              title={t(`tools.items.${key}.label`)}
+              body={t(`tools.items.${key}.content`)}
+            />
           ))}
-        </GuideTipGrid>
+        </ul>
         <AffiliationMapWorksheetButton className="mt-5" />
         <GuideActionRow>
           <Link href="/tools/org-chart" className={guideCtaClass}>