npm - @autono/open-pages - Versions diffs - 0.5.0 → 0.7.0 - Mend

@autono/open-pages 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/dist/{build-L50pau9v.js → build-CCoxDxL-.js} +11 -10
package/dist/cli/bin.d.ts +1 -1
package/dist/cli/bin.js +434 -28
package/dist/{config-CDUdFE8N.js → config-D_U_aCQz.js} +484 -460
package/dist/{config-C9or4m4J.d.ts → config-p-TWNXbv.d.ts} +4 -4
package/dist/{design-C13iz9_4.js → design-Cpqx7SJs.js} +1 -2
package/dist/{dev-CzJYXFOO.js → dev-CTrB263u.js} +40 -20
package/dist/{export-DbVwSmKW.js → export-enKL9R7x.js} +7 -10
package/dist/index.d.ts +6 -8
package/dist/index.js +2 -3
package/dist/locale/index.d.ts +8 -14
package/dist/locale/index.js +67 -32
package/dist/{open-pages-plugin-C0poXLsx.js → open-pages-plugin-C8cFhMB9.js} +23 -38
package/dist/preview-Dmzyd1cf.js +24 -0
package/dist/sync-ui-BzRiAGCK.js +132 -0
package/dist/{types-C5NCdDT-.d.ts → types-DDdUFUIS.d.ts} +19 -6
package/dist/{update-CV62NhBT.js → update-CWaCKlnl.js} +14 -5
package/dist/{update-package-Cxt57pz7.js → update-package-GaNsVdr8.js} +50 -22
package/dist/{version-B6AiiGvT.js → version-DZrXLoAD.js} +19 -3
package/dist/vite/index.d.ts +3 -7
package/dist/vite/index.js +2 -7
package/package.json +24 -22
package/src/app/app.tsx +19 -14
package/src/app/assets/autono-social.png +0 -0
package/src/app/assets/autono.svg +7 -0
package/src/app/components/asset-view.tsx +510 -26
package/src/app/components/command/command-menu.tsx +5 -1
package/src/app/components/command/command.tsx +4 -2
package/src/app/components/command/home-command-menu.tsx +6 -6
package/src/app/components/icon-tooltip.tsx +24 -15
package/src/app/components/sidebar/folder-item.tsx +46 -19
package/src/app/components/sidebar/icon-picker.tsx +1 -1
package/src/app/components/sidebar/sidebar-footer.tsx +18 -7
package/src/app/components/sidebar/sidebar.tsx +91 -64
package/src/app/components/theme-toggle.tsx +4 -5
package/src/app/components/themes/theme-detail.tsx +6 -3
package/src/app/components/themes/themes-gallery.tsx +12 -7
package/src/app/index.html +33 -2
package/src/app/lib/assets.ts +33 -0
package/src/app/lib/last-home-location.ts +18 -0
package/src/app/main.tsx +10 -1
package/src/app/routes/home-shell.tsx +82 -61
package/src/app/routes/home.tsx +42 -39
package/src/app/routes/page.tsx +18 -3
package/src/app/routes/themes.tsx +6 -8
package/src/app/styles.css +40 -4
package/src/app/virtual.d.ts +1 -0
package/src/locale/en.ts +17 -6
package/src/locale/ja.ts +18 -6
package/src/locale/types.ts +17 -4
package/src/locale/zh-cn.ts +19 -8
package/src/locale/zh-tw.ts +17 -6
package/src/shared/update-package.ts +193 -0
package/workspace/components.json +25 -0
package/workspace/deps.json +24 -0
package/workspace/hooks/use-mobile.ts +19 -0
package/workspace/lib/utils.ts +6 -0
package/workspace/styles/globals.css +135 -0
package/workspace/ui/accordion.tsx +79 -0
package/workspace/ui/alert-dialog.tsx +197 -0
package/workspace/ui/alert.tsx +76 -0
package/workspace/ui/aspect-ratio.tsx +11 -0
package/workspace/ui/attachment.tsx +204 -0
package/workspace/ui/avatar.tsx +110 -0
package/workspace/ui/badge.tsx +49 -0
package/workspace/ui/breadcrumb.tsx +122 -0
package/workspace/ui/bubble.tsx +125 -0
package/workspace/ui/button-group.tsx +83 -0
package/workspace/ui/button.tsx +67 -0
package/workspace/ui/calendar.tsx +222 -0
package/workspace/ui/card.tsx +103 -0
package/workspace/ui/carousel.tsx +240 -0
package/workspace/ui/chart.tsx +373 -0
package/workspace/ui/checkbox.tsx +31 -0
package/workspace/ui/collapsible.tsx +33 -0
package/workspace/ui/combobox.tsx +297 -0
package/workspace/ui/command.tsx +195 -0
package/workspace/ui/context-menu.tsx +261 -0
package/workspace/ui/dialog.tsx +168 -0
package/workspace/ui/direction.tsx +22 -0
package/workspace/ui/drawer.tsx +132 -0
package/workspace/ui/dropdown-menu.tsx +269 -0
package/workspace/ui/empty.tsx +104 -0
package/workspace/ui/field.tsx +236 -0
package/workspace/ui/hover-card.tsx +42 -0
package/workspace/ui/input-group.tsx +156 -0
package/workspace/ui/input-otp.tsx +87 -0
package/workspace/ui/input.tsx +19 -0
package/workspace/ui/item.tsx +196 -0
package/workspace/ui/kbd.tsx +26 -0
package/workspace/ui/label.tsx +22 -0
package/workspace/ui/marker.tsx +69 -0
package/workspace/ui/menubar.tsx +280 -0
package/workspace/ui/message-scroller.tsx +129 -0
package/workspace/ui/message.tsx +92 -0
package/workspace/ui/native-select.tsx +61 -0
package/workspace/ui/navigation-menu.tsx +164 -0
package/workspace/ui/pagination.tsx +129 -0
package/workspace/ui/popover.tsx +87 -0
package/workspace/ui/progress.tsx +31 -0
package/workspace/ui/radio-group.tsx +42 -0
package/workspace/ui/resizable.tsx +50 -0
package/workspace/ui/scroll-area.tsx +53 -0
package/workspace/ui/select.tsx +192 -0
package/workspace/ui/separator.tsx +26 -0
package/workspace/ui/sheet.tsx +147 -0
package/workspace/ui/sidebar.tsx +702 -0
package/workspace/ui/skeleton.tsx +13 -0
package/workspace/ui/slider.tsx +59 -0
package/workspace/ui/sonner.tsx +47 -0
package/workspace/ui/spinner.tsx +10 -0
package/workspace/ui/switch.tsx +33 -0
package/workspace/ui/table.tsx +114 -0
package/workspace/ui/tabs.tsx +90 -0
package/workspace/ui/textarea.tsx +18 -0
package/workspace/ui/toggle-group.tsx +87 -0
package/workspace/ui/toggle.tsx +45 -0
package/workspace/ui/tooltip.tsx +57 -0
package/dist/export-BsK6OCpc.js +0 -4
package/dist/preview-CPufRmuj.js +0 -21
package/dist/sync-Be_hxSOF.js +0 -139
package/dist/sync-lKEXyPOh.js +0 -3
package/dist/version-CeffgdfZ.js +0 -3
package/src/app/components/language-toggle.tsx +0 -46
package/src/app/favicon.ico +0 -0

