@open-aippt/core 1.13.2

package/src/app/lib/transition.ts

@@ -0,0 +1,30 @@
+import type { Page } from './sdk';
+
+export type TransitionPhase = {
+  keyframes: Keyframe[] | PropertyIndexedKeyframes;
+  easing?: string;
+  duration?: number;
+  delay?: number;
+};
+
+export type SlideTransition = {
+  duration: number;
+  easing?: string;
+  enter?: TransitionPhase;
+  exit?: TransitionPhase;
+  sharedElements?: boolean | SharedElementTransition;
+};
+
+export type SharedElementTransition = {
+  duration?: number;
+  easing?: string;
+  delay?: number;
+};
+
+export function resolveTransition(
+  pages: Page[],
+  index: number,
+  moduleDefault?: SlideTransition,
+): SlideTransition | undefined {
+  return pages[index]?.transition ?? moduleDefault;
+}

package/src/app/lib/use-agent-socket.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export function useAgentSocketConnected() {
+  const [connected, setConnected] = useState(true);
+  useEffect(() => {
+    const hot = import.meta.hot;
+    if (!hot) return;
+    const onConnect = () => setConnected(true);
+    const onDisconnect = () => setConnected(false);
+    hot.on('vite:ws:connect', onConnect);
+    hot.on('vite:ws:disconnect', onDisconnect);
+    return () => {
+      hot.off('vite:ws:connect', onConnect);
+      hot.off('vite:ws:disconnect', onDisconnect);
+    };
+  }, []);
+  return connected;
+}

package/src/app/lib/use-click-page-navigation.ts

@@ -0,0 +1,60 @@
+import { type RefObject, useEffect } from 'react';
+
+// Clicks that land on (or inside) these never navigate — interactive slide
+// content keeps its click, and present chrome is excluded via data-osd-chrome.
+// Authors can opt any element out with a data-osd-interactive attribute.
+const NAV_PASSTHROUGH =
+  'a, button, input, textarea, select, label, summary, iframe, video, audio, embed, object, [role="button"], [role="link"], [contenteditable="true"], [data-osd-interactive], [data-osd-chrome]';
+
+type UseClickPageNavigationOptions<T extends HTMLElement> = {
+  ref: RefObject<T>;
+  enabled?: boolean;
+  /** Fraction of the width on each side that navigates; the center is inert. */
+  edgeRatio?: number;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  onCenterClick?: () => void;
+  onViewportClick?: (point: { x: number; y: number }) => void;
+};
+
+export function useClickPageNavigation<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  edgeRatio = 0.3,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+  onCenterClick,
+  onViewportClick,
+}: UseClickPageNavigationOptions<T>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.defaultPrevented) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest(NAV_PASSTHROUGH)) return;
+      if (window.getSelection()?.toString()) return;
+
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const x = (event.clientX - rect.left) / rect.width;
+      const y = rect.height === 0 ? 0 : (event.clientY - rect.top) / rect.height;
+      onViewportClick?.({ x, y });
+      if (x < edgeRatio) {
+        if (canPrev) onPrev();
+      } else if (x > 1 - edgeRatio) {
+        if (canNext) onNext();
+      } else {
+        onCenterClick?.();
+      }
+    };
+
+    el.addEventListener('click', onClick);
+    return () => el.removeEventListener('click', onClick);
+  }, [ref, enabled, edgeRatio, canPrev, canNext, onPrev, onNext, onCenterClick, onViewportClick]);
+}

