@cl-light-ds/ui 0.4.0 → 0.5.0

package/src/components/organisms/workspace/WorkspaceGlyph.astro

@@ -0,0 +1,62 @@
+---
+/**
+ * @component WorkspaceGlyph
+ * @title Workspace Glyph
+ * @description Organism part. What a workspace avatar shows: one of its placeholder icons, or the first letter of its name when the glyph is `initial`. The letter is centred in a box the size of the icon, so it sits in the middle of the avatar at every size.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceGlyph } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceGlyph icon="initial" name="Acme Logistics" class="size-5 text-base" />
+ * <WorkspaceGlyph icon="truck" class="size-5" />
+ * ```
+ *
+ * `class` sizes the icon, or the letter's box and its font size (give both a
+ * `size-*` and a `text-*`). Colour comes from `currentColor`.
+ *
+ * Hooks for scripts (e.g. an icon picker that swaps the glyph as you pick):
+ * `data-glyph` is the current glyph name, `data-slot="workspace-glyph-initial"`
+ * holds the letter.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { DEFAULT_WORKSPACE_ICON, workspaceInitial, type WorkspaceGlyphName } from "./icons";
+import WorkspaceIcon from "./WorkspaceIcon.astro";
+
+interface Props extends Omit<HTMLAttributes<"span">, "class"> {
+  /** An icon name, or `"initial"` for the first letter of `name`. */
+  icon: WorkspaceGlyphName | (string & {});
+  /** The workspace name, for the initial. With no name the initial falls back to the default icon. */
+  name?: string;
+  /** Size of the icon, or of the letter's box (add a `text-*` for the letter). */
+  class?: string;
+  /** Lucide stroke width for icons. */
+  strokeWidth?: number;
+}
+
+const { icon, name = "", class: className = "", strokeWidth, ...rest } = Astro.props as Props;
+const initial = workspaceInitial(name);
+const showInitial = icon === "initial" && initial !== "";
+const iconName = icon === "initial" ? DEFAULT_WORKSPACE_ICON : icon;
+---
+
+<span {...rest} data-slot="workspace-glyph" data-glyph={icon} class="flex items-center justify-center">
+  {
+    showInitial ? (
+      <span
+        data-slot="workspace-glyph-initial"
+        class={cn("flex size-4 items-center justify-center text-sm leading-none font-semibold", className)}
+        aria-hidden="true"
+      >
+        {initial}
+      </span>
+    ) : (
+      <WorkspaceIcon name={iconName} class={className} strokeWidth={strokeWidth} />
+    )
+  }
+</span>

