@alpaca-editor/core 1.0.3896 → 1.0.3897

package/dist/styles.css

@@ -11,6 +11,7 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
@@ -56,6 +57,8 @@
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-neutral-100: oklch(97% 0 0);
     --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -89,11 +92,11 @@
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --font-geist-sans: "GeistSans";
-    --color-canvas-red: #e32e52;
     --color-canvas-pink: #e32e52;
     --color-alpaca-blue: #209cfc;
     --color-alpaca-blue-light: #41aafd;
+    --color-theme-secondary: #9650fb;
+    --color-neutral-350: #b4b4b4;
     --text-2xs: 0.7rem;
     --animate-sparkle: "sparkle 1.5s ease-in-out infinite";
     --animate-fadeIn: "fadeIn 0.5s ease-in-out";
@@ -231,6 +234,9 @@
   .z-1000 {
     z-index: 1000;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -294,6 +300,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-3\.5 {
+    margin-top: calc(var(--spacing) * 3.5);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -315,6 +324,9 @@
   .mr-20 {
     margin-right: calc(var(--spacing) * 20);
   }
+  .mr-\[-3px\] {
+    margin-right: -3px;
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -333,6 +345,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
   .mb-20 {
     margin-bottom: calc(var(--spacing) * 20);
   }
@@ -357,6 +372,9 @@
   .ml-20 {
     margin-left: calc(var(--spacing) * 20);
   }
+  .ml-\[-3px\] {
+    margin-left: -3px;
+  }
   .ml-\[1px\] {
     margin-left: 1px;
   }
@@ -416,6 +434,9 @@
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -488,6 +509,9 @@
   .max-h-\(--radix-context-menu-content-available-height\) {
     max-height: var(--radix-context-menu-content-available-height);
   }
+  .max-h-0 {
+    max-height: calc(var(--spacing) * 0);
+  }
   .max-h-28 {
     max-height: calc(var(--spacing) * 28);
   }
@@ -503,6 +527,9 @@
   .max-h-\[400px\] {
     max-height: 400px;
   }
+  .max-h-\[1000px\] {
+    max-height: 1000px;
+  }
   .max-h-full {
     max-height: 100%;
   }
@@ -551,9 +578,6 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -605,6 +629,9 @@
   .max-w-24 {
     max-width: calc(var(--spacing) * 24);
   }
+  .max-w-40 {
+    max-width: calc(var(--spacing) * 40);
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
@@ -620,6 +647,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -684,6 +714,9 @@
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -825,6 +858,41 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -932,6 +1000,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-1 {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -992,9 +1064,6 @@
   .border-canvas-pink {
     border-color: var(--color-canvas-pink);
   }
-  .border-canvas-red {
-    border-color: var(--color-canvas-red);
-  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1037,6 +1106,9 @@
   .border-teal-400 {
     border-color: var(--color-teal-400);
   }
+  .border-theme-secondary {
+    border-color: var(--color-theme-secondary);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1073,15 +1145,15 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-500\/20 {
+    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
   .bg-border {
     background-color: var(--border);
   }
-  .bg-canvas-pink {
-    background-color: var(--color-canvas-pink);
-  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -1136,18 +1208,24 @@
   .bg-neutral-100 {
     background-color: var(--color-neutral-100);
   }
+  .bg-neutral-200 {
+    background-color: var(--color-neutral-200);
+  }
+  .bg-neutral-350 {
+    background-color: var(--color-neutral-350);
+  }
   .bg-orange-400 {
     background-color: var(--color-orange-400);
   }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
   .bg-pink-400 {
     background-color: var(--color-pink-400);
   }
   .bg-popover {
     background-color: var(--popover);
   }
-  .bg-primary {
-    background-color: var(--primary);
-  }
   .bg-purple-400 {
     background-color: var(--color-purple-400);
   }
@@ -1184,6 +1262,9 @@
   .bg-teal-400 {
     background-color: var(--color-teal-400);
   }
+  .bg-theme-secondary {
+    background-color: var(--color-theme-secondary);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1193,6 +1274,9 @@
   .bg-yellow-200 {
     background-color: var(--color-yellow-200);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1241,9 +1325,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -1280,6 +1361,12 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1298,6 +1385,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-\[5px\] {
     padding-block: 5px;
   }
@@ -1376,9 +1466,6 @@
   .text-right {
     text-align: right;
   }
-  .font-geist-sans {
-    font-family: var(--font-geist-sans);
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1477,9 +1564,6 @@
   .text-canvas-pink {
     color: var(--color-canvas-pink);
   }
-  .text-canvas-red {
-    color: var(--color-canvas-red);
-  }
   .text-foreground {
     color: var(--foreground);
   }
@@ -1528,12 +1612,15 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-neutral-500 {
+    color: var(--color-neutral-500);
+  }
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
+  }
   .text-orange-600 {
     color: var(--color-orange-600);
   }
-  .text-pink-400 {
-    color: var(--color-pink-400);
-  }
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
@@ -1558,6 +1645,9 @@
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
+  .text-theme-secondary {
+    color: var(--color-theme-secondary);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -1696,6 +1786,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .delay-500 {
     transition-delay: 500ms;
   }
@@ -1710,6 +1805,10 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -1815,13 +1914,6 @@
       }
     }
   }
-  .hover\:border-canvas-pink {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-canvas-pink);
-      }
-    }
-  }
   .hover\:border-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1920,24 +2012,24 @@
       }
     }
   }
-  .hover\:bg-primary\/90 {
+  .hover\:bg-red-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        background-color: var(--color-red-600);
       }
     }
   }
-  .hover\:bg-red-600 {
+  .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-600);
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
       }
     }
   }
