@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/app-shell/app-shell.test.tsx

@@ -0,0 +1,266 @@
+import { createRef } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AppShell } from "./app-shell";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "../sidebar";
+
+describe("AppShell", () => {
+  it("forwards a ref to the root element", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <AppShell ref={ref} mainId="main">
+        Content
+      </AppShell>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    // The forwarded node IS the shell root — the flex/overflow box that
+    // establishes the fixed-height viewport, not some inner wrapper.
+    expect(ref.current?.className).toContain("h-dvh");
+  });
+
+  /**
+   * With none of the new composition props passed, the render is exactly what
+   * it always has been: no header, no brand slot, no secondary panel, and the
+   * `sidebar` wrapper carries no attribute this change did not add before.
+   */
+  it("renders unchanged with none of the new composition props passed", () => {
+    const { container } = render(
+      <AppShell mainId="main" sidebar={<div data-testid="sidebar-marker">Nav</div>}>
+        Content
+      </AppShell>,
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.className).toBe("flex h-dvh w-full overflow-hidden bg-background text-foreground");
+    expect(container.querySelector("header")).toBeNull();
+    expect(container.querySelector('[data-slot="app-shell-brand"]')).toBeNull();
+    expect(container.querySelector('[data-slot="app-shell-secondary-panel"]')).toBeNull();
+    const sidebarWrapper = screen.getByTestId("sidebar-marker").parentElement;
+    expect(sidebarWrapper?.className).toBe("hidden md:flex");
+  });
+});
+
+describe("AppShell — brandPlacement", () => {
+  it('renders no brand slot with brandPlacement left at its default ("sidebar")', () => {
+    render(
+      <AppShell mainId="main" brand={<span>Acme Inc.</span>}>
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByText("Acme Inc.")).not.toBeInTheDocument();
+  });
+
+  it('composes a TopNav with the brand leading it when brandPlacement="topbar"', () => {
+    const { container } = render(
+      <AppShell mainId="main" brandPlacement="topbar" brand={<span>Acme Inc.</span>}>
+        Content
+      </AppShell>,
+    );
+    const header = container.querySelector("header");
+    expect(header).not.toBeNull();
+    const brand = container.querySelector('[data-slot="app-shell-brand"]');
+    expect(brand).not.toBeNull();
+    expect(brand).toHaveTextContent("Acme Inc.");
+  });
+
+  it("has no effect when a caller-supplied topNav is passed instead of topBar", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        brandPlacement="topbar"
+        brand={<span>Acme Inc.</span>}
+        topNav={<div data-testid="custom-top-nav">Custom</div>}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByText("Acme Inc.")).not.toBeInTheDocument();
+    expect(screen.getByTestId("custom-top-nav")).toBeInTheDocument();
+    // Only the caller's node rendered — the shell never composes a second bar.
+    expect(container.querySelectorAll("header").length).toBe(0);
+  });
+});
+
+describe("AppShell — topBar slots and topNav precedence", () => {
+  it("composes start/center/end through TopNav's true-centred grid layout", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        topBar={{
+          start: <span data-testid="tb-start">Start</span>,
+          center: <span data-testid="tb-center">Center</span>,
+          end: <span data-testid="tb-end">End</span>,
+        }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("tb-start")).toBeInTheDocument();
+    expect(screen.getByTestId("tb-center")).toBeInTheDocument();
+    expect(screen.getByTestId("tb-end")).toBeInTheDocument();
+    // The grid layout that keeps `center` truly centred — not the plain
+    // `flex-1` row TopNav falls back to without a `center` slot. Found via
+    // the center wrapper's OWN slot, never a raw escaped-bracket class
+    // selector, which would silently stop matching if the Tailwind
+    // arbitrary-value syntax it encodes ever changes.
+    const centerSlot = container.querySelector('[data-slot="top-nav-center"]');
+    expect(centerSlot).not.toBeNull();
+    expect(centerSlot?.contains(screen.getByTestId("tb-center"))).toBe(true);
+    const grid = centerSlot?.parentElement;
+    expect(grid?.className).toContain("grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]");
+  });
+
+  it("passing topNav wins over topBar — the shell never merges the two", () => {
+    render(
+      <AppShell
+        mainId="main"
+        topNav={<div data-testid="custom-top-nav">Custom</div>}
+        topBar={{ center: <span data-testid="tb-center">Center</span> }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("custom-top-nav")).toBeInTheDocument();
+    expect(screen.queryByTestId("tb-center")).not.toBeInTheDocument();
+  });
+});
+
+describe("AppShell — navigation placement", () => {
+  it('renders the sidebar column by default ("sidebar")', () => {
+    render(
+      <AppShell mainId="main" sidebar={<div data-testid="sidebar-marker">Nav</div>}>
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("sidebar-marker")).toBeInTheDocument();
+  });
+
+  it('renders no sidebar column when navigation="topbar", even with a sidebar node passed', () => {
+    render(
+      <AppShell
+        mainId="main"
+        navigation="topbar"
+        sidebar={<div data-testid="sidebar-marker">Nav</div>}
+        topBar={{ center: <span>Primary nav goes here</span> }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByTestId("sidebar-marker")).not.toBeInTheDocument();
+  });
+});
+
+describe("AppShell — secondaryPanel", () => {
+  it("renders nothing extra when secondaryPanel is not passed", () => {
+    const { container } = render(<AppShell mainId="main">Content</AppShell>);
+    expect(container.querySelector('[data-slot="app-shell-secondary-panel"]')).toBeNull();
+  });
+
+  it("renders a hidden-below-md column sized from --shell-secondary-width, between sidebar and main", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        sidebar={<div data-testid="sidebar-marker">Nav</div>}
+        secondaryPanel={<div data-testid="secondary-marker">Resources</div>}
+      >
+        Content
+      </AppShell>,
+    );
+    const panel = container.querySelector('[data-slot="app-shell-secondary-panel"]') as HTMLElement;
+    expect(panel).not.toBeNull();
+    expect(panel.className).toContain("hidden");
+    expect(panel.className).toContain("md:flex");
+    expect(panel.className).toContain("w-(--shell-secondary-width)");
+    expect(screen.getByTestId("secondary-marker")).toBeInTheDocument();
+
+    // Column order: sidebar, then secondaryPanel, then the main content column.
+    const root = container.firstElementChild as HTMLElement;
+    const children = Array.from(root.children);
+    const sidebarIndex = children.findIndex((el) =>
+      el.contains(screen.getByTestId("sidebar-marker")),
+    );
+    const panelIndex = children.indexOf(panel);
+    const mainIndex = children.findIndex((el) => el.querySelector("main"));
+    expect(sidebarIndex).toBeGreaterThanOrEqual(0);
+    expect(sidebarIndex).toBeLessThan(panelIndex);
+    expect(panelIndex).toBeLessThan(mainIndex);
+  });
+});
+
+describe("AppShell — mobile navigation (#review 2.1: sidebar disappears below md)", () => {
+  const originalInnerWidth = window.innerWidth;
+
+  afterEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: originalInnerWidth,
+    });
+  });
+
+  /**
+   * The `sidebar` slot is `hidden md:flex` with no fallback of its own (see
+   * `app-shell.tsx`'s module doc comment) — by design, because `<Sidebar>`
+   * already renders its own off-canvas `Sheet` below the mobile breakpoint,
+   * through a Radix portal that mounts into `document.body`, entirely
+   * unaffected by AppShell's `hidden md:flex` wrapper (a portal is not a
+   * descendant of that wrapper's DOM subtree). Composing `<AppShell>` with
+   * the real `<Sidebar>` primitive (not a bare custom `<nav>`) and placing a
+   * `<SidebarTrigger>` in `topNav` — both wrapped in ONE shared
+   * `<SidebarProvider>`, which is a plain React context and so is never
+   * blocked by AppShell's internal wrapper `<div>` — is therefore ALREADY a
+   * working mobile nav path with no AppShell code change: this test locks
+   * that composition rather than reworking AppShell into owning a second,
+   * competing `Sheet` (which would have to unmount `<Sidebar>` whenever ITS
+   * own drawer closes — see the doc comment for why that is a regression,
+   * not a fix). A consumer who instead passes a bare nav node still needs to
+   * bring its own responsive fallback, exactly as documented.
+   */
+  it("reaches sidebar navigation through Sidebar's own Sheet fallback at a mobile width", async () => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 500,
+    });
+    const user = userEvent.setup();
+    render(
+      <SidebarProvider>
+        <AppShell
+          mainId="main"
+          topNav={<SidebarTrigger />}
+          sidebar={
+            <Sidebar>
+              <SidebarContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>Dashboard</SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarContent>
+            </Sidebar>
+          }
+        >
+          Main content
+        </AppShell>
+      </SidebarProvider>,
+    );
+
+    // Below `md`, the desktop sidebar branch renders nothing (it is inside
+    // AppShell's `hidden md:flex` slot AND `<Sidebar>` itself renders `null`
+    // desktop markup on mobile) — the nav item is reachable only once the
+    // trigger opens the portal-rendered Sheet.
+    expect(screen.queryByRole("button", { name: "Dashboard" })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Toggle Sidebar" }));
+
+    expect(await screen.findByRole("button", { name: "Dashboard" })).toBeInTheDocument();
+  });
+});