package/src/components/organisms/workspace/WorkspaceIcon.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * @component WorkspaceIcon
+ * @title Workspace Icon
+ * @description Organism part. One of the 27 workspace placeholder Lucide icons, by name. Unknown names fall back to a building. Always decorative.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceIcon } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceIcon name="rocket" class="size-5" />
+ * ```
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { resolveWorkspaceIcon, type WorkspaceIconName } from "./icons";
+
+interface Props {
+  /** Icon name from `WORKSPACE_ICONS`. Unknown names show the building. */
+  name: WorkspaceIconName | (string & {});
+  /** Lucide stroke width; thinner reads better at large sizes. */
+  strokeWidth?: number;
+  class?: string;
+  /** Other SVG attributes pass through to the icon. */
+  [attribute: string]: unknown;
+}
+
+const { name, strokeWidth = 2, class: className = "", ...rest } = Astro.props as Props;
+const Icon = resolveWorkspaceIcon(name);
+---
+
+<Icon
+  {...rest}
+  data-slot="workspace-icon"
+  data-icon={name}
+  class={cn("size-4 shrink-0", className)}
+  stroke-width={strokeWidth}
+  aria-hidden="true"
+/>

package/src/components/organisms/workspace/WorkspaceIconPicker.astro

@@ -0,0 +1,288 @@
+---
+/**
+ * @component WorkspaceIconPicker
+ * @title Workspace Icon Picker
+ * @description Organism. Choose a workspace's colour and icon: a 64px avatar button opens a popover with the 12 palette colours, then the name's initial and the 27 placeholder icons. The avatar follows the choice as you pick.
+ *
+ * @preview
+ *
+ * <WorkspaceIconPicker name="Acme Logistics" color="blue" icon="initial" />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceIconPicker } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <form>
+ *   <WorkspaceIconPicker name="" color="blue" icon="initial" colorName="color" iconName="icon" />
+ *   <input name="name" data-workspace-name />
+ * </form>
+ *
+ * <script>
+ *   const picker = document.querySelector('[data-slot="workspace-icon-picker"]');
+ *   picker.addEventListener("workspace-icon-picker:change", (e) => console.log(e.detail)); // { color, icon }
+ *   // Keep the initial in step with the name as it is typed:
+ *   document.querySelector("[data-workspace-name]").addEventListener("input", (e) =>
+ *     picker.dispatchEvent(new CustomEvent("workspace-icon-picker:set", { detail: { name: e.target.value } })),
+ *   );
+ * </script>
+ * ```
+ *
+ * Colours are round swatches (the tint with a dot of the colour), ringed when
+ * chosen; icons are tiles, on the chosen colour's tint with a ring when
+ * chosen. Every swatch and tile is a button with `aria-pressed`. The popover
+ * stays open while you pick; Escape or a click outside closes it and returns
+ * focus to the avatar (popover runtime).
+ *
+ * With `colorName` / `iconName`, hidden inputs carry the choice in a form.
+ *
+ * @api
+ *
+ * ### Events (on the `[data-slot="workspace-icon-picker"]` root)
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `workspace-icon-picker:change` | `{ color, icon }` | Fired (bubbling) when a colour or icon is picked |
+ * | `workspace-icon-picker:set` | `{ color?, icon?, name? }` | Dispatch to set the colour, icon, or the name the initial is taken from. Doesn't fire `change` |
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  DEFAULT_WORKSPACE_COLOR,
+  WORKSPACE_COLORS,
+  workspacePalette,
+  type WorkspaceColor,
+} from "@cl-light-ds/ui/lib/workspace-palette";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { Separator } from "../../separator";
+import { WORKSPACE_GLYPHS, workspaceGlyphLabel, type WorkspaceGlyphName } from "./icons";
+import WorkspaceAvatar from "./WorkspaceAvatar.astro";
+import WorkspaceIconPickerGlyph from "./WorkspaceIconPickerGlyph.astro";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  /** The workspace name, for the initial. Can change later with `workspace-icon-picker:set`. */
+  name?: string;
+  /** The chosen colour. Defaults to blue. */
+  color?: WorkspaceColor;
+  /** The chosen glyph: an icon name, or `"initial"` (default). */
+  icon?: WorkspaceGlyphName;
+  /** Name of a hidden input carrying the colour, for forms. */
+  colorName?: string;
+  /** Name of a hidden input carrying the icon, for forms. */
+  iconName?: string;
+  /** Accessible name of the avatar button. */
+  label?: string;
+  /** Caps heading and group name over the colours. */
+  colorLabel?: string;
+  /** Caps heading and group name over the icons. */
+  iconLabel?: string;
+  /** Popover alignment against the avatar. */
+  align?: "start" | "center" | "end";
+  class?: string;
+}
+
+const {
+  name = "",
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  colorName,
+  iconName,
+  label = "Choose an icon and colour",
+  colorLabel = "Colour",
+  iconLabel = "Icon",
+  align = "start",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const swatch = workspacePalette[color] ?? workspacePalette[DEFAULT_WORKSPACE_COLOR];
+const colorTitle = (c: string) => c.charAt(0).toUpperCase() + c.slice(1);
+const tile =
+  "flex size-9 cursor-pointer items-center justify-center outline-none transition-[color,background-color,box-shadow] focus-visible:ring-3 focus-visible:ring-chart-1";
+---
+
+<div
+  {...rest}
+  data-slot="workspace-icon-picker"
+  data-color={color}
+  data-icon={icon}
+  data-name={name}
+  class={cn("inline-flex", className)}
+>
+  <Popover class="flex">
+    <PopoverTrigger
+      variant="ghost"
+      size="icon"
+      aria-label={label}
+      class="size-16 rounded-xl p-0 hover:bg-transparent hover:opacity-90 [&_svg]:size-full"
+      data-workspace-icon-picker-trigger
+    >
+      <WorkspaceAvatar color={color} size="xl" shape="square">
+        <WorkspaceIconPickerGlyph icon={icon} name={name} class="size-7 text-2xl" />
+      </WorkspaceAvatar>
+    </PopoverTrigger>
+
+    <PopoverContent align={align} class="w-80 max-w-[calc(100vw-1rem)] gap-3" data-workspace-icon-picker-content>
+      <p class="text-xs font-semibold tracking-wide text-muted-foreground uppercase" aria-hidden="true">
+        {colorLabel}
+      </p>
+      <div role="group" aria-label={colorLabel} class="grid grid-cols-6 gap-1">
+        {
+          WORKSPACE_COLORS.map((c) => (
+            <button
+              type="button"
+              class={cn(tile, "rounded-full hover:bg-background-hover aria-pressed:ring-2 aria-pressed:ring-ring")}
+              aria-label={colorTitle(c)}
+              aria-pressed={c === color ? "true" : "false"}
+              data-color-option={c}
+            >
+              <span class={cn("flex size-7 items-center justify-center rounded-full", workspacePalette[c].tint)}>
+                <span class={cn("size-3 rounded-full", workspacePalette[c].solid)} />
+              </span>
+            </button>
+          ))
+        }
+      </div>
+
+      <Separator />
+
+      <p class="text-xs font-semibold tracking-wide text-muted-foreground uppercase" aria-hidden="true">
+        {iconLabel}
+      </p>
+      <div role="group" aria-label={iconLabel} class="grid grid-cols-7 gap-1">
+        {
+          WORKSPACE_GLYPHS.map((g) => (
+            <button
+              type="button"
+              class={cn(
+                tile,
+                "rounded-md not-aria-pressed:text-foreground not-aria-pressed:hover:bg-background-hover aria-pressed:ring-1 aria-pressed:ring-ring",
+                g === icon && [swatch.tint, swatch.text],
+              )}
+              aria-label={workspaceGlyphLabel(g)}
+              aria-pressed={g === icon ? "true" : "false"}
+              data-icon-option={g}
+            >
+              <WorkspaceIconPickerGlyph icon={g} name={name} class="size-5 text-base" />
+            </button>
+          ))
+        }
+      </div>
+    </PopoverContent>
+  </Popover>
+
+  {colorName && <input type="hidden" name={colorName} value={color} data-workspace-icon-picker-color />}
+  {iconName && <input type="hidden" name={iconName} value={icon} data-workspace-icon-picker-icon />}
+</div>
+
+<script>
+  import { workspacePalette, type WorkspaceColor } from "@cl-light-ds/ui/lib/workspace-palette";
+
+  const wired = new WeakSet<Element>();
+  const initialOf = (name: string) => ([...name.trim()][0] ?? "").toLocaleUpperCase();
+  const classesOf = (color: string) => {
+    const s = workspacePalette[color as WorkspaceColor];
+    return s ? [s.tint, s.text] : [];
+  };
+
+  function wire(root: HTMLElement) {
+    if (wired.has(root)) return;
+    wired.add(root);
+
+    // Hold references now: the popover portals its content to <body> while open.
+    const content = root.querySelector<HTMLElement>("[data-workspace-icon-picker-content]");
+    const avatar = root.querySelector<HTMLElement>('[data-slot="workspace-avatar"]');
+    if (!content || !avatar) return;
+    const colorButtons = Array.from(content.querySelectorAll<HTMLElement>("[data-color-option]"));
+    const iconButtons = Array.from(content.querySelectorAll<HTMLElement>("[data-icon-option]"));
+    const colorInput = root.querySelector<HTMLInputElement>("[data-workspace-icon-picker-color]");
+    const iconInput = root.querySelector<HTMLInputElement>("[data-workspace-icon-picker-icon]");
+
+    let color = root.dataset.color ?? "blue";
+    let icon = root.dataset.icon ?? "initial";
+
+    const pressedTile = () => iconButtons.find((b) => b.dataset.iconOption === icon);
+
+    const setColor = (next: string) => {
+      if (!workspacePalette[next as WorkspaceColor]) return;
+      const from = classesOf(color);
+      const to = classesOf(next);
+      for (const el of [avatar, pressedTile()]) {
+        if (!el) continue;
+        el.classList.remove(...from);
+        el.classList.add(...to);
+      }
+      avatar.dataset.color = next;
+      color = next;
+      root.dataset.color = next;
+      for (const b of colorButtons) b.setAttribute("aria-pressed", String(b.dataset.colorOption === next));
+      if (colorInput) colorInput.value = next;
+    };
+
+    const setIcon = (next: string) => {
+      const button = iconButtons.find((b) => b.dataset.iconOption === next);
+      if (!button) return;
+      pressedTile()?.classList.remove(...classesOf(color));
+      icon = next;
+      root.dataset.icon = next;
+      button.classList.add(...classesOf(color));
+      for (const b of iconButtons) b.setAttribute("aria-pressed", String(b === button));
+      // Copy the tile's glyph into the avatar, keeping the avatar's glyph size.
+      const source = button.querySelector<HTMLElement>('[data-slot="workspace-icon-picker-glyph"]');
+      const target = avatar.querySelector<HTMLElement>('[data-slot="workspace-icon-picker-glyph"]');
+      if (source && target) {
+        const copy = source.cloneNode(true) as HTMLElement;
+        copy.className = target.className;
+        target.replaceWith(copy);
+      }
+      if (iconInput) iconInput.value = next;
+    };
+
+    /** The initial follows the name; with no name, the fallback icon shows. */
+    const setName = (name: string) => {
+      const letter = initialOf(name);
+      root.dataset.name = name;
+      for (const scope of [avatar, content]) {
+        for (const el of scope.querySelectorAll<HTMLElement>('[data-slot="workspace-icon-picker-initial"]')) {
+          el.textContent = letter;
+          el.hidden = !letter;
+        }
+        for (const el of scope.querySelectorAll<HTMLElement>('[data-slot="workspace-icon-picker-fallback"]')) {
+          el.hidden = Boolean(letter);
+        }
+      }
+    };
+
+    const emitChange = () =>
+      root.dispatchEvent(
+        new CustomEvent("workspace-icon-picker:change", { detail: { color, icon }, bubbles: true }),
+      );
+
+    for (const b of colorButtons) {
+      b.addEventListener("click", () => {
+        if (b.dataset.colorOption === color) return;
+        setColor(b.dataset.colorOption!);
+        emitChange();
+      });
+    }
+    for (const b of iconButtons) {
+      b.addEventListener("click", () => {
+        if (b.dataset.iconOption === icon) return;
+        setIcon(b.dataset.iconOption!);
+        emitChange();
+      });
+    }
+
+    root.addEventListener("workspace-icon-picker:set", (event) => {
+      const detail = (event as CustomEvent<{ color?: string; icon?: string; name?: string }>).detail ?? {};
+      if (detail.name !== undefined) setName(detail.name);
+      if (detail.color && detail.color !== color) setColor(detail.color);
+      if (detail.icon && detail.icon !== icon) setIcon(detail.icon);
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-slot="workspace-icon-picker"]').forEach(wire);
+</script>

package/src/components/organisms/workspace/WorkspaceIconPickerGlyph.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * Internal to `WorkspaceIconPicker`: the glyph on a tile and on the avatar.
+ * Unlike `WorkspaceGlyph`, the initial always renders both the letter and the
+ * fallback icon (one of them `hidden`), so the picker can follow a name that
+ * is typed in after the page loads. `class` sizes the box (`size-*`) and the
+ * letter (`text-*`); the icon fills the box.
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { DEFAULT_WORKSPACE_ICON, workspaceInitial } from "./icons";
+import WorkspaceIcon from "./WorkspaceIcon.astro";
+
+interface Props {
+  icon: string;
+  name?: string;
+  class?: string;
+}
+
+const { icon, name = "", class: className = "" } = Astro.props as Props;
+const letter = workspaceInitial(name);
+---
+
+<span
+  data-slot="workspace-icon-picker-glyph"
+  data-glyph={icon}
+  class={cn("flex shrink-0 items-center justify-center", className)}
+  aria-hidden="true"
+>
+  {
+    icon === "initial" ? (
+      <>
+        <span data-slot="workspace-icon-picker-initial" class="leading-none font-semibold" hidden={!letter}>
+          {letter}
+        </span>
+        <span data-slot="workspace-icon-picker-fallback" class="flex size-full" hidden={Boolean(letter)}>
+          <WorkspaceIcon name={DEFAULT_WORKSPACE_ICON} class="size-full" />
+        </span>
+      </>
+    ) : (
+      <WorkspaceIcon name={icon} class="size-full" />
+    )
+  }
+</span>

package/src/components/organisms/workspace/icons.ts

@@ -0,0 +1,98 @@
+import {
+  BookOpen,
+  Briefcase,
+  Building2,
+  Factory,
+  FlaskConical,
+  Globe,
+  GraduationCap,
+  HardHat,
+  Headset,
+  HeartPulse,
+  Landmark,
+  Leaf,
+  Lightbulb,
+  Mountain,
+  Package,
+  Plane,
+  Rocket,
+  Scale,
+  Server,
+  ShieldCheck,
+  ShoppingCart,
+  Store,
+  TrendingUp,
+  Truck,
+  Users,
+  Wallet,
+  Wrench,
+  type AstroComponent,
+} from "@lucide/astro";
+
+/**
+ * The workspace placeholder icon set: 27 Lucide icons a workspace can be given
+ * until it has a logo. String names, so backend data can store them. The order
+ * is the icon picker's order.
+ */
+export const workspaceIcons = {
+  "building-2": Building2,
+  briefcase: Briefcase,
+  users: Users,
+  "graduation-cap": GraduationCap,
+  "book-open": BookOpen,
+  landmark: Landmark,
+  wallet: Wallet,
+  "trending-up": TrendingUp,
+  "shopping-cart": ShoppingCart,
+  store: Store,
+  truck: Truck,
+  package: Package,
+  factory: Factory,
+  "hard-hat": HardHat,
+  wrench: Wrench,
+  server: Server,
+  headset: Headset,
+  "shield-check": ShieldCheck,
+  scale: Scale,
+  "heart-pulse": HeartPulse,
+  "flask-conical": FlaskConical,
+  globe: Globe,
+  plane: Plane,
+  leaf: Leaf,
+  rocket: Rocket,
+  lightbulb: Lightbulb,
+  mountain: Mountain,
+} satisfies Record<string, AstroComponent>;
+
+export type WorkspaceIconName = keyof typeof workspaceIcons;
+
+/** The 27 icon names, in picker order. */
+export const WORKSPACE_ICONS = Object.keys(workspaceIcons) as WorkspaceIconName[];
+
+/** What a workspace avatar can show: one of the icons, or the first letter of the name. */
+export type WorkspaceGlyphName = WorkspaceIconName | "initial";
+
+/** Every glyph an icon picker offers: the initial first, then the 27 icons. */
+export const WORKSPACE_GLYPHS: WorkspaceGlyphName[] = ["initial", ...WORKSPACE_ICONS];
+
+/** The icon for unknown names, and for an initial with no name to take it from. */
+export const DEFAULT_WORKSPACE_ICON: WorkspaceIconName = "building-2";
+
+/** The Lucide component for an icon name; unknown names fall back to the building. */
+export const resolveWorkspaceIcon = (name: string | undefined): AstroComponent =>
+  workspaceIcons[name as WorkspaceIconName] ?? workspaceIcons[DEFAULT_WORKSPACE_ICON];
+
+/** The first letter of a workspace name, upper-cased ("" when the name is blank). */
+export const workspaceInitial = (name: string | undefined): string =>
+  ([...(name ?? "").trim()][0] ?? "").toLocaleUpperCase();
+
+/**
+ * A readable label for a glyph, e.g. an icon picker's `aria-label`:
+ * "shield-check" → "Shield check", "building-2" → "Building",
+ * "initial" → "First letter of the name".
+ */
+export const workspaceGlyphLabel = (name: WorkspaceGlyphName): string => {
+  if (name === "initial") return "First letter of the name";
+  const words = name.replace(/-\d+$/, "").replace(/-/g, " ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};

package/src/components/organisms/workspace/index.ts

@@ -0,0 +1,35 @@
+export { default as OrganisationOverview } from "./OrganisationOverview.astro";
+export { default as WorkspaceCard } from "./WorkspaceCard.astro";
+export { default as RecentWorkspaceCard } from "./RecentWorkspaceCard.astro";
+export { default as RecentWorkspaces } from "./RecentWorkspaces.astro";
+export { default as WorkspaceIconPicker } from "./WorkspaceIconPicker.astro";
+export { default as WorkspaceAvatar } from "./WorkspaceAvatar.astro";
+export { workspaceAvatarVariants } from "./WorkspaceAvatar.astro";
+export { default as WorkspaceGlyph } from "./WorkspaceGlyph.astro";
+export { default as WorkspaceIcon } from "./WorkspaceIcon.astro";
+export {
+  DEFAULT_WORKSPACE_ICON,
+  WORKSPACE_GLYPHS,
+  WORKSPACE_ICONS,
+  resolveWorkspaceIcon,
+  workspaceGlyphLabel,
+  workspaceIcons,
+  workspaceInitial,
+  type WorkspaceGlyphName,
+  type WorkspaceIconName,
+} from "./icons";
+export {
+  DEFAULT_WORKSPACE_COLOR,
+  WORKSPACE_COLORS,
+  brandGradient,
+  workspacePalette,
+  type WorkspaceColor,
+  type WorkspaceSwatch,
+} from "@cl-light-ds/ui/lib/workspace-palette";
+export * from "./types";
+export {
+  defaultWorkspaceCardLabels,
+  fillLabel,
+  workspaceCardTexts,
+  type WorkspaceCardLabels,
+} from "./labels";

package/src/components/organisms/workspace/labels.ts

@@ -0,0 +1,54 @@
+/**
+ * The copy on workspace cards (`WorkspaceCard`, `RecentWorkspaceCard`,
+ * `RecentWorkspaces`), as templates so it can be translated. `{time}`,
+ * `{name}` and `{count}` are filled in.
+ */
+export interface WorkspaceCardLabels {
+  /** "Opened {time}", e.g. "Opened 2 hours ago". */
+  opened: string;
+  /** "Last edited by {name}". */
+  lastEditedBy: string;
+  /** "{count} recordings". */
+  recordings: string;
+  /** "{count} recording", for exactly one. */
+  recording: string;
+  /** The star's accessible name: "Favourite {name}". */
+  favorite: string;
+  /** The large recent card's caps line: "Jump back in". */
+  jumpBackIn: string;
+}
+
+export const defaultWorkspaceCardLabels: WorkspaceCardLabels = {
+  opened: "Opened {time}",
+  lastEditedBy: "Last edited by {name}",
+  recordings: "{count} recordings",
+  recording: "{count} recording",
+  favorite: "Favourite {name}",
+  jumpBackIn: "Jump back in",
+};
+
+/** Fills `{key}` placeholders in a template. */
+export const fillLabel = (template: string, values: Record<string, string | number>): string =>
+  template.replace(/\{(\w+)\}/g, (match, key: string) => (key in values ? String(values[key]) : match));
+
+/** The card texts for one workspace; parts whose data is missing are `""`. */
+export function workspaceCardTexts(
+  data: { name: string; opened?: string; lastEditedBy?: string; recordings?: number | string },
+  labels: Partial<WorkspaceCardLabels> = {},
+) {
+  const l = { ...defaultWorkspaceCardLabels, ...labels };
+  const { name, opened, lastEditedBy, recordings } = data;
+  const recordingsText =
+    recordings === undefined || recordings === ""
+      ? ""
+      : typeof recordings === "number"
+        ? fillLabel(recordings === 1 ? l.recording : l.recordings, { count: recordings })
+        : recordings;
+  return {
+    opened: opened ? fillLabel(l.opened, { time: opened }) : "",
+    lastEditedBy: lastEditedBy ? fillLabel(l.lastEditedBy, { name: lastEditedBy }) : "",
+    recordings: recordingsText,
+    favorite: fillLabel(l.favorite, { name }),
+    jumpBackIn: l.jumpBackIn,
+  };
+}

package/src/components/organisms/workspace/types.ts

@@ -0,0 +1,30 @@
+import type { WorkspaceColor } from "@cl-light-ds/ui/lib/workspace-palette";
+
+/** `WorkspaceAvatar` colour treatments. */
+export type WorkspaceAvatarTone = "soft" | "solid" | "inverse" | "brand";
+
+/** `WorkspaceAvatar` sizes: 32 / 40 / 56 / 64px. */
+export type WorkspaceAvatarSize = "sm" | "default" | "lg" | "xl";
+
+/** `WorkspaceAvatar` shapes: round, or a rounded square. */
+export type WorkspaceAvatarShape = "circle" | "square";
+
+/** `RecentWorkspaceCard` sizes: large (gradient), medium (tall), small (two stacked), extra small (one row). */
+export type RecentWorkspaceCardSize = "lg" | "md" | "sm" | "xs";
+
+/** The large recent card's background: the workspace's own gradient, or the brand gradient. */
+export type RecentWorkspaceTone = "workspace" | "brand";
+
+/** One workspace for `RecentWorkspaces`. Other keys (e.g. `data-*`) go on its card's link. */
+export interface RecentWorkspace {
+  name: string;
+  href: string;
+  color?: WorkspaceColor;
+  /** A placeholder icon name, or `"initial"`. */
+  icon?: string;
+  /** When it was last opened, e.g. "2 hours ago" ("Opened 2 hours ago"). */
+  opened?: string;
+  lastEditedBy?: string;
+  recordings?: number | string;
+  [attribute: `data-${string}`]: string | undefined;
+}

package/src/components/profile-menu/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+All notable changes to the `ProfileMenu` component are documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N13)
+
+### Added
+
+- `ProfileMenu`, built on `DropdownMenu`:
+  - **Trigger (C15, D103):** the user's `Avatar` (32px) is the trigger: a chrome-less round `<button data-slot="dropdown-menu-trigger">` around it, with a `ring-2 ring-ring` focus ring and no hover ring. Because the button *is* the runtime's trigger (not an `asChild` wrapper), `aria-haspopup`, `aria-expanded` and Esc focus return land on it, as D103 asked frontend to do.
+  - **Panel:** `w-64`, `align="end"`, opens **6px** below the avatar (`sideOffset` 6, C28, D206) instead of the menus' default 4px. Scroll lock is off by default (`lockScroll`), as in the reference.
+  - **Header (D180):** avatar, name (semibold, truncates) and email (muted). No role line. `header` slot to replace it.
+  - **Upgrade:** a full-width `sm` primary button whose label comes from `plan` looked up in `upgradeLabels` — defaults `trial` → "Upgrade to Pro", `pro` → "Upgrade to Enterprise", `enterprise` → none. `upgradeLabel` overrides (`false` hides), `upgradeHref` navigates, `upgrade` slot replaces it. It is a menu item (value `upgrade`), so arrow keys reach it.
+  - **Items:** `items` prop (`id`, `label`, `icon`, `href`, `variant`, `separatorBefore`), defaulting to Manage profile, Get desktop app, separator, Log out. The default slot replaces them with your own `DropdownMenuItem`s.
+- `profile-menu:select` event (`{ id }`, bubbles, cancelable), fired for items and the upgrade button. Items with an `href` navigate unless it's cancelled (same contract as `sidebar-nav:workspace-change`).
+- `defaultProfileMenuUpgradeLabels` and the `ProfileMenuItemData` / `ProfileMenuUpgradeLabels` types are exported.
+
+### Generalised from the reference (cl-design `ProfileMenu.astro`)
+
+- User, plan and the plan → label mapping come from props instead of the screen's mock data and `upgradeLabel()` helper.
+- Items are data or slots instead of fixed markup; copy is props with the reference's labels as defaults.