package/src/app/lib/use-is-mobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+// Matches Tailwind's `md` breakpoint — below it the slide viewer hides desktop
+// navigation chrome and relies on tap-to-navigate instead.
+const QUERY = '(max-width: 767.98px)';
+
+export function useIsMobile(): boolean {
+  const [mobile, setMobile] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setMobile(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return mobile;
+}

package/src/app/lib/use-locale.ts

@@ -0,0 +1,8 @@
+import type { Locale } from '../../locale/types';
+import { useLocaleValue } from './locale-store';
+
+export function useLocale(): Locale {
+  return useLocaleValue();
+}
+
+export { format, plural } from '../../locale/format';

package/src/app/lib/use-prefers-reduced-motion.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+export function usePrefersReducedMotion(): boolean {
+  const [reduce, setReduce] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setReduce(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return reduce;
+}

package/src/app/lib/use-slide-module.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { SlideModule } from './sdk';
+import { loadSlide, slideChangeIncludes } from './slides';
+
+export function useSlideModule(slideId: string) {
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const loadSeqRef = useRef(0);
+
+  const reload = useCallback(
+    (reset: boolean) => {
+      const seq = ++loadSeqRef.current;
+      if (reset) setSlide(null);
+      setError(null);
+      loadSlide(slideId)
+        .then((mod) => {
+          if (seq === loadSeqRef.current) setSlide(mod);
+        })
+        .catch((e) => {
+          if (seq === loadSeqRef.current) setError(String(e?.message ?? e));
+        });
+    },
+    [slideId],
+  );
+
+  useEffect(() => {
+    reload(true);
+  }, [reload]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    let cancelled = false;
+    const handler = (data: unknown) => {
+      if (slideChangeIncludes(data, slideId)) {
+        queueMicrotask(() => {
+          if (!cancelled) reload(false);
+        });
+      }
+    };
+    import.meta.hot.on('open-aippt:slide-changed', handler);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('open-aippt:slide-changed', handler);
+    };
+  }, [slideId, reload]);
+
+  return { slide, error, reload };
+}

package/src/app/lib/use-wheel-page-navigation.ts

@@ -0,0 +1,99 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+const WHEEL_PAGE_THRESHOLD_PX = 12;
+const WHEEL_NAV_COOLDOWN_MS = 100;
+const WHEEL_GESTURE_IDLE_MS = 80;
+
+type UseWheelPageNavigationOptions<T extends HTMLElement> = {
+  ref: RefObject<T>;
+  enabled?: boolean;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+export function useWheelPageNavigation<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+}: UseWheelPageNavigationOptions<T>) {
+  const accumulatedDeltaRef = useRef(0);
+  const lastWheelAtRef = useRef(0);
+  const lastNavigateAtRef = useRef(0);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.defaultPrevented || event.ctrlKey || shouldIgnoreWheelTarget(event.target)) return;
+      if (isVisualViewportZoomed()) return;
+
+      const deltaY = normalizeDeltaY(event);
+      if (Math.abs(deltaY) <= Math.abs(normalizeDeltaX(event))) return;
+
+      const now = performance.now();
+      if (now - lastWheelAtRef.current > WHEEL_GESTURE_IDLE_MS) {
+        accumulatedDeltaRef.current = 0;
+      }
+      lastWheelAtRef.current = now;
+
+      if (now - lastNavigateAtRef.current < WHEEL_NAV_COOLDOWN_MS) {
+        event.preventDefault();
+        return;
+      }
+
+      accumulatedDeltaRef.current += deltaY;
+      if (Math.abs(accumulatedDeltaRef.current) < WHEEL_PAGE_THRESHOLD_PX) {
+        event.preventDefault();
+        return;
+      }
+
+      const direction = Math.sign(accumulatedDeltaRef.current);
+      accumulatedDeltaRef.current = 0;
+      event.preventDefault();
+
+      if (direction > 0 && canNext) {
+        lastNavigateAtRef.current = now;
+        onNext();
+      } else if (direction < 0 && canPrev) {
+        lastNavigateAtRef.current = now;
+        onPrev();
+      }
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [ref, enabled, canPrev, canNext, onPrev, onNext]);
+}
+
+function normalizeDeltaY(event: WheelEvent) {
+  return normalizeWheelDelta(event.deltaY, event.deltaMode);
+}
+
+function normalizeDeltaX(event: WheelEvent) {
+  return normalizeWheelDelta(event.deltaX, event.deltaMode);
+}
+
+function normalizeWheelDelta(delta: number, deltaMode: number) {
+  if (deltaMode === WheelEvent.DOM_DELTA_LINE) return delta * 16;
+  if (deltaMode === WheelEvent.DOM_DELTA_PAGE) return delta * 800;
+  return delta;
+}
+
+function isVisualViewportZoomed() {
+  if (typeof window === 'undefined') return false;
+  const vv = window.visualViewport;
+  return vv != null && vv.scale > 1.01;
+}
+
+function shouldIgnoreWheelTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest('input, textarea, select, [contenteditable="true"], [data-wheel-nav-ignore]'),
+  );
+}

