@docubook/mdx 1.0.0 → 1.1.0

package/dist/core/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/core/components/Accordion.tsx
-import { useContext, useState as useState2 } from "react";
+import { useContext, useId as useId2, useState as useState2 } from "react";
 import { ChevronRight } from "lucide-react";
 import * as Icons from "lucide-react";
 
@@ -30,7 +30,24 @@ function AccordionGroupProvider({ children }) {
 
 // src/core/components/Accordion.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var accordionDefaultClasses = {
+  rootStandalone: "rounded-lg border shadow-sm",
+  rootInGroup: "border-border border-b last:border-b-0",
+  button: "bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start transition-colors",
+  chevron: "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200",
+  chevronOpen: "rotate-90",
+  icon: "text-foreground h-4 w-4 shrink-0",
+  title: "text-foreground m-0! text-base font-medium",
+  contentGrid: "grid transition-[grid-template-rows] duration-200 ease-out",
+  contentGridOpen: "grid-rows-[1fr]",
+  contentGridClosed: "grid-rows-[0fr]",
+  contentOverflow: "overflow-hidden",
+  contentBody: "dark:bg-muted/10 bg-muted/15 px-4 py-3"
+};
 function Accordion({ title, children, icon }) {
+  const baseId = useId2();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
   const groupContext = useContext(AccordionGroupContext);
   const isInGroup = groupContext?.inGroup === true;
   const groupOpen = groupContext?.openTitle === title;
@@ -48,9 +65,11 @@ function Accordion({ title, children, icon }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-docubook": "accordion",
       className: cn(
-        !isInGroup && "rounded-lg border shadow-sm",
-        isInGroup && "border-border border-b last:border-b-0"
+        "dbk-accordion",
+        !isInGroup && accordionDefaultClasses.rootStandalone,
+        isInGroup && accordionDefaultClasses.rootInGroup
       ),
       children: [
         /* @__PURE__ */ jsxs(
@@ -58,19 +77,25 @@ function Accordion({ title, children, icon }) {
           {
             type: "button",
             onClick: handleToggle,
-            className: "bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start transition-colors",
+            className: cn("dbk-accordion__button", accordionDefaultClasses.button),
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            id: triggerId,
+            "data-docubook": "accordion-button",
             children: [
               /* @__PURE__ */ jsx2(
                 ChevronRight,
                 {
                   className: cn(
-                    "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200",
-                    isOpen && "rotate-90"
-                  )
+                    "dbk-accordion__chevron",
+                    accordionDefaultClasses.chevron,
+                    isOpen && accordionDefaultClasses.chevronOpen
+                  ),
+                  "data-docubook": "accordion-chevron"
                 }
               ),
-              Icon && /* @__PURE__ */ jsx2(Icon, { className: "text-foreground h-4 w-4 shrink-0" }),
-              /* @__PURE__ */ jsx2("h3", { className: "text-foreground m-0! text-base font-medium", children: title })
+              Icon && /* @__PURE__ */ jsx2(Icon, { className: cn("dbk-accordion__icon", accordionDefaultClasses.icon), "data-docubook": "accordion-icon" }),
+              /* @__PURE__ */ jsx2("h3", { className: cn("dbk-accordion__title", accordionDefaultClasses.title), "data-docubook": "accordion-title", children: title })
             ]
           }
         ),
@@ -78,10 +103,15 @@ function Accordion({ title, children, icon }) {
           "div",
           {
             className: cn(
-              "grid transition-[grid-template-rows] duration-200 ease-out",
-              isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              "dbk-accordion__content-grid",
+              accordionDefaultClasses.contentGrid,
+              isOpen ? accordionDefaultClasses.contentGridOpen : accordionDefaultClasses.contentGridClosed
             ),
-            children: /* @__PURE__ */ jsx2("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx2("div", { className: "dark:bg-muted/10 bg-muted/15 px-4 py-3", children }) })
+            "data-docubook": "accordion-content-grid",
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
+            children: /* @__PURE__ */ jsx2("div", { className: cn("dbk-accordion__content-overflow", accordionDefaultClasses.contentOverflow), "data-docubook": "accordion-content-overflow", children: /* @__PURE__ */ jsx2("div", { className: cn("dbk-accordion__content-body", accordionDefaultClasses.contentBody), "data-docubook": "accordion-content-body", children }) })
           }
         )
       ]
@@ -92,8 +122,18 @@ function Accordion({ title, children, icon }) {
 // src/core/components/AccordionGroup.tsx
 import clsx2 from "clsx";
 import { jsx as jsx3 } from "react/jsx-runtime";
+var accordionGroupDefaultClasses = {
+  root: "overflow-hidden rounded-lg border"
+};
 function AccordionGroup({ children, className }) {
-  return /* @__PURE__ */ jsx3(AccordionGroupProvider, { children: /* @__PURE__ */ jsx3("div", { className: clsx2("overflow-hidden rounded-lg border", className), children }) });
+  return /* @__PURE__ */ jsx3(AccordionGroupProvider, { children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: clsx2("dbk-accordion-group", accordionGroupDefaultClasses.root, className),
+      "data-docubook": "accordion-group",
+      children
+    }
+  ) });
 }
 
 // src/core/components/Button.tsx
@@ -167,6 +207,7 @@ function Card({
     "div",
     {
       className: clsx3(
+        "dbk-card",
         "border rounded-lg shadow-sm p-4 transition-all duration-200",
         "bg-card text-card-foreground border-border",
         "hover:bg-accent/5 hover:border-accent/30",
@@ -174,20 +215,21 @@ function Card({
         horizontal ? "flex-row items-start gap-1" : "flex-col space-y-1",
         className
       ),
+      "data-docubook": "card",
       children: [
-        Icon && /* @__PURE__ */ jsx5(Icon, { className: clsx3("w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5") }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx5("div", { className: "text-base font-semibold text-foreground leading-6", children: title }),
-          /* @__PURE__ */ jsx5("div", { className: "text-sm text-muted-foreground -mt-3", children })
+        Icon && /* @__PURE__ */ jsx5(Icon, { className: clsx3("dbk-card__icon", "w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5"), "data-docubook": "card-icon" }),
+        /* @__PURE__ */ jsxs3("div", { className: "dbk-card__body flex-1 min-w-0", "data-docubook": "card-body", children: [
+          /* @__PURE__ */ jsx5("div", { className: "dbk-card__title text-base font-semibold text-foreground leading-6", "data-docubook": "card-title", children: title }),
+          /* @__PURE__ */ jsx5("div", { className: "dbk-card__content text-sm text-muted-foreground -mt-3", "data-docubook": "card-content", children })
         ] })
       ]
     }
   );
   if (!href) return content;
   if (LinkComponent) {
-    return /* @__PURE__ */ jsx5(LinkComponent, { href, className: "no-underline block", children: content });
+    return /* @__PURE__ */ jsx5(LinkComponent, { href, className: "dbk-card__link no-underline block", "data-docubook": "card-link", children: content });
   }
-  return /* @__PURE__ */ jsx5("a", { className: "no-underline block", href, children: content });
+  return /* @__PURE__ */ jsx5("a", { className: "dbk-card__link no-underline block", href, "data-docubook": "card-link", children: content });
 }
 
 // src/core/components/CardGroup.tsx
@@ -219,105 +261,144 @@ import {
   FolderOpen
 } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function FileComponent({ name }) {
+var fileDefaultClasses = {
+  root: "flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md transition-colors duration-150 cursor-default select-none hover:bg-muted/50",
+  rootHover: "bg-accent/10",
+  icon: "h-3.5 w-3.5 shrink-0 transition-colors text-muted-foreground",
+  iconHover: "text-accent",
+  text: "font-mono text-sm text-foreground truncate",
+  extension: "ml-auto text-xs text-muted-foreground/80"
+};
+var folderDefaultClasses = {
+  root: "relative",
+  header: "flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md transition-colors duration-150 select-none",
+  headerHover: "bg-muted/60",
+  headerOpen: "text-foreground",
+  headerClosed: "text-foreground/80",
+  headerPointer: "cursor-pointer",
+  headerDefault: "cursor-default",
+  chevron: "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+  chevronOpen: "rotate-90",
+  chevronHover: "text-foreground/70",
+  chevronDefault: "text-muted-foreground",
+  spacer: "w-3.5",
+  icon: "h-4 w-4 shrink-0 transition-colors",
+  iconOpenHover: "text-accent",
+  iconOpenDefault: "text-muted-foreground",
+  iconClosedHover: "text-accent/80",
+  iconClosedDefault: "text-muted-foreground/80",
+  text: "font-medium transition-colors duration-150",
+  textHover: "text-accent",
+  children: "ml-5 border-l-2 border-muted/50 pl-2"
+};
+var filesDefaultClasses = {
+  root: "rounded-xl border border-muted/20 bg-card/20 backdrop-blur-sm shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md hover:border-muted/60",
+  content: "p-2"
+};
+function FileComponent({
+  name
+}) {
   const [isHovered, setIsHovered] = useState3(false);
   const fileExtension = name.split(".").pop()?.toUpperCase();
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
-        transition-colors duration-150 cursor-default select-none
-        ${isHovered ? "bg-accent/10" : "hover:bg-muted/50"}
-      `,
+      className: cn(
+        "dbk-file-tree__file",
+        fileDefaultClasses.root,
+        isHovered && fileDefaultClasses.rootHover
+      ),
+      "data-docubook": "file-tree-file",
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsx7(
-          FileIcon,
-          {
-            className: `
-          h-3.5 w-3.5 shrink-0 transition-colors
-          ${isHovered ? "text-accent" : "text-muted-foreground"}
-        `
-          }
-        ),
-        /* @__PURE__ */ jsx7("span", { className: "font-mono text-sm text-foreground truncate", children: name }),
-        isHovered && fileExtension && /* @__PURE__ */ jsx7("span", { className: "ml-auto text-xs text-muted-foreground/80", children: fileExtension })
+        /* @__PURE__ */ jsx7(FileIcon, { className: cn("dbk-file-tree__file-icon", fileDefaultClasses.icon, isHovered && fileDefaultClasses.iconHover), "data-docubook": "file-tree-file-icon" }),
+        /* @__PURE__ */ jsx7("span", { className: cn("dbk-file-tree__file-text", fileDefaultClasses.text), "data-docubook": "file-tree-file-text", children: name }),
+        isHovered && fileExtension && /* @__PURE__ */ jsx7("span", { className: cn("dbk-file-tree__file-extension", fileDefaultClasses.extension), "data-docubook": "file-tree-file-extension", children: fileExtension })
       ]
     }
   );
 }
-function FolderComponent({ name, children }) {
+function FolderComponent({
+  name,
+  children
+}) {
   const [isOpen, setIsOpen] = useState3(true);
   const [isHovered, setIsHovered] = useState3(false);
   const hasChildren = Children.count(children) > 0;
-  return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: cn("dbk-file-tree__folder", folderDefaultClasses.root), "data-docubook": "file-tree-folder", children: [
     /* @__PURE__ */ jsxs4(
-      "div",
+      "button",
       {
-        className: `
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
-          transition-colors duration-150 select-none
-          ${isHovered ? "bg-muted/60" : ""}
-          ${isOpen ? "text-foreground" : "text-foreground/80"}
-          ${hasChildren ? "cursor-pointer" : "cursor-default"}
-        `,
+        type: "button",
+        className: cn(
+          "dbk-file-tree__folder-button",
+          folderDefaultClasses.header,
+          isHovered && folderDefaultClasses.headerHover,
+          isOpen ? folderDefaultClasses.headerOpen : folderDefaultClasses.headerClosed,
+          hasChildren ? folderDefaultClasses.headerPointer : folderDefaultClasses.headerDefault
+        ),
         onClick: () => hasChildren && setIsOpen(!isOpen),
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
-        tabIndex: -1,
+        "aria-expanded": hasChildren ? isOpen : void 0,
+        "data-docubook": "file-tree-folder-button",
         children: [
           hasChildren ? /* @__PURE__ */ jsx7(
             ChevronRight2,
             {
-              className: `
-              h-3.5 w-3.5 shrink-0 transition-transform duration-200
-              ${isOpen ? "rotate-90" : ""}
-              ${isHovered ? "text-foreground/70" : "text-muted-foreground"}
-            `
+              className: cn(
+                "dbk-file-tree__folder-chevron",
+                folderDefaultClasses.chevron,
+                isOpen && folderDefaultClasses.chevronOpen,
+                isHovered ? folderDefaultClasses.chevronHover : folderDefaultClasses.chevronDefault
+              ),
+              "data-docubook": "file-tree-folder-chevron"
             }
-          ) : /* @__PURE__ */ jsx7("div", { className: "w-3.5" }),
+          ) : /* @__PURE__ */ jsx7("div", { className: cn("dbk-file-tree__folder-spacer", folderDefaultClasses.spacer), "data-docubook": "file-tree-folder-spacer" }),
           isOpen ? /* @__PURE__ */ jsx7(
             FolderOpen,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent" : "text-muted-foreground"}
-            `
+              className: cn(
+                "dbk-file-tree__folder-icon",
+                folderDefaultClasses.icon,
+                isHovered ? folderDefaultClasses.iconOpenHover : folderDefaultClasses.iconOpenDefault
+              ),
+              "data-docubook": "file-tree-folder-icon"
             }
           ) : /* @__PURE__ */ jsx7(
             FolderIcon,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent/80" : "text-muted-foreground/80"}
-            `
+              className: cn(
+                "dbk-file-tree__folder-icon",
+                folderDefaultClasses.icon,
+                isHovered ? folderDefaultClasses.iconClosedHover : folderDefaultClasses.iconClosedDefault
+              ),
+              "data-docubook": "file-tree-folder-icon"
             }
           ),
-          /* @__PURE__ */ jsx7("span", { className: `font-medium transition-colors duration-150 ${isHovered ? "text-accent" : ""}`, children: name })
+          /* @__PURE__ */ jsx7("span", { className: cn("dbk-file-tree__folder-text", folderDefaultClasses.text, isHovered && folderDefaultClasses.textHover), "data-docubook": "file-tree-folder-text", children: name })
         ]
       }
     ),
-    isOpen && hasChildren && /* @__PURE__ */ jsx7("div", { className: "ml-5 border-l-2 border-muted/50 pl-2", children })
+    isOpen && hasChildren && /* @__PURE__ */ jsx7("div", { className: cn("dbk-file-tree__folder-children", folderDefaultClasses.children), "data-docubook": "file-tree-folder-children", children })
   ] });
 }
-function Files({ children }) {
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: "\n        rounded-xl border border-muted/20\n        bg-card/20 backdrop-blur-sm\n        shadow-sm overflow-hidden\n        transition-all duration-200\n        hover:shadow-md hover:border-muted/60\n      ",
-      children: /* @__PURE__ */ jsx7("div", { className: "p-2", children: Children.map(children, (child, index) => {
-        if (isValidElement(child)) {
-          return cloneElement(child, { key: index });
-        }
-        return null;
-      }) })
+function Files({
+  children
+}) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("dbk-file-tree", filesDefaultClasses.root), "data-docubook": "file-tree", children: /* @__PURE__ */ jsx7("div", { className: cn("dbk-file-tree__content", filesDefaultClasses.content), "data-docubook": "file-tree-content", children: Children.map(children, (child, index) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, { key: index });
     }
-  );
+    return null;
+  }) }) });
 }
-function Folder({ name, children }) {
+function Folder({
+  name,
+  children
+}) {
   return /* @__PURE__ */ jsx7(FolderComponent, { name, children });
 }
 function File({ name }) {
@@ -500,7 +581,8 @@ function Kbd({
   return /* @__PURE__ */ jsx9(
     "kbd",
     {
-      className: "inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md",
+      className: "dbk-kbd inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md",
+      "data-docubook": "kbd",
       ...props,
       children: renderContent()
     }
@@ -559,6 +641,12 @@ var iconMap = {
   warning: AlertTriangle,
   success: CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -567,36 +655,55 @@ function Note({
   ...props
 }) {
   const Icon = iconMap[type] || Info;
-  return /* @__PURE__ */ jsxs6("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ jsx11(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ jsxs6("div", { className: "pl-8", children: [
-      /* @__PURE__ */ jsx11("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ jsx11("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
-    ] })
-  ] });
+  const noteRole = type === "danger" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("dbk-note", noteVariants({ variant: type }), className),
+      "data-docubook": "note",
+      "data-variant": type,
+      role: noteRole,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx11(Icon, { className: cn("dbk-note__icon", noteDefaultClasses.icon), "data-docubook": "note-icon" }),
+        /* @__PURE__ */ jsxs6("div", { className: cn("dbk-note__content-wrapper", noteDefaultClasses.contentWrapper), "data-docubook": "note-content-wrapper", children: [
+          /* @__PURE__ */ jsx11("h5", { className: cn("dbk-note__title", noteDefaultClasses.title), "data-docubook": "note-title", children: title }),
+          /* @__PURE__ */ jsx11("div", { className: cn("dbk-note__content", noteDefaultClasses.content), "data-docubook": "note-content", children })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/core/components/Copy.tsx
 import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
 import { useState as useState5 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Copy({ content }) {
   const [isCopied, setIsCopied] = useState5(false);
   async function handleCopy() {
-    await navigator.clipboard.writeText(content);
-    setIsCopied(true);
-    setTimeout(() => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    } catch {
       setIsCopied(false);
-    }, 2e3);
+    }
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
-      className: "border cursor-copy inline-flex h-6 w-6 items-center justify-center rounded-md",
+      className: "dbk-copy inline-flex h-6 w-6 items-center justify-center rounded-md border bg-secondary text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-copy",
       onClick: handleCopy,
       "aria-label": isCopied ? "Copied" : "Copy code",
-      children: isCopied ? /* @__PURE__ */ jsx12(ClipboardCheckIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx12(ClipboardIcon, { className: "w-3 h-3" })
+      "data-docubook": "copy-button",
+      children: [
+        isCopied ? /* @__PURE__ */ jsx12(ClipboardCheckIcon, { className: "dbk-copy__icon w-3 h-3", "data-docubook": "copy-icon" }) : /* @__PURE__ */ jsx12(ClipboardIcon, { className: "dbk-copy__icon w-3 h-3", "data-docubook": "copy-icon" }),
+        /* @__PURE__ */ jsx12("span", { className: "sr-only", "aria-live": "polite", children: isCopied ? "Copied" : "Copy" })
+      ]
     }
   );
 }
@@ -627,7 +734,7 @@ import {
 } from "react-icons/si";
 import { FaJava, FaCode } from "react-icons/fa";
 import { TbJson } from "react-icons/tb";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function LanguageIcon({ lang }) {
   const iconProps = { size: 16, className: "w-4 h-4" };
   const languageToIconMap = {
@@ -678,9 +785,9 @@ function Pre({ children, raw, ...rest }) {
   const { "data-title": title, className, ...restProps } = rest;
   const language = getLanguage(className);
   const hasTitle = !!title;
-  return /* @__PURE__ */ jsxs7("div", { className: "code-block-container", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "code-block-container", children: [
     /* @__PURE__ */ jsx13("div", { className: "code-block-actions", children: raw && /* @__PURE__ */ jsx13(Copy, { content: raw }) }),
-    hasTitle && /* @__PURE__ */ jsx13("div", { className: "code-block-header", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+    hasTitle && /* @__PURE__ */ jsx13("div", { className: "code-block-header", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx13(LanguageIcon, { lang: language }),
       /* @__PURE__ */ jsx13("span", { children: title })
     ] }) }),
@@ -697,32 +804,33 @@ import {
   XCircle,
   Zap
 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function Release({ version, title, date, children }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "mb-16 group", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mt-6 mb-2", children: [
-      /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "dbk-release mb-16 group", "data-docubook": "release", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "dbk-release__header flex items-center gap-3 mt-6 mb-2", "data-docubook": "release-header", children: [
+      /* @__PURE__ */ jsxs9(
         "div",
         {
           id: version,
-          className: "inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm",
+          className: "dbk-release__version inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm",
+          "data-docubook": "release-version",
           children: [
             "v",
             version
           ]
         }
       ),
-      date && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 text-sm font-medium text-muted-foreground", children: [
+      date && /* @__PURE__ */ jsxs9("div", { className: "dbk-release__date-wrapper flex items-center gap-3 text-sm font-medium text-muted-foreground", "data-docubook": "release-date-wrapper", children: [
         /* @__PURE__ */ jsx14("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
-        /* @__PURE__ */ jsx14("time", { dateTime: date, children: new Date(date).toLocaleDateString("en-US", {
+        /* @__PURE__ */ jsx14("time", { className: "dbk-release__date", "data-docubook": "release-date", dateTime: date, children: new Date(date).toLocaleDateString("en-US", {
           year: "numeric",
           month: "long",
           day: "numeric"
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx14("h3", { className: "text-2xl font-bold text-foreground/90 mb-6 mt-0!", children: title }),
-    /* @__PURE__ */ jsx14("div", { className: "space-y-8", children })
+    /* @__PURE__ */ jsx14("h3", { className: "dbk-release__title text-2xl font-bold text-foreground/90 mb-6 mt-0!", "data-docubook": "release-title", children: title }),
+    /* @__PURE__ */ jsx14("div", { className: "dbk-release__content space-y-8", "data-docubook": "release-content", children })
   ] });
 }
 var typeConfig = {
@@ -754,23 +862,25 @@ var typeConfig = {
 };
 function Changes({ type, children }) {
   const config = typeConfig[type] || typeConfig.added;
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-3 mb-8", children: [
-    /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "dbk-release-changes space-y-3 mb-8", "data-docubook": "release-changes", "data-type": type, children: [
+    /* @__PURE__ */ jsx14("div", { className: "dbk-release-changes__header flex items-center gap-2", "data-docubook": "release-changes-header", children: /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
+          "dbk-release-changes__badge",
           "px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1.5",
           config.className
         ),
+        "data-docubook": "release-changes-badge",
         children: [
-          /* @__PURE__ */ jsx14(config.icon, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx14("span", { children: config.label })
+          /* @__PURE__ */ jsx14(config.icon, { className: "dbk-release-changes__icon h-3.5 w-3.5", "data-docubook": "release-changes-icon" }),
+          /* @__PURE__ */ jsx14("span", { className: "dbk-release-changes__label", "data-docubook": "release-changes-label", children: config.label })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx14("ul", { className: "list-none pl-0 space-y-2 text-foreground/80", children: Children2.map(children, (child, index) => {
+    /* @__PURE__ */ jsx14("ul", { className: "dbk-release-changes__list list-none pl-0 space-y-2 text-foreground/80", "data-docubook": "release-changes-list", children: Children2.map(children, (child, index) => {
       const processedChild = typeof child === "string" ? child.trim().replace(/^[-*]\s+/, "") : child;
-      return /* @__PURE__ */ jsx14("li", { className: "leading-relaxed", children: processedChild }, index);
+      return /* @__PURE__ */ jsx14("li", { className: "dbk-release-changes__item leading-relaxed", "data-docubook": "release-changes-item", children: processedChild }, index);
     }) })
   ] });
 }
@@ -778,21 +888,36 @@ function Changes({ type, children }) {
 // src/core/components/Stepper.tsx
 import clsx5 from "clsx";
 import { Children as Children3 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function Stepper({ children }) {
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var stepperDefaultClasses = {
+  root: "flex flex-col",
+  item: "border-l border-muted pl-9 ml-3 relative",
+  itemWithConnector: "pb-5 ",
+  number: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code"
+};
+var stepperItemDefaultClasses = {
+  root: "pt-0.5",
+  title: "mt-0",
+  content: ""
+};
+function Stepper({
+  children
+}) {
   const length = Children3.count(children);
-  return /* @__PURE__ */ jsx15("div", { className: "flex flex-col", children: Children3.map(children, (child, index) => {
-    return /* @__PURE__ */ jsxs9(
-      "div",
+  return /* @__PURE__ */ jsx15("ol", { className: cn("dbk-stepper", stepperDefaultClasses.root), "data-docubook": "stepper", children: Children3.map(children, (child, index) => {
+    return /* @__PURE__ */ jsxs10(
+      "li",
       {
         className: cn(
-          "border-l border-muted pl-9 ml-3 relative",
+          "dbk-stepper__item",
+          stepperDefaultClasses.item,
           clsx5({
-            "pb-5 ": index < length - 1
+            [stepperDefaultClasses.itemWithConnector]: index < length - 1
           })
         ),
+        "data-docubook": "stepper-item",
         children: [
-          /* @__PURE__ */ jsx15("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ jsx15("div", { className: cn("dbk-stepper__number", stepperDefaultClasses.number), "data-docubook": "stepper-number", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }
@@ -803,28 +928,49 @@ function StepperItem({
   children,
   title
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "pt-0.5", children: [
-    /* @__PURE__ */ jsx15("h4", { className: "mt-0", children: title }),
-    /* @__PURE__ */ jsx15("div", { children })
+  return /* @__PURE__ */ jsxs10("div", { className: cn("dbk-stepper-item", stepperItemDefaultClasses.root), "data-docubook": "stepper-item-content", children: [
+    /* @__PURE__ */ jsx15("h4", { className: cn("dbk-stepper-item__title", stepperItemDefaultClasses.title), "data-docubook": "stepper-item-title", children: title }),
+    /* @__PURE__ */ jsx15("div", { className: cn("dbk-stepper-item__content", stepperItemDefaultClasses.content), "data-docubook": "stepper-item-body", children })
   ] });
 }
 
 // src/core/components/Tooltip.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var tooltipDefaultClasses = {
+  root: "relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors",
+  trigger: "border-b border-dashed border-primary/60 pb-0.5",
+  content: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50",
+  arrow: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10"
+};
 var Tooltip = ({ text, tip }) => {
   const [visible, setVisible] = useState6(false);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "span",
     {
-      className: "relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors",
+      className: cn("dbk-tooltip", tooltipDefaultClasses.root),
+      "data-docubook": "tooltip",
       onMouseEnter: () => setVisible(true),
       onMouseLeave: () => setVisible(false),
       children: [
-        /* @__PURE__ */ jsx16("span", { className: "border-b border-dashed border-primary/60 pb-0.5", children: text }),
-        visible && /* @__PURE__ */ jsxs10("span", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50", children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: cn("dbk-tooltip__trigger", tooltipDefaultClasses.trigger),
+            "data-docubook": "tooltip-trigger",
+            onFocus: () => setVisible(true),
+            onBlur: () => setVisible(false),
+            onKeyDown: (event) => {
+              if (event.key === "Escape") setVisible(false);
+            },
+            "aria-expanded": visible,
+            children: text
+          }
+        ),
+        visible && /* @__PURE__ */ jsxs11("span", { className: cn("dbk-tooltip__content", tooltipDefaultClasses.content), role: "tooltip", "data-docubook": "tooltip-content", children: [
           tip,
-          /* @__PURE__ */ jsx16("span", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" })
+          /* @__PURE__ */ jsx16("span", { className: cn("dbk-tooltip__arrow", tooltipDefaultClasses.arrow), "data-docubook": "tooltip-arrow" })
         ] })
       ]
     }