@autono/open-pages 0.7.0 → 0.9.0

package/src/app/routes/emails.tsx

@@ -0,0 +1,94 @@
+import { Mail } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { format, useLocale } from '~/lib/use-locale';
+import { SystemViewIcon } from '../components/sidebar/folder-item';
+import { emailCreatedAt, emailIds, emailMeta } from '../lib/emails';
+import { PageThumb } from '../lib/page-thumb';
+
+// Emails lay out at 600px; a slightly wider thumb viewport keeps the body
+// margins visible so the card reads as an email, not a cropped page.
+const EMAIL_THUMB_VIEWPORT = 760;
+
+export function EmailsGalleryPage() {
+  const t = useLocale();
+  const sorted = emailIds
+    .slice()
+    .sort((a, b) => (emailCreatedAt[b] ?? 0) - (emailCreatedAt[a] ?? 0));
+
+  return (
+    <>
+      <header className="mb-6 md:mb-8">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <SystemViewIcon kind="emails" className="text-muted-foreground" />
+          <h1 className="font-heading text-[19px] font-semibold leading-none tracking-[-0.015em] md:text-[21px]">
+            {t.emails.title}
+          </h1>
+          <span className="folio ml-0.5">{emailIds.length.toString().padStart(2, '0')}</span>
+        </div>
+      </header>
+
+      {sorted.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <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))]">
+          {sorted.map((id, i) => {
+            const info = emailMeta[id];
+            const title = info?.title ?? id;
+            return (
+              <li
+                key={id}
+                className="rise-in"
+                style={{ animationDelay: `${Math.min(i, 11) * 30}ms` }}
+              >
+                <Link
+                  to={`/e/${id}`}
+                  aria-label={format(t.emails.openEmailAria, { name: title })}
+                  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-[4/3] 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={{ emailId: id }}
+                        title={title}
+                        viewport={EMAIL_THUMB_VIEWPORT}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-3 min-w-0">
+                    <h3 className="truncate font-heading text-[14px] font-medium tracking-tight">
+                      {title}
+                    </h3>
+                    <p className="mt-0.5 truncate text-[12.5px] text-muted-foreground">
+                      {info?.subject ?? t.emails.noSubject}
+                    </p>
+                  </div>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+}
+
+function EmptyState() {
+  const t = useLocale();
+  return (
+    <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">
+        <Mail className="size-5 text-muted-foreground/60" aria-hidden />
+        <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
+          {t.emails.noEmailsTitle}
+        </p>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+          {t.emails.noEmailsHintPrefix}
+          <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-email
+          </code>
+          {t.emails.noEmailsHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -18,7 +18,14 @@ import { cn } from '~/lib/utils';
 import { CommandMenuTrigger } from '../components/command/command-menu';
 import { HomeCommandMenu } from '../components/command/home-command-menu';
 import { SystemViewIcon } from '../components/sidebar/folder-item';
-import { ALL_DOCS_ID, ASSETS_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import {
+  ALL_DOCS_ID,
+  ASSETS_ID,
+  EMAILS_ID,
+  Sidebar,
+  THEMES_ID,
+} from '../components/sidebar/sidebar';
+import { emailIds } from '../lib/emails';
 import { pageIds } from '../lib/pages';
 import type { FoldersManifest } from '../lib/sdk';
 import { themes as themeRegistry } from '../lib/themes';
@@ -28,7 +35,7 @@ export type HomeOutletContext = {
   loading: boolean;
   draftDocs: string[];
   docsByFolder: Record<string, string[]>;
-  /** Selected view id: ALL_DOCS_ID, DRAFT_ID, a folder id, THEMES_ID, or ASSETS_ID. */
+  /** Selected view id: ALL_DOCS_ID, DRAFT_ID, a folder id, THEMES_ID, ASSETS_ID, or EMAILS_ID. */
   selectedId: string;
   selectFolder: (id: string) => void;
   reportTitle: (pageId: string, title: string) => void;
@@ -42,6 +49,7 @@ export type HomeOutletContext = {
 function pathToSelectedId(pathname: string, search: URLSearchParams): string {
   if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
   if (pathname === '/assets') return ASSETS_ID;
+  if (pathname === '/emails') return EMAILS_ID;
   return search.get('f') ?? ALL_DOCS_ID;
 }
 
@@ -81,6 +89,7 @@ export function HomeShell() {
     (id: string) => {
       if (id === THEMES_ID) navigate('/themes', { replace: true });
       else if (id === ASSETS_ID) navigate('/assets', { replace: true });
+      else if (id === EMAILS_ID) navigate('/emails', { replace: true });
       else if (id === ALL_DOCS_ID) navigate('/', { replace: true });
       else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
     },
@@ -151,6 +160,7 @@ export function HomeShell() {
           allCount={pageIds.length}
           themesCount={themeRegistry.length}
           assetsCount={globalAssets.length}
+          emailsCount={emailIds.length}
           selectedId={selectedId}
           onSelect={selectFolder}
           onCreate={(name, icon) => create(name, icon)}
@@ -215,6 +225,7 @@ export function HomeShell() {
                     className={cn(
                       selectedId !== THEMES_ID &&
                         selectedId !== ASSETS_ID &&
+                        selectedId !== EMAILS_ID &&
                         'bg-muted text-foreground',
                     )}
                   >
@@ -232,6 +243,14 @@ export function HomeShell() {
                       {themeRegistry.length.toString().padStart(2, '0')}
                     </span>
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => selectFolder(EMAILS_ID)}
+                    className={cn(selectedId === EMAILS_ID && 'bg-muted text-foreground')}
+                  >
+                    <SystemViewIcon kind="emails" className="text-muted-foreground" />
+                    <span className="flex-1 truncate">{t.home.emails}</span>
+                    <span className="folio">{emailIds.length.toString().padStart(2, '0')}</span>
+                  </DropdownMenuItem>
                   {import.meta.env.DEV && (
                     <DropdownMenuItem
                       onClick={() => selectFolder(ASSETS_ID)}

package/src/app/routes/page.tsx

@@ -4,17 +4,16 @@ import {
   Crosshair,
   ExternalLink,
   Loader2,
-  MessageSquarePlus,
   Monitor,
   RotateCw,
   Smartphone,
   Tablet,
-  X,
 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { Button } from '~/components/ui/button';
+import { type Selection, SelectionNote } from '~/components/selection-note';
+import { Button, buttonVariants } 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';
@@ -44,8 +43,6 @@ function readViewportPref(): Viewport {
 
 const VIEWPORT_ICONS = { desktop: Monitor, tablet: Tablet, mobile: Smartphone } as const;
 
-type Selection = { loc: string; tag: string; text: string };
-
 export function PageView() {
   const { pageId = '' } = useParams();
   const known = pageIds.includes(pageId);
@@ -253,17 +250,22 @@ export function PageView() {
                 Inspect
               </Button>
             )}
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={!known}
-              render={<a href={src} target="_blank" rel="noreferrer" />}
+            <a
+              href={known ? src : undefined}
+              target="_blank"
+              rel="noreferrer"
               aria-label="Open page in a new tab"
+              aria-disabled={!known || undefined}
+              tabIndex={known ? undefined : -1}
               title="Open the page by itself in a new tab"
+              className={cn(
+                buttonVariants({ variant: 'outline', size: 'sm' }),
+                !known && 'pointer-events-none opacity-50',
+              )}
             >
               <ExternalLink className="size-4" />
               Open
-            </Button>
+            </a>
           </div>
         </header>
       )}
@@ -291,52 +293,14 @@ export function PageView() {
         )}
 
         {selection && (
-          <div className="fixed bottom-6 right-6 z-20 w-[340px] rounded-lg border bg-background p-3 shadow-xl">
-            <div className="flex items-center gap-2">
-              <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px]">
-                {selection.tag}
-              </span>
-              <span className="font-mono text-[11px] text-muted-foreground">
-                line {selection.loc.replace(':', ', col ')}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="ml-auto size-6"
-                aria-label="Clear selection"
-                onClick={() => setSelection(null)}
-              >
-                <X className="size-3.5" />
-              </Button>
-            </div>
-            {selection.text && (
-              <p className="mt-1.5 line-clamp-2 text-xs text-muted-foreground">
-                “{selection.text}”
-              </p>
-            )}
-            <textarea
-              value={note}
-              onChange={(e) => setNote(e.target.value)}
-              placeholder="Leave a note for your agent — e.g. “make this bold”"
-              rows={2}
-              className="mt-2 w-full resize-none rounded-md border bg-transparent px-2 py-1.5 text-sm outline-none focus:ring-1 focus:ring-ring"
-            />
-            <div className="mt-2 flex justify-end gap-2">
-              <Button
-                size="sm"
-                onClick={submitComment}
-                disabled={!note.trim() || savingNote}
-                aria-label="Save comment"
-              >
-                {savingNote ? (
-                  <Loader2 className="size-3.5 animate-spin" />
-                ) : (
-                  <MessageSquarePlus className="size-3.5" />
-                )}
-                Comment
-              </Button>
-            </div>
-          </div>
+          <SelectionNote
+            selection={selection}
+            note={note}
+            saving={savingNote}
+            onNoteChange={setNote}
+            onSubmit={submitComment}
+            onClear={() => setSelection(null)}
+          />
         )}
       </main>
     </div>

package/src/app/virtual.d.ts

@@ -7,6 +7,15 @@ declare module 'virtual:open-pages/pages' {
   export function loadPage(id: string): Promise<PageModule>;
 }
 
+declare module 'virtual:open-pages/emails' {
+  export const emailIds: string[];
+  export const emailMeta: Record<
+    string,
+    { title: string; subject: string | null; description: string | null }
+  >;
+  export const emailCreatedAt: Record<string, number>;
+}
+
 declare module 'virtual:open-pages/pages.css' {}
 
 declare module 'virtual:open-pages/config' {
@@ -15,6 +24,7 @@ declare module 'virtual:open-pages/config' {
   const config: {
     base?: string;
     pagesDir?: string;
+    emailsDir?: string;
     port?: number;
     locale?: Locale;
     version: string;

package/src/locale/en.ts

@@ -23,6 +23,7 @@ export const en: Locale = {
     duplicate: 'Duplicate',
     themes: 'Themes',
     assets: 'Assets',
+    emails: 'Emails',
     folders: 'Folders',
     pages: 'Pages',
     menu: 'Menu',
@@ -193,6 +194,7 @@ export const en: Locale = {
     placeholder: 'Search pages or run a command…',
     empty: 'No results.',
     groupDocs: 'Pages',
+    groupEmails: 'Emails',
     groupFolders: 'Folders',
     groupNavigation: 'Go to',
     groupAppearance: 'Appearance',
@@ -211,6 +213,29 @@ export const en: Locale = {
     system: 'System',
   },
 
+  emails: {
+    title: 'Emails',
+    noEmailsTitle: 'No emails yet',
+    noEmailsHintPrefix: 'Run ',
+    noEmailsHintSuffix: ' in your agent to scaffold one under emails/.',
+    subjectLabel: 'Subject',
+    noSubject: 'No subject set',
+    openEmailAria: 'Open email {name}',
+    backToEmails: 'Back to emails',
+    viewHtml: 'HTML',
+    viewText: 'Text',
+    viewportDesktop: 'Desktop',
+    viewportMobile: 'Mobile',
+    copyHtml: 'Copy HTML',
+    copiedHtml: 'HTML copied',
+    copyHtmlFailed: 'Could not copy the HTML',
+    reload: 'Reload email',
+    openInTab: 'Open the rendered email by itself in a new tab',
+    notFound: 'Email not found: {id}',
+    unresolvedCount: '{count} classes did not compile',
+    unresolvedTitle:
+      'Tailwind utilities the email compiler could not inline (check components/email/email-theme.ts):',
+  },
   themes: {
     title: 'Themes',
     noThemesTitle: 'No themes yet',

package/src/locale/ja.ts

@@ -23,6 +23,7 @@ export const ja: Locale = {
     duplicate: '複製',
     themes: 'テーマ',
     assets: 'アセット',
+    emails: 'メール',
     folders: 'フォルダ',
     pages: 'スライド',
     menu: 'メニュー',
@@ -196,6 +197,7 @@ export const ja: Locale = {
     placeholder: 'スライドを検索、またはコマンドを実行…',
     empty: '結果がありません。',
     groupDocs: 'スライド',
+    groupEmails: 'メール',
     groupFolders: 'フォルダ',
     groupNavigation: '移動',
     groupAppearance: '外観',
@@ -214,6 +216,29 @@ export const ja: Locale = {
     system: 'システム',
   },
 
+  emails: {
+    title: 'メール',
+    noEmailsTitle: 'メールはまだありません',
+    noEmailsHintPrefix: 'エージェントで ',
+    noEmailsHintSuffix: ' を実行すると emails/ に作成されます。',
+    subjectLabel: '件名',
+    noSubject: '件名が未設定',
+    openEmailAria: 'メール {name} を開く',
+    backToEmails: 'メール一覧へ戻る',
+    viewHtml: 'HTML',
+    viewText: 'テキスト',
+    viewportDesktop: 'デスクトップ',
+    viewportMobile: 'モバイル',
+    copyHtml: 'HTML をコピー',
+    copiedHtml: 'HTML をコピーしました',
+    copyHtmlFailed: 'HTML をコピーできませんでした',
+    reload: 'メールを再読み込み',
+    openInTab: 'レンダリングされたメールを新しいタブで開く',
+    notFound: 'メールが見つかりません: {id}',
+    unresolvedCount: '{count} 個のクラスが変換されませんでした',
+    unresolvedTitle:
+      'メールコンパイラがインライン化できなかった Tailwind ユーティリティ (components/email/email-theme.ts を確認):',
+  },
   themes: {
     title: 'テーマ',
     noThemesTitle: 'テーマがまだありません',

package/src/locale/types.ts

@@ -23,6 +23,7 @@ export type Locale = {
     duplicate: string;
     themes: string;
     assets: string;
+    emails: string;
     folders: string;
     pages: string;
     menu: string;
@@ -192,6 +193,7 @@ export type Locale = {
     placeholder: string;
     empty: string;
     groupDocs: string;
+    groupEmails: string;
     groupFolders: string;
     groupNavigation: string;
     groupAppearance: string;
@@ -210,6 +212,28 @@ export type Locale = {
     system: string;
   };
 
+  emails: {
+    title: string;
+    noEmailsTitle: string;
+    noEmailsHintPrefix: string;
+    noEmailsHintSuffix: string;
+    subjectLabel: string;
+    noSubject: string;
+    openEmailAria: string;
+    backToEmails: string;
+    viewHtml: string;
+    viewText: string;
+    viewportDesktop: string;
+    viewportMobile: string;
+    copyHtml: string;
+    copiedHtml: string;
+    copyHtmlFailed: string;
+    reload: string;
+    openInTab: string;
+    notFound: string;
+    unresolvedCount: string;
+    unresolvedTitle: string;
+  };
   themes: {
     title: string;
     noThemesTitle: string;

package/src/locale/zh-cn.ts

@@ -23,6 +23,7 @@ export const zhCN: Locale = {
     duplicate: '复制',
     themes: '主题',
     assets: '素材',
+    emails: '邮件',
     folders: '頁面夹',
     pages: '幻灯片',
     menu: '菜单',
@@ -193,6 +194,7 @@ export const zhCN: Locale = {
     placeholder: '搜索幻灯片或执行命令…',
     empty: '没有匹配的结果。',
     groupDocs: '幻灯片',
+    groupEmails: '邮件',
     groupFolders: '頁面夹',
     groupNavigation: '前往',
     groupAppearance: '外观',
@@ -211,6 +213,29 @@ export const zhCN: Locale = {
     system: '系统',
   },
 
+  emails: {
+    title: '邮件',
+    noEmailsTitle: '还没有邮件',
+    noEmailsHintPrefix: '在你的代理中运行 ',
+    noEmailsHintSuffix: ' 即可在 emails/ 下创建一封。',
+    subjectLabel: '主题',
+    noSubject: '未设置主题',
+    openEmailAria: '打开邮件 {name}',
+    backToEmails: '返回邮件列表',
+    viewHtml: 'HTML',
+    viewText: '纯文本',
+    viewportDesktop: '桌面',
+    viewportMobile: '移动端',
+    copyHtml: '复制 HTML',
+    copiedHtml: '已复制 HTML',
+    copyHtmlFailed: '无法复制 HTML',
+    reload: '重新加载邮件',
+    openInTab: '在新标签页中单独打开渲染后的邮件',
+    notFound: '找不到邮件: {id}',
+    unresolvedCount: '{count} 个类未能编译',
+    unresolvedTitle:
+      '邮件编译器无法内联的 Tailwind 工具类 (请检查 components/email/email-theme.ts):',
+  },
   themes: {
     title: '主题',
     noThemesTitle: '尚无主题',

package/src/locale/zh-tw.ts

@@ -23,6 +23,7 @@ export const zhTW: Locale = {
     duplicate: '複製',
     themes: '主題',
     assets: '素材',
+    emails: '郵件',
     folders: '資料夾',
     pages: '投影片',
     menu: '選單',
@@ -193,6 +194,7 @@ export const zhTW: Locale = {
     placeholder: '搜尋簡報或執行指令…',
     empty: '沒有符合的結果。',
     groupDocs: '簡報',
+    groupEmails: '郵件',
     groupFolders: '資料夾',
     groupNavigation: '前往',
     groupAppearance: '外觀',
@@ -211,6 +213,29 @@ export const zhTW: Locale = {
     system: '系統',
   },
 
+  emails: {
+    title: '郵件',
+    noEmailsTitle: '還沒有郵件',
+    noEmailsHintPrefix: '在你的代理中執行 ',
+    noEmailsHintSuffix: ' 即可在 emails/ 下建立一封。',
+    subjectLabel: '主旨',
+    noSubject: '未設定主旨',
+    openEmailAria: '開啟郵件 {name}',
+    backToEmails: '返回郵件列表',
+    viewHtml: 'HTML',
+    viewText: '純文字',
+    viewportDesktop: '桌面',
+    viewportMobile: '行動裝置',
+    copyHtml: '複製 HTML',
+    copiedHtml: '已複製 HTML',
+    copyHtmlFailed: '無法複製 HTML',
+    reload: '重新載入郵件',
+    openInTab: '在新分頁中單獨開啟渲染後的郵件',
+    notFound: '找不到郵件: {id}',
+    unresolvedCount: '{count} 個類別未能編譯',
+    unresolvedTitle:
+      '郵件編譯器無法內聯的 Tailwind 工具類別 (請檢查 components/email/email-theme.ts):',
+  },
   themes: {
     title: '主題',
     noThemesTitle: '尚無主題',

package/workspace/components.json

@@ -21,5 +21,7 @@
   },
   "menuColor": "default",
   "menuAccent": "subtle",
-  "registries": {}
+  "registries": {
+    "@emailcn": "https://emailcn.run/r/{name}.json"
+  }
 }

package/workspace/styles/globals.css

@@ -10,9 +10,15 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-    --font-heading: var(--font-sans);
+/* Fonts are emitted as :root variables (not inlined) so a theme's own
+   :root block can swap them; inlined, Geist would be baked into every
+   font-* utility and themes could never change the typeface. */
+@theme {
     --font-sans: 'Geist Variable', sans-serif;
+    --font-heading: var(--font-sans);
+}
+
+@theme inline {
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);