@xenide-io/the-old-ui-theme 0.10.0 → 0.11.0

package/dist/ui.mjs

@@ -10,6 +10,7 @@ import {
   AvatarGroup,
   Badge,
   BarChart,
+  BrandSpinner,
   Button,
   ButtonChrome,
   Calendar,
@@ -85,7 +86,7 @@ import {
   Tooltip,
   TooltipProvider,
   useChartTokens
-} from "./chunk-LHE4ROON.mjs";
+} from "./chunk-RIPGN6FG.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,
@@ -98,6 +99,7 @@ export {
   AvatarGroup,
   Badge,
   BarChart,
+  BrandSpinner,
   Button,
   ButtonChrome,
   Calendar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/app/globals.css

@@ -112,6 +112,20 @@ body {
 }
 
 @layer components {
+  .suite-sidebar-link:focus-visible {
+    outline: none;
+    box-shadow: var(--ph-focus-halo);
+  }
+
+  .ph-brand-spinner__column {
+    animation: ph-spinner-columns 0.85s ease-in-out infinite;
+  }
+
+  @keyframes ph-spinner-columns {
+    0%, 100% { opacity: 0.35; transform: translateY(2px); }
+    50% { opacity: 1; transform: translateY(-2px); }
+  }
+
   .ph-page-title {
     font-size: var(--ph-type-page);
     line-height: var(--ph-leading-title);
@@ -983,6 +997,47 @@ body {
   }
 
   /* LemonTable.scss — sticky-header border Simulation + row rhythm */
+  .ph-table-report-wrap {
+    overflow-x: auto;
+  }
+
+  .ph-table-report-wrap:focus-visible {
+    outline: 3px solid color-mix(in oklab, var(--ph-focus-ring) 30%, transparent);
+    outline-offset: 2px;
+  }
+
+  /* Preserve the existing report table geometry and sentence-case headings. */
+  .ph-table-report {
+    @apply w-full text-left text-sm;
+  }
+
+  .ph-table-report thead {
+    color: var(--ph-text-secondary);
+  }
+
+  .ph-table-report tr {
+    border-bottom: 1px solid var(--ph-border);
+  }
+
+  .ph-table-report th:first-child,
+  .ph-table-report td:first-child {
+    padding-block: 0.75rem;
+  }
+
+  .ph-table-report th:not(:last-child),
+  .ph-table-report td:not(:last-child) {
+    padding-right: 1rem;
+  }
+
+  .ph-table-compact .ph-table-report {
+    font-size: var(--ph-type-meta);
+  }
+
+  .ph-table-compact .ph-table-report th:first-child,
+  .ph-table-compact .ph-table-report td:first-child {
+    padding-block: 0.375rem;
+  }
+
   .ph-table-wrap {
     @apply overflow-x-auto bg-ph-surface;
     border-radius: var(--ph-radius-surface);
@@ -1063,7 +1118,8 @@ body {
     font-size: var(--ph-type-meta);
   }
 
-  .ph-table td.ph-table-empty {
+  .ph-table td.ph-table-empty,
+  .ph-table-report td.ph-table-empty {
     @apply py-8 text-center text-sm text-ph-mutedtext;
   }
 

package/src/components/ui/BrandSpinner.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useId, useSyncExternalStore, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export type BrandSpinnerVariant =
+  "ring" | "timer" | "columns" | "orbit" | "ink";
+export type BrandSpinnerSize = "sm" | "md" | "lg";
+
+export interface BrandSpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: BrandSpinnerVariant;
+  size?: BrandSpinnerSize;
+  label?: string;
+}
+
+const sizes: Record<BrandSpinnerSize, number> = { sm: 20, md: 40, lg: 56 };
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+
+function subscribeMotion(onChange: () => void): () => void {
+  const media = window.matchMedia?.(reducedMotionQuery);
+  media?.addEventListener("change", onChange);
+  return () => media?.removeEventListener("change", onChange);
+}
+
+function readReducedMotion(): boolean {
+  return window.matchMedia?.(reducedMotionQuery).matches ?? false;
+}
+
+export function BrandSpinner({
+  variant = "ring",
+  size = "md",
+  label = "Loading",
+  className,
+  ...props
+}: BrandSpinnerProps) {
+  const gradientId = `ph-spinner-${useId().replace(/:/g, "")}`;
+  const reducedMotion = useSyncExternalStore(
+    subscribeMotion,
+    readReducedMotion,
+    () => true,
+  );
+  const dimension = sizes[size];
+
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      data-test="app-spinner"
+      className={cn(
+        "inline-flex shrink-0",
+        variant !== "orbit" && "text-ph-brand",
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        width={dimension}
+        height={dimension}
+        viewBox={variant === "ring" ? "0 0 24 24" : "0 0 40 40"}
+        aria-hidden
+        className={
+          variant === "timer" || variant === "ring"
+            ? "animate-spin motion-reduce:animate-none"
+            : undefined
+        }
+      >
+        {variant === "ring" ? (
+          <>
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              opacity="0.2"
+            />
+            <path
+              d="M12 2a10 10 0 0 1 10 10"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          </>
+        ) : variant === "timer" ? (
+          <>
+            <circle
+              cx="20"
+              cy="20"
+              r="15"
+              fill="none"
+              stroke="currentColor"
+              strokeOpacity="0.18"
+              strokeWidth="2.5"
+            />
+            <circle
+              cx="20"
+              cy="20"
+              r="15"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeDasharray="24 70"
+            />
+            <circle cx="20" cy="5" r="2.25" fill="currentColor" />
+          </>
+        ) : variant === "columns" ? (
+          <>
+            <rect
+              x="9"
+              y="16"
+              width="6"
+              height="14"
+              rx="2"
+              fill="currentColor"
+              fillOpacity="0.35"
+              className="ph-brand-spinner__column"
+            />
+            <rect
+              x="17"
+              y="11"
+              width="6"
+              height="19"
+              rx="2"
+              fill="currentColor"
+              className="ph-brand-spinner__column"
+              style={{ animationDelay: "0.14s" }}
+            />
+            <rect
+              x="25"
+              y="14"
+              width="6"
+              height="16"
+              rx="2"
+              fill="currentColor"
+              fillOpacity="0.55"
+              className="ph-brand-spinner__column"
+              style={{ animationDelay: "0.28s" }}
+            />
+          </>
+        ) : variant === "orbit" ? (
+          <>
+            <defs>
+              <linearGradient
+                id={gradientId}
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="100%"
+              >
+                <stop offset="0%" stopColor="#1877f2" />
+                <stop offset="100%" stopColor="#ebbcba" />
+              </linearGradient>
+            </defs>
+            <circle
+              cx="20"
+              cy="20"
+              r="15"
+              fill="none"
+              stroke={`url(#${gradientId})`}
+              strokeOpacity="0.25"
+              strokeWidth="2"
+            />
+            <g className="origin-[20px_20px] animate-spin motion-reduce:animate-none">
+              <circle
+                cx="20"
+                cy="20"
+                r="15"
+                fill="none"
+                stroke={`url(#${gradientId})`}
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeDasharray="22 72"
+              />
+            </g>
+            <g className="origin-[20px_20px] animate-[spin_1.6s_linear_infinite_reverse] motion-reduce:animate-none">
+              <circle
+                cx="20"
+                cy="20"
+                r="9"
+                fill="none"
+                stroke="#ebbcba"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeDasharray="12 45"
+                strokeOpacity="0.9"
+              />
+            </g>
+            <circle
+              cx="20"
+              cy="20"
+              r="2.5"
+              fill="#1877f2"
+              className="animate-pulse motion-reduce:animate-none"
+            />
+          </>
+        ) : (
+          <>
+            <g>
+              {!reducedMotion ? (
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 20 20"
+                  to="360 20 20"
+                  dur="2.4s"
+                  repeatCount="indefinite"
+                />
+              ) : null}
+              <circle
+                cx="20"
+                cy="20"
+                r="16"
+                fill="none"
+                stroke="currentColor"
+                strokeOpacity="0.2"
+                strokeWidth="1.5"
+                strokeDasharray="3 5"
+              />
+            </g>
+            <g>
+              {!reducedMotion ? (
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="360 20 20"
+                  to="0 20 20"
+                  dur="1.1s"
+                  repeatCount="indefinite"
+                />
+              ) : null}
+              <circle
+                cx="20"
+                cy="20"
+                r="11"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeDasharray="18 52"
+              />
+            </g>
+            <path
+              d="M16 14h8v12a1 1 0 0 1-1.4.9L20 25.5l-2.6 1.4A1 1 0 0 1 16 26V14z"
+              fill="currentColor"
+              fillOpacity="0.85"
+              className="animate-pulse motion-reduce:animate-none"
+            />
+          </>
+        )}
+      </svg>
+    </div>
+  );
+}

package/src/components/ui/CodeBlock.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { cn } from "@/lib/cn";
+import { trackSuiteEvent } from "@/lib/suite-analytics";
 
 interface CodeBlockProps {
   code: string;
@@ -14,7 +15,16 @@ export function CodeBlock({ code, language = "tsx", filename, className }: CodeB
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch {
+      return;
+    }
+    trackSuiteEvent("Link Copied", {
+      kind: "code",
+      copy_kind: "code_block",
+      label: filename ?? language,
+    });
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };

package/src/components/ui/Marketing.tsx

@@ -24,8 +24,24 @@ export function MarketingHeader({
   navigation: ReactNode;
   actions: ReactNode;
 }) {
+  // At the very top nothing sits under the header, so it must stay transparent
+  // (the page background shows through from the first pixel). Only once content
+  // scrolls beneath it do we frost it.
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 4);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
   return (
-    <header {...props} className={cn("marketing-header", className)}>
+    <header
+      {...props}
+      data-scrolled={scrolled ? "true" : "false"}
+      className={cn("marketing-header", className)}
+    >
       <div className="marketing-header__inner">
         <div className="marketing-header__brand">{brand}</div>
         <nav

package/src/components/ui/SettingsLayout.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { IconTuning } from "@/components/icons";
 import { cn } from "@/lib/cn";
+import { trackSuiteEvent } from "@/lib/suite-analytics";
 
 export interface SettingsNavItem {
   id: string;
@@ -50,6 +53,7 @@ export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
                   item.active && "ph-settings-nav__item--active",
                 )}
                 aria-current={item.active ? "page" : undefined}
+                onClick={() => trackSuiteEvent("Tab Viewed", { tab: item.id })}
               >
                 {item.icon ? (
                   <span className="ph-settings-nav__icon">{item.icon}</span>

package/src/components/ui/Table.tsx

@@ -3,6 +3,8 @@
 import type { CSSProperties, Key, ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
+export type TableVariant = "default" | "report";
+
 export interface TableColumn<T> {
   key: string;
   header: ReactNode;
@@ -19,6 +21,8 @@ export interface TableProps<T> {
   getRowStyle?: (row: T) => CSSProperties | undefined;
   getRowKey?: (row: T, index: number) => Key;
   className?: string;
+  tableClassName?: string;
+  variant?: TableVariant;
   caption?: string;
   emptyState?: ReactNode;
 }
@@ -32,37 +36,56 @@ export function Table<T>({
   getRowStyle,
   getRowKey,
   className,
+  tableClassName,
+  variant = "default",
   caption,
   emptyState = "No data available.",
 }: TableProps<T>) {
   return (
     <div
-      className={cn("ph-table-wrap", compact && "ph-table-compact", className)}
+      className={cn(
+        variant === "report" ? "ph-table-report-wrap" : "ph-table-wrap",
+        compact && "ph-table-compact",
+        className,
+      )}
       role="region"
       aria-label={caption ?? "Data table"}
       tabIndex={0}
     >
-      <table className={cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon")}>
+      <table
+        className={cn(
+          variant === "report" ? "ph-table-report" : "ph-table",
+          zebra && "ph-table-zebra",
+          ribbon && "ph-table--ribbon",
+          tableClassName,
+        )}
+      >
         {caption && <caption className="sr-only">{caption}</caption>}
         <thead>
           <tr>
             {columns.map((col) => (
-              <th key={col.key} className={col.className}>{col.header}</th>
+              <th key={col.key} scope="col" className={col.className}>
+                {col.header}
+              </th>
             ))}
           </tr>
         </thead>
         <tbody>
           {data.length === 0 ? (
-            <tr>
-              <td colSpan={columns.length} className="ph-table-empty">
-                {emptyState}
-              </td>
-            </tr>
+            emptyState === null ? null : (
+              <tr>
+                <td colSpan={columns.length} className="ph-table-empty">
+                  {emptyState}
+                </td>
+              </tr>
+            )
           ) : (
             data.map((row, i) => (
               <tr key={getRowKey?.(row, i) ?? i} style={getRowStyle?.(row)}>
                 {columns.map((col) => (
-                  <td key={col.key} className={col.className}>{col.cell(row)}</td>
+                  <td key={col.key} className={col.className}>
+                    {col.cell(row)}
+                  </td>
                 ))}
               </tr>
             ))

package/src/components/ui/brand-spinner.test.tsx

@@ -0,0 +1,62 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BrandSpinner } from "./BrandSpinner";
+
+afterEach(cleanup);
+
+describe("BrandSpinner", () => {
+  it("keeps orbit gradient references unique when multiple loaders render", () => {
+    const { container } = render(
+      <>
+        <BrandSpinner variant="orbit" size="sm" label="Loading team" />
+        <BrandSpinner variant="orbit" size="lg" label="Loading projects" />
+      </>,
+    );
+    const gradients = container.querySelectorAll("linearGradient");
+    expect(gradients[0].id).not.toBe(gradients[1].id);
+    expect(
+      screen.getByRole("status", { name: "Loading team" }).querySelector("svg"),
+    ).toHaveAttribute("width", "20");
+    expect(
+      screen
+        .getByRole("status", { name: "Loading projects" })
+        .querySelector("svg"),
+    ).toHaveAttribute("width", "56");
+    expect(
+      container.querySelector(`[stroke="url(#${gradients[1].id})"]`),
+    ).not.toBeNull();
+  });
+
+  it("stops SVG animation when reduced-motion preference changes", () => {
+    const original = window.matchMedia;
+    let notify: (() => void) | undefined;
+    const media = {
+      matches: false,
+      addEventListener: vi.fn((_event: string, listener: () => void) => {
+        notify = listener;
+      }),
+      removeEventListener: vi.fn(),
+    };
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: vi.fn(() => media),
+    });
+
+    try {
+      const { container, unmount } = render(<BrandSpinner variant="ink" />);
+      expect(container.querySelectorAll("animateTransform")).toHaveLength(2);
+      act(() => {
+        media.matches = true;
+        notify?.();
+      });
+      expect(container.querySelectorAll("animateTransform")).toHaveLength(0);
+      unmount();
+      expect(media.removeEventListener).toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        value: original,
+      });
+    }
+  });
+});

package/src/components/ui/index.ts

@@ -134,6 +134,7 @@ export {
   Table as Table,
   type TableColumn as TableColumn,
   type TableProps as TableProps,
+  type TableVariant as TableVariant,
 } from "@/components/ui/Table";
 export {
   Stat as Stat,
@@ -260,6 +261,12 @@ export {
   Spinner as Spinner,
   type SpinnerProps as SpinnerProps,
 } from "@/components/ui/Spinner";
+export {
+  BrandSpinner,
+  type BrandSpinnerProps,
+  type BrandSpinnerSize,
+  type BrandSpinnerVariant,
+} from "@/components/ui/BrandSpinner";
 export { Dot as Dot, type DotProps as DotProps } from "@/components/ui/Dot";
 export {
   Chip as Chip,

package/src/components/ui/table.test.tsx

@@ -1,8 +1,10 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 
 import { Table } from "./Table";
 
+afterEach(cleanup);
+
 describe("Table", () => {
   it("names its scroll region and renders a custom empty state", () => {
     render(
@@ -14,7 +16,32 @@ describe("Table", () => {
       />,
     );
 
-    expect(screen.getByRole("region", { name: "People" })).toHaveAttribute("tabindex", "0");
-    expect(screen.getByRole("cell", { name: "No people yet." })).toHaveAttribute("colspan", "1");
+    expect(screen.getByRole("region", { name: "People" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(
+      screen.getByRole("cell", { name: "No people yet." }),
+    ).toHaveAttribute("colspan", "1");
+  });
+
+  it("lets report pages own their empty state without an extra table row", () => {
+    render(
+      <Table
+        variant="report"
+        caption="Run report"
+        data={[] as Array<{ name: string }>}
+        columns={[{ key: "name", header: "Crew", cell: (row) => row.name }]}
+        emptyState={null}
+      />,
+    );
+    expect(
+      screen.getByRole("table", { name: "Run report" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Crew" })).toHaveAttribute(
+      "scope",
+      "col",
+    );
+    expect(screen.queryByRole("cell")).not.toBeInTheDocument();
   });
 });