@alpaca-editor/core 1.0.3956 → 1.0.3960

package/styles.css

@@ -1,4 +1,4 @@
-/* Override default fonts to ensure Inter is used throughout */
+@import "tw-animate-css";
 * {
   font-family:
     var(--font-inter),
@@ -34,6 +34,141 @@ body {
     sans-serif;
 }
 
+@theme {
+  --font-inter: "Inter";
+  --color-dark: #111111;
+  --color-gray-2: #767676;
+  --color-gray-3: #e4e2e2;
+  --color-gray-4: #f2f2f2;
+  --color-gray-5: #f5f5f5;
+  --color-component-blue: #209cfc;
+  --color-dark-lighter: #333333;
+  --color-dark-lightest: #444444;
+  --color-dark-darkest: #000000;
+  --color-dark-darker: #111111;
+  --color-dark-darkest: #222222;
+  --color-theme-secondary: #9650fb;
+  --color-theme-secondary-light: #f6eeff;
+  --color-neutral-350: #b4b4b4;
+  --text-2xs: 0.7rem;
+  --text-3xs: 0.6rem;
+  --animate-sparkle: "sparkle 1.5s ease-in-out infinite";
+  --animate-slideUp: "slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+  --animate-fadeBottom: "fadeBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+  --animate-fadeIn: "fadeIn 0.5s ease-in-out";
+  --animate-fadeLeft: "fadeLeft 0.8s ease-in-out";
+  --animate-fadeRight: "fadeRight 0.8s ease-in-out";
+  --animate-bounceDots: "bounceDots .6s infinite alternate";
+
+  @keyframes sparkle {
+    "0%, 100%": {
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    "50%": {
+      opacity: 1;
+      transform: scale(1.3);
+    }
+  }
+  @keyframes slideUp {
+    "0%": {
+      transform: translateY(70px);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes fadeIn {
+    "0%": {
+      opacity: 0;
+    }
+    "100%": {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeLeft {
+    "0%": {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes fadeRight {
+    "0%": {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes fadeBottom {
+    "0%": {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes bounceDots {
+    "0%": {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    "100%": {
+      opacity: 0.3;
+      transform: translateY(-2px);
+    }
+  }
+}
+
+button {
+  cursor: pointer;
+}
+
+Override default fonts to ensure Inter is used throughout * {
+  font-family:
+    var(--font-inter),
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+}
+
+html,
+body {
+  font-family:
+    var(--font-inter),
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+}
+
 @theme {
   --font-geist-sans: "GeistSans";
   --font-geist-mono: "GeistMono";
@@ -125,6 +260,8 @@ body {
   }
 }
 
+/*LEGACY REMOVE*/
+
 :root {
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -763,3 +900,166 @@ body {
 button {
   cursor: pointer;
 }
+
+/* Animation utilities for popover and other UI components */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-2px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(2px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-2px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(2px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Animation utility classes */
+.animate-in {
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+}
+
+.animate-out {
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+}
+
+.fade-in-0 {
+  animation-name: fade-in;
+}
+
+.fade-out-0 {
+  animation-name: fade-out;
+}
+
+.zoom-in-95 {
+  animation-name: zoom-in;
+}
+
+.zoom-out-95 {
+  animation-name: zoom-out;
+}
+
+.slide-in-from-top-2 {
+  animation-name: slide-in-from-top;
+}
+
+.slide-in-from-bottom-2 {
+  animation-name: slide-in-from-bottom;
+}
+
+.slide-in-from-left-2 {
+  animation-name: slide-in-from-left;
+}
+
+.slide-in-from-right-2 {
+  animation-name: slide-in-from-right;
+}
+
+/* Data attribute selectors for state-based animations */
+[data-state="open"].animate-in {
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+}
+
+[data-state="closed"].animate-out {
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+}
+
+[data-state="open"].fade-in-0 {
+  animation-name: fade-in;
+}
+
+[data-state="closed"].fade-out-0 {
+  animation-name: fade-out;
+}
+
+[data-state="open"].zoom-in-95 {
+  animation-name: zoom-in;
+}
+
+[data-state="closed"].zoom-out-95 {
+  animation-name: zoom-out;
+}
+
+[data-side="top"].slide-in-from-bottom-2 {
+  animation-name: slide-in-from-bottom;
+}
+
+[data-side="bottom"].slide-in-from-top-2 {
+  animation-name: slide-in-from-top;
+}
+
+[data-side="left"].slide-in-from-right-2 {
+  animation-name: slide-in-from-right;
+}
+
+[data-side="right"].slide-in-from-left-2 {
+  animation-name: slide-in-from-left;
+}

package/dist/editor/menubar/ActionsMenu.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEditContext } from "../client/editContext";
-import { useRef } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { Menu } from "primereact/menu";
-export function ActionsMenu({ isMobile }) {
-    const overlaypanel = useRef(null);
-    const editContext = useEditContext();
-    if (!editContext)
-        return null;
-    const itemGroups = editContext.configuration.editor.actionsMenu?.itemsFactory(editContext) ||
-        [];
-    // Enhance menu items to close overlay panel after clicking
-    const enhancedItemGroups = itemGroups.map((group) => ({
-        ...group,
-        items: group.items.map((item) => {
-            const originalCommand = item.command;
-            return {
-                ...item,
-                command: (e) => {
-                    if (originalCommand) {
-                        originalCommand(e);
-                    }
-                    overlaypanel.current?.hide();
-                },
-            };
-        }),
-    }));
-    if (isMobile) {
-        console.log("isMobile", itemGroups);
-        return (_jsx("div", { className: "text-sm text-gray-200", children: itemGroups.map((group, groupIndex) => (_jsx("div", { className: "mb-3 flex flex-row flex-wrap items-center justify-end gap-3", children: group.items
-                    .filter((x) => !x.disabled)
-                    .map((item) => (_jsxs("div", { className: "flex items-center gap-1", onClick: () => {
-                        item.command?.({});
-                    }, children: [typeof item.icon === "string" ? (_jsx("i", { className: item.icon, style: { fontSize: "1rem" } })) : (_jsx(_Fragment, { children: item.icon })), item.label] }, item.id))) }, `group-${group.id || groupIndex}`))) }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { id: "actions-menu", className: "ml-2 flex h-11 cursor-pointer items-center gap-2 bg-blue-500 px-4 text-white hover:bg-blue-600", onClick: async (ev) => {
-                    overlaypanel.current.toggle(ev);
-                }, children: _jsx("i", { className: "pi pi-sort-down-fill" }) }), _jsx(OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: _jsx("div", { className: "flex flex-col gap-2", children: _jsx(Menu, { model: enhancedItemGroups.reduce((acc, group, index) => {
-                            // Add the group items
-                            acc.push(...group.items);
-                            // Add a separator if not the last group
-                            if (index < enhancedItemGroups.length - 1) {
-                                acc.push({ separator: true });
-                            }
-                            return acc;
-                        }, []) }) }) })] }));
-}
-//# sourceMappingURL=ActionsMenu.js.map

package/dist/editor/menubar/ActionsMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionsMenu.js","sourceRoot":"","sources":["../../../src/editor/menubar/ActionsMenu.tsx"],"names":[],"mappings":"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"}

package/dist/editor/menubar/SecondaryControls.d.ts

@@ -1 +0,0 @@
-export declare function SecondaryControls(): import("react/jsx-runtime").JSX.Element;

package/dist/editor/menubar/SecondaryControls.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEditContext } from "../client/editContext";
-import { ItemLanguageVersion } from "./ItemLanguageVersion";
-import { ActiveUsers } from "./ActiveUsers";
-import { ActionsMenu } from "./ActionsMenu";
-import { Separator } from "../menubar/Separator";
-export function SecondaryControls() {
-    const editContext = useEditContext();
-    if (editContext?.isMobile) {
-        return (_jsxs("div", { className: "flex flex-col items-end gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Headline, { title: "Current Page" }), _jsx(ItemLanguageVersion, {})] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Headline, { title: "Active Users" }), _jsx(ActiveUsers, {})] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Headline, { title: "Actions" }), _jsx(ActionsMenu, { isMobile: true })] })] }));
-    }
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ItemLanguageVersion, {}), _jsx(Separator, { size: "large" }), _jsx(ActiveUsers, {}), _jsx(ActionsMenu, { isMobile: false })] }));
-}
-function Headline({ title }) {
-    return (_jsx("div", { className: "flex flex-col items-end gap-2", children: _jsx("div", { className: "text-sm font-bold text-gray-300", children: title }) }));
-}
-//# sourceMappingURL=SecondaryControls.js.map

package/dist/editor/menubar/SecondaryControls.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SecondaryControls.js","sourceRoot":"","sources":["../../../src/editor/menubar/SecondaryControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,UAAU,iBAAiB;IAC/B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,IAAI,WAAW,EAAE,QAAQ,EAAE,CAAC;QAC1B,OAAO,CACL,eAAK,SAAS,EAAC,+BAA+B,aAC5C,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,KAAK,EAAC,cAAc,GAAG,EACjC,KAAC,mBAAmB,KAAG,IACnB,EACN,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,KAAK,EAAC,cAAc,GAAG,EACjC,KAAC,WAAW,KAAG,IACX,EACN,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,GAAG,EAC5B,KAAC,WAAW,IAAC,QAAQ,EAAE,IAAI,GAAI,IAC3B,IACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,mBAAmB,KAAG,EACvB,KAAC,SAAS,IAAC,IAAI,EAAC,OAAO,GAAG,EAC1B,KAAC,WAAW,KAAG,EACf,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,GAAI,IAC5B,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAqB;IAC5C,OAAO,CACL,cAAK,SAAS,EAAC,+BAA+B,YAC5C,cAAK,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAO,GAC1D,CACP,CAAC;AACJ,CAAC"}

package/src/editor/menubar/ActionsMenu.tsx

@@ -1,94 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { useRef } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { Menu } from "primereact/menu";
-import { MenuItemGroup } from "../../config/types";
-
-export function ActionsMenu({ isMobile }: { isMobile: boolean }) {
-  const overlaypanel = useRef<OverlayPanel>(null);
-  const editContext = useEditContext();
-  if (!editContext) return null;
-
-  const itemGroups: MenuItemGroup[] =
-    editContext.configuration.editor.actionsMenu?.itemsFactory(editContext) ||
-    [];
-
-  // Enhance menu items to close overlay panel after clicking
-  const enhancedItemGroups = itemGroups.map((group) => ({
-    ...group,
-    items: group.items.map((item) => {
-      const originalCommand = item.command;
-      return {
-        ...item,
-        command: (e: any) => {
-          if (originalCommand) {
-            originalCommand(e);
-          }
-          overlaypanel.current?.hide();
-        },
-      };
-    }),
-  }));
-
-  if (isMobile) {
-    console.log("isMobile", itemGroups);
-    return (
-      <div className="text-sm text-gray-200">
-        {itemGroups.map((group, groupIndex) => (
-          <div
-            key={`group-${group.id || groupIndex}`}
-            className="mb-3 flex flex-row flex-wrap items-center justify-end gap-3"
-          >
-            {group.items
-              .filter((x) => !x.disabled)
-              .map((item) => (
-                <div
-                  key={item.id}
-                  className="flex items-center gap-1"
-                  onClick={() => {
-                    item.command?.({});
-                  }}
-                >
-                  {typeof item.icon === "string" ? (
-                    <i className={item.icon} style={{ fontSize: "1rem" }} />
-                  ) : (
-                    <>{item.icon}</>
-                  )}
-                  {item.label}
-                </div>
-              ))}
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div
-        id="actions-menu"
-        className="ml-2 flex h-11 cursor-pointer items-center gap-2 bg-blue-500 px-4 text-white hover:bg-blue-600"
-        onClick={async (ev) => {
-          overlaypanel.current!.toggle(ev);
-        }}
-      >
-        <i className="pi pi-sort-down-fill"></i>
-      </div>
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="flex flex-col gap-2">
-          <Menu
-            model={enhancedItemGroups.reduce((acc, group, index) => {
-              // Add the group items
-              acc.push(...group.items);
-              // Add a separator if not the last group
-              if (index < enhancedItemGroups.length - 1) {
-                acc.push({ separator: true });
-              }
-              return acc;
-            }, [] as any[])}
-          />
-        </div>
-      </OverlayPanel>
-    </>
-  );
-}

package/src/editor/menubar/SecondaryControls.tsx

@@ -1,45 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { ItemLanguageVersion } from "./ItemLanguageVersion";
-import { ActiveUsers } from "./ActiveUsers";
-import { ActionsMenu } from "./ActionsMenu";
-import { Separator } from "../menubar/Separator";
-
-export function SecondaryControls() {
-  const editContext = useEditContext();
-
-  if (editContext?.isMobile) {
-    return (
-      <div className="flex flex-col items-end gap-4">
-        <div className="flex flex-col gap-2">
-          <Headline title="Current Page" />
-          <ItemLanguageVersion />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Headline title="Active Users" />
-          <ActiveUsers />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Headline title="Actions" />
-          <ActionsMenu isMobile={true} />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <ItemLanguageVersion />
-      <Separator size="large" />
-      <ActiveUsers />
-      <ActionsMenu isMobile={false} />
-    </div>
-  );
-}
-
-function Headline({ title }: { title: string }) {
-  return (
-    <div className="flex flex-col items-end gap-2">
-      <div className="text-sm font-bold text-gray-300">{title}</div>
-    </div>
-  );
-}