@alpaca-editor/core 1.0.0 → 1.0.3

package/dist/tour/preview-tour.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function getPreviewTourSteps({ editContext, nextStep, stopTour, waitForElement, delay, }) {
+    const tourSteps = {
+        "start-tour": {
+            title: "Welcome to the Preview Tour!",
+            description: "I'll guide you through the preview and explain how to use its essential features.",
+            prepareAction: async () => {
+                editContext?.openSplashScreen();
+            },
+            buttons: [
+                {
+                    label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "pi pi-play" }), " Start Tour"] })),
+                    onClick: () => {
+                        nextStep("comment");
+                    },
+                    className: "button button-primary mt-2",
+                },
+                {
+                    label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "pi pi-times" }), " No thanks"] })),
+                    onClick: () => {
+                        stopTour();
+                    },
+                    className: "button button-secondary mt-2",
+                },
+            ],
+        },
+        comment: {
+            description: _jsx(_Fragment, { children: "Click here to add a comment to the page" }),
+            focusElement: "#add-comment",
+            nextStep: "commentContextMenu",
+            buttons: [
+                {
+                    label: (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-arrow-right" }), " Next"] })),
+                    onClick: () => nextStep("commentContextMenu"),
+                },
+            ],
+        },
+        commentContextMenu: {
+            description: (_jsx(_Fragment, { children: "You can also select text and add a comment from the context menu " })),
+            focusElement: "[data-testid='pageEditoriframe']",
+            waitForUserInput: async () => {
+                await waitForElement(".p-contextmenu-enter-done");
+                await delay(1000);
+            },
+            nextStep: "approveMenu",
+            bubblePosition: "left",
+        },
+        approveMenu: {
+            description: _jsx(_Fragment, { children: "Approve or reject the page here " }),
+            focusElement: "#actions-menu",
+            waitForUserInput: async () => {
+                await waitForElement("#approveReview");
+                await delay(2000);
+            },
+            nextStep: "closeTour",
+            bubblePosition: "left",
+        },
+        closeTour: {
+            description: _jsx(_Fragment, { children: "Congratulations! You have completed the tour." }),
+            buttons: [
+                {
+                    label: (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-check" }), " Finish Tour"] })),
+                    onClick: () => stopTour(),
+                    className: "button button-primary mt-2",
+                },
+            ],
+        },
+        congratulations: {
+            title: "Congratulations!",
+            description: "You have completed the tour and are ready to start editing!",
+            buttons: [
+                {
+                    label: (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-check" }), " Finish Tour"] })),
+                    onClick: () => stopTour(),
+                    className: "button button-primary mt-2",
+                },
+            ],
+        },
+        error: {
+            description: "Oops, something went wrong.",
+            buttons: [
+                {
+                    label: (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-check" }), " Close"] })),
+                    onClick: () => stopTour(),
+                },
+            ],
+        },
+    };
+    return tourSteps;
+}
+//# sourceMappingURL=preview-tour.js.map

package/dist/tour/preview-tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-tour.js","sourceRoot":"","sources":["../../src/tour/preview-tour.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,KAAK,GACoB;IACzB,MAAM,SAAS,GAA6B;QAC1C,YAAY,EAAE;YACZ,KAAK,EAAE,8BAA8B;YACrC,WAAW,EACT,mFAAmF;YACrF,aAAa,EAAE,KAAK,IAAI,EAAE;gBACxB,WAAW,EAAE,gBAAgB,EAAE,CAAC;YAClC,CAAC;YACD,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,YAAG,SAAS,EAAC,YAAY,GAAG,mBACxB,CACP;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC,SAAS,CAAC,CAAC;oBACtB,CAAC;oBACD,SAAS,EAAE,4BAA4B;iBACxC;gBACD;oBACE,KAAK,EAAE,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,YAAG,SAAS,EAAC,aAAa,GAAG,kBACzB,CACP;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,EAAE,CAAC;oBACb,CAAC;oBACD,SAAS,EAAE,8BAA8B;iBAC1C;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wEAA4C;YACzD,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,oBAAoB;YAC9B,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,CACL,8BACE,YAAG,SAAS,EAAC,mBAAmB,GAAG,aAClC,CACJ;oBACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;iBAC9C;aACF;SACF;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,CACX,kGAAsE,CACvE;YACD,YAAY,EAAE,kCAAkC;YAChD,gBAAgB,EAAE,KAAK,IAAI,EAAE;gBAC3B,MAAM,cAAc,CAAC,2BAA2B,CAAC,CAAC;gBAClD,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;YACD,QAAQ,EAAE,aAAa;YACvB,cAAc,EAAE,MAAM;SACvB;QACD,WAAW,EAAE;YACX,WAAW,EAAE,iEAAqC;YAClD,YAAY,EAAE,eAAe;YAC7B,gBAAgB,EAAE,KAAK,IAAI,EAAE;gBAC3B,MAAM,cAAc,CAAC,gBAAgB,CAAC,CAAC;gBACvC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;YACD,QAAQ,EAAE,WAAW;YACrB,cAAc,EAAE,MAAM;SACvB;QACD,SAAS,EAAE;YACT,WAAW,EAAE,8EAAkD;YAC/D,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,CACL,8BACE,YAAG,SAAS,EAAC,aAAa,GAAG,oBAC5B,CACJ;oBACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;oBACzB,SAAS,EAAE,4BAA4B;iBACxC;aACF;SACF;QACD,eAAe,EAAE;YACf,KAAK,EAAE,kBAAkB;YACzB,WAAW,EACT,6DAA6D;YAC/D,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,CACL,8BACE,YAAG,SAAS,EAAC,aAAa,GAAG,oBAC5B,CACJ;oBACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;oBACzB,SAAS,EAAE,4BAA4B;iBACxC;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,6BAA6B;YAC1C,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,CACL,8BACE,YAAG,SAAS,EAAC,aAAa,GAAG,cAC5B,CACJ;oBACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;iBAC1B;aACF;SACF;KACF,CAAC;IAEF,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,259 @@
+import { TextField } from "./editor/fieldTypes";
+import { ItemDescriptor, Version } from "./editor/pageModel";
+export type Rendering = {
+    id: string;
+    name: string;
+    icon: string;
+};
+export type EditableDictionary = {
+    [key: string]: TextField;
+};
+export type ValidationResult = {
+    item: ItemDescriptor;
+    results: SingleValidatorResult[];
+};
+export type SingleValidatorResult = {
+    itemId: string;
+    itemName: string;
+    fieldId: string;
+    fieldName: string;
+    validator: string;
+    result: 0 | 1 | 2 | 3 | 4 | 5;
+    message: string;
+};
+export type FieldDescriptor = {
+    item: ItemDescriptor;
+    fieldId: string;
+    fieldName?: string;
+};
+export type LanguageVersions = {
+    languageCode: string;
+    countryCode: string;
+    name: string;
+    versions: number;
+    icon: string;
+};
+export type AiPrompt = {
+    title: string;
+    prompt: string;
+};
+export type EditData = {
+    loginUrl: string;
+    aiPrompts: AiPrompt[];
+};
+export type EditSession = {
+    sessionId: string;
+    url?: string;
+    user: User;
+    userAgent?: string;
+    page?: ItemDescriptor;
+    item?: ItemDescriptor;
+    fieldLock?: {
+        item: ItemDescriptor;
+        fieldId: string;
+    };
+    color: string;
+};
+export type EditOperation = {
+    type: "edit-field" | "remove-component" | "move-component" | "add-component" | "synchronize-components" | "link-component" | "duplicate-components" | "rename-item";
+    date: string;
+    id: string;
+    user?: User;
+    undone?: boolean;
+    sessionId?: string;
+    description: string;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    focus?: string;
+    mainItem: ItemDescriptor;
+};
+export type RenameItemOperation = EditOperation & {
+    type: "rename-item";
+    item: ItemDescriptor;
+    newName: string;
+    oldName?: string;
+};
+export type EditFieldOperation = EditOperation & {
+    type: "edit-field";
+    item: ItemDescriptor;
+    fieldName: string;
+    fieldId: string;
+    fieldType?: string;
+    value?: any;
+    oldValue?: any;
+};
+export type AddComponentOperation = EditOperation & {
+    type: "add-component";
+    componentTypeId: string;
+    placeholderKey: string;
+    placeholderIndex: number;
+    componentId?: string;
+};
+export type LinkComponentOperation = EditOperation & {
+    type: "link-component";
+    itemName?: string;
+    linkedComponentItem: ItemDescriptor;
+};
+export type MoveComponentOperation = EditOperation & {
+    type: "move-component";
+    placeholderKey: string;
+    placeholderIndex: number;
+    componentIds: string[];
+};
+export type DuplicateComponentsOperation = EditOperation & {
+    type: "duplicate-components";
+    componentIds: string[];
+    sourceComponentIds: string[];
+};
+export type RemoveComponentOperation = EditOperation & {
+    type: "remove-component";
+    componentIds: string[];
+};
+export type SynchronizeComponentsOperation = EditOperation & {
+    type: "synchronize-components";
+    placeholders: PlaceholderToSynchronize[];
+    delete: boolean;
+    itemsCreated?: ItemDescriptor[];
+};
+export type PlaceholderToSynchronize = {
+    name?: string;
+    item?: ItemDescriptor | null;
+};
+export type User = {
+    name: string;
+    displayName?: string;
+    ai: boolean;
+    email?: string;
+    isLimitedPreviewUser?: boolean;
+};
+export type HistoryEntry = {
+    name: string;
+    path: string;
+    id: string;
+    version: number;
+    hasLayout: boolean;
+    icon?: string;
+    templateName: string;
+    language: string;
+};
+export type FieldHistoryItem = {
+    user: string;
+    date: string;
+    ai: boolean;
+    value: unknown;
+    rawValue: string;
+    version: number;
+    undone: boolean;
+};
+export type Site = {
+    name: string;
+};
+export type ExecuteEditOptions = {
+    refresh: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+};
+export type Workbox = {
+    items: WorkboxItem[];
+};
+export type WorkboxItem = {
+    item: ItemDescriptor;
+    lockedBy: string;
+    canLock: boolean;
+    hasLock: boolean;
+    publishStatus: {
+        [target: string]: string;
+    };
+    workflowState: string;
+    isFinalState: boolean;
+    isPublishable: boolean;
+    isPublished: boolean;
+    path: string;
+    name: string;
+    workflowCommands: {
+        name: string;
+        id: string;
+    }[];
+};
+export type InsertOption = {
+    typeId: string;
+    name: string;
+    icon: string;
+    group?: string;
+    svg?: string;
+    isInvalid: boolean;
+    message?: string;
+    isHidden: any;
+    compatibleTemplates?: string[];
+};
+export type LanguagesAndVersions = {
+    languages: LanguageVersions[];
+    versions: Version[];
+};
+export type IndexStatus = {
+    name: string;
+    exists: boolean;
+    errors: Error[];
+    hasRebuildJob: boolean;
+    settingsItemId?: string;
+    rebuildJobItemId?: string;
+    serviceUrl?: string;
+    lastRebuildStartDateTime?: Date;
+    languages: {
+        [language: string]: {
+            lastUpdated: Date;
+            numberOfItems: number;
+            status: string;
+        };
+    };
+    canRebuild: boolean;
+    isRunning: boolean;
+    rebuildCount: number;
+    rebuildTokensCount: number;
+};
+export type Error = {
+    message: string;
+    details: string;
+};
+export type Comment = {
+    id: string;
+    isNew: boolean;
+    itemId: string;
+    itemName?: string;
+    mainItemId: string;
+    language: string;
+    version: number;
+    fieldId?: string;
+    fieldName?: string;
+    text?: string;
+    fieldValue?: string | null;
+    rangeStart?: number;
+    rangeEnd?: number;
+    author?: string;
+    authorDisplayName?: string;
+    created?: string;
+    isResolved?: boolean;
+    resolvedBy?: string;
+    resolvedDate?: string;
+    position: number;
+};
+export type Reviewer = {
+    name: string;
+    email: string;
+};
+export type Review = {
+    id: string;
+    reviewerName: string;
+    reviewerEmail: string;
+    itemId: string;
+    language: string;
+    version: number;
+    invitationSentDate?: string;
+    approvalDate?: string;
+    rejectedDate?: string;
+};
+export type SystemStatusMessage = {
+    message: string;
+    severity: "info" | "warning" | "error";
+};
+export type SystemStatus = {
+    messages: SystemStatusMessage[];
+};

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./dev-styles.css": "./dev.css"
   },
   "type": "module",
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "npx @tailwindcss/cli -i ./build.css -o ./dist/styles.css && copyfiles -u 0 \"images/**/*\" dist && tsc -p tsconfig.build.json",
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
@@ -18,21 +19,26 @@
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
+    "@tailwindcss/cli": "^4.0.17",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.9",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
+    "copyfiles": "^2.4.1",
     "eslint": "^9.22.0",
     "typescript": "5.8.2"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/postcss": "^4.0.14",
     "@types/lodash": "^4.17.16",
     "@uiw/react-md-editor": "^4.0.5",
     "@uiw/react-textarea-code-editor": "^1.5.24",
     "allotment": "^1.20.3",
     "axios": "^1.6.7",
-    "geist": "^1.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.486.0",
     "morphdom": "^2.7.4",
     "postcss": "^8.5.3",
     "primeicons": "^7.0.0",
@@ -44,8 +50,9 @@
     "react-json-view-lite": "^2.4.1",
     "react-quill-new": "^3.4.1",
     "react-uuid": "^2.0.0",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.1.0",
     "tailwindcss": "^4.0.14",
+    "tw-animate-css": "^1.2.5",
     "universal-cookie": "^8.0.0",
     "use-debounce": "^10.0.4"
   }

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        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:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 px-3 py-2 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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(
+        "cursor-pointer",
+        buttonVariants({ variant, size, className }),
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/editor/Titlebar.tsx

@@ -6,8 +6,8 @@ export function Titlebar() {
   if (!editContext?.view) return null;
 
   return (
-    <div className="bg-gradient-to-r from-gray-900 from-10% vigray-500 to-indigo-950 h-12 flex justify-between items-center z-1 min-h-12">
-      <div className="text-white flex gap-2 items-center relative pl-2 font-bold">
+    <div className="z-1 flex min-h-11 items-center justify-between bg-gradient-to-r from-gray-900 from-10% to-indigo-950">
+      <div className="relative flex items-center gap-2 pl-2 font-bold text-white">
         <a
           href="/sitecore/shell/sitecore/client/Applications/Launchpad"
           className="glow-text"

package/src/editor/client/EditorClient.tsx

@@ -38,8 +38,6 @@ import {
   validateItems,
 } from "../services/editService";
 
-import { GeistSans } from "geist/font/sans";
-
 import "primeicons/primeicons.css";
 import "primereact/resources/themes/md-light-indigo/theme.css";
 import "react-json-view-lite/dist/index.css";
@@ -1608,16 +1606,17 @@ export function EditorClient({
       showComments,
       setShowComments,
       addComment: async () => {
-        if (!currentItemDescriptor) return;
+        const descriptor = contentEditorItem?.descriptor;
+        if (!descriptor) return;
         const itemId =
           focusedField?.item.id ||
           (selection.length > 0 ? selection[0] : undefined) ||
-          currentItemDescriptor.id;
+          descriptor.id;
 
         if (!itemId) return;
 
-        const language = currentItemDescriptor.language;
-        const version = currentItemDescriptor.version;
+        const language = descriptor.language;
+        const version = descriptor.version;
 
         const getFieldName = async () => {
           if (!focusedField) return "";
@@ -1637,11 +1636,11 @@ export function EditorClient({
         const newComment = {
           id: uuid(),
           isNew: true,
-          itemId: focusedField?.item.id || currentItemDescriptor.id,
+          itemId: focusedField?.item.id || descriptor.id,
           itemName: await getItemName(),
           fieldId: focusedField?.fieldId,
           fieldName: await getFieldName(),
-          mainItemId: currentItemDescriptor.id,
+          mainItemId: descriptor.id,
           language,
           version,
           position: 0,
@@ -1749,7 +1748,7 @@ export function EditorClient({
   if (!currentView) return null;
 
   return (
-    <div className={`${GeistSans.className} editor h-full`}>
+    <div className={`editor h-full`}>
       <OperationsContextProvider value={operationsContext.context}>
         <ModifiedFieldsContextProvider value={modifiedFieldsContext}>
           <EditContextProvider value={editContext}>

package/src/editor/menubar/ActionsMenu.tsx

@@ -32,7 +32,7 @@ export function ActionsMenu() {
     <>
       <div
         id="actions-menu"
-        className="flex gap-2 items-center bg-blue-500 text-white px-4 h-12 hover:bg-blue-600 cursor-pointer ml-2"
+        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);
         }}

package/src/editor/menubar/Menu.tsx

@@ -18,7 +18,7 @@ export function Menu() {
   const getSubItems = (
     items:
       | (MenuItem | Command<any>)[]
-      | ((editContext: EditContextType) => (MenuItem | Command<any>)[])
+      | ((editContext: EditContextType) => (MenuItem | Command<any>)[]),
   ) => {
     if (typeof items === "function") items = items(editContext);
     return items.map((y) => {
@@ -66,7 +66,7 @@ export function Menu() {
   });
 
   const endContent = (
-    <div className="flex gap-3 items-center">
+    <div className="flex items-center gap-3">
       <PageViewerControls />
       <ItemLanguageVersion />
       <ApproveAndPublishButton />
@@ -77,7 +77,7 @@ export function Menu() {
     <Menubar
       model={menuItems}
       end={endContent}
-      className="p-0 text-sm rounded-none border-0 border-b bg-gray-50 shadow-bottom-soft z-10 min-h-12"
+      className="shadow-bottom-soft z-10 min-h-10 rounded-none border-0 border-b bg-gray-50 p-0 text-sm"
     ></Menubar>
   );
 }

package/src/editor/menubar/VersionSelector.tsx

@@ -39,11 +39,12 @@ export function VersionSelector({
   return (
     <>
       <div
-        className={`p-[7px] text-sm cursor-pointer flex items-center gap-3 ${
+        data-testid="version-selector"
+        className={`flex cursor-pointer items-center gap-3 p-[7px] text-sm ${
           darkMode
             ? "text-gray-500 hover:bg-gray-200"
             : "text-gray-200 hover:bg-gray-500"
-        } rounded-md a`}
+        } a rounded-md`}
         onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
       >
         <div className="flex gap-2">{getVersionLabel()}</div>
@@ -61,16 +62,14 @@ export function VersionSelector({
         </div>
       </div>
       <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="max-h-[50vh] min-w-20 flex flex-col">
+        <div className="flex max-h-[50vh] min-w-20 flex-col">
           <div className="flex-1 overflow-auto">
             <div className="flex flex-col text-sm">
-              {versions.length === 0 && (
-                <div className="p-2">No versions</div>
-              )}
+              {versions.length === 0 && <div className="p-2">No versions</div>}
               {versions.length > 0 && (
                 <div
                   key="latest"
-                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
                   onClick={() => {
                     onVersionSelected(0);
                     overlaypanel.current?.hide();
@@ -82,7 +81,7 @@ export function VersionSelector({
               {versions.map((x) => (
                 <div
                   key={x.version}
-                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
                   onClick={() => {
                     onVersionSelected(x.version);
                     overlaypanel.current?.hide();
@@ -98,8 +97,8 @@ export function VersionSelector({
           </div>
         </div>
         {!readOnly && (
-          <div className="border-t p-2 flex flex-col">
-            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+          <div className="flex flex-col border-t p-2">
+            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
               <ArrowDownIcon /> Actions
             </div>
             <div className="flex gap-2">