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

package/src/components/ui/MarketingIllustrations.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { useId } from "react";
+
+export function AiWritingIllustration({
+  title,
+  prompt,
+  before,
+  after,
+}: {
+  title: string;
+  prompt: string;
+  before: string[];
+  after: string[];
+}) {
+  const id = useId().replaceAll(":", "");
+  return (
+    <svg
+      viewBox="0 0 560 370"
+      className="h-auto w-full"
+      role="img"
+      aria-label={`${title}: use /ai and Shelly AI to draft and polish writing`}
+      data-marketing-art
+    >
+      <defs>
+        <radialGradient id={`${id}-glow`}>
+          <stop stopColor="var(--ph-accent)" stopOpacity=".2" />
+          <stop offset="1" stopColor="var(--ph-accent)" stopOpacity="0" />
+        </radialGradient>
+        <linearGradient id={`${id}-paper`} x2="1" y2="1">
+          <stop stopColor="var(--ph-surface)" />
+          <stop offset="1" stopColor="var(--ph-muted)" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="280" cy="198" rx="260" ry="168" fill={`url(#${id}-glow)`} />
+      <g className="marketing-svg-float">
+        <rect
+          x="18"
+          y="28"
+          width="524"
+          height="300"
+          rx="20"
+          fill={`url(#${id}-paper)`}
+          stroke="var(--ph-border)"
+        />
+        <path d="M18 76h524" stroke="var(--ph-border)" />
+        <image href="/shelly-icon.svg" x="36" y="40" width="24" height="24" />
+        <text
+          x="70"
+          y="57"
+          fontSize="16"
+          fontWeight="700"
+          fill="var(--ph-text-primary)"
+        >
+          {title}
+        </text>
+        <text x="434" y="57" fontSize="12" fill="var(--ph-text-secondary)">
+          Shelly AI
+        </text>
+        <rect
+          x="38"
+          y="94"
+          width="484"
+          height="42"
+          rx="10"
+          fill="var(--ph-canvas)"
+          stroke="var(--ph-selected-border)"
+        />
+        <text x="54" y="121" fontSize="16" fill="var(--ph-text-primary)">
+          {prompt}
+        </text>
+        <g className="marketing-svg-draft">
+          <text
+            x="46"
+            y="171"
+            fontSize="12"
+            fontWeight="700"
+            fill="var(--ph-text-secondary)"
+          >
+            YOUR DRAFT
+          </text>
+          {before.map((line, index) => (
+            <text
+              key={index}
+              x="46"
+              y={205 + index * 26}
+              fontSize="16"
+              fill="var(--ph-text-secondary)"
+            >
+              {line}
+            </text>
+          ))}
+        </g>
+        <path
+          className="marketing-svg-thread"
+          d="M265 175v102"
+          stroke="var(--ph-accent)"
+          strokeWidth="2"
+          strokeDasharray="4 7"
+        />
+        <g className="marketing-svg-polished">
+          <text
+            x="294"
+            y="171"
+            fontSize="12"
+            fontWeight="700"
+            fill="var(--ph-accent)"
+          >
+            POLISHED WITH SHELLY
+          </text>
+          {after.map((line, index) => (
+            <text
+              key={index}
+              x="294"
+              y={205 + index * 26}
+              fontSize="16"
+              fill="var(--ph-text-primary)"
+            >
+              {line}
+            </text>
+          ))}
+          <path
+            d="m302 294 5 5 10-11"
+            fill="none"
+            stroke="var(--ph-success)"
+            strokeWidth="3"
+            strokeLinecap="round"
+          />
+          <text x="328" y="300" fontSize="12" fill="var(--ph-text-secondary)">
+            Ready to keep working
+          </text>
+        </g>
+      </g>
+      <g className="marketing-svg-spark" fill="var(--ph-accent)">
+        <path d="m520 12 3 10 10 3-10 3-3 10-3-10-10-3 10-3z" />
+        <path d="m25 310 2 7 7 2-7 2-2 7-2-7-7-2 7-2z" />
+      </g>
+    </svg>
+  );
+}
+
+export function IntegrationBridgeIllustration({
+  appName,
+  appIcon,
+  recordLabel,
+  calendar = false,
+}: {
+  appName: string;
+  appIcon: string;
+  recordLabel: string;
+  calendar?: boolean;
+}) {
+  const id = useId().replaceAll(":", "");
+  const rows = calendar
+    ? ["Client catch-up", "10:00 – 11:00", "Meeting notes"]
+    : ["Client", "Project", recordLabel];
+  return (
+    <svg
+      viewBox="0 0 600 350"
+      className="h-auto w-full"
+      role="img"
+      aria-label={
+        calendar
+          ? "Choose a calendar event to prefill a TurtleTime entry"
+          : `Shelly Bridge matches connected records with ${appName}`
+      }
+      data-marketing-art
+    >
+      <defs>
+        <radialGradient id={`${id}-bridge`}>
+          <stop stopColor="var(--ph-blue)" stopOpacity=".17" />
+          <stop offset="1" stopColor="var(--ph-blue)" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <ellipse
+        cx="300"
+        cy="185"
+        rx="280"
+        ry="160"
+        fill={`url(#${id}-bridge)`}
+      />
+      <g className="marketing-svg-float">
+        <rect
+          x="18"
+          y="55"
+          width="230"
+          height="240"
+          rx="18"
+          fill="var(--ph-surface)"
+          stroke="var(--ph-border)"
+        />
+        <rect
+          x="352"
+          y="55"
+          width="230"
+          height="240"
+          rx="18"
+          fill="var(--ph-surface)"
+          stroke="var(--ph-border)"
+        />
+        <text
+          x="38"
+          y="92"
+          fontSize="17"
+          fontWeight="700"
+          fill="var(--ph-text-primary)"
+        >
+          {calendar ? "Calendar events" : "Connected tools"}
+        </text>
+        <image href={appIcon} x="370" y="72" width="28" height="28" />
+        <text
+          x="410"
+          y="93"
+          fontSize="17"
+          fontWeight="700"
+          fill="var(--ph-text-primary)"
+        >
+          {appName}
+        </text>
+        {rows.map((row, index) => (
+          <g key={row}>
+            <rect
+              x="36"
+              y={119 + index * 48}
+              width="194"
+              height="36"
+              rx="8"
+              fill="var(--ph-muted)"
+            />
+            <text
+              x="50"
+              y={142 + index * 48}
+              fontSize="14"
+              fill="var(--ph-text-secondary)"
+            >
+              {row}
+            </text>
+            <rect
+              x="370"
+              y={119 + index * 48}
+              width="194"
+              height="36"
+              rx="8"
+              fill="var(--ph-muted)"
+            />
+            <text
+              x="384"
+              y={142 + index * 48}
+              fontSize="14"
+              fill="var(--ph-text-primary)"
+            >
+              {calendar && index === 1 ? "1 hour, ready to review" : row}
+            </text>
+            <path
+              className="marketing-svg-thread"
+              d={`M248 ${137 + index * 48}h104`}
+              stroke="var(--ph-accent)"
+              strokeWidth="2"
+              strokeDasharray="5 8"
+            />
+          </g>
+        ))}
+      </g>
+      <g className="marketing-svg-polished">
+        <circle
+          cx="300"
+          cy="185"
+          r="27"
+          fill="var(--ph-canvas)"
+          stroke="var(--ph-selected-border)"
+        />
+        <image href="/shelly-icon.svg" x="280" y="165" width="40" height="40" />
+        <text
+          x="300"
+          y="331"
+          textAnchor="middle"
+          fontSize="13"
+          fill="var(--ph-text-secondary)"
+        >
+          {calendar
+            ? "Prefill details · review · save the entry"
+            : "Shelly Bridge · match the records you want to connect"}
+        </text>
+      </g>
+    </svg>
+  );
+}

