@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/design/canvas/panels/controls/color-paint-picker.tsx

@@ -0,0 +1,202 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useEffect, useRef, useState } from "react";
+import { Blend, Hash } from "lucide-react";
+import { HexAlphaColorPicker } from "react-colorful";
+
+import { colorToHexAlpha, parseColor, toHex } from "@/components/design/canvas/document/style/color-utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+/**
+ * 颜色编辑条：色板按钮 + `#` 色值输入 + 透明度输入。
+ * 三个控件独立提交，父组件通过 onChange(color, opacity) 接收最终颜色/透明度。
+ *
+ * ⚠ label 包裹 input 会把 label 的 pointerdown 转移给 input（浏览器原生行为），
+ *   会让 HexAlphaColorPicker 的拖动 pointerdown 冒泡后触发 input blur → Popover 关闭。
+ *   改用 div + aria-label。
+ */
+export function ColorPaintPicker({
+  color,
+  opacity,
+  onChange,
+  onChangeLive,
+  colorDisabled = false,
+  opacityDisabled = false,
+  showOpacity = true,
+  className,
+}: {
+  color: string;
+  opacity: number;
+  /** 提交（历史）—— 键盘 Enter / 失焦时触发 */
+  onChange: (color: string, opacity: number) => void;
+  /** 实时预览（不入 history）—— 拖拽/滚轮/色板拖动实时下发 */
+  onChangeLive?: (color: string, opacity: number) => void;
+  colorDisabled?: boolean;
+  opacityDisabled?: boolean;
+  /** 渐变色标等场景隐藏透明度输入（stop 的 alpha 收在色值内） */
+  showOpacity?: boolean;
+  className?: string;
+}) {
+  const [hexDraft, setHexDraft] = useState<string>(color);
+  const [opacityDraft, setOpacityDraft] = useState<string>(`${Math.round(opacity * 100)}`);
+  const [open, setOpen] = useState(false);
+  // 弹窗内最后一次 pointerdown 的时间戳：用于识别「拖拽从弹窗内起、释落在触发器上」的 click，
+  // 该 click 会被 Base UI 触发器当作 toggle 关闭弹窗（reason=trigger-press），需拦截
+  const popupPressAtRef = useRef(0);
+  // 三合一行的根节点：行内色值/透明度输入框在弹窗外，点击它们的 outside-press 不应关闭弹窗
+  const rowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setHexDraft(color);
+  }, [color]);
+
+  useEffect(() => {
+    setOpacityDraft(`${Math.round(opacity * 100)}`);
+  }, [opacity]);
+
+  const commitHex = (raw: string): void => {
+    // 输入框显示值不带 #，容忍用户省略前缀
+    const parsed = parseColor(raw.startsWith("#") ? raw : `#${raw}`);
+    if (parsed) {
+      const normalized = toHex(parsed);
+      onChange(normalized, opacity);
+      setHexDraft(normalized);
+    } else {
+      setHexDraft(color);
+    }
+  };
+
+  const commitOpacity = (raw: string): void => {
+    const n = Number(raw.trim());
+    if (Number.isFinite(n)) {
+      const clamped = Math.min(100, Math.max(0, n));
+      onChange(color, clamped / 100);
+      setOpacityDraft(`${Math.round(clamped)}`);
+    } else {
+      setOpacityDraft(`${Math.round(opacity * 100)}`);
+    }
+  };
+
+  return (
+    <div ref={rowRef} className={cn("flex min-w-0 items-center gap-3", className)}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen, details) => {
+          if (!nextOpen && details?.reason === "outside-press") {
+            const target = details.event?.target as Node | null;
+            // 按压目标在三合一行内（色值/透明度输入框）→ 保留弹窗
+            if (target && rowRef.current?.contains(target)) return;
+          }
+          // 拖拽选色释放到触发器上时，Base UI 会以 trigger-press 关闭弹窗；
+          // 若按压起始于弹窗内（600ms 内），视为拖拽尾部误关，拦截
+          if (
+            !nextOpen &&
+            (details.reason === "trigger-press" ||
+              details.reason === "outside-press") &&
+            Date.now() - popupPressAtRef.current < 600
+          ) {
+            return;
+          }
+          setOpen(nextOpen);
+        }}
+      >
+        <PopoverTrigger
+          className="size-6 shrink-0 rounded-full border border-border ring-offset-background outline-none hover:ring-2 hover:ring-foreground/20"
+          style={{ backgroundColor: colorToHexAlpha(color, opacity) }}
+          aria-label="选择颜色"
+        />
+        <PopoverContent
+          align="start"
+          className="w-64 p-3"
+          onPointerDown={(e) => {
+            popupPressAtRef.current = Date.now();
+            e.stopPropagation();
+          }}
+          onPointerMove={(e) => e.stopPropagation()}
+          onPointerUp={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          onBlurCapture={(e) => e.stopPropagation()}
+        >
+          <HexAlphaColorPicker
+            className="!w-full"
+              color={colorToHexAlpha(color, opacity)}
+              onChange={(hexAlpha) => {
+                const parsed = parseColor(hexAlpha);
+                if (!parsed) return;
+                const newHex = toHex(parsed);
+                const newAlpha = Number(parsed.a.toFixed(4));
+                setHexDraft(newHex);
+                setOpacityDraft(`${Math.round(newAlpha * 100)}`);
+                onChange(newHex, newAlpha);
+              }}
+          />
+        </PopoverContent>
+      </Popover>
+
+      <div className="flex h-7 min-w-0 flex-1 items-center gap-1.5 rounded-md bg-muted/50 px-2 transition-colors hover:bg-muted focus-within:bg-background">
+        <span aria-hidden className="shrink-0 text-[10px] text-muted-foreground">
+          <Hash className="size-3" />
+        </span>
+        <input
+          aria-label="颜色值"
+          type="text"
+          value={hexDraft.replace(/^#/, "")}
+          disabled={colorDisabled}
+          draggable={false}
+          spellCheck={false}
+          onChange={(e) => setHexDraft(e.target.value.startsWith("#") ? e.target.value : `#${e.target.value}`)}
+          onBlur={(e) => commitHex(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitHex(e.currentTarget.value);
+            if (e.key === "Escape") setHexDraft(color);
+          }}
+          className="h-full min-w-0 flex-1 bg-transparent px-0 text-right text-xs font-medium tabular-nums uppercase outline-none select-text"
+        />
+      </div>
+
+      {showOpacity ? (
+        <div className="flex h-7 min-w-0 flex-1 items-center gap-1.5 rounded-md bg-muted/50 px-2 transition-colors hover:bg-muted focus-within:bg-background">
+          <span
+            aria-hidden
+            className={cn(
+              "flex size-3.5 shrink-0 touch-none items-center justify-center text-muted-foreground",
+              opacityDisabled ? "cursor-not-allowed" : "cursor-ew-resize hover:text-foreground",
+            )}
+          >
+            <Blend className="size-3" />
+          </span>
+          <input
+            aria-label="透明度"
+            type="text"
+            inputMode="numeric"
+            value={opacityDraft}
+            disabled={opacityDisabled}
+            draggable={false}
+            onChange={(e) => setOpacityDraft(e.target.value.replace(/[^0-9]/g, ""))}
+            onBlur={(e) => commitOpacity(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitOpacity(e.currentTarget.value);
+              if (e.key === "Escape") setOpacityDraft(`${Math.round(opacity * 100)}`);
+              if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const next = Math.min(100, Math.max(0, Math.round(opacity * 100) + 1));
+                setOpacityDraft(String(next));
+                onChange(color, next / 100);
+              }
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                const next = Math.min(100, Math.max(0, Math.round(opacity * 100) - 1));
+                setOpacityDraft(String(next));
+                onChange(color, next / 100);
+              }
+            }}
+            className="h-full min-w-0 flex-1 bg-transparent px-0 text-right text-xs font-medium tabular-nums outline-none select-text"
+          />
+          <span aria-hidden className="shrink-0 text-[10px] text-muted-foreground">
+            %
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/design/canvas/panels/controls/constraint-select.tsx

@@ -0,0 +1,41 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import type { ConstraintMode } from "@/components/design/canvas/document/style/paints"
+import { modeLabel } from "../panel-data"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@allbluecn/ui/select"
+
+const MODES: ConstraintMode[] = ["min", "center", "max", "stretch", "scale"]
+
+export function ConstraintSelect({
+  value,
+  onChange,
+}: {
+  value: ConstraintMode
+  onChange: (mode: ConstraintMode) => void
+}) {
+  return (
+    <Select
+      items={MODES.map((mode) => ({ value: mode, label: modeLabel(mode) }))}
+      value={value}
+      onValueChange={(next) => {
+        if (next) onChange(next as ConstraintMode)
+      }}
+    >
+      <SelectTrigger className="h-7 text-xs">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {MODES.map((mode) => (
+          <SelectItem key={mode} value={mode} className="text-xs">
+            {modeLabel(mode)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/components/design/canvas/panels/controls/gradient-data.ts

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+/**
+ * 渐变编辑纯数据（react-refresh 纪律）：组件文件只导出组件。
+ */
+import type { LinearPaint, PaintStop, RadialPaint, AngularPaint } from "../../document/style/paints"
+
+export type GradientPaint = LinearPaint | RadialPaint | AngularPaint
+
+export function defaultGradientStops(): PaintStop[] {
+  return [
+    { offset: 0, color: "#000000" },
+    { offset: 1, color: "#ffffff" },
+  ]
+}

package/src/components/design/canvas/panels/controls/gradient-editor.tsx

@@ -0,0 +1,417 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// FS-6.3 渐变编辑器：stops 色标条 + 方向九宫格 + angular rotation / radial stretch。
+// 所有变更整体赋值整层 paint 对象（leafer 官方：改子属性不触发 setter）
+import { useRef, useState } from "react"
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"
+import { Plus, Trash2 } from "lucide-react"
+
+import {
+  type NodePaint,
+  type PaintPoint,
+  type PaintStop,
+} from "../../document/style/paints"
+import { createShaderProps, firstShaderPresetId } from "../../plugins/shader/presets"
+import { parseColor, toHex } from "../../document/style/color-utils"
+import { Button } from "@allbluecn/ui/button"
+import { cn } from "@/lib/utils"
+import { m } from "@/paraglide/messages.js"
+
+import { ColorPaintPicker } from "./color-paint-picker"
+import { defaultGradientStops, type GradientPaint } from "./gradient-data"
+import { PATTERN_TEXTURES } from "./pattern-data"
+import { NumberDragInput } from "./number-drag-input"
+
+// 渐变几何字段（stops/from/to）：渐变互切时保留同语义字段
+// （linear/radial 有 from+to，angular 仅 from；stretch/rotation 为类型私有，仅同型保留）
+function gradientGeometryOf(
+  paint: NodePaint,
+): { stops: PaintStop[]; from?: PaintPoint; to?: PaintPoint } {
+  if (paint.type === "linear" || paint.type === "radial") {
+    return {
+      stops: paint.stops.map((s) => ({ ...s })),
+      ...(paint.from ? { from: { ...paint.from } } : {}),
+      ...(paint.to ? { to: { ...paint.to } } : {}),
+    }
+  }
+  if (paint.type === "angular") {
+    return {
+      stops: paint.stops.map((s) => ({ ...s })),
+      ...(paint.from ? { from: { ...paint.from } } : {}),
+    }
+  }
+  return { stops: defaultGradientStops() }
+}
+
+// 类型切换工厂：保留 id/opacity/visible/blendMode；渐变互切保留 stops；
+// image 兜底非空 url（isNodePaint 校验要求 url.length > 0）；
+// shader 默认取 FS-7.3 首个预设（mesh-gradient），props = defaultProps + 主题双色
+export function switchPaintType(paint: NodePaint, type: NodePaint["type"]): NodePaint {
+  const base = {
+    id: paint.id,
+    opacity: paint.opacity,
+    visible: paint.visible,
+    ...(paint.blendMode !== undefined ? { blendMode: paint.blendMode } : {}),
+  }
+  switch (type) {
+    case "solid":
+      return { ...base, type: "solid", color: paint.type === "solid" ? paint.color : "#4f46e5" }
+    case "linear": {
+      const g = gradientGeometryOf(paint)
+      return {
+        ...base,
+        type: "linear",
+        stops: g.stops,
+        ...(g.from ? { from: g.from } : {}),
+        ...(g.to ? { to: g.to } : {}),
+      }
+    }
+    case "radial": {
+      const g = gradientGeometryOf(paint)
+      return {
+        ...base,
+        type: "radial",
+        stops: g.stops,
+        ...(g.from ? { from: g.from } : {}),
+        ...(g.to ? { to: g.to } : {}),
+        ...(paint.type === "radial" && paint.stretch !== undefined ? { stretch: paint.stretch } : {}),
+      }
+    }
+    case "angular": {
+      const g = gradientGeometryOf(paint)
+      return {
+        ...base,
+        type: "angular",
+        stops: g.stops,
+        ...(g.from ? { from: g.from } : {}),
+        ...(paint.type === "angular" && paint.rotation !== undefined
+          ? { rotation: paint.rotation }
+          : {}),
+      }
+    }
+    case "image":
+      return {
+        ...base,
+        type: "image",
+        url: paint.type === "image" ? paint.url : PATTERN_TEXTURES[0].url,
+        mode: paint.type === "image" ? paint.mode : "cover",
+      }
+    case "shader":
+      return {
+        ...base,
+        type: "shader",
+        shaderId: paint.type === "shader" ? paint.shaderId : firstShaderPresetId(),
+        props: paint.type === "shader" ? paint.props : createShaderProps(firstShaderPresetId()),
+      }
+  }
+}
+
+function normalizeStops(stops: PaintStop[]): PaintStop[] {
+  return [...stops]
+    .map((s) => ({ offset: Math.min(1, Math.max(0, s.offset)), color: s.color }))
+    .sort((a, b) => a.offset - b.offset)
+}
+
+function interpolateStopColor(stops: PaintStop[], offset: number): string {
+  const sorted = [...stops].sort((a, b) => a.offset - b.offset)
+  const prev = [...sorted].reverse().find((s) => s.offset <= offset) ?? sorted[0]
+  const next = sorted.find((s) => s.offset >= offset) ?? sorted[sorted.length - 1]
+  const a = parseColor(prev.color)
+  const b = parseColor(next.color)
+  if (!a || !b) return prev.color
+  const span = next.offset - prev.offset
+  const t = span <= 0 ? 0 : (offset - prev.offset) / span
+  const mix = (x: number, y: number): number => Math.round(x + (y - x) * t)
+  return toHex({ r: mix(a.r, b.r), g: mix(a.g, b.g), b: mix(a.b, b.b), a: 1 })
+}
+
+// 色标条预览：linear 按方向角、radial、angular（conic）近似还原
+function previewBackground(paint: GradientPaint): string {
+  const css = paint.stops.map((s) => `${s.color} ${Math.round(s.offset * 100)}%`).join(", ")
+  if (paint.type === "linear") {
+    const from = paint.from ?? { x: 0, y: 0 }
+    const to = paint.to ?? { x: 1, y: 1 }
+    const deg = (Math.atan2(to.x - from.x, -(to.y - from.y)) * 180) / Math.PI
+    return `linear-gradient(${deg.toFixed(1)}deg, ${css})`
+  }
+  if (paint.type === "radial") return `radial-gradient(circle, ${css})`
+  return `conic-gradient(${css})`
+}
+
+type GridCell = { key: string; x: number; y: number; label: () => string }
+
+const GRID_CELLS: GridCell[] = [
+  { key: "tl", x: 0, y: 0, label: m.canvas_cornerTopLeft },
+  { key: "top", x: 0.5, y: 0, label: m.canvas_dirTop },
+  { key: "tr", x: 1, y: 0, label: m.canvas_cornerTopRight },
+  { key: "left", x: 0, y: 0.5, label: m.canvas_dirLeft },
+  { key: "center", x: 0.5, y: 0.5, label: m.canvas_refPointCenter },
+  { key: "right", x: 1, y: 0.5, label: m.canvas_dirRight },
+  { key: "bl", x: 0, y: 1, label: m.canvas_cornerBottomLeft },
+  { key: "bottom", x: 0.5, y: 1, label: m.canvas_dirBottom },
+  { key: "br", x: 1, y: 1, label: m.canvas_cornerBottomRight },
+]
+
+function nearestCell(p: PaintPoint): GridCell {
+  return GRID_CELLS.reduce((best, cell) =>
+    Math.hypot(cell.x - p.x, cell.y - p.y) < Math.hypot(best.x - p.x, best.y - p.y) ? cell : best,
+  )
+}
+
+// 方向九宫格：linear 锚点 = to（方向终点，from 取镜像）；radial 锚点 = from（圆心）；
+// angular 锚点 = from（扫掠中心）
+function DirectionGrid({
+  value,
+  disabled = false,
+  onChange,
+}: {
+  value?: PaintPoint
+  disabled?: boolean
+  onChange: (point: PaintPoint) => void
+}) {
+  const active = value ? nearestCell(value) : undefined
+  return (
+    <div role="group" aria-label={m.canvas_gradient_direction()} className="grid size-16 shrink-0 grid-cols-3 gap-0.5">
+      {GRID_CELLS.map((cell) => (
+        <button
+          key={cell.key}
+          type="button"
+          disabled={disabled}
+          aria-label={cell.label()}
+          aria-pressed={active?.key === cell.key}
+          onClick={() => onChange({ x: cell.x, y: cell.y })}
+          className={cn(
+            "size-full rounded-xs border border-transparent hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            active?.key === cell.key && "border-ring bg-primary/20",
+          )}
+        />
+      ))}
+    </div>
+  )
+}
+
+function applyDirection(paint: GradientPaint, point: PaintPoint): GradientPaint {
+  if (paint.type === "angular") return { ...paint, from: point }
+  if (paint.type === "radial") {
+    const to =
+      point.x === 0.5 && point.y === 0.5 ? { x: 1, y: 1 } : { x: 1 - point.x, y: 1 - point.y }
+    return { ...paint, from: point, to }
+  }
+  return { ...paint, from: { x: 1 - point.x, y: 1 - point.y }, to: point }
+}
+
+export function GradientEditor({
+  paint,
+  mixed = false,
+  onChange,
+  onChangeLive,
+}: {
+  paint: GradientPaint
+  mixed?: boolean
+  onChange: (next: GradientPaint) => void
+  onChangeLive?: (next: GradientPaint) => void
+}) {
+  const [selected, setSelected] = useState(0)
+  const barRef = useRef<HTMLDivElement | null>(null)
+  const stops = paint.stops
+  const sel = Math.min(Math.max(selected, 0), stops.length - 1)
+
+  const emitStops = (source: PaintStop[], index: number, patch: Partial<PaintStop>, live: boolean): void => {
+    const next = {
+      ...paint,
+      stops: normalizeStops(source.map((s, i) => (i === index ? { ...s, ...patch } : s))),
+    }
+    if (live) onChangeLive?.(next)
+    else onChange(next)
+  }
+
+  const addStopAt = (offset: number): void => {
+    const clamped = Math.min(1, Math.max(0, offset))
+    const nextStops = normalizeStops([
+      ...stops,
+      { offset: clamped, color: interpolateStopColor(stops, clamped) },
+    ])
+    setSelected(Math.max(nextStops.findIndex((s) => s.offset === clamped), 0))
+    onChange({ ...paint, stops: nextStops })
+  }
+
+  const removeStopAt = (index: number): void => {
+    if (stops.length <= 2) return
+    const nextStops = stops.filter((_, i) => i !== index)
+    setSelected(Math.min(index, nextStops.length - 1))
+    onChange({ ...paint, stops: nextStops })
+  }
+
+  const startDrag = (index: number, e: ReactPointerEvent<HTMLButtonElement>): void => {
+    if (mixed || e.button !== 0) return
+    setSelected(index)
+    const pointerId = e.pointerId
+    const startOffset = stops[index]?.offset ?? 0
+    const offsetFromClientX = (clientX: number): number => {
+      const rect = barRef.current?.getBoundingClientRect()
+      if (!rect || rect.width <= 0) return startOffset
+      return Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+    }
+    let latest = offsetFromClientX(e.clientX)
+    const onMove = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      latest = offsetFromClientX(ev.clientX)
+      emitStops(stops, index, { offset: latest }, true)
+    }
+    const stop = (): void => {
+      document.removeEventListener("pointermove", onMove)
+      document.removeEventListener("pointerup", onUp)
+      document.removeEventListener("pointercancel", onUp)
+      window.removeEventListener("blur", onBlur)
+      // 无位移的按下-松开只做选中，不入 history
+      if (Math.abs(latest - startOffset) > 1e-6) {
+        emitStops(stops, index, { offset: latest }, false)
+      }
+    }
+    const onUp = (ev: PointerEvent): void => {
+      if (ev.pointerId !== pointerId) return
+      stop()
+    }
+    const onBlur = (): void => stop()
+    document.addEventListener("pointermove", onMove)
+    document.addEventListener("pointerup", onUp)
+    document.addEventListener("pointercancel", onUp)
+    window.addEventListener("blur", onBlur)
+  }
+
+  const anchor =
+    paint.type === "linear"
+      ? paint.to ?? { x: 1, y: 1 }
+      : paint.from ?? (paint.type === "angular" ? { x: 0.5, y: 0.5 } : { x: 0, y: 0 })
+
+  const onStopKeyDown = (index: number, e: ReactKeyboardEvent<HTMLButtonElement>): void => {
+    if ((e.key === "Delete" || e.key === "Backspace") && stops.length > 2 && !mixed) {
+      e.preventDefault()
+      removeStopAt(index)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 rounded-md bg-muted/40 p-1.5">
+      <div
+        ref={barRef}
+        data-gradient-bar
+        role="presentation"
+        aria-label={m.canvas_gradient_bar()}
+        className="relative h-5 w-full touch-none rounded-sm ring-1 ring-foreground/10"
+        style={{ background: previewBackground(paint) }}
+        onDoubleClick={(e) => {
+          if (mixed) return
+          const rect = e.currentTarget.getBoundingClientRect()
+          addStopAt(rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5)
+        }}
+      >
+        {stops.map((stop, i) => (
+          // key=i 有意保留：stops 为 {offset,color} 无 id 且直接持久化进
+          // scene paint；选中态 sel 本就以索引为身份，稳定 key 无行为收益
+          <button
+            key={i}
+            type="button"
+            disabled={mixed}
+            aria-label={m.canvas_gradient_stop({ index: i + 1 })}
+            aria-pressed={i === sel}
+            onClick={() => setSelected(i)}
+            onPointerDown={(e) => startDrag(i, e)}
+            onKeyDown={(e) => onStopKeyDown(i, e)}
+            className={cn(
+              "absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-foreground/50 shadow-xs outline-none disabled:cursor-not-allowed",
+              i === sel && "ring-2 ring-ring",
+            )}
+            style={{ left: `${stop.offset * 100}%`, backgroundColor: stop.color }}
+          />
+        ))}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-6"
+          aria-label={m.canvas_gradient_addStop()}
+          disabled={mixed}
+          onClick={() => addStopAt(0.5)}
+        >
+          <Plus className="size-3" />
+        </Button>
+        <ColorPaintPicker
+          color={stops[sel]?.color ?? "#000000"}
+          opacity={1}
+          showOpacity={false}
+          colorDisabled={mixed}
+          onChange={(color) => emitStops(stops, sel, { color }, false)}
+          onChangeLive={onChangeLive ? (color) => emitStops(stops, sel, { color }, true) : undefined}
+        />
+        <NumberDragInput
+          label={m.canvas_gradient_offset()}
+          value={stops[sel]?.offset ?? 0}
+          min={0}
+          max={1}
+          step={0.01}
+          disabled={mixed}
+          onChange={(v) => emitStops(stops, sel, { offset: v }, true)}
+          onCommit={(v) => emitStops(stops, sel, { offset: v }, false)}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-6"
+          aria-label={m.canvas_gradient_deleteStop()}
+          disabled={mixed || stops.length <= 2}
+          onClick={() => removeStopAt(sel)}
+        >
+          <Trash2 className="size-3" />
+        </Button>
+      </div>
+      <div className="flex items-start gap-2">
+        <DirectionGrid
+          value={anchor}
+          disabled={mixed}
+          onChange={(point) => onChange(applyDirection(paint, point))}
+        />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          {paint.type === "angular" ? (
+            <NumberDragInput
+              label={m.canvas_gradient_rotation()}
+              value={paint.rotation ?? 0}
+              min={-180}
+              max={180}
+              step={1}
+              unit="°"
+              disabled={mixed}
+              onChange={(rotation) => onChangeLive?.({ ...paint, rotation })}
+              onCommit={(rotation) => onChange({ ...paint, rotation })}
+            />
+          ) : null}
+          {paint.type === "radial" ? (
+            <NumberDragInput
+              label={m.canvas_gradient_stretch()}
+              value={paint.stretch ?? 1}
+              min={0.1}
+              max={4}
+              step={0.1}
+              disabled={mixed}
+              onChange={(stretch) => onChangeLive?.({ ...paint, stretch })}
+              onCommit={(stretch) => onChange({ ...paint, stretch })}
+            />
+          ) : null}
+          <NumberDragInput
+            label={m.canvas_opacityField()}
+            value={Math.round(paint.opacity * 100)}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            disabled={mixed}
+            onChange={(v) => onChangeLive?.({ ...paint, opacity: v / 100 })}
+            onCommit={(v) => onChange({ ...paint, opacity: v / 100 })}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}