@xenide-io/the-old-ui-theme 0.3.2 → 0.4.0

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

@@ -0,0 +1,196 @@
+'use client';
+
+import Image from 'next/image';
+import { useState, type ReactNode } from 'react';
+import { Check, NavArrowDown as ChevronDown } from 'iconoir-react';
+
+import { cn } from '../lib/cn';
+import type {
+  SuiteDropdownItemComponent,
+  SuiteDropdownMenuComponent,
+} from '../lib/injected';
+
+export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
+  return cn(
+    'group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200',
+    collapsed ? 'h-11 w-11 justify-center px-0 py-0' : 'w-full',
+    open
+      ? 'border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15'
+      : 'border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm',
+  );
+}
+
+export function appSwitcherMarkClass() {
+  return 'h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]';
+}
+
+/** No sticky Radix highlight while waiting for cross-app redirect. */
+export function appSwitcherMenuItemClass() {
+  return 'rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80';
+}
+
+export function AppSwitcherMark({
+  children,
+  collapsed,
+}: {
+  children: ReactNode;
+  collapsed?: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        'relative shrink-0',
+        collapsed && 'group-hover:scale-[1.02]',
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function AppSwitcherChevron({
+  open,
+  collapsed = false,
+}: {
+  open: boolean;
+  collapsed?: boolean;
+}) {
+  if (collapsed) {
+    return (
+      <span
+        className={cn(
+          'absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors',
+          open && 'border-ph-brand/40 bg-ph-brand/10',
+        )}
+        aria-hidden
+      >
+        <ChevronDown
+          className={cn(
+            'h-2 w-2 text-ph-mutedtext transition-transform duration-200',
+            open && 'rotate-180 text-ph-brand',
+          )}
+        />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        'border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200',
+        open
+          ? 'border-ph-brand/35 bg-ph-brand/10 text-ph-brand'
+          : 'text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface',
+      )}
+      aria-hidden
+    >
+      <ChevronDown
+        className={cn(
+          'h-3 w-3 transition-transform duration-200',
+          open && 'rotate-180',
+        )}
+      />
+    </span>
+  );
+}
+
+export interface SuiteAppEntry {
+  slug: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+/**
+ * Suite app switcher dropdown. Apps inject their brand mark/title, the
+ * visible app list, the cross-app navigation handler, and the theme
+ * dropdown primitives.
+ */
+export function AppSwitcher({
+  apps,
+  currentApp,
+  onSelect,
+  mark,
+  title,
+  collapsed = false,
+  dropdownMenu: DropdownMenu,
+  dropdownItem: DropdownItem,
+}: {
+  apps: SuiteAppEntry[];
+  currentApp: string;
+  onSelect: (app: SuiteAppEntry) => void;
+  mark: ReactNode;
+  title: ReactNode;
+  collapsed?: boolean;
+  dropdownMenu: SuiteDropdownMenuComponent;
+  dropdownItem: SuiteDropdownItemComponent;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropdownMenu
+      aria-label="Switch application"
+      className={collapsed ? 'w-11 shrink-0' : 'min-w-0 flex-1'}
+      panelClassName="w-64"
+      align="start"
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <span
+          className={appSwitcherTriggerClass(open, collapsed)}
+          data-test="app-switcher-trigger"
+          aria-expanded={open}
+        >
+          <AppSwitcherMark collapsed={collapsed}>
+            {mark}
+            {collapsed ? <AppSwitcherChevron open={open} collapsed /> : null}
+          </AppSwitcherMark>
+          {!collapsed ? title : null}
+          {!collapsed ? <AppSwitcherChevron open={open} /> : null}
+        </span>
+      }
+    >
+      <div className="p-1" data-test="app-switcher-menu">
+        <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+          Switch application
+        </p>
+        {apps.map((app) => (
+          <DropdownItem
+            key={app.slug}
+            data-test={`switch-app-${app.slug}`}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => {
+              setOpen(false);
+              onSelect(app);
+            }}
+            className={appSwitcherMenuItemClass()}
+          >
+            <span className="flex min-w-0 items-center gap-3">
+              <Image
+                src={app.icon}
+                alt=""
+                width={28}
+                height={28}
+                className="h-7 w-7 shrink-0 rounded-md object-contain"
+              />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm font-medium text-ph-ink">
+                  {app.name}
+                </span>
+                <span className="block truncate text-xs text-ph-mutedtext">
+                  {app.description}
+                </span>
+              </span>
+              {app.slug === currentApp ? (
+                <Check
+                  className="h-4 w-4 shrink-0 text-ph-brand"
+                  aria-hidden="true"
+                />
+              ) : null}
+            </span>
+          </DropdownItem>
+        ))}
+      </div>
+    </DropdownMenu>
+  );
+}