package/src/components/ui/Panel.tsx

@@ -10,7 +10,7 @@ export interface PanelProps extends Omit<ComponentPropsWithoutRef<"div">, "title
 export function Panel({ title, description, children, className, ...props }: PanelProps) {
   return (
     <div className={cn("ph-panel", className)} {...props}>
-      {title && <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>}
+      {title && <h3 className="text-lg font-semibold tracking-tight text-ph-ink">{title}</h3>}
       {description && <p className="text-sm text-ph-subtle">{description}</p>}
       {children}
     </div>

package/src/components/ui/SegmentedControl.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { useRef, type KeyboardEvent, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export interface SegmentedControlOption {
   value: string;
   label: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 export interface SegmentedControlProps {
@@ -13,30 +14,75 @@ export interface SegmentedControlProps {
   value: string;
   onChange: (value: string) => void;
   className?: string;
+  "aria-label"?: string;
 }
 
-export function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps) {
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel,
+}: SegmentedControlProps) {
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+
+  const handleKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    index: number,
+  ) => {
+    let nextIndex: number;
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (index - 1 + options.length) % options.length;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (index + 1) % options.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = options.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    const nextOption = options[nextIndex];
+    if (!nextOption) return;
+    onChange(nextOption.value);
+    itemRefs.current[nextIndex]?.focus();
+  };
+
   return (
     <div
-      className={cn(
-        "inline-flex rounded-lg bg-ph-muted p-1",
-        className
-      )}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn("ph-segmented-control", className)}
     >
-      {options.map((option) => (
+      {options.map((option, index) => (
         <button
           key={option.value}
+          ref={(node) => {
+            itemRefs.current[index] = node;
+          }}
           type="button"
-          aria-pressed={value === option.value}
+          role="radio"
+          aria-checked={value === option.value}
+          tabIndex={selectedIndex === index || (selectedIndex < 0 && index === 0) ? 0 : -1}
           onClick={() => onChange(option.value)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
           className={cn(
-            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
-            value === option.value
-              ? "bg-ph-surface text-ph-ink shadow-ph"
-              : "text-ph-subtle hover:text-ph-ink"
+            "ph-segmented-control__item",
+            value === option.value && "ph-segmented-control__item--selected",
           )}
         >
-          {option.icon && <span className="h-4 w-4">{option.icon}</span>}
+          {option.icon && <span className="h-4 w-4" aria-hidden>{option.icon}</span>}
           {option.label}
         </button>
       ))}

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/ShowcaseWrapper.tsx

@@ -38,9 +38,9 @@ export function ShowcaseWrapper({
             type="button"
             onClick={() => setShowCode(!showCode)}
             className={cn(
-              "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
+              "ph-showcase-toggle flex h-10 w-10 items-center justify-center rounded-full border transition-colors",
               showCode
-                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25"
+                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-[var(--ph-shadow-control)]"
                 : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             )}
             title={showCode ? "Hide code" : "Show code"}
@@ -68,7 +68,7 @@ export function ShowcaseWrapper({
 
         <div
           className={cn(
-            "transition-all duration-300",
+            "transition-opacity duration-200",
             showCode
               ? "block opacity-100"
               : "hidden opacity-0 lg:hidden"

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,7 +21,10 @@ 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;
 }
 
 export function Table<T>({
@@ -31,30 +36,60 @@ 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.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>
-              ))}
-            </tr>
-          ))}
+          {data.length === 0 ? (
+            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>
+                ))}
+              </tr>
+            ))
+          )}
         </tbody>
       </table>
     </div>

package/src/components/ui/Typography.tsx

@@ -99,7 +99,7 @@ export const H1 = forwardRef<HTMLHeadingElement, H1Props>(function H1(
   { children, tone = "default", weight, truncate, className, ...props },
   ref,
 ) {
-  return <h1 ref={ref} {...props} className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
+  return <h1 ref={ref} {...props} className={textClass("ph-page-title font-bold", tone, weight, truncate, className)}>{children}</h1>;
 });
 
 /** H2 — section title */
@@ -107,7 +107,7 @@ export const H2 = forwardRef<HTMLHeadingElement, H2Props>(function H2(
   { children, tone = "default", weight, truncate, className, ...props },
   ref,
 ) {
-  return <h2 ref={ref} {...props} className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
+  return <h2 ref={ref} {...props} className={textClass("text-2xl font-semibold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
 });
 
 /** H3 — subsection title */
@@ -155,7 +155,7 @@ export const Caption = forwardRef<HTMLSpanElement, CaptionProps>(function Captio
   { children, tone = "muted", weight, truncate, className, ...props },
   ref,
 ) {
-  return <span ref={ref} {...props} className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
+  return <span ref={ref} {...props} className={textClass("text-xs font-medium", tone, weight, truncate, className)}>{children}</span>;
 });
 
 /** Overline — tiny eyebrow text */
@@ -163,7 +163,7 @@ export const Overline = forwardRef<HTMLSpanElement, OverlineProps>(function Over
   { children, tone = "muted", weight, truncate, className, ...props },
   ref,
 ) {
-  return <span ref={ref} {...props} className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
+  return <span ref={ref} {...props} className={textClass("text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em]", tone, weight, truncate, className)}>{children}</span>;
 });
 
 /** Lead — intro paragraph under a Display/SectionTitle; measure-capped for readability */

package/src/components/ui/avatar-stat.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Avatar } from "@/components/ui/Avatar";
+import { Avatar, AvatarGroup } from "@/components/ui/Avatar";
 import { Stat } from "@/components/ui/Stat";
 
 describe("Avatar status", () => {
@@ -10,6 +10,19 @@ describe("Avatar status", () => {
     const status = screen.getByRole("img", { name: "online status" });
     expect(status).toHaveClass("bg-ph-success", "border-ph-surface");
   });
+
+  it("uses semantic accent contrast and counts grouped children", () => {
+    const { container } = render(
+      <AvatarGroup max={1}>
+        <Avatar label="JD" />
+        <Avatar label="AR" />
+      </AvatarGroup>,
+    );
+
+    expect(container.querySelector(".ph-avatar")).toHaveClass("text-[var(--ph-on-accent)]");
+    expect(screen.getByText("+1")).toBeInTheDocument();
+    expect(container.querySelectorAll(".ph-avatar")).toHaveLength(2);
+  });
 });
 
 describe("Stat warning", () => {

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,
+      });
+    }
+  });
+});