@janbox/storefront-builder 1.0.4 → 1.0.5

package/README.md

@@ -0,0 +1,477 @@
+# @janbox/storefront-builder
+
+A standalone visual page builder library built on [CraftJS](https://craft.js.org/). Provides drag-and-drop storefront creation with a full editor UI, 33 pre-built node components, and responsive design support.
+
+## Installation
+
+```bash
+npm install @janbox/storefront-builder
+# or
+pnpm add @janbox/storefront-builder
+```
+
+### Peer dependencies
+
+```bash
+npm install react@^19 react-dom@^19 @janbox/storefront-ui@>=2
+```
+
+## Package Exports
+
+| Import path | Contents |
+| --- | --- |
+| `@janbox/storefront-builder` | Node components (all 33 nodes) |
+| `@janbox/storefront-builder/editor` | Full editor UI (`Editor` component + toolbars) |
+| `@janbox/storefront-builder/templates` | Pre-built element groups and section templates |
+| `@janbox/storefront-builder/style.css` | Required CSS bundle |
+
+---
+
+## Quick Start — Full Editor
+
+The `Editor` component from `/editor` renders the complete visual builder UI (header toolbar, sidebar with component library, drag-and-drop canvas).
+
+```tsx
+import '@janbox/storefront-builder/style.css';
+import { Editor } from '@janbox/storefront-builder/editor';
+import {
+  LAYOUT_ELEMENT_GROUP,
+  TEXT_ELEMENT_GROUP,
+  MEDIA_ELEMENT_GROUP,
+  INTERACTIVE_ELEMENT_GROUP,
+  HERO_SECTION_GROUP,
+} from '@janbox/storefront-builder/templates';
+import type { Theme } from '@janbox/storefront-ui/theme';
+
+const myTheme: Theme = {
+  palette: {
+    primary: {
+      500: '#fa8c16',
+      600: '#d46b08',
+    },
+    // ... full theme
+  },
+  typography: {
+    base: { fontSize: '1rem', lineHeight: '1.5rem' },
+    // ...
+  },
+};
+
+export default function BuilderPage() {
+  return (
+    <Editor
+      theme={myTheme}
+      insert={{
+        elements: [LAYOUT_ELEMENT_GROUP, TEXT_ELEMENT_GROUP, MEDIA_ELEMENT_GROUP, INTERACTIVE_ELEMENT_GROUP],
+        sections: [HERO_SECTION_GROUP],
+      }}
+    />
+  );
+}
+```
+
+`Editor` occupies the full viewport (`100vw × 100vh`). It should be the root of a dedicated page/route.
+
+---
+
+## Quick Start — Render Only (No Editor UI)
+
+Use `Composer` + `Canvas` to render a saved page without the editor chrome. This is for the storefront-facing page.
+
+```tsx
+import '@janbox/storefront-builder/style.css';
+import { Composer, Canvas } from '@janbox/storefront-builder';
+import { RootNode } from '@janbox/storefront-builder';
+import type { SerializedNodes } from '@janbox/storefront-builder';
+
+const savedData: SerializedNodes = { /* JSON from editor */ };
+
+export default function StorefrontPage() {
+  return (
+    <Composer>
+      <Canvas data={savedData}>
+        <RootNode />
+      </Canvas>
+    </Composer>
+  );
+}
+```
+
+---
+
+## Core Concepts
+
+### Nodes
+
+Every element on the canvas is a **node** — a React component registered with CraftJS. The library ships 33 built-in nodes:
+
+| Category | Nodes |
+| --- | --- |
+| Layout | `RootNode`, `Box`, `Flexbox`, `FlexItem`, `Grid`, `Cell` |
+| Typography | `Text`, `Paragraph`, `Heading` |
+| Media | `Image`, `Video`, `Icon` |
+| Navigation | `Link`, `Button` |
+| Lists | `UnorderedList`, `ListItem` |
+| Tabs | `Tabs`, `TabList`, `Tab`, `TabContent`, `TabPanel` |
+| Accordion | `Accordion`, `AccordionGroup`, `AccordionSummary`, `AccordionContent` |
+| Carousel | `Swiper`, `SwiperSlide` |
+| Marquee | `Marquee`, `MarqueeItem` |
+| Utilities | `CountdownTimer` |
+| Internal | `UnknownNode` (fallback for unresolved nodes) |
+
+All nodes are exported from `@janbox/storefront-builder`.
+
+### Responsive Props
+
+All style props accept either a plain value or a responsive object keyed by breakpoint:
+
+```ts
+// Breakpoints: xs (390px), sm (768px), md (1280px), lg (1680px)
+
+// Plain value (applies at all breakpoints)
+{ fontSize: '16px' }
+
+// Responsive object (xs is the base; other keys override upward)
+{ fontSize: { xs: '14px', md: '18px' } }
+```
+
+The current breakpoint is controlled via the `?screen=xs|sm|md|lg` query param.
+
+### Serialized State
+
+The canvas state is plain JSON (`SerializedNodes` from `@craftjs/core`). Use `useComposer()` to read and serialize it:
+
+```tsx
+import { useComposer } from '@janbox/storefront-builder';
+
+function SaveButton() {
+  const { query } = useComposer();
+
+  const handleSave = () => {
+    const json = query.serialize(); // SerializedNodes as JSON string
+    // save to your backend
+  };
+
+  return <button onClick={handleSave}>Save</button>;
+}
+```
+
+---
+
+## Templates
+
+Templates are pre-configured drag-and-drop groups shown in the editor sidebar.
+
+### Element Groups (sidebar "Elements" tab)
+
+```ts
+import {
+  LAYOUT_ELEMENT_GROUP,       // Box, Flexbox, Grid
+  TEXT_ELEMENT_GROUP,         // Text, Heading, Paragraph
+  MEDIA_ELEMENT_GROUP,        // Image, Video, Icon
+  INTERACTIVE_ELEMENT_GROUP,  // Button, Link, Accordion, Tabs
+  CONTENT_LIST_ELEMENT_GROUP, // UnorderedList, Marquee, Swiper
+  UTILITIES_ELEMENT_GROUP,    // CountdownTimer
+} from '@janbox/storefront-builder/templates';
+```
+
+### Section Groups (sidebar "Sections" tab)
+
+```ts
+import {
+  HERO_SECTION_GROUP,
+  FAQS_SECTION_GROUP,
+  GUARANTEE_SECTION_GROUP,
+} from '@janbox/storefront-builder/templates';
+```
+
+Pass them to `Editor` via the `insert` prop:
+
+```tsx
+<Editor
+  theme={myTheme}
+  insert={{
+    elements: [LAYOUT_ELEMENT_GROUP, TEXT_ELEMENT_GROUP],
+    sections: [HERO_SECTION_GROUP],
+  }}
+/>
+```
+
+---
+
+## Custom Nodes
+
+### 1. Create a node component
+
+```tsx
+// my-badge.node.tsx
+import { defineNode } from '@janbox/storefront-builder';
+import { useNode } from '@janbox/storefront-builder';
+
+type MyBadgeProps = { label: string; color?: string };
+
+export const MyBadge = ({ label, color = '#fa8c16' }: MyBadgeProps) => {
+  const { connectors } = useNode();
+
+  return (
+    <span
+      ref={(el) => el && connectors.connect(el)}
+      style={{ background: color, padding: '2px 8px', borderRadius: 4 }}
+    >
+      {label}
+    </span>
+  );
+};
+
+defineNode(MyBadge, {
+  resolved: 'MyBadge',
+  isCanvas: false,
+  info: { displayName: 'Badge' },
+  defaultProps: { label: 'Badge', color: '#fa8c16' },
+});
+```
+
+### 2. Pass a resolver to the editor
+
+```tsx
+import { MyBadge } from './my-badge.node';
+
+<Editor
+  theme={myTheme}
+  resolver={{ MyBadge }}
+  insert={{ elements: [/* ... */], sections: [] }}
+/>
+```
+
+### 3. Add a toolbar (optional)
+
+```tsx
+// my-badge.toolbar.tsx
+import { useNodeProps } from '@janbox/storefront-builder';
+
+export function MyBadgeToolbar() {
+  const { nodeProps, setNodeProps } = useNodeProps<MyBadgeProps>();
+
+  return (
+    <div>
+      <label>Label</label>
+      <input
+        value={nodeProps.label}
+        onChange={(e) => setNodeProps({ label: e.target.value })}
+      />
+    </div>
+  );
+}
+```
+
+Register the toolbar in `defineNode`:
+
+```ts
+defineNode(MyBadge, {
+  resolved: 'MyBadge',
+  info: { displayName: 'Badge' },
+  related: { inspector: MyBadgeToolbar },
+});
+```
+
+---
+
+## Hooks
+
+All hooks must be called inside a `<Composer>` tree.
+
+### `useComposer(collector?)`
+
+Enhanced wrapper around CraftJS `useEditor`. Adds `actions.duplicate()` and `actions.move()`.
+
+```ts
+const { query, actions } = useComposer();
+
+// Serialize current canvas state
+const json = query.serialize();
+
+// Duplicate a node
+actions.duplicate(nodeId);
+
+// Move a node
+actions.move({ nodeId, sourceIndex: 0, destinationIndex: 2 });
+```
+
+### `useNodeProps<P>(options?)`
+
+Read and write props for the current node (or a specific node via `options.nodeId`). Supports responsive updates.
+
+```ts
+const { nodeProps, setNodeProps, setNodeResponsiveProps } = useNodeProps<MyProps>();
+
+// Set a flat prop
+setNodeProps({ color: '#ff0000' });
+
+// Set a responsive prop for a specific breakpoint
+setNodeResponsiveProps({ fontSize: '18px' }, 'md');
+```
+
+### `useNode()`
+
+Direct access to the CraftJS node context (re-exported from `@craftjs/core`).
+
+```ts
+const { id, connectors, actions } = useNode();
+```
+
+---
+
+## TailwindCSS Integration
+
+The library uses TailwindCSS v4 internally with a `tw:` prefix. To extend it in your app:
+
+```ts
+// tailwind.config.ts
+import builderConfig from '@janbox/storefront-builder/tailwind.config';
+
+export default {
+  presets: [builderConfig],
+  // your overrides
+};
+```
+
+Import the stylesheet once at your app entry:
+
+```ts
+import '@janbox/storefront-builder/style.css';
+```
+
+---
+
+## Theme Shape
+
+The `theme` prop on `Editor` follows the `@janbox/storefront-ui` `Theme` type:
+
+```ts
+type Theme = {
+  palette: {
+    primary: Record<100 | 200 | 300 | 400 | 500 | 600 | 700 | 800, string>;
+    secondary: Record<...>;
+    red, orange, yellow, green, blue, violet, neutral: Record<...>;
+    black: string;
+    white: string;
+    background: { subtle, default, emphasis: string };
+    surface: { default: string };
+    border: { default: string };
+    inherit: string;
+    current: string;
+    transparent: string;
+  };
+  typography: Record<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl', {
+    fontSize: string;
+    lineHeight: string;
+  }>;
+};
+```
+
+---
+
+## TypeScript
+
+The package ships full `.d.ts` declarations. Key types:
+
+```ts
+import type {
+  SerializedNodes,   // canvas JSON state
+  NodeId,            // string node identifier
+  NodeTree,          // tree of nodes
+  Resolver,          // map of resolvedName → component
+  NodeConfig,        // config passed to defineNode()
+  DisplayOnValue,    // responsive visibility: Partial<Record<Screen, boolean>>
+} from '@janbox/storefront-builder';
+```
+
+---
+
+## Node Reference
+
+Chi tiết props, usage và rules cho từng node:
+
+### Layout
+
+- [RootNode](lib/root/README.md) — top-level canvas container
+- [BoxNode](lib/box/README.md) — block container
+- [FlexboxNode](lib/flexbox/README.md) — flex container
+- [FlexItemNode](lib/flex-item/README.md) — flex item
+- [GridNode](lib/grid/README.md) — CSS grid container
+- [CellNode](lib/cell/README.md) — grid cell
+
+### Typography
+
+- [TextNode](lib/text/README.md) — inline/block text
+- [HeadingNode](lib/heading/README.md) — h1–h6 heading
+- [ParagraphNode](lib/paragraph/README.md) — paragraph
+
+### Media
+
+- [ImageNode](lib/image/README.md) — image
+- [VideoNode](lib/video/README.md) — video player
+- [IconNode](lib/icon/README.md) — inline SVG icon
+
+### Navigation
+
+- [LinkNode](lib/link/README.md) — anchor link
+- [ButtonNode](lib/button/README.md) — CTA button
+
+### Lists
+
+- [UnorderedListNode](lib/unordered-list/README.md) — list container
+- [ListItemNode](lib/list-item/README.md) — list item
+
+### Accordion
+
+- [AccordionGroupNode](lib/accordion-group/README.md) — accordion container
+- [AccordionNode](lib/accordion/README.md) — accordion item
+- [AccordionSummaryNode](lib/accordion-summary/README.md) — accordion header
+- [AccordionContentNode](lib/accordion-content/README.md) — accordion content
+
+### Tabs
+
+- [TabsNode](lib/tabs/README.md) — tabs container
+- [TabListNode](lib/tab-list/README.md) — tab headers container
+- [TabNode](lib/tab/README.md) — tab header button
+- [TabContentNode](lib/tab-content/README.md) — tab panels container
+- [TabPanelNode](lib/tab-panel/README.md) — tab panel content
+
+### Carousel
+
+- [SwiperNode](lib/swiper/README.md) — carousel container
+- [SwiperSlideNode](lib/swiper-slide/README.md) — carousel slide
+
+### Marquee
+
+- [MarqueeNode](lib/marquee/README.md) — auto-scrolling ticker
+- [MarqueeItemNode](lib/marquee-item/README.md) — ticker item
+
+### Utilities
+
+- [CountdownTimerNode](lib/countdown-timer/README.md) — countdown timer
+
+### Internal
+
+- [UnknownNode](lib/unknown/README.md) — fallback for unresolved nodes
+
+---
+
+## Monorepo Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start demo app (React Router 7)
+pnpm dev
+
+# Build the library
+pnpm build
+
+# Type check
+pnpm typecheck
+```
+
+Requires Node.js >= 20 and pnpm.

package/dist/editor/ui/dialog/dialog/helpers.d.ts

@@ -1 +1 @@
-export declare const useDialogContext: () => import('../../floating').WbFloatingContextValue;
+export declare const useDialogContext: () => import('../..').WbFloatingContextValue;

package/dist/editor/ui/dialog/dialog-close/dialog-close.d.ts

@@ -1 +1 @@
-export declare const WbDialogClose: import('react').ForwardRefExoticComponent<Omit<import('../../floating').WbFloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const WbDialogClose: import('react').ForwardRefExoticComponent<Omit<import('../..').WbFloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { jsx as n, Fragment as Ne, jsxs as g } from "@emotion/react/jsx-runtime";
-import { u as _e, a as ae, b as te, D as ze, c as qe, W as j, d as E, e as Ge, f as Ue, g as Le, h as Ee, i as Ze, j as Qe, k as we, l as Ye, m as ue, n as oe, A as Se, o as Ke, C as Me, p as Re, q as Xe, r as Je, T as et, s as fe, R as tt } from "./index-CBDllFpx.js";
-import { t as qr } from "./index-CBDllFpx.js";
+import { u as _e, a as ae, b as te, D as ze, c as qe, W as j, d as E, e as Ge, f as Ue, g as Le, h as Ee, i as Ze, j as Qe, k as we, l as Ye, m as ue, n as oe, A as Se, o as Ke, C as Me, p as Re, q as Xe, r as Je, T as et, s as fe, R as tt } from "./index-DrJkOkbq.js";
+import { t as qr } from "./index-DrJkOkbq.js";
 import rt from "mitt";
 import { c as I, N as pe, B as ge, g as nt, a as st, u as W, W as ot, b as $e, i as it, P as ct } from "./countdown-timer.node-CAsCNVin.js";
 import { useRef as je, useState as _, useEffect as z, createElement as Ae, Fragment as J, Suspense as at } from "react";

package/dist/{index-CBDllFpx.js → index-DrJkOkbq.js}

@@ -7,8 +7,8 @@ import { u as St, x as oi, J as ue, D as C, c as L, W as ur, i as Bn, b as In, t
 import { isFunction as Or, merge as ri, set as Ur, isNil as Wt, isString as Ne, isUndefined as Fe, get as ai } from "lodash-es";
 import { OverlayScrollbarsComponent as _r } from "overlayscrollbars-react";
 import { jsxs as Wr, jsx as li } from "react/jsx-runtime";
-import { useNode as tt, ROOT_NODE as $r, Frame as Kr, Editor as Hr, DefaultEventHandlers as zr } from "@craftjs/core";
-import { useMergeRefs as de, useFloating as ci, autoUpdate as ui, offset as di, flip as hi, size as Gr, useClick as qr, useHover as Xr, safePolygon as Yr, useDismiss as Zr, useRole as Jr, useInteractions as Qr, useFloatingParentNodeId as ta, FloatingTree as ea, FloatingPortal as fi } from "@floating-ui/react";
+import { useMergeRefs as de, useFloating as ci, autoUpdate as ui, offset as di, flip as hi, size as $r, useClick as Kr, useHover as Hr, safePolygon as zr, useDismiss as Gr, useRole as qr, useInteractions as Xr, useFloatingParentNodeId as Yr, FloatingTree as Zr, FloatingPortal as fi } from "@floating-ui/react";
+import { useNode as tt, ROOT_NODE as Jr, Frame as Qr, Editor as ta, DefaultEventHandlers as ea } from "@craftjs/core";
 import { useUpdateEffect as na } from "react-use";
 import { useFrame as sa } from "react-frame-component";
 import { Button as ia, UnorderedList as oa, ListItem as ra } from "@janbox/storefront-ui";
@@ -424,7 +424,7 @@ const bh = (t) => {
     middleware: [
       di(a),
       hi(),
-      Gr({
+      $r({
         apply({ elements: S }) {
           const b = {
             zIndex: `${lr}`,
@@ -435,12 +435,12 @@ const bh = (t) => {
       })
     ],
     whileElementsMounted: ui
-  }), { context: h, refs: f } = d, m = qr(h, {
+  }), { context: h, refs: f } = d, m = Kr(h, {
     enabled: o === "click"
-  }), y = Xr(h, {
+  }), y = Hr(h, {
     enabled: o === "hover",
-    handleClose: Yr()
-  }), g = Zr(
+    handleClose: zr()
+  }), g = Gr(
     h,
     ri(
       {
@@ -448,7 +448,7 @@ const bh = (t) => {
       },
       s
     )
-  ), p = Jr(h), v = Qr([m, g, p, y]), w = Y(
+  ), p = qr(h), v = Xr([m, g, p, y]), w = Y(
     () => ({
       ...d,
       ...v
@@ -458,7 +458,7 @@ const bh = (t) => {
   return na(() => {
     Fe(r) || (f.setReference?.(r), h.onOpenChange(!Wt(r)));
   }, [r]), /* @__PURE__ */ x(gi.Provider, { value: w, children: i });
-}, va = (t) => ta() ? /* @__PURE__ */ x(Un, { ...t }) : /* @__PURE__ */ x(ea, { children: /* @__PURE__ */ x(Un, { ...t }) }), wa = ft(({ children: t, ...e }, n) => {
+}, va = (t) => Yr() ? /* @__PURE__ */ x(Un, { ...t }) : /* @__PURE__ */ x(Zr, { children: /* @__PURE__ */ x(Un, { ...t }) }), wa = ft(({ children: t, ...e }, n) => {
   const { getReferenceProps: s, context: i } = yi(), r = de([i.refs.setReference, ai(t, "ref"), n]);
   return _t(t) ? Je(
     t,
@@ -5339,7 +5339,7 @@ const Yd = (t, e) => ln(t) ? new Xd(e) : new qd(e, {
   } = tt((g) => {
     let p = g.data.parent ? n.node(g.data.parent).get() : null;
     for (; p && !Bn(p); )
-      p = p.data.parent && p.data.parent !== $r ? n.node(p.data.parent).get() : null;
+      p = p.data.parent && p.data.parent !== Jr ? n.node(p.data.parent).get() : null;
     return {
       dom: g.dom,
       name: In(g),
@@ -5487,7 +5487,7 @@ const Bh = ({ children: t, data: e }) => {
       });
     }), i;
   }, [e, n]);
-  return /* @__PURE__ */ x(Kr, { data: s, children: t });
+  return /* @__PURE__ */ x(Qr, { data: s, children: t });
 }, eh = {
   // Root
   [C.Root]: pi,
@@ -5532,7 +5532,7 @@ const Bh = ({ children: t, data: e }) => {
   // Timer
   [C.CountdownTimer]: dr
 }, Ih = ({ resolver: t, children: e, ...n }) => /* @__PURE__ */ x(
-  Hr,
+  ta,
   {
     enabled: !1,
     onRender: nh,
@@ -5555,7 +5555,7 @@ const Bh = ({ children: t, data: e }) => {
       );
   }, [e, n]), t;
 };
-class sh extends zr {
+class sh extends ea {
   handlers() {
     const e = super.handlers();
     return {

package/dist/index.js

@@ -7,8 +7,8 @@ import { Draggable as vt, DragDropContext as bt, Droppable as Nt } from "@hello-
 import { getGridProps as so, getCellProps as ao, GRID_MINIMUM_COLS as Yt, GRID_MAXIMUM_COLS as io, getLinkProps as lo, getButtonProps as co, getFlexboxProps as uo, getFlexItemProps as ho, getTextProps as go, getImageProps as po, getMarqueeProps as wo, MarqueeDataAttributes as wt, getTabsProps as mo, getTabPanelProps as Co, getSwiperProps as xo, getUnorderedListProps as fo, getListItemProps as vo, getIconProps as bo, getAccordionProps as No, getAccordionGroupProps as ko, getAccordionDataAttributes as $e, AccordionDataAttributes as mt, getVideoProps as Ro, getBoxProps as Lo } from "@janbox/storefront-ui";
 import { isNumber as nt, isNil as z, isFunction as To, assign as So, isUndefined as kt, get as ze, parseInt as yo, trimStart as Rt, isString as me, set as Bo } from "lodash-es";
 import { useDebounceCallback as dn, useToggle as cn } from "usehooks-ts";
-import { v as W, h as Y, W as T, d as f, n as Po, q as Io, A as ve, L as Mo, b as Lt, w as Se, x as ye, f as Ct, y as Be, z as Pe, a as Tt, B as Ao, e as U, r as ee, g as Q, o as Re, i as j, j as F, k as S, l as Z, m as y, E as St, T as yt, F as Wo, t as I, D as un, c as hn, G as Vo } from "./index-CBDllFpx.js";
-import { p as pi, C as wi, R as mi, U as Ci, H as xi } from "./index-CBDllFpx.js";
+import { v as W, h as Y, W as T, d as f, n as Po, q as Io, A as ve, L as Mo, b as Lt, w as Se, x as ye, f as Ct, y as Be, z as Pe, a as Tt, B as Ao, e as U, r as ee, g as Q, o as Re, i as j, j as F, k as S, l as Z, m as y, E as St, T as yt, F as Wo, t as I, D as un, c as hn, G as Vo } from "./index-DrJkOkbq.js";
+import { p as pi, C as wi, R as mi, U as Ci, H as xi } from "./index-DrJkOkbq.js";
 import { useNode as re } from "@craftjs/core";
 import { useNode as vi } from "@craftjs/core";
 import { W as Ho } from "./tooltip-CqfT80iK.js";

package/dist/lib/accordion/README.md

@@ -0,0 +1,39 @@
+# AccordionNode
+
+Một accordion item. Chứa `AccordionSummaryNode` (header) và `AccordionContentNode` (nội dung). Không selectable — chỉnh sửa qua parent `AccordionGroupNode`.
+
+## Resolved name
+
+`Accordion`
+
+## Configurable props
+
+Không có props riêng. Tất cả styling được control qua `AccordionGroupNode`.
+
+## Usage
+
+```tsx
+import { AccordionNode, AccordionSummaryNode, AccordionContentNode } from '@janbox/storefront-builder';
+
+<AccordionNode>
+  <AccordionSummaryNode>
+    <TextNode>Question title</TextNode>
+  </AccordionSummaryNode>
+  <AccordionContentNode>
+    <TextNode>Answer content</TextNode>
+  </AccordionContentNode>
+</AccordionNode>
+```
+
+## Rules
+
+- **Canvas**: no.
+- **Selectable**: no — user không thể select trực tiếp node này trong editor.
+- **Parent**: phải là `AccordionGroupNode`.
+- **Children**: phải có `AccordionSummaryNode` và `AccordionContentNode`.
+
+## Related nodes
+
+- [`AccordionGroupNode`](../accordion-group/README.md) — parent container
+- [`AccordionSummaryNode`](../accordion-summary/README.md) — header
+- [`AccordionContentNode`](../accordion-content/README.md) — content area

package/dist/lib/accordion-content/README.md

@@ -0,0 +1,36 @@
+# AccordionContentNode
+
+Content area của accordion item — phần expand/collapse khi click vào header. Là canvas node — chứa bất kỳ node con nào.
+
+## Resolved name
+
+`AccordionContent`
+
+## Configurable props
+
+Không có props riêng. Padding được config qua `AccordionGroupNode.accordionContentProps.sx`.
+
+## Usage
+
+```tsx
+import { AccordionContentNode, ParagraphNode } from '@janbox/storefront-builder';
+
+<AccordionContentNode>
+  <ParagraphNode>
+    Answer content goes here. Can contain any nodes.
+  </ParagraphNode>
+</AccordionContentNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **Selectable**: no.
+- **canMoveOut**: no — không thể kéo ra khỏi `AccordionNode`.
+- **Parent**: phải là `AccordionNode`.
+
+## Related nodes
+
+- [`AccordionNode`](../accordion/README.md) — parent item
+- [`AccordionGroupNode`](../accordion-group/README.md) — root container
+- [`AccordionSummaryNode`](../accordion-summary/README.md) — header