@agent-native/core 0.79.27 → 0.80.0

package/corpus/templates/design/app/components/design/DesignToolbar.tsx

@@ -1,339 +0,0 @@
-import { ShareButton, useT } from "@agent-native/core/client";
-import {
-  IconArrowLeft,
-  IconAdjustments,
-  IconMessage,
-  IconPointer,
-  IconPencil,
-  IconPresentation,
-  IconDownload,
-  IconMinus,
-  IconPlus,
-  IconPencilPlus,
-  IconPin,
-  IconWand,
-} from "@tabler/icons-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-import type { ViewportTab } from "./types";
-
-export type EditorMode = "comment" | "edit" | "draw";
-
-interface DesignToolbarProps {
-  title: string;
-  designId: string;
-  onTitleChange: (title: string) => void;
-  mode: EditorMode;
-  onModeChange: (mode: EditorMode) => void;
-  tweaksVisible: boolean;
-  onTweaksToggle: () => void;
-  zoom: number;
-  onZoomChange: (zoom: number) => void;
-  onExport: (format: string) => void;
-  onPresent: (mode: string) => void;
-  onBack: () => void;
-  tabs?: ViewportTab[];
-  activeTabId?: string;
-  onTabChange?: (tabId: string) => void;
-  /** Whether draw-on-canvas mode is active. */
-  drawMode?: boolean;
-  /** Toggle draw-on-canvas mode. */
-  onToggleDrawMode?: () => void;
-  /** Whether comment-pin drop mode is active. */
-  pinMode?: boolean;
-  /** Toggle comment-pin drop mode. */
-  onTogglePinMode?: () => void;
-}
-
-const MODE_ITEMS: {
-  mode: EditorMode;
-  icon: typeof IconMessage;
-  labelKey: string;
-}[] = [
-  {
-    mode: "comment",
-    icon: IconMessage,
-    labelKey: "designEditor.modes.comment",
-  },
-  { mode: "edit", icon: IconPointer, labelKey: "designEditor.modes.edit" },
-  { mode: "draw", icon: IconPencil, labelKey: "designEditor.modes.draw" },
-];
-
-const EXPORT_FORMATS = [
-  { value: "zip", labelKey: "designEditor.downloadZip" },
-  { value: "svg", labelKey: "designEditor.downloadSvg" },
-  { value: "pdf", labelKey: "designEditor.exportPdf" },
-  { value: "html", labelKey: "designEditor.exportHtml" },
-  { value: "coding-handoff", labelKey: "designEditor.copyCodingHandoff" },
-];
-
-const PRESENT_MODES = [
-  { value: "tab", labelKey: "designEditor.presentInThisTab" },
-  { value: "fullscreen", labelKey: "designEditor.presentFullscreen" },
-  { value: "new-tab", labelKey: "designEditor.presentNewTab" },
-];
-
-export function DesignToolbar({
-  title,
-  onTitleChange,
-  mode,
-  onModeChange,
-  tweaksVisible,
-  onTweaksToggle,
-  zoom,
-  onZoomChange,
-  onExport,
-  onPresent,
-  onBack,
-  designId,
-  tabs,
-  activeTabId,
-  onTabChange,
-  drawMode,
-  onToggleDrawMode,
-  pinMode,
-  onTogglePinMode,
-}: DesignToolbarProps) {
-  const t = useT();
-  const [editingTitle, setEditingTitle] = useState(false);
-  const [titleDraft, setTitleDraft] = useState(title);
-  const zoomLabel = `${Math.round(zoom)}%`;
-
-  const commitTitle = () => {
-    setEditingTitle(false);
-    if (titleDraft.trim() && titleDraft !== title) {
-      onTitleChange(titleDraft.trim());
-    } else {
-      setTitleDraft(title);
-    }
-  };
-
-  return (
-    <div className="flex h-11 shrink-0 items-center gap-1.5 border-b border-border bg-background px-2">
-      {/* Back */}
-      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onBack}>
-        <IconArrowLeft className="h-4 w-4" />
-      </Button>
-
-      {/* Title */}
-      {editingTitle ? (
-        <Input
-          value={titleDraft}
-          onChange={(e) => setTitleDraft(e.target.value)}
-          onBlur={commitTitle}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") commitTitle();
-            if (e.key === "Escape") {
-              setTitleDraft(title);
-              setEditingTitle(false);
-            }
-          }}
-          className="h-7 w-48 text-sm"
-          autoFocus
-        />
-      ) : (
-        <button
-          onClick={() => {
-            setTitleDraft(title);
-            setEditingTitle(true);
-          }}
-          className="cursor-pointer rounded px-2 py-1 text-sm font-medium text-foreground hover:bg-muted"
-        >
-          {title}
-        </button>
-      )}
-
-      <Separator orientation="vertical" className="mx-1 h-5" />
-
-      {/* File tabs */}
-      {tabs && tabs.length > 0 && (
-        <>
-          <div className="flex gap-0.5">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => onTabChange?.(tab.id)}
-                className={cn(
-                  "cursor-pointer rounded px-2.5 py-1 text-xs",
-                  activeTabId === tab.id
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
-                )}
-              >
-                {tab.filename}
-              </button>
-            ))}
-          </div>
-          <Separator orientation="vertical" className="mx-1 h-5" />
-        </>
-      )}
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Tools — Tweaks / Draw / Pin consolidated so the bar isn't a wall of icons.
-          The dot indicator lights up when any of the modes is active. */}
-      {(() => {
-        const anyToolActive = Boolean(tweaksVisible || drawMode || pinMode);
-        return (
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className={cn(
-                      "relative h-8 w-8",
-                      anyToolActive && "bg-muted text-foreground",
-                    )}
-                    aria-label={t("designEditor.designTools")}
-                  >
-                    <IconWand className="h-4 w-4" />
-                    {anyToolActive && (
-                      <span className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-primary" />
-                    )}
-                  </Button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent>{t("designEditor.designTools")}</TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align="end" className="w-48">
-              <DropdownMenuItem
-                onClick={onTweaksToggle}
-                className={cn(tweaksVisible && "bg-accent/50")}
-              >
-                <IconAdjustments className="h-4 w-4 mr-2" />
-                {t("designEditor.tweaks")}
-              </DropdownMenuItem>
-              {onToggleDrawMode && (
-                <DropdownMenuItem
-                  data-toolbar-draw-button
-                  onClick={onToggleDrawMode}
-                  className={cn(drawMode && "bg-accent/50")}
-                >
-                  <IconPencilPlus className="h-4 w-4 mr-2" />
-                  {t("designEditor.drawOnCanvas")}
-                </DropdownMenuItem>
-              )}
-              {onTogglePinMode && (
-                <DropdownMenuItem
-                  data-toolbar-pin-button
-                  onClick={onTogglePinMode}
-                  className={cn(pinMode && "bg-accent/50")}
-                >
-                  <IconPin className="h-4 w-4 mr-2" />
-                  {t("designEditor.dropCommentPin")}
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        );
-      })()}
-
-      {/* Mode switcher */}
-      <div className="flex overflow-hidden rounded-md border border-border">
-        {MODE_ITEMS.map(({ mode: m, icon: Icon, labelKey }) => (
-          <Tooltip key={m}>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onModeChange(m)}
-                className={cn(
-                  "cursor-pointer px-2 py-1.5",
-                  mode === m
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
-                )}
-              >
-                <Icon className="h-3.5 w-3.5" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t(labelKey)}</TooltipContent>
-          </Tooltip>
-        ))}
-      </div>
-
-      <Separator orientation="vertical" className="mx-1 h-5" />
-
-      {/* Zoom controls */}
-      <div className="flex items-center gap-0.5">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={() => onZoomChange(Math.max(25, zoom - 25))}
-        >
-          <IconMinus className="h-3 w-3" />
-        </Button>
-        <span className="min-w-12 text-center text-xs tabular-nums text-muted-foreground">
-          {zoomLabel}
-        </span>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={() => onZoomChange(Math.min(400, zoom + 25))}
-        >
-          <IconPlus className="h-3 w-3" />
-        </Button>
-      </div>
-
-      {/* Present */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <IconPresentation className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {PRESENT_MODES.map((pm) => (
-            <DropdownMenuItem
-              key={pm.value}
-              onClick={() => onPresent(pm.value)}
-            >
-              {t(pm.labelKey)}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* Share */}
-      <ShareButton resourceType="design" resourceId={designId} />
-
-      {/* Export */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <IconDownload className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {EXPORT_FORMATS.map((fmt) => (
-            <DropdownMenuItem
-              key={fmt.value}
-              onClick={() => onExport(fmt.value)}
-            >
-              {t(fmt.labelKey)}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}

package/corpus/templates/design/app/components/design/PresentMode.tsx

@@ -1,68 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { useEffect, useCallback, useRef } from "react";
-
-interface PresentModeProps {
-  content: string;
-  onExit: () => void;
-}
-
-export function PresentMode({ content, onExit }: PresentModeProps) {
-  const t = useT();
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onExit();
-      }
-    },
-    [onExit],
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
-  // Enter fullscreen on mount
-  useEffect(() => {
-    document.documentElement.requestFullscreen?.().catch(() => {
-      // Fullscreen may not be available; continue in windowed mode
-    });
-
-    return () => {
-      if (document.fullscreenElement) {
-        document.exitFullscreen?.().catch(() => {});
-      }
-    };
-  }, []);
-
-  // Listen for fullscreen exit to trigger onExit
-  useEffect(() => {
-    function handleFullscreenChange() {
-      if (!document.fullscreenElement) {
-        onExit();
-      }
-    }
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () =>
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, [onExit]);
-
-  const srcdoc = content.includes("</body>")
-    ? content
-    : `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}</style></head><body>${content}</body></html>`;
-
-  return (
-    <div className="fixed inset-0 z-[9999] bg-black flex items-center justify-center">
-      <iframe
-        ref={iframeRef}
-        srcDoc={srcdoc}
-        sandbox="allow-scripts"
-        className="w-full h-full border-0"
-        title={t("designEditor.presentMode")}
-      />
-    </div>
-  );
-}

package/corpus/templates/design/app/components/design/ViewportTabs.tsx

@@ -1,149 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconPlus, IconX } from "@tabler/icons-react";
-import { useState, useRef, useCallback } from "react";
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-
-import type { ViewportTab } from "./types";
-
-interface ViewportTabsProps {
-  tabs: ViewportTab[];
-  activeTab: string;
-  onTabChange: (id: string) => void;
-  onTabClose: (id: string) => void;
-  onTabAdd: () => void;
-}
-
-export function ViewportTabs({
-  tabs,
-  activeTab,
-  onTabChange,
-  onTabClose,
-  onTabAdd,
-}: ViewportTabsProps) {
-  const t = useT();
-  const [draggedTab, setDraggedTab] = useState<string | null>(null);
-  const [contextTab, setContextTab] = useState<string | null>(null);
-  const tabsRef = useRef<HTMLDivElement>(null);
-
-  const handleDragStart = useCallback((e: React.DragEvent, tabId: string) => {
-    setDraggedTab(tabId);
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", tabId);
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-  }, []);
-
-  const handleDrop = useCallback((e: React.DragEvent, targetId: string) => {
-    e.preventDefault();
-    const sourceId = e.dataTransfer.getData("text/plain");
-    if (sourceId === targetId) return;
-    // Reorder is handled by the parent via tab ordering.
-    // For now we just clear drag state; parent can implement reorder via onTabReorder if needed.
-    setDraggedTab(null);
-  }, []);
-
-  const handleDragEnd = useCallback(() => {
-    setDraggedTab(null);
-  }, []);
-
-  const handleCloseOthers = useCallback(
-    (keepId: string) => {
-      tabs.forEach((tab) => {
-        if (tab.id !== keepId) {
-          onTabClose(tab.id);
-        }
-      });
-    },
-    [tabs, onTabClose],
-  );
-
-  const handleCloseAll = useCallback(() => {
-    tabs.forEach((tab) => onTabClose(tab.id));
-  }, [tabs, onTabClose]);
-
-  return (
-    <div className="flex items-center border-b border-border bg-muted/30 h-9 overflow-hidden">
-      <div ref={tabsRef} className="flex items-center flex-1 overflow-x-auto">
-        {tabs.map((tab) => (
-          <DropdownMenu
-            key={tab.id}
-            open={contextTab === tab.id}
-            onOpenChange={(open) => !open && setContextTab(null)}
-          >
-            <DropdownMenuTrigger asChild>
-              <div
-                draggable
-                onDragStart={(e) => handleDragStart(e, tab.id)}
-                onDragOver={handleDragOver}
-                onDrop={(e) => handleDrop(e, tab.id)}
-                onDragEnd={handleDragEnd}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  setContextTab(tab.id);
-                }}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  "group relative flex items-center gap-1.5 px-3 h-9 text-xs cursor-pointer select-none border-r border-border shrink-0",
-                  tab.id === activeTab
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:bg-background/50",
-                  draggedTab === tab.id && "opacity-50",
-                )}
-              >
-                <span className="truncate max-w-[120px]">{tab.filename}</span>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onTabClose(tab.id);
-                  }}
-                  className={cn(
-                    "shrink-0 rounded p-0.5 hover:bg-muted",
-                    tab.id === activeTab
-                      ? "opacity-60 hover:opacity-100"
-                      : "opacity-0 group-hover:opacity-60 hover:!opacity-100",
-                  )}
-                >
-                  <IconX className="w-3 h-3" />
-                </button>
-                {/* Active indicator */}
-                {tab.id === activeTab && (
-                  <div className="absolute bottom-0 left-0 right-0 h-px bg-foreground" />
-                )}
-              </div>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-40">
-              <DropdownMenuItem onClick={() => onTabClose(tab.id)}>
-                {t("designEditor.closeTab")}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleCloseOthers(tab.id)}>
-                {t("designEditor.closeOtherTabs")}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleCloseAll}>
-                {t("designEditor.closeAllTabs")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ))}
-      </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-9 w-9 shrink-0 rounded-none"
-        onClick={onTabAdd}
-      >
-        <IconPlus className="w-3.5 h-3.5" />
-      </Button>
-    </div>
-  );
-}