@drawnagency/primitives 0.1.51 → 0.1.53

package/dist/components/editor/PagesModal.d.ts

@@ -11,8 +11,6 @@ export interface PagesModalProps {
     onSetFields: (pageId: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
     onSetAudience: (pageId: string, access: string[]) => void;
     onConfirmDelete: (pageId: string) => void;
-    /** Navigate the editor to this page (the shell also closes the modal). */
-    onNavigate: (pageId: string) => void;
 }
 export declare function PagesModal(props: PagesModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PagesModal.d.ts.map

package/dist/components/editor/PagesModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PagesModal.d.ts","sourceRoot":"","sources":["../../../src/components/editor/PagesModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAUjD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,+EAA+E;IAC/E,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;IAClG,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA4EhD"}
+{"version":3,"file":"PagesModal.d.ts","sourceRoot":"","sources":["../../../src/components/editor/PagesModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAUjD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,+EAA+E;IAC/E,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;IAClG,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA2EhD"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CA+2BP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CA22BP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.10",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-link": "^3.20.4",

package/src/components/editor/PagesModal.tsx

@@ -22,8 +22,6 @@ export interface PagesModalProps {
   onSetFields: (pageId: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
   onSetAudience: (pageId: string, access: string[]) => void;
   onConfirmDelete: (pageId: string) => void;
-  /** Navigate the editor to this page (the shell also closes the modal). */
-  onNavigate: (pageId: string) => void;
 }
 
 export function PagesModal(props: PagesModalProps) {
@@ -61,7 +59,6 @@ export function PagesModal(props: PagesModalProps) {
       dragIndex={dragIndex}
       onReorder={props.onReorder}
       onToggleExpand={() => toggleExpand(page.id)}
-      onNavigate={() => props.onNavigate(page.id)}
       onSetHome={() => props.onSetHome(page.id)}
       onSetArchived={(v) => {
         // Archiving/restoring remounts the row in its new group, so end the
@@ -105,12 +102,12 @@ export function PagesModal(props: PagesModalProps) {
 }
 
 function PageRow({
-  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onNavigate, onSetHome, onSetArchived, onSetFields, onSetAudience, onRequestDelete,
+  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onRequestDelete,
 }: {
   page: Page; audiences: Audience[]; expanded: boolean;
   isNew: boolean; otherSlugs: string[];
   dragIndex?: number; onReorder: (fromIndex: number, toIndex: number) => void;
-  onToggleExpand: () => void; onNavigate: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
+  onToggleExpand: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
   onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
   onSetAudience: (access: string[]) => void; onRequestDelete: () => void;
 }) {
@@ -277,22 +274,17 @@ function PageRow({
             <DragHandle ref={handleRef} />
           </div>
         )}
-        <button
-          type="button"
-          aria-label={`Go to ${pageDisplayTitle(page.title)}`}
-          onClick={onNavigate}
-          className="group min-w-0 flex-1 cursor-pointer text-left"
-        >
+        <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className={cn("truncate text-sm font-medium text-base-contrast transition-colors group-hover:text-primary", !page.title && "italic text-base-contrast/60")}>
+            <span className={cn("truncate text-sm font-medium text-base-contrast", !page.title && "italic text-base-contrast/60")}>
               {pageDisplayTitle(page.title)}
             </span>
             {page.isHome && <span className="rounded bg-primary px-1.5 py-0.5 text-xs font-medium text-primary-contrast">Home page</span>}
             {!page.showInNav && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Hidden</span>}
             {page.status === "archived" && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Archived</span>}
           </div>
-          <div className="text-xs text-base-contrast/70 transition-colors group-hover:text-primary">{page.isHome ? "/" : `/${page.slug}`}</div>
-        </button>
+          <div className="text-xs text-base-contrast/70">{page.isHome ? "/" : `/${page.slug}`}</div>
+        </div>
         <button
           type="button"
           aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}

package/src/components/shell/EditorShell.tsx

@@ -1,6 +1,8 @@
 import { Fragment, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
 
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollWindowForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import type { LoadedSection } from "../../lib/loader";
 import type { SectionContent } from "../../schemas/sections";
 import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
@@ -948,10 +950,6 @@ export default function EditorShell({
               onSetFields={handleSetPageFields}
               onSetAudience={handleSetPageAudience}
               onConfirmDelete={handleDeletePage}
-              onNavigate={(id) => {
-                goToPage(id);
-                setShowPagesModal(false);
-              }}
             />
           </EditorModal>
           <EditorModal isOpen={movingSectionId !== null} onClose={() => setMovingSectionId(null)} title="Move to page">
@@ -1155,13 +1153,20 @@ function EditorContent({
     : sections;
 
   useEffect(() => {
-    return monitorForElements({
-      onDragStart: ({ source }) => {
-        if (source.data.dragType === "section") {
-          setPendingInsertIndex(null);
-        }
-      },
-    });
+    return combine(
+      monitorForElements({
+        onDragStart: ({ source }) => {
+          if (source.data.dragType === "section") {
+            setPendingInsertIndex(null);
+          }
+        },
+      }),
+      // Gradually scroll the window when a section drag nears the viewport
+      // edge, so long reorders don't require repeated drag-and-release
+      autoScrollWindowForElements({
+        canScroll: ({ source }) => source.data.dragType === "section",
+      }),
+    );
   }, []);
 
   return (