@alpaca-editor/core 1.0.3942 → 1.0.3944

package/package.json

@@ -1,20 +1,14 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3942",
+  "version": "1.0.3944",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    ".": "./dist/index.js",
+    ".": "./src/index.ts",
     "./styles.css": "./dist/styles.css",
     "./dev-styles.css": "./dev.css"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "dev.css"
-  ],
   "type": "module",
   "scripts": {
     "build": "npx @tailwindcss/cli -i ./build.css -o ./dist/styles.css && copyfiles -u 0 \"images/**/*\" dist && tsc -p tsconfig.build.json",

package/src/client-components/api.ts

@@ -0,0 +1,6 @@
+export function selectComponents(componentIds: string[]) {
+  window.top?.window.postMessage(
+    { componentIds, type: "componentsSelected" },
+    "*"
+  );
+}

package/src/client-components/index.ts

@@ -0,0 +1,19 @@
+export { useEditContext } from "../editor/client/editContext";
+export { selectComponents } from "./api";
+export { getDefaultTourSteps } from "../tour/default-tour";
+export * from "../editor/field-types/DropLinkEditor";
+export * from "../editor/field-types/TreeListEditor";
+export * from "../editor/field-types/DropListEditor";
+export * from "../editor/field-types/AttachmentEditor";
+export * from "../editor/field-types/CheckboxEditor";
+export * from "../editor/field-types/LinkFieldEditor";
+export * from "../editor/field-types/PictureFieldEditor";
+export * from "../editor/field-types/RichTextEditor";
+export * from "../editor/field-types/SingleLineText";
+export * from "../editor/field-types/MultiLineText";
+export * from "../editor/field-types/RawEditor";
+export * from "../editor/field-types/RichTextEditor";
+export * from "../editor/field-types/InternalLinkFieldEditor";
+
+
+

package/src/components/ActionButton.tsx

@@ -0,0 +1,50 @@
+import { classNames } from "primereact/utils";
+import React from "react";
+import { Button } from "./ui/button";
+
+interface ActionButtonProps {
+  isLoading?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  loadingText?: string;
+  children: React.ReactNode;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+  variant?:
+    | "default"
+    | "secondary"
+    | "destructive"
+    | "outline"
+    | "ghost"
+    | "link";
+}
+
+export const ActionButton: React.FC<ActionButtonProps> = ({
+  isLoading,
+  onClick,
+  disabled = false,
+  loadingText = "Loading...",
+  children,
+  type = "button",
+  className = "",
+  variant = "default",
+}) => {
+  return (
+    <Button
+      type={type}
+      onClick={onClick}
+      disabled={disabled || isLoading}
+      className={className}
+      variant={variant}
+    >
+      {isLoading ? (
+        <div className="flex items-center justify-center gap-2">
+          <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+          <div>{loadingText}</div>
+        </div>
+      ) : (
+        children
+      )}
+    </Button>
+  );
+};

package/src/components/Error.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { EditContextType } from "../editor/client/editContext";
+import { Component } from "../editor/pageModel";
+
+export function ErrorFallback() {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div role="alert">
+      <p>Something went wrong.</p>
+    </div>
+  );
+}
+
+export function ErrorFallbackWithDetails({
+  error,
+  component,
+  editContext,
+}: {
+  error: Error;
+  component: Component;
+  editContext?: EditContextType;
+}) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div
+      role="alert"
+      className="cursor-pointer"
+      onClick={(ev) => {
+        if (!editContext) return;
+        ev.stopPropagation();
+        ev.preventDefault();
+        editContext.select([component.id]);
+        if (!editContext.configuration.editor.views) return;
+        if (component.rendering) editContext.switchView("component-designer");
+      }}
+    >
+      <div className="text-xs bg-gray-100 p-3">
+        <div className="font-bold mb-1">Something went wrong</div>
+        <div>Component id: {component.id}</div>
+        <div>Component type: {component.type}</div>
+        {component.rendering && (
+          <div>Rendering id: {component.rendering.id}</div>
+        )}
+        <pre className="overflow-x-auto text-red-500 py-2">
+          {error.message} {error.stack}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+export async function AsyncComponent() {
+  return <ErrorFallback />;
+}

package/src/components/ui/CardConnector.tsx

