@alpaca-editor/core 1.0.3897 → 1.0.3899

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

@@ -4,11 +4,14 @@ import { useEditContext } from "../../editor/client/editContext";
 import { executePrompt } from "../../editor/services/aiService";
 import { createWizardAiContext } from "../service";
 import { classNames } from "primereact/utils";
-import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
 import { InputTextarea } from "primereact/inputtextarea";
 import { StepComponentProps } from "../../config/types";
 import { ActionButton } from "../../components/ActionButton";
 import Generate from "./Generate";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, CheckSquare } from "lucide-react";
+
 type Option = {
   title: string;
   description: string;
@@ -174,82 +177,95 @@ export function SelectStep({
     );
   }
 
-  const optionsPanel: SplitterPanel = {
-    name: "options",
-    defaultSize: "auto",
-    content: (
-      <div className="h-full p-4">
-        {loading && (
-          <div className="flex h-full items-center justify-center">
-            <Generate title="Generating options..." />
+  return (
+    <div className="flex h-full">
+      <WizardBox
+        title="Configuration"
+        icon={<Settings />}
+        description="Configure instructions and regenerate options"
+        className="w-96"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-y-auto pr-6">
+              <h3 className="text-sm font-bold">Instructions</h3>
+              <InputTextarea
+                className="h-48 w-full text-sm"
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Enter instructions for the options"
+              />
+            </div>
           </div>
-        )}
-        {!loading && (
-          <div>
-            {options.length === 0 ? (
-              <div className="p-4 text-gray-500">
-                No options available. Try refreshing the page.
-              </div>
-            ) : (
-              options.map((option, index) => {
-                const isSelected = selectedOptions.includes(option.id);
-
-                return (
-                  <div
-                    key={option.id}
-                    className={classNames(
-                      "mb-3 flex items-center rounded border-2 bg-white p-3",
-                      index % 2 === 0
-                        ? "animate-fadeRight"
-                        : "animate-fadeLeft",
-                      isSelected
-                        ? "text-canvas-pink border-canvas-pink"
-                        : "border-gray-300 text-gray-600",
-                    )}
-                    onClick={() => handleOptionSelect(option)}
-                  >
-                    <div className="flex flex-1 cursor-pointer flex-col">
-                      <div className="font-medium">{option.title}</div>
-                      <div className="text-xs text-gray-600">
-                        {option.description}
-                      </div>
-                    </div>
-                    {isSelected && (
-                      <div className="text-canvas-pink ml-2">✓</div>
-                    )}
-                  </div>
-                );
-              })
-            )}
+          <div className="py-2">
+            <ActionButton
+              onClick={generateOptions}
+              isLoading={loading}
+              disabled={loading}
+              loadingText="Thinking..."
+              className="w-full"
+            >
+              Regenerate Options
+            </ActionButton>
           </div>
-        )}
-      </div>
-    ),
-  };
+        </div>
+      </WizardBox>
+      <WizardBoxConnector className="mt-6" />
+      <WizardBox
+        title="Select Options"
+        icon={<CheckSquare />}
+        description="Choose from the generated options below"
+        className="flex-1"
+      >
+        <div className="h-full">
+          {loading && (
+            <div className="flex h-full items-center justify-center">
+              <Generate title="Generating options..." />
+            </div>
+          )}
+          {!loading && (
+            <div>
+              {options.length === 0 ? (
+                <div className="p-4 text-gray-500">
+                  No options available. Try refreshing the page.
+                </div>
+              ) : (
+                options.map((option, index) => {
+                  const isSelected = selectedOptions.includes(option.id);
 
-  const settingsPanel: SplitterPanel = {
-    name: "settings",
-    defaultSize: 400,
-    content: (
-      <div className="flex flex-col gap-2 pr-6">
-        <h3 className="text-sm font-bold">Instructions</h3>
-        <InputTextarea
-          className="h-48 text-sm"
-          value={instructions}
-          onChange={(e) => setInstructions(e.target.value)}
-          placeholder="Enter instructions for the options"
-        />
-        <ActionButton
-          onClick={generateOptions}
-          isLoading={loading}
-          disabled={loading}
-          loadingText="Thinking..."
-        >
-          Regenerate Options
-        </ActionButton>
-      </div>
-    ),
-  };
-
-  return <Splitter panels={[settingsPanel, optionsPanel]} />;
+                  return (
+                    <div
+                      key={option.id}
+                      className={classNames(
+                        "mb-3 flex items-center rounded border-2 bg-white p-3",
+                        index % 2 === 0
+                          ? "animate-fadeRight"
+                          : "animate-fadeLeft",
+                        isSelected
+                          ? "text-theme-secondary border-theme-secondary"
+                          : "border-gray-300 text-gray-600",
+                      )}
+                      onClick={() => handleOptionSelect(option)}
+                    >
+                      <div className="flex flex-1 cursor-pointer flex-col">
+                        <div className="font-medium">{option.title}</div>
+                        <div className="text-xs text-gray-600">
+                          {option.description}
+                        </div>
+                      </div>
+                      {isSelected && (
+                        <div className="bg-theme-secondary ml-2 flex h-6 w-6 items-center justify-center rounded-full text-white">
+                          ✓
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+        </div>
+      </WizardBox>
+    </div>
+  );
 }

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3897";
-export const buildDate = "2025-05-24 21:26:53";
+export const version = "1.0.3899";
+export const buildDate = "2025-05-26 01:54:10";

package/src/splash-screen/NewPage.tsx

@@ -20,6 +20,8 @@ import { ItemDescriptor } from "../editor/pageModel";
 import { useDebouncedCallback } from "use-debounce";
 import { getWizards } from "../page-wizard/service";
 import { Wizard } from "../page-wizard/PageWizard";
+import { Card } from "../components/ui/card";
+import { CardConnector } from "../components/ui/CardConnector";
 export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
   const [isValid, setIsValid] = useState<boolean>(false);
@@ -143,90 +145,115 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   };
 
   return (
-    <div className="flex h-full gap-3">
-      <div className="tour-pick-location flex w-1/2 flex-col">
-        <SectionHeadline>1. Pick Location</SectionHeadline>
-        <div className="relative flex-1">
-          <div className="absolute inset-0 overflow-auto">
-            <ScrollingContentTree
-              selectedItemId={selectedItem?.id || selectedItemId}
-              onSelectionChange={(selection) => {
-                const selected = selection[0] as ItemTreeNodeData;
-                if (selected) setSelectedItem(selected);
-              }}
-            />
+    <div className="flex h-full flex-col bg-gray-50 p-4 md:flex-row">
+      <div className="tour-pick-location flex-1">
+        <Card
+          icon={<i className="pi pi-map-marker text-sm"></i>}
+          title="Pick Location"
+          description="Select where to create your new page"
+          noPadding
+        >
+          <div className="relative h-full">
+            <div className="absolute inset-0 overflow-auto">
+              <ScrollingContentTree
+                selectedItemId={selectedItem?.id || selectedItemId}
+                onSelectionChange={(selection) => {
+                  const selected = selection[0] as ItemTreeNodeData;
+                  if (selected) setSelectedItem(selected);
+                }}
+              />
+            </div>
           </div>
-        </div>
+        </Card>
       </div>
-      <div className="w-1/2 border-l pl-7">
-        <SectionHeadline className="tour-choose-template">
-          2. Choose a Template or Wizard
-        </SectionHeadline>
-        <div className="mt-1 flex min-h-12 flex-wrap gap-3">
-          {!insertOptions?.length && (
-            <div>No page templates available here.</div>
-          )}
-          {insertOptionsAndWizards?.map((option) => (
-            <div
-              key={option.id}
-              onClick={() => setSelectedTemplate(option.id)}
-              className={classNames(
-                "mb-2 flex cursor-pointer flex-col items-center bg-gray-100 p-2 text-sm",
-                selectedTemplate === option.id
-                  ? "tour-selected-template bg-gray-200 outline outline-2 outline-offset-2 outline-gray-200"
-                  : "bg-gray-100",
-              )}
-            >
-              {
-                <img
-                  src={getAbsoluteIconUrl(option.icon)}
-                  width="32"
-                  height="32"
-                ></img>
-              }
-              {option.name}
-            </div>
-          ))}
+
+      {/* Card Connector - only visible when location is selected */}
+      {selectedItem && (
+        <div className="hidden items-start justify-center pt-10 md:flex">
+          <CardConnector />
         </div>
-        {selectedTemplate &&
-          wizards?.find((x) => x.id === selectedTemplate) && (
-            <div className="mt-4">
-              <Button
-                onClick={launchWizard}
-                label="Start Wizard"
-                id="launch-wizard-button"
-              />
-            </div>
-          )}
-        {selectedTemplate &&
-          insertOptions?.find((x) => x.id === selectedTemplate) && (
-            <>
-              <SectionHeadline>3. Name Your Page</SectionHeadline>
-
-              <InputText
-                className="w-full"
-                value={name}
-                id="new-page-name"
-                onChange={(e) => setName(e.target.value)}
-                onKeyDown={(ev) => {
-                  if (ev.key === "Enter" && isValid) handleOk();
-                }}
-                data-testid="new-page-name"
-              />
-              {validationMessage && (
-                <div className="mt-2 text-red-500">{validationMessage}</div>
-              )}
-              <div className="mt-4">
-                <Button
-                  onClick={handleOk}
-                  label="Create"
-                  disabled={!isValid}
-                  id="create-new-page-button"
-                />
+      )}
+
+      {/* Second card - only visible when location is selected */}
+      {selectedItem && (
+        <div className="flex-1">
+          <Card
+            icon={<i className="pi pi-palette text-sm"></i>}
+            title="Choose Template or Wizard"
+            description="Select a template or wizard to create your page"
+          >
+            <div className="tour-choose-template">
+              <div className="flex min-h-12 flex-wrap gap-3">
+                {!insertOptions?.length && (
+                  <div>No page templates available here.</div>
+                )}
+                {insertOptionsAndWizards?.map((option) => (
+                  <div
+                    key={option.id}
+                    onClick={() => setSelectedTemplate(option.id)}
+                    className={classNames(
+                      "mb-2 flex cursor-pointer flex-col items-center rounded bg-gray-100 p-2 text-sm",
+                      selectedTemplate === option.id
+                        ? "tour-selected-template bg-gray-200 outline outline-2 outline-offset-2 outline-gray-200"
+                        : "bg-gray-100",
+                    )}
+                  >
+                    {
+                      <img
+                        src={getAbsoluteIconUrl(option.icon)}
+                        width="32"
+                        height="32"
+                      ></img>
+                    }
+                    {option.name}
+                  </div>
+                ))}
               </div>
-            </>
-          )}
-      </div>
+              {selectedTemplate &&
+                wizards?.find((x) => x.id === selectedTemplate) && (
+                  <div className="mt-4">
+                    <Button
+                      onClick={launchWizard}
+                      label="Start Wizard"
+                      id="launch-wizard-button"
+                    />
+                  </div>
+                )}
+              {selectedTemplate &&
+                insertOptions?.find((x) => x.id === selectedTemplate) && (
+                  <div className="mt-6 border-t pt-4">
+                    <div className="mb-3 text-base font-bold text-neutral-800">
+                      Name Your Page
+                    </div>
+                    <InputText
+                      className="w-full"
+                      value={name}
+                      id="new-page-name"
+                      onChange={(e) => setName(e.target.value)}
+                      onKeyDown={(ev) => {
+                        if (ev.key === "Enter" && isValid) handleOk();
+                      }}
+                      data-testid="new-page-name"
+                    />
+                    {validationMessage && (
+                      <div className="mt-2 text-red-500">
+                        {validationMessage}
+                      </div>
+                    )}
+                    <div className="mt-4">
+                      <Button
+                        onClick={handleOk}
+                        label="Create"
+                        disabled={!isValid}
+                        id="create-new-page-button"
+                      />
+                    </div>
+                  </div>
+                )}
+            </div>
+          </Card>
+        </div>
+      )}
     </div>
   );
 }

package/src/splash-screen/SplashScreen.tsx

@@ -10,6 +10,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
 import { Spinner } from "../editor/ui/Spinner";
 import { ItemDescriptor } from "../editor/pageModel";
+import { Card } from "../components/ui/card";
 
 export function SplashScreen() {
   const savedHistory =
@@ -76,38 +77,53 @@ export function SplashScreen() {
   const tabs: Tab[] = [
     {
       content: (
-        <div className="flex flex-1 gap-4 text-sm">
-          <div className="relative w-2/3">
-            <ScrollingContentTree
-              selectedItemId={selectedPage?.id}
-              onSelectionChange={(selection) => {
-                const selectedItem = selection[0];
-                if (selectedItem) {
-                  loadItem(selectedItem);
-                }
-              }}
-            />
+        <div className="flex flex-1 flex-col gap-4 text-sm md:flex-row">
+          <div className="flex-1">
+            <Card
+              icon={<i className="pi pi-sitemap text-sm"></i>}
+              title="Browse Content"
+              description="Navigate through your content structure"
+              noPadding
+            >
+              <div className="relative h-full">
+                <ScrollingContentTree
+                  selectedItemId={selectedPage?.id}
+                  onSelectionChange={(selection) => {
+                    const selectedItem = selection[0];
+                    if (selectedItem) {
+                      loadItem(selectedItem);
+                    }
+                  }}
+                />
+              </div>
+            </Card>
           </div>
-          <div className="flex w-1/3 flex-col border-l pl-6">
-            <div className="mb-3 font-bold">Recent Pages</div>
-            <div className="relative flex-1">
-              <ul className="absolute inset-0 overflow-auto">
-                {history?.map((page, index) => (
-                  <li
-                    key={index}
-                    onMouseOver={() => setSelectedPage(page)}
-                    onClick={() => loadItem(page)}
-                    className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
-                  >
-                    {page.icon && (
-                      <img src={page.icon} width="16" height="16" />
-                    )}{" "}
-                    {page.name}{" "}
-                    <span className="text-gray-500">({page.language})</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
+          <div className="flex-1 md:pl-4">
+            <Card
+              icon={<i className="pi pi-history text-sm"></i>}
+              title="Recent Pages"
+              description="Quick access to your recently viewed pages"
+              noPadding
+            >
+              <div className="relative h-full">
+                <ul className="absolute inset-0 overflow-auto p-6 pt-0">
+                  {history?.map((page, index) => (
+                    <li
+                      key={index}
+                      onMouseOver={() => setSelectedPage(page)}
+                      onClick={() => loadItem(page)}
+                      className="flex cursor-pointer items-center gap-2 rounded p-2 text-xs hover:bg-gray-100"
+                    >
+                      {page.icon && (
+                        <img src={page.icon} width="16" height="16" />
+                      )}{" "}
+                      {page.name}{" "}
+                      <span className="text-gray-500">({page.language})</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Card>
           </div>
         </div>
       ),
@@ -128,7 +144,7 @@ export function SplashScreen() {
 
   return (
     <div className="flex h-full items-center justify-center bg-gray-100">
-      <div className="relative h-3/4 w-2/3 space-y-8 rounded-lg bg-white p-6 p-8 shadow-lg">
+      <div className="relative h-full w-full space-y-8 rounded-lg bg-white p-4 shadow-lg md:h-3/4 md:w-2/3 md:p-8">
         <div className="flex h-full flex-col">
           <div className="flex flex-1 flex-col">
             <SimpleTabs
@@ -147,7 +163,7 @@ export function SplashScreen() {
           </div>
         </div>
 
-        <div className="absolute top-0 right-0 p-2">
+        <div className="absolute top-0 right-0 hidden p-2 md:block">
           <SimpleIconButton
             icon="pi pi-times"
             onClick={() =>

package/styles.css

@@ -1,11 +1,49 @@
+/* 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";
+  --font-inter: "Inter";
   --color-canvas-red: #e32e52;
   --color-canvas-pink: #e32e52;
   --color-alpaca-blue: #209cfc;
   --color-alpaca-blue-light: #41aafd;
   --color-theme-secondary: #9650fb;
+  --color-theme-secondary-light: #f6eeff;
   --color-neutral-350: #b4b4b4;
   --text-2xs: 0.7rem;
   --text-3xs: 0.6rem;