@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4

package/src/suite/components/command-palette-host.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 import type {
   SuiteCommandItem,
   SuiteCommandPaletteComponent,
-} from '../lib/injected';
+} from "../lib/injected";
 
 function isEditableTarget(): boolean {
-  if (typeof document === 'undefined') return false;
+  if (typeof document === "undefined") return false;
   const el = document.activeElement;
   return (
     el instanceof HTMLElement &&
@@ -27,26 +27,34 @@ function isEditableTarget(): boolean {
 export function CommandPaletteHost({
   items,
   isAuthenticated = true,
-  placeholder = 'Type a command or search…',
+  placeholder = "Type a command or search…",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette,
 }: {
   items: SuiteCommandItem[];
   isAuthenticated?: boolean;
   placeholder?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
   commandPalette: SuiteCommandPaletteComponent;
 }) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) return;
+      if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
       // Leave editors (BlockNote uses Cmd/Ctrl+K for links) alone unless the palette is open.
       if (!open && isEditableTarget()) return;
       e.preventDefault();
       setOpen((o) => !o);
     };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
   }, [open]);
 
   if (!isAuthenticated) return null;
@@ -57,6 +65,10 @@ export function CommandPaletteHost({
       isOpen={open}
       onClose={() => setOpen(false)}
       placeholder={placeholder}
+      id={id}
+      dataTest={dataTest}
+      inputId={inputId}
+      inputDataTest={inputDataTest}
     />
   );
 }

package/src/suite/components/suite-app-layout.tsx

