@janbox/storefront-builder 2.0.9 → 2.0.10

package/dist/hooks/use-first-mount-state.d.ts

@@ -0,0 +1 @@
+export declare function useFirstMountState(): boolean;

package/dist/hooks/use-update-effect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from 'react';
+export declare const useUpdateEffect: (effect: EffectCallback, deps: DependencyList) => void;

package/dist/index-3PtMdwiC.js

@@ -0,0 +1,188 @@
+import { useNode as T, Element as C, Frame as I, Editor as v, DefaultEventHandlers as A } from "@craftjs/core";
+import { isFunction as w, merge as x, set as h, isNil as g, isString as P } from "lodash-es";
+import { useMemo as E, useEffect as L } from "react";
+import { N, W as e, g as S, A as k, c as B, b as F, a as y, p as M, T as q, o as G, n as R, q as U, M as D, l as H, m as j, S as O, k as V, r as _, L as $, I as z, V as J, j as W, f as X, B as Y, F as K, h as Q, e as Z, G as ee, i as oe, P as re, d as se, U as te, R as ne, y as ae, X as de, Y as f } from "./countdown-timer.node-d0EtGQ4_.js";
+import { getGridProps as ue, getCellProps as ie, getLinkProps as ce, getButtonProps as pe, getFlexboxProps as Ne, getFlexItemProps as me, getImageProps as le, getMarqueeProps as Pe, getTabsProps as fe, getSwiperProps as ge, getUnorderedListProps as be, getIconProps as Te, getAccordionProps as Ce, getAccordionGroupProps as Ie, getVideoProps as ve, getBoxProps as Ae, getContainerProps as we } from "@janbox/storefront-ui";
+import { jsx as b } from "@emotion/react/jsx-runtime";
+import { flatten as xe } from "flat";
+const o = (s = {}) => {
+  const { id: r } = T(), t = s?.nodeId ?? r, { nodeProps: n, actions: a } = N((d) => ({
+    nodeProps: d.nodes[t ?? r]?.data.props ?? {}
+  })), u = (d, c) => w(d) ? a.setProp(t, d) : a.setProp(t, (p) => {
+    if (c?.merge) {
+      x(p, d);
+      return;
+    }
+    const m = xe(d);
+    Object.keys(m).forEach((l) => {
+      h(p, l, m[l]);
+    });
+  }), i = (d, c, p) => u(
+    c === "xs" ? d : {
+      [c]: d
+    },
+    p
+  );
+  return {
+    id: t,
+    nodeProps: s?.transform?.(n) ?? n,
+    setNodeProps: u,
+    setNodeResponsiveProps: i
+  };
+}, Ge = () => o({
+  transform: ue
+}), Re = () => o({
+  transform: ie
+}), Ue = () => o({
+  transform: ce
+}), De = () => o({
+  transform: pe
+}), He = () => o({
+  transform: Ne
+}), je = () => o({
+  transform: me
+}), Oe = () => o({
+  transform: le
+}), Ve = () => o({
+  transform: Pe
+}), _e = (s) => o({
+  transform: fe,
+  nodeId: s
+}), $e = (s) => o({
+  nodeId: s
+}), ze = () => o({
+  transform: ge
+}), Je = () => o({
+  transform: be
+}), We = () => o({
+  transform: Te
+}), Xe = (s) => o({
+  transform: Ce,
+  nodeId: s
+}), Ye = () => o({
+  transform: Ie
+}), Ke = () => o({
+  transform: ve
+}), Qe = () => o({
+  transform: Ae
+}), Ze = () => o({
+  transform: we
+}), eo = () => o(), oo = C, ro = ({ children: s, data: r }) => {
+  const { resolver: t } = N((a) => ({
+    resolver: a.options.resolver
+  })), n = E(() => {
+    if (g(r)) return r;
+    const a = P(r) ? JSON.parse(r) : r;
+    return Object.entries(a).forEach(([, u]) => {
+      const i = P(u.type) ? u.type : u.type.resolvedName;
+      t[i] || (console.error(`Unknown node: ${i}`), u.type = {
+        resolvedName: e.Unknown
+      });
+    }), a;
+  }, [r, t]);
+  return /* @__PURE__ */ b(I, { data: n, children: s });
+}, he = {
+  // Root
+  [e.Root]: ne,
+  // Unknown
+  [e.Unknown]: te,
+  // Button
+  [e.Button]: se,
+  // Text
+  [e.Paragraph]: re,
+  [e.Heading]: oe,
+  // Layout
+  [e.Grid]: ee,
+  [e.Cell]: Z,
+  [e.Flexbox]: Q,
+  [e.FlexItem]: K,
+  [e.Box]: Y,
+  [e.Container]: X,
+  // Media
+  [e.Image]: W,
+  [e.Video]: J,
+  [e.Icon]: z,
+  // Navigation
+  [e.Link]: $,
+  // List
+  [e.UnorderedList]: _,
+  [e.ListItem]: V,
+  // Carousel
+  [e.Swiper]: O,
+  [e.SwiperSlide]: j,
+  [e.Marquee]: H,
+  [e.MarqueeItem]: D,
+  // Tabs
+  [e.Tabs]: U,
+  [e.TabList]: R,
+  [e.Tab]: G,
+  [e.TabContent]: q,
+  [e.TabPanel]: M,
+  // Accordion
+  [e.AccordionGroup]: y,
+  [e.Accordion]: F,
+  [e.AccordionSummary]: B,
+  [e.AccordionContent]: k,
+  // Timer
+  [e.CountdownTimer]: S
+}, so = ({ resolver: s, children: r, ...t }) => /* @__PURE__ */ b(
+  v,
+  {
+    enabled: !1,
+    onRender: Ee,
+    handlers: (n) => new Le({
+      store: n,
+      removeHoverOnMouseleave: !0,
+      isMultiSelectEnabled: () => !1
+    }),
+    resolver: { ...he, ...s },
+    ...t,
+    children: r
+  }
+), Ee = ({ render: s }) => {
+  const { id: r } = o(), { query: t } = N();
+  return L(() => {
+    const n = t.node(r).get(), a = ae(n);
+    if (g(a))
+      throw new Error(
+        `The node with id "${n.data.displayName}" does not have a resolved ID. Please check your node configuration.`
+      );
+  }, [r, t]), s;
+};
+class Le extends A {
+  handlers() {
+    const r = super.handlers();
+    return {
+      ...r,
+      select(t, n) {
+        return (t.getAttribute(de.DATA_NODE_SELECTABLE) ?? f.True) === f.True ? r.select(t, n) : () => {
+        };
+      }
+    };
+  }
+}
+export {
+  ro as C,
+  oo as N,
+  so as a,
+  Ye as b,
+  Xe as c,
+  Qe as d,
+  De as e,
+  Re as f,
+  Ze as g,
+  eo as h,
+  je as i,
+  He as j,
+  Ge as k,
+  We as l,
+  Oe as m,
+  Ue as n,
+  Ve as o,
+  ze as p,
+  $e as q,
+  _e as r,
+  Je as s,
+  Ke as t,
+  o as u
+};

