@agent-native/core 0.163.3 → 0.164.1

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

@@ -0,0 +1,153 @@
+import type { CollabUser } from "@agent-native/core/client/collab";
+import { emailToColor, emailToName } from "@agent-native/core/client/collab";
+import { useAvatarUrl } from "@agent-native/core/client/hooks";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+export interface DesignCollaborator {
+  user: CollabUser;
+  image?: string;
+  isCurrent?: boolean;
+}
+
+function userInitial(nameOrEmail: string): string {
+  const trimmed = nameOrEmail.trim();
+  if (!trimmed) return "?";
+  return trimmed.charAt(0).toUpperCase();
+}
+
+function userColor(user: CollabUser): string {
+  return user.color || emailToColor(user.email);
+}
+
+export function DesignCollaboratorAvatar({
+  collaborator,
+  className,
+}: {
+  collaborator: DesignCollaborator;
+  className?: string;
+}) {
+  const label = collaborator.user.name || emailToName(collaborator.user.email);
+  const storedAvatarUrl = useAvatarUrl(collaborator.user.email);
+  const avatarUrl = storedAvatarUrl ?? collaborator.image;
+
+  return (
+    <Avatar
+      className={cn(
+        "size-7 border-2 border-[var(--design-editor-panel-bg)] shadow-sm",
+        className,
+      )}
+    >
+      {avatarUrl ? <AvatarImage src={avatarUrl} alt={label} /> : null}
+      <AvatarFallback
+        /* guard:allow-raw-color — avatar initials sit on a generated user color, not a themed surface */
+        className="text-[10px] font-semibold text-white"
+        style={{ backgroundColor: userColor(collaborator.user) }}
+      >
+        {userInitial(label || collaborator.user.email)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+export function DesignCollaboratorsMenu({
+  collaborators,
+  followingEmail,
+  label,
+  onAvatarClick,
+}: {
+  collaborators: DesignCollaborator[];
+  followingEmail?: string | null;
+  label: string;
+  onAvatarClick?: (user: CollabUser | null) => void;
+}) {
+  if (collaborators.length === 0) return null;
+
+  const visibleCollaborators = collaborators.slice(0, 3);
+  const hasMultipleCollaborators = collaborators.length > 1;
+  const followingLower = followingEmail?.trim().toLowerCase() ?? null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="flex h-8 min-w-0 cursor-pointer items-center rounded-md pr-1 text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+          aria-label={label}
+        >
+          <span className="flex items-center">
+            {visibleCollaborators.map((collaborator, index) => (
+              <DesignCollaboratorAvatar
+                key={`${collaborator.user.email}:${index}`}
+                collaborator={collaborator}
+                className={index === 0 ? undefined : "-ml-2"}
+              />
+            ))}
+          </span>
+          {hasMultipleCollaborators ? (
+            <IconChevronDown className="ml-0.5 size-3 opacity-70" />
+          ) : null}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          {label}
+        </DropdownMenuLabel>
+        {collaborators.map((collaborator) => {
+          const user = collaborator.user;
+          const email = user.email.trim().toLowerCase();
+          const isFollowing =
+            followingLower != null && email === followingLower;
+          const name = user.name || emailToName(user.email);
+
+          return (
+            <DropdownMenuItem
+              key={user.email}
+              onSelect={(event) => {
+                if (collaborator.isCurrent) {
+                  event.preventDefault();
+                  return;
+                }
+                onAvatarClick?.(user);
+              }}
+              className={cn(
+                "gap-2",
+                collaborator.isCurrent && "cursor-default",
+              )}
+            >
+              <DesignCollaboratorAvatar collaborator={collaborator} />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm font-medium">
+                  {name}
+                </span>
+                <span className="block truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </span>
+              {collaborator.isCurrent ? (
+                <span className="text-xs text-muted-foreground">
+                  {"You" /* i18n-ignore collaborator row */}
+                </span>
+              ) : isFollowing ? (
+                <IconCheck className="size-3.5 text-[var(--design-editor-accent-color)]" />
+              ) : (
+                <span className="text-xs text-muted-foreground">
+                  {"Follow" /* i18n-ignore collaborator row */}
+                </span>
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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>
+  );
+}