fix(image-radius): split out 3x-scale IMAGE_RADIUS_PRESETS for the image picker

Image radii need to be visibly larger than the radius scale that works for
buttons/containers — at typical photo dimensions, 16px reads as nearly
square. Add an image-specific scale at 3x the shared values (S=24px,
M=48px, L=96px) and route ImageStylePanel through it. Other components
(buttons, sections, containers) keep RADIUS_PRESETS unchanged.

Note: this commit also bundles unrelated pre-existing working-tree changes
in the legacy GrapesJS site-builder root (CLAUDE.md, index.html,
css/editor.css, js/assets.js, js/editor.js, js/whp-integration.js) that
were inadvertently picked up by an earlier `git add -u`. The image-radius
change is the only intentional content of this commit; the rest is
in-progress legacy work that happened to be sitting uncommitted.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-26 21:31:58 -07:00
parent 8eeaecd857
commit 606c9b78c8
8 changed files with 1591 additions and 364 deletions

View File

@@ -64,6 +64,16 @@ export const RADIUS_PRESETS = [
{ label: 'Full', value: '9999px' },
];
// Images need a larger radius scale than buttons/containers to be visually
// distinct on typical photo dimensions.
export const IMAGE_RADIUS_PRESETS = [
{ label: 'None', value: '0' },
{ label: 'S', value: '24px' },
{ label: 'M', value: '48px' },
{ label: 'L', value: '96px' },
{ label: 'Full', value: '9999px' },
];
export const GRADIENTS = [
{ label: 'Purple Dream', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
{ label: 'Pink Sunset', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },

View File

@@ -1,7 +1,7 @@
import React, { useState, useCallback, useRef, CSSProperties } from 'react';
import { useEditor } from '@craftjs/core';
import {
RADIUS_PRESETS,
IMAGE_RADIUS_PRESETS,
} from '../../../constants/presets';
import {
StylePanelProps,
@@ -195,7 +195,7 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
<div className="guided-section">
<SectionLabel>Border Radius</SectionLabel>
<PresetButtonGrid
presets={RADIUS_PRESETS}
presets={IMAGE_RADIUS_PRESETS}
activeValue={style.borderRadius as string}
onSelect={(v) => setPropStyle('borderRadius', v)}
/>