@open-aippt/core 1.13.2

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

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "group/slider relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-[3px] data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[3px]"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-foreground data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-3.5 shrink-0 rounded-full border border-foreground bg-card shadow-edge transition-transform hover:scale-110 focus-visible:scale-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

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

@@ -0,0 +1,48 @@
+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": "8px",
+          "--font-family":
+            "Geist Variable, -apple-system, BlinkMacSystemFont, sans-serif",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast:
+            "!font-sans !text-[12.5px] !shadow-floating !border-border !rounded-[8px]",
+          title: "!font-medium !text-[12.5px] !tracking-tight",
+          description: "!text-[12px] !text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-[6px] p-[2px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-7 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted/70 ring-1 ring-inset ring-border/60',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-[5px] border border-transparent px-2.5 text-[12px] font-medium whitespace-nowrap text-foreground/55 transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
+        'data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-edge dark:data-[state=active]:bg-foreground/10',
+        'after:absolute after:bg-brand after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:-bottom-[6px] group-data-[orientation=horizontal]/tabs:after:h-[2px] group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -0,0 +1,22 @@
+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-[6px] border border-border bg-background px-2.5 py-2 text-[13px] leading-relaxed outline-none',
+        'transition-colors placeholder:text-muted-foreground/70',
+        'focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25',
+        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-[5px]",
+        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-[5px] data-[spacing=0]:last:rounded-r-[5px] 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-[5px] text-[12px] font-medium whitespace-nowrap outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-foreground data-[state=on]:text-background [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent text-foreground/70",
+        outline:
+          "border border-border bg-card text-foreground/75 hover:border-foreground/20 data-[state=on]:border-foreground",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 px-1.5",
+        lg: "h-9 min-w-9 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,58 @@
+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,
+  container,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  container?: React.ComponentProps<typeof TooltipPrimitive.Portal>['container']
+}) {
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <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/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>open-aippt</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/app/lib/assets.ts

@@ -0,0 +1,242 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AssetEntry = {
+  name: string;
+  size: number;
+  mtime: number;
+  mime: string;
+  url: string;
+  unused: boolean;
+};
+
+export type UploadOptions = { overwrite?: boolean };
+
+export 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 ?? [];
+}
+
+export 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 AssetUsage = { slideId: string; count: number };
+
+export async function listAssetUsages(slideId: string, name: string): Promise<AssetUsage[]> {
+  const res = await fetch(`/__assets/${slideId}/${encodeURIComponent(name)}/usages`);
+  if (!res.ok) return [];
+  const data = (await res.json().catch(() => null)) as { usages?: AssetUsage[] } | null;
+  return data?.usages ?? [];
+}
+
+export async function revertAssetUsage(
+  slideId: string,
+  assetPath: string,
+): Promise<{ ok: boolean; status: number }> {
+  const res = await fetch('/__edit/revert-asset', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ slideId, assetPath }),
+  });
+  return { ok: res.ok, status: res.status };
+}
+
+export async function uploadWithAutoRename(
+  slideId: string,
+  file: File,
+): Promise<{ ok: boolean; status: number; entry: AssetEntry | null }> {
+  // Vite's default `assetsInclude` matches asset extensions case-sensitively,
+  // so `<img src="./assets/foo.JPG" />` (which the placeholder edit rewrites
+  // into a real `import`) fails to parse. Lowercase the extension so the
+  // import path is always one Vite recognizes.
+  let uploaded = lowercaseExtension(file);
+  let res = await uploadAsset(slideId, uploaded);
+  if (res.status === 409) {
+    const list = await listAssets(slideId);
+    const taken = new Set(list.map((a) => a.name));
+    uploaded = renamedCopy(uploaded, taken);
+    res = await uploadAsset(slideId, uploaded);
+  }
+  if (!res.ok) return { ok: false, status: res.status, entry: null };
+  const body = (await res.json().catch(() => null)) as Partial<AssetEntry> | null;
+  const entry: AssetEntry = {
+    name: body?.name ?? uploaded.name,
+    size: body?.size ?? uploaded.size,
+    mtime: body?.mtime ?? Date.now(),
+    mime: body?.mime ?? uploaded.type ?? 'application/octet-stream',
+    url: body?.url ?? `/__assets/${slideId}/${encodeURIComponent(uploaded.name)}`,
+    unused: body?.unused ?? false,
+  };
+  return { ok: true, status: res.status, entry };
+}
+
+function lowercaseExtension(file: File): File {
+  const dot = file.name.lastIndexOf('.');
+  if (dot <= 0) return file;
+  const ext = file.name.slice(dot);
+  const lower = ext.toLowerCase();
+  if (ext === lower) return file;
+  return new File([file], file.name.slice(0, dot) + lower, {
+    type: file.type,
+    lastModified: file.lastModified,
+  });
+}
+
+export function renamedCopy(file: File, taken: Set<string>): File {
+  const dot = file.name.lastIndexOf('.');
+  const stem = dot > 0 ? file.name.slice(0, dot) : file.name;
+  const ext = dot > 0 ? file.name.slice(dot) : '';
+  let i = 1;
+  let next = `${stem}-${i}${ext}`;
+  while (taken.has(next)) {
+    i += 1;
+    next = `${stem}-${i}${ext}`;
+  }
+  return new File([file], next, { type: file.type, lastModified: file.lastModified });
+}
+
+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-aippt:assets-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-aippt: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 };
+}