Functionality for switching between editing and interactive mode

apps/demo/app/custom-ui/[...puckPath]/client.tsx

@@ -11,6 +11,18 @@ import { ChevronUp, ChevronDown, Globe, Lock, Unlock } from "lucide-react";
 
 const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
   const { appState, dispatch } = usePuck();
+  const {
+    ui: { mode },
+  } = appState;
+
+  const toggleMode = () => {
+    dispatch({
+      type: "setUi",
+      ui: {
+        mode: mode === "edit" ? "interactive" : "edit",
+      },
+    });
+  };
 
   return (
     <header
@@ -28,7 +40,10 @@ const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
     >
       <span style={{ fontWeight: 600 }}>Custom UI example </span>
       <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
-        <div>
+        <div style={{ gap: 8, display: "flex" }}>
+          <Button onClick={toggleMode}>
+            Switch to {mode === "edit" ? "interactive" : "edit"} mode
+          </Button>
           <Button
             onClick={() => onPublish(appState.data)}
             icon={<Globe size="14" />}

packages/core/components/DraggableComponent/index.tsx

@@ -16,7 +16,6 @@ import { useAppContext } from "../Puck/context";
 import { DefaultDraggable } from "../Draggable";
 import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
-import { DefaultOverride } from "../DefaultOverride";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -81,8 +80,15 @@ export const DraggableComponent = ({
   indicativeHover?: boolean;
   style?: CSSProperties;
 }) => {
-  const { zoomConfig, status, overrides, selectedItem, getPermissions } =
-    useAppContext();
+  const {
+    zoomConfig,
+    status,
+    overrides,
+    selectedItem,
+    getPermissions,
+    mode,
+  } = useAppContext();
+  const state = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
 
   const El = status !== "LOADING" ? Draggable : DefaultDraggable;
@@ -108,12 +114,14 @@ export const DraggableComponent = ({
     item: selectedItem,
   });
 
+  const isInteractive = mode === "interactive";
+
   return (
     <El
       key={id}
       draggableId={id}
       index={index}
-      isDragDisabled={isDragDisabled}
+      isDragDisabled={isDragDisabled || isInteractive}
       disableSecondaryAnimation={disableSecondaryAnimation}
     >
       {(provided, snapshot) => (
@@ -128,11 +136,15 @@ export const DraggableComponent = ({
             isLocked,
             forceHover,
             indicativeHover,
+            isInteractive,
           })}
           style={{
             ...style,
             ...provided.draggableProps.style,
-            cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab",
+            cursor:
+              isInteractive || isModifierHeld || isDragDisabled
+                ? "default"
+                : "grab",
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
@@ -146,7 +158,7 @@ export const DraggableComponent = ({
               <Loader />
             </div>
           )}
-          {isSelected && (
+          {!isInteractive && isSelected && (
             <div
               className={getClassName("actionsOverlay")}
               style={{
@@ -178,9 +190,10 @@ export const DraggableComponent = ({
           )}
 
           <div className={getClassName("overlay")} />
-          <div className={getClassName("contents")}>{children}</div>
+          <div className={getClassName("contents")}> {children}</div>
         </div>
-      )}
-    </El>
+      )
+      }
+    </El >
   );
 };

packages/core/components/DraggableComponent/styles.module.css

@@ -13,6 +13,20 @@
   overflow: hidden;
 }
 
+.DraggableComponent--isInteractive > .DraggableComponent-contents {
+  pointer-events: auto !important;
+}
+
+.DraggableComponent--isInteractive > .DraggableComponent-overlay {
+  cursor: default !important;
+  background: transparent !important;
+  outline: none !important;
+}
+
+.DraggableComponent--isInteractive:hover > .DraggableComopnent-overlay {
+  outline: none !important;
+}
+
 .DraggableComponent-contents {
   position: relative; /* Reset stacking context */
   pointer-events: none;
@@ -43,7 +57,7 @@
 }
 
 .DraggableComponent--isDragging > .DraggableComponent-overlay {
-  outline: 2px var(--puck-color-azure-09) solid !important;
+  outline: 2px var(--puck-color-azure-09) solid;
 }
 
 .DraggableComponent-loadingOverlay {
@@ -75,7 +89,7 @@
 
 .DraggableComponent:not(.DraggableComponent--isSelected):hover
   > .DraggableComponent-overlay {
-  outline: 2px var(--puck-color-azure-09) solid !important;
+  outline: 2px var(--puck-color-azure-09) solid;
 }
 
 .DraggableComponent--indicativeHover > .DraggableComponent-overlay {
@@ -91,7 +105,7 @@
 }
 
 .DraggableComponent--isSelected > .DraggableComponent-overlay {
-  outline: 2px var(--puck-color-azure-07) solid !important;
+  outline: 2px var(--puck-color-azure-07) solid;
 }
 
 .DraggableComponent--isSelected > .DraggableComponent-actionsOverlay {

packages/core/components/Puck/context.tsx

@@ -38,6 +38,7 @@ export const defaultAppState: AppState = {
     itemSelector: null,
     componentList: {},
     isDragging: false,
+    mode: "edit",
     viewports: {
       current: {
         width: defaultViewports[0].width,
@@ -72,6 +73,7 @@ export type AppContext<
   resolveData: (newAppState: AppState) => void;
   plugins: Plugin[];
   overrides: Partial<Overrides>;
+  mode: "interactive" | "edit";
   history: Partial<PuckHistory>;
   viewports: Viewports;
   zoomConfig: ZoomConfig;
@@ -91,8 +93,8 @@ export const defaultContext: AppContext = {
   dispatch: () => null,
   config: { components: {} },
   componentState: {},
-  setComponentState: () => {},
-  resolveData: () => {},
+  setComponentState: () => { },
+  resolveData: () => { },
   plugins: [],
   overrides: {},
   history: {},
@@ -110,6 +112,7 @@ export const defaultContext: AppContext = {
   globalPermissions: {},
   getPermissions: () => ({}),
   refreshPermissions: () => null,
+  mode: "edit"
 };
 
 export const appContext = createContext<AppContext>(defaultContext);

packages/core/components/Puck/index.tsx

@@ -195,19 +195,19 @@ export function Puck<
         // Store categories under componentList on state to allow render functions and plugins to modify
         componentList: config.categories
           ? Object.entries(config.categories).reduce(
-              (acc, [categoryName, category]) => {
-                return {
-                  ...acc,
-                  [categoryName]: {
-                    title: category.title,
-                    components: category.components,
-                    expanded: category.defaultExpanded,
-                    visible: category.visible,
-                  },
-                };
-              },
-              {}
-            )
+            (acc, [categoryName, category]) => {
+              return {
+                ...acc,
+                [categoryName]: {
+                  title: category.title,
+                  components: category.components,
+                  expanded: category.defaultExpanded,
+                  visible: category.visible,
+                },
+              };
+            },
+            {}
+          )
           : {},
       },
     } as G["UserAppState"];
@@ -415,6 +415,7 @@ export function Puck<
           history,
           viewports,
           iframe,
+          mode: ui.mode,
           globalPermissions: {
             delete: true,
             drag: true,

packages/core/types/AppState.tsx

@@ -14,6 +14,7 @@ export type UiState = {
   rightSideBarVisible: boolean;
   itemSelector: ItemSelector | null;
   arrayState: Record<string, ArrayState | undefined>;
+  mode: "interactive" | "edit";
   componentList: Record<
     string,
     {