@qiiqa/bob-ui-react-layout 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1190 @@
+// src/context/LayoutContext.tsx
+import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_RESPONSIVENESS_CONFIG = {
+  small: { page: 1, group: 1 },
+  medium: { page: 12, group: 12 },
+  large: { page: 18, group: 12 },
+  extraLarge: { page: 24, group: 12 }
+};
+var LayoutContext = createContext(void 0);
+function useLayoutContext() {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    throw new Error("useLayoutContext must be used within a LayoutProvider or BobForm");
+  }
+  return context;
+}
+var LayoutProvider = ({
+  children,
+  initialDesignMode = false,
+  initialDesignTabs = false,
+  initialDesignGroups = false,
+  initialDesignFields = false,
+  initialLayoutState = {},
+  initialPageCols = 12,
+  initialGroupCols = 12,
+  initialResponsivenessConfig = DEFAULT_RESPONSIVENESS_CONFIG,
+  onLayoutChange,
+  onPageColsChange,
+  onGroupColsChange,
+  onResponsivenessConfigChange
+}) => {
+  const [designMode, setDesignMode] = useState(initialDesignMode);
+  const [designTabs, setDesignTabs] = useState(initialDesignTabs);
+  const [designGroups, setDesignGroups] = useState(initialDesignGroups);
+  const [designFields, setDesignFields] = useState(initialDesignFields);
+  const [layoutState, setLayoutState] = useState(initialLayoutState);
+  const [selectedItemIds, setSelectedItemIds] = useState([]);
+  const [isDraggingActive, setDraggingActive] = useState(false);
+  const [dragOverId, setDragOverId] = useState(null);
+  const [dragSide, setDragSide] = useState(null);
+  const initialPageColsRef = useRef(initialPageCols);
+  const initialGroupColsRef = useRef(initialGroupCols);
+  const initialLayoutStateRef = useRef(initialLayoutState);
+  useEffect(() => {
+    initialPageColsRef.current = initialPageCols;
+  }, [initialPageCols]);
+  useEffect(() => {
+    initialGroupColsRef.current = initialGroupCols;
+  }, [initialGroupCols]);
+  useEffect(() => {
+    initialLayoutStateRef.current = initialLayoutState;
+  }, [initialLayoutState]);
+  const [pageCols, setPageColsState] = useState(initialPageCols);
+  const [groupCols, setGroupColsState] = useState(initialGroupCols);
+  const [responsivenessConfig, setResponsivenessConfigState] = useState(initialResponsivenessConfig);
+  const [currentBreakpoint, setCurrentBreakpoint] = useState("");
+  useEffect(() => {
+    const handleResize = () => {
+      const width = document.documentElement.clientWidth;
+      let category = "small";
+      if (width < 600) category = "small";
+      else if (width < 1024) category = "medium";
+      else if (width < 1600) category = "large";
+      else category = "extraLarge";
+      if (category !== currentBreakpoint) {
+        setCurrentBreakpoint(category);
+        const tier = responsivenessConfig[category];
+        setPageColsState(tier.page);
+        setGroupColsState(tier.group);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, [responsivenessConfig, currentBreakpoint]);
+  useEffect(() => {
+    if (onResponsivenessConfigChange) {
+      onResponsivenessConfigChange(responsivenessConfig);
+    }
+  }, [responsivenessConfig, onResponsivenessConfigChange]);
+  const setResponsivenessConfig = (newConfig) => {
+    setResponsivenessConfigState(newConfig);
+  };
+  const setDragOverState = (id, side) => {
+    setDragOverId(id);
+    setDragSide(side);
+  };
+  const toggleItemSelection = (id, multi) => {
+    setSelectedItemIds((prev) => {
+      if (multi) {
+        return prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id];
+      }
+      return prev.includes(id) && prev.length === 1 ? [] : [id];
+    });
+  };
+  const clearItemSelection = () => {
+    setSelectedItemIds([]);
+  };
+  useEffect(() => {
+    setDesignMode(initialDesignMode);
+  }, [initialDesignMode]);
+  useEffect(() => {
+    setDesignTabs(initialDesignTabs);
+  }, [initialDesignTabs]);
+  useEffect(() => {
+    setDesignGroups(initialDesignGroups);
+  }, [initialDesignGroups]);
+  useEffect(() => {
+    setDesignFields(initialDesignFields);
+  }, [initialDesignFields]);
+  useEffect(() => {
+    if (initialPageCols !== void 0 && initialPageCols !== pageCols) setPageColsState(initialPageCols);
+  }, [initialPageCols]);
+  useEffect(() => {
+    if (initialGroupCols !== void 0 && initialGroupCols !== groupCols) setGroupColsState(initialGroupCols);
+  }, [initialGroupCols]);
+  useEffect(() => {
+    if (initialLayoutState && Object.keys(initialLayoutState).length > 0) {
+      setLayoutState(initialLayoutState);
+    }
+  }, [initialLayoutState]);
+  useEffect(() => {
+    if (onLayoutChange && layoutState !== initialLayoutStateRef.current) {
+      onLayoutChange(layoutState);
+    }
+  }, [layoutState, onLayoutChange]);
+  useEffect(() => {
+    if (onPageColsChange && pageCols !== initialPageColsRef.current) {
+      onPageColsChange(pageCols);
+    }
+  }, [pageCols, onPageColsChange]);
+  useEffect(() => {
+    if (onGroupColsChange && groupCols !== initialGroupColsRef.current) {
+      onGroupColsChange(groupCols);
+    }
+  }, [groupCols, onGroupColsChange]);
+  const loadLayoutState = (state) => {
+    setLayoutState(state);
+  };
+  const reorderItemWithinContainer = (containerId, activeId, overId, fallbackItems, insertAfter) => {
+    setLayoutState((prev) => {
+      const items = prev[containerId] || fallbackItems || [];
+      const oldIndex = items.indexOf(activeId);
+      if (oldIndex === -1) return prev;
+      const newItems = [...items];
+      newItems.splice(oldIndex, 1);
+      if (overId === "__start__") {
+        newItems.unshift(activeId);
+        return { ...prev, [containerId]: newItems };
+      }
+      if (overId === "__end__") {
+        newItems.push(activeId);
+        return { ...prev, [containerId]: newItems };
+      }
+      const newIndexRaw = items.indexOf(overId);
+      if (newIndexRaw === -1) return prev;
+      const adjustedNewIndex = newItems.indexOf(overId);
+      const targetIndex = insertAfter ? adjustedNewIndex + 1 : adjustedNewIndex;
+      newItems.splice(targetIndex, 0, activeId);
+      return { ...prev, [containerId]: newItems };
+    });
+  };
+  const moveItemBetweenContainers = (sourceContainerId, destContainerId, activeId, overId, fallbackItems, insertAfter) => {
+    setLayoutState((prev) => {
+      const sourceItems = [...prev[sourceContainerId] || fallbackItems || []];
+      const destItems = [...prev[destContainerId] || []];
+      const sourceIndex = sourceItems.indexOf(activeId);
+      if (sourceIndex === -1) return prev;
+      sourceItems.splice(sourceIndex, 1);
+      if (overId === "__start__") {
+        destItems.unshift(activeId);
+      } else if (overId === "__end__") {
+        destItems.push(activeId);
+      } else {
+        const destIndex = destItems.indexOf(overId);
+        if (destIndex === -1) {
+          destItems.push(activeId);
+        } else {
+          const targetIndex = insertAfter ? destIndex + 1 : destIndex;
+          destItems.splice(targetIndex, 0, activeId);
+        }
+      }
+      return {
+        ...prev,
+        [sourceContainerId]: sourceItems,
+        [destContainerId]: destItems
+      };
+    });
+  };
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: {
+    designMode,
+    designTabs,
+    designGroups,
+    designFields,
+    layoutState,
+    selectedItemIds,
+    isDraggingActive,
+    dragOverId,
+    dragSide,
+    setLayoutState,
+    toggleItemSelection,
+    clearItemSelection,
+    setDraggingActive,
+    setDragOverState,
+    loadLayoutState,
+    reorderItemWithinContainer,
+    moveItemBetweenContainers,
+    setDesignMode,
+    setDesignTabs,
+    setDesignGroups,
+    setDesignFields,
+    pageCols,
+    groupCols,
+    setPageCols: setPageColsState,
+    setGroupCols: setGroupColsState,
+    responsivenessConfig,
+    setResponsivenessConfig,
+    currentBreakpoint
+  }, children });
+};
+
+// src/components/BobForm.tsx
+import React2 from "react";
+import { DndContext, closestCenter, pointerWithin, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var InnerFormWrapper = ({ children, className }) => {
+  const {
+    moveItemBetweenContainers,
+    reorderItemWithinContainer,
+    setDragOverState,
+    setDraggingActive,
+    clearItemSelection
+  } = useLayoutContext();
+  const lastEmit = React2.useRef({ id: null, side: null });
+  const pointerRef = React2.useRef({ x: 0, y: 0 });
+  React2.useEffect(() => {
+    const handlePointerMove = (e) => {
+      pointerRef.current = { x: e.clientX, y: e.clientY };
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    return () => window.removeEventListener("pointermove", handlePointerMove);
+  }, []);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragStart = (_event) => {
+    setDraggingActive(true);
+  };
+  const handleDragMove = (event) => {
+    const { active, over } = event;
+    if (over?.data?.current?.type === "GapDropZone") {
+      if (lastEmit.current.id !== null) {
+        lastEmit.current = { id: null, side: null };
+        setDragOverState(null, null);
+      }
+      return;
+    }
+    if (!over || active.id === over.id) {
+      if (lastEmit.current.id !== null) {
+        lastEmit.current = { id: null, side: null };
+        setDragOverState(null, null);
+      }
+      return;
+    }
+    const activeType = active.data.current?.type;
+    const overType = over.data.current?.type;
+    if (activeType === "Panel" && overType === "Item") {
+      return;
+    }
+    const overRect = over.rect;
+    const activeRect = active.rect.current.translated;
+    if (!overRect || !activeRect) return;
+    const overCenterX = overRect.left + overRect.width / 2;
+    const pointerX = pointerRef.current.x;
+    const dx = pointerX - overCenterX;
+    let side;
+    side = dx > 0 ? "right" : "left";
+    let targetId = over.id;
+    let finalSide = side;
+    if (over.data.current?.type === "Item" || over.data.current?.type === "Panel") {
+      const containerId = over.data.current.sortable.containerId;
+      const items = over.data.current.sortable.items;
+      const overIndex = items.indexOf(over.id);
+      if (side === "left") {
+        if (overIndex > 0) {
+          targetId = `gap-${containerId}-after-${items[overIndex - 1]}`;
+        } else {
+          targetId = `gap-${containerId}-start`;
+        }
+      } else {
+        targetId = `gap-${containerId}-after-${over.id}`;
+      }
+      finalSide = null;
+    }
+    if (lastEmit.current.id !== targetId || lastEmit.current.side !== side) {
+      lastEmit.current = { id: targetId, side };
+      setDragOverState(targetId, finalSide);
+    }
+  };
+  const handleDragEnd = (event) => {
+    const currentSide = lastEmit.current.side;
+    lastEmit.current = { id: null, side: null };
+    setDragOverState(null, null);
+    setDraggingActive(false);
+    const { active, over } = event;
+    if (!over) return;
+    const overData = over.data.current;
+    const activeContainer = active.data.current?.sortable?.containerId;
+    const overContainer = over.data.current?.sortable?.containerId || over.id;
+    const fallbackItems = active.data.current?.sortable?.items || [];
+    if (!activeContainer || !overContainer) return;
+    if (overData?.type === "Item" || overData?.type === "Panel") {
+      const items = overData.sortable.items;
+      const overIndex = items.indexOf(over.id);
+      let insertAfterItemId = void 0;
+      if (currentSide === "left") {
+        if (overIndex > 0) {
+          insertAfterItemId = items[overIndex - 1];
+        }
+      } else {
+        insertAfterItemId = over.id;
+      }
+      if (activeContainer === overContainer) {
+        if (active.id !== over.id) {
+          reorderItemWithinContainerByGap(activeContainer, active.id, insertAfterItemId, fallbackItems, reorderItemWithinContainer);
+        }
+      } else {
+        moveItemBetweenContainersByGap(activeContainer, overContainer, active.id, insertAfterItemId, fallbackItems, moveItemBetweenContainers);
+      }
+      return;
+    }
+    if (overData?.type === "GapDropZone") {
+      const destContainerId = overData.containerId;
+      const insertAfterItemId = overData.insertAfterItemId;
+      if (activeContainer === destContainerId) {
+        reorderItemWithinContainerByGap(
+          activeContainer,
+          active.id,
+          insertAfterItemId,
+          fallbackItems,
+          reorderItemWithinContainer
+        );
+      } else {
+        moveItemBetweenContainersByGap(
+          activeContainer,
+          destContainerId,
+          active.id,
+          insertAfterItemId,
+          fallbackItems,
+          moveItemBetweenContainers
+        );
+      }
+      return;
+    }
+    const insertAfter = currentSide === "right";
+    if (activeContainer === overContainer) {
+      if (active.id !== over.id) {
+        reorderItemWithinContainer(activeContainer, active.id, over.id, fallbackItems, insertAfter);
+      }
+    } else {
+      let actualDestContainer = overContainer;
+      if (event.over?.data?.current?.sortable?.containerId) {
+        actualDestContainer = event.over.data.current.sortable.containerId;
+      }
+      moveItemBetweenContainers(activeContainer, actualDestContainer, active.id, over.id, fallbackItems, insertAfter);
+    }
+  };
+  return /* @__PURE__ */ jsx2(DndContext, { sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx2("div", { className: `bob-react-form ${className}`, children }) });
+};
+function reorderItemWithinContainerByGap(containerId, activeId, insertAfterItemId, fallbackItems, reorderFn) {
+  if (!insertAfterItemId) {
+    reorderFn(containerId, activeId, "__start__", fallbackItems, false);
+    return;
+  }
+  reorderFn(
+    containerId,
+    activeId,
+    insertAfterItemId,
+    fallbackItems,
+    true
+    /* insertAfter = true → after insertAfterItemId */
+  );
+}
+function moveItemBetweenContainersByGap(sourceContainerId, destContainerId, activeId, insertAfterItemId, fallbackItems, moveFn) {
+  if (!insertAfterItemId) {
+    moveFn(sourceContainerId, destContainerId, activeId, "__start__", fallbackItems, false);
+    return;
+  }
+  moveFn(sourceContainerId, destContainerId, activeId, insertAfterItemId, fallbackItems, true);
+}
+var customCollisionDetection = (args) => {
+  const pointerCollisions = pointerWithin(args);
+  if (pointerCollisions.length > 0) {
+    return pointerCollisions;
+  }
+  return closestCenter(args);
+};
+var BobForm = ({
+  children,
+  className = "",
+  designMode = false,
+  designTabs = false,
+  designGroups = false,
+  designFields = false,
+  layoutState,
+  pageCols,
+  groupCols,
+  initialResponsivenessConfig,
+  onLayoutChange,
+  onPageColsChange,
+  onGroupColsChange,
+  onResponsivenessConfigChange
+}) => {
+  return /* @__PURE__ */ jsx2(
+    LayoutProvider,
+    {
+      initialDesignMode: designMode,
+      initialDesignTabs: designTabs,
+      initialDesignGroups: designGroups,
+      initialDesignFields: designFields,
+      initialLayoutState: layoutState,
+      initialPageCols: pageCols,
+      initialGroupCols: groupCols,
+      initialResponsivenessConfig,
+      onLayoutChange,
+      onPageColsChange,
+      onGroupColsChange,
+      onResponsivenessConfigChange,
+      children: /* @__PURE__ */ jsx2(InnerFormWrapper, { className, children })
+    }
+  );
+};
+
+// src/components/BobTabStrip.tsx
+import React3 from "react";
+import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BobTabStrip = ({ id, children, className = "" }) => {
+  const { layoutState } = useLayoutContext();
+  const childrenArray = React3.Children.toArray(children).filter(React3.isValidElement);
+  const getId = (c) => c.props.id || c.key;
+  const defaultIds = childrenArray.map(getId);
+  const itemIds = layoutState[id] || defaultIds;
+  const sortedChildren = itemIds.map((itemId) => childrenArray.find((c) => getId(c) === itemId)).filter(Boolean);
+  const newChildren = childrenArray.filter((c) => !itemIds.includes(getId(c)));
+  const finalChildren = [...sortedChildren, ...newChildren];
+  const finalIds = finalChildren.map(getId).filter(Boolean);
+  return /* @__PURE__ */ jsx3(SortableContext, { id, items: finalIds, strategy: horizontalListSortingStrategy, children: /* @__PURE__ */ jsx3("div", { className: `bob-react-tab-strip ${className}`, children: finalChildren }) });
+};
+
+// src/components/BobTab.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var BobTab = ({ id, label, isActive = false, onClick, className = "" }) => {
+  const { designTabs } = useLayoutContext();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    data: { type: "Tab" }
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 2 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      className: `bob-react-tab ${isActive ? "bob-react-tab-active" : ""} ${className}`,
+      style,
+      onClick: () => onClick?.(id),
+      children: [
+        designTabs && /* @__PURE__ */ jsx4("span", { className: "bob-react-tab-drag-handle", ...attributes, ...listeners, style: { marginRight: "8px", cursor: "grab", color: "#94a3b8" }, children: /* @__PURE__ */ jsx4("i", { className: "fa-solid fa-grip-vertical" }) }),
+        label
+      ]
+    }
+  );
+};
+
+// src/components/BobPage.tsx
+import React4, { useState as useState2 } from "react";
+import { SortableContext as SortableContext2, rectSortingStrategy } from "@dnd-kit/sortable";
+import { useDroppable as useDroppable2 } from "@dnd-kit/core";
+
+// src/components/GapDropZone.tsx
+import { useDroppable } from "@dnd-kit/core";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var GapDropZone = ({ id, containerId, insertAfterItemId, position, colSpan, newline, onResize, onToggleNewline }) => {
+  const { designFields, designGroups, dragOverId } = useLayoutContext();
+  const isActive = dragOverId === id;
+  const showControls = (designFields || designGroups || !!onResize) && position !== "end";
+  const { setNodeRef } = useDroppable({
+    id,
+    data: { type: "GapDropZone", containerId, insertAfterItemId }
+  });
+  const className = `bob-react-gap-zone ${position} ${isActive ? "bob-react-gap-zone-active" : ""}`;
+  if (!showControls) return /* @__PURE__ */ jsx5("div", { ref: setNodeRef, className });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `bob-react-gap-zone ${position} ${isActive ? "bob-react-gap-zone-active" : ""}`,
+      "data-gap-id": id,
+      children: showControls && /* @__PURE__ */ jsxs2("div", { className: "bob-react-gap-controls", onPointerDown: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "bob-react-gap-btn",
+            title: "Increase column span",
+            onPointerDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onResize(1);
+            },
+            children: "+"
+          }
+        ),
+        /* @__PURE__ */ jsx5("span", { className: "bob-react-gap-span-label", children: colSpan }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "bob-react-gap-btn",
+            title: "Decrease column span",
+            onPointerDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onResize(-1);
+            },
+            children: "-"
+          }
+        ),
+        onToggleNewline && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "bob-react-gap-btn",
+            title: newline ? "Remove Newline" : "Set Newline",
+            style: { marginTop: "2px", color: newline ? "var(--q-primary, #2563eb)" : "var(--q-text-muted, #94a3b8)" },
+            onPointerDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onToggleNewline();
+            },
+            children: /* @__PURE__ */ jsx5("i", { className: newline ? "fa-solid fa-arrow-turn-down" : "fa-solid fa-arrow-right" })
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/BobPage.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var BobPage = ({ id, children, columns, className = "" }) => {
+  const { layoutState, designGroups, pageCols } = useLayoutContext();
+  const activeColumns = columns ?? pageCols;
+  const { setNodeRef } = useDroppable2({ id });
+  const [panelSpanOverrides, setPanelSpanOverrides] = useState2({});
+  const [panelRowSpanOverrides, setPanelRowSpanOverrides] = useState2({});
+  const [panelNewlineOverrides, setPanelNewlineOverrides] = useState2({});
+  const childrenArray = React4.Children.toArray(children).filter(React4.isValidElement);
+  const getId = (c) => c.props.id || c.key;
+  const defaultIds = childrenArray.map(getId);
+  const itemIds = layoutState[id] || defaultIds;
+  const sortedChildren = itemIds.map((itemId) => childrenArray.find((c) => getId(c) === itemId)).filter(Boolean);
+  const newChildren = childrenArray.filter((c) => !itemIds.includes(getId(c)));
+  const finalChildren = [...sortedChildren, ...newChildren];
+  const finalIds = finalChildren.map(getId).filter(Boolean);
+  const styledPanels = finalChildren.map((child) => {
+    const panelId = getId(child);
+    const requestedColSpan = panelSpanOverrides[panelId] ?? child.props.colSpan ?? activeColumns;
+    const panelColSpan = Math.min(requestedColSpan, activeColumns);
+    const panelRowSpan = panelRowSpanOverrides[panelId] ?? child.props.rowSpan ?? 1;
+    const panelNewline = panelNewlineOverrides[panelId] ?? child.props.newline ?? false;
+    return React4.cloneElement(child, {
+      key: panelId,
+      colSpan: panelColSpan,
+      rowSpan: panelRowSpan,
+      newline: panelNewline,
+      onRowResize: (delta) => {
+        setPanelRowSpanOverrides((prev) => ({
+          ...prev,
+          [panelId]: Math.max(1, (prev[panelId] ?? child.props.rowSpan ?? 1) + delta)
+        }));
+      }
+    });
+  });
+  const buildPanelsWithGaps = () => {
+    if (!designGroups) return styledPanels;
+    const result = [];
+    styledPanels.forEach((panel, idx) => {
+      const panelId = getId(panel);
+      const panelColSpan = panel.props.colSpan ?? activeColumns;
+      const panelRowSpan = panel.props.rowSpan ?? 1;
+      const panelNewline = panel.props.newline ?? false;
+      const isFirst = idx === 0;
+      const isLast = idx === styledPanels.length - 1;
+      const gapId = isFirst ? `gap-${id}-start` : `gap-${id}-after-${getId(styledPanels[idx - 1])}`;
+      const insertAfterItemId = isFirst ? void 0 : getId(styledPanels[idx - 1]);
+      result.push(
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "stretch",
+              gridColumn: panelNewline ? `1 / span ${panelColSpan}` : `span ${panelColSpan}`,
+              gridRow: `span ${panelRowSpan}`,
+              minWidth: 0,
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                GapDropZone,
+                {
+                  id: gapId,
+                  containerId: id,
+                  insertAfterItemId,
+                  colSpan: panelColSpan,
+                  newline: panelNewline,
+                  onResize: (delta) => {
+                    setPanelSpanOverrides((prev) => {
+                      const current = prev[panelId] ?? panel.props.colSpan ?? activeColumns;
+                      return { ...prev, [panelId]: Math.max(1, current + delta) };
+                    });
+                    const el = document.querySelector(`[data-bob-item-id="${panelId}"], [id="${panelId}"]`);
+                    if (el) {
+                      const event = new CustomEvent("bob-resize", { detail: { delta }, bubbles: false });
+                      el.dispatchEvent(event);
+                    }
+                  },
+                  onToggleNewline: () => {
+                    const newVal = !panelNewline;
+                    setPanelNewlineOverrides((prev) => ({ ...prev, [panelId]: newVal }));
+                    const el = document.querySelector(`[data-bob-item-id="${panelId}"], [id="${panelId}"]`);
+                    if (el) {
+                      const event = new CustomEvent("bob-toggle-newline", { detail: { newline: newVal }, bubbles: false });
+                      el.dispatchEvent(event);
+                    }
+                  },
+                  position: isFirst ? "start" : "between"
+                }
+              ),
+              panel,
+              isLast && /* @__PURE__ */ jsx6(
+                GapDropZone,
+                {
+                  id: `gap-${id}-after-${panelId}`,
+                  containerId: id,
+                  insertAfterItemId: panelId,
+                  position: "end"
+                },
+                `gap-${id}-end`
+              )
+            ]
+          },
+          `pair-${id}-${panelId}`
+        )
+      );
+    });
+    if (styledPanels.length === 0) {
+      result.push(
+        /* @__PURE__ */ jsx6(
+          GapDropZone,
+          {
+            id: `gap-${id}-start`,
+            containerId: id,
+            insertAfterItemId: void 0,
+            position: "start"
+          },
+          `gap-${id}-empty`
+        )
+      );
+    }
+    return result;
+  };
+  const pageStyle = {
+    gridTemplateColumns: `repeat(${activeColumns}, 1fr)`,
+    display: "grid",
+    gap: 0
+  };
+  return /* @__PURE__ */ jsx6(SortableContext2, { id, items: finalIds, strategy: rectSortingStrategy, children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `bob-react-page ${className}`,
+      style: pageStyle,
+      children: designGroups ? buildPanelsWithGaps() : styledPanels
+    }
+  ) });
+};
+
+// src/components/BobTabPage.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var BobTabPage = ({
+  id,
+  children,
+  isActive = false,
+  columns = 12,
+  className = "",
+  pageClassName = ""
+}) => {
+  return /* @__PURE__ */ jsx7("div", { className: `bob-react-tab-page-wrapper ${className}`, style: { display: isActive ? "block" : "none" }, children: /* @__PURE__ */ jsx7(BobPage, { id: id ?? "tab-page", columns, className: pageClassName, children }) });
+};
+
+// src/components/BobPanel.tsx
+import React5, { useState as useState3 } from "react";
+import { SortableContext as SortableContext3, rectSortingStrategy as rectSortingStrategy2, useSortable as useSortable2 } from "@dnd-kit/sortable";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var BobPanel = ({
+  id,
+  children,
+  colSpan = 12,
+  rowSpan = 1,
+  columns,
+  className = "",
+  caption,
+  newline = false,
+  onRowResize,
+  style: customStyle
+}) => {
+  const { designGroups, designFields, layoutState, dragOverId, selectedItemIds, toggleItemSelection, groupCols } = useLayoutContext();
+  const activeColumns = columns ?? groupCols;
+  const isDragOver = dragOverId === id;
+  const isSelected = selectedItemIds.includes(id);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable2({
+    id,
+    data: { type: "Panel" }
+  });
+  const [overrideColSpan, setOverrideColSpan] = useState3(null);
+  const activeColSpan = overrideColSpan ?? colSpan;
+  const [overrideRowSpan, setOverrideRowSpan] = useState3(null);
+  const activeRowSpan = overrideRowSpan ?? rowSpan;
+  const [overrideNewline, setOverrideNewline] = useState3(null);
+  const activeNewline = overrideNewline ?? newline;
+  const [itemSpanOverrides, setItemSpanOverrides] = useState3({});
+  const [itemRowSpanOverrides, setItemRowSpanOverrides] = useState3({});
+  const [itemNewlineOverrides, setItemNewlineOverrides] = useState3({});
+  const childrenArray = React5.Children.toArray(children).filter(React5.isValidElement);
+  const getId = (c) => c.props.id || c.key;
+  const defaultIds = childrenArray.map(getId);
+  const itemIds = layoutState[id] || defaultIds;
+  const sortedChildren = itemIds.map((itemId) => childrenArray.find((c) => getId(c) === itemId)).filter(Boolean);
+  const newChildren = childrenArray.filter((c) => !itemIds.includes(getId(c)));
+  const finalChildren = [...sortedChildren, ...newChildren];
+  const finalIds = finalChildren.map(getId).filter(Boolean);
+  const styledChildren = finalChildren.map((child) => {
+    const childId = getId(child);
+    const requestedColSpan = itemSpanOverrides[childId] ?? child.props.colSpan ?? 1;
+    const childColSpan = Math.min(requestedColSpan, activeColumns);
+    const childRowSpan = itemRowSpanOverrides[childId] ?? child.props.rowSpan ?? 1;
+    const childNewline = itemNewlineOverrides[childId] ?? child.props.newline ?? false;
+    return React5.cloneElement(child, {
+      key: childId,
+      colSpan: childColSpan,
+      rowSpan: childRowSpan,
+      newline: childNewline,
+      onRowResize: (delta) => {
+        setItemRowSpanOverrides((prev) => ({
+          ...prev,
+          [childId]: Math.max(1, (prev[childId] ?? child.props.rowSpan ?? 1) + delta)
+        }));
+      }
+    });
+  });
+  const baseStyle = {
+    gridColumn: activeNewline ? `1 / span ${activeColSpan}` : `span ${activeColSpan}`,
+    gridRow: `span ${activeRowSpan}`,
+    gridTemplateColumns: `repeat(${activeColumns}, 1fr)`,
+    ["--panel-columns"]: activeColumns,
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 2 : 1,
+    flex: 1,
+    // Expand to fill pair div in flex mode
+    width: "100%",
+    boxSizing: "border-box"
+  };
+  const nodeRef = React5.useRef(null);
+  React5.useEffect(() => {
+    const el = nodeRef.current;
+    if (!el) return;
+    const resizeHandler = (e) => {
+      const delta = e.detail?.delta;
+      if (typeof delta === "number") {
+        setOverrideColSpan((prev) => Math.max(1, (prev ?? activeColSpan) + delta));
+      }
+    };
+    const newlineHandler = (e) => {
+      const val = e.detail?.newline;
+      if (typeof val === "boolean") {
+        setOverrideNewline(val);
+      }
+    };
+    el.addEventListener("bob-resize", resizeHandler);
+    el.addEventListener("bob-toggle-newline", newlineHandler);
+    return () => {
+      el.removeEventListener("bob-resize", resizeHandler);
+      el.removeEventListener("bob-toggle-newline", newlineHandler);
+    };
+  }, [activeColSpan, activeNewline]);
+  const setRefs = (el) => {
+    nodeRef.current = el;
+    setNodeRef(el);
+  };
+  const buildChildrenWithGaps = () => {
+    if (!designFields) return styledChildren;
+    const result = [];
+    styledChildren.forEach((child, idx) => {
+      const childId = getId(child);
+      const childColSpan = child.props.colSpan ?? 1;
+      const childRowSpan = child.props.rowSpan ?? 1;
+      const childNewline = child.props.newline ?? false;
+      const isFirst = idx === 0;
+      const isLast = idx === styledChildren.length - 1;
+      const gapId = isFirst ? `gap-${id}-start` : `gap-${id}-after-${getId(styledChildren[idx - 1])}`;
+      const insertAfterItemId = isFirst ? void 0 : getId(styledChildren[idx - 1]);
+      result.push(
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "stretch",
+              gridColumn: childNewline ? `1 / span ${childColSpan}` : `span ${childColSpan}`,
+              gridRow: `span ${childRowSpan}`,
+              minWidth: 0,
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsx8(
+                GapDropZone,
+                {
+                  id: gapId,
+                  containerId: id,
+                  insertAfterItemId,
+                  colSpan: childColSpan,
+                  newline: childNewline,
+                  onResize: (delta) => {
+                    setItemSpanOverrides((prev) => {
+                      const current = prev[childId] ?? child.props.colSpan ?? 1;
+                      return { ...prev, [childId]: Math.max(1, current + delta) };
+                    });
+                    const el = document.querySelector(`[data-bob-item-id="${childId}"]`);
+                    if (el) {
+                      const event = new CustomEvent("bob-resize", { detail: { delta }, bubbles: false });
+                      el.dispatchEvent(event);
+                    }
+                  },
+                  onToggleNewline: () => {
+                    const newVal = !childNewline;
+                    setItemNewlineOverrides((prev) => ({ ...prev, [childId]: newVal }));
+                    const el = document.querySelector(`[data-bob-item-id="${childId}"]`);
+                    if (el) {
+                      const event = new CustomEvent("bob-toggle-newline", { detail: { newline: newVal }, bubbles: false });
+                      el.dispatchEvent(event);
+                    }
+                  },
+                  position: isFirst ? "start" : "between"
+                }
+              ),
+              child,
+              isLast && /* @__PURE__ */ jsx8(
+                GapDropZone,
+                {
+                  id: `gap-${id}-after-${childId}`,
+                  containerId: id,
+                  insertAfterItemId: childId,
+                  position: "end"
+                },
+                `gap-${id}-end`
+              )
+            ]
+          },
+          `pair-${id}-${childId}`
+        )
+      );
+    });
+    if (styledChildren.length === 0) {
+      result.push(
+        /* @__PURE__ */ jsx8(
+          GapDropZone,
+          {
+            id: `gap-${id}-start`,
+            containerId: id,
+            insertAfterItemId: void 0,
+            position: "start"
+          },
+          `gap-${id}-empty`
+        )
+      );
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx8(SortableContext3, { id, items: finalIds, strategy: rectSortingStrategy2, children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: setRefs,
+      className: `bob-react-panel ${designGroups ? "bob-react-panel-design-mode" : ""} ${isSelected ? "bob-react-item-selected" : ""} ${isDragOver && !designFields && !designGroups ? "bob-react-panel-dragover" : ""} ${className}`,
+      style: { ...baseStyle, ...customStyle },
+      children: [
+        designGroups && /* @__PURE__ */ jsxs4("div", { className: "bob-react-panel-row-controls", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              className: "bob-react-gap-btn",
+              title: "Increase row span",
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRowResize ? onRowResize(1) : setOverrideRowSpan((prev) => (prev ?? activeRowSpan) + 1);
+              },
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsx8("span", { className: "bob-react-gap-span-label", children: activeRowSpan }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              className: "bob-react-gap-btn",
+              title: "Decrease row span",
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRowResize ? onRowResize(-1) : setOverrideRowSpan((prev) => Math.max(1, (prev ?? activeRowSpan) - 1));
+              },
+              children: "-"
+            }
+          )
+        ] }),
+        caption && /* @__PURE__ */ jsx8("div", { className: "bob-react-panel-header", children: /* @__PURE__ */ jsx8("h2", { className: "bob-react-panel-caption", children: caption }) }),
+        designFields ? /* @__PURE__ */ jsx8("div", { className: "bob-react-panel-fields-row", children: buildChildrenWithGaps() }) : styledChildren,
+        designGroups && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "bob-react-overlay",
+            ...attributes,
+            ...listeners,
+            onClick: (e) => {
+              toggleItemSelection(id, e.ctrlKey || e.metaKey);
+            }
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/BobItem.tsx
+import React6, { useState as useState4, useEffect as useEffect2 } from "react";
+import { useSortable as useSortable3 } from "@dnd-kit/sortable";
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var BobItem = ({
+  id,
+  children,
+  colSpan = 1,
+  rowSpan = 1,
+  className = "",
+  expandVertical = false,
+  caption,
+  hideCaption = false,
+  newline = false,
+  onRowResize,
+  style: customStyle,
+  horizontal = false,
+  labelWidth = "120px"
+}) => {
+  const { designFields, designGroups, selectedItemIds, toggleItemSelection } = useLayoutContext();
+  const isSelected = selectedItemIds.includes(id);
+  const [overrideColSpan, setOverrideColSpan] = useState4(null);
+  const [overrideNewline, setOverrideNewline] = useState4(null);
+  const activeColSpan = overrideColSpan ?? colSpan;
+  const activeNewline = overrideNewline ?? newline;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable3({
+    id,
+    data: { type: "Item" },
+    disabled: !designFields
+  });
+  const style = designFields ? {
+    // In design mode the wrapper pair-div owns the column width;
+    // this item just fills the remaining space after the 20px gap.
+    gridColumn: `span ${activeColSpan}`,
+    gridRow: `span ${rowSpan}`,
+    flex: "1 1 0",
+    minWidth: 0,
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    zIndex: isDragging ? 2 : 1
+  } : {
+    // Normal CSS-grid mode
+    gridColumn: activeNewline ? `1 / span ${activeColSpan}` : `span ${activeColSpan}`,
+    gridRow: `span ${rowSpan}`,
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    zIndex: isDragging ? 2 : 1,
+    pointerEvents: designGroups ? "none" : void 0
+  };
+  const nodeRef = React6.useRef(null);
+  useEffect2(() => {
+    const el = nodeRef.current;
+    if (!el) return;
+    const resizeHandler = (e) => {
+      const delta = e.detail?.delta;
+      if (typeof delta === "number") {
+        setOverrideColSpan((prev) => Math.max(1, (prev ?? activeColSpan) + delta));
+      }
+    };
+    const newlineHandler = (e) => {
+      const val = e.detail?.newline;
+      if (typeof val === "boolean") {
+        setOverrideNewline(val);
+      }
+    };
+    el.addEventListener("bob-resize", resizeHandler);
+    el.addEventListener("bob-toggle-newline", newlineHandler);
+    return () => {
+      el.removeEventListener("bob-resize", resizeHandler);
+      el.removeEventListener("bob-toggle-newline", newlineHandler);
+    };
+  }, [activeColSpan, activeNewline]);
+  const setRefs = (el) => {
+    nodeRef.current = el;
+    setNodeRef(el);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: setRefs,
+      "data-bob-item-id": id,
+      className: `bob-react-item ${expandVertical ? "bob-react-item-expand-vertical" : ""} ${isSelected ? "bob-react-item-selected" : ""} ${className}`,
+      style: { ...style, ...customStyle },
+      children: [
+        caption && !hideCaption && !horizontal && /* @__PURE__ */ jsx9("div", { className: "bob-react-item-caption", children: caption }),
+        horizontal ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "bob-react-item-horizontal",
+            style: { gridTemplateColumns: `${labelWidth} 1fr` },
+            children: [
+              caption && !hideCaption && /* @__PURE__ */ jsx9("div", { className: "bob-react-item-horizontal-caption", children: caption }),
+              /* @__PURE__ */ jsx9("div", { className: "bob-react-item-horizontal-content", children })
+            ]
+          }
+        ) : children,
+        designFields && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsxs5("div", { className: "bob-react-item-row-controls", onPointerDown: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                className: "bob-react-button bob-react-item-row-btn",
+                title: "Increase row span",
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onRowResize?.(1);
+                },
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ jsx9("span", { className: "bob-react-gap-span-label", children: rowSpan }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                className: "bob-react-button bob-react-item-row-btn",
+                title: "Decrease row span",
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onRowResize?.(-1);
+                },
+                children: "-"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "bob-react-overlay",
+              ...attributes,
+              ...listeners,
+              onClick: (e) => {
+                toggleItemSelection(id, e.ctrlKey || e.metaKey);
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/BobResponsiveness.tsx
+import React7 from "react";
+import { BobBoxInteger, BobBoxTextPopupGrid } from "@qiiqa/bob-ui-react-components";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var BobResponsiveness = ({
+  className = ""
+}) => {
+  const {
+    responsivenessConfig: config,
+    setResponsivenessConfig,
+    currentBreakpoint
+  } = useLayoutContext();
+  const handleConfigChange = (tier, type, value) => {
+    const newConfig = {
+      ...config,
+      [tier]: {
+        ...config[tier],
+        [type]: value ?? 0
+      }
+    };
+    setResponsivenessConfig(newConfig);
+  };
+  const currentTier = config[currentBreakpoint];
+  const displayValue = currentTier ? `P:${currentTier.page}, G:${currentTier.group}` : "...";
+  const tiers = [
+    { key: "small", label: "Small" },
+    { key: "medium", label: "Medium" },
+    { key: "large", label: "Large" },
+    { key: "extraLarge", label: "Extra Large" }
+  ];
+  return /* @__PURE__ */ jsx10("div", { className: `bob-react-responsiveness ${className}`, children: /* @__PURE__ */ jsx10(
+    BobBoxTextPopupGrid,
+    {
+      id: "bob-responsiveness-popup",
+      className: "bob-react-responsiveness-display",
+      value: displayValue,
+      icon: /* @__PURE__ */ jsx10("span", { children: currentBreakpoint.toUpperCase().charAt(0) }),
+      isReadOnly: true,
+      rowCaptions: ["Small", "Medium", "Large", "Extra Large"],
+      colCaptions: ["Page", "Group"],
+      colWidths: ["max-content", "50px", "50px"],
+      popupWidth: "auto",
+      children: tiers.map((tier, rowIndex) => /* @__PURE__ */ jsxs6(React7.Fragment, { children: [
+        /* @__PURE__ */ jsx10(
+          BobBoxInteger,
+          {
+            id: `resp-${tier.key}-page`,
+            row: rowIndex,
+            col: 0,
+            value: config[tier.key].page,
+            onChange: (v) => handleConfigChange(tier.key, "page", v),
+            minValue: 1,
+            maxValue: 24
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          BobBoxInteger,
+          {
+            id: `resp-${tier.key}-group`,
+            row: rowIndex,
+            col: 1,
+            value: config[tier.key].group,
+            onChange: (v) => handleConfigChange(tier.key, "group", v),
+            minValue: 1,
+            maxValue: 24
+          }
+        )
+      ] }, tier.key))
+    }
+  ) });
+};
+export {
+  BobForm,
+  BobItem,
+  BobPage,
+  BobPanel,
+  BobResponsiveness,
+  BobTab,
+  BobTabPage,
+  BobTabStrip,
+  DEFAULT_RESPONSIVENESS_CONFIG,
+  GapDropZone,
+  LayoutProvider,
+  useLayoutContext
+};