@alpaca-editor/core 1.0.4134 → 1.0.4140

package/src/editor/sidebar/GraphQL.tsx

@@ -1,6 +1,6 @@
 import "@uiw/react-textarea-code-editor/dist.css";
 
-import { Splitter, SplitterPanel } from "primereact/splitter";
+import { Splitter } from "../ui/Splitter";
 import CodeEditor from "@uiw/react-textarea-code-editor";
 import { ActionButton } from "../../components/ActionButton";
 import { useEffect, useState } from "react";
@@ -218,129 +218,155 @@ export function GraphQL() {
   // (moved useEffect for context factory above to ensure hooks order remains stable)
 
   return (
-    <Splitter layout="vertical" style={{ height: "100%" }}>
-      <SplitterPanel size={50} className="relative">
-        <div className="absolute inset-0 flex flex-col overflow-hidden">
-          {aiGeneratedQuery && aiGeneratedQuery !== query && (
-            <div className="flex items-center gap-2 border-b border-yellow-200 bg-yellow-50 p-2 text-xs">
-              <span className="text-yellow-800">AI generated a new query</span>
-              <ActionButton
-                onClick={() => applyQueryToEditor(aiGeneratedQuery)}
-                className="p-1 text-xs"
-                variant="outline"
-              >
-                Apply
-              </ActionButton>
-              <ActionButton
-                onClick={() => setAiGeneratedQuery("")}
-                className="p-1"
-                variant="ghost"
-              >
-                ×
-              </ActionButton>
-            </div>
-          )}
-          <Splitter layout="horizontal" style={{ height: "100%" }}>
-            <SplitterPanel size={50} className="relative">
-              <div className="absolute inset-0 flex items-stretch">
-                <div className="relative min-w-0 flex-1">
-                  <div className="absolute inset-0 overflow-auto">
-                    <CodeEditor
-                      value={query}
-                      language="graphql"
-                      placeholder="Enter your GraphQL query here..."
-                      onChange={(evn: any) => setQuery(evn.target.value)}
-                      padding={15}
-                      style={{
-                        fontSize: 12,
-                        backgroundColor: "#f8f9fa",
-                        fontFamily:
-                          "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-                      }}
-                    />
+    <Splitter
+      direction="vertical"
+      className="h-full"
+      panels={[
+        {
+          name: "query",
+          defaultSize: 850,
+          className: "flex flex-col min-h-[500px]",
+          content: (
+            <div className="flex flex-1 flex-col overflow-hidden">
+              {aiGeneratedQuery && aiGeneratedQuery !== query && (
+                <div className="flex items-center gap-2 border-b border-yellow-200 bg-yellow-50 p-2 text-xs">
+                  <span className="text-yellow-800">
+                    AI generated a new query
+                  </span>
+                  <ActionButton
+                    onClick={() => applyQueryToEditor(aiGeneratedQuery)}
+                    className="p-1 text-xs"
+                    variant="outline"
+                  >
+                    Apply
+                  </ActionButton>
+                  <ActionButton
+                    onClick={() => setAiGeneratedQuery("")}
+                    className="p-1"
+                    variant="ghost"
+                  >
+                    ×
+                  </ActionButton>
+                </div>
+              )}
+              <div className="flex h-full flex-col">
+                {/* GraphQL Query Section */}
+                <div className="flex flex-1 flex-col border-b border-gray-300">
+                  <div className="border-b border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700">
+                    GraphQL Query
+                  </div>
+                  <div className="relative flex-1">
+                    <div className="absolute inset-0 overflow-auto">
+                      <CodeEditor
+                        value={query}
+                        language="graphql"
+                        placeholder="Enter your GraphQL query here..."
+                        onChange={(evn: any) => setQuery(evn.target.value)}
+                        padding={15}
+                        style={{
+                          fontSize: 12,
+                          backgroundColor: "#f8f9fa",
+                          fontFamily:
+                            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
-                <ActionButton
-                  onClick={refresh}
-                  disabled={showSpinner}
-                  className="h-full px-2"
-                  variant="outline"
-                >
-                  <RefreshCw strokeWidth={1} />
-                </ActionButton>
-              </div>
-            </SplitterPanel>
-            <SplitterPanel className="relative">
-              <div className="absolute inset-0 flex flex-col text-xs">
-                <div className="border-b border-gray-300 bg-gray-50 px-2 py-1 text-xs font-medium">
-                  JSON Result
+
+                {/* Run Button Section */}
+                <div className="flex items-center justify-center border-b border-gray-300 bg-gray-50 py-3">
+                  <ActionButton
+                    onClick={refresh}
+                    disabled={showSpinner}
+                    className="px-4 py-2"
+                    variant="outline"
+                  >
+                    <RefreshCw strokeWidth={1.5} className="mr-2 h-4 w-4" />
+                    Run
+                  </ActionButton>
                 </div>
-                <div className="flex-1 overflow-auto p-2">
-                  <div className="min-w-0 overflow-x-auto">
-                    <ObjectInspector data={graphqlResult} expandLevel={3} />
+
+                {/* JSON Result Section */}
+                <div className="flex flex-1 flex-col">
+                  <div className="border-b border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700">
+                    JSON Result
+                  </div>
+                  <div className="flex-1 overflow-auto p-2">
+                    <div className="min-w-0 overflow-x-auto">
+                      <ObjectInspector data={graphqlResult} expandLevel={3} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </SplitterPanel>
-          </Splitter>
-        </div>
-      </SplitterPanel>
-      <SplitterPanel className="relative">
-        <div className="absolute inset-0 flex flex-col text-xs">
-          <SimpleTabs
-            className="border-gray-3 border-b px-2 pt-2"
-            tabs={[
-              {
-                id: "schema",
-                label: "Schema",
-                content: (
-                  <div className="relative h-full overflow-hidden">
-                    <div className="flex items-center gap-2 border-b p-2">
-                      <ActionButton
-                        onClick={fetchSchema}
-                        disabled={showSchemaSpinner}
-                        variant="outline"
-                        className="text-sm"
-                      >
-                        📥 Fetch Schema
-                      </ActionButton>
-                    </div>
-                    <div className="flex-1 overflow-auto p-2">
-                      <div className="min-w-0 overflow-x-auto">
-                        <ObjectInspector data={schemaResult} expandLevel={3} />
+            </div>
+          ),
+        },
+        {
+          name: "schema",
+          defaultSize: 150,
+          className: "flex flex-col text-xs min-h-[150px]",
+          content: (
+            <div className="flex flex-1 flex-col text-xs">
+              <SimpleTabs
+                className="border-gray-3 border-b px-2 pt-2"
+                tabs={[
+                  {
+                    id: "schema",
+                    label: "Schema",
+                    content: (
+                      <div className="relative h-full overflow-hidden">
+                        <div className="flex items-center gap-2 border-b p-2">
+                          <ActionButton
+                            onClick={fetchSchema}
+                            disabled={showSchemaSpinner}
+                            variant="outline"
+                            className="text-sm"
+                          >
+                            📥 Fetch Schema
+                          </ActionButton>
+                        </div>
+                        <div className="flex-1 overflow-auto p-2">
+                          <div className="min-w-0 overflow-x-auto">
+                            <ObjectInspector
+                              data={schemaResult}
+                              expandLevel={3}
+                            />
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                  </div>
-                ),
-              },
-            ]}
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-          />
-          <div className="border-t border-gray-200 p-2">
-            <ActionButton
-              variant="outline"
-              className="text-xs"
-              onClick={() => {
-                editContext?.executeCommand?.({
-                  command: createAgentCommand,
-                  data: {
-                    profileName: "GraphQL Assistant",
-                    contextFactory: "graphql:context:v1",
-                    initialPrompt:
-                      "Help with the current GraphQL query and schema.",
-                    additionalData: {
-                      source: "GraphQLPanel",
-                    },
+                    ),
                   },
-                });
-              }}
-            >
-              Start GraphQL Agent
-            </ActionButton>
-          </div>
-        </div>
-      </SplitterPanel>
-    </Splitter>
+                ]}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+              />
+              <div className="border-t border-gray-200 p-2">
+                <ActionButton
+                  variant="outline"
+                  className="text-xs"
+                  onClick={() => {
+                    editContext?.executeCommand?.({
+                      command: createAgentCommand,
+                      data: {
+                        profileName: "GraphQL Assistant",
+                        contextFactory: "graphql:context:v1",
+                        initialPrompt:
+                          "Help with the current GraphQL query and schema.",
+                        additionalData: {
+                          source: "GraphQLPanel",
+                        },
+                      },
+                    });
+                  }}
+                >
+                  Start GraphQL Agent
+                </ActionButton>
+              </div>
+            </div>
+          ),
+        },
+      ]}
+    />
   );
 }

package/src/editor/sidebar/SEOInfo.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { Button } from "../../components/ui/button";
 import { Search } from "lucide-react";
-import { Divider } from "primereact/divider";
 import { useEditContext } from "../client/editContext";
 import { toast } from "sonner";
 
@@ -203,7 +202,7 @@ Focus on actionable insights for improving search engine visibility.`;
         Run SEO Analysis
       </Button>
 
-      <Divider />
+      <div className="my-4 border-t border-gray-200" />
 
       {/* SEO Information */}
       <div className="space-y-3">

package/src/editor/sidebar/Translations.tsx

@@ -10,8 +10,9 @@ import {
 import { useEffect, useState } from "react";
 import { TranslationStatus } from "../../config/types";
 
-import { ProgressBar } from "primereact/progressbar";
-import { Checkbox } from "primereact/checkbox";
+// Custom Progress component using Tailwind CSS
+import { Checkbox } from "../../components/ui/checkbox";
+import { Sparkles, Plus } from "lucide-react";
 import { confirmCreateVersion } from "../utils/itemutils";
 import { Select } from "../../components/ui/select";
 
@@ -216,7 +217,7 @@ export function Translation() {
             }}
             disabled={checkedLanguages.length === 0}
           >
-            <i className="pi pi-sparkles" />
+            <Sparkles className="h-4 w-4" />
             Translate
           </Button>
         )}
@@ -228,7 +229,7 @@ export function Translation() {
           }}
           disabled={checkedLanguages.length === 0}
         >
-          <i className="pi pi-plus" />
+          <Plus className="h-4 w-4" />
           Create Versions
         </Button>
       </div>
@@ -242,9 +243,9 @@ export function Translation() {
                   <div onClick={(e) => e.stopPropagation()}>
                     <Checkbox
                       checked={checkedLanguages.includes(x.languageCode)}
-                      onChange={(ev) => {
+                      onCheckedChange={(checked) => {
                         setCheckedLanguages(
-                          ev.checked
+                          Boolean(checked)
                             ? [...checkedLanguages, x.languageCode]
                             : checkedLanguages.filter(
                                 (y) => y !== x.languageCode,
@@ -266,13 +267,14 @@ export function Translation() {
                 body: (x) => (
                   <div className="flex items-center gap-2">
                     {x.translationStatus?.status === "In Progress" && (
-                      <div className="relative w-full">
-                        <ProgressBar
-                          style={{ height: "20px" }}
-                          value={(x.translationProgress?.progress || 0) * 100}
-                          showValue={false}
+                      <div className="relative h-5 w-full overflow-hidden rounded-full bg-gray-200">
+                        <div
+                          className="h-full bg-blue-500 transition-all duration-300 ease-in-out"
+                          style={{
+                            width: `${(x.translationProgress?.progress || 0) * 100}%`,
+                          }}
                         />
-                        <div className="absolute inset-0 flex items-center justify-center text-white">
+                        <div className="absolute inset-0 flex items-center justify-center text-sm font-medium text-white">
                           {x.translationProgress?.message}
                         </div>
                       </div>

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -114,7 +114,7 @@ export function ItemNameDialog(
           <DialogTitle>{props?.title ?? "Name"}</DialogTitle>
         </DialogHeader>
         <div className="p-3">
-          <div className="my-2 text-sm">
+          <div className="mb-2 text-sm">
             {props.message || "Enter a name for the new item:"}
           </div>
           <Input

package/src/editor/ui/ItemSearch.tsx

@@ -47,13 +47,15 @@ export const ItemSearch: React.FC<SearchProps> = ({
     if (!editContext || disabled) return;
 
     setLoading(true);
+    const trimmedPrompt = searchPrompt.trim();
     const currentQuery = searchPrompt;
 
+    // Check for GUID pattern
     const guidPattern =
       /^\{?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}\}?$/;
-    if (guidPattern.test(searchPrompt)) {
+    if (guidPattern.test(trimmedPrompt)) {
       const item = await editContext.itemsRepository.getItem({
-        id: searchPrompt,
+        id: trimmedPrompt,
         language: language || "en",
         version: 0,
       });
@@ -78,12 +80,17 @@ export const ItemSearch: React.FC<SearchProps> = ({
       return;
     }
 
+    // Check for item path pattern (starts with /)
+    const isPath = trimmedPrompt.startsWith("/");
+
+    // If it looks like a path, search with skipValidation to allow exact path matching
     const result = await executeSearch({
       index: "master",
-      query: searchPrompt,
+      query: trimmedPrompt,
       editContext,
       rootItemIds,
-      maxResults: 15,
+      maxResults: isPath ? 15 : 15,
+      skipValidation: isPath,
     });
 
     if (query === currentQuery) {

package/src/editor/ui/SimpleTabs.tsx

@@ -6,7 +6,7 @@ export type Tab = {
   content: React.ReactNode;
   id: string;
   testId?: string;
-  icon?: string; // PrimeReact icon class name (e.g., "pi pi-search")
+  icon?: string;
 };
 
 export function SimpleTabs({

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

@@ -1,4 +1,4 @@
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 import { useEffect, useRef, useState } from "react";
 import { WizardData } from "../PageWizard";
 
@@ -236,7 +236,7 @@ export function CollectStep({
           defaultCollapsed="mobileOnly"
         >
           <div className="flex flex-col gap-2">
-            <InputText
+            <Input
               type="text"
               className="rounded-md border border-gray-300 px-3 py-2"
               onChange={(e) => setScrapeUrl(e.target.value)}

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

@@ -1,10 +1,9 @@
 import { useState, useEffect } from "react";
+import { Editor, EditorTextChangeEvent } from "primereact/editor";
 
 import { WizardField } from "../PageWizard";
 import { TextField } from "../../editor/fieldTypes";
 
-import { Editor } from "primereact/editor";
-
 export function FieldEditor({
   field,
   onFieldEdited,
@@ -24,13 +23,10 @@ export function FieldEditor({
 
   if (!isEditing) {
     return (
-      <div
-        onClick={() => setIsEditing(true)}
-        className="cursor-pointer mb-2"
-      >
+      <div onClick={() => setIsEditing(true)} className="mb-2 cursor-pointer">
         <div className="font-bold text-gray-900">{field.name}:</div>
         <div
-          className="text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1 [&_p]:my-1"
+          className="text-gray-700 [&_li]:my-1 [&_p]:my-1 [&_ul]:list-disc [&_ul]:pl-5"
           dangerouslySetInnerHTML={{ __html: field.value }}
         ></div>
         {/* <SimpleIconButton
@@ -56,24 +52,26 @@ export function FieldEditor({
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000">
-      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+    <div className="bg-opacity-50 fixed inset-0 z-1000 flex items-center justify-center bg-black">
+      <div className="w-full max-w-lg rounded-lg bg-white p-6 shadow-xl">
+        <h3 className="mb-4 text-lg font-medium text-gray-900">
           Edit {field.name || "Field"}
         </h3>
 
         {isRichText ? (
           <div className="mb-4">
             <Editor
-              className="w-full h-64 p-2 border border-gray-300 rounded-md"
+              className="h-64 w-full rounded-md border border-gray-300 p-2"
               value={fieldValue}
-              onTextChange={(e) => setFieldValue(e.htmlValue || "")}
+              onTextChange={(e: EditorTextChangeEvent) =>
+                setFieldValue(e.htmlValue || "")
+              }
             />
           </div>
         ) : (
           <div className="mb-4">
             <textarea
-              className="w-full p-2 border border-gray-300 rounded-md"
+              className="w-full rounded-md border border-gray-300 p-2"
               value={fieldValue}
               onChange={(e) => setFieldValue(e.target.value)}
             />
@@ -84,14 +82,14 @@ export function FieldEditor({
           <button
             type="button"
             onClick={handleCancel}
-            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
           >
             Cancel
           </button>
           <button
             type="button"
             onClick={handleSave}
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
           >
             Save
           </button>

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4134";
-export const buildDate = "2025-10-02 00:59:02";
+export const version = "1.0.4140";
+export const buildDate = "2025-10-06 11:12:09";

package/src/splash-screen/NewPage.tsx

@@ -9,7 +9,7 @@ import {
   executeCreateItem,
   loadInsertOptions,
 } from "../editor/services/editService";
-import { InputText } from "primereact/inputtext";
+import { Input } from "../components/ui/input";
 import { getAbsoluteIconUrl, getItemDescriptor } from "../editor/utils";
 import { cn } from "../lib/utils";
 import { useEditContext } from "../client-components";
@@ -282,7 +282,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                     description="Enter a name for your new page"
                   >
                     <div>
-                      <InputText
+                      <Input
                         className="w-full rounded p-1.5 text-xs"
                         value={name}
                         id="new-page-name"

package/src/splash-screen/RecentPages.tsx

@@ -68,7 +68,7 @@ export function RecentPages() {
                   onClick={() => handlePageLoad(page)}
                   className="cursor-pointer border-b border-gray-100 hover:bg-gray-50"
                 >
-                  <td className="py-3">
+                  <td className="px-1.5 py-3">
                     <div className="flex items-center gap-2">
                       {/* {page.icon && (
                         <img