@crediblemark/build 0.24.5 → 0.24.7

package/dist/{ArrayField-F7OLZF6U.mjs → chunk-N2NNRJDJ.mjs}

@@ -1,28 +1,16 @@
 import {
-  SubField
-} from "./chunk-IRJS3HWQ.mjs";
-import {
-  DragIcon,
-  createDynamicCollisionDetector,
-  setDeep,
-  useSensors
-} from "./chunk-BQW2NTNG.mjs";
-import {
+  SubField,
   getDeep,
   useFieldStore,
   useFieldStoreApi,
   useNestedFieldContext
-} from "./chunk-H2LU4EW3.mjs";
-import "./chunk-2VS2BST6.mjs";
-import "./chunk-AL77I3BV.mjs";
+} from "./chunk-QV6ANL5D.mjs";
 import {
   IconButton
-} from "./chunk-VBNE6GK2.mjs";
-import "./chunk-LBMMY5IM.mjs";
-import "./chunk-WKMRHPOM.mjs";
-import "./chunk-5OK3IPVN.mjs";
+} from "./chunk-5JSNFZKX.mjs";
 import {
   Copy,
+  GripVertical,
   List,
   Plus,
   Trash,
@@ -30,11 +18,10 @@ import {
   replace,
   useAppStore,
   useAppStoreApi
-} from "./chunk-GIUKL443.mjs";
+} from "./chunk-XLNVCM4Q.mjs";
 import {
   populateIds
 } from "./chunk-64A37UUC.mjs";
-import "./chunk-SMAWAXVX.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -42,7 +29,6 @@ import {
   defaultSlots,
   walkField
 } from "./chunk-7LXZOPYT.mjs";
-import "./chunk-AFVEAZTD.mjs";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/AutoField/fields/ArrayField/styles.module.css#css-module
 var styles_module_default = { "ArrayField": "_ArrayField_1q029_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1q029_13", "ArrayField-addButton": "_ArrayField-addButton_1q029_18", "ArrayField--hasItems": "_ArrayField--hasItems_1q029_33", "ArrayField-inner": "_ArrayField-inner_1q029_59", "ArrayFieldItem": "_ArrayFieldItem_1q029_67", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1q029_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1q029_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1q029_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_1q029_122", "ArrayField--addDisabled": "_ArrayField--addDisabled_1q029_131", "ArrayFieldItem-body": "_ArrayFieldItem-body_1q029_170", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1q029_179", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1q029_187", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1q029_193" };
@@ -54,13 +40,307 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState
+  useState as useState2
 } from "react";
 
+// css-module:/home/crediblemark/Project/Credibuild/components/DragIcon/styles.module.css#css-module
+var styles_module_default2 = { "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_default2);
+var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ jsx("div", { className: getClassName({ disabled: isDragDisabled }), children: /* @__PURE__ */ jsx(GripVertical, { size: 12, strokeWidth: 2.5 }) });
+
 // components/Sortable/index.tsx
 import { DragDropProvider } from "@dnd-kit/react";
+
+// 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;
+});
+
+// components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
   onDragStart,
