@cl-light-ds/ui 0.3.0 → 0.5.0

package/src/components/notifications-menu/NotificationsMenu.astro

@@ -0,0 +1,374 @@
+---
+/**
+ * @component NotificationsMenu
+ * @title Notifications Menu
+ * @description A bell button with a red dot while there are unseen notifications, opening a 360px popover: a header with Clear all, the notifications (dismiss one with ✕), and an empty state.
+ *
+ * @preview
+ *
+ * <NotificationsMenu
+ *   notifications={[
+ *     { id: "1", title: "Anna Lee commented", text: "“Step 4 needs a new screenshot.”", context: "Northwind Group", time: "5 min ago", initials: "AL", new: true },
+ *     { id: "2", title: "Your recording got 120 views", text: "“Create a sales order” this week.", context: "Contoso", time: "Yesterday", icon: Eye },
+ *   ]}
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { NotificationsMenu, NotificationsMenuItem } from '@cl-light-ds/ui/components/notifications-menu';
+ * import { CircleCheck, Eye } from '@lucide/astro';
+ * ---
+ *
+ * <!-- From data -->
+ * <NotificationsMenu
+ *   notifications={[
+ *     { id: "1", title: "Anna Lee commented", text: "Step 4 needs a new screenshot.", context: "Northwind Group", time: "5 min ago", initials: "AL", new: true },
+ *     { id: "2", title: "120 new views", context: "Contoso", time: "Yesterday", icon: Eye },
+ *   ]}
+ * />
+ *
+ * <!-- Or composed, e.g. for an item with an action -->
+ * <NotificationsMenu>
+ *   <NotificationsMenuItem id="export-1" title="Your export is ready" icon={CircleCheck} tone="success" time="Just now" new>
+ *     <Button as="a" href="/export.zip" download variant="outline" size="sm">Download</Button>
+ *   </NotificationsMenuItem>
+ * </NotificationsMenu>
+ * ```
+ *
+ * @api
+ *
+ * ### Seen / new
+ *
+ * A notification with `new` shows a blue dot and keeps the bell's red dot on. It counts as **seen** once
+ * at least `seenThreshold` (60%) of it has been in view in the open list, or as soon as it is hovered or
+ * keyboard-focused. Hovered / focused ones lose their dot at once; ones seen by scrolling lose it when the
+ * popover closes. The bell's red dot and accessible name follow the unseen count live.
+ *
+ * ### Events (on the `[data-slot="notifications-menu"]` root, bubbling)
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `notifications:dismiss` | `{ id }` | ✕ pressed. Cancelable: `preventDefault()` keeps the item. |
+ * | `notifications:clear` | `{ ids }` | Clear all pressed. Cancelable. |
+ * | `notifications:seen` | `{ ids }` | These notifications were just seen (in view, hovered or focused). |
+ * | `notifications:change` | `{ total, unseen }` | The count or unseen count changed. |
+ *
+ * Inbound: dispatch `notifications:add` with `{ item: HTMLElement, position?: "start" | "end" }` on the root
+ * to add a rendered `NotificationsMenuItem` (e.g. cloned from a `<template>`); it defaults to the top. Items
+ * added or removed in the list any other way are picked up too.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { Bell } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../popover";
+import { Separator } from "../separator";
+import NotificationsMenuItem from "./NotificationsMenuItem.astro";
+import type { NotificationsMenuItemData } from "./types";
+import allCaughtUp from "./all-caught-up.svg?url";
+
+interface Props extends HTMLAttributes<"div"> {
+  /** Notifications rendered before any slotted `NotificationsMenuItem`s. */
+  notifications?: NotificationsMenuItemData[];
+  /** Popover heading. */
+  title?: string;
+  /** The bell's accessible name with nothing unseen. */
+  label?: string;
+  /** The bell's accessible name with unseen ones; `{count}` is replaced. */
+  unseenLabel?: string;
+  clearLabel?: string;
+  /** Accessible name of each ✕; `{title}` is replaced. */
+  dismissLabel?: string;
+  /** Screen-reader text after a new notification. */
+  newLabel?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  /** Image URL for the empty state; `false` for none. Default: the "all caught up" illustration. */
+  emptyIllustration?: string | false;
+  /** Share of an item that must be in view to count as seen (0–1). */
+  seenThreshold?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  class?: string;
+}
+
+const {
+  notifications = [],
+  title = "Notifications",
+  label = "Notifications",
+  unseenLabel = "Notifications — {count} new",
+  clearLabel = "Clear all",
+  dismissLabel = "Dismiss: {title}",
+  newLabel = "(new)",
+  emptyTitle = "You're all caught up",
+  emptyDescription = "New notifications will show up here.",
+  emptyIllustration = allCaughtUp,
+  seenThreshold = 0.6,
+  side = "bottom",
+  align = "end",
+  sideOffset = 6,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasSlotItems = Astro.slots.has("default");
+const hasEmptySlot = Astro.slots.has("empty");
+const empty = notifications.length === 0 && !hasSlotItems;
+// Server-side guess from the data; the script recounts slotted items on load.
+const unseen = notifications.filter((n) => n.new).length;
+---
+
+<div
+  {...rest}
+  data-slot="notifications-menu"
+  data-label={label}
+  data-unseen-label={unseenLabel}
+  data-seen-threshold={seenThreshold}
+  class={cn("inline-flex", className)}
+>
+  <Popover class="flex">
+    <PopoverTrigger
+      variant="ghost"
+      size="icon-sm"
+      class="group/bell relative"
+      aria-label={unseen ? unseenLabel.replace("{count}", String(unseen)) : label}
+      data-unseen={unseen ? "true" : "false"}
+      data-notifications-bell
+    >
+      <Bell />
+      {/* The red dot, while any notification is unseen (D141). */}
+      <span
+        data-slot="notifications-menu-badge"
+        class="bg-destructive ring-background absolute top-1 right-1 hidden size-2 rounded-full ring-2 group-data-[unseen=true]/bell:block"
+        aria-hidden="true"
+      ></span>
+    </PopoverTrigger>
+
+    <PopoverContent
+      side={side}
+      align={align}
+      sideOffset={sideOffset}
+      class="group/notifications w-90 max-w-[calc(100vw-1rem)] gap-0 p-0"
+      data-empty={empty ? "true" : "false"}
+      data-notifications-content
+    >
+      <PopoverHeader class="flex-row items-center justify-between gap-2 p-3">
+        <PopoverTitle>{title}</PopoverTitle>
+        <Button
+          variant="link"
+          size="sm"
+          class="group-data-[empty=true]/notifications:hidden"
+          data-notifications-clear
+        >
+          {clearLabel}
+        </Button>
+      </PopoverHeader>
+
+      <Separator />
+
+      <ul
+        data-slot="notifications-menu-list"
+        aria-label={title}
+        class="flex max-h-80 flex-col overflow-y-auto group-data-[empty=true]/notifications:hidden"
+      >
+        {
+          notifications.map((n) => (
+            <NotificationsMenuItem {...n} dismissLabel={dismissLabel} newLabel={newLabel} />
+          ))
+        }
+        <slot />
+      </ul>
+
+      <div
+        data-slot="notifications-menu-empty"
+        class="hidden flex-col items-center gap-2 px-6 py-10 text-center group-data-[empty=true]/notifications:flex"
+      >
+        {
+          hasEmptySlot ? (
+            <slot name="empty" />
+          ) : (
+            <>
+              {emptyIllustration && (
+                <img src={emptyIllustration} alt="" width="144" height="104" class="-my-2" />
+              )}
+              <p class="text-sm font-medium">{emptyTitle}</p>
+              {emptyDescription && <p class="text-muted-foreground text-xs">{emptyDescription}</p>}
+            </>
+          )
+        }
+      </div>
+    </PopoverContent>
+  </Popover>
+</div>
+
+<script>
+  const wired = new WeakSet<Element>();
+
+  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 popover = root.querySelector<HTMLElement>('[data-slot="popover"]');
+    const bell = root.querySelector<HTMLElement>("[data-notifications-bell]");
+    const content = root.querySelector<HTMLElement>("[data-notifications-content]");
+    const list = root.querySelector<HTMLElement>('[data-slot="notifications-menu-list"]');
+    const clear = root.querySelector<HTMLElement>("[data-notifications-clear]");
+    if (!popover || !bell || !content || !list) return;
+
+    const label = root.dataset.label ?? "Notifications";
+    const unseenLabel = root.dataset.unseenLabel ?? "{count}";
+    const threshold = Number(root.dataset.seenThreshold ?? 0.6);
+    let open = false;
+    let last = "";
+
+    const items = () =>
+      Array.from(list.querySelectorAll<HTMLElement>('[data-slot="notifications-menu-item"]'));
+    const emit = (name: string, detail: unknown, cancelable = false) =>
+      root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, cancelable }));
+
+    const update = () => {
+      const all = items();
+      const unseen = all.filter(
+        (n) => n.dataset.new === "true" && !n.hasAttribute("data-seen"),
+      ).length;
+      bell.dataset.unseen = String(unseen > 0);
+      bell.setAttribute(
+        "aria-label",
+        unseen ? unseenLabel.replace("{count}", String(unseen)) : label,
+      );
+      content.dataset.empty = String(all.length === 0);
+      const key = `${all.length}:${unseen}`;
+      if (key !== last) {
+        last = key;
+        emit("notifications:change", { total: all.length, unseen });
+      }
+    };
+
+    /** Mark as seen. `now` also drops the blue dot (hover / focus); otherwise it goes on close. */
+    const see = (notes: HTMLElement[], now: boolean) => {
+      const fresh = notes.filter(
+        (n) => n.dataset.new === "true" && !n.hasAttribute("data-seen"),
+      );
+      for (const n of notes) {
+        if (n.dataset.new !== "true") continue;
+        if (now) {
+          n.dataset.new = "false";
+          n.removeAttribute("data-seen");
+        } else n.setAttribute("data-seen", "");
+      }
+      if (fresh.length) emit("notifications:seen", { ids: fresh.map((n) => n.dataset.notification) });
+      update();
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!open) return;
+        see(
+          entries.filter((e) => e.isIntersecting).map((e) => e.target as HTMLElement),
+          false,
+        );
+      },
+      { root: list, threshold },
+    );
+    const watch = () => {
+      observer.disconnect();
+      for (const n of items()) observer.observe(n);
+    };
+
+    popover.addEventListener("popover:change", (event) => {
+      open = (event as CustomEvent<{ open: boolean }>).detail.open;
+      if (open) {
+        // Let it lay out before anything counts as in view.
+        requestAnimationFrame(watch);
+      } else {
+        observer.disconnect();
+        for (const n of items()) {
+          if (n.hasAttribute("data-seen")) {
+            n.dataset.new = "false";
+            n.removeAttribute("data-seen");
+          }
+        }
+        update();
+      }
+    });
+
+    // Hovering or keyboard-focusing a notification is seeing it (D165).
+    const noteOf = (event: Event) =>
+      (event.target as HTMLElement).closest<HTMLElement>('[data-slot="notifications-menu-item"]');
+    list.addEventListener("mouseover", (event) => {
+      const note = noteOf(event);
+      if (note) see([note], true);
+    });
+    list.addEventListener("focusin", (event) => {
+      // Only keyboard focus: the popover may focus the first item on open.
+      const note = noteOf(event);
+      if (note && (event.target as HTMLElement).matches(":focus-visible")) see([note], true);
+    });
+
+    const focusAfterRemoval = (next: HTMLElement | null) => {
+      const target = next?.querySelector<HTMLElement>("[data-notifications-dismiss]");
+      if (target) target.focus();
+      else {
+        if (!content.hasAttribute("tabindex")) content.tabIndex = -1;
+        content.focus();
+      }
+    };
+
+    list.addEventListener("click", (event) => {
+      const dismiss = (event.target as HTMLElement).closest("[data-notifications-dismiss]");
+      const note = dismiss?.closest<HTMLElement>('[data-slot="notifications-menu-item"]');
+      if (!note) return;
+      if (!emit("notifications:dismiss", { id: note.dataset.notification }, true)) return;
+      const next =
+        (note.nextElementSibling as HTMLElement | null) ??
+        (note.previousElementSibling as HTMLElement | null);
+      note.remove();
+      update();
+      focusAfterRemoval(next?.matches('[data-slot="notifications-menu-item"]') ? next : null);
+    });
+
+    clear?.addEventListener("click", () => {
+      const all = items();
+      if (!emit("notifications:clear", { ids: all.map((n) => n.dataset.notification) }, true)) return;
+      for (const n of all) n.remove();
+      update();
+      focusAfterRemoval(null);
+    });
+
+    root.addEventListener("notifications:add", (event) => {
+      const { item, position = "start" } =
+        (event as CustomEvent<{ item?: HTMLElement; position?: "start" | "end" }>).detail ?? {};
+      if (!item) return;
+      if (position === "end") list.append(item);
+      else list.prepend(item);
+    });
+
+    // Items added / removed / re-flagged by app code stay in sync.
+    new MutationObserver((records) => {
+      if (open) {
+        for (const r of records)
+          for (const node of r.addedNodes)
+            if (node instanceof HTMLElement && node.matches('[data-slot="notifications-menu-item"]'))
+              observer.observe(node);
+      }
+      update();
+    }).observe(list, { childList: true, subtree: true, attributeFilter: ["data-new"] });
+
+    update();
+  }
+
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="notifications-menu"]')
+    .forEach(wire);
+</script>

