@janbox/storefront-builder 2.0.9 → 2.0.11

package/dist/lib/container/README.md

@@ -0,0 +1,86 @@
+# ContainerNode
+
+Block container có max-width cố định, căn giữa theo chiều ngang. Dùng để tạo section có width bị giới hạn (ví dụ: content area trong một full-width background section).
+
+## Resolved name
+
+`Container`
+
+## Configurable props
+
+### `sx` props
+
+```ts
+sx?: {
+  // size
+  height?: 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 */ }
+}
+```
+
+## Usage
+
+```tsx
+import { BoxNode, ContainerNode } from '@janbox/storefront-builder';
+
+// Full-width background, content bị giới hạn width
+<BoxNode sx={{ backgroundColor: '#f5f5f5' }}>
+  <ContainerNode sx={{ paddingTop: 48, paddingBottom: 48 }}>
+    ...
+  </ContainerNode>
+</BoxNode>
+
+// Responsive padding
+<ContainerNode
+  sx={{
+    paddingTop: 24,
+    paddingBottom: 24,
+    md: {
+      paddingTop: 48,
+      paddingBottom: 48,
+    },
+  }}
+>
+  ...
+</ContainerNode>
+```
+
+## Rules
+
+- **Canvas**: yes — chứa bất kỳ node con nào.
+- **canMoveIn**: không giới hạn node type.

package/dist/lib/container/index.d.ts

@@ -1,2 +1 @@
 export * from './container.node';
-export * from './container.inspector';

package/dist/lib/countdown-timer/index.d.ts

@@ -1,2 +1 @@
 export * from './countdown-timer.node';
-export * from './countdown-timer.inspector';

package/dist/lib/flex-item/README.md

@@ -104,6 +104,7 @@ import { FlexboxNode, FlexItemNode } from '@janbox/storefront-builder';
 ## Rules
 
 - **Canvas**: yes — chứa bất kỳ node con nào.
+- **canDrag**: false — không thể kéo ra khỏi parent. Thứ tự item được điều chỉnh qua `sx.order` trong inspector.
 - **Parent**: phải là `FlexboxNode`.
 
 ## Related nodes

package/dist/lib/flex-item/index.d.ts

@@ -1,2 +1 @@
 export * from './flex-item.node';
-export * from './flex-item.inspector';

package/dist/lib/flexbox/README.md

@@ -8,12 +8,6 @@ Flex container node (`display: flex`). Chỉ chấp nhận `FlexItemNode` làm c
 
 ## Configurable props
 
