@eocrm/design-system 0.6.24 → 0.7.0

package/src/components/Avatar/AgentAvatar.module.scss

@@ -1,117 +0,0 @@
-@use './Avatar.tokens';
-
-// Root carries the Avatar size class (diameter); position:relative anchors the
-// .badge (Rule 4 escape hatch for an internal child, same as Avatar's .presence).
-.agent {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--avatar-radius);
-  user-select: none;
-}
-
-// The circular tile; clips the mark (incl. non-SVG marks) to the circle. The
-// badge is the tile's sibling, not a descendant, so this clip never reaches it.
-.tile {
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--agent-avatar-bg);
-  color: var(--agent-avatar-fg);
-}
-
-.mark {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mark svg {
-  width: 100%;
-  height: 100%;
-}
-
-.inline .mark {
-  width: var(--agent-avatar-mark-size-inline);
-  height: var(--agent-avatar-mark-size-inline);
-}
-
-.sm .mark {
-  width: var(--agent-avatar-mark-size-sm);
-  height: var(--agent-avatar-mark-size-sm);
-}
-
-.md .mark {
-  width: var(--agent-avatar-mark-size-md);
-  height: var(--agent-avatar-mark-size-md);
-}
-
-.lg .mark {
-  width: var(--agent-avatar-mark-size-lg);
-  height: var(--agent-avatar-mark-size-lg);
-}
-
-.xl .mark {
-  width: var(--agent-avatar-mark-size-xl);
-  height: var(--agent-avatar-mark-size-xl);
-}
-
-// Member badge, bottom-right, with a surface ring. The inner <Avatar> keeps
-// its own size class, so force it to fill the sized badge box.
-.badge {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  border-radius: var(--avatar-radius);
-  box-shadow: 0 0 0 var(--agent-avatar-badge-ring-width) var(--agent-avatar-badge-ring-color);
-  font-size: var(--agent-avatar-badge-font-size);
-}
-
-.badge > span {
-  width: 100%;
-  height: 100%;
-  font-size: inherit;
-}
-
-.erased {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--agent-avatar-bg);
-  color: var(--agent-avatar-fg);
-}
-
-.erased svg {
-  width: 70%;
-  height: 70%;
-}
-
-.sm .badge {
-  width: var(--agent-avatar-badge-size-sm);
-  height: var(--agent-avatar-badge-size-sm);
-}
-
-.md .badge {
-  width: var(--agent-avatar-badge-size-md);
-  height: var(--agent-avatar-badge-size-md);
-}
-
-.lg .badge {
-  width: var(--agent-avatar-badge-size-lg);
-  height: var(--agent-avatar-badge-size-lg);
-}
-
-.xl .badge {
-  width: var(--agent-avatar-badge-size-xl);
-  height: var(--agent-avatar-badge-size-xl);
-}

package/src/components/Avatar/AgentAvatar.tsx