package/dist/index-tISPdvwn.js

@@ -0,0 +1,4 @@
+import { W as p } from "./tooltip-5WmNiI2z.js";
+export {
+  p as WbTooltip
+};

package/dist/index.js

@@ -1,215 +1,95 @@
-import { u as f, f as T, g as x, h as H, i as _ } from "./dataset-DQ21hyBo.js";
-import { e as ie, A as pe, c as ce, d as ue, j as Ne, B as me, k as le, a as Pe, C as Ie, l as ge, F as fe, m as Te, G as xe, H as be, n as he, I as Ce, L as Le, o as Ae, p as Se, q as ve, P as He, R as _e, S as Me, r as Fe, T as we, s as Ee, v as Re, w as ye, x as Be, U as Ge, y as Ue, V as ke, z as De, D as qe, E as Ve, J as je, K as ze, N as Je, O as Ke, Q as Oe, W as Qe, X as We, Y as Xe } from "./dataset-DQ21hyBo.js";
-import { u as i, D as b, a as h, T as C } from "./countdown-timer.inspector-EFXiJ973.js";
-import { A as Ze, B as $e, b as eo, C as oo, c as so, d as ro, e as to, f as ao, F as no, g as io, G as po, H as co, I as uo, h as No, L as mo, M as lo, N as Po, P as Io, S as go, i as fo, j as To, k as xo, U as bo, V as ho, l as Co, m as Lo, n as Ao, o as So, p as vo, q as Ho, r as _o, s as Mo, t as Fo, v as wo, w as Eo, x as Ro, y as yo, z as Bo, E as Go, J as Uo, K as ko, O as Do, Q as qo, R as Vo } from "./countdown-timer.inspector-EFXiJ973.js";
-import { useNode as L } from "@craftjs/core";
-import { useNode as zo } from "@craftjs/core";
-import { isNil as A } from "lodash-es";
-import { useRef as a, useEffect as S, Fragment as n } from "react";
-import { jsxs as d, jsx as s } from "@emotion/react/jsx-runtime";
-import "flat";
-import { useDebounceCallback as v } from "usehooks-ts";
-import "@janbox/storefront-ui/utils";
-import "@janbox/storefront-ui/hooks";
-import "@emotion/react";
-import "@floating-ui/react";
-import "react-use";
-import "@janbox/storefront-ui/theme";
-import "react-colorful";
-import "overlayscrollbars-react";
-import "@tanstack/react-virtual";
-import "react-dropzone";
-import "react-datepicker";
-import "react-frame-component";
-import { getTextProps as M, getListItemProps as F, getTabPanelProps as w } from "@janbox/storefront-ui";
-const E = () => i(), se = () => {
-  const p = f(), { connectors: c } = L(), u = a(null), {
-    id: N,
-    nodeProps: { dangerouslySetInnerHTML: t, ...m },
-    setNodeProps: l
-  } = E(), o = a(t?.__html), { isActive: r } = T((e, g) => ({
-    isActive: g.getEvent("selected").contains(N)
-  }));
-  S(() => {
-    r || A(o.current) || (l({
-      dangerouslySetInnerHTML: { __html: o.current }
-    }), o.current = void 0);
-  }, [r]);
-  const P = v(({ editor: e }) => {
-    o.current = e.getHTML();
-  }), { mode: I } = x();
-  return /* @__PURE__ */ d(n, { children: [
-    r && I === "full" && /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ s(b, {}),
-      /* @__PURE__ */ s(h, {})
-    ] }),
-    /* @__PURE__ */ s(
-      H,
-      {
-        ...m,
-        ...p,
-        ref: (e) => {
-          e && c.connect(e);
-        },
-        children: /* @__PURE__ */ s(
-          C,
-          {
-            ref: u,
-            options: {
-              content: t?.__html,
-              onUpdate: P
-            }
-          }
-        )
-      }
-    )
-  ] });
-}, R = () => i({
-  transform: M
-}), re = () => {
-  const p = f(), { connectors: c } = L(), u = a(null), {
-    id: N,
-    nodeProps: { dangerouslySetInnerHTML: t, ...m },
-    setNodeProps: l
-  } = R(), o = a(t?.__html), { isActive: r } = T((e, g) => ({
-    isActive: g.getEvent("selected").contains(N)
-  }));
-  S(() => {
-    r || A(o.current) || (l({
-      dangerouslySetInnerHTML: { __html: o.current }
-    }), o.current = void 0);
-  }, [r]);
-  const P = v(({ editor: e }) => {
-    o.current = e.getHTML();
-  }), { mode: I } = x();
-  return /* @__PURE__ */ d(n, { children: [
-    r && I === "full" && /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ s(b, {}),
-      /* @__PURE__ */ s(h, {})
-    ] }),
-    /* @__PURE__ */ s(
-      _,
-      {
-        ...m,
-        ...p,
-        ref: (e) => {
-          e && c.connect(e);
-        },
-        children: /* @__PURE__ */ s(
-          C,
-          {
-            ref: u,
-            options: {
-              content: t?.__html,
-              onUpdate: P
-            }
-          }
-        )
-      }
-    )
-  ] });
-}, te = () => i({
-  transform: F
-}), ae = () => i({
-  transform: w
+import { A as c, a as g, b, c as C, B as x, d as f, C as T, e as I, f as L, g as S, F as A, h as v, G as w, H as R, i as h, I as k, j as q, L as B, k as F, M as G, l as H, P as M, R as U, S as y, m as D, T as V, n as j, o as E, p as z, q as J, U as K, r as O, V as Q, s as W, u as X, v as Y, w as Z, x as _, y as $, z as ee, D as oe, E as se, J as ae, K as re, N as de, O as Ne } from "./countdown-timer.node-d0EtGQ4_.js";
+import { u as e } from "./index-3PtMdwiC.js";
+import { C as ne, a as pe, N as ue, b as ie, c as Pe, d as me, e as le, f as ce, g as ge, h as be, i as Ce, j as xe, k as fe, l as Te, m as Ie, n as Le, o as Se, p as Ae, q as ve, r as we, s as Re, t as he } from "./index-3PtMdwiC.js";
+import { getTextProps as s, getTabPanelProps as a, getListItemProps as r } from "@janbox/storefront-ui";
+import { useNode as qe } from "@craftjs/core";
+import "lodash-es";
+import "react";
+const p = () => e({
+  transform: (o) => s({
+    ...o,
+    as: o.as ?? "div"
+  })
+}), u = () => e({
+  transform: s
+}), i = () => e({
+  transform: a
+}), P = () => e({
+  transform: r
 });
 export {
-  ie as AccordionContentNode,
-  Ze as AccordionGroupInspector,
-  pe as AccordionGroupNode,
-  ce as AccordionNode,
-  ue as AccordionSummaryNode,
-  $e as BoxInspector,
-  Ne as BoxNode,
-  eo as ButtonInspector,
-  me as ButtonNode,
-  oo as Canvas,
-  le as CanvasPlaceholder,
-  so as CellInspector,
-  Pe as CellNode,
-  ro as Composer,
-  to as ContainerInspector,
-  Ie as ContainerNode,
-  ao as CountdownTimerInspector,
-  ge as CountdownTimerNode,
-  no as FlexItemInspector,
-  fe as FlexItemNode,
-  io as FlexboxInspector,
-  Te as FlexboxNode,
-  po as GridInspector,
-  xe as GridNode,
-  _ as Heading,
-  co as HeadingInspector,
-  be as HeadingNode,
-  re as HeadingRenderer,
-  uo as IconInspector,
-  he as IconNode,
-  No as ImageInspector,
-  Ce as ImageNode,
-  mo as LinkInspector,
-  Le as LinkNode,
-  Ae as ListItemNode,
-  lo as MarqueeInspector,
-  Se as MarqueeItemNode,
-  ve as MarqueeNode,
-  Po as NodeElement,
-  Io as ParagraphInspector,
-  He as ParagraphNode,
-  se as ParagraphRenderer,
-  _e as RootNode,
-  go as SizeField,
-  fo as SwiperInspector,
-  Me as SwiperNode,
-  Fe as SwiperSlideNode,
-  we as TabContentNode,
-  Ee as TabListNode,
-  Re as TabNode,
-  ye as TabPanelNode,
-  To as TabsInspector,
-  Be as TabsNode,
-  xo as TextInspector,
-  Ge as UnknownNode,
-  bo as UnorderedListInspector,
-  Ue as UnorderedListNode,
-  ho as VariantField,
-  Co as VideoInspector,
-  ke as VideoNode,
-  De as defineNode,
-  qe as getNodeCustom,
-  Ve as getNodeDisplayName,
-  je as getNodeInfo,
-  ze as getNodeRelated,
-  Je as getNodeResolved,
-  Ke as isNodeSelectable,
-  Oe as parseNumber,
-  Qe as parseSvgString,
-  We as registerNodeRelated,
-  Xe as toResponsiveCss,
-  Lo as useAccordionGroupNodeProps,
-  Ao as useAccordionNodeProps,
-  So as useBoxNodeProps,
-  vo as useButtonNodeProps,
-  Ho as useCellNodeProps,
-  T as useComposer,
-  _o as useContainerNodeProps,
-  Mo as useCountdownTimerNodeProps,
-  Fo as useFlexItemNodeProps,
-  wo as useFlexboxNodeProps,
-  Eo as useGridNodeProps,
-  R as useHeadingNodeProps,
-  Ro as useIconNodeProps,
-  yo as useImageNodeProps,
-  Bo as useLinkNodeProps,
-  te as useListItemNodeProps,
-  Go as useMarqueeNodeProps,
-  zo as useNode,
-  f as useNodeDataAttributes,
-  i as useNodeProps,
-  E as useParagraphNodeProps,
-  Uo as useSwiperNodeProps,
-  ko as useTabNodeProps,
-  ae as useTabPanelNodeProps,
-  Do as useTabsNodeProps,
-  qo as useUnorderedListNodeProps,
-  Vo as useVideoNodeProps
+  c as AccordionContentNode,
+  g as AccordionGroupNode,
+  b as AccordionNode,
+  C as AccordionSummaryNode,
+  x as BoxNode,
+  f as ButtonNode,
+  ne as Canvas,
+  T as CanvasPlaceholder,
+  I as CellNode,
+  pe as Composer,
+  L as ContainerNode,
+  S as CountdownTimerNode,
+  A as FlexItemNode,
+  v as FlexboxNode,
+  w as GridNode,
+  R as Heading,
+  h as HeadingNode,
+  k as IconNode,
+  q as ImageNode,
+  B as LinkNode,
+  F as ListItemNode,
+  G as MarqueeItemNode,
+  H as MarqueeNode,
+  ue as NodeElement,
+  M as ParagraphNode,
+  U as RootNode,
+  y as SwiperNode,
+  D as SwiperSlideNode,
+  V as TabContentNode,
+  j as TabListNode,
+  E as TabNode,
+  z as TabPanelNode,
+  J as TabsNode,
+  K as UnknownNode,
+  O as UnorderedListNode,
+  Q as VideoNode,
+  W as defineNode,
+  X as getNodeCustom,
+  Y as getNodeDisplayName,
+  Z as getNodeInfo,
+  _ as getNodeRelated,
+  $ as getNodeResolved,
+  ee as isNodeSelectable,
+  oe as parseNumber,
+  se as parseSvgString,
+  ae as registerNodeRelated,
+  re as toResponsiveCss,
+  ie as useAccordionGroupNodeProps,
+  Pe as useAccordionNodeProps,
+  me as useBoxNodeProps,
+  le as useButtonNodeProps,
+  ce as useCellNodeProps,
+  de as useComposer,
+  ge as useContainerNodeProps,
+  be as useCountdownTimerNodeProps,
+  Ce as useFlexItemNodeProps,
+  xe as useFlexboxNodeProps,
+  fe as useGridNodeProps,
+  u as useHeadingNodeProps,
+  Te as useIconNodeProps,
+  Ie as useImageNodeProps,
+  Le as useLinkNodeProps,
+  P as useListItemNodeProps,
+  Se as useMarqueeNodeProps,
+  qe as useNode,
+  Ne as useNodeDataAttributes,
+  e as useNodeProps,
+  p as useParagraphNodeProps,
+  Ae as useSwiperNodeProps,
+  ve as useTabNodeProps,
+  i as useTabPanelNodeProps,
+  we as useTabsNodeProps,
+  Re as useUnorderedListNodeProps,
+  he as useVideoNodeProps
 };

package/dist/lib/accordion-group/index.d.ts

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

package/dist/lib/box/README.md

@@ -8,12 +8,6 @@ Block container đa năng (render ra `div`). Là canvas node — chứa bất k
 
 ## Configurable props
 
-### Top-level props
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `container` | `boolean` | Bật max-width container constraint |
-
 ### `sx` props
 
 ```ts
@@ -66,8 +60,8 @@ sx?: {
 import { BoxNode } from '@janbox/storefront-builder';
 
 // Wrapper đơn giản
-<BoxNode sx={{ padding: 16 }}>
-  <TextNode>Hello</TextNode>
+<BoxNode sx={{ paddingTop: 16, paddingRight: 16, paddingBottom: 16, paddingLeft: 16 }}>
+  <HeadingNode as="h2">Hello</HeadingNode>
 </BoxNode>
 
 // Section có background
@@ -81,9 +75,8 @@ import { BoxNode } from '@janbox/storefront-builder';
   ...
 </BoxNode>
 
-// Container với responsive padding
+// Responsive padding
 <BoxNode
-  container
   sx={{
     paddingTop: 24,
     paddingBottom: 24,

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

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

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

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

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

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

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