@flamingo-stack/openframe-frontend-core 0.0.745 → 0.0.748

package/dist/utils/vendor-classification.js

@@ -1,36 +1,87 @@
-const VENDOR_CLASSIFICATIONS = [
-  "open_source",
-  "commercial",
-  "openframe_selected",
-  "openframe_shipped",
-  "openframe_connect"
-];
-const OPENFRAME_CLASSIFICATIONS = {
+const VENDOR_CLASSIFICATION_COPY = {
   openframe_selected: {
-    word: "Selected",
     label: "OpenFrame Selected",
-    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value."
+    word: "Selected",
+    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
+  },
+  openframe_connect: {
+    label: "OpenFrame Connect",
+    word: "Connect",
+    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
   openframe_shipped: {
-    word: "Shipped",
     label: "OpenFrame Shipped",
-    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap."
+    word: "Shipped",
+    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
-  openframe_connect: {
-    word: "Connect",
-    label: "OpenFrame Connect",
-    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets."
+  open_source: {
+    label: "Open Source",
+    description: "Released under an OSI-approved open-source license.",
+    group: "license",
+    icon: { name: "code", tone: "accent" }
+  },
+  source_available: {
+    label: "Source-available",
+    description: "The source code is public, but the license restricts how it may be used (for example SSPL, BSL, the Elastic License, or limits on company size or on offering it as a service).",
+    group: "license",
+    icon: { name: "file-code", tone: "neutral" }
+  },
+  commercial: {
+    label: "Commercial",
+    description: "Proprietary software sold by the vendor.",
+    group: "license",
+    icon: { name: "dollar", tone: "neutral" }
+  },
+  end_of_life: {
+    label: "End of life",
+    description: "The vendor has discontinued or retired the product. No new releases.",
+    group: "lifecycle",
+    icon: { name: "alert-triangle", tone: "warning" }
+  },
+  end_of_support: {
+    label: "End of support",
+    description: "The vendor no longer provides support or security fixes, though the product can still be obtained.",
+    group: "lifecycle",
+    icon: { name: "clock", tone: "warning" }
+  },
+  unmaintained: {
+    label: "Unmaintained",
+    description: "No release for years and no official end-of-life notice.",
+    group: "lifecycle",
+    icon: { name: "pause-circle", tone: "warning" }
   }
 };
-function isVendorClassification(value) {
-  return VENDOR_CLASSIFICATIONS.includes(value);
+function vendorClassificationCopy(value) {
+  if (!value || !Object.prototype.hasOwnProperty.call(VENDOR_CLASSIFICATION_COPY, value)) return void 0;
+  return VENDOR_CLASSIFICATION_COPY[value];
+}
+function vendorClassificationGroup(value) {
+  return vendorClassificationCopy(value)?.group;
 }
 function isOpenFrameClassification(value) {
-  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+  return vendorClassificationGroup(value) === "openframe";
+}
+const DISPLAY_ORDER = Object.keys(VENDOR_CLASSIFICATION_COPY);
+function compareVendorClassifications(a, b) {
+  const ia = DISPLAY_ORDER.indexOf(a);
+  const ib = DISPLAY_ORDER.indexOf(b);
+  if (ia !== -1 || ib !== -1) {
+    if (ia === -1) return 1;
+    if (ib === -1) return -1;
+    return ia - ib;
+  }
+  return a.localeCompare(b);
 }
 export {
-  OPENFRAME_CLASSIFICATIONS,
-  VENDOR_CLASSIFICATIONS,
+  VENDOR_CLASSIFICATION_COPY,
+  compareVendorClassifications,
   isOpenFrameClassification,
-  isVendorClassification
+  vendorClassificationCopy,
+  vendorClassificationGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.745",
+  "version": "0.0.748",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [
@@ -480,10 +480,16 @@
     "framer-motion": "^12.23.12",
     "globals": "^16.4.0",
     "graphql": "^16.12.0",
+    "hast-util-raw": "^9.1.0",
     "hast-util-to-text": "^4.0.2",
     "libphonenumber-js": "^1.12.40",
     "lucide-react": "^0.454.0",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-newline-to-break": "^2.0.0",
+    "mdast-util-to-hast": "^13.2.1",
     "mermaid": "^11.14.0",
+    "micromark-extension-gfm": "^3.0.0",
     "nats.ws": "^1.30.3",
     "next-themes": "^0.2.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
@@ -505,7 +511,6 @@
     "remark": "^15.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "remark-rehype": "^11.1.2",
     "sonner": "^1.2.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

package/src/components/case-studies/share-experience-section.tsx

@@ -7,7 +7,7 @@ import { CapterraIcon } from '../icons-v2-generated/brand-logos/capterra-icon';
 import { G2Icon } from '../icons-v2-generated/brand-logos/g2-icon';
 import { GetappIcon } from '../icons-v2-generated/brand-logos/getapp-icon';
 import { TrustpilotIcon } from '../icons-v2-generated/brand-logos/trustpilot-icon';
-import { accentSentenceMarks } from '../layout/page-heading';
+import { accentSentenceMarks, HeadingLines } from '../layout/page-heading';
 import { BenefitCard, BenefitCardGrid } from '../ui';
 
 /**
@@ -56,11 +56,14 @@ export interface ShareExperienceSectionProps {
 }
 
 const DEFAULT_TITLE: React.ReactNode = (
-  <>
-    Share Your Experience
-    <br />
-    with Fellow MSPs<span className="text-ods-accent">:</span>
-  </>
+  <HeadingLines>
+    {[
+      'Share Your Experience',
+      <>
+        with Fellow MSPs<span className="text-ods-accent">:</span>
+      </>,
+    ]}
+  </HeadingLines>
 );
 
 const DEFAULT_SUBTITLE: React.ReactNode = (

package/src/components/layout/page-heading.tsx

@@ -68,6 +68,41 @@ export function PageHeading({
   );
 }
 
+/**
+ * THE way a heading is drawn on more than one line: each line on its own line,
+ * with a space before every break. The space is what keeps the heading's TEXT
+ * (what search engines, screen readers and link previews read) in words:
+ * "own. Approved", never "own.Approved". It sits at the end of a line, where it
+ * draws nothing. An empty line is a blank line.
+ *
+ * Every multi-line title goes through this; never write a bare `<br />` or one
+ * block `<span>` per line in a heading. The lines are its children, so anything
+ * that walks a title's children (the accent marks) reaches every line.
+ */
+export interface HeadingLinesProps {
+  /** The title's lines, top to bottom: one child per line. */
+  children: ReactNode;
+}
+
+export function HeadingLines({ children }: HeadingLinesProps) {
+  return (
+    <>
+      {Children.toArray(children).map((line, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: a title's lines never reorder
+        <Fragment key={index}>
+          {index > 0 ? (
+            <>
+              {' '}
+              <br />
+            </>
+          ) : null}
+          {line}
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
 /** A sentence mark inside a title: `.`, `:`, `?` or `!` that ends a sentence (followed by a space or the end). */
 const SENTENCE_MARK = /([.:?!]+)(?=\s|$)/g;
 const ONLY_MARKS = /^\s*[.:?!]+\s*$/;
@@ -116,17 +151,22 @@ function accentMarks(node: ReactNode, accentClassName: string): ReactNode {
     if (ONLY_MARKS.test(node)) return node;
     const parts = node.split(SENTENCE_MARK);
     if (parts.length === 1) return node;
-    return parts.map((part, index) =>
-      // `split` with one capture group alternates text, mark, text, mark...
-      index % 2 === 1 ? (
-        // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
-        <span key={index} className={accentClassName}>
-          {part}
-        </span>
-      ) : (
-        // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
-        <Fragment key={index}>{part}</Fragment>
-      ),
+    // One node for one string, so a list of children keeps its length (each of `HeadingLines`' lines stays one line).
+    return (
+      <>
+        {parts.map((part, index) =>
+          // `split` with one capture group alternates text, mark, text, mark...
+          index % 2 === 1 ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
+            <span key={index} className={accentClassName}>
+              {part}
+            </span>
+          ) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
+            <Fragment key={index}>{part}</Fragment>
+          ),
+        )}
+      </>
     );
   }
   if (Array.isArray(node)) {
@@ -225,6 +265,7 @@ export function SectionHeading({
         // `contents`: the element names the heading and draws no box, so the stack lays its two children out as before.
         <Tag className="contents">
           {eyebrowNode}
+          {/* A space between the eyebrow and the title, so the heading's text reads "Eyebrow Title", not "EyebrowTitle". */}{' '}
           <span className={`block ${layout.heading}`} data-section-heading>
             {headingText}
           </span>

package/src/components/ui/filter-checkbox-item.tsx

@@ -1,30 +1,46 @@
 'use client';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
 
 export interface FilterCheckboxItemProps {
-  label: string;
+  /** Text, or a richer label (an icon with a word and a tooltip). */
+  label: ReactNode;
+  /** The accessible name when `label` is not plain text. */
+  ariaLabel?: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
   count?: number;
+  /** Ignore clicks (e.g. while a navigation started by this filter is pending). */
+  disabled?: boolean;
   className?: string;
 }
 
-export function FilterCheckboxItem({ label, checked, onChange, count, className }: FilterCheckboxItemProps) {
+export function FilterCheckboxItem({
+  label,
+  ariaLabel,
+  checked,
+  onChange,
+  count,
+  disabled,
+  className,
+}: FilterCheckboxItemProps) {
   return (
     <div
       className={cn(
         'flex items-center gap-3 border-b border-ods-border bg-ods-card last:border-b-0',
-        'cursor-pointer transition-colors hover:bg-ods-bg-hover',
+        disabled ? 'cursor-wait opacity-70' : 'cursor-pointer transition-colors hover:bg-ods-bg-hover',
         count !== undefined ? 'px-4 py-3' : 'p-3',
         className,
       )}
-      onClick={() => onChange(!checked)}
+      onClick={() => !disabled && onChange(!checked)}
     >
       <CheckboxPrimitive.Root
         checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
         onCheckedChange={c => onChange(c === true)}
         className={cn(
           'h-6 w-6 shrink-0 rounded-[6px] border-2',
@@ -37,7 +53,7 @@ export function FilterCheckboxItem({ label, checked, onChange, count, className
           <CheckboxCheckmarkIcon size={10} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <span className="flex-1 text-ods-text-primary text-h4">{label}</span>
+      <span className="min-w-0 flex-1 text-ods-text-primary text-h4">{label}</span>
       {count !== undefined && (
         <span className="shrink-0 text-ods-text-secondary text-h5">{count.toLocaleString()}</span>
       )}

package/src/components/ui/layout-hold.tsx

@@ -1,5 +1,8 @@
-import type { ReactNode } from 'react';
+'use client';
+
+import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
+import { SkeletonText } from './skeleton';
 
 /**
  * Holding a layout while its content is read, the two ways that are right at
@@ -10,7 +13,8 @@ import { cn } from '../../utils/cn';
  *
  * - `TextHold`: an inline stand-in exactly as wide as the words it is given
  *   (same font, same letter spacing, because it IS those words, not shown).
- *   `bar` draws it as a pulsing grey bar; `blank` only keeps its space.
+ *   `bar` draws a `SkeletonText` of as many lines as the words take; `blank`
+ *   only keeps their space.
  * - `LayoutHold`: a block as tall as the real layout rendered inside it, kept
  *   invisible and inert: the layout's own height, at any width.
  *
@@ -19,27 +23,51 @@ import { cn } from '../../utils/cn';
 export interface TextHoldProps {
   /** The words whose width is held (the content's own, or a stand-in of its length). */
   children: ReactNode;
-  /** `bar`: a pulsing grey bar of that width. `blank`: the width only. */
+  /** `bar`: a `SkeletonText` of as many lines as the words take. `blank`: the space only. */
   variant?: 'bar' | 'blank';
   className?: string;
 }
 
 export function TextHold({ children, variant = 'bar', className }: TextHoldProps) {
+  const hold = useRef<HTMLSpanElement>(null);
+  const words = useRef<HTMLSpanElement>(null);
+  const lines = useLineCount(hold, words, variant === 'bar');
   return (
     <span
+      ref={hold}
       aria-hidden
-      className={cn(
-        variant === 'bar' ? 'animate-pulse rounded bg-ods-border text-transparent' : 'invisible',
-        // A hold is never selectable or clickable, whatever it wraps.
-        'pointer-events-none select-none',
-        className,
-      )}
+      className={cn('pointer-events-none select-none', variant === 'bar' && 'relative inline-block', className)}
     >
-      {children}
+      <span ref={words} className="invisible">
+        {children}
+      </span>
+      {lines > 0 ? (
+        // `justify-around`: each `Skeleton` sits in the middle of the line it stands for.
+        <SkeletonText lines={lines} className="absolute inset-0 flex flex-col justify-around space-y-0" />
+      ) : null}
     </span>
   );
 }
 
+/** How many lines the words take (one box per line), kept current as the width changes. */
+function useLineCount(
+  hold: RefObject<HTMLSpanElement | null>,
+  words: RefObject<HTMLSpanElement | null>,
+  enabled: boolean,
+): number {
+  const [lines, setLines] = useState(0);
+  useLayoutEffect(() => {
+    const box = hold.current;
+    if (!enabled || !box) return undefined;
+    const measure = () => setLines(words.current?.getClientRects().length ?? 0);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [hold, words, enabled]);
+  return lines;
+}
+
 export interface LayoutHoldProps {
   /** The real layout, rendered with the data at hand. */
   children: ReactNode;

package/src/components/unified-filter-logic.tsx

@@ -397,7 +397,7 @@ export function useUnifiedFiltering(config: FilterConfig) {
   };
 }
 
-import { formatClassification, formatPricingModel } from '../utils/format-text-stub';
+import { formatClassification, formatPricingModel } from '../utils/format';
 
 // Helper functions for filter labels
 function getFilterLabel(filterKey: string): string {

package/src/components/vendor-tag.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { Boxes, Code, Database, DollarSign, Hand, Plug, ShieldCheck, Sparkles } from 'lucide-react';
+import { Boxes, Database, DollarSign, Hand, Plug, ShieldCheck, Sparkles } from 'lucide-react';
+import { createElement, type ReactNode } from 'react';
 import { cn } from '../utils/cn';
-import {
-  OPENFRAME_CLASSIFICATIONS,
-  isOpenFrameClassification,
-  type OpenFrameClassification,
-} from '../utils/vendor-classification';
-import { OpenframeLogoIcon } from './icons-v2-generated/logos/openframe-logo-icon';
+import { formatClassification } from '../utils/format';
+import { type VendorClassificationIconConfig, vendorClassificationCopy } from '../utils/vendor-classification';
+import { resolveIcon } from './chat/utils/icon-library';
 
 export interface VendorTagProps {
   type:
@@ -36,12 +34,69 @@ export interface VendorTagProps {
   accentColor?: string;
 }
 
-/** An OpenFrame classification: the OpenFrame mark and its one word ("Selected", "Connect"). */
-function openFrameTag(classification: OpenFrameClassification, text?: string) {
+const TONE_CLASS: Readonly<Record<VendorClassificationIconConfig['tone'], string>> = {
+  accent: 'text-ods-text-on-accent',
+  neutral: 'text-ods-text-secondary',
+  warning: 'text-ods-warning',
+};
+
+/**
+ * A classification's icon, from its config (`VENDOR_CLASSIFICATION_COPY[value].icon`): the
+ * icon is resolved by NAME through the shared resolver, never imported here. A license icon
+ * sits on a small tile (the accent tile for an `accent` tone); an OpenFrame mark and a
+ * lifecycle icon are drawn bare in their tone. A value with no icon draws nothing.
+ */
+export function VendorClassificationIcon({
+  classification,
+  accentColor,
+  className,
+}: {
+  classification: string;
+  /** The accent tile's colour, for a host that tints its hover accent (a vendor card). */
+  accentColor?: string;
+  className?: string;
+}) {
+  const copy = vendorClassificationCopy(classification);
+  if (!copy?.icon) return null;
+  // The resolver returns one component per name, loaded on demand (drawn through `createElement`, as `NamedIcon` does).
+  const icon = resolveIcon(copy.icon.name);
+  if (copy.group !== 'license') {
+    const bareClass = copy.icon.tone === 'accent' ? 'text-ods-accent' : TONE_CLASS[copy.icon.tone];
+    return createElement(icon, {
+      size: copy.group === 'openframe' ? 16 : 12,
+      className: cn('shrink-0', bareClass, className),
+    });
+  }
+  const accent = copy.icon.tone === 'accent';
+  return (
+    <div
+      className={cn(
+        'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm',
+        accent ? 'bg-ods-accent' : 'bg-ods-border',
+        className,
+      )}
+      style={accent && accentColor ? { backgroundColor: accentColor } : undefined}
+    >
+      {createElement(icon, { size: 10, className: TONE_CLASS[copy.icon.tone] })}
+    </div>
+  );
+}
+
+/**
+ * A classification tag, derived from the value the server sends and its config: the label
+ * (an OpenFrame value's one word), the configured icon, and the warning text colour for a
+ * lifecycle value. Any other value is its title-cased label with no icon.
+ */
+function classificationTag(
+  value: string,
+  text?: string,
+  accentColor?: string,
+): { text: string; icon: ReactNode; textColor?: string } {
+  const copy = vendorClassificationCopy(value);
   return {
-    text: text || OPENFRAME_CLASSIFICATIONS[classification].word,
-    textColor: undefined,
-    icon: <OpenframeLogoIcon secondaryColor="currentColor" color="currentColor" className="h-4 w-4 text-ods-accent" />,
+    text: text || (copy?.group === 'openframe' ? copy.word : undefined) || copy?.label || formatClassification(value),
+    textColor: copy?.group === 'lifecycle' ? 'text-ods-warning' : undefined,
+    icon: <VendorClassificationIcon classification={value} accentColor={accentColor} />,
   };
 }
 
@@ -53,7 +108,7 @@ export function VendorTag({ type, text, className = '', hidden = false, size = '
   );
 
   // Get display text and styling based on type
-  const getTagContent = () => {
+  const getTagContent = (): { text: string; icon: ReactNode; textColor?: string } => {
     switch (type) {
       case 'placeholder':
         return {
@@ -86,26 +141,9 @@ export function VendorTag({ type, text, className = '', hidden = false, size = '
           ),
         };
       case 'open-source':
-        return {
-          text: text || 'Open Source',
-          icon: (
-            <div
-              className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-accent"
-              style={accentColor ? { backgroundColor: accentColor } : undefined}
-            >
-              <Code width={10} height={10} className="text-ods-text-on-accent" />
-            </div>
-          ),
-        };
+        return classificationTag('open_source', text, accentColor);
       case 'commercial':
-        return {
-          text: text || 'Commercial Vendor',
-          icon: (
-            <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-border">
-              <DollarSign width={10} height={10} className="text-ods-text-secondary" />
-            </div>
-          ),
-        };
+        return classificationTag('commercial', text);
       // platform-capability tags — same neutral icon-box chrome as 'commercial'
       case 'api':
         return {
@@ -188,46 +226,12 @@ export function VendorTag({ type, text, className = '', hidden = false, size = '
             </div>
           ),
         };
-      case 'classification': {
-        // Handle specific classification types based on the text value
-        const classificationType = text?.toLowerCase();
-
-        if (classificationType === 'open_source') {
-          return {
-            text: 'Open Source',
-            icon: (
-              <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-accent">
-                <Code width={10} height={10} className="text-ods-text-on-accent" />
-              </div>
-            ),
-          };
-        } else if (classificationType === 'commercial') {
-          return {
-            text: 'Commercial Vendor',
-            icon: (
-              <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-border">
-                <DollarSign width={10} height={10} className="text-ods-text-secondary" />
-              </div>
-            ),
-          };
-        } else if (isOpenFrameClassification(classificationType)) {
-          return openFrameTag(classificationType);
-        } else {
-          // Fallback for unknown classification types
-          return {
-            text: text || 'Classification',
-            icon: (
-              <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-accent">
-                <span className="text-[8px] font-bold text-ods-text-on-accent">C</span>
-              </div>
-            ),
-          };
-        }
-      }
+      case 'classification':
+        return classificationTag((text ?? '').toLowerCase(), undefined, accentColor);
       case 'openframe_selected':
       case 'openframe_connect':
       case 'openframe_shipped':
-        return openFrameTag(type, text);
+        return classificationTag(type, text);
       default:
         return {
           text: text || type,

package/src/utils/format.ts

@@ -3,7 +3,7 @@
  */
 
 import type { ProgramInstant } from './program-instant';
-import { OPENFRAME_CLASSIFICATIONS, isOpenFrameClassification } from './vendor-classification';
+import { vendorClassificationCopy } from './vendor-classification';
 
 /**
  * Format a date to a human-readable string
@@ -941,8 +941,7 @@ export function stripHtml(html: string): string {
  * curated mapping.
  */
 export function formatClassification(classification: string): string {
-  if (isOpenFrameClassification(classification)) return OPENFRAME_CLASSIFICATIONS[classification].label;
-  return formatUnderscoreText(classification);
+  return vendorClassificationCopy(classification)?.label ?? formatUnderscoreText(classification);
 }
 
 /**

package/src/utils/index.ts

@@ -21,13 +21,15 @@ export * from './ai-providers';
 export * from './model-token-rates';
 export { TRIAL_TERMS, trialLabels, trialLengthLabel } from './trial';
 export {
-  VENDOR_CLASSIFICATIONS,
-  OPENFRAME_CLASSIFICATIONS,
-  isVendorClassification,
+  VENDOR_CLASSIFICATION_COPY,
+  vendorClassificationCopy,
+  vendorClassificationGroup,
+  compareVendorClassifications,
   isOpenFrameClassification,
   type VendorClassificationValue,
-  type OpenFrameClassification,
-  type OpenFrameClassificationCopy,
+  type VendorClassificationGroup,
+  type VendorClassificationCopy,
+  type VendorClassificationIconConfig,
 } from './vendor-classification';
 // SVG path constants — re-exported here (server-safe) because icons-v2 has "use client"
 export { PLAY_ICON_PATH } from '../components/icons-v2-generated/media-playback/play-icon';