@@ -1,122 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import clsx from 'clsx';
-import { Bot, User } from 'lucide-react';
-import { useTranslation } from '../../i18n';
-import { Avatar, type AvatarSize } from './Avatar';
-import avatarStyles from './Avatar.module.scss';
-import styles from './AgentAvatar.module.scss';
-
-/** The member an agent acts for, shown as a badge on the tile. */
-export interface AgentAvatarMember {
-  /** Member's full name; drives the badge initials and the accessible name. */
-  name: string;
-  /** Member's photo URL; initials are shown when omitted or it fails to load. */
-  src?: string;
-}
-
-export interface AgentAvatarProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Agent label; drives the accessible name (an empty label reads as "?",
-   * like `Avatar`). Unused when `decorative`.
-   */
-  name: string;
-  /** Agent mark, inherits `currentColor` (a neutral foreground), so pass a glyph drawn with `fill`/`stroke="currentColor"`; marks with hard-coded fills keep their colours (the app's responsibility). Defaults to a lucide `Bot`. */
-  mark?: ReactNode;
-  /**
-   * The member the agent acts for. Omit for an agent alone (no badge); `null`
-   * or an empty name for an erased member (placeholder badge).
-   */
-  member?: AgentAvatarMember | null;
-  /** Diameter, same scale as `Avatar`. The member badge is hidden at `inline`. */
-  size?: AvatarSize;
-  /**
-   * Hide the avatar from assistive tech (`aria-hidden`, no role or label). Use
-   * when visible text next to it already names the agent and the member, e.g.
-   * a Thread node beside a "Scout for Sarah Chen" byline; otherwise both are
-   * announced. Without such text keep the default: a `role="img"` named
-   * "{agent}, on behalf of {member}". `PersonDisplay.AgentAvatar` always sets
-   * it. Defaults to `false`.
-   */
-  decorative?: boolean;
-}
-
-const sizeClass: Record<AvatarSize, string> = {
-  inline: styles.inline,
-  sm: styles.sm,
-  md: styles.md,
-  lg: styles.lg,
-  xl: styles.xl,
-};
-
-const avatarSizeClass: Record<AvatarSize, string> = {
-  inline: avatarStyles.inline,
-  sm: avatarStyles.sm,
-  md: avatarStyles.md,
-  lg: avatarStyles.lg,
-  xl: avatarStyles.xl,
-};
-
-/**
- * AI agent tile with an optional badge of the member it acts for.
- * @see docs/components/AgentAvatar.md
- */
-export const AgentAvatar = forwardRef<HTMLSpanElement, AgentAvatarProps>(function AgentAvatar(
-  { name, mark, member, size = 'md', decorative, className, ...props },
-  ref,
-) {
-  const t = useTranslation();
-  const agent = name.trim() === '' ? '?' : name.trim();
-  const memberName = member?.name?.trim() ?? '';
-  const erased = member === null || (member !== undefined && memberName === '');
-
-  const label = erased
-    ? t('avatar.agent.onBehalfOfFormer', { agent })
-    : member
-      ? t('avatar.agent.onBehalfOf', { agent, member: memberName })
-      : agent;
-
-  const badge =
-    size === 'inline' || member === undefined ? null : (
-      <span
-        aria-hidden="true"
-        className={styles.badge}
-        data-part="badge"
-        data-erased={erased || undefined}
-      >
-        {erased ? (
-          <span className={styles.erased}>
-            <User />
-          </span>
-        ) : (
-          <Avatar size="sm" name={memberName} src={member?.src} />
-        )}
-      </span>
-    );
-
-  // {...props} first so component-owned ARIA (role, aria-label) wins. Decorative
-  // strips consumer role/label; otherwise aria-labelledby is dropped so it can't
-  // override the computed aria-label.
-  return (
-    <span
-      {...props}
-      ref={ref}
-      {...(decorative
-        ? {
-            'aria-hidden': true,
-            role: undefined,
-            'aria-label': undefined,
-            'aria-labelledby': undefined,
-          }
-        : { role: 'img', 'aria-label': label, 'aria-labelledby': undefined })}
-      className={clsx(styles.agent, avatarSizeClass[size], sizeClass[size], className)}
-      data-agent-avatar=""
-    >
-      <span className={styles.tile}>
-        <span aria-hidden="true" className={styles.mark} data-part="mark">
-          {mark ?? <Bot />}
-        </span>
-      </span>
-      {badge}
-    </span>
-  );
-});

package/src/components/Avatar/Avatar.module.scss

