@alpaca-editor/core 1.0.3955 → 1.0.3959

package/src/editor/ui/Icons.tsx

@@ -23,6 +23,7 @@ export function EditIcon({ className }: { className?: string }) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
+      strokeWidth={1}
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
@@ -407,14 +408,41 @@ export function RotateDeviceIcon({ className }: { className?: string }) {
 export function CompareIcon({ className }: { className?: string }) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      stroke="currentColor"
-      fill="currentColor"
     >
-      <path d="M2 4h9v1H3v15h8v1H2zm10 19h1V2h-1zM8.283 10.283l-.566-.566L4.934 12.5l2.783 2.783.566-.566L6.566 13H11v-1H6.566zM14 12h4.08l-1.54-1.54.92-.92 2.96 2.96-2.96 2.96-.92-.92L18.08 13H14v8h9V4h-9z" />
-      <path fill="none" d="M0 0h24v24H0z" />
+      <rect
+        x="1"
+        y="0.5"
+        width="10"
+        height="17"
+        rx="1"
+        stroke="currentColor"
+        strokeWidth="1"
+      />
+      <path
+        d="M11 2.5L18 2.5C18.5523 2.5 19 2.94772 19 3.5L19 18.5C19 19.0523 18.5523 19.5 18 19.5L10 19.5C9.44772 19.5 9 19.0523 9 18.5L9 17.5"
+        stroke="currentColor"
+        strokeWidth="1"
+      />
+      <path
+        d="M1 9H8M8 9L5.375 6.5M8 9L5.375 11.5"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 11L12 11M12 11L14.625 13.5M12 11L14.625 8.5"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
@@ -690,20 +718,137 @@ export function Logo({ className }: { className?: string }) {
 export function MagicEditIcon() {
   return (
     <svg
-      width="21"
-      height="17"
-      viewBox="0 0 21 17"
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
       fill="none"
+      strokeWidth={1}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M20.4141 5.70117C20.7921 5.32317 21.0001 4.82117 21.0001 4.28717C21.0001 3.75317 20.7921 3.25117 20.4141 2.87317L18.8281 1.28717C18.4501 0.909172 17.9481 0.701172 17.4141 0.701172C16.8801 0.701172 16.3781 0.909172 16.0011 1.28617L5.36914 11.8852V16.3002H9.78214L20.4141 5.70117ZM7.36914 14.3002V12.7152L14.4091 5.69717L15.9951 7.28317L8.95614 14.3002H7.36914Z"
+        d="M9.49999 13.915H14M5 13.915H5.83727C6.08186 13.915 6.20416 13.915 6.31925 13.886C6.42128 13.8602 6.51883 13.8178 6.6083 13.7601C6.70922 13.6951 6.79569 13.6042 6.96865 13.4224L13.25 6.81862C13.6642 6.38315 13.6642 5.67711 13.25 5.24164C12.8358 4.80617 12.1642 4.80617 11.75 5.24164L5.46863 11.8454C5.29568 12.0272 5.2092 12.1181 5.14736 12.2242C5.09253 12.3183 5.05213 12.4208 5.02763 12.5281C5 12.6491 5 12.7777 5 13.0348V13.915Z"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.00263 1.58197C5.09983 1.55818 5.18914 1.5344 5.27846 1.51061C5.38616 1.48153 5.4965 1.45774 5.60158 1.42074C6.00876 1.26744 6.2662 0.976686 6.37653 0.556422C6.41594 0.403118 6.45534 0.249814 6.49475 0.0991534C6.49475 0.093867 6.49475 0.0912238 6.50263 0.0859375C6.51051 0.112369 6.51576 0.138801 6.52364 0.165233C6.56567 0.326466 6.59982 0.4877 6.65236 0.64629C6.79422 1.0692 7.08581 1.34144 7.51401 1.46039C7.66637 1.50268 7.82137 1.53968 7.97373 1.58197C7.98161 1.58197 7.98687 1.58462 8 1.5899C7.94221 1.60576 7.88967 1.61898 7.8345 1.63219C7.69264 1.67184 7.54816 1.70092 7.40893 1.74849C7.00438 1.89387 6.74431 2.18197 6.62872 2.59959C6.58406 2.76083 6.54466 2.92206 6.49737 3.08594C6.49737 3.07801 6.49212 3.07008 6.48949 3.06215C6.44746 2.89827 6.41068 2.7344 6.36077 2.57316C6.22679 2.12647 5.93257 1.83836 5.48336 1.71413C5.331 1.67184 5.17863 1.63484 5.02627 1.59519C5.01839 1.59519 5.01313 1.59255 5 1.58726L5.00263 1.58197Z"
+        fill="#111111"
+      />
+      <path
+        d="M0 4.58209C0.224654 4.52309 0.43399 4.46923 0.643326 4.4128C0.896061 4.34354 1.1539 4.29224 1.39898 4.20246C2.34865 3.84849 2.95113 3.16875 3.21152 2.18634C3.30598 1.8298 3.39788 1.47326 3.48979 1.11672C3.49234 1.10646 3.49489 1.0962 3.50766 1.08594C3.52298 1.1475 3.54085 1.20906 3.55616 1.26806C3.65317 1.64255 3.73231 2.02218 3.85485 2.38898C4.18673 3.37909 4.86579 4.01009 5.86652 4.28711C6.22392 4.38458 6.58388 4.47436 6.94128 4.56926C6.9566 4.57439 6.97192 4.57696 7 4.58722C6.86214 4.62313 6.73961 4.65391 6.61452 4.68726C6.28264 4.77703 5.94311 4.84372 5.62144 4.96172C4.67433 5.30287 4.06929 5.97491 3.80124 6.94962C3.69657 7.32668 3.60467 7.70375 3.49745 8.08594C3.49234 8.06798 3.48724 8.05003 3.48213 8.02951C3.38257 7.64732 3.29832 7.26256 3.18344 6.8855C2.86944 5.84153 2.18016 5.17205 1.13348 4.8822C0.778629 4.78473 0.421225 4.69495 0.063822 4.60261C0.0485047 4.59748 0.0331875 4.59491 0 4.58465L0 4.58209Z"
+        fill="#111111"
+      />
+    </svg>
+  );
+}
+
+export function DashboardIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="32"
+        height="32"
+        rx="4"
+        fill="url(#paint0_linear_2065_8293)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5332 17.2568C13.7982 17.2831 14.0499 17.3868 14.2559 17.5557L14.3545 17.6455L14.4443 17.7441C14.6412 17.9843 14.7499 18.2864 14.75 18.5996V24.4004L14.7432 24.5332C14.7125 24.8423 14.5761 25.1329 14.3545 25.3545C14.1329 25.5761 13.8423 25.7125 13.5332 25.7432L13.4004 25.75H7.59961C7.24171 25.7499 6.89859 25.6076 6.64551 25.3545C6.39243 25.1014 6.2501 24.7583 6.25 24.4004V18.5996C6.2501 18.2417 6.39243 17.8986 6.64551 17.6455L6.74414 17.5557C6.98429 17.3588 7.2864 17.2501 7.59961 17.25H13.4004L13.5332 17.2568ZM7.75 24.25H13.25V18.75H7.75V24.25Z"
         fill="white"
       />
       <path
-        d="M0.376146 4.6906C0.63534 4.62716 0.873518 4.56373 1.1117 4.50029C1.39891 4.42276 1.69313 4.35932 1.97334 4.26064C3.05916 3.85183 3.74567 3.0765 4.03989 1.9558C4.14497 1.54699 4.25005 1.13818 4.35513 0.736414C4.35513 0.722317 4.35513 0.715269 4.37615 0.701172C4.39716 0.771656 4.41117 0.842141 4.43219 0.912625C4.54427 1.34258 4.63534 1.77254 4.77545 2.19544C5.15373 3.3232 5.93131 4.04919 7.07317 4.36637C7.47947 4.47915 7.89278 4.57782 8.29909 4.6906C8.3201 4.6906 8.33411 4.69765 8.36914 4.71174C8.21502 4.75403 8.07492 4.78928 7.92781 4.82452C7.54953 4.93025 7.16424 5.00778 6.79296 5.13465C5.71415 5.52232 5.02063 6.2906 4.7124 7.40426C4.59331 7.83421 4.48823 8.26417 4.36214 8.70117C4.36214 8.68003 4.34813 8.65888 4.34112 8.63774C4.22904 8.20073 4.13096 7.76373 3.99786 7.33377C3.64059 6.14258 2.85601 5.3743 1.65811 5.04302C1.2518 4.93025 0.845498 4.83157 0.439193 4.72584C0.418178 4.72584 0.404167 4.71879 0.369141 4.7047L0.376146 4.6906Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.5332 17.2568C24.7982 17.2831 25.0499 17.3868 25.2559 17.5557L25.3545 17.6455L25.4443 17.7441C25.6412 17.9843 25.7499 18.2864 25.75 18.5996V24.4004L25.7432 24.5332C25.7125 24.8423 25.5761 25.1329 25.3545 25.3545C25.1329 25.5761 24.8423 25.7125 24.5332 25.7432L24.4004 25.75H18.5996C18.2417 25.7499 17.8986 25.6076 17.6455 25.3545C17.4239 25.1329 17.2875 24.8423 17.2568 24.5332L17.25 24.4004V18.5996C17.2501 18.2417 17.3924 17.8986 17.6455 17.6455L17.7441 17.5557C17.9843 17.3588 18.2864 17.2501 18.5996 17.25H24.4004L24.5332 17.2568ZM18.75 24.25H24.25V18.75H18.75V24.25Z"
         fill="white"
       />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5332 6.25684C13.7982 6.28311 14.0499 6.38684 14.2559 6.55566L14.3545 6.64551L14.4443 6.74414C14.6412 6.98429 14.7499 7.2864 14.75 7.59961V13.4004L14.7432 13.5332C14.7125 13.8423 14.5761 14.1329 14.3545 14.3545C14.1014 14.6076 13.7583 14.7499 13.4004 14.75H7.59961C7.24171 14.7499 6.89859 14.6076 6.64551 14.3545C6.39243 14.1014 6.2501 13.7583 6.25 13.4004V7.59961C6.2501 7.24171 6.39243 6.89859 6.64551 6.64551L6.74414 6.55566C6.98429 6.35884 7.2864 6.25009 7.59961 6.25H13.4004L13.5332 6.25684ZM7.75 13.25H13.25V7.75H7.75V13.25Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.5332 6.25684C24.7982 6.28311 25.0499 6.38684 25.2559 6.55566L25.3545 6.64551L25.4443 6.74414C25.6412 6.98429 25.7499 7.2864 25.75 7.59961V13.4004L25.7432 13.5332C25.7125 13.8423 25.5761 14.1329 25.3545 14.3545C25.1014 14.6076 24.7583 14.7499 24.4004 14.75H18.5996C18.2417 14.7499 17.8986 14.6076 17.6455 14.3545C17.4239 14.1329 17.2875 13.8423 17.2568 13.5332L17.25 13.4004V7.59961C17.2501 7.24171 17.3924 6.89859 17.6455 6.64551L17.7441 6.55566C17.9843 6.35884 18.2864 6.25009 18.5996 6.25H24.4004L24.5332 6.25684ZM18.75 13.25H24.25V7.75H18.75V13.25Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function VerticalDotsIcon() {
+  return (
+    <svg
+      width="4"
+      height="12"
+      viewBox="0 0 4 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      strokeWidth={1}
+    >
+      <path
+        d="M2.0013 3.33332C2.73464 3.33332 3.33464 2.73332 3.33464 1.99999C3.33464 1.26666 2.73464 0.666656 2.0013 0.666656C1.26797 0.666656 0.667969 1.26666 0.667969 1.99999C0.667969 2.73332 1.26797 3.33332 2.0013 3.33332ZM2.0013 4.66666C1.26797 4.66666 0.667969 5.26666 0.667969 5.99999C0.667969 6.73332 1.26797 7.33332 2.0013 7.33332C2.73464 7.33332 3.33464 6.73332 3.33464 5.99999C3.33464 5.26666 2.73464 4.66666 2.0013 4.66666ZM2.0013 8.66666C1.26797 8.66666 0.667969 9.26666 0.667969 9.99999C0.667969 10.7333 1.26797 11.3333 2.0013 11.3333C2.73464 11.3333 3.33464 10.7333 3.33464 9.99999C3.33464 9.26666 2.73464 8.66666 2.0013 8.66666Z"
+        fill="#111111"
+      />
+    </svg>
+  );
+}
+
+export function MessagesIcon() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 14L5.92474 17.1137C5.49579 17.548 5.28131 17.7652 5.09695 17.7805C4.93701 17.7938 4.78042 17.7295 4.67596 17.6076C4.55556 17.4672 4.55556 17.162 4.55556 16.5515V14.9916C4.55556 14.444 4.10707 14.0477 3.5652 13.9683V13.9683C2.25374 13.7762 1.22378 12.7463 1.03168 11.4348C1 11.2186 1 10.9605 1 10.4444V5.8C1 4.11984 1 3.27976 1.32698 2.63803C1.6146 2.07354 2.07354 1.6146 2.63803 1.32698C3.27976 1 4.11984 1 5.8 1H13.2C14.8802 1 15.7202 1 16.362 1.32698C16.9265 1.6146 17.3854 2.07354 17.673 2.63803C18 3.27976 18 4.11984 18 5.8V10M18 21L15.8236 19.4869C15.5177 19.2742 15.3647 19.1678 15.1982 19.0924C15.0504 19.0255 14.8951 18.9768 14.7356 18.9474C14.5558 18.9143 14.3695 18.9143 13.9969 18.9143H12.2C11.0799 18.9143 10.5198 18.9143 10.092 18.6963C9.71569 18.5046 9.40973 18.1986 9.21799 17.8223C9 17.3944 9 16.8344 9 15.7143V13.2C9 12.0799 9 11.5198 9.21799 11.092C9.40973 10.7157 9.71569 10.4097 10.092 10.218C10.5198 10 11.0799 10 12.2 10H17.8C18.9201 10 19.4802 10 19.908 10.218C20.2843 10.4097 20.5903 10.7157 20.782 11.092C21 11.5198 21 12.0799 21 13.2V15.9143C21 16.8462 21 17.3121 20.8478 17.6797C20.6448 18.1697 20.2554 18.5591 19.7654 18.762C19.3978 18.9143 18.9319 18.9143 18 18.9143V21Z"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ViewToggleIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="20.5"
+        y="18.5"
+        width="17"
+        height="12"
+        rx="1.5"
+        transform="rotate(-180 20.5 18.5)"
+        stroke="#111111"
+      />
+      <rect
+        x="8"
+        y="18"
+        width="1"
+        height="11"
+        transform="rotate(-180 8 18)"
+        fill="#111111"
+      />
     </svg>
   );
 }

