@wakastellar/ui 4.0.0 → 4.0.1

package/src/components/calendar/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "../../utils/cn"
@@ -29,49 +29,57 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-4 bg-background border border-border rounded-lg shadow-sm", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        // ── Layout ───────────────────────────────────────────────────────────
+        months: "flex flex-col sm:flex-row gap-4",
         month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center mb-4",
+        // ── Caption / nav ────────────────────────────────────────────────────
+        month_caption: "flex justify-center pt-1 relative items-center mb-4",
         caption_label: "text-lg font-semibold text-foreground",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          "absolute left-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200",
+          "h-8 w-8 bg-background border border-border hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50"
+        ),
+        button_next: cn(
+          "absolute right-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200",
           "h-8 w-8 bg-background border border-border hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex mb-2",
-        head_cell: "text-muted-foreground rounded-md w-10 h-10 font-medium text-sm flex items-center justify-center",
-        row: "flex w-full",
-        cell: "h-10 w-10 text-center text-sm p-0 relative",
-        day: cn(
+        // ── Grid ─────────────────────────────────────────────────────────────
+        month_grid: "w-full border-collapse",
+        weekdays: "flex mb-2",
+        weekday: "text-muted-foreground rounded-md w-10 h-10 font-medium text-sm flex items-center justify-center",
+        week: "flex w-full",
+        day: "h-10 w-10 text-center text-sm p-0 relative",
+        day_button: cn(
           "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200",
-          "h-10 w-10 p-0 font-normal cursor-pointer",
+          "h-10 w-10 p-0 font-normal cursor-pointer w-full",
           "hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50"
         ),
-        day_range_end: "day-range-end",
-        day_selected: cn(
+        // ── Day states ───────────────────────────────────────────────────────
+        range_end: "day-range-end",
+        selected: cn(
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-          "focus:bg-primary focus:text-primary-foreground shadow-sm"
+          "focus:bg-primary focus:text-primary-foreground shadow-sm rounded-md"
         ),
-        day_today: "bg-accent text-accent-foreground font-semibold",
-        day_outside: "text-muted-foreground opacity-50 hover:opacity-70",
-        day_disabled: "text-muted-foreground opacity-30 cursor-not-allowed",
-        day_range_middle: "bg-accent/50 text-accent-foreground",
-        day_hidden: "invisible",
+        today: "bg-accent text-accent-foreground font-semibold rounded-md",
+        outside: "text-muted-foreground opacity-50 hover:opacity-70",
+        disabled: "text-muted-foreground opacity-30 cursor-not-allowed",
+        range_middle: "bg-accent/50 text-accent-foreground",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        Chevron: ({ ...props }) => {
-          if (props.orientation === "left") {
-            return <ChevronLeft className="h-4 w-4" />
+        Chevron: ({ orientation, ...rest }) => {
+          if (orientation === "left") {
+            return <ChevronLeft className="h-4 w-4" {...rest} />
           }
-          return <ChevronRight className="h-4 w-4" />
+          return <ChevronRight className="h-4 w-4" {...rest} />
         },
       }}
       {...props}

package/src/components/code/index.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../utils"
+import { escapeHtml } from "../../utils/security"
 import { Button } from "../button"
 import { Copy, Check, FileText } from "lucide-react"
 
@@ -95,13 +96,22 @@ const Code = React.forwardRef<HTMLElement, CodeProps>(
     // Highlight code when language or children change
     React.useEffect(() => {
       if (variant === 'block' && language && children) {
+        const code = typeof children === 'string' ? children : String(children)
+        const grammar = Prism.languages[language]
+        // If the requested language is unknown to Prism, escape the raw source
+        // to prevent XSS via dangerouslySetInnerHTML (P0 security fix).
+        if (!grammar) {
+          setHighlightedCode(escapeHtml(code))
+          return
+        }
         try {
-          const code = typeof children === 'string' ? children : String(children)
-          const highlighted = Prism.highlight(code, Prism.languages[language] || Prism.languages.text, language)
+          const highlighted = Prism.highlight(code, grammar, language)
           setHighlightedCode(highlighted)
         } catch (error) {
           console.warn(`Failed to highlight code for language: ${language}`, error)
-          setHighlightedCode(String(children))
+          // Fallback MUST be escaped — raw user-controlled HTML would otherwise
+          // be injected via dangerouslySetInnerHTML below.
+          setHighlightedCode(escapeHtml(code))
         }
       } else {
         setHighlightedCode(String(children))

package/src/components/editor/blocks/waka-diagram-block.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import DOMPurify from "dompurify"
 import { cn } from "../../../utils/cn"
 import type { PlateElementProps } from "../waka-editor-elements"
 
@@ -29,14 +30,104 @@ export interface WakaDiagramBlockProps extends PlateElementProps {
   element?: DiagramElement & Record<string, unknown>
   /**
    * External render function: takes diagram source and syntax,
-   * returns sanitized SVG string or HTML.
+   * returns an SVG string or HTML fragment.
    *
-   * IMPORTANT: The consuming application is responsible for sanitizing
-   * the returned HTML (e.g. using DOMPurify) before it is rendered.
+   * The returned markup is sanitized internally with DOMPurify before being
+   * injected into the DOM — consumers do NOT need to sanitize themselves.
    */
   onRender?: (source: string, syntax: DiagramSyntax) => Promise<string>
 }
 
+// ============================================================================
+// Sanitization
+// ============================================================================
+
+/**
+ * DOMPurify config tuned for diagram renderers (Mermaid, PlantUML, Kroki):
+ * - Allow inline SVG plus the elements/attributes typical diagram libraries emit.
+ * - Forbid <script>, every on* event handler (wildcard regex), and javascript:/data: URIs (default).
+ *
+ * Notes:
+ * - `foreignObject` is required by Mermaid for HTML labels — kept allowed, but a
+ *   `uponSanitizeElement` hook (installed below) blocks dangerous nested tags
+ *   (script, iframe, object, embed, link, meta, base, form) inside it.
+ * - `use` is required for SVG symbol references — kept allowed, but a
+ *   `uponSanitizeAttribute` hook restricts `href`/`xlink:href` to internal
+ *   fragment references (`#...`), rejecting any external/remote URL.
+ * - `FORBID_ATTR: [/^on/i]` blocks *every* event handler attribute (onclick,
+ *   onanimationend, onpointerdown, onfocusin, …), not just a known subset.
+ */
+const FORBIDDEN_IN_FOREIGN_OBJECT = new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+  "form",
+])
+
+const URL_ATTRS_INTERNAL_ONLY = new Set(["href", "xlink:href"])
+
+let diagramHooksInstalled = false
+
+function ensureDiagramHooks(): void {
+  if (diagramHooksInstalled) return
+  diagramHooksInstalled = true
+
+  // Hook 1 — strip dangerous tags nested inside <foreignObject>.
+  // foreignObject is an SVG escape hatch that can embed arbitrary HTML, so we
+  // re-apply tag restrictions to its descendants beyond DOMPurify's defaults.
+  DOMPurify.addHook("uponSanitizeElement", (node, data) => {
+    if (!data?.tagName) return
+    const tag = data.tagName.toLowerCase()
+    if (!FORBIDDEN_IN_FOREIGN_OBJECT.has(tag)) return
+    // Walk up to see if we're inside a foreignObject — if so (or just for
+    // belt-and-braces safety), drop the node entirely.
+    let parent: Node | null = (node as Node).parentNode
+    while (parent) {
+      const parentName = (parent as Element).nodeName?.toLowerCase?.()
+      if (parentName === "foreignobject") {
+        ;(node as Element).remove?.()
+        return
+      }
+      parent = parent.parentNode
+    }
+  })
+
+  // Hook 2 — for <use href="…">, only allow internal fragment refs (`#id`).
+  // Blocks remote SVG ref attacks like <use href="http://evil.com/x.svg#a">.
+  DOMPurify.addHook("uponSanitizeAttribute", (_node, data) => {
+    if (!data?.attrName) return
+    const attr = data.attrName.toLowerCase()
+    if (!URL_ATTRS_INTERNAL_ONLY.has(attr)) return
+    const value = (data.attrValue || "").trim()
+    if (!value.startsWith("#")) {
+      data.keepAttr = false
+    }
+  })
+}
+
+const DIAGRAM_SANITIZE_CONFIG = {
+  USE_PROFILES: { svg: true, svgFilters: true, html: true },
+  ADD_TAGS: ["foreignObject", "use", "marker", "pattern", "mask", "clipPath"],
+  ADD_ATTR: ["transform", "viewBox", "xmlns", "xmlns:xlink", "xlink:href"],
+  FORBID_TAGS: ["script", "iframe", "object", "embed", "link", "meta"],
+  // Wildcard: drop *every* event handler attribute, not just a hand-picked list.
+  // Requires DOMPurify ≥ 3.0 (regex support in FORBID_ATTR).
+  FORBID_ATTR: [/^on/i],
+} as const
+
+/**
+ * Sanitize an HTML/SVG string returned by an external diagram renderer.
+ * Exported for testing — also reusable by other diagram-like blocks.
+ */
+export function sanitizeDiagramMarkup(rawHtml: string): string {
+  ensureDiagramHooks()
+  return DOMPurify.sanitize(rawHtml, DIAGRAM_SANITIZE_CONFIG) as unknown as string
+}
+
 // ============================================================================
 // Syntax Label
 // ============================================================================
@@ -69,8 +160,9 @@ const SYNTAX_CONFIG: Record<DiagramSyntax, { label: string; color: string; icon:
  * output below.
  *
  * The rendering is delegated to an external `onRender` callback, allowing the consuming
- * app to use mermaid.js, kroki.io, or any other renderer. The consuming app MUST sanitize
- * the rendered output (e.g. using DOMPurify) before returning it.
+ * app to use mermaid.js, kroki.io, or any other renderer. The HTML/SVG returned by
+ * `onRender` is sanitized inside this component with DOMPurify before being injected
+ * — consumers do not need to (and should not have to) sanitize themselves.
  *
  * If no `onRender` is provided, only the source code is displayed.
  *
@@ -109,11 +201,14 @@ export function WakaDiagramBlock({
       try {
         const result = await onRender(source, syntax)
         if (!cancelled && previewRef.current) {
+          // Sanitize renderer output before injection — protects against XSS
+          // even when `onRender` is provided by a trusted-looking library.
+          const safeHtml = sanitizeDiagramMarkup(result)
           // Clear previous content
           previewRef.current.textContent = ""
           // Parse the sanitized HTML and append as DOM nodes
           const parser = new DOMParser()
-          const doc = parser.parseFromString(result, "text/html")
+          const doc = parser.parseFromString(safeHtml, "text/html")
           const fragment = document.createDocumentFragment()
           Array.from(doc.body.childNodes).forEach((node) => {
             fragment.appendChild(document.importNode(node, true))

package/src/components/editor/waka-ai-writer.tsx

@@ -5,10 +5,12 @@ import { cn } from "../../utils/cn"
 import { Label } from "../label"
 import { Textarea } from "../textarea"
 
+import type { AnyPluginConfig, SlateEditor, Value } from "platejs"
+
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type SlateNode = any
+/** Default empty document used when no initial value is provided. */
+const EMPTY_VALUE: Value = [{ type: "p", children: [{ text: "" }] }]
 
 /** Predefined AI action available in the AI menu */
 export interface AIAction {
@@ -46,9 +48,9 @@ export const DEFAULT_AI_ACTIONS: AIAction[] = [
 
 export interface WakaAIWriterProps {
   /** Initial Slate content */
-  value?: SlateNode[]
+  value?: Value
   /** Change callback */
-  onChange?: (value: SlateNode[]) => void
+  onChange?: (value: Value) => void
   /** API endpoint for AI completions (POST) */
   aiEndpoint: string
   /**
@@ -81,24 +83,39 @@ export interface WakaAIWriterProps {
   /** Error */
   error?: string
   /** Extra Plate plugins */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
+  extraPlugins?: AnyPluginConfig[]
   /** Ref to the Plate editor instance */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  editorRef?: React.MutableRefObject<SlateEditor | null>
 }
 
 // ─── Plate types (loaded dynamically) ────────────────────────────────────────
 
+/** Props passed to the dynamically loaded Plate root component. */
+interface PlateComponentProps {
+  editor: SlateEditor
+  onChange?: (change: { value: Value }) => void
+  readOnly?: boolean
+  children?: React.ReactNode
+}
+
+/** Props passed to the dynamically loaded PlateContent component. */
+interface PlateContentProps {
+  placeholder?: string
+  readOnly?: boolean
+  className?: string
+}
+
+/** Configuration accepted by the dynamically loaded usePlateEditor hook. */
+interface PlateEditorConfig {
+  plugins: AnyPluginConfig[]
+  value?: Value
+}
+
 interface PlateBundle {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Plate: React.ComponentType<any>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  PlateContent: React.ComponentType<any>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  usePlateEditor: (config: any) => any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  plugins: any[]
+  Plate: React.ComponentType<PlateComponentProps>
+  PlateContent: React.ComponentType<PlateContentProps>
+  usePlateEditor: (config: PlateEditorConfig) => SlateEditor
+  plugins: AnyPluginConfig[]
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -185,8 +202,7 @@ export const WakaAIWriter = React.forwardRef<HTMLDivElement, WakaAIWriterProps>(
 
           const cfg = configRef.current
 
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const plugins: any[] = [
+          const plugins: AnyPluginConfig[] = [
             // Core marks
             basicNodes.BoldPlugin,
             basicNodes.ItalicPlugin,
@@ -332,8 +348,8 @@ WakaAIWriter.displayName = "WakaAIWriter"
 
 interface AIWriterInnerProps {
   bundle: PlateBundle
-  value?: SlateNode[]
-  onChange?: (value: SlateNode[]) => void
+  value?: Value
+  onChange?: (value: Value) => void
   readOnly?: boolean
   placeholder?: string
   className?: string
@@ -342,10 +358,8 @@ interface AIWriterInnerProps {
   label?: string
   description?: string
   error?: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  extraPlugins?: AnyPluginConfig[]
+  editorRef?: React.MutableRefObject<SlateEditor | null>
 }
 
 const AIWriterInner = React.forwardRef<HTMLDivElement, AIWriterInnerProps>(
@@ -374,7 +388,7 @@ const AIWriterInner = React.forwardRef<HTMLDivElement, AIWriterInnerProps>(
 
     const editor = usePlateEditor({
       plugins: allPlugins,
-      value: value ?? [{ type: "p", children: [{ text: "" }] }],
+      value: value ?? EMPTY_VALUE,
     })
 
     React.useEffect(() => {
@@ -388,7 +402,7 @@ const AIWriterInner = React.forwardRef<HTMLDivElement, AIWriterInnerProps>(
 
         <Plate
           editor={editor}
-          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          onChange={onChange ? ({ value: v }: { value: Value }) => onChange(v) : undefined}
           readOnly={readOnly}
         >
           <div className={cn(

package/src/components/editor/waka-collaborative-editor.tsx

@@ -7,10 +7,12 @@ import { Textarea } from "../textarea"
 import { Badge } from "../badge"
 import { Avatar, AvatarFallback } from "../avatar"
 
+import type { AnyPluginConfig, SlateEditor, SlatePlugin, Value } from "platejs"
+
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type SlateNode = any
+/** Default empty document used when the shared Y.Doc is empty. */
+const EMPTY_VALUE: Value = [{ type: "p", children: [{ text: "" }] }]
 
 /** Describes a remote user connected to the same document */
 export interface CollaborationUser {
@@ -38,9 +40,9 @@ export interface CollaborationProviderConfig {
 
 export interface WakaCollaborativeEditorProps {
   /** Initial Slate content (used only if the Y.Doc is empty) */
-  value?: SlateNode[]
+  value?: Value
   /** Change callback */
-  onChange?: (value: SlateNode[]) => void
+  onChange?: (value: Value) => void
   /** Read-only mode */
   readOnly?: boolean
   /** Placeholder */
@@ -73,11 +75,40 @@ export interface WakaCollaborativeEditorProps {
   /** Show the connected users bar at the top */
   showUsersBar?: boolean
   /** Extra Plate plugins */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
+  extraPlugins?: AnyPluginConfig[]
   /** Ref to editor instance */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  editorRef?: React.MutableRefObject<SlateEditor | null>
+}
+
+// ─── Plate bundle (loaded dynamically) ───────────────────────────────────────
+
+/** Props passed to the dynamically loaded Plate root component. */
+interface PlateComponentProps {
+  editor: SlateEditor
+  onChange?: (change: { value: Value }) => void
+  readOnly?: boolean
+  children?: React.ReactNode
+}
+
+/** Props passed to the dynamically loaded PlateContent component. */
+interface PlateContentProps {
+  placeholder?: string
+  readOnly?: boolean
+  className?: string
+}
+
+/** Configuration accepted by the dynamically loaded usePlateEditor hook. */
+interface PlateEditorConfig {
+  plugins: AnyPluginConfig[]
+  skipInitialization?: boolean
+}
+
+interface PlateBundle {
+  Plate: React.ComponentType<PlateComponentProps>
+  PlateContent: React.ComponentType<PlateContentProps>
+  usePlateEditor: (config: PlateEditorConfig, deps?: readonly unknown[]) => SlateEditor
+  YjsPlugin: SlatePlugin
+  plugins: AnyPluginConfig[]
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -132,8 +163,7 @@ export const WakaCollaborativeEditor = React.forwardRef<HTMLDivElement, WakaColl
     },
     ref
   ) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [bundle, setBundle] = React.useState<any>(null)
+    const [bundle, setBundle] = React.useState<PlateBundle | null>(null)
     const [loadError, setLoadError] = React.useState(false)
     const [connectedUsers, setConnectedUsers] = React.useState<CollaborationUser[]>([currentUser])
 
@@ -159,8 +189,7 @@ export const WakaCollaborativeEditor = React.forwardRef<HTMLDivElement, WakaColl
               import("@platejs/yjs/react"),
             ])
 
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const plugins: any[] = [
+          const plugins: AnyPluginConfig[] = [
             basicNodes.BoldPlugin, basicNodes.ItalicPlugin, basicNodes.UnderlinePlugin,
             basicNodes.StrikethroughPlugin, basicNodes.CodePlugin, basicNodes.HighlightPlugin,
             basicNodes.H1Plugin, basicNodes.H2Plugin, basicNodes.H3Plugin,
@@ -175,8 +204,7 @@ export const WakaCollaborativeEditor = React.forwardRef<HTMLDivElement, WakaColl
           ]
 
           // Build Yjs provider configs
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const yjsProviders: any[] = cfg.providers.map((p) => {
+          const yjsProviders: Array<{ type: string; options: Record<string, unknown> }> = cfg.providers.map((p) => {
             if (p.type === "hocuspocus") {
               return {
                 type: "hocuspocus",
@@ -284,10 +312,9 @@ WakaCollaborativeEditor.displayName = "WakaCollaborativeEditor"
 // ─── Inner component ────────────────────────────────────────────────────────
 
 interface CollabEditorInnerProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  bundle: any
-  value?: SlateNode[]
-  onChange?: (value: SlateNode[]) => void
+  bundle: PlateBundle
+  value?: Value
+  onChange?: (value: Value) => void
   readOnly?: boolean
   placeholder?: string
   className?: string
@@ -301,10 +328,8 @@ interface CollabEditorInnerProps {
   showUsersBar?: boolean
   connectedUsers: CollaborationUser[]
   setConnectedUsers: React.Dispatch<React.SetStateAction<CollaborationUser[]>>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  extraPlugins?: AnyPluginConfig[]
+  editorRef?: React.MutableRefObject<SlateEditor | null>
 }
 
 const CollabEditorInner = React.forwardRef<HTMLDivElement, CollabEditorInnerProps>(
@@ -348,7 +373,7 @@ const CollabEditorInner = React.forwardRef<HTMLDivElement, CollabEditorInnerProp
         editor.getApi(YjsPlugin).yjs.init({
           id: documentId,
           autoSelect: "end",
-          value: value ?? [{ type: "p", children: [{ text: "" }] }],
+          value: value ?? EMPTY_VALUE,
         })
       } catch {
         // YjsPlugin might not be available
@@ -372,7 +397,7 @@ const CollabEditorInner = React.forwardRef<HTMLDivElement, CollabEditorInnerProp
 
         <Plate
           editor={editor}
-          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          onChange={onChange ? ({ value: v }: { value: Value }) => onChange(v) : undefined}
           readOnly={readOnly}
         >
           <div className={cn(

package/src/components/editor/waka-diff-viewer.tsx

@@ -7,8 +7,21 @@ import { Badge } from "../badge"
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type SlateNode = any
+/**
+ * A loosely-typed Slate-like node. `@platejs/diff`'s `computeDiff` annotates
+ * nodes with extra `diff` / `diffOperation` markers that are not part of the
+ * canonical `Descendant` type, so this structural shape is used for rendering.
+ */
+interface SlateNode {
+  type?: string
+  text?: string
+  children?: SlateNode[]
+  /** Diff marker added by `@platejs/diff` (string form). */
+  diff?: string
+  /** Diff marker added by `@platejs/diff` (object form). */
+  diffOperation?: { type?: string }
+  [key: string]: unknown
+}
 
 /** Statistics about the diff between two documents */
 export interface DiffStats {
@@ -99,8 +112,7 @@ export const WakaDiffViewer = React.forwardRef<HTMLDivElement, WakaDiffViewerPro
     },
     ref
   ) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [diffResult, setDiffResult] = React.useState<any>(null)
+    const [diffResult, setDiffResult] = React.useState<SlateNode[] | null>(null)
     const [stats, setStats] = React.useState<DiffStats>({ added: 0, removed: 0, modified: 0, unchanged: 0 })
     const [loadError, setLoadError] = React.useState(false)
 
@@ -113,7 +125,13 @@ export const WakaDiffViewer = React.forwardRef<HTMLDivElement, WakaDiffViewerPro
           const diffModule = await import("@platejs/diff")
 
           if (diffModule.computeDiff) {
-            const result = diffModule.computeDiff(original, modified)
+            // `computeDiff` is typed against the canonical `Descendant` type;
+            // its output is annotated with diff markers (`diff`/`diffOperation`)
+            // captured by the structural `SlateNode` shape used for rendering.
+            const result = diffModule.computeDiff(
+              original as Parameters<typeof diffModule.computeDiff>[0],
+              modified as Parameters<typeof diffModule.computeDiff>[1],
+            ) as unknown as SlateNode[]
             if (!cancelled) {
               setDiffResult(result)