@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

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

@@ -7,58 +7,40 @@ import type { SuiteSpinnerComponent } from '../lib/injected';
 
 /**
  * Today-page loading/empty calibrating state. Apps inject their branded
- * AppSpinner; `variant` picks the ornamentation style:
- * - `ring` — large spinner ring + ping behind the sun (TurtleTime/ShellStack)
- * - `pulse` — pulsing sun only (Tides/Kraken)
+ * AppSpinner. Kept deliberately quiet — single soft fade + one spinner,
+ * no ping/pulse stacks that compete with OAuth/launch handoffs.
  */
 export function TodayCalibrating({
   onRetry,
   retrying = false,
   className,
   spinner: Spinner,
-  variant = 'ring',
+  variant: _variant = 'ring',
   retrySpinnerClassName = 'text-ph-brand',
 }: {
   onRetry?: () => void;
   retrying?: boolean;
   className?: string;
   spinner: SuiteSpinnerComponent;
+  /** @deprecated Kept for call-site compat; ornamentation is always calm. */
   variant?: 'ring' | 'pulse';
   retrySpinnerClassName?: string;
 }) {
+  void _variant;
   return (
     <div
       className={cn(
-        'relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
+        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
         className,
       )}
       data-test="today-calibrating"
     >
       <div
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.12),transparent_55%)]"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]"
         aria-hidden
       />
-      <div className="relative mb-6 flex h-24 w-24 items-center justify-center">
-        {variant === 'ring' ? (
-          <>
-            <Spinner
-              size="lg"
-              className="absolute inset-0 m-auto opacity-40"
-              label="Loading today"
-            />
-            <span
-              className="bg-ph-muted/30 absolute inset-2 animate-ping rounded-full"
-              aria-hidden
-            />
-          </>
-        ) : null}
-        <span className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
-          <Sun
-            className={cn('h-9 w-9', variant === 'pulse' && 'animate-pulse')}
-            strokeWidth={2}
-            aria-hidden
-          />
-        </span>
+      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
+        <Sun className="h-8 w-8" strokeWidth={2} aria-hidden />
       </div>
       <h2 className="relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl">
         Calibrating your day