package/src/app/index.html CHANGED Viewed

@@ -2,9 +2,40 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="./favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="./assets/autono.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>open-pages</title>
+    <title>Autono</title>
+    <meta name="description" content="Autono — the web page framework built for agents." />
+    <meta property="og:title" content="Autono" />
+    <meta property="og:site_name" content="Autono" />
+    <meta property="og:description" content="The web page framework built for agents." />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="./assets/autono-social.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Autono" />
+    <meta name="twitter:description" content="The web page framework built for agents." />
+    <meta name="twitter:image" content="./assets/autono-social.png" />
+    <style>
+      html {
+        background-color: oklch(0.99 0 0);
+      }
+      html.dark {
+        background-color: oklch(0.145 0 0);
+      }
+    </style>
+    <script>
+      // Apply the stored theme before first paint; next-themes only runs
+      // after the bundle loads, which flashes white for dark-mode users.
+      let stored = null;
+      try {
+        stored = localStorage.getItem('theme');
+      } catch (_) {}
+      const dark =
+        stored === 'dark' ||
+        (stored !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.classList.toggle('dark', dark);
+      document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/src/app/lib/assets.ts CHANGED Viewed

@@ -156,6 +156,39 @@ export async function fetchSvgAsFile(routeUrl: string, filename: string): Promis
   return new File([blob], filename, { type: 'image/svg+xml' });
 }