@@ -0,0 +1,56 @@
+import { cn } from "../../lib/utils";
+
+export function CardConnector({
+  className,
+  direction,
+}: {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}) {
+  return (
+    <>
+      <div
+        className={cn(
+          "mt-[-3px] mb-[-3px] flex items-center justify-center",
+          className,
+          (!direction || direction === "horizontal") && "md:hidden",
+        )}
+      >
+        <svg
+          width="40"
+          height="31"
+          viewBox="0 0 40 31"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M40 3.04199C33.8405 3.55018 29 8.70936 29 15C29 21.2906 33.8405 26.4498 40 26.958L40 31L-1.35505e-06 31L-1.18021e-06 27C6.62741 27 12 21.6274 12 15C12 8.37258 6.62741 3 -1.31134e-07 3L0 -1.74846e-06L40 0L40 3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+
+      <div
+        className={cn(
+          "mt-6 mr-[-3px] ml-[-3px] hidden",
+          className,
+          (!direction || direction === "horizontal") && "md:block",
+        )}
+      >
+        <svg
+          className={className}
+          width="31"
+          height="40"
+          viewBox="0 0 31 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </>
+  );
+}

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-theme-secondary text-primary-foreground shadow-xs hover:bg-theme-secondary/80",
+        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 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-7 py-5 has-[>svg]:px-3 md:text-sm text-xs",
+        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/components/ui/card.tsx

