openuispec 0.2.9 → 0.2.11

package/examples/social-app/generated/web/social-app/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "social-app-web",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "latest",
-    "react-dom": "latest",
-    "react-router": "latest",
-    "zustand": "latest"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "latest",
-    "@types/node": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "@vitejs/plugin-react": "^5.0.0",
-    "tailwindcss": "latest",
-    "typescript": "latest",
-    "vite": "^7.0.0"
-  }
-}

package/examples/social-app/generated/web/social-app/src/app/App.tsx

@@ -1,58 +0,0 @@
-import { useEffect } from "react";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router";
-import { I18nProvider } from "../i18n";
-import { AppShell } from "../components/Shell";
-import { ChatDetailScreen } from "../screens/ChatDetailScreen";
-import { DiscoverScreen } from "../screens/DiscoverScreen";
-import { EditProfileScreen } from "../screens/EditProfileScreen";
-import { HomeFeedScreen } from "../screens/HomeFeedScreen";
-import { MessagesInboxScreen } from "../screens/MessagesInboxScreen";
-import { NotificationsScreen } from "../screens/NotificationsScreen";
-import { PostDetailScreen } from "../screens/PostDetailScreen";
-import { ProfileSelfScreen } from "../screens/ProfileSelfScreen";
-import { ProfileUserScreen } from "../screens/ProfileUserScreen";
-import { SearchResultsScreen } from "../screens/SearchResultsScreen";
-import { SettingsScreen } from "../screens/SettingsScreen";
-import { CreatePostFlow } from "../flows/CreatePostFlow";
-import { useAppStore } from "../state/store";
-
-function ThemeBridge() {
-  const theme = useAppStore((state) => state.preferences.theme);
-  useEffect(() => {
-    const resolvedTheme =
-      theme === "system"
-        ? window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light"
-        : theme;
-    document.documentElement.dataset.theme = resolvedTheme;
-  }, [theme]);
-  return null;
-}
-
-export function App() {
-  return (
-    <I18nProvider>
-      <BrowserRouter>
-        <ThemeBridge />
-        <Routes>
-          <Route element={<AppShell />}>
-            <Route index element={<Navigate to="/home" replace />} />
-            <Route path="/home" element={<HomeFeedScreen />} />
-            <Route path="/discover" element={<DiscoverScreen />} />
-            <Route path="/notifications" element={<NotificationsScreen />} />
-            <Route path="/messages" element={<MessagesInboxScreen />} />
-            <Route path="/profile" element={<ProfileSelfScreen />} />
-            <Route path="/profile/edit" element={<EditProfileScreen />} />
-            <Route path="/search" element={<SearchResultsScreen />} />
-            <Route path="/posts/:postId" element={<PostDetailScreen />} />
-            <Route path="/u/:userId" element={<ProfileUserScreen />} />
-            <Route path="/chat/:conversationId" element={<ChatDetailScreen />} />
-            <Route path="/settings" element={<SettingsScreen />} />
-            <Route path="/create" element={<CreatePostFlow />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
-    </I18nProvider>
-  );
-}

package/examples/social-app/generated/web/social-app/src/components/Shell.tsx

@@ -1,259 +0,0 @@
-import { type PropsWithChildren, useEffect, useMemo } from "react";
-import { Link, NavLink, Outlet, useLocation, useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { Icon } from "../lib/icons";
-import type { SizeClass } from "../lib/tokens";
-import { cn, useSizeClass } from "../lib/utils";
-import { selectUnreadNotifications, useAppStore } from "../state/store";
-import { ActionButton, ActionGroup } from "./ui";
-
-const primaryRoutes = [
-  { to: "/home", icon: "home" as const, labelKey: "nav.home" },
-  { to: "/discover", icon: "discover" as const, labelKey: "nav.discover" },
-  { to: "/notifications", icon: "notifications" as const, labelKey: "nav.notifications" },
-  { to: "/profile", icon: "profile" as const, labelKey: "nav.profile" },
-];
-
-export function AppShell() {
-  const sizeClass = useSizeClass();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { t, locale, setLocale } = useI18n();
-  const toast = useAppStore((state) => state.toast);
-  const clearToast = useAppStore((state) => state.clearToast);
-  const dialog = useAppStore((state) => state.dialog);
-  const closeDialog = useAppStore((state) => state.closeDialog);
-  const unreadCount = useAppStore(selectUnreadNotifications);
-
-  const pageMeta = useMemo(() => resolvePageMeta(location.pathname, t), [location.pathname, t]);
-
-  useEffect(() => {
-    if (!toast) {
-      return;
-    }
-    const timer = window.setTimeout(() => clearToast(), 3000);
-    return () => window.clearTimeout(timer);
-  }, [toast, clearToast]);
-
-  return (
-    <div className="min-h-screen bg-[var(--color-surface-primary)] text-[var(--color-text-primary)]">
-      <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
-        <div className="absolute left-[-8rem] top-[-6rem] h-72 w-72 rounded-full bg-[color:rgba(91,82,163,0.12)] blur-3xl" />
-        <div className="absolute bottom-[-8rem] right-[-4rem] h-80 w-80 rounded-full bg-[color:rgba(212,146,14,0.12)] blur-3xl" />
-      </div>
-
-      {sizeClass === "expanded" ? <DesktopSidebar unreadCount={unreadCount} /> : null}
-
-      <div className={cn("min-h-screen", sizeClass === "expanded" && "pl-[304px]")}>
-        <header className="sticky top-0 z-30 border-b border-[var(--color-border-default)] bg-[color:rgba(250,248,245,0.88)] backdrop-blur-xl">
-          <div className="mx-auto flex max-w-[1180px] items-center gap-3 px-4 py-4 md:px-6 xl:px-8">
-            {pageMeta.showBack ? (
-              <button
-                type="button"
-                onClick={() => navigate(-1)}
-                className="interactive-press rounded-cap-alternate border border-[var(--color-border-default)] p-2 text-[var(--color-text-primary)]"
-                aria-label="Back"
-              >
-                <Icon name="back" className="h-5 w-5" />
-              </button>
-            ) : null}
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-base font-semibold">{pageMeta.title}</p>
-              {pageMeta.subtitle ? (
-                <p className="truncate text-sm text-[var(--color-text-secondary)]">{pageMeta.subtitle}</p>
-              ) : null}
-            </div>
-            <label className="hidden items-center gap-2 rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] px-3 py-2 text-sm text-[var(--color-text-secondary)] sm:flex">
-              <span>Lang</span>
-              <select
-                value={locale}
-                onChange={(event) => setLocale(event.target.value as typeof locale)}
-                className="bg-transparent font-medium text-[var(--color-text-primary)] outline-none"
-              >
-                <option value="en">EN</option>
-                <option value="ru">RU</option>
-                <option value="uz">UZ</option>
-              </select>
-            </label>
-            <Link
-              to="/settings"
-              className="interactive-press rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-2 text-[var(--color-text-primary)]"
-              aria-label="Settings"
-            >
-              <Icon name="settings" className="h-5 w-5" />
-            </Link>
-          </div>
-        </header>
-
-        <main>
-          <Outlet />
-        </main>
-
-        {sizeClass !== "expanded" ? <BottomTabBar unreadCount={unreadCount} /> : null}
-
-      </div>
-
-      {toast ? (
-        <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center px-4">
-          <div className="rounded-cap-primary bg-[var(--color-brand-primary)] px-5 py-3 text-sm font-medium text-[var(--color-brand-primary-on)] shadow-md">
-            {toast.message}
-          </div>
-        </div>
-      ) : null}
-
-      {dialog ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(28,27,26,0.35)] px-4">
-          <div className="w-full max-w-md rounded-surface border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] p-6 shadow-lg">
-            <h2 className="text-xl font-semibold">{dialog.title}</h2>
-            <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{dialog.message}</p>
-            <ActionGroup className="mt-6 sm:flex-row sm:items-center sm:justify-end">
-              {dialog.actions.map((action) => (
-                <ActionButton
-                  key={action.label}
-                  variant={action.variant ?? "secondary"}
-                  onClick={() => {
-                    action.onPress();
-                    closeDialog();
-                  }}
-                >
-                  {action.label}
-                </ActionButton>
-              ))}
-            </ActionGroup>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function BottomTabBar({ unreadCount }: { unreadCount: number }) {
-  const { t } = useI18n();
-  return (
-    <nav className="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--color-border-default)] bg-[color:rgba(250,248,245,0.94)] px-2 py-2 backdrop-blur-xl">
-      <div className="mx-auto grid max-w-xl grid-cols-4 gap-1">
-        {primaryRoutes.map((route) => (
-          <NavLink
-            key={route.to}
-            to={route.to}
-            className={({ isActive }) =>
-              cn(
-                "relative flex min-h-14 flex-col items-center justify-center gap-1 rounded-cap-primary px-2 text-[11px] font-medium transition",
-                isActive
-                  ? "bg-[var(--color-surface-secondary)] text-[var(--color-brand-primary)]"
-                  : "text-[var(--color-text-tertiary)]",
-              )
-            }
-          >
-            <Icon name={route.icon} className="h-5 w-5" />
-            <span>{t(route.labelKey)}</span>
-            {route.to === "/notifications" && unreadCount > 0 ? (
-              <span className="absolute right-3 top-2 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-[var(--color-brand-accent)] px-1.5 text-[10px] font-semibold text-[var(--color-brand-accent-on)]">
-                {unreadCount}
-              </span>
-            ) : null}
-          </NavLink>
-        ))}
-      </div>
-    </nav>
-  );
-}
-
-function DesktopSidebar({ unreadCount }: { unreadCount: number }) {
-  const { t, locale, setLocale } = useI18n();
-  return (
-    <aside className="fixed inset-y-0 left-0 z-20 flex w-[280px] flex-col border-r border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] px-5 py-6">
-      <div className="mb-10">
-        <p className="text-xs uppercase tracking-[0.28em] text-[var(--color-text-tertiary)]">social-app</p>
-        <h1 className="mt-2 text-3xl font-semibold leading-tight">Editorial social, reworked for the browser.</h1>
-      </div>
-
-      <nav className="flex flex-1 flex-col gap-2">
-        {primaryRoutes.map((route) => (
-          <NavLink
-            key={route.to}
-            to={route.to}
-            className={({ isActive }) =>
-              cn(
-                "relative rounded-cap-primary px-4 py-3 text-sm font-semibold transition",
-                isActive
-                  ? "bg-[var(--color-brand-primary)] shadow-sm"
-                  : "hover:bg-[var(--color-surface-tertiary)]",
-              )
-            }
-          >
-            {({ isActive }) => (
-              <div className="flex items-center gap-3">
-                <Icon
-                  name={route.icon}
-                  className={cn(
-                    "h-5 w-5 shrink-0",
-                    isActive ? "text-[var(--color-brand-primary-on)]" : "text-[var(--color-text-secondary)]",
-                  )}
-                />
-                <span className={cn(isActive ? "text-[var(--color-brand-primary-on)]" : "text-[var(--color-text-secondary)]")}>
-                  {t(route.labelKey)}
-                </span>
-                {route.to === "/notifications" && unreadCount > 0 ? (
-                  <span className="ml-auto rounded-full bg-[var(--color-brand-accent)] px-2 py-1 text-[10px] font-semibold text-[var(--color-brand-accent-on)]">
-                    {unreadCount}
-                  </span>
-                ) : null}
-              </div>
-            )}
-          </NavLink>
-        ))}
-      </nav>
-
-      <div className="mt-6 rounded-surface border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] p-4">
-        <p className="text-sm font-semibold">Locale</p>
-        <select
-          value={locale}
-          onChange={(event) => setLocale(event.target.value as typeof locale)}
-          className="mt-3 w-full rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] px-3 py-3 text-sm outline-none"
-        >
-          <option value="en">English</option>
-          <option value="ru">Русский</option>
-          <option value="uz">Oʻzbekcha</option>
-        </select>
-      </div>
-    </aside>
-  );
-}
-
-function resolvePageMeta(pathname: string, t: (key: string) => string) {
-  if (pathname.startsWith("/discover")) {
-    return { title: t("nav.discover"), subtitle: "Search, trends, and people worth following.", showBack: false };
-  }
-  if (pathname.startsWith("/notifications")) {
-    return { title: t("nav.notifications"), subtitle: "Your latest activity and responses.", showBack: false };
-  }
-  if (pathname.startsWith("/messages")) {
-    return { title: "Messages", subtitle: "Direct conversations with creators and collaborators.", showBack: false };
-  }
-  if (pathname.startsWith("/profile/edit")) {
-    return { title: "Edit Profile", showBack: true };
-  }
-  if (pathname.startsWith("/profile")) {
-    return { title: t("nav.profile"), subtitle: "Your public identity, posts, and settings surface.", showBack: false };
-  }
-  if (pathname.startsWith("/search")) {
-    return { title: "Search Results", showBack: true };
-  }
-  if (pathname.startsWith("/posts/")) {
-    return { title: "Post Detail", showBack: true };
-  }
-  if (pathname.startsWith("/u/")) {
-    return { title: "Profile", showBack: true };
-  }
-  if (pathname.startsWith("/chat/")) {
-    return { title: "Conversation", showBack: true };
-  }
-  if (pathname.startsWith("/settings")) {
-    return { title: "Settings", subtitle: "Appearance, notifications, and account actions.", showBack: true };
-  }
-  if (pathname.startsWith("/create")) {
-    return { title: "Create Post", subtitle: "Compose something with the same tokenized system as the feed.", showBack: true };
-  }
-  return { title: t("nav.home"), subtitle: "Stories, filters, and conversations in one warm feed.", showBack: false };
-}

package/examples/social-app/generated/web/social-app/src/components/cards.tsx

@@ -1,317 +0,0 @@
-import { Link } from "react-router";
-import { Icon } from "../lib/icons";
-import { formatDate, formatNumber, formatRelativeDate, formatTime } from "../lib/utils";
-import type {
-  Comment,
-  Message,
-  NotificationItem,
-  Post,
-  User,
-} from "../state/store";
-import { ActionButton, Avatar, Surface } from "./ui";
-
-export function StoryCard({
-  name,
-  image,
-  to,
-}: {
-  name: string;
-  image?: string;
-  to: string;
-}) {
-  return (
-    <Link to={to} className="group snap-start">
-      <div className="w-28">
-        <div className="rounded-surface relative aspect-[4/5] overflow-hidden border border-[var(--color-border-default)] bg-[var(--color-surface-tertiary)] shadow-sm">
-          {image ? <img src={image} alt={name} className="h-full w-full object-cover transition duration-300 group-hover:scale-105" /> : null}
-          <div className="absolute inset-0 bg-linear-to-t from-[rgba(28,27,26,0.85)] via-transparent to-transparent" />
-          <span className="absolute bottom-3 left-3 right-3 text-sm font-semibold text-white">{name}</span>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-export function CreatorCard({
-  user,
-  to,
-}: {
-  user: User;
-  to: string;
-}) {
-  return (
-    <Link to={to} className="block w-72 shrink-0 snap-start">
-      <Surface className="h-full p-4">
-        <div className="flex items-start gap-3">
-          <Avatar src={user.avatarUrl} name={user.displayName} size="lg" />
-          <div className="min-w-0">
-            <p className="truncate text-base font-semibold text-[var(--color-text-primary)]">{user.displayName}</p>
-            <p className="truncate text-sm text-[var(--color-text-secondary)]">@{user.handle}</p>
-          </div>
-        </div>
-        <p className="mt-4 line-clamp-3 text-sm text-[var(--color-text-secondary)]">{user.bio}</p>
-      </Surface>
-    </Link>
-  );
-}
-
-export function TrendRow({
-  title,
-  subtitle,
-  onClick,
-}: {
-  title: string;
-  subtitle: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="flex w-full items-center justify-between gap-4 rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] px-4 py-4 text-left shadow-sm transition hover:-translate-y-0.5"
-    >
-      <div>
-        <p className="font-semibold text-[var(--color-text-primary)]">{title}</p>
-        <p className="text-sm text-[var(--color-text-secondary)]">{subtitle}</p>
-      </div>
-      <Icon name="discover" className="h-5 w-5 text-[var(--color-text-tertiary)]" />
-    </button>
-  );
-}
-
-export function PostCard({
-  post,
-  author,
-  hero,
-  onOpen,
-  onAuthor,
-  onLike,
-  onSave,
-}: {
-  post: Post;
-  author: User;
-  hero?: boolean;
-  onOpen?: () => void;
-  onAuthor?: () => void;
-  onLike?: () => void;
-  onSave?: () => void;
-}) {
-  return (
-    <article className={hero ? "rounded-surface border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-5 shadow-sm" : ""}>
-      <div className="flex items-center gap-3">
-        <button type="button" onClick={onAuthor} className="shrink-0">
-          <Avatar src={author.avatarUrl} name={author.displayName} />
-        </button>
-        <div className="min-w-0">
-          <p className={hero ? "truncate text-2xl font-semibold text-[var(--color-text-primary)]" : "truncate font-semibold text-[var(--color-text-primary)]"}>
-            {author.displayName}
-          </p>
-          <p className="truncate text-sm text-[var(--color-text-secondary)]">@{author.handle}</p>
-        </div>
-        <div className="ml-auto text-right text-xs text-[var(--color-text-tertiary)]">
-          {hero ? formatDate(post.publishedAt) : formatRelativeDate(post.publishedAt)}
-        </div>
-      </div>
-      <button type="button" onClick={onOpen} className="mt-4 block w-full text-left">
-        <p className="mt-4 whitespace-pre-wrap text-[15px] leading-7 text-[var(--color-text-primary)]">{post.body}</p>
-        {post.mediaUrl ? (
-          <div className="mt-4 overflow-hidden rounded-surface border border-[var(--color-border-default)]">
-            <img src={post.mediaUrl} alt="" className={hero ? "aspect-[4/3] w-full object-cover" : "aspect-[16/10] w-full object-cover"} />
-          </div>
-        ) : null}
-      </button>
-      <div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-[var(--color-text-secondary)]">
-        <span>{formatNumber(post.likeCount)} likes</span>
-        <span className="text-[var(--color-border-strong)]">•</span>
-        <span>{formatNumber(post.commentCount)} comments</span>
-      </div>
-      <div className="mt-4 flex flex-wrap gap-2">
-        <ActionButton variant="secondary" icon={post.liked ? "like_fill" : "like"} onClick={onLike}>
-          Like
-        </ActionButton>
-        <ActionButton variant="chip" icon={post.saved ? "bookmark_fill" : "bookmark"} selected={post.saved} onClick={onSave}>
-          Save
-        </ActionButton>
-      </div>
-    </article>
-  );
-}
-
-export function CompactRow({
-  user,
-  title,
-  subtitle,
-  metadata,
-}: {
-  user: User;
-  title: string;
-  subtitle: string;
-  metadata?: string;
-}) {
-  return (
-    <div className="flex items-center gap-3 border-b border-[var(--color-border-default)] px-1 py-3 last:border-b-0">
-      <Avatar src={user.avatarUrl} name={user.displayName} size="sm" />
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{title}</p>
-        <p className="truncate text-sm text-[var(--color-text-secondary)]">{subtitle}</p>
-      </div>
-      {metadata ? <p className="text-xs text-[var(--color-text-tertiary)]">{metadata}</p> : null}
-    </div>
-  );
-}
-
-export function CommentCard({
-  comment,
-  author,
-  onAuthor,
-}: {
-  comment: Comment;
-  author: User;
-  onAuthor: () => void;
-}) {
-  return (
-    <Surface className="p-4">
-      <div className="flex items-start gap-3">
-        <button type="button" onClick={onAuthor}>
-          <Avatar src={author.avatarUrl} name={author.displayName} size="sm" />
-        </button>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-baseline justify-between gap-3">
-            <p className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{author.displayName}</p>
-            <p className="text-xs text-[var(--color-text-tertiary)]">{formatRelativeDate(comment.createdAt)}</p>
-          </div>
-          <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{comment.body}</p>
-        </div>
-      </div>
-    </Surface>
-  );
-}
-
-export function ProfileHero({
-  user,
-  action,
-}: {
-  user: User;
-  action?: React.ReactNode;
-}) {
-  return (
-    <Surface className="overflow-hidden p-6">
-      <div className="grid gap-4 md:grid-cols-[auto_1fr_auto] md:items-start">
-        <Avatar src={user.avatarUrl} name={user.displayName} size="lg" />
-        <div className="min-w-0">
-          <h2 className="text-2xl font-semibold text-[var(--color-text-primary)]">{user.displayName}</h2>
-          <p className="mt-1 text-sm text-[var(--color-text-secondary)]">@{user.handle}</p>
-          <p className="mt-4 max-w-2xl text-sm leading-6 text-[var(--color-text-secondary)]">{user.bio}</p>
-          {user.website ? (
-            <a href={user.website} className="mt-3 inline-flex text-sm font-medium text-[var(--color-brand-accent)]">
-              {user.website.replace(/^https?:\/\//, "")}
-            </a>
-          ) : null}
-        </div>
-        <div className="flex flex-col gap-3 md:items-end">
-          {action}
-          <div className="rounded-cap-primary bg-[var(--color-surface-tertiary)] px-4 py-3 text-sm text-[var(--color-text-secondary)]">
-            <strong className="mr-1 text-[var(--color-text-primary)]">{formatNumber(user.followers)}</strong>
-            followers
-          </div>
-        </div>
-      </div>
-    </Surface>
-  );
-}
-
-export function ConversationCard({
-  user,
-  excerpt,
-  unreadCount,
-  timestamp,
-  onOpen,
-}: {
-  user: User;
-  excerpt: string;
-  unreadCount: number;
-  timestamp?: string;
-  onOpen: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onOpen}
-      className="w-full rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 text-left shadow-sm transition hover:-translate-y-0.5"
-    >
-      <div className="flex items-center gap-3">
-        <Avatar src={user.avatarUrl} name={user.displayName} />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center justify-between gap-3">
-            <p className="truncate font-semibold text-[var(--color-text-primary)]">{user.displayName}</p>
-            {timestamp ? <p className="text-xs text-[var(--color-text-tertiary)]">{formatRelativeDate(timestamp)}</p> : null}
-          </div>
-          <p className="truncate text-sm text-[var(--color-text-secondary)]">{excerpt}</p>
-        </div>
-        {unreadCount > 0 ? (
-          <span className="rounded-cap-primary bg-[var(--color-brand-primary)] px-2 py-1 text-xs font-semibold text-white">
-            {unreadCount}
-          </span>
-        ) : null}
-      </div>
-    </button>
-  );
-}
-
-export function NotificationCard({
-  item,
-  actor,
-  onOpen,
-}: {
-  item: NotificationItem;
-  actor?: User;
-  onOpen: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onOpen}
-      className="w-full rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 text-left shadow-sm transition hover:-translate-y-0.5"
-    >
-      <div className="flex items-center gap-3">
-        <Avatar src={actor?.avatarUrl} name={actor?.displayName ?? "Notification"} size="sm" />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <p className="truncate font-semibold text-[var(--color-text-primary)]">{actor?.displayName ?? "System"}</p>
-            {!item.read ? <span className="h-2 w-2 rounded-full bg-[var(--color-brand-accent)]" /> : null}
-          </div>
-          <p className="text-sm text-[var(--color-text-secondary)]">{item.message}</p>
-        </div>
-        <p className="text-xs text-[var(--color-text-tertiary)]">{formatRelativeDate(item.createdAt)}</p>
-      </div>
-    </button>
-  );
-}
-
-export function MessageBubble({
-  message,
-  author,
-  isMine,
-}: {
-  message: Message;
-  author: User;
-  isMine: boolean;
-}) {
-  return (
-    <div className={`flex ${isMine ? "justify-end" : "justify-start"}`}>
-      <div
-        className={`max-w-[min(32rem,86%)] px-4 py-3 shadow-sm ${
-          isMine
-            ? "rounded-cap-primary bg-[var(--color-brand-primary)] text-white"
-            : "rounded-cap-alternate border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] text-[var(--color-text-primary)]"
-        }`}
-      >
-        <p className={`text-xs ${isMine ? "text-white/70" : "text-[var(--color-text-tertiary)]"}`}>{author.displayName}</p>
-        <p className="mt-1 text-sm leading-6">{message.body}</p>
-        <p className={`mt-2 text-right text-xs ${isMine ? "text-white/70" : "text-[var(--color-text-tertiary)]"}`}>
-          {formatTime(message.createdAt)}
-        </p>
-      </div>
-    </div>
-  );
-}