Entity Chip.

---
/**
 * EntityChip: inline reference to a person, brand or record, as a monogram and name.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Softer than a StatusPill (no dot, no state) and not a mono
 * token (see Chip).
 *
 * @example
 * Cited by <EntityChip name="Northwind Outdoor" color="var(--vs-green)" />
 */
import type { HTMLAttributes } from "astro/types";
import Monogram from "./Monogram.astro";

type Props = HTMLAttributes<"span"> & {
  /** Entity name (the chip's text). */
  name: string;
  /** Monogram color. Any CSS color. */
  color?: string;
  /** Monogram glyph. Defaults to the first character of `name`. */
  monogram?: string;
};

const { name, color, monogram, class: className, ...rest } = Astro.props;
---

<span class:list={["vs-entity-chip", className]} {...rest}>
  <Monogram color={color}>{monogram ?? name.charAt(0)}</Monogram>
  <span class="vs-entity-chip__name">{name}</span>
</span>

<style>
  .vs-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
    padding: 1px 6px 1px 3px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    vertical-align: middle;
  }
  .vs-entity-chip__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink);
  }
</style>

---
/**
 * Monogram: a colored disc with an initial or short glyph.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Hidden from assistive tech, so pair it with
 * the name.
 *
 * @example
 * <Monogram color="var(--vs-green)">K</Monogram>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** Disc color. Any CSS color. */
  color?: string;
};

const { color = "var(--vs-orange)", class: className, ...rest } = Astro.props;
---

<span class:list={["vs-monogram", className]} style={`--vs-monogram-color: ${color}`} aria-hidden="true" {...rest}><slot /></span>

<style>
  .vs-monogram {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-monogram-color);
    color: white;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
  }
</style>