@agent-native/core 0.80.11 → 0.81.0

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -139,6 +139,10 @@ export interface DesignColorPickerProps {
   onChange: (value: string) => void;
   onPaintValueChange?: (value: string) => void;
   onImageFillChange?: (value: ImageFillValue) => void;
+  backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundRepeat?: string;
+  backgroundPosition?: string;
   label?: string;
   opacity?: number;
   onOpacityChange?: (opacity: number) => void;
@@ -684,6 +688,10 @@ export function DesignColorPicker({
   onChange,
   onPaintValueChange,
   onImageFillChange,
+  backgroundImage,
+  backgroundSize,
+  backgroundRepeat,
+  backgroundPosition,
   label: _label,
   opacity,
   onOpacityChange,
@@ -723,6 +731,27 @@ export function DesignColorPicker({
   )
     ? blendMode
     : "normal";
+  const parsedImageFill = useMemo(
+    () =>
+      backgroundImage !== undefined ||
+      backgroundSize !== undefined ||
+      backgroundRepeat !== undefined ||
+      backgroundPosition !== undefined
+        ? parseImageFillCss({
+            backgroundImage: backgroundImage ?? value,
+            backgroundSize,
+            backgroundRepeat,
+            backgroundPosition,
+          })
+        : parseImageFillCss(value),
+    [
+      backgroundImage,
+      backgroundPosition,
+      backgroundRepeat,
+      backgroundSize,
+      value,
+    ],
+  );
 
   const [mode, setMode] = useState<DesignColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
@@ -748,10 +777,9 @@ export function DesignColorPicker({
     null,
   );
   const [selectedStopId, setSelectedStopId] = useState<string>("");
-  const [imageFill, setImageFill] = useState<ImageFillValue>({
-    url: "",
-    fit: "fill",
-  });
+  const [imageFill, setImageFill] = useState<ImageFillValue>(
+    () => parsedImageFill ?? { url: "", fit: "fill" },
+  );
   const [shaderDescriptor, setShaderDescriptor] =
     useState<ShaderDescriptor | null>(null);
 
@@ -796,16 +824,14 @@ export function DesignColorPicker({
 
   // Keep image-fill state synced when the incoming value is an image fill.
   useEffect(() => {
-    if (effectivePaintType !== "image") return;
-    const parsed = parseImageFillCss(value);
-    if (
-      parsed &&
-      (parsed.url !== imageFill.url || parsed.fit !== imageFill.fit)
-    ) {
-      setImageFill(parsed);
-    }
+    if (!parsedImageFill) return;
+    setImageFill((current) =>
+      current.url === parsedImageFill.url && current.fit === parsedImageFill.fit
+        ? current
+        : parsedImageFill,
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, effectivePaintType]);
+  }, [parsedImageFill?.url, parsedImageFill?.fit]);
 
   // Ensure a selected stop id exists whenever a gradient is active.
   useEffect(() => {
@@ -987,11 +1013,14 @@ export function DesignColorPicker({
       return;
     }
     if (nextType === "image") {
-      if (onImageFillChange && imageFill.url) {
-        onImageFillChange(imageFill);
+      const nextImageFill = parsedImageFill ?? imageFill;
+      if (onImageFillChange && nextImageFill.url) {
+        onImageFillChange(nextImageFill);
         return;
       }
-      emitPaintValue(imageFill.url ? imageFillToCss(imageFill) : "transparent");
+      emitPaintValue(
+        nextImageFill.url ? imageFillToCss(nextImageFill) : "transparent",
+      );
       return;
     }
     if (nextType === "video") {

package/corpus/templates/design/app/components/design/inspector/ImageFillControls.tsx

@@ -25,6 +25,13 @@ export interface ImageFillValue {
   fit: ImageFitMode;
 }
 
+export interface ImageFillBackgroundStyles {
+  backgroundImage: string;
+  backgroundSize?: string;
+  backgroundRepeat?: string;
+  backgroundPosition?: string;
+}
+
 const FIT_MODES: Array<{ mode: ImageFitMode; label: string }> = [
   { mode: "fill", label: "Fill" }, // i18n-ignore image fit mode
   { mode: "fit", label: "Fit" }, // i18n-ignore image fit mode
@@ -98,8 +105,8 @@ export function imageFillToBackgroundStyles(
       backgroundPosition: "center",
     };
   }
-  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
-  const backgroundImage = `url("${safeUrl}")`;
+  const safeUrl = escapeForQuotedUrl(url);
+  const backgroundImage = `url("${safeUrl}") ${imageFitMarker(value.fit)}`;
   switch (value.fit) {
     case "fit":
       return {
@@ -139,23 +146,95 @@ export function imageFillToBackgroundStyles(
 //   group 3 — unquoted:       url(...no-parens-or-quotes...)
 const URL_RE = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)'"]*?))\s*\)/i;
 
-/** Extract the URL + fit mode from a CSS background value, if present. */
-export function parseImageFillCss(value: string): ImageFillValue | null {
-  const match = value.match(URL_RE);
+function normalizeCssLayer(value: string | undefined): string {
+  return value?.trim().toLowerCase() ?? "";
+}
+
+function firstCssLayer(value: string | undefined): string {
+  const trimmed = value?.trim() ?? "";
+  if (!trimmed) return "";
+  let depth = 0;
+  for (let index = 0; index < trimmed.length; index += 1) {
+    const char = trimmed[index];
+    if (char === "(") depth += 1;
+    if (char === ")") depth = Math.max(0, depth - 1);
+    if (char === "," && depth === 0) return trimmed.slice(0, index).trim();
+  }
+  return trimmed;
+}
+
+function isStartBackgroundPosition(position: string): boolean {
+  if (!position) return false;
+  const normalized = position
+    .replace(/\s+/g, " ")
+    .replace(/\b0(?:\.0+)?(?:px|em|rem|%)\b/g, "0")
+    .trim();
+  const tokens = normalized.split(" ").filter(Boolean);
+  if (tokens.length === 1) {
+    return tokens[0] === "0" || tokens[0] === "top" || tokens[0] === "left";
+  }
+  const horizontal = tokens[0];
+  const vertical = tokens[1];
+  return (
+    (horizontal === "left" || horizontal === "0") &&
+    (vertical === "top" || vertical === "0")
+  );
+}
+
+function inferFitFromBackgroundStyles(
+  styles: ImageFillBackgroundStyles,
+): ImageFitMode | null {
+  const size = normalizeCssLayer(firstCssLayer(styles.backgroundSize));
+  const repeat = normalizeCssLayer(firstCssLayer(styles.backgroundRepeat));
+  const position = normalizeCssLayer(firstCssLayer(styles.backgroundPosition));
+
+  if (size === "contain") return "fit";
+  if (repeat === "repeat" || repeat === "repeat-x" || repeat === "repeat-y") {
+    return "tile";
+  }
+  if (size === "auto" && repeat === "repeat") return "tile";
+  if (
+    isStartBackgroundPosition(position) &&
+    (repeat === "repeat" || size === "auto")
+  ) {
+    return "tile";
+  }
+  if (size === "cover") return "fill";
+  return null;
+}
+
+/** Extract the URL + fit mode from CSS background input, if present. */
+export function parseImageFillCss(value: string): ImageFillValue | null;
+export function parseImageFillCss(
+  value: ImageFillBackgroundStyles,
+): ImageFillValue | null;
+export function parseImageFillCss(
+  value: string | ImageFillBackgroundStyles,
+): ImageFillValue | null {
+  const styles = typeof value === "string" ? { backgroundImage: value } : value;
+  const match = styles.backgroundImage.match(URL_RE);
   if (!match) return null;
   const url = (match[1] ?? match[2] ?? match[3] ?? "").trim();
-  const marker = value.match(FIT_MARKER_RE)?.[1] as ImageFitMode | undefined;
+  const marker = styles.backgroundImage.match(FIT_MARKER_RE)?.[1] as
+    | ImageFitMode
+    | undefined;
   if (marker) return { url, fit: marker };
+  const inferredFit = inferFitFromBackgroundStyles(styles);
+  if (inferredFit) return { url, fit: inferredFit };
   // Heuristic fallback when no marker comment is present (e.g. CSS pasted from
   // DevTools or Figma inspect). Note: "crop" and "fill" produce identical CSS
   // (center / cover no-repeat), so external CSS without the marker comment will
   // always parse as "fill". Crop mode is only recoverable via the proprietary
   // agent-native-image-fit marker written by imageFillToCss.
   let fit: ImageFitMode = "fill";
-  if (/contain/i.test(value)) fit = "fit";
-  else if (/repeat(?!\s+no)/i.test(value) && !/no-repeat/i.test(value))
+  const backgroundImage = styles.backgroundImage;
+  if (/contain/i.test(backgroundImage)) fit = "fit";
+  else if (
+    /repeat(?!\s+no)/i.test(backgroundImage) &&
+    !/no-repeat/i.test(backgroundImage)
+  )
     fit = "tile";
-  else if (/cover/i.test(value)) fit = "fill";
+  else if (/cover/i.test(backgroundImage)) fit = "fill";
   return { url, fit };
 }
 

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

@@ -47,7 +47,9 @@ export interface UploadedFile {
 }
 
 const DEFAULT_ASSETS_PICKER_URL = "https://assets.agent-native.com/picker";
-const MAX_CHAT_IMAGE_ATTACHMENT_BYTES = 4 * 1024 * 1024;
+const RAW_CHAT_IMAGE_ATTACHMENT_BYTES = 512 * 1024;
+const MAX_TOTAL_CHAT_IMAGE_DATA_URL_BYTES = 3_000_000;
+const DEFAULT_MAX_CHAT_IMAGE_DATA_URL_BYTES = 1_250_000;
 const CHAT_IMAGE_ATTACHMENT_TYPES = new Set([
   "image/gif",
   "image/jpeg",
@@ -55,6 +57,11 @@ const CHAT_IMAGE_ATTACHMENT_TYPES = new Set([
   "image/png",
   "image/webp",
 ]);
+const IMAGE_COMPRESSION_PASSES = [
+  { maxDimension: 1400, jpegQuality: 0.76 },
+  { maxDimension: 1024, jpegQuality: 0.7 },
+  { maxDimension: 768, jpegQuality: 0.65 },
+];
 
 interface PickedAssetImagePayload {
   url?: unknown;
@@ -113,14 +120,11 @@ function pickedAssetContext(payload: unknown, url: string) {
   return lines.join("\n");
 }
 
-function readChatImageAttachment(file: File): Promise<string | null> {
-  if (
-    file.size > MAX_CHAT_IMAGE_ATTACHMENT_BYTES ||
-    !CHAT_IMAGE_ATTACHMENT_TYPES.has(file.type.toLowerCase())
-  ) {
-    return Promise.resolve(null);
-  }
+function dataUrlBytes(dataUrl: string): number {
+  return new TextEncoder().encode(dataUrl).byteLength;
+}
 
+function readFileDataUrl(file: File): Promise<string | null> {
   return new Promise((resolve) => {
     const reader = new FileReader();
     reader.onload = () =>
@@ -130,6 +134,77 @@ function readChatImageAttachment(file: File): Promise<string | null> {
   });
 }
 
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to decode image"));
+    img.src = url;
+  });
+}
+
+async function compressImageAttachment(
+  file: File,
+  maxDimension: number,
+  jpegQuality: number,
+): Promise<string | null> {
+  if (typeof document === "undefined" || typeof Image === "undefined") {
+    return null;
+  }
+
+  const objectUrl = URL.createObjectURL(file);
+  try {
+    const image = await loadImage(objectUrl);
+    const ratio = Math.min(
+      maxDimension / image.naturalWidth,
+      maxDimension / image.naturalHeight,
+      1,
+    );
+    const width = Math.max(1, Math.round(image.naturalWidth * ratio));
+    const height = Math.max(1, Math.round(image.naturalHeight * ratio));
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(image, 0, 0, width, height);
+    return canvas.toDataURL("image/jpeg", jpegQuality);
+  } catch {
+    return null;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
+async function readChatImageAttachment(
+  file: File,
+  maxDataUrlBytes = DEFAULT_MAX_CHAT_IMAGE_DATA_URL_BYTES,
+): Promise<string | null> {
+  if (!CHAT_IMAGE_ATTACHMENT_TYPES.has(file.type.toLowerCase())) return null;
+
+  if (file.size <= RAW_CHAT_IMAGE_ATTACHMENT_BYTES) {
+    const raw = await readFileDataUrl(file);
+    if (raw && dataUrlBytes(raw) <= maxDataUrlBytes) return raw;
+  }
+
+  let fallback: string | null = null;
+  for (const pass of IMAGE_COMPRESSION_PASSES) {
+    const compressed = await compressImageAttachment(
+      file,
+      pass.maxDimension,
+      pass.jpegQuality,
+    );
+    if (!compressed) continue;
+    fallback = compressed;
+    if (dataUrlBytes(compressed) <= maxDataUrlBytes) {
+      return compressed;
+    }
+  }
+  return fallback && dataUrlBytes(fallback) <= maxDataUrlBytes
+    ? fallback
+    : null;
+}
+
 interface AssetsPickerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -355,8 +430,18 @@ export default function PromptPopover({
           );
         }
         const uploaded = (await res.json()) as UploadedFile[];
+        const imageFileCount =
+          files.filter((file) =>
+            CHAT_IMAGE_ATTACHMENT_TYPES.has(file.type.toLowerCase()),
+          ).length || 1;
+        const maxImageDataUrlBytes = Math.min(
+          DEFAULT_MAX_CHAT_IMAGE_DATA_URL_BYTES,
+          Math.floor(MAX_TOTAL_CHAT_IMAGE_DATA_URL_BYTES / imageFileCount),
+        );
         const visualAttachments = await Promise.all(
-          files.map((file) => readChatImageAttachment(file)),
+          files.map((file) =>
+            readChatImageAttachment(file, maxImageDataUrlBytes),
+          ),
         );
         return uploaded.map((file, index) =>
           visualAttachments[index]

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -39,9 +39,9 @@ const BARE_PREFIXES = ["/present/"];
 
 /**
  * Routes where the page renders its own toolbar instead of the global Header.
- * The Sidebar + AgentSidebar still render. The Header is hidden so the page
- * can supply a richer custom toolbar (e.g. DesignEditor mode/zoom/device,
- * shared ExtensionViewer / ExtensionsListPage chrome).
+ * The Header is hidden so the page can supply richer custom chrome (e.g.
+ * DesignEditor mode/zoom/device, shared ExtensionViewer / ExtensionsListPage
+ * chrome). The editor owns its agent surface inside its Figma-style left rail.
  */
 const EDITOR_PREFIXES = ["/design/", "/extensions"];
 
@@ -117,6 +117,22 @@ export function Layout({ children }: LayoutProps) {
     );
   }
 
+  if (isDesignEditor) {
+    return (
+      <HeaderActionsProvider>
+        <MobileSidebarContext.Provider value={null}>
+          <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
+            <div className="agent-layout-main-surface design-editor-main-surface flex h-full flex-1 flex-col overflow-hidden">
+              <main className="agent-native-app-main flex-1 overflow-hidden">
+                {children}
+              </main>
+            </div>
+          </div>
+        </MobileSidebarContext.Provider>
+      </HeaderActionsProvider>
+    );
+  }
+
   return (
     <HeaderActionsProvider>
       <MobileSidebarContext.Provider

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -163,7 +163,7 @@ export function Sidebar() {
             </div>
 
             <div className="px-3 py-2">
-              <OrgSwitcher />
+              <OrgSwitcher reserveSpace />
             </div>
 
             <div className="px-3 py-2">

package/corpus/templates/design/app/global.css

@@ -220,6 +220,13 @@
   box-shadow: none;
 }
 
+.agent-layout-shell .design-editor-main-surface {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .dark .agent-layout-shell,
 .dark .agent-sidebar-shell,
 .dark.agent-layout-shell,

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -12,6 +12,8 @@ export interface NavigationState {
   editorView?: "single" | "overview";
   inspectorTab?: "design" | "tweaks" | "extensions";
   inspector?: "design" | "tweaks" | "extensions";
+  leftPanel?: "file" | "agent" | "assets" | "tools" | "tokens";
+  panel?: "file" | "agent" | "assets" | "tools" | "tokens";
   fileId?: string;
   screenId?: string;
   filename?: string;
@@ -44,6 +46,8 @@ export interface DesignEditorCommand {
   viewMode?: "single" | "overview";
   inspectorTab?: "design" | "tweaks" | "extensions";
   inspector?: "design" | "tweaks" | "extensions";
+  leftPanel?: "file" | "agent" | "assets" | "tools" | "tokens";
+  panel?: "file" | "agent" | "assets" | "tools" | "tokens";
   fileId?: string;
   screenId?: string;
   filename?: string;
@@ -80,6 +84,19 @@ function normalizeInspectorTab(
     : undefined;
 }
 
+function normalizeLeftPanel(
+  value: unknown,
+): "file" | "agent" | "assets" | "tools" | "tokens" | undefined {
+  if (value === "extensions") return "tools";
+  return value === "file" ||
+    value === "agent" ||
+    value === "assets" ||
+    value === "tools" ||
+    value === "tokens"
+    ? value
+    : undefined;
+}
+
 function normalizeDesignTool(value: unknown): string | undefined {
   return typeof value === "string" &&
     DESIGN_EDITOR_TOOLS.includes(value as (typeof DESIGN_EDITOR_TOOLS)[number])
@@ -96,6 +113,8 @@ export function editorPathFromCommand(cmd: NavigationState): string | null {
   if (editorView) params.set("view", editorView);
   const inspectorTab = normalizeInspectorTab(cmd.inspectorTab ?? cmd.inspector);
   if (inspectorTab) params.set("inspector", inspectorTab);
+  const leftPanel = normalizeLeftPanel(cmd.leftPanel ?? cmd.panel);
+  if (leftPanel) params.set("panel", leftPanel);
   const screen = cmd.fileId ?? cmd.screenId ?? cmd.filename ?? cmd.screen;
   if (screen) params.set("screen", screen);
   if (typeof cmd.zoom === "number" && Number.isFinite(cmd.zoom)) {
@@ -117,6 +136,9 @@ export function editorCommandFromNavigate(
   if (cmd.view !== "editor" || !cmd.designId) return null;
   const editorView = normalizeEditorView(cmd.editorView);
   const inspectorTab = normalizeInspectorTab(cmd.inspectorTab ?? cmd.inspector);
+  const leftPanel =
+    normalizeLeftPanel(cmd.leftPanel ?? cmd.panel) ??
+    normalizeLeftPanel(cmd.inspectorTab ?? cmd.inspector);
   const command: DesignEditorCommand = {
     designId: cmd.designId,
     issuedAt: Date.now(),
@@ -124,6 +146,7 @@ export function editorCommandFromNavigate(
   };
   if (editorView) command.editorView = editorView;
   if (inspectorTab) command.inspectorTab = inspectorTab;
+  if (leftPanel) command.leftPanel = leftPanel;
   if (cmd.fileId) command.fileId = cmd.fileId;
   if (cmd.screenId) command.screenId = cmd.screenId;
   if (cmd.filename) command.filename = cmd.filename;

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -240,6 +240,17 @@ const messages = {
   },
   designEditor: {
     askAgent: "詢問代理",
+    applyToSource: "套用至來源",
+    applyToSourcePath: "套用至來源（{{path}}）",
+    writingToSource: "寫入中…",
+    leftRail: {
+      file: "檔案",
+      agent: "代理",
+      assets: "資源",
+      tools: "工具",
+      tokens: "權杖",
+      label: "設計工作區",
+    },
     tokens: {
       title: "權杖",
       newToken: "新增權杖",
@@ -247,6 +258,15 @@ const messages = {
       value: "值",
       add: "新增權杖",
       refresh: "重新整理權杖",
+      import: "匯入權杖",
+      importTitle: "匯入權杖",
+      importHint: "先使用 design.md、CSS、主題檔案或目前設計，再手動新增權杖。",
+      files: "檔案",
+      folder: "資料夾",
+      current: "目前",
+      pastePlaceholder: "--color-accent: #2563eb;\n主要顏色: #2563eb",
+      importPasted: "匯入貼上的權杖",
+      importedCount: "已匯入 {{count}} 個權杖",
       empty: "尚無權杖",
       emptyHint: "新增設計權杖以重複使用顏色、間距等。",
       applying: "套用中…",
@@ -466,6 +486,7 @@ const messages = {
     hide: "隱藏圖層",
     show: "顯示圖層",
     rename: "重新命名圖層",
+    deleteBoardObject: "刪除畫布物件",
     selected: "已選取 {{count}} 個",
   },
   multiScreenCanvas: {