# BoxNode

Block container đa năng (render ra `div`). Là canvas node — chứa bất kỳ node con nào. Dùng để nhóm các element, tạo section, hay làm wrapper có background/border.

## Resolved name

`Box` (displayName: `Block`)

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |

`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.

### `sx` props

```ts
sx?: {
  // size
  width?: number | string
  height?: number | string

  // position (Advanced tab)
  position?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed'

  // offsets: chỉ hiển thị trong editor khi position là 'absolute', 'sticky', hoặc 'fixed'
  top?: number | string
  right?: number | string
  bottom?: number | string
  left?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Editor controls

- **Settings → Layout**: width, height
- **Settings → Shape**: border, border radius
- **Settings → Background**: background styles
- **Advanced → Position**: position
  - `static`: default, không hiển thị offset inputs
  - `relative`: set positioning context, không hiển thị offset inputs
  - `absolute`, `sticky`, `fixed`: hiển thị `top`, `right`, `bottom`, `left`
- **Advanced → Display on**: responsive visibility
- **Advanced → Spacing (px)**: margin, padding

## Usage

```tsx
import { BoxNode } from '@janbox/storefront-builder';

// Wrapper đơn giản
<BoxNode sx={{ paddingTop: 16, paddingRight: 16, paddingBottom: 16, paddingLeft: 16 }}>
  <HeadingNode as="h2">Hello</HeadingNode>
</BoxNode>

// Section có background
<BoxNode
  sx={{
    backgroundColor: '#f5f5f5',
    paddingTop: 48,
    paddingBottom: 48,
  }}
>
  ...
</BoxNode>

// Responsive padding
<BoxNode
  sx={{
    paddingTop: 24,
    paddingBottom: 24,
    md: {
      paddingTop: 48,
      paddingBottom: 48,
    },
  }}
>
  ...
</BoxNode>

// Box ẩn trên mobile, hiện trên desktop — dùng DisplayOn (qua editor)
// Có thể kết hợp với sx.width/height để tạo spacer cố định
<BoxNode sx={{ width: '100%', height: 32, md: { height: 64 } }} />

// Sticky header wrapper
<BoxNode sx={{ position: 'sticky', top: 0, backgroundColor: '#fff' }}>
  ...
</BoxNode>

// Badge đặt tuyệt đối trong wrapper relative
<BoxNode sx={{ position: 'relative' }}>
  <BoxNode sx={{ position: 'absolute', top: 8, right: 8 }}>...</BoxNode>
</BoxNode>
```

## Rules

- **Canvas**: yes — chứa bất kỳ node con nào.
- **canMoveIn**: không giới hạn node type.