@flamingo-stack/openframe-frontend-core 0.0.450 → 0.0.451

package/src/components/chat/quick-action-chip.tsx

@@ -14,8 +14,7 @@ import { EntityIcon, type EntityIconValue } from '../icon-display'
  *  (agent/persona `icon_props.color`). */
 export type QuickActionAccent = 'pink' | 'cyan' | (string & {})
 
-/** THE agent→accent pairs (one spelling — {@link getAgentAccent} and
- *  {@link QUICK_ACTION_THEMES} both derive from it). */
+/** THE built-in agent→accent pairs ({@link getAgentAccent} derives from it). */
 const AGENT_ACCENTS = { fae: 'pink', mingo: 'cyan' } as const
 
 /**
@@ -117,43 +116,21 @@ export interface QuickActionChipLozenge {
 // =============================================================================
 
 /**
- * THE quick-action wall/chip theme set — one spelling of "who does this work"
- * across every surface (homepage hero tabs, marketing marquees, company-hub
- * deck panels, chat empty states):
- * - `fae` / `mingo` — the agent identities (pink / cyan), same values
- *   {@link getAgentAccent} resolves for the built-in agents.
- * - `it` / `sec` — work-category themes on the ODS attention pair
- *   (IT = yellow routine work, security = red defense), deliberately NOT the
- *   agent identities so a category never reads as agent attribution. These two
- *   carry the classification lozenge (leading-edge affix) as part of the theme.
+ * A caller-supplied chip theme — the accent (and optional classification
+ * lozenge) for "who does this work". The lib deliberately ships NO theme
+ * registry and NO fallbacks: agent colors are server-configured (resolve via
+ * {@link accentFromIdentityIcon} on the agent row's `icon_props.color`, or
+ * {@link getAgentAccent} for the built-in agents) and category pairs are
+ * product decisions — the CONSUMER defines its specs and injects them, per
+ * chip or as a wall default.
  */
-export type QuickActionTheme = 'fae' | 'mingo' | 'it' | 'sec'
-
 export interface QuickActionThemeSpec {
   /** Chip icon tint ({@link QuickActionAccent}: brand token or CSS color). */
   accent: QuickActionAccent
-  /** Classification affix rendered inside the chip (category themes only). */
+  /** Classification affix rendered inside the chip (category themes). */
   lozenge?: QuickActionChipLozenge
 }
 