package/src/editor/ui/Section.tsx

@@ -29,7 +29,7 @@ export function Section({
           )}
         ></i>
       </div>
-      {open && <div className="bg-gray-50 px-2 pt-4 pb-6">{children}</div>}
+      {open && <div className="px-2 pt-4 pb-6">{children}</div>}
     </div>
   );
 }

package/src/editor/ui/SimpleIconButton.tsx

@@ -1,3 +1,9 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
 import { classNames } from "primereact/utils";
 import { MouseEventHandler } from "react";
 
@@ -10,7 +16,6 @@ export function SimpleIconButton({
   size,
   id,
   selected,
-  dark = false,
 }: {
   onClick: MouseEventHandler;
   className?: string;
@@ -20,35 +25,32 @@ export function SimpleIconButton({
   id?: string;
   size?: "large" | "small";
   selected?: boolean;
-  dark?: boolean;
 }) {
-  const color = disabled
-    ? "text-gray-300"
-    : dark
-      ? "text-gray-400"
-      : "text-gray-600";
+  const color = disabled ? "text-gray-300" : "text-dark";
 
   return (
-    <button
-      id={id}
-      disabled={disabled}
-      className={classNames(
-        typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]",
-        "rounded-full",
-        color,
-        disabled
-          ? "cursor-none"
-          : "cursor-pointer hover:bg-gray-200 hover:text-gray-600",
-        className,
-        size === "large" ? "text-lg" : "text-xs",
-        selected ? "bg-gray-200 text-gray-600" : "",
-      )}
-      onClick={(ev) => {
-        if (!disabled) onClick(ev);
-      }}
-      title={label}
-    >
-      {typeof icon !== "string" && icon}
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          id={id}
+          disabled={disabled}
+          className={classNames(
+            typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]",
+            "rounded-full",
+            color,
+            disabled ? "cursor-none" : "hover:bg-gray-5 cursor-pointer",
+            className,
+            size === "large" ? "text-lg" : "text-xs",
+            selected ? "bg-theme-secondary-light text-theme-secondary" : "",
+          )}
+          onClick={(ev) => {
+            if (!disabled) onClick(ev);
+          }}
+        >
+          {typeof icon !== "string" && icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
   );
 }

package/src/editor/ui/SimpleTabs.tsx

@@ -31,19 +31,19 @@ export function SimpleTabs({
 
   return (
     <>
-      <div className={twMerge("flex gap-4 pb-2", className)}>
+      <div className={twMerge("flex gap-4", className)}>
         {tabs.map((tab, index) => (
           <button
             id={tab.id}
             className={twMerge(
-              "flex cursor-pointer items-center gap-2",
+              "flex cursor-pointer items-center gap-2 px-6 pb-2",
               activeTab === index ? "active-tab" : "",
             )}
             key={tab.id}
             data-testid={tab.testId}
             onClick={() => setActiveTab(index)}
             style={{
-              fontWeight: index === activeTab ? "bold" : "normal",
+              fontWeight: index === activeTab ? "medium" : "normal",
               borderBottom: index === activeTab ? "3px solid black" : "none",
               marginBottom: index === activeTab ? "0" : "3px",
               color: index === activeTab ? "black" : "gray",

package/src/editor/ui/SimpleToolbar.tsx

@@ -1,6 +1,6 @@
 export function SimpleToolbar({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex gap-2 p-2 items-center bg-gray-50 rounded-md border-b border-gray-200 text-gray-500 text-sm">
+    <div className="items-centerrounded-md border-gray-3 flex gap-2 border-b p-2 text-sm text-gray-500">
       {children}
     </div>
   );

package/src/editor/ui/Splitter.tsx

@@ -7,6 +7,7 @@ export type SplitterPanel = {
   content: React.ReactNode;
   collapsible?: boolean;
   hidden?: boolean;
+  className?: string;
 };
 
 interface SplitterProps {
@@ -15,6 +16,9 @@ interface SplitterProps {
   expandLabel?: React.ReactNode;
   growablePanelIndex?: number; // Index of the panel that grows/shrinks
   direction?: "horizontal" | "vertical"; // New prop for direction
+  className?: string;
+  splitterClassName?: string;
+  expandButtonClassName?: string;
 }
 
 type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
@@ -25,6 +29,9 @@ export const Splitter: React.FC<SplitterProps> = ({
   localStorageKey = "splitter-sizes",
   expandLabel = "Expand",
   direction = "horizontal", // Default to horizontal for backward compatibility
+  className,
+  splitterClassName,
+  expandButtonClassName,
 }) => {
   const totalPanels = panels.length;
 
@@ -205,7 +212,7 @@ export const Splitter: React.FC<SplitterProps> = ({
     return (
       <div
         onClick={!isResizing ? toggleLastPanelCollapse : undefined}
-        className="flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white"
+        className={`flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white ${expandButtonClassName || ""}`}
         style={{
           writingMode: isHorizontal ? "vertical-rl" : "horizontal-tb",
           userSelect: "none",
@@ -341,12 +348,12 @@ export const Splitter: React.FC<SplitterProps> = ({
       <div
         className={`relative flex ${
           isHorizontal
-            ? "h-full w-[12px] cursor-ew-resize md:w-[5px]"
-            : "h-[12px] w-full cursor-ns-resize md:h-[12px]"
-        } shrink-0 items-center justify-center bg-gray-300 select-none hover:bg-gray-400`}
+            ? "h-full w-[12px] cursor-ew-resize md:w-[4px]"
+            : "h-[12px] w-full cursor-ns-resize md:h-[4px]"
+        } bg-gray-4 hover:bg-gray-3 shrink-0 items-center justify-center select-none ${splitterClassName || ""}`}
         style={{
           touchAction: "none",
-          minHeight: isHorizontal ? undefined : "12px",
+
           minWidth: isHorizontal ? "4px" : undefined,
           boxSizing: "border-box",
           userSelect: "none",
@@ -428,7 +435,7 @@ export const Splitter: React.FC<SplitterProps> = ({
 
   return (
     <div
-      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-full overflow-hidden`}
+      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-full overflow-hidden ${className || ""}`}
       ref={splitterRef}
     >
       {panels.map((panel, index) => (
@@ -437,7 +444,7 @@ export const Splitter: React.FC<SplitterProps> = ({
             ref={(el) => {
               panelRefs.current[index] = el;
             }}
-            className="relative"
+            className={`relative ${panel.className || ""}`}
             style={{
               flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(
                 index,

package/src/editor/views/CompareView.tsx

@@ -8,7 +8,7 @@ import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { SingleEditView } from "./SingleEditView";
 import { getLanguagesAndVersions } from "../services/contentService";
-import { Allotment } from "allotment";
+import { Splitter, SplitterPanel } from "../ui/Splitter";
 import { ItemEditor } from "./ItemEditor";
 
 export function CompareView() {
@@ -115,11 +115,10 @@ export function CompareView() {
   }
 
   const originalSelector = (
-    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-gray-100 p-1 text-sm text-gray-600">
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
         showAllLanguagesSwitch={false}
-        darkMode
         onLanguageSelected={(language) => {
           if (!editContext.contentEditorItem) return;
           editContext.loadItem({
@@ -154,7 +153,6 @@ export function CompareView() {
       <LanguageSelector
         selectedLanguage={compareTo?.language}
         showAllLanguagesSwitch={false}
-        darkMode
         onLanguageSelected={(language) => {
           if (!compareTo?.id) return;
           updateCompareTo({
@@ -205,9 +203,11 @@ export function CompareView() {
       </div>
     );
 
-  return (
-    <Allotment className="flex h-full w-full">
-      <Allotment.Pane>
+  const panels: SplitterPanel[] = [
+    {
+      defaultSize: "auto",
+      name: "original",
+      content: (
         <div className="flex h-full w-full flex-col items-stretch">
           {originalSelector}
           <SingleEditView
@@ -218,8 +218,12 @@ export function CompareView() {
             itemDescriptor={editContext.contentEditorItem?.descriptor}
           />
         </div>
-      </Allotment.Pane>
-      <Allotment.Pane>
+      ),
+    },
+    {
+      defaultSize: "auto",
+      name: "compareTo",
+      content: (
         <div className="flex h-full w-full flex-col items-stretch">
           {compareToSelector}
           {compareTo?.language && (
@@ -239,7 +243,15 @@ export function CompareView() {
             </div>
           )}
         </div>
-      </Allotment.Pane>
-    </Allotment>
+      ),
+    },
+  ];
+
+  return (
+    <Splitter
+      panels={panels}
+      localStorageKey="compare-view-splitter"
+      className="flex h-full w-full"
+    />
   );
 }

package/src/editor/views/SingleEditView.tsx

@@ -12,11 +12,13 @@ export function SingleEditView({
   itemDescriptor,
   compareView,
   name,
+  className,
 }: {
   pageViewContext: PageViewContext;
   itemDescriptor?: ItemDescriptor;
   compareView: boolean;
   name: string;
+  className?: string;
 }) {
   const editContext = useEditContext();
   const [item, setItem] = useState<FullItem | undefined>(undefined);
@@ -52,6 +54,7 @@ export function SingleEditView({
       compareView={compareView}
       name={name}
       followEditsDefault={true}
+      className={className}
     />
   );
 }

package/src/page-wizard/steps/ContentStep.tsx

@@ -676,7 +676,6 @@ export function ContentStep({
                     <div className="w-fit">
                       <LanguageSelector
                         selectedLanguage={language}
-                        darkMode={true}
                         disabled={isGenerating}
                         onLanguageSelected={(language) =>
                           setLanguage(language.languageCode)

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3955";
-export const buildDate = "2025-06-19 14:51:54";
+export const version = "1.0.3959";
+export const buildDate = "2025-06-22 17:51:55";

package/src/splash-screen/NewPage.tsx

@@ -167,21 +167,26 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
             Open Existing
           </ActionButton>
         </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex flex-1 flex-col md:flex-row">
-        <div className="tour-pick-location flex-1">
-          <Card
+      </div> 
+      <div className="flex flex-1 flex-col md:flex-row">        <div className={`tour-pick-location w-full md:w-1/2 ${
+          selectedItem ? 'h-full md:h-full' : ''
+        }`}><Card
             icon={<i className="pi pi-map-marker text-sm"></i>}
             title="Pick Location"
             description="Select where to create your new page"
             noPadding
-            className="h-full"
+            className={selectedItem ? 'h-full' : 'h-auto'}
           >
-            <div className="h-full px-4 pb-4 md:px-6">
-              <div className="relative h-full">
-                <div className="absolute inset-0 overflow-auto">
+            <div className={`px-4 pb-4 md:px-6 ${
+              selectedItem ? 'h-full' : ''
+            }`}>
+              <div className={`relative ${
+                selectedItem ? 'h-full' : ''
+              }`}>                <div className={`overflow-auto ${
+                  selectedItem 
+                    ? 'absolute inset-0' 
+                    : 'min-h-[300px] md:min-h-[400px]'
+                }`}>
                   <ScrollingContentTree
                     selectedItemId={selectedItem?.id || selectedItemId}
                     onSelectionChange={(selection) => {
@@ -200,7 +205,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
 
         {/* Second card - only visible when location is selected */}
         {selectedItem && (
-          <div className="flex flex-1 flex-col">
+          <div className="flex w-full flex-col h-auto md:w-1/2">
             <Card
               icon={<Palette className="h-4 w-4" />}
               title="Choose Template or Wizard"
@@ -223,10 +228,10 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                           ? "bg-theme-secondary-light border-theme-secondary"
                           : "bg-white",
                       )}
-                    >
-                      {
+                    >                      {
                         <img
                           src={getAbsoluteIconUrl(option.icon)}
+                          alt={option.name}
                           width="32"
                           height="32"
                         ></img>

package/src/splash-screen/RecentPages.tsx

@@ -7,26 +7,20 @@ import { ItemDescriptor, FullItem } from "../editor/pageModel";
 import { Card } from "../components/ui/card";
 
 export function RecentPages() {
-  const savedHistory =
-    typeof window !== "undefined"
-      ? localStorage.getItem("editor.browseHistory")
-      : null;
-
   const editContext = useEditContext();
-  const recentPages: HistoryEntry[] = savedHistory
-    ? JSON.parse(savedHistory)
-    : [];
 
   const [history, setHistory] = useState<FullItem[]>();
   const [selectedPage, setSelectedPage] = useState<HistoryEntry | null>(null);
 
+  const recentPages = editContext?.browseHistory || [];
+
   useEffect(() => {
     const fetchItems = async () => {
       const pages = await editContext?.itemsRepository.getItems(recentPages);
       setHistory(pages);
     };
     fetchItems();
-  }, [editContext?.itemsRepository]);
+  }, [editContext?.itemsRepository, recentPages]);
 
   const handlePageSelect = (page: HistoryEntry) => {
     setSelectedPage(page);
@@ -60,7 +54,7 @@ export function RecentPages() {
   return (
     <Card
       icon={<i className="pi pi-history text-sm"></i>}
-      title="Recent Pages"
+      title="Recent Pages/Items"
       description="Quick access to your recently viewed pages"
       className="flex h-full flex-col"
     >