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

package/src/components/ui/ComponentDocs.tsx

@@ -5,7 +5,7 @@ export interface ComponentPropRow {
   name: string;
   type: string;
   defaultValue?: string;
-  description: ReactNode;
+  description?: ReactNode;
 }
 
 export interface ComponentDocsProps {
@@ -41,7 +41,7 @@ export function ComponentDocs({ title = "Props & variants", rows, defaultOpen =
                 <td className="px-4 py-3 align-top font-mono text-xs text-ph-ink">{row.name}</td>
                 <td className="px-4 py-3 align-top font-mono text-xs text-ph-subtle">{row.type}</td>
                 <td className="px-4 py-3 align-top font-mono text-xs text-ph-subtle">{row.defaultValue ?? "-"}</td>
-                <td className="px-4 py-3 align-top text-ph-subtle">{row.description}</td>
+                <td className="px-4 py-3 align-top text-ph-subtle">{row.description ?? <span className="text-ph-mutedtext">—</span>}</td>
               </tr>
             ))}
           </tbody>

package/src/components/ui/ContextMenu.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, type ReactNode, type HTMLAttributes } from
 import { cn } from "@/lib/cn";
 
 export interface ContextMenuItem {
-  label: string;
+  label?: string;
   onClick?: () => void;
   disabled?: boolean;
   separator?: boolean;

package/src/components/ui/Menubar.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/cn";
 
 export interface MenubarItem {
   label: string;
-  items?: { label: string; onClick?: () => void; disabled?: boolean; separator?: boolean }[];
+  items?: { label?: string; onClick?: () => void; disabled?: boolean; separator?: boolean }[];
 }
 
 export interface MenubarProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/ui/Sidebar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { type ReactNode, useState } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export interface SidebarGroup {
-  label: string;
+  label?: string;
   items: SidebarItemDef[];
 }
 
@@ -22,18 +22,19 @@ export interface SidebarProps {
   className?: string;
   header?: ReactNode;
   footer?: ReactNode;
+  children?: ReactNode;
   collapsed?: boolean;
   onCollapse?: (collapsed: boolean) => void;
 }
 
-export function Sidebar({ groups, className, header, footer, collapsed = false, onCollapse }: SidebarProps) {
+export function Sidebar({ groups, className, header, footer, children, collapsed = false, onCollapse }: SidebarProps) {
   return (
     <nav className={cn("ph-sidebar flex flex-col h-full", collapsed && "ph-sidebar--collapsed", className)}>
       {header && <div className="ph-sidebar__header px-3 py-3 border-b border-ph-border-subtle">{header}</div>}
       <div className="ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5">
         {groups.map((group) => (
-          <div key={group.label} className="ph-sidebar__group">
-            {!collapsed && (
+          <div key={group.label ?? 'default'} className="ph-sidebar__group">
+            {group.label && !collapsed && (
               <h3 className="ph-sidebar__group-label px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">
                 {group.label}
               </h3>
@@ -46,17 +47,18 @@ export function Sidebar({ groups, className, header, footer, collapsed = false,
           </div>
         ))}
       </div>
+      {children}
       {footer && <div className="ph-sidebar__footer px-3 py-3 border-t border-ph-border-subtle">{footer}</div>}
     </nav>
   );
 }
 
-function SidebarItem({ label, icon, badge, active, onClick, collapsed }: SidebarItemDef & { collapsed: boolean }) {
+function SidebarItem({ label, icon, badge, active, href, onClick, collapsed }: SidebarItemDef & { collapsed: boolean }) {
   const Comp = onClick ? "button" : "a";
   return (
     <Comp
       type={onClick ? "button" as const : undefined}
-      href={onClick ? undefined : undefined}
+      href={onClick ? undefined : href}
       onClick={onClick}
       className={cn(
         "ph-sidebar__item flex items-center gap-2.5 w-full rounded-md px-2.5 py-2 text-sm text-left transition",
@@ -67,7 +69,7 @@ function SidebarItem({ label, icon, badge, active, onClick, collapsed }: Sidebar
       )}
       title={collapsed ? label : undefined}
     >
-      {icon && <span className="ph-sidebar__item-icon shrink-0 w-4 h-4 flex items-center justify-center">{icon}</span>}
+      {icon && <span className={cn("ph-sidebar__item-icon shrink-0 flex items-center justify-center", collapsed ? "w-5 h-5" : "w-4 h-4")}>{icon}</span>}
       {!collapsed && <span className="ph-sidebar__item-label truncate flex-1">{label}</span>}
       {!collapsed && badge && <span className="ph-sidebar__item-badge shrink-0">{badge}</span>}
     </Comp>

package/src/styles/suite-skin.css

@@ -0,0 +1,255 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   Suite skin — the shared tactile layer for every ShellStack app.
+   Source of truth: the-old-ui/src/styles/suite-skin.css (shipped inside
+   `@xenide-io/the-old-ui-theme`).
+
+   Everything is token-driven (`--ph-*`), so each app's own theme keeps its
+   colours while radius, elevation, motion, and touch behaviour stay
+   identical across the suite. Import AFTER the theme globals: unlayered
+   rules outrank the theme's @layer rules in the cascade, so these win.
+   (No @layer blocks here — Tailwind rejects them in imported files.)
+   ───────────────────────────────────────────────────────────────────────── */
+
+html {
+  /* Native-app touch: no grey flash on tap, no double-tap delay. */
+  -webkit-tap-highlight-color: transparent;
+  /* App-like vertical scrolling: no rubber-band chaining into the page. */
+  overscroll-behavior-y: none;
+}
+
+body {
+  /* OpenRunde optical tweaks — crisper on high-dpi mobile/tablet. */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Cards ──────────────────────────────────────────────────────────────
+   The MASTER spec: 12px radius, resting elevation, hover lift, and a
+   visible press state. Shadows are mixed from the theme's text colour
+   so they adapt to light AND dark themes instead of going muddy. */
+.ph-card {
+  border-radius: var(--suite-radius-card, 12px);
+  border-color: var(--ph-border-subtle);
+  background: var(--ph-surface-raised);
+  box-shadow:
+    0 1px 2px color-mix(in oklab, var(--ph-text-primary) 6%, transparent),
+    0 1px 1px color-mix(in oklab, var(--ph-text-primary) 4%, transparent);
+  transition:
+    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ph-card-interactive:hover,
+a:hover > .ph-card,
+button:hover > .ph-card {
+  border-color: var(--ph-border-control);
+  box-shadow:
+    0 2px 4px color-mix(in oklab, var(--ph-text-primary) 7%, transparent),
+    0 8px 20px color-mix(in oklab, var(--ph-text-primary) 8%, transparent);
+  transform: translateY(-1px);
+}
+
+/* Press: physical "push in" — the single biggest native-feel signal. */
+.suite-press {
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.suite-press:active {
+  transform: scale(0.98);
+}
+.suite-press-card:active .ph-card,
+.ph-card.suite-press:active {
+  transform: scale(0.985);
+  transition-duration: 80ms;
+}
+
+/* ── App bar (mobile) / top bar (desktop) ───────────────────────────────
+   Translucent, blurred, content scrolls beneath — like every native
+   shell. Colour-mix keeps it on-theme in both modes. */
+.suite-app-bar {
+  background: color-mix(in oklab, var(--ph-canvas) 82%, transparent);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  backdrop-filter: blur(12px) saturate(1.4);
+  padding-top: env(safe-area-inset-top);
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .suite-app-bar {
+    background: var(--ph-canvas);
+  }
+}
+
+/* ── Bottom navigation ────────────────────────────────────────────────── */
+/* Fixed to the viewport bottom — never in flow, so browser-chrome resize
+   (URL bar collapse) and page transitions can never move it. A spacer in
+   the layout reserves its height (see component). */
+.suite-bottom-nav {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  background: color-mix(in oklab, var(--ph-canvas) 86%, transparent);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  backdrop-filter: blur(12px) saturate(1.4);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0 -1px 0 var(--ph-border-subtle);
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .suite-bottom-nav {
+    background: var(--ph-canvas);
+  }
+}
+
+/* Press feedback: the glyph dips, like a native tab bar. */
+.suite-bottom-nav__item svg {
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.suite-bottom-nav__item:active svg {
+  transform: scale(0.88);
+}
+
+/* Active indicator: one soft pill that slides behind the whole active tab —
+   icon AND label — so the selection reads as a single centred unit. The
+   track is one grid column wide and moves with translateX (GPU-composited,
+   no layout work); the visible pill is inset inside the track. Material 3 /
+   iOS-style navigation-bar pattern using the same accent tokens as the
+   sidebar's active link. */
+.suite-bottom-nav__indicator {
+  position: absolute;
+  top: 4px;
+  bottom: calc(4px + env(safe-area-inset-bottom));
+  left: 0;
+  width: calc(100% / var(--suite-nav-items, 5));
+  transform: translateX(calc(var(--suite-nav-active, 0) * 100%));
+  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
+  pointer-events: none;
+  z-index: 0;
+  will-change: transform;
+}
+.suite-bottom-nav__indicator::before {
+  content: '';
+  position: absolute;
+  inset: 0 5px;
+  border-radius: 0.9rem;
+  background: var(--ph-accent-highlight-secondary);
+}
+.suite-bottom-nav__icon {
+  transition: color 160ms ease-out;
+}
+.suite-bottom-nav__icon--active {
+  color: var(--ph-accent);
+}
+
+/* ── Today hero: one-shot typography entrance ───────────────────────────
+   Rises and settles when the greeting text arrives (keyed by message).
+   Runs once per message change — never loops, so no battery cost. */
+.today-hero {
+  animation: today-hero-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes today-hero-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+    letter-spacing: 0.01em;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    letter-spacing: normal;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .today-hero {
+    animation: none;
+  }
+}
+
+/* ── Today frame: mobile perf ───────────────────────────────────────────
+   blur-3xl + infinite pulse is a GPU/battery hog on phones. Keep the
+   atmosphere on tablet/desktop; flatten it on small screens. */
+@media (max-width: 767px) {
+  .today-page-frame__sun {
+    filter: none;
+    opacity: 0.28;
+    animation: none;
+  }
+  .today-page-frame__cloud {
+    display: none;
+  }
+}
+
+/* ── Mobile bottom sheets ───────────────────────────────────────────────
+   Below lg, every ph-modal becomes a sheet pinned to the bottom edge —
+   the native phone/tablet pattern (Apple HIG, Material 3). Desktop keeps
+   the centred dialog. The overlay's p-4 is removed so the sheet truly
+   touches the screen edges; a grabber handle and safe-area padding come
+   free for every modal in every app. */
+@media (max-width: 1023.98px) {
+  .ph-modal-overlay {
+    align-items: flex-end !important;
+    padding: 0 !important;
+  }
+  .ph-modal-panel {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    max-height: calc(100svh - 3rem) !important;
+    border-radius: 16px 16px 0 0 !important;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  /* Grabber — first in-flow child, so it sits above flush header rows. */
+  .ph-modal-panel::before {
+    content: '';
+    display: block;
+    flex: none;
+    width: 36px;
+    height: 4px;
+    border-radius: 999px;
+    background: color-mix(in oklab, var(--ph-text-primary) 18%, transparent);
+    margin: 8px auto 0;
+  }
+}
+
+/* Enter/exit motion is driven by the Modal component (inline transitions)
+   so close animations work too — no CSS keyframes here. */
+
+/* ── Bottom action dock ─────────────────────────────────────────────────
+   The thumb-zone command bar that sits directly above the bottom nav
+   (quick-start, mini-player). Same translucent material as the nav so
+   the two read as one strip of chrome. */
+.suite-dock {
+  background: color-mix(in oklab, var(--ph-canvas) 86%, transparent);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  backdrop-filter: blur(12px) saturate(1.4);
+  box-shadow: 0 -1px 0 var(--ph-border-subtle);
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .suite-dock {
+    background: var(--ph-canvas);
+  }
+}
+
+/* ── Drawers / sheets never rubber-band their own scroll ──────────────── */
+.suite-scroll-lock {
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ── Reduced motion: every skin animation honours it ──────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .ph-card,
+  .suite-press,
+  .suite-bottom-nav__item svg,
+  .suite-bottom-nav__indicator,
+  .suite-bottom-nav__icon {
+    transition-duration: 0.01ms;
+  }
+  .suite-press:active,
+  .ph-card.suite-press:active,
+  .suite-press-card:active .ph-card {
+    transform: none;
+  }
+  /* Modal motion is inline (component-driven) — beat it with !important. */
+  .ph-modal-overlay,
+  .ph-modal-panel {
+    transition: none !important;
+  }
+}

package/src/suite/components/ai-panel.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, type ComponentType, type ReactNode } from 'react';
+import { Check, Copy, Xmark as X } from 'iconoir-react';
+
+export interface SuiteAiPreset {
+  label: string;
+  prompt: string;
+}
+
+/**
+ * Thin ShellStack AI slide-over shared by suite apps.
+ *
+ * One-shot completions via the shared `/api/ai/complete` endpoint. Apps
+ * inject their API helpers, preset prompts, brand icon and spinner. Renders
+ * its own floating launcher so it can be mounted once in the authenticated
+ * app shell.
+ */
+export function SuiteAiPanel({
+  presets,
+  emptyState,
+  fetchStatus,
+  complete,
+  brandIcon: BrandIcon,
+  spinner: Spinner,
+}: {
+  presets: SuiteAiPreset[];
+  /** Idle-state hint copy shown before the first request. */
+  emptyState: ReactNode;
+  fetchStatus: () => Promise<{ configured: boolean }>;
+  complete: (params: { prompt: string }) => Promise<{ text: string }>;
+  brandIcon: ComponentType<{ className?: string }>;
+  spinner: ComponentType<{ className?: string }>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [answer, setAnswer] = useState('');
+  const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  async function ask(text: string) {
+    const trimmed = text.trim();
+    if (!trimmed || loading) return;
+    setLoading(true);
+    setError('');
+    setAnswer('');
+    setCopied(false);
+    try {
+      const status = await fetchStatus();
+      if (!status.configured) {
+        setError('ShellStack AI is not configured for this workspace yet.');
+        return;
+      }
+      const result = await complete({ prompt: trimmed });
+      setAnswer(result.text);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : 'The AI request failed. Try again.',
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function copyAnswer() {
+    if (!answer) return;
+    try {
+      await navigator.clipboard.writeText(answer);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard unavailable; ignore.
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        data-test="ai-panel-launcher"
+        onClick={() => setOpen(true)}
+        className="fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+        aria-label="Open ShellStack AI"
+      >
+        <BrandIcon className="h-4 w-4 text-ph-brand" />
+        Ask AI
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-40" role="dialog" aria-modal="true">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/25"
+            onClick={() => setOpen(false)}
+            aria-label="Close AI panel"
+          />
+          <aside className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl">
+            <div className="flex items-center justify-between border-b border-ph-border px-4 py-3">
+              <div className="flex items-center gap-2">
+                <BrandIcon className="h-4 w-4 text-ph-brand" />
+                <span className="text-sm font-semibold text-ph-ink">
+                  ShellStack AI
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded p-1 hover:bg-ph-muted"
+                aria-label="Close"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2">
+              {presets.map((preset) => (
+                <button
+                  key={preset.label}
+                  type="button"
+                  onClick={() => {
+                    setPrompt(preset.prompt);
+                    void ask(preset.prompt);
+                  }}
+                  disabled={loading}
+                  className="rounded-md border border-ph-border px-2 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50"
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+
+            <div className="flex-1 space-y-3 overflow-y-auto p-4">
+              {error && (
+                <p className="bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger">
+                  {error}
+                </p>
+              )}
+              {loading && (
+                <div className="flex items-center gap-2 text-sm text-ph-mutedtext">
+                  <Spinner className="h-4 w-4 animate-spin" />
+                  Thinking…
+                </div>
+              )}
+              {answer && !loading && (
+                <div className="rounded-lg bg-ph-muted px-3 py-2 text-sm text-ph-ink">
+                  <p className="whitespace-pre-wrap">{answer}</p>
+                  <button
+                    type="button"
+                    onClick={() => void copyAnswer()}
+                    className="mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink"
+                  >
+                    {copied ? (
+                      <Check className="h-3 w-3" />
+                    ) : (
+                      <Copy className="h-3 w-3" />
+                    )}
+                    {copied ? 'Copied' : 'Copy'}
+                  </button>
+                </div>
+              )}
+              {!answer && !loading && !error && (
+                <p className="mt-8 text-center text-xs text-ph-mutedtext">
+                  {emptyState}
+                </p>
+              )}
+            </div>
+
+            <div className="border-t border-ph-border p-3">
+              <div className="flex gap-2">
+                <textarea
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      void ask(prompt);
+                    }
+                  }}
+                  placeholder="Ask anything…"
+                  rows={2}
+                  disabled={loading}
+                  className="flex-1 resize-none rounded-lg border border-ph-border bg-ph-canvas p-2 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
+                />
+                <button
+                  type="button"
+                  onClick={() => void ask(prompt)}
+                  disabled={loading || !prompt.trim()}
+                  className="self-end rounded-lg bg-ph-brand px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
+                >
+                  Ask
+                </button>
+              </div>
+            </div>
+          </aside>
+        </div>
+      )}
+    </>
+  );
+}