-### Top-level props
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `container` | `boolean` | Bật max-width container constraint |
-
 ### `sx` props
 
 ```ts

package/dist/lib/flexbox/index.d.ts

@@ -1,2 +1 @@
 export * from './flexbox.node';
-export * from './flexbox.inspector';

package/dist/lib/grid/README.md

@@ -8,14 +8,16 @@ A CSS Grid container node. Accepts only `CellNode` children — the editor enfor
 
 ## Configurable props
 
-Props mà user có thể chỉnh trong editor inspector. Tất cả đều hỗ trợ responsive trừ `container`.
+Props mà user có thể chỉnh trong editor inspector.
 
 ### Top-level props
 
 | Prop | Type | Description |
 | --- | --- | --- |
 | `cols` | `number` | Số cột — generates `grid-template-columns: repeat(cols, minmax(0, 1fr))` |
-| `container` | `boolean` | Bật max-width container constraint |
+| `sm` | `{ cols?: number }` | Override `cols` tại breakpoint sm |
+| `md` | `{ cols?: number }` | Override `cols` tại breakpoint md |
+| `lg` | `{ cols?: number }` | Override `cols` tại breakpoint lg |
 
 ### `sx` props
 
@@ -108,9 +110,8 @@ import { GridNode, CellNode } from '@janbox/storefront-builder';
   <CellNode>...</CellNode>
 </GridNode>
 
-// Container với background
+// Grid với background
 <GridNode
-  container
   cols={2}
   sx={{
     backgroundColor: '#f5f5f5',

package/dist/lib/grid/index.d.ts

@@ -1,2 +1 @@
 export * from './grid.node';
-export * from './grid.inspector';

package/dist/lib/heading/README.md

@@ -1,6 +1,6 @@
 # HeadingNode
 
-Text node dành cho tiêu đề. Dùng chung `TextInspector` với `TextNode` nhưng giới hạn tag trong `h1`–`h6` và `div`.
+Text node dành cho tiêu đề. Render qua component `Text` từ `@janbox/storefront-ui`.
 
 ## Resolved name
 
@@ -8,20 +8,51 @@ Text node dành cho tiêu đề. Dùng chung `TextInspector` với `TextNode` nh
 
 ## Configurable props
 
-Giống hệt `TextNode`. Xem chi tiết tại [TextNode](../text/README.md#configurable-props).
+### Top-level props
 
-### Điểm khác biệt
-
-| Prop | Giá trị cho phép | Default |
+| Prop | Type | Description |
 | --- | --- | --- |
-| `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'div'` | `'p'` (từ Text) |
+| `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'div'` | HTML tag (chọn qua inspector) |
+| `sizeVariant` | `TypographySizeVariant` | Kích cỡ typography (responsive) |
+
+### `sx` props
+
+```ts
+sx?: {
+  // typography
+  color?: string
+  fontStyle?: 'normal' | 'italic'
+  fontWeight?: number | string
+  textDecorationLine?: 'none' | 'underline' | 'line-through'
+  textAlign?: 'left' | 'center' | 'right' | 'justify'
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+
+  // size
+  width?: number | string
+
+  // spacing
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
 
 ## Usage
 
 ```tsx
 import { HeadingNode } from '@janbox/storefront-builder';
 
-// H1 mặc định
+// H1
 <HeadingNode as="h1" sizeVariant="4xl">
   Page Title
 </HeadingNode>
@@ -49,5 +80,4 @@ import { HeadingNode } from '@janbox/storefront-builder';
 
 ## Related nodes
 
-- [`TextNode`](../text/README.md) — base component dùng chung inspector
 - [`ParagraphNode`](../paragraph/README.md) — dành cho nội dung dạng đoạn văn

package/dist/lib/heading/index.d.ts

@@ -1,4 +1,2 @@
 export * from './heading.node';
-export * from './heading.inspector';
 export * from './heading';
-export * from './heading.renderer';

package/dist/lib/icon/index.d.ts

@@ -1,2 +1 @@
 export * from './icon.node';
-export * from './icon.inspector';

package/dist/lib/image/index.d.ts

@@ -1,2 +1 @@
 export * from './image.node';
-export * from './image.inspector';

package/dist/lib/index.d.ts

@@ -6,7 +6,6 @@ export * from './link';
 export * from './button';
 export * from './flexbox';
 export * from './flex-item';
-export * from './text';
 export * from './paragraph';
 export * from './heading';
 export * from './image';

package/dist/lib/link/index.d.ts

@@ -1,2 +1 @@
 export * from './link.node';
-export * from './link.inspector';

package/dist/lib/marquee/index.d.ts

@@ -1,2 +1 @@
 export * from './marquee.node';
-export * from './marquee.inspector';

package/dist/lib/paragraph/README.md

@@ -1,6 +1,6 @@
 # ParagraphNode
 
-Text node dành cho đoạn văn bản. Dùng chung `TextInspector` với `TextNode` nhưng không cho phép đổi tag — luôn render ra `p`.
+Text node dành cho đoạn văn bản. Render qua component `Text` từ `@janbox/storefront-ui`.
 
 ## Resolved name
 
@@ -8,13 +8,18 @@ Text node dành cho đoạn văn bản. Dùng chung `TextInspector` với `TextN
 
 ## Configurable props
 
-Giống hệt `TextNode` ngoại trừ prop `as` bị loại bỏ. Xem chi tiết tại [TextNode](../text/README.md#configurable-props).
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `as` | `'p' \| 'div'` | HTML tag (chọn qua inspector) |
+| `sizeVariant` | `TypographySizeVariant` | Kích cỡ typography (responsive) |
 
 ### `sx` props
 
 ```ts
 sx?: {
-  // typography (áp dụng toàn breakpoint — không responsive)
+  // typography
   color?: string
   fontStyle?: 'normal' | 'italic'
   fontWeight?: number | string
@@ -74,9 +79,8 @@ import { ParagraphNode } from '@janbox/storefront-builder';
 
 - **Canvas**: no — không chứa node con.
 - **Inline editing**: có thể double-click để chỉnh nội dung trong canvas.
-- **Tag**: cố định là `p`, không thể đổi.
+- **Tag**: chọn qua inspector, giới hạn `p` hoặc `div`.
 
 ## Related nodes
 
-- [`TextNode`](../text/README.md) — base component dùng chung inspector
 - [`HeadingNode`](../heading/README.md) — dành cho tiêu đề với tag `h1`–`h6`

package/dist/lib/paragraph/index.d.ts

@@ -1,3 +1 @@
 export * from './paragraph.node';
-export * from './paragraph.inspector';
-export * from './paragraph.renderer';

package/dist/lib/paragraph/paragraph.node/types.d.ts

@@ -1,2 +1,2 @@
-import { ParagraphProps } from '../paragraph/types';
-export type ParagraphNodeProps = ParagraphProps;
+import { TextProps } from '@janbox/storefront-ui';
+export type ParagraphNodeProps = TextProps;

package/dist/lib/swiper/index.d.ts

@@ -1,2 +1 @@
 export * from './swiper.node';
-export * from './swiper.inspector';

package/dist/lib/tabs/index.d.ts

@@ -1,2 +1 @@
 export * from './tabs.node';
-export * from './tabs.inspector';

package/dist/lib/unordered-list/index.d.ts

@@ -1,2 +1 @@
 export * from './unordered-list.node';
-export * from './unordered-list.inspector';

package/dist/lib/video/index.d.ts

@@ -1,2 +1 @@
 export * from './video.node';
-export * from './video.inspector';

package/dist/minus-BrRnjbhB.js

@@ -0,0 +1,4 @@
+const t = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"></path></svg>';
+export {
+  t as M
+};

package/dist/templates.js

@@ -1,30 +1,14 @@
 import { jsx as e, jsxs as o, Fragment as c } from "@emotion/react/jsx-runtime";
 import { getColorVar as u } from "@janbox/storefront-ui/theme";
 import { renderToString as p } from "react-dom/server";
-import { C as s, G as h, a, H as d, P as t, B as x, I as g, A as f, M as T, b as y, c as n, d as r, e as i } from "./dataset-DQ21hyBo.js";
+import { f as s, G as h, e as a, i as d, P as t, d as x, j as g, a as f, Q as T, b as n, c as r, A as i } from "./countdown-timer.node-d0EtGQ4_.js";
 import "@craftjs/core";
 import "lodash-es";
 import "react";
 import "flat";
 import "@janbox/storefront-ui";
-import "@janbox/storefront-ui/utils";
-import "@janbox/storefront-ui/hooks";
-import "@emotion/react";
-import "@floating-ui/react";
-import "react-use";
-import "react-colorful";
-import "overlayscrollbars-react";
-import "@tanstack/react-virtual";
-import "react-dropzone";
-import "react-datepicker";
-import "@tiptap/extension-text-style";
-import "@tiptap/react";
-import "@tiptap/react/menus";
-import "@tiptap/starter-kit";
-import "react-frame-component";
-import "@hello-pangea/dnd";
-import "usehooks-ts";
-const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { M as y } from "./minus-BrRnjbhB.js";
+const l = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.0021 19.5031H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.99875 14.5012H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.99875 9.49874H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -32,9 +16,9 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
 <path d="M19.0029 8.97259C20.3915 10.3612 20.3915 12.6121 19.0029 14.0007C17.6143 15.3893 15.3634 15.3893 13.9748 14.0007C12.5862 12.6121 12.5862 10.3612 13.9748 8.97259C15.3634 7.58401 17.6143 7.58401 19.0029 8.97259" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0037 16.0018L19.0029 14.001L21.0037 16.0018Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Z = {
+`, N = {
   name: "Hero",
-  icon: { source: m },
+  icon: { source: l },
   templates: [
     {
       template: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ o(
@@ -132,9 +116,9 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
       ) })
     }
   ]
-}, $ = {
+}, V = {
   name: "FAQs",
-  icon: { source: m },
+  icon: { source: l },
   templates: [
     {
       template: /* @__PURE__ */ o(s, { children: [
@@ -177,8 +161,8 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               expandIcon: {
                 position: "right",
                 source: {
-                  expanded: y,
-                  collapsed: T
+                  expanded: T,
+                  collapsed: y
                 }
               }
             },
@@ -326,9 +310,9 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
     image: "https://ucarecdn.com/8a7a086c-1ef5-43a9-a036-daaf1f15a9f1/-/format/auto/",
     title: "Secure Online Payment"
   }
-], J = {
+], q = {
   name: "Guarantee",
-  icon: { source: m },
+  icon: { source: l },
   templates: [
     {
       template: /* @__PURE__ */ o(s, { children: [
@@ -388,7 +372,7 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
             md: {
               cols: 4
             },
-            children: S.map((l, _) => /* @__PURE__ */ o(a, { children: [
+            children: S.map((m, _) => /* @__PURE__ */ o(a, { children: [
               /* @__PURE__ */ e(
                 g,
                 {
@@ -397,14 +381,14 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                     marginLeft: "auto",
                     marginRight: "auto"
                   },
-                  src: l.image
+                  src: m.image
                 }
               ),
               /* @__PURE__ */ e(
                 t,
                 {
                   dangerouslySetInnerHTML: {
-                    __html: l.title
+                    __html: m.title
                   },
                   sizeVariant: "lg",
                   sx: {
@@ -422,7 +406,7 @@ const m = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
   ]
 };
 export {
-  $ as FAQS_SECTION_GROUP,
-  J as GUARANTEE_SECTION_GROUP,
-  Z as HERO_SECTION_GROUP
+  V as FAQS_SECTION_GROUP,
+  q as GUARANTEE_SECTION_GROUP,
+  N as HERO_SECTION_GROUP
 };

package/dist/{tooltip-Bi1eNiUc.js → tooltip-5WmNiI2z.js}

@@ -4,7 +4,7 @@ import { useFloating as P, autoUpdate as S, flip as j, offset as V, size as W, a
 import { get as L } from "lodash-es";
 import { FLOATING_Z_INDEX as U } from "@janbox/storefront-ui/theme";
 import { useControllableState as X } from "@janbox/storefront-ui/hooks";
-import { t as o } from "./dataset-DQ21hyBo.js";
+import { t as o } from "./countdown-timer.node-d0EtGQ4_.js";
 const Y = ({ placement: d = "top", open: p, onOpenChange: c, children: e, content: m }) => {
   const [n, u] = X({
     defaultValue: !1,

package/dist/types/index.d.ts

@@ -14,15 +14,14 @@ export type NodeCustom = {
     displayName?: string;
     selectable?: boolean;
     deletable?: boolean;
-    dropzone?: boolean;
+    hidden?: Partial<Record<Screen, boolean>>;
 };
 export type NodeRelated = {
-    inspector?: React.ComponentType<any>;
+    inspector?: React.ComponentType;
     renderer?: React.ComponentType<{
         render: React.ReactElement;
     }>;
 };
-export type DisplayOnValue = Partial<Record<Screen, boolean>>;
 export type NodeConfig<T = object> = ShallowMerge<Partial<UserComponentConfig<T>>, {
     info: NodeInfo;
     custom?: NodeCustom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-builder",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Standalone storefront builder library extracted from craft-layers-portal",
   "type": "module",
   "files": [
@@ -50,7 +50,6 @@
     "react-datepicker": "^8.8.0",
     "react-dropzone": "^14.2.3",
     "react-frame-component": "^5.2.7",
-    "react-use": "^17.5.1",
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
@@ -60,7 +59,7 @@
     "@types/react-dom": "^19.1.6",
     "@types/react-frame-component": "^4.1.6",
     "type-fest": "^5.5.0",
-    "@janbox/storefront-ui": "latest"
+    "@janbox/storefront-ui": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"