@allbluecn/web-app 0.17.2 → 0.18.0

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

@@ -0,0 +1,583 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// FS-7.3 着色器预设面板：预设网格（i18n 名称 + CSS 静态缩略）+ 参数编辑。
+// 通用段（speed 0~3 / scale 0.25~4 / rotation 0~360 / offsetX/Y -1~1 / fit contain|cover）
+// + 业务段（按 preset defaultProps 动态展开：colors 色列表 ≤maxColors / 单色 / 数值 / 布尔 / 枚举）。
+// 静态缩略用 CSS 渐变近似（不为 12 预设各起一个 WebGL 上下文，jsdom 安全零开销）。
+// 所有变更整体赋值整层 paint 对象（leafer 官方：改子属性不触发 setter）。
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+
+import type { ShaderPaint } from "../../document/style/paints"
+import {
+  SHADER_PRESET_DEFS,
+  SHADER_SIZING_KEYS,
+  colorListOf,
+  createShaderProps,
+  shaderPresetDefOf,
+  type ShaderPresetDef,
+} from "../../plugins/shader/presets"
+import { Button } from "@allbluecn/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@allbluecn/ui/select"
+import { Switch } from "@allbluecn/ui/switch"
+import { cn } from "@/lib/utils"
+import { m } from "@/paraglide/messages.js"
+
+import { ColorPaintPicker } from "./color-paint-picker"
+import { NumberDragInput } from "./number-drag-input"
+import { presetPreviewBackground } from "./shader-picker-utils"
+
+// ===== 预设展示名（R7：SHADER_PRESETS.name 为硬编码中文，面板一律走 i18n） =====
+
+const PRESET_NAME_LABELS: Record<string, () => string> = {
+  "mesh-gradient": m.canvas_shader_preset_meshGradient,
+  voronoi: m.canvas_shader_preset_voronoi,
+  metaballs: m.canvas_shader_preset_metaballs,
+  "god-rays": m.canvas_shader_preset_godRays,
+  "perlin-noise": m.canvas_shader_preset_perlinNoise,
+  "simplex-noise": m.canvas_shader_preset_simplexNoise,
+  "dot-grid": m.canvas_shader_preset_dotGrid,
+  "dot-orbit": m.canvas_shader_preset_dotOrbit,
+  waves: m.canvas_shader_preset_waves,
+  swirl: m.canvas_shader_preset_swirl,
+  "paper-texture": m.canvas_shader_preset_paperTexture,
+  "halftone-dots": m.canvas_shader_preset_halftoneDots,
+}
+
+export function shaderPresetName(id: string): string {
+  return PRESET_NAME_LABELS[id]?.() ?? id
+}
+
+// ===== 业务参数标签与规格 =====
+
+const PARAM_LABELS: Record<string, () => string> = {
+  colorGap: m.canvas_shader_param_colorGap,
+  colorGlow: m.canvas_shader_param_colorGlow,
+  colorBack: m.canvas_shader_param_colorBack,
+  colorBloom: m.canvas_shader_param_colorBloom,
+  colorFront: m.canvas_shader_param_colorFront,
+  colorFill: m.canvas_shader_param_colorFill,
+  colorStroke: m.canvas_shader_param_colorStroke,
+  colorPaper: m.canvas_shader_param_colorPaper,
+  colorShadow: m.canvas_shader_param_colorShadow,
+  distortion: m.canvas_shader_param_distortion,
+  swirl: m.canvas_shader_param_swirl,
+  grainMixer: m.canvas_shader_param_grainMixer,
+  grainOverlay: m.canvas_shader_param_grainOverlay,
+  grainSize: m.canvas_shader_param_grainSize,
+  stepsPerColor: m.canvas_shader_param_stepsPerColor,
+  gap: m.canvas_shader_param_gap,
+  glow: m.canvas_shader_param_glow,
+  count: m.canvas_shader_param_count,
+  size: m.canvas_shader_param_size,
+  spotty: m.canvas_shader_param_spotty,
+  midSize: m.canvas_shader_param_midSize,
+  midIntensity: m.canvas_shader_param_midIntensity,
+  density: m.canvas_shader_param_density,
+  intensity: m.canvas_shader_param_intensity,
+  bloom: m.canvas_shader_param_bloom,
+  proportion: m.canvas_shader_param_proportion,
+  softness: m.canvas_shader_param_softness,
+  octaveCount: m.canvas_shader_param_octaveCount,
+  persistence: m.canvas_shader_param_persistence,
+  lacunarity: m.canvas_shader_param_lacunarity,
+  gapX: m.canvas_shader_param_gapX,
+  gapY: m.canvas_shader_param_gapY,
+  strokeWidth: m.canvas_shader_param_strokeWidth,
+  sizeRange: m.canvas_shader_param_sizeRange,
+  opacityRange: m.canvas_shader_param_opacityRange,
+  spreading: m.canvas_shader_param_spreading,
+  shape: m.canvas_shader_param_shape,
+  frequency: m.canvas_shader_param_frequency,
+  amplitude: m.canvas_shader_param_amplitude,
+  spacing: m.canvas_shader_param_spacing,
+  bandCount: m.canvas_shader_param_bandCount,
+  twist: m.canvas_shader_param_twist,
+  center: m.canvas_shader_param_center,
+  noiseFrequency: m.canvas_shader_param_noiseFrequency,
+  noise: m.canvas_shader_param_noise,
+  blending: m.canvas_shader_param_blending,
+  clip: m.canvas_shader_param_clip,
+  angle: m.canvas_shader_param_angle,
+  seed: m.canvas_shader_param_seed,
+  roughness: m.canvas_shader_param_roughness,
+  roughnessSize: m.canvas_shader_param_roughnessSize,
+  roughnessRows: m.canvas_shader_param_roughnessRows,
+  fiber: m.canvas_shader_param_fiber,
+  fiberSize: m.canvas_shader_param_fiberSize,
+  folds: m.canvas_shader_param_folds,
+  foldSizeX: m.canvas_shader_param_foldSizeX,
+  foldSizeY: m.canvas_shader_param_foldSizeY,
+  foldOffsetX: m.canvas_shader_param_foldOffsetX,
+  foldOffsetY: m.canvas_shader_param_foldOffsetY,
+  wrinkles: m.canvas_shader_param_wrinkles,
+  wrinkleSize: m.canvas_shader_param_wrinkleSize,
+  crumples: m.canvas_shader_param_crumples,
+  crumpleCount: m.canvas_shader_param_crumpleCount,
+  drops: m.canvas_shader_param_drops,
+  radius: m.canvas_shader_param_radius,
+  contrast: m.canvas_shader_param_contrast,
+  originalColors: m.canvas_shader_param_originalColors,
+  inverted: m.canvas_shader_param_inverted,
+  grid: m.canvas_shader_param_grid,
+  type: m.canvas_shader_param_type,
+}
+
+function paramLabel(prop: string): string {
+  return PARAM_LABELS[prop]?.() ?? prop
+}
+
+const ENUM_OPTION_LABELS: Record<string, () => string> = {
+  circle: m.canvas_shader_enum_circle,
+  diamond: m.canvas_shader_enum_diamond,
+  square: m.canvas_shader_enum_square,
+  triangle: m.canvas_shader_enum_triangle,
+  hex: m.canvas_shader_enum_hex,
+  classic: m.canvas_shader_enum_classic,
+  gooey: m.canvas_shader_enum_gooey,
+  holes: m.canvas_shader_enum_holes,
+  soft: m.canvas_shader_enum_soft,
+}
+
+// 枚举参数可选项（与包 XxxParams 枚举一致：DotGridShapes / HalftoneDotsGrids / HalftoneDotsTypes）
+const ENUM_OPTIONS: Record<string, Record<string, string[]>> = {
+  "dot-grid": { shape: ["circle", "diamond", "square", "triangle"] },
+  "halftone-dots": { grid: ["square", "hex"], type: ["classic", "gooey", "holes", "soft"] },
+}
+
+// 数值区间：比例类 0~1 兜底；整数量类/特殊量按官方 props 语义给区间
+const NUMBER_RANGES: Record<string, { min: number; max: number; step: number }> = {
+  stepsPerColor: { min: 1, max: 10, step: 1 },
+  count: { min: 1, max: 20, step: 1 },
+  octaveCount: { min: 1, max: 8, step: 1 },
+  crumpleCount: { min: 1, max: 15, step: 1 },
+  bandCount: { min: 1, max: 32, step: 1 },
+  noiseFrequency: { min: 0, max: 8, step: 0.5 },
+  angle: { min: 0, max: 360, step: 1 },
+  seed: { min: 0, max: 10, step: 1 },
+  frequency: { min: 0, max: 10, step: 0.1 },
+  lacunarity: { min: 1, max: 4, step: 0.5 },
+  shape: { min: 0, max: 2, step: 1 },
+}
+
+function numberRangeOf(prop: string, value: number): { min: number; max: number; step: number } {
+  return NUMBER_RANGES[prop] ?? (Number.isInteger(value) && value > 1 ? { min: 0, max: value * 2, step: 1 } : { min: 0, max: 1, step: 0.01 })
+}
+
+function numOf(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback
+}
+
+function isColorString(value: unknown): value is string {
+  return typeof value === "string" && /^#[0-9a-fA-F]{3,8}$/.test(value)
+}
+
+// ===== 静态缩略（CSS 渐变近似，不跑实时 WebGL） =====
+
+/** 从 defaultProps 提取缩略色板：colors 列表优先，否则取值序前 4 个 hex 颜色 */
+
+// ===== 预设网格 =====
+
+export function ShaderPresetPicker({
+  value,
+  disabled = false,
+  onPick,
+}: {
+  value: string
+  disabled?: boolean
+  onPick: (shaderId: string) => void
+}) {
+  return (
+    <div role="group" aria-label={m.canvas_shader_preset()} className="grid grid-cols-3 gap-1">
+      {SHADER_PRESET_DEFS.map((def) => (
+        <button
+          key={def.id}
+          type="button"
+          data-shader-preset={def.id}
+          aria-label={shaderPresetName(def.id)}
+          aria-pressed={def.id === value}
+          disabled={disabled}
+          onClick={() => onPick(def.id)}
+          className={cn(
+            "group flex min-w-0 flex-col overflow-hidden rounded-sm border outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            def.id === value ? "border-ring ring-2 ring-ring" : "border-border hover:border-foreground/40",
+          )}
+        >
+          <span
+            aria-hidden
+            data-shader-thumb
+            className="h-8 w-full"
+            style={{ background: presetPreviewBackground(def) }}
+          />
+          <span className="truncate px-1 py-0.5 text-[10px] text-muted-foreground group-hover:text-foreground">
+            {shaderPresetName(def.id)}
+          </span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+// ===== colors 色列表（≤ preset.maxColors） =====
+
+function ShaderColorList({
+  colors,
+  max,
+  disabled = false,
+  onChange,
+  onChangeLive,
+}: {
+  colors: string[]
+  max: number
+  disabled?: boolean
+  onChange: (colors: string[]) => void
+  onChangeLive?: (colors: string[]) => void
+}) {
+  const [selected, setSelected] = useState(0)
+  const sel = Math.min(Math.max(selected, 0), colors.length - 1)
+  return (
+    <div role="group" aria-label={m.canvas_shader_colors()} className="flex flex-col gap-1">
+      <div className="flex items-center gap-1">
+        <span className="shrink-0 text-[10px] text-muted-foreground">{m.canvas_shader_colors()}</span>
+        <span className="text-[10px] tabular-nums text-muted-foreground">{`${colors.length}/${max}`}</span>
+        <span className="flex-1" />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-6"
+          aria-label={m.canvas_shader_addColor()}
+          disabled={disabled || colors.length >= max}
+          onClick={() => {
+            const next = [...colors, colors[sel] ?? "#94a3b8"]
+            setSelected(colors.length)
+            onChange(next)
+          }}
+        >
+          <Plus className="size-3" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-6"
+          aria-label={m.canvas_shader_removeColor()}
+          disabled={disabled || colors.length <= 1}
+          onClick={() => {
+            setSelected(Math.max(0, sel - 1))
+            onChange(colors.filter((_, i) => i !== sel))
+          }}
+        >
+          <Trash2 className="size-3" />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-1">
+        {colors.map((color, i) => (
+          // key=i 有意保留：颜色为纯字符串值（无 id）且以索引为选中身份，
+          // 列表仅增删尾部/选中项，index 身份与选中态语义一致
+          <button
+            key={i}
+            type="button"
+            aria-label={m.canvas_shader_color({ index: i + 1 })}
+            aria-pressed={i === sel}
+            disabled={disabled}
+            onClick={() => setSelected(i)}
+            className={cn(
+              "size-4 rounded-full border border-foreground/30 shadow-xs outline-none disabled:cursor-not-allowed",
+              i === sel && "ring-2 ring-ring",
+            )}
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+      <ColorPaintPicker
+        color={colors[sel] ?? "#000000"}
+        opacity={1}
+        showOpacity={false}
+        colorDisabled={disabled}
+        onChange={(color) => onChange(colors.map((c, i) => (i === sel ? color : c)))}
+        onChangeLive={
+          onChangeLive ? (color) => onChangeLive(colors.map((c, i) => (i === sel ? color : c))) : undefined
+        }
+      />
+    </div>
+  )
+}
+
+// ===== 业务参数（按 preset defaultProps 动态展开） =====
+
+type EmitProps = (patch: Record<string, unknown>, live: boolean) => void
+
+function BusinessParams({
+  def,
+  props,
+  mixed,
+  emitProps,
+}: {
+  def: ShaderPresetDef
+  props: Record<string, unknown>
+  mixed: boolean
+  emitProps: EmitProps
+}) {
+  const sizing = SHADER_SIZING_KEYS as readonly string[]
+  const entries = Object.entries(props).filter(([key]) => !sizing.includes(key))
+  const colorListMax = def.maxColors > 0 ? def.maxColors : 10
+
+  const colorListNode = entries
+    .filter(([key, v]) => key === "colors" && Array.isArray(v))
+    .map(([key, v]) => (
+      <ShaderColorList
+        key={key}
+        colors={(v as unknown[]).filter(isColorString)}
+        max={colorListMax}
+        disabled={mixed}
+        onChange={(colors) => emitProps({ colors }, false)}
+        onChangeLive={(colors) => emitProps({ colors }, true)}
+      />
+    ))
+
+  const colorNodes = entries.flatMap(([key, v]) => {
+    if (key === "colors" || !isColorString(v)) return []
+    return [
+      <div key={key} role="group" aria-label={paramLabel(key)} className="flex items-center gap-1.5">
+        <span className="w-16 shrink-0 truncate text-[10px] text-muted-foreground">{paramLabel(key)}</span>
+        <ColorPaintPicker
+          color={v}
+          opacity={1}
+          showOpacity={false}
+          colorDisabled={mixed}
+          onChange={(next) => emitProps({ [key]: next }, false)}
+          onChangeLive={(next) => emitProps({ [key]: next }, true)}
+        />
+      </div>,
+    ]
+  })
+
+  const numberNodes = entries
+    .filter(([key, v]) => key !== "shape" || def.id === "waves")
+    .filter(([, v]) => typeof v === "number" && Number.isFinite(v))
+    .map(([key, v]) => {
+      const range = numberRangeOf(key, v as number)
+      return (
+        <NumberDragInput
+          key={key}
+          label={paramLabel(key)}
+          value={v as number}
+          min={range.min}
+          max={range.max}
+          step={range.step}
+          disabled={mixed}
+          onChange={(next) => emitProps({ [key]: next }, true)}
+          onCommit={(next) => emitProps({ [key]: next }, false)}
+        />
+      )
+    })
+
+  const booleanNodes = entries
+    .filter(([, v]) => typeof v === "boolean")
+    .map(([key, v]) => (
+      <div
+        key={key}
+        className="flex h-7 items-center justify-between gap-2 rounded-md bg-muted/50 px-2"
+      >
+        <span className="shrink-0 text-[10px] text-muted-foreground">{paramLabel(key)}</span>
+        <Switch
+          checked={v === true}
+          disabled={mixed}
+          aria-label={paramLabel(key)}
+          onCheckedChange={(next) => emitProps({ [key]: next }, false)}
+        />
+      </div>
+    ))
+
+  const enumNodes = entries
+    .filter(([key, v]) => typeof v === "string" && !isColorString(v) && ENUM_OPTIONS[def.id]?.[key])
+    .map(([key, v]) => {
+      const options = ENUM_OPTIONS[def.id][key]
+      const current = options.includes(v as string) ? (v as string) : options[0]
+      const items = options.map((option) => ({ value: option, label: ENUM_OPTION_LABELS[option]?.() ?? option }))
+      return (
+        <div key={key} className="flex items-center gap-1.5">
+          <span className="w-16 shrink-0 truncate text-[10px] text-muted-foreground">{paramLabel(key)}</span>
+          <Select
+            items={items}
+            value={current}
+            onValueChange={(next) => {
+              if (next) emitProps({ [key]: next }, false)
+            }}
+          >
+            <SelectTrigger className="h-7 min-w-0 flex-1 text-xs" disabled={mixed} aria-label={paramLabel(key)}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )
+    })
+
+  return (
+    <div className="flex flex-col gap-1">
+      {colorListNode}
+      {colorNodes}
+      <div className="grid grid-cols-2 gap-1">{numberNodes}</div>
+      {booleanNodes}
+      {enumNodes}
+    </div>
+  )
+}
+
+// ===== 参数编辑器（rows.tsx PaintFields shader 分支挂载） =====
+
+// 标签在渲染时求值（paraglide locale 运行时解析，模块级求值会冻结早于
+// setup 的 locale 覆盖——与 rows.tsx capLabel 同惯例）
+function fitItems(): Array<{ value: "contain" | "cover"; label: string }> {
+  return [
+    { value: "contain", label: m.canvas_shader_fit_contain() },
+    { value: "cover", label: m.canvas_shader_fit_cover() },
+  ]
+}
+
+export function ShaderPaintFields({
+  value,
+  mixed = false,
+  onChange,
+  onChangeLive,
+}: {
+  value: ShaderPaint
+  mixed?: boolean
+  onChange: (next: ShaderPaint) => void
+  onChangeLive?: (next: ShaderPaint) => void
+}) {
+  const def = shaderPresetDefOf(value.shaderId)
+  const props = value.props ?? {}
+
+  const emitProps: EmitProps = (patch, live) => {
+    const next = { ...value, props: { ...props, ...patch } }
+    if (live) onChangeLive?.(next)
+    else onChange(next)
+  }
+  const emitPaint = (patch: Partial<ShaderPaint>, live: boolean): void => {
+    const next = { ...value, ...patch }
+    if (live) onChangeLive?.(next)
+    else onChange(next)
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 rounded-md bg-muted/40 p-1.5">
+      <ShaderPresetPicker
+        value={value.shaderId}
+        disabled={mixed || !def}
+        onPick={(shaderId) => {
+          const nextDef = shaderPresetDefOf(shaderId)
+          if (!nextDef) return
+          const nextProps = createShaderProps(shaderId)
+          // 保留用户已调的色列表（跨预设复用），无则用预设初始（主题双色）；
+          // 超出目标预设 maxColors 时截断（GLSL uniform 定长数组，超长会越界）
+          const currentColors = colorListOf(props)
+          if (Array.isArray(nextProps.colors) && currentColors.length > 0) {
+            nextProps.colors = currentColors.slice(0, nextDef.maxColors)
+          }
+          onChange({ ...value, shaderId, props: nextProps })
+        }}
+      />
+      {/* FS-7.3 通用参数：speed 为 paint 顶层字段，其余 sizing 入 props */}
+      <div className="grid grid-cols-2 gap-1">
+        <NumberDragInput
+          label={m.canvas_shader_speed()}
+          value={numOf(value.speed, 1)}
+          min={0}
+          max={3}
+          step={0.1}
+          disabled={mixed}
+          onChange={(speed) => emitPaint({ speed }, true)}
+          onCommit={(speed) => emitPaint({ speed }, false)}
+        />
+        <NumberDragInput
+          label={m.canvas_shader_scale()}
+          value={numOf(props.scale, 1)}
+          min={0.25}
+          max={4}
+          step={0.05}
+          disabled={mixed}
+          onChange={(scale) => emitProps({ scale }, true)}
+          onCommit={(scale) => emitProps({ scale }, false)}
+        />
+        <NumberDragInput
+          label={m.canvas_shader_rotation()}
+          value={numOf(props.rotation, 0)}
+          min={0}
+          max={360}
+          step={1}
+          unit="°"
+          disabled={mixed}
+          onChange={(rotation) => emitProps({ rotation }, true)}
+          onCommit={(rotation) => emitProps({ rotation }, false)}
+        />
+        <NumberDragInput
+          label={m.canvas_shader_offsetX()}
+          value={numOf(props.offsetX, 0)}
+          min={-1}
+          max={1}
+          step={0.01}
+          disabled={mixed}
+          onChange={(offsetX) => emitProps({ offsetX }, true)}
+          onCommit={(offsetX) => emitProps({ offsetX }, false)}
+        />
+        <NumberDragInput
+          label={m.canvas_shader_offsetY()}
+          value={numOf(props.offsetY, 0)}
+          min={-1}
+          max={1}
+          step={0.01}
+          disabled={mixed}
+          onChange={(offsetY) => emitProps({ offsetY }, true)}
+          onCommit={(offsetY) => emitProps({ offsetY }, false)}
+        />
+        <div className="flex items-center gap-1.5">
+          <span className="shrink-0 text-[10px] text-muted-foreground">{m.canvas_shader_fit()}</span>
+          <Select
+            items={fitItems()}
+            value={props.fit === "cover" ? "cover" : "contain"}
+            onValueChange={(next) => {
+              if (next) emitProps({ fit: next }, false)
+            }}
+          >
+            <SelectTrigger className="h-7 min-w-0 flex-1 text-xs" disabled={mixed} aria-label={m.canvas_shader_fit()}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {fitItems().map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      {def ? <BusinessParams def={def} props={props} mixed={mixed} emitProps={emitProps} /> : null}
+      <NumberDragInput
+        label={m.canvas_opacityField()}
+        value={Math.round(value.opacity * 100)}
+        min={0}
+        max={100}
+        step={1}
+        unit="%"
+        disabled={mixed}
+        onChange={(v) => emitPaint({ opacity: v / 100 }, true)}
+        onCommit={(v) => emitPaint({ opacity: v / 100 }, false)}
+      />
+    </div>
+  )
+}

package/src/components/design/canvas/panels/controls/shape-slider-row.tsx

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Slider } from "@/components/ui/slider";
+
+// FS-2.5 图形参数滑杆行：拖动实时预览（onPreview，不入 history）、松手提交
+// （onCommit，入 history）。role=group + aria-label 提供可访问名（base-ui
+// slider 的 role=slider 在 thumb 上，aria-label 需挂在容器才能被测试/读屏定位）
+export function ShapeSliderRow({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onPreview,
+  onCommit,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onPreview: (value: number) => void;
+  onCommit: (value: number) => void;
+}) {
+  // ui/slider 包装层以 _values.length 决定 thumb 数量：number 会落到
+  // [min,max] 双 thumb 兜底，故单值滑杆须传单元素数组；回调值兜底取首个
+  const valueOf = (next: number | readonly number[]): number =>
+    typeof next === "number" ? next : next[0];
+  return (
+    <div role="group" aria-label={label} className="flex flex-col gap-1">
+      <span className="text-[10px] text-muted-foreground">{label}</span>
+      <Slider
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={(next) => onPreview(valueOf(next))}
+        onValueCommitted={(next) => onCommit(valueOf(next))}
+      />
+    </div>
+  );
+}

package/src/components/design/canvas/panels/controls/text-style-button.tsx

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@allbluecn/ui/button";
+
+// 文字对齐图标组按钮：aria-pressed 标记激活项（激活态底色 + 主色）
+export function TextStyleButton({
+  label,
+  active,
+  onClick,
+  children,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className={cn("size-6 rounded-md", active && "bg-muted text-primary")}
+      aria-pressed={active}
+      aria-label={label}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/design/canvas/panels/controls/toolbar-button.tsx

@@ -0,0 +1,43 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@allbluecn/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+
+export function ToolbarButton({
+  label,
+  onClick,
+  children,
+  disabled = false,
+  active = false,
+}: {
+  label: string;
+  onClick: () => void;
+  children: ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className={cn("size-6 rounded-md", active && "bg-muted text-primary")}
+            aria-pressed={active}
+            aria-label={label}
+            disabled={disabled}
+            onClick={onClick}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{label}</TooltipContent>
+    </Tooltip>
+  );
+}