@@ -1,181 +0,0 @@
-@use './Avatar.tokens';
-
-// Outer wrapper — position:relative anchors the .presence dot (Rule 4 escape
-// hatch for an internal child). No overflow:hidden here — that lives on .crop
-// so the presence dot sibling is never clipped.
-.avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--avatar-radius);
-  color: var(--avatar-fg);
-  font-weight: var(--avatar-font-weight);
-  text-transform: uppercase;
-  user-select: none;
-}
-
-// Inner crop — clips the image or initials into a circle. Inherits the
-// background color CSS variable set on the outer wrapper.
-.crop {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: inherit;
-  overflow: hidden;
-  background: var(--avatar-bg, var(--avatar-bg-fallback));
-}
-
-.crop img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-// Font-relative (#579): one line of the surrounding text tall. `lh` resolves
-// against THIS element's line-height, so the wrapper must keep the inherited
-// font-size — the initials get their smaller size on .crop instead.
-.inline {
-  width: var(--avatar-size-inline);
-  height: var(--avatar-size-inline);
-
-  // In running text the default baseline is the initials' (or, for a photo,
-  // the box's bottom), which pushes the 1lh box off the line and grows it.
-  // A box exactly one line tall aligned to the line box's top fills it
-  // without growing it. Ignored in flex rows, which centre it.
-  vertical-align: top;
-
-  .crop {
-    font-size: var(--avatar-font-size-inline);
-  }
-}
-
-.sm {
-  width: var(--avatar-size-sm);
-  height: var(--avatar-size-sm);
-  font-size: var(--avatar-font-size-sm);
-}
-
-.md {
-  width: var(--avatar-size-md);
-  height: var(--avatar-size-md);
-  font-size: var(--avatar-font-size-md);
-}
-
-.lg {
-  width: var(--avatar-size-lg);
-  height: var(--avatar-size-lg);
-  font-size: var(--avatar-font-size-lg);
-}
-
-.xl {
-  width: var(--avatar-size-xl);
-  height: var(--avatar-size-xl);
-  font-size: var(--avatar-font-size-xl);
-}
-
-// Presence dot (Avatar status). Anchored to the bottom-right via the
-// parent's position:relative. Carries a 2px ring of --color-bg so the dot
-// stays visible on tinted ancestors.
-.presence {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  border-radius: var(--avatar-presence-radius);
-  box-shadow: 0 0 0 var(--avatar-presence-ring-width) var(--avatar-presence-ring-color);
-
-  // Each status carries a distinct SILHOUETTE as well as a colour (#506).
-  // Colour was the entire channel, and OKLab separation — what the presence
-  // gate in contrast.test.ts measures — is blind to colour-vision deficiency:
-  // light away/busy collapses from 0.158 to roughly 0.015 under simulated
-  // protanopia while that gate passes. No palette choice fixes it, because
-  // `away` has to read as yellow and no amber-or-yellow candidate separates
-  // from `busy`. A second channel is the only lever, so:
-  //   online   filled disc
-  //   away     half disc, the cut edge vertical through the centre
-  //   busy     filled disc with a bar across it
-  //   offline  hollow ring
-  // Filled / half / barred / hollow stay distinguishable at --size-presence-sm,
-  // which is 8px, and none of them depend on hue. Each cut is painted in
-  // --color-bg — the same colour as the ring the dot already carries, so the cut
-  // and the ring read as one continuous hole rather than as a second colour.
-  // That matches the surface exactly only ON --color-bg; on a sunken panel or a
-  // selected row the dot sits on its own slightly-off chip, which the pre-existing
-  // ring did too. The channel does not depend on the match: cut-vs-fill runs
-  // 4.52-11.86:1, so the silhouette survives greyscale and every dichromacy
-  // either way. (The 4.52 is offline, the status this branch re-pointed — an
-  // earlier version of this line said "5-12:1" and excluded the one value the
-  // same commit had just changed.)
-  &[data-status='online'] {
-    background: var(--avatar-presence-bg-online);
-  }
-
-  &[data-status='busy'] {
-    background: var(--avatar-presence-bg-busy);
-  }
-
-  // The bar. `inset` keeps it centred at every dot size without a per-size
-  // rule, and it is painted in the surface colour so it reads as a cut.
-  &[data-status='busy']::after {
-    position: absolute;
-    inset: calc(50% - (var(--avatar-presence-bar-height) / 2)) 20%;
-    background: var(--avatar-presence-glyph-color);
-    content: '';
-  }
-
-  // Half disc. A hard-stop gradient rather than a pseudo-element, so the shape
-  // survives the border-radius clip at any size.
-  &[data-status='away'] {
-    background-image: linear-gradient(
-      to right,
-      var(--avatar-presence-bg-away) 0 50%,
-      var(--avatar-presence-glyph-color) 50% 100%
-    );
-  }
-
-  // Hollow. The inset shadow draws the stroke inside the same circle, so the
-  // outer ring against the avatar is unaffected.
-  &[data-status='offline'] {
-    background: var(--avatar-presence-glyph-color);
-    box-shadow:
-      0 0 0 var(--avatar-presence-ring-width) var(--avatar-presence-ring-color),
-      inset 0 0 0 var(--avatar-presence-hollow-width) var(--avatar-presence-bg-offline);
-  }
-}
-
-// Per-size dot dimensions. The size class lives on the avatar wrapper (the
-// .presence child's parent), so a descendant selector picks the right size.
-.inline .presence {
-  width: var(--avatar-presence-size-inline);
-  height: var(--avatar-presence-size-inline);
-}
-
-.sm .presence {
-  width: var(--avatar-presence-size-sm);
-  height: var(--avatar-presence-size-sm);
-}
-
-.md .presence {
-  width: var(--avatar-presence-size-md);
-  height: var(--avatar-presence-size-md);
-}
-
-.lg .presence {
-  width: var(--avatar-presence-size-lg);
-  height: var(--avatar-presence-size-lg);
-}
-
-.xl .presence {
-  width: var(--avatar-presence-size-xl);
-  height: var(--avatar-presence-size-xl);
-}
-
-// When inside an AvatarGroup, each avatar picks up a --color-bg ring so
-// stacked siblings read as distinct.
-.inGroup {
-  box-shadow: 0 0 0 var(--avatar-in-group-ring-width) var(--avatar-in-group-ring-color);
-}

