@elabs-ai/components-ui 4.0.0

package/src/components/app-sidebar/app-sidebar.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Globe, Home, Settings, Sparkles } from "lucide-react";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "../sidebar";
+import { NavUser } from "../nav-user";
+import { TeamSwitcher } from "../team-switcher";
+import { AppSidebar } from "./app-sidebar";
+
+const meta = {
+  title: "Layout/AppSidebar",
+  component: AppSidebar,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+  decorators: [
+    (Story) => (
+      <SidebarProvider>
+        <div className="flex h-dvh w-full">
+          <Story />
+          <SidebarInset className="flex flex-col p-6 text-body text-muted-foreground">
+            Main content area
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    ),
+  ],
+} satisfies Meta<typeof AppSidebar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleTeams = [
+  { name: "Acme Inc.", logo: Sparkles, plan: "Enterprise" },
+  { name: "Beta Corp.", logo: Globe, plan: "Free" },
+];
+
+const sampleUser = { name: "Jane Doe", email: "jane@example.com" };
+
+const navItems = [
+  { title: "Home", icon: Home, url: "#" },
+  { title: "Settings", icon: Settings, url: "#" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <AppSidebar
+      header={<TeamSwitcher teams={sampleTeams} />}
+      footer={<NavUser user={sampleUser} />}
+    >
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {navItems.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </AppSidebar>
+  ),
+};
+
+export const HeaderOnly: Story = {
+  name: "Header only (no footer)",
+  render: () => (
+    <AppSidebar header={<TeamSwitcher teams={sampleTeams} />}>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {navItems.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </AppSidebar>
+  ),
+};
+
+export const FooterOnly: Story = {
+  name: "Footer only (no header)",
+  render: () => (
+    <AppSidebar footer={<NavUser user={sampleUser} />}>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {navItems.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </AppSidebar>
+  ),
+};

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

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SidebarProvider } from "../sidebar";
+import { AppSidebar } from "./app-sidebar";
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <SidebarProvider>{children}</SidebarProvider>;
+}
+
+describe("AppSidebar", () => {
+  it("renders children in the content slot", () => {
+    render(
+      <Wrapper>
+        <AppSidebar>
+          <div>nav content</div>
+        </AppSidebar>
+      </Wrapper>,
+    );
+    expect(screen.getByText("nav content")).toBeInTheDocument();
+  });
+
+  it("renders header slot when provided", () => {
+    render(
+      <Wrapper>
+        <AppSidebar header={<div>sidebar header</div>}>
+          <div>nav</div>
+        </AppSidebar>
+      </Wrapper>,
+    );
+    expect(screen.getByText("sidebar header")).toBeInTheDocument();
+  });
+
+  it("renders footer slot when provided", () => {
+    render(
+      <Wrapper>
+        <AppSidebar footer={<div>sidebar footer</div>}>
+          <div>nav</div>
+        </AppSidebar>
+      </Wrapper>,
+    );
+    expect(screen.getByText("sidebar footer")).toBeInTheDocument();
+  });
+
+  it("omits header DOM node when header prop is not provided", () => {
+    render(
+      <Wrapper>
+        <AppSidebar footer={<div>footer</div>}>
+          <div>nav</div>
+        </AppSidebar>
+      </Wrapper>,
+    );
+    expect(screen.getByText("footer")).toBeInTheDocument();
+    expect(screen.getByText("nav")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { forwardRef, type ComponentProps, type ReactNode } from "react";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from "../sidebar";
+
+export interface AppSidebarProps extends ComponentProps<typeof Sidebar> {
+  /**
+   * Content rendered inside `<SidebarHeader>`. Typically a `TeamSwitcher`
+   * or a logo + title combination.
+   */
+  header?: ReactNode;
+  /**
+   * Content rendered inside `<SidebarFooter>`. Typically a `NavUser` or
+   * a `TeamSwitcher` placed at the bottom.
+   */
+  footer?: ReactNode;
+  /**
+   * Main navigation content rendered inside `<SidebarContent>`. Pass one or
+   * more `<SidebarGroup>` / `<SidebarMenu>` compositions here.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Parameterized application sidebar shell. Composes `@radix-ui` `Sidebar`
+ * primitives with typed `header`, `footer`, and `children` slots.
+ *
+ * Registry blocks (`sidebar-02`, `sidebar-04`, `sidebar-05`) should import
+ * this instead of constructing the `Sidebar` → `SidebarHeader` →
+ * `SidebarContent` → `SidebarFooter` skeleton themselves.
+ *
+ * @example
+ * ```tsx
+ * <AppSidebar
+ *   header={<TeamSwitcher teams={teams} />}
+ *   footer={<NavUser user={currentUser} />}
+ * >
+ *   <SidebarGroup>…</SidebarGroup>
+ * </AppSidebar>
+ * ```
+ */
+export const AppSidebar = forwardRef<HTMLDivElement, AppSidebarProps>(function AppSidebar(
+  { header, footer, children, ...props },
+  ref,
+) {
+  return (
+    <Sidebar ref={ref} {...props}>
+      {header != null && <SidebarHeader>{header}</SidebarHeader>}
+      <SidebarContent>{children}</SidebarContent>
+      {footer != null && <SidebarFooter>{footer}</SidebarFooter>}
+    </Sidebar>
+  );
+});

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

@@ -0,0 +1 @@
+export { AppSidebar, type AppSidebarProps } from "./app-sidebar";

package/src/components/aspect-ratio/aspect-ratio.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AspectRatio } from "./aspect-ratio";
+const meta = {
+  title: "Display/AspectRatio",
+  component: AspectRatio,
+  tags: ["autodocs"],
+  argTypes: {
+    ratio: {
+      description: "Aspect ratio as a number (e.g. `16/9`, `4/3`, `1`). Defaults to `1`.",
+      control: "number",
+      table: { category: "Appearance" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged on the wrapper.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof AspectRatio>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <div className="w-72">
+      <AspectRatio
+        ratio={16 / 9}
+        className="flex items-center justify-center rounded-md bg-muted text-body text-muted-foreground"
+      >
+        16 / 9
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-48">
+      <AspectRatio
+        ratio={1}
+        className="flex items-center justify-center rounded-md bg-muted text-body text-muted-foreground"
+      >
+        1 / 1
+      </AspectRatio>
+    </div>
+  ),
+};

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+export const AspectRatio = AspectRatioPrimitive.Root;

package/src/components/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio } from "./aspect-ratio";

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

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AttributionPanel } from "./attribution-panel";
+
+const meta = {
+  title: "Core/AttributionPanel",
+  component: AttributionPanel,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The one surface where brand-ui's third-party notices are shown. Its content is " +
+          "GENERATED from the repo (`pnpm gen:attributions`, gated by `pnpm attributions:check`), " +
+          "so it cannot drift from what actually ships.\n\n" +
+          "**Why it matters:** `MapCanvas` disables MapLibre's in-map attribution control by " +
+          "default and the flow canvases hide the React Flow badge. The React Flow badge is an " +
+          "MIT project's request, but the default Carto basemap's OpenStreetMap data is " +
+          "ODbL-licensed and the credit is REQUIRED — mount this panel somewhere reachable " +
+          "(About dialog, settings pane, footer link) to keep that obligation met.",
+      },
+    },
+  },
+  argTypes: {
+    categories: {
+      description: "Restrict to these categories, in the panel's own order.",
+      table: { category: "Content" },
+    },
+    packages: {
+      description:
+        "Restrict to notices reachable through these packages — an app that never renders a map need not credit the basemap providers.",
+      table: { category: "Content" },
+    },
+    requiredOnly: {
+      description: "Show only notices a licence obliges the product to display.",
+      control: "boolean",
+      table: { category: "Content" },
+    },
+    maxHeight: {
+      description: "Cap the body height and scroll inside it.",
+      table: { category: "Layout" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof AttributionPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full generated dataset, scrolling inside a fixed height. */
+export const Default: Story = {
+  args: { maxHeight: 420, className: "max-w-2xl" },
+};
+
+/**
+ * The minimum a product must display: only the notices a licence obliges. This is
+ * the variant to mount when screen space is tight — a footer "Attributions" link
+ * or an About dialog section.
+ */
+export const RequiredOnly: Story = {
+  args: { requiredOnly: true, className: "max-w-2xl" },
+};
+
+/** Scoped to one package — what an app that only renders maps has to credit. */
+export const ScopedToMaps: Story = {
+  args: {
+    packages: ["@elabs-ai/components-maps"],
+    className: "max-w-2xl",
+  },
+};
+
+/** Adapted source and fonts only — the provenance half, without the dependency tail. */
+export const SourceAndFonts: Story = {
+  args: { categories: ["source", "font"], className: "max-w-2xl" },
+};
+
+/** A filter that matches nothing still renders a real empty state, never a blank box. */
+export const Empty: Story = {
+  args: { attributions: [], className: "max-w-2xl" },
+};

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

@@ -0,0 +1,123 @@
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { AttributionPanel } from "./attribution-panel";
+import type { Attribution } from "./attribution-types";
+
+afterEach(cleanup);
+
+const fixture: Attribution[] = [
+  {
+    id: "openstreetmap",
+    category: "data",
+    name: "OpenStreetMap",
+    version: null,
+    license: "ODbL-1.0",
+    copyright: "© OpenStreetMap contributors",
+    url: "https://www.openstreetmap.org/copyright",
+    usedBy: ["@elabs-ai/components-maps"],
+    required: true,
+    note: "Map data behind the default basemap.",
+  },
+  {
+    id: "clsx",
+    category: "dependency",
+    name: "clsx",
+    version: "2.1.1",
+    license: "MIT",
+    copyright: "Luke Edwards",
+    url: "https://github.com/lukeed/clsx",
+    usedBy: ["@elabs-ai/components-ui"],
+    required: false,
+    note: null,
+  },
+];
+
+describe("AttributionPanel", () => {
+  it("renders each attribution with its licence and copyright", () => {
+    render(<AttributionPanel attributions={fixture} />);
+    expect(screen.getByText("OpenStreetMap")).toBeInTheDocument();
+    expect(screen.getByText("© OpenStreetMap contributors")).toBeInTheDocument();
+    expect(screen.getByText("ODbL-1.0")).toBeInTheDocument();
+    expect(screen.getByText("clsx")).toBeInTheDocument();
+  });
+
+  // The obligation this component exists to meet: a required notice must be
+  // distinguishable by TEXT, not by colour alone (WCAG 1.4.1) — asserting the
+  // word means a future restyle can't reduce it to a coloured dot.
+  it("marks a licence-required notice with a word, not only a colour", () => {
+    render(<AttributionPanel attributions={fixture} />);
+    const osm = screen.getByText("OpenStreetMap").closest("li")!;
+    expect(within(osm).getByText("Required")).toBeInTheDocument();
+    const clsx = screen.getByText("clsx").closest("li")!;
+    expect(within(clsx).queryByText("Required")).not.toBeInTheDocument();
+  });
+
+  it("groups by category under a heading", () => {
+    render(<AttributionPanel attributions={fixture} />);
+    expect(screen.getByRole("heading", { name: "Map data & tiles" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Open-source dependencies" })).toBeInTheDocument();
+  });
+
+  it("filters to the licence-required notices with requiredOnly", () => {
+    render(<AttributionPanel attributions={fixture} requiredOnly />);
+    expect(screen.getByText("OpenStreetMap")).toBeInTheDocument();
+    expect(screen.queryByText("clsx")).not.toBeInTheDocument();
+  });
+
+  it("filters by consuming package so an app credits only what it ships", () => {
+    render(<AttributionPanel attributions={fixture} packages={["@elabs-ai/components-ui"]} />);
+    expect(screen.getByText("clsx")).toBeInTheDocument();
+    expect(screen.queryByText("OpenStreetMap")).not.toBeInTheDocument();
+  });
+
+  // Two panels share a page in Storybook autodocs (every story renders together)
+  // and in any app that mounts a scoped panel beside a full one. Heading ids must
+  // stay unique or aria-labelledby points at the wrong node and axe flags it.
+  it("scopes section heading ids per instance", () => {
+    const { container } = render(
+      <>
+        <AttributionPanel attributions={fixture} />
+        <AttributionPanel attributions={fixture} />
+      </>,
+    );
+    const ids = [...container.querySelectorAll("h3[id]")].map((h) => h.id);
+    expect(ids).toHaveLength(4);
+    expect(new Set(ids).size).toBe(4);
+    for (const section of container.querySelectorAll('[data-slot="attribution-panel-section"]')) {
+      const labelledBy = section.getAttribute("aria-labelledby")!;
+      expect(section.querySelector(`#${CSS.escape(labelledBy)}`)).not.toBeNull();
+    }
+  });
+
+  it("renders an empty state rather than a blank panel", () => {
+    render(<AttributionPanel attributions={[]} />);
+    expect(screen.getByText("No attributions match this filter.")).toBeInTheDocument();
+  });
+
+  it("opens external links safely", () => {
+    render(<AttributionPanel attributions={fixture} />);
+    const link = screen.getByRole("link", { name: "OpenStreetMap" });
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("merges className and spreads props onto the root", () => {
+    const { container } = render(
+      <AttributionPanel attributions={fixture} className="my-panel" id="attrib" />,
+    );
+    const root = container.querySelector('[data-slot="attribution-panel"]')!;
+    expect(root).toHaveClass("my-panel");
+    expect(root).toHaveAttribute("id", "attrib");
+  });
+
+  // The real dataset is generated; if the generator ever emits nothing, the panel
+  // would render an innocuous empty state and the obligation would silently lapse.
+  it("ships a non-empty generated dataset including the required map notices", async () => {
+    const { ATTRIBUTIONS } = await import("./attributions.generated");
+    expect(ATTRIBUTIONS.length).toBeGreaterThan(0);
+    const required = ATTRIBUTIONS.filter((a) => a.required);
+    expect(required.some((a) => a.id === "openstreetmap")).toBe(true);
+    expect(required.some((a) => a.id === "carto")).toBe(true);
+    for (const entry of required) expect(entry.copyright).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,191 @@
+import { forwardRef, useId, useMemo, type HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+import { Badge } from "../badge";
+import { ScrollArea } from "../scroll-area";
+import { useLocale } from "../locale-provider";
+import { ATTRIBUTIONS } from "./attributions.generated";
+import type { Attribution, AttributionCategory } from "./attribution-types";
+
+/**
+ * Render order + the heading each group gets. `data` first because those are the
+ * notices a licence obliges us to show; `dependency` last because it is the long
+ * tail nobody scrolls to but everybody must be able to reach.
+ */
+const CATEGORY_ORDER: readonly AttributionCategory[] = ["data", "source", "font", "dependency"];
+
+const CATEGORY_LABEL: Record<AttributionCategory, string> = {
+  data: "Map data & tiles",
+  source: "Adapted source",
+  font: "Fonts",
+  dependency: "Open-source dependencies",
+};
+
+export interface AttributionPanelProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * The notices to render. Defaults to the GENERATED dataset
+   * (`scripts/gen-attributions.mjs`), which is what keeps this panel accurate
+   * without anyone maintaining a list — override only to scope or to test.
+   */
+  attributions?: readonly Attribution[];
+  /** Restrict to these categories, in the panel's own order. Default: all. */
+  categories?: readonly AttributionCategory[];
+  /**
+   * Restrict to notices reachable through these packages — e.g. an app that only
+   * uses `…-ui` need not credit MapLibre's basemap providers. Matched against
+   * each entry's `usedBy`. Default: all.
+   */
+  packages?: readonly string[];
+  /** Show only the notices a licence obliges us to display. */
+  requiredOnly?: boolean;
+  /**
+   * Cap the body height and scroll inside it. Omit to let the panel grow and
+   * leave scrolling to the container (a Dialog body, a settings pane).
+   */
+  maxHeight?: number | string;
+}
+
+/** Filter + group in one pass so the render is a plain map over sections. */
+function groupAttributions(
+  attributions: readonly Attribution[],
+  {
+    categories,
+    packages,
+    requiredOnly,
+  }: Pick<AttributionPanelProps, "categories" | "packages" | "requiredOnly">,
+) {
+  const order = categories ?? CATEGORY_ORDER;
+  const visible = attributions.filter(
+    (a) =>
+      order.includes(a.category) &&
+      (!requiredOnly || a.required) &&
+      (!packages || a.usedBy.some((p) => packages.includes(p))),
+  );
+  return order
+    .map((category) => ({ category, items: visible.filter((a) => a.category === category) }))
+    .filter((group) => group.items.length > 0);
+}
+
+function AttributionItem({ item, requiredLabel }: { item: Attribution; requiredLabel: string }) {
+  return (
+    <li data-slot="attribution-panel-item" className="flex flex-col gap-0.5 py-2">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+        {item.url ? (
+          <a
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-body font-medium underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xs"
+          >
+            {item.name}
+          </a>
+        ) : (
+          <span className="text-body font-medium">{item.name}</span>
+        )}
+        {item.version ? (
+          <span className="text-meta text-muted-foreground tabular-nums">{item.version}</span>
+        ) : null}
+        <span className="text-meta text-muted-foreground">{item.license}</span>
+        {item.required ? (
+          // Not colour-only: the badge carries the word itself (WCAG 1.4.1).
+          <Badge variant="outline" className="text-meta">
+            {requiredLabel}
+          </Badge>
+        ) : null}
+      </div>
+      {item.copyright ? (
+        <p className="text-meta text-muted-foreground break-words">{item.copyright}</p>
+      ) : null}
+      {item.note ? <p className="text-meta text-muted-foreground">{item.note}</p> : null}
+    </li>
+  );
+}
+
+/**
+ * The single surface where brand-ui's third-party notices are displayed —
+ * OSS dependencies, adapted source, self-hosted fonts, and the map data/tile
+ * credits that a licence actually obliges the product to show.
+ *
+ * The content is GENERATED from the repo (`pnpm gen:attributions`, gated by
+ * `pnpm attributions:check`), so it cannot drift from what is actually shipped
+ * the way a hand-kept credits page does.
+ *
+ * **Why this exists:** `MapCanvas` disables MapLibre's in-map attribution
+ * control by default, and the flow canvases hide the React Flow badge. The
+ * React Flow badge is an MIT project's request and carries no condition, but the
+ * default Carto basemap's OpenStreetMap data is ODbL-licensed and the credit is
+ * REQUIRED — mounting this panel somewhere a user can reach (an About dialog, a
+ * settings pane, a footer link) is what keeps that obligation met while the map
+ * corner stays clean. Ship it, or turn the in-map control back on.
+ */
+export const AttributionPanel = forwardRef<HTMLElement, AttributionPanelProps>(
+  function AttributionPanel(
+    {
+      attributions = ATTRIBUTIONS,
+      categories,
+      packages,
+      requiredOnly,
+      maxHeight,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const { t } = useLocale();
+    // Instance-scoped so two panels on one page (Storybook autodocs renders every
+    // story together) can't emit the same heading id — duplicate ids break the
+    // aria-labelledby target and fail axe.
+    const baseId = useId();
+    const groups = useMemo(
+      () => groupAttributions(attributions, { categories, packages, requiredOnly }),
+      [attributions, categories, packages, requiredOnly],
+    );
+
+    const body = (
+      <div className="flex flex-col gap-6">
+        {groups.map(({ category, items }) => (
+          <section
+            key={category}
+            data-slot="attribution-panel-section"
+            aria-labelledby={`${baseId}-${category}`}
+          >
+            <h3 id={`${baseId}-${category}`} className="text-subtitle text-foreground mb-1">
+              {CATEGORY_LABEL[category]}
+            </h3>
+            <ul className="divide-y divide-border">
+              {items.map((item) => (
+                <AttributionItem
+                  key={item.id}
+                  item={item}
+                  requiredLabel={t("ui.attributionPanel.required")}
+                />
+              ))}
+            </ul>
+          </section>
+        ))}
+      </div>
+    );
+
+    return (
+      <section
+        ref={ref}
+        data-slot="attribution-panel"
+        aria-label={t("ui.attributionPanel.label")}
+        className={cn("bg-card border border-border rounded-lg p-4", className)}
+        {...props}
+      >
+        {groups.length === 0 ? (
+          <p className="text-body text-muted-foreground">{t("ui.attributionPanel.empty")}</p>
+        ) : maxHeight === undefined ? (
+          body
+        ) : (
+          <ScrollArea style={{ maxHeight }} className="pe-3">
+            {body}
+          </ScrollArea>
+        )}
+      </section>
+    );
+  },
+);
+
+export { ATTRIBUTIONS, CATEGORY_LABEL };
+export type { Attribution, AttributionCategory };