@agent-native/core 0.163.4 → 0.164.1

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

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

@@ -0,0 +1,161 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+
+type TemplateCategory =
+  | "ad"
+  | "one-pager"
+  | "landing-page"
+  | "social"
+  | "presentation"
+  | "other";
+
+export function SaveTemplateDialog({
+  open,
+  onOpenChange,
+  defaultTitle,
+  defaultDescription,
+  screenCount,
+  lockedLayerCount,
+  saving,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultTitle: string;
+  defaultDescription: string;
+  screenCount: number;
+  lockedLayerCount: number;
+  saving: boolean;
+  onSave: (values: {
+    title: string;
+    description?: string;
+    category: TemplateCategory;
+  }) => Promise<void>;
+}) {
+  const t = useT();
+  const [title, setTitle] = useState(defaultTitle);
+  const [description, setDescription] = useState(defaultDescription);
+  const [category, setCategory] = useState<TemplateCategory>("other");
+
+  useEffect(() => {
+    if (!open) return;
+    setTitle(defaultTitle);
+    setDescription(defaultDescription);
+    setCategory("other");
+  }, [defaultDescription, defaultTitle, open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("designEditor.saveAsTemplate")}</DialogTitle>
+          <DialogDescription>
+            {t("designEditor.saveTemplateDescription")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-1">
+          <label className="grid gap-1.5 text-sm">
+            <span className="font-medium">
+              {t("designEditor.templateName")}
+            </span>
+            <Input
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              autoFocus
+            />
+          </label>
+          <label className="grid gap-1.5 text-sm">
+            <span className="font-medium">
+              {t("designEditor.templateDescription")}
+            </span>
+            <Textarea
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              rows={3}
+            />
+          </label>
+          <div className="grid gap-1.5 text-sm">
+            <span className="font-medium">
+              {t("designEditor.templateCategory")}
+            </span>
+            <Select
+              value={category}
+              onValueChange={(value) => setCategory(value as TemplateCategory)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {(
+                    [
+                      "ad",
+                      "social",
+                      "one-pager",
+                      "landing-page",
+                      "presentation",
+                      "other",
+                    ] as const
+                  ).map((value) => (
+                    <SelectItem key={value} value={value}>
+                      {t(`templatesPage.categories.${value}`)}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="rounded-lg border bg-muted/25 px-3 py-2 text-xs text-muted-foreground">
+            {t("designEditor.templateSnapshotSummary", {
+              screens: screenCount,
+              locks: lockedLayerCount,
+            })}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={saving}
+          >
+            {t("home.cancel")}
+          </Button>
+          <Button
+            onClick={() =>
+              void onSave({
+                title: title.trim(),
+                description: description.trim() || undefined,
+                category,
+              })
+            }
+            disabled={!title.trim() || saving}
+          >
+            {saving ? <Spinner className="size-4" /> : null}
+            {t("designEditor.saveTemplate")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/design/app/components/design/editor/toolbar-controls.tsx

@@ -0,0 +1,185 @@
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export type DesignToolbarOption = {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  shortcut?: string;
+  active?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+};
+
+export function DesignPenToolIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      focusable="false"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+    >
+      <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" />
+      <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" />
+      <path d="m2.3 2.3 7.286 7.286" />
+      <circle cx="11" cy="11" r="2" />
+    </svg>
+  );
+}
+
+export function DesignToolbarTool({
+  active,
+  label,
+  icon,
+  options,
+  onPrimary,
+}: {
+  active: boolean;
+  label: string;
+  icon: ReactNode;
+  options: DesignToolbarOption[];
+  onPrimary: () => void;
+}) {
+  const hasOptionsMenu = options.length > 1;
+  // Item 5 (Figma parity): the hover tooltip should show the shortcut for
+  // whichever sub-tool is CURRENTLY active (mirroring how the button's own
+  // icon/label already track the active sub-tool above), falling back to the
+  // first option's shortcut when none of the options is active — e.g. a
+  // freshly-mounted toolbar before any tool has been explicitly selected.
+  const primaryShortcut =
+    options.find((option) => option.active)?.shortcut ?? options[0]?.shortcut;
+  return (
+    <div className="flex h-8 items-center text-neutral-200">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className={cn(
+              "flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors",
+              active
+                ? // guard:allow-raw-color - fixed dark editor chrome, intentionally theme-independent
+                  "bg-[var(--design-editor-accent-color)] text-white"
+                : // guard:allow-raw-color - fixed dark editor chrome, intentionally theme-independent
+                  "hover:bg-white/10 hover:text-white",
+            )}
+            onClick={onPrimary}
+            aria-label={label}
+            aria-pressed={active}
+          >
+            {icon}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="flex items-center gap-2">
+          <span>{label}</span>
+          {primaryShortcut ? (
+            <span className="text-muted-foreground">{primaryShortcut}</span>
+          ) : null}
+        </TooltipContent>
+      </Tooltip>
+
+      {hasOptionsMenu ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                // guard:allow-raw-color - fixed dark editor chrome, intentionally theme-independent
+                "flex h-8 w-4 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-white/10 hover:text-white",
+                active && "text-neutral-200",
+              )}
+              aria-label={`${label} options`}
+            >
+              <IconChevronDown className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="top"
+            align="center"
+            sideOffset={12}
+            className="w-56 rounded-2xl border-border bg-popover p-2 text-popover-foreground shadow-md"
+          >
+            {options.map((option) => (
+              <DropdownMenuItem
+                key={option.key}
+                disabled={option.disabled}
+                onSelect={option.onSelect}
+                className="h-10 rounded-lg text-sm text-popover-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:text-muted-foreground"
+              >
+                <span className="mr-2 flex size-5 items-center justify-center text-popover-foreground">
+                  {option.active ? (
+                    <IconCheck className="size-4" />
+                  ) : (
+                    option.icon
+                  )}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                {option.shortcut && (
+                  <DropdownMenuShortcut className="ml-3 text-muted-foreground">
+                    {option.shortcut}
+                  </DropdownMenuShortcut>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </div>
+  );
+}
+
+export function DesignModeTab({
+  active,
+  disabled,
+  label,
+  icon,
+  onClick,
+}: {
+  active: boolean;
+  disabled?: boolean;
+  label: string;
+  icon: ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={label}
+          aria-pressed={active}
+          onClick={onClick}
+          className={cn(
+            // guard:allow-raw-color - fixed dark editor chrome, intentionally theme-independent
+            "flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-300 transition-colors hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-40",
+            active &&
+              // guard:allow-raw-color - fixed dark editor chrome, intentionally theme-independent
+              "bg-neutral-950/70 text-[#38bdf8] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.08),0_8px_18px_-12px_rgba(0,0,0,0.95)] hover:bg-neutral-950/70 hover:text-[#38bdf8]",
+          )}
+        >
+          {icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+}