@crediblemark/build 0.24.4 → 0.24.6

package/dist/no-external.mjs

@@ -1,8 +1,11 @@
 import {
+  ColorPickerField,
   CredBuild,
   Drawer,
   DropZone,
   Render,
+  ResponsiveSliderField,
+  SliderField,
   blocksPlugin,
   createUseCredBuild,
   fieldsPlugin,
@@ -12,17 +15,18 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-P3RHOUJG.mjs";
-import "./chunk-6RPYD5IO.mjs";
+} from "./chunk-AMHAYK37.mjs";
+import "./chunk-YE4FXNJW.mjs";
 import {
   setDeep
-} from "./chunk-BQW2NTNG.mjs";
+} from "./chunk-QBCQ7LDT.mjs";
+import "./chunk-TE6MUUVZ.mjs";
 import {
   AutoField,
   Button,
   FieldLabel
-} from "./chunk-H2LU4EW3.mjs";
-import "./chunk-2VS2BST6.mjs";
+} from "./chunk-WDTSUNWU.mjs";
+import "./chunk-WH3A7FAR.mjs";
 import {
   migrate,
   resolveAllData,
@@ -37,11 +41,11 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-VBNE6GK2.mjs";
-import "./chunk-LBMMY5IM.mjs";
-import "./chunk-WKMRHPOM.mjs";
-import "./chunk-5OK3IPVN.mjs";
-import "./chunk-GIUKL443.mjs";
+} from "./chunk-5JSNFZKX.mjs";
+import "./chunk-MFTVX2ME.mjs";
+import "./chunk-KUWVOWUV.mjs";
+import "./chunk-VE6BIQKS.mjs";
+import "./chunk-XLNVCM4Q.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";
@@ -54,6 +58,7 @@ export {
   ActionBar,
   AutoField,
   Button,
+  ColorPickerField,
   CredBuild,
   Drawer,
   DropZone,
@@ -62,8 +67,10 @@ export {
   IconButton,
   Label,
   Render,
+  ResponsiveSliderField,
   RichTextMenu,
   Separator,
+  SliderField,
   blocksPlugin,
   createUseCredBuild,
   fieldsPlugin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediblemark/build",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "description": "The open-source visual editor for React",
   "author": "Rasyiqi Crediblemark",
   "repository": {

package/dist/ObjectField-4SN4ZYFF.mjs

@@ -1,87 +0,0 @@
-import {
-  SubField
-} from "./chunk-IRJS3HWQ.mjs";
-import {
-  getDeep,
-  useFieldStoreApi,
-  useNestedFieldContext
-} from "./chunk-H2LU4EW3.mjs";
-import "./chunk-2VS2BST6.mjs";
-import "./chunk-AL77I3BV.mjs";
-import "./chunk-VBNE6GK2.mjs";
-import "./chunk-LBMMY5IM.mjs";
-import "./chunk-WKMRHPOM.mjs";
-import "./chunk-5OK3IPVN.mjs";
-import {
-  EllipsisVertical,
-  useAppStore
-} from "./chunk-GIUKL443.mjs";
-import "./chunk-64A37UUC.mjs";
-import "./chunk-SMAWAXVX.mjs";
-import {
-  get_class_name_factory_default
-} from "./chunk-BFHV72KK.mjs";
-import "./chunk-7LXZOPYT.mjs";
-import "./chunk-AFVEAZTD.mjs";
-
-// css-module:/home/crediblemark/Project/Credibuild/components/AutoField/fields/ObjectField/styles.module.css#css-module
-var styles_module_default = { "ObjectField": "_ObjectField_b2xjm_5", "ObjectField-fieldset": "_ObjectField-fieldset_b2xjm_13" };
-
-// components/AutoField/fields/ObjectField/index.tsx
-import { jsx } from "react/jsx-runtime";
-var getClassName = get_class_name_factory_default("ObjectField", styles_module_default);
-var ObjectField = ({
-  field,
-  onChange,
-  id,
-  name = id,
-  label,
-  labelIcon,
-  Label,
-  readOnly
-}) => {
-  const { localName = name } = useNestedFieldContext();
-  const fieldStore = useFieldStoreApi();
-  const canEdit = useAppStore(
-    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
-  );
-  const getValue = () => getDeep(fieldStore.getState(), name) ?? {};
-  if (field.type !== "object" || !field.objectFields) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Label,
-    {
-      label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx(EllipsisVertical, { size: 16 }),
-      el: "div",
-      readOnly,
-      children: /* @__PURE__ */ jsx("div", { className: getClassName(), children: /* @__PURE__ */ jsx("fieldset", { className: getClassName("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
-        const subField = field.objectFields[subName];
-        const subPath = `${localName}.${subName}`;
-        return /* @__PURE__ */ jsx(
-          SubField,
-          {
-            id: `${id}_${subName}`,
-            name,
-            subName,
-            localName,
-            field: subField,
-            forceReadOnly: !canEdit,
-            onChange: (subValue, ui, subName2) => {
-              const value = getValue();
-              if (value[subName2] === subValue) {
-                return;
-              }
-              onChange({ ...value, [subName2]: subValue }, ui);
-            }
-          },
-          subPath
-        );
-      }) }) })
-    }
-  );
-};
-export {
-  ObjectField
-};

package/dist/chunk-BQW2NTNG.mjs

@@ -1,339 +0,0 @@
-import {
-  GripVertical
-} from "./chunk-GIUKL443.mjs";
-import {
-  get_class_name_factory_default
-} from "./chunk-BFHV72KK.mjs";
-
-// css-module:/home/crediblemark/Project/Credibuild/components/DragIcon/styles.module.css#css-module
-var styles_module_default = { "DragIcon": "_DragIcon_ei1r9_1", "DragIcon--disabled": "_DragIcon--disabled_ei1r9_8" };
-
-// components/DragIcon/index.tsx
-import { jsx } from "react/jsx-runtime";
-var getClassName = get_class_name_factory_default("DragIcon", styles_module_default);
-var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ jsx("div", { className: getClassName({ disabled: isDragDisabled }), children: /* @__PURE__ */ jsx(GripVertical, { size: 12, strokeWidth: 2.5 }) });
-
-// lib/data/set-deep.ts
-function setDeep(node, path, newVal) {
-  const parts = path.split(".");
-  const newNode = { ...node };
-  let cur = newNode;
-  for (let i = 0; i < parts.length; i++) {
-    const [prop, idxStr] = parts[i].replace("]", "").split("[");
-    const isLast = i === parts.length - 1;
-    if (idxStr !== void 0) {
-      if (!Array.isArray(cur[prop])) {
-        cur[prop] = [];
-      }
-      const idx = Number(idxStr);
-      if (isLast) {
-        cur[prop][idx] = newVal;
-        continue;
-      }
-      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
-      cur = cur[prop][idx];
-      continue;
-    }
-    if (isLast) {
-      cur[prop] = newVal;
-      continue;
-    }
-    if (cur[prop] === void 0) {
-      cur[prop] = {};
-    }
-    cur = cur[prop];
-  }
-  return { ...node, ...newNode };
-}
-
-// lib/dnd/use-sensors.ts
-import { useState } from "react";
-import { PointerSensor } from "@dnd-kit/react";
-import { isElement } from "@dnd-kit/dom/utilities";
-var touchDefault = { delay: { value: 200, tolerance: 10 } };
-var otherDefault = {
-  delay: { value: 200, tolerance: 10 },
-  distance: { value: 5 }
-};
-var useSensors = ({
-  other = otherDefault,
-  mouse,
-  touch = touchDefault
-} = {
-  touch: touchDefault,
-  other: otherDefault
-}) => {
-  const [sensors] = useState(() => [
-    PointerSensor.configure({
-      activationConstraints(event, source) {
-        const { pointerType, target } = event;
-        if (pointerType === "mouse" && isElement(target) && (source.handle === target || source.handle?.contains(target))) {
-          return mouse;
-        }
-        if (pointerType === "touch") {
-          return touch;
-        }
-        return other;
-      }
-    })
-  ]);
-  return sensors;
-};
-
-// lib/dnd/collision/dynamic/index.ts
-import {
-  CollisionPriority,
-  CollisionType as CollisionType2
-} from "@dnd-kit/abstract";
-
-// lib/dnd/collision/directional/index.ts
-import { CollisionType } from "@dnd-kit/abstract";
-
-// lib/dnd/collision/collision-debug.ts
-var DEBUG = false;
-var debugElements = {};
-var timeout;
-var collisionDebug = (a, b, id, color, label) => {
-  if (!DEBUG) return;
-  const debugId = `${id}-debug`;
-  clearTimeout(timeout);
-  timeout = setTimeout(() => {
-    Object.entries(debugElements).forEach(([id2, { svg }]) => {
-      svg.remove();
-      delete debugElements[id2];
-    });
-  }, 1e3);
-  requestAnimationFrame(() => {
-    const existingEl = debugElements[debugId];
-    let line = debugElements[debugId]?.line;
-    let text = debugElements[debugId]?.text;
-    if (!existingEl) {
-      const svgNs = "http://www.w3.org/2000/svg";
-      const svg = document.createElementNS(svgNs, "svg");
-      line = document.createElementNS(svgNs, "line");
-      text = document.createElementNS(svgNs, "text");
-      svg.setAttribute("id", debugId);
-      svg.setAttribute(
-        "style",
-        "position: fixed; height: 100%; width: 100%; pointer-events: none; top: 0px; left: 0px;"
-      );
-      svg.appendChild(line);
-      svg.appendChild(text);
-      text.setAttribute("fill", `black`);
-      document.body.appendChild(svg);
-      debugElements[debugId] = { svg, line, text };
-    }
-    line.setAttribute("x1", a.x.toString());
-    line.setAttribute("x2", b.x.toString());
-    line.setAttribute("y1", a.y.toString());
-    line.setAttribute("y2", b.y.toString());
-    line.setAttribute("style", `stroke:${color};stroke-width:2`);
-    text.setAttribute("x", (a.x - (a.x - b.x) / 2).toString());
-    text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
-    if (label) {
-      text.innerHTML = label;
-    }
-  });
-};
-
-// lib/dnd/collision/directional/index.ts
-var distanceChange = "increasing";
-var directionalCollision = (input, previous) => {
-  const { dragOperation, droppable } = input;
-  const { shape: dropShape } = droppable;
-  const { position } = dragOperation;
-  const dragShape = dragOperation.shape?.current;
-  if (!dragShape || !dropShape) return null;
-  const dropCenter = dropShape.center;
-  const distanceToPrevious = Math.sqrt(
-    Math.pow(dropCenter.x - previous.x, 2) + Math.pow(dropCenter.y - previous.y, 2)
-  );
-  const distanceToCurrent = Math.sqrt(
-    Math.pow(dropCenter.x - position.current.x, 2) + Math.pow(dropCenter.y - position.current.y, 2)
-  );
-  distanceChange = distanceToCurrent === distanceToPrevious ? distanceChange : distanceToCurrent < distanceToPrevious ? "decreasing" : "increasing";
-  collisionDebug(
-    dragShape.center,
-    dropCenter,
-    droppable.id.toString(),
-    "rebeccapurple"
-  );
-  if (distanceChange === "decreasing") {
-    return {
-      id: droppable.id,
-      value: 1,
-      type: CollisionType.Collision
-    };
-  }
-  return null;
-};
-
-// lib/dnd/collision/dynamic/get-direction.ts
-var getDirection = (dragAxis, delta) => {
-  if (dragAxis === "dynamic") {
-    if (Math.abs(delta.y) > Math.abs(delta.x)) {
-      return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
-    } else {
-      return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
-    }
-  } else if (dragAxis === "x") {
-    return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
-  }
-  return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
-};
-
-// lib/dnd/collision/dynamic/get-midpoint-impact.ts
-var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0) => {
-  const dragRect = dragShape.boundingRectangle;
-  const dropCenter = dropShape.center;
-  if (direction === "down") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
-    return dragRect.bottom >= dropCenter.y + offset2;
-  } else if (direction === "up") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
-    return dragRect.top < dropCenter.y - offset2;
-  } else if (direction === "left") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.width;
-    return dropCenter.x - offset2 >= dragRect.left;
-  }
-  const offset = offsetMultiplier * dropShape.boundingRectangle.width;
-  return dragRect.right - offset >= dropCenter.x;
-};
-
-// lib/dnd/collision/dynamic/track-movement-interval.ts
-import { Point } from "@dnd-kit/geometry";
-var INTERVAL_SENSITIVITY = 10;
-var intervalCache = {
-  current: { x: 0, y: 0 },
-  delta: { x: 0, y: 0 },
-  previous: { x: 0, y: 0 },
-  direction: null
-};
-var trackMovementInterval = (point, dragAxis = "dynamic") => {
-  intervalCache.current = point;
-  intervalCache.delta = {
-    x: point.x - intervalCache.previous.x,
-    y: point.y - intervalCache.previous.y
-  };
-  intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
-  if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
-    intervalCache.previous = Point.from(point);
-  }
-  return intervalCache;
-};
-
-// lib/dnd/collision/dynamic/index.ts
-import { closestCorners } from "@dnd-kit/collision";
-
-// lib/dnd/collision/dynamic/store.ts
-import { createStore } from "zustand/vanilla";
-var collisionStore = createStore(() => ({
-  fallbackEnabled: false
-}));
-
-// lib/dnd/collision/dynamic/index.ts
-var flushNext = "";
-var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((input) => {
-  const { dragOperation, droppable } = input;
-  const { position } = dragOperation;
-  const dragShape = dragOperation.shape?.current;
-  const { shape: dropShape } = droppable;
-  if (!dragShape || !dropShape) {
-    return null;
-  }
-  const { center: dragCenter } = dragShape;
-  const { fallbackEnabled } = collisionStore.getState();
-  const interval = trackMovementInterval(position.current, dragAxis);
-  const data = {
-    direction: interval.direction
-  };
-  const { center: dropCenter } = dropShape;
-  const overMidpoint = getMidpointImpact(
-    dragShape,
-    dropShape,
-    interval.direction,
-    midpointOffset
-  );
-  if (dragOperation.source?.id === droppable.id) {
-    const collision = directionalCollision(input, interval.previous);
-    collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
-    if (collision) {
-      return {
-        ...collision,
-        priority: CollisionPriority.Highest,
-        data
-      };
-    }
-  }
-  const intersectionArea = dragShape.intersectionArea(dropShape);
-  const intersectionRatio = intersectionArea / dropShape.area;
-  if (intersectionArea && overMidpoint) {
-    collisionDebug(
-      dragCenter,
-      dropCenter,
-      droppable.id.toString(),
-      "green",
-      interval.direction
-    );
-    const collision = {
-      id: droppable.id,
-      value: intersectionRatio,
-      priority: CollisionPriority.High,
-      type: CollisionType2.Collision
-    };
-    const shouldFlushId = flushNext === droppable.id;
-    flushNext = "";
-    return { ...collision, id: shouldFlushId ? "flush" : collision.id, data };
-  }
-  if (fallbackEnabled && dragOperation.source?.id !== droppable.id) {
-    const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
-    const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
-    if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
-      const fallbackCollision = closestCorners(input);
-      if (fallbackCollision) {
-        const direction = getDirection(dragAxis, {
-          x: dragShape.center.x - (droppable.shape?.center.x || 0),
-          y: dragShape.center.y - (droppable.shape?.center.y || 0)
-        });
-        data.direction = direction;
-        if (intersectionArea) {
-          collisionDebug(
-            dragCenter,
-            dropCenter,
-            droppable.id.toString(),
-            "red",
-            direction || ""
-          );
-          flushNext = droppable.id;
-          return {
-            ...fallbackCollision,
-            priority: CollisionPriority.Low,
-            data
-          };
-        }
-        collisionDebug(
-          dragCenter,
-          dropCenter,
-          droppable.id.toString(),
-          "orange",
-          direction || ""
-        );
-        return {
-          ...fallbackCollision,
-          priority: CollisionPriority.Lowest,
-          data
-        };
-      }
-    }
-  }
-  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
-  return null;
-});
-
-export {
-  DragIcon,
-  useSensors,
-  collisionStore,
-  createDynamicCollisionDetector,
-  setDeep
-};