package/src/components/Avatar/Avatar.tokens.scss

@@ -1,107 +0,0 @@
-// Avatar.tokens.scss — Component-scoped tokens for <Avatar> and <AvatarGroup>. The name-hashed primitive palette --color-avatar-1..6 stays primitive (in tokens.scss) and the React-injected --avatar-bg inline var also stays as a runtime hook on .crop.
-:root {
-  // Surface / shape
-  --avatar-radius: var(--radius-full);
-  --avatar-fg: var(--color-avatar-fg);
-  --avatar-bg-fallback: var(--color-bg-sunken);
-  --avatar-font-weight: var(--font-weight-semibold);
-
-  // Size variants — square dimension + initials font-size per size
-  // `inline` is font-relative (#579): one text line tall, initials ~0.7 of
-  // the text (≈ the sm ratio of initials to diameter).
-  // 1.5em before `lh` support (Safari < 16.4, Firefox < 120) — the library's
-  // body line-height, so still about one line.
-  --avatar-size-inline: 1.5em;
-  --avatar-font-size-inline: 0.7em;
-
-  // Scales with larger text, but never below the sm dot: #506's presence
-  // shapes (filled/half/barred/hollow, 2px strokes) are the non-colour
-  // channel and were only checked down to --size-presence-sm (8px).
-  --avatar-presence-size-inline: max(var(--size-presence-sm), 0.5em);
-  --avatar-size-sm: var(--size-sm);
-  --avatar-size-md: var(--size-md);
-  --avatar-size-lg: var(--size-lg);
-  --avatar-size-xl: var(--size-xl);
-  --avatar-font-size-sm: var(--font-size-xs);
-  --avatar-font-size-md: var(--font-size-sm);
-  --avatar-font-size-lg: var(--font-size-md);
-
-  // Jumps two steps on the font scale (2xl, not lg/xl) — continues the decreasing size:font ratio (0.458 → 0.375 → 0.35 → 0.30) at 80px.
-  --avatar-font-size-xl: var(--font-size-2xl);
-
-  // Presence dot — ring + per-status fill
-  --avatar-presence-radius: var(--radius-full);
-  --avatar-presence-ring-width: var(--border-width-emphasis);
-  --avatar-presence-ring-color: var(--color-bg);
-  --avatar-presence-size-sm: var(--size-presence-sm);
-  --avatar-presence-size-md: var(--size-presence-md);
-  --avatar-presence-size-lg: var(--size-presence-lg);
-  --avatar-presence-size-xl: var(--size-presence-xl);
-  --avatar-presence-bg-online: var(--color-presence-online);
-  --avatar-presence-bg-busy: var(--color-presence-busy);
-  --avatar-presence-bg-away: var(--color-presence-away);
-  --avatar-presence-bg-offline: var(--color-presence-offline);
-
-  // #506. The SHAPE channel. Every cut in a dot is painted in the surface
-  // behind the avatar, so the dot reads as a silhouette rather than as two
-  // colours — which is what survives a greyscale print and every dichromacy.
-  --avatar-presence-glyph-color: var(--avatar-presence-ring-color);
-  --avatar-presence-hollow-width: var(--border-width-emphasis);
-  --avatar-presence-bar-height: var(--border-width-emphasis);
-
-  // AgentAvatar — neutral tile (never the name-hashed palette, so a brand mark
-  // is not recoloured), mark = a fraction of the tile, badge = the member.
-  --agent-avatar-bg: var(--color-bg-muted);
-  --agent-avatar-fg: var(--color-fg-muted);
-  --agent-avatar-mark-size-inline: calc(var(--avatar-size-inline) * 0.6);
-  --agent-avatar-mark-size-sm: calc(var(--avatar-size-sm) * 0.6);
-  --agent-avatar-mark-size-md: calc(var(--avatar-size-md) * 0.6);
-  --agent-avatar-mark-size-lg: calc(var(--avatar-size-lg) * 0.6);
-  --agent-avatar-mark-size-xl: calc(var(--avatar-size-xl) * 0.6);
-  --agent-avatar-badge-size-sm: calc(var(--avatar-size-sm) * 0.5);
-  --agent-avatar-badge-size-md: calc(var(--avatar-size-md) * 0.5);
-  --agent-avatar-badge-size-lg: calc(var(--avatar-size-lg) * 0.5);
-  --agent-avatar-badge-size-xl: calc(var(--avatar-size-xl) * 0.45);
-  --agent-avatar-badge-font-size: 0.4em;
-  --agent-avatar-badge-ring-width: var(--avatar-presence-ring-width);
-  --agent-avatar-badge-ring-color: var(--avatar-presence-ring-color);
-
-  // In-group ring (stacked siblings)
-  --avatar-in-group-ring-width: var(--border-width-emphasis);
-  --avatar-in-group-ring-color: var(--color-bg);
-
-  // AvatarGroup — overlap per size
-  --avatar-group-overlap-sm: var(--avatar-overlap-sm);
-  --avatar-group-overlap-md: var(--avatar-overlap-md);
-  --avatar-group-overlap-lg: var(--avatar-overlap-lg);
-  --avatar-group-overlap-xl: var(--avatar-overlap-xl);
-
-  // AvatarGroup — +N overflow chip
-  --avatar-overflow-gap: var(--space-1);
-  --avatar-overflow-padding-x: var(--space-2);
-  --avatar-overflow-bg: var(--color-bg-muted);
-  --avatar-overflow-fg: var(--color-fg-muted);
-  --avatar-overflow-radius: var(--radius-full);
-  --avatar-overflow-font-weight: var(--font-weight-semibold);
-  --avatar-overflow-ring-width: var(--border-width-emphasis);
-  --avatar-overflow-ring-color: var(--color-bg);
-  --avatar-overflow-bg-hover: var(--color-bg-muted-hover);
-  --avatar-overflow-fg-hover: var(--color-fg);
-  --avatar-overflow-ring-focus: var(--ring-accent);
-
-  // AvatarGroup — +N size per group size
-  --avatar-overflow-size-sm: var(--size-sm);
-  --avatar-overflow-size-md: var(--size-md);
-  --avatar-overflow-size-lg: var(--size-lg);
-  --avatar-overflow-size-xl: var(--size-xl);
-  --avatar-overflow-font-size-sm: var(--font-size-xs);
-  --avatar-overflow-font-size-md: var(--font-size-sm);
-  --avatar-overflow-font-size-lg: var(--font-size-md);
-  --avatar-overflow-font-size-xl: var(--font-size-2xl);
-}
-
-@supports (height: 1lh) {
-  :root {
-    --avatar-size-inline: 1lh;
-  }
-}