-/** Caller-injected per-theme accent overrides — how SERVER-CONFIGURED agent
- *  colors reach the chips. Consumers resolve the configured value (e.g.
- *  {@link accentFromIdentityIcon} on the agent row's `icon_props.color`) and
- *  inject it here; {@link QUICK_ACTION_THEMES} below is fallback-only. */
-export type QuickActionThemeAccents = Partial<Record<QuickActionTheme, QuickActionAccent>>
-
-/** FALLBACK-ONLY theme specs (same contract as {@link getAgentAccent}): the
- *  built-in accents apply when the caller injects nothing. The fae/mingo
- *  accents in particular are server-configured per agent — walls/chips accept
- *  a {@link QuickActionThemeAccents} override (`themeAccents`/`themeAccent`)
- *  that always wins over this map. */
-export const QUICK_ACTION_THEMES: Record<QuickActionTheme, QuickActionThemeSpec> = {
-  fae: { accent: AGENT_ACCENTS.fae },
-  mingo: { accent: AGENT_ACCENTS.mingo },
-  it: { accent: 'var(--color-warning)', lozenge: { label: 'IT', className: 'text-ods-warning' } },
-  sec: { accent: 'var(--color-error)', lozenge: { label: 'SEC', className: 'text-ods-error' } },
-}
-
 /** Resolve a chip label + optional lozenge to the Tag label node. */
 function composeChipLabel(
   label: React.ReactNode,
@@ -186,14 +163,10 @@ export interface QuickActionChipButtonProps {
   /** Icon: a declarative {@link QuickActionIconSpec} (preferred — unified
    *  EntityIcon resolution) or a pre-rendered ReactNode. */
   icon?: React.ReactNode | QuickActionIconSpec
-  /** Chip theme ({@link QuickActionTheme}): supplies the icon accent when the
-   *  icon spec doesn't carry its own, and the lozenge when `lozenge` is
-   *  `true`. Explicit values always win over the theme. */
-  theme?: QuickActionTheme
-  /** Caller-injected accent for `theme` — the server-configured agent color
-   *  (resolve via {@link accentFromIdentityIcon}). Overrides the theme's
-   *  built-in fallback accent; the icon spec's own `accent` still wins. */
-  themeAccent?: QuickActionAccent
+  /** Caller-supplied {@link QuickActionThemeSpec}: supplies the icon accent
+   *  when the icon spec doesn't carry its own, and the lozenge when `lozenge`
+   *  is `true`. Explicit values always win over the theme. */
+  theme?: QuickActionThemeSpec
   /** {@link QuickActionChipLozenge} at the label's leading edge (e.g. an
    *  IT/SEC classification affix). `true` renders the `theme`'s lozenge. */
   lozenge?: QuickActionChipLozenge | boolean
@@ -286,7 +259,6 @@ export function QuickActionChipButton({
   label,
   icon,
   theme,
-  themeAccent,
   lozenge,
   variant = 'outline',
   selected = false,
@@ -298,14 +270,11 @@ export function QuickActionChipButton({
   interactive = true,
   className,
 }: QuickActionChipButtonProps) {
-  const themeSpec = theme ? QUICK_ACTION_THEMES[theme] : undefined
-  // Accent precedence: the icon spec's own accent (admin-configured color,
-  // agent identity) → caller-injected `themeAccent` (server-configured agent
-  // color) → the theme's built-in fallback.
-  const accent = themeAccent ?? themeSpec?.accent
+  // The theme's accent only fills the gap — an icon spec's own accent
+  // (admin-configured per-action color) always wins.
   const themedIcon =
-    accent && isQuickActionIconSpec(icon) && !icon.accent ? { ...icon, accent } : icon
-  const resolvedLozenge = lozenge === true ? themeSpec?.lozenge : lozenge === false ? undefined : lozenge
+    theme && isQuickActionIconSpec(icon) && !icon.accent ? { ...icon, accent: theme.accent } : icon
+  const resolvedLozenge = lozenge === true ? theme?.lozenge : lozenge === false ? undefined : lozenge
   const resolvedIcon = renderQuickActionIcon(themedIcon)
   const resolvedLabel = composeChipLabel(label, resolvedLozenge)
   const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant

package/src/components/chat/quick-action-wall.tsx

@@ -10,7 +10,7 @@ import {
   type MarqueeWallProps,
 } from '../ui/marquee-wall'
 import { QuickActionChipSkeleton } from './quick-action-chip'
-import type { QuickActionTheme, QuickActionThemeAccents } from './quick-action-chip'
+import type { QuickActionThemeSpec } from './quick-action-chip'
 import { QuickActionChipFromData } from './chat-quick-action-row'
 import type { QuickActionChip } from './chat-quick-action-row'
 
@@ -49,13 +49,10 @@ export interface QuickActionWallProps {
    *  chat rows), including per-chip `theme`/`lozenge` for mixed IT/SEC
    *  streams. Chips with `onSelect` render as buttons; without, as tags. */
   chips: ReadonlyArray<QuickActionChip>
-  /** Wall-default theme (fae/mingo/it/sec) for chips without their own. */
-  theme?: QuickActionTheme
-  /** Server-configured per-theme accent overrides
-   *  ({@link QuickActionThemeAccents}) — inject the agents' configured colors
-   *  (resolve via `accentFromIdentityIcon`); the built-in theme accents are
-   *  fallback-only. Per-chip `themeAccent` still wins. */
-  themeAccents?: QuickActionThemeAccents
+  /** Wall-default {@link QuickActionThemeSpec} for chips without their own.
+   *  Caller-supplied — the lib ships no theme registry; resolve agent colors
+   *  server-side (e.g. `accentFromIdentityIcon`) and pass the spec here. */
+  theme?: QuickActionThemeSpec
   /** `'animated'` (default): marquee + overflow fades. `'plain'`: no motion,
    *  no blur — the consumer's per-surface opt-out (forwarded to
    *  {@link MarqueeWall}; in brick mode the rows render static and the
@@ -133,7 +130,6 @@ export interface QuickActionWallProps {
 export function QuickActionWall({
   chips,
   theme,
-  themeAccents,
   mode = 'animated',
   lozenges = false,
   axis,
@@ -180,7 +176,6 @@ export function QuickActionWall({
         key={chip.id}
         chip={chip}
         defaultTheme={theme}
-        themeAccents={themeAccents}
         defaultLozenge={lozenges}
         interactive={!!chip.onSelect}
         className="max-w-full"

package/src/stories/QuickActionWall.stories.tsx

@@ -1,33 +1,47 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { QuickActionWall, interleave } from '../components/chat/quick-action-wall'
 import type { QuickActionChip } from '../components/chat/chat-quick-action-row'
+import type { QuickActionThemeSpec } from '../components/chat/quick-action-chip'
+
+// Theme specs are CALLER-supplied (the lib ships no registry, no fallbacks):
+// these are this story's own demo specs — real consumers resolve agent
+// accents from server config and define their own category pairs.
+const IT_THEME: QuickActionThemeSpec = {
+  accent: 'var(--color-warning)',
+  lozenge: { label: 'IT', className: 'text-ods-warning' },
+}
+const SEC_THEME: QuickActionThemeSpec = {
+  accent: 'var(--color-error)',
+  lozenge: { label: 'SEC', className: 'text-ods-error' },
+}
+const FAE_THEME: QuickActionThemeSpec = { accent: 'pink' }
 
 // A mixed IT/SEC stream (per-chip themes + lozenges) and a fae wall — the two
 // wall registers: category-classified deck panels vs agent-themed hero walls.
 const IT_ACTIONS: ReadonlyArray<QuickActionChip> = [
-  { id: 'reset-password', label: 'Reset a password', icon: { name: 'key' }, theme: 'it' },
-  { id: 'new-laptop', label: 'Provision a new laptop', icon: { name: 'laptop' }, theme: 'it' },
-  { id: 'printer', label: 'Fix the printer', icon: { name: 'printer' }, theme: 'it' },
-  { id: 'vpn', label: 'VPN will not connect', icon: { name: 'globe' }, theme: 'it' },
-  { id: 'disk-full', label: 'Disk almost full', icon: { name: 'hard-drive' }, theme: 'it' },
-  { id: 'onboard', label: 'Onboard a new hire', icon: { name: 'user-plus' }, theme: 'it' },
+  { id: 'reset-password', label: 'Reset a password', icon: { name: 'key' }, theme: IT_THEME },
+  { id: 'new-laptop', label: 'Provision a new laptop', icon: { name: 'laptop' }, theme: IT_THEME },
+  { id: 'printer', label: 'Fix the printer', icon: { name: 'printer' }, theme: IT_THEME },
+  { id: 'vpn', label: 'VPN will not connect', icon: { name: 'globe' }, theme: IT_THEME },
+  { id: 'disk-full', label: 'Disk almost full', icon: { name: 'hard-drive' }, theme: IT_THEME },
+  { id: 'onboard', label: 'Onboard a new hire', icon: { name: 'user-plus' }, theme: IT_THEME },
 ]
 
 const SEC_ACTIONS: ReadonlyArray<QuickActionChip> = [
-  { id: 'phishing', label: 'Phishing report triage', icon: { name: 'fish' }, theme: 'sec' },
-  { id: 'mfa', label: 'Enforce MFA', icon: { name: 'shield-check' }, theme: 'sec' },
-  { id: 'patch', label: 'Patch the CVE', icon: { name: 'bug' }, theme: 'sec' },
-  { id: 'offboard', label: 'Revoke access on exit', icon: { name: 'user-minus' }, theme: 'sec' },
-  { id: 'edr-alert', label: 'EDR alert review', icon: { name: 'radar' }, theme: 'sec' },
+  { id: 'phishing', label: 'Phishing report triage', icon: { name: 'fish' }, theme: SEC_THEME },
+  { id: 'mfa', label: 'Enforce MFA', icon: { name: 'shield-check' }, theme: SEC_THEME },
+  { id: 'patch', label: 'Patch the CVE', icon: { name: 'bug' }, theme: SEC_THEME },
+  { id: 'offboard', label: 'Revoke access on exit', icon: { name: 'user-minus' }, theme: SEC_THEME },
+  { id: 'edr-alert', label: 'EDR alert review', icon: { name: 'radar' }, theme: SEC_THEME },
 ]
 
 const FAE_ACTIONS: ReadonlyArray<QuickActionChip> = [
   { id: 'how-to-start', label: 'How to start', icon: { name: 'fae' } },
-  { id: 'connect-device', label: 'Connect device', icon: { name: 'search' }, theme: 'fae' },
-  { id: 'find-device', label: 'Find device', icon: { name: 'compass' }, theme: 'fae' },
-  { id: 'remote-connection', label: 'Remote connection', icon: { name: 'rocket' }, theme: 'fae' },
-  { id: 'run-scripts', label: 'Run scripts', icon: { name: 'bracket-curly' }, theme: 'fae' },
-  { id: 'device-software', label: 'Device software', icon: { name: 'package' }, theme: 'fae' },
+  { id: 'connect-device', label: 'Connect device', icon: { name: 'search' }, theme: FAE_THEME },
+  { id: 'find-device', label: 'Find device', icon: { name: 'compass' }, theme: FAE_THEME },
+  { id: 'remote-connection', label: 'Remote connection', icon: { name: 'rocket' }, theme: FAE_THEME },
+  { id: 'run-scripts', label: 'Run scripts', icon: { name: 'bracket-curly' }, theme: FAE_THEME },
+  { id: 'device-software', label: 'Device software', icon: { name: 'package' }, theme: FAE_THEME },
 ]
 
 const meta: Meta<typeof QuickActionWall> = {
@@ -38,7 +52,7 @@ const meta: Meta<typeof QuickActionWall> = {
     docs: {
       description: {
         component:
-          'THE quick-action chip wall: a themed pile of the shared chip on the shared `<MarqueeWall>` engine. Static-with-fade when content fits (or `prefers-reduced-motion`); an endless marquee when it overflows — the axis follows the fade (`bottom` fade → content travels bottom→top; `right` fade → right→left). Themes: `fae`/`mingo` (agent identities) and `it`/`sec` (classification pair, with lozenges). Interactive chips pause the track on hover; clone-copy chips stay clickable with wrapper-level a11y. `rows` renders the brick-wall mode (stacked independent row marquees).',
+          'THE quick-action chip wall: a themed pile of the shared chip on the shared `<MarqueeWall>` engine. Static-with-fade when content fits (or `prefers-reduced-motion`); an endless marquee when it overflows — the axis follows the fade (`bottom` fade → content travels bottom→top; `right` fade → right→left). Theme specs (accent + optional lozenge) are caller-supplied per chip or as a wall default — the lib ships no theme registry. Interactive chips pause the track on hover; clone-copy chips stay clickable with wrapper-level a11y. `rows` renders the brick-wall mode (stacked independent row marquees).',
       },
     },
   },