@agent-native/core 0.79.27 → 0.80.1

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

@@ -0,0 +1,395 @@
+import { IconDownload, IconPlus, IconX } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+export type ExportFormat = "png" | "jpg" | "svg" | "pdf" | "webp";
+
+/** Scale preset value — "custom" means the user typed a freeform multiplier */
+export type ExportScale = "0.5" | "1" | "2" | "3" | "4" | "custom";
+
+export interface ExportSettingsValue {
+  scale: number;
+  format: ExportFormat;
+  suffix: string;
+}
+
+export interface ExportSettingsPanelLabels {
+  title: string;
+  scale: string;
+  format: string;
+  suffix: string;
+  export: string;
+  addExport: string;
+  removeExport: string;
+}
+
+export interface ExportSettingsPanelProps {
+  value: ExportSettingsValue;
+  onChange: (patch: Partial<ExportSettingsValue>) => void;
+  onExport: (settings: ExportSettingsValue) => void;
+  formats?: ExportFormat[];
+  labels?: Partial<ExportSettingsPanelLabels>;
+  disabled?: boolean;
+  exporting?: boolean;
+  className?: string;
+}
+
+const DEFAULT_LABELS: ExportSettingsPanelLabels = {
+  title: "Export", // i18n-ignore fallback component label
+  scale: "Scale", // i18n-ignore fallback component label
+  format: "Format", // i18n-ignore fallback component label
+  suffix: "Suffix", // i18n-ignore fallback component label
+  export: "Export", // i18n-ignore fallback component label
+  addExport: "Add export", // i18n-ignore fallback component label
+  removeExport: "Remove export", // i18n-ignore fallback component label
+};
+
+const DEFAULT_FORMATS: ExportFormat[] = ["png", "jpg", "svg", "pdf", "webp"];
+
+/** Preset scale options shown in the scale dropdown — matches Figma's presets */
+const SCALE_PRESETS: { label: string; value: ExportScale }[] = [
+  { label: "0.5x", value: "0.5" },
+  { label: "1x", value: "1" },
+  { label: "2x", value: "2" },
+  { label: "3x", value: "3" },
+  { label: "4x", value: "4" },
+  { label: "Custom…", value: "custom" }, // i18n-ignore fixed scale preset label
+];
+
+/**
+ * Map a numeric scale to the nearest preset key, or "custom" if it doesn't
+ * match any of the five standard multipliers.
+ */
+function scaleToPreset(scale: number): ExportScale {
+  const hit = SCALE_PRESETS.find(
+    (p) => p.value !== "custom" && Number(p.value) === scale,
+  );
+  return hit ? hit.value : "custom";
+}
+
+/** A single in-progress export row (multi-row internal state) */
+interface ExportRow {
+  id: number;
+  scale: number;
+  format: ExportFormat;
+  suffix: string;
+  /** Whether the user has switched to freeform scale entry */
+  customScale: boolean;
+}
+
+let _nextId = 1;
+function nextId() {
+  return _nextId++;
+}
+
+function rowFromValue(v: ExportSettingsValue): ExportRow {
+  return {
+    id: nextId(),
+    scale: v.scale,
+    format: v.format,
+    suffix: v.suffix,
+    customScale: scaleToPreset(v.scale) === "custom",
+  };
+}
+
+/** Scale dropdown — shows Figma's 0.5x/1x/2x/3x/4x presets + Custom */
+function ScaleSelect({
+  scale,
+  customScale,
+  disabled,
+  onPresetChange,
+}: {
+  scale: number;
+  customScale: boolean;
+  disabled: boolean;
+  onPresetChange: (preset: ExportScale, raw: number) => void;
+}) {
+  const preset = customScale ? "custom" : scaleToPreset(scale);
+
+  return (
+    <Select
+      value={preset}
+      disabled={disabled}
+      onValueChange={(v) => {
+        const p = v as ExportScale;
+        if (p === "custom") {
+          onPresetChange("custom", scale);
+        } else {
+          onPresetChange(p, Number(p));
+        }
+      }}
+    >
+      <SelectTrigger className="h-6 w-14 shrink-0 px-1.5 text-[11px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {SCALE_PRESETS.map((p) => (
+            <SelectItem key={p.value} value={p.value} className="text-[11px]">
+              {p.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function ExportSettingsPanel({
+  value,
+  onChange,
+  onExport,
+  formats = DEFAULT_FORMATS,
+  labels,
+  disabled = false,
+  exporting = false,
+  className,
+}: ExportSettingsPanelProps) {
+  const copy = { ...DEFAULT_LABELS, ...labels };
+  const isDisabled = disabled || exporting;
+
+  // Multi-row internal state — primary row is kept in sync with the `value` prop
+  const [rows, setRows] = useState<ExportRow[]>(() => [rowFromValue(value)]);
+
+  // Keep primary row in sync when the controlled value prop changes externally
+  const primaryValue = rows[0];
+  const needsSync =
+    !primaryValue.customScale &&
+    (primaryValue.scale !== value.scale ||
+      primaryValue.format !== value.format ||
+      primaryValue.suffix !== value.suffix);
+
+  if (needsSync) {
+    setRows((prev) => [
+      {
+        ...prev[0],
+        scale: value.scale,
+        format: value.format,
+        suffix: value.suffix,
+      },
+      ...prev.slice(1),
+    ]);
+  }
+
+  function patchRow(id: number, patch: Partial<ExportRow>) {
+    setRows((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+    // Report primary row changes to the parent via `onChange`
+    if (id === rows[0]?.id) {
+      const next = { ...rows[0], ...patch };
+      const parent: Partial<ExportSettingsValue> = {};
+      if ("scale" in patch) parent.scale = next.scale;
+      if ("format" in patch) parent.format = next.format as ExportFormat;
+      if ("suffix" in patch) parent.suffix = next.suffix;
+      if (Object.keys(parent).length > 0) onChange(parent);
+    }
+  }
+
+  function addRow() {
+    setRows((prev) => [
+      ...prev,
+      {
+        id: nextId(),
+        scale: 1,
+        format: "png" as ExportFormat,
+        suffix: "",
+        customScale: false,
+      },
+    ]);
+  }
+
+  function removeRow(id: number) {
+    setRows((prev) => {
+      // Must keep at least one row
+      if (prev.length <= 1) return prev;
+      const next = prev.filter((r) => r.id !== id);
+      // If the primary (first) row was removed, the new first row becomes primary
+      if (prev[0]?.id === id && next[0]) {
+        onChange({
+          scale: next[0].scale,
+          format: next[0].format,
+          suffix: next[0].suffix,
+        });
+      }
+      return next;
+    });
+  }
+
+  function handleExport() {
+    // Pass the primary row's settings to onExport; rows array is internal
+    const primary = rows[0];
+    if (!primary) return;
+    onExport({
+      scale: primary.scale,
+      format: primary.format,
+      suffix: primary.suffix,
+    });
+  }
+
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      {/* Section header: title left, "+" right — matches Figma export header */}
+      <div className="flex h-6 items-center justify-between">
+        <span className="text-[11px] font-medium text-muted-foreground">
+          {copy.title}
+        </span>
+        <button
+          type="button"
+          aria-label={copy.addExport}
+          disabled={isDisabled}
+          className="flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          onClick={addRow}
+        >
+          <IconPlus className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Export rows: [scale ▾] [format ▾] [suffix] [×] — Figma compact inline layout */}
+      {rows.map((row) => (
+        <ExportRow
+          key={row.id}
+          row={row}
+          formats={formats}
+          labels={copy}
+          isDisabled={isDisabled}
+          canRemove={rows.length > 1}
+          onPatchRow={patchRow}
+          onRemoveRow={removeRow}
+        />
+      ))}
+
+      {/* Export button — full width at bottom, Figma style */}
+      <Button
+        type="button"
+        variant="outline"
+        disabled={isDisabled}
+        onClick={handleExport}
+        className="h-6 w-full px-2 text-[11px]"
+      >
+        <IconDownload className="size-3.5" />
+        {copy.export}
+      </Button>
+    </div>
+  );
+}
+
+/** A single export row: [scale ▾ or custom input] [format ▾] [suffix] [×] */
+function ExportRow({
+  row,
+  formats,
+  labels,
+  isDisabled,
+  canRemove,
+  onPatchRow,
+  onRemoveRow,
+}: {
+  row: ExportRow;
+  formats: ExportFormat[];
+  labels: ExportSettingsPanelLabels;
+  isDisabled: boolean;
+  canRemove: boolean;
+  onPatchRow: (id: number, patch: Partial<ExportRow>) => void;
+  onRemoveRow: (id: number) => void;
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      {/* Scale — dropdown (presets) or freeform input when "Custom…" selected */}
+      {row.customScale ? (
+        <Input
+          type="number"
+          value={row.scale}
+          disabled={isDisabled}
+          min={0.01}
+          max={100}
+          step={0.5}
+          onChange={(e) => {
+            const parsed = parseFloat(e.target.value);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+              onPatchRow(row.id, { scale: parsed });
+            }
+          }}
+          onBlur={() => {
+            // Switch back to preset dropdown if the typed value matches a preset
+            if (scaleToPreset(row.scale) !== "custom") {
+              onPatchRow(row.id, { customScale: false });
+            }
+          }}
+          className="h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums"
+          aria-label="Scale"
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        />
+      ) : (
+        <ScaleSelect
+          scale={row.scale}
+          customScale={false}
+          disabled={isDisabled}
+          onPresetChange={(preset, raw) => {
+            if (preset === "custom") {
+              onPatchRow(row.id, { customScale: true });
+            } else {
+              onPatchRow(row.id, { scale: raw, customScale: false });
+            }
+          }}
+        />
+      )}
+
+      {/* Format dropdown — PNG / JPG / SVG / PDF / WEBP */}
+      <Select
+        value={row.format}
+        disabled={isDisabled}
+        onValueChange={(format) =>
+          onPatchRow(row.id, { format: format as ExportFormat })
+        }
+      >
+        <SelectTrigger className="h-6 min-w-0 flex-1 px-1.5 text-[11px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {formats.map((format) => (
+              <SelectItem
+                key={format}
+                value={format}
+                className="text-[11px] uppercase"
+              >
+                {format.toUpperCase()}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      {/* Suffix input — e.g. "@2x", "-mobile" */}
+      <Input
+        value={row.suffix}
+        disabled={isDisabled}
+        onChange={(e) => onPatchRow(row.id, { suffix: e.target.value })}
+        placeholder={labels.suffix}
+        className="h-6 min-w-0 flex-1 px-1.5 text-[11px]"
+        aria-label={labels.suffix}
+      />
+
+      {/* Remove row button — matches Figma's × on each export entry */}
+      <button
+        type="button"
+        aria-label={labels.removeExport}
+        disabled={isDisabled || !canRemove}
+        className="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        onClick={() => onRemoveRow(row.id)}
+      >
+        <IconX className="size-3" />
+      </button>
+    </div>
+  );
+}