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

package/src/components/ui/Avatar.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Children, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -38,7 +38,7 @@ export function Avatar({
   label,
   icon,
   size = "md",
-  color = "bg-ph-brand text-white",
+  color = "bg-ph-brand text-[var(--ph-on-accent)]",
   status,
   badge,
   className,
@@ -48,7 +48,7 @@ export function Avatar({
     <div className={cn("relative inline-flex shrink-0", className)} {...props}>
       <div
         className={cn(
-          "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
+          "ph-avatar flex items-center justify-center rounded-full border border-ph-border font-bold",
           sizeMap[size],
           color,
         )}
@@ -66,7 +66,7 @@ export function Avatar({
         />
       )}
       {badge && (
-        <span className="absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white">
+        <span className="absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-[var(--ph-on-accent)]">
           {badge}
         </span>
       )}
@@ -80,7 +80,7 @@ export interface AvatarGroupProps extends ComponentPropsWithoutRef<"div"> {
 }
 
 export function AvatarGroup({ children, max, className, ...props }: AvatarGroupProps) {
-  const items = Array.isArray(children) ? children : [children];
+  const items = Children.toArray(children);
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
 

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

@@ -157,13 +157,13 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
   }
 
   return (
-    <div className={cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className)}>
+    <div className={cn("ph-calendar w-[280px] p-4", className)}>
       <div className="mb-4 flex items-center justify-between">
         <button
           type="button"
           onClick={() => changeMonth(-1)}
           aria-label="Previous month"
-          className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
+          className="ph-calendar__nav"
         >
           <IconChevronLeft className="h-5 w-5" aria-hidden />
         </button>
@@ -174,7 +174,7 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
           type="button"
           onClick={() => changeMonth(1)}
           aria-label="Next month"
-          className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
+          className="ph-calendar__nav"
         >
           <IconChevronRight className="h-5 w-5" aria-hidden />
         </button>
@@ -215,12 +215,12 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
                     onClick={() => handleSelect(date)}
                     onKeyDown={(event) => handleDayKeyDown(event, date)}
                     className={cn(
-                      "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
+                      "ph-calendar__day",
                       value && isSameDay(value, date)
-                        ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph"
+                        ? "ph-calendar__day--selected"
                         : isSameDay(today, date)
-                          ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30"
-                          : "text-ph-ink hover:bg-ph-muted",
+                          ? "ph-calendar__day--today"
+                          : undefined,
                     )}
                   >
                     {date.getDate()}

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,27 +15,29 @@ 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);
   };
 
   return (
-    <div className={cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className)}>
+    <div className={cn("ph-code-block", className)}>
       {(filename || language) && (
         <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
-          <div className="flex items-center gap-2">
-            <div className="flex gap-1.5">
-              <div className="h-3 w-3 rounded-full bg-red-400" />
-              <div className="h-3 w-3 rounded-full bg-amber-400" />
-              <div className="h-3 w-3 rounded-full bg-emerald-400" />
-            </div>
-            {filename && <span className="ml-2 text-xs text-white/60">{filename}</span>}
-          </div>
+          <span className="text-xs text-white/60">{filename ?? language}</span>
           <button
             type="button"
             onClick={handleCopy}
-            className="text-xs text-white/60 transition hover:text-white"
+            className="ph-code-block__copy"
           >
             {copied ? "Copied!" : "Copy"}
           </button>

package/src/components/ui/CollapsibleSection.tsx

@@ -28,7 +28,7 @@ export function CollapsibleSection({
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
         aria-controls={contentId}
-        className="mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80"
+        className="ph-collapsible-trigger mb-6"
       >
         <span className="text-lg font-bold text-ph-ink">{title}</span>
         <IconChevronDown
@@ -46,11 +46,11 @@ export function CollapsibleSection({
           if (node) node.toggleAttribute("inert", !isOpen);
         }}
         className={cn(
-          "overflow-hidden transition-all duration-300",
-          isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0",
+          "grid transition-[grid-template-rows,opacity] duration-200",
+          isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
         )}
       >
-        {children}
+        <div className="overflow-hidden">{children}</div>
       </div>
     </section>
   );

package/src/components/ui/CommandPalette.tsx

@@ -106,13 +106,10 @@ export function CommandPalette({
         <Dialog.Overlay
           id={id}
           data-test={dataTest}
-          className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+          className="ph-command-palette__overlay"
         />
         <Dialog.Content
-          className={cn(
-            "fixed left-1/2 top-[20vh] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-            className,
-          )}
+          className={cn("ph-command-palette", className)}
           onOpenAutoFocus={(event) => {
             restoreFocusRef.current =
               document.activeElement instanceof HTMLElement
@@ -127,7 +124,7 @@ export function CommandPalette({
           }}
         >
           <Dialog.Title className="sr-only">Command palette</Dialog.Title>
-          <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
+          <div className="ph-command-palette__search">
             <IconSearch className="h-5 w-5 text-ph-mutedtext" />
             <input
               ref={inputRef}
@@ -149,7 +146,7 @@ export function CommandPalette({
               placeholder={placeholder}
               className="flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
             />
-            <kbd aria-hidden="true" className="rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext">
+            <kbd aria-hidden="true" className="ph-keycap">
               ESC
             </kbd>
           </div>
@@ -172,16 +169,16 @@ export function CommandPalette({
                   }}
                   onMouseEnter={() => setSelectedIndex(index)}
                   className={cn(
-                    "flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+                    "ph-command-palette__option",
                     index === activeIndex
-                      ? "bg-ph-muted text-ph-ink"
+                      ? "ph-command-palette__option--selected"
                       : "text-ph-subtle",
                   )}
                 >
                   {item.icon && <span aria-hidden="true" className="h-5 w-5">{item.icon}</span>}
                   <span className="flex-1">{item.label}</span>
                   {item.shortcut && (
-                    <kbd aria-hidden="true" className="rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext">
+                    <kbd aria-hidden="true" className="ph-keycap text-ph-mutedtext">
                       {item.shortcut}
                     </kbd>
                   )}

package/src/components/ui/EmptyState.tsx

@@ -14,12 +14,12 @@ export function EmptyState({ icon, title, description, action, className }: Empt
   return (
     <div
       className={cn(
-        "flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
+        "ph-empty-state",
         className
       )}
     >
       {icon && (
-        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext">
+        <div className="ph-empty-state__icon">
           {icon}
         </div>
       )}

package/src/components/ui/Input.tsx

@@ -88,7 +88,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
               aria-label={revealed ? "Hide password" : "Show password"}
               aria-pressed={revealed}
               disabled={disabled}
-              className="absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-[var(--ph-radius-control)] text-ph-mutedtext transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+              className="ph-field-icon-button"
             >
               {revealed ? (
                 <EyeClosed className="h-4 w-4" aria-hidden />

package/src/components/ui/Marketing.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type AnchorHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { Pause, Play } from "iconoir-react";
+import { ButtonChrome } from "@/components/ui/ButtonChrome";
+import { cn } from "@/lib/cn";
+
+/** Pure presentation slots: every product owns its links and authentication state. */
+export function MarketingHeader({
+  brand,
+  navigation,
+  actions,
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement> & {
+  brand: ReactNode;
+  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}
+      data-scrolled={scrolled ? "true" : "false"}
+      className={cn("marketing-header", className)}
+    >
+      <div className="marketing-header__inner">
+        <div className="marketing-header__brand">{brand}</div>
+        <nav
+          className="marketing-header__navigation"
+          aria-label="Product navigation"
+        >
+          {navigation}
+        </nav>
+        <div className="marketing-header__actions">{actions}</div>
+      </div>
+    </header>
+  );
+}
+
+export function MarketingLink({
+  variant = "secondary",
+  icon,
+  sideIcon,
+  children,
+  className,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> & {
+  variant?: "primary" | "secondary" | "accent";
+  icon?: ReactNode;
+  sideIcon?: ReactNode;
+}) {
+  return (
+    <a
+      {...props}
+      className={cn(
+        "ph-btn ph-btn-raised marketing-button",
+        `ph-btn-${variant}`,
+        className,
+      )}
+    >
+      <ButtonChrome label={children} icon={icon} sideIcon={sideIcon} />
+    </a>
+  );
+}
+
+/** Keep animated artwork controllable without taking space away from the nav. */
+export function MarketingMotionControl() {
+  const [paused, setPaused] = useState(false);
+  useEffect(() => {
+    document.documentElement.toggleAttribute("data-marketing-paused", paused);
+    return () =>
+      document.documentElement.removeAttribute("data-marketing-paused");
+  }, [paused]);
+  return (
+    <button
+      type="button"
+      className="marketing-motion-control"
+      onClick={() => setPaused((value) => !value)}
+      aria-pressed={paused}
+      aria-label={
+        paused ? "Play landing animations" : "Pause landing animations"
+      }
+    >
+      {paused ? (
+        <Play className="h-4 w-4" aria-hidden />
+      ) : (
+        <Pause className="h-4 w-4" aria-hidden />
+      )}
+      <span>{paused ? "Play motion" : "Pause motion"}</span>
+    </button>
+  );
+}
+
+/** Native scroll reveal; content remains visible when JavaScript is unavailable. */
+export function MarketingReveal({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (
+      !element ||
+      !window.IntersectionObserver ||
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    )
+      return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        element.classList.add("marketing-reveal--entered");
+        observer.disconnect();
+      },
+      { threshold: 0.1 },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <div {...props} ref={ref} className={cn("marketing-reveal", className)}>
+      {children}
+    </div>
+  );
+}