@janbox/storefront-builder 2.0.13 → 2.0.15

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './use-node-data-attributes';
+export * from './use-node-content-editable';
 export * from './use-node-props';
 export * from './use-composer';
 export * from './use-node';

package/dist/hooks/use-node-content-editable.d.ts

@@ -0,0 +1,6 @@
+type UseNodeContentEditableOptions = {
+    enabled: boolean;
+    onChange: (html: string) => void;
+};
+export declare const useNodeContentEditable: ({ enabled, onChange }: UseNodeContentEditableOptions) => void;
+export {};

package/dist/index-D7fewN0t.js

@@ -0,0 +1,187 @@
+import { useNode as g, 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 b, isString as P } from "lodash-es";
+import { useMemo as E, useEffect as L } from "react";
+import { N, X 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 X, f as Y, B as Z, F as K, h as Q, e as W, G as ee, i as oe, P as re, d as se, U as te, R as ne, y as ae, Y as de, Z as f } from "./countdown-timer.node-DkkpScmT.js";
+import { getGridProps as ue, getCellProps as ce, getLinkProps as ie, 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 { flatten as xe } from "flat";
+import { jsx as T } from "@emotion/react/jsx-runtime";
+const o = (s = {}) => {
+  const { id: r } = g(), t = s?.nodeId ?? r, { nodeProps: n, actions: a } = N((d) => ({
+    nodeProps: d.nodes[t ?? r]?.data.props ?? {}
+  })), u = (d, i) => w(d) ? a.setProp(t, d) : a.setProp(t, (p) => {
+    if (i?.merge) {
+      x(p, d);
+      return;
+    }
+    const m = xe(d);
+    Object.keys(m).forEach((l) => {
+      h(p, l, m[l]);
+    });
+  }), c = (d, i, p) => u(
+    i === "xs" ? d : {
+      [i]: d
+    },
+    p
+  );
+  return {
+    nodeProps: s?.transform?.(n) ?? n,
+    setNodeProps: u,
+    setNodeResponsiveProps: c
+  };
+}, Ge = () => o({
+  transform: ue
+}), Re = () => o({
+  transform: ce
+}), Ue = () => o({
+  transform: ie
+}), 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
+}), Xe = () => o({
+  transform: Te
+}), Ye = (s) => o({
+  transform: Ce,
+  nodeId: s
+}), Ze = () => o({
+  transform: Ie
+}), Ke = () => o({
+  transform: ve
+}), Qe = () => o({
+  transform: Ae
+}), We = () => o({
+  transform: we
+}), eo = () => o(), oo = C, ro = ({ children: s, data: r }) => {
+  const { resolver: t } = N((a) => ({
+    resolver: a.options.resolver
+  })), n = E(() => {
+    if (b(r)) return r;
+    const a = P(r) ? JSON.parse(r) : r;
+    return Object.entries(a).forEach(([, u]) => {
+      const c = P(u.type) ? u.type : u.type.resolvedName;
+      t[c] || (console.error(`Unknown node: ${c}`), u.type = {
+        resolvedName: e.Unknown
+      });
+    }), a;
+  }, [r, t]);
+  return /* @__PURE__ */ T(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]: W,
+  [e.Flexbox]: Q,
+  [e.FlexItem]: K,
+  [e.Box]: Z,
+  [e.Container]: Y,
+  // Media
+  [e.Image]: X,
+  [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__ */ T(
+  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 } = g(), { query: t } = N();
+  return L(() => {
+    const n = t.node(r).get(), a = ae(n);
+    if (b(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,
+  Ze as b,
+  Ye as c,
+  Qe as d,
+  De as e,
+  Re as f,
+  We as g,
+  eo as h,
+  je as i,
+  He as j,
+  Ge as k,
+  Xe 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-DyxX3P5n.js

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

package/dist/index.js

@@ -1,8 +1,8 @@
-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-fErSlbD2.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-fErSlbD2.js";
+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 E, n as V, o as j, 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, Q as te } from "./countdown-timer.node-DkkpScmT.js";
+import { u as e } from "./index-D7fewN0t.js";
+import { C as pe, a as ue, N as ie, b as Pe, c as me, d as le, e as ce, f as ge, g as be, h as Ce, i as xe, j as fe, k as Te, l as Ie, m as Le, n as Se, o as Ae, p as ve, q as we, r as Re, s as he, t as ke } from "./index-D7fewN0t.js";
 import { getTextProps as s, getTabPanelProps as a, getListItemProps as r } from "@janbox/storefront-ui";
-import { useNode as qe } from "@craftjs/core";
+import { useNode as Be } from "@craftjs/core";
 import "lodash-es";
 import "react";
 const p = () => e({
@@ -24,10 +24,10 @@ export {
   C as AccordionSummaryNode,
   x as BoxNode,
   f as ButtonNode,
-  ne as Canvas,
+  pe as Canvas,
   T as CanvasPlaceholder,
   I as CellNode,
-  pe as Composer,
+  ue as Composer,
   L as ContainerNode,
   S as CountdownTimerNode,
   A as FlexItemNode,
@@ -41,14 +41,14 @@ export {
   F as ListItemNode,
   G as MarqueeItemNode,
   H as MarqueeNode,
-  ue as NodeElement,
+  ie as NodeElement,
   M as ParagraphNode,
   U as RootNode,
   y as SwiperNode,
   D as SwiperSlideNode,
-  V as TabContentNode,
-  j as TabListNode,
-  E as TabNode,
+  E as TabContentNode,
+  V as TabListNode,
+  j as TabNode,
   z as TabPanelNode,
   J as TabsNode,
   K as UnknownNode,
@@ -65,31 +65,32 @@ export {
   se as parseSvgString,
   ae as registerNodeRelated,
   re as toResponsiveCss,
-  ie as useAccordionGroupNodeProps,
-  Pe as useAccordionNodeProps,
-  me as useBoxNodeProps,
-  le as useButtonNodeProps,
-  ce as useCellNodeProps,
+  Pe as useAccordionGroupNodeProps,
+  me as useAccordionNodeProps,
+  le as useBoxNodeProps,
+  ce as useButtonNodeProps,
+  ge as useCellNodeProps,
   de as useComposer,
-  ge as useContainerNodeProps,
-  be as useCountdownTimerNodeProps,
-  Ce as useFlexItemNodeProps,
-  xe as useFlexboxNodeProps,
-  fe as useGridNodeProps,
+  be as useContainerNodeProps,
+  Ce as useCountdownTimerNodeProps,
+  xe as useFlexItemNodeProps,
+  fe as useFlexboxNodeProps,
+  Te as useGridNodeProps,
   u as useHeadingNodeProps,
-  Te as useIconNodeProps,
-  Ie as useImageNodeProps,
-  Le as useLinkNodeProps,
+  Ie as useIconNodeProps,
+  Le as useImageNodeProps,
+  Se as useLinkNodeProps,
   P as useListItemNodeProps,
-  Se as useMarqueeNodeProps,
-  qe as useNode,
-  Ne as useNodeDataAttributes,
+  Ae as useMarqueeNodeProps,
+  Be as useNode,
+  Ne as useNodeContentEditable,
+  te as useNodeDataAttributes,
   e as useNodeProps,
   p as useParagraphNodeProps,
-  Ae as useSwiperNodeProps,
-  ve as useTabNodeProps,
+  ve as useSwiperNodeProps,
+  we as useTabNodeProps,
   i as useTabPanelNodeProps,
-  we as useTabsNodeProps,
-  Re as useUnorderedListNodeProps,
-  he as useVideoNodeProps
+  Re as useTabsNodeProps,
+  he as useUnorderedListNodeProps,
+  ke as useVideoNodeProps
 };

package/dist/templates.js

@@ -1,7 +1,7 @@
 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 { 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 { f as s, G as h, e as a, i as d, P as t, d as x, j as g, a as f, W as T, b as n, c as r, A as i } from "./countdown-timer.node-DkkpScmT.js";
 import "@craftjs/core";
 import "lodash-es";
 import "react";

package/dist/{tooltip-5WmNiI2z.js → tooltip-wtuK4AA6.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 "./countdown-timer.node-d0EtGQ4_.js";
+import { t as o } from "./countdown-timer.node-DkkpScmT.js";
 const Y = ({ placement: d = "top", open: p, onOpenChange: c, children: e, content: m }) => {
   const [n, u] = X({
     defaultValue: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-builder",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "Standalone storefront builder library extracted from craft-layers-portal",
   "type": "module",
   "files": [
@@ -26,7 +26,7 @@
     "./style.css": "./dist/style.css"
   },
   "peerDependencies": {
-    "@janbox/storefront-ui": ">=4",
+    "@janbox/storefront-ui": ">=4.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
@@ -59,7 +59,7 @@
     "@types/react-dom": "^19.1.6",
     "@types/react-frame-component": "^4.1.6",
     "type-fest": "^5.5.0",
-    "@janbox/storefront-ui": "^4.0.0"
+    "@janbox/storefront-ui": "^4.0.3"
   },
   "publishConfig": {
     "access": "public"

package/dist/index-fErSlbD2.js

@@ -1,206 +0,0 @@
-import { useNode as b, Element as T, Frame as h, Editor as I, DefaultEventHandlers as v } from "@craftjs/core";
-import { isFunction as x, merge as A, set as w, isNil as C, isString as f } from "lodash-es";
-import { useMemo as S, useEffect as E } from "react";
-import { N as l, W as e, g as L, A as y, c as k, b as B, a as F, p as M, T as q, o as G, n as R, q as U, M as H, l as D, 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 ne, R as te, u as ae, y as de, X as ie, Y as g } from "./countdown-timer.node-d0EtGQ4_.js";
-import { getGridProps as ue, getCellProps as ce, getLinkProps as pe, getButtonProps as le, getFlexboxProps as me, getFlexItemProps as Ne, getImageProps as Pe, getMarqueeProps as fe, getTabsProps as ge, getSwiperProps as be, getUnorderedListProps as Ce, getIconProps as Te, getAccordionProps as he, getAccordionGroupProps as Ie, getVideoProps as ve, getBoxProps as xe, getContainerProps as Ae, Primitive as we } from "@janbox/storefront-ui";
-import { flatten as Se } from "flat";
-import { jsx as m } from "@emotion/react/jsx-runtime";
-const o = (n = {}) => {
-  const { id: r } = b(), s = n?.nodeId ?? r, { nodeProps: a, actions: i } = l((d) => ({
-    nodeProps: d.nodes[s ?? r]?.data.props ?? {}
-  })), t = (d, c) => x(d) ? i.setProp(s, d) : i.setProp(s, (p) => {
-    if (c?.merge) {
-      A(p, d);
-      return;
-    }
-    const N = Se(d);
-    Object.keys(N).forEach((P) => {
-      w(p, P, N[P]);
-    });
-  }), u = (d, c, p) => t(
-    c === "xs" ? d : {
-      [c]: d
-    },
-    p
-  );
-  return {
-    nodeProps: n?.transform?.(a) ?? a,
-    setNodeProps: t,
-    setNodeResponsiveProps: u
-  };
-}, Ue = () => o({
-  transform: ue
-}), He = () => o({
-  transform: ce
-}), De = () => o({
-  transform: pe
-}), je = () => o({
-  transform: le
-}), Oe = () => o({
-  transform: me
-}), Ve = () => o({
-  transform: Ne
-}), _e = () => o({
-  transform: Pe
-}), $e = () => o({
-  transform: fe
-}), ze = (n) => o({
-  transform: ge,
-  nodeId: n
-}), Je = (n) => o({
-  nodeId: n
-}), We = () => o({
-  transform: be
-}), Xe = () => o({
-  transform: Ce
-}), Ye = () => o({
-  transform: Te
-}), Ke = (n) => o({
-  transform: he,
-  nodeId: n
-}), Qe = () => o({
-  transform: Ie
-}), Ze = () => o({
-  transform: ve
-}), eo = () => o({
-  transform: xe
-}), oo = () => o({
-  transform: Ae
-}), ro = () => o(), so = T, no = ({ children: n, data: r }) => {
-  const { resolver: s } = l((i) => ({
-    resolver: i.options.resolver
-  })), a = S(() => {
-    if (C(r)) return r;
-    const i = f(r) ? JSON.parse(r) : r;
-    return Object.entries(i).forEach(([, t]) => {
-      const u = f(t.type) ? t.type : t.type.resolvedName;
-      s[u] || (console.error(`Unknown node: ${u}`), t.type = {
-        resolvedName: e.Unknown
-      });
-    }), i;
-  }, [r, s]);
-  return /* @__PURE__ */ m(h, { data: a, children: n });
-}, Ee = {
-  // Root
-  [e.Root]: te,
-  // Unknown
-  [e.Unknown]: ne,
-  // 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]: D,
-  [e.MarqueeItem]: H,
-  // Tabs
-  [e.Tabs]: U,
-  [e.TabList]: R,
-  [e.Tab]: G,
-  [e.TabContent]: q,
-  [e.TabPanel]: M,
-  // Accordion
-  [e.AccordionGroup]: F,
-  [e.Accordion]: B,
-  [e.AccordionSummary]: k,
-  [e.AccordionContent]: y,
-  // Timer
-  [e.CountdownTimer]: L
-}, to = ({ resolver: n, children: r, ...s }) => /* @__PURE__ */ m(
-  I,
-  {
-    enabled: !1,
-    onRender: Le,
-    handlers: (a) => new ye({
-      store: a,
-      removeHoverOnMouseleave: !0,
-      isMultiSelectEnabled: () => !1
-    }),
-    resolver: { ...Ee, ...n },
-    ...s,
-    children: r
-  }
-), Le = ({ render: n }) => {
-  const { id: r, hidden: s } = b((t) => ({
-    hidden: ae(t).hidden ?? {}
-  })), { query: a } = l();
-  return E(() => {
-    const t = a.node(r).get(), u = de(t);
-    if (C(u))
-      throw new Error(
-        `The node with id "${t.data.displayName}" does not have a resolved ID. Please check your node configuration.`
-      );
-  }, [r, a]), Object.values(s).some((t) => t === !0) ? /* @__PURE__ */ m(
-    we,
-    {
-      sx: {
-        display: s.xs ? "none" : "contents",
-        sm: {
-          display: s.sm ? "none" : "contents"
-        },
-        md: {
-          display: s.md ? "none" : "contents"
-        },
-        lg: {
-          display: s.lg ? "none" : "contents"
-        }
-      },
-      children: n
-    }
-  ) : n;
-};
-class ye extends v {
-  handlers() {
-    const r = super.handlers();
-    return {
-      ...r,
-      select(s, a) {
-        return (s.getAttribute(ie.DATA_NODE_SELECTABLE) ?? g.True) === g.True ? r.select(s, a) : () => {
-        };
-      }
-    };
-  }
-}
-export {
-  no as C,
-  so as N,
-  to as a,
-  Qe as b,
-  Ke as c,
-  eo as d,
-  je as e,
-  He as f,
-  oo as g,
-  ro as h,
-  Ve as i,
-  Oe as j,
-  Ue as k,
-  Ye as l,
-  _e as m,
-  De as n,
-  $e as o,
-  We as p,
-  Je as q,
-  ze as r,
-  Xe as s,
-  Ze as t,
-  o as u
-};

package/dist/index-tISPdvwn.js

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