package/src/components/notifications-menu/NotificationsMenuItem.astro

@@ -0,0 +1,129 @@
+---
+/**
+ * @component NotificationsMenuItem
+ * @title Notifications Menu Item
+ * @description One row of a NotificationsMenu: avatar or icon, title, text, a "context · time" line, a blue "new" dot and a ✕ to dismiss it.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * <NotificationsMenuItem id="n1" title="Anna commented" text="Looks good to me" context="Northwind" time="2 min ago" initials="AL" new />
+ *
+ * <NotificationsMenuItem id="n2" title="Your export is ready" icon={CircleCheck} tone="success" time="Just now" new>
+ *   <Button as="a" href="/export.zip" download variant="outline" size="sm">Download</Button>
+ * </NotificationsMenuItem>
+ * ```
+ *
+ * Use it inside `NotificationsMenu`'s default slot, or let `NotificationsMenu` render it from its `notifications` prop.
+ * The default slot holds extra content under the text (e.g. an action button); the `media` slot replaces the avatar / icon.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { X } from "@lucide/astro";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Button } from "../button";
+import type { NotificationsMenuItemData } from "./types";
+
+type Props = Omit<HTMLAttributes<"li">, "id" | "title"> &
+  NotificationsMenuItemData & {
+    /** Accessible name of the ✕. `{title}` is replaced by the notification's title. */
+    dismissLabel?: string;
+    /** Screen-reader text after a new notification. */
+    newLabel?: string;
+    class?: string;
+  };
+
+const {
+  id,
+  title,
+  text,
+  context,
+  time,
+  datetime,
+  initials,
+  avatarSrc,
+  icon: Icon,
+  tone = "default",
+  new: isNew = false,
+  dismissLabel = "Dismiss: {title}",
+  newLabel = "(new)",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasMedia = Astro.slots.has("media");
+const hasExtra = Astro.slots.has("default");
+
+const iconChipVariants = cva(
+  "bg-muted flex size-6 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+  {
+    variants: {
+      tone: {
+        default: "text-muted-foreground",
+        success: "text-success",
+        warning: "text-warning",
+        destructive: "text-destructive",
+      },
+    },
+    defaultVariants: { tone: "default" },
+  },
+);
+---
+
+<li
+  {...rest}
+  data-slot="notifications-menu-item"
+  data-notification={id}
+  data-new={isNew ? "true" : "false"}
+  class={cn(
+    "group/note relative flex items-start gap-3 border-b border-border p-3 pe-9 transition-colors last:border-b-0",
+    className,
+  )}
+>
+  {
+    hasMedia ? (
+      <slot name="media" />
+    ) : initials || avatarSrc ? (
+      <Avatar size="sm" variant={avatarSrc ? "image" : "initials"}>
+        {avatarSrc && <AvatarImage src={avatarSrc} alt="" />}
+        <AvatarFallback>{initials}</AvatarFallback>
+      </Avatar>
+    ) : Icon ? (
+      <span class={iconChipVariants({ tone })} aria-hidden="true">
+        <Icon />
+      </span>
+    ) : null
+  }
+  <span class={cn("flex min-w-0 flex-1 flex-col", hasExtra ? "gap-1" : "gap-0.5")}>
+    <span data-slot="notifications-menu-item-title" class="text-foreground text-sm font-medium">{title}</span>
+    {text && <span class="text-muted-foreground text-xs">{text}</span>}
+    {hasExtra && <span data-slot="notifications-menu-item-extra"><slot /></span>}
+    {
+      (context || time) && (
+        <span class="text-muted-foreground/70 text-xs">
+          {context}
+          {context && time && " · "}
+          {time && (datetime ? <time datetime={datetime}>{time}</time> : time)}
+        </span>
+      )
+    }
+  </span>
+  {/* The "new" dot: centred vertically, clear of the ✕ (D154). Never alone: sr-only text too. */}
+  <span
+    data-slot="notifications-menu-item-dot"
+    class="bg-primary absolute top-1/2 right-3.5 hidden size-2 -translate-y-1/2 rounded-full group-focus-within/note:hidden group-hover/note:hidden group-data-[new=true]/note:block"
+    aria-hidden="true"
+  ></span>
+  <span class="sr-only group-data-[new=false]/note:hidden">{newLabel}</span>
+  <Button
+    variant="ghost"
+    size="icon-xs"
+    class="absolute top-2 right-2 opacity-0 group-focus-within/note:opacity-100 group-hover/note:opacity-100 pointer-coarse:opacity-100"
+    aria-label={dismissLabel.replace("{title}", title)}
+    data-notifications-dismiss
+  >
+    <X />
+  </Button>
+</li>