+export type GoogleFontItem = {
+  family: string;
+  category: string;
+  // Weight keys from the Google Fonts catalog, e.g. ['400', '400i', '700'].
+  variants: string[];
+};
+export async function searchGoogleFonts(
+  query: string,
+  signal?: AbortSignal,
+): Promise<GoogleFontItem[]> {
+  const q = query.trim();
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  else params.set('limit', '30');
+  const res = await fetch(`/__gfonts/search?${params.toString()}`, { signal });
+  if (!res.ok) throw new Error(`gfonts ${res.status}`);
+  return (await res.json()) as GoogleFontItem[];
+}
+export async function fetchFontAsFile(
+  family: string,
+  variant: string,
+  filenameBase: string,
+): Promise<File> {
+  const params = new URLSearchParams({ family, variant });
+  const res = await fetch(`/__gfonts/download?${params.toString()}`);
+  if (!res.ok) throw new Error(`gfonts download ${res.status}`);
+  const ext = res.headers.get('x-font-ext') || 'ttf';
+  const blob = await res.blob();
+  return new File([blob], `${filenameBase}.${ext}`, { type: blob.type || 'font/ttf' });
+}
 export type UseAssetsResult = {
   assets: AssetEntry[];
   loading: boolean;

package/src/app/lib/last-home-location.ts ADDED Viewed

@@ -0,0 +1,18 @@
+const LAST_HOME_LOCATION_KEY = 'open-pages:last-home-location';
+export function rememberHomeLocation(pathname: string, search: string): void {
+  try {
+    sessionStorage.setItem(LAST_HOME_LOCATION_KEY, pathname + search);
+  } catch {
+    // sessionStorage can be unavailable (private browsing, quota); falling
+    // back to the default home route is fine.
+  }
+}
+export function readLastHomeLocation(): string {
+  try {
+    return sessionStorage.getItem(LAST_HOME_LOCATION_KEY) ?? '/';
+  } catch {
+    return '/';
+  }
+}

package/src/app/main.tsx CHANGED Viewed

@@ -7,7 +7,16 @@ import './styles.css';
 // biome-ignore lint/style/noNonNullAssertion: #root is guaranteed by index.html
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+    {/* next-themes injects an anti-flash <script> meant for SSR; in this
+        client-only app it never runs, and React 19 warns about executable
+        script tags, so mark it as a data block. */}
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      scriptProps={{ type: 'application/json' }}
+    >
       <App />
     </ThemeProvider>
   </StrictMode>,

package/src/app/routes/home-shell.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Menu } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { LanguageToggle } from '~/components/language-toggle';
+import logo from '~/assets/autono.svg';
 import { ThemeToggle } from '~/components/theme-toggle';
 import {
   DropdownMenu,
@@ -12,11 +12,12 @@ import {
 } from '~/components/ui/dropdown-menu';
 import { useAssets } from '~/lib/assets';
 import { useFolders } from '~/lib/folders';
+import { rememberHomeLocation } from '~/lib/last-home-location';
 import { format, useLocale } from '~/lib/use-locale';
 import { cn } from '~/lib/utils';
 import { CommandMenuTrigger } from '../components/command/command-menu';
 import { HomeCommandMenu } from '../components/command/home-command-menu';
-import { FolderIconChip } from '../components/sidebar/folder-item';
+import { SystemViewIcon } from '../components/sidebar/folder-item';
 import { ALL_DOCS_ID, ASSETS_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
 import { pageIds } from '../lib/pages';
 import type { FoldersManifest } from '../lib/sdk';
@@ -64,6 +65,10 @@ export function HomeShell() {
   const selectedId = pathToSelectedId(location.pathname, searchParams);
+  useEffect(() => {
+    rememberHomeLocation(location.pathname, location.search);
+  }, [location.pathname, location.search]);
   const [commandOpen, setCommandOpen] = useState(false);
   const openCommandMenu = useCallback(() => setCommandOpen(true), []);
@@ -138,7 +143,7 @@ export function HomeShell() {
   };
   return (
-    <div className="flex h-dvh overflow-hidden bg-background text-foreground">
+    <div className="flex h-dvh overflow-hidden bg-sidebar text-foreground">
       <div className="hidden md:block">
         <Sidebar
           folders={manifest.folders}
@@ -174,69 +179,85 @@ export function HomeShell() {
         />
       </div>
-      <div className="relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
-        <div className="flex items-center justify-between border-b border-hairline bg-sidebar px-4 py-3 md:hidden">
-          <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
-          <div className="-mr-1.5 flex items-center gap-0.5">
-            <CommandMenuTrigger onClick={openCommandMenu} />
-            <LanguageToggle />
-            <ThemeToggle />
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <button
-                    type="button"
-                    aria-label={t.home.menu}
-                    className="flex size-8 items-center justify-center rounded-[6px] text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground"
-                  >
-                    <Menu className="size-4" />
-                  </button>
-                }
+      <div className="relative flex min-w-0 flex-1 flex-col md:py-2 md:pr-2">
+        <div className="relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-background md:rounded-[10px] md:shadow-edge md:ring-1 md:ring-foreground/[0.06]">
+          <div className="flex items-center justify-between border-b border-hairline bg-sidebar px-4 py-3 md:hidden">
+            <div className="flex min-w-0 items-center gap-2.5">
+              <img
+                src={logo}
+                alt=""
+                aria-hidden
+                draggable={false}
+                className="size-6 shrink-0 select-none rounded-[6px] ring-1 ring-foreground/10"
               />
-              <DropdownMenuContent align="end" className="min-w-[200px]">
-                <DropdownMenuItem
-                  onClick={() => selectFolder(ALL_DOCS_ID)}
-                  className={cn(
-                    selectedId !== THEMES_ID &&
-                      selectedId !== ASSETS_ID &&
-                      'bg-muted text-foreground',
-                  )}
-                >
-                  <FolderIconChip icon={{ type: 'emoji', value: '🎞️' }} />
-                  <span className="flex-1 truncate">{t.home.pages}</span>
-                  <span className="folio">{pageIds.length.toString().padStart(2, '0')}</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => selectFolder(THEMES_ID)}
-                  className={cn(selectedId === THEMES_ID && 'bg-muted text-foreground')}
-                >
-                  <FolderIconChip icon={{ type: 'emoji', value: '🎨' }} />
-                  <span className="flex-1 truncate">{t.home.themes}</span>
-                  <span className="folio">{themeRegistry.length.toString().padStart(2, '0')}</span>
-                </DropdownMenuItem>
-                {import.meta.env.DEV && (
+              <h1 className="truncate font-heading text-lg font-bold tracking-tight">
+                {t.home.appTitle}
+              </h1>
+            </div>
+            <div className="-mr-1.5 flex items-center gap-0.5">
+              <CommandMenuTrigger onClick={openCommandMenu} />
+              <ThemeToggle />
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <button
+                      type="button"
+                      aria-label={t.home.menu}
+                      className="flex size-8 items-center justify-center rounded-[6px] text-muted-foreground outline-none transition-[background-color,color,scale] duration-100 hover:bg-muted hover:text-foreground active:scale-95 focus-visible:ring-2 focus-visible:ring-ring/30 aria-expanded:bg-muted aria-expanded:text-foreground"
+                    >
+                      <Menu className="size-4" />
+                    </button>
+                  }
+                />
+                <DropdownMenuContent align="end" className="min-w-[200px]">
                   <DropdownMenuItem
-                    onClick={() => selectFolder(ASSETS_ID)}
-                    className={cn(selectedId === ASSETS_ID && 'bg-muted text-foreground')}
+                    onClick={() => selectFolder(ALL_DOCS_ID)}
+                    className={cn(
+                      selectedId !== THEMES_ID &&
+                        selectedId !== ASSETS_ID &&
+                        'bg-muted text-foreground',
+                    )}
                   >
-                    <FolderIconChip icon={{ type: 'emoji', value: '🗂️' }} />
-                    <span className="flex-1 truncate">{t.home.assets}</span>
-                    <span className="folio">{globalAssets.length.toString().padStart(2, '0')}</span>
+                    <SystemViewIcon kind="all" className="text-muted-foreground" />
+                    <span className="flex-1 truncate">{t.home.pages}</span>
+                    <span className="folio">{pageIds.length.toString().padStart(2, '0')}</span>
                   </DropdownMenuItem>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  <DropdownMenuItem
+                    onClick={() => selectFolder(THEMES_ID)}
+                    className={cn(selectedId === THEMES_ID && 'bg-muted text-foreground')}
+                  >
+                    <SystemViewIcon kind="themes" className="text-muted-foreground" />
+                    <span className="flex-1 truncate">{t.home.themes}</span>
+                    <span className="folio">
+                      {themeRegistry.length.toString().padStart(2, '0')}
+                    </span>
+                  </DropdownMenuItem>
+                  {import.meta.env.DEV && (
+                    <DropdownMenuItem
+                      onClick={() => selectFolder(ASSETS_ID)}
+                      className={cn(selectedId === ASSETS_ID && 'bg-muted text-foreground')}
+                    >
+                      <SystemViewIcon kind="assets" className="text-muted-foreground" />
+                      <span className="flex-1 truncate">{t.home.assets}</span>
+                      <span className="folio">
+                        {globalAssets.length.toString().padStart(2, '0')}
+                      </span>
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
-        </div>
-        <div
-          className={cn(
-            isAssetsRoute
-              ? 'flex min-h-0 flex-1 flex-col'
-              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
-          )}
-        >
-          <Outlet context={ctx} />
+          <div
+            className={cn(
+              isAssetsRoute
+                ? 'flex min-h-0 flex-1 flex-col'
+                : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
+            )}
+          >
+            <Outlet context={ctx} />
+          </div>
         </div>
       </div>

package/src/app/routes/home.tsx CHANGED Viewed

@@ -32,11 +32,11 @@ import {
 } from '~/components/ui/dropdown-menu';
 import { format, useLocale } from '~/lib/use-locale';
 import { cn } from '~/lib/utils';
-import { DOC_DND_MIME, FolderIconChip } from '../components/sidebar/folder-item';
+import { DOC_DND_MIME, FolderIconChip, SystemViewIcon } from '../components/sidebar/folder-item';
 import { ALL_DOCS_ID, DRAFT_ID } from '../components/sidebar/sidebar';
 import { PageThumb } from '../lib/page-thumb';
 import { loadPage, pageCreatedAt, pageIds, pageKinds } from '../lib/pages';
-import type { Folder, FolderIcon, PageModule } from '../lib/sdk';
+import type { Folder, PageModule } from '../lib/sdk';
 import type { HomeOutletContext } from './home-shell';
 type SortKey = 'created-desc' | 'created-asc' | 'title-asc' | 'title-desc';
@@ -92,10 +92,6 @@ export function Home() {
   const visibleDocs = isAll ? pageIds : isDraft ? draftDocs : (docsByFolder[selectedId] ?? []);
   const title = selectedFolder?.name ?? (isAll ? t.home.pages : t.home.draft);
-  const headerIcon = selectedFolder?.icon ?? {
-    type: 'emoji' as const,
-    value: isAll ? '🎞️' : '📝',
-  };
   const [query, setQuery] = useState('');
   const [sortKey, setSortKey] = useSortPref();
@@ -131,10 +127,14 @@ export function Home() {
   return (
     <>
-      <header className="mb-8 md:mb-12">
-        <div className="flex flex-wrap items-center gap-3">
-          <FolderIconChip icon={headerIcon} className="size-7 text-2xl" />
-          <h1 className="font-heading text-[32px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[44px]">
+      <header className="mb-6 md:mb-8">
+        <div className="flex flex-wrap items-center gap-2.5">
+          {selectedFolder ? (
+            <FolderIconChip icon={selectedFolder.icon} className="size-5 text-[16px]" />
+          ) : (
+            <SystemViewIcon kind={isAll ? 'all' : 'draft'} className="text-muted-foreground" />
+          )}
+          <h1 className="font-heading text-[19px] font-semibold leading-none tracking-[-0.015em] md:text-[21px]">
             {title}
           </h1>
           <DropdownMenu>
@@ -143,7 +143,7 @@ export function Home() {
                 <button
                   type="button"
                   aria-label={t.home.folders}
-                  className="flex size-7 items-center justify-center rounded-[6px] border border-border bg-card text-muted-foreground hover:text-foreground aria-expanded:border-foreground/40 aria-expanded:text-foreground md:hidden"
+                  className="flex size-7 items-center justify-center rounded-[6px] border border-border bg-card text-muted-foreground outline-none transition-[background-color,color,scale] duration-100 hover:bg-muted hover:text-foreground active:scale-95 focus-visible:ring-2 focus-visible:ring-ring/30 aria-expanded:border-foreground/40 aria-expanded:text-foreground md:hidden"
                 >
                   <ChevronDown className="size-4" />
                 </button>
@@ -154,7 +154,7 @@ export function Home() {
                 onClick={() => selectFolder(ALL_DOCS_ID)}
                 className={cn(isAll && 'bg-muted text-foreground')}
               >
-                <FolderIconChip icon={{ type: 'emoji', value: '🎞️' }} />
+                <SystemViewIcon kind="all" className="text-muted-foreground" />
                 <span className="flex-1 truncate">{t.home.pages}</span>
                 <span className="folio">{pageIds.length.toString().padStart(2, '0')}</span>
               </DropdownMenuItem>
@@ -162,7 +162,7 @@ export function Home() {
                 onClick={() => selectFolder(DRAFT_ID)}
                 className={cn(isDraft && 'bg-muted text-foreground')}
               >
-                <FolderIconChip icon={{ type: 'emoji', value: '📝' }} />
+                <SystemViewIcon kind="draft" className="text-muted-foreground" />
                 <span className="flex-1 truncate">{t.home.draft}</span>
                 <span className="folio">{draftDocs.length.toString().padStart(2, '0')}</span>
               </DropdownMenuItem>
@@ -182,7 +182,7 @@ export function Home() {
             </DropdownMenuContent>
           </DropdownMenu>
           {!loading && (
-            <span className="folio ml-1 self-end pb-2">
+            <span className="folio ml-0.5">
               {(isSearching ? filteredDocs.length : visibleDocs.length).toString().padStart(2, '0')}
               {isSearching && (
                 <span className="opacity-40">
@@ -206,8 +206,12 @@ export function Home() {
         <NoResultsState query={query} onClear={() => setQuery('')} />
       ) : (
         <ul className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
-          {sortedDocs.map((id) => (
-            <li key={id}>
+          {sortedDocs.map((id, i) => (
+            <li
+              key={id}
+              className="rise-in"
+              style={{ animationDelay: `${Math.min(i, 11) * 30}ms` }}
+            >
               <DocCard
                 id={id}
                 folders={manifest.folders}
@@ -259,7 +263,7 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
           type="button"
           onClick={() => onChange('')}
           aria-label={t.home.clearSearch}
-          className="absolute right-1.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground"
+          className="absolute right-1.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-[4px] text-muted-foreground outline-none transition-[background-color,color,scale] duration-100 hover:bg-muted hover:text-foreground active:scale-90 focus-visible:ring-2 focus-visible:ring-ring/30"
         >
           <X className="size-3" />
         </button>
@@ -289,7 +293,7 @@ function SortControl({ value, onChange }: { value: SortKey; onChange: (next: Sor
           <button
             type="button"
             aria-label={`${t.home.sortLabel}: ${labels[value]}`}
-            className="flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[6px] border border-border bg-background pl-2 pr-1.5 text-[12.5px] font-medium text-foreground outline-none hover:bg-muted focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
+            className="flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[6px] border border-border bg-background pl-2 pr-1.5 text-[12.5px] font-medium text-foreground outline-none transition-[background-color,translate] duration-100 hover:bg-muted active:translate-y-px focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
           >
             <FieldIcon k={value} className="size-3.5 text-muted-foreground" />
             <span>{labels[value]}</span>
@@ -336,12 +340,10 @@ function HomeLoading() {
 function NoResultsState({ query, onClear }: { query: string; onClear: () => void }) {
   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="flex size-12 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground">
-          <Search className="size-5" />
-        </div>
-        <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+        <Search className="size-5 text-muted-foreground/60" aria-hidden />
+        <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
           {t.home.noMatches}
         </p>
         <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
@@ -364,14 +366,12 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
     folderName ?? t.home.folderEmptyTitle,
   );
   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="flex size-12 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground">
-          <FolderPlus className="size-5" />
-        </div>
+        <FolderPlus className="size-5 text-muted-foreground/60" aria-hidden />
         {isDraft ? (
           <>
-            <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+            <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
               {t.home.noDocsYet}
             </p>
             <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
@@ -384,7 +384,7 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
           </>
         ) : (
           <>
-            <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+            <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
               {folderEmptyTitle}
             </p>
             <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
@@ -502,9 +502,12 @@ function DocCard({
         onDragEnd={() => setDragging(false)}
         className={cn('group relative motion-safe:transition-opacity', dragging && 'opacity-40')}
       >
-        <Link to={`/p/${id}`} className="block focus-visible:outline-none">
+        <Link
+          to={`/p/${id}`}
+          className="block rounded-[6px] outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
           {/* Page thumb — tight border, grey baseboard, no shadcn rounded-xl */}
-          <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 motion-safe:transition-[box-shadow,--tw-ring-color,scale] motion-safe:duration-200 group-active:scale-[0.99]">
             <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>
@@ -528,7 +531,7 @@ function DocCard({
         </div>
         {import.meta.env.DEV && (
-          <div className="absolute right-2 top-2">
+          <div className="absolute right-2 top-2 z-20">
             <DropdownMenu>
               <DropdownMenuTrigger
                 render={
@@ -538,7 +541,7 @@ function DocCard({
                       e.stopPropagation();
                       e.preventDefault();
                     }}
-                    className="flex size-7 items-center justify-center rounded-[5px] bg-card/90 text-foreground shadow-edge ring-1 ring-border opacity-0 backdrop-blur hover:bg-card group-hover:opacity-100 aria-expanded:opacity-100 motion-safe:transition-opacity"
+                    className="flex size-7 items-center justify-center rounded-[5px] bg-card/90 text-foreground shadow-edge ring-1 ring-border opacity-0 outline-none backdrop-blur hover:bg-card group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-ring/40 aria-expanded:opacity-100 motion-safe:transition-opacity motion-safe:duration-150"
                     aria-label={tCard.home.docActions}
                   >
                     <MoreHorizontal className="size-3.5" />
@@ -731,7 +734,7 @@ function MoveDialog({
         </DialogHeader>
         <div className="max-h-[320px] overflow-y-auto rounded-[6px] border border-border bg-background">
           <FolderOption
-            icon={{ type: 'emoji', value: '📝' }}
+            chip={<SystemViewIcon kind="draft" className="text-muted-foreground" />}
             label={t.home.draft}
             active={selected === null}
             onClick={() => setSelected(null)}
@@ -739,7 +742,7 @@ function MoveDialog({
           {folders.map((f) => (
             <FolderOption
               key={f.id}
-              icon={f.icon}
+              chip={<FolderIconChip icon={f.icon} />}
               label={f.name}
               active={selected === f.id}
               onClick={() => setSelected(f.id)}
@@ -760,12 +763,12 @@ function MoveDialog({
 }
 function FolderOption({
-  icon,
+  chip,
   label,
   active,
   onClick,
 }: {
-  icon: FolderIcon;
+  chip: React.ReactNode;
   label: string;
   active: boolean;
   onClick: () => void;
@@ -776,11 +779,11 @@ function FolderOption({
       type="button"
       onClick={onClick}
       className={cn(
-        'flex w-full items-center gap-2 border-b border-hairline px-3 py-2 text-left text-[13px] transition-colors last:border-b-0',
+        'flex w-full items-center gap-2 border-b border-hairline px-3 py-2 text-left text-[13px] outline-none transition-colors duration-100 last:border-b-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-brand active:bg-muted',
         active ? 'bg-muted text-foreground' : 'hover:bg-muted/60',
       )}
     >
-      <FolderIconChip icon={icon} />
+      {chip}
       <span className="truncate">{label}</span>
       {active && (
         <span className="ml-auto inline-flex items-center gap-1 text-[10.5px] text-brand">

package/src/app/routes/page.tsx CHANGED Viewed

@@ -12,9 +12,10 @@ import {
   X,
 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import { Button } from '~/components/ui/button';
+import { readLastHomeLocation } from '~/lib/last-home-location';
 import { cn } from '~/lib/utils';
 import { type FrameMessage, frameUrl, isFrameMessage, type WorkspaceMessage } from '../lib/frame';
 import { pageChangeIncludes, pageIds, pageKinds } from '../lib/pages';
@@ -53,8 +54,22 @@ export function PageView() {
   const title = pageModule?.meta?.title ?? pageId;
   useEffect(() => {
-    document.title = `${title} — open-pages`;
+    document.title = `${title} — Autono`;
+    return () => {
+      document.title = 'Autono';
+    };
   }, [title]);
+  const navigate = useNavigate();
+  // react-router records its entry index in history.state; going back is only
+  // safe when we actually pushed an entry, otherwise land on the last home view.
+  const goBack = useCallback(() => {
+    const idx = (window.history.state as { idx?: number } | null)?.idx ?? 0;
+    if (idx > 0) {
+      navigate(-1);
+    } else {
+      navigate(readLastHomeLocation(), { replace: true });
+    }
+  }, [navigate]);
   const frameRef = useRef<HTMLIFrameElement | null>(null);
   const [frameKey, setFrameKey] = useState(0);
@@ -178,7 +193,7 @@ export function PageView() {
       {showPageUi && (
         <header className="flex h-12 shrink-0 items-center gap-2 border-b bg-background px-3">
           {showPageBrowser && (
-            <Button variant="ghost" size="icon" aria-label="Back to pages" render={<Link to="/" />}>
+            <Button variant="ghost" size="icon" aria-label="Back to pages" onClick={goBack}>
               <ChevronLeft className="size-4" />
             </Button>
           )}

package/src/app/routes/themes.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useLocale } from '~/lib/use-locale';
-import { FolderIconChip } from '../components/sidebar/folder-item';
+import { SystemViewIcon } from '../components/sidebar/folder-item';
 import { ThemeDetail } from '../components/themes/theme-detail';
 import { ThemesGallery } from '../components/themes/themes-gallery';
 import { themes as themeRegistry } from '../lib/themes';
@@ -10,15 +10,13 @@ export function ThemesGalleryPage() {
   const t = useLocale();
   return (
     <>
-      <header className="mb-8 md:mb-12">
-        <div className="flex flex-wrap items-center gap-3">
-          <FolderIconChip icon={{ type: 'emoji', value: '🎨' }} className="size-7 text-2xl" />
-          <h1 className="font-heading text-[32px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[44px]">
+      <header className="mb-6 md:mb-8">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <SystemViewIcon kind="themes" className="text-muted-foreground" />
+          <h1 className="font-heading text-[19px] font-semibold leading-none tracking-[-0.015em] md:text-[21px]">
             {t.themes.title}
           </h1>
-          <span className="folio ml-1 self-end pb-2">
-            {themeRegistry.length.toString().padStart(2, '0')}
-          </span>
+          <span className="folio ml-0.5">{themeRegistry.length.toString().padStart(2, '0')}</span>
         </div>
       </header>
       <ThemesGallery onOpen={(id) => navigate(`/themes/${encodeURIComponent(id)}`)} />