@@ -66,14 +48,8 @@ export function TodayCalibrating({
       <p className="relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle">
         Pulling together tasks, time and updates from your workspace…
       </p>
-      <div className="relative mt-5 flex gap-1.5" aria-hidden>
-        {[0, 1, 2, 3, 4].map((i) => (
-          <span
-            key={i}
-            className="h-1.5 w-5 animate-pulse rounded-full bg-ph-muted"
-            style={{ animationDelay: `${i * 120}ms` }}
-          />
-        ))}
+      <div className="relative mt-5 flex justify-center">
+        <Spinner size="sm" className="opacity-70" label="Loading today" />
       </div>
       {onRetry ? (
         <button

package/src/suite/components/today-page-frame.tsx

@@ -1,26 +1,34 @@
-'use client';
+"use client";
 
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
-/** Full-bleed theme wash + soft clouds; uses ph-* tokens from each app's theme. */
+/**
+ * Today page content wrapper with soft atmosphere.
+ * Does not own scrolling — `#main-content` is the scrollport so sticky headers work.
+ * Glow/clouds are absolute and do not create a nested scrollport.
+ */
 export function TodayPageFrame({ children }: { children: ReactNode }) {
   return (
     <div
       data-test="today-page"
-      className="today-page-frame relative flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
+      className="today-page-frame relative flex min-h-0 w-full flex-1 flex-col overflow-x-hidden"
     >
       <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-[34rem] overflow-hidden"
+        className="pointer-events-none absolute inset-0 overflow-hidden"
         aria-hidden
       >
         <div className="today-page-frame__glow absolute inset-0" />
-        <div className="today-page-frame__sun absolute -right-16 -top-16 h-72 w-72 rounded-full bg-gradient-to-br from-amber-300/30 via-rose-300/20 to-rose-400/10 blur-3xl opacity-60 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:opacity-40" />
-        <div className="today-page-frame__top-fade absolute inset-x-0 top-0 h-64" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--1 absolute -left-24 top-28 h-80 w-[26rem] rounded-[45%]" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--2 absolute -right-20 top-40 h-72 w-80 rounded-[40%]" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--3 absolute left-[28%] top-[58%] h-64 w-[22rem] rounded-[50%]" />
+        <div className="today-page-frame__top-fade absolute inset-x-0 top-0 h-[28rem]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--1 absolute -left-28 top-16 h-96 w-[30rem] rounded-[45%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--2 absolute -right-24 top-24 h-80 w-[22rem] rounded-[40%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--3 absolute left-[22%] top-48 h-72 w-[24rem] rounded-[50%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--4 absolute right-[18%] top-[42%] h-64 w-[20rem] rounded-[48%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--5 absolute left-[8%] top-[68%] h-56 w-[18rem] rounded-[42%]" />
       </div>
-      <div className="relative flex-1 px-4 pb-5 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-8 [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]">
+      <div
+        data-width="full"
+        className="suite-page-stage suite-page-inset relative z-[1] flex w-full min-w-0 flex-1 flex-col [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]"
+      >
         {children}
       </div>
     </div>

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

@@ -6,7 +6,9 @@ import { cn } from '../lib/cn';
 import { SuiteAppIcon } from '../icons/suite-app-icon';
 import { SuiteIcon } from '../icons/suite-icon';
 import type { SuiteIconName } from '../icons/glyphs';
-type LucideIcon = import('react').ComponentType<import('react').SVGProps<SVGSVGElement>>;
+type LucideIcon = import('react').ComponentType<
+  import('react').SVGProps<SVGSVGElement>
+>;
 
 export type SuiteAppSlug = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
 
@@ -117,16 +119,17 @@ export function AnimatedSun({ className }: { className?: string }) {
           <stop offset="1" stopColor="#fb923c" />
         </linearGradient>
       </defs>
-      <g className="origin-center motion-safe:animate-[spin_20s_linear_infinite] motion-reduce:animate-none">
+      {/* ponytail: static rays + soft opacity pulse; spin was too busy for a sticky header */}
+      <g className="origin-center opacity-80 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:animate-none">
         {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
           <line
             key={angle}
             x1="20"
-            y1="4"
+            y1="5"
             x2="20"
             y2="9"
             stroke="#fbbf24"
-            strokeWidth="2"
+            strokeWidth="1.75"
             strokeLinecap="round"
             transform={`rotate(${angle} 20 20)`}
           />
@@ -158,10 +161,9 @@ export function AnimatedMoon({ className }: { className?: string }) {
         d="M27.5 25.5A11 11 0 1 1 14.5 9.6a9 9 0 1 0 13 15.9Z"
         fill="url(#animatedMoonBody)"
       />
-      <g className="motion-safe:animate-[pulse_4s_ease-in-out_infinite] motion-reduce:animate-none">
-        <circle cx="29" cy="10" r="1.4" fill="#c7d2fe" />
-        <circle cx="34" cy="16" r="1" fill="#c7d2fe" />
-        <circle cx="25" cy="5.5" r="0.9" fill="#c7d2fe" />
+      <g className="opacity-70 motion-safe:animate-[pulse_10s_ease-in-out_infinite] motion-reduce:animate-none">
+        <circle cx="29" cy="10" r="1.2" fill="#c7d2fe" />
+        <circle cx="34" cy="16" r="0.9" fill="#c7d2fe" />
       </g>
     </svg>
   );
@@ -190,7 +192,9 @@ export function TodayTopBar({
   appIcon?: ReactNode;
   appName?: string;
 }) {
-  const icon = appIcon ?? <TodayTimeIcon className="h-6 w-6 sm:h-7 sm:w-7 text-amber-500" />;
+  const icon = appIcon ?? (
+    <TodayTimeIcon className="h-6 w-6 sm:h-7 sm:w-7 text-amber-500" />
+  );
   return (
     <header className="flex items-center justify-between gap-4">
       <div className="flex min-w-0 items-center gap-3">
@@ -252,33 +256,287 @@ export function getTodayGreeting(
   const hours = stats?.hours ?? 0;
 
   if (overdueCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? '' : 's'} due today, ${overdueCount} overdue.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today, ${overdueCount} overdue.`;
   }
   if (taskCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? '' : 's'} due today.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today.`;
   }
   if (hours > 0) {
-    return `${greeting}. You logged ${hours} hour${hours === 1 ? '' : 's'} today.`;
+    return `${greeting}. ${hours} hour${hours === 1 ? '' : 's'} logged today.`;
   }
   if (period === 'evening' || period === 'night') {
-    return `${greeting}. Time to wrap up.`;
+    return `${greeting}. Nice work — time to wrap up.`;
   }
-  return `${greeting}. Nothing overdue — take a nice, deep breath.`;
+  return `${greeting}. Clear queue — take a nice, deep breath.`;
 }
 
 export function TodayHero({
   message = 'Take a nice, deep breath.',
+  brief,
+  briefMeta,
 }: {
   message?: ReactNode;
+  /** AI / local focus brief under the greeting. */
+  brief?: ReactNode;
+  briefMeta?: ReactNode;
 }) {
   return (
-    <div className="mt-8 text-center sm:mt-10">
+    <div className="mt-4 sm:mt-6">
       <p
         key={typeof message === 'string' ? message : 'hero'}
-        className="today-hero font-display text-2xl font-bold tracking-tight text-ph-ink sm:text-[1.75rem] sm:leading-tight"
+        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>
+  );
+}
+
+export type TodayPrimaryAccent =
+  'tides' | 'turtletime' | 'kraken' | 'shellstack' | 'neutral';
+
+/**
+ * Compact primary CTA for Today — one action per app.
+ * Colours live in suite-skin (.today-primary-action); no idle animation.
+ */
+export function TodayPrimaryAction({
+  label,
+  description,
+  icon,
+  accent = 'neutral',
+  onClick,
+  href,
+  loading = false,
+  active = false,
+  className,
+  dataTest = 'today-primary-action',
+}: {
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  accent?: TodayPrimaryAccent;
+  onClick?: () => void;
+  href?: string;
+  loading?: boolean;
+  /** e.g. timer already running */
+  active?: boolean;
+  className?: string;
+  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--${accent}`,
+    active && 'today-primary-action--active',
+    loading && 'pointer-events-none opacity-70',
+    className,
+  );
+
+  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">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-semibold tracking-tight sm:text-base">
+          {label}
+        </span>
+        {description ? (
+          <span className="mt-0.5 block text-xs opacity-80 sm:text-sm">
+            {description}
+          </span>
+        ) : 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"
+        aria-hidden
+      >
+        →
+      </span>
+    </>
+  );
+
+  if (href && !onClick) {
+    return (
+      <a
+        href={href}
+        className={classes}
+        data-test={dataTest}
+        aria-busy={loading}
+      >
+        {body}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={loading}
+      className={classes}
+      data-test={dataTest}
+      aria-busy={loading}
+    >
+      {body}
+    </button>
+  );
+}
+
+export function TodayEmptyAction({
+  title,
+  description,
+  actionLabel,
+  href,
+  onClick,
+  dataTest,
+}: {
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  href?: string;
+  onClick?: () => void;
+  dataTest?: string;
+}) {
+  return (
+    <div
+      className="rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center"
+      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">
+          {description}
+        </p>
+      ) : null}
+      {actionLabel && (href || onClick) ? (
+        href ? (
+          <a
+            href={href}
+            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+          >
+            {actionLabel}
+          </a>
+        ) : (
+          <button
+            type="button"
+            onClick={onClick}
+            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+          >
+            {actionLabel}
+          </button>
+        )
+      ) : null}
+    </div>
+  );
+}
+
+/** Desktop Today shell: main column + sticky Ask AI / brief aside. */
+export function TodayLayout({
+  primary,
+  main,
+  aside,
+  className,
+}: {
+  primary?: ReactNode;
+  main: ReactNode;
+  aside?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn('mt-5 space-y-6 sm:mt-6', className)}
+      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="min-w-0 space-y-8">{main}</div>
+        {aside ? (
+          <aside className="space-y-3 lg:sticky lg:top-6 lg:self-start">
+            {aside}
+          </aside>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Today Ask AI CTA — opens the suite assistant (not Kraken Deep Research).
+ * Prefer onClick → openSuiteAskAi(); href is a fallback only.
+ */
+export function TodayAskAiCard({
+  title = 'Ask AI',
+  description = 'Ask about your workspace, draft something, or look a fact up online.',
+  cta = 'Ask',
+  className,
+  onClick,
+  href,
+}: {
+  title?: string;
+  description?: string;
+  cta?: string;
+  className?: string;
+  onClick?: () => void;
+  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',
+    className,
+  );
+
+  const body = (
+    <>
+      <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-ph-brand/15 text-ph-brand shadow-sm ring-1 ring-black/[0.06]">
+        <SuiteIcon name="stack-hex" accent="shellstack" className="h-5 w-5" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+          <span className="font-display text-sm font-bold tracking-tight text-ph-ink">
+            {title}
+          </span>
+          <span className="text-sm font-medium text-ph-brand transition group-hover:underline">
+            {cta}
+          </span>
+        </span>
+        <span className="mt-1 block text-sm leading-relaxed text-ph-subtle">
+          {description}
+        </span>
+      </span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={classes}
+        data-test="today-ask-ai"
+      >
+        {body}
+      </button>
+    );
+  }
+
+  if (href) {
+    return (
+      <a href={href} className={classes} data-test="today-ask-ai">
+        {body}
+      </a>
+    );
+  }
+
+  return (
+    <div className={classes} data-test="today-ask-ai">
+      {body}
     </div>
   );
 }
@@ -301,7 +559,7 @@ export function TodaySection({
   children: ReactNode;
 }) {
   return (
-    <section data-test={testId} className="space-y-4">
+    <section data-test={testId} className="space-y-5">
       <div className="flex items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3.5">
           <span
@@ -340,8 +598,7 @@ export function TodayPanel({
   return (
     <div
       className={cn(
-        'border-ph-border/70 rounded-2xl border bg-ph-surface p-6 shadow-[0_2px_28px_-10px_rgba(15,23,42,0.14)] transition-all duration-200 ease-out sm:p-6',
-        'hover:shadow-[0_8px_32px_-12px_rgba(15,23,42,0.18)] hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:transform-none',
+        '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',
         className,
       )}
     >

package/src/suite/index.ts

@@ -1,5 +1,5 @@
-export { TodayPageFrame } from './components/today-page-frame';
-export * from './components/today-ui';
+export { TodayPageFrame } from "./components/today-page-frame";
+export * from "./components/today-ui";
 export {
   AppSwitcher,
   AppSwitcherChevron,
@@ -8,32 +8,37 @@ export {
   appSwitcherMenuItemClass,
   appSwitcherTriggerClass,
   type SuiteAppEntry,
-} from './components/app-switcher';
+} from "./components/app-switcher";
 export {
   SuiteNotificationBell,
   type SuiteNotification,
   type SuiteNotificationsResponse,
-} from './components/suite-notification-bell';
-export { CommandPaletteHost } from './components/command-palette-host';
-export { DeferredChrome } from './components/deferred-chrome';
-export { SuiteMobileDrawer } from './components/suite-mobile-drawer';
-export { SuiteMobileHeader } from './components/suite-mobile-header';
+} from "./components/suite-notification-bell";
+export { CommandPaletteHost } from "./components/command-palette-host";
+export { DeferredChrome } from "./components/deferred-chrome";
+export { SuiteMobileDrawer } from "./components/suite-mobile-drawer";
+export { SuiteMobileHeader } from "./components/suite-mobile-header";
+export {
+  SuiteSettingsLayout,
+  type SuiteSettingsLayoutProps,
+} from "./components/suite-settings-layout";
 export {
   SuiteUserMenu,
   type SuiteUserMenuProps,
-} from './components/suite-user-menu';
+} from "./components/suite-user-menu";
 export {
   SuiteBottomNav,
   type SuiteBottomNavItem,
-} from './components/suite-bottom-nav';
+} from "./components/suite-bottom-nav";
 export {
   SUITE_APPS,
   SUITE_APP_MAP,
   suiteAppBaseUrl,
+  resolveSuiteNotificationHref,
   type SuiteAppDefinition,
   type SuiteAppSlug,
-} from './lib/apps';
-export { TodayCalibrating } from './components/today-calibrating';
+} from "./lib/apps";
+export { TodayCalibrating } from "./components/today-calibrating";
 export {
   SuiteThemeProvider,
   useSuiteTheme,
@@ -41,11 +46,15 @@ export {
   type SuiteTheme,
   type SuiteThemeConfig,
   type SuiteThemeContextValue,
-} from './components/theme-provider';
+} from "./components/theme-provider";
 export {
   SuiteAiPanel,
+  openSuiteAskAi,
+  SUITE_OPEN_ASK_AI_EVENT,
   type SuiteAiPreset,
-} from './components/ai-panel';
+  type SuiteAiChatMessage,
+  type SuiteAskAiOpenDetail,
+} from "./components/ai-panel";
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -60,7 +69,7 @@ export {
   type SuiteGlyphElement,
   type SuiteIconName,
   type SuiteIconProps,
-} from './icons';
+} from "./icons";
 export type {
   SuiteCommandItem,
   SuiteCommandPaletteComponent,
@@ -68,15 +77,23 @@ export type {
   SuiteDropdownMenuComponent,
   SuiteDropdownMenuProps,
   SuiteSpinnerComponent,
-} from './lib/injected';
-export { useIdleMount } from './lib/use-idle-mount';
-export { cn } from './lib/cn';
+} from "./lib/injected";
+export { useIdleMount } from "./lib/use-idle-mount";
+export {
+  SIDEBAR_COLLAPSE_THRESHOLD,
+  SIDEBAR_DEFAULT_WIDTH,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_EXPANDED_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
+  useSidebarWidth,
+} from "./lib/use-sidebar-width";
+export { cn } from "./lib/cn";
 export {
   SuiteMotionProvider,
   m,
   SUITE_SPRINGS,
   type SuiteSpringName,
-} from './lib/motion';
+} from "./lib/motion";
 export {
   SuitePage,
   SuitePageHeader,
@@ -86,23 +103,22 @@ export {
   SuiteSectionHeader,
   type SuitePageWidth,
   type SuiteBreadcrumbsProps,
-} from './components/suite-layout';
+} from "./components/suite-layout";
 export {
   SuiteSkeleton,
   SuiteSkeletonCard,
   SuiteSkeletonList,
   SuiteEmptyState,
-} from './components/suite-skeleton';
+} from "./components/suite-skeleton";
 export {
   SuiteSettingsMobileNav,
   type SuiteSettingsNavItem,
-} from './components/suite-settings-mobile-nav';
+} from "./components/suite-settings-mobile-nav";
 export {
   SuiteSidebar,
   type SuiteSidebarNavItem,
-} from './components/suite-sidebar';
+} from "./components/suite-sidebar";
 export {
   SuiteAppLayout,
   type SuiteAppLayoutProps,
-} from './components/suite-app-layout';
-
+} from "./components/suite-app-layout";