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

package/src/suite/components/today-ui.tsx

@@ -68,7 +68,7 @@ export function SourceAppGlyph({
     <img
       src={SOURCE_APP_LOGOS[app]}
       alt=""
-      className={cn("h-7 w-7 shrink-0 rounded-lg object-contain", className)}
+      className={cn("h-7 w-7 shrink-0 rounded-[var(--ph-radius-control)] object-contain", className)}
     />
   );
 }
@@ -210,11 +210,11 @@ export function TodayTopBar({
           {icon}
         </div>
         <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-          <h1 className="font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]">
+          <h1 className="ph-page-title font-display font-semibold text-ph-ink">
             Today
           </h1>
           {appName ? (
-            <span className="rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle">
+            <span className="rounded-[var(--ph-radius-control)] bg-ph-muted px-2 py-0.5 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-wide text-ph-subtle">
               {appName}
             </span>
           ) : null}
@@ -226,7 +226,7 @@ export function TodayTopBar({
           type="button"
           onClick={onRefresh}
           disabled={refreshing || loading}
-          className="press-subtle inline-flex h-10 w-10 items-center justify-center rounded-lg text-ph-subtle transition hover:bg-ph-surface hover:text-ph-ink disabled:opacity-50"
+          className="ph-btn ph-btn-ghost ph-btn-square press-subtle h-10 w-10 text-ph-subtle"
           data-test="today-refresh"
           aria-label="Refresh today"
         >
@@ -282,28 +282,33 @@ export function TodayHero({
   message = "Take a nice, deep breath.",
   brief,
   briefMeta,
+  action,
 }: {
   message?: ReactNode;
   /** AI / local focus brief under the greeting. */
   brief?: ReactNode;
   briefMeta?: ReactNode;
+  action?: ReactNode;
 }) {
   return (
-    <div className="mt-4 sm:mt-6">
-      <p
-        key={typeof message === "string" ? message : "hero"}
-        className="today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl sm:leading-snug"
-      >
-        {message}
-      </p>
-      {brief ? (
-        <div className="mt-4 max-w-2xl" data-test="today-focus-brief">
-          <p className="text-[15px] leading-[1.65] text-ph-ink">{brief}</p>
-          {briefMeta ? (
-            <p className="mt-1.5 text-xs text-ph-mutedtext">{briefMeta}</p>
-          ) : null}
-        </div>
-      ) : null}
+    <div className="flex min-w-0 flex-col gap-5 border-b border-ph-border-subtle pb-6 sm:flex-row sm:items-center sm:justify-between">
+      <div className="min-w-0 flex-1">
+        <p
+          key={typeof message === "string" ? message : "hero"}
+          className="today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl"
+        >
+          {message}
+        </p>
+        {brief ? (
+          <div className="mt-2 max-w-xl" data-test="today-focus-brief">
+            <p className="text-sm leading-relaxed text-ph-subtle">{brief}</p>
+            {briefMeta ? (
+              <p className="mt-1.5 text-xs text-ph-mutedtext">{briefMeta}</p>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {action ? <div className="w-full shrink-0 sm:w-72">{action}</div> : null}
     </div>
   );
 }
@@ -340,7 +345,7 @@ export function TodayPrimaryAction({
   dataTest?: string;
 }) {
   const classes = cn(
-    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3",
+    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-[var(--ph-radius-surface)] px-3.5 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-4 sm:py-3",
     `today-primary-action--${accent}`,
     active && "today-primary-action--active",
     loading && "pointer-events-none opacity-70",
@@ -349,7 +354,7 @@ export function TodayPrimaryAction({
 
   const body = (
     <>
-      <span className="today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10">
+      <span className="today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] sm:h-10 sm:w-10">
         {icon}
       </span>
       <span className="min-w-0 flex-1">
@@ -363,7 +368,7 @@ export function TodayPrimaryAction({
         ) : null}
       </span>
       <span
-        className="today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100"
+        className="today-primary-action__chevron shrink-0 text-base opacity-60 transition-[transform,opacity] group-hover:translate-x-0.5 group-hover:opacity-100"
         aria-hidden
       >
         →
@@ -415,12 +420,12 @@ export function TodayEmptyAction({
 }) {
   return (
     <div
-      className="rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center"
+      className="rounded-[var(--ph-radius-surface)] border border-ph-border-subtle bg-ph-surface px-5 py-6 text-left"
       data-test={dataTest}
     >
       <p className="text-sm font-semibold text-ph-ink">{title}</p>
       {description ? (
-        <p className="mx-auto mt-1 max-w-sm text-xs leading-relaxed text-ph-subtle sm:text-sm">
+        <p className="mt-1.5 max-w-md text-sm leading-relaxed text-ph-subtle">
           {description}
         </p>
       ) : null}
@@ -428,7 +433,7 @@ export function TodayEmptyAction({
         href ? (
           <a
             href={href}
-            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+            className="ph-btn ph-btn-link mt-3 text-sm"
           >
             {actionLabel}
           </a>
@@ -436,7 +441,7 @@ export function TodayEmptyAction({
           <button
             type="button"
             onClick={onClick}
-            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+            className="ph-btn ph-btn-link mt-3 text-sm"
           >
             {actionLabel}
           </button>
@@ -446,7 +451,7 @@ export function TodayEmptyAction({
   );
 }
 
-/** Desktop Today shell: main column + sticky Ask AI / brief aside. */
+/** Daily work queue and contextual rail; both stay in the page's scroll flow. */
 export function TodayLayout({
   primary,
   main,
@@ -464,10 +469,10 @@ export function TodayLayout({
       data-test="today-layout"
     >
       {primary ? <div className="max-w-md">{primary}</div> : null}
-      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)] lg:items-start lg:gap-8">
+      <div className={cn("grid gap-8 lg:items-start", aside && "lg:grid-cols-[minmax(0,1fr)_minmax(15rem,19rem)]")}>
         <div className="min-w-0 space-y-8">{main}</div>
         {aside ? (
-          <aside className="space-y-3 lg:sticky lg:top-6 lg:self-start">
+          <aside className="min-w-0 space-y-5">
             {aside}
           </aside>
         ) : null}
@@ -496,7 +501,7 @@ export function TodayAskAiCard({
   href?: string;
 }) {
   const classes = cn(
-    "group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5",
+    "suite-press group flex w-full items-start gap-3.5 rounded-[var(--ph-radius-surface)] border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow] hover:border-ph-brand/35 hover:bg-[var(--ph-surface-hover)] hover:shadow-[var(--ph-shadow-raised)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-5",
     className,
   );
 
@@ -570,19 +575,19 @@ export function TodaySection({
   children: ReactNode;
 }) {
   return (
-    <section data-test={testId} className="space-y-5">
+    <section data-test={testId} className="space-y-4">
       <div className="flex items-start justify-between gap-4">
-        <div className="flex min-w-0 items-start gap-3.5">
+        <div className="flex min-w-0 items-start gap-3">
           <span
             className={cn(
-              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]",
+              "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)]",
               iconClassName ?? "bg-ph-muted text-ph-ink",
             )}
           >
-            <Icon className="h-5 w-5" aria-hidden />
+            <Icon className="h-4 w-4" aria-hidden />
           </span>
           <div className="min-w-0 pt-0.5">
-            <h2 className="font-display text-lg font-bold tracking-tight text-ph-ink">
+            <h2 className="font-display text-lg font-semibold tracking-tight text-ph-ink">
               {title}
             </h2>
             {description ? (
@@ -609,7 +614,7 @@ export function TodayPanel({
   return (
     <div
       className={cn(
-        "border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5",
+        "today-panel rounded-[var(--ph-radius-surface)] border border-ph-border-subtle bg-ph-surface p-5",
         className,
       )}
     >
@@ -626,7 +631,7 @@ export function TodayEmptyState({
   description?: string;
 }) {
   return (
-    <div className="border-ph-border/80 rounded-xl border border-dashed px-5 py-8 text-center">
+    <div className="rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border/80 bg-[var(--ph-surface-inset)] px-5 py-8 text-center">
       <p className="text-sm font-semibold text-ph-ink">{title}</p>
       {description ? (
         <p className="mt-1.5 text-sm leading-relaxed text-ph-subtle">

package/src/suite/components/workspace-switcher.tsx

@@ -77,9 +77,9 @@ export function SuiteWorkspaceSwitcher({
       trigger={
         <span
           className={cn(
-            "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
+            "flex min-w-0 max-w-full items-center gap-2 rounded-[var(--ph-radius-control)] border border-ph-border bg-[var(--ph-surface-inset)] text-left transition-colors hover:bg-[var(--ph-surface-hover)]",
             collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
-            open && "border-ph-brand/40",
+            open && "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)]",
           )}
           data-test="workspace-switcher-trigger"
         >
@@ -111,7 +111,7 @@ export function SuiteWorkspaceSwitcher({
         ) : (
           sections.map((section) => (
             <div key={section.id}>
-              <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+              <p className="px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext">
                 {section.label}
               </p>
               {section.workspaces.map((workspace) => (

package/src/suite/index.ts

@@ -11,6 +11,12 @@ export {
   type SuiteAppSelectOptions,
 } from "./components/app-switcher";
 export { SuiteNotificationBell } from "./components/suite-notification-bell";
+export {
+  SuiteNotificationSettings,
+  type SuiteWebPushController,
+  type SuiteWebPushState,
+  type SuiteNotificationSettingsProps,
+} from "./components/suite-notification-settings";
 export {
   SuiteNotificationsProvider,
   useSuiteNotifications,
@@ -78,6 +84,7 @@ export {
   type SuiteAiChatMessage,
   type SuiteAskAiOpenDetail,
 } from "./components/ai-panel";
+export { SuiteAiDraftEditor, suiteAiDraftFields } from "./components/ai-draft-editor";
 export {
   SuiteWorkspaceSwitcher,
   type SuiteWorkspaceEntry,
@@ -193,3 +200,10 @@ export {
   type PaletteIcon,
   type PaletteLibrary,
 } from "./lib/palette-api";
+export {
+  SUITE_ANALYTICS_EVENT,
+  subscribeSuiteAnalytics,
+  trackSuiteEvent,
+  type SuiteAnalyticsEventDetail,
+  type SuiteAnalyticsProperties,
+} from "../lib/suite-analytics";

package/src/suite/lib/suite-notifications.tsx

@@ -11,6 +11,7 @@ import {
 } from "react";
 import { useRouter } from "next/navigation";
 
+import { trackSuiteEvent } from "../../lib/suite-analytics";
 import {
   resolveSuiteNotificationHref,
   suiteAppBaseUrl,
@@ -209,6 +210,10 @@ export function SuiteNotificationsProvider({
                 suiteAppBaseUrl("shellstack"),
               );
               launchUrl.searchParams.set("next", path);
+              trackSuiteEvent("Cross-App Switch", {
+                target_app: sourceApp,
+                success: true,
+              });
               window.location.assign(launchUrl.toString());
               return;
             }

package/tailwind-preset.ts

@@ -23,6 +23,15 @@ const posthogThemePreset: Partial<Config> = {
         ],
         mono: ["var(--ph-font-monospace-stack)"],
         shortcut: ["var(--ph-font-shortcut-stack)"],
+        display: ["var(--ph-font-sans-stack)"],
+      },
+      fontSize: {
+        xs: ["var(--ph-type-meta)", { lineHeight: "var(--ph-leading-ui)" }],
+        sm: ["var(--ph-type-small)", { lineHeight: "var(--ph-leading-ui)" }],
+        base: ["var(--ph-type-body)", { lineHeight: "var(--ph-leading-body)" }],
+        lg: ["var(--ph-type-card)", { lineHeight: "1.4" }],
+        xl: ["var(--ph-type-subsection)", { lineHeight: "1.35" }],
+        "2xl": ["var(--ph-type-product-section)", { lineHeight: "1.25" }],
       },
       borderRadius: {
         lemon: "var(--ph-radius-app)",