package/dist/chunk-IRJS3HWQ.mjs

@@ -1,60 +0,0 @@
-import {
-  AutoFieldPrivate,
-  NestedFieldProvider,
-  useNestedFieldContext
-} from "./chunk-H2LU4EW3.mjs";
-
-// components/AutoField/subfield.tsx
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-var SubFieldInternal = ({
-  field,
-  id,
-  index,
-  name,
-  subName,
-  localName,
-  onChange,
-  forceReadOnly
-}) => {
-  const indexName = typeof index !== "undefined" ? `${name}[${index}]` : name;
-  const subPath = name ? `${indexName}.${subName}` : subName;
-  const localIndexName = typeof index !== "undefined" ? `${localName}[${index}]` : localName ?? subName;
-  const localWildcardName = typeof index !== "undefined" ? `${localName}[*]` : localName;
-  const localSubPath = `${localIndexName}.${subName}`;
-  const localWildcardSubPath = `${localWildcardName}.${subName}`;
-  const { readOnlyFields } = useNestedFieldContext();
-  const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
-  const label = field.label || subName;
-  return /* @__PURE__ */ jsx(
-    NestedFieldProvider,
-    {
-      name: localIndexName,
-      wildcardName: localWildcardName,
-      subName,
-      readOnlyFields,
-      children: /* @__PURE__ */ jsx(
-        AutoFieldPrivate,
-        {
-          name: subPath,
-          label,
-          id,
-          readOnly: subReadOnly,
-          field: {
-            ...field,
-            label
-            // May be used by custom fields
-          },
-          onChange: (val, ui) => {
-            onChange(val, ui, subName);
-          }
-        }
-      )
-    }
-  );
-};
-var SubField = memo(SubFieldInternal);
-
-export {
-  SubField
-};