@flamingo-stack/openframe-frontend-core 0.0.265 → 0.0.266

package/dist/{chunk-ERFO4JFK.js → chunk-FREG2KXV.js}

@@ -64,9 +64,30 @@ function StatusBadge({
   );
 }
 
+// src/components/layout/page-heading.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PAGE_HEADING_CLASS = "text-h1 text-ods-text-primary";
+var SECTION_HEADING_CLASS = "text-h2 text-ods-text-primary";
+var DESCRIPTION_CLASS = "mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary";
+function PageHeading({
+  children,
+  as: Tag = "h1",
+  description,
+  className,
+  descriptionClassName
+}) {
+  const headingClass = className ? `${PAGE_HEADING_CLASS} ${className}` : PAGE_HEADING_CLASS;
+  const descClass = descriptionClassName ? `${DESCRIPTION_CLASS} ${descriptionClassName}` : DESCRIPTION_CLASS;
+  const hasDescription = description != null && description !== "" && typeof description !== "boolean";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Tag, { className: headingClass, children }),
+    hasDescription && /* @__PURE__ */ jsx2("p", { className: descClass, children: description })
+  ] });
+}
+
 // src/components/features/entity-tag-badges.tsx
 import Link from "next/link";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var TAG_BADGE_CLASS = "bg-ods-card border border-ods-border";
 var BADGE_CLASS = TAG_BADGE_CLASS;
 function EntityTagBadges({ tags, basePath, max, className }) {
@@ -75,12 +96,12 @@ function EntityTagBadges({ tags, basePath, max, className }) {
   const visibleLimit = max == null ? items.length : Math.max(0, max);
   const shown = items.slice(0, visibleLimit);
   const overflow = items.length - shown.length;
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-center gap-2 w-full ${className || ""}`, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-wrap items-center gap-2 w-full ${className || ""}`, children: [
     shown.map((tag) => {
       const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name;
       const label = (tag.name || "").toUpperCase();
       if (basePath && tag.slug) {
-        return /* @__PURE__ */ jsx2(Link, { href: `${basePath}?tags=${tag.slug}`, className: "inline-flex", children: /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(Link, { href: `${basePath}?tags=${tag.slug}`, className: "inline-flex", children: /* @__PURE__ */ jsx3(
           StatusBadge,
           {
             text: label,
@@ -89,16 +110,19 @@ function EntityTagBadges({ tags, basePath, max, className }) {
           }
         ) }, key);
       }
-      return /* @__PURE__ */ jsx2(StatusBadge, { text: label, variant: "card", className: BADGE_CLASS }, key);
+      return /* @__PURE__ */ jsx3(StatusBadge, { text: label, variant: "card", className: BADGE_CLASS }, key);
     }),
-    overflow > 0 && /* @__PURE__ */ jsx2(StatusBadge, { text: `+${overflow}`, variant: "card", className: `${BADGE_CLASS} text-ods-text-secondary` })
+    overflow > 0 && /* @__PURE__ */ jsx3(StatusBadge, { text: `+${overflow}`, variant: "card", className: `${BADGE_CLASS} text-ods-text-secondary` })
   ] });
 }
 
 export {
   statusBadgeVariants,
   StatusBadge,
+  PAGE_HEADING_CLASS,
+  SECTION_HEADING_CLASS,
+  PageHeading,
   TAG_BADGE_CLASS,
   EntityTagBadges
 };
-//# sourceMappingURL=chunk-ERFO4JFK.js.map
+//# sourceMappingURL=chunk-FREG2KXV.js.map

package/dist/chunk-FREG2KXV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/status-badge.tsx","../src/components/layout/page-heading.tsx","../src/components/features/entity-tag-badges.tsx"],"sourcesContent":["\"use client\"\n\nimport React from 'react';\nimport { cn } from '../../utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst statusBadgeVariants = cva(\n  \"inline-flex items-center justify-center rounded font-mono font-medium uppercase tracking-wide\",\n  {\n    variants: {\n      variant: {\n        card: \"px-3 py-1.5 text-sm\",\n        button: \"px-2 py-0.5 text-[10px] leading-none\",\n      },\n      colorScheme: {\n        cyan: \"bg-[var(--ods-flamingo-cyan-base)] text-ods-text-on-accent\",\n        pink: \"bg-[var(--ods-flamingo-pink-base)] text-ods-text-on-accent\",\n        yellow: \"bg-[var(--ods-flamingo-yellow-base)] text-ods-text-on-accent border border-[var(--ods-system-greys-black)]\",\n        green: \"bg-[var(--ods-flamingo-green-base)] text-ods-text-on-accent\",\n        purple: \"bg-[var(--ods-flamingo-purple-base)] text-ods-text-on-accent\",\n        success: \"bg-[var(--ods-attention-green-success-secondary)] text-[var(--ods-attention-green-success)]\",\n        error: \"bg-[var(--ods-attention-red-error-secondary)] text-[var(--ods-attention-red-error)]\",\n        warning: \"bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)]\",\n        default: \"bg-ods-bg-secondary text-ods-text-primary\",\n        // Border-only variants (no background) - for task type badges\n        accentBorder: \"bg-transparent border-2 text-ods-accent border-ods-accent\",\n        errorBorder: \"bg-transparent border-2 text-[var(--ods-attention-red-error)] border-[var(--ods-attention-red-error)]\",\n        whiteBorder: \"bg-transparent border-2 text-ods-text-primary border-ods-text-primary\",\n      },\n    },\n    defaultVariants: {\n      variant: \"card\",\n      colorScheme: \"default\",\n    },\n  }\n);\n\nexport interface StatusBadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusBadgeVariants> {\n  text: string;\n  /**\n   * When true, renders `text` verbatim on a single line, bypassing the\n   * default multi-word vertical-stack behavior used by `variant=\"button\"`.\n   * Use this for compact inline contexts (e.g. chat-inline roadmap cards)\n   * where the stamp-like stacked layout is undesirable.\n   */\n  singleLine?: boolean;\n}\n\nfunction StatusBadge({\n  text,\n  variant,\n  colorScheme,\n  className,\n  singleLine,\n  ...props\n}: StatusBadgeProps) {\n  // Outer element is `<span>` so the badge is HTML-valid in any inline\n  // context (e.g. inside a markdown `<p>` next to a compact chat card,\n  // or inside an `<a>`). The `inline-flex` base class in\n  // `statusBadgeVariants` keeps the layout identical to the previous\n  // `<div>` outer — only the element name changed.\n  //\n  // Escape hatch: callers can pass `singleLine` to opt out of the\n  // multi-word stacking applied for `variant=\"button\"`. This is needed\n  // for compact inline contexts (chat-inline roadmap cards) where the\n  // default stamp-like vertical stack (\"TO\" / \"DO\") breaks layout.\n  const renderText = () => {\n    if (singleLine) return text;\n    if (variant === 'button' && text.includes(' ')) {\n      const words = text.split(' ');\n      return (\n        <span className=\"flex flex-col items-center justify-center text-center gap-0\">\n          {words.map((word, index) => (\n            <span key={index} className=\"block\">{word}</span>\n          ))}\n        </span>\n      );\n    }\n    return text;\n  };\n\n  return (\n    <span\n      className={cn(statusBadgeVariants({ variant, colorScheme }), className)}\n      {...props}\n    >\n      {renderText()}\n    </span>\n  );\n}\n\nexport { StatusBadge, statusBadgeVariants };","import type { ReactNode } from 'react'\n\n/**\n * THE page-title style — the ODS `text-h1` token (`--font-size-h1-title` =\n * 40 / 48 / 56px, Azeret Mono semibold), which already owns the responsive\n * letter-spacing (-0.02em). Mirrors the global `h1 { @apply text-h1 }` base, so\n * every page heading is the SAME size across the lib and every consuming app.\n *\n * Single source of truth — do NOT hardcode a px size or re-assert the token's\n * tracking; render `<PageHeading>` (or, for the rare non-h1 caller, apply\n * `PAGE_HEADING_CLASS`).\n */\nexport const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary'\n\n/**\n * THE section-heading style — the ODS `text-h2` sub-title token\n * (`--font-size-h2-sub-title` = 24 / 32 / 32px), one step below the page\n * title so a section `<h2>`/`<h3>` is always visually distinguishable from\n * the page's `<h1>`. Same single-source rule as PAGE_HEADING_CLASS: never\n * hardcode a px ramp or re-assert the token's tracking on a section heading.\n */\nexport const SECTION_HEADING_CLASS = 'text-h2 text-ods-text-primary'\n\nconst DESCRIPTION_CLASS =\n  \"mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary\"\n\nexport interface PageHeadingProps {\n  /** Heading content — plain text or nodes (e.g. an accent <span>). */\n  children: ReactNode\n  /**\n   * Heading level. Defaults to 'h1' (exactly one per page). Pass 'h2' where the\n   * page already renders an <h1> above (e.g. a hero/featured item).\n   */\n  as?: 'h1' | 'h2'\n  /** Optional supporting copy rendered as a <p> beneath the heading. */\n  description?: ReactNode\n  /** Extra classes merged onto the heading (margins, width, truncate, etc.). */\n  className?: string\n  /** Extra classes merged onto the description <p>. */\n  descriptionClassName?: string\n}\n\n/**\n * Unified page heading. Renders the canonical page-title <h1> (or <h2>) plus an\n * optional description, so every page shares one consistent style instead of\n * duplicating the class string. Layout (PageContainer, margins, surrounding\n * sections) stays with the caller — this owns only the heading + description.\n */\nexport function PageHeading({\n  children,\n  as: Tag = 'h1',\n  description,\n  className,\n  descriptionClassName,\n}: PageHeadingProps) {\n  const headingClass = className ? `${PAGE_HEADING_CLASS} ${className}` : PAGE_HEADING_CLASS\n  const descClass = descriptionClassName ? `${DESCRIPTION_CLASS} ${descriptionClassName}` : DESCRIPTION_CLASS\n  // `description` is a ReactNode, so `description={cond && '...'}` can pass a\n  // boolean `false` — exclude it (and empty string) so we never render an empty\n  // <p> that adds phantom vertical gap beneath the heading.\n  const hasDescription =\n    description != null && description !== '' && typeof description !== 'boolean'\n  return (\n    <>\n      <Tag className={headingClass}>{children}</Tag>\n      {hasDescription && <p className={descClass}>{description}</p>}\n    </>\n  )\n}\n","import Link from 'next/link'\nimport { StatusBadge } from '../ui/status-badge'\nimport type { TagAssoc } from '../../types/blog'\n\ninterface EntityTagBadgesProps {\n  /** Flat `<entity>_tags[]` association array (from entity_tags hydration). */\n  tags?: TagAssoc[] | null\n  /**\n   * When set, each badge links to `${basePath}?tags=${slug}` (clickable, SPA nav\n   * via next/link). Omit for a non-interactive display (badges with no slug also\n   * render non-interactive even when basePath is set).\n   */\n  basePath?: string\n  /** Cap visible badges; the remainder collapse into a \"+N\" badge. */\n  max?: number\n  /** Extra classes on the wrapper row. */\n  className?: string\n}\n\n// The ONE tag-badge skin (OpenFrame design): rounded-rect, font-mono uppercase\n// StatusBadge on ods-card + ods-border. Clickable badges add the accent hover.\n// Exported so other tag-shaped chips (e.g. FaqAccordion's section badge)\n// render the IDENTICAL skin without re-declaring it.\nexport const TAG_BADGE_CLASS = 'bg-ods-card border border-ods-border'\nconst BADGE_CLASS = TAG_BADGE_CLASS\n\n/**\n * THE single tag-badge renderer for the whole product (hub + lib). Renders the\n * OpenFrame `StatusBadge` chip skin for a flat `<entity>_tags[]` array, optionally\n * clickable (links each tag to its filtered list via `basePath`). The hub's\n * `EntityTagList` delegates here so there is exactly one tag-display design.\n * Renders nothing when there are no tags.\n */\nexport function EntityTagBadges({ tags, basePath, max, className }: EntityTagBadgesProps) {\n  const items = (tags || []).filter((t): t is TagAssoc => !!t && !!t.name)\n  if (items.length === 0) return null\n\n  // Only null/undefined means \"no cap\"; max={0} shows none, negatives clamp to 0.\n  const visibleLimit = max == null ? items.length : Math.max(0, max)\n  const shown = items.slice(0, visibleLimit)\n  const overflow = items.length - shown.length\n\n  return (\n    <div className={`flex flex-wrap items-center gap-2 w-full ${className || ''}`}>\n      {shown.map((tag) => {\n        const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name\n        const label = (tag.name || '').toUpperCase()\n        if (basePath && tag.slug) {\n          return (\n            <Link key={key} href={`${basePath}?tags=${tag.slug}`} className=\"inline-flex\">\n              <StatusBadge\n                text={label}\n                variant=\"card\"\n                className={`${BADGE_CLASS} cursor-pointer transition-colors hover:border-ods-accent`}\n              />\n            </Link>\n          )\n        }\n        return <StatusBadge key={key} text={label} variant=\"card\" className={BADGE_CLASS} />\n      })}\n      {overflow > 0 && (\n        <StatusBadge text={`+${overflow}`} variant=\"card\" className={`${BADGE_CLASS} text-ods-text-secondary`} />\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAGA;AACA,SAAS,WAA8B;AAuE3B;AArEZ,IAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MACA,aAAa;AAAA,QACX,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA;AAAA,QAET,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAeA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AAWnB,QAAM,aAAa,MAAM;AACvB,QAAI,WAAY,QAAO;AACvB,QAAI,YAAY,YAAY,KAAK,SAAS,GAAG,GAAG;AAC9C,YAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,aACE,oBAAC,UAAK,WAAU,+DACb,gBAAM,IAAI,CAAC,MAAM,UAChB,oBAAC,UAAiB,WAAU,SAAS,kBAA1B,KAA+B,CAC3C,GACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,YAAY,CAAC,GAAG,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH,qBAAW;AAAA;AAAA,EACd;AAEJ;;;AC5BI,mBACE,OAAAA,MADF;AAnDG,IAAM,qBAAqB;AAS3B,IAAM,wBAAwB;AAErC,IAAM,oBACJ;AAwBK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,eAAe,YAAY,GAAG,kBAAkB,IAAI,SAAS,KAAK;AACxE,QAAM,YAAY,uBAAuB,GAAG,iBAAiB,IAAI,oBAAoB,KAAK;AAI1F,QAAM,iBACJ,eAAe,QAAQ,gBAAgB,MAAM,OAAO,gBAAgB;AACtE,SACE,iCACE;AAAA,oBAAAA,KAAC,OAAI,WAAW,cAAe,UAAS;AAAA,IACvC,kBAAkB,gBAAAA,KAAC,OAAE,WAAW,WAAY,uBAAY;AAAA,KAC3D;AAEJ;;;ACpEA,OAAO,UAAU;AA2Cb,SAOU,OAAAC,MAPV,QAAAC,aAAA;AApBG,IAAM,kBAAkB;AAC/B,IAAM,cAAc;AASb,SAAS,gBAAgB,EAAE,MAAM,UAAU,KAAK,UAAU,GAAyB;AACxF,QAAM,SAAS,QAAQ,CAAC,GAAG,OAAO,CAAC,MAAqB,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI;AACvE,MAAI,MAAM,WAAW,EAAG,QAAO;AAG/B,QAAM,eAAe,OAAO,OAAO,MAAM,SAAS,KAAK,IAAI,GAAG,GAAG;AACjE,QAAM,QAAQ,MAAM,MAAM,GAAG,YAAY;AACzC,QAAM,WAAW,MAAM,SAAS,MAAM;AAEtC,SACE,gBAAAA,MAAC,SAAI,WAAW,4CAA4C,aAAa,EAAE,IACxE;AAAA,UAAM,IAAI,CAAC,QAAQ;AAClB,YAAM,MAAM,IAAI,UAAU,IAAI,MAAM,IAAI,QAAQ,IAAI;AACpD,YAAM,SAAS,IAAI,QAAQ,IAAI,YAAY;AAC3C,UAAI,YAAY,IAAI,MAAM;AACxB,eACE,gBAAAD,KAAC,QAAe,MAAM,GAAG,QAAQ,SAAS,IAAI,IAAI,IAAI,WAAU,eAC9D,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,SAAQ;AAAA,YACR,WAAW,GAAG,WAAW;AAAA;AAAA,QAC3B,KALS,GAMX;AAAA,MAEJ;AACA,aAAO,gBAAAA,KAAC,eAAsB,MAAM,OAAO,SAAQ,QAAO,WAAW,eAA5C,GAAyD;AAAA,IACpF,CAAC;AAAA,IACA,WAAW,KACV,gBAAAA,KAAC,eAAY,MAAM,IAAI,QAAQ,IAAI,SAAQ,QAAO,WAAW,GAAG,WAAW,4BAA4B;AAAA,KAE3G;AAEJ;","names":["jsx","jsx","jsxs"]}

package/dist/{chunk-Z5YEQWLC.js → chunk-FRU4LQJ4.js}

@@ -8,11 +8,11 @@ import {
   TASK_TYPE_TEXT_COLORS,
   getStatusColorScheme,
   init_pagination
-} from "./chunk-EXU5N5RM.js";
+} from "./chunk-DTJ32U7J.js";
 import {
   PageShell,
   SearchInput
-} from "./chunk-URJQGMNH.js";
+} from "./chunk-HTR3ARN6.js";
 import {
   init_next_navigation,
   usePathname,
@@ -21,7 +21,7 @@ import {
 } from "./chunk-PLJLE4A4.js";
 import {
   StatusBadge
-} from "./chunk-ERFO4JFK.js";
+} from "./chunk-FREG2KXV.js";
 import {
   Button,
   init_button2 as init_button
@@ -452,4 +452,4 @@ export {
   DevCardRowSkeletonList,
   DeliveryRow
 };
-//# sourceMappingURL=chunk-Z5YEQWLC.js.map
+//# sourceMappingURL=chunk-FRU4LQJ4.js.map

package/dist/{chunk-J5R3QIOJ.cjs → chunk-G5GQVAPI.cjs}

@@ -10,7 +10,9 @@ var _chunk7VMEOFEAcjs = require('./chunk-7VMEOFEA.cjs');
 
 
 
-var _chunkTT2VBR7Pcjs = require('./chunk-TT2VBR7P.cjs');
+
+
+var _chunkJMU4RU5Jcjs = require('./chunk-JMU4RU5J.cjs');
 
 
 
@@ -77,11 +79,11 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col items-start gap-2 pr-4", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: item.question }),
                   item.badge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkTT2VBR7Pcjs.StatusBadge,
+                    _chunkJMU4RU5Jcjs.StatusBadge,
                     {
                       text: item.badge.toUpperCase(),
                       variant: "card",
-                      className: _chunkTT2VBR7Pcjs.TAG_BADGE_CLASS
+                      className: _chunkJMU4RU5Jcjs.TAG_BADGE_CLASS
                     }
                   )
                 ] }),
