@alpaca-editor/core 1.0.3962 → 1.0.3963

package/src/editor/menubar/PageToolbar.tsx

@@ -0,0 +1,154 @@
+import { useEditContext } from "../client/editContext";
+import { Separator } from "./Separator";
+import { CompareIcon } from "../ui/Icons";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import {
+  EyeIcon,
+  MessagesSquare,
+  Pencil,
+  Monitor,
+  Smartphone,
+  Table,
+  Plus,
+  Layers,
+} from "lucide-react";
+import { EnterFullScreenIcon } from "@radix-ui/react-icons";
+
+export function PageToolbar() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  const pageViewContext = editContext.pageView;
+
+  const device = pageViewContext.device;
+  const setDevice = pageViewContext.setDevice;
+
+  // Insert mode logic
+  const insertMode = editContext.insertMode;
+
+  const toggleInsertMode = () => {
+    editContext.setInsertMode(true);
+  };
+
+  // Calculate total count of comments and suggestions
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+  const suggestionsCount =
+    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
+    0;
+  const totalCount = commentsCount + suggestionsCount;
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
+      <div className="flex items-center gap-2">
+        {!editContext.user?.isLimitedPreviewUser && (
+          <SimpleIconButton
+            icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Edit"
+            size="large"
+            selected={editContext.mode === "edit"}
+            onClick={() => editContext.setMode("edit")}
+          />
+        )}
+
+        <SimpleIconButton
+          icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Preview"
+          size="large"
+          selected={editContext.mode === "preview"}
+          onClick={() => editContext.setMode("preview")}
+        />
+
+        <div className="relative">
+          <SimpleIconButton
+            selected={editContext?.mode === "suggestions"}
+            icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
+            label="Write suggestions"
+            size="large"
+            onClick={() => editContext?.setMode("suggestions")}
+          />
+          {totalCount > 0 && (
+            <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+              {totalCount > 99 ? "99+" : totalCount}
+            </div>
+          )}
+        </div>
+        <Separator size="large" />
+        <SimpleIconButton
+          icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Add Component"
+          size="large"
+          selected={insertMode}
+          onClick={toggleInsertMode}
+          disabled={
+            !editContext.page?.item.canWriteItem || editContext.mode !== "edit"
+          }
+        />
+      </div>
+      {!editContext.isMobile && (
+        <div className="flex items-center gap-2">
+          <SimpleIconButton
+            icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Desktop"
+            size="large"
+            selected={device === "desktop"}
+            onClick={() => setDevice("desktop")}
+          />
+          <SimpleIconButton
+            icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Mobile"
+            size="large"
+            selected={Boolean(device && device !== "desktop")}
+            onClick={() => {
+              if (editContext.configuration.devices[0]) {
+                setDevice(editContext.configuration.devices[0].name);
+              }
+            }}
+          />
+          <SimpleIconButton
+            icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Form"
+            size="large"
+            selected={!device}
+            onClick={() => setDevice("")}
+          />
+          <Separator size="large" />
+          {!editContext.isMobile && (
+            <SimpleIconButton
+              icon={<CompareIcon className="h-6 w-6 p-1" />}
+              label="Compare"
+              size="large"
+              className={
+                editContext.compareMode
+                  ? "text-gray-600"
+                  : "hover:text-gray-600"
+              }
+              selected={editContext.compareMode}
+              onClick={() =>
+                editContext.setCompareMode(!editContext.compareMode)
+              }
+            />
+          )}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <SimpleIconButton
+          icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
+          label="Fullscreen"
+          size="large"
+          onClick={() => pageViewContext.setFullscreen(true)}
+        />
+        <SimpleIconButton
+          icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Component Navigator"
+          size="large"
+          selected={editContext.showRightSidebar}
+          onClick={() =>
+            editContext.setShowRightSidebar(!editContext.showRightSidebar)
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/menubar/PageViewerControls.tsx

@@ -1,168 +1,10 @@
 import { useEditContext } from "../client/editContext";
-import { Separator } from "./Separator";
-import { CompareIcon, FormEditIcon } from "../ui/Icons";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import {
-  EyeIcon,
-  MessagesSquare,
-  Pencil,
-  Monitor,
-  Smartphone,
-  Table,
-  Plus,
-  Layers,
-} from "lucide-react";
-import { EnterFullScreenIcon } from "@radix-ui/react-icons";
+import { createEditToolbar } from "./ToolbarFactory";
 
 export function PageViewerControls() {
   const editContext = useEditContext();
 
   if (!editContext) return null;
 
-  const hasLayout = editContext.contentEditorItem?.hasLayout;
-
-  const pageViewContext = editContext.pageView;
-
-  const device = pageViewContext.device;
-  const setDevice = pageViewContext.setDevice;
-
-  // Insert mode logic
-  const insertMode = editContext.insertMode;
-
-  const toggleInsertMode = () => {
-    editContext.setInsertMode(true);
-  };
-
-  // Calculate total count of comments and suggestions
-  const commentsCount =
-    editContext.comments?.filter((x) => !x.isResolved).length || 0;
-  const suggestionsCount =
-    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
-    0;
-  const totalCount = commentsCount + suggestionsCount;
-
-  return (
-    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
-      {hasLayout && (
-        <>
-          <div className="flex items-center gap-2">
-            {!editContext.user?.isLimitedPreviewUser && (
-              <SimpleIconButton
-                icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Edit"
-                size="large"
-                selected={editContext.mode === "edit"}
-                onClick={() => editContext.setMode("edit")}
-              />
-            )}
-
-            <SimpleIconButton
-              icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Preview"
-              size="large"
-              selected={editContext.mode === "preview"}
-              onClick={() => editContext.setMode("preview")}
-            />
-
-            <div className="relative">
-              <SimpleIconButton
-                selected={editContext?.mode === "suggestions"}
-                icon={
-                  <MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />
-                }
-                label="Write suggestions"
-                size="large"
-                onClick={() => editContext?.setMode("suggestions")}
-              />
-              {totalCount > 0 && (
-                <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
-                  {totalCount > 99 ? "99+" : totalCount}
-                </div>
-              )}
-            </div>
-            <Separator size="large" />
-            <SimpleIconButton
-              icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Add Component"
-              size="large"
-              selected={insertMode}
-              onClick={toggleInsertMode}
-              disabled={
-                !editContext.page?.item.canWriteItem ||
-                editContext.mode !== "edit"
-              }
-            />
-          </div>
-          {!editContext.isMobile && (
-            <div className="flex items-center gap-2">
-              <SimpleIconButton
-                icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Desktop"
-                size="large"
-                selected={device === "desktop"}
-                onClick={() => setDevice("desktop")}
-              />
-              <SimpleIconButton
-                icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Mobile"
-                size="large"
-                selected={Boolean(device && device !== "desktop")}
-                onClick={() => {
-                  if (editContext.configuration.devices[0]) {
-                    setDevice(editContext.configuration.devices[0].name);
-                  }
-                }}
-              />
-              <SimpleIconButton
-                icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Form"
-                size="large"
-                selected={!device}
-                onClick={() => setDevice("")}
-              />
-              <Separator size="large" />
-              {!editContext.isMobile && (
-                <SimpleIconButton
-                  icon={<CompareIcon className="h-6 w-6 p-1" />}
-                  label="Compare"
-                  size="large"
-                  className={
-                    editContext.compareMode
-                      ? "text-gray-600"
-                      : "hover:text-gray-600"
-                  }
-                  selected={editContext.compareMode}
-                  onClick={() =>
-                    editContext.setCompareMode(!editContext.compareMode)
-                  }
-                />
-              )}
-            </div>
-          )}
-          {/* <i
-            className="pi pi-external-link cursor-pointer rounded-full p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-800"
-            title="Fullscreen"
-            onClick={() => pageViewContext.setFullscreen(true)}
-          /> */}
-          <div className="flex items-center gap-2">
-            <SimpleIconButton
-              icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
-              label="Fullscreen"
-              size="large"
-              onClick={() => pageViewContext.setFullscreen(true)}
-            />
-            <SimpleIconButton
-              icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Component Navigator"
-              size="large"
-              selected={editContext.showRightSidebar}
-              onClick={() =>
-                editContext.setShowRightSidebar(!editContext.showRightSidebar)
-              }
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
+  return createEditToolbar(editContext);
 }

package/src/editor/menubar/ToolbarFactory.tsx

@@ -0,0 +1,68 @@
+import { EditContextType } from "../client/editContext";
+import { GenericToolbar, ToolbarSection } from "./GenericToolbar";
+import {
+  ReviewCommands,
+  EditControls,
+  InsertControls,
+  ViewportControls,
+  UtilityControls,
+  CompareControls,
+} from "./toolbar-sections";
+
+export function createEditToolbar(editContext: EditContextType) {
+  if (!editContext) return null;
+
+  const hasLayout = editContext.contentEditorItem?.hasLayout;
+  const isReviewsView = editContext.viewName === "reviews";
+
+  // For items without layout (simple content editor)
+  if (!hasLayout) {
+    const left: ToolbarSection[] = [
+      {
+        key: "compare",
+        component: <CompareControls />,
+      },
+    ];
+
+    return <GenericToolbar left={left} />;
+  }
+
+  // For pages with layout
+  const left: ToolbarSection[] = [];
+  const right: ToolbarSection[] = [];
+  const center: ToolbarSection[] = [];
+
+  // Add review commands if in reviews view
+
+  // Standard edit controls
+  left.push({
+    key: "edit-controls",
+    component: <EditControls />,
+  });
+  if (isReviewsView) {
+    left.push({
+      key: "review-commands",
+      component: <ReviewCommands />,
+    });
+  }
+
+  // Insert controls
+  left.push({
+    key: "insert-controls",
+    component: <InsertControls />,
+  });
+
+  // Viewport controls (desktop/mobile/form)
+  center.push({
+    key: "viewport-controls",
+    component: <ViewportControls />,
+  });
+
+  // Utility controls (compare, fullscreen, sidebar)
+  right.push({
+    key: "utility-controls",
+    component: <UtilityControls />,
+  });
+
+  return <GenericToolbar left={left} right={right} center={center} />;
+}

package/src/editor/menubar/toolbar-sections/CompareControls.tsx

@@ -0,0 +1,22 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { CompareIcon } from "../../ui/Icons";
+
+export function CompareControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  return (
+    <SimpleIconButton
+      icon={<CompareIcon className="h-6 w-6 p-1" />}
+      label="Compare"
+      size="large"
+      className={
+        editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
+      }
+      selected={editContext.compareMode}
+      onClick={() => editContext.setCompareMode(!editContext.compareMode)}
+    />
+  );
+}

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -0,0 +1,54 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { EyeIcon, MessagesSquare, Pencil } from "lucide-react";
+
+export function EditControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  // Calculate total count of comments and suggestions
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+  const suggestionsCount =
+    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
+    0;
+  const totalCount = commentsCount + suggestionsCount;
+
+  return (
+    <>
+      {!editContext.user?.isLimitedPreviewUser && (
+        <SimpleIconButton
+          icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Edit"
+          size="large"
+          selected={editContext.mode === "edit"}
+          onClick={() => editContext.setMode("edit")}
+        />
+      )}
+
+      <SimpleIconButton
+        icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Preview"
+        size="large"
+        selected={editContext.mode === "preview"}
+        onClick={() => editContext.setMode("preview")}
+      />
+
+      <div className="relative">
+        <SimpleIconButton
+          selected={editContext?.mode === "suggestions"}
+          icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
+          label="Write suggestions"
+          size="large"
+          onClick={() => editContext?.setMode("suggestions")}
+        />
+        {totalCount > 0 && (
+          <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+            {totalCount > 99 ? "99+" : totalCount}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/editor/menubar/toolbar-sections/InsertControls.tsx

@@ -0,0 +1,28 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { Plus } from "lucide-react";
+
+export function InsertControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  const insertMode = editContext.insertMode;
+
+  const toggleInsertMode = () => {
+    editContext.setInsertMode(true);
+  };
+
+  return (
+    <SimpleIconButton
+      icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
+      label="Add Component"
+      size="large"
+      selected={insertMode}
+      onClick={toggleInsertMode}
+      disabled={
+        !editContext.page?.item.canWriteItem || editContext.mode !== "edit"
+      }
+    />
+  );
+}

package/src/editor/menubar/toolbar-sections/ReviewCommands.tsx

@@ -0,0 +1,59 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { Check, X } from "lucide-react";
+
+export function ReviewCommands() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  const reviewCommands = editContext.configuration.commands.reviewcommands;
+  const contentEditorItem = editContext.contentEditorItem;
+
+  if (!contentEditorItem || !reviewCommands?.length) return null;
+
+  const executeReviewCommand = async (command: any, event?: any) => {
+    if (command && contentEditorItem) {
+      await editContext.executeCommand({
+        command: command,
+        data: { items: [contentEditorItem] },
+        event: event || null,
+      });
+    }
+  };
+
+  return (
+    <>
+      {reviewCommands.map((command: any) => {
+        const isDisabled = editContext.isCommandDisabled({
+          command: command,
+          data: { items: [contentEditorItem] },
+        });
+
+        // Use appropriate icons for approve/reject commands
+        const getIcon = () => {
+          if (command.id === "approve-review") {
+            return <Check className="h-6 w-6 p-1" strokeWidth={1} />;
+          }
+          if (command.id === "reject-review") {
+            return <X className="h-6 w-6 p-1" strokeWidth={1} />;
+          }
+          return (
+            command.icon || <Check className="h-6 w-6 p-1" strokeWidth={1} />
+          );
+        };
+
+        return (
+          <SimpleIconButton
+            key={command.id}
+            icon={getIcon()}
+            label={command.label}
+            size="large"
+            disabled={isDisabled}
+            onClick={(event) => executeReviewCommand(command, event)}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/editor/menubar/toolbar-sections/UtilityControls.tsx

@@ -0,0 +1,33 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { Layers } from "lucide-react";
+import { EnterFullScreenIcon } from "@radix-ui/react-icons";
+import { CompareIcon } from "../../ui/Icons";
+
+export function UtilityControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  const pageViewContext = editContext.pageView;
+
+  return (
+    <>
+      <SimpleIconButton
+        icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
+        label="Fullscreen"
+        size="large"
+        onClick={() => pageViewContext.setFullscreen(true)}
+      />
+      <SimpleIconButton
+        icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Component Navigator"
+        size="large"
+        selected={editContext.showRightSidebar}
+        onClick={() =>
+          editContext.setShowRightSidebar(!editContext.showRightSidebar)
+        }
+      />
+    </>
+  );
+}

package/src/editor/menubar/toolbar-sections/ViewportControls.tsx

@@ -0,0 +1,58 @@
+import { CompareIcon } from "../../ui/Icons";
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { Monitor, Smartphone, Table } from "lucide-react";
+import { Separator } from "../Separator";
+
+export function ViewportControls() {
+  const editContext = useEditContext();
+
+  if (!editContext || editContext.isMobile) return null;
+
+  const pageViewContext = editContext.pageView;
+  const device = pageViewContext.device;
+  const setDevice = pageViewContext.setDevice;
+
+  return (
+    <>
+      <SimpleIconButton
+        icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Desktop"
+        size="large"
+        selected={device === "desktop"}
+        onClick={() => setDevice("desktop")}
+      />
+      <SimpleIconButton
+        icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Mobile"
+        size="large"
+        selected={Boolean(device && device !== "desktop")}
+        onClick={() => {
+          if (editContext.configuration.devices[0]) {
+            setDevice(editContext.configuration.devices[0].name);
+          }
+        }}
+      />
+      <SimpleIconButton
+        icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Form"
+        size="large"
+        selected={!device}
+        onClick={() => setDevice("")}
+      />
+      <Separator size="large" />
+      {!editContext.isMobile && (
+        <SimpleIconButton
+          icon={<CompareIcon className="h-6 w-6 p-1" />}
+          label="Compare"
+          size="large"
+          className={
+            editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
+          }
+          selected={editContext.compareMode}
+          onClick={() => editContext.setCompareMode(!editContext.compareMode)}
+        />
+      )}
+    </>
+  );
+}

package/src/editor/menubar/toolbar-sections/index.ts

@@ -0,0 +1,6 @@
+export { ReviewCommands } from "./ReviewCommands";
+export { EditControls } from "./EditControls";
+export { InsertControls } from "./InsertControls";
+export { ViewportControls } from "./ViewportControls";
+export { UtilityControls } from "./UtilityControls";
+export { CompareControls } from "./CompareControls";

package/src/editor/sidebar/ComponentPalette.tsx

@@ -35,7 +35,7 @@ export function ComponentPalette({}: {}) {
           ref={filterRef}
           value={filter}
           onChange={setFilter}
-          className="border-gray-300"
+          className="border-gray-3"
           placeholder="Filter..."
         />
       </div>

package/src/editor/sidebar/ComponentTree.tsx

@@ -482,7 +482,7 @@ export function ComponentTree({}) {
 
   if (!page)
     return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-500">
+      <div className="flex h-full items-center justify-center text-xs text-gray-500">
         This item has no layout.
       </div>
     );