@open-slide/core 1.8.0 → 1.10.0

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

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

package/dist/{types-Bvk1pM70.d.ts → types-D_q_ylIe.d.ts}

@@ -44,6 +44,7 @@ type Locale = {
     folders: string;
     newFolder: string;
     folderName: string;
+    updateAvailable: string;
     changeIcon: string;
     iconEmojiTab: string;
     iconColorTab: string;
@@ -106,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;
@@ -351,6 +357,8 @@ type Locale = {
     toastDuplicateFailed: string;
     toastDeleteFailed: string;
     resizeRail: string;
+    transitionIndicator: string;
+    stepsIndicator: string;
   };
   pdfToast: {
     title: string;
@@ -359,6 +367,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;
@@ -366,6 +381,10 @@ type Locale = {
     dark: string;
     system: string;
   };
+  languageToggle: {
+    toggleAria: string;
+    title: string;
+  };
   imagePlaceholder: {
     dropOverlay: string;
     uploading: string;

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-Bvk1pM70.js";
-import { OpenSlideConfig } from "../config-D1bANimZ.js";
+import "../types-D_q_ylIe.js";
+import { OpenSlideConfig } from "../config-mwmC1XI1.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-C7sZtiY2.js";
+import { createViteConfig } from "../config-BAZeaz2P.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.8.0",
+  "version": "1.10.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/slide-authoring/SKILL.md

@@ -308,6 +308,45 @@ const Footer = () => {
 
 `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.
 
+## Stepped reveals (`<Steps>` / `<Step>`)
+
+Reveal a page one beat at a time instead of showing everything at once. Wrap the deferred parts in `<Step>`, wrap the group in `<Steps>`. Each `→` reveals the next `<Step>`; `→` after the last one advances to the next page. `←` peels the last reveal back. Use it to stage attention — show framing first, then the consequence, then the turn — so the audience reads at the speaker's pace, not ahead.
+
+`slides/build-on-reveal/` is the canonical worked example; study it before authoring a stepped page.
+
+```tsx
+import { Step, Steps } from '@open-slide/core';
+
+<Steps>
+  <Step><div style={BULLET_ROW}>An audience reads faster than a presenter speaks.</div></Step>
+  <Step><div style={BULLET_ROW}>Showing every bullet at once invites pre-reading.</div></Step>
+  <Step><div style={BULLET_ROW}>Revealing in time stages attention.</div></Step>
+</Steps>
+```
+
+### Rules
+
+- **`<Step>` must be a *direct* child of `<Steps>`.** A `<Step>` nested deeper (or used without a `<Steps>` parent) renders fully revealed and defers nothing.
+- **Non-`Step` children render immediately.** Put a headline or intro paragraph *inside* `<Steps>` as a plain element and it shows from the start; only the `<Step>` blocks wait. This is the "headline always, body in turn" pattern:
+  ```tsx
+  <Steps>
+    <h2>Not everything has to wait.</h2>{/* visible immediately */}
+    <Step><p>First, set the stage…</p></Step>
+    <Step><p>Then, layer the consequence…</p></Step>
+  </Steps>
+  ```
+- **Multiple `<Steps>` blocks on one page compose in document order.** The first block reveals all its steps before the second begins; `←` unwinds in reverse. Use this for two columns that build left-then-right, each column owning its own `<Steps>`:
+  ```tsx
+  <div style={COL}><Steps><Step>…</Step><Step>…</Step></Steps></div>{/* finishes first */}
+  <div style={COL}><Steps><Step>…</Step><Step>…</Step></Steps></div>{/* then this */}
+  ```
+- **Entry direction decides the starting state — same content, two rhythms.** Entering forward (`→` from the previous page) starts empty and builds up. Jumping in via the overview grid, or arriving backward from a later page, shows the page **fully composed** with every step already revealed. Design the page to read well both ways: a thumbnail or overview jump should look complete, not blank.
+- **`<Step>` fades in over `duration` ms (default 180).** Pass `<Step duration={...}>` to adjust. `prefers-reduced-motion: reduce` collapses it to an instant cut automatically — don't write a fallback.
+
+### When to reach for it
+
+Use stepped reveals when the *order* of ideas is the point — a list whose payoff is the last item, a build-up to a conclusion, a before/after. Don't wrap every page's content in `<Step>` reflexively: a page the audience should take in at a glance (a hero title, a single quote, a diagram) is stronger shown whole. Reveals are timing, not decoration — same restraint as transitions.
+
 ## Page transitions
 
 The framework can run an enter/exit animation between every slide change. There's **no default** — pages snap unless you declare a `SlideTransition`. Snap-swap is a perfectly tasteful default; only opt in when motion adds something.
@@ -541,6 +580,7 @@ This applies whenever the *visual element* repeats, not whenever the *data* does
 - [ ] Visually repeated elements (cards, tiles, logo rows) are rendered as explicit `<Component />` instances, not via `array.map` over a data list.
 - [ ] All imported assets exist on disk — slide-local under `slides/<id>/assets/`, or global under `assets/` (imported via `@assets/...`).
 - [ ] Every `<ImagePlaceholder>` corresponds to a real image the user must supply — not decorative filler. If it could be replaced by typography or layout, it should be.
+- [ ] If a page uses `<Steps>`/`<Step>`, every `<Step>` is a direct child of a `<Steps>`, and the page still reads as complete when jumped to via the overview grid (entering forward builds up; jumping in shows it fully revealed).
 - [ ] If a `SlideTransition` is declared, every page sits in one family — same duration band (140–280 ms), same easing pair, same out-then-in stagger, magnitude under 12 px / 3%. No six-different-vocabularies decks. When in doubt, omit transitions entirely.
 - [ ] Nothing outside `slides/<id>/` was edited.
 
@@ -561,3 +601,5 @@ This applies whenever the *visual element* repeats, not whenever the *data* does
 - ❌ Sprinkling `<ImagePlaceholder>` across pages "for visual interest". Placeholders are for content the user owns; they're not stock-photo slots.
 - ❌ Using a placeholder for an icon or decorative shape — those are typography/SVG problems, not asset problems.
 - ❌ Rendering visually repeated elements with `array.map(...)` over a data array. Define a component and instantiate it explicitly per item (`<Card />`, `<Card />`, `<Card />`) so the inspector can edit each independently — a shared `map` body mutates every instance at once.
+- ❌ Wrapping every page's content in `<Step>` reflexively. Stepped reveals are for content whose *order* is the point; a glance-and-get-it page (hero title, single quote, diagram) is stronger shown whole.
+- ❌ A `<Step>` that isn't a direct child of `<Steps>` (nested deeper, or with no `<Steps>` parent). It renders fully revealed and defers nothing — the reveal silently does nothing.

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

@@ -4,6 +4,7 @@ import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
 import type { Page } from '../lib/sdk';
+import type { EntryDirection, StepController } from '../lib/step-context';
 import type { SlideTransition } from '../lib/transition';
 import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
 import { PresentBlackoutOverlay } from './present/blackout-overlay';
@@ -84,12 +85,28 @@ export function Player({
   const canPrev = index > 0;
   const canNext = index < pages.length - 1;
 
+  const stepControllerRef = useRef<StepController | null>(null);
+  const [entryDirection, setEntryDirection] = useState<EntryDirection>('jump');
+
+  // Every navigation funnels through here so entryDirection is settled
+  // synchronously, before the incoming page's <Steps> reads it on mount.
+  const handleIndexChange = useCallback(
+    (next: number) => {
+      const delta = next - index;
+      setEntryDirection(delta === 1 ? 'forward' : delta === -1 ? 'backward' : 'jump');
+      onIndexChange(next);
+    },
+    [index, onIndexChange],
+  );
+
   const goPrev = useCallback(() => {
-    if (index > 0) onIndexChange(index - 1);
-  }, [index, onIndexChange]);
+    if (stepControllerRef.current?.retreat()) return;
+    if (index > 0) handleIndexChange(index - 1);
+  }, [index, handleIndexChange]);
   const goNext = useCallback(() => {
-    if (index < pages.length - 1) onIndexChange(index + 1);
-  }, [index, pages.length, onIndexChange]);
+    if (stepControllerRef.current?.advance()) return;
+    if (index < pages.length - 1) handleIndexChange(index + 1);
+  }, [index, pages.length, handleIndexChange]);
 
   const overlayActive = controls && (overviewOpen || helpOpen);
 
@@ -158,14 +175,14 @@ export function Player({
       if (msg.type === 'next') goNext();
       else if (msg.type === 'prev') goPrev();
       else if (msg.type === 'goto') {
-        onIndexChange(Math.max(0, Math.min(pages.length - 1, msg.index)));
+        handleIndexChange(Math.max(0, Math.min(pages.length - 1, msg.index)));
       } else if (msg.type === 'toggle-blackout') {
         setBlackout((cur) => (cur === msg.mode ? null : msg.mode));
       } else if (msg.type === 'request-state') {
         send({ type: 'state', state: presenterStateRef.current });
       }
     },
-    [goNext, goPrev, onIndexChange, pages.length],
+    [goNext, goPrev, handleIndexChange, pages.length],
   );
 
   const channel = usePresenterChannel(slideId ?? '__none__', (msg) => {
@@ -231,12 +248,12 @@ export function Player({
       }
       if (e.key === 'Home') {
         setKeyboardDriven(true);
-        onIndexChange(0);
+        handleIndexChange(0);
         return;
       }
       if (e.key === 'End') {
         setKeyboardDriven(true);
-        onIndexChange(pages.length - 1);
+        handleIndexChange(pages.length - 1);
         return;
       }
 
@@ -277,7 +294,7 @@ export function Player({
     onExit,
     goNext,
     goPrev,
-    onIndexChange,
+    handleIndexChange,
     pages.length,
     slideId,
   ]);
@@ -315,6 +332,8 @@ export function Player({
           total={pages.length}
           moduleTransition={transition}
           disabled={prefersReducedMotion}
+          stepControllerRef={stepControllerRef}
+          entryDirection={entryDirection}
         />
       </SlideCanvas>
 
@@ -322,7 +341,7 @@ export function Player({
         <div data-osd-chrome style={{ display: 'contents' }}>
           <PresentProgressBar index={index} total={pages.length} visible={chromeVisible} />
           <PresentBlackoutOverlay mode={blackout} />
-          <PresentJumpInput pageCount={pages.length} onJump={onIndexChange} />
+          <PresentJumpInput pageCount={pages.length} onJump={handleIndexChange} />
           <PresentLaserPointer enabled={laser} />
           <PresentControlBar
             tooltipContainer={rootEl}
@@ -350,7 +369,7 @@ export function Player({
             open={overviewOpen}
             current={index}
             onClose={() => setOverviewOpen(false)}
-            onSelect={onIndexChange}
+            onSelect={handleIndexChange}
           />
           <PresentHelpOverlay open={helpOpen} onOpenChange={setHelpOpen} container={rootEl} />
         </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/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,6 +1,7 @@
 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';
@@ -8,6 +9,7 @@ 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__';
@@ -124,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>
@@ -271,6 +274,10 @@ export function Sidebar({
             </button>
           ))}
       </div>
+
+      <div className="border-t border-hairline">
+        <SidebarFooter />
+      </div>
     </aside>
   );
 }

package/src/app/components/slide-transition-layer.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { type MutableRefObject, useEffect, useRef, useState } from 'react';
 import { SlidePageProvider } from '../lib/page-context';
 import type { Page } from '../lib/sdk';
+import { type EntryDirection, type StepController, StepHost } from '../lib/step-context';
 import { resolveTransition, type SlideTransition, type TransitionPhase } from '../lib/transition';
 
 type Props = {
@@ -9,6 +10,8 @@ type Props = {
   total: number;
   moduleTransition?: SlideTransition;
   disabled?: boolean;
+  stepControllerRef?: MutableRefObject<StepController | null>;
+  entryDirection?: EntryDirection;
 };
 
 type Direction = 'forward' | 'backward';
@@ -30,7 +33,15 @@ function runPhase(
   });
 }
 
-export function SlideTransitionLayer({ pages, index, total, moduleTransition, disabled }: Props) {
+export function SlideTransitionLayer({
+  pages,
+  index,
+  total,
+  moduleTransition,
+  disabled,
+  stepControllerRef,
+  entryDirection = 'jump',
+}: Props) {
   const [current, setCurrent] = useState(index);
   const [outgoing, setOutgoing] = useState<number | null>(null);
   const [direction, setDirection] = useState<Direction>('forward');
@@ -129,6 +140,15 @@ export function SlideTransitionLayer({ pages, index, total, moduleTransition, di
   const CurrentPage = pages[current];
   const OutgoingPage = outgoing !== null ? pages[outgoing] : null;
 
+  // Outgoing layer mirrors the direction we just navigated so its <Steps>
+  // re-mounts in the state the audience just saw: forward nav → outgoing was
+  // fully revealed; backward nav → outgoing was at zero reveals.
+  const outgoingEntryDirection: EntryDirection =
+    entryDirection === 'backward' ? 'forward' : 'backward';
+
+  const noopControllerRef = useRef<StepController | null>(null);
+  const activeControllerRef = stepControllerRef ?? noopControllerRef;
+
   return (
     <div
       ref={wrapperRef}
@@ -138,14 +158,26 @@ export function SlideTransitionLayer({ pages, index, total, moduleTransition, di
       {OutgoingPage && outgoing !== null ? (
         <div ref={outgoingLayerRef} className="absolute inset-0">
           <SlidePageProvider index={outgoing} total={total}>
-            <OutgoingPage />
+            <StepHost
+              isActivePage={false}
+              entryDirection={outgoingEntryDirection}
+              controllerRef={activeControllerRef}
+            >
+              <OutgoingPage />
+            </StepHost>
           </SlidePageProvider>
         </div>
       ) : null}
       {CurrentPage ? (
         <div ref={incomingLayerRef} className="absolute inset-0">
           <SlidePageProvider index={current} total={total}>
-            <CurrentPage />
+            <StepHost
+              isActivePage
+              entryDirection={entryDirection}
+              controllerRef={activeControllerRef}
+            >
+              <CurrentPage />
+            </StepHost>
           </SlidePageProvider>
         </div>
       ) : null}

package/src/app/components/thumbnail-rail.tsx

@@ -15,8 +15,8 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Copy, Trash2 } from 'lucide-react';
-import { Fragment, useEffect, useRef } from 'react';
+import { Copy, ListOrdered, type LucideIcon, Sparkles, Trash2 } from 'lucide-react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -25,12 +25,14 @@ import {
   ContextMenuTrigger,
 } from '@/components/ui/context-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
 import { SlidePageProvider } from '../lib/page-context';
 import type { Page } from '../lib/sdk';
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
+import type { SlideTransition } from '../lib/transition';
 import { SlideCanvas } from './slide-canvas';
 
 type Orientation = 'vertical' | 'horizontal';
@@ -50,6 +52,8 @@ type Props = {
   orientation?: Orientation;
   /** Vertical-only: total rail width in px. Thumbnails scale to fit. */
   width?: number;
+  /** Deck-level transition default; used to flag pages that inherit a transition. */
+  moduleTransition?: SlideTransition;
 };
 
 const DEFAULT_VERTICAL_THUMB_WIDTH = 184;
@@ -66,6 +70,7 @@ export function ThumbnailRail({
   actions,
   orientation = 'vertical',
   width,
+  moduleTransition,
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
   const t = useLocale();
@@ -165,6 +170,7 @@ export function ThumbnailRail({
         scale={scale}
         thumbWidth={thumbWidth}
         height={height}
+        moduleTransition={moduleTransition}
       />
     );
 
@@ -218,15 +224,21 @@ export function ThumbnailRail({
   );
 
   if (!onReorder) {
-    return <ScrollArea className="h-full border-r border-hairline bg-sidebar">{list}</ScrollArea>;
+    return (
+      <TooltipProvider delayDuration={200}>
+        <ScrollArea className="h-full border-r border-hairline bg-sidebar">{list}</ScrollArea>
+      </TooltipProvider>
+    );
   }
 
   return (
-    <ScrollArea className="h-full border-r border-hairline bg-sidebar">
-      <SortableRail pages={pages} onReorder={onReorder} onSelect={onSelect}>
-        {list}
-      </SortableRail>
-    </ScrollArea>
+    <TooltipProvider delayDuration={200}>
+      <ScrollArea className="h-full border-r border-hairline bg-sidebar">
+        <SortableRail pages={pages} onReorder={onReorder} onSelect={onSelect}>
+          {list}
+        </SortableRail>
+      </ScrollArea>
+    </TooltipProvider>
   );
 }
 
@@ -247,6 +259,7 @@ function ThumbContents({
   scale,
   thumbWidth,
   height,
+  moduleTransition,
 }: {
   index: number;
   total: number;
@@ -256,18 +269,45 @@ function ThumbContents({
   scale: number;
   thumbWidth: number;
   height: number;
+  moduleTransition?: SlideTransition;
 }) {
+  const t = useLocale();
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  const [hasSteps, setHasSteps] = useState(false);
+
+  // Steps live in JSX and can't be introspected statically — detect them from
+  // the already-rendered thumbnail DOM, where each Step emits `data-osd-step`.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-detect when the page at this slot changes (reorder/edit reuses the index)
+  useEffect(() => {
+    setHasSteps(boxRef.current?.querySelector('[data-osd-step]') != null);
+  }, [PageComp]);
+
+  const hasTransition = Boolean(PageComp.transition ?? moduleTransition);
+
   return (
     <>
-      <span
-        className={cn(
-          'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
-          active ? 'text-brand' : 'text-muted-foreground/70',
+      <div className="mt-1.5 flex w-7 shrink-0 flex-col items-end gap-1">
+        <span
+          className={cn(
+            'font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
+            active ? 'text-brand' : 'text-muted-foreground/70',
+          )}
+        >
+          {(index + 1).toString().padStart(2, '0')}
+        </span>
+        {(hasTransition || hasSteps) && (
+          <div className="flex flex-col items-end gap-0.5">
+            {hasTransition && (
+              <ThumbIndicator icon={Sparkles} label={t.thumbnailRail.transitionIndicator} />
+            )}
+            {hasSteps && (
+              <ThumbIndicator icon={ListOrdered} label={t.thumbnailRail.stepsIndicator} />
+            )}
+          </div>
         )}
-      >
-        {(index + 1).toString().padStart(2, '0')}
-      </span>
+      </div>
       <div
+        ref={boxRef}
         className={cn(
           'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-[border-color,box-shadow]',
           active
@@ -292,6 +332,28 @@ function ThumbContents({
   );
 }
 
+function ThumbIndicator({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          role="img"
+          aria-label={label}
+          className={cn(
+            'flex size-3.5 items-center justify-center text-muted-foreground/55',
+            'motion-safe:transition-colors group-hover/thumb:text-muted-foreground/80',
+          )}
+        >
+          <Icon className="size-3" strokeWidth={2} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="right" sideOffset={6}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 function ThumbContextMenu({
   index,
   actions,