-  .hover\:bg-secondary\/80 {
+  .hover\:bg-theme-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        background-color: color-mix(in oklab, var(--color-theme-secondary) 80%, transparent);
       }
     }
   }
@@ -1962,13 +2054,6 @@
       }
     }
   }
-  .hover\:text-canvas-pink {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-canvas-pink);
-      }
-    }
-  }
   .hover\:text-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -2231,6 +2316,11 @@
       }
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .lg\:pr-20 {
     @media (width >= 64rem) {
       padding-right: calc(var(--spacing) * 20);
@@ -2388,6 +2478,7 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
+    --neutral-350: #b4b4b4;
   }
   .dark {
     --background: oklch(0.145 0 0);
@@ -2440,12 +2531,16 @@
       background-position: right;
       background-repeat: no-repeat;
     }
+    .bg-wizard {
+      background-image: url("./images/wizard-bg.png");
+      background-position: right;
+      background-size: cover;
+      background-repeat: no-repeat;
+      opacity: 0.2;
+    }
     .p-tree {
       background-color: unset;
     }
-    body, button, input, select, textarea {
-      font-family: GeistSans;
-    }
     .alpaceditor-tabs {
       display: flex;
       flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3896",
+  "version": "1.0.3897",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ActionButton.tsx

@@ -1,5 +1,6 @@
 import { classNames } from "primereact/utils";
 import React from "react";
+import { Button } from "./ui/button";
 
 interface ActionButtonProps {
   isLoading: boolean;
@@ -21,23 +22,20 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
   className = "",
 }) => {
   return (
-    <button
+    <Button
       type={type}
       onClick={onClick}
       disabled={disabled || isLoading}
-      className={classNames(
-        "bg-canvas-pink text-white px-4 py-2 rounded-lg font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed border hover:border-canvas-pink hover:text-canvas-pink",
-        className
-      )}
+      className={className}
     >
       {isLoading ? (
-        <div className="flex items-center gap-2 justify-center">
-          <div className="animate-spin mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
+        <div className="flex items-center justify-center gap-2">
+          <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
           <div>{loadingText}</div>
         </div>
       ) : (
         children
       )}
-    </button>
+    </Button>
   );
 };

package/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-theme-secondary text-primary-foreground shadow-xs hover:bg-theme-secondary/80",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
@@ -22,7 +22,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-8 px-3 py-2 has-[>svg]:px-3",
+        default: "h-8 px-7 py-5 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",

package/src/config/config.tsx

@@ -33,7 +33,10 @@ import {
   GraphQLIcon,
   JsonIcon,
   PageWizardIcon,
+  TreeIcon,
   WizardIcon,
+  WorkboxIcon,
+  UsersIcon,
 } from "../editor/ui/Icons";
 import { Debug } from "../editor/sidebar/Debug";
 import { GraphQL } from "../editor/sidebar/GraphQL";
@@ -68,9 +71,12 @@ import { getDefaultTourSteps } from "../tour/default-tour";
 import { Translation } from "../editor/sidebar/Translations";
 import { EditView } from "../editor/views/EditView";
 import { InsertMenuTemplate } from "../editor/context-menu/InsertMenu";
-import { ControlCenterMenu } from "../editor/control-center/ControlCenterMenu";
+
 import { Status } from "../editor/control-center/Status";
 import { IndexOverview } from "../editor/control-center/IndexOverview";
+import { Info } from "../editor/control-center/Info";
+import { QuotaInfo } from "../editor/control-center/QuotaInfo";
+import { About } from "../editor/control-center/About";
 import { MainContentTree } from "../editor/sidebar/MainContentTree";
 import { AttachmentEditor } from "../editor/field-types/AttachmentEditor";
 import { Comments } from "../editor/reviews/Comments";
@@ -93,14 +99,20 @@ import { getWizards } from "../page-wizard/service";
 import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
 import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
 
-import { Ghost, Layers } from "lucide-react";
+import {
+  BookA,
+  Ghost,
+  Languages,
+  Layers,
+  MessageCircleMore,
+  Settings,
+} from "lucide-react";
 import { GhostWriter } from "../editor/ai/GhostWriter";
 import { SecondaryControls } from "../editor/menubar/SecondaryControls";
 
 import { Command } from "../editor/commands/commands";
 import { PreviewSecondaryControls } from "../editor/menubar/PreviewSecondaryControls";
 import { AboutDialog } from "../editor/client/AboutDialog";
-import { CopyMoveMenuTemplate } from "../editor/context-menu/CopyMoveMenu";
 
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
@@ -316,6 +328,30 @@ export const getConfiguration = (): EditorConfiguration => {
 
     controlCenter: {
       groups: [
+        {
+          title: "System",
+          icon: <i className="pi pi-info-circle" />,
+          panels: [
+            {
+              id: "info",
+              title: "System Info",
+              icon: <i className="pi pi-info-circle" />,
+              content: <Info />,
+            },
+            {
+              id: "quota",
+              title: "AI Quota",
+              icon: <i className="pi pi-chart-bar" />,
+              content: <QuotaInfo />,
+            },
+            {
+              id: "about",
+              title: "About",
+              icon: <i className="pi pi-info" />,
+              content: <About />,
+            },
+          ],
+        },
         {
           title: "Indexing",
           icon: <i className="pi pi-search" />,
@@ -390,7 +426,7 @@ export const getConfiguration = (): EditorConfiguration => {
         },
         {
           name: "translate",
-          icon: "pi pi-language",
+          icon: <Languages />,
           title: "Translate",
           leftSidebar: {
             panels: [
@@ -408,7 +444,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "reviews",
           title: "Reviews",
-          icon: "pi pi-comments",
+          icon: <MessageCircleMore />,
           leftSidebar: {
             panels: [
               {
@@ -434,7 +470,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "publish",
           title: "Publish",
-          icon: "pi pi-globe",
+          icon: <WorkboxIcon />,
 
           leftSidebar: {
             panels: [
@@ -460,13 +496,13 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "content-editor",
           title: "Content Editor",
-          icon: "pi pi-sitemap",
+          icon: <TreeIcon />,
           defaultCenterPanelView: editView,
           leftSidebar: {
             panels: [
               {
                 name: "tree",
-                icon: "pi pi-sitemap",
+                icon: <TreeIcon />,
                 title: "Content",
                 content: <MainContentTree mode="normal" />,
                 initialSize: 80,
@@ -481,7 +517,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "dictionary",
           title: "Dictionary",
-          icon: "pi pi-book",
+          icon: <BookA />,
           leftSidebar: {
             panels: [
               {
@@ -498,7 +534,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "sessions",
           title: "Sessions",
-          icon: "pi pi-users",
+          icon: <UsersIcon />,
           leftSidebar: {
             panels: [
               {
@@ -610,20 +646,9 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "control-center",
           title: "Control Center",
-          icon: "pi pi-cog",
+          icon: <Settings />,
           defaultCenterPanelView: <Status />,
           menuBar: <></>,
-          leftSidebar: {
-            panels: [
-              {
-                name: "settings",
-                icon: "pi pi-cog",
-                title: "Control Center",
-                content: <ControlCenterMenu />,
-                initialSize: 30,
-              },
-            ],
-          },
         },
       ],