@drawnagency/primitives 0.1.75 → 0.1.77

package/src/components/editor/IndicatorPill.tsx

@@ -16,6 +16,9 @@ interface IndicatorPillProps {
   className?: string;
   buttonClassName?: string;
   ariaLabel?: string;
+  /** Display-only mode: dots/label still render but the popovers never open
+   *  (e.g. while another editor holds the section lock). */
+  disabled?: boolean;
 }
 
 export function IndicatorPill({
@@ -26,6 +29,7 @@ export function IndicatorPill({
   className,
   buttonClassName,
   ariaLabel,
+  disabled,
 }: IndicatorPillProps) {
   const [hoverOpen, setHoverOpen] = useState(false);
   const [clickOpen, setClickOpen] = useState(false);
@@ -41,7 +45,7 @@ export function IndicatorPill({
 
   function handleMouseEnter() {
     clearHoverTimeout();
-    if (!clickOpen && hoverContent) {
+    if (!disabled && !clickOpen && hoverContent) {
       setHoverOpen(true);
     }
   }
@@ -54,7 +58,7 @@ export function IndicatorPill({
   }
 
   function handleClick() {
-    if (!clickContent) return;
+    if (disabled || !clickContent) return;
     setHoverOpen(false);
     clearHoverTimeout();
     setClickOpen((v) => !v);
@@ -72,15 +76,17 @@ export function IndicatorPill({
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        aria-haspopup={clickContent ? "true" : undefined}
-        aria-expanded={clickContent ? clickOpen : undefined}
+        aria-haspopup={!disabled && clickContent ? "true" : undefined}
+        aria-expanded={!disabled && clickContent ? clickOpen : undefined}
+        aria-disabled={disabled || undefined}
         aria-label={ariaLabel}
         className={cn(
           // align-middle keeps the inline-flex pill centred in its line box regardless of
           // whether it leads with a status/audience dot — without it, the dot-less variant's
           // text baseline sits ~2px lower than the dotted variant, misaligning the two pills.
-          "cursor-pointer inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium align-middle",
-          "border border-base-200 hover:bg-base-accent",
+          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium align-middle",
+          "border border-base-200",
+          disabled ? "cursor-default opacity-60" : "cursor-pointer hover:bg-base-accent",
           buttonClassName,
         )}
       >

package/src/components/editor/LockBadge.tsx

@@ -0,0 +1,31 @@
+import { Lock } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+interface LockBadgeProps {
+  email: string;
+  onTakeover?: () => void;
+}
+
+// Reuses the "modified" status tokens (an amber pair defined in base.css) so the
+// lock badge sits in the same visual family as the other editor status pills
+// rather than introducing raw amber-* literals.
+export function LockBadge({ email, onTakeover }: LockBadgeProps) {
+  return (
+    <span className="pointer-events-auto inline-flex items-center gap-1.5 rounded-full bg-status-modified-bg px-2 py-0.5 text-xs font-medium text-status-modified-text align-middle">
+      <Lock size={12} strokeWidth={2.5} aria-hidden="true" />
+      <span className="whitespace-nowrap">{email} is editing</span>
+      {onTakeover && (
+        <button
+          type="button"
+          onClick={onTakeover}
+          className={cn(
+            "cursor-pointer rounded px-1.5 py-0.5 font-semibold",
+            "bg-status-modified-text/10 hover:bg-status-modified-text/20",
+          )}
+        >
+          Take over
+        </button>
+      )}
+    </span>
+  );
+}

package/src/components/editor/PresenceAvatars.tsx

@@ -0,0 +1,53 @@
+import type { CollabPeer, CollabStatus } from "../../collab/types";
+import { cn } from "../../lib/cn";
+
+// Vivid -600 fills read as distinct badge colors and keep white text legible
+// in both light and dark editor chrome.
+const AVATAR_COLORS = [
+  "bg-sky-600",
+  "bg-emerald-600",
+  "bg-amber-600",
+  "bg-fuchsia-600",
+  "bg-rose-600",
+];
+
+function initials(email: string): string {
+  return email.slice(0, 2).toUpperCase();
+}
+
+function colorFor(userId: string): string {
+  let h = 0;
+  for (const c of userId) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return AVATAR_COLORS[h % AVATAR_COLORS.length];
+}
+
+interface PresenceAvatarsProps {
+  peers: CollabPeer[];
+  selfUserId: string | null;
+  status: CollabStatus;
+}
+
+export function PresenceAvatars({ peers, selfUserId, status }: PresenceAvatarsProps) {
+  const others = peers.filter((p) => p.userId !== selfUserId);
+  if (status !== "connected" || others.length === 0) return null;
+
+  return (
+    <div className="flex -space-x-2" aria-label="Editors online">
+      {others.map((p) => (
+        <span
+          key={p.userId}
+          title={p.focusSectionId ? `${p.email} — editing` : p.email}
+          className={cn(
+            // border-base-accent matches the toolbar surface behind the row in
+            // both themes (white in light, dark panel in dark), giving a clean
+            // ring where the avatars overlap.
+            "flex h-7 w-7 items-center justify-center rounded-full border-2 border-base-accent text-xs font-semibold text-white",
+            colorFor(p.userId),
+          )}
+        >
+          {initials(p.email)}
+        </span>
+      ))}
+    </div>
+  );
+}

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) => {

package/src/components/sections/Container/Container.tsx

@@ -40,6 +40,8 @@ interface ContainerChildProps {
   hasSettings: boolean;
   mergedOptions: Record<string, unknown>;
   isEditMode: boolean;
+  /** First cell only: shift the control rail below the section's stacked "+" (below xl). */
+  clearSectionChrome?: boolean;
   ChildComp: ChildComponent;
   onDelete: () => void;
   onDuplicate: () => void;
@@ -65,6 +67,7 @@ function ContainerChild({
   hasSettings,
   mergedOptions,
   isEditMode,
+  clearSectionChrome,
   ChildComp,
   onDelete,
   onDuplicate,
@@ -97,6 +100,7 @@ function ContainerChild({
         closestEdge={closestEdge}
         isDragging={isDragging}
         hasSettings={hasSettings}
+        clearSectionChrome={clearSectionChrome}
         dragHandleRef={handleRef}
         onDelete={onDelete}
         onDuplicate={onDuplicate}
@@ -328,6 +332,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
         hasSettings={hasSettings}
         mergedOptions={mergedOptions}
         isEditMode={isEditMode}
+        clearSectionChrome={index === 0}
         ChildComp={def.component as ChildComponent}
         onDelete={() => emit(trimTrailingSpacers(removeChildAt(container, index).container))}
         onDuplicate={() => emit(duplicateChildAt(container, index, newId))}
@@ -348,10 +353,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
   const emptyCols = occupied < columns ? columns - occupied : 0;
   return (
     <div className="@container">
-      {/* Below xl the section's "+" stacks under the drag handle and hangs down
-          into the left gutter, where the first child's control rail would collide
-          with it — push children down until the gutter is side-by-side again. */}
-      <div className={cn(gridClass, "pt-8 xl:pt-0")}>
+      <div className={gridClass}>
         {children.map(renderEditChild)}
         {Array.from({ length: emptyCols }, (_, i) => (
           <EmptyColumnCell