site-builder/craft/src/panels/right/styles/ImageStylePanel.tsx

import React, { CSSProperties } from 'react';
import { useEditor } from '@craftjs/core';
import {
  IMAGE_RADIUS_PRESETS,
  OBJECT_FIT,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  PresetButtonGrid,
  TextInputField,
  SizeControl,
  AspectRatioControl,
  FocalPointGrid,
  useNodeProp,
} from './shared';
import { AssetPicker } from '../../../ui/AssetPicker';
import { PLACEHOLDER_SRC } from '../../../components/media/ImageBlock';
import { BoxModelSection, BorderEffectsSection, AnimVisSection } from './mediaBoxModel';

/* ---------- IMAGE (with upload/browse/drop) ---------- */
export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { actions } = useEditor();
  const style: CSSProperties = nodeProps.style || {};

  const { setProp, setPropStyle } = useNodeProp(selectedId);

  return (
    <>
      {/* Image source */}
      <div className="guided-section">
        <SectionLabel>Image Source</SectionLabel>
        <AssetPicker
          value={nodeProps.src || ''}
          onChange={(url) => actions.setProp(selectedId, (props: any) => { props.src = url || PLACEHOLDER_SRC; })}
          variant="full"
        />
      </div>

      {/* Alt Text */}
      <TextInputField
        label="Alt Text"
        value={nodeProps.alt || ''}
        placeholder="Describe the image..."
        onChange={(v) => {
          actions.setProp(selectedId, (props: any) => { props.alt = v; });
        }}
      />

      {/* Size -- Width absorbs the historical maxWidth presets (25/50/75/100%
          are a subset of SizeControl's default preset row), Height is new. */}
      <SizeControl
        label="Width"
        value={(style.maxWidth as string) || ''}
        onChange={(v) => setPropStyle('maxWidth', v)}
      />
      <SizeControl
        label="Height"
        value={(style.height as string) || ''}
        onChange={(v) => setPropStyle('height', v)}
      />

      {/* Crop & Framing -- aspect-ratio + object-fit + object-position on the
          <img> itself is a CSS framing crop (no server-side image processing
          needed). */}
      <AspectRatioControl
        value={(style.aspectRatio as string) || ''}
        onChange={(v) => setPropStyle('aspectRatio', v)}
      />
      <div className="guided-section">
        <SectionLabel>Object Fit</SectionLabel>
        <PresetButtonGrid
          presets={OBJECT_FIT}
          activeValue={(style.objectFit as string) || ''}
          onSelect={(v) => setPropStyle('objectFit', v)}
        />
      </div>
      <FocalPointGrid
        value={(style.objectPosition as string) || ''}
        onChange={(v) => setPropStyle('objectPosition', v)}
      />

      {/* Border Radius */}
      <div className="guided-section">
        <SectionLabel>Border Radius</SectionLabel>
        <PresetButtonGrid
          presets={IMAGE_RADIUS_PRESETS}
          activeValue={style.borderRadius as string}
          onSelect={(v) => setPropStyle('borderRadius', v)}
        />
      </div>

      {/* Box model + animation/visibility rollout */}
      <BoxModelSection style={style} setPropStyle={setPropStyle} />
      <BorderEffectsSection style={style} setPropStyle={setPropStyle} />
      <AnimVisSection nodeProps={nodeProps} setProp={setProp} />
    </>
  );
};