@open-slide/core 0.0.8 → 0.0.10

package/src/app/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/app/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/app/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/app/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/app/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/app/lib/assets.ts

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AssetEntry = {
+  name: string;
+  size: number;
+  mtime: number;
+  mime: string;
+  url: string;
+};
+
+export type UploadOptions = { overwrite?: boolean };
+
+async function listAssets(slideId: string): Promise<AssetEntry[]> {
+  const res = await fetch(`/__assets/${slideId}`);
+  if (!res.ok) throw new Error(`GET /__assets/${slideId} ${res.status}`);
+  const data = (await res.json()) as { assets?: AssetEntry[] };
+  return data.assets ?? [];
+}
+
+async function uploadAsset(
+  slideId: string,
+  file: File,
+  opts: UploadOptions = {},
+): Promise<Response> {
+  const qs = opts.overwrite ? '?overwrite=1' : '';
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(file.name)}${qs}`, {
+    method: 'POST',
+    headers: {
+      'content-type': file.type || 'application/octet-stream',
+      'content-length': String(file.size),
+    },
+    body: file,
+  });
+}
+
+async function renameAsset(slideId: string, from: string, to: string): Promise<Response> {
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(from)}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name: to }),
+  });
+}
+
+async function deleteAsset(slideId: string, name: string): Promise<Response> {
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(name)}`, { method: 'DELETE' });
+}
+
+export type SvglItem = {
+  id: number;
+  title: string;
+  category: string | string[];
+  route: string | { light: string; dark: string };
+  url: string;
+};
+
+export async function searchSvgl(query: string, signal?: AbortSignal): Promise<SvglItem[]> {
+  const q = query.trim();
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  else params.set('limit', '24');
+  const res = await fetch(`/__svgl/search?${params.toString()}`, { signal });
+  // svgl returns 404 when a search has no matches — treat it as an empty list,
+  // not an error.
+  if (res.status === 404) return [];
+  if (!res.ok) throw new Error(`svgl ${res.status}`);
+  return (await res.json()) as SvglItem[];
+}
+
+export function svgProxyUrl(routeUrl: string): string {
+  return `/__svgl/svg?u=${encodeURIComponent(routeUrl)}`;
+}
+
+export async function fetchSvgAsFile(routeUrl: string, filename: string): Promise<File> {
+  const res = await fetch(svgProxyUrl(routeUrl));
+  if (!res.ok) throw new Error(`svgl route ${res.status}`);
+  const blob = await res.blob();
+  return new File([blob], filename, { type: 'image/svg+xml' });
+}
+
+export type UseAssetsResult = {
+  assets: AssetEntry[];
+  loading: boolean;
+  available: boolean;
+  upload: (file: File, opts?: UploadOptions) => Promise<{ ok: boolean; status: number }>;
+  rename: (from: string, to: string) => Promise<{ ok: boolean; status: number }>;
+  remove: (name: string) => Promise<{ ok: boolean; status: number }>;
+  refresh: () => Promise<void>;
+};
+
+const NOOP_RESULT = { ok: false, status: 0 } as const;
+
+export function useAssets(slideId: string): UseAssetsResult {
+  const available = import.meta.env.DEV;
+  const [assets, setAssets] = useState<AssetEntry[]>([]);
+  const [loading, setLoading] = useState(available);
+
+  const refresh = useCallback(async () => {
+    if (!available) return;
+    const next = await listAssets(slideId);
+    setAssets(next);
+  }, [slideId]);
+
+  useEffect(() => {
+    if (!available) return;
+    let cancelled = false;
+    setLoading(true);
+    listAssets(slideId)
+      .then((next) => {
+        if (!cancelled) {
+          setAssets(next);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slideId]);
+
+  useEffect(() => {
+    if (!available || !import.meta.hot) return;
+    const handler = (data: { slideId?: string } | undefined) => {
+      if (!data || data.slideId === slideId) {
+        refresh().catch(() => {});
+      }
+    };
+    import.meta.hot.on('open-slide:assets-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-slide:assets-changed', handler);
+    };
+  }, [slideId, refresh]);
+
+  const upload = useCallback(
+    async (file: File, opts?: UploadOptions) => {
+      if (!available) return NOOP_RESULT;
+      const res = await uploadAsset(slideId, file, opts);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  const rename = useCallback(
+    async (from: string, to: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await renameAsset(slideId, from, to);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  const remove = useCallback(
+    async (name: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await deleteAsset(slideId, name);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  return { assets, loading, available, upload, rename, remove, refresh };
+}

package/src/app/lib/export-pdf.ts

@@ -0,0 +1,194 @@
+// Exports a slide as a PDF via the browser's native print engine.
+// Each page in `slide.default` becomes one PDF page at 1920×1080.
+// Text stays selectable and inline SVG remains vector — `window.print()`
+// preserves both. The user picks "Save as PDF" in the print dialog.
+
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { isFrameAnimationSettled, waitForDataWaitfor, waitForFonts } from './print-ready';
+import type { SlideModule } from './sdk';
+
+const PRINT_ROOT_ID = 'os-print-root';
+const PRINT_STYLE_ID = 'os-print-style';
+
+const PRINT_STYLES = `
+@page { size: 1920px 1080px; margin: 0; }
+
+@media screen {
+  #${PRINT_ROOT_ID} {
+    position: fixed !important;
+    left: -99999px !important;
+    top: 0 !important;
+    pointer-events: none !important;
+  }
+}
+
+@media print {
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #fff !important;
+  }
+  body > *:not(#${PRINT_ROOT_ID}) { display: none !important; }
+  #${PRINT_ROOT_ID} {
+    position: static !important;
+    left: 0 !important;
+    top: 0 !important;
+    pointer-events: auto !important;
+    display: block !important;
+    background: #fff !important;
+  }
+  #${PRINT_ROOT_ID} .os-print-frame {
+    width: 1920px !important;
+    height: 1080px !important;
+    background: #fff;
+    color: #000;
+    overflow: hidden;
+    page-break-after: always;
+    break-after: page;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  #${PRINT_ROOT_ID} .os-print-frame:last-child {
+    page-break-after: auto;
+    break-after: auto;
+  }
+  /* Supersample: Chrome rasterizes filtered/composited layers (e.g. filter:
+     blur, mix-blend-mode) at the layer's CSS-pixel size, so a blurred
+     gradient on a 1920×1080 page bakes in at ~1× DPI and bands when the PDF
+     is viewed scaled up. zoom:2 doubles the layer raster size; scale(0.5)
+     composites it back to 1920×1080. Vector content (text, plain CSS
+     gradients, SVG) stays vector through both transforms. */
+  #${PRINT_ROOT_ID} .os-print-supersample {
+    width: 1920px !important;
+    height: 1080px !important;
+    zoom: 2;
+    transform: scale(0.5);
+    transform-origin: top left;
+  }
+}
+`;
+
+export type PdfExportProgress = {
+  phase: 'processing' | 'printing' | 'done';
+  /** Number of pages whose intro animations have finished (0..total). */
+  current: number;
+  total: number;
+  /** 0–99 while processing, 99 during printing, 100 when done. */
+  percent: number;
+};
+
+const ANIMATION_TIMEOUT_MS = 15_000;
+const POLL_INTERVAL_MS = 100;
+
+export async function exportSlideAsPdf(
+  slide: SlideModule,
+  slideId: string,
+  onProgress?: (progress: PdfExportProgress) => void,
+): Promise<void> {
+  const pages = slide.default ?? [];
+  if (pages.length === 0) return;
+
+  const total = pages.length;
+
+  const style = document.createElement('style');
+  style.id = PRINT_STYLE_ID;
+  style.textContent = PRINT_STYLES;
+  document.head.appendChild(style);
+
+  const root = document.createElement('div');
+  root.id = PRINT_ROOT_ID;
+  root.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(root);
+
+  onProgress?.({ phase: 'processing', current: 0, total, percent: 0 });
+
+  const reactRoots: Root[] = [];
+  const frames: HTMLElement[] = [];
+  for (const Page of pages) {
+    const host = document.createElement('div');
+    host.className = 'os-print-frame';
+    host.style.width = '1920px';
+    host.style.height = '1080px';
+    const inner = document.createElement('div');
+    inner.className = 'os-print-supersample';
+    inner.style.width = '1920px';
+    inner.style.height = '1080px';
+    host.appendChild(inner);
+    root.appendChild(host);
+    frames.push(host);
+    const r = createRoot(inner);
+    r.render(createElement(Page));
+    reactRoots.push(r);
+  }
+  // Yield once so React commits all pages and CSS animations actually start
+  // (queued via Web Animations API on the first paint after mount).
+  await nextPaint();
+
+  const previousTitle = document.title;
+  document.title = slide.meta?.title ?? slideId;
+
+  try {
+    await waitForFonts();
+
+    // Poll per-page animation completion. The bar tracks how many pages have
+    // settled, which matches "page X of N is being processed" mental model.
+    const deadline = performance.now() + ANIMATION_TIMEOUT_MS;
+    while (performance.now() < deadline) {
+      const settled = frames.reduce((n, frame) => (isFrameAnimationSettled(frame) ? n + 1 : n), 0);
+      onProgress?.({
+        phase: 'processing',
+        current: settled,
+        total,
+        percent: Math.min(99, (settled / total) * 99),
+      });
+      if (settled === total) break;
+      await sleep(POLL_INTERVAL_MS);
+    }
+
+    await waitForDataWaitfor(root);
+    await sleep(100); // flush layout
+
+    onProgress?.({ phase: 'printing', current: total, total, percent: 99 });
+    const printDone = waitForAfterPrint();
+    window.print();
+    await printDone;
+  } finally {
+    onProgress?.({ phase: 'done', current: total, total, percent: 100 });
+    document.title = previousTitle;
+    for (const r of reactRoots) r.unmount();
+    root.remove();
+    style.remove();
+  }
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function nextPaint(): Promise<void> {
+  // rAF in real tabs; setTimeout fallback for hidden/throttled headless tabs.
+  return new Promise((resolve) => {
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      resolve();
+    };
+    requestAnimationFrame(settle);
+    setTimeout(settle, 50);
+  });
+}
+
+function waitForAfterPrint(timeoutMs = 60_000): Promise<void> {
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      window.removeEventListener('afterprint', onAfter);
+      clearTimeout(timer);
+      resolve();
+    };
+    const onAfter = () => cleanup();
+    const timer = setTimeout(cleanup, timeoutMs);
+    window.addEventListener('afterprint', onAfter, { once: true });
+  });
+}

package/src/app/lib/inspector/fiber.ts

@@ -4,6 +4,13 @@ export type SlideSourceHit = {
   anchor: HTMLElement;
 };
 
+export type FindSlideSourceOptions = {
+  // Visual editor uses this: skip component-invocation JSX (`<MyComp/>`)
+  // since most components don't forward `style`. Comments leave it off
+  // so any JSX can be annotated.
+  hostOnly?: boolean;
+};
+
 type FiberLike = {
   return: FiberLike | null;
   stateNode?: unknown;
@@ -21,17 +28,45 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
-export function findSlideSource(el: HTMLElement, slideId: string): SlideSourceHit | null {
+export function findSlideSource(
+  el: HTMLElement,
+  slideId: string,
+  opts?: FindSlideSourceOptions,
+): SlideSourceHit | null {
+  // Primary path: the `data-slide-loc` attribute injected by the
+  // loc-tags Vite plugin. Immune to HMR-stale fiber state.
+  const tagged = el.closest<HTMLElement>('[data-slide-loc]');
+  if (tagged) {
+    const loc = tagged.dataset.slideLoc;
+    if (loc) {
+      const idx = loc.indexOf(':');
+      if (idx > 0) {
+        const line = Number(loc.slice(0, idx));
+        const column = Number(loc.slice(idx + 1));
+        if (Number.isFinite(line) && Number.isFinite(column)) {
+          return { line, column, anchor: tagged };
+        }
+      }
+    }
+  }
+
+  // Fallback for JSX rendered from imported component files (which the
+  // loc-tags plugin doesn't transform).
   const needle = `/slides/${slideId}/index.tsx`;
   let fiber = getFiber(el);
   let anchor: HTMLElement = el;
   while (fiber) {
     const src = getSource(fiber);
-    if (src?.fileName?.endsWith(needle) && src.lineNumber) {
-      return { line: src.lineNumber, column: src.columnNumber ?? 0, anchor };
+    const isHost = fiber.stateNode instanceof HTMLElement;
+    if (src?.fileName?.endsWith(needle) && src.lineNumber && (!opts?.hostOnly || isHost)) {
+      return {
+        line: src.lineNumber,
+        column: src.columnNumber ?? 0,
+        anchor: isHost ? (fiber.stateNode as HTMLElement) : anchor,
+      };
     }
-    if (fiber.stateNode instanceof HTMLElement) {
-      anchor = fiber.stateNode;
+    if (isHost) {
+      anchor = fiber.stateNode as HTMLElement;
     }
     fiber = fiber.return;
   }