@agent-native/core 0.80.6 → 0.80.8

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

@@ -1,5 +1,9 @@
 import { useT } from "@agent-native/core/client";
 import {
+  DEFAULT_ASSIGNED_REGION_GAP,
+  DEFAULT_ASSIGNED_REGION_HEIGHT,
+  DEFAULT_ASSIGNED_REGION_MAX_COLUMNS,
+  DEFAULT_ASSIGNED_REGION_WIDTH,
   DEFAULT_SNAP_THRESHOLD_SCREEN_PX,
   appendPolylinePoint,
   computeMoveSnap,
@@ -155,6 +159,7 @@ interface MultiScreenCanvasProps {
   ) => ReactNode;
   selectAllRequest?: number;
   clearSelectionRequest?: number;
+  onSelectionChange?: (selectedIds: string[]) => void;
 }
 
 /**
@@ -413,6 +418,7 @@ export function MultiScreenCanvas({
   renderScreenContent,
   selectAllRequest,
   clearSelectionRequest,
+  onSelectionChange,
 }: MultiScreenCanvasProps) {
   const t = useT();
   const surfaceRef = useRef<HTMLDivElement>(null);
@@ -543,8 +549,14 @@ export function MultiScreenCanvas({
     frameGeometryRef.current = frameGeometry;
   }, [frameGeometry]);
 
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  useEffect(() => {
+    onSelectionChangeRef.current = onSelectionChange;
+  }, [onSelectionChange]);
+
   useEffect(() => {
     selectedIdsRef.current = selectedIds;
+    onSelectionChangeRef.current?.(selectedIds);
   }, [selectedIds]);
 
   useEffect(() => {
@@ -704,17 +716,20 @@ export function MultiScreenCanvas({
     (point: Point) =>
       getCurrentFrameEntries()
         .map((entry, index) => ({ ...entry, index }))
-        .filter((entry) =>
-          rectContainsPoint(
-            {
-              left: entry.geometry.x,
-              top: entry.geometry.y,
-              right: entry.geometry.x + entry.geometry.width,
-              bottom: entry.geometry.y + entry.geometry.height,
-            },
+        .filter((entry) => {
+          const bounds = {
+            left: entry.geometry.x,
+            top: entry.geometry.y,
+            right: entry.geometry.x + entry.geometry.width,
+            bottom: entry.geometry.y + entry.geometry.height,
+          };
+          const local = rotatePointAroundCenter(
             point,
-          ),
-        )
+            getFrameCenter(entry.geometry),
+            entry.geometry.rotation ?? 0,
+          );
+          return rectContainsPoint(bounds, local);
+        })
         .sort(
           (a, b) =>
             (b.geometry.z ?? 0) - (a.geometry.z ?? 0) || b.index - a.index,
@@ -912,12 +927,22 @@ export function MultiScreenCanvas({
 
         const hitIds = getCurrentFrameEntries()
           .filter((entry) =>
-            rectIntersects(rect, getSelectableBounds(entry.geometry)),
+            rotatedRectIntersects(
+              rect,
+              getSelectableBounds(entry.geometry),
+              getFrameCenter(entry.geometry),
+              entry.geometry.rotation ?? 0,
+            ),
           )
           .map((entry) => entry.id);
         const hitDraftIds = getCurrentDraftEntries()
           .filter((entry) =>
-            rectIntersects(rect, getSelectableBounds(entry.geometry)),
+            rotatedRectIntersects(
+              rect,
+              getSelectableBounds(entry.geometry),
+              getFrameCenter(entry.geometry),
+              entry.geometry.rotation ?? 0,
+            ),
           )
           .map((entry) => entry.id);
         updateSelectedIds(() =>
@@ -963,17 +988,21 @@ export function MultiScreenCanvas({
       if (preferred) return preferred;
 
       return entries
-        .filter(({ geometry }) =>
-          rectContainsPoint(
-            {
-              left: geometry.x,
-              top: geometry.y,
-              right: geometry.x + geometry.width,
-              bottom: geometry.y + geometry.height,
-            },
-            getFrameCenter(draft.geometry),
-          ),
-        )
+        .filter(({ geometry }) => {
+          const bounds = {
+            left: geometry.x,
+            top: geometry.y,
+            right: geometry.x + geometry.width,
+            bottom: geometry.y + geometry.height,
+          };
+          const draftCenter = getFrameCenter(draft.geometry);
+          const local = rotatePointAroundCenter(
+            draftCenter,
+            getFrameCenter(geometry),
+            geometry.rotation ?? 0,
+          );
+          return rectContainsPoint(bounds, local);
+        })
         .sort((a, b) => (b.geometry.z ?? 0) - (a.geometry.z ?? 0))[0];
     },
     [getCurrentFrameEntries],
@@ -1499,16 +1528,6 @@ export function MultiScreenCanvas({
             );
             const lastNodeId = persisted[persisted.length - 1]?.nodeId;
             if (lastNodeId) updateSelectedIds(() => [lastNodeId]);
-          } else {
-            // No draft landed in a frame — restore each moved draft to its
-            // original position so the move is atomic (commit or revert).
-            updateDraftPrimitives((current) =>
-              current.map((draft) => {
-                if (!state.targetIds.includes(draft.id)) return draft;
-                const origin = state.originDrafts[draft.id];
-                return origin ?? draft;
-              }),
-            );
           }
         }
         finishDrag();
@@ -1679,6 +1698,11 @@ export function MultiScreenCanvas({
       if (e.button !== 0 || e.shiftKey) return;
       e.preventDefault();
       e.stopPropagation();
+      // Frame mousedowns stop propagation, so they never reach handleMouseDown.
+      // Clear stale suppression here too so a prior gesture can't swallow this
+      // frame's selecting click. This gesture re-arms suppression on mouse-up
+      // only if it actually moves.
+      suppressNextPick.current = false;
 
       const currentSelectedIds = selectedIdsRef.current;
       const targetIds = currentSelectedIds.includes(id)
@@ -2161,6 +2185,10 @@ export function MultiScreenCanvas({
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
+      // Clear any stale pick-suppression left over from a prior resize/rotate/move
+      // gesture that never received its trailing frame click — otherwise it would
+      // silently swallow this unrelated interaction.
+      suppressNextPick.current = false;
       const target = e.target as HTMLElement;
       const onFrame = !!target.closest("[data-frame-shell]");
       const tool = normalizeCanvasTool(activeTool ?? localActiveTool);
@@ -3080,6 +3108,10 @@ function Screen({
         onMouseDown={(e) => {
           if (e.button !== 0) return;
           if (penActive || creationToolActive) return;
+          if (e.altKey) {
+            onStartDuplicateGesture(screen, display, e);
+            return;
+          }
           if (e.shiftKey) {
             e.stopPropagation();
             onPick(screen.id, e);
@@ -3444,6 +3476,11 @@ interface BoundsRect {
 }
 
 function getInitialFrameGeometry(index: number): FrameGeometry {
+  // Seed default frames with the actual screen dimensions and the 3-column grid
+  // the overview centering math (which uses SCREEN_WIDTH/SCREEN_GAP) expects, so
+  // a design without persisted geometry opens centered. (The larger
+  // assigned-region grid is only for the agent's generation planning, not the
+  // editor's default placement.)
   const column = index % 3;
   const row = Math.floor(index / 3);
   return {
@@ -3571,6 +3608,84 @@ function rectContainsPoint(bounds: BoundsRect, point: Point) {
   );
 }
 
+/** Rotate `point` into the local (unrotated) space of a frame whose center is
+ *  `center` and whose CSS transform is `rotate(degrees deg)`. Passing the
+ *  inverse rotation maps world-space coordinates into the frame's local space
+ *  so unrotated bounds tests remain correct. */
+function rotatePointAroundCenter(
+  point: Point,
+  center: Point,
+  degrees: number,
+): Point {
+  if (!degrees) return point;
+  const rad = (-degrees * Math.PI) / 180; // inverse rotation
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return {
+    x: center.x + dx * cos - dy * sin,
+    y: center.y + dx * sin + dy * cos,
+  };
+}
+
+/** Test whether a marquee rect (in canvas space) intersects an OBB described by
+ *  `bounds` (unrotated AABB) that has been rotated `degrees` around `center`.
+ *  We map the four marquee corners into the frame's local space and check
+ *  whether any corner is inside the bounds; we also check the reverse (any
+ *  frame corner inside the marquee) to handle the case where the marquee is
+ *  entirely contained within the rotated frame. */
+function rotatedRectIntersects(
+  rect: MarqueeRect,
+  bounds: BoundsRect,
+  center: Point,
+  degrees: number,
+): boolean {
+  if (!degrees) {
+    return rectIntersects(rect, bounds);
+  }
+  // Four corners of the marquee rect in canvas space.
+  const marqueeCorners: Point[] = [
+    { x: rect.x, y: rect.y },
+    { x: rect.x + rect.width, y: rect.y },
+    { x: rect.x + rect.width, y: rect.y + rect.height },
+    { x: rect.x, y: rect.y + rect.height },
+  ];
+  // Test: any marquee corner inside the unrotated frame bounds?
+  for (const corner of marqueeCorners) {
+    const local = rotatePointAroundCenter(corner, center, degrees);
+    if (rectContainsPoint(bounds, local)) return true;
+  }
+  // Four corners of the unrotated frame in canvas space (rotate them outward).
+  const frameCorners: Point[] = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom },
+  ];
+  const rad = (degrees * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const marqueeRight = rect.x + rect.width;
+  const marqueeBottom = rect.y + rect.height;
+  // Test: any rotated frame corner inside the marquee rect?
+  for (const fc of frameCorners) {
+    const dx = fc.x - center.x;
+    const dy = fc.y - center.y;
+    const wx = center.x + dx * cos - dy * sin;
+    const wy = center.y + dx * sin + dy * cos;
+    if (
+      wx >= rect.x &&
+      wx <= marqueeRight &&
+      wy >= rect.y &&
+      wy <= marqueeBottom
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
 function sameFrameGeometry(a: FrameGeometry, b: FrameGeometry) {
   return (
     a.x === b.x &&

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

@@ -60,15 +60,17 @@ export function QuestionFlow({
     setAnswers((prev) => ({ ...prev, [id]: value }));
   }, []);
 
-  const answeredCount = guidedQuestions.filter((question) =>
-    hasGuidedAnswer(answers[question.id]),
-  ).length;
+  const isAnswered = (q: GuidedQuestion) => {
+    const v = answers[q.id];
+    if (q.type === "freeform" && typeof v === "string")
+      return v.trim().length > 0;
+    return hasGuidedAnswer(v);
+  };
+  const answeredCount = guidedQuestions.filter(isAnswered).length;
   const requiredQuestions = guidedQuestions.filter(
     (question) => question.required,
   );
-  const requiredAnswered = requiredQuestions.filter((question) =>
-    hasGuidedAnswer(answers[question.id]),
-  ).length;
+  const requiredAnswered = requiredQuestions.filter(isAnswered).length;
   const allRequiredAnswered = requiredAnswered === requiredQuestions.length;
   const progress =
     guidedQuestions.length === 0
@@ -554,11 +556,9 @@ function SliderQuestion({
   const current =
     typeof value === "number" ? value : Math.round((min + max) / 2);
 
-  useEffect(() => {
-    if (typeof value !== "number") {
-      onChange(Math.round((min + max) / 2));
-    }
-  }, []);
+  // Do not auto-fill on mount: a required slider must be explicitly moved by
+  // the user before it counts as answered. `current` already provides a
+  // display-only midpoint fallback for the rendered slider position.
 
   return (
     <div className="rounded-md border border-border bg-muted/25 px-3 py-3">

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

@@ -285,19 +285,33 @@ function TweakControl({
 
       {tweak.type === "slider" && (
         <div className="flex h-6 items-center gap-1.5">
-          <Slider
-            min={tweak.min ?? 0}
-            max={tweak.max ?? 100}
-            step={tweak.step ?? 1}
-            value={[typeof value === "number" ? value : 50]}
-            onValueChange={([v]) => onChange(v)}
-            className="flex-1"
-          />
-          <span className="min-w-[2ch] text-right text-[11px] tabular-nums text-muted-foreground">
-            {typeof value === "number" ? value : 50}
-            {tweak.unit ??
-              (tweak.cssVar?.toLowerCase().includes("radius") ? "px" : "")}
-          </span>
+          {(() => {
+            const sliderMin = tweak.min ?? 0;
+            const sliderMax = tweak.max ?? 100;
+            const rawNum = typeof value === "number" ? value : Number(value);
+            const sliderValue = Number.isFinite(rawNum)
+              ? Math.min(sliderMax, Math.max(sliderMin, rawNum))
+              : sliderMin;
+            return (
+              <>
+                <Slider
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={tweak.step ?? 1}
+                  value={[sliderValue]}
+                  onValueChange={([v]) => onChange(v)}
+                  className="flex-1"
+                />
+                <span className="min-w-[2ch] text-right text-[11px] tabular-nums text-muted-foreground">
+                  {sliderValue}
+                  {tweak.unit ??
+                    (tweak.cssVar?.toLowerCase().includes("radius")
+                      ? "px"
+                      : "")}
+                </span>
+              </>
+            );
+          })()}
         </div>
       )}
     </div>

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

@@ -1090,13 +1090,6 @@ export function SizingField({
 }: SizingFieldProps) {
   const labels = { ...DEFAULT_AUTO_LAYOUT_LABELS, ...labelOverrides };
   const isWidth = sizingAxis === "horizontal";
-  // Local pending state for a newly-opened constraint editor. Holds the kind
-  // and seed value so the sub-row is visible before the user has confirmed a
-  // value. We only commit to onMinMaxChange when the user types or scrubs.
-  const [pending, setPending] = useState<{
-    kind: "min" | "max";
-    seed: number;
-  } | null>(null);
 
   const minValue = minMax?.min ?? null;
   const maxValue = minMax?.max ?? null;
@@ -1116,12 +1109,11 @@ export function SizingField({
   const maxLabel = isWidth ? labels.maxWidth : labels.maxHeight;
 
   const openEditor = (kind: "min" | "max") => {
-    // Compute a sensible seed but do NOT write it to the parent yet — only
-    // show the pending sub-row. The value is committed when the user first
-    // scrubs/types in the ConstraintSubRow.
+    // Commit immediately so the shown row always reflects real state and
+    // persists across selection changes, remounts, and parent re-renders.
     const seed = Math.max(0, Math.round(resolvedSize ?? 0));
     const seedValue = kind === "min" ? seed : seed || 1;
-    setPending({ kind, seed: seedValue });
+    onMinMaxChange?.(sizingAxis, kind, seedValue);
   };
 
   return (
@@ -1236,19 +1228,6 @@ export function SizingField({
             onMinMaxChange?.(sizingAxis, "min", null);
           }}
         />
-      ) : pending?.kind === "min" ? (
-        // Pending (uncommitted) min row — shown before the user confirms a value.
-        <ConstraintSubRow
-          label={minLabel}
-          value={pending.seed}
-          disabled={disabled}
-          removeLabel={labels.removeConstraint}
-          onChange={(next) => {
-            setPending(null);
-            onMinMaxChange?.(sizingAxis, "min", next);
-          }}
-          onRemove={() => setPending(null)}
-        />
       ) : null}
       {hasMax ? (
         <ConstraintSubRow
@@ -1261,19 +1240,6 @@ export function SizingField({
             onMinMaxChange?.(sizingAxis, "max", null);
           }}
         />
-      ) : pending?.kind === "max" ? (
-        // Pending (uncommitted) max row — shown before the user confirms a value.
-        <ConstraintSubRow
-          label={maxLabel}
-          value={pending.seed}
-          disabled={disabled}
-          removeLabel={labels.removeConstraint}
-          onChange={(next) => {
-            setPending(null);
-            onMinMaxChange?.(sizingAxis, "max", next);
-          }}
-          onRemove={() => setPending(null)}
-        />
       ) : null}
     </div>
   );

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

@@ -889,7 +889,17 @@ export function DesignColorPicker({
     setPicking(true);
     try {
       const result = await new EyeDropperCtor().open();
-      if (result.sRGBHex) onChange(result.sRGBHex);
+      if (result.sRGBHex) {
+        if (activeGradient) {
+          // In gradient mode, route to the selected stop (preserving its alpha)
+          // like every other color edit — don't replace the whole gradient with
+          // a solid hex.
+          const parsed = parseCssColor(result.sRGBHex);
+          if (parsed) emitStopColor({ ...parsed, a: fieldColor.a });
+        } else {
+          onChange(result.sRGBHex);
+        }
+      }
     } catch {
       // Browser cancels are expected; keep the current color.
     } finally {
@@ -1845,8 +1855,14 @@ export function inferPaintType(
     if (
       lower.startsWith("radial-gradient") ||
       lower.startsWith("repeating-radial-gradient")
-    )
+    ) {
+      // Diamond fills serialize as a radial gradient (either "closest-corner"
+      // from EditPanel or "ellipse closest-side" from GradientEditor). Recognize
+      // both so a diamond doesn't silently become a plain radial on reselect.
+      if (/closest-corner/.test(lower) || /ellipse\s+closest-side/.test(lower))
+        return "diamond";
       return "radial";
+    }
     if (
       lower.startsWith("conic-gradient") ||
       lower.startsWith("repeating-conic-gradient")

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

@@ -57,6 +57,11 @@ const DEFAULT_LABELS: ExportSettingsPanelLabels = {
 
 const DEFAULT_FORMATS: ExportFormat[] = ["png", "jpg", "svg", "pdf", "webp"];
 
+// Export scale bounds — must match the clamp in DesignEditor's PNG/SVG export
+// handlers so the panel never promises a range the exporter won't render.
+const MIN_EXPORT_SCALE = 0.1;
+const MAX_EXPORT_SCALE = 4;
+
 /** Preset scale options shown in the scale dropdown — matches the design editor's presets */
 const SCALE_PRESETS: { label: string; value: ExportScale }[] = [
   { label: "0.5x", value: "0.5" },
@@ -297,13 +302,20 @@ function ExportRow({
           type="number"
           value={row.scale}
           disabled={isDisabled}
-          min={0.01}
-          max={100}
+          // Bounds match the exporter's real clamp ([0.1, 4]); see
+          // DesignEditor handleDownload* . Previously the field accepted up to
+          // 100x but the exporter silently clamped to 4x with no feedback.
+          min={MIN_EXPORT_SCALE}
+          max={MAX_EXPORT_SCALE}
           step={0.5}
           onChange={(e) => {
             const parsed = parseFloat(e.target.value);
             if (!Number.isNaN(parsed) && parsed > 0) {
-              onPatchRow(row.id, { scale: parsed });
+              const clamped = Math.min(
+                MAX_EXPORT_SCALE,
+                Math.max(MIN_EXPORT_SCALE, parsed),
+              );
+              onPatchRow(row.id, { scale: clamped });
             }
           }}
           onBlur={() => {

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

@@ -167,10 +167,12 @@ export function parseGradientCss(
     }
   } else if (fn === "radial") {
     kind =
-      /ellipse\s+closest-side/i.test(first) || fallbackKind === "diamond"
+      /ellipse\s+closest-side/i.test(first) ||
+      /closest-corner/i.test(first) ||
+      fallbackKind === "diamond"
         ? "diamond"
         : "radial";
-    if (/circle|ellipse|at\s/i.test(first)) stopStart = 1;
+    if (/circle|ellipse|at\s|closest-/i.test(first)) stopStart = 1;
   } else if (fn === "conic") {
     kind = "angular";
     const angleMatch = first.match(ANGLE_RE);

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

@@ -34,6 +34,16 @@ const FIT_MODES: Array<{ mode: ImageFitMode; label: string }> = [
 
 // ─── CSS serialization ─────────────────────────────────────────────────────────
 
+/**
+ * Escape a URL for embedding inside a double-quoted CSS url("...") token.
+ * Only `"` and `\` are CSS-significant inside a double-quoted string; newlines
+ * must also be stripped. Everything else (parens, commas, single-quotes, etc.)
+ * is safe inside double quotes, so we leave it alone to keep the URL intact.
+ */
+function escapeForQuotedUrl(url: string): string {
+  return url.replace(/\\/g, "\\\\").replace(/"/g, "%22").replace(/\r?\n/g, "");
+}
+
 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 =
@@ -55,7 +65,7 @@ function imageFitMarker(fit: ImageFitMode): string {
 export function imageFillToCss(value: ImageFillValue): string {
   const url = value.url.trim();
   if (!url) return "transparent";
-  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
+  const safeUrl = escapeForQuotedUrl(url);
   const image = `url("${safeUrl}")`;
   switch (value.fit) {
     case "fit":
@@ -70,13 +80,17 @@ export function imageFillToCss(value: ImageFillValue): string {
   }
 }
 
-const URL_RE = /url\((['"]?)([^'")]+)\1\)/i;
+// Matches url() in three forms:
+//   group 1 — double-quoted:  url("...anything...")
+//   group 2 — single-quoted:  url('...anything...')
+//   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);
   if (!match) return null;
-  const url = match[2];
+  const url = (match[1] ?? match[2] ?? match[3] ?? "").trim();
   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
@@ -141,7 +155,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.trim().replace(/["')]/g, encodeURIComponent)}")`
+            ? `url("${escapeForQuotedUrl(value.url.trim())}")`
             : CHECKERBOARD_IMAGE,
           backgroundSize: value.url
             ? value.fit === "fit"

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

@@ -58,10 +58,16 @@ export function formatScrubValue(
   options: Pick<ScrubExpressionOptions, "precision" | "unit"> = {},
 ): string {
   const normalized = normalizeScrubNumber(value, options);
-  const numeric =
-    Number.isFinite(options.precision) && options.precision! >= 0
-      ? normalized.toFixed(options.precision).replace(/\.?0+$/, "")
-      : String(normalized);
+  let numeric: string;
+  if (Number.isFinite(options.precision) && options.precision! >= 0) {
+    const fixed = normalized.toFixed(options.precision);
+    // Only strip trailing zeros when there's a fractional part. Stripping a bare
+    // integer (precision 0, e.g. "100") would mangle it to "1" because the regex
+    // eats the integer's own trailing zeros.
+    numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+  } else {
+    numeric = String(normalized);
+  }
   return `${numeric}${options.unit ?? ""}`;
 }