@@ -186,8 +188,8 @@ function FaqSection({
     // Embedded default is an <h2> — a host page already owns the <h1>,
     // and the schema/heading pair must read "Frequently Asked Questions"
     // (one FAQ heading per page, never tag/section names).
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-h2 tracking-[-0.04em] text-ods-text-primary", children: DEFAULT_HEADING_TEXT })
-  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "text-h1 tracking-[-0.04em] text-ods-text-primary", children: DEFAULT_HEADING_TEXT }) : heading;
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkJMU4RU5Jcjs.SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT })
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: _chunkJMU4RU5Jcjs.PAGE_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
   if (error && isEmbedded) {
     return null;
   }
@@ -228,4 +230,4 @@ function FaqSection({
 
 
 exports.FaqAccordion = FaqAccordion; exports.FaqSection = FaqSection;
-//# sourceMappingURL=chunk-J5R3QIOJ.cjs.map
+//# sourceMappingURL=chunk-G5GQVAPI.cjs.map

package/dist/chunk-G5GQVAPI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-G5GQVAPI.cjs","../src/components/faq/faq-section.tsx","../src/components/faq-accordion.tsx","../src/components/faq/json-ld.ts"],"names":["jsx"],"mappings":"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","file":"/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-G5GQVAPI.cjs","sourcesContent":[null,"\"use client\"\n\nimport React, { useMemo } from 'react'\nimport type { Faq } from '../../types/faq'\nimport { FaqAccordion, type FaqItem } from '../faq-accordion'\nimport { useSelfFetch } from '../../hooks/use-self-fetch'\nimport { buildSuggestionUrl } from '../../utils/suggestion-url'\nimport { serializeJsonLd } from '../../utils/common'\nimport { buildFaqJsonLdFromFaqs, type FaqSchemaOptions } from './json-ld'\nimport { PAGE_HEADING_CLASS, SECTION_HEADING_CLASS } from '../layout/page-heading'\n\nexport interface FaqSectionProps {\n  /**\n   * SSR hydrate. When provided, the hook skips the first client fetch (per\n   * useSelfFetch contract). The consuming server page resolves FAQs then drills\n   * them into this prop — the lib never re-fetches what the host already gated on.\n   */\n  initialFaqs?: Faq[]\n  /** Both required together for entity-attached FAQs; partial → bare /api/faqs. */\n  entityType?: string\n  entityId?: number | string\n  /**\n   * Heading node. `undefined` → variant default (page: <h1>, embedded: <h2>\n   * \"Frequently Asked Questions\"); `null` → no heading. React node so\n   * platforms can drill their local <PageHeading> component without the lib\n   * referencing platform state.\n   */\n  heading?: React.ReactNode | null\n  /**\n   * Shell variant — the FAQ LIST itself renders identically everywhere (ONE\n   * flat accordion, `faq.section` as a per-row chip, never a heading):\n   *   - 'page' — the standalone /faqs surface: <main> shell + page gutters,\n   *     default <h1> heading.\n   *   - 'embedded' — a section inside a host page (entity detail rails, the\n   *     global nested-page block): bare <section>, default <h2> heading.\n   * Back-compat default: `heading === null` → 'embedded', else 'page' (the\n   * pre-variant discriminator).\n   */\n  variant?: 'page' | 'embedded'\n  /** Inject FAQPage schema.org JSON-LD as a <script>. Off by default so embeds\n   *  don't emit duplicate schema. */\n  emitJsonLd?: boolean\n  /** Overrides for the JSON-LD's name/description/url. */\n  jsonLd?: FaqSchemaOptions\n  className?: string\n  /** Maps to /api/faqs `?count=` (the 5-tier fill target). Absent → param\n   *  not sent (server default applies). */\n  minResults?: number\n  /** Fetch-URL prefix for third-party embeds / reverse proxies\n   *  ('' = same-origin relative). */\n  apiBaseUrl?: string\n}\n\nconst DEFAULT_HEADING_TEXT = 'Frequently Asked Questions'\n\n/** URL composition shared with RelatedContentSection (`buildSuggestionUrl`)\n *  — byte-identical to the historical `buildFaqsUrl` output when\n *  `minResults`/`apiBaseUrl` are absent. */\nfunction buildFaqsUrl(\n  entityType?: string,\n  entityId?: number | string,\n  minResults?: number,\n  apiBaseUrl = '',\n): string {\n  return buildSuggestionUrl('/api/faqs', { apiBaseUrl, entityType, entityId, count: minResults })\n}\n\n/** ONE list shape for every surface — standalone /faqs and embeds render the\n *  IDENTICAL flat accordion (`faq.section` = per-row chip, never a heading),\n *  so the two can't drift visually. */\nfunction toAccordionItems(faqs: Faq[]): FaqItem[] {\n  return faqs.map((faq) => ({\n    id: faq.id,\n    question: faq.question,\n    answer: faq.answer,\n    badge: faq.section || undefined,\n  }))\n}\n\nfunction FaqSkeleton() {\n  return (\n    <div className=\"space-y-8 animate-pulse\">\n      <div className=\"h-12 md:h-14 w-2/3 rounded bg-ods-border\" />\n      <div className=\"rounded-3xl border border-ods-border overflow-hidden bg-ods-card divide-y divide-ods-border w-full\">\n        {Array.from({ length: 8 }).map((_, idx) => (\n          <div key={idx} className=\"flex items-center justify-between px-6 md:px-8 py-6\">\n            <div className=\"h-6 w-5/6 rounded bg-ods-border\" />\n            <div className=\"h-10 w-10 rounded-md bg-ods-border\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\ninterface FaqsResponse {\n  faqs: Faq[]\n}\n\n/**\n * Generic, embeddable FAQ display surface.\n *\n * - Standalone /faqs page: pass `initialFaqs` from the server + `heading` +\n *   `emitJsonLd` with `jsonLd` overrides for SEO.\n * - Per-entity embed: pass `entityType` + `entityId` (no `initialFaqs`); the\n *   hook self-fetches and the public /api/faqs endpoint picks override-vs-fallback.\n *\n * CONTRACT: the consuming app MUST implement `GET /api/faqs`. Without it,\n * useSelfFetch reports `error:true` (logged once); in embedded mode (heading\n * === null) this component renders nothing so the host page isn't disfigured.\n */\nexport function FaqSection({\n  initialFaqs,\n  entityType,\n  entityId,\n  heading,\n  variant,\n  emitJsonLd = false,\n  jsonLd,\n  className,\n  minResults,\n  apiBaseUrl = '',\n}: FaqSectionProps) {\n  const url = buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl)\n  // Memoized — useSelfFetch re-syncs on [initialData]; a fresh per-render\n  // wrapper object would setState-loop under re-rendering parents.\n  const initialData = useMemo<FaqsResponse | undefined>(\n    () => (initialFaqs ? { faqs: initialFaqs } : undefined),\n    [initialFaqs],\n  )\n  const { data, isLoading, error } = useSelfFetch<FaqsResponse>(url, { initialData })\n\n  const faqs = data?.faqs ?? []\n  const isEmbedded = variant ? variant === 'embedded' : heading === null\n  const headingNode =\n    heading === undefined ? (\n      isEmbedded ? (\n        // Embedded default is an <h2> — a host page already owns the <h1>,\n        // and the schema/heading pair must read \"Frequently Asked Questions\"\n        // (one FAQ heading per page, never tag/section names).\n        <h2 className={SECTION_HEADING_CLASS}>{DEFAULT_HEADING_TEXT}</h2>\n      ) : (\n        <h1 className={PAGE_HEADING_CLASS}>{DEFAULT_HEADING_TEXT}</h1>\n      )\n    ) : (\n      heading\n    )\n\n  // Embedded mode: degrade silently on error.\n  if (error && isEmbedded) {\n    return null\n  }\n\n  // Embedded mode, zero FAQs after load: render nothing — an embedded host\n  // page (blog/case-study detail) must not show an empty section shell.\n  // The standalone /faqs page keeps its existing behavior.\n  if (!isLoading && !error && faqs.length === 0 && isEmbedded) {\n    return null\n  }\n\n  if (isLoading && faqs.length === 0) {\n    // Embedded mode renders skeletons WITHOUT the standalone page shell —\n    // a host detail page already provides <main> + gutters; nesting them\n    // here would emit invalid markup and double padding.\n    if (isEmbedded) {\n      return (\n        <div className={className}>\n          <FaqSkeleton />\n        </div>\n      )\n    }\n    return (\n      <main className={className ?? 'bg-ods-bg'}>\n        <div className=\"max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto\">\n          <FaqSkeleton />\n        </div>\n      </main>\n    )\n  }\n\n  if (error && faqs.length === 0) {\n    return (\n      <main className={className ?? 'bg-ods-bg flex items-center justify-center py-20'}>\n        <p className=\"text-ods-text-primary font-medium\">Failed to load FAQs. Please try again later.</p>\n      </main>\n    )\n  }\n\n  const schema = emitJsonLd ? buildFaqJsonLdFromFaqs(faqs, jsonLd) : null\n\n  // ONE flat accordion on EVERY surface — `faq.section` becomes a per-row\n  // chip, NOT a heading, so the page outline stays heading + h3(questions).\n  // Order is the server's (post-specific first, then reused) — grouping by\n  // section here would destroy it. The variants differ ONLY in shell:\n  // standalone /faqs keeps its <main> + page gutters, embeds render bare.\n  const accordion = <FaqAccordion items={toAccordionItems(faqs)} />\n  const body = isEmbedded ? (\n    <section className={className ?? 'space-y-10'}>\n      {headingNode}\n      {accordion}\n    </section>\n  ) : (\n    <main className={className ?? 'bg-ods-bg'}>\n      <div className=\"max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10\">\n        {headingNode}\n        {accordion}\n      </div>\n    </main>\n  )\n\n  return (\n    <>\n      {body}\n      {schema && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          // serializeJsonLd, NOT raw JSON.stringify — FAQ answers are\n          // admin-entered; an embedded \"</script>\" must not break the tag.\n          dangerouslySetInnerHTML={{ __html: serializeJsonLd(schema) }}\n        />\n      )}\n    </>\n  )\n}\n","\"use client\"\n\nimport React, { useRef, useState, useEffect, useCallback } from 'react'\nimport { ChevronButton } from './ui/chevron-button'\nimport { StatusBadge } from './ui/status-badge'\nimport { TAG_BADGE_CLASS } from './features/entity-tag-badges'\nimport { cn } from \"../utils/cn\"\n\nexport interface FaqItem {\n  id: number | string\n  question: string\n  answer: string\n  /** Optional category label (faq.section = tag name) rendered under the\n   *  question as the product's standard tag badge — the same StatusBadge\n   *  card skin EntityTagBadges uses everywhere (never a heading, so the\n   *  document outline stays h2/h3 only). */\n  badge?: string\n}\n\ninterface FaqAccordionProps {\n  items: FaqItem[]\n  defaultOpenIds?: (number | string)[]\n}\n\n// Utility to measure scrollHeight outside render cycle\nconst useMeasuredHeight = (isOpen: boolean) => {\n  const ref = useRef<HTMLDivElement | null>(null)\n  const [maxHeight, setMaxHeight] = useState<string>('0px')\n\n  const measure = useCallback(() => {\n    if (ref.current) {\n      const height = ref.current.scrollHeight\n      setMaxHeight(`${height}px`)\n    }\n  }, [])\n\n  // Update height only when section is open\n  useEffect(() => {\n    if (isOpen) {\n      measure()\n    } else {\n      setMaxHeight('0px')\n    }\n  }, [isOpen, measure])\n\n  return { ref, maxHeight }\n}\n\nexport function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps) {\n  const [openSet, setOpenSet] = useState<Set<string | number>>(new Set(defaultOpenIds))\n\n  const toggle = (id: string | number) => {\n    setOpenSet(prev => {\n      const next = new Set(prev)\n      if (next.has(id)) next.delete(id)\n      else next.add(id)\n      return next\n    })\n  }\n\n  return (\n    <div className=\"rounded-3xl border border-ods-border divide-y divide-ods-border bg-ods-card overflow-hidden\">\n      {items.map(item => {\n        const isOpen = openSet.has(item.id)\n        const { ref, maxHeight } = useMeasuredHeight(isOpen)\n\n        return (\n          <div\n            key={item.id}\n            className={cn('group transition-colors hover:bg-[#1E1E1E]', isOpen ? 'bg-ods-bg' : 'bg-transparent')}\n          >\n            {/* Header */}\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onClick={() => toggle(item.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  toggle(item.id);\n                }\n              }}\n              aria-expanded={isOpen}\n              className=\"flex w-full items-center justify-between px-6 md:px-8 py-6 text-left focus:outline-none transition-colors cursor-pointer\"\n            >\n              <div className=\"flex min-w-0 flex-col items-start gap-2 pr-4\">\n                <h3>\n                  {item.question}\n                </h3>\n                {item.badge && (\n                  <StatusBadge\n                    text={item.badge.toUpperCase()}\n                    variant=\"card\"\n                    className={TAG_BADGE_CLASS}\n                  />\n                )}\n              </div>\n              <div className=\"flex-shrink-0\">\n                <ChevronButton\n                  aria-label={isOpen ? 'Collapse question' : 'Expand question'}\n                  size=\"md\"\n                  isExpanded={isOpen}\n                  backgroundColor=\"transparent\"\n                  borderColor=\"#3A3A3A\"\n                />\n              </div>\n            </div>\n            {/* Content wrapper with max-height animation */}\n            <div\n              style={{ maxHeight, transition: 'max-height 0.35s ease-in-out, opacity 0.35s ease-in-out', opacity: isOpen ? 1 : 0 }}\n              className=\"overflow-hidden group-hover:bg-[#1E1E1E]/30\"\n            >\n              <div ref={ref} className=\"px-6 md:px-8 pb-6 text-ods-text-primary text-h4\">\n                {item.answer}\n              </div>\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n} ","/**\n * Pure FAQ JSON-LD builder. No React, no client-only deps — safe to import from\n * Server Components via the `./components/faq` subpath export. (Do NOT import\n * through the root `./components` barrel — that barrel is `\"use client\"` and\n * dragging it into a Server Component would force the client graph into the\n * server.)\n *\n * The hub used to harcode `name`/`description` here for OpenMSP; in the lib we\n * accept overrides so every embedder can supply its own platform branding.\n */\nimport type { Faq } from '../../types/faq'\n\nexport interface FaqSchemaOptions {\n  name?: string\n  description?: string\n  url?: string\n}\n\nconst DEFAULT_NAME = 'Frequently Asked Questions'\nconst DEFAULT_DESCRIPTION =\n  'Answers to common questions.'\n\nexport function baseFaqSchema(opts: FaqSchemaOptions = {}) {\n  return {\n    '@context': 'https://schema.org',\n    '@type': 'FAQPage',\n    name: opts.name ?? DEFAULT_NAME,\n    description: opts.description ?? DEFAULT_DESCRIPTION,\n    ...(opts.url ? { url: opts.url } : {}),\n  } as const\n}\n\nexport function buildFaqJsonLdFromFaqs(faqs: Faq[], opts: FaqSchemaOptions = {}) {\n  return {\n    ...baseFaqSchema(opts),\n    mainEntity: faqs.map((faq) => ({\n      '@type': 'Question',\n      name: faq.question,\n      acceptedAnswer: {\n        '@type': 'Answer',\n        text: faq.answer,\n      },\n    })),\n  } as const\n}\n"]}

