@open-slide/core 1.7.0 → 1.9.0

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

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

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

@@ -44,6 +44,7 @@ type Locale = {
     folders: string;
     newFolder: string;
     folderName: string;
+    updateAvailable: string;
     changeIcon: string;
     iconEmojiTab: string;
     iconColorTab: string;
@@ -90,6 +91,7 @@ type Locale = {
     /** template: "Deleted folder “{name}”" */
     toastFolderDeleted: string;
     toastFolderDeleteFailed: string;
+    toastFolderReorderFailed: string;
     pickIcon: string;
   };
   slide: {
@@ -105,7 +107,12 @@ type Locale = {
     toastCopyLinkFailed: string;
     exportAsHtml: string;
     exportAsPdf: string;
+    exportAsImagePptx: string;
+    exportAsPptx: string;
+    comingSoon: string;
+    pptxComingSoonTooltip: string;
     pdfExportFailed: string;
+    imagePptxExportFailed: string;
     pdfExportSafariUnsupported: string;
     present: string;
     presentMenuAria: string;
@@ -358,6 +365,13 @@ type Locale = {
     printing: string;
     done: string;
   };
+  pptxToast: {
+    title: string;
+    /** template: "Rendering page {current} of {total}" */
+    processing: string;
+    generating: string;
+    done: string;
+  };
   themeToggle: {
     toggleAria: string;
     title: string;
@@ -365,9 +379,9 @@ type Locale = {
     dark: string;
     system: string;
   };
-  clickNav: {
-    prevAria: string;
-    nextAria: string;
+  languageToggle: {
+    toggleAria: string;
+    title: string;
   };
   imagePlaceholder: {
     dropOverlay: string;

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-B-KrjgX8.js";
-import { OpenSlideConfig } from "../config-CfMThYN9.js";
+import "../types-AalTbxMj.js";
+import { OpenSlideConfig } from "../config-D_5nlXFU.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-PwUHqZ_X.js";
+import { createViteConfig } from "../config-BAZeaz2P.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -74,6 +74,7 @@
     "emoji-picker-react": "^4.18.0",
     "fast-glob": "^3.3.2",
     "fflate": "^0.8.2",
+    "html-to-image": "^1.11.13",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",

package/skills/create-theme/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: create-theme
-description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/`: `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
+description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/` — `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
 ---
 
 # Create a slide theme

package/src/app/components/inspector/comment-widget.tsx

@@ -1,5 +1,5 @@
 import { MessageSquare, Trash2, X } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { format, plural, useLocale } from '@/lib/use-locale';
 import { useInspector } from './inspector-provider';
 
@@ -8,9 +8,23 @@ export function CommentWidget() {
   const { comments, remove, error } = useInspector();
   const [open, setOpen] = useState(false);
   const count = comments.length;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
 
   return (
-    <div data-inspector-ui className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2">
+    <div
+      ref={ref}
+      data-inspector-ui
+      className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2"
+    >
       {open && (
         <div className="w-80 rounded-md border bg-card shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200">
           <div className="flex items-center justify-between border-b px-3 py-2">

package/src/app/components/language-toggle.tsx

@@ -0,0 +1,39 @@
+import { Languages } from 'lucide-react';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function LanguageToggle() {
+  const t = useLocale();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        type="button"
+        aria-label={t.languageToggle.toggleAria}
+        title={t.languageToggle.title}
+        className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }))}
+      >
+        <Languages className="size-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        {LOCALE_OPTIONS.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onSelect={() => setLocale(option.id)}
+            data-active={t.id === option.id}
+          >
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/app/components/player.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useClickPageNavigation } from '@/lib/use-click-page-navigation';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
@@ -92,6 +93,15 @@ export function Player({
 
   const overlayActive = controls && (overviewOpen || helpOpen);
 
+  useClickPageNavigation({
+    ref: rootRef,
+    enabled: !overlayActive,
+    canPrev,
+    canNext,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
+
   useWheelPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
@@ -308,23 +318,8 @@ export function Player({
         />
       </SlideCanvas>
 
-      <button
-        type="button"
-        aria-label="Previous page"
-        onClick={goPrev}
-        disabled={!canPrev}
-        className={cn('absolute inset-y-0 left-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
-      />
-      <button
-        type="button"
-        aria-label="Next page"
-        onClick={goNext}
-        disabled={!canNext}
-        className={cn('absolute inset-y-0 right-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
-      />
-
       {controls && (
-        <>
+        <div data-osd-chrome style={{ display: 'contents' }}>
           <PresentProgressBar index={index} total={pages.length} visible={chromeVisible} />
           <PresentBlackoutOverlay mode={blackout} />
           <PresentJumpInput pageCount={pages.length} onJump={onIndexChange} />
@@ -358,7 +353,7 @@ export function Player({
             onSelect={onIndexChange}
           />
           <PresentHelpOverlay open={helpOpen} onOpenChange={setHelpOpen} container={rootEl} />
-        </>
+        </div>
       )}
     </div>
   );

package/src/app/components/pptx-progress-toast.tsx

@@ -0,0 +1,32 @@
+import { Loader2 } from 'lucide-react';
+import { format, useLocale } from '@/lib/use-locale';
+import type { PptxExportProgress } from '../lib/export-pptx';
+import { Progress } from './ui/progress';
+
+export function PptxProgressToast({ progress }: { progress: PptxExportProgress }) {
+  const t = useLocale();
+  const text =
+    progress.phase === 'processing'
+      ? format(t.pptxToast.processing, {
+          current: progress.current.toString().padStart(2, '0'),
+          total: progress.total.toString().padStart(2, '0'),
+        })
+      : progress.phase === 'generating'
+        ? t.pptxToast.generating
+        : t.pptxToast.done;
+
+  return (
+    <div className="flex w-80 items-start gap-3 rounded-[8px] border border-border bg-popover px-3.5 py-3 text-popover-foreground shadow-floating">
+      <Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-brand" />
+      <div className="min-w-0 flex-1">
+        <p className="font-heading text-[12.5px] font-semibold tracking-tight">
+          {t.pptxToast.title}
+        </p>
+        <p className="truncate font-mono text-[10.5px] tracking-[0.04em] text-muted-foreground">
+          {text}
+        </p>
+        <Progress value={Math.round(progress.percent)} className="mt-2 h-[3px]" />
+      </div>
+    </div>
+  );
+}

package/src/app/components/sidebar/folder-item.tsx

@@ -181,9 +181,14 @@ export function FolderItem({
           </PopoverContent>
         </Popover>
       ) : (
-        <span className="flex size-5 shrink-0 items-center justify-center">
+        <button
+          type="button"
+          onClick={onSelect}
+          aria-label={label}
+          className="flex size-5 shrink-0 items-center justify-center"
+        >
           <FolderIconChip icon={icon} />
-        </span>
+        </button>
       )}
 
       {renaming && row.kind === 'folder' ? (

package/src/app/components/sidebar/sidebar-footer.tsx

@@ -0,0 +1,51 @@
+import config from 'virtual:open-slide/config';
+import { useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { format, useLocale } from '@/lib/use-locale';
+
+type UpdateCheck = { current: string; latest: string | null; outdated: boolean };
+
+export function SidebarFooter() {
+  const t = useLocale();
+  const [update, setUpdate] = useState<UpdateCheck | null>(null);
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    let cancelled = false;
+    fetch('/__update-check')
+      .then((res) => (res.ok ? (res.json() as Promise<UpdateCheck>) : null))
+      .then((data) => {
+        if (!cancelled && data?.outdated) setUpdate(data);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const label = `v${config.version}`;
+
+  const versionRow = (
+    <span className="inline-flex items-center gap-1.5">
+      {update?.latest && <span className="size-1.5 rounded-full bg-brand" aria-hidden />}
+      {label}
+    </span>
+  );
+
+  return (
+    <div className="px-4 py-3 text-[11px] text-muted-foreground/70 tabular-nums">
+      {update?.latest ? (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>{versionRow}</TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="max-w-56">
+              {format(t.home.updateAvailable, { version: update.latest })}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        versionRow
+      )}
+    </div>
+  );
+}

package/src/app/components/sidebar/sidebar.tsx

@@ -1,17 +1,22 @@
 import { Plus } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
+import { LanguageToggle } from '@/components/language-toggle';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
 import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
+import { SidebarFooter } from './sidebar-footer';
 
 export const DRAFT_ID = 'draft';
 export const THEMES_ID = '__themes__';
 export const ASSETS_ID = '__assets__';
 
+export const FOLDER_DND_MIME = 'application/x-folder-id';
+
 export function Sidebar({
   folders,
   countFor,
@@ -25,6 +30,7 @@ export function Sidebar({
   onDelete,
   onDropToFolder,
   onDropToDraft,
+  onReorder,
 }: {
   folders: Folder[];
   countFor: (folderId: string | null) => number;
@@ -38,7 +44,23 @@ export function Sidebar({
   onDelete: (id: string) => void;
   onDropToFolder: (folderId: string, slideId: string) => void;
   onDropToDraft: (slideId: string) => void;
+  onReorder: (ids: string[]) => void;
 }) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; before: boolean } | null>(null);
+
+  const finishReorder = (toId: string, before: boolean) => {
+    const fromId = dragId;
+    setDragId(null);
+    setDropTarget(null);
+    if (!fromId || fromId === toId) return;
+    const ids = folders.map((f) => f.id);
+    if (!ids.includes(fromId) || !ids.includes(toId)) return;
+    const next = ids.filter((id) => id !== fromId);
+    next.splice(next.indexOf(toId) + (before ? 0 : 1), 0, fromId);
+    if (next.every((id, i) => id === ids[i])) return;
+    onReorder(next);
+  };
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [newIcon, setNewIcon] = useState<FolderIcon>(() => ({
@@ -104,7 +126,8 @@ export function Sidebar({
     <aside className="paper relative flex h-full w-[16.5rem] shrink-0 flex-col border-r border-hairline bg-sidebar text-sidebar-foreground">
       <div className="flex items-center justify-between px-4 pt-5 pb-4">
         <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
-        <div className="-mr-1.5">
+        <div className="-mr-1.5 flex items-center">
+          <LanguageToggle />
           <ThemeToggle />
         </div>
       </div>
@@ -139,22 +162,73 @@ export function Sidebar({
       </div>
 
       <div className="flex-1 overflow-y-auto px-2 pb-2">
-        {folders.map((folder) => (
-          <FolderItem
-            key={folder.id}
-            row={{
-              kind: 'folder',
-              folder,
-              onRename: (name) => onRename(folder.id, name),
-              onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
-              onDelete: () => onDelete(folder.id),
-            }}
-            count={countFor(folder.id)}
-            selected={selectedId === folder.id}
-            onSelect={() => onSelect(folder.id)}
-            onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
-          />
-        ))}
+        {folders.map((folder) => {
+          const isDropTarget = dropTarget?.id === folder.id;
+          const before = isDropTarget && dropTarget.before;
+          const after = isDropTarget && !dropTarget.before;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop handle wraps the row
+            <div
+              key={folder.id}
+              className={cn(
+                'relative',
+                before &&
+                  'before:absolute before:inset-x-2 before:-top-px before:h-[2px] before:rounded-full before:bg-brand',
+                after &&
+                  'after:absolute after:inset-x-2 after:-bottom-px after:h-[2px] after:rounded-full after:bg-brand',
+                dragId === folder.id && 'opacity-50',
+              )}
+              draggable={import.meta.env.DEV}
+              onDragStart={(e) => {
+                if (!import.meta.env.DEV) return;
+                e.dataTransfer.setData(FOLDER_DND_MIME, folder.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDragId(folder.id);
+              }}
+              onDragEnd={() => {
+                setDragId(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(e) => {
+                if (!e.dataTransfer.types.includes(FOLDER_DND_MIME)) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                if (!dropTarget || dropTarget.id !== folder.id || dropTarget.before !== isBefore) {
+                  setDropTarget({ id: folder.id, before: isBefore });
+                }
+              }}
+              onDragLeave={(e) => {
+                if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+                if (dropTarget?.id === folder.id) setDropTarget(null);
+              }}
+              onDrop={(e) => {
+                const fromId = e.dataTransfer.getData(FOLDER_DND_MIME);
+                if (!fromId) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                finishReorder(folder.id, isBefore);
+              }}
+            >
+              <FolderItem
+                row={{
+                  kind: 'folder',
+                  folder,
+                  onRename: (name) => onRename(folder.id, name),
+                  onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+                  onDelete: () => onDelete(folder.id),
+                }}
+                count={countFor(folder.id)}
+                selected={selectedId === folder.id}
+                onSelect={() => onSelect(folder.id)}
+                onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
+              />
+            </div>
+          );
+        })}
 
         {import.meta.env.DEV &&
           (creating ? (
@@ -200,6 +274,10 @@ export function Sidebar({
             </button>
           ))}
       </div>
+
+      <div className="border-t border-hairline">
+        <SidebarFooter />
+      </div>
     </aside>
   );
 }

package/src/app/lib/design-presets.ts

@@ -7,7 +7,7 @@ const SERIF_GEORGIA = 'Georgia, "Times New Roman", serif';
 const SERIF_TIMES = '"Times New Roman", Times, serif';
 const MONO_SF = '"SF Mono", "JetBrains Mono", Menlo, monospace';
 
-export const designPresets: DesignSystem[] = [
+const designPresets: DesignSystem[] = [
   defaultDesign,
   {
     palette: { bg: '#0f1115', text: '#f5f3ee', accent: '#7cc4ff' },