package/src/app/lib/utils.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { cn } from './utils.ts';
+
+describe('cn', () => {
+  it('joins multiple class names', () => {
+    expect(cn('a', 'b', 'c')).toBe('a b c');
+  });
+
+  it('drops falsy values', () => {
+    expect(cn('a', false, undefined, null, '', 'b')).toBe('a b');
+  });
+
+  it('flattens arrays and conditional objects from clsx', () => {
+    expect(cn(['a', 'b'], { c: true, d: false })).toBe('a b c');
+  });
+
+  it('lets later tailwind classes override earlier ones', () => {
+    expect(cn('p-2', 'p-4')).toBe('p-4');
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('preserves classes that target different properties', () => {
+    expect(cn('p-2', 'm-4')).toBe('p-2 m-4');
+  });
+});

package/src/app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/app/main.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider } from 'next-themes';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+import './styles.css';
+
+// biome-ignore lint/style/noNonNullAssertion: #root is guaranteed by index.html
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+);

package/src/app/routes/assets.tsx

@@ -0,0 +1,9 @@
+import { AssetView } from '../components/asset-view';
+
+export function AssetsPage() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <AssetView slideId={null} />
+    </div>
+  );
+}

package/src/app/routes/home-shell.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAssets } from '@/lib/assets';
+import { useFolders } from '@/lib/folders';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { MobileFolderPill } from '../components/sidebar/mobile-pill';
+import { ASSETS_ID, DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import type { FoldersManifest } from '../lib/sdk';
+import { slideIds } from '../lib/slides';
+import { themes as themeRegistry } from '../lib/themes';
+
+export type HomeOutletContext = {
+  manifest: FoldersManifest;
+  loading: boolean;
+  draftSlides: string[];
+  slidesByFolder: Record<string, string[]>;
+  /** Selected folder id when on `/`; equals DRAFT_ID, a folder id, or THEMES_ID. */
+  selectedId: string;
+  reportTitle: (slideId: string, title: string) => void;
+  titleMap: Record<string, string>;
+  assign: (slideId: string, folderId: string | null) => Promise<void>;
+  renameSlide: (slideId: string, name: string) => Promise<void>;
+  duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
+  deleteSlide: (slideId: string) => Promise<void>;
+};
+
+function pathToSelectedId(pathname: string, search: URLSearchParams): string {
+  if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
+  if (pathname === '/assets') return ASSETS_ID;
+  return search.get('f') ?? DRAFT_ID;
+}
+
+export function HomeShell() {
+  const {
+    manifest,
+    loading,
+    create,
+    update,
+    remove,
+    reorder,
+    assign,
+    renameSlide,
+    duplicateSlide,
+    deleteSlide,
+  } = useFolders();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const t = useLocale();
+
+  const selectedId = pathToSelectedId(location.pathname, searchParams);
+
+  const [titleMap, setTitleMap] = useState<Record<string, string>>({});
+  const reportTitle = useCallback((slideId: string, slideTitle: string) => {
+    setTitleMap((prev) =>
+      prev[slideId] === slideTitle ? prev : { ...prev, [slideId]: slideTitle },
+    );
+  }, []);
+
+  const selectFolder = useCallback(
+    (id: string) => {
+      if (id === THEMES_ID) navigate('/themes', { replace: true });
+      else if (id === ASSETS_ID) navigate('/assets', { replace: true });
+      else if (id === DRAFT_ID) navigate('/', { replace: true });
+      else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
+    },
+    [navigate],
+  );
+
+  const { assets: globalAssets } = useAssets('@global');
+  const isAssetsRoute = location.pathname === '/assets';
+
+  const { draftSlides, slidesByFolder } = useMemo(() => {
+    const byFolder: Record<string, string[]> = {};
+    const draft: string[] = [];
+    const known = new Set(manifest.folders.map((f) => f.id));
+    for (const id of slideIds) {
+      const folderId = manifest.assignments[id];
+      if (folderId && known.has(folderId)) {
+        byFolder[folderId] ??= [];
+        byFolder[folderId].push(id);
+      } else {
+        draft.push(id);
+      }
+    }
+    return { draftSlides: draft, slidesByFolder: byFolder };
+  }, [manifest]);
+
+  const countFor = (folderId: string | null) =>
+    folderId === null ? draftSlides.length : (slidesByFolder[folderId]?.length ?? 0);
+
+  const moveSlideWithToast = useCallback(
+    async (slideId: string, folderId: string | null) => {
+      if (manifest.assignments[slideId] === (folderId ?? undefined)) return;
+      const slideName = titleMap[slideId] ?? slideId;
+      const folderName =
+        folderId === null
+          ? t.home.draft
+          : (manifest.folders.find((f) => f.id === folderId)?.name ?? folderId);
+      try {
+        await assign(slideId, folderId);
+        toast.success(format(t.home.toastSlideMoved, { slide: slideName, folder: folderName }));
+      } catch {
+        toast.error(t.home.toastSlideMoveFailed);
+      }
+    },
+    [assign, manifest, titleMap, t],
+  );
+
+  const ctx: HomeOutletContext = {
+    manifest,
+    loading,
+    draftSlides,
+    slidesByFolder,
+    selectedId,
+    reportTitle,
+    titleMap,
+    assign,
+    renameSlide,
+    duplicateSlide,
+    deleteSlide,
+  };
+
+  return (
+    <div className="flex h-dvh overflow-hidden bg-background text-foreground">
+      <div className="hidden md:block">
+        <Sidebar
+          folders={manifest.folders}
+          countFor={countFor}
+          themesCount={themeRegistry.length}
+          assetsCount={globalAssets.length}
+          selectedId={selectedId}
+          onSelect={selectFolder}
+          onCreate={(name, icon) => create(name, icon)}
+          onRename={(id, name) => update(id, { name })}
+          onChangeIcon={(id, icon) => update(id, { icon })}
+          onDelete={async (id) => {
+            const name = manifest.folders.find((f) => f.id === id)?.name ?? id;
+            if (selectedId === id) selectFolder(DRAFT_ID);
+            try {
+              await remove(id);
+              toast.success(format(t.home.toastFolderDeleted, { name }));
+            } catch {
+              toast.error(t.home.toastFolderDeleteFailed);
+            }
+          }}
+          onDropToFolder={(folderId, slideId) => moveSlideWithToast(slideId, folderId)}
+          onDropToDraft={(slideId) => moveSlideWithToast(slideId, null)}
+          onReorder={async (ids) => {
+            try {
+              await reorder(ids);
+            } catch {
+              toast.error(t.home.toastFolderReorderFailed);
+            }
+          }}
+        />
+      </div>
+
+      <div className="paper relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
+        <div className="flex items-center justify-between border-b border-hairline bg-sidebar px-4 py-3 md:hidden">
+          <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
+        </div>
+        <div className="border-b border-hairline bg-sidebar px-4 py-2 md:hidden">
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '📝' }}
+              label={t.home.draft}
+              count={countFor(null)}
+              active={selectedId === DRAFT_ID}
+              onClick={() => selectFolder(DRAFT_ID)}
+            />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🎨' }}
+              label={t.home.themes}
+              count={themeRegistry.length}
+              active={selectedId === THEMES_ID}
+              onClick={() => selectFolder(THEMES_ID)}
+            />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🗂️' }}
+              label={t.home.assets}
+              count={globalAssets.length}
+              active={selectedId === ASSETS_ID}
+              onClick={() => selectFolder(ASSETS_ID)}
+            />
+            {manifest.folders.map((f) => (
+              <MobileFolderPill
+                key={f.id}
+                icon={f.icon}
+                label={f.name}
+                count={countFor(f.id)}
+                active={selectedId === f.id}
+                onClick={() => selectFolder(f.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            isAssetsRoute
+              ? 'flex min-h-0 flex-1 flex-col'
+              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
+          )}
+        >
+          <Outlet context={ctx} />
+        </div>
+      </div>
+    </div>
+  );
+}