@drawnagency/primitives 0.1.76 → 0.1.77

package/src/components/editor/SectionWrapper.tsx

@@ -7,6 +7,7 @@ import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
 import { StatusIndicator } from "./StatusIndicator";
 import { AudienceIndicator } from "./AudienceIndicator";
+import { LockBadge } from "./LockBadge";
 import { SettingsForm } from "./SettingsForm";
 import { useEditorContext } from "../shell/EditorContext";
 import { useEditorModal } from "../shell/EditorModalContext";
@@ -38,8 +39,12 @@ export function SectionWrapper({
   mainStatus,
   contentDiffersFromMain,
   isLocalOnly,
+  lockedBy,
+  onTakeover,
+  onEditIntent,
   children,
 }: WrapperProps) {
+  const isLocked = !!lockedBy;
   const { isEditMode, showAllChrome } = useEditorContext();
   const { openModal } = useEditorModal();
   const [isActive, setIsActive] = useState(false);
@@ -66,7 +71,11 @@ export function SectionWrapper({
   useEffect(() => {
     const block = blockRef.current;
     if (!block) return;
-    const onFocusIn = () => setIsActive(true);
+    const onFocusIn = () => {
+      setIsActive(true);
+      // Fire-and-forget lock request; denial arrives via `lockedBy` in props.
+      if (!isLocked && onEditIntent) void onEditIntent();
+    };
     const onFocusOut = (e: FocusEvent) => {
       if (!block.contains(e.relatedTarget as Node)) setIsActive(false);
     };
@@ -76,7 +85,10 @@ export function SectionWrapper({
       block.removeEventListener("focusin", onFocusIn);
       block.removeEventListener("focusout", onFocusOut);
     };
-  }, []);
+    // Caller contract: pass a memoized (useCallback) onEditIntent — it is a
+    // dependency here, so an inline closure re-binds these listeners on every
+    // render of the shell.
+  }, [isLocked, onEditIntent]);
 
   useEffect(() => {
     const block = blockRef.current;
@@ -164,7 +176,11 @@ export function SectionWrapper({
       cancelled = true;
       cleanup?.();
     };
-  }, [sectionId, index, containerId, isContainerBlock, isEditMode]);
+    // isLocked: the DragHandle unmounts while locked, so DnD registration must
+    // be torn down on lock-acquire (cleanup above) and re-run against the fresh
+    // handle node on lock-release — without it, a locked-then-released section's
+    // registration stays bound to the old unmounted handle and reorder breaks.
+  }, [sectionId, index, containerId, isContainerBlock, isEditMode, isLocked]);
 
   function handleSettingsClick() {
     if (!onSectionChange) return;
@@ -229,6 +245,7 @@ export function SectionWrapper({
       className={cn(
         "relative",
         isDragging && "opacity-50",
+        isLocked && "opacity-60",
         isActive && "outline outline-2 outline-primary/50 rounded-sm",
         !isActive &&
           showAllChrome &&
@@ -242,7 +259,7 @@ export function SectionWrapper({
       {/* Plus button — left gutter on xl+, hidden below. hover:z-[60] lifts the
           whole slot (a z-30 stacking context the tooltip can't escape) above the
           inline section-type picker (z-50) while the tooltip is showing. */}
-      {onRequestInsert && !isDragging && chromeReady && (
+      {!isLocked && onRequestInsert && !isDragging && chromeReady && (
         <div
           className={cn(
             "absolute -left-16 bottom-full z-30 hover:z-[60] mb-1 hidden xl:block transition-opacity",
@@ -254,35 +271,40 @@ export function SectionWrapper({
       )}
 
       {/* Drag handle + section label */}
-      <div
-        className={cn(
-          "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
-          alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
-        )}
-      >
-        <div className="relative -ml-[34px] flex flex-col items-center">
-          <DragHandle ref={handleRef} />
-          {onRequestInsert && !isDragging && chromeReady && (
-            // Below xl the gutter can't fit the plus beside the handle, so it
-            // hangs below it (absolute → no row-height contribution: the handle
-            // stays put and the pair stacks DOWN instead of centering).
-            <div className="absolute top-full xl:hidden">
-              <InsertButton index={index} onInsert={onRequestInsert} />
-            </div>
+      {!isLocked && (
+        <div
+          className={cn(
+            "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
+            alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
           )}
+        >
+          <div className="relative -ml-[34px] flex flex-col items-center">
+            <DragHandle ref={handleRef} />
+            {onRequestInsert && !isDragging && chromeReady && (
+              // Below xl the gutter can't fit the plus beside the handle, so it
+              // hangs below it (absolute → no row-height contribution: the handle
+              // stays put and the pair stacks DOWN instead of centering).
+              <div className="absolute top-full xl:hidden">
+                <InsertButton index={index} onInsert={onRequestInsert} />
+              </div>
+            )}
+          </div>
+          <span className="pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80">
+            {definition.label}
+          </span>
         </div>
-        <span className="pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80">
-          {definition.label}
-        </span>
-      </div>
+      )}
 
       {/* Status + settings + delete — top-right, above content */}
       <div
         className={cn(
           "pointer-events-none absolute right-0 bottom-full z-30 mb-1 flex items-center gap-2 transition-opacity",
-          alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          // A lock is important state — keep the cluster visible without hover.
+          alwaysShow || isLocked ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
       >
+        {lockedBy && <LockBadge email={lockedBy.email} onTakeover={onTakeover} />}
+
         <div className="pointer-events-auto">
           <StatusIndicator
             mainStatus={mainStatus ?? null}
@@ -291,6 +313,7 @@ export function SectionWrapper({
             isLocalOnly={isLocalOnly ?? false}
             status={status as "draft" | "live" | "archived"}
             dirty={dirty}
+            disabled={isLocked}
             onChange={(s) => onStatusChange?.(s)}
           />
         </div>
@@ -298,11 +321,12 @@ export function SectionWrapper({
           <AudienceIndicator
             access={access}
             audiences={audiences}
+            disabled={isLocked}
             onChange={(newAccess) => onAccessChange?.(newAccess)}
           />
         </div>
 
-        {onAddChild && (
+        {!isLocked && onAddChild && (
           <button
             type="button"
             onClick={onAddChild}
@@ -313,11 +337,11 @@ export function SectionWrapper({
           </button>
         )}
 
-        {hasSettings && (
+        {!isLocked && hasSettings && (
           <SettingsButton onClick={handleSettingsClick} />
         )}
 
-        {onMoveSection && (
+        {!isLocked && onMoveSection && (
           <button
             type="button"
             onClick={onMoveSection}
@@ -328,7 +352,7 @@ export function SectionWrapper({
           </button>
         )}
 
-        {onDelete && <DeleteButton onDelete={onDelete} />}
+        {!isLocked && onDelete && <DeleteButton onDelete={onDelete} />}
       </div>
 
       {/* Drop indicator — centered in the section's own padding-top */}
@@ -345,7 +369,14 @@ export function SectionWrapper({
         <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-primary" />
       )}
 
-      {children}
+      {isLocked ? (
+        // React 19 supports the boolean `inert` prop — blocks focus, pointer,
+        // and edits to another editor's locked content. Only wrapped when
+        // locked so the unlocked DOM is unchanged.
+        <div inert>{children}</div>
+      ) : (
+        children
+      )}
     </div>
   );
 }

package/src/components/editor/StatusIndicator.tsx

@@ -91,6 +91,8 @@ interface StatusIndicatorProps {
   status: Status;
   dirty?: boolean;
   onChange: (status: Status) => void;
+  /** Display-only mode — the pill still shows status but the picker never opens. */
+  disabled?: boolean;
 }
 
 export function StatusIndicator({
@@ -101,6 +103,7 @@ export function StatusIndicator({
   status,
   dirty,
   onChange,
+  disabled,
 }: StatusIndicatorProps) {
   const display = deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, isLocalOnly });
 
@@ -117,6 +120,7 @@ export function StatusIndicator({
       label={labelText}
       ariaLabel={display.description}
       buttonClassName="text-base-contrast-light"
+      disabled={disabled}
       clickContent={(onClose) => (
         <ul role="radiogroup" aria-label="Section status" className="w-full overflow-hidden py-1">
           {STATUSES.map((s) => {