package/src/components/notifications-menu/all-caught-up.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="104" viewBox="-12 -12 144 104" fill="none" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTo1ZTFjODE4MC05NTYxLTQ3YWYtOGYwMy0zNWJmODU4YjViN2EAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaC+NPxB7N/p9adnc2qsfPxgAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpjYjNhMTNlZS1kN2NlLTQyNGYtODBiYi1mM2E3MjEwNjRhZmZscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNotRHSjZb1m13eqMxg3CrdWwAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggaByci08iEbo8a7fyckB98mnsuZspV6glutU6CRYHq7ikZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaCE4XFoYfQdK2oaIn4KqoaMAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCBwyJmeK42jGvzuOwLqXoDrEDyRkMXdC7jb6T0G7aNtl2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBimZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjVlMWM4MTgwLTk1NjEtNDdhZi04ZjAzLTM1YmY4NThiNWI3YS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjQwNzRmMDY1LWM3ZGEtNDE5My04MmJkLTE5MTI2NjA1M2NkMnJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBoHJyLTyIRujxrt/JyQH3yaey5mylXqCW61ToJFgeruKJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggDoC/w970Rz1Igqx1EVS7RMxcJhZaAy+qJS5QZcSbvbqiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggNp2qc1mvgSvJEClX2ZNnwW8h6YEISoyFzEQlrAgN7hl0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQOsPa7KlN7A+bxSZMbiwEHyIQO5N1z1/LriHBGTnTLVR2U8DysV/pK+fSfYixl2JUMqvt8cAN/cU5VG46RwGmuI=</c2pa:manifest></metadata>
+  <defs>
+    <filter id="sBack" x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id="sFront" x="-40%" y="-40%" width="180%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id="sCheck" x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#3785E0" flood-opacity="0.32"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="60" cy="40" r="35" stroke="#F5F9FE" stroke-width="10"></circle>
+  <circle cx="60" cy="40" r="19" stroke="#EBF3FC" stroke-width="8"></circle>
+  <g filter="url(#sBack)"><rect x="22" y="12" width="76" height="18" rx="6" fill="#FFFFFF"></rect></g>
+  <rect x="22.5" y="12.5" width="75" height="17" rx="5.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <circle cx="31" cy="21" r="4" fill="#F4F4F5"></circle>
+  <rect x="39" y="19" width="30" height="4" rx="2" fill="#F4F4F5"></rect>
+  <g filter="url(#sFront)"><rect x="16" y="34" width="88" height="24" rx="7" fill="#FFFFFF"></rect></g>
+  <rect x="16.5" y="34.5" width="87" height="23" rx="6.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <circle cx="28" cy="46" r="6" fill="#EBF3FC"></circle>
+  <path d="M25.5 45.5 a2.5 2.5 0 0 1 5 0 c0 2.2 1 3 1 3 h-7 s1 -0.8 1 -3 Z M27.2 50.2 a1 1 0 0 0 1.6 0" stroke="#3785E0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
+  <rect x="39" y="41" width="40" height="4" rx="2" fill="#E4E4E7"></rect>
+  <rect x="39" y="48.5" width="26" height="3.5" rx="1.75" fill="#F4F4F5"></rect>
+  <g filter="url(#sCheck)"><circle cx="100" cy="58" r="11" fill="#3785E0"></circle></g>
+  <circle cx="100" cy="58" r="11" stroke="#FFFFFF" stroke-width="2.5"></circle>
+  <path d="M95.5 58.2 l3 3 l6 -6" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

