@flamingo-stack/openframe-frontend-core 0.0.730 → 0.0.732

package/dist/winget-logo-icon-GBS342G4.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkR4QMR6S4cjs = require('./chunk-R4QMR6S4.cjs');
+
+
+exports.WingetLogoIcon = _chunkR4QMR6S4cjs.WingetLogoIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.730",
+  "version": "0.0.732",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/agent-identity.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, type ReactNode } from 'react';
 import {
   AGENT_IDENTITIES_API_PATH,
   useAgentIdentities,
   type AgentIdentityIcon,
   type AgentIdentityIcons,
 } from '../hooks/use-agent-identities';
+import { HEX_PATTERN } from '../utils/ods-color-utils';
 
 export { AGENT_IDENTITIES_API_PATH, type AgentIdentityIcon, type AgentIdentityIcons };
 
@@ -107,3 +108,21 @@ export function useAgentIdentityIcon(slug: string | null | undefined): AgentIden
   }, [unprovided, slug]);
   return identities?.get(slug ?? '');
 }
+
+/**
+ * Each agent identity's accent, as a lookup by slug: the hex colour its
+ * identity stores, or undefined when it names none (the caller then draws the platform's
+ * accent). THE way anything is drawn in an agent's colour: never a colour
+ * chosen per agent in a component. A lookup, not one value, because a row of
+ * agents (a tab per agent) needs every one of them.
+ */
+export function useAgentAccents(): (slug: string | null | undefined) => string | undefined {
+  const identities = useContext(AgentIdentityContext);
+  return useCallback(
+    slug => {
+      const accent = identities?.get(slug ?? '')?.accent;
+      return typeof accent === 'string' && HEX_PATTERN.test(accent) ? accent : undefined;
+    },
+    [identities],
+  );
+}

package/src/components/chat/entity-cards/entity-portrait-card.tsx