@@ -49,7 +49,7 @@ export function SuiteAppLayout({
     <div
       data-test="app-shell"
       className={cn(
-        "suite-app-layout flex min-h-dvh lg:h-screen lg:overflow-hidden",
+        "suite-app-layout flex h-dvh overflow-hidden",
         className,
       )}
     >

package/src/suite/components/suite-bottom-nav.tsx

@@ -1,15 +1,15 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import type { ComponentType } from 'react';
+import Link from "next/link";
+import type { ComponentType } from "react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 export type SuiteNavIcon = ComponentType<{
   className?: string;
   strokeWidth?: number | string;
-  'aria-hidden'?: boolean | 'true' | 'false';
+  "aria-hidden"?: boolean | "true" | "false";
 }>;
 
 /**
@@ -23,14 +23,15 @@ export interface SuiteBottomNavItem {
   href: string;
   label: string;
   icon: SuiteNavIcon;
+  id?: string;
   active?: boolean;
   dataTest?: string;
 }
 
 export function SuiteBottomNav({
   items,
-  ariaLabel = 'Primary navigation',
-  dataTest = 'suite-bottom-nav',
+  ariaLabel = "Primary navigation",
+  dataTest = "suite-bottom-nav",
   className,
 }: {
   items: readonly SuiteBottomNavItem[];
@@ -38,7 +39,7 @@ export function SuiteBottomNav({
   dataTest?: string;
   className?: string;
 }) {
-  if (process.env.NODE_ENV !== 'production' && items.length > 5) {
+  if (process.env.NODE_ENV !== "production" && items.length > 5) {
     // eslint-disable-next-line no-console
     console.warn(
       `SuiteBottomNav: ${items.length} items — bottom nav should have at most 5 (Hick's Law).`,
@@ -54,20 +55,20 @@ export function SuiteBottomNav({
       <div
         aria-hidden
         className="shrink-0 lg:hidden"
-        style={{ height: 'calc(60px + env(safe-area-inset-bottom))' }}
+        style={{ height: "calc(60px + env(safe-area-inset-bottom))" }}
       />
       <nav
         aria-label={ariaLabel}
         data-test={dataTest}
         className={cn(
-          'suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden',
+          "suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden",
           className,
         )}
         style={
           {
             gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
-            '--suite-nav-items': items.length,
-            '--suite-nav-active': activeIndex >= 0 ? activeIndex : 0,
+            "--suite-nav-items": items.length,
+            "--suite-nav-active": activeIndex >= 0 ? activeIndex : 0,
           } as React.CSSProperties
         }
       >
@@ -82,17 +83,21 @@ export function SuiteBottomNav({
             <Link
               key={item.href}
               href={item.href}
-              data-test={item.dataTest ?? `suite-nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
-              aria-current={active ? 'page' : undefined}
+              id={item.id}
+              data-test={
+                item.dataTest ??
+                `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`
+              }
+              aria-current={active ? "page" : undefined}
               className={cn(
-                'suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none',
-                active && 'font-semibold text-ph-brand',
+                "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none",
+                active && "font-semibold text-ph-brand",
               )}
             >
               <span
                 className={cn(
-                  'suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center',
-                  active && 'suite-bottom-nav__icon--active',
+                  "suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center",
+                  active && "suite-bottom-nav__icon--active",
                 )}
               >
                 <Icon

package/src/suite/components/suite-layout.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SuiteAppLayout } from "./suite-app-layout";
+import { SuitePageHeader } from "./suite-layout";
+
+describe("suite scroll ownership", () => {
+  it("keeps mobile chrome outside the main scrollport and locks only on request", () => {
+    render(
+      <SuiteAppLayout
+        sidebar={<div>Sidebar</div>}
+        mobileHeader={<header>Mobile chrome</header>}
+        lockMainScroll
+      >
+        <div>Page content</div>
+      </SuiteAppLayout>,
+    );
+
+    const main = screen.getByRole("main");
+    const mobileHeader = screen.getByText("Mobile chrome").closest("header");
+
+    expect(main).toHaveAttribute("data-lock-scroll", "true");
+    expect(main).toHaveClass("overflow-hidden");
+    expect(main).not.toContainElement(mobileHeader);
+    expect(within(main).getByText("Page content")).toBeInTheDocument();
+  });
+
+  it("lets page headers and actions reflow without clipping narrow screens", () => {
+    render(
+      <SuitePageHeader
+        title="A very long responsive page title"
+        actions={<button type="button">Export report</button>}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: "A very long responsive page title",
+      }),
+    ).toHaveClass("break-words", "text-balance");
+    expect(screen.getByRole("button", { name: "Export report" }).parentElement)
+      .toHaveClass("max-w-full", "overflow-x-auto");
+  });
+});

package/src/suite/components/suite-layout.tsx

@@ -181,7 +181,7 @@ export function SuitePageHeader({
       data-test={dataTest}
       data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
-        'flex items-start justify-between gap-4 pb-2 sm:pb-3',
+        'flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
         // No extra pt here — page inset sets the shared title baseline.
         // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && 'suite-page-header-sticky',
@@ -212,7 +212,7 @@ export function SuitePageHeader({
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]',
+                'min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]',
                 titleClassName,
               )}
             >
@@ -237,7 +237,7 @@ export function SuitePageHeader({
         ) : null}
       </div>
       {actions ? (
-        <div className="flex shrink-0 items-center gap-2 self-center">
+        <div className="flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0">
           {actions}
         </div>
       ) : null}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -23,6 +23,10 @@ export function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName,
 }: {
   open: boolean;
@@ -42,6 +46,10 @@ export function SuiteMobileDrawer({
   durationMs?: number;
   dataTest?: string;
   panelDataTest?: string;
+  backdropId?: string;
+  backdropDataTest?: string;
+  closeButtonId?: string;
+  closeButtonDataTest?: string;
   /** Panel surface overrides (e.g. `bg-ph-canvas`). */
   panelClassName?: string;
 }) {
@@ -106,6 +114,8 @@ export function SuiteMobileDrawer({
     <div data-test={dataTest} className="no-print fixed inset-0 z-50 lg:hidden">
       <button
         type="button"
+        id={backdropId}
+        data-test={backdropDataTest}
         tabIndex={-1}
         className={cn(
           "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
@@ -148,6 +158,8 @@ export function SuiteMobileDrawer({
             ) : null}
             <button
               type="button"
+              id={closeButtonId}
+              data-test={closeButtonDataTest}
               onClick={onClose}
               className="-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
               aria-label={closeLabel}

package/src/suite/components/suite-mobile-header.tsx

@@ -1,11 +1,14 @@
-'use client';
+"use client";
 
-import type { ComponentType, ReactNode } from 'react';
-import { Menu } from 'iconoir-react';
+import type { ComponentType, ReactNode } from "react";
+import { Menu } from "iconoir-react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
-type SuiteMenuIcon = ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>;
+type SuiteMenuIcon = ComponentType<{
+  className?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+}>;
 
 /**
  * Suite mobile app bar — the standardized top of every app on phone/tablet.
@@ -18,7 +21,8 @@ export function SuiteMobileHeader({
   menuIcon: MenuIcon = Menu,
   title,
   actions,
-  menuLabel = 'Open navigation',
+  menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className,
@@ -32,6 +36,7 @@ export function SuiteMobileHeader({
   /** Right-hand slot — search, bell, avatar (keep this order). */
   actions?: ReactNode;
   menuLabel?: string;
+  menuId?: string;
   menuDataTest?: string;
   dataTest?: string;
   className?: string;
@@ -40,13 +45,14 @@ export function SuiteMobileHeader({
     <header
       data-test={dataTest}
       className={cn(
-        'suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden',
+        "suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden",
         className,
       )}
     >
       {onMenuClick ? (
         <button
           type="button"
+          id={menuId}
           data-test={menuDataTest}
           className="suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
           onClick={onMenuClick}
@@ -57,8 +63,8 @@ export function SuiteMobileHeader({
       ) : null}
       <div
         className={cn(
-          'flex min-w-0 flex-1 items-center',
-          !onMenuClick && 'pl-2',
+          "flex min-w-0 flex-1 items-center",
+          !onMenuClick && "pl-2",
         )}
       >
         {title}

package/src/suite/components/suite-notification-bell.tsx

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Bell } from 'iconoir-react';
+import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Bell } from "iconoir-react";
 
-import type { SuiteDropdownMenuComponent } from '../lib/injected';
-import { resolveSuiteNotificationHref } from '../lib/apps';
+import type { SuiteDropdownMenuComponent } from "../lib/injected";
+import { resolveSuiteNotificationHref } from "../lib/apps";
 
 const POLL_MS = 60_000;
 
@@ -30,9 +30,9 @@ export interface SuiteNotificationsResponse {
 
 function timeAgo(iso: string): string {
   const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) return '';
+  if (Number.isNaN(then)) return "";
   const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
-  if (secs < 60) return 'just now';
+  if (secs < 60) return "just now";
   const mins = Math.round(secs / 60);
   if (mins < 60) return `${mins}m ago`;
   const hrs = Math.round(mins / 60);
@@ -45,7 +45,10 @@ export function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu,
-  cacheKey = 'suite-notifications-cache',
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest,
 }: {
   fetchNotifications: () => Promise<SuiteNotificationsResponse>;
   markRead: (id: string) => Promise<unknown>;
@@ -53,6 +56,9 @@ export function SuiteNotificationBell({
   dropdownMenu: SuiteDropdownMenuComponent;
   /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
   cacheKey?: string | null;
+  dataTest?: string;
+  triggerId?: string;
+  triggerDataTest?: string;
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -165,16 +171,18 @@ export function SuiteNotificationBell({
   return (
     <DropdownMenu
       aria-label="Notifications"
+      triggerId={triggerId ?? `${dataTest}-trigger`}
+      triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       align="end"
       panelClassName="w-80 overflow-hidden p-0"
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="relative inline-flex h-9 w-9 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+        <span className="relative inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
           <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
           {unread > 0 ? (
             <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface">
-              {unread > 9 ? '9+' : unread}
+              {unread > 9 ? "9+" : unread}
             </span>
           ) : null}
         </span>
@@ -185,6 +193,8 @@ export function SuiteNotificationBell({
         {unread > 0 ? (
           <button
             type="button"
+            id={`${dataTest}-mark-all`}
+            data-test={`${dataTest}-mark-all`}
             onClick={markAll}
             className="text-xs font-medium text-ph-brand hover:underline"
           >
@@ -202,6 +212,8 @@ export function SuiteNotificationBell({
             <button
               key={n.id}
               type="button"
+              id={`${dataTest}-item-${n.id}`}
+              data-test={`${dataTest}-item-${n.id}`}
               onClick={() => void openItem(n)}
               className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
             >

package/src/suite/components/suite-settings-mobile-nav.tsx

@@ -7,6 +7,7 @@ export interface SuiteSettingsNavItem {
   label: string;
   href: string;
   icon: ElementType | ReactNode;
+  id?: string;
   testId?: string;
 }
 
@@ -59,6 +60,7 @@ export function SuiteSettingsMobileNav({
             <button
               key={item.href}
               type="button"
+              id={item.id}
               data-test={item.testId}
               onClick={() => onSelect(item.href)}
               aria-current={active ? "page" : undefined}

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

@@ -13,6 +13,8 @@ export interface SuiteSidebarNavItem {
   href: string;
   label: string;
   icon: SuiteNavIcon;
+  id?: string;
+  dataTest?: string;
   active?: boolean;
   onClick?: () => void;
   badge?: ReactNode;
@@ -115,16 +117,17 @@ export function SuiteSidebar({
                 <Link
                   key={item.label}
                   href={item.href}
-                  data-test="nav-link"
+                  id={item.id}
+                  data-test={item.dataTest ?? "nav-link"}
                   aria-current={active ? "page" : undefined}
                   onClick={item.onClick}
                   className={cn(
-                    "group relative flex items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
+                    "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
                     active
                       ? "bg-ph-muted"
                       : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
                     collapsed
-                      ? "mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0"
+                      ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0"
                       : "w-full px-2.5 py-2",
                   )}
                 >

package/src/suite/components/suite-user-menu.tsx

@@ -19,6 +19,8 @@ export interface SuiteUserMenuProps {
   /** Show the old desktop sidebar sign-out action beside the avatar. */
   showSignOutAction?: boolean;
   dataTest?: string;
+  triggerId?: string;
+  triggerDataTest?: string;
   className?: string;
 }
 
@@ -50,6 +52,8 @@ export function SuiteUserMenu({
   fallbackInitials,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
+  triggerId,
+  triggerDataTest,
   className,
 }: SuiteUserMenuProps) {
   const router = useRouter();
@@ -77,6 +81,8 @@ export function SuiteUserMenu({
   const accountMenu = (
     <DropdownMenu
       trigger={avatar}
+      triggerId={triggerId ?? `${dataTest}-trigger`}
+      triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       aria-label="Account menu"
       align="end"
       side="bottom"

package/src/suite/lib/injected.ts

@@ -1,8 +1,4 @@
-import type {
-  ButtonHTMLAttributes,
-  ComponentType,
-  ReactNode,
-} from 'react';
+import type { ButtonHTMLAttributes, ComponentType, ReactNode } from "react";
 
 /**
  * Structural types for theme primitives each app injects from
@@ -12,10 +8,12 @@ import type {
 
 export interface SuiteDropdownMenuProps {
   trigger: ReactNode;
+  triggerId?: string;
+  triggerDataTest?: string;
   children: ReactNode;
-  'aria-label': string;
-  align?: 'start' | 'center' | 'end';
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  "aria-label": string;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
   sideOffset?: number;
   className?: string;
   panelClassName?: string;
@@ -23,8 +21,7 @@ export interface SuiteDropdownMenuProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-export type SuiteDropdownMenuComponent =
-  ComponentType<SuiteDropdownMenuProps>;
+export type SuiteDropdownMenuComponent = ComponentType<SuiteDropdownMenuProps>;
 
 export type SuiteDropdownItemComponent = ComponentType<
   ButtonHTMLAttributes<HTMLButtonElement>
@@ -44,11 +41,15 @@ export type SuiteCommandPaletteComponent = ComponentType<{
   onClose: () => void;
   placeholder?: string;
   className?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
 }>;
 
 /** App-branded spinner (each app has its own AppSpinner design). */
 export type SuiteSpinnerComponent = ComponentType<{
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   className?: string;
   label?: string;
 }>;

package/src/components/charts/index.ts

@@ -1,9 +0,0 @@
-"use client";
-
-export { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart } from "./quill";
-export type { TimeSeriesLineChartProps, TimeSeriesLineChartSeries } from "./quill";
-export type { BarChartProps, BarChartSeries } from "./quill";
-export type { PieChartProps, PieChartSlice } from "./quill";
-export type { SparklineProps } from "./quill";
-export type { MetricCardProps } from "./quill";
-export type { FunnelChartProps, FunnelStep } from "./quill/FunnelChart";

package/src/components/charts/quill/BarChart.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { cn } from "@/lib/cn";
-
-export interface BarChartSeries {
-  key: string;
-  label: string;
-  data: number[];
-  color?: string;
-}
-
-export interface BarChartProps {
-  series: BarChartSeries[];
-  labels: string[];
-  className?: string;
-  height?: number;
-}
-
-export function BarChart({ series, labels, className, height = 280 }: BarChartProps) {
-  const tokens = useChartTokens();
-  const groupCount = labels.length;
-  const barCount = series.length;
-
-  const { maxVal, chartData } = useMemo(() => {
-    let mx = 0;
-    const flat = series.flatMap((s) => s.data);
-    for (const v of flat) if (v > mx) mx = v;
-    return {
-      maxVal: mx || 1,
-      chartData: series.map((s, i) => ({
-        label: s.label,
-        color: s.color ?? tokens.series[i % tokens.series.length],
-        values: s.data,
-      })),
-    };
-  }, [series, tokens.series]);
-
-  const padding = { top: 16, right: 8, bottom: 24, left: 8 };
-  const innerW = 400 - padding.left - padding.right;
-  const innerH = height - padding.top - padding.bottom;
-  const groupW = innerW / groupCount;
-  const barW = Math.max(4, (groupW * 0.7) / barCount);
-  const gap = groupW * 0.15;
-
-  return (
-    <div className={cn("relative w-full", className)} style={{ height }}>
-      <svg viewBox={`0 0 400 ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid meet" suppressHydrationWarning>
-        {chartData.map((bar, bi) =>
-          bar.values.map((v, li) => {
-            const x = padding.left + li * groupW + gap / 2 + bi * barW;
-            const barH = (v / maxVal) * (innerH - 4);
-            const y = padding.top + innerH - barH;
-            return (
-              <rect
-                key={`${bi}-${li}`}
-                x={x}
-                y={y}
-                width={barW}
-                height={barH}
-                fill={bar.color}
-                rx={2}
-              >
-                <title>{`${bar.label}: ${v}`}</title>
-              </rect>
-            );
-          })
-        )}
-        {labels.map((l, i) => (
-          <text
-            key={l}
-            x={padding.left + i * groupW + groupW / 2}
-            y={height - 4}
-            textAnchor="middle"
-            className="fill-ph-mutedtext"
-            fontSize="10"
-          >
-            {l}
-          </text>
-        ))}
-      </svg>
-    </div>
-  );
-}