package/src/components/notifications-menu/index.ts

@@ -0,0 +1,3 @@
+export { default as NotificationsMenu } from "./NotificationsMenu.astro";
+export { default as NotificationsMenuItem } from "./NotificationsMenuItem.astro";
+export * from "./types";

package/src/components/notifications-menu/types.ts

@@ -0,0 +1,32 @@
+import type { AstroComponent } from "@lucide/astro";
+
+/** Colour of a notification's icon chip. */
+export type NotificationTone = "default" | "success" | "warning" | "destructive";
+
+/**
+ * One notification. Everything except `icon` is JSON-serialisable, so a page
+ * can pass an API response straight into `<NotificationsMenu notifications={…} />`.
+ */
+export interface NotificationsMenuItemData {
+  /** Stable id. Sent back in `notifications:dismiss` / `notifications:seen`. */
+  id: string;
+  title: string;
+  /** Second line, muted. */
+  text?: string;
+  /** Where it happened (a workspace, project, team…). Shown as "context · time". */
+  context?: string;
+  /** Display time, e.g. "2 min ago". */
+  time?: string;
+  /** Machine-readable time for the `<time>` element (ISO 8601). */
+  datetime?: string;
+  /** Initials for an Avatar. Takes precedence over `icon`. */
+  initials?: string;
+  /** Avatar image (with `initials` as its fallback). */
+  avatarSrc?: string;
+  /** A Lucide icon, shown in a round chip when there is no avatar. */
+  icon?: AstroComponent;
+  /** Colour of the icon chip. Default `"default"` (muted). */
+  tone?: NotificationTone;
+  /** Unseen: shows the blue dot and counts towards the bell's red dot. */
+  new?: boolean;
+}

package/src/components/option-card/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+All notable changes to the `OptionCard` component will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N18)
+
+### Added
+
+- `OptionCard`: a radio choice as a card, for use inside `RadioGroup` (which owns the value, roving focus, arrow keys, `role="radio"`/`aria-checked` and the hidden form input).
+  - Radio, bold title, optional `badge` slot beside it, muted description. `title`/`description` props, or `title`/`description` slots for rich text.
+  - Selected (`data-checked` on its radio): `border-primary` on `badge-accent` at 50%. No JavaScript of its own; the state is read with `has-[]` from the runtime's attributes.
+  - Optional nested content (default slot), shown only while the card is chosen, outside the `<label>` so it can hold its own controls. `content="inset"` (notes under the description after a divider, as Duplicate's link details), `"panel"` (white bordered panel, as Export's checklist) or `"plain"`.
+  - `disabled` dims the card and disables its radio; `id` goes on the radio item.
+- Accent badges on a chosen card blend into its tint; give them `class="border-chart-1"` (C19). Not applied automatically, since `Badge` exposes no variant hook.
+- Storybook: "Option Card" under Forms.