@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,657 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  CheckCircle2,
+  GitBranch,
+  Users,
+  AlertTriangle,
+  Shield,
+  Zap,
+  Database,
+  type LucideIcon,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+/** A predefined spec block template */
+export interface SpecBlockTemplate {
+  /** Unique key */
+  key: string
+  /** Display label */
+  label: string
+  /** Description for the slash menu */
+  description: string
+  /** Lucide icon */
+  icon: LucideIcon
+  /** Category for grouping */
+  category: string
+  /** Generates the Slate nodes for this block */
+  createNodes: () => SlateNode[]
+}
+
+export interface WakaSpecEditorProps {
+  /** Initial Slate content */
+  value?: SlateNode[]
+  /** Change callback */
+  onChange?: (value: SlateNode[]) => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder */
+  placeholder?: string
+  /** CSS class */
+  className?: string
+  /** Editor CSS class */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Error */
+  error?: string
+  /** Custom spec block templates (merged with defaults) */
+  customTemplates?: SpecBlockTemplate[]
+  /** Show the template insertion sidebar */
+  showTemplateSidebar?: boolean
+  /** Enable AI features for spec generation */
+  enableAI?: boolean
+  /** AI endpoint */
+  aiEndpoint?: string
+  /** Document title */
+  title?: string
+  /** Title change callback */
+  onTitleChange?: (title: string) => void
+  /** Extra Plate plugins */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to editor instance */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+// ─── Default spec block templates ────────────────────────────────────────────
+
+/** Default specification block templates for WakaStart projects */
+export const DEFAULT_SPEC_TEMPLATES: SpecBlockTemplate[] = [
+  {
+    key: "user-story",
+    label: "User Story",
+    description: "En tant que [role], je veux [action] afin de [benefice]",
+    icon: Users,
+    category: "Fonctionnel",
+    createNodes: () => [
+      { type: "callout", variant: "info", children: [{ text: "" }] },
+      { type: "h3", children: [{ text: "User Story" }] },
+      { type: "p", children: [
+        { text: "En tant que ", bold: true },
+        { text: "[role]" },
+      ]},
+      { type: "p", children: [
+        { text: "Je veux ", bold: true },
+        { text: "[action]" },
+      ]},
+      { type: "p", children: [
+        { text: "Afin de ", bold: true },
+        { text: "[benefice attendu]" },
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "acceptance-criteria",
+    label: "Criteres d'acceptation",
+    description: "Given/When/Then avec scenarios de validation",
+    icon: CheckCircle2,
+    category: "Fonctionnel",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "Criteres d'acceptation" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "th", children: [{ type: "p", children: [{ text: "#", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Scenario", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Given", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "When", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Then", bold: true }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "AC-01" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Nominal" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "L'utilisateur est connecte" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Il clique sur le bouton" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Le resultat s'affiche" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "AC-02" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Erreur" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Le service est indisponible" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Il clique sur le bouton" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Un message d'erreur s'affiche" }] }] },
+        ]},
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "use-case",
+    label: "Cas d'utilisation",
+    description: "Acteur, pre-conditions, flux nominal, flux alternatifs",
+    icon: GitBranch,
+    category: "Fonctionnel",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "Cas d'utilisation : [Nom]" }] },
+      { type: "column_group", children: [
+        { type: "column", children: [
+          { type: "h4", children: [{ text: "ACTEUR" }] },
+          { type: "p", children: [{ text: "[Role utilisateur]" }] },
+          { type: "h4", children: [{ text: "PRE-CONDITIONS" }] },
+          { type: "p", children: [{ text: "- L'utilisateur est authentifie" }] },
+          { type: "p", children: [{ text: "- [Autre condition]" }] },
+          { type: "h4", children: [{ text: "POST-CONDITIONS" }] },
+          { type: "p", children: [{ text: "- [Etat apres execution]" }] },
+        ]},
+        { type: "column", children: [
+          { type: "h4", children: [{ text: "FLUX NOMINAL" }] },
+          { type: "p", children: [{ text: "1. L'utilisateur accede a la page" }] },
+          { type: "p", children: [{ text: "2. Le systeme affiche le formulaire" }] },
+          { type: "p", children: [{ text: "3. L'utilisateur remplit et soumet" }] },
+          { type: "p", children: [{ text: "4. Le systeme enregistre et confirme" }] },
+          { type: "h4", children: [{ text: "FLUX ALTERNATIFS" }] },
+          { type: "p", children: [{ text: "3a. Donnees invalides : erreur affichee" }] },
+        ]},
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "api-endpoint",
+    label: "Endpoint API",
+    description: "Specification d'un endpoint REST avec requete/reponse",
+    icon: Zap,
+    category: "Technique",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "API: [METHOD] /api/v1/[resource]" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "th", children: [{ type: "p", children: [{ text: "Propriete", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Valeur", bold: true }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Methode" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "GET | POST | PUT | DELETE" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Authentification" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Bearer JWT" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Permissions" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "[ROLE_REQUIRED]" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Rate Limit" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "100 req/min" }] }] },
+        ]},
+      ]},
+      { type: "h4", children: [{ text: "CORPS DE LA REQUETE" }] },
+      { type: "blockquote", children: [{ text: "{ \"field\": \"value\" }" }] },
+      { type: "h4", children: [{ text: "REPONSE 200" }] },
+      { type: "blockquote", children: [{ text: "{ \"data\": { ... }, \"meta\": { \"total\": 42 } }" }] },
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "data-model",
+    label: "Modele de donnees",
+    description: "Schema d'entite avec champs, types et contraintes",
+    icon: Database,
+    category: "Technique",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "Modele : [NomEntite]" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "th", children: [{ type: "p", children: [{ text: "Champ", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Type", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Nullable", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Description", bold: true }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "id" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "UUID" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Non" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Identifiant unique" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "createdAt" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "DateTime" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Non" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Date de creation" }] }] },
+        ]},
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "security-requirements",
+    label: "Exigences de securite",
+    description: "Regles OWASP, chiffrement, acces, conformite",
+    icon: Shield,
+    category: "Non-fonctionnel",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "Exigences de securite" }] },
+      { type: "callout", variant: "warning", children: [{ text: "Section obligatoire pour les modules HDS et les donnees sensibles" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "th", children: [{ type: "p", children: [{ text: "Categorie", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Exigence", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Niveau", bold: true }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Authentification" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "OAuth2 PKCE via Keycloak" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Obligatoire" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Chiffrement" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "AES-256-GCM au repos, TLS 1.3 en transit" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Obligatoire" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Audit" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "TracingInterceptor sur toutes les operations" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Obligatoire" }] }] },
+        ]},
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "risk-assessment",
+    label: "Risques et mitigations",
+    description: "Matrice de risques projet avec probabilite et impact",
+    icon: AlertTriangle,
+    category: "Non-fonctionnel",
+    createNodes: () => [
+      { type: "h3", children: [{ text: "Analyse des risques" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "th", children: [{ type: "p", children: [{ text: "Risque", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Probabilite", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Impact", bold: true }] }] },
+          { type: "th", children: [{ type: "p", children: [{ text: "Mitigation", bold: true }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "[Description du risque]" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Moyen" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Haut" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "[Plan de mitigation]" }] }] },
+        ]},
+      ]},
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+  {
+    key: "spec-header",
+    label: "En-tete de specification",
+    description: "Bloc d'en-tete avec version, auteur, statut, date",
+    icon: BookOpen,
+    category: "Document",
+    createNodes: () => [
+      { type: "h1", children: [{ text: "[Titre de la specification]" }] },
+      { type: "table", children: [
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Version", bold: true }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "1.0.0" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Statut", bold: true }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Brouillon" }] }] },
+        ]},
+        { type: "tr", children: [
+          { type: "td", children: [{ type: "p", children: [{ text: "Auteur", bold: true }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "[Nom]" }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: "Date", bold: true }] }] },
+          { type: "td", children: [{ type: "p", children: [{ text: new Date().toLocaleDateString("fr-FR") }] }] },
+        ]},
+      ]},
+      { type: "h2", children: [{ text: "CONTEXTE" }] },
+      { type: "p", children: [{ text: "[Description du contexte et des objectifs]" }] },
+      { type: "h2", children: [{ text: "PERIMETRE" }] },
+      { type: "p", children: [{ text: "[Ce qui est inclus et exclu du perimetre]" }] },
+      { type: "p", children: [{ text: "" }] },
+    ],
+  },
+]
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaSpecEditor -- Specification-oriented document editor.
+ *
+ * Extends the standard WakaEditor with domain-specific block templates
+ * for functional specifications, technical specs, and project documentation.
+ *
+ * Templates include: User Story, Acceptance Criteria, Use Case, API Endpoint,
+ * Data Model, Security Requirements, Risk Assessment, and Spec Header.
+ *
+ * Each template generates pre-formatted Slate nodes with placeholders
+ * that the user can fill in. Apps can register custom templates.
+ *
+ * Designed for WakaStart (project specs), WakaSign (contract specs),
+ * WakaPress (content specs), and TopFlix (content guidelines).
+ *
+ * @example
+ * ```tsx
+ * <WakaSpecEditor
+ *   title="Specification fonctionnelle - Module HDS"
+ *   onTitleChange={setTitle}
+ *   showTemplateSidebar
+ *   enableAI
+ *   aiEndpoint="/api/ai/completion"
+ *   value={content}
+ *   onChange={setContent}
+ * />
+ * ```
+ */
+export const WakaSpecEditor = React.forwardRef<HTMLDivElement, WakaSpecEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      readOnly = false,
+      placeholder = "Commencez votre specification...",
+      className,
+      editorClassName,
+      minHeight = 500,
+      label,
+      description,
+      error,
+      customTemplates = [],
+      showTemplateSidebar = true,
+      enableAI = false,
+      aiEndpoint,
+      title,
+      onTitleChange,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [bundle, setBundle] = React.useState<any>(null)
+    const [loadError, setLoadError] = React.useState(false)
+    const internalEditorRef = React.useRef<unknown>(null)
+    const effectiveEditorRef = editorRef ?? internalEditorRef
+
+    const allTemplates = React.useMemo(
+      () => [...DEFAULT_SPEC_TEMPLATES, ...customTemplates],
+      [customTemplates]
+    )
+
+    // Group templates by category
+    const templateGroups = React.useMemo(() => {
+      const map = new Map<string, SpecBlockTemplate[]>()
+      for (const tpl of allTemplates) {
+        const cat = tpl.category || "Autre"
+        if (!map.has(cat)) map.set(cat, [])
+        map.get(cat)!.push(tpl)
+      }
+      return map
+    }, [allTemplates])
+
+    // ── Load Plate ────────────────────────────────────────────────────────
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const [plateReact, basicNodes, tableModule, layoutModule, calloutModule, linkModule, indentModule] =
+            await Promise.all([
+              import("platejs/react"),
+              import("@platejs/basic-nodes/react"),
+              import("@platejs/table/react"),
+              import("@platejs/layout/react"),
+              import("@platejs/callout/react"),
+              import("@platejs/link/react"),
+              import("@platejs/indent/react"),
+            ])
+
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const plugins: any[] = [
+            basicNodes.BoldPlugin, basicNodes.ItalicPlugin, basicNodes.UnderlinePlugin,
+            basicNodes.StrikethroughPlugin, basicNodes.CodePlugin, basicNodes.HighlightPlugin,
+            basicNodes.SuperscriptPlugin, basicNodes.SubscriptPlugin,
+            basicNodes.H1Plugin, basicNodes.H2Plugin, basicNodes.H3Plugin,
+            basicNodes.H4Plugin, basicNodes.H5Plugin, basicNodes.H6Plugin,
+            basicNodes.BlockquotePlugin,
+            tableModule.TablePlugin, tableModule.TableRowPlugin,
+            tableModule.TableCellPlugin, tableModule.TableCellHeaderPlugin,
+            layoutModule.ColumnPlugin, layoutModule.ColumnItemPlugin,
+            calloutModule.CalloutPlugin,
+            linkModule.LinkPlugin.configure({
+              options: { allowedSchemes: ["http", "https", "mailto", "tel"] },
+            }),
+            indentModule.IndentPlugin,
+          ]
+
+          // Optional: TOC
+          try { const { TocPlugin } = await import("@platejs/toc/react"); plugins.push(TocPlugin) } catch { /* */ }
+
+          // Optional: Selection
+          try { const { BlockSelectionPlugin } = await import("@platejs/selection/react"); plugins.push(BlockSelectionPlugin) } catch { /* */ }
+
+          // Optional: Markdown
+          try { const { MarkdownPlugin } = await import("@platejs/markdown"); plugins.push(MarkdownPlugin) } catch { /* */ }
+
+          // Optional: AI
+          if (enableAI && aiEndpoint) {
+            try {
+              const { AIPlugin, AIChatPlugin } = await import("@platejs/ai/react")
+              plugins.push(
+                AIPlugin,
+                AIChatPlugin.configure({
+                  options: { chat: { api: aiEndpoint, body: { system: "You are a specification writing assistant for a PaaS platform." } } },
+                }),
+              )
+            } catch { /* */ }
+          }
+
+          if (!cancelled) {
+            setBundle({
+              Plate: plateReact.Plate,
+              PlateContent: plateReact.PlateContent,
+              usePlateEditor: plateReact.usePlateEditor,
+              plugins,
+            })
+          }
+        } catch (err) {
+          console.error("[WakaSpecEditor] Failed to load:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      load()
+      return () => { cancelled = true }
+    }, [enableAI, aiEndpoint])
+
+    // ── Insert template ───────────────────────────────────────────────────
+    const handleInsertTemplate = React.useCallback(
+      (template: SpecBlockTemplate) => {
+        const nodes = template.createNodes()
+        const currentValue = value ?? []
+        const newValue = [...currentValue, ...nodes]
+        onChange?.(newValue)
+      },
+      [value, onChange]
+    )
+
+    // ── Render ────────────────────────────────────────────────────────────
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <div className={cn(
+          "flex border rounded-lg overflow-hidden",
+          error && "border-destructive",
+        )}>
+          {/* Template sidebar */}
+          {showTemplateSidebar && !readOnly && (
+            <aside className="w-52 shrink-0 border-r bg-muted/20 hidden md:block">
+              <div className="p-3 border-b">
+                <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                  Blocs specification
+                </h4>
+              </div>
+              <div className="p-2 space-y-3 max-h-[600px] overflow-y-auto">
+                {Array.from(templateGroups.entries()).map(([category, templates]) => (
+                  <div key={category}>
+                    <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-1 mb-1">
+                      {category}
+                    </div>
+                    <div className="space-y-0.5">
+                      {templates.map((tpl) => {
+                        const Icon = tpl.icon
+                        return (
+                          <button
+                            key={tpl.key}
+                            type="button"
+                            onClick={() => handleInsertTemplate(tpl)}
+                            className={cn(
+                              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left",
+                              "text-xs transition-colors cursor-pointer",
+                              "hover:bg-accent/50 text-muted-foreground hover:text-foreground",
+                            )}
+                            title={tpl.description}
+                          >
+                            <Icon className="h-3.5 w-3.5 shrink-0" />
+                            <span className="truncate">{tpl.label}</span>
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </aside>
+          )}
+
+          {/* Editor */}
+          <div className="flex-1 min-w-0">
+            {/* Title */}
+            {(title !== undefined || onTitleChange) && (
+              <div className="border-b px-6 py-4">
+                <input
+                  type="text"
+                  value={title ?? ""}
+                  onChange={(e) => onTitleChange?.(e.target.value)}
+                  placeholder="Titre de la specification"
+                  readOnly={readOnly}
+                  className={cn(
+                    "w-full bg-transparent text-xl font-bold text-foreground",
+                    "placeholder:text-muted-foreground/50 focus:outline-none",
+                  )}
+                />
+              </div>
+            )}
+
+            {/* Plate editor */}
+            {bundle ? (
+              <SpecEditorInner
+                bundle={bundle}
+                value={value}
+                onChange={onChange}
+                readOnly={readOnly}
+                placeholder={placeholder}
+                editorClassName={editorClassName}
+                minHeight={minHeight}
+                extraPlugins={extraPlugins}
+                editorRef={effectiveEditorRef}
+              />
+            ) : (
+              <div className="relative" style={{ minHeight }}>
+                <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+                  <span className="text-sm text-muted-foreground animate-pulse">
+                    {loadError ? "Erreur de chargement" : "Chargement de l'editeur..."}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaSpecEditor.displayName = "WakaSpecEditor"
+
+// ─── Inner Plate component ──────────────────────────────────────────────────
+
+function SpecEditorInner({
+  bundle: { Plate, PlateContent, usePlateEditor, plugins },
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  editorClassName,
+  minHeight,
+  extraPlugins,
+  editorRef,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  bundle: any
+  value?: SlateNode[]
+  onChange?: (value: SlateNode[]) => void
+  readOnly?: boolean
+  placeholder?: string
+  editorClassName?: string
+  minHeight?: number
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}) {
+  const allPlugins = React.useMemo(
+    () => [...plugins, ...(extraPlugins ?? [])],
+    [plugins, extraPlugins]
+  )
+
+  const editor = usePlateEditor({
+    plugins: allPlugins,
+    value: value ?? [{ type: "p", children: [{ text: "" }] }],
+  })
+
+  React.useEffect(() => {
+    if (editorRef) editorRef.current = editor
+  }, [editor, editorRef])
+
+  return (
+    <Plate
+      editor={editor}
+      onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+      readOnly={readOnly}
+    >
+      <div style={{ minHeight }}>
+        <PlateContent
+          placeholder={placeholder}
+          readOnly={readOnly}
+          className={cn(
+            "prose prose-sm max-w-none px-6 py-4",
+            "focus-within:outline-none",
+            "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+            editorClassName,
+          )}
+        />
+      </div>
+    </Plate>
+  )
+}

package/src/components/index.ts

@@ -716,23 +716,6 @@ export * from './waka-doc-nav'
 export * from './waka-doc-search'
 export * from './waka-doc-version'
 export * from './waka-doc-toolbar'
-// waka-doc-breadcrumb: BreadcrumbItem conflicts with waka-breadcrumb, re-export only the component
-export { WakaDocBreadcrumb, type WakaDocBreadcrumbProps } from './waka-doc-breadcrumb'
+export * from './waka-doc-breadcrumb'
 export * from './waka-doc-table'
 export * from './waka-doc-renderer'
-
-// WakaProject Sprint Components
-export * from './waka-hour-balance-badge'
-export * from './waka-actor-badge'
-export * from './waka-step-comment-bubble'
-export * from './waka-step-comment-panel'
-export * from './waka-time-entry-dialog'
-export * from './waka-time-tracking-flyover'
-export * from './waka-document-preview-popup'
-export * from './waka-document-flyover'
-export * from './waka-ai-assistant-button'
-export * from './waka-step-permission-matrix'
-export * from './waka-actors-list'
-export * from './waka-project-stats-header'
-export * from './waka-hour-pack-dialog'
-export * from './waka-hour-consumption-table'

package/dist/chunk-BDDJmn7V.js

@@ -1 +0,0 @@
-var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});