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

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';

package/src/utils/vendor-classification.ts

@@ -1,59 +1,138 @@
 /**
- * Vendor classifications: the ONE vocabulary of `vendor_classification.classification`.
+ * Vendor classifications: whatever `vendor_classification.classification` holds on the
+ * server. The database owns the vocabulary (its CHECK constraint is the list), the catalog
+ * builds its filters from the rows that exist, and nothing here limits which values are valid.
  *
- * A vendor may carry several (an OpenFrame product is `open_source` and
- * `openframe_selected`). The two OpenFrame ones are drawn with the OpenFrame
- * mark and ONE word, everywhere: a tag on a card, a filter in the catalog.
+ * This module only ENRICHES the values we want to present specially: a curated label, a
+ * tooltip description and a group. A value with no entry still works everywhere, labelled
+ * by title case. To present a new value better, add an entry here; to make it exist, add it
+ * to the database.
  *
- *   - `openframe_selected`: a tool OpenFrame is built on, picked by the team.
- *   - `openframe_shipped`: a tool or OpenFrame product that is in the released product today.
- *   - `openframe_connect`: a service OpenFrame connects to and manages.
+ * Groups:
+ *   - `license`: how the software is licensed.
+ *   - `lifecycle`: where the product is in its life (a tag and a filter; a card's one tag stays the license).
+ *   - `openframe`: drawn with the OpenFrame mark and ONE word (`word`).
  */
-export const VENDOR_CLASSIFICATIONS = [
-  'open_source',
-  'commercial',
-  'openframe_selected',
-  'openframe_shipped',
-  'openframe_connect',
-] as const;
-
-export type VendorClassificationValue = (typeof VENDOR_CLASSIFICATIONS)[number];
-
-export type OpenFrameClassification = Extract<VendorClassificationValue, `openframe_${string}`>;
-
-export interface OpenFrameClassificationCopy {
-  /** The word drawn beside the OpenFrame mark. */
-  word: string;
-  /** The full name, for plain-text surfaces (a select option, an aria label). */
+export type VendorClassificationValue = string;
+
+export type VendorClassificationGroup = 'license' | 'lifecycle' | 'openframe';
+
+export interface VendorClassificationCopy {
+  /** The label on a tag, a filter and a plain-text surface. */
   label: string;
   /** What the classification means, for a tooltip. */
   description: string;
+  group: VendorClassificationGroup;
+  /** OpenFrame group only: the one word drawn beside the OpenFrame mark. */
+  word?: string;
+  /** The icon drawn beside the label, by name (resolved by the shared icon resolver), and its tone. */
+  icon?: VendorClassificationIconConfig;
+}
+
+/**
+ * A classification's icon, as data: `name` is any name the shared resolver knows (an alias such
+ * as `openframe-logo`, an icon of the design set by its kebab name, or a lucide name). `tone`:
+ * `accent` (the brand colour), `neutral` (secondary text on a tile) or `warning`.
+ */
+export interface VendorClassificationIconConfig {
+  name: string;
+  tone: 'accent' | 'neutral' | 'warning';
 }
 
-export const OPENFRAME_CLASSIFICATIONS: Record<OpenFrameClassification, OpenFrameClassificationCopy> = {
+/** In display order: a filter list shows OpenFrame first, then license, then lifecycle. */
+export const VENDOR_CLASSIFICATION_COPY: Readonly<Record<string, VendorClassificationCopy>> = {
   openframe_selected: {
-    word: 'Selected',
     label: 'OpenFrame Selected',
+    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',
+    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',
+  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:
-      'Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets.',
+      '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' },
   },
 };
 
-export function isVendorClassification(value: string): value is VendorClassificationValue {
-  return (VENDOR_CLASSIFICATIONS as readonly string[]).includes(value);
+/** The enrichment of a classification, or undefined for a value we do not present specially. */
+export function vendorClassificationCopy(value: string | null | undefined): VendorClassificationCopy | undefined {
+  if (!value || !Object.prototype.hasOwnProperty.call(VENDOR_CLASSIFICATION_COPY, value)) return undefined;
+  return VENDOR_CLASSIFICATION_COPY[value];
+}
+
+/** The group of a classification, or undefined for a value with no enrichment. */
+export function vendorClassificationGroup(value: string | null | undefined): VendorClassificationGroup | undefined {
+  return vendorClassificationCopy(value)?.group;
+}
+
+/** A classification drawn with the OpenFrame mark (it has a `word`). */
+export function isOpenFrameClassification(value: string | null | undefined): boolean {
+  return vendorClassificationGroup(value) === 'openframe';
 }
 
-export function isOpenFrameClassification(value: string | null | undefined): value is OpenFrameClassification {
-  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+const DISPLAY_ORDER = Object.keys(VENDOR_CLASSIFICATION_COPY);
+
+/**
+ * Sort order for a list of classifications (a filter list): the enriched values in their
+ * display order (OpenFrame Selected, Connect, Shipped, then license, then lifecycle), then
+ * every other value the server holds, alphabetically.
+ */
+export function compareVendorClassifications(a: string, b: string): number {
+  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);
 }

package/dist/utils/format-text-stub.d.ts

@@ -1,5 +0,0 @@
-export declare function formatText(text: string): string;
-export declare function truncateText(text: string, maxLength: number): string;
-export declare function formatClassification(classification: string): string;
-export declare function formatPricingModel(pricing: string): string;
-//# sourceMappingURL=format-text-stub.d.ts.map

package/dist/utils/format-text-stub.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"format-text-stub.d.ts","sourceRoot":"","sources":["../../src/utils/format-text-stub.ts"],"names":[],"mappings":"AACA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGpE;AAED,wBAAgB,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE1D"}

package/dist/utils/format-text-stub.js

@@ -1,20 +0,0 @@
-"use client";
-function formatText(text) {
-  return text;
-}
-function truncateText(text, maxLength) {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + "...";
-}
-function formatClassification(classification) {
-  return classification.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-function formatPricingModel(pricing) {
-  return pricing.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-export {
-  formatClassification,
-  formatPricingModel,
-  formatText,
-  truncateText
-};

package/src/utils/format-text-stub.ts

@@ -1,17 +0,0 @@
-// Stub for format-text utilities
-export function formatText(text: string): string {
-  return text;
-}
-
-export function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + '...';
-}
-
-export function formatClassification(classification: string): string {
-  return classification.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-}
-
-export function formatPricingModel(pricing: string): string {
-  return pricing.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-}