@@ -70,7 +350,7 @@ var SortableProvider = ({
   const sensors = useSensors({
     mouse: { distance: { value: 5 } }
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     DragDropProvider,
     {
       sensors,
@@ -129,9 +409,42 @@ var Sortable = ({
   return children({ isDragging, isDropping, ref: sortableRef, handleRef });
 };
 
+// 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 };
+}
+
 // components/AutoField/fields/ArrayField/index.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var getClassName = get_class_name_factory_default("ArrayField", styles_module_default);
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("ArrayField", styles_module_default);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default);
 var ItemSummaryInner = ({
   index,
@@ -180,7 +493,7 @@ var ArrayFieldItemInternal = ({
       (subField) => subField.type !== "slot" && subField.visible !== false
     );
   }, [field.arrayFields]);
-  return /* @__PURE__ */ jsx2(Sortable, { id, index: dragIndex, disabled: readOnly, children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx3(Sortable, { id, index: dragIndex, disabled: readOnly, children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -203,7 +516,7 @@ var ArrayFieldItemInternal = ({
             },
             className: getClassNameItem("summary"),
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 ItemSummary,
                 {
                   index,
@@ -213,15 +526,15 @@ var ArrayFieldItemInternal = ({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: getClassNameItem("rhs"), children: [
-                !readOnly && /* @__PURE__ */ jsx2("div", { className: getClassNameItem("actions"), children: actions }),
-                /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(DragIcon, {}) })
+                !readOnly && /* @__PURE__ */ jsx3("div", { className: getClassNameItem("actions"), children: actions }),
+                /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(DragIcon, {}) })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("body"), children: isExpanded && hasVisibleFields && /* @__PURE__ */ jsx2("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+        /* @__PURE__ */ jsx3("div", { className: getClassNameItem("body"), children: isExpanded && hasVisibleFields && /* @__PURE__ */ jsx3("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
           const subField = field.arrayFields[subName];
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             SubField,
             {
               id: `${id}_${subName}`,
@@ -249,7 +562,7 @@ var ArrayField = ({
   label,
   labelIcon,
   readOnly,
-  Label = (props) => /* @__PURE__ */ jsx2("div", { ...props })
+  Label = (props) => /* @__PURE__ */ jsx3("div", { ...props })
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const appStoreApi = useAppStoreApi();
@@ -316,7 +629,7 @@ var ArrayField = ({
     });
     return { ...arrayState, items: newItems };
   }, [getArrayState, getHighestIndex, id]);
-  const [draggedItem, setDraggedItem] = useState("");
+  const [draggedItem, setDraggedItem] = useState2("");
   const isDraggingAny = !!draggedItem;
   const valueRef = useRef([]);
   useEffect(() => {
@@ -371,14 +684,14 @@ var ArrayField = ({
     return null;
   }
   const addDisabled = field.max !== void 0 && mirror?.items.length >= field.max || readOnly;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     Label,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx2(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx3(List, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         SortableProvider,
         {
           onDragStart: (id2) => {
@@ -417,18 +730,18 @@ var ArrayField = ({
           children: /* @__PURE__ */ jsxs(
             "div",
             {
-              className: getClassName({
+              className: getClassName2({
                 hasItems: numItems > 0,
                 addDisabled
               }),
               children: [
-                mirror.items.length > 0 && /* @__PURE__ */ jsx2("div", { className: getClassName("inner"), "data-dnd-container": true, children: mirror.items.map((item, index) => {
+                mirror.items.length > 0 && /* @__PURE__ */ jsx3("div", { className: getClassName2("inner"), "data-dnd-container": true, children: mirror.items.map((item, index) => {
                   const {
                     _arrayId = `${id}-${index}`,
                     _originalIndex = index,
                     _currentIndex = index
                   } = item;
-                  return /* @__PURE__ */ jsx2(
+                  return /* @__PURE__ */ jsx3(
                     ArrayFieldItem,
                     {
                       index: _currentIndex,
@@ -467,7 +780,7 @@ var ArrayField = ({
                         }
                       },
                       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx3(
                           IconButton,
                           {
                             type: "button",
@@ -481,10 +794,10 @@ var ArrayField = ({
                               updateValue(existingValue);
                             },
                             title: "Duplicate",
-                            children: /* @__PURE__ */ jsx2(Copy, { size: 16 })
+                            children: /* @__PURE__ */ jsx3(Copy, { size: 16 })
                           }
                         ) }),
-                        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx3(
                           IconButton,
                           {
                             type: "button",
@@ -497,7 +810,7 @@ var ArrayField = ({
                               updateValue(existingValue);
                             },
                             title: "Delete",
-                            children: /* @__PURE__ */ jsx2(Trash, { size: 16 })
+                            children: /* @__PURE__ */ jsx3(Trash, { size: 16 })
                           }
                         ) })
                       ] })
@@ -505,11 +818,11 @@ var ArrayField = ({
                     _arrayId
                   );
                 }) }),
-                !addDisabled && /* @__PURE__ */ jsx2(
+                !addDisabled && /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
-                    className: getClassName("addButton"),
+                    className: getClassName2("addButton"),
                     onClick: () => {
                       if (isDraggingAny) return;
                       const value = getValue();
@@ -522,7 +835,7 @@ var ArrayField = ({
                       const newValue = [...existingValue, newItem];
                       updateValue(newValue);
                     },
-                    children: /* @__PURE__ */ jsx2(Plus, { size: 21 })
+                    children: /* @__PURE__ */ jsx3(Plus, { size: 21 })
                   }
                 )
               ]
@@ -533,6 +846,12 @@ var ArrayField = ({
     }
   );
 };
+
 export {
+  DragIcon,
+  useSensors,
+  collisionStore,
+  createDynamicCollisionDetector,
+  setDeep,
   ArrayField
 };