@open-slide/core 1.0.5 → 1.1.0

package/src/app/routes/presenter.tsx

@@ -100,11 +100,11 @@ export function Presenter() {
 
   if (error) {
     return (
-      <div className="grid h-dvh place-items-center bg-zinc-950 p-8 text-zinc-300">
+      <div className="dark grid h-dvh place-items-center bg-background p-8 text-foreground">
         <div className="max-w-md text-center">
-          <span className="eyebrow text-red-300/80">{t.common.loadFailed}</span>
+          <span className="eyebrow text-destructive/80">{t.common.loadFailed}</span>
           <h2 className="mt-2 font-heading text-xl font-semibold">{t.common.failedToLoadSlide}</h2>
-          <pre className="mt-4 overflow-auto rounded-[6px] border border-white/10 bg-black/40 p-4 text-left text-[11.5px] whitespace-pre-wrap">
+          <pre className="mt-4 overflow-auto rounded-[6px] border border-border bg-card p-4 text-left text-[11.5px] whitespace-pre-wrap shadow-edge">
             {error}
           </pre>
         </div>
@@ -114,15 +114,15 @@ export function Presenter() {
 
   if (!slide) {
     return (
-      <div className="grid h-dvh place-items-center bg-zinc-950 text-zinc-400">
+      <div className="dark grid h-dvh place-items-center bg-background text-muted-foreground">
         <div className="flex flex-col items-center gap-4">
-          <div className="relative h-px w-56 overflow-hidden bg-white/10">
+          <div className="relative h-px w-56 overflow-hidden bg-border">
             <span
               aria-hidden
-              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-zinc-100"
+              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-foreground"
             />
           </div>
-          <div className="text-[12.5px]">{format(t.presenter.loadingSlide, { slideId })}</div>
+          <div className="text-[11.5px]">{format(t.presenter.loadingSlide, { slideId })}</div>
         </div>
       </div>
     );
@@ -141,7 +141,7 @@ export function Presenter() {
   const NextPage = hasNext ? pages[nextIndex] : null;
 
   return (
-    <div className="flex h-dvh w-screen flex-col overflow-hidden bg-zinc-950 text-zinc-100">
+    <div className="dark flex h-dvh w-screen flex-col overflow-hidden bg-background text-foreground">
       <PresenterTopBar
         index={index}
         total={total}
@@ -154,7 +154,7 @@ export function Presenter() {
         {/* Now-showing */}
         <section className="flex min-h-0 flex-col gap-3">
           <SectionLabel>{t.presenter.nowShowing}</SectionLabel>
-          <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-white/10">
+          <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-border">
             <SlideCanvas flat design={slide.design}>
               <CurrentPage />
             </SlideCanvas>
@@ -177,7 +177,7 @@ export function Presenter() {
           <div className="flex flex-col gap-2">
             <SectionLabel>{hasNext ? t.presenter.upNext : t.presenter.lastSlide}</SectionLabel>
             <div
-              className="relative w-full overflow-hidden rounded-[6px] bg-black ring-1 ring-white/10"
+              className="relative w-full overflow-hidden rounded-[8px] bg-black ring-1 ring-border"
               style={{ aspectRatio: `${CANVAS_WIDTH}/${CANVAS_HEIGHT}` }}
             >
               {NextPage ? (
@@ -185,7 +185,7 @@ export function Presenter() {
                   <NextPage />
                 </SlideCanvas>
               ) : (
-                <div className="grid h-full place-items-center text-[11.5px] text-white/40">
+                <div className="grid h-full place-items-center text-[11.5px] text-muted-foreground">
                   {t.presenter.endOfDeck}
                 </div>
               )}
@@ -194,13 +194,13 @@ export function Presenter() {
 
           <div className="flex min-h-0 flex-1 flex-col gap-2">
             <SectionLabel>{t.presenter.speakerNotes}</SectionLabel>
-            <div className="min-h-0 flex-1 overflow-y-auto rounded-[6px] border border-white/10 bg-black/40 p-3 text-[13.5px] leading-relaxed whitespace-pre-wrap text-white/85">
+            <div className="min-h-0 flex-1 overflow-y-auto rounded-[6px] border border-border bg-card p-3 text-[13.5px] leading-relaxed whitespace-pre-wrap text-card-foreground">
               {note?.trim() ? (
                 note
               ) : (
-                <span className="text-white/40">
+                <span className="text-muted-foreground">
                   {t.presenter.noNotesPrefix}
-                  <code className="rounded-[3px] bg-white/10 px-1 py-0.5 font-mono text-[12px]">
+                  <code className="rounded-[3px] bg-muted px-1 py-0.5 font-mono text-[12px]">
                     export const notes = […]
                   </code>
                   {t.presenter.noNotesSuffix}
@@ -241,7 +241,7 @@ function PresenterTopBar({
 }) {
   const t = useLocale();
   return (
-    <header className="flex shrink-0 items-center justify-between border-b border-white/10 px-6 py-3">
+    <header className="flex h-12 shrink-0 items-center justify-between border-b border-hairline px-6">
       <div className="flex items-baseline gap-3">
         <span className="eyebrow text-white/45">{t.presenter.eyebrow}</span>
         <span className="truncate font-heading text-[14px] font-semibold tracking-tight">
@@ -257,9 +257,9 @@ function PresenterTopBar({
         <Clock />
         <ElapsedClock startedAt={startedAt} />
         <div className="font-mono text-[18px] tabular-nums">
-          <span className="text-white">{(index + 1).toString().padStart(2, '0')}</span>
-          <span className="text-white/35"> / </span>
-          <span className="text-white/55">{total.toString().padStart(2, '0')}</span>
+          <span className="text-foreground">{(index + 1).toString().padStart(2, '0')}</span>
+          <span className="text-foreground/30"> / </span>
+          <span className="text-muted-foreground">{total.toString().padStart(2, '0')}</span>
         </div>
       </div>
     </header>
@@ -285,7 +285,7 @@ function PresenterBottomBar({
 }) {
   const t = useLocale();
   return (
-    <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-white/10 px-6 py-3">
+    <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-hairline px-6 py-3">
       <div className="flex items-center gap-2">
         <Button variant="outline" onClick={onPrev} disabled={index === 0}>
           <ChevronLeft className="size-4" /> {t.presenter.prev}
@@ -352,15 +352,15 @@ function PresenterJumpControl({
         value={value}
         onChange={(e) => setValue(e.target.value)}
         placeholder={(current + 1).toString()}
-        className="h-8 w-20 rounded-[5px] border border-white/15 bg-black/40 px-2 font-mono text-[12px] tabular-nums outline-none focus-visible:border-white/30"
+        className="h-8 w-20 rounded-[5px] border border-border bg-card px-2 font-mono text-[12px] tabular-nums outline-none focus-visible:border-foreground/30"
       />
-      <span className="font-mono text-[11px] text-white/45">/ {total}</span>
+      <span className="font-mono text-[11px] text-muted-foreground">/ {total}</span>
     </form>
   );
 }
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
-  return <span className="eyebrow text-white/45">{children}</span>;
+  return <span className="eyebrow">{children}</span>;
 }
 
 function Clock() {
@@ -373,7 +373,7 @@ function Clock() {
   return (
     <time
       title={t.presenter.currentTime}
-      className="font-mono text-[12px] tabular-nums text-white/55"
+      className="font-mono text-[12px] tabular-nums text-muted-foreground"
     >
       {now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
     </time>
@@ -396,7 +396,10 @@ function ElapsedClock({ startedAt }: { startedAt: number }) {
       ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
       : `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
   return (
-    <time title={t.presenter.elapsed} className="font-mono text-[18px] tabular-nums text-white">
+    <time
+      title={t.presenter.elapsed}
+      className="font-mono text-[18px] tabular-nums text-foreground"
+    >
       {text}
     </time>
   );

package/src/app/routes/slide.tsx

@@ -68,12 +68,63 @@ export function Slide() {
     };
   }, [slideId]);
 
-  const pages = useMemo(() => slide?.default ?? [], [slide]);
+  const modulePages = useMemo(() => slide?.default ?? [], [slide]);
+  const [pages, setPages] = useState<typeof modulePages>(modulePages);
+  useEffect(() => {
+    setPages(modulePages);
+  }, [modulePages]);
   const pageCount = pages.length;
   const rawIndex = Number(searchParams.get('p') ?? '1') - 1;
   const index = Number.isFinite(rawIndex) ? Math.max(0, Math.min(pageCount - 1, rawIndex)) : 0;
   const view = searchParams.get('view') === 'assets' ? 'assets' : 'slides';
 
+  const reorderPage = useCallback(
+    async (from: number, to: number) => {
+      if (from === to) return;
+      const before = pages;
+      const nextPages = [...before];
+      const [moved] = nextPages.splice(from, 1);
+      nextPages.splice(to, 0, moved);
+      setPages(nextPages);
+
+      const order = before.map((_, i) => i);
+      const [movedIdx] = order.splice(from, 1);
+      order.splice(to, 0, movedIdx);
+
+      // Keep the user looking at the same page they were on before the drag.
+      let nextIndex = index;
+      if (index === from) nextIndex = to;
+      else if (from < index && to >= index) nextIndex = index - 1;
+      else if (from > index && to <= index) nextIndex = index + 1;
+      if (nextIndex !== index) {
+        setSearchParams(
+          (prev) => {
+            const params = new URLSearchParams(prev);
+            params.set('p', String(nextIndex + 1));
+            return params;
+          },
+          { replace: true },
+        );
+      }
+
+      try {
+        const res = await fetch(`/__slides/${encodeURIComponent(slideId)}/reorder`, {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ order }),
+        });
+        if (!res.ok) {
+          const detail = await res.json().catch(() => ({ error: res.statusText }));
+          throw new Error(detail.error ?? `HTTP ${res.status}`);
+        }
+      } catch (err) {
+        setPages(before);
+        toast.error(`Reorder failed: ${String((err as Error).message ?? err)}`);
+      }
+    },
+    [pages, index, slideId, setSearchParams],
+  );
+
   const goTo = useCallback(
     (i: number) => {
       const clamped = Math.max(0, Math.min(pageCount - 1, i));
@@ -356,6 +407,7 @@ export function Slide() {
                     design={slide.design}
                     current={index}
                     onSelect={goTo}
+                    onReorder={import.meta.env.DEV ? reorderPage : undefined}
                   />
                 </div>
                 <main

package/src/locale/en.ts

@@ -185,6 +185,13 @@ export const en: Locale = {
     pickerLoading: 'Loading…',
     pickerEmpty: "No images in this slide's assets folder yet. Add some from the Assets tab.",
     placeholderHintLabel: 'Hint:',
+    crop: 'Crop…',
+    cropDialogTitle: 'Crop image',
+    cropDialogDescription: 'Drag the frame to choose what stays visible.',
+    cropFitCover: 'Fill',
+    cropFitContain: 'Fit',
+    cropApply: 'Apply',
+    cropResetAria: 'Reset crop',
     noteForAgent: 'Note for the agent',
     noteAgentPlaceholder: 'Describe a change for the agent…',
     noteShortcutHint: '⌘↵ to send',
@@ -224,6 +231,8 @@ export const en: Locale = {
     designToggle: 'Design',
     designToggleTitle: 'Design tokens',
     fontPresetCustom: 'Custom…',
+    shuffleAria: 'Shuffle design',
+    shuffleTitle: 'Shuffle for inspiration',
   },
 
   asset: {

package/src/locale/ja.ts

@@ -186,6 +186,13 @@ export const ja: Locale = {
     pickerEmpty:
       'このスライドのアセットフォルダにまだ画像がありません。「アセット」タブから追加してください。',
     placeholderHintLabel: 'ヒント:',
+    crop: 'トリミング…',
+    cropDialogTitle: '画像をトリミング',
+    cropDialogDescription: '枠をドラッグして表示する範囲を選択します。',
+    cropFitCover: '塗りつぶす',
+    cropFitContain: '全体表示',
+    cropApply: '適用',
+    cropResetAria: 'トリミングをリセット',
     noteForAgent: 'エージェントへのメモ',
     noteAgentPlaceholder: 'エージェントに依頼する変更を記述…',
     noteShortcutHint: '⌘↵ で送信',
@@ -226,6 +233,8 @@ export const ja: Locale = {
     designToggle: 'デザイン',
     designToggleTitle: 'デザイントークン',
     fontPresetCustom: 'カスタム…',
+    shuffleAria: 'デザインをシャッフル',
+    shuffleTitle: 'シャッフルしてインスピレーションを得る',
   },
 
   asset: {

package/src/locale/types.ts

@@ -191,6 +191,13 @@ export type Locale = {
     pickerLoading: string;
     pickerEmpty: string;
     placeholderHintLabel: string;
+    crop: string;
+    cropDialogTitle: string;
+    cropDialogDescription: string;
+    cropFitCover: string;
+    cropFitContain: string;
+    cropApply: string;
+    cropResetAria: string;
     noteForAgent: string;
     noteAgentPlaceholder: string;
     noteShortcutHint: string;
@@ -228,6 +235,8 @@ export type Locale = {
     designToggle: string;
     designToggleTitle: string;
     fontPresetCustom: string;
+    shuffleAria: string;
+    shuffleTitle: string;
   };
 
   asset: {

package/src/locale/zh-cn.ts

@@ -185,6 +185,13 @@ export const zhCN: Locale = {
     pickerLoading: '加载中…',
     pickerEmpty: '该幻灯片的素材文件夹中尚无图片。请从「素材」标签页添加。',
     placeholderHintLabel: '提示:',
+    crop: '裁剪…',
+    cropDialogTitle: '裁剪图片',
+    cropDialogDescription: '拖动框线决定要保留的可见区域。',
+    cropFitCover: '填满',
+    cropFitContain: '完整显示',
+    cropApply: '应用',
+    cropResetAria: '重置裁剪',
     noteForAgent: '给代理的备注',
     noteAgentPlaceholder: '描述你希望代理执行的更改…',
     noteShortcutHint: '⌘↵ 发送',
@@ -224,6 +231,8 @@ export const zhCN: Locale = {
     designToggle: '设计',
     designToggleTitle: '设计样式',
     fontPresetCustom: '自定义…',
+    shuffleAria: '随机设计',
+    shuffleTitle: '随机配色获取灵感',
   },
 
   asset: {

package/src/locale/zh-tw.ts

@@ -185,6 +185,13 @@ export const zhTW: Locale = {
     pickerLoading: '載入中…',
     pickerEmpty: '此投影片的素材資料夾尚未有圖片。請從「素材」分頁加入。',
     placeholderHintLabel: '提示：',
+    crop: '裁切…',
+    cropDialogTitle: '裁切圖片',
+    cropDialogDescription: '拖曳框線決定要保留的可見範圍。',
+    cropFitCover: '填滿',
+    cropFitContain: '完整顯示',
+    cropApply: '套用',
+    cropResetAria: '重設裁切',
     noteForAgent: '給代理的備註',
     noteAgentPlaceholder: '描述你希望代理進行的修改…',
     noteShortcutHint: '⌘↵ 送出',
@@ -224,6 +231,8 @@ export const zhTW: Locale = {
     designToggle: '設計',
     designToggleTitle: '設計樣式',
     fontPresetCustom: '自訂…',
+    shuffleAria: '隨機設計',
+    shuffleTitle: '隨機配色獲取靈感',
   },
 
   asset: {