package/src/components/app-shell/app-shell.tsx

@@ -1,12 +1,71 @@
-import { type ReactNode } from "react";
+import { forwardRef, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { SkipLink } from "../skip-link";
+import { TopNav } from "../top-nav";
+
+/** `topBar` slots — see `AppShellProps.topBar`. */
+export interface AppShellTopBarSlots {
+  /** Leading content, after the brand (when `brandPlacement="topbar"`). */
+  start?: ReactNode;
+  /** Centred content (e.g. a global search field) — see `TopNav`'s `center`. */
+  center?: ReactNode;
+  /** Trailing content (actions, account menu). */
+  end?: ReactNode;
+}
 
 export interface AppShellProps {
-  /** Persistent left navigation (often a <Sidebar />). */
+  /**
+   * Persistent left navigation (often a <Sidebar />). Not rendered when
+   * `navigation="topbar"` — put the primary navigation in `topBar`/`topNav`
+   * instead.
+   */
   sidebar?: ReactNode;
-  /** Top bar (often a <TopNav />). */
+  /**
+   * Top bar (often a <TopNav />), a fully-formed node the caller already
+   * brought. **Wins over `topBar` when both are passed** — this shell never
+   * merges the two, so pass one or the other, never both. Use `topNav` when
+   * you want to compose `TopNav` (or any other element) yourself; use
+   * `topBar` for the common case where this shell should compose `TopNav`
+   * for you from plain slots.
+   */
   topNav?: ReactNode;
+  /**
+   * Slots this shell composes into a `TopNav` for you — the convenience path
+   * for the common case (see `topNav` for precedence when both are set).
+   * `center` renders through `TopNav`'s own `center` prop: a true 3-column
+   * grid, so centred content (e.g. a global search field) stays centred
+   * regardless of how wide `start`/`end` are.
+   */
+  topBar?: AppShellTopBarSlots;
+  /**
+   * Where the brand mark lives. `"sidebar"` (default) is today's behavior:
+   * this shell renders no brand of its own — the caller's `sidebar` node
+   * (e.g. a `SidebarHeader` / `TeamSwitcher`) owns it. `"topbar"` renders
+   * `brand` as the leading element of the top bar, before `topBar.start`.
+   * Has no effect without a `brand` node, and no effect when `topNav` is
+   * passed instead of `topBar` (bring your own top bar, bring your own
+   * brand placement inside it).
+   * @default "sidebar"
+   */
+  brandPlacement?: "sidebar" | "topbar";
+  /** Brand mark rendered in the top bar when `brandPlacement="topbar"`. */
+  brand?: ReactNode;
+  /**
+   * Where the primary navigation lives. `"sidebar"` (default) renders
+   * `sidebar` in the left column, unchanged. `"topbar"` renders no sidebar
+   * column at all — compose the primary navigation into `topBar`/`topNav`
+   * instead (e.g. a `NavigationMenu` in `topBar.center`).
+   * @default "sidebar"
+   */
+  navigation?: "sidebar" | "topbar";
+  /**
+   * A second column beside the sidebar (e.g. a resource/filter panel) —
+   * `w-(--shell-secondary-width)` (16rem by default, every theme), hidden
+   * below `md` exactly like `sidebar`. Independent of `navigation`/`sidebar`:
+   * renders whenever it is passed. Pure layout, like `sidebar` — bring your
+   * own chrome (background, border) on the node itself.
+   */
+  secondaryPanel?: ReactNode;
   children: ReactNode;
   className?: string;
   /** Class for the scrolling main content region. */
@@ -22,17 +81,83 @@ export interface AppShellProps {
 /**
  * App-first layout: fixed-height viewport with an optional sidebar, a top bar,
  * and a scrollable main region. Pure layout — bring your own nav components.
+ *
+ * The `sidebar` slot is hidden below `md` with no fallback of its own: this
+ * shell does not know whether `sidebar` already manages its own responsive
+ * behavior. `<Sidebar>` (`../sidebar`) does — it renders as an offcanvas
+ * `Sheet` below the mobile breakpoint entirely on its own, through a Radix
+ * portal that is unaffected by this wrapper's `hidden md:flex` (a portal
+ * mounts into `document.body`, not into this DOM subtree) — pair it with a
+ * `<SidebarTrigger>` inside `topNav` for full mobile navigation. Wrapping an
+ * arbitrary `sidebar` node in a SECOND, shell-owned `Sheet` here would look
+ * like a fix but silently break that exact pattern: a Radix `Sheet`/`Dialog`
+ * only mounts its content while open, so `<Sidebar>` would be unmounted
+ * (not just hidden) whenever the shell's own drawer is closed — and with it,
+ * the very trigger a caller uses to open ITS mobile view. A bare nav node
+ * (no built-in responsive behavior of its own) has no such fallback; give it
+ * one explicitly, e.g. by rendering a `<Sheet>` alongside `topNav` in the
+ * consuming app.
+ *
+ * The `SidebarProvider` + `Sidebar` + `SidebarTrigger` composition above is
+ * regression-locked in `app-shell.test.tsx` at a mobile viewport width: no
+ * AppShell code change is needed to reach navigation below `md`, because
+ * `SidebarProvider` is a plain React context and is never blocked by this
+ * component's internal wrapper `<div>`.
+ *
+ * `brandPlacement`, `topBar`, `navigation` and `secondaryPanel` are all
+ * optional, off by default: with none of them passed this renders exactly
+ * what it always has (a `sidebar` column, `topNav` verbatim, `<main>`). They
+ * generalise the shape `Layout/App Shell/Flagship` already hand-builds —
+ * brand in the top bar, a centred search field, horizontal primary
+ * navigation, a second resource column — into props any consumer can reach
+ * for without hand-rolling the layout again.
  */
-export function AppShell({
-  sidebar,
-  topNav,
-  children,
-  className,
-  mainClassName,
-  mainId = "main-content",
-}: AppShellProps) {
+export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(
+  {
+    sidebar,
+    topNav,
+    topBar,
+    brandPlacement = "sidebar",
+    brand,
+    navigation = "sidebar",
+    secondaryPanel,
+    children,
+    className,
+    mainClassName,
+    mainId = "main-content",
+  },
+  ref,
+) {
+  const showSidebar = navigation !== "topbar" && !!sidebar;
+  const showBrandInTopBar = brandPlacement === "topbar" && !!brand;
+
+  // `topNav` is a fully-formed node the caller already brought, so it always
+  // wins over `topBar` — the shell's own compose-from-slots convenience path.
+  // See the `topNav`/`topBar` JSDoc for the full precedence note.
+  const composedTopBar =
+    topBar || showBrandInTopBar ? (
+      <TopNav
+        start={
+          showBrandInTopBar ? (
+            <>
+              <div data-slot="app-shell-brand" className="flex items-center">
+                {brand}
+              </div>
+              {topBar?.start}
+            </>
+          ) : (
+            topBar?.start
+          )
+        }
+        center={topBar?.center}
+        end={topBar?.end}
+      />
+    ) : null;
+  const resolvedTopBar = topNav ?? composedTopBar;
+
   return (
     <div
+      ref={ref}
       className={cn("flex h-dvh w-full overflow-hidden bg-background text-foreground", className)}
     >
       {/* The first focusable element of the shell, so a keyboard user can pass
@@ -41,9 +166,17 @@ export function AppShell({
           beside must not be the exception, and it is the surface with the widest
           reach — it is imported, not copy-owned. */}
       <SkipLink targetId={mainId} />
-      {sidebar ? <div className="hidden md:flex">{sidebar}</div> : null}
+      {showSidebar ? <div className="hidden md:flex">{sidebar}</div> : null}
+      {secondaryPanel ? (
+        <div
+          data-slot="app-shell-secondary-panel"
+          className="hidden w-(--shell-secondary-width) shrink-0 md:flex"
+        >
+          {secondaryPanel}
+        </div>
+      ) : null}
       <div className="flex min-w-0 flex-1 flex-col">
-        {topNav}
+        {resolvedTopBar}
         {/* `<main>` IS the scroll port here (in the blocks the skip target and
             the scroll port are separate elements), so it takes `tabIndex={0}`
             rather than `{-1}`: a region that scrolls has to be keyboard-operable
@@ -61,4 +194,4 @@ export function AppShell({
       </div>
     </div>
   );
-}
+});

package/src/components/app-shell/index.ts

@@ -1 +1 @@
-export { AppShell, type AppShellProps } from "./app-shell";
+export { AppShell, type AppShellProps, type AppShellTopBarSlots } from "./app-shell";

package/src/components/attribution-panel/attribution-panel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useId, useMemo, type HTMLAttributes } from "react";
 import { cn } from "../../lib/cn";
 import { Badge } from "../badge";

package/src/components/attribution-panel/attributions.generated.ts

@@ -1,8 +1,8 @@
 // GENERATED by scripts/gen-attributions.mjs — DO NOT EDIT BY HAND.
-// Run `pnpm gen:attributions` after changing a dependency, a vendored font, or
-// scripts/attributions.sources.json. `pnpm attributions:check` fails on a stale copy.
+// Run `pnpm gen` after changing a dependency, a vendored font, or
+// scripts/attributions.sources.json. `pnpm gen:check` fails on a stale copy.
 //
-// 116 entries (data: 2, source: 18, font: 2, dependency: 94).
+// 122 entries (data: 4, source: 20, font: 2, dependency: 96).
 
 import type { Attribution } from "./attribution-types";
 
@@ -31,6 +31,30 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-maps"],
     required: true,
   },
+  {
+    version: null,
+    note: "The `countries-110m` TopoJSON build of Natural Earth that `world-fixture.ts` was converted from (once, offline — no TopoJSON decoder ships). ISC requires the copyright notice.",
+    id: "world-atlas",
+    category: "data",
+    name: "world-atlas",
+    license: "ISC",
+    copyright: "Copyright 2013-2024 Michael Bostock",
+    url: "https://github.com/topojson/world-atlas",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: true,
+  },
+  {
+    version: null,
+    note: 'The 1:110m admin-0 country outlines behind `ChoroplethChart`\'s bundled "world" fixture (packages/charts/src/charts/choropleth/world-fixture.ts). Public domain, so the credit is courtesy, not an obligation.',
+    id: "natural-earth",
+    category: "data",
+    name: "Natural Earth",
+    license: "public-domain",
+    copyright: "Public domain (Natural Earth terms of use)",
+    url: "https://www.naturalearthdata.com/about/terms-of-use/",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: false,
+  },
   {
     version: null,
     note: "Vendored into @elabs-ai/components-ai and rewired onto brand-ui primitives and tokens. Apache-2.0, NOT MIT: §4 obliges us to carry the notice and to state that we modified the files.",
@@ -115,6 +139,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-viewer"],
     required: false,
   },
+  {
+    version: null,
+    note: "The eXtensible Event Stream interchange format fromXes reads: a <log> of <trace>s of <event>s, each carrying typed key/value attributes, plus <classifier> and lifecycle:transition. Only the format is implemented, by a hand-rolled tokenizer; no text, schema file or code is copied. The license of the specification document itself was not established.",
+    id: "xes-ieee-1849",
+    category: "source",
+    name: "IEEE 1849-2016 (XES)",
+    license: "Published specification (license of the document not established)",
+    copyright: "© IEEE",
+    url: "https://standards.ieee.org/ieee/1849/6811/",
+    usedBy: ["@elabs-ai/components-process"],
+    required: false,
+  },
   {
     version: null,
     note: "The editorial chart gallery behind the 2026-09-04 charts gap analysis: 71 files across the charts and tokens packages cite it as the source of a value, a mark shape or a composition (unit decomposition, hairline furniture, the sequential/diverging ramps, the reveal timing), and three copy-own registry blocks (chart-editorial-hourglass, -patchwork, -almanac) reproduce three of its gallery cards' DATA-SHAPE DESCRIPTIONS from that same analysis' one-line prose. No code was copied verbatim — each was re-expressed onto this repo's tokens and primitives. Its LICENSE is PolyForm Noncommercial 1.0.0, read verbatim from the upstream file; GitHub's own detection reports NOASSERTION, which is why nothing flagged it earlier. The licence's Required Notice slot is left at the template's example value, so upstream states no copyright holder and none is claimed here. Noncommercial-only is unresolved for a repo headed for public release — a licensing decision for the maintainer, not something attribution settles.",
@@ -165,7 +201,19 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
   },
   {
     version: null,
-    note: "Algorithm shape for the framework-free process-mining core: which aggregates a directly-follows graph carries (discoverGraph) and how traces are grouped into variants (extractVariants), with durationStats as their shared summary. Re-typed in TypeScript from the published algorithms, not copied.",
+    note: "The Object-Centric Event Log 2.0 JSON serialization fromOcel reads (objectTypes, objects, events, relationships). Only the format is implemented; no text, schema file or code is copied. The license of the specification document itself was not established.",
+    id: "ocel-2-0",
+    category: "source",
+    name: "OCEL 2.0 specification",
+    license: "Published specification (license of the document not established)",
+    copyright: "© the OCEL 2.0 specification authors",
+    url: "https://doi.org/10.48550/arXiv.2403.01975",
+    usedBy: ["@elabs-ai/components-process"],
+    required: false,
+  },
+  {
+    version: null,
+    note: "Algorithm shape for the framework-free process-mining core: which aggregates a directly-follows graph carries (discoverGraph) and how traces are grouped into variants (extractVariants), with durationStats as their shared summary; and the token-based replay procedure behind tokenReplay (produced/consumed/missing/remaining counting, silent-transition enabling before forcing missing tokens); and the object-centric directly-follows graph (discoverObjectCentricGraph): one directly-follows graph per object type, shared activities merged into one node with per-type counts, edges kept per type. Re-typed in TypeScript from the published algorithms, not copied.",
     id: "pm4js",
     category: "source",
     name: "pm4js",
@@ -292,7 +340,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "MIT",
     copyright: "Claudéric Demers",
     url: "https://www.npmjs.com/package/@dnd-kit/core",
-    usedBy: ["@elabs-ai/components-data"],
+    usedBy: ["@elabs-ai/components-charts", "@elabs-ai/components-data"],
     required: false,
     note: null,
   },
@@ -775,6 +823,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: [
       "@elabs-ai/components-charts",
       "@elabs-ai/components-data",
+      "@elabs-ai/components-process",
       "@elabs-ai/components-ui",
       "@elabs-ai/components-viewer",
     ],
@@ -785,7 +834,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     id: "@visx/brush",
     category: "dependency",
     name: "@visx/brush",
-    version: "3.12.0",
+    version: "4.0.1-alpha.0",
     license: "MIT",
     copyright: "@hshoff",
     url: "https://www.npmjs.com/package/@visx/brush",
@@ -1076,6 +1125,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
+  {
+    version: "0.12.0",
+    note: "elkjs adapter — RM-067. The Eclipse Layout Kernel, behind layoutFlowElk. An OPTIONAL peer dependency, so the derived dependency list (plain `dependencies` only) cannot see it; it is credited here instead. Never bundled into the package: loaded with import() from the host's own install, and used under EPL-2.0. The licence text (LICENSE.md) names no holder; the copyright line is read verbatim from the header of elkjs's own lib/elk-api.d.ts.",
+    id: "elkjs",
+    category: "dependency",
+    name: "elkjs",
+    license: "EPL-2.0 OR GPL-3.0-or-later",
+    copyright: "Copyright (c) 2019 TypeFox and others",
+    url: "https://github.com/kieler/elkjs",
+    usedBy: ["@elabs-ai/components-flow"],
+    required: false,
+  },
   {
     id: "embla-carousel-react",
     category: "dependency",
@@ -1423,4 +1484,16 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
+  {
+    id: "zustand",
+    category: "dependency",
+    name: "zustand",
+    version: "5.0.15",
+    license: "MIT",
+    copyright: "Paul Henschel",
+    url: "https://www.npmjs.com/package/zustand",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: false,
+    note: null,
+  },
 ] as const;

package/src/components/avatar/avatar.tsx

@@ -9,6 +9,7 @@ export const Avatar = forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
+      data-slot="avatar"
       className={cn("relative flex size-9 shrink-0 overflow-hidden rounded-full", className)}
       {...props}
     />
@@ -21,6 +22,7 @@ export const AvatarImage = forwardRef<
   return (
     <AvatarPrimitive.Image
       ref={ref}
+      data-slot="avatar-image"
       className={cn(
         "aspect-square size-full animate-in fade-in duration-base ease-entrance",
         className,
@@ -36,8 +38,9 @@ export const AvatarFallback = forwardRef<
   return (
     <AvatarPrimitive.Fallback
       ref={ref}
+      data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
+        "flex size-full items-center justify-center rounded-full bg-muted text-meta font-medium text-muted-foreground",
         className,
       )}
       {...props}