@open-slide/core 1.4.0 → 1.5.0

package/src/app/routes/home.tsx

@@ -1,4 +1,7 @@
 import {
+  ArrowDownAZ,
+  ChevronDown,
+  Clock,
   FolderInput,
   FolderPlus,
   MoreHorizontal,
@@ -31,9 +34,38 @@ import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/folder-ite
 import { DRAFT_ID } from '../components/sidebar/sidebar';
 import { SlideCanvas } from '../components/slide-canvas';
 import type { Folder, FolderIcon, SlideModule } from '../lib/sdk';
-import { loadSlide } from '../lib/slides';
+import { loadSlide, slideCreatedAt } from '../lib/slides';
 import type { HomeOutletContext } from './home-shell';
 
+type SortKey = 'created-desc' | 'created-asc' | 'title-asc' | 'title-desc';
+
+const SORT_KEYS: readonly SortKey[] = ['created-desc', 'created-asc', 'title-asc', 'title-desc'];
+
+const DEFAULT_SORT: SortKey = 'created-desc';
+const SORT_STORAGE_KEY = 'open-slide:home-sort';
+
+function readSortPref(): SortKey {
+  if (typeof window === 'undefined') return DEFAULT_SORT;
+  try {
+    const raw = window.localStorage.getItem(SORT_STORAGE_KEY);
+    if (raw && (SORT_KEYS as readonly string[]).includes(raw)) return raw as SortKey;
+  } catch {}
+  return DEFAULT_SORT;
+}
+
+function useSortPref(): [SortKey, (next: SortKey) => void] {
+  const [sortKey, setSortKey] = useState<SortKey>(readSortPref);
+  const update = (next: SortKey) => {
+    setSortKey(next);
+    try {
+      window.localStorage.setItem(SORT_STORAGE_KEY, next);
+    } catch {}
+  };
+  return [sortKey, update];
+}
+
+const TITLE_COLLATOR = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+
 export function Home() {
   const {
     manifest,
@@ -58,6 +90,7 @@ export function Home() {
   const isDraft = selectedId === DRAFT_ID;
 
   const [query, setQuery] = useState('');
+  const [sortKey, setSortKey] = useSortPref();
 
   const trimmedQuery = query.trim().toLowerCase();
   const filteredSlides = useMemo(() => {
@@ -68,6 +101,24 @@ export function Home() {
       return tl ? tl.includes(trimmedQuery) : false;
     });
   }, [visibleSlides, titleMap, trimmedQuery]);
+  const sortedSlides = useMemo(() => {
+    const list = filteredSlides.slice();
+    const titleOf = (id: string) => titleMap[id] ?? id;
+    switch (sortKey) {
+      case 'title-asc':
+        list.sort((a, b) => TITLE_COLLATOR.compare(titleOf(a), titleOf(b)));
+        break;
+      case 'title-desc':
+        list.sort((a, b) => TITLE_COLLATOR.compare(titleOf(b), titleOf(a)));
+        break;
+      case 'created-asc':
+        list.sort((a, b) => (slideCreatedAt[a] ?? 0) - (slideCreatedAt[b] ?? 0));
+        break;
+      default:
+        list.sort((a, b) => (slideCreatedAt[b] ?? 0) - (slideCreatedAt[a] ?? 0));
+    }
+    return list;
+  }, [filteredSlides, sortKey, titleMap]);
   const isSearching = trimmedQuery.length > 0;
 
   return (
@@ -90,7 +141,8 @@ export function Home() {
               )}
             </span>
           )}
-          <div className="ml-auto w-full md:w-auto">
+          <div className="ml-auto flex w-full items-center gap-2 md:w-auto">
+            <SortControl value={sortKey} onChange={setSortKey} />
             <SearchInput value={query} onChange={setQuery} />
           </div>
         </div>
@@ -104,7 +156,7 @@ 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))]">
-          {filteredSlides.map((id) => (
+          {sortedSlides.map((id) => (
             <li key={id}>
               <SlideCard
                 id={id}
@@ -152,6 +204,52 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
   );
 }
 
+function SortControl({ value, onChange }: { value: SortKey; onChange: (next: SortKey) => void }) {
+  const t = useLocale();
+  const labels: Record<SortKey, string> = {
+    'created-desc': t.home.sortByCreatedDesc,
+    'created-asc': t.home.sortByCreatedAsc,
+    'title-asc': t.home.sortByTitleAsc,
+    'title-desc': t.home.sortByTitleDesc,
+  };
+  const FieldIcon = ({ k, className }: { k: SortKey; className?: string }) =>
+    k === 'title-asc' || k === 'title-desc' ? (
+      <ArrowDownAZ className={className} aria-hidden />
+    ) : (
+      <Clock className={className} aria-hidden />
+    );
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${t.home.sortLabel}: ${labels[value]}`}
+          className="flex h-8 items-center gap-1.5 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"
+        >
+          <FieldIcon k={value} className="size-3.5 text-muted-foreground" />
+          <span>{labels[value]}</span>
+          <ChevronDown className="size-3 text-muted-foreground" aria-hidden />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[180px]">
+        {SORT_KEYS.map((key) => {
+          const active = value === key;
+          return (
+            <DropdownMenuItem
+              key={key}
+              onSelect={() => onChange(key)}
+              className={cn(active && 'bg-muted text-foreground')}
+            >
+              <FieldIcon k={key} className="size-3.5 text-muted-foreground" />
+              <span>{labels[key]}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function HomeLoading() {
   const t = useLocale();
   return (

package/src/app/routes/slide.tsx

@@ -1,10 +1,12 @@
 import config from 'virtual:open-slide/config';
 import {
+  Check,
   ChevronDown,
   ChevronLeft,
   Download,
   FileCode2,
   FileText,
+  Link2,
   Loader2,
   Maximize,
   MonitorSpeaker,
@@ -61,7 +63,15 @@ export function Slide() {
   const { slide, error } = useSlideModule(slideId);
   const [playMode, setPlayMode] = useState<'window' | 'fullscreen' | null>(null);
   const [exporting, setExporting] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
+  const linkCopiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [designOpen, setDesignOpen] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (linkCopiedTimerRef.current) clearTimeout(linkCopiedTimerRef.current);
+    };
+  }, []);
   const { renameSlide } = useFolders();
   const slideViewportRef = useRef<HTMLElement>(null);
   const t = useLocale();
@@ -375,6 +385,41 @@ export function Slide() {
             </div>
 
             <div className="flex items-center gap-1">
+              {view === 'slides' && (
+                <button
+                  type="button"
+                  aria-label={t.slide.copyLink}
+                  title={t.slide.copyLink}
+                  className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }))}
+                  onClick={async () => {
+                    try {
+                      await navigator.clipboard.writeText(window.location.href);
+                      toast.success(t.slide.toastCopyLinkSuccess);
+                      setLinkCopied(true);
+                      if (linkCopiedTimerRef.current) clearTimeout(linkCopiedTimerRef.current);
+                      linkCopiedTimerRef.current = setTimeout(() => setLinkCopied(false), 1200);
+                    } catch (err) {
+                      console.error('[open-slide] copy link failed', err);
+                      toast.error(t.slide.toastCopyLinkFailed);
+                    }
+                  }}
+                >
+                  <span className="relative grid size-4 place-items-center">
+                    <Link2
+                      className={cn(
+                        'col-start-1 row-start-1 size-4 transition-opacity duration-200',
+                        linkCopied ? 'opacity-0' : 'opacity-100',
+                      )}
+                    />
+                    <Check
+                      className={cn(
+                        'col-start-1 row-start-1 size-4 transition-opacity duration-200',
+                        linkCopied ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                  </span>
+                </button>
+              )}
               {view === 'slides' && allowHtmlDownload && (
                 <DropdownMenu>
                   <DropdownMenuTrigger

package/src/app/virtual.d.ts

@@ -2,6 +2,7 @@ declare module 'virtual:open-slide/slides' {
   import type { SlideModule } from './lib/sdk';
   export const slideIds: string[];
   export const slideThemes: Record<string, string>;
+  export const slideCreatedAt: Record<string, number>;
   export function loadSlide(id: string): Promise<SlideModule>;
 }
 

package/src/locale/en.ts

@@ -49,6 +49,11 @@ export const en: Locale = {
     folderActions: 'Folder actions',
     searchPlaceholder: 'Search slides',
     clearSearch: 'Clear search',
+    sortLabel: 'Sort',
+    sortByCreatedDesc: 'Newest',
+    sortByCreatedAsc: 'Oldest',
+    sortByTitleAsc: 'A–Z',
+    sortByTitleDesc: 'Z–A',
     noMatches: 'No matches',
     nothingMatchesPrefix: 'Nothing matches ',
     nothingMatchesSuffix: ' in this folder.',
@@ -91,6 +96,9 @@ export const en: Locale = {
     agentDisconnectedTooltip:
       'Lost connection to the dev server, so your agent can no longer see the current slide or inspector selection. Restart the dev server to restore the connection.',
     download: 'Download',
+    copyLink: 'Copy link',
+    toastCopyLinkSuccess: 'Link copied to clipboard',
+    toastCopyLinkFailed: 'Failed to copy link',
     exportAsHtml: 'Export as HTML',
     exportAsPdf: 'Export as PDF',
     pdfExportFailed: 'PDF export failed',
@@ -214,7 +222,7 @@ export const en: Locale = {
     cropResetAria: 'Reset crop',
     leaveComment: 'Leave a comment',
     commentPlaceholder: 'Describe a change for the agent…',
-    commentShortcutHint: '⌘↵ to add',
+    commentShortcutHint: '⌘/ to focus · ⌘↵ to add',
     addComment: 'Add comment',
     unsavedChanges: {
       one: '{count} unsaved change',
@@ -281,6 +289,11 @@ export const en: Locale = {
     conflictRenameCopy: 'Rename copy',
     deleteAssetTitle: 'Delete asset',
     deleteAssetDescription: 'Delete {name}? Imports referencing this file in the slide will break.',
+    deleteAssetInUseDescription: '{name} is used in {count} place(s) across {slides} slide(s).',
+    deleteAssetInUseHint: 'Deleting will revert these usages back to image placeholders.',
+    deleteAndRevert: 'Delete & revert',
+    toastRevertFailed: "Couldn't revert usage in {slideId}",
+    toastDeletedWithRevert: 'Deleted {name} and reverted {count} usage(s)',
     noPreview: 'No preview available',
     importHintComment: 'import asset from ',
     importHintSemi: ';',

package/src/locale/ja.ts

@@ -49,6 +49,11 @@ export const ja: Locale = {
     folderActions: 'フォルダ操作',
     searchPlaceholder: 'スライドを検索',
     clearSearch: '検索をクリア',
+    sortLabel: '並べ替え',
+    sortByCreatedDesc: '新しい順',
+    sortByCreatedAsc: '古い順',
+    sortByTitleAsc: 'A–Z',
+    sortByTitleDesc: 'Z–A',
     noMatches: '一致なし',
     nothingMatchesPrefix: 'このフォルダ内に ',
     nothingMatchesSuffix: ' に一致する項目はありません。',
@@ -91,6 +96,9 @@ export const ja: Locale = {
     home: 'ホーム',
     backToHome: 'ホームへ戻る',
     download: 'ダウンロード',
+    copyLink: 'リンクをコピー',
+    toastCopyLinkSuccess: 'リンクをクリップボードにコピーしました',
+    toastCopyLinkFailed: 'リンクのコピーに失敗しました',
     exportAsHtml: 'HTML として書き出し',
     exportAsPdf: 'PDF として書き出し',
     pdfExportFailed: 'PDF の書き出しに失敗しました',
@@ -215,7 +223,7 @@ export const ja: Locale = {
       'dev server との接続が切れたため、選択中の要素がエージェントに見えなくなっています。dev server を再起動して接続を復旧してください。',
     leaveComment: 'コメントを残す',
     commentPlaceholder: 'エージェントに依頼する変更を記述…',
-    commentShortcutHint: '⌘↵ で追加',
+    commentShortcutHint: '⌘/ でフォーカス · ⌘↵ で追加',
     addComment: 'コメントを追加',
     unsavedChanges: {
       one: '未保存の変更 {count} 件',
@@ -284,6 +292,11 @@ export const ja: Locale = {
     deleteAssetTitle: 'アセットを削除',
     deleteAssetDescription:
       '{name} を削除しますか?スライド内でこのファイルを参照しているインポートは壊れます。',
+    deleteAssetInUseDescription: '{name} は {slides} 枚のスライドで {count} 箇所使用されています。',
+    deleteAssetInUseHint: '削除すると、これらの使用箇所は画像プレースホルダーに戻ります。',
+    deleteAndRevert: '削除して戻す',
+    toastRevertFailed: '{slideId} の使用箇所を戻せませんでした',
+    toastDeletedWithRevert: '{name} を削除し、{count} 箇所をプレースホルダーに戻しました',
     noPreview: 'プレビューはありません',
     importHintComment: 'import asset from ',
     importHintSemi: ';',

package/src/locale/types.ts

@@ -49,6 +49,11 @@ export type Locale = {
     folderActions: string;
     searchPlaceholder: string;
     clearSearch: string;
+    sortLabel: string;
+    sortByCreatedDesc: string;
+    sortByCreatedAsc: string;
+    sortByTitleAsc: string;
+    sortByTitleDesc: string;
     noMatches: string;
     nothingMatchesPrefix: string;
     nothingMatchesSuffix: string;
@@ -92,6 +97,9 @@ export type Locale = {
     agentDisconnected: string;
     agentDisconnectedTooltip: string;
     download: string;
+    copyLink: string;
+    toastCopyLinkSuccess: string;
+    toastCopyLinkFailed: string;
     exportAsHtml: string;
     exportAsPdf: string;
     pdfExportFailed: string;
@@ -286,6 +294,14 @@ export type Locale = {
     deleteAssetTitle: string;
     /** template: "Delete {name}? Imports referencing this file in the slide will break." */
     deleteAssetDescription: string;
+    /** template: "{name} is used in {count} place across {slides} slide." (singular/plural via {count}/{slides}) */
+    deleteAssetInUseDescription: string;
+    deleteAssetInUseHint: string;
+    deleteAndRevert: string;
+    /** template: "Couldn't revert usage in {slideId}." */
+    toastRevertFailed: string;
+    /** template: "Deleted {name} and reverted {count} usage." */
+    toastDeletedWithRevert: string;
     noPreview: string;
     importHintComment: string;
     importHintSemi: string;

package/src/locale/zh-cn.ts

@@ -49,6 +49,11 @@ export const zhCN: Locale = {
     folderActions: '文件夹操作',
     searchPlaceholder: '搜索幻灯片',
     clearSearch: '清除搜索',
+    sortLabel: '排序',
+    sortByCreatedDesc: '最新',
+    sortByCreatedAsc: '最旧',
+    sortByTitleAsc: 'A–Z',
+    sortByTitleDesc: 'Z–A',
     noMatches: '没有匹配项',
     nothingMatchesPrefix: '该文件夹中没有匹配 ',
     nothingMatchesSuffix: ' 的内容。',
@@ -90,6 +95,9 @@ export const zhCN: Locale = {
     home: '首页',
     backToHome: '返回首页',
     download: '下载',
+    copyLink: '复制链接',
+    toastCopyLinkSuccess: '已复制链接到剪贴板',
+    toastCopyLinkFailed: '复制链接失败',
     exportAsHtml: '导出为 HTML',
     exportAsPdf: '导出为 PDF',
     pdfExportFailed: 'PDF 导出失败',
@@ -213,7 +221,7 @@ export const zhCN: Locale = {
       '已和 dev server 断开连接，agent 看不到你选的元素了。请重新启动 dev server 来恢复连接。',
     leaveComment: '留个 comment',
     commentPlaceholder: '描述你希望代理执行的更改…',
-    commentShortcutHint: '⌘↵ 添加',
+    commentShortcutHint: '⌘/ 聚焦 · ⌘↵ 添加',
     addComment: '添加 comment',
     unsavedChanges: {
       one: '{count} 项未保存的更改',
@@ -280,6 +288,11 @@ export const zhCN: Locale = {
     conflictRenameCopy: '重命名副本',
     deleteAssetTitle: '删除素材',
     deleteAssetDescription: '要删除 {name} 吗?幻灯片中引用此文件的导入将失效。',
+    deleteAssetInUseDescription: '{name} 在 {slides} 个幻灯片中被使用了 {count} 次。',
+    deleteAssetInUseHint: '删除后这些使用处会自动还原为图片占位符。',
+    deleteAndRevert: '删除并还原',
+    toastRevertFailed: '无法还原 {slideId} 中的使用',
+    toastDeletedWithRevert: '已删除 {name} 并还原 {count} 个使用处',
     noPreview: '无预览',
     importHintComment: 'import asset from ',
     importHintSemi: ';',

package/src/locale/zh-tw.ts

@@ -49,6 +49,11 @@ export const zhTW: Locale = {
     folderActions: '資料夾操作',
     searchPlaceholder: '搜尋投影片',
     clearSearch: '清除搜尋',
+    sortLabel: '排序',
+    sortByCreatedDesc: '最新',
+    sortByCreatedAsc: '最舊',
+    sortByTitleAsc: 'A–Z',
+    sortByTitleDesc: 'Z–A',
     noMatches: '沒有相符結果',
     nothingMatchesPrefix: '此資料夾中沒有相符 ',
     nothingMatchesSuffix: ' 的項目。',
@@ -90,6 +95,9 @@ export const zhTW: Locale = {
     home: '首頁',
     backToHome: '返回首頁',
     download: '下載',
+    copyLink: '複製連結',
+    toastCopyLinkSuccess: '已複製連結到剪貼簿',
+    toastCopyLinkFailed: '複製連結失敗',
     exportAsHtml: '匯出為 HTML',
     exportAsPdf: '匯出為 PDF',
     pdfExportFailed: 'PDF 匯出失敗',
@@ -213,7 +221,7 @@ export const zhTW: Locale = {
       '已和 dev server 斷線，agent 看不到你選的元素了。請重新啟動 dev server 來恢復連線。',
     leaveComment: '留個 comment',
     commentPlaceholder: '描述你希望代理進行的修改…',
-    commentShortcutHint: '⌘↵ 新增',
+    commentShortcutHint: '⌘/ 聚焦 · ⌘↵ 新增',
     addComment: '新增 comment',
     unsavedChanges: {
       one: '{count} 項未儲存的變更',
@@ -280,6 +288,11 @@ export const zhTW: Locale = {
     conflictRenameCopy: '重新命名副本',
     deleteAssetTitle: '刪除素材',
     deleteAssetDescription: '要刪除 {name} 嗎?投影片中引用此檔案的匯入將失效。',
+    deleteAssetInUseDescription: '{name} 在 {slides} 個投影片中被使用了 {count} 次。',
+    deleteAssetInUseHint: '刪除後這些使用處會自動還原為圖片占位符。',
+    deleteAndRevert: '刪除並還原',
+    toastRevertFailed: '無法還原 {slideId} 中的使用',
+    toastDeletedWithRevert: '已刪除 {name} 並還原 {count} 個使用處',
     noPreview: '無預覽',
     importHintComment: 'import asset from ',
     importHintSemi: ';',