@cl-light-ds/ui 0.4.0 → 0.5.0

package/src/components/option-card/OptionCard.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * @component OptionCard
+ * @title Option Card
+ * @description A radio choice drawn as a card: radio, bold title (with an optional badge), description. The chosen card has a primary border on the accent tint, and can open more content inside it. Goes inside a `RadioGroup`, which owns selection, keyboard and ARIA.
+ *
+ * @preview
+ *
+ * <RadioGroup name="mode" defaultValue="copy" aria-label="How content is brought across" class="gap-3">
+ *   <OptionCard value="copy" title="Make independent copies" description="The new workspace gets its own copies.">
+ *     <Badge slot="badge" variant="accent" size="sm" class="border-chart-1">Recommended</Badge>
+ *   </OptionCard>
+ *   <OptionCard value="link" title="Link to the original" description="Any change made in either workspace appears in both." />
+ * </RadioGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RadioGroup } from '@cl-light-ds/ui/components/radio-group';
+ * import { OptionCard } from '@cl-light-ds/ui/components/option-card';
+ * ---
+ *
+ * <RadioGroup name="export" defaultValue="full" aria-label="What to export" class="gap-3">
+ *   <OptionCard value="full" title="Full workspace" description="Recordings, settings and team members." />
+ *   <OptionCard value="choose" title="Choose what to include" description="Pick exactly which parts to export." content="panel">
+ *     <!-- shown only while this option is chosen -->
+ *   </OptionCard>
+ * </RadioGroup>
+ * ```
+ *
+ * The title, badge and description are the radio's `<label>`, so the whole
+ * top of the card selects it. The default slot is outside the label (it may
+ * hold its own controls, e.g. checkboxes) and is shown only while the card is
+ * chosen:
+ *
+ * - `content="inset"`: lined up under the description, after a divider, small muted text (notes).
+ * - `content="panel"`: a white bordered panel inset in the card (a checklist).
+ * - `content="plain"`: no styling, only the show/hide.
+ *
+ * Listen for `radio-group:change` on the `RadioGroup` for the value.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { RadioGroupItem } from "../radio-group";
+
+type OptionCardContent = "inset" | "panel" | "plain";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class" | "title"> {
+  /** The radio value. */
+  value: string;
+  /** Bold title. Or use the `title` slot. */
+  title?: string;
+  /** Muted text under the title. Or use the `description` slot. */
+  description?: string;
+  /** How the nested (default slot) content is framed while chosen. */
+  content?: OptionCardContent;
+  disabled?: boolean;
+  /** id for the radio item. */
+  id?: string;
+  class?: string;
+}
+
+const {
+  value,
+  title,
+  description,
+  content = "inset",
+  disabled = false,
+  id,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasBadge = Astro.slots.has("badge");
+const hasTitleSlot = Astro.slots.has("title");
+const hasDescriptionSlot = Astro.slots.has("description");
+const hasContent = Astro.slots.has("default");
+
+const optionCardContentVariants = cva(
+  // Hidden until this card's own radio (not one nested in the content) is checked.
+  "hidden group-has-[>[data-slot=option-card-label]>[data-checked]]/option-card:block",
+  {
+    variants: {
+      content: {
+        inset: "-mt-2 mr-4 mb-4 ml-11 border-t pt-3 text-xs text-muted-foreground",
+        panel: "mx-3 mb-3 rounded-lg border bg-background",
+        plain: "",
+      },
+    },
+    defaultVariants: { content: "inset" },
+  },
+);
+---
+
+<div
+  {...rest}
+  data-slot="option-card"
+  data-value={value}
+  class={cn(
+    "group/option-card flex flex-col rounded-lg border bg-card transition-colors",
+    "has-[>[data-slot=option-card-label]>[data-checked]]:border-primary has-[>[data-slot=option-card-label]>[data-checked]]:bg-badge-accent/50",
+    "has-[>[data-slot=option-card-label]>[data-disabled]]:opacity-50",
+    className,
+  )}
+>
+  <label
+    data-slot="option-card-label"
+    class="flex cursor-pointer items-start gap-3 p-4 text-sm text-foreground has-[>[data-disabled]]:cursor-not-allowed"
+  >
+    <RadioGroupItem value={value} id={id} disabled={disabled} class="mt-0.5" />
+    <span class="flex min-w-0 flex-col gap-1">
+      <span data-slot="option-card-title" class="flex flex-wrap items-center gap-2 font-semibold">
+        {hasTitleSlot ? <slot name="title" /> : title}
+        {hasBadge && <slot name="badge" />}
+      </span>
+      {
+        (hasDescriptionSlot || description) && (
+          <span data-slot="option-card-description" class="text-muted-foreground">
+            {hasDescriptionSlot ? <slot name="description" /> : description}
+          </span>
+        )
+      }
+    </span>
+  </label>
+  {
+    hasContent && (
+      <div data-slot="option-card-content" class={optionCardContentVariants({ content })}>
+        <slot />
+      </div>
+    )
+  }
+</div>

package/src/components/option-card/index.ts

@@ -0,0 +1 @@
+export { default as OptionCard } from "./OptionCard.astro";

package/src/components/organisms/top-bar/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to the top bar organism (`organisms/top-bar`) will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N12, C1)
+
+### Added
+
+- `TopBar` (N12): the organisation-level application bar, 41px including its bottom border (D23): 4px above and below the 32px controls. Sticky by default (`StickySurface`; `sticky={false}` for a plain bar).
+  - Left: a breadcrumb from `crumbs` (`{ label, href? }[]`, the last one current, crumbs without `href` as plain text), or the `breadcrumb` slot. It doesn't wrap; the current crumb truncates.
+  - Right, in order: the `search` slot (e.g. `CommandSearch`), the New workspace split button, the `notifications` slot (e.g. `NotificationsMenu`), the `profile` slot (e.g. `ProfileMenu`).
+  - Split button: primary `primaryLabel` ("New workspace", `primaryShortLabel` "New" on phones) + separator + chevron `DropdownMenu` with `menuItems` (default Import workspace, `id: "import"`). `splitButton={false}` hides it, the `actions` slot replaces it, `menuItems={[]}` drops the chevron. Uses the C2 split-button styles already in `ButtonGroup`.
+  - Event `top-bar:action` (`{ action }`, bubbles, cancelable) on the primary button (`primaryAction`, default `"new-workspace"`) or a row (its `id`); a row with `href` navigates unless cancelled. The button and rows also carry `data-action`.
+  - Holds the toast stack (N9): a `Toaster` with `top` = `TOP_BAR_HEIGHT` (41px), right-aligned with the bar's padding. The bar's surface is the containing block of the stack, so it hangs from the bar's right end and follows it. `toaster={false}` leaves it out; `toasterId`, `toasterOffset`.
+- `types.ts`: `TopBarCrumb`, `TopBarMenuItem`, `TopBarActionDetail`, `TOP_BAR_HEIGHT`.
+- Storybook: "Top Bar" under Organisms.
+
+### Breadcrumb inside the bar (C1)
+
+- Crumbs are 32px tall (`py-1.5`, was the pill's `py-2`, 36px) with 6px either side of the chevron (`px-1.5`, was `px-3`), so the bar stays 41px (D23, D97). The first crumb is pulled back by its padding so its text lines up with the bar's edge. Applied inside the organism; the generic `Breadcrumb` is unchanged.

package/src/components/organisms/top-bar/TopBar.astro

@@ -0,0 +1,264 @@
+---
+/**
+ * @component TopBar
+ * @title Top Bar
+ * @description Organism. The organisation-level application bar, 41px with its bottom border: a breadcrumb on the left; on the right, in order, command search, a New workspace split button (with Import workspace), the notifications bell and the profile avatar. It hosts the toast stack under its right end. Sticky.
+ *
+ * @preview
+ *
+ * <TopBar crumbs={[{ label: "Acme Inc." }, { label: "Workspaces" }]} toaster={false}>
+ *   <CommandSearch slot="search" triggerClass="hidden md:inline-flex" />
+ *   <NotificationsMenu slot="notifications" notifications={notifications} />
+ *   <ProfileMenu slot="profile" name="Wiley Fox" email="wiley.fox@northwind.com" plan="trial" />
+ * </TopBar>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { TopBar } from '@cl-light-ds/ui/components/organisms/top-bar';
+ * import { CommandSearch } from '@cl-light-ds/ui/components/command-search';
+ * import { NotificationsMenu } from '@cl-light-ds/ui/components/notifications-menu';
+ * import { ProfileMenu } from '@cl-light-ds/ui/components/profile-menu';
+ * ---
+ *
+ * <TopBar crumbs={[{ label: org.name }, { label: 'Workspaces' }]}>
+ *   <CommandSearch slot="search" mode="remote" triggerClass="hidden md:inline-flex" />
+ *   <NotificationsMenu slot="notifications" notifications={notifications} />
+ *   <ProfileMenu slot="profile" name={user.name} email={user.email} plan={org.plan} />
+ * </TopBar>
+ *
+ * <script>
+ *   document.querySelector('[data-slot="top-bar"]')?.addEventListener('top-bar:action', (event) => {
+ *     const { action } = event.detail; // "new-workspace" | "import"
+ *   });
+ * </script>
+ * ```
+ *
+ * @api
+ *
+ * ### Slots
+ *
+ * | Slot | Description |
+ * |------|-------------|
+ * | `breadcrumb` | Replaces the breadcrumb built from `crumbs`. |
+ * | `search` | The command search trigger, e.g. `CommandSearch`. |
+ * | `actions` | Replaces the split button. |
+ * | `notifications` | The bell, e.g. `NotificationsMenu`. |
+ * | `profile` | The avatar, e.g. `ProfileMenu`. |
+ *
+ * ### Events (on the `[data-slot="top-bar"]` root)
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `top-bar:action` | `{ action }` | Bubbles, cancelable. The primary button (`primaryAction`, default `"new-workspace"`) or a menu row (its `id`, default `"import"`) was chosen. A row with an `href` navigates unless cancelled. |
+ *
+ * The primary button and the rows also carry `data-action`, for scripts that
+ * prefer to bind clicks themselves. To open a file picker on Import, call
+ * `input.click()` inside the `top-bar:action` handler: it still runs within the
+ * user's click.
+ */
+import { ChevronDown, Plus, Upload } from "@lucide/astro";
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from "../../breadcrumb";
+import { Button } from "../../button";
+import { ButtonGroup, ButtonGroupSeparator } from "../../button-group";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown-menu";
+import { StickySurface } from "../../sticky-surface";
+import { Toaster } from "../../toast";
+import { TOP_BAR_HEIGHT, type TopBarCrumb, type TopBarMenuItem } from "./types";
+
+interface Props extends HTMLAttributes<"header"> {
+  /** Breadcrumb trail; the last one is the current page. The `breadcrumb` slot replaces it. */
+  crumbs?: TopBarCrumb[];
+  /** Accessible name of the breadcrumb nav. */
+  breadcrumbLabel?: string;
+  /** Show the split button. The `actions` slot replaces it. */
+  splitButton?: boolean;
+  /** Primary button label from `sm` up. */
+  primaryLabel?: string;
+  /** Primary button label on phones. */
+  primaryShortLabel?: string;
+  /** `data-action` of the primary button and the `action` it sends. */
+  primaryAction?: string;
+  /** Accessible name of the chevron. */
+  menuLabel?: string;
+  /** Rows of the chevron's menu. Default: Import workspace (`id: "import"`). Empty: no chevron. */
+  menuItems?: TopBarMenuItem[];
+  /** Stick to the top of the scrolling container. */
+  sticky?: boolean;
+  /** Render a `Toaster` hanging from the bar's right end. Turn off when the page has its own. */
+  toaster?: boolean;
+  /** Id of that Toaster, to target it with `toast({ toaster })`. */
+  toasterId?: string;
+  /** Gap between the bar and the toast stack. */
+  toasterOffset?: string;
+  class?: string;
+}
+
+const defaultMenuItems: TopBarMenuItem[] = [{ id: "import", label: "Import workspace", icon: Upload }];
+
+const {
+  crumbs = [],
+  breadcrumbLabel = "Breadcrumb",
+  splitButton = true,
+  primaryLabel = "New workspace",
+  primaryShortLabel = "New",
+  primaryAction = "new-workspace",
+  menuLabel = "More ways to add a workspace",
+  menuItems = defaultMenuItems,
+  sticky = true,
+  toaster = true,
+  toasterId,
+  toasterOffset,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasBreadcrumbSlot = Astro.slots.has("breadcrumb");
+const hasActionsSlot = Astro.slots.has("actions");
+
+/*
+ * D23 — 41px: 4px above and below the 32px controls, plus the 1px border.
+ * The side padding matches the Toaster's default right inset (1rem, 1.5rem from md),
+ * so the stack lines up with the bar's right end.
+ */
+const topBarVariants = cva(
+  "bg-background relative flex items-center gap-4 border-b px-4 py-1 md:px-6",
+);
+
+/*
+ * C1 — the generic Breadcrumb pads crumbs as 36px pills (px-3 py-2). Here they are
+ * 32px (py-1.5), like the buttons, so the bar stays 41px, with 6px (px-1.5) either side
+ * of the chevron (D23, D97). The first crumb is pulled back by its padding so its text
+ * lines up with the bar's edge.
+ */
+const crumbClass =
+  "min-w-0 gap-0 [&_a]:px-1.5 [&_a]:py-1.5 [&_[aria-current=page]]:px-1.5 [&_[aria-current=page]]:py-1.5 first:-ms-1.5";
+const lastIndex = crumbs.length - 1;
+const Wrapper = sticky ? StickySurface : "div";
+---
+
+<Wrapper data-slot="top-bar-surface" class={sticky ? undefined : "relative z-50 w-full will-change-transform"}>
+  <header {...rest} data-slot="top-bar" class={cn(topBarVariants(), className)}>
+    <div data-slot="top-bar-start" class="flex min-w-0 flex-1 items-center">
+      {
+        hasBreadcrumbSlot ? (
+          <slot name="breadcrumb" />
+        ) : (
+          crumbs.length > 0 && (
+            <Breadcrumb aria-label={breadcrumbLabel} class="min-w-0">
+              <BreadcrumbList class="flex-nowrap">
+                {crumbs.map((crumb, i) => (
+                  <>
+                    {i > 0 && <BreadcrumbSeparator />}
+                    <BreadcrumbItem class={cn(crumbClass, i === lastIndex && "min-w-0")}>
+                      {i === lastIndex ? (
+                        <span aria-current="page" class="text-foreground max-w-full min-w-0">
+                          <span class="min-w-0 truncate">{crumb.label}</span>
+                        </span>
+                      ) : crumb.href ? (
+                        <a href={crumb.href} class="whitespace-nowrap">
+                          {crumb.label}
+                        </a>
+                      ) : (
+                        <span class="text-muted-foreground px-1.5 py-1.5 whitespace-nowrap">{crumb.label}</span>
+                      )}
+                    </BreadcrumbItem>
+                  </>
+                ))}
+              </BreadcrumbList>
+            </Breadcrumb>
+          )
+        )
+      }
+    </div>
+
+    <div data-slot="top-bar-end" class="flex shrink-0 items-center gap-2">
+      <slot name="search" />
+
+      {
+        hasActionsSlot ? (
+          <slot name="actions" />
+        ) : (
+          splitButton && (
+            <ButtonGroup data-slot="top-bar-split-button">
+              <Button size="sm" type="button" data-action={primaryAction} data-top-bar-primary>
+                <Plus slot="lead-icon" />
+                <span class="hidden sm:inline">{primaryLabel}</span>
+                <span class="sm:hidden">{primaryShortLabel}</span>
+              </Button>
+              {menuItems.length > 0 && <ButtonGroupSeparator />}
+              {menuItems.length > 0 && (
+                <DropdownMenu lockScroll={false} class="flex" data-top-bar-menu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="icon-sm" type="button" aria-label={menuLabel}>
+                      <ChevronDown />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" class="w-52">
+                    {menuItems.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <DropdownMenuItem value={item.id} data-action={item.id} data-href={item.href}>
+                          {Icon && <Icon slot="leading-icon" />}
+                          {item.label}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </ButtonGroup>
+          )
+        )
+      }
+
+      <slot name="notifications" />
+      <slot name="profile" />
+    </div>
+  </header>
+
+  {
+    /*
+      N9, D160 — the toast stack hangs from the bar's right end. The surface has
+      will-change: transform, which makes it the containing block of the Toaster's
+      fixed viewport: the stack is placed against the bar and follows it.
+    */
+  }
+  {toaster && <Toaster top={TOP_BAR_HEIGHT} offset={toasterOffset} id={toasterId} />}
+</Wrapper>
+
+<script>
+  import type { TopBarActionDetail } from "./types";
+
+  const emit = (root: HTMLElement, action: string) =>
+    root.dispatchEvent(
+      new CustomEvent<TopBarActionDetail>("top-bar:action", {
+        bubbles: true,
+        cancelable: true,
+        detail: { action },
+      }),
+    );
+
+  document.querySelectorAll<HTMLElement>('[data-slot="top-bar"]').forEach((root) => {
+    if (root.dataset.topBarWired) return;
+    root.dataset.topBarWired = "";
+
+    root.querySelector<HTMLElement>("[data-top-bar-primary]")?.addEventListener("click", (event) => {
+      const action = (event.currentTarget as HTMLElement).dataset.action;
+      if (action) emit(root, action);
+    });
+
+    root.querySelector<HTMLElement>("[data-top-bar-menu]")?.addEventListener("dropdown-menu:select", (event) => {
+      event.stopPropagation();
+      const { value, item } = (event as CustomEvent<{ value: string; item: HTMLElement | null }>).detail;
+      const proceed = emit(root, value);
+      const href = item?.dataset.href;
+      if (proceed && href) window.location.assign(href);
+    });
+  });
+</script>

package/src/components/organisms/top-bar/index.ts

@@ -0,0 +1,2 @@
+export { default as TopBar } from "./TopBar.astro";
+export * from "./types";

package/src/components/organisms/top-bar/types.ts

@@ -0,0 +1,30 @@
+import type { AstroComponent } from "@lucide/astro";
+
+/** One breadcrumb in the top bar. The last one is the current page. */
+export interface TopBarCrumb {
+  label: string;
+  /** Link to that level. Left out: plain text (e.g. no organisation page yet). */
+  href?: string;
+}
+
+/** One row in the split button's menu (the chevron half). */
+export interface TopBarMenuItem {
+  /** Sent as `action` in `top-bar:action`, and set as `data-action` on the row. */
+  id: string;
+  label: string;
+  icon?: AstroComponent;
+  /** Navigate here when chosen (unless `top-bar:action` is cancelled). */
+  href?: string;
+}
+
+/** `detail` of the `top-bar:action` event. */
+export interface TopBarActionDetail {
+  /** The primary button's `primaryAction`, or a menu row's `id`. */
+  action: string;
+}
+
+/**
+ * The bar's height including its bottom border (D23): 4px + 32px controls +
+ * 4px + 1px border. The Toaster hangs from here.
+ */
+export const TOP_BAR_HEIGHT = "41px";

package/src/components/organisms/workspace/CHANGELOG.md

@@ -0,0 +1,73 @@
+# Changelog
+
+All notable changes to the workspace organisms (`organisms/workspace`) will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N16)
+
+### Added
+
+- `WorkspaceIconPicker`: a 64px soft square `WorkspaceAvatar` button (`PopoverTrigger`) opening a `Popover` (320px): the 12 `WORKSPACE_COLORS` as round swatches (the tint with a dot of the colour, ringed when chosen), a separator, then the initial and the 27 icons (`WORKSPACE_GLYPHS`) as tiles, on the chosen colour's tint with a ring when chosen. The avatar follows the choice live; the popover stays open while you pick.
+  - Props: `name` (for the initial), `color` (default blue), `icon` (default `initial`), `colorName` / `iconName` (hidden inputs for forms), `label` (the avatar button's name, default "Choose an icon and colour"), `colorLabel` / `iconLabel` (default "Colour" / "Icon"), `align` (default `start`), `class`; other attributes go on the root.
+  - Events on `[data-slot="workspace-icon-picker"]`: `workspace-icon-picker:change` (`{ color, icon }`, bubbling) when something is picked; dispatch `workspace-icon-picker:set` (`{ color?, icon?, name? }`) to set it from outside, e.g. to keep the initial in step with a name field (no `change` fired).
+  - Keyboard: every swatch and tile is a button with `aria-pressed`, in two named groups; Escape closes the popover and returns focus to the avatar (popover runtime). No focus trap of its own (Tab inside dialogs is fixed upstream).
+  - The initial renders the letter and the fallback icon side by side (one `hidden`), so a name typed after load (empty to start with) shows its letter; this is `WorkspaceIconPickerGlyph`, internal to the picker.
+- Not taken over from the screen: the New workspace dialog's preview zoom (`data-name-zoom`) and its Tab handling inside the dialog (C7).
+- Storybook: "Workspace Icon Picker" under Organisms.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N3–N6)
+
+### Added
+
+- `RecentWorkspaceCard`: a recent workspace as a shortcut card, one component with `size`:
+  - `lg` (N3): gradient in the workspace colour (`workspacePalette[color].gradient`, or `brandGradient` with `tone="brand"`), 16px corners, the ring artwork (`recent-card-rings-strong.png`, 140% of the card's height, pinned bottom right, decorative); 56px inverse avatar (brand tone with `tone="brand"`) top left, "Jump back in" (12px caps, with a clock icon) top right; the name (30px semibold) on a divider; "Opened … · Last edited by …" and the recordings (14px) under it; a white arrow centred on the right. At least 222px high.
+  - `md` (N4): white; 56px soft avatar; name (18px) and "Opened …" (16px) on the divider; "Last edited by …" and the recordings (14px); 20px arrow centred on the right. At least 222px high.
+  - `sm` (N5): 40px avatar, then the name (14px semibold) and "Opened …" (12px); 20px arrow centred on the right; 10px padding top and bottom.
+  - `xs` (N6): one row: 40px avatar, name and "Opened …", 16px arrow.
+  - Props: `name`, `href`, `color`, `icon`, `size` (default `lg`), `tone` (`workspace` | `brand`, `lg` only), `opened`, `lastEditedBy`, `recordings`, `labels`, `class`; other attributes go on the link.
+  - Every size is `Card as="a" interactive`: the whole card is one link with the card's focus ring (offset on the gradient card) and the hover / focus lift (C14). The full name is in `title`.
+- `RecentWorkspaces`: lays out 1–4 recents (`items`, most recent first; more are ignored, none renders nothing): the large card, and beside it on `lg` screens a medium card (2), two small cards stacked (3) or three extra small cards stacked (4) sharing its 222px. One recent takes the row. Props: `items` (`RecentWorkspace[]`), `tone`, `label` (section name, default "Recent workspaces"), `labels`, `class`. `data-count` on the section.
+- Types: `RecentWorkspace`, `RecentWorkspaceCardSize`, `RecentWorkspaceTone`.
+- Generalised from the screen: sizes are a prop instead of following the section's `data-count` through group variants; copy through `labels`; the recents strip's own controls (show 1–4, `data-beyond`) are left to the app.
+- Storybook: "Recent Workspaces" under Organisms.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N7)
+
+### Added
+
+- `WorkspaceCard`: a workspace in a grid. 40px soft square `WorkspaceAvatar`; a `FavoriteToggle` and an `actions` slot (for a ⋯ `DropdownMenu`) top right; the name (16px semibold, truncates, full name in `title`) and "Opened …" (14px); under a divider "Last edited by …" and the recordings (12px).
+  - Props: `name`, `href`, `color`, `icon`, `opened` (e.g. "2 hours ago"), `lastEditedBy`, `recordings` (number, or a string), `favorite`, `showFavorite` (default `true`), `labels`, `class`; other attributes go on the root (e.g. `data-workspace-id`, `hidden`).
+  - The name is a stretched link over the card, so the card opens from anywhere while the star and the actions stay separate controls above it (no interactive content inside the link). The focus ring goes round the whole card while the link has keyboard focus.
+  - The star shows only on a favourite, or while the card is hovered or has keyboard focus inside it; always on touch screens. Save changes from its `toggle:change` event.
+  - Lifts on hover and keyboard focus through `Card`'s new `interactive` prop (C14).
+- `labels.ts`: `WorkspaceCardLabels` (`opened`, `lastEditedBy`, `recordings`, `recording`, `favorite`, `jumpBackIn` templates with `{time}`/`{name}`/`{count}`), `defaultWorkspaceCardLabels`, `fillLabel()`, `workspaceCardTexts()`; shared by the workspace cards.
+- Not taken over from the screen: shortening editor names to "A.Silva" (D128); the card truncates instead, with the full text in `title`.
+- Storybook: "Workspace Card" under Organisms.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N17)
+
+### Added
+
+- `OrganisationOverview`: "ORGANISATION" (12px, semibold, caps, muted) over the organisation name (14px semibold) and its plan (muted, after " · "), right-aligned (D113). Props: `name`, `plan` (optional), `label` (default "Organisation"), `align` (`end` default, or `start`), `class`. Hiding it on phones and placing it are left to the consumer. `data-slot="organisation-overview-plan"` wraps the plan for scripts.
+- Storybook: "Organisation Overview" under Organisms.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N2)
+
+### Added
+
+- `WorkspaceAvatar`: a workspace's placeholder icon or initial on its palette colour (`@cl-light-ds/ui/lib/workspace-palette`).
+  - `color`: one of the 12 `WORKSPACE_COLORS` (default `blue`).
+  - `tone`: `soft` (tint + coloured glyph, default), `solid` (colour + white glyph), `inverse` (white + coloured glyph), `brand` (white + primary glyph).
+  - `shape`: `circle` (default) or `square` (`rounded-lg`; `rounded-xl` at `lg`/`xl`).
+  - `size`: `sm` 32px / 16px glyph, `default` 40px / 20px, `lg` 56px / 28px (tall recent card), `xl` 64px / 28px (icon picker trigger).
+  - Decorative (`aria-hidden`) unless `label` is given, then `role="img"` with that name. A default slot replaces the glyph (e.g. a logo).
+  - A standalone `span` rather than `Avatar` with overrides: `Avatar` is 24/32/40px, round, bordered, and sizes its icon slot itself.
+- `WorkspaceGlyph`: the icon, or the first letter of `name` when `icon="initial"`, centred in a box the icon's size. Falls back to the default icon when there is no name. `data-glyph` names the current glyph for scripts.
+- `WorkspaceIcon`: one of the 27 placeholder Lucide icons by name; unknown names fall back to `building-2`.
+- `icons.ts`, for an icon picker to reuse: `workspaceIcons` (name → Lucide component), `WORKSPACE_ICONS` (27 names, picker order), `WORKSPACE_GLYPHS` (`"initial"` + the 27), `WorkspaceIconName`, `WorkspaceGlyphName`, `DEFAULT_WORKSPACE_ICON`, `resolveWorkspaceIcon()`, `workspaceInitial()`, `workspaceGlyphLabel()`.
+- `index.ts` also re-exports the workspace palette (`workspacePalette`, `WORKSPACE_COLORS`, `DEFAULT_WORKSPACE_COLOR`, `brandGradient`).
+- Storybook: "Workspace Avatar" under Organisms.

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

@@ -0,0 +1,62 @@
+---
+/**
+ * @component OrganisationOverview
+ * @title Organisation Overview
+ * @description Organism. Which organisation you are in and its plan: a small caps "ORGANISATION" label over "Acme Inc. · Enterprise". Right-aligned by default.
+ *
+ * @preview
+ *
+ * <OrganisationOverview name="Acme Inc." plan="Enterprise" />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { OrganisationOverview } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <OrganisationOverview name={org.name} plan={org.plan} class="hidden md:flex" />
+ * ```
+ *
+ * `data-slot="organisation-overview-plan"` holds the plan text, for scripts
+ * that update it after a plan change.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  /** Organisation name, in semibold. */
+  name: string;
+  /** Plan, after a middle dot, muted. Left out when empty. */
+  plan?: string;
+  /** The caps label above. */
+  label?: string;
+  /** Text alignment: `end` (right, default) or `start`. */
+  align?: "start" | "end";
+  class?: string;
+}
+
+const { name, plan, label = "Organisation", align = "end", class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="organisation-overview"
+  class={cn("flex flex-col gap-0.5", align === "end" ? "items-end text-right" : "items-start text-left", className)}
+>
+  <p data-slot="organisation-overview-label" class="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+    {label}
+  </p>
+  <p class="text-sm">
+    <span data-slot="organisation-overview-name" class="font-semibold text-foreground">{name}</span>
+    {
+      plan && (
+        <span class="text-muted-foreground">
+          {" · "}
+          <span data-slot="organisation-overview-plan">{plan}</span>
+        </span>
+      )
+    }
+  </p>
+</div>