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

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

@@ -20,21 +20,14 @@ export function CodeBlock({ code, language = "tsx", filename, className }: CodeB
   };
 
   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,128 @@
+"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;
+}) {
+  return (
+    <header {...props} 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>
+  );
+}

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>