@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/dist/chunk-IYVFSLWJ.js

@@ -0,0 +1,931 @@
+"use client";
+import {
+  next_image_default
+} from "./chunk-FBZMAPWO.js";
+import {
+  useAuthedImageSrc,
+  useIsTruncated
+} from "./chunk-ADBE7QF3.js";
+import {
+  XmarkCircleIcon
+} from "./chunk-NCPTID44.js";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/components/ui/floating-tooltip.tsx
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  size,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingPortal,
+  useHover,
+  safePolygon,
+  arrow
+} from "@floating-ui/react";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function parseColoredText(text) {
+  if (typeof text !== "string") return text;
+  const parts = [];
+  let lastIndex = 0;
+  const colorRegex = /\[([A-Z]+)\](.*?)\[\/\1\]/g;
+  let match;
+  let keyIndex = 0;
+  while ((match = colorRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      const beforeText = text.slice(lastIndex, match.index);
+      parts.push(/* @__PURE__ */ jsx("span", { children: beforeText }, `text-${keyIndex++}`));
+    }
+    const color = match[1].toLowerCase();
+    const coloredText = match[2];
+    const colorClass = color === "yellow" ? "text-ods-accent" : color === "green" ? "text-ods-success" : color === "red" ? "text-ods-error" : color === "blue" ? "text-ods-info" : color === "pink" ? "text-ods-accent" : color === "cyan" ? "text-ods-info" : "text-ods-accent";
+    parts.push(
+      /* @__PURE__ */ jsx("span", { className: cn("font-semibold", colorClass), children: coloredText }, `color-${keyIndex++}`)
+    );
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    const remainingText = text.slice(lastIndex);
+    parts.push(/* @__PURE__ */ jsx("span", { children: remainingText }, `text-${keyIndex++}`));
+  }
+  return parts.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: parts }) : text;
+}
+function FloatingTooltip({
+  content,
+  children,
+  side = "right",
+  className,
+  delayDuration = 0,
+  disabled = false,
+  triggerClassName,
+  as: TriggerTag = "div"
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [arrowEl, setArrowEl] = useState(null);
+  const { refs, floatingStyles, context, placement, middlewareData } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: side,
+    middleware: [
+      offset(12),
+      flip({
+        fallbackAxisSideDirection: "start",
+        crossAxis: false,
+        padding: 8
+      }),
+      shift({ padding: 8 }),
+      // Cap the tooltip to the space left in the viewport so tall content
+      // scrolls inside it instead of overflowing off-screen. Applied straight to
+      // the floating node's style (no React state → no autoUpdate re-render loop);
+      // the inner scroll wrapper below turns the cap into an actual scroll area.
+      size({
+        padding: 8,
+        apply({ availableHeight, elements }) {
+          const floatingEl = elements.floating;
+          floatingEl.style.maxHeight = `${Math.max(64, availableHeight)}px`;
+        }
+      }),
+      arrow({ element: arrowEl })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const hover = useHover(context, {
+    move: false,
+    enabled: !disabled,
+    delay: { open: delayDuration, close: 0 },
+    handleClose: safePolygon()
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role]);
+  const { setReference, setFloating } = refs;
+  const parsedContent = useMemo(() => {
+    if (typeof content === "string") {
+      return parseColoredText(content);
+    }
+    return content;
+  }, [content]);
+  const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {};
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[placement.split("-")[0]];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TriggerTag, { ref: setReference, className: triggerClassName, ...getReferenceProps(), children }),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setFloating,
+        style: {
+          ...floatingStyles,
+          zIndex: 2147483647
+        },
+        ...getFloatingProps(),
+        className: cn(
+          // ODS Design System tooltip styling. `flex flex-col` + `overflow-hidden`
+          // let the inner wrapper own the scroll while the rounded corners clip it.
+          "flex max-w-xs flex-col overflow-hidden rounded-md",
+          "border border-ods-border bg-ods-card",
+          // ODS shadows for proper elevation
+          "shadow-[var(--shadow-md)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-y-auto whitespace-pre-line px-3 py-2.5 text-ods-text-primary text-h6", children: parsedContent }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setArrowEl,
+              style: {
+                left: arrowX != null ? `${arrowX}px` : "",
+                top: arrowY != null ? `${arrowY}px` : "",
+                ...staticSide && { [staticSide]: "-4px" }
+              },
+              className: cn("absolute h-2 w-2 rotate-45", "border-ods-border bg-ods-card", {
+                "border-b border-r": staticSide === "left",
+                "border-r border-t": staticSide === "bottom",
+                // `right` and `top` were separate keys spelling the same two
+                // classes in different order ('border-l border-b' vs
+                // 'border-b border-l'); sorting collapsed them into a duplicate
+                // key, which would have dropped the `right` branch entirely.
+                // Merged to keep the emitted CSS identical to before.
+                // NOTE: that both sides ever wanted the same border pair looks
+                // like a latent bug — worth a designer's eye. (2026-08-24)
+                "border-b border-l": staticSide === "right" || staticSide === "top"
+              })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/ui/tag.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var tagVariants = cva(["inline-flex items-center justify-center rounded-md", "transition-colors duration-150"], {
+  variants: {
+    // Chip scale. `default` is the classic 32px mono-uppercase tag; `large`
+    // is the Figma "Feature Item" chip (48px, h3 bold body label) used by
+    // chip groups acting as tabs (OpenFrame categories).
+    size: {
+      default: "h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)] text-h5",
+      large: "h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)] font-bold text-h3",
+      // A sentence, not a label: body type in the case it was written in (a
+      // question a visitor can ask), on the same chip surface. One line, always:
+      // a longer sentence clips and shows whole in the label's tooltip.
+      sentence: "h-9 gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-h6"
+    },
+    variant: {
+      primary: ["bg-ods-accent text-ods-text-on-accent", "hover:bg-ods-accent-hover active:bg-ods-accent-active"],
+      outline: [
+        "border border-ods-border bg-ods-card text-ods-text-primary",
+        "hover:border-ods-border-hover hover:bg-ods-bg-hover",
+        "active:border-ods-border-active active:bg-ods-bg-active"
+      ],
+      success: [
+        "bg-ods-success-secondary text-ods-success",
+        "hover:bg-ods-success-secondary-hover active:bg-ods-success-secondary-active"
+      ],
+      warning: [
+        "bg-ods-warning-secondary text-ods-warning",
+        "hover:bg-ods-warning-secondary-hover active:bg-ods-warning-secondary-active"
+      ],
+      error: [
+        "bg-ods-error-secondary text-ods-error",
+        "hover:bg-ods-error-secondary-hover active:bg-ods-error-secondary-active"
+      ],
+      critical: ["bg-ods-error text-ods-error-secondary", "hover:bg-ods-error-hover active:bg-ods-error-active"],
+      grey: [
+        "bg-ods-bg-surface text-ods-text-secondary",
+        "hover:bg-ods-bg-surface-hover active:bg-ods-bg-surface-active"
+      ],
+      // Active/selected chip state (Figma "Feature Item" active): pink
+      // border + pink-secondary fill. A dedicated variant (not appended
+      // utilities) so its own hover rules win — the outline variant's
+      // hover:bg/hover:border would otherwise repaint an active chip grey.
+      selected: [
+        "border border-ods-flamingo-pink bg-ods-flamingo-pink-secondary text-ods-text-primary",
+        "hover:border-ods-flamingo-pink hover:bg-ods-flamingo-pink-secondary-hover",
+        "active:bg-ods-flamingo-pink-secondary-active"
+      ],
+      // Cyan twin of `selected` (Mingo's accent) — same active-chip skin in the
+      // cyan theme so agent chip groups can match their own accent.
+      selectedCyan: [
+        "border border-ods-flamingo-cyan bg-ods-flamingo-cyan-secondary text-ods-text-primary",
+        "hover:border-ods-flamingo-cyan hover:bg-ods-flamingo-cyan-secondary-hover",
+        "active:bg-ods-flamingo-cyan-secondary-active"
+      ],
+      // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
+      // mono uppercase) so the tag-editor chips render identically to the public
+      // tag badges. Used for FilterChipData variant 'tag' (see search-input).
+      badge: [
+        "border border-ods-border bg-ods-card font-mono uppercase tracking-wide text-ods-text-primary",
+        "transition-colors hover:border-ods-accent"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "default"
+  }
+});
+var disabledTagClasses = [
+  "bg-ods-bg-surface text-ods-text-secondary",
+  "border-transparent",
+  "cursor-not-allowed",
+  "pointer-events-none"
+];
+function TagLabel({ label, labelClassName }) {
+  const isString = typeof label === "string";
+  const { ref, isTruncated } = useIsTruncated(isString ? label : null);
+  if (!isString) {
+    return /* @__PURE__ */ jsx2("span", { className: cn("truncate", labelClassName), children: label });
+  }
+  return /* @__PURE__ */ jsx2(
+    FloatingTooltip,
+    {
+      content: label,
+      side: "top",
+      disabled: !isTruncated,
+      as: "span",
+      triggerClassName: "min-w-0 max-w-full",
+      className: "max-w-xs whitespace-pre-line [overflow-wrap:anywhere]",
+      children: /* @__PURE__ */ jsx2("span", { ref, className: cn("block truncate", labelClassName), children: label })
+    }
+  );
+}
+function Tag({
+  label,
+  variant,
+  size: size2,
+  icon,
+  onClose,
+  className,
+  labelClassName,
+  disabled,
+  as: Comp = "div",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Comp,
+    {
+      className: cn(tagVariants({ variant, size: size2 }), disabled && disabledTagClasses, className),
+      "aria-disabled": disabled || void 0,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx2("span", { className: cn("flex shrink-0 items-center justify-center", size2 === "large" ? "size-6" : "size-5"), children: icon }),
+        /* @__PURE__ */ jsx2(TagLabel, { label, labelClassName }),
+        onClose && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity",
+              disabled ? "cursor-not-allowed" : "hover:opacity-100"
+            ),
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx2(XmarkCircleIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/utils/vendor-classification.ts
+var VENDOR_CLASSIFICATIONS = [
+  "open_source",
+  "commercial",
+  "openframe_selected",
+  "openframe_shipped",
+  "openframe_connect"
+];
+var OPENFRAME_CLASSIFICATIONS = {
+  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."
+  },
+  openframe_shipped: {
+    word: "Shipped",
+    label: "OpenFrame Shipped",
+    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap."
+  },
+  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."
+  }
+};
+function isVendorClassification(value) {
+  return VENDOR_CLASSIFICATIONS.includes(value);
+}
+function isOpenFrameClassification(value) {
+  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+}
+
+// src/utils/format.ts
+function formatDate(date, options = {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+}) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(dateObj.getTime())) {
+    console.warn("Invalid date provided to formatDate:", date);
+    return "Invalid Date";
+  }
+  return formatDateWithTimezone(dateObj, options.timeZone ?? null, options);
+}
+function formatNumber(num) {
+  return num.toLocaleString();
+}
+function formatPrice(price, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  }).format(price);
+}
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+function formatBytesShort(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function formatLargeNumber(num) {
+  if (num === 0) return "0";
+  const isNegative = num < 0;
+  const absNum = Math.abs(num);
+  let result;
+  if (absNum >= 1e9) {
+    result = `${Math.floor(absNum / 1e9)}B`;
+  } else if (absNum >= 1e6) {
+    result = `${Math.floor(absNum / 1e6)}M`;
+  } else if (absNum >= 1e3) {
+    result = `${Math.floor(absNum / 1e3)}K`;
+  } else {
+    result = Math.floor(absNum).toString();
+  }
+  return isNegative ? `-${result}` : result;
+}
+function formatAbbreviatedNumber(n) {
+  if (n >= 1e9) {
+    const value = n / 1e9;
+    return `${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1)}B`;
+  }
+  if (n >= 1e6) {
+    const value = n / 1e6;
+    return `${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1)}M`;
+  }
+  if (n >= 1e3) {
+    const value = n / 1e3;
+    return `${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1)}K`;
+  }
+  return n.toLocaleString();
+}
+function nameInitials(name, fallback = "E", options = {}) {
+  const { maxLetters = 2, pick: mode = "all" } = options;
+  const source = typeof name === "string" ? name.trim() : "";
+  const words = source.length > 0 ? source.split(/\s+/).filter(Boolean) : [];
+  const chosen = mode === "first-last" && words.length > 1 ? [words[0], words[words.length - 1]] : words.slice(0, maxLetters);
+  const letters = chosen.map((w) => w[0]).filter(Boolean).slice(0, maxLetters).join("");
+  return (letters || fallback).toUpperCase();
+}
+function personInitials(name) {
+  return nameInitials(name, "", { pick: "first-last" });
+}
+function personFirstName(name, fallback = null) {
+  const first = (typeof name === "string" ? name.trim() : "").split(/\s+/)[0];
+  return first || fallback;
+}
+function singleInitial(name) {
+  return nameInitials(name, "?", { maxLetters: 1 });
+}
+function formatDurationMMSS(seconds) {
+  if (!seconds) return "";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+function formatDurationCompact(seconds) {
+  if (!seconds) return "";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  if (hours > 0) {
+    return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m`;
+  }
+  return `${minutes} min`;
+}
+var VIEWER_TIMEZONE = "viewer";
+var ZONED_DATE_STYLES = {
+  /** Mar 19, 2026 */
+  medium: { year: "numeric", month: "short", day: "numeric" },
+  /** Thursday, March 19 */
+  weekday: { weekday: "long", day: "numeric", month: "long" },
+  /** March 19, 2026 */
+  long: { year: "numeric", month: "long", day: "numeric" },
+  /** 03/19/2026 */
+  numeric: { year: "numeric", month: "2-digit", day: "2-digit" },
+  /** March 2026 */
+  monthYear: { year: "numeric", month: "long" },
+  /** Mar 2026 */
+  monthYearShort: { year: "numeric", month: "short" },
+  /** 03/19/2026, 9:18 PM */
+  numericDateTime: {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  },
+  /** Mar 19, 2026, 9:18 PM */
+  mediumDateTime: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" },
+  /** Thursday, March 19 at 9:18 PM EDT */
+  weekdayDateTimeZoned: {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  },
+  /** Thu, Mar 19, 9:18 PM */
+  shortWeekdayDateTime: { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" },
+  /** 03/19/2026, 21:18 */
+  numericDateTime24h: {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  },
+  /** 3/19/2026, 9:18:00 PM — the runtime's own default date-time shape */
+  localeDateTime: {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit"
+  }
+};
+var FORMATTERS = /* @__PURE__ */ new Map();
+function zonedFormatter(locale, fields, timeZone) {
+  const key = JSON.stringify([locale ?? null, timeZone ?? null, fields]);
+  let fmt = FORMATTERS.get(key);
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locale, { ...fields, timeZone });
+    FORMATTERS.set(key, fmt);
+  }
+  return fmt;
+}
+function formatterFor(timezone, fields, locale) {
+  const zone = timezone === VIEWER_TIMEZONE ? void 0 : timezone || "UTC";
+  try {
+    return zonedFormatter(locale, fields, zone);
+  } catch {
+    return zonedFormatter(locale, fields, "UTC");
+  }
+}
+function toValidDate(date) {
+  if (date === null || date === void 0 || date === "") return null;
+  const d = date instanceof Date ? date : new Date(date);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function formatDateWithTimezone(date, timezone, style = "medium", options) {
+  const dateObj = toValidDate(date);
+  if (!dateObj) return "";
+  const { timeZone: _ignored, ...fields } = typeof style === "string" ? ZONED_DATE_STYLES[style] : style;
+  return formatterFor(timezone, fields, options?.viewerLocale ? void 0 : "en-US").format(dateObj);
+}
+function formatDateTimeYmd(date, timezone, options) {
+  const dateObj = toValidDate(date);
+  if (!dateObj) return "";
+  const parts = formatterFor(
+    timezone,
+    { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" },
+    "en-US"
+  ).formatToParts(dateObj);
+  const part = (type) => parts.find((p) => p.type === type)?.value ?? "";
+  return `${part("year")}/${part("month")}/${part("day")}${options?.separator ?? ", "}${part("hour")}:${part("minute")}`;
+}
+function formatTimeWithTimezone(date, timezone, options) {
+  return formatDateWithTimezone(
+    date,
+    timezone,
+    {
+      hour: "numeric",
+      minute: "2-digit",
+      // A viewer-locale clock uses the locale's own 12/24h convention.
+      ...options?.viewerLocale ? {} : { hour12: true },
+      ...options?.withZoneLabel ? { timeZoneName: "short" } : {}
+    },
+    { viewerLocale: options?.viewerLocale }
+  );
+}
+function formatProgramDate(at, style = "medium") {
+  return formatDateWithTimezone(at.instant ?? at.utcDate, at.timezone, style);
+}
+function formatProgramDateRange(at, end) {
+  const start = toValidDate(at.instant ?? at.utcDate);
+  const ends = end ? toValidDate(end) : null;
+  if (!start || !ends || ends.getTime() <= start.getTime()) return null;
+  const finish = new Date(ends.getTime() - 1);
+  const formatter = formatterFor(at.timezone, { year: "numeric", month: "short", day: "numeric" }, "en-US");
+  const partsOf = (date) => {
+    const parts = formatter.formatToParts(date);
+    const part = (type) => parts.find((p) => p.type === type)?.value ?? "";
+    return { month: part("month"), day: part("day"), year: part("year") };
+  };
+  const from = partsOf(start);
+  const to = partsOf(finish);
+  if (from.year !== to.year) return `${from.month} ${from.day}, ${from.year} \u2013 ${to.month} ${to.day}, ${to.year}`;
+  if (from.month !== to.month) return `${from.month} ${from.day} \u2013 ${to.month} ${to.day}, ${to.year}`;
+  if (from.day === to.day) return null;
+  return `${from.month} ${from.day} \u2013 ${to.day}, ${to.year}`;
+}
+function isOrderedRange(from, to) {
+  if (!from || !to) return false;
+  const a = (typeof from === "string" ? new Date(from) : from).getTime();
+  const b = (typeof to === "string" ? new Date(to) : to).getTime();
+  return Number.isFinite(a) && Number.isFinite(b) && b > a;
+}
+function formatDurationFromRange(startAt, endAt) {
+  if (!isOrderedRange(startAt, endAt)) return "";
+  const start = typeof startAt === "string" ? new Date(startAt) : startAt;
+  const end = typeof endAt === "string" ? new Date(endAt) : endAt;
+  const minutes = Math.round((end.getTime() - start.getTime()) / 6e4);
+  if (minutes <= 0) return "";
+  if (minutes >= 60) {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+  }
+  return `${minutes}m`;
+}
+function formatDateUTC(value, options = {}) {
+  const { fallback = "N/A", timezone = "UTC" } = options;
+  if (value === null || value === void 0 || value === "") return fallback;
+  let ms;
+  if (typeof value === "number") {
+    ms = value;
+  } else {
+    const n = Number(value);
+    if (Number.isFinite(n) && n > 0 && /^-?\d+(\.\d+)?$/.test(value.trim())) {
+      ms = n;
+    } else {
+      ms = Date.parse(value.includes("T") ? value : value + "T00:00:00Z");
+    }
+  }
+  if (!Number.isFinite(ms)) return fallback;
+  return formatDateWithTimezone(ms, timezone === "local" ? VIEWER_TIMEZONE : null, "medium");
+}
+function formatEntryMonthUTC(entryMonth, style = "short") {
+  if (!entryMonth) return null;
+  return formatDateWithTimezone(entryMonth, null, style === "long" ? "monthYear" : "monthYearShort");
+}
+function formatLegalDate(dateInput) {
+  return formatDateWithTimezone(dateInput, null, "numeric");
+}
+function formatCurrency(value) {
+  if (value == null) return "N/A";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function formatPercent(value) {
+  if (value == null) return "N/A";
+  return `${value.toFixed(2)}%`;
+}
+function formatWholeDollars(price, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 0
+  }).format(price);
+}
+function formatCompactMetric(value, format = "number", options) {
+  if (value === 0 || value === null || value === void 0) {
+    if (format === "currency") return `${options?.prefix || "$"}0`;
+    if (format === "percentage") return "0%";
+    if (format === "months") return `0 ${options?.suffix || "months"}`;
+    return "0";
+  }
+  const absValue = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (format === "currency") {
+    const prefix = options?.prefix || "$";
+    const compact = (val, divisor, suffix) => {
+      const divided = val / divisor;
+      const formatted = divided % 1 === 0 ? divided.toFixed(0) : divided.toFixed(1);
+      return `${sign}${prefix}${formatted}${suffix}`;
+    };
+    if (absValue >= 1e9) return compact(absValue, 1e9, "B");
+    if (absValue >= 1e6) return compact(absValue, 1e6, "M");
+    if (absValue >= 1e3) return `${sign}${prefix}${(absValue / 1e3).toFixed(0)}K`;
+    return `${sign}${prefix}${absValue.toLocaleString()}`;
+  }
+  if (format === "percentage") {
+    return `${sign}${absValue}%`;
+  }
+  if (format === "months") {
+    const rounded = Math.round(value * 10) / 10;
+    return `${rounded} ${options?.suffix || "months"}`;
+  }
+  if (absValue >= 1e6) return `${sign}${(absValue / 1e6).toFixed(1)}M`;
+  if (absValue >= 1e3) return `${sign}${(absValue / 1e3).toFixed(1)}K`;
+  return value.toLocaleString();
+}
+function getTrendColors(direction, polarity = "positive") {
+  if (direction === "neutral" || polarity === "neutral") {
+    return {
+      textClass: "text-ods-text-secondary",
+      badgeClass: "bg-ods-border text-ods-text-secondary"
+    };
+  }
+  const isPositiveOutcome = direction === "up" && polarity === "positive" || direction === "down" && polarity === "negative";
+  if (isPositiveOutcome) {
+    return {
+      textClass: "text-ods-success",
+      badgeClass: "bg-ods-success-secondary text-ods-success"
+    };
+  }
+  return {
+    textClass: "text-ods-error",
+    badgeClass: "bg-ods-error-secondary text-ods-error"
+  };
+}
+function formatDateRange(start, end) {
+  if (!start || !end) return "";
+  const fmt = (s) => formatDateWithTimezone(s, /^\d{4}-\d{2}-\d{2}$/.test(s) ? null : VIEWER_TIMEZONE, "medium") || s;
+  return `${fmt(start)} \u2014 ${fmt(end)}`;
+}
+function formatDateTimeAt(dateString) {
+  const dateStr = formatDateWithTimezone(dateString, VIEWER_TIMEZONE, "medium");
+  const timeStr = formatTimeWithTimezone(dateString, VIEWER_TIMEZONE);
+  return dateStr && timeStr ? `${dateStr} at ${timeStr}` : "";
+}
+function formatDurationFromMs(ms) {
+  if (!ms || isNaN(ms) || ms < 0) return "0ms";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds} seconds`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes`;
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  if (minutes === 0) return `${hours} hour${hours > 1 ? "s" : ""}`;
+  return `${hours} hour${hours > 1 ? "s" : ""} ${minutes} minute${minutes > 1 ? "s" : ""}`;
+}
+function titleCaseFromSlug(text, separator = "-") {
+  return text.split(separator).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function formatUnderscoreText(text) {
+  return titleCaseFromSlug(text, "_");
+}
+function stripHtml(html) {
+  let noTags = html;
+  let prev;
+  do {
+    prev = noTags;
+    noTags = noTags.replace(/<[^<>]*>/g, "");
+  } while (noTags !== prev);
+  return noTags.replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&apos;/g, "'").replace(/&amp;/g, "&").replace(/\s+/g, " ").trim();
+}
+function formatClassification(classification) {
+  if (isOpenFrameClassification(classification)) return OPENFRAME_CLASSIFICATIONS[classification].label;
+  return formatUnderscoreText(classification);
+}
+function formatPricingModel(pricingModel) {
+  const customMappings = {
+    one_time: "One-time Purchase",
+    self_hosted: "Self-hosted"
+  };
+  return customMappings[pricingModel] || formatUnderscoreText(pricingModel);
+}
+function formatBioText(aboutHtml, fallback = "") {
+  if (!aboutHtml || !aboutHtml.trim()) return fallback;
+  if (aboutHtml.includes("<p")) {
+    const paragraphs = aboutHtml.split(/<p[^<>]*>/).slice(1).map((part) => part.split("</p>")[0]).map((text) => stripHtml(text).trim()).filter((text) => text.length > 0);
+    if (paragraphs.length > 0) return paragraphs.join(" ");
+  }
+  return stripHtml(aboutHtml).trim() || fallback;
+}
+function formatProgramTimeRange(at, opts = {}) {
+  const source = at.instant ?? at.utcDate ?? opts.startAt;
+  const label = opts.withZoneLabel === true;
+  const bare = formatTimeWithTimezone(source, at.timezone);
+  const labelled = label ? formatTimeWithTimezone(source, at.timezone, { withZoneLabel: true }) : bare;
+  const ordered = isOrderedRange(source, opts.endAt);
+  const end = ordered && opts.endAt ? formatTimeWithTimezone(opts.endAt, at.timezone, { withZoneLabel: label }) : "";
+  if (!bare) return "";
+  return end ? `${bare} - ${end}` : labelled;
+}
+function formatWebinarTimeMeta(at, opts) {
+  const duration = formatDurationFromRange(opts.startAt, opts.endAt);
+  const time = formatProgramTimeRange(at, { startAt: opts.startAt, withZoneLabel: opts.withZoneLabel });
+  return [time, duration].filter(Boolean).join(" \xB7 ");
+}
+
+// src/components/ui/square-avatar.tsx
+import { memo, forwardRef } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SquareAvatar = memo(
+  forwardRef(
+    ({
+      className,
+      src,
+      alt,
+      size: size2 = "md",
+      sizePx,
+      fit = "cover",
+      fallback,
+      variant = "square",
+      initialsClassName,
+      style,
+      ...props
+    }, ref) => {
+      const resolvedSrc = useAuthedImageSrc(src);
+      const sizeClasses = {
+        // xs (24px): dense card meta rows — avatar stacks on delivery/
+        // roadmap cards. Part of the shared scale so no caller ever
+        // bypasses the buckets with raw sizePx for a standard size.
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16"
+      };
+      const sizePxBySize = {
+        xs: 24,
+        sm: 32,
+        md: 40,
+        lg: 48,
+        xl: 64
+      };
+      const variantClasses = {
+        square: "rounded-md",
+        round: "rounded-full"
+      };
+      return /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cn(
+            "relative flex shrink-0 items-center justify-center overflow-hidden border border-ods-border bg-ods-bg",
+            sizePx === void 0 && sizeClasses[size2],
+            variantClasses[variant],
+            className
+          ),
+          style: sizePx === void 0 ? style : { width: sizePx, height: sizePx, ...style },
+          ref,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: cn(
+                  // Initials default to `--color-text-primary` (the old
+                  // `text-ods-text-primary` value) so they stay readable on the default
+                  // `bg-ods-bg` AND on the brand accent fills (`bg-ods-flamingo-pink`
+                  // for the current user, `bg-ods-flamingo-cyan` for Mingo). The color
+                  // resolves through `--ods-avatar-initials` with that fallback, so a
+                  // host themed with a custom avatar fill can override the var with a
+                  // contrast-correct value (e.g. `getReadableTextColor(accent)`) WITHOUT
+                  // regressing any avatar that leaves the var unset. A caller passing
+                  // its own `initialsClassName` text color still wins (tailwind-merge
+                  // keeps the later class).
+                  "flex items-center justify-center text-xs font-medium text-[color:var(--ods-avatar-initials,var(--color-text-primary))]",
+                  initialsClassName,
+                  resolvedSrc && "hidden"
+                ),
+                children: personInitials(fallback || alt) || "?"
+              }
+            ),
+            resolvedSrc && /* @__PURE__ */ jsx3(
+              next_image_default,
+              {
+                className: cn(
+                  "absolute max-w-none",
+                  fit === "contain" ? (
+                    // A LOGO or crest must fit whole; cover would slice its edges.
+                    "inset-0 h-full w-full object-contain"
+                  ) : (
+                    // A portrait fills the frame; the 1px overscan hides edge seams.
+                    "-inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] object-cover"
+                  )
+                ),
+                draggable: false,
+                src: resolvedSrc,
+                alt: alt || "",
+                width: sizePx ?? sizePxBySize[size2],
+                height: sizePx ?? sizePxBySize[size2],
+                onError: (e) => {
+                  const img = e.currentTarget;
+                  img.style.display = "none";
+                  const el = img.previousElementSibling;
+                  if (el) el.classList.remove("hidden");
+                }
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+SquareAvatar.displayName = "SquareAvatar";
+
+export {
+  FloatingTooltip,
+  tagVariants,
+  Tag,
+  VENDOR_CLASSIFICATIONS,
+  OPENFRAME_CLASSIFICATIONS,
+  isVendorClassification,
+  isOpenFrameClassification,
+  formatDate,
+  formatNumber,
+  formatPrice,
+  formatBytes,
+  formatBytesShort,
+  formatFileSize,
+  formatLargeNumber,
+  formatAbbreviatedNumber,
+  nameInitials,
+  personInitials,
+  personFirstName,
+  singleInitial,
+  formatDurationMMSS,
+  formatDurationCompact,
+  VIEWER_TIMEZONE,
+  formatDateWithTimezone,
+  formatDateTimeYmd,
+  formatTimeWithTimezone,
+  formatProgramDate,
+  formatProgramDateRange,
+  isOrderedRange,
+  formatDurationFromRange,
+  formatDateUTC,
+  formatEntryMonthUTC,
+  formatLegalDate,
+  formatCurrency,
+  formatPercent,
+  formatWholeDollars,
+  formatCompactMetric,
+  getTrendColors,
+  formatDateRange,
+  formatDateTimeAt,
+  formatDurationFromMs,
+  formatDuration,
+  titleCaseFromSlug,
+  formatUnderscoreText,
+  stripHtml,
+  formatClassification,
+  formatPricingModel,
+  formatBioText,
+  formatProgramTimeRange,
+  formatWebinarTimeMeta,
+  SquareAvatar
+};