@autono/open-pages 0.6.0 → 0.8.0

package/src/app/components/command/command.tsx

@@ -31,7 +31,9 @@ function CommandDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         showCloseButton={false}
-        className="top-[14vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-[560px]"
+        // ⌘K fires dozens of times a day — opacity-only and fast, no scale
+        // theater on a keyboard-triggered surface.
+        className="top-[14vh] translate-y-0 gap-0 overflow-hidden p-0 duration-100 data-starting-style:scale-100 data-ending-style:scale-100 sm:max-w-[560px]"
       >
         <DialogTitle className="sr-only">{title}</DialogTitle>
         <DialogDescription className="sr-only">{description}</DialogDescription>
@@ -107,7 +109,7 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Comman
       data-slot="command-item"
       className={cn(
         'relative flex cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-none',
-        'data-[selected=true]:bg-muted data-[selected=true]:text-foreground',
+        'data-[selected=true]:bg-muted data-[selected=true]:text-foreground active:bg-muted/80',
         'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45',
         "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground [&_svg:not([class*='opacity'])]:opacity-80",
         className,

package/src/app/components/command/home-command-menu.tsx

@@ -1,11 +1,11 @@
-import { Image as ImageIcon, Palette, Presentation } from 'lucide-react';
+import { Presentation } from 'lucide-react';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useLocale } from '~/lib/use-locale';
 import { usePageTitles } from '~/lib/use-page-titles';
 import { pageIds } from '../../lib/pages';
 import type { Folder } from '../../lib/sdk';
-import { FolderIconChip } from '../sidebar/folder-item';
+import { FolderIconChip, SystemViewIcon } from '../sidebar/folder-item';
 import { ALL_DOCS_ID, ASSETS_ID, DRAFT_ID, THEMES_ID } from '../sidebar/sidebar';
 import { type CommandGroupSpec, CommandMenu, type CommandSpec } from './command-menu';
 
@@ -39,14 +39,14 @@ export function HomeCommandMenu({
       {
         id: `view-${ALL_DOCS_ID}`,
         label: t.home.pages,
-        icon: <FolderIconChip icon={{ type: 'emoji', value: '🎞️' }} />,
+        icon: <SystemViewIcon kind="all" />,
         keywords: ['all', 'pages'],
         run: () => onSelectView(ALL_DOCS_ID),
       },
       {
         id: `view-${DRAFT_ID}`,
         label: t.home.draft,
-        icon: <FolderIconChip icon={{ type: 'emoji', value: '📝' }} />,
+        icon: <SystemViewIcon kind="draft" />,
         keywords: ['draft', 'unsorted'],
         run: () => onSelectView(DRAFT_ID),
       },
@@ -63,7 +63,7 @@ export function HomeCommandMenu({
       {
         id: `view-${THEMES_ID}`,
         label: t.home.themes,
-        icon: <Palette />,
+        icon: <SystemViewIcon kind="themes" />,
         keywords: ['themes', 'design'],
         run: () => onSelectView(THEMES_ID),
       },
@@ -72,7 +72,7 @@ export function HomeCommandMenu({
       navigation.push({
         id: `view-${ASSETS_ID}`,
         label: t.home.assets,
-        icon: <ImageIcon />,
+        icon: <SystemViewIcon kind="assets" />,
         keywords: ['assets', 'images', 'files'],
         run: () => onSelectView(ASSETS_ID),
       });

package/src/app/components/icon-tooltip.tsx

@@ -1,10 +1,19 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 import type { ReactNode } from 'react';
-import { Tooltip, TooltipContent, TooltipProvider } from '~/components/ui/tooltip';
+import { Tooltip, TooltipContent } from '~/components/ui/tooltip';
+
+/**
+ * Tooltip trigger for a button that also opens a menu. The `ui/tooltip` wrapper
+ * is a plain function component, so on React 18 it swallows the ref that
+ * `DropdownMenuTrigger` hands to its `render` element and the menu never opens —
+ * the primitive forwards it.
+ */
+export const MenuTooltipTrigger = TooltipPrimitive.Trigger;
 
 /**
  * Shared hover label for the toolbar icon buttons. `children` supplies the
  * `TooltipTrigger`; a button that also opens a menu has to compose it inward
- * (`<DropdownMenuTrigger render={<TooltipTrigger />}>`) — the other nesting
+ * (`<DropdownMenuTrigger render={<MenuTooltipTrigger />}>`) — the other nesting
  * order swallows the trigger ref and the tooltip never opens.
  */
 export function IconTooltip({
@@ -16,19 +25,19 @@ export function IconTooltip({
   shortcut?: string;
   children: ReactNode;
 }) {
+  // No local provider — tooltips join the app-level group so adjacent
+  // toolbar buttons open instantly once one tooltip is showing.
   return (
-    <TooltipProvider delay={200}>
-      <Tooltip>
-        {children}
-        <TooltipContent side="bottom" sideOffset={6} className="flex items-center gap-1.5">
-          {label}
-          {shortcut && (
-            <kbd className="rounded-[3px] bg-background/18 px-1 py-0.5 font-mono text-[9.5px] tracking-[0.04em] text-background/85">
-              {shortcut}
-            </kbd>
-          )}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      {children}
+      <TooltipContent side="bottom" sideOffset={6} className="flex items-center gap-1.5">
+        {label}
+        {shortcut && (
+          <kbd className="rounded-[3px] bg-background/18 px-1 py-0.5 font-mono text-[9.5px] tracking-[0.04em] text-background/85">
+            {shortcut}
+          </kbd>
+        )}
+      </TooltipContent>
+    </Tooltip>
   );
 }

package/src/app/components/sidebar/folder-item.tsx

@@ -1,4 +1,13 @@
-import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import {
+  FolderOpen,
+  LayoutGrid,
+  type LucideIcon,
+  MoreHorizontal,
+  Palette,
+  Pencil,
+  PenLine,
+  Trash2,
+} from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import {
   DropdownMenu,
@@ -33,6 +42,24 @@ function useDocDragActive() {
   return active;
 }
 
+export type SystemViewKind = 'all' | 'draft' | 'themes' | 'assets';
+
+const SYSTEM_VIEW_ICONS: Record<SystemViewKind, LucideIcon> = {
+  all: LayoutGrid,
+  draft: PenLine,
+  themes: Palette,
+  assets: FolderOpen,
+};
+
+export function SystemViewIcon({ kind, className }: { kind: SystemViewKind; className?: string }) {
+  const Icon = SYSTEM_VIEW_ICONS[kind];
+  return (
+    <span aria-hidden className={cn('flex size-5 shrink-0 items-center justify-center', className)}>
+      <Icon className="size-4" strokeWidth={1.75} />
+    </span>
+  );
+}
+
 export function FolderIconChip({ icon, className }: { icon: FolderIcon; className?: string }) {
   if (icon.type === 'emoji') {
     return (
@@ -126,16 +153,12 @@ export function FolderItem({
     onDropDoc(pageId);
   };
 
-  const icon: FolderIcon =
-    row.kind === 'all'
-      ? { type: 'emoji', value: '🎞️' }
-      : row.kind === 'draft'
-        ? { type: 'emoji', value: '📝' }
-        : row.kind === 'themes'
-          ? { type: 'emoji', value: '🎨' }
-          : row.kind === 'assets'
-            ? { type: 'emoji', value: '🗂️' }
-            : row.folder.icon;
+  const chip =
+    row.kind === 'folder' ? (
+      <FolderIconChip icon={row.folder.icon} />
+    ) : (
+      <SystemViewIcon kind={row.kind} className={cn(!selected && 'text-muted-foreground')} />
+    );
   const label =
     row.kind === 'all'
       ? t.home.pages
@@ -158,13 +181,13 @@ export function FolderItem({
     // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target wraps interactive children
     <div
       className={cn(
-        'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-colors',
+        'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-[background-color,color,scale] duration-150',
         selected
-          ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
+          ? 'bg-background font-medium text-foreground shadow-edge ring-1 ring-foreground/[0.06]'
           : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',
         docDragActive && acceptsDocDrop && !dragOver && 'ring-1 ring-foreground/10',
         dragOver &&
-          'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01] motion-safe:transition-transform',
+          'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01]',
       )}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
@@ -177,11 +200,11 @@ export function FolderItem({
             render={
               <button
                 type="button"
-                className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+                className="flex size-5 shrink-0 items-center justify-center rounded outline-none motion-safe:transition-transform motion-safe:duration-150 hover:scale-110 active:scale-95 focus-visible:ring-1 focus-visible:ring-brand"
                 aria-label={t.home.changeIcon}
                 onClick={(e) => e.stopPropagation()}
               >
-                <FolderIconChip icon={icon} />
+                {chip}
               </button>
             }
           />
@@ -196,7 +219,7 @@ export function FolderItem({
           aria-label={label}
           className="flex size-5 shrink-0 items-center justify-center"
         >
-          <FolderIconChip icon={icon} />
+          {chip}
         </button>
       )}
 
@@ -217,7 +240,11 @@ export function FolderItem({
           className="min-w-0 flex-1 rounded-[3px] bg-card px-1 text-[12.5px] outline-none ring-1 ring-foreground/20"
         />
       ) : (
-        <button type="button" onClick={onSelect} className="min-w-0 flex-1 truncate text-left">
+        <button
+          type="button"
+          onClick={onSelect}
+          className="min-w-0 flex-1 truncate rounded-[3px] text-left outline-none focus-visible:ring-1 focus-visible:ring-brand"
+        >
           {label}
         </button>
       )}
@@ -240,7 +267,7 @@ export function FolderItem({
               <button
                 type="button"
                 onClick={(e) => e.stopPropagation()}
-                className="absolute right-2 top-1/2 size-5 -translate-y-1/2 rounded opacity-0 transition-opacity hover:bg-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+                className="absolute right-2 top-1/2 size-5 -translate-y-1/2 rounded opacity-0 outline-none transition-opacity duration-150 hover:bg-foreground/10 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-brand aria-expanded:opacity-100"
                 aria-label={t.home.folderActions}
               >
                 <MoreHorizontal className="mx-auto size-3.5" />

package/src/app/components/sidebar/icon-picker.tsx

@@ -49,7 +49,7 @@ export function IconPicker({
               key={c}
               type="button"
               onClick={() => onChange({ type: 'color', value: c })}
-              className="size-6 rounded-[4px] ring-1 ring-foreground/10 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] transition-transform hover:scale-110"
+              className="size-6 rounded-[4px] ring-1 ring-foreground/10 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] outline-none motion-safe:transition-transform motion-safe:duration-100 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-brand"
               style={{ background: c }}
               aria-label={c}
             />

package/src/app/components/sidebar/sidebar-footer.tsx

@@ -2,6 +2,7 @@ import config from 'virtual:open-pages/config';
 import { Loader2, RefreshCw, RotateCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
+import { ThemeToggle } from '~/components/theme-toggle';
 import { Button } from '~/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui/tooltip';
 import { format, useLocale } from '~/lib/use-locale';
@@ -53,15 +54,22 @@ export function SidebarFooter() {
     }
   }
 
-  const versionRow = (
-    <span className="inline-flex cursor-default items-center gap-1.5">
-      {update?.latest && <span className="size-1.5 rounded-full bg-brand" aria-hidden />}
+  const versionRow = update?.latest ? (
+    // Real button: the tooltip holds actionable controls, so keyboard users
+    // must be able to reach and open it.
+    <button
+      type="button"
+      className="inline-flex cursor-default items-center gap-1.5 rounded-[3px] outline-none focus-visible:ring-1 focus-visible:ring-brand"
+    >
+      <span className="size-1.5 rounded-full bg-brand" aria-hidden />
       {label}
-    </span>
+    </button>
+  ) : (
+    <span className="inline-flex cursor-default items-center gap-1.5">{label}</span>
   );
 
   return (
-    <div className="px-4 py-3 text-[11px] text-muted-foreground/70 tabular-nums">
+    <div className="flex items-center justify-between gap-2 py-1.5 pr-2 pl-4 text-[11px] text-muted-foreground/70 tabular-nums">
       {update?.latest ? (
         <TooltipProvider delay={200}>
           <Tooltip
@@ -93,7 +101,7 @@ export function SidebarFooter() {
                       onClick={restartServer}
                     >
                       {restarting ? (
-                        <Loader2 className="animate-spin" aria-hidden />
+                        <Loader2 className="animate-spin motion-reduce:animate-none" aria-hidden />
                       ) : (
                         <RotateCw aria-hidden />
                       )}
@@ -115,7 +123,7 @@ export function SidebarFooter() {
                     onClick={updatePackage}
                   >
                     {isUpdating ? (
-                      <Loader2 className="animate-spin" aria-hidden />
+                      <Loader2 className="animate-spin motion-reduce:animate-none" aria-hidden />
                     ) : (
                       <RefreshCw aria-hidden />
                     )}
@@ -134,6 +142,9 @@ export function SidebarFooter() {
       ) : (
         versionRow
       )}
+      <div className="flex shrink-0 items-center">
+        <ThemeToggle />
+      </div>
     </div>
   );
 }

package/src/app/components/sidebar/sidebar.tsx

@@ -1,13 +1,12 @@
-import { Plus } from 'lucide-react';
+import { Plus, Search } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { LanguageToggle } from '~/components/language-toggle';
-import { ThemeToggle } from '~/components/theme-toggle';
+import logo from '~/assets/autono.svg';
 import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
 import type { Folder, FolderIcon } from '~/lib/sdk';
 import { format, useLocale } from '~/lib/use-locale';
 import { cn } from '~/lib/utils';
-import { CommandMenuTrigger } from '../command/command-menu';
+import { COMMAND_MENU_SHORTCUT } from '../command/command-menu';
 import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
 import { SidebarFooter } from './sidebar-footer';
@@ -129,17 +128,42 @@ export function Sidebar({
   }, [creating]);
 
   return (
-    <aside className="relative flex h-full w-[16.5rem] shrink-0 flex-col border-r border-hairline bg-sidebar text-sidebar-foreground">
-      <div className="flex items-center justify-between px-4 pt-5 pb-4">
-        <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
-        <div className="-mr-1.5 flex items-center">
-          <CommandMenuTrigger onClick={onOpenCommandMenu} />
-          <LanguageToggle />
-          <ThemeToggle />
-        </div>
+    <aside className="group/side relative flex h-full w-[16.5rem] shrink-0 flex-col bg-sidebar text-sidebar-foreground">
+      <div className="flex items-center gap-2.5 px-4 pt-4 pb-3">
+        <img
+          src={logo}
+          alt=""
+          aria-hidden
+          draggable={false}
+          className="size-6 shrink-0 select-none rounded-[6px] ring-1 ring-foreground/10"
+        />
+        <h1 className="font-heading text-[13.5px] font-semibold tracking-tight">
+          {t.home.appTitle}
+        </h1>
+      </div>
+
+      <div className="px-2 pb-3">
+        <button
+          type="button"
+          onClick={onOpenCommandMenu}
+          aria-label={t.commandMenu.triggerAria}
+          aria-haspopup="dialog"
+          className={cn(
+            'flex h-8 w-full items-center gap-2 rounded-[6px] border border-border bg-card px-2.5 text-[12.5px] text-muted-foreground shadow-edge outline-none',
+            'transition-[border-color,color,background-color] duration-100',
+            'hover:border-foreground/20 hover:text-foreground',
+            'focus-visible:border-foreground/30 focus-visible:ring-2 focus-visible:ring-ring/30',
+          )}
+        >
+          <Search className="size-3.5 shrink-0" aria-hidden />
+          <span className="flex-1 truncate text-left">{t.commandMenu.triggerTooltip}</span>
+          <kbd className="rounded-[4px] border border-hairline bg-muted/60 px-1 py-px font-mono text-[9.5px] leading-none tracking-[0.04em] text-muted-foreground">
+            {COMMAND_MENU_SHORTCUT}
+          </kbd>
+        </button>
       </div>
 
-      <div className="px-2">
+      <div className="space-y-0.5 px-2">
         <FolderItem
           row={{ kind: 'all' }}
           count={allCount}
@@ -165,12 +189,27 @@ export function Sidebar({
         )}
       </div>
 
-      <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">
+      <div className="mt-5 flex h-6 items-center justify-between pr-2.5 pl-4 pb-0.5">
         <span className="eyebrow">{t.home.folders}</span>
-        <span className="h-px flex-1 bg-hairline" aria-hidden />
+        {import.meta.env.DEV && (
+          <button
+            type="button"
+            onClick={startCreating}
+            aria-label={t.home.newFolder}
+            title={t.home.newFolder}
+            className={cn(
+              'flex size-5 items-center justify-center rounded-[4px] text-muted-foreground/70 opacity-0 outline-none',
+              'transition-[opacity,background-color,color,scale] duration-100',
+              'hover:bg-muted hover:text-foreground active:scale-90',
+              'group-hover/side:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-brand',
+            )}
+          >
+            <Plus className="size-3.5" />
+          </button>
+        )}
       </div>
 
-      <div className="flex-1 overflow-y-auto px-2 pb-2">
+      <div className="flex-1 space-y-0.5 overflow-y-auto px-2 pb-2">
         <FolderItem
           row={{ kind: 'draft' }}
           count={countFor(null)}
@@ -246,57 +285,45 @@ export function Sidebar({
           );
         })}
 
-        {import.meta.env.DEV &&
-          (creating ? (
-            <div
-              data-folder-create
-              className="mt-1 flex items-center gap-2.5 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-[5px]"
-            >
-              <Popover open={iconOpen} onOpenChange={setIconOpen}>
-                <PopoverTrigger
-                  render={
-                    <button
-                      type="button"
-                      className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
-                      aria-label={t.home.pickIcon}
-                    >
-                      <FolderIconChip icon={newIcon} />
-                    </button>
-                  }
-                />
-                <PopoverContent side="right" align="start" className="w-auto p-2">
-                  <IconPicker value={newIcon} onChange={setNewIcon} />
-                </PopoverContent>
-              </Popover>
-              <input
-                ref={inputRef}
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.nativeEvent.isComposing) return;
-                  if (e.key === 'Enter') commitCreate();
-                  if (e.key === 'Escape') exitCreate();
-                }}
-                placeholder={t.home.folderName}
-                maxLength={40}
-                className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground/60"
+        {import.meta.env.DEV && creating && (
+          <div
+            data-folder-create
+            className="mt-1 flex items-center gap-2.5 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-[5px]"
+          >
+            <Popover open={iconOpen} onOpenChange={setIconOpen}>
+              <PopoverTrigger
+                render={
+                  <button
+                    type="button"
+                    className="flex size-5 shrink-0 items-center justify-center rounded outline-none motion-safe:transition-transform motion-safe:duration-150 hover:scale-110 active:scale-95 focus-visible:ring-1 focus-visible:ring-brand"
+                    aria-label={t.home.pickIcon}
+                  >
+                    <FolderIconChip icon={newIcon} />
+                  </button>
+                }
               />
-            </div>
-          ) : (
-            <button
-              type="button"
-              onClick={startCreating}
-              className="mt-1 flex w-full items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
-            >
-              <Plus className="size-3.5" />
-              <span>{t.home.newFolder}</span>
-            </button>
-          ))}
+              <PopoverContent side="right" align="start" className="w-auto p-2">
+                <IconPicker value={newIcon} onChange={setNewIcon} />
+              </PopoverContent>
+            </Popover>
+            <input
+              ref={inputRef}
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.nativeEvent.isComposing) return;
+                if (e.key === 'Enter') commitCreate();
+                if (e.key === 'Escape') exitCreate();
+              }}
+              placeholder={t.home.folderName}
+              maxLength={40}
+              className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground/60"
+            />
+          </div>
+        )}
       </div>
 
-      <div className="border-t border-hairline">
-        <SidebarFooter />
-      </div>
+      <SidebarFooter />
     </aside>
   );
 }

package/src/app/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
-import { IconTooltip } from '~/components/icon-tooltip';
+import { IconTooltip, MenuTooltipTrigger } from '~/components/icon-tooltip';
 import { buttonVariants } from '~/components/ui/button';
 import {
   DropdownMenu,
@@ -9,7 +9,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '~/components/ui/dropdown-menu';
-import { TooltipTrigger } from '~/components/ui/tooltip';
 import { useLocale } from '~/lib/use-locale';
 import { cn } from '~/lib/utils';
 
@@ -27,15 +26,15 @@ export function ThemeToggle() {
       <IconTooltip label={t.themeToggle.title}>
         <DropdownMenuTrigger
           render={
-            <TooltipTrigger
+            <MenuTooltipTrigger
               type="button"
               aria-label={t.themeToggle.toggleAria}
               className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
             />
           }
         >
-          <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <Sun className="size-3.5 scale-100 rotate-0 opacity-100 ease-swift motion-safe:transition-[opacity,scale,rotate] motion-safe:duration-200 dark:scale-75 dark:-rotate-90 dark:opacity-0" />
+          <Moon className="absolute size-3.5 scale-75 rotate-90 opacity-0 ease-swift motion-safe:transition-[opacity,scale,rotate] motion-safe:duration-200 dark:scale-100 dark:rotate-0 dark:opacity-100" />
         </DropdownMenuTrigger>
       </IconTooltip>
       <DropdownMenuContent align="end" className="min-w-[140px]">

package/src/app/components/themes/theme-detail.tsx

@@ -48,7 +48,7 @@ export function ThemeDetail({ themeId, onBack }: { themeId: string; onBack: () =
       </div>
 
       <header className="flex flex-wrap items-baseline gap-3">
-        <h2 className="font-heading text-[26px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[32px]">
+        <h2 className="font-heading text-[19px] font-semibold leading-none tracking-[-0.015em] md:text-[21px]">
           {theme.name}
         </h2>
         {theme.description ? (
@@ -156,8 +156,11 @@ function ThemeDocCard({ id }: { id: string }) {
   const displayTitle = page?.meta?.title ?? id;
 
   return (
-    <Link to={`/p/${id}`} className="group block focus-visible:outline-none">
-      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color] motion-safe:duration-200">
+    <Link
+      to={`/p/${id}`}
+      className="group block rounded-[6px] outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+    >
+      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 group-active:scale-[0.99] motion-safe:transition-[box-shadow,--tw-ring-color,scale] motion-safe:duration-200">
         <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
           <PageThumb source={{ pageId: id, kind: pageKinds[id] }} title={displayTitle} />
         </div>

package/src/app/components/themes/themes-gallery.tsx

@@ -1,3 +1,4 @@
+import { Palette } from 'lucide-react';
 import { format, useLocale } from '~/lib/use-locale';
 import { PageThumb } from '../../lib/page-thumb';
 import { type Theme, themes } from '../../lib/themes';
@@ -11,8 +12,12 @@ export function ThemesGallery({ onOpen }: { onOpen: (id: string) => void }) {
 
   return (
     <ul className="grid grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
-      {themes.map((theme) => (
-        <li key={theme.id}>
+      {themes.map((theme, i) => (
+        <li
+          key={theme.id}
+          className="rise-in"
+          style={{ animationDelay: `${Math.min(i, 11) * 30}ms` }}
+        >
           <ThemeCard
             theme={theme}
             onOpen={() => onOpen(theme.id)}
@@ -38,9 +43,9 @@ function ThemeCard({
       type="button"
       onClick={onOpen}
       aria-label={ariaLabel}
-      className="group block w-full text-left focus-visible:outline-none"
+      className="group block w-full rounded-[6px] text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     >
-      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color] motion-safe:duration-200">
+      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 group-active:scale-[0.99] motion-safe:transition-[box-shadow,--tw-ring-color,scale] motion-safe:duration-200">
         <ThemePreview theme={theme} />
       </div>
       <div className="mt-3">
@@ -85,10 +90,10 @@ function NoDemoState() {
 function ThemesEmptyState() {
   const t = useLocale();
   return (
-    <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
+    <div className="rounded-[8px] border border-dashed border-border px-8 py-20">
       <div className="mx-auto flex max-w-md flex-col items-center text-center">
-        <div className="text-2xl">🎨</div>
-        <p className="mt-3 font-heading text-[15px] font-semibold tracking-tight">
+        <Palette className="size-5 text-muted-foreground/60" aria-hidden />
+        <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
           {t.themes.noThemesTitle}
         </p>
         <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">