@kywk/open-slide-core 2.3.0 → 2.3.2

package/src/app/components/inline-svg.tsx

@@ -1,4 +1,11 @@
-import { type CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 export interface InlineSvgProps {
@@ -26,26 +33,52 @@ function isLightColor(color: string): boolean {
   return luminance > 0.5;
 }
 
+const MAX_SVG_CACHE_ENTRIES = 100;
+const svgCache = new Map<string, SVGSVGElement>();
+
+function getCachedSvg(svg: string, alt?: string): SVGSVGElement | null {
+  const cacheKey = alt ? `${alt}:::${svg}` : svg;
+  let template = svgCache.get(cacheKey);
+  if (template) {
+    svgCache.delete(cacheKey);
+    svgCache.set(cacheKey, template);
+  } else {
+    const el = document.createElement('template');
+    el.innerHTML = svg.trim();
+    const svgEl = el.content.querySelector('svg');
+    if (!svgEl) return null;
+    svgEl.style.width = '100%';
+    svgEl.style.height = '100%';
+    svgEl.style.display = 'block';
+    svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    if (alt && !svgEl.getAttribute('aria-label')) {
+      svgEl.setAttribute('aria-label', alt);
+      svgEl.setAttribute('role', 'img');
+    }
+    template = svgEl;
+    if (svgCache.size >= MAX_SVG_CACHE_ENTRIES) {
+      const oldest = svgCache.keys().next().value;
+      if (oldest !== undefined) svgCache.delete(oldest);
+    }
+    svgCache.set(cacheKey, template);
+  }
+  return template.cloneNode(true) as SVGSVGElement;
+}
+
 export function InlineSvg({ svg, className, style, lightbox = true, alt }: InlineSvgProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [canvasBg, setCanvasBg] = useState('#ffffff');
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const el = containerRef.current;
     if (!el) return;
-    el.innerHTML = svg;
-    const svgEl = el.querySelector('svg');
-    if (svgEl) {
-      svgEl.style.width = '100%';
-      svgEl.style.height = '100%';
-      svgEl.style.display = 'block';
-      svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-      if (alt && !svgEl.getAttribute('aria-label')) {
-        svgEl.setAttribute('aria-label', alt);
-        svgEl.setAttribute('role', 'img');
-      }
+    const node = getCachedSvg(svg, alt);
+    if (node) {
+      el.replaceChildren(node);
+    } else {
+      el.replaceChildren();
     }
   }, [svg, alt]);
 
@@ -111,16 +144,14 @@ function SvgLightbox({
   const containerRef = useRef<HTMLDivElement>(null);
   const light = isLightColor(canvasBg);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const el = containerRef.current;
     if (!el) return;
-    el.innerHTML = svg;
-    const svgEl = el.querySelector('svg');
-    if (svgEl) {
-      svgEl.style.width = '100%';
-      svgEl.style.height = '100%';
-      svgEl.style.display = 'block';
-      svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    const node = getCachedSvg(svg);
+    if (node) {
+      el.replaceChildren(node);
+    } else {
+      el.replaceChildren();
     }
   }, [svg]);
 

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

@@ -11,6 +11,7 @@ import {
   useState,
 } from 'react';
 import { toast } from 'sonner';
+import { requestAgent, useAgentStatus } from '@/lib/agent/use-agent';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import { useFreezeSlideMotion } from '@/lib/inspector/freeze-motion';
 import { type Point, type Rect, rectContains } from '@/lib/inspector/geometry';
@@ -24,6 +25,7 @@ import { type Canvas, readCanvas, readFrame } from '@/lib/inspector/visual-dom';
 import { IS_APPLE, isTypingTarget } from '@/lib/keys';
 import { format, plural, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
+import { applyCommentsPrompt } from '../../../agent/prompt';
 import { type SelectedTarget, useInspector } from './inspector-provider';
 
 type ScreenRect = { left: number; top: number; width: number; height: number };
@@ -119,6 +121,7 @@ export function CommentLayer() {
   const { commentMode, exitCommentMode, slideId, pageIndex, comments, add, update, remove, error } =
     useInspector();
   const t = useLocale();
+  const agent = useAgentStatus();
   useFreezeSlideMotion(commentMode ? 'comment' : null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const gestureRef = useRef<Gesture | null>(null);
@@ -486,13 +489,29 @@ export function CommentLayer() {
       )}
       <div className="absolute inset-x-0 bottom-3 flex justify-center">
         <IslandHint
-          contentKey={error ? 'error' : count === 0 ? 'empty' : 'count'}
+          contentKey={
+            error ? 'error' : count === 0 ? 'empty' : agent.connected ? 'count-agent' : 'count'
+          }
           tone={error ? 'error' : 'default'}
         >
           {error ? (
             error
           ) : count === 0 ? (
             t.inspector.commentEmptyHint
+          ) : agent.connected ? (
+            <>
+              <CommentCountLabel count={count} />
+              <span aria-hidden className="mx-1.5">
+                ·
+              </span>
+              <button
+                type="button"
+                className="pointer-events-auto rounded-[4px] px-1 py-0.5 font-medium text-brand outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring/30"
+                onClick={() => requestAgent({ text: applyCommentsPrompt(slideId) })}
+              >
+                {format(t.agent.applyCommentsWith, { provider: agent.providerName ?? '' })}
+              </button>
+            </>
           ) : (
             <>
               <CommentCountLabel count={count} />

package/src/app/components/inspector/image-crop-dialog.tsx

@@ -1,6 +1,6 @@
 import { type SyntheticEvent, useEffect, useRef, useState } from 'react';
 import ReactCrop, { type Crop, type PercentCrop } from 'react-image-crop';
-import { round2 } from '@/lib/utils';
+import { clamp, round2 } from '@/lib/utils';
 import 'react-image-crop/dist/ReactCrop.css';
 import { Button } from '@/components/ui/button';
 import {
@@ -209,7 +209,3 @@ function roundRect(crop: PercentCrop): ImageCropRect {
     height: round2(crop.height),
   };
 }
-
-function clamp(v: number, lo: number, hi: number) {
-  return v < lo ? lo : v > hi ? hi : v;
-}

package/src/app/components/inspector/inspector-panel.tsx

@@ -272,7 +272,7 @@ export function InspectorPanel({
         if (value === 'arrange') stopInlineEdit();
         if (value === 'format' || value === 'arrange') onTabChange(value);
       }}
-      className="h-full shrink-0 gap-0"
+      className="h-full w-full min-w-0 shrink-0 gap-0"
       onPointerDownCapture={(event) => {
         if (!inlineEdit || !(event.target instanceof Element)) return;
         const button = event.target.closest('button');

package/src/app/components/mermaid.tsx

@@ -1,6 +1,6 @@
 import { render as renderPele } from 'pele';
 import type { CSSProperties, ReactNode } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export interface MermaidConfigLegacy {
@@ -47,12 +47,12 @@ function isLightColor(color: string): boolean {
   return luminance > 0.5;
 }
 
-function normalizeSvg(svg: string, id: string): SVGSVGElement {
+function normalizeSvg(svg: string, id?: string): SVGSVGElement {
   const template = document.createElement('template');
   template.innerHTML = svg.trim();
   const element = template.content.querySelector('svg');
   if (!element) throw new Error('Pele did not return an SVG');
-  if (!element.id) {
+  if (id && !element.id) {
     element.id = id;
   }
   const origWidth = element.getAttribute('width') ?? '800';
@@ -73,6 +73,28 @@ function normalizeSvg(svg: string, id: string): SVGSVGElement {
   return element;
 }
 
+const MAX_CACHE_ENTRIES = 100;
+const diagramCache = new Map<string, SVGSVGElement>();
+
+function getCachedDiagram(chart: string): SVGSVGElement {
+  let template = diagramCache.get(chart);
+  if (template) {
+    diagramCache.delete(chart);
+    diagramCache.set(chart, template);
+  } else {
+    const { svg } = renderPele(chart);
+    template = normalizeSvg(svg);
+    if (diagramCache.size >= MAX_CACHE_ENTRIES) {
+      const oldest = diagramCache.keys().next().value;
+      if (oldest !== undefined) diagramCache.delete(oldest);
+    }
+    diagramCache.set(chart, template);
+  }
+  const clone = template.cloneNode(true) as SVGSVGElement;
+  clone.id = nextRenderId();
+  return clone;
+}
+
 const peleDefaults: CSSProperties = {
   '--pele-bg': 'var(--osd-bg, #ffffff)',
   '--pele-fg': 'var(--osd-text, #111827)',
@@ -213,7 +235,17 @@ export function Mermaid({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const diagramRef = useRef<HTMLDivElement>(null);
   const renderVersion = useRef(0);
-  const [diagram, setDiagram] = useState<RenderedDiagram | null>(null);
+  const [diagram, setDiagram] = useState<RenderedDiagram | null>(() => {
+    if (typeof document === 'undefined') return null;
+    try {
+      if (diagramCache.has(chart)) {
+        return { element: getCachedDiagram(chart) };
+      }
+    } catch {
+      // ignore
+    }
+    return null;
+  });
   const [error, setError] = useState<unknown>(null);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [canvasBg, setCanvasBg] = useState('#ffffff');
@@ -222,16 +254,16 @@ export function Mermaid({
   useEffect(() => {
     let active = true;
     const version = ++renderVersion.current;
-    setDiagram(null);
-    setError(null);
 
     try {
-      const { svg } = renderPele(chart);
+      const element = getCachedDiagram(chart);
       if (!active || version !== renderVersion.current) return;
-      setDiagram({ element: normalizeSvg(svg, nextRenderId()) });
+      setError(null);
+      setDiagram({ element });
     } catch (cause: unknown) {
       if (!active || version !== renderVersion.current) return;
       wrapperRef.current?.replaceChildren();
+      setDiagram(null);
       setError(cause);
     }
 
@@ -240,7 +272,7 @@ export function Mermaid({
     };
   }, [chart]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!diagram || !diagramRef.current) return;
     const container = diagramRef.current;
     container.replaceChildren(diagram.element);
@@ -334,9 +366,8 @@ function MermaidLightbox({
 
   useEffect(() => {
     try {
-      const { svg } = renderPele(chart);
       if (!containerRef.current) return;
-      const el = normalizeSvg(svg, nextRenderId());
+      const el = getCachedDiagram(chart);
       containerRef.current.replaceChildren(el);
     } catch {
       // ignore

package/src/app/components/panel/editor-sidebar.tsx

@@ -1,49 +1,118 @@
-import { useState } from 'react';
+import { type ReactNode, useState } from 'react';
+import { AGENT_DOCK_W } from '@/components/agent/agent-dock';
 import { InspectorPanel } from '@/components/inspector/inspector-panel';
 import { useInspector } from '@/components/inspector/inspector-provider';
 import { useDesignPanelState } from '@/components/style-panel/design-provider';
 import { DesignPanel } from '@/components/style-panel/style-panel';
+import { useLocale } from '@/lib/use-locale';
 import { PANEL_TRANSITION_MS, PANEL_W, usePanelMount } from './panel-shell';
+import { ResizeHandle, useStoredWidth } from './resize-handle';
 
+type Mode = 'format' | 'design' | 'agent';
+
+const AGENT_MIN_W = 300;
+const EDITOR_MAX_W = 480;
+const AGENT_MAX_W = 720;
+
+// The agent shares this container with Format and Design so switching between
+// them only retargets one width transition instead of collapsing one column
+// while another grows.
 export function EditorSidebar({
   designOpen,
   onCloseDesign,
+  agentOpen = false,
+  agent,
 }: {
   designOpen: boolean;
   onCloseDesign: () => void;
+  agentOpen?: boolean;
+  agent?: ReactNode;
 }) {
+  const t = useLocale();
   const { active, panelOpen } = useInspector();
+  const [editorWidth, setEditorWidth] = useStoredWidth(
+    'open-slide:editor-panel-width',
+    PANEL_W,
+    PANEL_W,
+    EDITOR_MAX_W,
+  );
+  const [agentWidth, setAgentWidth] = useStoredWidth(
+    'open-slide:agent-panel-width',
+    AGENT_DOCK_W,
+    AGENT_MIN_W,
+    AGENT_MAX_W,
+  );
+  const [resizing, setResizing] = useState(false);
   const { loaded, draft } = useDesignPanelState();
   const [preferredTab, setPreferredTab] = useState<'format' | 'arrange'>('format');
-  const mode = designOpen
-    ? loaded && draft
-      ? 'design'
-      : null
-    : active && panelOpen
-      ? 'format'
-      : null;
-  const [lastMode, setLastMode] = useState<'format' | 'design'>('format');
+  const mode: Mode | null =
+    agentOpen && agent
+      ? 'agent'
+      : designOpen
+        ? loaded && draft
+          ? 'design'
+          : null
+        : active && panelOpen
+          ? 'format'
+          : null;
+  const [lastMode, setLastMode] = useState<Mode>('format');
   if (mode && mode !== lastMode) setLastMode(mode);
+  const shown = mode ?? lastMode;
+  const isAgent = shown === 'agent';
+  const [lastEditor, setLastEditor] = useState<'format' | 'design'>('format');
+  if (!isAgent && shown !== lastEditor) setLastEditor(shown);
+  const [agentMounted, setAgentMounted] = useState(false);
+  if (isAgent && !agentMounted) setAgentMounted(true);
   const open = mode !== null;
   const { mounted, animVisible } = usePanelMount(open);
 
   if (!mounted) return null;
 
+  const width = isAgent ? agentWidth : editorWidth;
+
   return (
     <div
       data-editor-sidebar
+      data-agent-dock={isAgent ? '' : undefined}
       inert={!open}
       aria-hidden={!open}
-      className="flex h-full max-h-1/2 shrink-0 justify-end overflow-hidden bg-sidebar transition-[width] ease-swift motion-reduce:transition-none md:max-h-none"
+      className="relative flex h-full max-h-1/2 shrink-0 justify-end overflow-hidden bg-sidebar transition-[width] ease-swift motion-reduce:transition-none md:max-h-none"
       style={{
-        width: animVisible ? PANEL_W : 0,
-        transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+        width: animVisible ? width : 0,
+        transitionDuration: resizing ? '0ms' : `${PANEL_TRANSITION_MS}ms`,
       }}
     >
-      {(mode ?? lastMode) === 'design' ? (
-        <DesignPanel onClose={onCloseDesign} />
-      ) : (
-        <InspectorPanel preferredTab={preferredTab} onTabChange={setPreferredTab} />
+      {open && (
+        <ResizeHandle
+          key={isAgent ? 'agent' : 'editor'}
+          width={width}
+          min={isAgent ? AGENT_MIN_W : PANEL_W}
+          max={isAgent ? AGENT_MAX_W : EDITOR_MAX_W}
+          defaultWidth={isAgent ? AGENT_DOCK_W : PANEL_W}
+          edge="left"
+          label={t.slide.resizeSidePanel}
+          onResize={isAgent ? setAgentWidth : setEditorWidth}
+          onResizingChange={setResizing}
+          className="left-0 hidden md:block"
+        />
+      )}
+      {agentMounted && (
+        <div
+          className="sidebar-swap h-full shrink-0"
+          style={{ width: agentWidth }}
+          hidden={!isAgent}
+        >
+          {agent}
+        </div>
+      )}
+      {!isAgent && (
+        <div className="sidebar-swap flex h-full shrink-0" style={{ width: editorWidth }}>
+          {lastEditor === 'design' ? (
+            <DesignPanel onClose={onCloseDesign} />
+          ) : (
+            <InspectorPanel preferredTab={preferredTab} onTabChange={setPreferredTab} />
+          )}
+        </div>
       )}
     </div>
   );

package/src/app/components/panel/panel-shell.tsx

@@ -45,8 +45,8 @@ type PanelShellProps = {
 export function PanelShell({ uiAttr, header, banner, footer, children }: PanelShellProps) {
   const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
   return (
-    <aside {...dataAttrs} className="flex h-full shrink-0 bg-sidebar" style={{ width: PANEL_W }}>
-      <div style={{ width: PANEL_W }} className="flex h-full shrink-0 flex-col">
+    <aside {...dataAttrs} className="flex h-full w-full min-w-0 bg-sidebar">
+      <div className="flex h-full w-full min-w-0 flex-col">
         <header className="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-hairline px-3">
           {header}
         </header>

package/src/app/components/panel/resize-handle.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import { clamp, cn } from '@/lib/utils';
+
+export function useStoredWidth(key: string, fallback: number, min: number, max: number) {
+  const [width, setWidth] = useState<number>(() => {
+    try {
+      const parsed = Number(window.localStorage.getItem(key) ?? Number.NaN);
+      return Number.isFinite(parsed) ? clamp(parsed, min, max) : fallback;
+    } catch {
+      return fallback;
+    }
+  });
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(key, String(width));
+    } catch {}
+  }, [key, width]);
+  return [width, setWidth] as const;
+}
+
+// A vertical splitter on one edge of a panel. `edge` is the side of the panel
+// it sits on, so dragging away from the panel always makes it wider.
+export function ResizeHandle({
+  width,
+  min,
+  max,
+  defaultWidth,
+  edge,
+  label,
+  onResize,
+  onResizingChange,
+  className,
+}: {
+  width: number;
+  min: number;
+  max: number;
+  defaultWidth: number;
+  edge: 'left' | 'right';
+  label: string;
+  onResize: (width: number) => void;
+  onResizingChange?: (resizing: boolean) => void;
+  className?: string;
+}) {
+  const [resizing, setResizing] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const direction = edge === 'right' ? 1 : -1;
+
+  useEffect(() => {
+    onResizingChange?.(resizing);
+    if (!resizing) return;
+    const prev = {
+      cursor: document.body.style.cursor,
+      userSelect: document.body.style.userSelect,
+    };
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    return () => {
+      document.body.style.cursor = prev.cursor;
+      document.body.style.userSelect = prev.userSelect;
+    };
+  }, [resizing, onResizingChange]);
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { startX: e.clientX, startWidth: width };
+    setResizing(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    const delta = (e.clientX - dragRef.current.startX) * direction;
+    onResize(clamp(dragRef.current.startWidth + delta, min, max));
+  };
+
+  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragRef.current = null;
+    setResizing(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = (e.shiftKey ? 32 : 8) * direction;
+    let next: number | null = null;
+    if (e.key === 'ArrowLeft') next = width - step;
+    else if (e.key === 'ArrowRight') next = width + step;
+    else if (e.key === 'Home') next = defaultWidth;
+    if (next === null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onResize(clamp(next, min, max));
+  };
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: focusable resize handle (splitter pattern), not a static <hr>
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuenow={width}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onKeyDown={onKeyDown}
+      onDoubleClick={() => onResize(defaultWidth)}
+      className={cn(
+        'group/resize absolute inset-y-0 z-20 w-1.5 cursor-col-resize touch-none outline-none',
+        'focus-visible:bg-brand/20',
+        className,
+      )}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-y-0 w-px bg-brand opacity-0 transition-opacity duration-150',
+          edge === 'right' ? 'left-1/2 -translate-x-1/2' : 'left-0',
+          'group-hover/resize:opacity-100 group-focus-visible/resize:opacity-100',
+          resizing && 'opacity-100',
+        )}
+      />
+    </div>
+  );
+}