@wakastellar/ui 3.3.3 → 3.5.2

package/src/blocks/login/index.tsx

@@ -7,13 +7,7 @@ import { Input } from "../../components/input"
 import { Label } from "../../components/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Separator } from "../../components/separator"
-import { Mail, Apple } from "lucide-react"
-
-// Inline SVG for renamed/removed lucide icons
-const Github = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
-const Linkedin = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
-const Facebook = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-const Instagram = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
+import { Globe, Mail, Apple, ExternalLink, Users, Camera } from "lucide-react"
 import { useTheme } from "../../context/theme-provider"
 import type { LoginConfig } from "./types"
 
@@ -44,9 +38,9 @@ export interface LoginProps {
   onSSOMicrosoft?: () => void
   onSSOApple?: () => void
   onSSOLinkedIn?: () => void
-  onSSOGithub?: () => void
-  onSSOFacebook?: () => void
-  onSSOInstagram?: () => void
+  onSSOGlobe?: () => void
+  onSSOUsers?: () => void
+  onSSOCamera?: () => void
   onSSOFranceConnect?: () => void
   /** Afficher la connexion sociale (déprécié, utilise config.signup_options) */
   showSocialLogin?: boolean
@@ -69,9 +63,9 @@ export function Login({
   onSSOMicrosoft,
   onSSOApple,
   onSSOLinkedIn,
-  onSSOGithub,
-  onSSOFacebook,
-  onSSOInstagram,
+  onSSOGlobe,
+  onSSOUsers,
+  onSSOCamera,
   onSSOFranceConnect,
   showSocialLogin = false,
   className,
@@ -119,8 +113,8 @@ export function Login({
     // Mode legacy (sans config)
     if (!config?.signup_options) {
       if (showSocialLogin) {
-        if (onSSOGithub) {
-          ssoList.push({ id: "github", label: "GitHub", icon: <Github className="h-4 w-4" />, onClick: onSSOGithub })
+        if (onSSOGlobe) {
+          ssoList.push({ id: "github", label: "GitHub", icon: <Globe className="h-4 w-4" />, onClick: onSSOGlobe })
         }
         if (onSSOGoogle) {
           ssoList.push({ id: "google", label: "Google", icon: <Mail className="h-4 w-4" />, onClick: onSSOGoogle })
@@ -143,23 +137,23 @@ export function Login({
       ssoList.push({ id: "apple", label: "Apple", icon: <Apple className="h-4 w-4" />, onClick: onSSOApple })
     }
     if (options.allow_sso_linkedIn) {
-      ssoList.push({ id: "linkedin", label: "LinkedIn", icon: <Linkedin className="h-4 w-4" />, onClick: onSSOLinkedIn })
+      ssoList.push({ id: "linkedin", label: "LinkedIn", icon: <ExternalLink className="h-4 w-4" />, onClick: onSSOLinkedIn })
     }
     if (options.allow_sso_github) {
-      ssoList.push({ id: "github", label: "GitHub", icon: <Github className="h-4 w-4" />, onClick: onSSOGithub })
+      ssoList.push({ id: "github", label: "GitHub", icon: <Globe className="h-4 w-4" />, onClick: onSSOGlobe })
     }
     if (options.allow_sso_facebook) {
-      ssoList.push({ id: "facebook", label: "Facebook", icon: <Facebook className="h-4 w-4" />, onClick: onSSOFacebook })
+      ssoList.push({ id: "facebook", label: "Users", icon: <Users className="h-4 w-4" />, onClick: onSSOUsers })
     }
     if (options.allow_sso_instagram) {
-      ssoList.push({ id: "instagram", label: "Instagram", icon: <Instagram className="h-4 w-4" />, onClick: onSSOInstagram })
+      ssoList.push({ id: "instagram", label: "Camera", icon: <Camera className="h-4 w-4" />, onClick: onSSOCamera })
     }
     if (options.allow_sso_france_connect) {
       ssoList.push({ id: "france-connect", label: "France Connect", icon: <Mail className="h-4 w-4" />, onClick: onSSOFranceConnect })
     }
     
     return ssoList
-  }, [config?.signup_options, showSocialLogin, onSSOGoogle, onSSOMicrosoft, onSSOApple, onSSOLinkedIn, onSSOGithub, onSSOFacebook, onSSOInstagram, onSSOFranceConnect])
+  }, [config?.signup_options, showSocialLogin, onSSOGoogle, onSSOMicrosoft, onSSOApple, onSSOLinkedIn, onSSOGlobe, onSSOUsers, onSSOCamera, onSSOFranceConnect])
 
   // Vérifie si la connexion classique est autorisée
   // Si config n'est pas fourni, on autorise le login par défaut

package/src/blocks/profile/index.tsx

@@ -33,13 +33,10 @@ import {
   X,
   Loader2,
   Link as LinkIcon,
+  Share2,
+  ExternalLink,
 } from "lucide-react"
 
-// Inline SVG for renamed/removed lucide icons
-const Twitter = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
-const Github = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
-const Linkedin = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
-
 // ============================================
 // TYPES
 // ============================================
@@ -330,11 +327,11 @@ function SocialLinks({ links, isEditing }: SocialLinksProps) {
   const getIcon = (type: ProfileSocialLink["type"]) => {
     switch (type) {
       case "twitter":
-        return <Twitter className="h-4 w-4" />
+        return <Share2 className="h-4 w-4" />
       case "github":
-        return <Github className="h-4 w-4" />
+        return <Globe className="h-4 w-4" />
       case "linkedin":
-        return <Linkedin className="h-4 w-4" />
+        return <ExternalLink className="h-4 w-4" />
       case "website":
         return <Globe className="h-4 w-4" />
       default:

package/src/blocks/sidebar/index.tsx

@@ -596,8 +596,6 @@ export function WakaSidebar({
     "bg-[var(--sidebar-bg)] text-[var(--sidebar-text)]",
     "[&_.bg-sidebar-active]:bg-[var(--sidebar-active)]",
     "[&_.text-sidebar-active-foreground]:text-[var(--sidebar-active-foreground)]",
-    "[&_.text-sidebar-foreground\\/70]:text-[var(--sidebar-text)]",
-    "[&_.text-sidebar-foreground\\/70]:opacity-70",
     "[&_.border-sidebar-active]:border-[var(--sidebar-active)]",
     contentClassName
   )

package/src/components/dropdown-menu/DropdownMenu.stories.tsx

@@ -27,7 +27,7 @@ import {
   MessageSquare,
   PlusCircle,
   Plus,
-  Github,
+  Globe,
   LifeBuoy,
   Cloud,
   LogOut,
@@ -190,7 +190,7 @@ export const WithSubmenu: Story = {
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem>
-          <Github className="mr-2 h-4 w-4" />
+          <Globe className="mr-2 h-4 w-4" />
           <span>GitHub</span>
         </DropdownMenuItem>
         <DropdownMenuItem>

package/src/components/editor/blocks/index.ts

@@ -0,0 +1,182 @@
+/**
+ * WakaStart Editor Blocks — Custom Plate.js block elements for the WakaStart ecosystem.
+ *
+ * These blocks extend the standard Plate editor with domain-specific elements
+ * designed for PaaS project management, specification writing, and technical documentation.
+ *
+ * Usage:
+ * ```ts
+ * import { WakaUserStoryBlock, createUserStoryPlugin } from "@wakastellar/ui/editor"
+ * ```
+ *
+ * Each block provides:
+ * - A React component for rendering in the Plate editor
+ * - A node factory function for creating Slate nodes
+ * - A plugin factory for registering with the Plate editor
+ * - Full TypeScript types for the Slate element shape
+ */
+
+// ── User Story Block ────────────────────────────────────────────────────────
+export {
+  WakaUserStoryBlock,
+  createUserStoryNodes,
+  createUserStoryPlugin,
+  USER_STORY_BLOCK_TYPE,
+  type UserStoryElement,
+  type WakaUserStoryBlockProps,
+} from "./waka-user-story-block"
+
+// ── Acceptance Criteria Block ───────────────────────────────────────────────
+export {
+  WakaAcceptanceCriteriaBlock,
+  createAcceptanceCriteriaNodes,
+  createAcceptanceCriteriaPlugin,
+  ACCEPTANCE_CRITERIA_BLOCK_TYPE,
+  type AcceptanceCriterion,
+  type AcceptanceCriteriaElement,
+  type WakaAcceptanceCriteriaBlockProps,
+} from "./waka-acceptance-criteria-block"
+
+// ── API Endpoint Block ──────────────────────────────────────────────────────
+export {
+  WakaApiEndpointBlock,
+  createApiEndpointNodes,
+  createApiEndpointPlugin,
+  API_ENDPOINT_BLOCK_TYPE,
+  type HttpMethod,
+  type ApiParam,
+  type ApiResponse,
+  type ApiEndpointElement,
+  type WakaApiEndpointBlockProps,
+} from "./waka-api-endpoint-block"
+
+// ── Diagram Block ───────────────────────────────────────────────────────────
+export {
+  WakaDiagramBlock,
+  createDiagramNodes,
+  createDiagramPlugin,
+  DIAGRAM_BLOCK_TYPE,
+  type DiagramSyntax,
+  type DiagramElement,
+  type WakaDiagramBlockProps,
+} from "./waka-diagram-block"
+
+// ── AI Assist Block ─────────────────────────────────────────────────────────
+export {
+  WakaAiAssistBlock,
+  createAiAssistNodes,
+  createAiAssistPlugin,
+  AI_ASSIST_BLOCK_TYPE,
+  type AiAssistStatus,
+  type AiAssistElement,
+  type WakaAiAssistBlockProps,
+} from "./waka-ai-assist-block"
+
+// ── Version Diff Block ──────────────────────────────────────────────────────
+export {
+  WakaVersionDiffBlock,
+  createVersionDiffNodes,
+  createVersionDiffPlugin,
+  VERSION_DIFF_BLOCK_TYPE,
+  type DiffLine,
+  type DiffHunk,
+  type VersionDiffElement,
+  type WakaVersionDiffBlockProps,
+} from "./waka-version-diff-block"
+
+// ── Embed Block ─────────────────────────────────────────────────────────────
+export {
+  WakaEmbedBlock,
+  createEmbedNodes,
+  createEmbedPlugin,
+  detectEmbedProvider,
+  resolveEmbedUrl,
+  EMBED_BLOCK_TYPE,
+  type EmbedProvider,
+  type EmbedElement,
+  type WakaEmbedBlockProps,
+} from "./waka-embed-block"
+
+// ── Code Playground Block ───────────────────────────────────────────────────
+export {
+  WakaCodePlaygroundBlock,
+  createCodePlaygroundNodes,
+  createCodePlaygroundPlugin,
+  CODE_PLAYGROUND_BLOCK_TYPE,
+  type PlaygroundLanguage,
+  type ExecutionStatus,
+  type CodePlaygroundElement,
+  type WakaCodePlaygroundBlockProps,
+} from "./waka-code-playground-block"
+
+// ── Comment Thread Block ────────────────────────────────────────────────────
+export {
+  WakaCommentThreadBlock,
+  createCommentThreadNodes,
+  createCommentThreadPlugin,
+  COMMENT_THREAD_BLOCK_TYPE,
+  type ThreadComment,
+  type ThreadStatus,
+  type CommentThreadElement,
+  type WakaCommentThreadBlockProps,
+} from "./waka-comment-thread-block"
+
+// ── Slash Menu with WakaStart Blocks ────────────────────────────────────────
+export {
+  WakaSlashMenuBlock,
+  getAllWakaSlashCommands,
+  createWakaSlashPlugins,
+  WAKA_BLOCK_COMMANDS,
+  type WakaSlashBlockCommand,
+  type WakaSlashMenuBlockProps,
+} from "./waka-slash-menu-block"
+
+// ── Convenience: load all block plugins at once ─────────────────────────────
+
+/**
+ * Loads all WakaStart block plugins at once.
+ * Returns an array of Plate plugins to spread into your editor configuration.
+ *
+ * @example
+ * ```ts
+ * const blockPlugins = await loadAllWakaBlockPlugins()
+ * const editor = usePlateEditor({
+ *   plugins: [...corePlugins, ...blockPlugins],
+ * })
+ * ```
+ */
+export async function loadAllWakaBlockPlugins(options?: {
+  /** Mermaid/diagram render function */
+  diagramRenderer?: (source: string, syntax: string) => Promise<string>
+  /** AI generation function */
+  aiGenerator?: (prompt: string) => Promise<string>
+  /** Code execution function */
+  codeExecutor?: (code: string, language: string) => Promise<string>
+  /** Current user ID for comments */
+  currentUserId?: string
+  /** Comment reply handler */
+  onCommentReply?: (threadId: string, content: string) => void
+}): Promise<unknown[]> {
+  const plugins: unknown[] = []
+
+  const loaders = [
+    createUserStoryPlugin(),
+    createAcceptanceCriteriaPlugin(),
+    createApiEndpointPlugin(),
+    createDiagramPlugin(options?.diagramRenderer as never),
+    createAiAssistPlugin(options?.aiGenerator),
+    createVersionDiffPlugin(),
+    createEmbedPlugin(),
+    createCodePlaygroundPlugin(options?.codeExecutor as never),
+    createCommentThreadPlugin(options?.currentUserId, options?.onCommentReply),
+  ]
+
+  const results = await Promise.allSettled(loaders)
+  for (const result of results) {
+    if (result.status === "fulfilled" && result.value) {
+      plugins.push(result.value)
+    }
+  }
+
+  return plugins
+}

package/src/components/editor/blocks/waka-acceptance-criteria-block.tsx

@@ -0,0 +1,326 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const ACCEPTANCE_CRITERIA_BLOCK_TYPE = "acceptance_criteria" as const
+
+/** A single acceptance criterion in Gherkin format */
+export interface AcceptanceCriterion {
+  /** Unique ID (e.g. "AC-01") */
+  id: string
+  /** Scenario name */
+  scenario: string
+  /** Given (context / precondition) */
+  given: string
+  /** When (action / trigger) */
+  when: string
+  /** Then (expected result) */
+  then: string
+  /** Whether this criterion has been validated */
+  validated: boolean
+}
+
+/** Slate node for acceptance criteria block */
+export interface AcceptanceCriteriaElement {
+  type: typeof ACCEPTANCE_CRITERIA_BLOCK_TYPE
+  /** Block title */
+  title: string
+  /** List of criteria */
+  criteria: AcceptanceCriterion[]
+  children: Array<{ text: string }>
+}
+
+export interface WakaAcceptanceCriteriaBlockProps extends PlateElementProps {
+  element?: AcceptanceCriteriaElement & Record<string, unknown>
+  /** Whether the block is read-only */
+  readOnly?: boolean
+}
+
+// ============================================================================
+// Gherkin keyword badge
+// ============================================================================
+
+function GherkinKeyword({ keyword, variant }: { keyword: string; variant: "given" | "when" | "then" }) {
+  const styles = {
+    given: "bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-400",
+    when: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",
+    then: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400",
+  }
+
+  return (
+    <span className={cn(
+      "inline-block text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded shrink-0 w-[52px] text-center",
+      styles[variant]
+    )}>
+      {keyword}
+    </span>
+  )
+}
+
+// ============================================================================
+// Criterion Row
+// ============================================================================
+
+interface CriterionRowProps {
+  criterion: AcceptanceCriterion
+  index: number
+  readOnly?: boolean
+}
+
+function CriterionRow({ criterion, index, readOnly }: CriterionRowProps) {
+  const [isExpanded, setIsExpanded] = React.useState(true)
+
+  return (
+    <div className={cn(
+      "rounded-lg border transition-all duration-200",
+      criterion.validated
+        ? "border-emerald-200 dark:border-emerald-800/40 bg-emerald-50/30 dark:bg-emerald-950/10"
+        : "border-border bg-card/50"
+    )}>
+      {/* Header */}
+      <div className="flex items-center gap-3 px-3 py-2">
+        {/* Checkbox */}
+        <button
+          type="button"
+          disabled={readOnly}
+          className={cn(
+            "flex-shrink-0 h-5 w-5 rounded-md border-2 flex items-center justify-center transition-all duration-200",
+            criterion.validated
+              ? "bg-emerald-500 border-emerald-500 text-white"
+              : "border-border hover:border-emerald-400",
+            readOnly && "cursor-default"
+          )}
+          aria-label={criterion.validated ? "Mark as not validated" : "Mark as validated"}
+          aria-checked={criterion.validated}
+          role="checkbox"
+        >
+          {criterion.validated && (
+            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          )}
+        </button>
+
+        {/* ID badge */}
+        <span className="text-[10px] font-mono font-bold text-muted-foreground bg-muted px-1.5 py-0.5 rounded shrink-0">
+          {criterion.id}
+        </span>
+
+        {/* Scenario name */}
+        <span className={cn(
+          "text-sm font-medium flex-1 min-w-0 truncate",
+          criterion.validated && "line-through text-muted-foreground"
+        )}>
+          {criterion.scenario || "Unnamed scenario"}
+        </span>
+
+        {/* Toggle */}
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-muted-foreground hover:text-foreground transition-colors p-0.5"
+          aria-label={isExpanded ? "Collapse" : "Expand"}
+        >
+          <svg
+            className={cn("h-3.5 w-3.5 transition-transform duration-200", isExpanded && "rotate-180")}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Gherkin steps */}
+      {isExpanded && (
+        <div className="px-3 pb-3 pt-1 space-y-1.5 border-t border-border/50">
+          <div className="flex items-start gap-2">
+            <GherkinKeyword keyword="Given" variant="given" />
+            <span className="text-sm text-foreground/80 pt-0.5">
+              {criterion.given || <span className="italic text-muted-foreground">precondition...</span>}
+            </span>
+          </div>
+          <div className="flex items-start gap-2">
+            <GherkinKeyword keyword="When" variant="when" />
+            <span className="text-sm text-foreground/80 pt-0.5">
+              {criterion.when || <span className="italic text-muted-foreground">action...</span>}
+            </span>
+          </div>
+          <div className="flex items-start gap-2">
+            <GherkinKeyword keyword="Then" variant="then" />
+            <span className="text-sm text-foreground/80 pt-0.5">
+              {criterion.then || <span className="italic text-muted-foreground">expected result...</span>}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaAcceptanceCriteriaBlock - A Plate.js block for acceptance criteria in
+ * Gherkin format (Given/When/Then). Each criterion has a checkbox for
+ * validation tracking.
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [ACCEPTANCE_CRITERIA_BLOCK_TYPE]: WakaAcceptanceCriteriaBlock,
+ * }
+ * ```
+ */
+export function WakaAcceptanceCriteriaBlock({
+  attributes,
+  children,
+  element,
+  className,
+}: WakaAcceptanceCriteriaBlockProps) {
+  const el = element as AcceptanceCriteriaElement | undefined
+  const criteria = el?.criteria || []
+  const title = el?.title || "Acceptance Criteria"
+
+  const validatedCount = criteria.filter((c) => c.validated).length
+  const totalCount = criteria.length
+  const progress = totalCount > 0 ? (validatedCount / totalCount) * 100 : 0
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-4 rounded-lg overflow-hidden",
+        "border border-border",
+        "bg-card/30",
+        "shadow-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
+        <div className="flex items-center gap-2">
+          <svg
+            className="h-4 w-4 text-emerald-600 dark:text-emerald-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+          </svg>
+          <span className="text-xs font-bold uppercase tracking-wider text-foreground">
+            {title}
+          </span>
+        </div>
+
+        {/* Progress */}
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-medium text-muted-foreground">
+            {validatedCount}/{totalCount}
+          </span>
+          <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
+            <div
+              className="h-full bg-emerald-500 rounded-full transition-all duration-500"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Criteria list */}
+      <div className="p-3 space-y-2">
+        {criteria.length > 0 ? (
+          criteria.map((criterion, index) => (
+            <CriterionRow
+              key={criterion.id}
+              criterion={criterion}
+              index={index}
+              readOnly
+            />
+          ))
+        ) : (
+          <div className="py-6 text-center text-sm text-muted-foreground italic">
+            No acceptance criteria defined yet.
+          </div>
+        )}
+      </div>
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaAcceptanceCriteriaBlock.displayName = "WakaAcceptanceCriteriaBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+/**
+ * Creates Slate nodes for an acceptance criteria block.
+ */
+export function createAcceptanceCriteriaNodes(options?: {
+  title?: string
+  criteria?: AcceptanceCriterion[]
+}): AcceptanceCriteriaElement[] {
+  return [
+    {
+      type: ACCEPTANCE_CRITERIA_BLOCK_TYPE,
+      title: options?.title || "Acceptance Criteria",
+      criteria: options?.criteria || [
+        {
+          id: "AC-01",
+          scenario: "Nominal case",
+          given: "The user is authenticated",
+          when: "They perform the action",
+          then: "The expected result is displayed",
+          validated: false,
+        },
+        {
+          id: "AC-02",
+          scenario: "Error case",
+          given: "The service is unavailable",
+          when: "They perform the action",
+          then: "An error message is displayed",
+          validated: false,
+        },
+      ],
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+/**
+ * Creates a Plate plugin for acceptance criteria blocks.
+ */
+export async function createAcceptanceCriteriaPlugin() {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: ACCEPTANCE_CRITERIA_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: ACCEPTANCE_CRITERIA_BLOCK_TYPE,
+        component: WakaAcceptanceCriteriaBlock,
+      },
+    })
+  } catch {
+    console.warn("[WakaAcceptanceCriteriaBlock] platejs not installed")
+    return null
+  }
+}