package/src/suite/components/command-palette-host.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import type {
+  SuiteCommandItem,
+  SuiteCommandPaletteComponent,
+} from '../lib/injected';
+
+function isEditableTarget(): boolean {
+  if (typeof document === 'undefined') return false;
+  const el = document.activeElement;
+  return (
+    el instanceof HTMLElement &&
+    Boolean(
+      el.closest(
+        "input, textarea, select, [contenteditable='true'], [role='textbox']",
+      ),
+    )
+  );
+}
+
+/**
+ * Cmd/Ctrl+K command palette host. Apps build the item list and inject the
+ * theme CommandPalette primitive.
+ */
+export function CommandPaletteHost({
+  items,
+  isAuthenticated = true,
+  placeholder = 'Type a command or search…',
+  commandPalette: CommandPalette,
+}: {
+  items: SuiteCommandItem[];
+  isAuthenticated?: boolean;
+  placeholder?: string;
+  commandPalette: SuiteCommandPaletteComponent;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) return;
+      // Leave editors (BlockNote uses Cmd/Ctrl+K for links) alone unless the palette is open.
+      if (!open && isEditableTarget()) return;
+      e.preventDefault();
+      setOpen((o) => !o);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  if (!isAuthenticated) return null;
+
+  return (
+    <CommandPalette
+      items={items}
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      placeholder={placeholder}
+    />
+  );
+}

package/src/suite/components/deferred-chrome.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { useIdleMount } from '../lib/use-idle-mount';
+
+/** Command K — mount after idle so first paint stays light. */
+export function DeferredChrome({ children }: { children: ReactNode }) {
+  const ready = useIdleMount();
+  if (!ready) return null;
+  return <>{children}</>;
+}