@@ -108,7 +108,7 @@ export function EntityPortraitCard({
   const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--color-bg-surface)');
 
   return (
-    <Link href={href} target={target} rel={rel} className={cn('block h-full', className)} aria-label={`Open ${title}`}>
+    <Link href={href} target={target} rel={rel} className={cn('block h-full', className)}>
       <Card className={cn(CONTENT_CARD_FRAME_CLASS, 'flex h-full flex-col gap-6 p-6')}>
         {/* Media zone — the real cover always wins: wide → cover-fill;
             non-wide → contained on the edge-color fill (news-card treatment). */}

package/src/components/chat/types/entities/program-types.ts

@@ -18,7 +18,6 @@
  */
 
 import type { ReactNode } from 'react';
-import { toStripProfile, type VideoBiteStripProfile } from '../../../features/video-bites-shared';
 
 // ============================================================================
 // HOST TYPES
@@ -36,35 +35,10 @@ export interface ProgramHost {
   role?: string; // e.g., "Host", "Speaker", "Guest"
 }
 
-/**
- * Client-safe author subset hydrated onto program items from the entity's
- * `author_id → profiles` FK join (podcast episodes / webinars). Deliberately
- * excludes `email` — this shape is serialized into public payloads.
- */
-export interface ProgramAuthorRef {
-  id?: string | null;
-  full_name?: string | null;
-  avatar_url?: string | null;
-  job_title?: string | null;
-}
-
-/**
- * Video-bites overlay profile for a program item: internal author first
- * (`author_id → profiles`), then the provider-synced primary host (Livestorm
- * speakers / Podbean hosts). Host `role` is a raw provider enum (e.g.
- * `team_member`) — never display copy, so it is not used as the subtitle.
- * Routes through `toStripProfile` (the SSoT — null on missing names).
- */
-export function programItemToStripProfile(item: {
-  author?: ProgramAuthorRef | null;
-  hosts?: ProgramHost[] | null;
-}): VideoBiteStripProfile | null {
-  const fromAuthor = toStripProfile(item.author);
-  if (fromAuthor) return fromAuthor;
-  const host = Array.isArray(item.hosts) ? item.hosts[0] : null;
-  if (!host?.name) return null;
-  return toStripProfile({ full_name: host.name, avatar_url: host.avatar_url ?? null });
-}
+// The author ref and its strip-profile adapter live in the server-safe leaf
+// (`features/video-bites-shared`): a server module that imports them from this
+// chat tree makes the whole chat a client reference of its page.
+export { programItemToStripProfile, type ProgramAuthorRef } from '../../../features/video-bites-shared';
 
 // ============================================================================
 // DATABASE ROW TYPES

package/src/components/chat/utils/icon-loading.tsx

@@ -18,9 +18,9 @@
  * `<NamedIcon>`, and never calls these functions itself.
  */
 
-import dynamicIconImports from 'lucide-react/dynamicIconImports';
 import { createElement, lazy, useEffect, useRef, useSyncExternalStore, type ComponentType, type SVGProps } from 'react';
-import { ICON_LOADERS, type LoadedIconProps } from '../../icons-v2-generated/icon-loaders';
+import type { LoadedIconProps } from '../../icons-v2-generated/icon-loaders';
+import { ICON_SET_NAMES, LUCIDE_ICON_NAMES } from '../../icons-v2-generated/icon-names';
 
 /** Every icon loaded here is a component of the generated set's own props (`icons-v2-generated`). */
 export type IconComponent = ComponentType<LoadedIconProps>;
@@ -157,10 +157,53 @@ function loadedOnDemand(key: string, displayName: string, loader: IconLoader): I
   return OnDemandIcon as IconComponent;
 }
 
+// The two loader tables are NOT imported with this module. Bundled, they are the
+// largest script a page would load (each `import()` is written out as the files it
+// needs: about 340 KB for 3,300 icons), and a page whose icons the server drew
+// never reads them. Whether a name exists is answered by `icon-names` (the names
+// alone); a table is fetched the first time an icon is loaded by name.
+type LoaderTable = Readonly<Record<string, IconLoader | undefined>>;
+
+/** What a name draws when its table has lost it (a consumer's lucide older than the list of names): nothing. */
+const NO_ICON: IconModule = { default: () => null };
+
+function fromTable(table: () => Promise<LoaderTable>, name: string): IconLoader {
+  return () => table().then(loaders => loaders[name]?.() ?? NO_ICON);
+}
+
+/**
+ * A loader table, fetched once and shared by every icon that reads it. A fetch
+ * that FAILS is forgotten, so the next icon asks again: kept, one dropped
+ * request would fail every icon of that table until the page is reloaded (an
+ * icon's own retry calls its loader again, which would get the same rejection).
+ * Exported for its test.
+ */
+export function sharedTable(fetchTable: () => Promise<LoaderTable>): () => Promise<LoaderTable> {
+  let table: Promise<LoaderTable> | undefined;
+  return () => {
+    if (!table) {
+      const attempt = fetchTable();
+      table = attempt;
+      attempt.catch(() => {
+        if (table === attempt) table = undefined;
+      });
+    }
+    return table;
+  };
+}
+
+const setLoaders = sharedTable(() =>
+  import('../../icons-v2-generated/icon-loaders').then(module => module.ICON_LOADERS as LoaderTable),
+);
+
+const lucideLoaders = sharedTable(() =>
+  import('lucide-react/dynamicIconImports').then(module => (module.default ?? module) as unknown as LoaderTable),
+);
+
 /** An icon of the generated set by its EXPORT name (`ChartPieIcon`), or `undefined` when the set has none by that name. */
 export function iconFromSet(exportName: string): IconComponent | undefined {
-  if (!Object.prototype.hasOwnProperty.call(ICON_LOADERS, exportName)) return undefined;
-  return loadedOnDemand(`set:${exportName}`, exportName, ICON_LOADERS[exportName]);
+  if (!ICON_SET_NAMES.has(exportName)) return undefined;
+  return loadedOnDemand(`set:${exportName}`, exportName, fromTable(setLoaders, exportName));
 }
 
 /** An icon the generated set is known to hold, by its export name. A name the set lost fails where it is asked for. */
@@ -170,12 +213,10 @@ export function setIcon(exportName: string): IconComponent {
   return icon;
 }
 
-const lucideLoaders = dynamicIconImports as unknown as Readonly<Record<string, IconLoader>>;
-
 /** A lucide icon by its kebab-case name (`message-circle`), or `undefined` when lucide has none by that name. */
 export function lucideIcon(name: string): IconComponent | undefined {
-  if (!Object.prototype.hasOwnProperty.call(lucideLoaders, name)) return undefined;
-  return loadedOnDemand(`lucide:${name}`, `Lucide(${name})`, lucideLoaders[name]);
+  if (!LUCIDE_ICON_NAMES.has(name)) return undefined;
+  return loadedOnDemand(`lucide:${name}`, `Lucide(${name})`, fromTable(lucideLoaders, name));
 }
 
 /**
@@ -275,7 +316,7 @@ export function platformMarkRef(platform: string): IconRef {
   if (platform === EVERY_PLATFORM) return EVERY_PLATFORM_MARK;
   const stem = setStem(platform);
   for (const exportName of [`${stem}MarkIcon`, `${stem}LogoIcon`]) {
-    if (Object.prototype.hasOwnProperty.call(ICON_LOADERS, exportName)) return { set: exportName };
+    if (ICON_SET_NAMES.has(exportName)) return { set: exportName };
   }
   return HOUSE_MARK;
 }

package/src/components/features/video-bites-shared.ts

@@ -76,3 +76,33 @@ export function sortBitesByFeaturedAtDesc(a: VideoTeaser, b: VideoTeaser): numbe
   if (!b.featured_at) return -1;
   return new Date(b.featured_at).getTime() - new Date(a.featured_at).getTime();
 }
+
+/**
+ * Client-safe author subset hydrated onto program items from the entity's
+ * `author_id → profiles` FK join (podcast episodes / webinars). Deliberately
+ * excludes `email` — this shape is serialized into public payloads.
+ */
+export interface ProgramAuthorRef {
+  id?: string | null;
+  full_name?: string | null;
+  avatar_url?: string | null;
+  job_title?: string | null;
+}
+
+/**
+ * Video-bites overlay profile for a program item: internal author first
+ * (`author_id → profiles`), then the provider-synced primary host (Livestorm
+ * speakers / Podbean hosts). Host `role` is a raw provider enum (e.g.
+ * `team_member`) — never display copy, so it is not used as the subtitle.
+ * Routes through `toStripProfile` (the SSoT — null on missing names).
+ */
+export function programItemToStripProfile(item: {
+  author?: ProgramAuthorRef | null;
+  hosts?: ReadonlyArray<{ name?: string | null; avatar_url?: string | null }> | null;
+}): VideoBiteStripProfile | null {
+  const fromAuthor = toStripProfile(item.author);
+  if (fromAuthor) return fromAuthor;
+  const host = item.hosts?.[0] ?? null;
+  if (!host?.name) return null;
+  return toStripProfile({ full_name: host.name, avatar_url: host.avatar_url ?? null });
+}

package/src/components/icons-v2-generated/brand-logos/clickup-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ClickupIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ClickupIcon({
   color = "currentColor",
   ...props
 }: ClickupIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -23,7 +25,7 @@ export function ClickupIcon({
     >
       <defs>
         <linearGradient
-          id="clickup_svg__a"
+          id={`${uid}clickup_svg__a`}
           x1={0}
           x2={54.845}
           y1={15.049}
@@ -35,7 +37,7 @@ export function ClickupIcon({
           <stop offset={1} stopColor="#49CCF9" />
         </linearGradient>
         <linearGradient
-          id="clickup_svg__b"
+          id={`${uid}clickup_svg__b`}
           x1={1.195}
           x2={53.745}
           y1={53.166}
@@ -48,13 +50,13 @@ export function ClickupIcon({
         </linearGradient>
       </defs>
       <path
-        fill="url(#clickup_svg__a)"
+        fill={`url(#${uid}clickup_svg__a)`}
         fillRule="evenodd"
         d="m0 50.6 10.1-7.8c5.4 7 11.1 10.3 17.4 10.3s11.9-3.2 17-10.2l10.3 7.6c-7.4 10-16.6 15.3-27.3 15.3-10.6 0-19.9-5.3-27.5-15.2"
         clipRule="evenodd"
       />
       <path
-        fill="url(#clickup_svg__b)"
+        fill={`url(#${uid}clickup_svg__b)`}
         fillRule="evenodd"
         d="m27.5 16.9-18 15.5-8.3-9.7L27.6 0l26.2 22.7-8.4 9.6z"
         clipRule="evenodd"

package/src/components/icons-v2-generated/brand-logos/clickup-logo-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ClickupLogoIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ClickupLogoIcon({
   color = "currentColor",
   ...props
 }: ClickupLogoIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,20 +24,20 @@ export function ClickupLogoIcon({
       {...props}
     >
       <path
-        fill="url(#clickup-logo_svg__a)"
+        fill={`url(#${uid}clickup-logo_svg__a)`}
         fillRule="evenodd"
         d="m4 17.366 3.069-2.356c1.63 2.132 3.361 3.116 5.29 3.116 1.917 0 3.6-.972 5.156-3.088l3.112 2.3C18.38 20.388 15.59 22 12.358 22 9.137 22 6.318 20.4 4 17.366"
         clipRule="evenodd"
       />
       <path
-        fill="url(#clickup-logo_svg__b)"
+        fill={`url(#${uid}clickup-logo_svg__b)`}
         fillRule="evenodd"
         d="m12.185 7.126-5.46 4.717L4.2 8.908 12.197 2l7.934 6.913-2.536 2.925z"
         clipRule="evenodd"
       />
       <defs>
         <linearGradient
-          id="clickup-logo_svg__a"
+          id={`${uid}clickup-logo_svg__a`}
           x1={4}
           x2={20.627}
           y1={19.764}
@@ -46,7 +48,7 @@ export function ClickupLogoIcon({
           <stop offset={1} stopColor="#49CCF9" />
         </linearGradient>
         <linearGradient
-          id="clickup-logo_svg__b"
+          id={`${uid}clickup-logo_svg__b`}
           x1={4.2}
           x2={20.131}
           y1={8.694}

package/src/components/icons-v2-generated/brand-logos/elestio-logo-grey-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ElestioLogoGreyIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ElestioLogoGreyIcon({
   color = "currentColor",
   ...props
 }: ElestioLogoGreyIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +24,7 @@ export function ElestioLogoGreyIcon({
       {...props}
     >
       <mask
-        id="elestio-logo-grey_svg__a"
+        id={`${uid}elestio-logo-grey_svg__a`}
         width={20}
         height={20}
         x={2}
@@ -37,7 +39,7 @@ export function ElestioLogoGreyIcon({
           d="M14.543 16.983a6.8 6.8 0 0 1-2.818.618c-2.268 0-4.261-1.409-4.948-3.608h14.57c.103-.722.24-1.409.24-2.13 0-5.258-4.26-9.863-9.621-9.863C6.33 2 2 6.57 2 12.138 2 17.6 6.433 22 11.897 22c2.44 0 4.845-.997 6.598-2.577zM11.93 6.433c2.303 0 4.365 1.34 5.12 3.608H6.709c.687-2.2 2.99-3.608 5.223-3.608"
         />
       </mask>
-      <g fill={color} mask="url(#elestio-logo-grey_svg__a)">
+      <g fill={color} mask={`url(#${uid}elestio-logo-grey_svg__a)`}>
         <path d="M18.495 8.736H6.124v6.185h12.37z" />
         <path d="M11.921 6.444c.141 0 .282 0 .388.035L7.37 2.893a8 8 0 0 0-1.481.914c-3.175 2.32-4.657 6.083-4.128 9.74l5.394-3.78C8 7.691 9.558 6.443 11.92 6.443" />
         <path d="M6.461 12.031c0-.793.221-1.547.522-2.264-1.615 1.17-3.712 2.68-5.327 3.85.075.603.226 1.207.413 1.81 1.277 4.001 4.655 6.756 8.522 7.398a459 459 0 0 1-1.99-6.227c-1.314-1.057-2.14-2.718-2.14-4.567" />

package/src/components/icons-v2-generated/brand-logos/elestio-logo-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ElestioLogoIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ElestioLogoIcon({
   color = "currentColor",
   ...props
 }: ElestioLogoIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +24,7 @@ export function ElestioLogoIcon({
       {...props}
     >
       <mask
-        id="elestio-logo_svg__a"
+        id={`${uid}elestio-logo_svg__a`}
         width={20}
         height={20}
         x={2}
@@ -37,32 +39,32 @@ export function ElestioLogoIcon({
           d="M14.543 16.983a6.8 6.8 0 0 1-2.818.618c-2.268 0-4.261-1.409-4.948-3.608h14.57c.103-.722.24-1.409.24-2.13 0-5.258-4.26-9.863-9.621-9.863C6.33 2 2 6.57 2 12.138 2 17.6 6.433 22 11.897 22c2.44 0 4.845-.997 6.598-2.577zM11.93 6.433c2.303 0 4.365 1.34 5.12 3.608H6.709c.687-2.2 2.99-3.608 5.223-3.608"
         />
       </mask>
-      <g mask="url(#elestio-logo_svg__a)">
+      <g mask={`url(#${uid}elestio-logo_svg__a)`}>
         <path fill="#A91A1F" d="M18.495 8.736H6.124v6.185h12.37z" />
         <path
-          fill="url(#elestio-logo_svg__b)"
+          fill={`url(#${uid}elestio-logo_svg__b)`}
           d="M11.921 6.444c.141 0 .282 0 .388.035L7.37 2.893a8 8 0 0 0-1.481.914c-3.175 2.32-4.657 6.083-4.128 9.74l5.394-3.78C8 7.691 9.558 6.443 11.92 6.443"
         />
         <path
-          fill="url(#elestio-logo_svg__c)"
+          fill={`url(#${uid}elestio-logo_svg__c)`}
           d="M6.461 12.031c0-.793.221-1.547.522-2.264-1.615 1.17-3.712 2.68-5.327 3.85.075.603.226 1.207.413 1.81 1.277 4.001 4.655 6.756 8.522 7.398a459 459 0 0 1-1.99-6.227c-1.314-1.057-2.14-2.718-2.14-4.567"
         />
         <path
-          fill="url(#elestio-logo_svg__d)"
+          fill={`url(#${uid}elestio-logo_svg__d)`}
           d="M14.809 16.783a5.7 5.7 0 0 1-2.975.834 5.64 5.64 0 0 1-3.648-1.321l1.877 5.703a9.5 9.5 0 0 0 1.735.139c3.967 0 7.367-2.191 9.102-5.39H14.81z"
         />
         <path
-          fill="url(#elestio-logo_svg__e)"
+          fill={`url(#${uid}elestio-logo_svg__e)`}
           d="m17.116 10.587 1.822-5.67c-.378-.412-.825-.756-1.272-1.1a9.94 9.94 0 0 0-10.275-.893l4.811 3.505c2.406.206 4.364 1.89 4.914 4.158"
         />
         <path
-          fill="url(#elestio-logo_svg__f)"
+          fill={`url(#${uid}elestio-logo_svg__f)`}
           d="m19.393 3.378-2.547 6.233c.144.454.24.945.24 1.436 0 2.153-1.442 4.042-3.605 5.1h8.316c.384-.53.672-1.134.913-1.7 1.586-4.042.144-8.273-3.317-11.069"
         />
       </g>
       <defs>
         <linearGradient
-          id="elestio-logo_svg__b"
+          id={`${uid}elestio-logo_svg__b`}
           x1={6.985}
           x2={6.985}
           y1={13.507}
@@ -73,7 +75,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#F5A11A" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__c"
+          id={`${uid}elestio-logo_svg__c`}
           x1={6.133}
           x2={6.133}
           y1={22.84}
@@ -84,7 +86,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#E81C24" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__d"
+          id={`${uid}elestio-logo_svg__d`}
           x1={14.586}
           x2={14.586}
           y1={22.191}
@@ -95,7 +97,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#A567A5" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__e"
+          id={`${uid}elestio-logo_svg__e`}
           x1={13.174}
           x2={13.174}
           y1={10.598}
@@ -106,7 +108,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#FFC605" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__f"
+          id={`${uid}elestio-logo_svg__f`}
           x1={18.365}
           x2={18.365}
           y1={16.125}