package/dist/{chunk-URJQGMNH.js → chunk-HTR3ARN6.js}

@@ -11,6 +11,9 @@ import {
 import {
   next_image_default
 } from "./chunk-LXC6P2EO.js";
+import {
+  SECTION_HEADING_CLASS
+} from "./chunk-FREG2KXV.js";
 import {
   Button,
   DropdownMenu,
@@ -2372,7 +2375,7 @@ function VideoBitesDisplay({
   const totalCount = grouped.portrait.length + grouped.square.length + grouped.landscape.length;
   if (totalCount === 0) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
-    showTitle && /* @__PURE__ */ jsx12("h2", { className: "text-h1 tracking-[-1.12px] text-ods-text-primary break-words", children: title }),
+    showTitle && /* @__PURE__ */ jsx12("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: title }),
     grouped.hasMultiple ? /* @__PURE__ */ jsx12(
       RatioTabs,
       {
@@ -2499,7 +2502,7 @@ function EntityVideoSection({
       }
     )),
     videoSummary && MarkdownRenderer && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
-      /* @__PURE__ */ jsx13("h2", { className: "text-h1 tracking-[-1.12px] text-ods-text-primary break-words", children: "Summary" }),
+      /* @__PURE__ */ jsx13("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: "Summary" }),
       /* @__PURE__ */ jsx13("div", { className: "text-h4 text-ods-text-primary break-words overflow-hidden", children: /* @__PURE__ */ jsx13(MarkdownRenderer, { content: videoSummary }) })
     ] }),
     videoBites && videoBites.length > 0 && /* @__PURE__ */ jsx13(
@@ -4473,4 +4476,4 @@ export {
   SearchInput,
   FilterPillRow
 };
-//# sourceMappingURL=chunk-URJQGMNH.js.map
+//# sourceMappingURL=chunk-HTR3ARN6.js.map