@open-slide/core 1.4.0 → 1.6.0

package/dist/{dev-0W8gYiSa.js → dev-DpCIRbhT.js}

@@ -1,5 +1,5 @@
 import "./design-cpzS8aud.js";
-import { createViteConfig } from "./config-XZJnC_fu.js";
+import { createViteConfig } from "./config-PwUHqZ_X.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/{en-7GU-DHbJ.js → en-BDnM5zKJ.js}

@@ -34,6 +34,7 @@ const en = {
 	home: {
 		appTitle: "open-slide",
 		draft: "Draft",
+		duplicate: "Duplicate",
 		themes: "Themes",
 		assets: "Assets",
 		folders: "Folders",
@@ -45,6 +46,11 @@ const en = {
 		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.",
@@ -70,6 +76,8 @@ const en = {
 		deleteDialogDescriptionSuffix: "This action cannot be undone.",
 		toastFolderCreated: "Created folder “{name}”",
 		toastFolderCreateFailed: "Failed to create folder",
+		toastSlideDuplicated: "Duplicated “{slide}” as {newSlide}",
+		toastSlideDuplicateFailed: "Could not duplicate slide",
 		toastSlideMoved: "Moved “{slide}” to {folder}",
 		toastSlideMoveFailed: "Failed to move slide",
 		toastFolderDeleted: "Deleted folder “{name}”",
@@ -84,6 +92,9 @@ const en = {
 		agentDisconnected: "Agent disconnected",
 		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",
@@ -202,7 +213,7 @@ const en = {
 		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",
@@ -251,6 +262,7 @@ const en = {
 			one: "{count} file",
 			other: "{count} files"
 		},
+		usageUnused: "Unused",
 		searchLogos: "Search logos",
 		upload: "Upload",
 		dropToUpload: "Drop to upload",
@@ -270,6 +282,11 @@ const en = {
 		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/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Locale, Plural } from "./types-QCpkHkiS.js";
-import { OpenSlideConfig } from "./config-s0YUbmUe.js";
+import { Locale, Plural } from "./types-B-KrjgX8.js";
+import { OpenSlideConfig } from "./config-CfMThYN9.js";
 import { CSSProperties, ComponentType, HTMLAttributes } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -45,12 +45,21 @@ declare function designToCssVars(d: DesignSystem): Record<string, string>;
 declare function cssVarsToString(vars: Record<string, string>): string;
 declare const defaultDesign: DesignSystem;
 
+//#endregion
+//#region src/app/lib/page-context.d.ts
+declare function useSlidePageNumber(): {
+  current: number;
+  total: number;
+};
+
 //#endregion
 //#region src/app/lib/sdk.d.ts
 type Page = ComponentType;
 type SlideMeta = {
   title?: string;
   theme?: string;
+  /** ISO 8601 timestamp. Set once at scaffold time; used to sort the slide list. */
+  createdAt?: string;
 };
 type SlideModule = {
   default: Page[];
@@ -62,4 +71,4 @@ declare const CANVAS_WIDTH = 1920;
 declare const CANVAS_HEIGHT = 1080;
 
 //#endregion
-export { CANVAS_HEIGHT, CANVAS_WIDTH, DesignFonts, DesignPalette, DesignSystem, DesignTypeScale, ImagePlaceholder, ImagePlaceholderProps, Locale, OpenSlideConfig, Page, Plural, SlideMeta, SlideModule, cssVarsToString, defaultDesign, designToCssVars };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, DesignFonts, DesignPalette, DesignSystem, DesignTypeScale, ImagePlaceholder, ImagePlaceholderProps, Locale, OpenSlideConfig, Page, Plural, SlideMeta, SlideModule, cssVarsToString, defaultDesign, designToCssVars, useSlidePageNumber };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { en } from "./en-7GU-DHbJ.js";
+import { en } from "./en-BDnM5zKJ.js";
 import { cssVarsToString, defaultDesign, designToCssVars } from "./design-cpzS8aud.js";
-import { useRef, useState } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 import { toast } from "sonner";
 import config from "virtual:open-slide/config";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,7 +43,8 @@ async function uploadWithAutoRename(slideId, file) {
 		size: body?.size ?? uploaded.size,
 		mtime: body?.mtime ?? Date.now(),
 		mime: body?.mime ?? uploaded.type ?? "application/octet-stream",
-		url: body?.url ?? `/__assets/${slideId}/${encodeURIComponent(uploaded.name)}`
+		url: body?.url ?? `/__assets/${slideId}/${encodeURIComponent(uploaded.name)}`,
+		unused: body?.unused ?? false
 	};
 	return {
 		ok: true,
@@ -296,10 +297,25 @@ function PlaceholderIcon() {
 	});
 }
 
+//#endregion
+//#region src/app/lib/page-context.tsx
+const GLOBAL_KEY = "__open_slide_page_context__";
+const g = globalThis;
+if (!g[GLOBAL_KEY]) g[GLOBAL_KEY] = createContext(null);
+const SlidePageContext = g[GLOBAL_KEY];
+function useSlidePageNumber() {
+	const ctx = useContext(SlidePageContext);
+	if (!ctx) throw new Error("useSlidePageNumber must be called from a slide page rendered by @open-slide/core");
+	return {
+		current: ctx.index + 1,
+		total: ctx.total
+	};
+}
+
 //#endregion
 //#region src/app/lib/sdk.ts
 const CANVAS_WIDTH = 1920;
 const CANVAS_HEIGHT = 1080;
 
 //#endregion
-export { CANVAS_HEIGHT, CANVAS_WIDTH, ImagePlaceholder, cssVarsToString, defaultDesign, designToCssVars };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, ImagePlaceholder, cssVarsToString, defaultDesign, designToCssVars, useSlidePageNumber };

package/dist/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { Locale, Plural } from "../types-QCpkHkiS.js";
+import { Locale, Plural } from "../types-B-KrjgX8.js";
 
 //#region src/locale/en.d.ts
 declare const en: Locale;

package/dist/locale/index.js

@@ -1,4 +1,4 @@
-import { en } from "../en-7GU-DHbJ.js";
+import { en } from "../en-BDnM5zKJ.js";
 
 //#region src/locale/format.ts
 function format(template, vars) {
@@ -48,6 +48,7 @@ const ja = {
 	home: {
 		appTitle: "open-slide",
 		draft: "下書き",
+		duplicate: "複製",
 		themes: "テーマ",
 		assets: "アセット",
 		folders: "フォルダ",
@@ -59,6 +60,11 @@ const ja = {
 		folderActions: "フォルダ操作",
 		searchPlaceholder: "スライドを検索",
 		clearSearch: "検索をクリア",
+		sortLabel: "並べ替え",
+		sortByCreatedDesc: "新しい順",
+		sortByCreatedAsc: "古い順",
+		sortByTitleAsc: "A–Z",
+		sortByTitleDesc: "Z–A",
 		noMatches: "一致なし",
 		nothingMatchesPrefix: "このフォルダ内に ",
 		nothingMatchesSuffix: " に一致する項目はありません。",
@@ -84,6 +90,8 @@ const ja = {
 		deleteDialogDescriptionSuffix: "この操作は元に戻せません。",
 		toastFolderCreated: "フォルダ「{name}」を作成しました",
 		toastFolderCreateFailed: "フォルダの作成に失敗しました",
+		toastSlideDuplicated: "「{slide}」を {newSlide} として複製しました",
+		toastSlideDuplicateFailed: "スライドを複製できませんでした",
 		toastSlideMoved: "「{slide}」を {folder} に移動しました",
 		toastSlideMoveFailed: "スライドの移動に失敗しました",
 		toastFolderDeleted: "フォルダ「{name}」を削除しました",
@@ -98,6 +106,9 @@ const ja = {
 		home: "ホーム",
 		backToHome: "ホームへ戻る",
 		download: "ダウンロード",
+		copyLink: "リンクをコピー",
+		toastCopyLinkSuccess: "リンクをクリップボードにコピーしました",
+		toastCopyLinkFailed: "リンクのコピーに失敗しました",
 		exportAsHtml: "HTML として書き出し",
 		exportAsPdf: "PDF として書き出し",
 		pdfExportFailed: "PDF の書き出しに失敗しました",
@@ -216,7 +227,7 @@ const ja = {
 		agentNotWatchingTooltip: "dev server との接続が切れたため、選択中の要素がエージェントに見えなくなっています。dev server を再起動して接続を復旧してください。",
 		leaveComment: "コメントを残す",
 		commentPlaceholder: "エージェントに依頼する変更を記述…",
-		commentShortcutHint: "⌘↵ で追加",
+		commentShortcutHint: "⌘/ でフォーカス · ⌘↵ で追加",
 		addComment: "コメントを追加",
 		unsavedChanges: {
 			one: "未保存の変更 {count} 件",
@@ -265,6 +276,7 @@ const ja = {
 			one: "ファイル {count} 件",
 			other: "ファイル {count} 件"
 		},
+		usageUnused: "未使用",
 		searchLogos: "ロゴを検索",
 		upload: "アップロード",
 		dropToUpload: "ドロップでアップロード",
@@ -284,6 +296,11 @@ const ja = {
 		conflictRenameCopy: "コピーをリネーム",
 		deleteAssetTitle: "アセットを削除",
 		deleteAssetDescription: "{name} を削除しますか?スライド内でこのファイルを参照しているインポートは壊れます。",
+		deleteAssetInUseDescription: "{name} は {slides} 枚のスライドで {count} 箇所使用されています。",
+		deleteAssetInUseHint: "削除すると、これらの使用箇所は画像プレースホルダーに戻ります。",
+		deleteAndRevert: "削除して戻す",
+		toastRevertFailed: "{slideId} の使用箇所を戻せませんでした",
+		toastDeletedWithRevert: "{name} を削除し、{count} 箇所をプレースホルダーに戻しました",
 		noPreview: "プレビューはありません",
 		importHintComment: "import asset from ",
 		importHintSemi: ";",
@@ -408,6 +425,7 @@ const zhCN = {
 	home: {
 		appTitle: "open-slide",
 		draft: "草稿",
+		duplicate: "复制",
 		themes: "主题",
 		assets: "素材",
 		folders: "文件夹",
@@ -419,6 +437,11 @@ const zhCN = {
 		folderActions: "文件夹操作",
 		searchPlaceholder: "搜索幻灯片",
 		clearSearch: "清除搜索",
+		sortLabel: "排序",
+		sortByCreatedDesc: "最新",
+		sortByCreatedAsc: "最旧",
+		sortByTitleAsc: "A–Z",
+		sortByTitleDesc: "Z–A",
 		noMatches: "没有匹配项",
 		nothingMatchesPrefix: "该文件夹中没有匹配 ",
 		nothingMatchesSuffix: " 的内容。",
@@ -444,6 +467,8 @@ const zhCN = {
 		deleteDialogDescriptionSuffix: "此操作无法撤销。",
 		toastFolderCreated: "已创建文件夹\"{name}\"",
 		toastFolderCreateFailed: "创建文件夹失败",
+		toastSlideDuplicated: "已将\"{slide}\"复制为 {newSlide}",
+		toastSlideDuplicateFailed: "无法复制幻灯片",
 		toastSlideMoved: "已将\"{slide}\"移至 {folder}",
 		toastSlideMoveFailed: "移动幻灯片失败",
 		toastFolderDeleted: "已删除文件夹\"{name}\"",
@@ -458,6 +483,9 @@ const zhCN = {
 		home: "首页",
 		backToHome: "返回首页",
 		download: "下载",
+		copyLink: "复制链接",
+		toastCopyLinkSuccess: "已复制链接到剪贴板",
+		toastCopyLinkFailed: "复制链接失败",
 		exportAsHtml: "导出为 HTML",
 		exportAsPdf: "导出为 PDF",
 		pdfExportFailed: "PDF 导出失败",
@@ -576,7 +604,7 @@ const zhCN = {
 		agentNotWatchingTooltip: "已和 dev server 断开连接，agent 看不到你选的元素了。请重新启动 dev server 来恢复连接。",
 		leaveComment: "留个 comment",
 		commentPlaceholder: "描述你希望代理执行的更改…",
-		commentShortcutHint: "⌘↵ 添加",
+		commentShortcutHint: "⌘/ 聚焦 · ⌘↵ 添加",
 		addComment: "添加 comment",
 		unsavedChanges: {
 			one: "{count} 项未保存的更改",
@@ -625,6 +653,7 @@ const zhCN = {
 			one: "{count} 个文件",
 			other: "{count} 个文件"
 		},
+		usageUnused: "未使用",
 		searchLogos: "搜索 Logo",
 		upload: "上传",
 		dropToUpload: "拖入即可上传",
@@ -644,6 +673,11 @@ const zhCN = {
 		conflictRenameCopy: "重命名副本",
 		deleteAssetTitle: "删除素材",
 		deleteAssetDescription: "要删除 {name} 吗?幻灯片中引用此文件的导入将失效。",
+		deleteAssetInUseDescription: "{name} 在 {slides} 个幻灯片中被使用了 {count} 次。",
+		deleteAssetInUseHint: "删除后这些使用处会自动还原为图片占位符。",
+		deleteAndRevert: "删除并还原",
+		toastRevertFailed: "无法还原 {slideId} 中的使用",
+		toastDeletedWithRevert: "已删除 {name} 并还原 {count} 个使用处",
 		noPreview: "无预览",
 		importHintComment: "import asset from ",
 		importHintSemi: ";",
@@ -768,6 +802,7 @@ const zhTW = {
 	home: {
 		appTitle: "open-slide",
 		draft: "草稿",
+		duplicate: "複製",
 		themes: "主題",
 		assets: "素材",
 		folders: "資料夾",
@@ -779,6 +814,11 @@ const zhTW = {
 		folderActions: "資料夾操作",
 		searchPlaceholder: "搜尋投影片",
 		clearSearch: "清除搜尋",
+		sortLabel: "排序",
+		sortByCreatedDesc: "最新",
+		sortByCreatedAsc: "最舊",
+		sortByTitleAsc: "A–Z",
+		sortByTitleDesc: "Z–A",
 		noMatches: "沒有相符結果",
 		nothingMatchesPrefix: "此資料夾中沒有相符 ",
 		nothingMatchesSuffix: " 的項目。",
@@ -804,6 +844,8 @@ const zhTW = {
 		deleteDialogDescriptionSuffix: "此操作無法復原。",
 		toastFolderCreated: "已建立資料夾「{name}」",
 		toastFolderCreateFailed: "建立資料夾失敗",
+		toastSlideDuplicated: "已將「{slide}」複製為 {newSlide}",
+		toastSlideDuplicateFailed: "無法複製投影片",
 		toastSlideMoved: "已將「{slide}」移至 {folder}",
 		toastSlideMoveFailed: "移動投影片失敗",
 		toastFolderDeleted: "已刪除資料夾「{name}」",
@@ -818,6 +860,9 @@ const zhTW = {
 		home: "首頁",
 		backToHome: "返回首頁",
 		download: "下載",
+		copyLink: "複製連結",
+		toastCopyLinkSuccess: "已複製連結到剪貼簿",
+		toastCopyLinkFailed: "複製連結失敗",
 		exportAsHtml: "匯出為 HTML",
 		exportAsPdf: "匯出為 PDF",
 		pdfExportFailed: "PDF 匯出失敗",
@@ -936,7 +981,7 @@ const zhTW = {
 		agentNotWatchingTooltip: "已和 dev server 斷線，agent 看不到你選的元素了。請重新啟動 dev server 來恢復連線。",
 		leaveComment: "留個 comment",
 		commentPlaceholder: "描述你希望代理進行的修改…",
-		commentShortcutHint: "⌘↵ 新增",
+		commentShortcutHint: "⌘/ 聚焦 · ⌘↵ 新增",
 		addComment: "新增 comment",
 		unsavedChanges: {
 			one: "{count} 項未儲存的變更",
@@ -985,6 +1030,7 @@ const zhTW = {
 			one: "{count} 個檔案",
 			other: "{count} 個檔案"
 		},
+		usageUnused: "未使用",
 		searchLogos: "搜尋 Logo",
 		upload: "上傳",
 		dropToUpload: "拖入即可上傳",
@@ -1004,6 +1050,11 @@ const zhTW = {
 		conflictRenameCopy: "重新命名副本",
 		deleteAssetTitle: "刪除素材",
 		deleteAssetDescription: "要刪除 {name} 嗎?投影片中引用此檔案的匯入將失效。",
+		deleteAssetInUseDescription: "{name} 在 {slides} 個投影片中被使用了 {count} 次。",
+		deleteAssetInUseHint: "刪除後這些使用處會自動還原為圖片占位符。",
+		deleteAndRevert: "刪除並還原",
+		toastRevertFailed: "無法還原 {slideId} 中的使用",
+		toastDeletedWithRevert: "已刪除 {name} 並還原 {count} 個使用處",
 		noPreview: "無預覽",
 		importHintComment: "import asset from ",
 		importHintSemi: ";",

package/dist/{preview-DT9hJvzM.js → preview-BSGlM6Se.js}

@@ -1,5 +1,5 @@
 import "./design-cpzS8aud.js";
-import { createViteConfig } from "./config-XZJnC_fu.js";
+import { createViteConfig } from "./config-PwUHqZ_X.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/{types-QCpkHkiS.d.ts → types-B-KrjgX8.d.ts}

@@ -38,6 +38,7 @@ type Locale = {
   home: {
     appTitle: string;
     draft: string;
+    duplicate: string;
     themes: string;
     assets: string;
     folders: string;
@@ -49,6 +50,11 @@ type Locale = {
     folderActions: string;
     searchPlaceholder: string;
     clearSearch: string;
+    sortLabel: string;
+    sortByCreatedDesc: string;
+    sortByCreatedAsc: string;
+    sortByTitleAsc: string;
+    sortByTitleDesc: string;
     noMatches: string;
     nothingMatchesPrefix: string;
     nothingMatchesSuffix: string;
@@ -75,6 +81,9 @@ type Locale = {
     /** template: "Created folder “{name}”" */
     toastFolderCreated: string;
     toastFolderCreateFailed: string;
+    /** template: "Duplicated “{slide}” as {newSlide}" */
+    toastSlideDuplicated: string;
+    toastSlideDuplicateFailed: string;
     /** template: "Moved “{slide}” to {folder}" */
     toastSlideMoved: string;
     toastSlideMoveFailed: string;
@@ -91,6 +100,9 @@ type Locale = {
     agentDisconnected: string;
     agentDisconnectedTooltip: string;
     download: string;
+    copyLink: string;
+    toastCopyLinkSuccess: string;
+    toastCopyLinkFailed: string;
     exportAsHtml: string;
     exportAsPdf: string;
     pdfExportFailed: string;
@@ -257,6 +269,7 @@ type Locale = {
     scopeGlobal: string;
     /** templates: "{count} file" / "{count} files" */
     fileCount: Plural;
+    usageUnused: string;
     searchLogos: string;
     upload: string;
     dropToUpload: string;
@@ -280,6 +293,14 @@ 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/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-QCpkHkiS.js";
-import { OpenSlideConfig } from "../config-s0YUbmUe.js";
+import "../types-B-KrjgX8.js";
+import { OpenSlideConfig } from "../config-CfMThYN9.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

@@ -1,4 +1,4 @@
 import "../design-cpzS8aud.js";
-import { createViteConfig } from "../config-XZJnC_fu.js";
+import { createViteConfig } from "../config-PwUHqZ_X.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/skills/create-theme/SKILL.md

@@ -105,24 +105,31 @@ const Title = ({ children }: { children: React.ReactNode }) => (
 
 ### Footer
 
+Pull the page number from `useSlidePageNumber()` — never hardcode `pageNum` / `total` props.
+
 ```tsx
-const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => (
-  <div
-    style={{
-      position: 'absolute',
-      left: 120,
-      right: 120,
-      bottom: 60,
-      display: 'flex',
-      justifyContent: 'space-between',
-      fontSize: 24,
-      color: '#94a3b8',
-    }}
-  >
-    <span>EDITORIAL NOIR · 2026</span>
-    <span>{pageNum} / {total}</span>
-  </div>
-);
+import { useSlidePageNumber } from '@open-slide/core';
+
+const Footer = () => {
+  const { current, total } = useSlidePageNumber();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 120,
+        right: 120,
+        bottom: 60,
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: 24,
+        color: '#94a3b8',
+      }}
+    >
+      <span>EDITORIAL NOIR · 2026</span>
+      <span>{current} / {total}</span>
+    </div>
+  );
+};
 ```
 
 ### Eyebrow / accents (optional)
@@ -161,7 +168,7 @@ const Cover: Page = () => (
     <p style={{ fontSize: 36, color: '#94a3b8', maxWidth: 1200, marginTop: 32 }}>
       A short subtitle that explains what this slide is about.
     </p>
-    <Footer pageNum={1} total={5} />
+    <Footer />
   </div>
 );
 ```
@@ -173,7 +180,7 @@ The demo is a normal slide module — same shape as `slides/<id>/index.tsx`, jus
 
 Contract:
 
-- `import type { Page } from '@open-slide/core';`
+- `import { type Page, useSlidePageNumber } from '@open-slide/core';`
 - Inline the **same** `Title`, `Footer`, `Eyebrow` components defined in the theme markdown — verbatim, no abstractions, no imports from elsewhere. The demo and the markdown must stay in lockstep so what the user sees in the panel matches what `create-slide` will paste into a real slide.
 - Export 2–3 `Page` components and a default array. Aim for: a Cover (Eyebrow + Title + subtitle), one Content page exercising body type + accent, and a Closer or "End" card. The "Example usage" block at the bottom of the markdown is a good starting point — extend it.
 - If the theme has runtime-tweakable tokens worth surfacing in the Design panel later, also `export const design: DesignSystem = {...}`.
@@ -182,14 +189,15 @@ Contract:
 Skeleton:
 
 ```tsx
-import type { Page } from '@open-slide/core';
+import { type Page, useSlidePageNumber } from '@open-slide/core';
 
 const Title = ({ children }: { children: React.ReactNode }) => (
   // …same JSX as in themes/<id>.md
 );
-const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => (
+const Footer = () => {
+  const { current, total } = useSlidePageNumber();
   // …
-);
+};
 const Eyebrow = ({ children }: { children: React.ReactNode }) => (
   // …
 );

package/skills/slide-authoring/SKILL.md

@@ -31,7 +31,10 @@ import type { Page, SlideMeta } from '@open-slide/core';
 const Cover: Page = () => <div>…</div>;
 const Body: Page = () => <div>…</div>;
 
-export const meta: SlideMeta = { title: 'My slide' };
+export const meta: SlideMeta = {
+  title: 'My slide',
+  createdAt: '2026-05-16T12:00:00Z',
+};
 export default [Cover, Body] satisfies Page[];
 ```
 
@@ -39,6 +42,7 @@ export default [Cover, Body] satisfies Page[];
 - `meta.title` (optional) shows in the slide header. Default is the folder name.
 - The slide id is the kebab-case folder name. Pick something short and descriptive (`q2-roadmap`, `team-offsite-2026`).
 - `meta.theme` (optional) marks the slide as built from a theme under `themes/`. The id must match a `<id>.md` basename. Surfaces a back-link chip on the slide card and lists the slide on `/themes/<id>`. Omit if the slide isn't derived from a registered theme.
+- `meta.createdAt` is an **ISO 8601 string literal** (e.g. `'2026-05-16T12:00:00Z'`) set once when the slide is scaffolded. The home page uses it for the default "newest first" sort. Always include it on new slides — **immediately before writing the file, run `node -e "console.log(new Date().toISOString())"` via Bash and paste the exact output** as the value. Don't type a timestamp from memory — you will get the date or time wrong. Must be a plain string literal (no `new Date(...)` or imports in the slide itself) — the framework reads it via a regex at build time, not by evaluating the module.
 
 ## Editing an existing slide
 
@@ -236,7 +240,10 @@ const Content: Page = () => (
   </div>
 );
 
-export const meta: SlideMeta = { title: 'The Big Idea' };
+export const meta: SlideMeta = {
+  title: 'The Big Idea',
+  createdAt: '2026-05-16T12:00:00Z',
+};
 export default [Cover, Content] satisfies Page[];
 ```
 
@@ -284,6 +291,23 @@ The user uploads the real file via the Assets panel, then clicks the placeholder
 
 Size the placeholder to the slot it occupies. Pass `width`/`height` when the layout has a fixed image box; omit them when the placeholder fills a flex/grid cell. The `hint` should describe the *content* the user needs ("Q3 revenue chart") not the *role* ("hero image").
 
+## Page numbers
+
+If a footer shows the current page (`03 / 12`, `Page 3`, etc.), read it from `useSlidePageNumber()` — **never hardcode** `n` / `TOTAL`. Inserting, reordering, or deleting a page would otherwise force you to retouch every footer.
+
+```tsx
+import { useSlidePageNumber } from '@open-slide/core';
+
+const Footer = () => {
+  const { current, total } = useSlidePageNumber();
+  return (
+    <span>{String(current).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
+  );
+};
+```
+
+`current` is 1-indexed (matches what readers see) and `total` is the slide's page count. The hook works in every render context (main viewer, thumbnails, overview grid, present mode, presenter window, HTML/PDF export) — the same `<Footer />` JSX is correct everywhere. Call the hook inside a component that's used **per page**; don't try to call it at module top level.
+
 ## Repeated elements: component, not `map`
 
 When a page has visually repeated items — cards, logo rows, gallery tiles, list rows, step indicators — **define a small component and instantiate it once per item**. Do **not** render the group with `array.map` over a data array.