@autono/open-pages 0.8.0 → 0.9.0

package/src/app/routes/page.tsx

@@ -4,16 +4,15 @@ 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 { 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';
@@ -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);
@@ -296,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);