@agent-native/core 0.80.4 → 0.80.5

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

@@ -1,5 +1,5 @@
 import { IconPhotoPlus, IconX } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { Input } from "@/components/ui/input";
 import {
@@ -45,7 +45,7 @@ function imageFitMarker(fit: ImageFitMode): string {
 
 /**
  * Build the CSS `background` shorthand for an image fill.
- * Maps Figma's fit semantics onto background-size / background-repeat:
+ * Maps the design editor's fit semantics onto background-size / background-repeat:
  *  - Fill → cover, no-repeat
  *  - Fit  → contain, no-repeat
  *  - Crop → cover, no-repeat (cropped to the box; identical CSS to Fill but
@@ -79,6 +79,11 @@ export function parseImageFillCss(value: string): ImageFillValue | null {
   const url = match[2];
   const marker = value.match(FIT_MARKER_RE)?.[1] as ImageFitMode | undefined;
   if (marker) return { url, fit: marker };
+  // 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))
@@ -105,6 +110,10 @@ export function ImageFillControls({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [urlDraft, setUrlDraft] = useState(value.url);
 
+  useEffect(() => {
+    setUrlDraft(value.url);
+  }, [value.url]);
+
   const commitUrl = () => {
     onChange({ ...value, url: urlDraft.trim() });
   };
@@ -132,7 +141,7 @@ export function ImageFillControls({
         className="relative h-24 w-full overflow-hidden rounded-md border border-border/60"
         style={{
           backgroundImage: value.url
-            ? `url("${value.url}")`
+            ? `url("${value.url.trim().replace(/["')]/g, encodeURIComponent)}")`
             : CHECKERBOARD_IMAGE,
           backgroundSize: value.url
             ? value.fit === "fit"
@@ -142,7 +151,7 @@ export function ImageFillControls({
                 : "cover"
             : "8px 8px, 8px 8px, 8px 8px, 8px 8px",
           backgroundRepeat: value.fit === "tile" ? "repeat" : "no-repeat",
-          backgroundPosition: "center",
+          backgroundPosition: value.fit === "tile" ? "top left" : "center",
         }}
       >
         {!value.url && (

package/corpus/templates/design/app/components/design/inspector/SHADER_INTEGRATION.md

@@ -8,30 +8,30 @@ Do NOT rely on line numbers — they drift. Use the search strings instead.
 
 ---
 
-## (a) FigmaColorPicker.tsx — Add `"shader"` fill type
+## (a) DesignColorPicker.tsx — Add `"shader"` fill type
 
-**File:** `app/components/design/inspector/FigmaColorPicker.tsx`
+**File:** `app/components/design/inspector/DesignColorPicker.tsx`
 
-### 1. Extend `FigmaFillType`
+### 1. Extend `DesignFillType`
 
 Search for:
 
 ```ts
-export type FigmaFillType = "solid" | "gradient" | "image";
+export type DesignFillType = "solid" | "gradient" | "image";
 ```
 
 Replace with:
 
 ```ts
-export type FigmaFillType = "solid" | "gradient" | "image" | "shader";
+export type DesignFillType = "solid" | "gradient" | "image" | "shader";
 ```
 
-### 2. Extend `FigmaPaintType`
+### 2. Extend `DesignPaintType`
 
 Search for:
 
 ```ts
-export type FigmaPaintType =
+export type DesignPaintType =
   | "solid"
   | "linear"
   | "radial"
@@ -43,7 +43,7 @@ export type FigmaPaintType =
 Replace with:
 
 ```ts
-export type FigmaPaintType =
+export type DesignPaintType =
   | "solid"
   | "linear"
   | "radial"
@@ -53,7 +53,7 @@ export type FigmaPaintType =
   | "shader";
 ```
 
-### 3. Add `canUseShaders` prop to `FigmaColorPickerProps`
+### 3. Add `canUseShaders` prop to `DesignColorPickerProps`
 
 Search for:
 
@@ -407,10 +407,10 @@ shader token picker.
 
 ## Integration Checklist
 
-- [ ] `FigmaColorPicker.tsx` — `FigmaFillType` includes `"shader"`
-- [ ] `FigmaColorPicker.tsx` — `FigmaPaintType` includes `"shader"`
-- [ ] `FigmaColorPicker.tsx` — shader button renders in paint-type row
-- [ ] `FigmaColorPicker.tsx` — `ShaderControls` renders when `paintType === "shader"`
+- [ ] `DesignColorPicker.tsx` — `DesignFillType` includes `"shader"`
+- [ ] `DesignColorPicker.tsx` — `DesignPaintType` includes `"shader"`
+- [ ] `DesignColorPicker.tsx` — shader button renders in paint-type row
+- [ ] `DesignColorPicker.tsx` — `ShaderControls` renders when `paintType === "shader"`
 - [ ] `EditPanel.tsx` — `ShaderEffectRow` renders in `EffectsProperties`
 - [ ] `EditPanel.tsx` — "Add Shader" option in effects dropdown
 - [ ] `actions/apply-shader.ts` exists

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

@@ -78,7 +78,7 @@ export function ScrubInput({
   const dragRef = useRef({
     pointerId: -1,
     startX: 0,
-    startValue: value,
+    prevX: 0,
     hasDragged: false,
   });
 
@@ -112,7 +112,7 @@ export function ScrubInput({
       event.preventDefault();
       const direction = event.key === "ArrowUp" ? 1 : -1;
       // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
-      // Cmd (metaKey) mirrors Shift for ×10 — Figma convention on macOS.
+      // Cmd (metaKey) mirrors Shift for ×10 — editor convention on macOS.
       const baseStep = getScrubStepFromEvent(event, step);
       const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
       setNextValue(value + direction * baseStep * cmdMultiplier, {
@@ -143,7 +143,7 @@ export function ScrubInput({
     dragRef.current = {
       pointerId: event.pointerId,
       startX: event.clientX,
-      startValue: value,
+      prevX: event.clientX,
       hasDragged: false,
     };
     event.currentTarget.setPointerCapture(event.pointerId);
@@ -152,12 +152,16 @@ export function ScrubInput({
 
   const handlePointerMove = (event: PointerEvent<HTMLLabelElement>) => {
     if (!dragging || dragRef.current.pointerId !== event.pointerId) return;
-    const delta = event.clientX - dragRef.current.startX;
-    if (delta === 0) return;
+    const incr = event.clientX - dragRef.current.prevX;
+    if (incr === 0) return;
+    dragRef.current.prevX = event.clientX;
     dragRef.current.hasDragged = true;
+    // Use incremental deltas from the last move so that clamped/rounded values
+    // committed by onChange are respected. A total-delta approach would create
+    // a dead zone equal to the amount dragged past the clamp boundary.
     const next =
-      dragRef.current.startValue +
-      delta *
+      value +
+      incr *
         getScrubStepFromEvent(
           { altKey: event.altKey, shiftKey: event.shiftKey },
           step,
@@ -171,7 +175,7 @@ export function ScrubInput({
     const wasDrag = dragRef.current.hasDragged;
     setDragging(false);
     // If the pointer was released without dragging (a plain click), focus the
-    // input so the user can type immediately — mirrors Figma's label click
+    // input so the user can type immediately — mirrors the design editor's label click
     // behaviour (the event.preventDefault() in handlePointerDown blocks the
     // native label→input focus transfer).
     if (!wasDrag && !disabled) {
@@ -227,7 +231,7 @@ export function ScrubInput({
         onChange={(event) => setDraft(event.target.value)}
         onKeyDown={handleKeyDown}
         className={cn(
-          // Compact Figma-style: h-6, 11px tabular text, ring-1 with no offset.
+          // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.
           "h-6 text-[11px] tabular-nums",
           "focus-visible:ring-1 focus-visible:ring-offset-0",
           inputClassName,

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

@@ -151,7 +151,7 @@ function ParamLabel({ children }: { children: React.ReactNode }) {
 }
 
 // ---------------------------------------------------------------------------
-// Color swatch button — Figma style: rounded rect swatch + hex label inline
+// Color swatch button — design-editor style: rounded rect swatch + hex label inline
 // ---------------------------------------------------------------------------
 
 interface ColorSwatchProps {
@@ -161,6 +161,14 @@ interface ColorSwatchProps {
 }
 
 function ColorSwatch({ color, label, onChange }: ColorSwatchProps) {
+  // <input type="color"> only accepts 6-digit hex; strip any alpha suffix before
+  // passing as value, then reattach it when the user picks a new color so alpha
+  // is preserved rather than silently dropped.
+  const sixDigit =
+    color.length === 9 && color.startsWith("#") ? color.slice(0, 7) : color;
+  const alphaSuffix =
+    color.length === 9 && color.startsWith("#") ? color.slice(7) : "";
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -178,8 +186,8 @@ function ColorSwatch({ color, label, onChange }: ColorSwatchProps) {
           </span>
           <input
             type="color"
-            value={color}
-            onChange={(e) => onChange(e.target.value)}
+            value={sixDigit}
+            onChange={(e) => onChange(e.target.value + alphaSuffix)}
             className="sr-only"
             aria-label={label}
           />
@@ -387,11 +395,12 @@ export function ShaderControls({
       }
     }
 
+    setAnimated(false);
     onChange({
       preset: newPreset.name,
       params: defaults,
       colors: newPreset.defaultColors ?? undefined,
-      speed: descriptor.speed,
+      speed: 0,
       frame: descriptor.frame,
     });
   }

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

@@ -287,13 +287,13 @@ export function ShaderFillsPanel({
     );
   }
 
-  // ── Browse view: Figma-style title + search + Created by you + By Figma ───
+  // ── Browse view: design-editor title + search + Created by you + Library presets ───
   return (
     <div className="flex flex-col">
       {/* Header: "Shader fills" title + + button + × button */}
       <div className="flex h-6 items-center gap-1 px-3">
         <span className="flex-1 truncate text-[11px] font-semibold text-foreground">
-          {"Shader fills" /* i18n-ignore Figma panel title */}
+          {"Shader fills" /* i18n-ignore design panel title */}
         </span>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -351,7 +351,7 @@ export function ShaderFillsPanel({
         {!search && (
           <section className="mb-3">
             <p className="mb-1.5 text-[10px] font-semibold text-muted-foreground">
-              {"Created by you" /* i18n-ignore Figma section */}
+              {"Created by you" /* i18n-ignore design section */}
             </p>
             {/* 2-col grid — "Create new" tile occupies the first cell */}
             <div className="grid grid-cols-2 gap-2">
@@ -372,18 +372,18 @@ export function ShaderFillsPanel({
                 </span>
                 <IconPlus className="size-4" />
                 <span className="text-[10px]">
-                  {"Create new" /* i18n-ignore Figma create tile */}
+                  {"Create new" /* i18n-ignore design create tile */}
                 </span>
               </button>
             </div>
           </section>
         )}
 
-        {/* ── By Figma — 2-col preset thumbnail grid ── */}
+        {/* ── Library presets — 2-col preset thumbnail grid ── */}
         <section>
           {!search && (
             <p className="mb-1.5 text-[10px] font-semibold text-muted-foreground">
-              {"By Figma" /* i18n-ignore Figma section */}
+              {"Library presets" /* i18n-ignore design section */}
             </p>
           )}
           {filtered.length === 0 ? (

package/corpus/templates/design/app/components/design/inspector/{figma-icons.tsx → design-icons.tsx}

@@ -378,7 +378,7 @@ export function IconResizeToFit({ className }: IconProps) {
 }
 
 // Auto-layout toggle "on" — rounded rectangle with two small boxes arranged in a row inside
-// Matches Figma's blue auto-layout indicator glyph
+// Matches the design editor's blue auto-layout indicator glyph
 export function IconAutoLayoutOn({ className }: IconProps) {
   return (
     <svg
@@ -583,7 +583,7 @@ export function IconAlignRight({ className }: IconProps) {
 }
 
 // ─────────────────────────────────────────────────
-// W/H sizing-menu glyphs (Figma resizing dropdown rows)
+// W/H sizing-menu glyphs (design resizing dropdown rows)
 // ─────────────────────────────────────────────────
 
 // Sizing: Fixed — a bar bounded by two end-stops (⊢ / fixed dimension)

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -36,18 +36,18 @@ export {
   type ExportSettingsValue,
 } from "./ExportSettingsPanel";
 export {
-  FigmaColorPicker,
-  type FigmaColorMode,
-  type FigmaColorPickerLabels,
-  type FigmaColorPickerProps,
-  type FigmaFillRow,
-  type FigmaFillRowPatch,
-  type FigmaFillType,
-  type FigmaGradientStop,
-  type FigmaGradientStopPatch,
-  type FigmaGradientType,
-  type FigmaPaintType,
-} from "./FigmaColorPicker";
+  DesignColorPicker,
+  type DesignColorMode,
+  type DesignColorPickerLabels,
+  type DesignColorPickerProps,
+  type DesignFillRow,
+  type DesignFillRowPatch,
+  type DesignFillType,
+  type DesignGradientStop,
+  type DesignGradientStopPatch,
+  type DesignGradientType,
+  type DesignPaintType,
+} from "./DesignColorPicker";
 export {
   GradientEditor,
   defaultGradient,

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -69,9 +69,12 @@ export function getScrubStepFromEvent(
   event: Pick<KeyboardEvent | PointerEvent, "altKey" | "shiftKey">,
   step: number,
 ): number {
+  // Alt (fine-step) and Shift (coarse) are mutually exclusive — alt takes
+  // priority, matching Figma's modifier convention. Applying both independently
+  // would make Shift+Alt a no-op (×10 × 0.1 = ×1).
   let multiplier = 1;
-  if (event.shiftKey) multiplier *= 10;
-  if (event.altKey) multiplier *= 0.1;
+  if (event.altKey) multiplier = 0.1;
+  else if (event.shiftKey) multiplier = 10;
   return step * multiplier;
 }
 

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

@@ -307,7 +307,7 @@ export default function PromptPopover({
     panel.style.left = left + "px";
     panel.style.right = "auto";
     panel.style.transform = "none";
-  });
+  }, [open, centered, anchorRef]);
 
   // Close on outside click / escape
   useEffect(() => {
@@ -410,7 +410,7 @@ export default function PromptPopover({
       if (name !== "chooseImage" && name !== "chooseAsset") return;
       const url = pickedAssetImageSource(payload);
       if (!url) {
-        toast.error("Assets did not return an image URL.");
+        toast.error(t("promptDialog.assetsNoImageUrl"));
         return;
       }
 
@@ -433,7 +433,7 @@ export default function PromptPopover({
       setAssetsPickerOpen(false);
       toast.success(t("promptDialog.assetAdded"));
     },
-    [],
+    [t],
   );
 
   const removePickedAsset = useCallback((path: string) => {

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

@@ -2,6 +2,7 @@ import {
   AgentSidebar,
   isEmbedAuthActive,
   getBrowserTabId,
+  useSession,
   useT,
 } from "@agent-native/core/client";
 import { IconMenu2 } from "@tabler/icons-react";
@@ -44,9 +45,11 @@ const BARE_PREFIXES = ["/present/"];
 const EDITOR_PREFIXES = ["/design/", "/extensions"];
 
 export function Layout({ children }: LayoutProps) {
-  useNavigationState();
   const location = useLocation();
   const t = useT();
+  const { session } = useSession();
+  const hasSession = Boolean(session?.email);
+  useNavigationState(hasSession);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
 
@@ -78,7 +81,7 @@ export function Layout({ children }: LayoutProps) {
   const showMobileTopBar = !isDesignEditor;
   const embedded = isEmbedAuthActive();
 
-  if (embedded) {
+  if (embedded || (isDesignEditor && !hasSession)) {
     return (
       <HeaderActionsProvider>
         <MobileSidebarContext.Provider value={null}>

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

@@ -62,7 +62,7 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
+        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
         collapsed ? "w-14" : "w-56",
       )}
     >