@@ -0,0 +1,372 @@
+import { cn } from "../../lib/utils";
+import { useState, useEffect } from "react";
+import { Expand, Shrink } from "lucide-react";
+
+/**
+ * A reusable card component with header (icon, title, description) and content area.
+ * Originally created for the page wizard but now available as a generic UI component.
+ */
+export function Card({
+  children,
+  icon,
+  title,
+  description,
+  className,
+  noPadding,
+  collapsible = "no",
+  defaultCollapsed = "no",
+  summary,
+  footer,
+  showFullscreenButton = false,
+  onFullscreen,
+}: {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className?: string;
+  noPadding?: boolean;
+  collapsible?: "yes" | "no" | "mobileOnly";
+  defaultCollapsed?: "yes" | "no" | "mobileOnly";
+  summary?: React.ReactNode;
+  footer?: React.ReactNode;
+  showFullscreenButton?: boolean;
+  onFullscreen?: () => void;
+}) {
+  const [isExpanded, setIsExpanded] = useState(() => {
+    if (defaultCollapsed === "yes") return false; // Starts collapsed
+    if (defaultCollapsed === "no") return true; // Starts expanded
+    if (defaultCollapsed === "mobileOnly") return false; // Starts collapsed on mobile, but we'll handle desktop separately
+    return true; // Default
+  });
+
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const isCollapsibleEnabled = collapsible !== "no";
+
+  // Prevent body scroll when fullscreen is active
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [isFullscreen]);
+
+  // Check if collapsible behavior should be active (considering mobile-only options)
+  const isCollapsibleActive = () => {
+    if (collapsible === "no") return false;
+    if (collapsible === "mobileOnly") {
+      // Only collapsible on mobile - we'll handle this with CSS classes
+      return true;
+    }
+    return true; // For "yes"
+  };
+
+  // Determine what content to show based on collapsible state
+  const getContentToShow = () => {
+    if (!isCollapsibleEnabled) return children;
+
+    return isExpanded ? children : summary;
+  };
+
+  const shouldShowContent = () => {
+    if (!isCollapsibleEnabled) return true;
+
+    // Always show content area if we have either main content or summary
+    if (!isExpanded && summary) return true;
+    if (isExpanded) return true;
+
+    return false;
+  };
+
+  const toggleExpanded = () => {
+    if (isCollapsibleActive()) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  const handleFullscreen = () => {
+    setIsFullscreen(true);
+    onFullscreen?.();
+  };
+
+  const handleExitFullscreen = () => {
+    setIsFullscreen(false);
+  };
+
+  return (
+    <>
+      {/* Blurred background overlay - only visible in fullscreen */}
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:hidden"
+          onClick={handleExitFullscreen}
+        />
+      )}
+
+      <div
+        className={cn(
+          "flex flex-col rounded-lg bg-white transition-all duration-300 ease-in-out",
+          className,
+          isFullscreen && [
+            // Fullscreen styles - only on mobile
+            "fixed inset-0 z-50 mx-0 mt-[30px] h-[calc(100vh-60px)] shadow-xl md:relative md:inset-auto md:mx-auto md:mt-0 md:h-auto md:shadow-none",
+          ],
+        )}
+      >
+        <div
+          className={cn(
+            "flex flex-col justify-between gap-1 p-4 pb-2 md:p-6 md:pb-4",
+            isCollapsibleEnabled && "cursor-pointer",
+          )}
+          onClick={isCollapsibleEnabled ? toggleExpanded : undefined}
+        >
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <div className="text-theme-secondary flex h-4 w-4 items-center justify-center rounded-full">
+                {icon}
+              </div>
+              <div className="text-base font-bold text-neutral-800">
+                {title}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {/* Fullscreen button - only on mobile */}
+              {showFullscreenButton && (
+                <button
+                  onClick={handleFullscreen}
+                  className={cn(
+                    "flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden",
+                    isFullscreen && "hidden",
+                  )}
+                  aria-label="Open fullscreen"
+                >
+                  <Expand className="h-4 w-4" />
+                </button>
+              )}
+
+              {/* Exit fullscreen button - only visible in fullscreen */}
+              {showFullscreenButton && isFullscreen && (
+                <button
+                  onClick={handleExitFullscreen}
+                  className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                  aria-label="Exit fullscreen"
+                >
+                  <Shrink className="h-4 w-4" />
+                </button>
+              )}
+
+              {/* Show toggle in header when no summary is provided */}
+              {isCollapsibleEnabled && !summary && (
+                <>
+                  {collapsible === "yes" && (
+                    <button
+                      onClick={toggleExpanded}
+                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                      aria-label={isExpanded ? "Collapse" : "Expand"}
+                    >
+                      <svg
+                        className={cn(
+                          "h-4 w-4 transition-transform duration-200",
+                          isExpanded ? "rotate-180" : "rotate-0",
+                        )}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                  {collapsible === "mobileOnly" && (
+                    <button
+                      onClick={toggleExpanded}
+                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                      aria-label={isExpanded ? "Collapse" : "Expand"}
+                    >
+                      <svg
+                        className={cn(
+                          "h-4 w-4 transition-transform duration-200",
+                          isExpanded ? "rotate-180" : "rotate-0",
+                        )}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+          <div className="mb-1 text-xs text-neutral-500">{description}</div>
+        </div>
+
+        {shouldShowContent() && (
+          <div
+            className={cn(
+              "flex-1 transition-all duration-300 ease-in-out",
+              noPadding ? "" : "p-4 pt-0 md:p-6 md:pt-0",
+              isFullscreen && "overflow-hidden",
+              // Handle responsive behavior for mobile-only collapsible options
+              collapsible === "mobileOnly" &&
+                !isExpanded &&
+                summary &&
+                "block md:hidden",
+              collapsible === "mobileOnly" && isExpanded && "block",
+              className,
+            )}
+          >
+            {!isExpanded && summary && isCollapsibleEnabled ? (
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 cursor-pointer" onClick={toggleExpanded}>
+                  {summary}
+                </div>
+                {/* Show toggle button next to summary when summary exists */}
+                {collapsible === "yes" && (
+                  <button
+                    onClick={toggleExpanded}
+                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                    aria-label="Expand"
+                  >
+                    <svg
+                      className="h-4 w-4 rotate-0 transition-transform duration-200"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                )}
+                {collapsible === "mobileOnly" && (
+                  <button
+                    onClick={toggleExpanded}
+                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                    aria-label="Expand"
+                  >
+                    <svg
+                      className="h-4 w-4 rotate-0 transition-transform duration-200"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            ) : (
+              <>
+                {isExpanded && isCollapsibleEnabled && summary ? (
+                  <>
+                    {/* Show summary with toggle button */}
+                    <div className="mb-4 flex items-start justify-between gap-2">
+                      <div
+                        className="flex-1 cursor-pointer"
+                        onClick={toggleExpanded}
+                      >
+                        {summary}
+                      </div>
+                      {/* Show toggle button next to summary */}
+                      {collapsible === "yes" && (
+                        <button
+                          onClick={toggleExpanded}
+                          className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                          aria-label="Collapse"
+                        >
+                          <svg
+                            className="h-4 w-4 rotate-180 transition-transform duration-200"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </button>
+                      )}
+                      {collapsible === "mobileOnly" && (
+                        <button
+                          onClick={toggleExpanded}
+                          className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                          aria-label="Collapse"
+                        >
+                          <svg
+                            className="h-4 w-4 rotate-180 transition-transform duration-200"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </button>
+                      )}
+                    </div>
+                    {/* Show full content below summary */}
+                    <div>{children}</div>
+                  </>
+                ) : (
+                  getContentToShow()
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Show full content on desktop when using mobile-only collapsible options */}
+        {collapsible === "mobileOnly" && (
+          <div
+            className={cn(
+              "hidden flex-1 transition-all duration-300 ease-in-out md:block",
+              noPadding ? "" : "p-4 pt-0 md:p-6",
+              className,
+            )}
+          >
+            {children}
+          </div>
+        )}
+
+        {/* Footer - always displayed regardless of collapsed state */}
+        {footer && (
+          <div className="border-t border-gray-100 p-4 pt-0 md:p-6 md:pt-0">
+            {footer}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}