@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/agents/agent-cast.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import AgentAvatar from './agent-avatar.svelte';
+  import type { Agent } from './types';
+
+  type Props = {
+    /** The cast to lay out. */
+    agents: Agent[];
+    /** Selected agent id, when the cast is a picker. */
+    selectedId?: string | null;
+    /** Called with the agent that was picked. */
+    onSelect?: (agent: Agent) => void;
+    /** Hide the role line under each name. */
+    showRole?: boolean;
+    /** Extra props forwarded to every `<AgentAvatar>`. */
+    avatarProps?: Record<string, unknown>;
+    /** Minimum card width, any CSS length. Controls the column count. */
+    minColumn?: string;
+    class?: string;
+    style?: string;
+  };
+
+  let {
+    agents,
+    selectedId = null,
+    onSelect,
+    showRole = true,
+    avatarProps = {},
+    minColumn = '8.5rem',
+    class: className,
+    style,
+  }: Props = $props();
+
+  const keyOf = (agent: Agent) => agent.id ?? agent.name;
+
+  /* Group when any agent asks for one, otherwise a single flat grid. */
+  const sections = $derived.by(() => {
+    const anyGroup = agents.some((agent) => agent.group);
+    if (!anyGroup) return [{ label: '', items: agents }];
+    const order: string[] = [];
+    const byGroup = new Map<string, Agent[]>();
+    for (const agent of agents) {
+      const label = agent.group ?? '';
+      let list = byGroup.get(label);
+      if (!list) {
+        list = [];
+        byGroup.set(label, list);
+        order.push(label);
+      }
+      list.push(agent);
+    }
+    return order.map((label) => ({ label, items: byGroup.get(label) ?? [] }));
+  });
+
+  const rootStyle = $derived(
+    `--agent-cast-min:${minColumn};${style ?? ''}`,
+  );
+</script>
+
+<div
+  class={className ? `agent-cast ${className}` : 'agent-cast'}
+  style={rootStyle}
+>
+  {#each sections as section, s (section.label || `flat-${s}`)}
+    <section class="agent-cast__section">
+      {#if section.label}
+        <h3 class="agent-cast__heading">{section.label}</h3>
+      {/if}
+      <ul class="agent-cast__grid">
+        {#each section.items as agent (keyOf(agent))}
+          {@const id = keyOf(agent)}
+          <li>
+            <button
+              type="button"
+              class="agent-cast__card"
+              aria-current={id === selectedId ? 'true' : undefined}
+              onclick={() => onSelect?.(agent)}
+            >
+              <span class="agent-cast__slot">
+                <AgentAvatar
+                  name={agent.name}
+                  role={agent.role}
+                  shape={agent.shape ?? 'clover'}
+                  color={agent.color}
+                  {...avatarProps}
+                />
+              </span>
+              <span class="agent-cast__meta">
+                <span class="agent-cast__name">{agent.name}</span>
+                {#if showRole && agent.role}
+                  <span class="agent-cast__role">{agent.role}</span>
+                {/if}
+              </span>
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/each}
+</div>
+
+<style>
+  .agent-cast {
+    width: 100%;
+    color: var(--color-foreground, #18181b);
+  }
+  .agent-cast__section + .agent-cast__section {
+    margin-top: 2rem;
+  }
+  .agent-cast__heading {
+    margin: 0 0 0.75rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+  }
+  .agent-cast__grid {
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: repeat(auto-fill, minmax(var(--agent-cast-min, 8.5rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .agent-cast__card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0;
+    text-align: left;
+    background: var(--color-card, #fff);
+    border: 1px solid var(--color-border, #e4e4e7);
+    border-radius: 0.75rem;
+    cursor: pointer;
+    transition:
+      border-color 0.15s ease,
+      transform 0.15s ease;
+  }
+  .agent-cast__card:hover {
+    border-color: color-mix(in oklab, var(--color-foreground, #18181b) 25%, transparent);
+  }
+  .agent-cast__card:active {
+    transform: scale(0.985);
+  }
+  .agent-cast__card:focus-visible {
+    outline: 2px solid var(--color-ring, #6366f1);
+    outline-offset: 2px;
+  }
+  .agent-cast__card[aria-current='true'] {
+    border-color: var(--color-accent, #6366f1);
+    box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
+  }
+  .agent-cast__slot {
+    display: block;
+    width: 100%;
+  }
+  .agent-cast__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.625rem;
+  }
+  .agent-cast__name {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  .agent-cast__role {
+    font-size: 0.75rem;
+    line-height: 1.3;
+    color: var(--color-muted-foreground, #71717a);
+  }
+</style>

package/src/agents/demo.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import AgentAvatar from './agent-avatar.svelte';
+  import AgentCast from './agent-cast.svelte';
+  import type { Agent } from './types';
+
+  const cast: Agent[] = [
+    { id: 'ada', name: 'Ada', role: 'Researcher', shape: 'clover', color: '#41C4FF', group: 'Research' },
+    { id: 'bo', name: 'Bo', role: 'Analyst', shape: 'flower', group: 'Research' },
+    { id: 'cy', name: 'Cy', role: 'Planner', shape: 'mech', group: 'Planning' },
+    { id: 'dia', name: 'Dia', role: 'Scheduler', shape: 'droid', group: 'Planning' },
+    { id: 'eli', name: 'Eli', role: 'Writer', shape: 'cat', group: 'Craft' },
+    { id: 'fen', name: 'Fen', role: 'Editor', shape: 'pill', group: 'Craft' },
+    { id: 'gus', name: 'Gus', role: 'Runner', shape: 'ghost', group: 'Craft' },
+    { id: 'hal', name: 'Hal', role: 'Watcher', shape: 'star', group: 'Craft' },
+  ];
+
+  let selected = $state<string | null>('ada');
+  let lead = $derived(cast.find((agent) => agent.id === selected) ?? cast[0]);
+</script>
+
+<div class="demo">
+  <header class="demo__hero">
+    <div class="demo__portrait">
+      <AgentAvatar
+        name={lead.name}
+        role={lead.role}
+        shape={lead.shape}
+        color={lead.color}
+        state="working"
+        theme="light"
+      />
+    </div>
+    <div class="demo__intro">
+      <p class="demo__eyebrow">AgentCast</p>
+      <h1 class="demo__title">{lead.name}</h1>
+      <p class="demo__role">{lead.role}</p>
+    </div>
+  </header>
+
+  <AgentCast agents={cast} selectedId={selected} onSelect={(agent) => (selected = agent.id ?? agent.name)} />
+</div>
+
+<style>
+  .demo {
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 2rem 1.5rem 4rem;
+    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    color: #18181b;
+    background: #fafafa;
+  }
+  .demo__hero {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 2.5rem;
+  }
+  .demo__portrait {
+    flex: none;
+    width: 9rem;
+  }
+  .demo__eyebrow {
+    margin: 0;
+    font-size: 0.75rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #71717a;
+  }
+  .demo__title {
+    margin: 0.25rem 0 0;
+    font-size: 2.25rem;
+    letter-spacing: -0.03em;
+  }
+  .demo__role {
+    margin: 0.25rem 0 0;
+    color: #52525b;
+  }
+</style>

package/src/agents/index.ts

@@ -0,0 +1,11 @@
+export { default as AgentAvatar } from './agent-avatar.svelte';
+export { default as AgentCast } from './agent-cast.svelte';
+export type { Agent, AgentAvatarProps, AgentShape } from './types';
+export {
+  agentPresets,
+  agentShapes,
+  agentFaces,
+  agentStates,
+  agentPalette,
+  agentStateLabels,
+} from './types';

package/src/agents/types.ts

@@ -0,0 +1,72 @@
+import type { BotAvatarFace, BotAvatarProps, BotAvatarType } from './vendor/types';
+
+/** The body shapes an agent can be drawn as. */
+export type AgentShape = BotAvatarType;
+
+export type {
+  BotAvatarFace as AgentFace,
+  BotAvatarState as AgentState,
+  BotAvatarShading as AgentShading,
+  BotAvatarSquashEase as AgentSquashEase,
+  BotAvatarHat as AgentHat,
+  BotAvatarGlasses as AgentGlasses,
+  BotAvatarPreset as AgentPreset,
+} from './vendor/types';
+
+export {
+  botAvatarPresets as agentPresets,
+  botAvatarTypes as agentShapes,
+  botAvatarFaces as agentFaces,
+  botAvatarStates as agentStates,
+  botAvatarPalette as agentPalette,
+  stateLabels as agentStateLabels,
+} from './vendor/presets';
+
+/** One member of a cast: a name, a role, and the face they draw. */
+export type Agent = {
+  /** Stable key. Falls back to `name` when missing. */
+  id?: string;
+  /** Display name. */
+  name: string;
+  /** What they do. Shown under the name, read out with it. */
+  role?: string;
+  /** Body shape. Defaults to the avatar's own. */
+  shape?: AgentShape;
+  /** Body colour. Defaults to the shape's palette colour. */
+  color?: string;
+  /** Optional section heading. Agents sharing a group render together. */
+  group?: string;
+};
+
+/* The vendored props carry an open `Record<string, unknown>` index signature
+   so the canvas can forward loose attributes. Strip it before Omit, otherwise
+   every named prop collapses to `unknown`. */
+type KnownProps<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Props for `<AgentAvatar>`. Every engine prop from the bot avatar is
+ * available; `shape`, `color`, `name` and `role` are the plain ones.
+ */
+export type AgentAvatarProps = Omit<
+  KnownProps<BotAvatarProps>,
+  'type' | 'face' | 'ink' | 'size' | 'className' | 'style'
+> & {
+  /** Display name, for the default aria-label. */
+  name?: string;
+  /** What the agent does, read out with the name. */
+  role?: string;
+  /** Body shape. Default `clover`. */
+  shape?: AgentShape;
+  /** Face kind. Default `eyes`. */
+  face?: BotAvatarFace;
+  /** Face ink. Default `#1E1A33`. */
+  ink?: string;
+  /** Rendered size in px. Omit to fill 75% of the slot. */
+  size?: number;
+  class?: string;
+  style?: string;
+  onclick?: (event: MouseEvent) => void;
+  'aria-label'?: string;
+};

package/src/agents/vendor/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jakub Antalik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/agents/vendor/color.ts

@@ -0,0 +1,155 @@
+// @ts-nocheck WHY: vendored engine, kept as upstream wrote it so a re-sync stays a clean diff. Strict flags in consumers (review) would flag ~870 spots.
+/** Parse #rgb / #rrggbb / rgb() / hsl() into 0–255 channels; null for anything else. */
+export function parseColor(input: string): [number, number, number] | null {
+  const s = input.trim();
+  const hsl = s.match(/^hsla?\(\s*([\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%/i);
+  if (hsl) return hslToRgb([Number(hsl[1]) / 360, Number(hsl[2]) / 100, Number(hsl[3]) / 100]);
+  const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3)
+      h = h
+        .split("")
+        .map((c) => c + c)
+        .join("");
+    const n = parseInt(h, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  }
+  const rgb = s.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  return null;
+}
+
+/** Relative luminance (WCAG), 0–1. Unparseable colours count as mid-grey. */
+export function luminance(color: string): number {
+  const c = parseColor(color);
+  if (!c) return 0.5;
+  const lin = (v: number) => {
+    const x = v / 255;
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+}
+
+export const DARK_INK = "#1E1A33";
+export const LIGHT_INK = "#F7F5F2";
+
+/** Face ink for a body colour: dark ink, or light ink on a dark body. */
+export function autoInk(color: string): string {
+  return luminance(color) < 0.13 ? LIGHT_INK : DARK_INK;
+}
+
+/* ── HSL, for the body's shades ─────────────────────────────────────── */
+
+function rgbToHsl([r, g, b]: [number, number, number]): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return [h / 6, s, l];
+}
+
+function hslToRgb([h, s, l]: [number, number, number]): [number, number, number] {
+  if (s === 0) return [l * 255, l * 255, l * 255];
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const f = (t: number) => {
+    t = ((t % 1) + 1) % 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  return [f(h + 1 / 3) * 255, f(h) * 255, f(h - 1 / 3) * 255];
+}
+
+function hslToCss([h, s, l]: [number, number, number]): string {
+  return `hsl(${(h * 360).toFixed(1)} ${(s * 100).toFixed(1)}% ${(l * 100).toFixed(1)}%)`;
+}
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
+
+/**
+ * A shade of a colour: `dl` moves the lightness (−1..1), `ds` the
+ * saturation. Darker shades get a touch more saturation so they stay
+ * rich instead of going grey, the way a painted surface falls into shadow.
+ */
+export function shade(color: string, dl: number, ds = 0): string {
+  const c = parseColor(color);
+  if (!c) return color;
+  const [h, s, l] = rgbToHsl(c);
+  return hslToCss([h, clamp01(s + ds + (dl < 0 ? -dl * 0.25 : 0)), clamp01(l + dl)]);
+}
+
+/* OKLab, for moving a colour along its own hue (Björn Ottosson's) */
+const toLinear = (u: number) => (u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4));
+const toSrgb = (u: number) => (u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1 / 2.4) - 0.055);
+function oklab(r: number, g: number, b: number): [number, number, number] {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ];
+}
+function fromOklab(L: number, a: number, b: number): [number, number, number] {
+  const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
+  const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
+  const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ];
+}
+const inGamut = (c: [number, number, number]) => c.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+
+/** A more vivid version of a colour, `t` 0–1: its chroma raised along its
+    own hue (in OKLab) by up to half again. Where the screen cannot show that
+    at the same lightness, the colour deepens a little — by at most 15% of
+    its lightness — toward the hue's most vivid shade (a sky blue toward a
+    royal one), and the chroma stops at whatever the screen can show. */
+export function richer(color: string, t: number): string {
+  const c = parseColor(color);
+  if (!c || !(t > 0)) return color;
+  const [L, a, b] = oklab(toLinear(c[0] / 255), toLinear(c[1] / 255), toLinear(c[2] / 255));
+  const C = Math.hypot(a, b);
+  if (C < 1e-4) return color;
+  const ua = a / C,
+    ub = b / C;
+  const want = C * (1 + 0.5 * t);
+  let best: [number, number, number] | null = null,
+    bestC = C;
+  /* the lightness from the colour's own down to 15% deeper, in steps; at
+     each, the most chroma the screen shows up to `want` */
+  for (let k = 0; k <= 6; k++) {
+    const Lk = L * (1 - (0.15 * t * k) / 6);
+    let lo = 0,
+      hi = want;
+    for (let it = 0; it < 18; it++) {
+      const mid = (lo + hi) / 2;
+      if (inGamut(fromOklab(Lk, ua * mid, ub * mid))) lo = mid;
+      else hi = mid;
+    }
+    /* deeper only for what it gains: each step must buy real chroma */
+    if (lo > bestC + 0.004 * k) {
+      bestC = lo;
+      best = fromOklab(Lk, ua * lo, ub * lo);
+    }
+    if (lo >= want - 1e-4) break;
+  }
+  if (!best) return color;
+  const out = best.map((v) => Math.round(255 * toSrgb(Math.min(1, Math.max(0, v)))));
+  return `rgb(${out[0]} ${out[1]} ${out[2]})`;
+}