@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/design/app/components/design/editor/DesignWorkspaceRail.tsx

@@ -0,0 +1,231 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconAssembly,
+  IconChevronDown,
+  IconChevronUp,
+  IconCode,
+  IconFile,
+  IconFileImport,
+  IconMessage,
+  IconPhoto,
+  IconPuzzle,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import { preloadCodeWorkbench } from "@/components/design/code-workbench/CodeWorkbenchLoader";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import {
+  SHOW_DESIGN_CODE_LEFT_PANEL,
+  SHOW_DESIGN_SECONDARY_LEFT_PANELS,
+  type DesignLeftPanel,
+} from "@/pages/design-editor/types";
+
+export const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>(
+  ["file", "assets", "tools", "tokens", "import", "code"],
+);
+
+export function DesignWorkspaceRail({
+  activePanel,
+  disabledPanels,
+  hiddenPanels,
+  motionOpen,
+  motionDisabled,
+  projectMenu,
+  onMotionToggle,
+  onPanelChange,
+}: {
+  activePanel: DesignLeftPanel;
+  disabledPanels?: ReadonlySet<DesignLeftPanel>;
+  hiddenPanels?: ReadonlySet<DesignLeftPanel>;
+  motionOpen?: boolean;
+  motionDisabled?: boolean;
+  projectMenu: ReactNode;
+  onMotionToggle?: () => void;
+  onPanelChange: (panel: DesignLeftPanel) => void;
+}) {
+  const t = useT();
+  const items: Array<{
+    panel: DesignLeftPanel;
+    label: string;
+    icon: ReactNode;
+    separatorBefore?: boolean;
+  }> = [
+    {
+      panel: "file",
+      label: t("designEditor.leftRail.file"),
+      icon: <IconFile className="size-[15px]" />,
+    },
+    {
+      panel: "agent",
+      label: t("designEditor.leftRail.agent"),
+      icon: <IconMessage className="size-[15px]" />,
+    },
+    ...(SHOW_DESIGN_SECONDARY_LEFT_PANELS
+      ? [
+          {
+            panel: "assets" as const,
+            label: t("designEditor.leftRail.assets"),
+            icon: <IconPhoto className="size-[15px]" />,
+          },
+        ]
+      : []),
+    {
+      panel: "import",
+      label: t("designEditor.leftRail.import"),
+      icon: <IconFileImport className="size-[15px]" />,
+    },
+    ...(SHOW_DESIGN_SECONDARY_LEFT_PANELS
+      ? [
+          {
+            panel: "tools" as const,
+            label: t("designEditor.leftRail.tools"),
+            icon: <IconPuzzle className="size-[15px]" />,
+          },
+          {
+            panel: "tokens" as const,
+            label: t("designEditor.leftRail.tokens"),
+            icon: <IconAssembly className="size-[15px]" />,
+          },
+        ]
+      : []),
+    ...(SHOW_DESIGN_CODE_LEFT_PANEL
+      ? [
+          {
+            panel: "code" as const,
+            label: "Code" /* i18n-ignore */,
+            icon: <IconCode className="size-[15px]" />,
+            separatorBefore: true,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <nav
+      aria-label={t("designEditor.leftRail.label")}
+      className="flex min-h-0 w-[57px] shrink-0 flex-col items-center overflow-y-auto overscroll-contain border-r border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)] py-3"
+    >
+      <div className="mb-3 flex h-8 items-center justify-center">
+        {projectMenu}
+      </div>
+      <div className="mb-5 h-px w-8 bg-border/70" />
+      <div className="flex min-h-0 flex-1 flex-col items-center gap-4">
+        {items.map((item) => {
+          if (hiddenPanels?.has(item.panel)) return null;
+          const active = item.panel === activePanel;
+          const disabled = disabledPanels?.has(item.panel) ?? false;
+          return (
+            <div key={item.panel} className="flex w-full flex-col items-center">
+              {item.separatorBefore ? (
+                <div className="-mt-1 mb-3 h-px w-8 bg-border/70" />
+              ) : null}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={item.label}
+                    aria-disabled={disabled || undefined}
+                    aria-current={active ? "page" : undefined}
+                    tabIndex={disabled ? -1 : undefined}
+                    onClick={(event) => {
+                      if (disabled) {
+                        event.preventDefault();
+                        return;
+                      }
+                      onPanelChange(item.panel);
+                    }}
+                    onPointerEnter={() => {
+                      if (item.panel === "code") preloadCodeWorkbench();
+                    }}
+                    onFocus={() => {
+                      if (item.panel === "code") preloadCodeWorkbench();
+                    }}
+                    className={cn(
+                      "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                      disabled &&
+                        "cursor-default opacity-35 hover:text-muted-foreground",
+                      active && "text-foreground",
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded-lg transition-colors",
+                        active
+                          ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
+                          : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
+                        disabled &&
+                          "group-hover:bg-transparent group-hover:text-muted-foreground",
+                      )}
+                    >
+                      {item.icon}
+                    </span>
+                    <span className="max-w-full truncate leading-none">
+                      {item.label}
+                    </span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right">{item.label}</TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        })}
+      </div>
+      {onMotionToggle ? (
+        <div className="mt-4 flex w-full flex-col items-center border-t border-border/70 pt-3">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={"Motion" /* i18n-ignore */}
+                aria-disabled={motionDisabled || undefined}
+                aria-pressed={motionOpen || undefined}
+                tabIndex={motionDisabled ? -1 : undefined}
+                onClick={(event) => {
+                  if (motionDisabled) {
+                    event.preventDefault();
+                    return;
+                  }
+                  onMotionToggle();
+                }}
+                className={cn(
+                  "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none !text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                  motionDisabled &&
+                    "cursor-default opacity-35 hover:text-muted-foreground",
+                  motionOpen && "text-foreground",
+                )}
+              >
+                <span
+                  className={cn(
+                    "flex size-8 items-center justify-center rounded-lg transition-colors",
+                    motionOpen
+                      ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
+                      : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
+                    motionDisabled &&
+                      "group-hover:bg-transparent group-hover:text-muted-foreground",
+                  )}
+                >
+                  {motionOpen ? (
+                    <IconChevronDown className="size-[15px]" />
+                  ) : (
+                    <IconChevronUp className="size-[15px]" />
+                  )}
+                </span>
+                <span className="max-w-full truncate leading-none">
+                  {"Motion" /* i18n-ignore */}
+                </span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {"Motion" /* i18n-ignore */}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      ) : null}
+    </nav>
+  );
+}

package/corpus/templates/design/app/components/design/editor/MakeRealDialog.tsx

@@ -0,0 +1,223 @@
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
+import {
+  IconCircleCheck,
+  IconExternalLink,
+  IconRocket,
+} from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+/** Result of `migrate-inline-design-to-app`, including the not-configured CTA. */
+export interface DesignMigrationResult {
+  branchName?: string;
+  url?: string;
+  versionId?: string;
+  seedFileCount?: number;
+  status?: string;
+  projectId?: string;
+  cta?: {
+    kind: string;
+    label: string;
+    description?: string;
+    connectUrl?: string;
+    primaryAction: string;
+  };
+}
+
+export function MakeRealDialog({
+  open,
+  onOpenChange,
+  result,
+  pending,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  result: DesignMigrationResult | null;
+  pending: boolean;
+  onConfirm: () => void;
+}) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!pending) onOpenChange(next);
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        {/* Not-configured: Builder not connected or no project ID */}
+        {result?.status === "not-configured" && result.cta ? (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <IconRocket className="size-5 text-muted-foreground" />
+                {result.cta.label}
+              </DialogTitle>
+              {result.cta.description ? (
+                <DialogDescription>{result.cta.description}</DialogDescription>
+              ) : null}
+            </DialogHeader>
+            <DialogFooter className="flex-col gap-2 sm:flex-row">
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                className="cursor-pointer"
+              >
+                Cancel
+              </Button>
+              {result.cta.connectUrl ? (
+                <Button asChild className="cursor-pointer">
+                  <a
+                    href={result.cta.connectUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {result.cta.primaryAction}
+                    <IconExternalLink className="ml-1.5 size-3.5" />
+                  </a>
+                </Button>
+              ) : null}
+            </DialogFooter>
+          </>
+        ) : result?.status === "processing" ? (
+          /* Success: Builder accepted the migration job */
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                {/* guard:allow-raw-color - success checkmark; no success token exists in app/global.css */}
+                <IconCircleCheck className="size-5 text-green-500" />
+                {"Migration started" /* i18n-ignore */}
+              </DialogTitle>
+              <DialogDescription>
+                {
+                  "Builder is generating a React app branch from your design. The original inline design is preserved and recoverable." /* i18n-ignore */
+                }
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3 py-2">
+              {result.branchName && (
+                <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm">
+                  <span className="text-muted-foreground">
+                    {"Branch: " /* i18n-ignore */}
+                  </span>
+                  <span className="font-mono font-medium">
+                    {result.branchName}
+                  </span>
+                </div>
+              )}
+              {result.url && (
+                <a
+                  href={withBuilderUtmTrackingParams(result.url, {
+                    campaign: "product",
+                    content: "design_migration",
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1.5 text-sm text-[var(--design-editor-accent-color)] hover:underline"
+                >
+                  {"Open in Builder" /* i18n-ignore */}
+                  <IconExternalLink className="size-3.5" />
+                </a>
+              )}
+              {result.seedFileCount !== undefined && (
+                <p className="text-xs text-muted-foreground">
+                  {
+                    `${result.seedFileCount} design file${result.seedFileCount === 1 ? "" : "s"} included in migration seed.` /* i18n-ignore */
+                  }
+                </p>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                onClick={() => onOpenChange(false)}
+                className="cursor-pointer"
+              >
+                {"Done" /* i18n-ignore */}
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          /* Idle or migrating */
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <IconRocket className="size-5" />
+                {"Make this a real app" /* i18n-ignore */}
+              </DialogTitle>
+              <DialogDescription>
+                {
+                  "Connect Builder.io (free tier available) to convert this design into a React + Tailwind app with real components, props, branches, and deploys. Your current inline design is preserved as a snapshot you can restore at any time." /* i18n-ignore */
+                }
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-2 py-1 text-sm text-muted-foreground">
+              <p>{"What happens:" /* i18n-ignore */}</p>
+              <ul className="list-disc pl-4 space-y-1">
+                <li>
+                  {
+                    "Your design HTML and tokens are sent to the Builder cloud agent" /* i18n-ignore */
+                  }
+                </li>
+                <li>
+                  {
+                    "A React + Tailwind branch is generated in Builder" /* i18n-ignore */
+                  }
+                </li>
+                <li>
+                  {
+                    "The editor switches to fusion source mode — gated panels light up" /* i18n-ignore */
+                  }
+                </li>
+                <li>
+                  {
+                    "The original inline design is saved as a restorable snapshot" /* i18n-ignore */
+                  }
+                </li>
+              </ul>
+              <p className="pt-1 text-xs">
+                {
+                  "Requires Builder.io to be connected (free tier available) with a branch project configured." /* i18n-ignore */
+                }
+              </p>
+            </div>
+            <DialogFooter className="flex-col gap-2 sm:flex-row">
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={pending}
+                className="cursor-pointer"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => void onConfirm()}
+                disabled={pending}
+                className="cursor-pointer"
+              >
+                {
+                  pending ? (
+                    <>
+                      <Spinner className="mr-2 size-3.5" />
+                      {"Starting migration…" /* i18n-ignore */}
+                    </>
+                  ) : (
+                    "Start migration"
+                  ) /* i18n-ignore */
+                }
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/design/app/components/design/editor/PendingScreenDeletionDialog.tsx

@@ -0,0 +1,58 @@
+import { useT } from "@agent-native/core/client/i18n";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export function PendingScreenDeletionDialog({
+  pendingScreenDeletion,
+  onCancel,
+  onConfirm,
+}: {
+  pendingScreenDeletion: { files: DesignFile[] } | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const t = useT();
+  return (
+    <AlertDialog open={pendingScreenDeletion !== null}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {pendingScreenDeletion?.files.length === 1
+              ? t("designEditor.screenDeletion.titleOne")
+              : t("designEditor.screenDeletion.titleMany", {
+                  count: pendingScreenDeletion?.files.length ?? 0,
+                })}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {pendingScreenDeletion?.files.length === 1
+              ? t("designEditor.screenDeletion.descriptionOne", {
+                  filename: pendingScreenDeletion.files[0]?.filename ?? "",
+                })
+              : t("designEditor.screenDeletion.descriptionMany")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>
+            {t("designEditor.screenDeletion.cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            onClick={onConfirm}
+          >
+            {t("designEditor.screenDeletion.confirm")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/corpus/templates/design/app/components/design/editor/PendingVisualStyleWarningDialog.tsx

@@ -0,0 +1,56 @@
+import { useT } from "@agent-native/core/client/i18n";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+export function PendingVisualStyleWarningDialog({
+  open,
+  pendingVisualEditCount,
+  onStay,
+  onDiscardAndNavigate,
+}: {
+  open: boolean;
+  pendingVisualEditCount: number;
+  onStay: () => void;
+  onDiscardAndNavigate: () => void;
+}) {
+  const t = useT();
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("designEditor.pendingVisualStyles.leaveTitle")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t(
+              pendingVisualEditCount === 1
+                ? "designEditor.pendingVisualStyles.leaveDescriptionOne"
+                : "designEditor.pendingVisualStyles.leaveDescriptionOther",
+              { count: pendingVisualEditCount },
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onStay}>
+            {t("designEditor.pendingVisualStyles.stay")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            onClick={onDiscardAndNavigate}
+          >
+            {t("designEditor.pendingVisualStyles.leave")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/corpus/templates/design/app/components/design/editor/ReadOnlyEditorPanel.tsx

@@ -0,0 +1,23 @@
+import { IconLock } from "@tabler/icons-react";
+
+export function ReadOnlyEditorPanel({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col items-center justify-center px-5 text-center">
+      <div className="mb-3 flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+        <IconLock className="size-5" />
+      </div>
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description ? (
+        <p className="mt-1 max-w-56 text-xs leading-5 text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}