@agent-native/core 0.80.0 → 0.80.2

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

@@ -0,0 +1,242 @@
+import { IconPhotoPlus, IconX } from "@tabler/icons-react";
+import { useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type ImageFitMode = "fill" | "fit" | "crop" | "tile";
+
+export interface ImageFillValue {
+  url: string;
+  fit: ImageFitMode;
+}
+
+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
+  { mode: "crop", label: "Crop" }, // i18n-ignore image fit mode
+  { mode: "tile", label: "Tile" }, // i18n-ignore image fit mode
+];
+
+// ─── CSS serialization ─────────────────────────────────────────────────────────
+
+const CHECKER_A = "#d4d4d4";
+const CHECKERBOARD_IMAGE = `linear-gradient(45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(-45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${CHECKER_A} 75%), linear-gradient(-45deg, transparent 75%, ${CHECKER_A} 75%)`;
+const FIT_MARKER_RE =
+  /\/\*\s*agent-native-image-fit:(fill|fit|crop|tile)\s*\*\//i;
+
+function imageFitMarker(fit: ImageFitMode): string {
+  return `/* agent-native-image-fit:${fit} */`;
+}
+
+/**
+ * Build the CSS `background` shorthand for an image fill.
+ * Maps Figma'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
+ *           kept distinct so the selection round-trips)
+ *  - Tile → auto, repeat
+ */
+export function imageFillToCss(value: ImageFillValue): string {
+  const url = value.url.trim();
+  if (!url) return "transparent";
+  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
+  const image = `url("${safeUrl}")`;
+  switch (value.fit) {
+    case "fit":
+      return `${image} center / contain no-repeat ${imageFitMarker("fit")}`;
+    case "tile":
+      return `${image} top left / auto repeat ${imageFitMarker("tile")}`;
+    case "crop":
+      return `${image} center / cover no-repeat ${imageFitMarker("crop")}`;
+    case "fill":
+    default:
+      return `${image} center / cover no-repeat ${imageFitMarker("fill")}`;
+  }
+}
+
+const URL_RE = /url\((['"]?)([^'")]+)\1\)/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);
+  if (!match) return null;
+  const url = match[2];
+  const marker = value.match(FIT_MARKER_RE)?.[1] as ImageFitMode | undefined;
+  if (marker) return { url, fit: marker };
+  let fit: ImageFitMode = "fill";
+  if (/contain/i.test(value)) fit = "fit";
+  else if (/repeat(?!\s+no)/i.test(value) && !/no-repeat/i.test(value))
+    fit = "tile";
+  else if (/cover/i.test(value)) fit = "fill";
+  return { url, fit };
+}
+
+// ─── Component ─────────────────────────────────────────────────────────────────
+
+export interface ImageFillControlsProps {
+  value: ImageFillValue;
+  onChange: (value: ImageFillValue) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function ImageFillControls({
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: ImageFillControlsProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [urlDraft, setUrlDraft] = useState(value.url);
+
+  const commitUrl = () => {
+    onChange({ ...value, url: urlDraft.trim() });
+  };
+
+  const handleFilePick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = typeof reader.result === "string" ? reader.result : "";
+      if (dataUrl) {
+        setUrlDraft(dataUrl);
+        onChange({ ...value, url: dataUrl });
+      }
+    };
+    reader.readAsDataURL(file);
+    // Allow re-selecting the same file later.
+    event.target.value = "";
+  };
+
+  return (
+    <div className={cn("space-y-1.5 px-3 pt-2 pb-2", className)}>
+      {/* ── Preview / drop target ─────────────────────────────────────────── */}
+      <div
+        className="relative h-24 w-full overflow-hidden rounded-md border border-border/60"
+        style={{
+          backgroundImage: value.url
+            ? `url("${value.url}")`
+            : CHECKERBOARD_IMAGE,
+          backgroundSize: value.url
+            ? value.fit === "fit"
+              ? "contain"
+              : value.fit === "tile"
+                ? "auto"
+                : "cover"
+            : "8px 8px, 8px 8px, 8px 8px, 8px 8px",
+          backgroundRepeat: value.fit === "tile" ? "repeat" : "no-repeat",
+          backgroundPosition: "center",
+        }}
+      >
+        {!value.url && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 text-muted-foreground">
+            <IconPhotoPlus className="size-5" />
+            <span className="text-[10px]">
+              {"Upload or paste a URL" /* i18n-ignore */}
+            </span>
+          </div>
+        )}
+        {value.url && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={"Remove image" /* i18n-ignore */}
+                disabled={disabled}
+                onClick={() => {
+                  setUrlDraft("");
+                  onChange({ ...value, url: "" });
+                }}
+                className="absolute right-1 top-1 flex size-5 items-center justify-center rounded bg-black/50 text-white hover:bg-black/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <IconX className="size-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{"Remove image" /* i18n-ignore */}</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      {/* ── URL input + upload ────────────────────────────────────────────── */}
+      <div className="flex items-center gap-1">
+        <Input
+          value={urlDraft}
+          disabled={disabled}
+          placeholder={"Image URL" /* i18n-ignore */}
+          aria-label={"Image URL" /* i18n-ignore */}
+          spellCheck={false}
+          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
+          onChange={(event) => setUrlDraft(event.target.value)}
+          onBlur={commitUrl}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              commitUrl();
+              event.currentTarget.blur();
+            }
+          }}
+        />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              disabled={disabled}
+              aria-label={"Upload image" /* i18n-ignore */}
+              onClick={() => fileInputRef.current?.click()}
+              className={cn(
+                "flex size-6 shrink-0 items-center justify-center rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-muted-foreground hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                disabled && "pointer-events-none opacity-40",
+              )}
+            >
+              <IconPhotoPlus className="size-3.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{"Upload image" /* i18n-ignore */}</TooltipContent>
+        </Tooltip>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFilePick}
+        />
+      </div>
+
+      {/* ── Fit mode dropdown ─────────────────────────────────────────────── */}
+      <Select
+        value={value.fit}
+        onValueChange={(v) => onChange({ ...value, fit: v as ImageFitMode })}
+        disabled={disabled}
+      >
+        <SelectTrigger className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="text-[11px]">
+          {FIT_MODES.map(({ mode, label }) => (
+            <SelectItem key={mode} value={mode} className="text-[11px]">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

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

@@ -73,11 +73,13 @@ export function ScrubInput({
   );
   const [focused, setFocused] = useState(false);
   const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
   const skipNextBlurCommitRef = useRef(false);
   const dragRef = useRef({
     pointerId: -1,
     startX: 0,
     startValue: value,
+    hasDragged: false,
   });
 
   useEffect(() => {
@@ -109,7 +111,11 @@ export function ScrubInput({
     if (event.key === "ArrowUp" || event.key === "ArrowDown") {
       event.preventDefault();
       const direction = event.key === "ArrowUp" ? 1 : -1;
-      setNextValue(value + direction * getScrubStepFromEvent(event, step), {
+      // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
+      // Cmd (metaKey) mirrors Shift for ×10 — Figma convention on macOS.
+      const baseStep = getScrubStepFromEvent(event, step);
+      const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
+      setNextValue(value + direction * baseStep * cmdMultiplier, {
         source: "keyboard",
       });
       return;
@@ -138,6 +144,7 @@ export function ScrubInput({
       pointerId: event.pointerId,
       startX: event.clientX,
       startValue: value,
+      hasDragged: false,
     };
     event.currentTarget.setPointerCapture(event.pointerId);
     setDragging(true);
@@ -147,6 +154,7 @@ export function ScrubInput({
     if (!dragging || dragRef.current.pointerId !== event.pointerId) return;
     const delta = event.clientX - dragRef.current.startX;
     if (delta === 0) return;
+    dragRef.current.hasDragged = true;
     const next =
       dragRef.current.startValue +
       delta *
@@ -160,7 +168,15 @@ export function ScrubInput({
   const endDrag = (event: PointerEvent<HTMLLabelElement>) => {
     if (dragRef.current.pointerId !== event.pointerId) return;
     event.currentTarget.releasePointerCapture(event.pointerId);
+    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
+    // behaviour (the event.preventDefault() in handlePointerDown blocks the
+    // native label→input focus transfer).
+    if (!wasDrag && !disabled) {
+      inputRef.current?.focus();
+    }
   };
 
   return (
@@ -174,9 +190,10 @@ export function ScrubInput({
             onPointerUp={endDrag}
             onPointerCancel={endDrag}
             className={cn(
-              "flex h-6 w-20 shrink-0 cursor-ew-resize select-none items-center gap-1 text-[11px] text-muted-foreground",
-              "hover:bg-[var(--design-editor-control-bg)] hover:rounded-sm",
-              dragging && "text-foreground",
+              "flex h-6 w-20 shrink-0 cursor-ew-resize select-none items-center gap-1 rounded-sm text-[11px] text-muted-foreground transition-colors",
+              "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+              dragging &&
+                "bg-[var(--design-editor-control-bg)] text-foreground",
               disabled && "pointer-events-none cursor-not-allowed opacity-50",
               labelClassName,
             )}
@@ -185,9 +202,10 @@ export function ScrubInput({
             <span className="truncate">{label}</span>
           </Label>
         </TooltipTrigger>
-        <TooltipContent>{`${label}. Drag to scrub, use arrows to step.`}</TooltipContent>
+        <TooltipContent>{`${label} — drag to scrub · ↑↓ step · Shift ×10 · ⌥ fine`}</TooltipContent>
       </Tooltip>
       <Input
+        ref={inputRef}
         id={inputId}
         value={draft}
         disabled={disabled}
@@ -196,7 +214,7 @@ export function ScrubInput({
         aria-label={ariaLabel ?? label}
         onFocus={(event) => {
           setFocused(true);
-          event.target.select();
+          event.currentTarget.select();
         }}
         onBlur={() => {
           setFocused(false);
@@ -208,7 +226,12 @@ export function ScrubInput({
         }}
         onChange={(event) => setDraft(event.target.value)}
         onKeyDown={handleKeyDown}
-        className={cn("h-6 text-[11px] tabular-nums", inputClassName)}
+        className={cn(
+          // Compact Figma-style: 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,
+        )}
       />
     </div>
   );