package/src/suite/components/suite-app-layout.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { type ReactNode, type PointerEvent } from 'react';
+
+import { cn } from '../lib/cn';
+
+export interface SuiteAppLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  mobileHeader?: ReactNode;
+  bottomNav?: ReactNode;
+  /** Desktop sidebar width in px. */
+  sidebarWidth?: number;
+  /** True when the sidebar is collapsed to the icon rail. */
+  collapsed?: boolean;
+  /** Drag this to resize the sidebar. */
+  onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
+  /** Double-click to reset sidebar width. */
+  onResetWidth?: () => void;
+  className?: string;
+}
+
+/**
+ * Responsive ShellStack app shell. Desktop: resizable fixed sidebar +
+ * scrollable content with an optional drag handle. Mobile/tablet: mobile
+ * header + content + bottom nav. This is the single layout primitive every
+ * app should use.
+ */
+export function SuiteAppLayout({
+  sidebar,
+  children,
+  mobileHeader,
+  bottomNav,
+  sidebarWidth = 240,
+  collapsed = false,
+  onStartResize,
+  onResetWidth,
+  className,
+}: SuiteAppLayoutProps) {
+  return (
+    <div data-test="app-shell" className={cn('min-h-screen', className)}>
+      <div className="hidden lg:flex h-screen overflow-hidden">
+        <aside
+          className="relative flex shrink-0 flex-col border-r border-ph-border transition-[width] duration-200 ease-out"
+          style={{ width: `${sidebarWidth}px` }}
+        >
+          {sidebar}
+          {onStartResize ? (
+            <div
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize sidebar"
+              onPointerDown={onStartResize}
+              onDoubleClick={onResetWidth}
+              className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+            />
+          ) : null}
+        </aside>
+        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
+      </div>
+
+      <div className="flex min-h-screen flex-col lg:hidden">
+        {mobileHeader ? <div className="shrink-0">{mobileHeader}</div> : null}
+        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
+        {bottomNav ? <div className="shrink-0">{bottomNav}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/suite/components/suite-bottom-nav.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import Link from 'next/link';
+import type { ComponentType } from 'react';
+
+import { cn } from '../lib/cn';
+
+/** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
+export type SuiteNavIcon = ComponentType<{
+  className?: string;
+  strokeWidth?: number | string;
+  'aria-hidden'?: boolean | 'true' | 'false';
+}>;
+
+/**
+ * Suite bottom navigation — the mobile/tablet primary nav, identical in
+ * every app. Hick's Law: 5 items maximum (dev warning beyond that).
+ * Visuals come from suite-skin.css (`suite-bottom-nav`, `__pill`) so the
+ * translucent blur, safe-area padding, and press physics stay in sync
+ * across the suite; per-item content stays app-side via `items`.
+ */
+export interface SuiteBottomNavItem {
+  href: string;
+  label: string;
+  icon: SuiteNavIcon;
+  active?: boolean;
+  dataTest?: string;
+}
+
+export function SuiteBottomNav({
+  items,
+  ariaLabel = 'Primary navigation',
+  dataTest = 'suite-bottom-nav',
+  className,
+}: {
+  items: readonly SuiteBottomNavItem[];
+  ariaLabel?: string;
+  dataTest?: string;
+  className?: string;
+}) {
+  if (process.env.NODE_ENV !== 'production' && items.length > 5) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `SuiteBottomNav: ${items.length} items — bottom nav should have at most 5 (Hick's Law).`,
+    );
+  }
+
+  const activeIndex = items.findIndex((item) => item.active);
+
+  return (
+    <>
+      {/* In-flow spacer reserves the fixed bar's height so page content
+          never slides underneath it. Height = item height + safe area. */}
+      <div
+        aria-hidden
+        className="shrink-0 lg:hidden"
+        style={{ height: 'calc(60px + env(safe-area-inset-bottom))' }}
+      />
+      <nav
+        aria-label={ariaLabel}
+        data-test={dataTest}
+        className={cn(
+          'suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden',
+          className,
+        )}
+        style={
+          {
+            gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
+            '--suite-nav-items': items.length,
+            '--suite-nav-active': activeIndex >= 0 ? activeIndex : 0,
+          } as React.CSSProperties
+        }
+      >
+        {activeIndex >= 0 ? (
+          <span aria-hidden className="suite-bottom-nav__indicator" />
+        ) : null}
+        {items.map((item) => {
+          const Icon = item.icon;
+          const active = Boolean(item.active);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              data-test={item.dataTest ?? `suite-nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
+              aria-current={active ? 'page' : undefined}
+              className={cn(
+                'suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none',
+                active && 'font-semibold text-ph-brand',
+              )}
+            >
+              <span
+                className={cn(
+                  'suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center',
+                  active && 'suite-bottom-nav__icon--active',
+                )}
+              >
+                <Icon
+                  className="h-6 w-6"
+                  strokeWidth={active ? 2.25 : 1.75}
+                  aria-hidden
+                />
+              </span>
+              <span className="relative z-10 max-w-full truncate">
+                {item.label}
+              </span>
+            </Link>
+          );
+        })}
+      </nav>
+    </>
+  );
+}